Spaces:
Running
Running
Download index.html from sofiane7/mushroomsstore: direct link, hf CLI and curl.
- Browser
- Download file 34.6 kB
-
https://huggingface.co/spaces/sofiane7/mushroomsstore/resolve/main/index.html
- Command line
-
hf download hf://spaces/sofiane7/mushroomsstore/index.html
-
curl -L -o index.html https://huggingface.co/spaces/sofiane7/mushroomsstore/resolve/main/index.html
34.6 kB
| <html lang="ar" dir="rtl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>متجر شوبي فاي</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @keyframes marquee { | |
| 0% { transform: translateX(100%); } | |
| 40% { transform: translateX(0); } | |
| 60% { transform: translateX(0); } | |
| 100% { transform: translateX(-100%); } | |
| } | |
| .marquee-text { | |
| animation: marquee 15s linear infinite; | |
| white-space: nowrap; | |
| display: inline-block; | |
| padding-left: 100%; | |
| } | |
| .logo-hover:hover { | |
| animation: shake 0.5s; | |
| } | |
| @keyframes shake { | |
| 0% { transform: rotate(0deg); } | |
| 25% { transform: rotate(5deg); } | |
| 50% { transform: rotate(0deg); } | |
| 75% { transform: rotate(-5deg); } | |
| 100% { transform: rotate(0deg); } | |
| } | |
| .product-slider { | |
| transition: transform 0.5s ease; | |
| } | |
| .star { | |
| position: absolute; | |
| background-color: white; | |
| border-radius: 50%; | |
| animation: twinkle 2s infinite; | |
| } | |
| @keyframes twinkle { | |
| 0% { opacity: 0.2; transform: scale(0.5); } | |
| 50% { opacity: 1; transform: scale(1); } | |
| 100% { opacity: 0.2; transform: scale(0.5); } | |
| } | |
| .dot { | |
| display: inline-block; | |
| width: 10px; | |
| height: 10px; | |
| border-radius: 50%; | |
| background-color: #ccc; | |
| margin: 0 5px; | |
| cursor: pointer; | |
| transition: background-color 0.3s; | |
| } | |
| .dot.active { | |
| background-color: #4f46e5; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 font-sans"> | |
| <!-- شريط الإعلانات المتحرك --> | |
| <div class="bg-indigo-600 text-white py-2 overflow-hidden"> | |
| <div class="marquee-text"> | |
| <span class="text-sm md:text-base">🔥 عروض خاصة لمدة محدودة - خصم يصل إلى 50% على جميع المنتجات - توصيل مجاني للطلبات فوق 200 ريال 🔥</span> | |
| </div> | |
| </div> | |
| <!-- شريط التنقل مع الشعار المهتز --> | |
| <nav class="bg-white shadow-md py-4 px-6"> | |
| <div class="container mx-auto flex justify-between items-center"> | |
| <div class="logo-hover"> | |
| <a href="#" class="text-2xl font-bold text-indigo-600 flex items-center"> | |
| <i class="fas fa-shopping-bag mr-2"></i> | |
| شوبي فاي | |
| </a> | |
| </div> | |
| <div class="hidden md:flex space-x-6 space-x-reverse"> | |
| <a href="#" class="text-gray-700 hover:text-indigo-600">الرئيسية</a> | |
| <a href="#" class="text-gray-700 hover:text-indigo-600">المنتجات</a> | |
| <a href="#" class="text-gray-700 hover:text-indigo-600">العروض</a> | |
| <a href="#" class="text-gray-700 hover:text-indigo-600">من نحن</a> | |
| <a href="#" class="text-gray-700 hover:text-indigo-600">اتصل بنا</a> | |
| </div> | |
| <div class="flex items-center space-x-4 space-x-reverse"> | |
| <a href="#" class="text-gray-700 hover:text-indigo-600"> | |
| <i class="fas fa-search"></i> | |
| </a> | |
| <a href="#" class="text-gray-700 hover:text-indigo-600"> | |
| <i class="fas fa-user"></i> | |
| </a> | |
| <a href="#" class="text-gray-700 hover:text-indigo-600 relative"> | |
| <i class="fas fa-shopping-cart"></i> | |
| <span class="absolute -top-2 -right-2 bg-indigo-600 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">3</span> | |
| </a> | |
| <button class="md:hidden text-gray-700"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- السلايدر الرئيسي --> | |
| <div class="relative h-screen max-h-[600px] bg-gray-100 overflow-hidden"> | |
| <div class="absolute inset-0 flex items-center"> | |
| <div class="slider-container flex transition-transform duration-700 ease-in-out"> | |
| <!-- Slide 1 --> | |
| <div class="min-w-full relative"> | |
| <div class="absolute inset-0 bg-gradient-to-r from-indigo-900 to-transparent opacity-70"></div> | |
| <img src="https://via.placeholder.com/1920x600?text=Fashion+Collection" alt="Slider 1" | |
| class="w-full h-full object-cover"> | |
| <div class="absolute inset-0 flex items-center px-20 text-white"> | |
| <div class="max-w-md rtl:text-right"> | |
| <h2 class="text-4xl md:text-6xl font-bold mb-4">مجموعة موسمية جديدة</h2> | |
| <p class="text-lg mb-6">اكتشف أحدث صيحات الموضة لهذا الموسم بخصم يصل إلى 40%</p> | |
| <a href="#" class="inline-block bg-white text-indigo-900 px-6 py-3 rounded-full font-medium hover:bg-opacity-90 transition">تسوق الآن</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Slide 2 --> | |
| <div class="min-w-full relative"> | |
| <div class="absolute inset-0 bg-gradient-to-l from-purple-900 to-transparent opacity-70"></div> | |
| <img src="https://via.placeholder.com/1920x600?text=Electronics" alt="Slider 2" | |
| class="w-full h-full object-cover"> | |
| <div class="absolute inset-0 flex items-center px-20 text-white justify-end"> | |
| <div class="max-w-md rtl:text-right"> | |
| <h2 class="text-4xl md:text-6xl font-bold mb-4">تخفيضات الإلكترونيات</h2> | |
| <p class="text-lg mb-6">خصومات كبيرة على الأجهزة الإلكترونية لمدة محدودة</p> | |
| <a href="#" class="inline-block bg-white text-purple-900 px-6 py-3 rounded-full font-medium hover:bg-opacity-90 transition">اكتشف العروض</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- الأزرار --> | |
| <button class="absolute right-10 top-1/2 transform -translate-y-1/2 bg-white bg-opacity-30 text-white p-3 rounded-full hover:bg-opacity-50 transition z-10 slider-prev"> | |
| <i class="fas fa-chevron-left"></i> | |
| </button> | |
| <button class="absolute left-10 top-1/2 transform -translate-y-1/2 bg-white bg-opacity-30 text-white p-3 rounded-full hover:bg-opacity-50 transition z-10 slider-next"> | |
| <i class="fas fa-chevron-right"></i> | |
| </button> | |
| <!-- النقاط --> | |
| <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 flex space-x-2 z-10"> | |
| <button class="w-3 h-3 rounded-full bg-white bg-opacity-50 hover:bg-opacity-100 transition slider-dot active"></button> | |
| <button class="w-3 h-3 rounded-full bg-white bg-opacity-50 hover:bg-opacity-100 transition slider-dot"></button> | |
| </div> | |
| </div> | |
| <!-- شريط عرض المنتجات مع السلايدر --> | |
| <div class="relative bg-white py-12 overflow-hidden"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">أحدث المنتجات</h2> | |
| <div class="relative"> | |
| <div class="product-slider flex transition-transform duration-300 ease-out" id="productSlider"> | |
| <!-- Product 1 --> | |
| <div class="min-w-[80%] sm:min-w-[50%] md:min-w-[33.333%] lg:min-w-[25%] px-2"> | |
| <div class="bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-all duration-300"> | |
| <div class="relative h-80 overflow-hidden group"> | |
| <img src="https://via.placeholder.com/600x800?text=Product+1" alt="Product 1" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"> | |
| <div class="absolute top-4 left-4 bg-red-500 text-white text-xs px-3 py-1 rounded-full">خصم 20%</div> | |
| <button class="absolute bottom-4 right-4 bg-white text-indigo-600 p-2 rounded-full shadow-md opacity-0 group-hover:opacity-100 transition-opacity duration-300"> | |
| <i class="fas fa-shopping-cart"></i> | |
| </button> | |
| </div> | |
| <div class="p-5"> | |
| <h3 class="text-lg font-semibold text-gray-800">ساعة ذكية</h3> | |
| <div class="flex items-center mt-1"> | |
| <div class="text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| <span class="text-gray-500 text-sm mr-1">(48)</span> | |
| </div> | |
| <div class="mt-2 flex justify-between items-center"> | |
| <span class="text-indigo-600 font-bold">249 ر.س</span> | |
| <span class="text-gray-400 text-sm line-through">299 ر.س</span> | |
| </div> | |
| <button class="mt-4 w-full bg-indigo-600 text-white py-2 rounded hover:bg-indigo-700 transition"> | |
| أضف إلى السلة | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 2 --> | |
| <div class="min-w-[80%] sm:min-w-[50%] md:min-w-[33.333%] px-4"> | |
| <div class="bg-gray-50 rounded-lg overflow-hidden shadow-md hover:shadow-lg transition-shadow"> | |
| <div class="relative h-64 overflow-hidden"> | |
| <img src="https://via.placeholder.com/400x300?text=Product+2" alt="Product 2" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="text-lg font-semibold text-gray-800">سماعات لاسلكية</h3> | |
| <div class="flex items-center mt-1"> | |
| <div class="text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="far fa-star"></i> | |
| </div> | |
| <span class="text-gray-500 text-sm mr-1">(36)</span> | |
| </div> | |
| <div class="mt-2 flex justify-between items-center"> | |
| <span class="text-indigo-600 font-bold">179 ر.س</span> | |
| </div> | |
| <button class="mt-4 w-full bg-indigo-600 text-white py-2 rounded hover:bg-indigo-700 transition"> | |
| أضف إلى السلة | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 3 --> | |
| <div class="min-w-full md:min-w-[50%] lg:min-w-[33.333%] px-4"> | |
| <div class="bg-gray-50 rounded-lg overflow-hidden shadow-md hover:shadow-lg transition-shadow"> | |
| <div class="relative h-64 overflow-hidden"> | |
| <img src="https://via.placeholder.com/400x300?text=Product+3" alt="Product 3" class="w-full h-full object-cover"> | |
| <div class="absolute top-2 left-2 bg-green-500 text-white text-xs px-2 py-1 rounded">جديد</div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="text-lg font-semibold text-gray-800">هاتف ذكي</h3> | |
| <div class="flex items-center mt-1"> | |
| <div class="text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| <span class="text-gray-500 text-sm mr-1">(124)</span> | |
| </div> | |
| <div class="mt-2 flex justify-between items-center"> | |
| <span class="text-indigo-600 font-bold">1,899 ر.س</span> | |
| </div> | |
| <button class="mt-4 w-full bg-indigo-600 text-white py-2 rounded hover:bg-indigo-700 transition"> | |
| أضف إلى السلة | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 4 --> | |
| <div class="min-w-full md:min-w-[50%] lg:min-w-[33.333%] px-4"> | |
| <div class="bg-gray-50 rounded-lg overflow-hidden shadow-md hover:shadow-lg transition-shadow"> | |
| <div class="relative h-64 overflow-hidden"> | |
| <img src="https://via.placeholder.com/400x300?text=Product+4" alt="Product 4" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="text-lg font-semibold text-gray-800">حقيبة ظهر</h3> | |
| <div class="flex items-center mt-1"> | |
| <div class="text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| <span class="text-gray-500 text-sm mr-1">(87)</span> | |
| </div> | |
| <div class="mt-2 flex justify-between items-center"> | |
| <span class="text-indigo-600 font-bold">129 ر.س</span> | |
| </div> | |
| <button class="mt-4 w-full bg-indigo-600 text-white py-2 rounded hover:bg-indigo-700 transition"> | |
| أضف إلى السلة | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <button id="prevBtn" class="absolute right-0 top-1/2 transform -translate-y-1/2 bg-white p-2 rounded-full shadow-md z-10 hover:bg-gray-100"> | |
| <i class="fas fa-chevron-left text-indigo-600"></i> | |
| </button> | |
| <button id="nextBtn" class="absolute left-0 top-1/2 transform -translate-y-1/2 bg-white p-2 rounded-full shadow-md z-10 hover:bg-gray-100"> | |
| <i class="fas fa-chevron-right text-indigo-600"></i> | |
| </button> | |
| </div> | |
| <div class="flex justify-center mt-10 space-x-2" id="dotsContainer"> | |
| <!-- سيتم إضافة النقاط ديناميكيًا عبر JavaScript --> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- قسم العروض الخاصة --> | |
| <div class="py-12 bg-gradient-to-r from-indigo-500 to-purple-600 text-white"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h2 class="text-3xl font-bold mb-4">العروض الخاصة</h2> | |
| <p class="text-xl mb-8">خصم يصل إلى 50% على مجموعة مختارة من المنتجات</p> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4"> | |
| <div class="bg-white bg-opacity-20 p-4 rounded-lg backdrop-blur-sm"> | |
| <div class="text-4xl font-bold mb-2">50%</div> | |
| <div class="text-sm">على الإلكترونيات</div> | |
| </div> | |
| <div class="bg-white bg-opacity-20 p-4 rounded-lg backdrop-blur-sm"> | |
| <div class="text-4xl font-bold mb-2">30%</div> | |
| <div class="text-sm">على الملابس</div> | |
| </div> | |
| <div class="bg-white bg-opacity-20 p-4 rounded-lg backdrop-blur-sm"> | |
| <div class="text-4xl font-bold mb-2">25%</div> | |
| <div class="text-sm">على الإكسسوارات</div> | |
| </div> | |
| <div class="bg-white bg-opacity-20 p-4 rounded-lg backdrop-blur-sm"> | |
| <div class="text-4xl font-bold mb-2">40%</div> | |
| <div class="text-sm">على الأجهزة المنزلية</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- قسم الفئات --> | |
| <div class="py-12 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-2xl font-bold text-center mb-8 text-gray-800">تصفح حسب الفئة</h2> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4"> | |
| <a href="#" class="group"> | |
| <div class="bg-gray-100 rounded-lg overflow-hidden transition-all hover:shadow-lg"> | |
| <div class="h-40 bg-indigo-100 flex items-center justify-center"> | |
| <i class="fas fa-mobile-alt text-4xl text-indigo-600 group-hover:scale-110 transition-transform"></i> | |
| </div> | |
| <div class="p-4 text-center"> | |
| <h3 class="font-semibold text-gray-800 group-hover:text-indigo-600">الإلكترونيات</h3> | |
| </div> | |
| </div> | |
| </a> | |
| <a href="#" class="group"> | |
| <div class="bg-gray-100 rounded-lg overflow-hidden transition-all hover:shadow-lg"> | |
| <div class="h-40 bg-pink-100 flex items-center justify-center"> | |
| <i class="fas fa-tshirt text-4xl text-pink-600 group-hover:scale-110 transition-transform"></i> | |
| </div> | |
| <div class="p-4 text-center"> | |
| <h3 class="font-semibold text-gray-800 group-hover:text-pink-600">الملابس</h3> | |
| </div> | |
| </div> | |
| </a> | |
| <a href="#" class="group"> | |
| <div class="bg-gray-100 rounded-lg overflow-hidden transition-all hover:shadow-lg"> | |
| <div class="h-40 bg-yellow-100 flex items-center justify-center"> | |
| <i class="fas fa-home text-4xl text-yellow-600 group-hover:scale-110 transition-transform"></i> | |
| </div> | |
| <div class="p-4 text-center"> | |
| <h3 class="font-semibold text-gray-800 group-hover:text-yellow-600">المنزل</h3> | |
| </div> | |
| </div> | |
| </a> | |
| <a href="#" class="group"> | |
| <div class="bg-gray-100 rounded-lg overflow-hidden transition-all hover:shadow-lg"> | |
| <div class="h-40 bg-green-100 flex items-center justify-center"> | |
| <i class="fas fa-child text-4xl text-green-600 group-hover:scale-110 transition-transform"></i> | |
| </div> | |
| <div class="p-4 text-center"> | |
| <h3 class="font-semibold text-gray-800 group-hover:text-green-600">الأطفال</h3> | |
| </div> | |
| </div> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- شريط التذييل مع النجوم المتلألئة --> | |
| <footer class="bg-gray-900 text-white py-12 relative overflow-hidden"> | |
| <!-- النجوم المتحركة --> | |
| <div id="starsContainer"></div> | |
| <div class="container mx-auto px-4 relative z-10"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4 flex items-center"> | |
| <i class="fas fa-shopping-bag mr-2"></i> | |
| شوبي فاي | |
| </h3> | |
| <p class="text-gray-400">متجرك الإلكتروني الأول لجميع احتياجاتك. نقدم منتجات عالية الجودة بأسعار تنافسية.</p> | |
| <div class="mt-4 flex space-x-4 space-x-reverse"> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-snapchat-ghost"></i></a> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">روابط سريعة</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">الرئيسية</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">من نحن</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">المنتجات</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">العروض</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">اتصل بنا</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">خدمة العملاء</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">حسابي</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">تتبع الطلب</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">سياسة الإرجاع</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">الأسئلة الشائعة</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">الشروط والأحكام</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">اتصل بنا</h3> | |
| <ul class="space-y-2 text-gray-400"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-map-marker-alt mt-1 mr-2"></i> | |
| <span>المملكة العربية السعودية، الرياض</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-phone-alt mr-2"></i> | |
| <span>+966 12 345 6789</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-envelope mr-2"></i> | |
| <span>info@shopify.com</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400"> | |
| <p>© 2023 شوبي فاي. جميع الحقوق محفوظة.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // إنشاء النجوم المتلألئة | |
| function createStars() { | |
| const container = document.getElementById('starsContainer'); | |
| const footer = document.querySelector('footer'); | |
| const footerWidth = footer.offsetWidth; | |
| const footerHeight = footer.offsetHeight; | |
| // عدد النجوم المراد إنشاؤها | |
| const starCount = 30; | |
| for (let i = 0; i < starCount; i++) { | |
| const star = document.createElement('div'); | |
| star.className = 'star'; | |
| // حجم عشوائي للنجمة | |
| const size = Math.random() * 3 + 1; | |
| star.style.width = `${size}px`; | |
| star.style.height = `${size}px`; | |
| // موقع عشوائي للنجمة | |
| const left = Math.random() * footerWidth; | |
| const top = Math.random() * footerHeight; | |
| star.style.left = `${left}px`; | |
| star.style.top = `${top}px`; | |
| // تأخير عشوائي للوميض | |
| star.style.animationDelay = `${Math.random() * 2}s`; | |
| container.appendChild(star); | |
| } | |
| } | |
| // تهيئة سلايدر المنتجات | |
| function initProductSlider() { | |
| const slider = document.getElementById('productSlider'); | |
| const prevBtn = document.getElementById('prevBtn'); | |
| const nextBtn = document.getElementById('nextBtn'); | |
| const dotsContainer = document.getElementById('dotsContainer'); | |
| const products = document.querySelectorAll('.product-slider > div'); | |
| const productCount = products.length; | |
| let currentIndex = 0; | |
| let autoSlideInterval; | |
| // إنشاء نقاط التنقل | |
| for (let i = 0; i < productCount; i++) { | |
| const dot = document.createElement('button'); | |
| dot.className = `dot w-3 h-3 rounded-full mx-1 focus:outline-none ${i === 0 ? 'bg-indigo-600' : 'bg-gray-300'}`; | |
| dot.dataset.index = i; | |
| dot.addEventListener('click', () => { | |
| goToSlide(parseInt(dot.dataset.index)); | |
| }); | |
| dotsContainer.appendChild(dot); | |
| } | |
| const dots = document.querySelectorAll('.dot'); | |
| // حساب عرض الشريحة بناء على حجم الشاشة | |
| function getSlideWidth() { | |
| if (window.innerWidth < 640) return 80; // mobile | |
| if (window.innerWidth < 768) return 50; // sm | |
| if (window.innerWidth < 1024) return 33.333; // md | |
| return 25; // lg+ | |
| } | |
| // الانتقال إلى شريحة معينة | |
| function goToSlide(index) { | |
| currentIndex = index; | |
| const slideWidth = getSlideWidth(); | |
| const translateValue = -currentIndex * slideWidth; | |
| slider.style.transform = `translateX(${translateValue}%)`; | |
| // تحديث النقاط النشطة | |
| dots.forEach((dot, i) => { | |
| dot.className = `dot w-3 h-3 rounded-full mx-1 focus:outline-none ${i === currentIndex ? 'bg-indigo-600' : 'bg-gray-300'}`; | |
| }); | |
| // إعادة تشغيل التبديل التلقائي | |
| resetAutoSlide(); | |
| } | |
| // الانتقال إلى الشريحة التالية | |
| function nextSlide() { | |
| currentIndex = (currentIndex + 1) % productCount; | |
| goToSlide(currentIndex); | |
| } | |
| // الانتقال إلى الشريحة السابقة | |
| function prevSlide() { | |
| currentIndex = (currentIndex - 1 + productCount) % productCount; | |
| goToSlide(currentIndex); | |
| } | |
| // إعادة تعيين التبديل التلقائي | |
| function resetAutoSlide() { | |
| clearInterval(autoSlideInterval); | |
| autoSlideInterval = setInterval(nextSlide, 4000); | |
| } | |
| // أحداث الأزرار | |
| nextBtn.addEventListener('click', () => { | |
| nextSlide(); | |
| resetAutoSlide(); | |
| }); | |
| prevBtn.addEventListener('click', () => { | |
| prevSlide(); | |
| resetAutoSlide(); | |
| }); | |
| // بدء التبديل التلقائي | |
| resetAutoSlide(); | |
| // إيقاف التبديل التلقائي عند التمرير يدويًا | |
| slider.addEventListener('mouseenter', () => { | |
| clearInterval(autoSlideInterval); | |
| }); | |
| slider.addEventListener('mouseleave', resetAutoSlide); | |
| // التكيف مع تغيير حجم الشاشة | |
| window.addEventListener('resize', () => { | |
| goToSlide(currentIndex); | |
| }); | |
| } | |
| // التهيئة الأساسية للسلايدر الرئيسي | |
| function initMainSlider() { | |
| const slider = document.querySelector('.slider-container'); | |
| const slides = document.querySelectorAll('.slider-container > div'); | |
| const prevBtn = document.querySelector('.slider-prev'); | |
| const nextBtn = document.querySelector('.slider-next'); | |
| const dots = document.querySelectorAll('.slider-dot'); | |
| let currentIndex = 0; | |
| let autoSlideInterval; | |
| // الانتقال إلى شريحة معينة | |
| function goToSlide(index) { | |
| currentIndex = index; | |
| slider.style.transform = `translateX(-${currentIndex * 100}%)`; | |
| // تحديث النقاط النشطة | |
| dots.forEach((dot, i) => { | |
| dot.classList.toggle('active', i === currentIndex); | |
| }); | |
| } | |
| // الانتقال للشريحة التالية | |
| function nextSlide() { | |
| currentIndex = (currentIndex + 1) % slides.length; | |
| goToSlide(currentIndex); | |
| } | |
| // الانتقال للشريحة السابقة | |
| function prevSlide() { | |
| currentIndex = (currentIndex - 1 + slides.length) % slides.length; | |
| goToSlide(currentIndex); | |
| } | |
| // إعادة تشغيل السلايد التلقائي | |
| function resetAutoSlide() { | |
| clearInterval(autoSlideInterval); | |
| autoSlideInterval = setInterval(nextSlide, 5000); | |
| } | |
| // أحداث الأزرار | |
| nextBtn.addEventListener('click', () => { | |
| nextSlide(); | |
| resetAutoSlide(); | |
| }); | |
| prevBtn.addEventListener('click', () => { | |
| prevSlide(); | |
| resetAutoSlide(); | |
| }); | |
| // أحداث النقاط | |
| dots.forEach((dot, index) => { | |
| dot.addEventListener('click', () => { | |
| goToSlide(index); | |
| resetAutoSlide(); | |
| }); | |
| }); | |
| // بدء التبديل التلقائي | |
| resetAutoSlide(); | |
| // إيقاف التبديل عند التمرير يدويًا | |
| slider.parentElement.addEventListener('mouseenter', () => { | |
| clearInterval(autoSlideInterval); | |
| }); | |
| slider.parentElement.addEventListener('mouseleave', resetAutoSlide); | |
| } | |
| // تهيئة الصفحة عند التحميل | |
| document.addEventListener('DOMContentLoaded', () => { | |
| createStars(); | |
| initProductSlider(); | |
| initMainSlider(); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=sofiane7/mushroomsstore" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |