Spaces:
Running
Running
| <html lang="fa" dir="rtl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>محصولات - قالیشویی کاپیتان</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700&display=swap'); | |
| </style> | |
| </head> | |
| <body class="font-vazir bg-gray-50"> | |
| <custom-navbar></custom-navbar> | |
| <!-- Products Header --> | |
| <section class="bg-amber-700 text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <h1 class="text-4xl font-bold text-center mb-4">محصولات ما</h1> | |
| <p class="text-center text-amber-100 max-w-2xl mx-auto"> | |
| مجموعه‌ای از زیباترین و باکیفیت‌ترین فرش‌های دستباف ایرانی | |
| </p> | |
| </div> | |
| </section> | |
| <!-- Filter Section --> | |
| <section class="py-8 bg-white shadow-sm"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-wrap gap-4 justify-center"> | |
| <button onclick="filterProducts('all')" class="bg-amber-600 text-white px-6 py-2 rounded-lg hover:bg-amber-700 transition duration-300" data-category="all"> | |
| همه خدمات | |
| </button> | |
| <button onclick="filterProducts('carpet')" class="bg-gray-200 text-gray-700 px-6 py-2 rounded-lg hover:bg-gray-300 transition duration-300" data-category="carpet"> | |
| فرش | |
| </button> | |
| <button onclick="filterProducts('carpet')" class="bg-gray-200 text-gray-700 px-6 py-2 rounded-lg hover:bg-gray-300 transition duration-300"> | |
| موکت | |
| </button> | |
| <button onclick="filterProducts('furniture')" class="bg-gray-200 text-gray-700 px-6 py-2 rounded-lg hover:bg-gray-300 transition duration-300" data-category="furniture"> | |
| مبلمان | |
| </button> | |
| <button onclick="filterProducts('mattress')" class="bg-gray-200 text-gray-700 px-6 py-2 rounded-lg hover:bg-gray-300 transition duration-300"> | |
| تشک تخت | |
| </button> | |
| </div> | |
| <!-- Search Box --> | |
| <div class="mt-6 max-w-md mx-auto"> | |
| <div class="relative"> | |
| <input type="text" id="search-input" placeholder="جستجو در محصولات..." | |
| class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-amber-500 focus:border-transparent"> | |
| <i data-feather="search" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Products Grid --> | |
| <section class="py-16"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Product 1 --> | |
| <div class="product-item bg-white rounded-lg shadow-lg hover-lift" data-category="classic"> | |
| <img src="http://static.photos/vintage/640x360/5" alt="فرش اصفهان" class="w-full h-64 object-cover rounded-t-lg"> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-3">فرش اصفهان</h3> | |
| <p class="text-gray-600 mb-4">فرش دستباف اصفهان با طرح‌های سنتی و رنگ‌های طبیعی</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-amber-700 font-bold text-lg">۱۲,۰۰۰,۰۰۰ تومان</span> | |
| <button onclick="addToCart(1, 'فرش اصفهان', 12000000)" class="bg-amber-600 text-white px-4 py-2 rounded-lg hover:bg-amber-700 transition duration-300"> | |
| افزودن به سبد | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 2 --> | |
| <div class="product-item bg-white rounded-lg shadow-lg hover-lift" data-category="modern"> | |
| <img src="http://static.photos/modern/640x360/6" alt="فرش مدرن" class="w-full h-64 object-cover rounded-t-lg"> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-3">فرش مدرن</h3> | |
| <p class="text-gray-600 mb-4">فرش با طراحی معاصر و رنگ‌های شاد برای فضای مدرن</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-amber-700 font-bold text-lg">۸,۵۰۰,۰۰۰ تومان</span> | |
| <button onclick="addToCart(2, 'فرش مدرن', 8500000)" class="bg-amber-600 text-white px-4 py-2 rounded-lg hover:bg-amber-700 transition duration-300"> | |
| افزودن به سبد | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 3 --> | |
| <div class="product-item bg-white rounded-lg shadow-lg hover-lift" data-category="antique"> | |
| <img src="http://static.photos/antique/640x360/7" alt="فرش آنتیک" class="w-full h-64 object-cover rounded-t-lg"> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-3">فرش آنتیک</h3> | |
| <p class="text-gray-600 mb-4">فرش دستباف قدیمی با ارزش تاریخی و کیفیت استثنایی</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-amber-700 font-bold text-lg">۲۵,۰۰۰,۰۰۰ تومان</span> | |
| <button onclick="addToCart(3, 'فرش آنتیک', 25000000)" class="bg-amber-600 text-white px-4 py-2 rounded-lg hover:bg-amber-700 transition duration-300"> | |
| افزودن به سبد | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 4 --> | |
| <div class="product-item bg-white rounded-lg shadow-lg hover-lift" data-category="classic"> | |
| <img src="http://static.photos/vintage/640x360/8" alt="فرش تبریز" class="w-full h-64 object-cover rounded-t-lg"> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-3">فرش تبریز</h3> | |
| <p class="text-gray-600 mb-4">فرش دستباف تبریز با گره‌های محکم و طرح‌های اصیل</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-amber-700 font-bold text-lg">۱۵,۰۰۰,۰۰۰ تومان</span> | |
| <button onclick="addToCart(4, 'فرش تبریز', 15000000)" class="bg-amber-600 text-white px-4 py-2 rounded-lg hover:bg-amber-700 transition duration-300"> | |
| افزودن به سبد | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 5 --> | |
| <div class="product-item bg-white rounded-lg shadow-lg hover-lift" data-category="modern"> | |
| <img src="http://static.photos/modern/640x360/9" alt="فرش مدرن طرح هندسی" class="w-full h-64 object-cover rounded-t-lg"> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-3">فرش مدرن طرح هندسی</h3> | |
| <p class="text-gray-600 mb-4">فرش با طرح هندسی مدرن و رنگ‌های متنوع</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-amber-700 font-bold text-lg">۷,۲۰۰,۰۰۰ تومان</span> | |
| <button onclick="addToCart(5, 'فرش مدرن طرح هندسی', 7200000)" class="bg-amber-600 text-white px-4 py-2 rounded-lg hover:bg-amber-700 transition duration-300"> | |
| افزودن به سبد | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 6 --> | |
| <div class="product-item bg-white rounded-lg shadow-lg hover-lift" data-category="antique"> | |
| <img src="http://static.photos/antique/640x360/10" alt="فرش قدیمی کرمان" class="w-full h-64 object-cover rounded-t-lg"> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-3">فرش قدیمی کرمان</h3> | |
| <p class="text-gray-600 mb-4">فرش دستباف کرمان با قدمت ۱۰۰ سال و کیفیت استثنایی</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-amber-700 font-bold text-lg">۳۰,۰۰۰,۰۰۰ تومان</span> | |
| <button onclick="addToCart(6, 'فرش قدیمی کرمان', 30000000)" class="bg-amber-600 text-white px-4 py-2 rounded-lg hover:bg-amber-700 transition duration-300"> | |
| افزودن به سبد | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <custom-footer></custom-footer> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/footer.js"></script> | |
| <script src="script.js"></script> | |
| <script> | |
| // Initialize search functionality | |
| document.getElementById('search-input').addEventListener('input', function(e) { | |
| searchProducts(e.target.value); | |
| }); | |
| // Initialize filter buttons | |
| document.querySelectorAll('[data-category]').forEach(button => { | |
| button.addEventListener('click', function() { | |
| // Update active state | |
| document.querySelectorAll('[data-category]').forEach(btn => { | |
| btn.classList.remove('bg-amber-600', 'text-white'); | |
| btn.classList.add('bg-gray-200', 'text-gray-700'); | |
| }); | |
| this.classList.remove('bg-gray-200', 'text-gray-700'); | |
| this.classList.add('bg-amber-600', 'text-white'); | |
| }); | |
| }); | |
| </script> | |
| <script>feather.replace();</script> | |
| </body> | |
| </html> |