|
|
<!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"> |
|
|
|
|
|
<div class="flex flex-col lg:flex-row gap-8"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<div class="flex-1"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
const cartBtn = document.querySelector('#cartBtn'); |
|
|
const cartSidebar = document.getElementById('cartSidebar'); |
|
|
|
|
|
cartBtn.addEventListener('click', () => { |
|
|
cartSidebar.open(); |
|
|
}); |
|
|
|
|
|
|
|
|
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> |
