سن جيم - متجرك الإلكتروني الأول

سأقوم بإنشاء موقع مشابه تمامًا للمقطع الموجود في الفيديو المطلوب. سن جيم - متجرك الإلكتروني الأول

توصيل مجاني لجميع الطلبات فوق 10 دينار

عروض الصيف الكبرى

خصومات تصل إلى 70% على مجموعة مختارة من المنتجات

تسوق الآن

أحدث المنتجات

اكتشف مجموعتنا الجديدة لهذا الموسم

اكتشف المزيد

تسوق حسب الفئة

منتجات مميزة

عرض الكل

خصم 20%

ساعة ذكية متطورة

40 د.ك 50 د.ك

الماركات

:root { --primary-color: #2a5d8a; --secondary-color: #e63946; --accent-color: #f4a261; --light-color: #f8f9fa; --dark-color: #212529; --gray-color: #6c757d; --border-radius: 8px; --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); --transition: all 0.3s ease; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Tajawal', sans-serif; } body { background-color: #f5f5f5; color: var(--dark-color); direction: rtl; } .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 15px; } /* Notification Bar */ .notification-bar { background-color: var(--primary-color); color: white; padding: 8px 0; text-align: center; font-size: 14px; } /* Header Styles */ .main-header { background-color: white; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } .header-top { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; } .logo img { height: 50px; } .search-box { flex: 1; margin: 0 20px; position: relative; } .search-box input { width: 100%; padding: 10px 15px; border: 1px solid #ddd; border-radius: var(--border-radius); font-size: 14px; } .search-box button { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--gray-color); cursor: pointer; } .header-actions { display: flex; gap: 20px; } .header-actions a { color: var(--dark-color); font-size: 20px; position: relative; transition: var(--transition); } .header-actions a:hover { color: var(--primary-color); } .cart-count { position: absolute; top: -8px; left: -8px; background-color: var(--secondary-color); color: white; border-radius: 50%; width: 18px; height: 18px; font-size: 12px; display: flex; align-items: center; justify-content: center; } /* Main Navigation */ .main-nav { border-top: 1px solid #eee; } .main-nav ul { display: flex; list-style: none; } .main-nav li { position: relative; } .main-nav a { display: block; padding: 15px 20px; color: var(--dark-color); text-decoration: none; font-weight: 500; transition: var(--transition); } .main-nav a:hover { color: var(--primary-color); } /* Hero Slider */ .hero-slider { position: relative; margin-bottom: 30px; } .slider-container { position: relative; height: 500px; overflow: hidden; } .slide { position: absolute; width: 100%; height: 100%; opacity: 0; transition: opacity 0.5s ease; } .slide.active { opacity: 1; } .slide img { width: 100%; height: 100%; object-fit: cover; } .slide-content { position: absolute; top: 50%; right: 10%; transform: translateY(-50%); color: white; max-width: 500px; } .slide-content h2 { font-size: 36px; margin-bottom: 15px; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); } .slide-content p { font-size: 18px; margin-bottom: 20px; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); } .btn { display: inline-block; padding: 10px 25px; background-color: var(--secondary-color); color: white; text-decoration: none; border-radius: var(--border-radius); font-weight: 500; transition: var(--transition); } .btn:hover { background-color: #c1121f; transform: translateY(-2px); } .slider-nav { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; } .slider-nav button { width: 40px; height: 40px; border-radius: 50%; border: none; background-color: rgba(255, 255, 255, 0.3); color: white; cursor: pointer; transition: var(--transition); display: flex; align-items: center; justify-content: center; } .slider-nav button:hover { background-color: rgba(255, 255, 255, 0.5); } /* Categories Section */ .categories-section { padding: 40px 0; } .section-title { text-align: center; margin-bottom: 30px; font-size: 28px; color: var(--dark-color); position: relative; padding-bottom: 15px; } .section-title::after { content: ''; position: absolute; bottom: 0; right: 50%; transform: translateX(50%); width: 80px; height: 3px; background-color: var(--primary-color); } .categories-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; } .category-card { background-color: white; border-radius: var(--border-radius); overflow: hidden; box-shadow: var(--box-shadow); transition: var(--transition); text-align: center; text-decoration: none; color: var(--dark-color); } .category-card:hover { transform: translateY(-5px); box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); } .category-card img { width: 100%; height: 150px; object-fit: cover; } .category-card h3 { padding: 15px; font-size: 18px; } /* Featured Products */ .featured-products { padding: 40px 0; background-color: #f9f9f9; } .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .view-all { color: var(--primary-color); text-decoration: none; font-weight: 500; transition: var(--transition); } .view-all:hover { color: var(--secondary-color); } .products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 25px; } .product-card { background-color: white; border-radius: var(--border-radius); overflow: hidden; box-shadow: var(--box-shadow); transition: var(--transition); position: relative; } .product-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); } .product-badge { position: absolute; top: 10px; left: 10px; background-color: var(--secondary-color); color: white; padding: 5px 10px; border-radius: 4px; font-size: 12px; font-weight: bold; z-index: 1; } .product-image { position: relative; overflow: hidden; } .product-image img { width: 100%; height: 200px; object-fit: cover; transition: var(--transition); } .product-card:hover .product-image img { transform: scale(1.05); } .product-actions { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; gap: 10px; opacity: 0; transition: var(--transition); } .product-card:hover .product-actions { opacity: 1; } .quick-view, .add-to-wishlist { width: 35px; height: 35px; border-radius: 50%; background-color: white; border: none; color: var(--dark-color); cursor: pointer; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); transition: var(--transition); display: flex; align-items: center; justify-content: center; } .quick-view:hover, .add-to-wishlist:hover { background-color: var(--primary-color); color: white; } .product-info { padding: 15px; } .product-title { font-size: 16px; margin-bottom: 10px; color: var(--dark-color); } .product-price { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; } .current-price { color: var(--secondary-color); font-weight: bold; font-size: 18px; } .old-price { color: var(--gray-color); text-decoration: line-through; font-size: 14px; } .add-to-cart { width: 100%; padding: 10px; background-color: var(--primary-color); color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: 500; transition: var(--transition); } .add-to-cart:hover { background-color: #1d4b73; } /* Brands Section */ .brands-section { padding: 40px 0; background-color: white; } .brands-slider { display: flex; align-items: center; justify-content: space-between; gap: 20px; overflow-x: auto; padding: 20px 0; } .brand-item { flex: 0 0 auto; width: 150px; height: 80px; display: flex; align-items: center; justify-content: center; background-color: white; border-radius: var(--border-radius); box-shadow: var(--box-shadow); padding: 15px; } .brand-item img { max-width: 100%; max-height: 100%; filter: grayscale(100%); opacity: 0.7; transition: var(--transition); } .brand-item:hover img { filter: grayscale(0); opacity: 1; } /* Footer */ .main-footer { background-color: var(--dark-color); color: white; } .footer-top { padding: 50px 0 30px; } .footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; } .footer-col h3 { font-size: 18px; margin-bottom: 20px; position: relative; padding-bottom: 10px; } .footer-col h3::after { content: ''; position: absolute; bottom: 0; right: 0; width: 50px; height: 2px; background-color: var(--secondary-color); } .footer-col p { margin-bottom: 15px; line-height: 1.6; color: #ddd; } .footer-col ul { list-style: none; } .footer-col ul li { margin-bottom: 10px; } .footer-col ul li a { color: #ddd; text-decoration: none; transition: var(--transition); } .footer-col ul li a:hover { color: var(--secondary-color); padding-right: 5px; } .contact-info li { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; } .contact-info i { color: var(--secondary-color); } .social-links { display: flex; gap: 15px; margin-top: 20px; } .social-links a { display: flex; align-items: center; justify-content: center; width: 35px; height: 35px; background-color: rgba(255, 255, 255, 0.1); border-radius: 50%; color: white; transition: var(--transition); } .social-links a:hover { background-color: var(--secondary-color); transform: translateY(-3px); } .footer-bottom { padding: 20px 0; background-color: rgba(0, 0, 0, 0.2); text-align: center; } .footer-bottom p { color: #aaa; font-size: 14px; } .payment-methods { display: flex; justify-content: center; gap: 15px; margin-top: 15px; } .payment-methods img { height: 25px; filter: brightness(0) invert(1); opacity: 0.7; transition: var(--transition); } .payment-methods img:hover { opacity: 1; } /* Responsive Styles */ @media (max-width: 992px) { .header-top { flex-direction: column; gap: 15px; } .search-box { width: 100%; margin: 15px 0; } .main-nav ul { flex-wrap: wrap; justify-content: center; } .slider-container { height: 400px; } .slide-content h2 { font-size: 28px; } .slide-content p { font-size: 16px; } } @media (max-width: 768px) { .categories-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } .products-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } .slider-container { height: 300px; } .slide-content { right: 5%; max-width: 90%; } } @media (max-width: 576px) { .categories-grid { grid-template-columns: repeat(2, 1fr); } .products-grid { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; } .footer-col { text-align: center; } .footer-col h3::after { right: 50%; transform: translateX(50%); } .social-links { justify-content: center; } } document.addEventListener('DOMContentLoaded', function() { // Hero Slider const slides = document.querySelectorAll('.slide'); const prevBtn = document.querySelector('.prev'); const nextBtn = document.querySelector('.next'); let currentSlide = 0; let slideInterval; function showSlide(n) { slides.forEach(slide => slide.classList.remove('active')); slides[n].classList.add('active'); currentSlide = n; } function nextSlide() { let nextIndex = (currentSlide + 1) % slides.length; showSlide(nextIndex); } function prevSlide() { let prevIndex = (currentSlide - 1 + slides.length) % slides.length; showSlide(prevIndex); } function startSlider() { slideInterval = setInterval(nextSlide, 5000); } function stopSlider() { clearInterval(slideInterval); } // Initialize slider showSlide(0); startSlider(); // Event listeners nextBtn.addEventListener('click', () => { nextSlide(); stopSlider(); startSlider(); }); prevBtn.addEventListener('click', () => { prevSlide(); stopSlider(); startSlider(); }); // Pause on hover const slider = document.querySelector('.slider-container'); slider.addEventListener('mouseenter', stopSlider); slider.addEventListener('mouseleave', startSlider); // Add to cart functionality const addToCartButtons = document.querySelectorAll('.add-to-cart'); const cartCount = document.querySelector('.cart-count'); let cartItems = 0; addToCartButtons.forEach(button => { button.addEventListener('click', function(e) { e.preventDefault(); cartItems++; cartCount.textContent = cartItems; // Add animation cartCount.classList.add('pulse'); setTimeout(() => { cartCount.classList.remove('pulse'); }, 300); // Show notification const productCard = this.closest('.product-card'); const productName = productCard.querySelector('.product-title').textContent; createNotification(`تم إضافة ${productName} إلى سلة التسوق`); }); }); // Quick view and wishlist buttons document.querySelectorAll('.quick-view').forEach(btn => { btn.addEventListener('click', function(e) { e.preventDefault(); const productCard = this.closest('.product-card'); const productName = productCard.querySelector('.product-title').textContent; alert(`عرض سريع: ${productName}`); }); }); document.querySelectorAll('.add-to-wishlist').forEach(btn => { btn.addEventListener('click', function(e) { e.preventDefault(); const productCard = this.closest('.product-card'); const productName = productCard.querySelector('.product-title').textContent; createNotification(`تم إضافة ${productName} إلى المفضلة`); }); }); // Notification function function createNotification(message) { const notification = document.createElement('div'); notification.className = 'notification'; notification.textContent = message; document.body.appendChild(notification); setTimeout(() => { notification.classList.add('show'); }, 10); setTimeout(() => { notification.classList.remove('show'); setTimeout(() => { document.body.removeChild(notification); }, 300); }, 3000); } // Mobile menu toggle (for smaller screens) const mobileMenuToggle = document.createElement('button'); mobileMenuToggle.className = 'mobile-menu-toggle'; mobileMenuToggle.innerHTML = ''; document.querySelector('.header-top').appendChild(mobileMenuToggle); mobileMenuToggle.addEventListener('click', function() { document.querySelector('.main-nav').classList.toggle('active'); }); }); // Additional styles for dynamic elements const style = document.createElement('style'); style.textContent = ` .notification { position: fixed; bottom: 20px; right: 20px; background-color: var(--primary-color); color: white; padding: 15px 25px; border-radius: var(--border-radius); box-shadow: var(--box-shadow); transform: translateY(100px); opacity: 0; transition: all 0.3s ease; z-index: 1000; } .notification.show { transform: translateY(0); opacity: 1; } .pulse { animation: pulse 0.3s ease; } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.3); } 100% { transform: scale(1); } } .mobile-menu-toggle { display: none; background: none; border: none; font-size: 24px; color: var(--dark-color); cursor: pointer; } @media (max-width: 768px) { .mobile-menu-toggle { display: block; } .main-nav { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .main-nav.active { max-height: 500px; } .main-nav ul { flex-direction: column; padding: 15px 0; } } `; document.head.appendChild(style);

عروض الصيف الكبرى

أحدث المنتجات

تسوق حسب الفئة

إلكترونيات

أزياء

منزل

أطفال

رياضة

منتجات مميزة

ساعة ذكية متطورة

الماركات