<!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">© <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';
}
}
updateThemeIcon(document.documentElement.classList.contains('dark'));
prefersDarkScheme.addEventListener('change', (e) => {
applyTheme(e.matches ? 'dark' : 'light');
updateThemeIcon(e.matches);
localStorage.setItem('theme', e.matches ? 'dark' : 'light');
});
const copyrightYearSpan = document.querySelector('.copyright-year');
if (copyrightYearSpan) {
copyrightYearSpan.textContent = new Date().getFullYear();
}
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>