File size: 11,250 Bytes
2b35cc9 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 | <!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>محصولات - ShopVista</title>
<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>">
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
</head>
<body class="bg-gray-50 dark:bg-gray-900">
<script src="components/navbar.js"></script>
<script src="components/footer.js"></script>
<script src="components/product-card.js"></script>
<script src="components/cart-sidebar.js"></script>
<shop-navbar></shop-navbar>
<main class="pt-20">
<div class="container mx-auto px-4 py-8">
<!-- Filters Section -->
<div class="flex flex-col lg:flex-row gap-8">
<!-- Sidebar Filters -->
<aside class="w-full lg:w-64">
<div class="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg">
<h3 class="text-lg font-semibold mb-4 dark:text-white">فیلتر محصولات</h3>
<!-- Category Filter -->
<div class="mb-6">
<h4 class="font-medium mb-3 dark:text-white">دستهبندی</h4>
<div class="space-y-2">
<label class="flex items-center">
<input type="checkbox" class="ml-2">
<span class="dark:text-gray-300">موبایل</span>
</label>
<label class="flex items-center">
<input type="checkbox" class="ml-2">
<span class="dark:text-gray-300">لپتاپ</span>
</label>
<label class="flex items-center">
<input type="checkbox" class="ml-2">
<span class="dark:text-gray-300">لوازم جانبی</span>
</label>
</div>
</div>
<!-- Price Range -->
<div class="mb-6">
<h4 class="font-medium mb-3 dark:text-white">محدوده قیمت</h4>
<div class="space-y-2">
<input type="range" class="w-full" min="0" max="100000000">
<div class="text-sm dark:text-gray-300">تا ۱۰۰ میلیون تومان</div>
</div>
</div>
<!-- Brand Filter -->
<div class="mb-6">
<h4 class="font-medium mb-3 dark:text-white">برند</h4>
<div class="space-y-2">
<label class="flex items-center">
<input type="checkbox" class="ml-2">
<span class="dark:text-gray-300">اپل</span>
</label>
<label class="flex items-center">
<input type="checkbox" class="ml-2">
<span class="dark:text-gray-300">سامسونگ</span>
</label>
<label class="flex items-center">
<input type="checkbox" class="ml-2">
<span class="dark:text-gray-300">شیائومی</span>
</label>
</div>
</div>
<button class="w-full bg-primary-600 text-white py-2 rounded-lg hover:bg-primary-700 transition-colors">
اعمال فیلترها
</button>
</div>
</aside>
<!-- Products Grid -->
<div class="flex-1">
<!-- Sort and View Options -->
<div class="bg-white dark:bg-gray-800 rounded-xl p-4 mb-6 shadow-lg flex justify-between items-center">
<div class="flex items-center gap-4">
<span class="dark:text-gray-300">مرتبسازی:</span>
<select class="border rounded-lg px-3 py-1 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
<option>پربازدیدترین</option>
<option>جدیدترین</option>
<option>ارزانترین</option>
<option>گرانترین</option>
</select>
</div>
<div class="flex items-center gap-2">
<button class="p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="3" y="3" width="7" height="7"></rect>
<rect x="14" y="3" width="7" height="7"></rect>
<rect x="14" y="14" width="7" height="7"></rect>
<rect x="3" y="14" width="7" height="7"></rect>
</svg>
</button>
<button class="p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<line x1="8" y1="6" x2="21" y2="6"></line>
<line x1="8" y1="12" x2="21" y2="12"></line>
<line x1="8" y1="18" x2="21" y2="18"></line>
<line x1="3" y1="6" x2="3.01" y2="6"></line>
<line x1="3" y1="12" x2="3.01" y2="12"></line>
<line x1="3" y1="18" x2="3.01" y2="18"></line>
</svg>
</button>
</div>
</div>
<!-- Products List -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<product-card
data-id="5"
data-title="گوشی آیفون 14"
data-price="38,000,000 تومان"
data-discount="10"
data-image="http://static.photos/technology/320x240/105">
</product-card>
<product-card
data-id="6"
data-title="گوشی سامسونگ A54"
data-price="15,000,000 تومان"
data-discount="15"
data-image="http://static.photos/technology/320x240/106">
</product-card>
<product-card
data-id="7"
data-title="گوشی شیائومی 13 پرو"
data-price="22,000,000 تومان"
data-discount="5"
data-image="http://static.photos/technology/320x240/107">
</product-card>
<product-card
data-id="8"
data-title="لپتاپ Dell XPS 13"
data-price="55,000,000 تومان"
data-discount="8"
data-image="http://static.photos/technology/320x240/108">
</product-card>
<product-card
data-id="9"
data-title="لپتاپ Lenovo ThinkPad"
data-price="45,000,000 تومان"
data-discount="12"
data-image="http://static.photos/technology/320x240/109">
</product-card>
<product-card
data-id="10"
data-title="تبلت iPad Air"
data-price="25,000,000 تومان"
data-discount="10"
data-image="http://static.photos/technology/320x240/110">
</product-card>
</div>
<!-- Pagination -->
<div class="flex justify-center mt-8">
<div class="flex gap-2">
<button class="px-4 py-2 rounded-lg bg-primary-600 text-white">1</button>
<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>
<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>
<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>
<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>
</div>
</div>
</div>
</div>
</div>
</main>
<shop-footer></shop-footer>
<cart-sidebar id="cartSidebar"></cart-sidebar>
<script>
// Cart functionality
const cartBtn = document.querySelector('#cartBtn');
const cartSidebar = document.getElementById('cartSidebar');
cartBtn.addEventListener('click', () => {
cartSidebar.open();
});
// Add to cart functionality
document.querySelectorAll('.add-to-cart-btn').forEach(btn => {
btn.addEventListener('click', (e) => {
e.preventDefault();
const count = parseInt(document.getElementById('cartCount').textContent) + 1;
document.getElementById('cartCount').textContent = count;
cartSidebar.open();
});
});
</script>
</body>
</html> |