<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shop Online Today 🛍️</title>
    
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />

</head>

<body>
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shop Online Today 🛍️</title>
    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
    <script src="https://cdn.tailwindcss.com"></script>
    <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
    <style>
        model-viewer {
            width: 100%;
            height: 300px;
            --poster-color: transparent;
        }

        .animate-on-scroll {
            opacity: 0;
            transform: translateY(50px);
            transition: all 0.8s ease;
        }

        .animate-on-scroll.active {
            opacity: 1;
            transform: translateY(0);
        }
    </style>
</head>

<body>
    <div class="min-h-screen bg-gradient-to-br from-purple-600 to-blue-500 dark:from-gray-900 dark:to-black text-white font-sans antialiased">
        <header class="container mx-auto px-6 py-8 flex justify-between items-center animate-on-scroll">
            <div class="flex items-center">
                <span class="material-symbols-outlined text-4xl mr-3">storefront</span>
                <h1 class="text-3xl font-bold">E-Clothes</h1>
            </div>
            <nav class="space-x-6">
                <a href="#" class="hover:text-gray-300 transition duration-300">Home</a>
                <a href="#" class="hover:text-gray-300 transition duration-300">Clothes</a>
                <a href="#" class="hover:text-gray-300 transition duration-300">About</a>
                <a href="#" class="hover:text-gray-300 transition duration-300">Contact</a>
            </nav>
            <div class="flex items-center space-x-4">
                <button class="hover:text-gray-300 transition duration-300">
                    <span class="material-symbols-outlined">search</span>
                </button>
                <a href="cart.html" class="hover:text-gray-300 transition duration-300">
                    <span class="material-symbols-outlined">shopping_cart</span>
                </a>
                <button id="theme-toggle" class="hover:text-gray-300 transition duration-300">
                    <span class="material-symbols-outlined">brightness_medium</span>
                </button>
            </div>
        </header>

        <main class="container mx-auto px-6 py-16">
            <section class="text-center mb-16 animate-on-scroll">
                <h2 class="text-5xl font-extrabold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-pink-500 to-yellow-500">Discover Your Next Favorite Outfit</h2>
                <p class="text-xl text-gray-300 mb-8">Shop the latest trends and find amazing deals.</p>
                <button class="bg-yellow-500 hover:bg-yellow-600 text-black font-bold py-3 px-8 rounded-lg shadow-lg transform hover:scale-105 transition duration-300">Shop Now</button>
            </section>

            <section>
                <h3 class="text-4xl font-bold text-center mb-12 animate-on-scroll">Featured Clothes</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-12">

                    <div class="bg-white/10 dark:bg-gray-800/50 backdrop-blur-lg rounded-xl shadow-xl p-6 border border-white/10 dark:border-gray-700/50 hover:shadow-2xl transition duration-300 animate-on-scroll">
                        <model-viewer src="/assets/clothing1.glb" alt="Stylish Outfit" auto-rotate camera-controls ar>
                        </model-viewer>
                        <h4 class="text-2xl font-semibold mb-2">Stylish Outfit</h4>
                        <p class="text-gray-300 mb-4">Comfortable and trendy clothes for everyday wear.</p>
                        <div class="flex justify-between items-center">
                            <span class="text-2xl font-bold">$99.99</span>
                            <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg shadow-md transition duration-300">
                                <span class="material-symbols-outlined align-middle mr-1">add_shopping_cart</span> Add to Cart
                            </button>
                        </div>
                    </div>

                    <div class="bg-white/10 dark:bg-gray-800/50 backdrop-blur-lg rounded-xl shadow-xl p-6 border border-white/10 dark:border-gray-700/50 hover:shadow-2xl transition duration-300 animate-on-scroll">
                        <model-viewer src="/assets/clothing2.glb" alt="Summer Dress" auto-rotate camera-controls ar>
                        </model-viewer>
                        <h4 class="text-2xl font-semibold mb-2">Summer Dress</h4>
                        <p class="text-gray-300 mb-4">Perfect for sunny days and warm evenings.</p>
                        <div class="flex justify-between items-center">
                            <span class="text-2xl font-bold">$79.99</span>
                            <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg shadow-md transition duration-300">
                                <span class="material-symbols-outlined align-middle mr-1">add_shopping_cart</span> Add to Cart
                            </button>
                        </div>
                    </div>

                    <div class="bg-white/10 dark:bg-gray-800/50 backdrop-blur-lg rounded-xl shadow-xl p-6 border border-white/10 dark:border-gray-700/50 hover:shadow-2xl transition duration-300 animate-on-scroll">
                        <model-viewer src="/assets/clothing3.glb" alt="Winter Coat" auto-rotate camera-controls ar>
                        </model-viewer>
                        <h4 class="text-2xl font-semibold mb-2">Winter Coat</h4>
                        <p class="text-gray-300 mb-4">Stay warm and stylish during the cold season.</p>
                        <div class="flex justify-between items-center">
                            <span class="text-2xl font-bold">$129.99</span>
                            <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg shadow-md transition duration-300">
                                <span class="material-symbols-outlined align-middle mr-1">add_shopping_cart</span> Add to Cart
                            </button>
                        </div>
                    </div>

                    <div class="bg-white/10 dark:bg-gray-800/50 backdrop-blur-lg rounded-xl shadow-xl p-6 border border-white/10 dark:border-gray-700/50 hover:shadow-2xl transition duration-300 animate-on-scroll">
                        <model-viewer src="/assets/clothing4.glb" alt="Leather Jacket" auto-rotate camera-controls ar>
                        </model-viewer>
                        <h4 class="text-2xl font-semibold mb-2">Leather Jacket</h4>
                        <p class="text-gray-300 mb-4">Timeless classic for a cool and edgy look.</p>
                        <div class="flex justify-between items-center">
                            <span class="text-2xl font-bold">$149.99</span>
                            <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg shadow-md transition duration-300">
                                <span class="material-symbols-outlined align-middle mr-1">add_shopping_cart</span> Add to Cart
                            </button>
                        </div>
                    </div>

                    <div class="bg-white/10 dark:bg-gray-800/50 backdrop-blur-lg rounded-xl shadow-xl p-6 border border-white/10 dark:border-gray-700/50 hover:shadow-2xl transition duration-300 animate-on-scroll">
                        <model-viewer src="/assets/clothing5.glb" alt="Denim Jeans" auto-rotate camera-controls ar>
                        </model-viewer>
                        <h4 class="text-2xl font-semibold mb-2">Denim Jeans</h4>
                        <p class="text-gray-300 mb-4">Versatile and comfortable jeans for any occasion.</p>
                        <div class="flex justify-between items-center">
                            <span class="text-2xl font-bold">$69.99</span>
                            <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg shadow-md transition duration-300">
                                <span class="material-symbols-outlined align-middle mr-1">add_shopping_cart</span> Add to Cart
                            </button>
                        </div>
                    </div>

                    <div class="bg-white/10 dark:bg-gray-800/50 backdrop-blur-lg rounded-xl shadow-xl p-6 border border-white/10 dark:border-gray-700/50 hover:shadow-2xl transition duration-300 animate-on-scroll">
                        <model-viewer src="/assets/clothing6.glb" alt="Cotton T-Shirt" auto-rotate camera-controls ar>
                        </model-viewer>
                        <h4 class="text-2xl font-semibold mb-2">Cotton T-Shirt</h4>
                        <p class="text-gray-300 mb-4">Soft and breathable t-shirt for everyday comfort.</p>
                        <div class="flex justify-between items-center">
                            <span class="text-2xl font-bold">$29.99</span>
                            <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg shadow-md transition duration-300">
                                <span class="material-symbols-outlined align-middle mr-1">add_shopping_cart</span> Add to Cart
                            </button>
                        </div>
                    </div>

                </div>
            </section>

            <div class="flex justify-center mt-12 animate-on-scroll">
                <a href="#" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mr-2">Previous</a>
                <a href="#" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Next Page</a>
            </div>

        </main>

        <footer class="bg-gray-900/50 dark:bg-black/70 text-gray-300 py-12 px-6 animate-on-scroll">
            <div class="container mx-auto grid grid-cols-1 md:grid-cols-3 gap-8">
                <div>
                    <h3 class="text-xl font-bold mb-4">E-Clothes</h3>
                    <p>Your one-stop shop for quality clothes and amazing deals.</p>
                </div>
                <div>
                    <h3 class="text-xl font-bold mb-4">Quick Links</h3>
                    <ul class="space-y-2">
                        <li><a href="#" class="hover:text-white transition duration-300">Home</a></li>
                        <li><a href="#" class="hover:text-white transition duration-300">Clothes</a></li>
                        <li><a href="#" class="hover:text-white transition duration-300">About Us</a></li>
                        <li><a href="#" class="hover:text-white transition duration-300">Contact Us</a></li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-xl font-bold mb-4">Stay Connected</h3>
                    <p>Follow us on social media:</p>
                    <div class="flex space-x-4 mt-2">
                        <a href="#" class="hover:text-white transition duration-300"><span class="material-symbols-outlined">facebook</span></a>
                        <a href="#" class="hover:text-white transition duration-300"><span class="material-symbols-outlined">twitter</span></a>
                        <a href="#" class="hover:text-white transition duration-300"><span class="material-symbols-outlined">instagram</span></a>
                    </div>
                    <p class="mt-4">&copy; <span class="copyright-year"></span> E-Clothes. All rights reserved.</p>
                </div>
            </div>
        </footer>
    </div>
