сделай несколько страниц и современым

components/navbar.js

@@ -24,8 +24,8 @@ class CustomNavbar extends HTMLElement {
                             <nav>
                                 <ul class="flex space-x-6">
                                     <li><a href="/" class="text-blue-500 font-medium">Home</a></li>
-                                    <li><a href="/products" class="text-gray-600 hover:text-blue-500">Products</a></li>
-                                    <li><a href="/about" class="text-gray-600 hover:text-blue-500">About</a></li>
+                                    <li><a href="/products.html" class="text-gray-600 hover:text-blue-500">Products</a></li>
+<li><a href="/about" class="text-gray-600 hover:text-blue-500">About</a></li>
                                     <li><a href="/contact" class="text-gray-600 hover:text-blue-500">Contact</a></li>
                                 </ul>
                             </nav>
@@ -53,8 +53,8 @@ class CustomNavbar extends HTMLElement {
                         <nav class="pb-4">
                             <ul class="space-y-3">
                                 <li><a href="/" class="block py-2 text-blue-500 font-medium">Home</a></li>
-                                <li><a href="/products" class="block py-2 text-gray-600">Products</a></li>
-                                <li><a href="/about" class="block py-2 text-gray-600">About</a></li>
+                                <li><a href="/products.html" class="block py-2 text-gray-600">Products</a></li>
+<li><a href="/about" class="block py-2 text-gray-600">About</a></li>
                                 <li><a href="/contact" class="block py-2 text-gray-600">Contact</a></li>
                             </ul>
                         </nav>

components/product-filter.js

@@ -0,0 +1,148 @@
+class ProductFilter extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                .filter-section {
+                    transition: all 0.3s ease;
+                }
+                .filter-header:hover {
+                    background-color: #f3f4f6;
+                }
+                input[type="range"] {
+                    -webkit-appearance: none;
+                    height: 4px;
+                    background: #d1d5db;
+                    border-radius: 2px;
+                }
+                input[type="range"]::-webkit-slider-thumb {
+                    -webkit-appearance: none;
+                    width: 16px;
+                    height: 16px;
+                    background: #3b82f6;
+                    border-radius: 50%;
+                    cursor: pointer;
+                }
+            </style>
+            <div class="bg-white p-6 rounded-lg shadow-sm space-y-6">
+                <div class="filter-section border-b pb-4">
+                    <div class="filter-header flex justify-between items-center cursor-pointer">
+                        <h3 class="font-bold">Categories</h3>
+                        <i data-feather="chevron-down" class="w-5 h-5"></i>
+                    </div>
+                    <div class="filter-content mt-4 space-y-2">
+                        <div class="flex items-center">
+                            <input type="checkbox" id="category-desktops" class="mr-2">
+                            <label for="category-desktops" class="text-gray-700">Desktops (42)</label>
+                        </div>
+                        <div class="flex items-center">
+                            <input type="checkbox" id="category-laptops" class="mr-2">
+                            <label for="category-laptops" class="text-gray-700">Laptops (36)</label>
+                        </div>
+                        <div class="flex items-center">
+                            <input type="checkbox" id="category-components" class="mr-2">
+                            <label for="category-components" class="text-gray-700">Components (58)</label>
+                        </div>
+                        <div class="flex items-center">
+                            <input type="checkbox" id="category-accessories" class="mr-2">
+                            <label for="category-accessories" class="text-gray-700">Accessories (27)</label>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="filter-section border-b pb-4">
+                    <div class="filter-header flex justify-between items-center cursor-pointer">
+                        <h3 class="font-bold">Price Range</h3>
+                        <i data-feather="chevron-down" class="w-5 h-5"></i>
+                    </div>
+                    <div class="filter-content mt-4">
+                        <input type="range" min="0" max="5000" value="2500" class="w-full mb-4">
+                        <div class="flex justify-between text-sm text-gray-600">
+                            <span>$0</span>
+                            <span>$2500</span>
+                            <span>$5000</span>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="filter-section border-b pb-4">
+                    <div class="filter-header flex justify-between items-center cursor-pointer">
+                        <h3 class="font-bold">Brand</h3>
+                        <i data-feather="chevron-down" class="w-5 h-5"></i>
+                    </div>
+                    <div class="filter-content mt-4 space-y-2">
+                        <div class="flex items-center">
+                            <input type="checkbox" id="brand-quantum" class="mr-2">
+                            <label for="brand-quantum" class="text-gray-700">Quantum (18)</label>
+                        </div>
+                        <div class="flex items-center">
+                            <input type="checkbox" id="brand-nova" class="mr-2">
+                            <label for="brand-nova" class="text-gray-700">Nova (12)</label>
+                        </div>
+                        <div class="flex items-center">
+                            <input type="checkbox" id="brand-zenith" class="mr-2">
+                            <label for="brand-zenith" class="text-gray-700">Zenith (9)</label>
+                        </div>
+                        <div class="flex items-center">
+                            <input type="checkbox" id="brand-aero" class="mr-2">
+                            <label for="brand-aero" class="text-gray-700">Aero (7)</label>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="filter-section">
+                    <div class="filter-header flex justify-between items-center cursor-pointer">
+                        <h3 class="font-bold">Rating</h3>
+                        <i data-feather="chevron-down" class="w-5 h-5"></i>
+                    </div>
+                    <div class="filter-content mt-4 space-y-2">
+                        <div class="flex items-center">
+                            <input type="checkbox" id="rating-5" class="mr-2">
+                            <label for="rating-5" class="flex items-center text-gray-700">
+                                <div class="flex text-yellow-400 mr-1">
+                                    <i data-feather="star" class="w-4 h-4 fill-current"></i>
+                                    <i data-feather="star" class="w-4 h-4 fill-current"></i>
+                                    <i data-feather="star" class="w-4 h-4 fill-current"></i>
+                                    <i data-feather="star" class="w-4 h-4 fill-current"></i>
+                                    <i data-feather="star" class="w-4 h-4 fill-current"></i>
+                                </div>
+                                & Up (53)
+                            </label>
+                        </div>
+                        <div class="flex items-center">
+                            <input type="checkbox" id="rating-4" class="mr-2">
+                            <label for="rating-4" class="flex items-center text-gray-700">
+                                <div class="flex text-yellow-400 mr-1">
+                                    <i data-feather="star" class="w-4 h-4 fill-current"></i>
+                                    <i data-feather="star" class="w-4 h-4 fill-current"></i>
+                                    <i data-feather="star" class="w-4 h-4 fill-current"></i>
+                                    <i data-feather="star" class="w-4 h-4 fill-current"></i>
+                                </div>
+                                & Up (37)
+                            </label>
+                        </div>
+                    </div>
+                </div>
+
+                <button class="w-full bg-blue-500 text-white py-2 rounded-md hover:bg-blue-600 transition duration-300 mt-6">
+                    Apply Filters
+                </button>
+            </div>
+        `;
+
+        // Initialize filter section toggle functionality
+        const filterHeaders = this.shadowRoot.querySelectorAll('.filter-header');
+        filterHeaders.forEach(header => {
+            header.addEventListener('click', () => {
+                const section = header.closest('.filter-section');
+                const content = section.querySelector('.filter-content');
+                const icon = header.querySelector('i');
+                
+                content.classList.toggle('hidden');
+                feather.replace(icon, content.classList.contains('hidden') ? 'chevron-down' : 'chevron-up');
+            });
+        });
+    }
+}
+
+customElements.define('custom-product-filter', ProductFilter);

products.html

@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Products | ByteBazaar</title>
+    <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="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="components/product-card.js"></script>
+    <script src="components/product-filter.js"></script>
+</head>
+<body class="bg-gray-50">
+    <custom-navbar></custom-navbar>
+    
+    <main class="container mx-auto px-4 py-8">
+        <div class="flex flex-col md:flex-row gap-8">
+            <!-- Filters Sidebar -->
+            <aside class="md:w-1/4">
+                <custom-product-filter></custom-product-filter>
+            </aside>
+
+            <!-- Product Grid -->
+            <div class="md:w-3/4">
+                <div class="flex justify-between items-center mb-8">
+                    <h1 class="text-3xl font-bold">All Products</h1>
+                    <div class="flex items-center space-x-4">
+                        <span class="text-gray-600">Sort by:</span>
+                        <select class="bg-white border border-gray-300 rounded-md px-3 py-2">
+                            <option>Featured</option>
+                            <option>Price: Low to High</option>
+                            <option>Price: High to Low</option>
+                            <option>Top Rated</option>
+                            <option>Newest</option>
+                        </select>
+                    </div>
+                </div>
+
+                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+                    <custom-product-card 
+                        image="http://static.photos/technology/640x360/5"
+                        title="Neon Blade X"
+                        price="1799"
+                        category="Gaming Laptop"
+                        rating="4.7"
+                    ></custom-product-card>
+                    <custom-product-card 
+                        image="http://static.photos/technology/640x360/6"
+                        title="Core i9 Extreme"
+                        price="499"
+                        category="Processor"
+                        rating="4.9"
+                    ></custom-product-card>
+                    <custom-product-card 
+                        image="http://static.photos/technology/640x360/7"
+                        title="Aero 34\" Curved"
+                        price="699"
+                        category="Monitor"
+                        rating="4.6"
+                    ></custom-product-card>
+                    <custom-product-card 
+                        image="http://static.photos/technology/640x360/8"
+                        title="Thunder Mouse Pro"
+                        price="129"
+                        category="Accessories"
+                        rating="4.5"
+                    ></custom-product-card>
+                    <custom-product-card 
+                        image="http://static.photos/technology/640x360/9"
+                        title="Nova SSD 2TB"
+                        price="249"
+                        category="Storage"
+                        rating="4.8"
+                    ></custom-product-card>
+                    <custom-product-card 
+                        image="http://static.photos/technology/640x360/10"
+                        title="Quantum Keyboard"
+                        price="199"
+                        category="Accessories"
+                        rating="4.4"
+                    ></custom-product-card>
+                </div>
+
+                <!-- Pagination -->
+                <div class="flex justify-center mt-12">
+                    <nav class="flex items-center space-x-2">
+                        <a href="#" class="px-4 py-2 border rounded-md hover:bg-gray-100">Previous</a>
+                        <a href="#" class="px-4 py-2 border rounded-md bg-blue-500 text-white">1</a>
+                        <a href="#" class="px-4 py-2 border rounded-md hover:bg-gray-100">2</a>
+                        <a href="#" class="px-4 py-2 border rounded-md hover:bg-gray-100">3</a>
+                        <a href="#" class="px-4 py-2 border rounded-md hover:bg-gray-100">Next</a>
+                    </nav>
+                </div>
+            </div>
+        </div>
+    </main>
+
+    <custom-footer></custom-footer>
+    
+    <script>
+        feather.replace();
+    </script>
+    <script src="script.js"></script>
+</body>
+</html>

script.js

@@ -1,9 +1,37 @@
+
 // Main JavaScript functionality
 document.addEventListener('DOMContentLoaded', () => {
     // Initialize any global functionality here
     console.log('ByteBazaar loaded!');
-    
-    // Example: Add to cart functionality
+
+    // Initialize price range slider
+    const initRangeSliders = () => {
+        document.querySelectorAll('input[type="range"]').forEach(slider => {
+            slider.addEventListener('input', function() {
+                const valueDisplay = this.nextElementSibling?.querySelector('span:nth-child(2)');
+                if (valueDisplay) {
+                    valueDisplay.textContent = `${this.value}`;
+                }
+            });
+        });
+    };
+
+    // Initialize filter sections
+    const initFilterSections = () => {
+        document.querySelectorAll('.filter-section').forEach(section => {
+            const header = section.querySelector('.filter-header');
+            if (header) {
+                header.addEventListener('click', () => {
+                    const content = section.querySelector('.filter-content');
+                    content.classList.toggle('hidden');
+                });
+            }
+        });
+    };
+
+    initRangeSliders();
+    initFilterSections();
+// Example: Add to cart functionality
     document.addEventListener('click', (e) => {
         if (e.target.classList.contains('add-to-cart')) {
             const product = e.target.closest('.product-card').dataset.product;