mushroomsstore / index.html
sofiane7's picture
اصلاح المشاكل - Follow Up Deployment
f45b71f verified
Raw History Blame Contribute Delete
34.6 kB
<!DOCTYPE html>
<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>