</body>

</html>
</body>
 
 <script>
        
    const themeToggleBtn = document.getElementById('theme-toggle');
    const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');
    const currentTheme = localStorage.getItem('theme');

    function applyTheme(theme) {
        if (theme === 'dark') {
            document.documentElement.classList.add('dark');
        } else {
            document.documentElement.classList.remove('dark');
        }
    }

    if (currentTheme) {
        applyTheme(currentTheme);
    } else {
        applyTheme(prefersDarkScheme.matches ? 'dark' : 'light');
    }

    themeToggleBtn.addEventListener('click', () => {
        const isDark = document.documentElement.classList.toggle('dark');
        localStorage.setItem('theme', isDark ? 'dark' : 'light');
        updateThemeIcon(isDark);
    });

    function updateThemeIcon(isDark) {
        const icon = themeToggleBtn.querySelector('span.material-symbols-outlined');
        if (isDark) {
            icon.textContent = 'dark_mode';
        } else {
            icon.textContent = 'light_mode';
        }
    }

    // Initial icon update based on current theme
    updateThemeIcon(document.documentElement.classList.contains('dark'));

    // Update theme when system preference changes
    prefersDarkScheme.addEventListener('change', (e) => {
        applyTheme(e.matches ? 'dark' : 'light');
        updateThemeIcon(e.matches);
        localStorage.setItem('theme', e.matches ? 'dark' : 'light');
    });

    // Dynamic copyright year
    const copyrightYearSpan = document.querySelector('.copyright-year');
    if (copyrightYearSpan) {
        copyrightYearSpan.textContent = new Date().getFullYear();
    }

    // Animation on scroll
    const observer = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
            if (entry.isIntersecting) {
                entry.target.classList.add('active');
            } else {
                entry.target.classList.remove('active');
            }
        });
    });

    const hiddenElements = document.querySelectorAll('.animate-on-scroll');
    hiddenElements.forEach((el) => observer.observe(el));
 
     </script>
</html>