gallery.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Product Gallery - MISSFITS Boutique</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="css/product.css">
    <link rel="stylesheet" href="css/search.css">
    <link href="https://fonts.googleapis.com/css2?family=Arimo:wght@400;700&display=swap" rel="stylesheet">
    <link rel="icon" href="favicon.svg" type="image/svg">
    
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: 'Arimo', Arial, sans-serif;
            background-color: #f4eae2;
            min-height: 100vh;
        }

        .gallery-header {
            background-color: #f4eae2;
            padding: 20px 0;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            position: sticky;
            top: 0;
            z-index: 100;
        }

        .header-content {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
        }

        .header-logo {
            height: 60px;
            width: auto;
        }

        .header-nav {
            display: flex;
            gap: 30px;
        }

        .header-nav a {
            color: #333;
            text-decoration: none;
            font-weight: 500;
            font-size: 16px;
            transition: color 0.3s;
        }

        .header-nav a:hover {
            color: #d2a6a6;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 40px 20px;
        }

        h1 {
            text-align: center;
            color: #333;
            margin-bottom: 20px;
            font-size: 36px;
            font-weight: 700;
        }

        .gallery-description {
            text-align: center;
            color: #666;
            margin-bottom: 40px;
            font-size: 18px;
            line-height: 1.6;
        }

        /* Category Filter */
        .category-filter {
            display: flex;
            justify-content: center;
            margin-bottom: 40px;
            gap: 15px;
            flex-wrap: wrap;
        }

        .filter-btn {
            padding: 10px 20px;
            background-color: white;
            color: #333;
            border: 2px solid #d2a6a6;
            border-radius: 25px;
            text-decoration: none;
            font-weight: 500;
            transition: all 0.3s;
            cursor: pointer;
        }

        .filter-btn:hover,
        .filter-btn.active {
            background-color: #d2a6a6;
            color: white;
        }

        .products-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 30px;
            margin-bottom: 60px;
        }

        .loading {
            text-align: center;
            padding: 60px 20px;
            font-size: 18px;
            color: #666;
        }

        @media (max-width: 768px) {
            .header-content {
                flex-direction: column;
                gap: 20px;
            }

            .header-logo {
                height: 50px;
            }

            .header-nav {
                gap: 20px;
            }

            h1 {
                font-size: 28px;
            }

            .gallery-description {
                font-size: 16px;
            }

            .products-grid {
                grid-template-columns: 1fr;
                gap: 20px;
            }

            .category-filter {
                gap: 10px;
            }

            .filter-btn {
                padding: 8px 16px;
                font-size: 14px;
            }
        }
    </style>
</head>
<body>
    <header class="gallery-header">
        <div class="header-content">
            <a href="index.html" class="logo-link">
                <img src="img/title.svg" alt="MISSFITS Boutique Logo" class="header-logo">
            </a>
            <nav class="header-nav">
                <a href="index.html">Home</a>
                <a href="gallery.html" class="active">Gallery</a>
            </nav>
        </div>
    </header>

    <div class="container">
        <h1>Our Product Collection</h1>
        <p class="gallery-description">
            Discover our exquisite collection of handcrafted fashion pieces. Each item is carefully designed and made with attention to detail, bringing you the perfect blend of traditional artistry and contemporary style.
        </p>

        <!-- Category Filter -->
        <div class="category-filter" id="categoryFilter">
            <button class="filter-btn active" data-category="all">All Products</button>
        </div>

        <!-- Products Grid -->
        <div class="products-grid" id="productsGrid">
            <div class="loading">Loading our beautiful collection...</div>
        </div>
    </div>

    <footer>
        <p>Contact MISSFITS Boutique for all your fashion needs! Call us at +917975495202. &copy; 2024 MISSFITS Boutique. All Rights Reserved.</p>
    </footer>

    <script src="js/products.js"></script>
    <script src="js/search.js"></script>
    <script>
        let allProducts = [];
        let currentCategory = 'all';

        // Load and display products
        async function loadGallery() {
            try {
                // Load product database
                await window.productDB.loadProducts();
                allProducts = window.productDB.getAllProducts();
                const categories = window.productDB.getCategories();

                // Setup category filter
                setupCategoryFilter(categories);

                // Display products
                displayProducts(allProducts);
            } catch (error) {
                console.error('Error loading gallery:', error);
                document.getElementById('productsGrid').innerHTML = `
                    <div class="error">
                        <h2>Error Loading Products</h2>
                        <p>We're having trouble loading our collection. Please try refreshing the page.</p>
                    </div>
                `;
            }
        }

        // Setup category filter buttons
        function setupCategoryFilter(categories) {
            const filterContainer = document.getElementById('categoryFilter');
            
            // Add click event to 'All Products' button
            const allBtn = filterContainer.querySelector('[data-category="all"]');
            if (allBtn) {
                allBtn.addEventListener('click', () => filterProducts('all'));
            }

            // Add category buttons
            categories.forEach(category => {
                const button = document.createElement('button');
                button.className = 'filter-btn';
                button.textContent = category.name;
                button.setAttribute('data-category', category.id);
                button.addEventListener('click', () => filterProducts(category.id));
                filterContainer.appendChild(button);
            });
        }

        // Filter products by category
        function filterProducts(categoryId) {
            currentCategory = categoryId;
            
            // Update active filter button
            document.querySelectorAll('.filter-btn').forEach(btn => {
                btn.classList.remove('active');
                if (btn.getAttribute('data-category') === categoryId) {
                    btn.classList.add('active');
                }
            });

            // Filter and display products
            let filteredProducts;
            if (categoryId === 'all') {
                filteredProducts = allProducts;
            } else {
                filteredProducts = window.productDB.getProductsByCategory(categoryId);
            }

            displayProducts(filteredProducts);
        }

        // Display products in grid
        function displayProducts(products) {
            const gridContainer = document.getElementById('productsGrid');
            
            if (products.length === 0) {
                gridContainer.innerHTML = `
                    <div class="no-products">
                        <h3>No products found</h3>
                        <p>There are currently no products in this category.</p>
                    </div>
                `;
                return;
            }

            gridContainer.innerHTML = products.map(product => 
                window.ProductUtils.createProductCard(product, true)
            ).join('');
        }

        // Initialize gallery
        document.addEventListener('DOMContentLoaded', loadGallery);
    </script>
</body>
</html>