Spaces:
Running
Running
| <html lang="ar" dir="rtl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>علي إكسبريس - تسوق أونلاين</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| :root { | |
| --primary: #ff4747; | |
| --primary-dark: #e63e3e; | |
| --secondary: #ff6b6b; | |
| --accent: #ffd700; | |
| --dark: #1a1a1a; | |
| --gray: #f5f5f5; | |
| --gray-dark: #666; | |
| --white: #ffffff; | |
| --shadow: 0 2px 8px rgba(0,0,0,0.1); | |
| --shadow-lg: 0 4px 12px rgba(0,0,0,0.15); | |
| --radius: 8px; | |
| --radius-lg: 16px; | |
| --transition: all 0.3s ease; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| background-color: var(--gray); | |
| color: var(--dark); | |
| line-height: 1.6; | |
| } | |
| /* Scrollbar Styling */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: var(--gray); | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: var(--primary); | |
| border-radius: 4px; | |
| } | |
| /* Header Styles */ | |
| .top-bar { | |
| background: var(--dark); | |
| color: var(--white); | |
| padding: 8px 0; | |
| font-size: 0.85rem; | |
| } | |
| .container { | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| padding: 0 20px; | |
| } | |
| .top-bar-content { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .top-links a { | |
| color: var(--white); | |
| text-decoration: none; | |
| margin: 0 10px; | |
| transition: var(--transition); | |
| } | |
| .top-links a:hover { | |
| color: var(--primary); | |
| } | |
| /* Main Header */ | |
| .main-header { | |
| background: var(--white); | |
| padding: 15px 0; | |
| position: sticky; | |
| top: 0; | |
| z-index: 1000; | |
| box-shadow: var(--shadow); | |
| } | |
| .header-content { | |
| display: flex; | |
| align-items: center; | |
| gap: 30px; | |
| } | |
| .logo { | |
| font-size: 2rem; | |
| font-weight: bold; | |
| color: var(--primary); | |
| text-decoration: none; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .search-box { | |
| flex: 1; | |
| position: relative; | |
| max-width: 600px; | |
| } | |
| .search-box input { | |
| width: 100%; | |
| padding: 12px 45px 12px 20px; | |
| border: 2px solid var(--primary); | |
| border-radius: 30px; | |
| font-size: 1rem; | |
| transition: var(--transition); | |
| } | |
| .search-box input:focus { | |
| outline: none; | |
| box-shadow: 0 0 0 3px rgba(255, 71, 71, 0.1); | |
| } | |
| .search-btn { | |
| position: absolute; | |
| left: 5px; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| background: var(--primary); | |
| color: white; | |
| border: none; | |
| width: 36px; | |
| height: 36px; | |
| border-radius: 50%; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| } | |
| .search-btn:hover { | |
| background: var(--primary-dark); | |
| } | |
| .header-actions { | |
| display: flex; | |
| gap: 25px; | |
| align-items: center; | |
| } | |
| .action-btn { | |
| position: relative; | |
| cursor: pointer; | |
| text-align: center; | |
| transition: var(--transition); | |
| } | |
| .action-btn:hover { | |
| color: var(--primary); | |
| transform: translateY(-2px); | |
| } | |
| .action-btn i { | |
| font-size: 1.5rem; | |
| display: block; | |
| margin-bottom: 4px; | |
| } | |
| .action-btn span { | |
| font-size: 0.8rem; | |
| display: block; | |
| } | |
| .badge { | |
| position: absolute; | |
| top: -5px; | |
| right: -5px; | |
| background: var(--primary); | |
| color: white; | |
| font-size: 0.7rem; | |
| width: 20px; | |
| height: 20px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-weight: bold; | |
| } | |
| /* Navigation */ | |
| .main-nav { | |
| background: var(--white); | |
| border-top: 1px solid #eee; | |
| padding: 10px 0; | |
| } | |
| .nav-content { | |
| display: flex; | |
| gap: 30px; | |
| overflow-x: auto; | |
| scrollbar-width: none; | |
| } | |
| .nav-content::-webkit-scrollbar { | |
| display: none; | |
| } | |
| .nav-item { | |
| white-space: nowrap; | |
| cursor: pointer; | |
| padding: 5px 15px; | |
| border-radius: 20px; | |
| transition: var(--transition); | |
| font-weight: 500; | |
| } | |
| .nav-item:hover, .nav-item.active { | |
| background: var(--primary); | |
| color: white; | |
| } | |
| /* Hero Section */ | |
| .hero-section { | |
| margin: 20px 0; | |
| } | |
| .hero-grid { | |
| display: grid; | |
| grid-template-columns: 250px 1fr 300px; | |
| gap: 20px; | |
| height: 400px; | |
| } | |
| .categories-sidebar { | |
| background: white; | |
| border-radius: var(--radius-lg); | |
| padding: 20px; | |
| box-shadow: var(--shadow); | |
| overflow-y: auto; | |
| } | |
| .category-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| padding: 10px; | |
| cursor: pointer; | |
| border-radius: var(--radius); | |
| transition: var(--transition); | |
| margin-bottom: 5px; | |
| } | |
| .category-item:hover { | |
| background: var(--gray); | |
| color: var(--primary); | |
| } | |
| .category-item i { | |
| width: 24px; | |
| text-align: center; | |
| } | |
| .hero-slider { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| border-radius: var(--radius-lg); | |
| position: relative; | |
| overflow: hidden; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: white; | |
| text-align: center; | |
| padding: 40px; | |
| } | |
| .hero-content h1 { | |
| font-size: 2.5rem; | |
| margin-bottom: 15px; | |
| text-shadow: 2px 2px 4px rgba(0,0,0,0.2); | |
| } | |
| .hero-content p { | |
| font-size: 1.2rem; | |
| margin-bottom: 25px; | |
| } | |
| .btn-primary { | |
| background: var(--primary); | |
| color: white; | |
| border: none; | |
| padding: 12px 30px; | |
| border-radius: 25px; | |
| font-size: 1rem; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| font-weight: bold; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .btn-primary:hover { | |
| background: var(--primary-dark); | |
| transform: translateY(-2px); | |
| box-shadow: 0 5px 15px rgba(255, 71, 71, 0.3); | |
| } | |
| .deals-sidebar { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 15px; | |
| } | |
| .deal-card { | |
| background: white; | |
| border-radius: var(--radius-lg); | |
| padding: 20px; | |
| flex: 1; | |
| box-shadow: var(--shadow); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .deal-card::before { | |
| content: 'خصم 50%'; | |
| position: absolute; | |
| top: 10px; | |
| right: -30px; | |
| background: var(--primary); | |
| color: white; | |
| padding: 5px 40px; | |
| transform: rotate(45deg); | |
| font-size: 0.8rem; | |
| font-weight: bold; | |
| } | |
| .countdown { | |
| display: flex; | |
| gap: 10px; | |
| margin-top: 15px; | |
| justify-content: center; | |
| } | |
| .countdown-item { | |
| background: var(--dark); | |
| color: white; | |
| padding: 8px; | |
| border-radius: var(--radius); | |
| min-width: 40px; | |
| text-align: center; | |
| } | |
| .countdown-item span { | |
| display: block; | |
| font-size: 1.2rem; | |
| font-weight: bold; | |
| } | |
| .countdown-item small { | |
| font-size: 0.7rem; | |
| } | |
| /* Products Section */ | |
| .section-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin: 40px 0 20px; | |
| } | |
| .section-title { | |
| font-size: 1.8rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .section-title i { | |
| color: var(--primary); | |
| } | |
| .view-all { | |
| color: var(--primary); | |
| text-decoration: none; | |
| font-weight: 500; | |
| display: flex; | |
| align-items: center; | |
| gap: 5px; | |
| } | |
| .products-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); | |
| gap: 20px; | |
| } | |
| .product-card { | |
| background: white; | |
| border-radius: var(--radius-lg); | |
| overflow: hidden; | |
| box-shadow: var(--shadow); | |
| transition: var(--transition); | |
| cursor: pointer; | |
| position: relative; | |
| } | |
| .product-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: var(--shadow-lg); | |
| } | |
| .product-image { | |
| width: 100%; | |
| height: 250px; | |
| object-fit: cover; | |
| background: var(--gray); | |
| } | |
| .product-info { | |
| padding: 15px; | |
| } | |
| .product-title { | |
| font-size: 0.95rem; | |
| margin-bottom: 8px; | |
| display: -webkit-box; | |
| -webkit-line-clamp: 2; | |
| -webkit-box-orient: vertical; | |
| overflow: hidden; | |
| height: 45px; | |
| } | |
| .product-price { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| margin-bottom: 8px; | |
| } | |
| .current-price { | |
| font-size: 1.3rem; | |
| font-weight: bold; | |
| color: var(--primary); | |
| } | |
| .old-price { | |
| text-decoration: line-through; | |
| color: var(--gray-dark); | |
| font-size: 0.9rem; | |
| } | |
| .discount-badge { | |
| background: #ffe6e6; | |
| color: var(--primary); | |
| padding: 2px 8px; | |
| border-radius: 12px; | |
| font-size: 0.8rem; | |
| font-weight: bold; | |
| } | |
| .product-rating { | |
| display: flex; | |
| align-items: center; | |
| gap: 5px; | |
| color: var(--accent); | |
| font-size: 0.9rem; | |
| } | |
| .sold-count { | |
| color: var(--gray-dark); | |
| font-size: 0.8rem; | |
| margin-right: auto; | |
| } | |
| .add-to-cart { | |
| width: 100%; | |
| margin-top: 10px; | |
| padding: 10px; | |
| background: var(--primary); | |
| color: white; | |
| border: none; | |
| border-radius: var(--radius); | |
| cursor: pointer; | |
| font-weight: bold; | |
| transition: var(--transition); | |
| opacity: 0; | |
| transform: translateY(10px); | |
| } | |
| .product-card:hover .add-to-cart { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| .add-to-cart:hover { | |
| background: var(--primary-dark); | |
| } | |
| /* Cart Sidebar */ | |
| .cart-overlay { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(0,0,0,0.5); | |
| z-index: 2000; | |
| opacity: 0; | |
| visibility: hidden; | |
| transition: var(--transition); | |
| } | |
| .cart-overlay.active { | |
| opacity: 1; | |
| visibility: visible; | |
| } | |
| .cart-sidebar { | |
| position: fixed; | |
| top: 0; | |
| left: -400px; | |
| width: 400px; | |
| height: 100%; | |
| background: white; | |
| z-index: 2001; | |
| transition: var(--transition); | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .cart-sidebar.active { | |
| left: 0; | |
| } | |
| .cart-header { | |
| padding: 20px; | |
| border-bottom: 1px solid #eee; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .cart-items { | |
| flex: 1; | |
| overflow-y: auto; | |
| padding: 20px; | |
| } | |
| .cart-item { | |
| display: flex; | |
| gap: 15px; | |
| margin-bottom: 20px; | |
| padding-bottom: 20px; | |
| border-bottom: 1px solid #eee; | |
| } | |
| .cart-item-image { | |
| width: 80px; | |
| height: 80px; | |
| object-fit: cover; | |
| border-radius: var(--radius); | |
| } | |
| .cart-item-details { | |
| flex: 1; | |
| } | |
| .cart-item-title { | |
| font-size: 0.9rem; | |
| margin-bottom: 5px; | |
| } | |
| .cart-item-price { | |
| color: var(--primary); | |
| font-weight: bold; | |
| } | |
| .quantity-control { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| margin-top: 10px; | |
| } | |
| .qty-btn { | |
| width: 28px; | |
| height: 28px; | |
| border: 1px solid #ddd; | |
| background: white; | |
| cursor: pointer; | |
| border-radius: 4px; | |
| transition: var(--transition); | |
| } | |
| .qty-btn:hover { | |
| background: var(--gray); | |
| } | |
| .remove-item { | |
| color: #999; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| } | |
| .remove-item:hover { | |
| color: var(--primary); | |
| } | |
| .cart-footer { | |
| padding: 20px; | |
| border-top: 1px solid #eee; | |
| background: var(--gray); | |
| } | |
| .cart-total { | |
| display: flex; | |
| justify-content: space-between; | |
| font-size: 1.2rem; | |
| font-weight: bold; | |
| margin-bottom: 15px; | |
| } | |
| .checkout-btn { | |
| width: 100%; | |
| padding: 15px; | |
| background: var(--primary); | |
| color: white; | |
| border: none; | |
| border-radius: var(--radius); | |
| font-size: 1.1rem; | |
| font-weight: bold; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| } | |
| .checkout-btn:hover { | |
| background: var(--primary-dark); | |
| } | |
| /* Product Modal */ | |
| .modal-overlay { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(0,0,0,0.7); | |
| z-index: 3000; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| opacity: 0; | |
| visibility: hidden; | |
| transition: var(--transition); | |
| padding: 20px; | |
| } | |
| .modal-overlay.active { | |
| opacity: 1; | |
| visibility: visible; | |
| } | |
| .modal-content { | |
| background: white; | |
| border-radius: var(--radius-lg); | |
| max-width: 900px; | |
| width: 100%; | |
| max-height: 90vh; | |
| overflow-y: auto; | |
| position: relative; | |
| transform: scale(0.9); | |
| transition: var(--transition); | |
| } | |
| .modal-overlay.active .modal-content { | |
| transform: scale(1); | |
| } | |
| .modal-close { | |
| position: absolute; | |
| top: 20px; | |
| left: 20px; | |
| width: 40px; | |
| height: 40px; | |
| background: var(--gray); | |
| border: none; | |
| border-radius: 50%; | |
| cursor: pointer; | |
| font-size: 1.2rem; | |
| z-index: 10; | |
| transition: var(--transition); | |
| } | |
| .modal-close:hover { | |
| background: var(--primary); | |
| color: white; | |
| } | |
| .modal-body { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 30px; | |
| padding: 40px; | |
| } | |
| .modal-image { | |
| width: 100%; | |
| border-radius: var(--radius); | |
| } | |
| .modal-details h2 { | |
| font-size: 1.8rem; | |
| margin-bottom: 15px; | |
| } | |
| .modal-price { | |
| font-size: 2rem; | |
| color: var(--primary); | |
| font-weight: bold; | |
| margin-bottom: 20px; | |
| } | |
| .modal-description { | |
| color: var(--gray-dark); | |
| line-height: 1.8; | |
| margin-bottom: 20px; | |
| } | |
| .modal-actions { | |
| display: flex; | |
| gap: 15px; | |
| margin-top: 30px; | |
| } | |
| .btn-secondary { | |
| flex: 1; | |
| padding: 15px; | |
| border: 2px solid var(--primary); | |
| background: white; | |
| color: var(--primary); | |
| border-radius: var(--radius); | |
| cursor: pointer; | |
| font-weight: bold; | |
| transition: var(--transition); | |
| } | |
| .btn-secondary:hover { | |
| background: var(--primary); | |
| color: white; | |
| } | |
| /* Toast Notification */ | |
| .toast { | |
| position: fixed; | |
| bottom: 30px; | |
| right: 30px; | |
| background: var(--dark); | |
| color: white; | |
| padding: 15px 25px; | |
| border-radius: var(--radius); | |
| box-shadow: var(--shadow-lg); | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| transform: translateY(100px); | |
| opacity: 0; | |
| transition: var(--transition); | |
| z-index: 4000; | |
| } | |
| .toast.show { | |
| transform: translateY(0); | |
| opacity: 1; | |
| } | |
| .toast i { | |
| color: #4caf50; | |
| } | |
| /* Footer */ | |
| footer { | |
| background: var(--dark); | |
| color: white; | |
| padding: 50px 0 20px; | |
| margin-top: 60px; | |
| } | |
| .footer-content { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 40px; | |
| margin-bottom: 30px; | |
| } | |
| .footer-section h3 { | |
| margin-bottom: 20px; | |
| color: var(--primary); | |
| } | |
| .footer-section ul { | |
| list-style: none; | |
| } | |
| .footer-section ul li { | |
| margin-bottom: 10px; | |
| } | |
| .footer-section a { | |
| color: #ccc; | |
| text-decoration: none; | |
| transition: var(--transition); | |
| } | |
| .footer-section a:hover { | |
| color: var(--primary); | |
| } | |
| .footer-bottom { | |
| text-align: center; | |
| padding-top: 20px; | |
| border-top: 1px solid #333; | |
| color: #999; | |
| } | |
| .anycoder-link { | |
| color: var(--primary); | |
| text-decoration: none; | |
| font-weight: bold; | |
| } | |
| /* Responsive */ | |
| @media (max-width: 1024px) { | |
| .hero-grid { | |
| grid-template-columns: 1fr; | |
| height: auto; | |
| } | |
| .categories-sidebar, .deals-sidebar { | |
| display: none; | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| .header-content { | |
| flex-wrap: wrap; | |
| gap: 15px; | |
| } | |
| .search-box { | |
| order: 3; | |
| max-width: 100%; | |
| width: 100%; | |
| } | |
| .products-grid { | |
| grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); | |
| gap: 10px; | |
| } | |
| .cart-sidebar { | |
| width: 100%; | |
| left: -100%; | |
| } | |
| .modal-body { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| /* Loading Animation */ | |
| .skeleton { | |
| background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); | |
| background-size: 200% 100%; | |
| animation: loading 1.5s infinite; | |
| } | |
| @keyframes loading { | |
| 0% { background-position: 200% 0; } | |
| 100% { background-position: -200% 0; } | |
| } | |
| /* Flash Sale Badge */ | |
| .flash-badge { | |
| position: absolute; | |
| top: 10px; | |
| left: 10px; | |
| background: linear-gradient(45deg, #ff4747, #ff6b6b); | |
| color: white; | |
| padding: 5px 15px; | |
| border-radius: 20px; | |
| font-size: 0.8rem; | |
| font-weight: bold; | |
| z-index: 2; | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Top Bar --> | |
| <div class="top-bar"> | |
| <div class="container"> | |
| <div class="top-bar-content"> | |
| <div> | |
| <span>🔥 شحن مجاني على الطلبات فوق 50$</span> | |
| </div> | |
| <div class="top-links"> | |
| <a href="#" onclick="switchLang()">English</a> | |
| <a href="#">المساعدة</a> | |
| <a href="#">حمّل التطبيق</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Header --> | |
| <header class="main-header"> | |
| <div class="container"> | |
| <div class="header-content"> | |
| <a href="#" class="logo"> | |
| <i class="fas fa-shopping-bag"></i> | |
| علي إكسبريس | |
| </a> | |
| <div class="search-box"> | |
| <input type="text" id="searchInput" placeholder="ابحث عن منتجات، ماركات، فئات..."> | |
| <button class="search-btn" onclick="searchProducts()"> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| </div> | |
| <div class="header-actions"> | |
| <div class="action-btn"> | |
| <i class="fas fa-user"></i> | |
| <span>حسابي</span> | |
| </div> | |
| <div class="action-btn"> | |
| <i class="fas fa-heart"></i> | |
| <span>المفضلة</span> | |
| </div> | |
| <div class="action-btn" onclick="toggleCart()"> | |
| <i class="fas fa-shopping-cart"></i> | |
| <span>السلة</span> | |
| <span class="badge" id="cartCount">0</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Navigation --> | |
| <nav class="main-nav"> | |
| <div class="container"> | |
| <div class="nav-content"> | |
| <div class="nav-item active" onclick="filterCategory('all')">الكل</div> | |
| <div class="nav-item" onclick="filterCategory('electronics')">إلكترونيات</div> | |
| <div class="nav-item" onclick="filterCategory('fashion')">أزياء</div> | |
| <div class="nav-item" onclick="filterCategory('home')">منزل وحديقة</div> | |
| <div class="nav-item" onclick="filterCategory('sports')">رياضة</div> | |
| <div class="nav-item" onclick="filterCategory('beauty')">جمال وصحة</div> | |
| <div class="nav-item" onclick="filterCategory('toys')">ألعاب</div> | |
| <div class="nav-item" onclick="filterCategory('automotive')">سيارات</div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="hero-section"> | |
| <div class="container"> | |
| <div class="hero-grid"> | |
| <div class="categories-sidebar"> | |
| <h3 style="margin-bottom: 15px;">الفئات</h3> | |
| <div class="category-item"> | |
| <i class="fas fa-mobile-alt"></i> | |
| <span>هواتف ذكية</span> | |
| </div> | |
| <div class="category-item"> | |
| <i class="fas fa-laptop"></i> | |
| <span>كمبيوتر وشبكات</span> | |
| </div> | |
| <div class="category-item"> | |
| <i class="fas fa-tshirt"></i> | |
| <span>ملابس رجالية</span> | |
| </div> | |
| <div class="category-item"> | |
| <i class="fas fa-female"></i> | |
| <span>ملابس نسائية</span> | |
| </div> | |
| <div class="category-item"> | |
| <i class="fas fa-clock"></i> | |
| <span>ساعات ومجوهرات</span> | |
| </div> | |
| <div class="category-item"> | |
| <i class="fas fa-home"></i> | |
| <span>أثاث منزلي</span> | |
| </div> | |
| <div class="category-item"> | |
| <i class="fas fa-baby"></i> | |
| <span>مستلزمات أطفال</span> | |
| </div> | |
| <div class="category-item"> | |
| <i class="fas fa-football-ball"></i> | |
| <span>رياضة وخارج</span> | |
| </div> | |
| </div> | |
| <div class="hero-slider"> | |
| <div class="hero-content"> | |
| <h1>تخفيضات الصيف الكبرى</h1> | |
| <p>خصومات تصل إلى 70% على الإلكترونيات والأزياء</p> | |
| <button class="btn-primary" onclick="scrollToProducts()"> | |
| تسوق الآن <i class="fas fa-arrow-left"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="deals-sidebar"> | |
| <div class="deal-card"> | |
| <h3>العروض المحصورة</h3> | |
| <p style="color: var(--gray-dark); margin-top: 10px;">تنتهي خلال:</p> | |
| <div class="countdown"> | |
| <div class="countdown-item"> | |
| <span id="hours">04</span> | |
| <small>ساعة</small> | |
| </div> | |
| <div class="countdown-item"> | |
| <span id="minutes">32</span> | |
| <small>دقيقة</small> | |
| </div> | |
| <div class="countdown-item"> | |
| <span id="seconds">15</span> | |
| <small>ثانية</small> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="deal-card" style="background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);"> | |
| <h3>كوبونات خصم</h3> | |
| <p style="margin-top: 10px; font-size: 0.9rem;">استخدم كود: <strong style="color: var(--primary);">SALE2024</strong></p> | |
| <p style="font-size: 0.8rem; color: var(--gray-dark);">لخصم إضافي 15%</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Flash Sale Section --> | |
| <section class="container"> | |
| <div class="section-header"> | |
| <h2 class="section-title"> | |
| <i class="fas fa-bolt"></i> | |
| عروض فلاش | |
| </h2> | |
| <a href="#" class="view-all">عرض الكل <i class="fas fa-chevron-left"></i></a> | |
| </div> | |
| <div class="products-grid" id="flashProducts"> | |
| <!-- Flash products will be inserted here --> | |
| </div> | |
| </section> | |
| <!-- Main Products Section --> | |
| <section class="container" style="margin-top: 40px;"> | |
| <div class="section-header"> | |
| <h2 class="section-title"> | |
| <i class="fas fa-fire"></i> | |
| منتجات قد تعجبك | |
| </h2> | |
| <div style="display: flex; gap: 10px;"> | |
| <select id="sortSelect" onchange="sortProducts()" style="padding: 8px; border-radius: 8px; border: 1px solid #ddd;"> | |
| <option value="default">الترتيب الافتراضي</option> | |
| <option value="price-low">السعر: من低 إلى高</option> | |
| <option value="price-high">السعر: من高 إلى低</option> | |
| <option value="rating">الأعلى تقييماً</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="products-grid" id="productsGrid"> | |
| <!-- Products will be inserted here --> | |
| </div> | |
| </section> | |
| <!-- Cart Sidebar --> | |
| <div class="cart-overlay" onclick="toggleCart()"></div> | |
| <div class="cart-sidebar" id="cartSidebar"> | |
| <div class="cart-header"> | |
| <h2>سلة التسوق (<span id="cartItemCount">0</span>)</h2> | |
| <button onclick="toggleCart()" style="background: none; border: none; font-size: 1.5rem; cursor: pointer;"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="cart-items" id="cartItems"> | |
| <p style="text-align: center; color: #999; margin-top: 50px;"> | |
| <i class="fas fa-shopping-cart" style="font-size: 3rem; display: block; margin-bottom: 15px;"></i> | |
| السلة فارغة | |
| </p> | |
| </div> | |
| <div class="cart-footer"> | |
| <div class="cart-total"> | |
| <span>المجموع:</span> | |
| <span id="cartTotal">$0.00</span> | |
| </div> | |
| <button class="checkout-btn" onclick="checkout()"> | |
| إتمام الشراء <i class="fas fa-lock"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Product Modal --> | |
| <div class="modal-overlay" id="productModal" onclick="closeModal(event)"> | |
| <div class="modal-content" onclick="event.stopPropagation()"> | |
| <button class="modal-close" onclick="closeModal()"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| <div class="modal-body" id="modalBody"> | |
| <!-- Modal content will be inserted here --> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Toast --> | |
| <div class="toast" id="toast"> | |
| <i class="fas fa-check-circle"></i> | |
| <span id="toastMessage">تمت الإضافة إلى السلة</span> | |
| </div> | |
| <!-- Footer --> | |
| <footer> | |
| <div class="container"> | |
| <div class="footer-content"> | |
| <div class="footer-section"> | |
| <h3>عن المتجر</h3> | |
| <p style="color: #ccc; line-height: 1.8;"> | |
| علي إكسبريس هو وجهتك المثالية للتسوق أونلاين. نقدم ملايين المنتجات بأسعار مميزة مع شحن سريع إلى جميع أنحاء العالم. | |
| </p> | |
| </div> | |
| <div class="footer-section"> | |
| <h3>روابط سريعة</h3> | |
| <ul> | |
| <li><a href="#">من نحن</a></li> | |
| <li><a href="#">شروط الاستخدام</a></li> | |
| <li><a href="#">سياسة الخصوصية</a></li> | |
| <li><a href="#">الإرجاع والاستبدال</a></li> | |
| </ul> | |
| </div> | |
| <div class="footer-section"> | |
| <h3>خدمة العملاء</h3> | |
| <ul> | |
| <li><a href="#">مركز المساعدة</a></li> | |
| <li><a href="#">تتبع الطلب</a></li> | |
| <li><a href="#">الشحن والتوصيل</a></li> | |
| <li><a href="#">اتصل بنا</a></li> | |
| </ul> | |
| </div> | |
| <div class="footer-section"> | |
| <h3>تابعنا</h3> | |
| <div style="display: flex; gap: 15px; margin-top: 15px;"> | |
| <a href="#" style="font-size: 1.5rem;"><i class="fab fa-facebook"></i></a> | |
| <a href="#" style="font-size: 1.5rem;"><i class="fab fa-twitter"></i></a> | |
| <a href="#" style="font-size: 1.5rem;"><i class="fab fa-instagram"></i></a> | |
| <a href="#" style="font-size: 1.5rem;"><i class="fab fa-youtube"></i></a> | |
| </div> | |
| <p style="margin-top: 20px; color: #ccc;"> | |
| <i class="fas fa-envelope"></i> support@aliexpress-clone.com | |
| </p> | |
| </div> | |
| </div> | |
| <div class="footer-bottom"> | |
| <p>Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">anycoder</a></p> | |
| <p style="margin-top: 10px;">© 2024 علي إكسبريس. جميع الحقوق محفوظة.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Products Data | |
| const products = [ | |
| { | |
| id: 1, | |
| title: "سماعات لاسلكية فاخرة مع إلغاء الضوضاء النشط", | |
| price: 45.99, | |
| oldPrice: 89.99, | |
| image: "https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=400", | |
| rating: 4.8, | |
| reviews: 2341, | |
| category: "electronics", | |
| discount: 49, | |
| sold: 5420 | |
| }, | |
| { | |
| id: 2, | |
| title: "ساعة ذكية متعددة الوظائف مع قياس ضربات القلب", | |
| price: 29.99, | |
| oldPrice: 59.99, | |
| image: "https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=400", | |
| rating: 4.6, | |
| reviews: 1823, | |
| category: "electronics", | |
| discount: 50, | |
| sold: 3200 | |
| }, | |
| { | |
| id: 3, | |
| title: "حقيبة يد نسائية جلدية فاخرة", | |
| price: 35.50, | |
| oldPrice: 70.00, | |
| image: "https://images.unsplash.com/photo-1584917865442-de89df76afd3?w=400", | |
| rating: 4.9, | |
| reviews: 892, | |
| category: "fashion", | |
| discount: 49, | |
| sold: 1500 | |
| }, | |
| { | |
| id: 4, | |
| title: "نظارة شمسية بولارايزد بتصميم عصري", | |
| price: 15.99, | |
| oldPrice: 39.99, | |
| image: "https://images.unsplash.com/photo-1572635196237-14b3f281503f?w=400", | |
| rating: 4.5, | |
| reviews: 567, | |
| category: "fashion", | |
| discount: 60, | |
| sold: 2800 | |
| }, | |
| { | |
| id: 5, | |
| title: "ماكينة قهوة اسبريسو منزلية", | |
| price: 89.99, | |
| oldPrice: 149.99, | |
| image: "https://images.unsplash.com/photo-1517914309750-cdf34c211d62?w=400", | |
| rating: 4.7, | |
| reviews: 445, | |
| category: "home", | |
| discount: 40, | |
| sold: 890 | |
| }, | |
| { | |
| id: 6, | |
| title: "مكواة بخار 2400 واط مع لوحة سيراميك", | |
| price: 24.99, | |
| oldPrice: 49.99, | |
| image: "https://images.unsplash.com/photo-1584269600519-112d071b35e6?w=400", | |
| rating: 4.4, | |
| reviews: 1234, | |
| category: "home", | |
| discount: 50, | |
| sold: 2100 | |
| }, | |
| { | |
| id: 7, | |
| title: "حذاء رياضي خفيف الوزن للجري", | |
| price: 39.99, | |
| oldPrice: 79.99, | |
| image: "https://images.unsplash.com/photo-1542291026-7eec264c27ff?w=400", | |
| rating: 4.8, | |
| reviews: 3421, | |
| category: "sports", | |
| discount: 50, | |
| sold: 5600 | |
| }, | |
| { | |
| id: 8, | |
| title: "مجموعة أثقال منزلية قابلة للتعديل", | |
| price: 55.00, | |
| oldPrice: 110.00, | |
| image: "https://images.unsplash.com/photo-1638536532686-d610adfc8e5c?w=400", | |
| rating: 4.6, | |
| reviews: 678, | |
| category: "sports", | |
| discount: 50, | |
| sold: 1200 | |
| }, | |
| { | |
| id: 9, | |
| title: "مجموعة عناية بالبشرة الكورية 10 خطوات", | |
| price: 42.00, | |
| oldPrice: 84.00, | |
| image: "https://images.unsplash.com/photo-1570194065650-d99fb4b38b15?w=400", | |
| rating: 4.9, | |
| reviews: 2234, | |
| category: "beauty", | |
| discount: 50, | |
| sold: 4500 | |
| }, | |
| { | |
| id: 10, | |
| title: "مكياج كامل من ماركات عالمية", | |
| price: 58.99, | |
| oldPrice: 117.99, | |
| image: "https://images.unsplash.com/photo-1596462502278-27bfdc403348?w=400", | |
| rating: 4.7, | |
| reviews: 1567, | |
| category: "beauty", | |
| discount: 50, | |
| sold: 3200 | |
| }, | |
| { | |
| id: 11, | |
| title: "سيارة تحكم عن بعد عالية السرعة", | |
| price: 35.00, | |
| oldPrice: 69.99, | |
| image: "https://images.unsplash.com/photo-1594787318286-3d835c1d207f?w=400", | |
| rating: 4.5, | |
| reviews: 892, | |
| category: "toys", | |
| discount: 50, | |
| sold: 1800 | |
| }, | |
| { | |
| id: 12, | |
| title: "لعبة بناء ليغو للأطفال 1000 قطعة", | |
| price: 28.50, | |
| oldPrice: 57.00, | |
| image: "https://images.unsplash.com/photo-1585366119957-e9730b6d0f60?w=400", | |
| rating: 4.8, | |
| reviews: 3345, | |
| category: "toys", | |
| discount: 50, | |
| sold: 6700 | |
| } | |
| ]; | |
| let cart = []; | |
| let currentCategory = 'all'; | |
| // Initialize | |
| document.addEventListener('DOMContentLoaded', () => { | |
| renderProducts(); | |
| renderFlashProducts(); | |
| startCountdown(); | |
| updateCartUI(); | |
| }); | |
| // Render Products | |
| function renderProducts(filter = 'all') { | |
| const grid = document.getElementById('productsGrid'); | |
| grid.innerHTML = ''; | |
| let filteredProducts = filter === 'all' ? products : products.filter(p => p.category === filter); | |
| filteredProducts.forEach(product => { | |
| const card = createProductCard(product); | |
| grid.appendChild(card); | |
| }); | |
| } | |
| // Render Flash Sale Products (first 4 with highest discount) | |
| function renderFlashProducts() { | |
| const grid = document.getElementById('flashProducts'); | |
| const flashProducts = [...products].sort((a, b) => b.discount - a.discount).slice(0, 4); | |
| flashProducts.forEach(product => { | |
| const card = createProductCard(product, true); | |
| grid.appendChild(card); | |
| }); | |
| } | |
| function createProductCard(product, isFlash = false) { | |
| const div = document.createElement('div |