من میخوام یک وبسایت فروشگاهی راه اندازی کنم و میخوام صفحه ی اصلی این وبسایت و مواردی که نیاز داره رو به صورت استاتیک طراحی کنی. دقت کن تمام مواردی که یک وبسایت حرفه ای نیاز داره رو در این صفحه پیاده سازی کن
Browse files- blog.html +229 -0
- components/cart-sidebar.js +218 -0
- components/footer.js +143 -0
- components/product-card.js +131 -0
- deals.html +271 -0
- index.html +235 -3
- products.html +202 -0
- style.css +137 -17
blog.html
ADDED
|
@@ -0,0 +1,229 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="fa" dir="rtl">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>وبلاگ - ShopVista</title>
|
| 7 |
+
<link rel="icon" type="image/x-icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🛒</text></svg>">
|
| 8 |
+
<link rel="stylesheet" href="style.css">
|
| 9 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 10 |
+
<script src="https://unpkg.com/feather-icons"></script>
|
| 11 |
+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
|
| 12 |
+
</head>
|
| 13 |
+
<body class="bg-gray-50 dark:bg-gray-900">
|
| 14 |
+
<script src="components/navbar.js"></script>
|
| 15 |
+
<script src="components/footer.js"></script>
|
| 16 |
+
|
| 17 |
+
<shop-navbar></shop-navbar>
|
| 18 |
+
|
| 19 |
+
<main class="pt-20">
|
| 20 |
+
<!-- Hero Section -->
|
| 21 |
+
<section class="bg-gradient-to-br from-purple-600 to-pink-600 text-white py-20">
|
| 22 |
+
<div class="container mx-auto px-4 text-center">
|
| 23 |
+
<h1 class="text-4xl md:text-5xl font-bold mb-4">وبلاگ شاپویستا</h1>
|
| 24 |
+
<p class="text-xl opacity-90">آخرین اخبار، مقالات و راهنماهای تکنولوژی</p>
|
| 25 |
+
</div>
|
| 26 |
+
</section>
|
| 27 |
+
|
| 28 |
+
<!-- Featured Post -->
|
| 29 |
+
<section class="py-16">
|
| 30 |
+
<div class="container mx-auto px-4">
|
| 31 |
+
<div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl overflow-hidden">
|
| 32 |
+
<div class="md:flex">
|
| 33 |
+
<div class="md:w-1/2">
|
| 34 |
+
<img src="http://static.photos/technology/640x360/301" alt="featured post" class="w-full h-full object-cover">
|
| 35 |
+
</div>
|
| 36 |
+
<div class="md:w-1/2 p-8">
|
| 37 |
+
<span class="inline-block bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm font-semibold mb-4">
|
| 38 |
+
مقاله ویژه
|
| 39 |
+
</span>
|
| 40 |
+
<h2 class="text-3xl font-bold mb-4 dark:text-white">راهنمای کامل خرید گوشی در سال 2024</h2>
|
| 41 |
+
<p class="text-gray-600 dark:text-gray-300 mb-6">با بررسی کامل مشخصات، قیمتها و برترین مدلهای بازار، بهترین گوشی را برای خود انتخاب کنید...</p>
|
| 42 |
+
<div class="flex items-center justify-between">
|
| 43 |
+
<div class="flex items-center gap-4">
|
| 44 |
+
<img src="http://static.photos/people/100x100/401" alt="author" class="w-12 h-12 rounded-full">
|
| 45 |
+
<div>
|
| 46 |
+
<div class="font-semibold dark:text-white">علی رضایی</div>
|
| 47 |
+
<div class="text-sm text-gray-500 dark:text-gray-400">۱۵ اسفند ۱۴۰۲</div>
|
| 48 |
+
</div>
|
| 49 |
+
</div>
|
| 50 |
+
<a href="#" class="text-purple-600 hover:text-purple-700 font-semibold">ادامه مطلب →</a>
|
| 51 |
+
</div>
|
| 52 |
+
</div>
|
| 53 |
+
</div>
|
| 54 |
+
</div>
|
| 55 |
+
</div>
|
| 56 |
+
</section>
|
| 57 |
+
|
| 58 |
+
<!-- Blog Categories -->
|
| 59 |
+
<section class="py-8">
|
| 60 |
+
<div class="container mx-auto px-4">
|
| 61 |
+
<div class="flex flex-wrap gap-3 justify-center">
|
| 62 |
+
<button class="px-6 py-2 bg-purple-600 text-white rounded-full">همه</button>
|
| 63 |
+
<button class="px-6 py-2 bg-white dark:bg-gray-800 dark:text-white rounded-full hover:bg-gray-100 dark:hover:bg-gray-700">موبایل</button>
|
| 64 |
+
<button class="px-6 py-2 bg-white dark:bg-gray-800 dark:text-white rounded-full hover:bg-gray-100 dark:hover:bg-gray-700">لپتاپ</button>
|
| 65 |
+
<button class="px-6 py-2 bg-white dark:bg-gray-800 dark:text-white rounded-full hover:bg-gray-100 dark:hover:bg-gray-700">گیمینگ</button>
|
| 66 |
+
<button class="px-6 py-2 bg-white dark:bg-gray-800 dark:text-white rounded-full hover:bg-gray-100 dark:hover:bg-gray-700">لوازم جانبی</button>
|
| 67 |
+
<button class="px-6 py-2 bg-white dark:bg-gray-800 dark:text-white rounded-full hover:bg-gray-100 dark:hover:bg-gray-700">نقد و بررسی</button>
|
| 68 |
+
<button class="px-6 py-2 bg-white dark:bg-gray-800 dark:text-white rounded-full hover:bg-gray-100 dark:hover:bg-gray-700">مقایسه</button>
|
| 69 |
+
</div>
|
| 70 |
+
</div>
|
| 71 |
+
</section>
|
| 72 |
+
|
| 73 |
+
<!-- Blog Posts Grid -->
|
| 74 |
+
<section class="py-16">
|
| 75 |
+
<div class="container mx-auto px-4">
|
| 76 |
+
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
| 77 |
+
<!-- Post 1 -->
|
| 78 |
+
<article class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-shadow">
|
| 79 |
+
<img src="http://static.photos/technology/320x240/302" alt="post" class="w-full h-48 object-cover">
|
| 80 |
+
<div class="p-6">
|
| 81 |
+
<span class="inline-block bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm font-semibold mb-4">
|
| 82 |
+
لپتاپ
|
| 83 |
+
</span>
|
| 84 |
+
<h3 class="text-xl font-bold mb-3 dark:text-white">بررسی لپتاپهای گیمینگ 2024</h3>
|
| 85 |
+
<p class="text-gray-600 dark:text-gray-300 mb-4">بهترین لپتاپهای گیمینگ با قیمت مناسب و عملکرد عالی را در این مقاله بررسی میکنیم...</p>
|
| 86 |
+
<div class="flex items-center justify-between">
|
| 87 |
+
<div class="flex items-center gap-2">
|
| 88 |
+
<img src="http://static.photos/people/50x50/402" alt="author" class="w-8 h-8 rounded-full">
|
| 89 |
+
<span class="text-sm text-gray-500 dark:text-gray-400">سارا محمدی</span>
|
| 90 |
+
</div>
|
| 91 |
+
<span class="text-sm text-gray-500 dark:text-gray-400">۱۰ اسفند</span>
|
| 92 |
+
</div>
|
| 93 |
+
</div>
|
| 94 |
+
</article>
|
| 95 |
+
|
| 96 |
+
<!-- Post 2 -->
|
| 97 |
+
<article class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-shadow">
|
| 98 |
+
<img src="http://static.photos/technology/320x240/303" alt="post" class="w-full h-48 object-cover">
|
| 99 |
+
<div class="p-6">
|
| 100 |
+
<span class="inline-block bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-semibold mb-4">
|
| 101 |
+
لوازم جانبی
|
| 102 |
+
</span>
|
| 103 |
+
<h3 class="text-xl font-bold mb-3 dark:text-white">بهترین هدستهای گیمینگ 2024</h3>
|
| 104 |
+
<p class="text-gray-600 dark:text-gray-300 mb-4">هدستهایی با بهترین کیفیت صدا و میکروفون برای تجربه بازی عالی را معرفی میکنیم...</p>
|
| 105 |
+
<div class="flex items-center justify-between">
|
| 106 |
+
<div class="flex items-center gap-2">
|
| 107 |
+
<img src="http://static.photos/people/50x50/403" alt="author" class="w-8 h-8 rounded-full">
|
| 108 |
+
<span class="text-sm text-gray-500 dark:text-gray-400">محمد حسینی</span>
|
| 109 |
+
</div>
|
| 110 |
+
<span class="text-sm text-gray-500 dark:text-gray-400">۸ اسفند</span>
|
| 111 |
+
</div>
|
| 112 |
+
</div>
|
| 113 |
+
</article>
|
| 114 |
+
|
| 115 |
+
<!-- Post 3 -->
|
| 116 |
+
<article class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-shadow">
|
| 117 |
+
<img src="http://static.photos/technology/320x240/304" alt="post" class="w-full h-48 object-cover">
|
| 118 |
+
<div class="p-6">
|
| 119 |
+
<span class="inline-block bg-red-100 text-red-800 px-3 py-1 rounded-full text-sm font-semibold mb-4">
|
| 120 |
+
مقایسه
|
| 121 |
+
</span>
|
| 122 |
+
<h3 class="text-xl font-bold mb-3 dark:text-white">iPhone 15 مقابل Galaxy S24</h3>
|
| 123 |
+
<p class="text-gray-600 dark:text-gray-300 mb-4">مقایسه کامل دو پرچمدار سال 2024 در طراحی، دوربین، عملکرد و قیمت...</p>
|
| 124 |
+
<div class="flex items-center justify-between">
|
| 125 |
+
<div class="flex items-center gap-2">
|
| 126 |
+
<img src="http://static.photos/people/50x50/404" alt="author" class="w-8 h-8 rounded-full">
|
| 127 |
+
<span class="text-sm text-gray-500 dark:text-gray-400">مریم اکبری</span>
|
| 128 |
+
</div>
|
| 129 |
+
<span class="text-sm text-gray-500 dark:text-gray-400">۵ اسفند</span>
|
| 130 |
+
</div>
|
| 131 |
+
</div>
|
| 132 |
+
</article>
|
| 133 |
+
|
| 134 |
+
<!-- Post 4 -->
|
| 135 |
+
<article class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-shadow">
|
| 136 |
+
<img src="http://static.photos/technology/320x240/305" alt="post" class="w-full h-48 object-cover">
|
| 137 |
+
<div class="p-6">
|
| 138 |
+
<span class="inline-block bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm font-semibold mb-4">
|
| 139 |
+
نقد و بررسی
|
| 140 |
+
</span>
|
| 141 |
+
<h3 class="text-xl font-bold mb-3 dark:text-white">بررسی ساعت هوشمند Apple Watch Series 9</h3>
|
| 142 |
+
<p class="text-gray-600 dark:text-gray-300 mb-4">جدیدترین ساعت هوشمند اپل با ویژگیهای جدید و پیشرفتهای چشمگیر...</p>
|
| 143 |
+
<div class="flex items-center justify-between">
|
| 144 |
+
<div class="flex items-center gap-2">
|
| 145 |
+
<img src="http://static.photos/people/50x50/405" alt="author" class="w-8 h-8 rounded-full">
|
| 146 |
+
<span class="text-sm text-gray-500 dark:text-gray-400">احمد علیزاده</span>
|
| 147 |
+
</div>
|
| 148 |
+
<span class="text-sm text-gray-500 dark:text-gray-400">۳ اسفند</span>
|
| 149 |
+
</div>
|
| 150 |
+
</div>
|
| 151 |
+
</article>
|
| 152 |
+
|
| 153 |
+
<!-- Post 5 -->
|
| 154 |
+
<article class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-shadow">
|
| 155 |
+
<img src="http://static.photos/technology/320x240/306" alt="post" class="w-full h-48 object-cover">
|
| 156 |
+
<div class="p-6">
|
| 157 |
+
<span class="inline-block bg-yellow-100 text-yellow-800 px-3 py-1 rounded-full text-sm font-semibold mb-4">
|
| 158 |
+
راهنمای خرید
|
| 159 |
+
</span>
|
| 160 |
+
<h3 class="text-xl font-bold mb-3 dark:text-white">راهنمای خرید بهترین باتری پاوربانک</h3>
|
| 161 |
+
<p class="text-gray-600 dark:text-gray-300 mb-4">نکات مهم برای انتخاب پاوربانک مناسب با توجه به نیاز شما و بودجه...</p>
|
| 162 |
+
<div class="flex items-center justify-between">
|
| 163 |
+
<div class="flex items-center gap-2">
|
| 164 |
+
<img src="http://static.photos/people/50x50/406" alt="author" class="w-8 h-8 rounded-full">
|
| 165 |
+
<span class="text-sm text-gray-500 dark:text-gray-400">زهرا کیمیایی</span>
|
| 166 |
+
</div>
|
| 167 |
+
<span class="text-sm text-gray-500 dark:text-gray-400">۱ اسفند</span>
|
| 168 |
+
</div>
|
| 169 |
+
</div>
|
| 170 |
+
</article>
|
| 171 |
+
|
| 172 |
+
<!-- Post 6 -->
|
| 173 |
+
<article class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-shadow">
|
| 174 |
+
<img src="http://static.photos/technology/320x240/307" alt="post" class="w-full h-48 object-cover">
|
| 175 |
+
<div class="p-6">
|
| 176 |
+
<span class="inline-block bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm font-semibold mb-4">
|
| 177 |
+
تکنولوژی
|
| 178 |
+
</span>
|
| 179 |
+
<h3 class="text-xl font-bold mb-3 dark:text-white">آینده هوش مصنوعی در موبایل</h3>
|
| 180 |
+
<p class="text-gray-600 dark:text-gray-300 mb-4">چگونگی تأثیر هوش مصنوعی بر تجربه کاربری موبایلهای آینده...</p>
|
| 181 |
+
<div class="flex items-center justify-between">
|
| 182 |
+
<div class="flex items-center gap-2">
|
| 183 |
+
<img src="http://static.photos/people/50x50/407" alt="author" class="w-8 h-8 rounded-full">
|
| 184 |
+
<span class="text-sm text-gray-500 dark:text-gray-400">رضا ولیزاده</span>
|
| 185 |
+
</div>
|
| 186 |
+
<span class="text-sm text-gray-500 dark:text-gray-400">۲۸ بهمن</span>
|
| 187 |
+
</div>
|
| 188 |
+
</div>
|
| 189 |
+
</article>
|
| 190 |
+
</div>
|
| 191 |
+
|
| 192 |
+
<!-- Load More -->
|
| 193 |
+
<div class="text-center mt-12">
|
| 194 |
+
<button class="bg-purple-600 text-white px-8 py-3 rounded-full font-semibold hover:bg-purple-700 transition-colors">
|
| 195 |
+
نمایش مطالب بیشتر
|
| 196 |
+
</button>
|
| 197 |
+
</div>
|
| 198 |
+
</div>
|
| 199 |
+
</section>
|
| 200 |
+
|
| 201 |
+
<!-- Newsletter -->
|
| 202 |
+
<section class="py-16 bg-gradient-to-r from-purple-600 to-pink-600">
|
| 203 |
+
<div class="container mx-auto px-4 text-center">
|
| 204 |
+
<h2 class="text-3xl font-bold text-white mb-4">مشترک خبرنامه ما شوید</h2>
|
| 205 |
+
<p class="text-white/90 mb-8">آخرین مقالات و اخبار تکنولوژی را مستقیماً در ایمیل خود دریافت کنید</p>
|
| 206 |
+
<form class="max-w-md mx-auto flex flex-col sm:flex-row gap-4">
|
| 207 |
+
<input type="email" placeholder="ایمیل خود را وارد کنید" class="flex-1 px-6 py-3 rounded-full text-gray-800 focus:outline-none">
|
| 208 |
+
<button type="submit" class="bg-white text-purple-600 px-8 py-3 rounded-full font-semibold hover:bg-gray-100 transition-colors">
|
| 209 |
+
عضویت
|
| 210 |
+
</button>
|
| 211 |
+
</form>
|
| 212 |
+
</div>
|
| 213 |
+
</section>
|
| 214 |
+
</main>
|
| 215 |
+
|
| 216 |
+
<shop-footer></shop-footer>
|
| 217 |
+
|
| 218 |
+
<script>
|
| 219 |
+
// Blog category filter
|
| 220 |
+
const categoryButtons = document.querySelectorAll('section button');
|
| 221 |
+
categoryButtons.forEach(btn => {
|
| 222 |
+
btn.addEventListener('click', (e) => {
|
| 223 |
+
categoryButtons.forEach(b => b.classList.remove('bg-purple-600', 'text-white'));
|
| 224 |
+
e.target.classList.add('bg-purple-600', 'text-white');
|
| 225 |
+
});
|
| 226 |
+
});
|
| 227 |
+
</script>
|
| 228 |
+
</body>
|
| 229 |
+
</html>
|
components/cart-sidebar.js
ADDED
|
@@ -0,0 +1,218 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
class CartSidebar extends HTMLElement {
|
| 2 |
+
constructor() {
|
| 3 |
+
super();
|
| 4 |
+
this.attachShadow({ mode: 'open' });
|
| 5 |
+
this.isOpen = false;
|
| 6 |
+
this.cartItems = [];
|
| 7 |
+
}
|
| 8 |
+
|
| 9 |
+
connectedCallback() {
|
| 10 |
+
this.shadowRoot.innerHTML = `
|
| 11 |
+
<style>
|
| 12 |
+
.cart-sidebar {
|
| 13 |
+
position: fixed;
|
| 14 |
+
right: -400px;
|
| 15 |
+
top: 0;
|
| 16 |
+
width: 400px;
|
| 17 |
+
height: 100vh;
|
| 18 |
+
background: white;
|
| 19 |
+
box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
|
| 20 |
+
z-index: 1001;
|
| 21 |
+
transition: right 0.3s ease;
|
| 22 |
+
display: flex;
|
| 23 |
+
flex-direction: column;
|
| 24 |
+
}
|
| 25 |
+
|
| 26 |
+
.cart-sidebar.open {
|
| 27 |
+
right: 0;
|
| 28 |
+
}
|
| 29 |
+
|
| 30 |
+
.cart-header {
|
| 31 |
+
padding: 1.5rem;
|
| 32 |
+
border-bottom: 1px solid #e5e7eb;
|
| 33 |
+
display: flex;
|
| 34 |
+
justify-content: between;
|
| 35 |
+
align-items: center;
|
| 36 |
+
}
|
| 37 |
+
|
| 38 |
+
.cart-title {
|
| 39 |
+
font-size: 1.25rem;
|
| 40 |
+
font-weight: 600;
|
| 41 |
+
flex-grow: 1;
|
| 42 |
+
}
|
| 43 |
+
|
| 44 |
+
.close-btn {
|
| 45 |
+
background: none;
|
| 46 |
+
border: none;
|
| 47 |
+
cursor: pointer;
|
| 48 |
+
padding: 0.5rem;
|
| 49 |
+
}
|
| 50 |
+
|
| 51 |
+
.cart-items {
|
| 52 |
+
flex-grow: 1;
|
| 53 |
+
overflow-y: auto;
|
| 54 |
+
padding: 1rem;
|
| 55 |
+
}
|
| 56 |
+
|
| 57 |
+
.cart-item {
|
| 58 |
+
display: flex;
|
| 59 |
+
gap: 1rem;
|
| 60 |
+
padding: 1rem;
|
| 61 |
+
border-bottom: 1px solid #f3f4f6;
|
| 62 |
+
}
|
| 63 |
+
|
| 64 |
+
.cart-item-image {
|
| 65 |
+
width: 80px;
|
| 66 |
+
height: 80px;
|
| 67 |
+
object-fit: cover;
|
| 68 |
+
border-radius: 8px;
|
| 69 |
+
}
|
| 70 |
+
|
| 71 |
+
.cart-item-info {
|
| 72 |
+
flex-grow: 1;
|
| 73 |
+
}
|
| 74 |
+
|
| 75 |
+
.cart-item-title {
|
| 76 |
+
font-weight: 600;
|
| 77 |
+
margin-bottom: 0.5rem;
|
| 78 |
+
}
|
| 79 |
+
|
| 80 |
+
.cart-item-price {
|
| 81 |
+
color: #059669;
|
| 82 |
+
font-weight: 600;
|
| 83 |
+
}
|
| 84 |
+
|
| 85 |
+
.quantity-controls {
|
| 86 |
+
display: flex;
|
| 87 |
+
align-items: center;
|
| 88 |
+
gap: 0.5rem;
|
| 89 |
+
margin-top: 0.5rem;
|
| 90 |
+
}
|
| 91 |
+
|
| 92 |
+
.quantity-btn {
|
| 93 |
+
background: #f3f4f6;
|
| 94 |
+
border: none;
|
| 95 |
+
width: 24px;
|
| 96 |
+
height: 24px;
|
| 97 |
+
border-radius: 4px;
|
| 98 |
+
cursor: pointer;
|
| 99 |
+
}
|
| 100 |
+
|
| 101 |
+
.cart-footer {
|
| 102 |
+
padding: 1.5rem;
|
| 103 |
+
border-top: 1px solid #e5e7eb;
|
| 104 |
+
}
|
| 105 |
+
|
| 106 |
+
.cart-total {
|
| 107 |
+
display: flex;
|
| 108 |
+
justify-content: between;
|
| 109 |
+
align-items: center;
|
| 110 |
+
margin-bottom: 1rem;
|
| 111 |
+
font-size: 1.25rem;
|
| 112 |
+
font-weight: 600;
|
| 113 |
+
}
|
| 114 |
+
|
| 115 |
+
.checkout-btn {
|
| 116 |
+
width: 100%;
|
| 117 |
+
background: linear-gradient(135deg, #6366f1, #9333ea);
|
| 118 |
+
color: white;
|
| 119 |
+
border: none;
|
| 120 |
+
padding: 1rem;
|
| 121 |
+
border-radius: 8px;
|
| 122 |
+
font-weight: 600;
|
| 123 |
+
cursor: pointer;
|
| 124 |
+
transition: all 0.3s ease;
|
| 125 |
+
}
|
| 126 |
+
|
| 127 |
+
.checkout-btn:hover {
|
| 128 |
+
background: linear-gradient(135deg, #4f46e5, #7e22ce);
|
| 129 |
+
}
|
| 130 |
+
|
| 131 |
+
.empty-cart {
|
| 132 |
+
text-align: center;
|
| 133 |
+
padding: 3rem;
|
| 134 |
+
color: #6b7280;
|
| 135 |
+
}
|
| 136 |
+
|
| 137 |
+
.overlay {
|
| 138 |
+
position: fixed;
|
| 139 |
+
top: 0;
|
| 140 |
+
left: 0;
|
| 141 |
+
right: 0;
|
| 142 |
+
bottom: 0;
|
| 143 |
+
background: rgba(0, 0, 0, 0.5);
|
| 144 |
+
z-index: 1000;
|
| 145 |
+
display: none;
|
| 146 |
+
}
|
| 147 |
+
|
| 148 |
+
.overlay.active {
|
| 149 |
+
display: block;
|
| 150 |
+
}
|
| 151 |
+
</style>
|
| 152 |
+
|
| 153 |
+
<div class="overlay" id="overlay"></div>
|
| 154 |
+
<div class="cart-sidebar" id="cartSidebar">
|
| 155 |
+
<div class="cart-header">
|
| 156 |
+
<h2 class="cart-title">سبد خرید</h2>
|
| 157 |
+
<button class="close-btn" id="closeBtn">
|
| 158 |
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
| 159 |
+
<line x1="18" y1="6" x2="6" y2="18"></line>
|
| 160 |
+
<line x1="6" y1="6" x2="18" y2="18"></line>
|
| 161 |
+
</svg>
|
| 162 |
+
</button>
|
| 163 |
+
</div>
|
| 164 |
+
|
| 165 |
+
<div class="cart-items" id="cartItems">
|
| 166 |
+
<div class="empty-cart">
|
| 167 |
+
<svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin: 0 auto 1rem;">
|
| 168 |
+
<path d="M9 2L6 6H3L5 20H19L21 6H18L15 2H9Z"></path>
|
| 169 |
+
</svg>
|
| 170 |
+
<p>سبد خرید شما خالی است</p>
|
| 171 |
+
</div>
|
| 172 |
+
</div>
|
| 173 |
+
|
| 174 |
+
<div class="cart-footer">
|
| 175 |
+
<div class="cart-total">
|
| 176 |
+
<span>جمع کل:</span>
|
| 177 |
+
<span id="cartTotal">۰ تومان</span>
|
| 178 |
+
</div>
|
| 179 |
+
<button class="checkout-btn">تکمیل خرید</button>
|
| 180 |
+
</div>
|
| 181 |
+
</div>
|
| 182 |
+
`;
|
| 183 |
+
|
| 184 |
+
this.setupEventListeners();
|
| 185 |
+
}
|
| 186 |
+
|
| 187 |
+
setupEventListeners() {
|
| 188 |
+
const closeBtn = this.shadowRoot.getElementById('closeBtn');
|
| 189 |
+
const overlay = this.shadowRoot.getElementById('overlay');
|
| 190 |
+
const cartSidebar = this.shadowRoot.getElementById('cartSidebar');
|
| 191 |
+
|
| 192 |
+
closeBtn.addEventListener('click', () => this.close());
|
| 193 |
+
overlay.addEventListener('click', () => this.close());
|
| 194 |
+
}
|
| 195 |
+
|
| 196 |
+
open() {
|
| 197 |
+
this.isOpen = true;
|
| 198 |
+
this.shadowRoot.getElementById('cartSidebar').classList.add('open');
|
| 199 |
+
this.shadowRoot.getElementById('overlay').classList.add('active');
|
| 200 |
+
}
|
| 201 |
+
|
| 202 |
+
close() {
|
| 203 |
+
this.isOpen = false;
|
| 204 |
+
this.shadowRoot.getElementById('cartSidebar').classList.remove('open');
|
| 205 |
+
this.shadowRoot.getElementById('overlay').classList.remove('active');
|
| 206 |
+
}
|
| 207 |
+
|
| 208 |
+
addItem(item) {
|
| 209 |
+
this.cartItems.push(item);
|
| 210 |
+
this.updateCart();
|
| 211 |
+
}
|
| 212 |
+
|
| 213 |
+
updateCart() {
|
| 214 |
+
// Update cart display logic here
|
| 215 |
+
}
|
| 216 |
+
}
|
| 217 |
+
|
| 218 |
+
customElements.define('cart-sidebar', CartSidebar);
|
components/footer.js
ADDED
|
@@ -0,0 +1,143 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
class ShopFooter extends HTMLElement {
|
| 2 |
+
connectedCallback() {
|
| 3 |
+
this.attachShadow({ mode: 'open' });
|
| 4 |
+
this.shadowRoot.innerHTML = `
|
| 5 |
+
<style>
|
| 6 |
+
footer {
|
| 7 |
+
background: linear-gradient(135deg, #1f2937, #374151);
|
| 8 |
+
color: white;
|
| 9 |
+
padding: 4rem 0 2rem;
|
| 10 |
+
margin-top: 6rem;
|
| 11 |
+
}
|
| 12 |
+
|
| 13 |
+
.footer-content {
|
| 14 |
+
max-width: 1400px;
|
| 15 |
+
margin: 0 auto;
|
| 16 |
+
padding: 0 2rem;
|
| 17 |
+
display: grid;
|
| 18 |
+
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
| 19 |
+
gap: 3rem;
|
| 20 |
+
}
|
| 21 |
+
|
| 22 |
+
.footer-section h3 {
|
| 23 |
+
margin-bottom: 1.5rem;
|
| 24 |
+
font-size: 1.2rem;
|
| 25 |
+
color: #fbbf24;
|
| 26 |
+
}
|
| 27 |
+
|
| 28 |
+
.footer-section ul {
|
| 29 |
+
list-style: none;
|
| 30 |
+
}
|
| 31 |
+
|
| 32 |
+
.footer-section ul li {
|
| 33 |
+
margin-bottom: 0.8rem;
|
| 34 |
+
}
|
| 35 |
+
|
| 36 |
+
.footer-section a {
|
| 37 |
+
color: #d1d5db;
|
| 38 |
+
text-decoration: none;
|
| 39 |
+
transition: color 0.3s ease;
|
| 40 |
+
}
|
| 41 |
+
|
| 42 |
+
.footer-section a:hover {
|
| 43 |
+
color: #fbbf24;
|
| 44 |
+
}
|
| 45 |
+
|
| 46 |
+
.social-icons {
|
| 47 |
+
display: flex;
|
| 48 |
+
gap: 1rem;
|
| 49 |
+
margin-top: 1rem;
|
| 50 |
+
}
|
| 51 |
+
|
| 52 |
+
.social-icon {
|
| 53 |
+
width: 40px;
|
| 54 |
+
height: 40px;
|
| 55 |
+
background: rgba(255, 255, 255, 0.1);
|
| 56 |
+
border-radius: 50%;
|
| 57 |
+
display: flex;
|
| 58 |
+
align-items: center;
|
| 59 |
+
justify-content: center;
|
| 60 |
+
transition: all 0.3s ease;
|
| 61 |
+
}
|
| 62 |
+
|
| 63 |
+
.social-icon:hover {
|
| 64 |
+
background: #fbbf24;
|
| 65 |
+
transform: scale(1.1);
|
| 66 |
+
}
|
| 67 |
+
|
| 68 |
+
.footer-bottom {
|
| 69 |
+
text-align: center;
|
| 70 |
+
padding: 2rem;
|
| 71 |
+
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
| 72 |
+
margin-top: 3rem;
|
| 73 |
+
}
|
| 74 |
+
</style>
|
| 75 |
+
|
| 76 |
+
<footer>
|
| 77 |
+
<div class="footer-content">
|
| 78 |
+
<div class="footer-section">
|
| 79 |
+
<h3>درباره شاپویستا</h3>
|
| 80 |
+
<p>فروشگاه آنلاین شاپویستا با هدف ارائه بهترین محصولات با کیفیت و قیمت مناسب فعالیت میکند.</p>
|
| 81 |
+
<div class="social-icons">
|
| 82 |
+
<div class="social-icon">
|
| 83 |
+
<svg width="20" height="20" viewBox="0 0 24 24" fill="white">
|
| 84 |
+
<path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
|
| 85 |
+
</svg>
|
| 86 |
+
</div>
|
| 87 |
+
<div class="social-icon">
|
| 88 |
+
<svg width="20" height="20" viewBox="0 0 24 24" fill="white">
|
| 89 |
+
<path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>
|
| 90 |
+
</svg>
|
| 91 |
+
</div>
|
| 92 |
+
<div class="social-icon">
|
| 93 |
+
<svg width="20" height="20" viewBox="0 0 24 24" fill="white">
|
| 94 |
+
<path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073z"/>
|
| 95 |
+
<path d="M12 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zm0 10.162a3.999 3.999 0 110-7.998 3.999 3.999 0 010 7.998z"/>
|
| 96 |
+
<circle cx="18.406" cy="5.594" r="1.44"/>
|
| 97 |
+
</svg>
|
| 98 |
+
</div>
|
| 99 |
+
</div>
|
| 100 |
+
</div>
|
| 101 |
+
|
| 102 |
+
<div class="footer-section">
|
| 103 |
+
<h3>لینکهای سریع</h3>
|
| 104 |
+
<ul>
|
| 105 |
+
<li><a href="/about.html">درباره ما</a></li>
|
| 106 |
+
<li><a href="/contact.html">تماس با ما</a></li>
|
| 107 |
+
<li><a href="/faq.html">سوالات متداول</a></li>
|
| 108 |
+
<li><a href="/privacy.html">حریم خصوصی</a></li>
|
| 109 |
+
<li><a href="/terms.html">شرایط ��ستفاده</a></li>
|
| 110 |
+
</ul>
|
| 111 |
+
</div>
|
| 112 |
+
|
| 113 |
+
<div class="footer-section">
|
| 114 |
+
<h3>خدمات مشتریان</h3>
|
| 115 |
+
<ul>
|
| 116 |
+
<li><a href="/shipping.html">روشهای ارسال</a></li>
|
| 117 |
+
<li><a href="/returns.html">بازگشت کالا</a></li>
|
| 118 |
+
<li><a href="/warranty.html">ضمانت کالا</a></li>
|
| 119 |
+
<li><a href="/support.html">پشتیبانی</a></li>
|
| 120 |
+
<li><a href="/track-order.html">پیگیری سفارش</a></li>
|
| 121 |
+
</ul>
|
| 122 |
+
</div>
|
| 123 |
+
|
| 124 |
+
<div class="footer-section">
|
| 125 |
+
<h3>اطلاعات تماس</h3>
|
| 126 |
+
<ul>
|
| 127 |
+
<li>آدرس: تهران، خیابان ولیعصر، پلاک 123</li>
|
| 128 |
+
<li>تلفن: 021-12345678</li>
|
| 129 |
+
<li>ایمیل: info@shopvista.ir</li>
|
| 130 |
+
<li>ساعت کاری: شنبه تا چهارشنبه 9:00 تا 18:00</li>
|
| 131 |
+
</ul>
|
| 132 |
+
</div>
|
| 133 |
+
</div>
|
| 134 |
+
|
| 135 |
+
<div class="footer-bottom">
|
| 136 |
+
<p>© 2024 شاپویستا. تمامی حقوق محفوظ است.</p>
|
| 137 |
+
</div>
|
| 138 |
+
</footer>
|
| 139 |
+
`;
|
| 140 |
+
}
|
| 141 |
+
}
|
| 142 |
+
|
| 143 |
+
customElements.define('shop-footer', ShopFooter);
|
components/product-card.js
ADDED
|
@@ -0,0 +1,131 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
class ProductCard extends HTMLElement {
|
| 2 |
+
connectedCallback() {
|
| 3 |
+
this.attachShadow({ mode: 'open' });
|
| 4 |
+
const productId = this.getAttribute('data-id');
|
| 5 |
+
const productTitle = this.getAttribute('data-title');
|
| 6 |
+
const productPrice = this.getAttribute('data-price');
|
| 7 |
+
const productDiscount = this.getAttribute('data-discount');
|
| 8 |
+
const productImage = this.getAttribute('data-image');
|
| 9 |
+
|
| 10 |
+
this.shadowRoot.innerHTML = `
|
| 11 |
+
<style>
|
| 12 |
+
.product-card {
|
| 13 |
+
background: white;
|
| 14 |
+
border-radius: 12px;
|
| 15 |
+
overflow: hidden;
|
| 16 |
+
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
|
| 17 |
+
transition: all 0.3s ease;
|
| 18 |
+
cursor: pointer;
|
| 19 |
+
position: relative;
|
| 20 |
+
}
|
| 21 |
+
|
| 22 |
+
.product-card:hover {
|
| 23 |
+
transform: translateY(-5px);
|
| 24 |
+
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
|
| 25 |
+
}
|
| 26 |
+
|
| 27 |
+
.product-image {
|
| 28 |
+
width: 100%;
|
| 29 |
+
height: 250px;
|
| 30 |
+
object-fit: cover;
|
| 31 |
+
background: #f3f4f6;
|
| 32 |
+
}
|
| 33 |
+
|
| 34 |
+
.discount-badge {
|
| 35 |
+
position: absolute;
|
| 36 |
+
top: 10px;
|
| 37 |
+
right: 10px;
|
| 38 |
+
background: #ef4444;
|
| 39 |
+
color: white;
|
| 40 |
+
padding: 0.25rem 0.75rem;
|
| 41 |
+
border-radius: 20px;
|
| 42 |
+
font-size: 0.875rem;
|
| 43 |
+
font-weight: 600;
|
| 44 |
+
}
|
| 45 |
+
|
| 46 |
+
.product-info {
|
| 47 |
+
padding: 1.5rem;
|
| 48 |
+
}
|
| 49 |
+
|
| 50 |
+
.product-title {
|
| 51 |
+
font-size: 1.125rem;
|
| 52 |
+
font-weight: 600;
|
| 53 |
+
margin-bottom: 0.5rem;
|
| 54 |
+
color: #1f2937;
|
| 55 |
+
line-height: 1.4;
|
| 56 |
+
}
|
| 57 |
+
|
| 58 |
+
.product-price {
|
| 59 |
+
display: flex;
|
| 60 |
+
align-items: center;
|
| 61 |
+
gap: 0.75rem;
|
| 62 |
+
margin-bottom: 1rem;
|
| 63 |
+
}
|
| 64 |
+
|
| 65 |
+
.price-current {
|
| 66 |
+
font-size: 1.5rem;
|
| 67 |
+
font-weight: 700;
|
| 68 |
+
color: #059669;
|
| 69 |
+
}
|
| 70 |
+
|
| 71 |
+
.price-original {
|
| 72 |
+
font-size: 1rem;
|
| 73 |
+
color: #9ca3af;
|
| 74 |
+
text-decoration: line-through;
|
| 75 |
+
}
|
| 76 |
+
|
| 77 |
+
.product-rating {
|
| 78 |
+
display: flex;
|
| 79 |
+
align-items: center;
|
| 80 |
+
gap: 0.5rem;
|
| 81 |
+
margin-bottom: 1rem;
|
| 82 |
+
}
|
| 83 |
+
|
| 84 |
+
.stars {
|
| 85 |
+
color: #fbbf24;
|
| 86 |
+
}
|
| 87 |
+
|
| 88 |
+
.rating-count {
|
| 89 |
+
color: #6b7280;
|
| 90 |
+
font-size: 0.875rem;
|
| 91 |
+
}
|
| 92 |
+
|
| 93 |
+
.add-to-cart-btn {
|
| 94 |
+
width: 100%;
|
| 95 |
+
background: linear-gradient(135deg, #6366f1, #9333ea);
|
| 96 |
+
color: white;
|
| 97 |
+
border: none;
|
| 98 |
+
padding: 0.75rem;
|
| 99 |
+
border-radius: 8px;
|
| 100 |
+
font-weight: 600;
|
| 101 |
+
cursor: pointer;
|
| 102 |
+
transition: all 0.3s ease;
|
| 103 |
+
}
|
| 104 |
+
|
| 105 |
+
.add-to-cart-btn:hover {
|
| 106 |
+
background: linear-gradient(135deg, #4f46e5, #7e22ce);
|
| 107 |
+
transform: scale(1.02);
|
| 108 |
+
}
|
| 109 |
+
</style>
|
| 110 |
+
|
| 111 |
+
<div class="product-card">
|
| 112 |
+
<img src="${productImage}" alt="${productTitle}" class="product-image">
|
| 113 |
+
${productDiscount ? `<span class="discount-badge">${productDiscount}% تخفیف</span>` : ''}
|
| 114 |
+
<div class="product-info">
|
| 115 |
+
<h3 class="product-title">${productTitle}</h3>
|
| 116 |
+
<div class="product-price">
|
| 117 |
+
<span class="price-current">${productPrice}</span>
|
| 118 |
+
${productDiscount ? `<span class="price-original">${Math.round(productPrice * (1 + parseInt(productDiscount) / 100))}</span>` : ''}
|
| 119 |
+
</div>
|
| 120 |
+
<div class="product-rating">
|
| 121 |
+
<div class="stars">★★★★☆</div>
|
| 122 |
+
<span class="rating-count">(4.5 از 128 نظر)</span>
|
| 123 |
+
</div>
|
| 124 |
+
<button class="add-to-cart-btn">افزودن به سبد خرید</button>
|
| 125 |
+
</div>
|
| 126 |
+
</div>
|
| 127 |
+
`;
|
| 128 |
+
}
|
| 129 |
+
}
|
| 130 |
+
|
| 131 |
+
customElements.define('product-card', ProductCard);
|
deals.html
ADDED
|
@@ -0,0 +1,271 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="fa" dir="rtl">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>تخفیفها - ShopVista</title>
|
| 7 |
+
<link rel="icon" type="image/x-icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🛒</text></svg>">
|
| 8 |
+
<link rel="stylesheet" href="style.css">
|
| 9 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 10 |
+
<script src="https://unpkg.com/feather-icons"></script>
|
| 11 |
+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
|
| 12 |
+
</head>
|
| 13 |
+
<body class="bg-gray-50 dark:bg-gray-900">
|
| 14 |
+
<script src="components/navbar.js"></script>
|
| 15 |
+
<script src="components/footer.js"></script>
|
| 16 |
+
<script src="components/product-card.js"></script>
|
| 17 |
+
<script src="components/cart-sidebar.js"></script>
|
| 18 |
+
|
| 19 |
+
<shop-navbar></shop-navbar>
|
| 20 |
+
|
| 21 |
+
<main class="pt-20">
|
| 22 |
+
<!-- Hero Section -->
|
| 23 |
+
<section class="bg-gradient-to-br from-red-500 to-orange-500 text-white py-16">
|
| 24 |
+
<div class="container mx-auto px-4 text-center">
|
| 25 |
+
<h1 class="text-4xl md:text-5xl font-bold mb-4">فروش ویژه شاپویستا</h1>
|
| 26 |
+
<p class="text-xl opacity-90 mb-8">تا 70% تخفیف بر روی محصولات منتخب - فرصت را از دست ندهید!</p>
|
| 27 |
+
<div class="max-w-2xl mx-auto">
|
| 28 |
+
<div class="bg-white/20 backdrop-blur rounded-xl p-6 grid grid-cols-4 gap-4">
|
| 29 |
+
<div class="text-center">
|
| 30 |
+
<div class="text-4xl font-bold mb-1">02</div>
|
| 31 |
+
<div class="text-sm">روز</div>
|
| 32 |
+
</div>
|
| 33 |
+
<div class="text-center">
|
| 34 |
+
<div class="text-4xl font-bold mb-1">14</div>
|
| 35 |
+
<div class="text-sm">ساعت</div>
|
| 36 |
+
</div>
|
| 37 |
+
<div class="text-center">
|
| 38 |
+
<div class="text-4xl font-bold mb-1">37</div>
|
| 39 |
+
<div class="text-sm">دقیقه</div>
|
| 40 |
+
</div>
|
| 41 |
+
<div class="text-center">
|
| 42 |
+
<div class="text-4xl font-bold mb-1">52</div>
|
| 43 |
+
<div class="text-sm">ثانیه</div>
|
| 44 |
+
</div>
|
| 45 |
+
</div>
|
| 46 |
+
</div>
|
| 47 |
+
</div>
|
| 48 |
+
</section>
|
| 49 |
+
|
| 50 |
+
<!-- Flash Deals -->
|
| 51 |
+
<section class="py-16">
|
| 52 |
+
<div class="container mx-auto px-4">
|
| 53 |
+
<div class="text-center mb-12">
|
| 54 |
+
<h2 class="text-3xl md:text-4xl font-bold text-gray-800 dark:text-white mb-4">پیشنهادات لحظهای</h2>
|
| 55 |
+
<p class="text-gray-600 dark:text-gray-300">تخفیفهای محدود زمانی را از دست ندهید</p>
|
| 56 |
+
</div>
|
| 57 |
+
|
| 58 |
+
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
| 59 |
+
<product-card
|
| 60 |
+
data-id="11"
|
| 61 |
+
data-title="گوشی آیفون 13"
|
| 62 |
+
data-price="28,000,000 تومان"
|
| 63 |
+
data-discount="30"
|
| 64 |
+
data-image="http://static.photos/technology/320x240/111">
|
| 65 |
+
</product-card>
|
| 66 |
+
<product-card
|
| 67 |
+
data-id="12"
|
| 68 |
+
data-title="لپتاپ ASUS ROG"
|
| 69 |
+
data-price="65,000,000 تومان"
|
| 70 |
+
data-discount="25"
|
| 71 |
+
data-image="http://static.photos/technology/320x240/112">
|
| 72 |
+
</product-card>
|
| 73 |
+
<product-card
|
| 74 |
+
data-id="13"
|
| 75 |
+
data-title="گوشی سامسونگ S22"
|
| 76 |
+
data-price="18,000,000 تومان"
|
| 77 |
+
data-discount="35"
|
| 78 |
+
data-image="http://static.photos/technology/320x240/113">
|
| 79 |
+
</product-card>
|
| 80 |
+
<product-card
|
| 81 |
+
data-id="14"
|
| 82 |
+
data-title="هدفون Sony WH-1000XM4"
|
| 83 |
+
data-price="8,000,000 تومان"
|
| 84 |
+
data-discount="40"
|
| 85 |
+
data-image="http://static.photos/technology/320x240/114">
|
| 86 |
+
</product-card>
|
| 87 |
+
</div>
|
| 88 |
+
</div>
|
| 89 |
+
</section>
|
| 90 |
+
|
| 91 |
+
<!-- Category Deals -->
|
| 92 |
+
<section class="py-16 bg-gray-100 dark:bg-gray-800">
|
| 93 |
+
<div class="container mx-auto px-4">
|
| 94 |
+
<h2 class="text-3xl md:text-4xl font-bold text-center text-gray-800 dark:text-white mb-12">تخفیفها بر اساس دستهبندی</h2>
|
| 95 |
+
|
| 96 |
+
<!-- Mobile Deals -->
|
| 97 |
+
<div class="mb-16">
|
| 98 |
+
<div class="flex justify-between items-center mb-6">
|
| 99 |
+
<h3 class="text-2xl font-bold dark:text-white">موبایل و تبلت</h3>
|
| 100 |
+
<a href="#" class="text-primary-600 hover:text-primary-700 font-semibold">مشاهده همه →</a>
|
| 101 |
+
</div>
|
| 102 |
+
<div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-4">
|
| 103 |
+
<product-card
|
| 104 |
+
data-id="15"
|
| 105 |
+
data-title="گوشی iPhone 12"
|
| 106 |
+
data-price="20,000,000 تومان"
|
| 107 |
+
data-discount="20"
|
| 108 |
+
data-image="http://static.photos/technology/320x240/115">
|
| 109 |
+
</product-card>
|
| 110 |
+
<product-card
|
| 111 |
+
data-id="16"
|
| 112 |
+
data-title="گوشی Galaxy A53"
|
| 113 |
+
data-price="12,000,000 تومان"
|
| 114 |
+
data-discount="15"
|
| 115 |
+
data-image="http://static.photos/technology/320x240/116">
|
| 116 |
+
</product-card>
|
| 117 |
+
<product-card
|
| 118 |
+
data-id="17"
|
| 119 |
+
data-title="گوشی Redmi Note 12"
|
| 120 |
+
data-price="8,000,000 تومان"
|
| 121 |
+
data-discount="25"
|
| 122 |
+
data-image="http://static.photos/technology/320x240/117">
|
| 123 |
+
</product-card>
|
| 124 |
+
<product-card
|
| 125 |
+
data-id="18"
|
| 126 |
+
data-title="تبلت Galaxy Tab S8"
|
| 127 |
+
data-price="18,000,000 تومان"
|
| 128 |
+
data-discount="18"
|
| 129 |
+
data-image="http://static.photos/technology/320x240/118">
|
| 130 |
+
</product-card>
|
| 131 |
+
<product-card
|
| 132 |
+
data-id="19"
|
| 133 |
+
data-title="تبلت iPad mini"
|
| 134 |
+
data-price="15,000,000 تومان"
|
| 135 |
+
data-discount="10"
|
| 136 |
+
data-image="http://static.photos/technology/320x240/119">
|
| 137 |
+
</product-card>
|
| 138 |
+
</div>
|
| 139 |
+
</div>
|
| 140 |
+
|
| 141 |
+
<!-- Laptop Deals -->
|
| 142 |
+
<div class="mb-16">
|
| 143 |
+
<div class="flex justify-between items-center mb-6">
|
| 144 |
+
<h3 class="text-2xl font-bold dark:text-white">لپتاپ و کامپیوتر</h3>
|
| 145 |
+
<a href="#" class="text-primary-600 hover:text-primary-700 font-semibold">مشاهده همه →</a>
|
| 146 |
+
</div>
|
| 147 |
+
<div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-4">
|
| 148 |
+
<product-card
|
| 149 |
+
data-id="20"
|
| 150 |
+
data-title="لپتاپ HP Pavilion"
|
| 151 |
+
data-price="28,000,000 تومان"
|
| 152 |
+
data-discount="22"
|
| 153 |
+
data-image="http://static.photos/technology/320x240/120">
|
| 154 |
+
</product-card>
|
| 155 |
+
<product-card
|
| 156 |
+
data-id="21"
|
| 157 |
+
data-title="لپتاپ Acer Aspire"
|
| 158 |
+
data-price="22,000,000 تومان"
|
| 159 |
+
data-discount="18"
|
| 160 |
+
data-image="http://static.photos/technology/320x240/121">
|
| 161 |
+
</product-card>
|
| 162 |
+
<product-card
|
| 163 |
+
data-id="22"
|
| 164 |
+
data-title="لپتاپ Surface Pro"
|
| 165 |
+
data-price="35,000,000 تومان"
|
| 166 |
+
data-discount="15"
|
| 167 |
+
data-image="http://static.photos/technology/320x240/122">
|
| 168 |
+
</product-card>
|
| 169 |
+
<product-card
|
| 170 |
+
data-id="23"
|
| 171 |
+
data-title="لپتپ MSI Gaming"
|
| 172 |
+
data-price="45,000,000 تومان"
|
| 173 |
+
data-discount="20"
|
| 174 |
+
data-image="http://static.photos/technology/320x240/123">
|
| 175 |
+
</product-card>
|
| 176 |
+
<product-card
|
| 177 |
+
data-id="24"
|
| 178 |
+
data-title="لپتاپ ASUS ZenBook"
|
| 179 |
+
data-price="38,000,000 تومان"
|
| 180 |
+
data-discount="25"
|
| 181 |
+
data-image="http://static.photos/technology/320x240/124">
|
| 182 |
+
</product-card>
|
| 183 |
+
</div>
|
| 184 |
+
</div>
|
| 185 |
+
|
| 186 |
+
<!-- Accessories Deals -->
|
| 187 |
+
<div>
|
| 188 |
+
<div class="flex justify-between items-center mb-6">
|
| 189 |
+
<h3 class="text-2xl font-bold dark:text-white">لوازم جانبی</h3>
|
| 190 |
+
<a href="#" class="text-primary-600 hover:text-primary-700 font-semibold">مشاهده همه →</a>
|
| 191 |
+
</div>
|
| 192 |
+
<div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-4">
|
| 193 |
+
<product-card
|
| 194 |
+
data-id="25"
|
| 195 |
+
data-title="شارژر 65W Samsung"
|
| 196 |
+
data-price="800,000 تومان"
|
| 197 |
+
data-discount="30"
|
| 198 |
+
data-image="http://static.photos/technology/320x240/125">
|
| 199 |
+
</product-card>
|
| 200 |
+
<product-card
|
| 201 |
+
data-id="26"
|
| 202 |
+
data-title="کیبورد مکانیکی Logitech"
|
| 203 |
+
data-price="2,500,000 تومان"
|
| 204 |
+
data-discount="20"
|
| 205 |
+
data-image="http://static.photos/technology/320x240/126">
|
| 206 |
+
</product-card>
|
| 207 |
+
<product-card
|
| 208 |
+
data-id="27"
|
| 209 |
+
data-title="ماوس گیمینگ Razer"
|
| 210 |
+
data-price="1,800,000 تومان"
|
| 211 |
+
data-discount="25"
|
| 212 |
+
data-image="http://static.photos/technology/320x240/127">
|
| 213 |
+
</product-card>
|
| 214 |
+
<product-card
|
| 215 |
+
data-id="28"
|
| 216 |
+
data-title="پاوربانک 20000mAh"
|
| 217 |
+
data-price="900,000 تومان"
|
| 218 |
+
data-discount="40"
|
| 219 |
+
data-image="http://static.photos/technology/320x240/128">
|
| 220 |
+
</product-card>
|
| 221 |
+
<product-card
|
| 222 |
+
data-id="29"
|
| 223 |
+
data-title="محافظ صفحه شیشهای"
|
| 224 |
+
data-price="150,000 تومان"
|
| 225 |
+
data-discount="50"
|
| 226 |
+
data-image="http://static.photos/technology/320x240/129">
|
| 227 |
+
</product-card>
|
| 228 |
+
</div>
|
| 229 |
+
</div>
|
| 230 |
+
</div>
|
| 231 |
+
</section>
|
| 232 |
+
|
| 233 |
+
<!-- Email Subscription -->
|
| 234 |
+
<section class="py-16 bg-gradient-to-r from-yellow-400 to-orange-500">
|
| 235 |
+
<div class="container mx-auto px-4 text-center">
|
| 236 |
+
<h2 class="text-3xl font-bold text-white mb-4">آخرین تخفیفها را از دست ندهید!</h2>
|
| 237 |
+
<p class="text-white/90 mb-8">عضو شوید و اولین نفری باشید که از پیشنهادات ویژه باخبر میشوید</p>
|
| 238 |
+
<form class="max-w-md mx-auto flex flex-col sm:flex-row gap-4">
|
| 239 |
+
<input type="email" placeholder="ایمیل خود را وارد کنید" class="flex-1 px-6 py-3 rounded-full text-gray-800 focus:outline-none">
|
| 240 |
+
<button type="submit" class="bg-white text-orange-500 px-8 py-3 rounded-full font-semibold hover:bg-gray-100 transition-colors">
|
| 241 |
+
عضویت رایگان
|
| 242 |
+
</button>
|
| 243 |
+
</form>
|
| 244 |
+
</div>
|
| 245 |
+
</section>
|
| 246 |
+
</main>
|
| 247 |
+
|
| 248 |
+
<shop-footer></shop-footer>
|
| 249 |
+
<cart-sidebar id="cartSidebar"></cart-sidebar>
|
| 250 |
+
|
| 251 |
+
<script>
|
| 252 |
+
// Cart functionality
|
| 253 |
+
const cartBtn = document.querySelector('#cartBtn');
|
| 254 |
+
const cartSidebar = document.getElementById('cartSidebar');
|
| 255 |
+
|
| 256 |
+
cartBtn.addEventListener('click', () => {
|
| 257 |
+
cartSidebar.open();
|
| 258 |
+
});
|
| 259 |
+
|
| 260 |
+
// Add to cart functionality
|
| 261 |
+
document.querySelectorAll('.add-to-cart-btn').forEach(btn => {
|
| 262 |
+
btn.addEventListener('click', (e) => {
|
| 263 |
+
e.preventDefault();
|
| 264 |
+
const count = parseInt(document.getElementById('cartCount').textContent) + 1;
|
| 265 |
+
document.getElementById('cartCount').textContent = count;
|
| 266 |
+
cartSidebar.open();
|
| 267 |
+
});
|
| 268 |
+
});
|
| 269 |
+
</script>
|
| 270 |
+
</body>
|
| 271 |
+
</html>
|
index.html
CHANGED
|
@@ -82,8 +82,240 @@
|
|
| 82 |
</div>
|
| 83 |
<div class="relative animate-float">
|
| 84 |
<div class="absolute inset-0 bg-primary-400 rounded-full blur-3xl opacity-30"></div>
|
| 85 |
-
<img src="http://static.photos/technology/640x360/42" alt="محصولات فناوری" class="relative z
|
| 86 |
-
<
|
| 87 |
-
<
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 88 |
</body>
|
| 89 |
</html>
|
|
|
|
| 82 |
</div>
|
| 83 |
<div class="relative animate-float">
|
| 84 |
<div class="absolute inset-0 bg-primary-400 rounded-full blur-3xl opacity-30"></div>
|
| 85 |
+
<img src="http://static.photos/technology/640x360/42" alt="محصولات فناوری" class="relative z-10 w-full rounded-2xl shadow-2xl">
|
| 86 |
+
</div>
|
| 87 |
+
</div>
|
| 88 |
+
</div>
|
| 89 |
+
</section>
|
| 90 |
+
|
| 91 |
+
<!-- Categories Section -->
|
| 92 |
+
<section class="py-16">
|
| 93 |
+
<div class="container mx-auto px-4">
|
| 94 |
+
<div class="text-center mb-12">
|
| 95 |
+
<h2 class="text-3xl md:text-4xl font-bold text-gray-800 dark:text-white mb-4">دستهبندیهای پرطرفدار</h2>
|
| 96 |
+
<p class="text-gray-600 dark:text-gray-300">هر آنچه نیاز دارید در دستهبندیهای ما پیدا میکنید</p>
|
| 97 |
+
</div>
|
| 98 |
+
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
|
| 99 |
+
<div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-lg hover:shadow-xl transition-all cursor-pointer group">
|
| 100 |
+
<div class="w-16 h-16 bg-gradient-to-br from-blue-400 to-blue-600 rounded-full mx-auto mb-4 flex items-center justify-center group-hover:scale-110 transition-transform">
|
| 101 |
+
<svg width="32" height="32" viewBox="0 0 24 24" fill="white">
|
| 102 |
+
<path d="M17 1.01L7 1c-1.1 0-2 .9-2 2v18c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V3c0-1.1-.9-1.99-2-1.99zM17 19H7V5h10v14z"/>
|
| 103 |
+
</svg>
|
| 104 |
+
</div>
|
| 105 |
+
<h3 class="text-center font-semibold dark:text-white">موبایل</h3>
|
| 106 |
+
</div>
|
| 107 |
+
<div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-lg hover:shadow-xl transition-all cursor-pointer group">
|
| 108 |
+
<div class="w-16 h-16 bg-gradient-to-br from-green-400 to-green-600 rounded-full mx-auto mb-4 flex items-center justify-center group-hover:scale-110 transition-transform">
|
| 109 |
+
<svg width="32" height="32" viewBox="0 0 24 24" fill="white">
|
| 110 |
+
<path d="M20 18c1.1 0 1.99-.9 1.99-2L22 6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2H0v2h24v-2h-4zM4 6h16v10H4V6z"/>
|
| 111 |
+
</svg>
|
| 112 |
+
</div>
|
| 113 |
+
<h3 class="text-center font-semibold dark:text-white">لپتاپ</h3>
|
| 114 |
+
</div>
|
| 115 |
+
<div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-lg hover:shadow-xl transition-all cursor-pointer group">
|
| 116 |
+
<div class="w-16 h-16 bg-gradient-to-br from-purple-400 to-purple-600 rounded-full mx-auto mb-4 flex items-center justify-center group-hover:scale-110 transition-transform">
|
| 117 |
+
<svg width="32" height="32" viewBox="0 0 24 24" fill="white">
|
| 118 |
+
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
|
| 119 |
+
</svg>
|
| 120 |
+
</div>
|
| 121 |
+
<h3 class="text-center font-semibold dark:text-white">لوازم جانبی</h3>
|
| 122 |
+
</div>
|
| 123 |
+
<div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-lg hover:shadow-xl transition-all cursor-pointer group">
|
| 124 |
+
<div class="w-16 h-16 bg-gradient-to-br from-red-400 to-red-600 rounded-full mx-auto mb-4 flex items-center justify-center group-hover:scale-110 transition-transform">
|
| 125 |
+
<svg width="32" height="32" viewBox="0 0 24 24" fill="white">
|
| 126 |
+
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
|
| 127 |
+
</svg>
|
| 128 |
+
</div>
|
| 129 |
+
<h3 class="text-center font-semibold dark:text-white">صوتی تصویری</h3>
|
| 130 |
+
</div>
|
| 131 |
+
<div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-lg hover:shadow-xl transition-all cursor-pointer group">
|
| 132 |
+
<div class="w-16 h-16 bg-gradient-to-br from-yellow-400 to-yellow-600 rounded-full mx-auto mb-4 flex items-center justify-center group-hover:scale-110 transition-transform">
|
| 133 |
+
<svg width="32" height="32" viewBox="0 0 24 24" fill="white">
|
| 134 |
+
<path d="M20 6h-2.18c.11-.31.18-.65.18-1a2.996 2.996 0 00-5.5-1.65l-.5.67-.5-.68C10.96 2.54 10.05 2 9 2 7.34 2 6 3.34 6 5c0 .35.07.69.18 1H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2z"/>
|
| 135 |
+
</svg>
|
| 136 |
+
</div>
|
| 137 |
+
<h3 class="text-center font-semibold dark:text-white">گیمینگ</h3>
|
| 138 |
+
</div>
|
| 139 |
+
<div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-lg hover:shadow-xl transition-all cursor-pointer group">
|
| 140 |
+
<div class="w-16 h-16 bg-gradient-to-br from-pink-400 to-pink-600 rounded-full mx-auto mb-4 flex items-center justify-center group-hover:scale-110 transition-transform">
|
| 141 |
+
<svg width="32" height="32" viewBox="0 0 24 24" fill="white">
|
| 142 |
+
<path d="M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4V7zm-1-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>
|
| 143 |
+
</svg>
|
| 144 |
+
</div>
|
| 145 |
+
<h3 class="text-center font-semibold dark:text-white">ساعت هوشمند</h3>
|
| 146 |
+
</div>
|
| 147 |
+
</div>
|
| 148 |
+
</div>
|
| 149 |
+
</section>
|
| 150 |
+
|
| 151 |
+
<!-- Featured Products -->
|
| 152 |
+
<section class="py-16 bg-gray-100 dark:bg-gray-800">
|
| 153 |
+
<div class="container mx-auto px-4">
|
| 154 |
+
<div class="text-center mb-12">
|
| 155 |
+
<h2 class="text-3xl md:text-4xl font-bold text-gray-800 dark:text-white mb-4">محصولات ویژه</h2>
|
| 156 |
+
<p class="text-gray-600 dark:text-gray-300">منتخب بهترینها با ضمانت کیفیت</p>
|
| 157 |
+
</div>
|
| 158 |
+
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
| 159 |
+
<product-card
|
| 160 |
+
data-id="1"
|
| 161 |
+
data-title="گوشی آیفون 13 پرو مکس"
|
| 162 |
+
data-price="45,000,000 تومان"
|
| 163 |
+
data-discount="15"
|
| 164 |
+
data-image="http://static.photos/technology/320x240/101">
|
| 165 |
+
</product-card>
|
| 166 |
+
<product-card
|
| 167 |
+
data-id="2"
|
| 168 |
+
data-title="لپتاپ مکبوک پرو M2"
|
| 169 |
+
data-price="85,000,000 تومان"
|
| 170 |
+
data-discount="10"
|
| 171 |
+
data-image="http://static.photos/technology/320x240/102">
|
| 172 |
+
</product-card>
|
| 173 |
+
<product-card
|
| 174 |
+
data-id="3"
|
| 175 |
+
data-title="سامسونگ گلکسی S23 Ultra"
|
| 176 |
+
data-price="35,000,000 تومان"
|
| 177 |
+
data-discount="20"
|
| 178 |
+
data-image="http://static.photos/technology/320x240/103">
|
| 179 |
+
</product-card>
|
| 180 |
+
<product-card
|
| 181 |
+
data-id="4"
|
| 182 |
+
data-title="هدیر ایرپاد پرو 2"
|
| 183 |
+
data-price="12,000,000 تومان"
|
| 184 |
+
data-discount="5"
|
| 185 |
+
data-image="http://static.photos/technology/320x240/104">
|
| 186 |
+
</product-card>
|
| 187 |
+
</div>
|
| 188 |
+
</div>
|
| 189 |
+
</section>
|
| 190 |
+
|
| 191 |
+
<!-- Special Offers -->
|
| 192 |
+
<section id="deals" class="py-16">
|
| 193 |
+
<div class="container mx-auto px-4">
|
| 194 |
+
<div class="bg-gradient-to-r from-yellow-400 to-orange-500 rounded-2xl p-8 md:p-12 text-white">
|
| 195 |
+
<div class="grid md:grid-cols-2 gap-8 items-center">
|
| 196 |
+
<div>
|
| 197 |
+
<h2 class="text-4xl font-bold mb-4">فروش ویژه هفته</h2>
|
| 198 |
+
<p class="text-xl mb-6 opacity-90">تا 70% تخفیف بر روی محصولات منتخب</p>
|
| 199 |
+
<div class="flex items-center gap-4 mb-8">
|
| 200 |
+
<div class="bg-white/20 backdrop-blur rounded-lg p-3 text-center">
|
| 201 |
+
<div class="text-3xl font-bold">02</div>
|
| 202 |
+
<div class="text-sm">روز</div>
|
| 203 |
+
</div>
|
| 204 |
+
<div class="bg-white/20 backdrop-blur rounded-lg p-3 text-center">
|
| 205 |
+
<div class="text-3xl font-bold">14</div>
|
| 206 |
+
<div class="text-sm">ساعت</div>
|
| 207 |
+
</div>
|
| 208 |
+
<div class="bg-white/20 backdrop-blur rounded-lg p-3 text-center">
|
| 209 |
+
<div class="text-3xl font-bold">37</div>
|
| 210 |
+
<div class="text-sm">دقیقه</div>
|
| 211 |
+
</div>
|
| 212 |
+
<div class="bg-white/20 backdrop-blur rounded-lg p-3 text-center">
|
| 213 |
+
<div class="text-3xl font-bold">52</div>
|
| 214 |
+
<div class="text-sm">ثانیه</div>
|
| 215 |
+
</div>
|
| 216 |
+
</div>
|
| 217 |
+
<a href="#" class="inline-block bg-white text-orange-500 px-8 py-3 rounded-full font-semibold hover:bg-gray-100 transition-colors">
|
| 218 |
+
مشاهده پیشنهادات
|
| 219 |
+
</a>
|
| 220 |
+
</div>
|
| 221 |
+
<div class="text-center">
|
| 222 |
+
<img src="http://static.photos/office/640x360/201" alt="فروش ویژه" class="rounded-xl shadow-2xl">
|
| 223 |
+
</div>
|
| 224 |
+
</div>
|
| 225 |
+
</div>
|
| 226 |
+
</div>
|
| 227 |
+
</section>
|
| 228 |
+
|
| 229 |
+
<!-- Services -->
|
| 230 |
+
<section class="py-16 bg-white dark:bg-gray-900">
|
| 231 |
+
<div class="container mx-auto px-4">
|
| 232 |
+
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
|
| 233 |
+
<div class="text-center">
|
| 234 |
+
<div class="w-16 h-16 bg-gradient-to-br from-blue-400 to-blue-600 rounded-full mx-auto mb-4 flex items-center justify-center">
|
| 235 |
+
<svg width="32" height="32" viewBox="0 0 24 24" fill="white">
|
| 236 |
+
<path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z"/>
|
| 237 |
+
</svg>
|
| 238 |
+
</div>
|
| 239 |
+
<h3 class="font-semibold text-lg mb-2 dark:text-white">ارسال سریع</h3>
|
| 240 |
+
<p class="text-gray-600 dark:text-gray-300">ارسال رایگان برای سفارشات بالای ۵۰۰ هزار تومان</p>
|
| 241 |
+
</div>
|
| 242 |
+
<div class="text-center">
|
| 243 |
+
<div class="w-16 h-16 bg-gradient-to-br from-green-400 to-green-600 rounded-full mx-auto mb-4 flex items-center justify-center">
|
| 244 |
+
<svg width="32" height="32" viewBox="0 0 24 24" fill="white">
|
| 245 |
+
<path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4z"/>
|
| 246 |
+
</svg>
|
| 247 |
+
</div>
|
| 248 |
+
<h3 class="font-semibold text-lg mb-2 dark:text-white">ضمانت اصالت</h3>
|
| 249 |
+
<p class="text-gray-600 dark:text-gray-300">همه محصولات اصل و با گارانتی معتبر</p>
|
| 250 |
+
</div>
|
| 251 |
+
<div class="text-center">
|
| 252 |
+
<div class="w-16 h-16 bg-gradient-to-br from-purple-400 to-purple-600 rounded-full mx-auto mb-4 flex items-center justify-center">
|
| 253 |
+
<svg width="32" height="32" viewBox="0 0 24 24" fill="white">
|
| 254 |
+
<path d="M9 11H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2zm2-7h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11z"/>
|
| 255 |
+
</svg>
|
| 256 |
+
</div>
|
| 257 |
+
<h3 class="font-semibold text-lg mb-2 dark:text-white">پشتیبانی ۲۴/۷</h3>
|
| 258 |
+
<p class="text-gray-600 dark:text-gray-300">همیشه آماده پاسخگویی به سوالات شما</p>
|
| 259 |
+
</div>
|
| 260 |
+
<div class="text-center">
|
| 261 |
+
<div class="w-16 h-16 bg-gradient-to-br from-red-400 to-red-600 rounded-full mx-auto mb-4 flex items-center justify-center">
|
| 262 |
+
<svg width="32" height="32" viewBox="0 0 24 24" fill="white">
|
| 263 |
+
<path d="M11 17h2v-6h-2v6zm1-15C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zM11 9h2V7h-2v2z"/>
|
| 264 |
+
</svg>
|
| 265 |
+
</div>
|
| 266 |
+
<h3 class="font-semibold text-lg mb-2 dark:text-white">بازگشت آسان</h3>
|
| 267 |
+
<p class="text-gray-600 dark:text-gray-300">۷ روز ضمانت بازگشت کالا</p>
|
| 268 |
+
</div>
|
| 269 |
+
</div>
|
| 270 |
+
</div>
|
| 271 |
+
</section>
|
| 272 |
+
|
| 273 |
+
<!-- Newsletter -->
|
| 274 |
+
<section class="py-16 bg-gradient-to-r from-primary-600 to-secondary-600">
|
| 275 |
+
<div class="container mx-auto px-4">
|
| 276 |
+
<div class="max-w-2xl mx-auto text-center text-white">
|
| 277 |
+
<h2 class="text-3xl md:text-4xl font-bold mb-4">عضویت در خبرنامه</h2>
|
| 278 |
+
<p class="text-xl mb-8 opacity-90">از تخفیفها و محصولات جدید باخبر شوید</p>
|
| 279 |
+
<form class="flex flex-col md:flex-row gap-4 max-w-md mx-auto">
|
| 280 |
+
<input type="email" placeholder="ایمیل خود را وارد کنید" class="flex-1 px-6 py-3 rounded-full text-gray-800 focus:outline-none">
|
| 281 |
+
<button type="submit" class="bg-yellow-400 text-gray-900 px-8 py-3 rounded-full font-semibold hover:bg-yellow-300 transition-colors">
|
| 282 |
+
عضویت
|
| 283 |
+
</button>
|
| 284 |
+
</form>
|
| 285 |
+
</div>
|
| 286 |
+
</div>
|
| 287 |
+
</section>
|
| 288 |
+
</main>
|
| 289 |
+
|
| 290 |
+
<!-- Footer -->
|
| 291 |
+
<shop-footer></shop-footer>
|
| 292 |
+
|
| 293 |
+
<!-- Cart Sidebar -->
|
| 294 |
+
<cart-sidebar id="cartSidebar"></cart-sidebar>
|
| 295 |
+
|
| 296 |
+
<script>
|
| 297 |
+
// Initialize cart sidebar
|
| 298 |
+
const cartBtn = document.querySelector('#cartBtn');
|
| 299 |
+
const cartSidebar = document.getElementById('cartSidebar');
|
| 300 |
+
|
| 301 |
+
cartBtn.addEventListener('click', () => {
|
| 302 |
+
cartSidebar.open();
|
| 303 |
+
});
|
| 304 |
+
|
| 305 |
+
// Update cart count
|
| 306 |
+
function updateCartCount(count) {
|
| 307 |
+
document.getElementById('cartCount').textContent = count;
|
| 308 |
+
}
|
| 309 |
+
|
| 310 |
+
// Add to cart functionality
|
| 311 |
+
document.querySelectorAll('.add-to-cart-btn').forEach(btn => {
|
| 312 |
+
btn.addEventListener('click', (e) => {
|
| 313 |
+
e.preventDefault();
|
| 314 |
+
const count = parseInt(document.getElementById('cartCount').textContent) + 1;
|
| 315 |
+
updateCartCount(count);
|
| 316 |
+
cartSidebar.open();
|
| 317 |
+
});
|
| 318 |
+
});
|
| 319 |
+
</script>
|
| 320 |
</body>
|
| 321 |
</html>
|
products.html
ADDED
|
@@ -0,0 +1,202 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="fa" dir="rtl">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>محصولات - ShopVista</title>
|
| 7 |
+
<link rel="icon" type="image/x-icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🛒</text></svg>">
|
| 8 |
+
<link rel="stylesheet" href="style.css">
|
| 9 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 10 |
+
<script src="https://unpkg.com/feather-icons"></script>
|
| 11 |
+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
|
| 12 |
+
</head>
|
| 13 |
+
<body class="bg-gray-50 dark:bg-gray-900">
|
| 14 |
+
<script src="components/navbar.js"></script>
|
| 15 |
+
<script src="components/footer.js"></script>
|
| 16 |
+
<script src="components/product-card.js"></script>
|
| 17 |
+
<script src="components/cart-sidebar.js"></script>
|
| 18 |
+
|
| 19 |
+
<shop-navbar></shop-navbar>
|
| 20 |
+
|
| 21 |
+
<main class="pt-20">
|
| 22 |
+
<div class="container mx-auto px-4 py-8">
|
| 23 |
+
<!-- Filters Section -->
|
| 24 |
+
<div class="flex flex-col lg:flex-row gap-8">
|
| 25 |
+
<!-- Sidebar Filters -->
|
| 26 |
+
<aside class="w-full lg:w-64">
|
| 27 |
+
<div class="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg">
|
| 28 |
+
<h3 class="text-lg font-semibold mb-4 dark:text-white">فیلتر محصولات</h3>
|
| 29 |
+
|
| 30 |
+
<!-- Category Filter -->
|
| 31 |
+
<div class="mb-6">
|
| 32 |
+
<h4 class="font-medium mb-3 dark:text-white">دستهبندی</h4>
|
| 33 |
+
<div class="space-y-2">
|
| 34 |
+
<label class="flex items-center">
|
| 35 |
+
<input type="checkbox" class="ml-2">
|
| 36 |
+
<span class="dark:text-gray-300">موبایل</span>
|
| 37 |
+
</label>
|
| 38 |
+
<label class="flex items-center">
|
| 39 |
+
<input type="checkbox" class="ml-2">
|
| 40 |
+
<span class="dark:text-gray-300">لپتاپ</span>
|
| 41 |
+
</label>
|
| 42 |
+
<label class="flex items-center">
|
| 43 |
+
<input type="checkbox" class="ml-2">
|
| 44 |
+
<span class="dark:text-gray-300">لوازم جانبی</span>
|
| 45 |
+
</label>
|
| 46 |
+
</div>
|
| 47 |
+
</div>
|
| 48 |
+
|
| 49 |
+
<!-- Price Range -->
|
| 50 |
+
<div class="mb-6">
|
| 51 |
+
<h4 class="font-medium mb-3 dark:text-white">محدوده قیمت</h4>
|
| 52 |
+
<div class="space-y-2">
|
| 53 |
+
<input type="range" class="w-full" min="0" max="100000000">
|
| 54 |
+
<div class="text-sm dark:text-gray-300">تا ۱۰۰ میلیون تومان</div>
|
| 55 |
+
</div>
|
| 56 |
+
</div>
|
| 57 |
+
|
| 58 |
+
<!-- Brand Filter -->
|
| 59 |
+
<div class="mb-6">
|
| 60 |
+
<h4 class="font-medium mb-3 dark:text-white">برند</h4>
|
| 61 |
+
<div class="space-y-2">
|
| 62 |
+
<label class="flex items-center">
|
| 63 |
+
<input type="checkbox" class="ml-2">
|
| 64 |
+
<span class="dark:text-gray-300">اپل</span>
|
| 65 |
+
</label>
|
| 66 |
+
<label class="flex items-center">
|
| 67 |
+
<input type="checkbox" class="ml-2">
|
| 68 |
+
<span class="dark:text-gray-300">سامسونگ</span>
|
| 69 |
+
</label>
|
| 70 |
+
<label class="flex items-center">
|
| 71 |
+
<input type="checkbox" class="ml-2">
|
| 72 |
+
<span class="dark:text-gray-300">شیائومی</span>
|
| 73 |
+
</label>
|
| 74 |
+
</div>
|
| 75 |
+
</div>
|
| 76 |
+
|
| 77 |
+
<button class="w-full bg-primary-600 text-white py-2 rounded-lg hover:bg-primary-700 transition-colors">
|
| 78 |
+
اعمال فیلترها
|
| 79 |
+
</button>
|
| 80 |
+
</div>
|
| 81 |
+
</aside>
|
| 82 |
+
|
| 83 |
+
<!-- Products Grid -->
|
| 84 |
+
<div class="flex-1">
|
| 85 |
+
<!-- Sort and View Options -->
|
| 86 |
+
<div class="bg-white dark:bg-gray-800 rounded-xl p-4 mb-6 shadow-lg flex justify-between items-center">
|
| 87 |
+
<div class="flex items-center gap-4">
|
| 88 |
+
<span class="dark:text-gray-300">مرتبسازی:</span>
|
| 89 |
+
<select class="border rounded-lg px-3 py-1 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
|
| 90 |
+
<option>پربازدیدترین</option>
|
| 91 |
+
<option>جدیدترین</option>
|
| 92 |
+
<option>ارزانترین</option>
|
| 93 |
+
<option>گرانترین</option>
|
| 94 |
+
</select>
|
| 95 |
+
</div>
|
| 96 |
+
<div class="flex items-center gap-2">
|
| 97 |
+
<button class="p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700">
|
| 98 |
+
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
| 99 |
+
<rect x="3" y="3" width="7" height="7"></rect>
|
| 100 |
+
<rect x="14" y="3" width="7" height="7"></rect>
|
| 101 |
+
<rect x="14" y="14" width="7" height="7"></rect>
|
| 102 |
+
<rect x="3" y="14" width="7" height="7"></rect>
|
| 103 |
+
</svg>
|
| 104 |
+
</button>
|
| 105 |
+
<button class="p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700">
|
| 106 |
+
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
| 107 |
+
<line x1="8" y1="6" x2="21" y2="6"></line>
|
| 108 |
+
<line x1="8" y1="12" x2="21" y2="12"></line>
|
| 109 |
+
<line x1="8" y1="18" x2="21" y2="18"></line>
|
| 110 |
+
<line x1="3" y1="6" x2="3.01" y2="6"></line>
|
| 111 |
+
<line x1="3" y1="12" x2="3.01" y2="12"></line>
|
| 112 |
+
<line x1="3" y1="18" x2="3.01" y2="18"></line>
|
| 113 |
+
</svg>
|
| 114 |
+
</button>
|
| 115 |
+
</div>
|
| 116 |
+
</div>
|
| 117 |
+
|
| 118 |
+
<!-- Products List -->
|
| 119 |
+
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
| 120 |
+
<product-card
|
| 121 |
+
data-id="5"
|
| 122 |
+
data-title="گوشی آیفون 14"
|
| 123 |
+
data-price="38,000,000 تومان"
|
| 124 |
+
data-discount="10"
|
| 125 |
+
data-image="http://static.photos/technology/320x240/105">
|
| 126 |
+
</product-card>
|
| 127 |
+
<product-card
|
| 128 |
+
data-id="6"
|
| 129 |
+
data-title="گوشی سامسونگ A54"
|
| 130 |
+
data-price="15,000,000 تومان"
|
| 131 |
+
data-discount="15"
|
| 132 |
+
data-image="http://static.photos/technology/320x240/106">
|
| 133 |
+
</product-card>
|
| 134 |
+
<product-card
|
| 135 |
+
data-id="7"
|
| 136 |
+
data-title="گوشی شیائومی 13 پرو"
|
| 137 |
+
data-price="22,000,000 تومان"
|
| 138 |
+
data-discount="5"
|
| 139 |
+
data-image="http://static.photos/technology/320x240/107">
|
| 140 |
+
</product-card>
|
| 141 |
+
<product-card
|
| 142 |
+
data-id="8"
|
| 143 |
+
data-title="لپتاپ Dell XPS 13"
|
| 144 |
+
data-price="55,000,000 تومان"
|
| 145 |
+
data-discount="8"
|
| 146 |
+
data-image="http://static.photos/technology/320x240/108">
|
| 147 |
+
</product-card>
|
| 148 |
+
<product-card
|
| 149 |
+
data-id="9"
|
| 150 |
+
data-title="لپتاپ Lenovo ThinkPad"
|
| 151 |
+
data-price="45,000,000 تومان"
|
| 152 |
+
data-discount="12"
|
| 153 |
+
data-image="http://static.photos/technology/320x240/109">
|
| 154 |
+
</product-card>
|
| 155 |
+
<product-card
|
| 156 |
+
data-id="10"
|
| 157 |
+
data-title="تبلت iPad Air"
|
| 158 |
+
data-price="25,000,000 تومان"
|
| 159 |
+
data-discount="10"
|
| 160 |
+
data-image="http://static.photos/technology/320x240/110">
|
| 161 |
+
</product-card>
|
| 162 |
+
</div>
|
| 163 |
+
|
| 164 |
+
<!-- Pagination -->
|
| 165 |
+
<div class="flex justify-center mt-8">
|
| 166 |
+
<div class="flex gap-2">
|
| 167 |
+
<button class="px-4 py-2 rounded-lg bg-primary-600 text-white">1</button>
|
| 168 |
+
<button class="px-4 py-2 rounded-lg bg-white dark:bg-gray-800 dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700">2</button>
|
| 169 |
+
<button class="px-4 py-2 rounded-lg bg-white dark:bg-gray-800 dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700">3</button>
|
| 170 |
+
<button class="px-4 py-2 rounded-lg bg-white dark:bg-gray-800 dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700">4</button>
|
| 171 |
+
<button class="px-4 py-2 rounded-lg bg-white dark:bg-gray-800 dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700">بعدی</button>
|
| 172 |
+
</div>
|
| 173 |
+
</div>
|
| 174 |
+
</div>
|
| 175 |
+
</div>
|
| 176 |
+
</div>
|
| 177 |
+
</main>
|
| 178 |
+
|
| 179 |
+
<shop-footer></shop-footer>
|
| 180 |
+
<cart-sidebar id="cartSidebar"></cart-sidebar>
|
| 181 |
+
|
| 182 |
+
<script>
|
| 183 |
+
// Cart functionality
|
| 184 |
+
const cartBtn = document.querySelector('#cartBtn');
|
| 185 |
+
const cartSidebar = document.getElementById('cartSidebar');
|
| 186 |
+
|
| 187 |
+
cartBtn.addEventListener('click', () => {
|
| 188 |
+
cartSidebar.open();
|
| 189 |
+
});
|
| 190 |
+
|
| 191 |
+
// Add to cart functionality
|
| 192 |
+
document.querySelectorAll('.add-to-cart-btn').forEach(btn => {
|
| 193 |
+
btn.addEventListener('click', (e) => {
|
| 194 |
+
e.preventDefault();
|
| 195 |
+
const count = parseInt(document.getElementById('cartCount').textContent) + 1;
|
| 196 |
+
document.getElementById('cartCount').textContent = count;
|
| 197 |
+
cartSidebar.open();
|
| 198 |
+
});
|
| 199 |
+
});
|
| 200 |
+
</script>
|
| 201 |
+
</body>
|
| 202 |
+
</html>
|
style.css
CHANGED
|
@@ -1,28 +1,148 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
body {
|
| 2 |
-
|
| 3 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 4 |
}
|
| 5 |
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
}
|
| 10 |
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
font-size: 15px;
|
| 14 |
-
margin-bottom: 10px;
|
| 15 |
-
margin-top: 5px;
|
| 16 |
}
|
| 17 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 18 |
.card {
|
| 19 |
-
|
| 20 |
-
|
| 21 |
-
|
| 22 |
-
|
| 23 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 24 |
}
|
| 25 |
|
| 26 |
-
|
| 27 |
-
|
|
|
|
| 28 |
}
|
|
|
|
| 1 |
+
|
| 2 |
+
/* Global Styles */
|
| 3 |
+
* {
|
| 4 |
+
margin: 0;
|
| 5 |
+
padding: 0;
|
| 6 |
+
box-sizing: border-box;
|
| 7 |
+
}
|
| 8 |
+
|
| 9 |
body {
|
| 10 |
+
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
| 11 |
+
background: #f9fafb;
|
| 12 |
+
color: #111827;
|
| 13 |
+
line-height: 1.6;
|
| 14 |
+
transition: background-color 0.3s ease;
|
| 15 |
+
}
|
| 16 |
+
|
| 17 |
+
body.dark {
|
| 18 |
+
background: #111827;
|
| 19 |
+
color: #f9fafb;
|
| 20 |
+
}
|
| 21 |
+
|
| 22 |
+
/* Container */
|
| 23 |
+
.container {
|
| 24 |
+
max-width: 1400px;
|
| 25 |
+
margin: 0 auto;
|
| 26 |
+
padding: 0 1rem;
|
| 27 |
+
}
|
| 28 |
+
|
| 29 |
+
/* Animations */
|
| 30 |
+
@keyframes fade-in {
|
| 31 |
+
from {
|
| 32 |
+
opacity: 0;
|
| 33 |
+
transform: translateY(20px);
|
| 34 |
+
}
|
| 35 |
+
to {
|
| 36 |
+
opacity: 1;
|
| 37 |
+
transform: translateY(0);
|
| 38 |
+
}
|
| 39 |
+
}
|
| 40 |
+
|
| 41 |
+
@keyframes float {
|
| 42 |
+
0%, 100% {
|
| 43 |
+
transform: translateY(0);
|
| 44 |
+
}
|
| 45 |
+
50% {
|
| 46 |
+
transform: translateY(-20px);
|
| 47 |
+
}
|
| 48 |
+
}
|
| 49 |
+
|
| 50 |
+
.animate-fade-in {
|
| 51 |
+
animation: fade-in 0.6s ease-out;
|
| 52 |
+
}
|
| 53 |
+
|
| 54 |
+
.animate-float {
|
| 55 |
+
animation: float 3s ease-in-out infinite;
|
| 56 |
+
}
|
| 57 |
+
|
| 58 |
+
/* Dark mode transitions */
|
| 59 |
+
* {
|
| 60 |
+
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
|
| 61 |
+
}
|
| 62 |
+
|
| 63 |
+
/* Custom scrollbar */
|
| 64 |
+
::-webkit-scrollbar {
|
| 65 |
+
width: 8px;
|
| 66 |
+
height: 8px;
|
| 67 |
+
}
|
| 68 |
+
|
| 69 |
+
::-webkit-scrollbar-track {
|
| 70 |
+
background: #f1f1f1;
|
| 71 |
}
|
| 72 |
|
| 73 |
+
::-webkit-scrollbar-thumb {
|
| 74 |
+
background: #888;
|
| 75 |
+
border-radius: 4px;
|
| 76 |
}
|
| 77 |
|
| 78 |
+
::-webkit-scrollbar-thumb:hover {
|
| 79 |
+
background: #555;
|
|
|
|
|
|
|
|
|
|
| 80 |
}
|
| 81 |
|
| 82 |
+
/* Dark mode scrollbar */
|
| 83 |
+
.dark ::-webkit-scrollbar-track {
|
| 84 |
+
background: #374151;
|
| 85 |
+
}
|
| 86 |
+
|
| 87 |
+
.dark ::-webkit-scrollbar-thumb {
|
| 88 |
+
background: #6b7280;
|
| 89 |
+
}
|
| 90 |
+
|
| 91 |
+
.dark ::-webkit-scrollbar-thumb:hover {
|
| 92 |
+
background: #9ca3af;
|
| 93 |
+
}
|
| 94 |
+
|
| 95 |
+
/* Button hover effects */
|
| 96 |
+
.btn {
|
| 97 |
+
transition: all 0.3s ease;
|
| 98 |
+
}
|
| 99 |
+
|
| 100 |
+
.btn:hover {
|
| 101 |
+
transform: translateY(-2px);
|
| 102 |
+
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
|
| 103 |
+
}
|
| 104 |
+
|
| 105 |
+
/* Card hover effects */
|
| 106 |
.card {
|
| 107 |
+
transition: all 0.3s ease;
|
| 108 |
+
}
|
| 109 |
+
|
| 110 |
+
.card:hover {
|
| 111 |
+
transform: translateY(-5px);
|
| 112 |
+
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
|
| 113 |
+
}
|
| 114 |
+
|
| 115 |
+
/* Loading spinner */
|
| 116 |
+
.loading {
|
| 117 |
+
display: inline-block;
|
| 118 |
+
width: 20px;
|
| 119 |
+
height: 20px;
|
| 120 |
+
border: 3px solid rgba(255, 255, 255, 0.3);
|
| 121 |
+
border-radius: 50%;
|
| 122 |
+
border-top-color: white;
|
| 123 |
+
animation: spin 1s ease-in-out infinite;
|
| 124 |
+
}
|
| 125 |
+
|
| 126 |
+
@keyframes spin {
|
| 127 |
+
to { transform: rotate(360deg); }
|
| 128 |
+
}
|
| 129 |
+
|
| 130 |
+
/* Responsive utilities */
|
| 131 |
+
@media (max-width: 768px) {
|
| 132 |
+
.container {
|
| 133 |
+
padding: 0 0.5rem;
|
| 134 |
+
}
|
| 135 |
+
}
|
| 136 |
+
|
| 137 |
+
/* Focus styles for accessibility */
|
| 138 |
+
button:focus,
|
| 139 |
+
a:focus,
|
| 140 |
+
input:focus {
|
| 141 |
+
outline: 2px solid #6366f1;
|
| 142 |
+
outline-offset: 2px;
|
| 143 |
}
|
| 144 |
|
| 145 |
+
/* Smooth scrolling */
|
| 146 |
+
html {
|
| 147 |
+
scroll-behavior: smooth;
|
| 148 |
}
|