Hugging Face's logo

Spaces:
david15tonon
/
ecompet
Running

App Files Community
ecompet / index.html
david15tonon's picture
david15tonon
Add 3 files
396d6ab verified
raw
history blame contribute delete
48.3 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Paws & Whiskers - Premium Pet Supplies</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
/* Custom CSS for animations and effects */
.product-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}
.product-card {
transition: all 0.3s ease;
}
.cart-item-enter {
opacity: 0;
transform: translateX(-20px);
}
.cart-item-enter-active {
opacity: 1;
transform: translateX(0);
transition: all 300ms ease-in;
}
.cart-item-exit {
opacity: 1;
}
.cart-item-exit-active {
opacity: 0;
transform: translateX(20px);
transition: all 300ms ease-in;
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.bounce {
animation: bounce 1s infinite;
}
</style>
</head>
<body class="bg-gray-50 font-sans">
<!-- Header/Navigation -->
<header class="bg-white shadow-sm sticky top-0 z-50">
<div class="container mx-auto px-4 py-3 flex justify-between items-center">
<div class="flex items-center space-x-2">
<i class="fas fa-paw text-2xl text-indigo-600"></i>
<h1 class="text-xl font-bold text-gray-800">Paws & Whiskers</h1>
</div>
<div class="hidden md:flex space-x-8">
<a href="#" class="text-gray-700 hover:text-indigo-600 font-medium">Home</a>
<a href="#products" class="text-gray-700 hover:text-indigo-600 font-medium">Shop</a>
<a href="#about" class="text-gray-700 hover:text-indigo-600 font-medium">About</a>
<a href="#contact" class="text-gray-700 hover:text-indigo-600 font-medium">Contact</a>
</div>
<div class="flex items-center space-x-4">
<button id="search-btn" class="text-gray-600 hover:text-indigo-600">
<i class="fas fa-search"></i>
</button>
<button id="cart-btn" class="relative text-gray-600 hover:text-indigo-600">
<i class="fas fa-shopping-cart text-xl"></i>
<span id="cart-count" class="absolute -top-2 -right-2 bg-indigo-600 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">0</span>
</button>
<button class="md:hidden text-gray-600 hover:text-indigo-600" id="mobile-menu-btn">
<i class="fas fa-bars text-xl"></i>
</button>
</div>
</div>
<!-- Mobile Menu -->
<div id="mobile-menu" class="hidden md:hidden bg-white border-t py-2 px-4">
<a href="#" class="block py-2 text-gray-700 hover:text-indigo-600">Home</a>
<a href="#products" class="block py-2 text-gray-700 hover:text-indigo-600">Shop</a>
<a href="#about" class="block py-2 text-gray-700 hover:text-indigo-600">About</a>
<a href="#contact" class="block py-2 text-gray-700 hover:text-indigo-600">Contact</a>
</div>
<!-- Search Bar -->
<div id="search-bar" class="hidden bg-white border-t py-3 px-4">
<div class="container mx-auto flex">
<input type="text" placeholder="Search for pet products..." class="flex-grow px-4 py-2 border rounded-l-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
<button class="bg-indigo-600 text-white px-4 py-2 rounded-r-lg hover:bg-indigo-700">
<i class="fas fa-search"></i>
</button>
</div>
</div>
</header>
<!-- Hero Section -->
<section class="bg-gradient-to-r from-indigo-500 to-purple-600 text-white py-16">
<div class="container mx-auto px-4 flex flex-col md:flex-row items-center">
<div class="md:w-1/2 mb-8 md:mb-0">
<h2 class="text-4xl md:text-5xl font-bold mb-4">Premium Products for Your Furry Friends</h2>
<p class="text-xl mb-6">Everything you need to keep your pets happy, healthy, and stylish.</p>
<div class="flex space-x-4">
<a href="#products" class="bg-white text-indigo-600 px-6 py-3 rounded-lg font-medium hover:bg-gray-100 transition duration-300">Shop Now</a>
<a href="#about" class="border border-white text-white px-6 py-3 rounded-lg font-medium hover:bg-white hover:text-indigo-600 transition duration-300">Learn More</a>
</div>
</div>
<div class="md:w-1/2 flex justify-center">
<img src="https://images.unsplash.com/photo-1586671267731-da2cf3ceeb80?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Happy pets" class="rounded-lg shadow-xl w-full max-w-md">
</div>
</div>
</section>
<!-- Categories -->
<section class="py-12 bg-white">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center mb-12">Shop by Category</h2>
<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
<div class="bg-indigo-50 rounded-lg p-6 text-center hover:bg-indigo-100 transition duration-300 cursor-pointer">
<i class="fas fa-dog text-4xl text-indigo-600 mb-4"></i>
<h3 class="font-semibold text-lg">Dogs</h3>
<p class="text-gray-600 mt-2">Food, toys, accessories</p>
</div>
<div class="bg-purple-50 rounded-lg p-6 text-center hover:bg-purple-100 transition duration-300 cursor-pointer">
<i class="fas fa-cat text-4xl text-purple-600 mb-4"></i>
<h3 class="font-semibold text-lg">Cats</h3>
<p class="text-gray-600 mt-2">Litter, trees, scratchers</p>
</div>
<div class="bg-yellow-50 rounded-lg p-6 text-center hover:bg-yellow-100 transition duration-300 cursor-pointer">
<i class="fas fa-fish text-4xl text-yellow-600 mb-4"></i>
<h3 class="font-semibold text-lg">Fish</h3>
<p class="text-gray-600 mt-2">Tanks, food, decor</p>
</div>
<div class="bg-green-50 rounded-lg p-6 text-center hover:bg-green-100 transition duration-300 cursor-pointer">
<i class="fas fa-kiwi-bird text-4xl text-green-600 mb-4"></i>
<h3 class="font-semibold text-lg">Birds</h3>
<p class="text-gray-600 mt-2">Cages, food, toys</p>
</div>
</div>
</div>
</section>
<!-- Featured Products -->
<section id="products" class="py-12 bg-gray-50">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center mb-12">Featured Products</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8">
<!-- Product cards will be inserted here by JavaScript -->
</div>
</div>
</section>
<!-- About Section -->
<section id="about" class="py-16 bg-white">
<div class="container mx-auto px-4">
<div class="flex flex-col md:flex-row items-center">
<div class="md:w-1/2 mb-8 md:mb-0">
<img src="https://images.unsplash.com/photo-1601758003122-53c40e686a19?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="About us" class="rounded-lg shadow-lg w-full">
</div>
<div class="md:w-1/2 md:pl-12">
<h2 class="text-3xl font-bold mb-6">Our Story</h2>
<p class="text-gray-600 mb-4">Founded in 2015, Paws & Whiskers began as a small pet store with a big dream: to provide premium quality products for pets and their owners.</p>
<p class="text-gray-600 mb-6">We carefully curate our selection to ensure every product meets our high standards for quality, safety, and sustainability. Our team consists of passionate pet lovers who understand what pets need to thrive.</p>
<div class="flex space-x-4">
<div class="bg-indigo-50 p-4 rounded-lg">
<i class="fas fa-check-circle text-indigo-600 text-2xl mb-2"></i>
<h3 class="font-semibold">Quality Products</h3>
</div>
<div class="bg-purple-50 p-4 rounded-lg">
<i class="fas fa-heart text-purple-600 text-2xl mb-2"></i>
<h3 class="font-semibold">Pet Lovers</h3>
</div>
<div class="bg-green-50 p-4 rounded-lg">
<i class="fas fa-leaf text-green-600 text-2xl mb-2"></i>
<h3 class="font-semibold">Eco-Friendly</h3>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Testimonials -->
<section class="py-16 bg-indigo-50">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center mb-12">What Our Customers Say</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-white p-6 rounded-lg shadow-md">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Customer" class="w-12 h-12 rounded-full mr-4">
<div>
<h4 class="font-semibold">Sarah Johnson</h4>
<div class="flex text-yellow-400">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
</div>
<p class="text-gray-600">"My dog absolutely loves the organic treats from Paws & Whiskers. The quality is outstanding and the delivery was super fast!"</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-md">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Customer" class="w-12 h-12 rounded-full mr-4">
<div>
<h4 class="font-semibold">Michael Chen</h4>
<div class="flex text-yellow-400">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
</div>
<p class="text-gray-600">"The cat tree I bought is so sturdy and well-made. My three cats fight over who gets to sleep on it. Worth every penny!"</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-md">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Customer" class="w-12 h-12 rounded-full mr-4">
<div>
<h4 class="font-semibold">Emily Rodriguez</h4>
<div class="flex text-yellow-400">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
</div>
</div>
<p class="text-gray-600">"Great selection of aquarium supplies. The staff helped me choose the perfect filter for my tank. My fish are thriving!"</p>
</div>
</div>
</div>
</section>
<!-- Newsletter -->
<section class="py-16 bg-indigo-600 text-white">
<div class="container mx-auto px-4 text-center">
<h2 class="text-3xl font-bold mb-4">Join Our Pet Lovers Community</h2>
<p class="text-xl mb-8 max-w-2xl mx-auto">Subscribe to our newsletter for exclusive offers, pet care tips, and new product announcements.</p>
<div class="max-w-md mx-auto flex">
<input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 rounded-l-lg focus:outline-none text-gray-800">
<button class="bg-white text-indigo-600 px-6 py-3 rounded-r-lg font-medium hover:bg-gray-100 transition duration-300">Subscribe</button>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="py-16 bg-white">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center mb-12">Contact Us</h2>
<div class="flex flex-col md:flex-row">
<div class="md:w-1/2 mb-8 md:mb-0">
<h3 class="text-xl font-semibold mb-4">Get in Touch</h3>
<p class="text-gray-600 mb-6">Have questions about our products or need assistance with your order? Our pet-loving team is here to help!</p>
<div class="space-y-4">
<div class="flex items-start">
<i class="fas fa-map-marker-alt text-indigo-600 mt-1 mr-4"></i>
<div>
<h4 class="font-medium">Address</h4>
<p class="text-gray-600">123 Pet Street, Animal City, PA 12345</p>
</div>
</div>
<div class="flex items-start">
<i class="fas fa-phone-alt text-indigo-600 mt-1 mr-4"></i>
<div>
<h4 class="font-medium">Phone</h4>
<p class="text-gray-600">(555) 123-4567</p>
</div>
</div>
<div class="flex items-start">
<i class="fas fa-envelope text-indigo-600 mt-1 mr-4"></i>
<div>
<h4 class="font-medium">Email</h4>
<p class="text-gray-600">hello@pawsandwhiskers.com</p>
</div>
</div>
</div>
</div>
<div class="md:w-1/2 md:pl-12">
<h3 class="text-xl font-semibold mb-4">Send Us a Message</h3>
<form class="space-y-4">
<div>
<label for="name" class="block text-gray-700 mb-1">Name</label>
<input type="text" id="name" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
</div>
<div>
<label for="email" class="block text-gray-700 mb-1">Email</label>
<input type="email" id="email" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
</div>
<div>
<label for="message" class="block text-gray-700 mb-1">Message</label>
<textarea id="message" rows="4" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"></textarea>
</div>
<button type="submit" class="bg-indigo-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-indigo-700 transition duration-300">Send Message</button>
</form>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-800 text-white py-12">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<div class="flex items-center space-x-2 mb-4">
<i class="fas fa-paw text-2xl text-indigo-400"></i>
<h3 class="text-xl font-bold">Paws & Whiskers</h3>
</div>
<p class="text-gray-400">Premium pet supplies for your furry, feathery, and scaly family members.</p>
<div class="flex space-x-4 mt-4">
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a>
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a>
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-pinterest-p"></i></a>
</div>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">Shop</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white">Dog Supplies</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Cat Supplies</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Fish Supplies</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Bird Supplies</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Small Pets</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">Customer Service</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white">Contact Us</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">FAQs</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Shipping Policy</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Returns & Exchanges</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">Newsletter</h4>
<p class="text-gray-400 mb-4">Subscribe to get updates on new arrivals and special offers.</p>
<div class="flex">
<input type="email" placeholder="Your email" class="px-4 py-2 bg-gray-700 text-white rounded-l-lg focus:outline-none w-full">
<button class="bg-indigo-600 text-white px-4 py-2 rounded-r-lg hover:bg-indigo-700"><i class="fas fa-paper-plane"></i></button>
</div>
</div>
</div>
<div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
<p>&copy; 2023 Paws & Whiskers. All rights reserved.</p>
</div>
</div>
</footer>
<!-- Shopping Cart Sidebar -->
<div id="cart-sidebar" class="fixed top-0 right-0 h-full w-full md:w-96 bg-white shadow-lg transform translate-x-full transition-transform duration-300 z-50 overflow-y-auto">
<div class="p-6">
<div class="flex justify-between items-center mb-6">
<h3 class="text-xl font-bold">Your Cart</h3>
<button id="close-cart" class="text-gray-500 hover:text-gray-700">
<i class="fas fa-times text-xl"></i>
</button>
</div>
<div id="cart-items" class="space-y-4">
<!-- Cart items will be inserted here by JavaScript -->
<div id="empty-cart-message" class="text-center py-8">
<i class="fas fa-shopping-cart text-4xl text-gray-300 mb-4"></i>
<p class="text-gray-500">Your cart is empty</p>
</div>
</div>
<div id="cart-summary" class="border-t border-gray-200 mt-6 pt-6 hidden">
<div class="flex justify-between mb-2">
<span class="font-medium">Subtotal</span>
<span id="cart-subtotal">$0.00</span>
</div>
<div class="flex justify-between mb-4">
<span class="font-medium">Shipping</span>
<span>Free</span>
</div>
<div class="flex justify-between text-lg font-bold">
<span>Total</span>
<span id="cart-total">$0.00</span>
</div>
<button class="w-full bg-indigo-600 text-white py-3 rounded-lg mt-6 hover:bg-indigo-700 transition duration-300">Proceed to Checkout</button>
<p class="text-center text-sm text-gray-500 mt-2">or <a href="#" class="text-indigo-600 hover:underline">continue shopping</a></p>
</div>
</div>
</div>
<div id="cart-overlay" class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden"></div>
<!-- Product Quick View Modal -->
<div id="quick-view-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center p-4">
<div class="bg-white rounded-lg max-w-4xl w-full max-h-screen overflow-y-auto">
<div class="p-6">
<div class="flex justify-between items-start mb-4">
<h3 id="quick-view-title" class="text-2xl font-bold">Product Name</h3>
<button id="close-quick-view" class="text-gray-500 hover:text-gray-700">
<i class="fas fa-times text-xl"></i>
</button>
</div>
<div class="flex flex-col md:flex-row gap-6">
<div class="md:w-1/2">
<img id="quick-view-image" src="" alt="Product" class="w-full rounded-lg">
<div class="grid grid-cols-4 gap-2 mt-4">
<img src="https://via.placeholder.com/100" alt="Thumbnail" class="rounded cursor-pointer border-2 border-transparent hover:border-indigo-500">
<img src="https://via.placeholder.com/100" alt="Thumbnail" class="rounded cursor-pointer border-2 border-transparent hover:border-indigo-500">
<img src="https://via.placeholder.com/100" alt="Thumbnail" class="rounded cursor-pointer border-2 border-transparent hover:border-indigo-500">
<img src="https://via.placeholder.com/100" alt="Thumbnail" class="rounded cursor-pointer border-2 border-transparent hover:border-indigo-500">
</div>
</div>
<div class="md:w-1/2">
<div class="flex items-center mb-4">
<div class="flex text-yellow-400 mr-2">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
<span class="text-gray-600">(24 reviews)</span>
</div>
<p id="quick-view-price" class="text-2xl font-bold text-indigo-600 mb-4">$29.99</p>
<p id="quick-view-description" class="text-gray-600 mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="mb-6">
<label class="block text-gray-700 mb-2">Size</label>
<div class="flex space-x-2">
<button class="px-4 py-2 border rounded hover:bg-gray-100">Small</button>
<button class="px-4 py-2 border rounded hover:bg-gray-100">Medium</button>
<button class="px-4 py-2 border rounded hover:bg-gray-100">Large</button>
</div>
</div>
<div class="mb-6">
<label class="block text-gray-700 mb-2">Color</label>
<div class="flex space-x-2">
<button class="w-8 h-8 rounded-full bg-blue-500 border-2 border-transparent hover:border-gray-300"></button>
<button class="w-8 h-8 rounded-full bg-red-500 border-2 border-transparent hover:border-gray-300"></button>
<button class="w-8 h-8 rounded-full bg-green-500 border-2 border-transparent hover:border-gray-300"></button>
<button class="w-8 h-8 rounded-full bg-yellow-500 border-2 border-transparent hover:border-gray-300"></button>
</div>
</div>
<div class="flex items-center mb-6">
<label class="block text-gray-700 mr-4">Quantity</label>
<div class="flex border rounded">
<button class="px-3 py-1 text-gray-600 hover:bg-gray-100">-</button>
<input type="number" value="1" min="1" class="w-12 text-center border-x">
<button class="px-3 py-1 text-gray-600 hover:bg-gray-100">+</button>
</div>
</div>
<div class="flex space-x-4">
<button id="add-to-cart-quick" class="flex-1 bg-indigo-600 text-white py-3 rounded-lg hover:bg-indigo-700 transition duration-300">Add to Cart</button>
<button class="p-3 border rounded-lg text-indigo-600 hover:bg-indigo-50">
<i class="fas fa-heart"></i>
</button>
</div>
<div class="mt-6 pt-6 border-t">
<div class="flex items-start">
<i class="fas fa-truck text-indigo-600 mt-1 mr-3"></i>
<div>
<h4 class="font-medium">Free Shipping</h4>
<p class="text-gray-600 text-sm">On orders over $50</p>
</div>
</div>
<div class="flex items-start mt-4">
<i class="fas fa-undo text-indigo-600 mt-1 mr-3"></i>
<div>
<h4 class="font-medium">Easy Returns</h4>
<p class="text-gray-600 text-sm">30-day return policy</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
// Sample product data
const products = [
{
id: 1,
name: "Premium Dog Food",
price: 29.99,
image: "https://images.unsplash.com/photo-1589927986089-35812388d1b4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80",
category: "Dog",
description: "High-quality, grain-free dog food with real chicken and vegetables for optimal nutrition.",
rating: 4.5
},
{
id: 2,
name: "Cat Scratching Post",
price: 39.99,
image: "https://images.unsplash.com/photo-1632185398105-961809e5a8c9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80",
category: "Cat",
description: "Durable scratching post with sisal rope to protect your furniture and keep your cat happy.",
rating: 4.8
},
{
id: 3,
name: "Aquarium Starter Kit",
price: 89.99,
image: "https://images.unsplash.com/photo-1452784444945-f0a327744f3b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80",
category: "Fish",
description: "Complete 10-gallon aquarium kit with filter, LED lighting, and all accessories included.",
rating: 4.7
},
{
id: 4,
name: "Bird Cage with Stand",
price: 129.99,
image: "https://images.unsplash.com/photo-1552728089-57bdde30beb3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80",
category: "Bird",
description: "Spacious bird cage with removable tray and stand, perfect for small to medium birds.",
rating: 4.6
},
{
id: 5,
name: "Dog Chew Toys (Set of 3)",
price: 19.99,
image: "https://images.unsplash.com/photo-1551376347-075b0121a65b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80",
category: "Dog",
description: "Durable chew toys made from natural rubber, great for teething puppies and active dogs.",
rating: 4.4
},
{
id: 6,
name: "Self-Cleaning Cat Litter Box",
price: 199.99,
image: "https://images.unsplash.com/photo-163233894827bf-1a576a17c01d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80",
category: "Cat",
description: "Automatic self-cleaning litter box with odor control and waste compartment.",
rating: 4.2
},
{
id: 7,
name: "Fish Food Variety Pack",
price: 14.99,
image: "https://images.unsplash.com/photo-1562690868-60bbe729d1a6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80",
category: "Fish",
description: "Nutritionally balanced fish food with flakes, pellets, and freeze-dried options.",
rating: 4.3
},
{
id: 8,
name: "Small Animal Habitat",
price: 59.99,
image: "https://images.unsplash.com/photo-1560114928-40f1f1eb26a0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80",
category: "Small Pet",
description: "Modular habitat for hamsters, gerbils, or mice with tubes, platforms, and exercise wheel.",
rating: 4.5
}
];
// Shopping cart functionality
let cart = [];
// DOM elements
const cartBtn = document.getElementById('cart-btn');
const closeCartBtn = document.getElementById('close-cart');
const cartSidebar = document.getElementById('cart-sidebar');
const cartOverlay = document.getElementById('cart-overlay');
const cartItemsContainer = document.getElementById('cart-items');
const emptyCartMessage = document.getElementById('empty-cart-message');
const cartSummary = document.getElementById('cart-summary');
const cartCount = document.getElementById('cart-count');
const cartSubtotal = document.getElementById('cart-subtotal');
const cartTotal = document.getElementById('cart-total');
const productsContainer = document.querySelector('#products .grid');
const mobileMenuBtn = document.getElementById('mobile-menu-btn');
const mobileMenu = document.getElementById('mobile-menu');
const searchBtn = document.getElementById('search-btn');
const searchBar = document.getElementById('search-bar');
const quickViewModal = document.getElementById('quick-view-modal');
const closeQuickView = document.getElementById('close-quick-view');
const quickViewTitle = document.getElementById('quick-view-title');
const quickViewImage = document.getElementById('quick-view-image');
const quickViewPrice = document.getElementById('quick-view-price');
const quickViewDescription = document.getElementById('quick-view-description');
const addToCartQuick = document.getElementById('add-to-cart-quick');
// Current product being viewed in quick view
let currentProduct = null;
// Initialize the page
document.addEventListener('DOMContentLoaded', () => {
renderProducts();
setupEventListeners();
});
function renderProducts() {
productsContainer.innerHTML = '';
products.forEach(product => {
const productCard = document.createElement('div');
productCard.className = 'product-card bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg';
productCard.innerHTML = `
<div class="relative">
<img src="${product.image}" alt="${product.name}" class="w-full h-48 object-cover">
<div class="absolute top-2 right-2 bg-white rounded-full p-2 shadow">
<i class="far fa-heart text-gray-400 hover:text-red-500 cursor-pointer"></i>
</div>
</div>
<div class="p-4">
<div class="flex justify-between items-start mb-2">
<h3 class="font-semibold text-lg">${product.name}</h3>
<span class="text-indigo-600 font-bold">$${product.price.toFixed(2)}</span>
</div>
<div class="flex items-center mb-3">
<div class="flex text-yellow-400 mr-2">
${renderStars(product.rating)}
</div>
<span class="text-gray-500 text-sm">${product.rating.toFixed(1)}</span>
</div>
<p class="text-gray-600 text-sm mb-4">${product.description.substring(0, 60)}...</p>
<div class="flex space-x-2">
<button class="quick-view-btn flex-1 bg-gray-100 text-gray-800 py-2 rounded hover:bg-gray-200 transition duration-300" data-id="${product.id}">
Quick View
</button>
<button class="add-to-cart-btn bg-indigo-600 text-white p-2 rounded hover:bg-indigo-700 transition duration-300" data-id="${product.id}">
<i class="fas fa-shopping-cart"></i>
</button>
</div>
</div>
`;
productsContainer.appendChild(productCard);
});
}
function renderStars(rating) {
let stars = '';
const fullStars = Math.floor(rating);
const hasHalfStar = rating % 1 >= 0.5;
for (let i = 0; i < fullStars; i++) {
stars += '<i class="fas fa-star"></i>';
}
if (hasHalfStar) {
stars += '<i class="fas fa-star-half-alt"></i>';
}
const emptyStars = 5 - Math.ceil(rating);
for (let i = 0; i < emptyStars; i++) {
stars += '<i class="far fa-star"></i>';
}
return stars;
}
function setupEventListeners() {
// Cart toggle
cartBtn.addEventListener('click', toggleCart);
closeCartBtn.addEventListener('click', toggleCart);
cartOverlay.addEventListener('click', toggleCart);
// Mobile menu toggle
mobileMenuBtn.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
});
// Search bar toggle
searchBtn.addEventListener('click', () => {
searchBar.classList.toggle('hidden');
});
// Quick view modal
document.querySelectorAll('.quick-view-btn').forEach(btn => {
btn.addEventListener('click', (e) => {
const productId = parseInt(e.target.getAttribute('data-id'));
showQuickView(productId);
});
});
closeQuickView.addEventListener('click', () => {
quickViewModal.classList.add('hidden');
});
// Add to cart buttons
document.querySelectorAll('.add-to-cart-btn').forEach(btn => {
btn.addEventListener('click', (e) => {
const productId = parseInt(e.target.getAttribute('data-id'));
addToCart(productId);
// Add bounce animation to cart icon
cartCount.classList.add('bounce');
setTimeout(() => {
cartCount.classList.remove('bounce');
}, 1000);
});
});
addToCartQuick.addEventListener('click', () => {
if (currentProduct) {
addToCart(currentProduct.id);
}
});
}
function toggleCart() {
cartSidebar.classList.toggle('translate-x-full');
cartOverlay.classList.toggle('hidden');
if (!cartSidebar.classList.contains('translate-x-full')) {
renderCartItems();
}
}
function showQuickView(productId) {
currentProduct = products.find(p => p.id === productId);
if (currentProduct) {
quickViewTitle.textContent = currentProduct.name;
quickViewImage.src = currentProduct.image;
quickViewPrice.textContent = `$${currentProduct.price.toFixed(2)}`;
quickViewDescription.textContent = currentProduct.description;
quickViewModal.classList.remove('hidden');
}
}
function addToCart(productId) {
const product = products.find(p => p.id === productId);
if (product) {
const existingItem = cart.find(item => item.id === productId);
if (existingItem) {
existingItem.quantity += 1;
} else {
cart.push({
...product,
quantity: 1
});
}
updateCart();
// Show notification
showNotification(`${product.name} added to cart`);
}
}
function removeFromCart(productId) {
cart = cart.filter(item => item.id !== productId);
updateCart();
}
function updateCartItemQuantity(productId, newQuantity) {
const item = cart.find(item => item.id === productId);
if (item) {
if (newQuantity < 1) {
removeFromCart(productId);
} else {
item.quantity = newQuantity;
}
updateCart();
}
}
function updateCart() {
// Update cart count
const totalItems = cart.reduce((sum, item) => sum + item.quantity, 0);
cartCount.textContent = totalItems;
// Save to localStorage
localStorage.setItem('cart', JSON.stringify(cart));
// If cart is open, update the items
if (!cartSidebar.classList.contains('translate-x-full')) {
renderCartItems();
}
}
function renderCartItems() {
cartItemsContainer.innerHTML = '';
if (cart.length === 0) {
emptyCartMessage.classList.remove('hidden');
cartSummary.classList.add('hidden');
} else {
emptyCartMessage.classList.add('hidden');
cartSummary.classList.remove('hidden');
let subtotal = 0;
cart.forEach(item => {
const itemTotal = item.price * item.quantity;
subtotal += itemTotal;
const cartItem = document.createElement('div');
cartItem.className = 'flex border-b border-gray-200 pb-4';
cartItem.innerHTML = `
<div class="w-20 h-20 bg-gray-100 rounded overflow-hidden mr-4">
<img src="${item.image}" alt="${item.name}" class="w-full h-full object-cover">
</div>
<div class="flex-1">
<div class="flex justify-between">
<h4 class="font-medium">${item.name}</h4>
<button class="remove-item text-gray-500 hover:text-red-500" data-id="${item.id}">
<i class="fas fa-times"></i>
</button>
</div>
<p class="text-gray-600 text-sm">$${item.price.toFixed(2)}</p>
<div class="flex items-center mt-2">
<button class="decrease-quantity px-2 py-1 border rounded-l" data-id="${item.id}">-</button>
<span class="quantity px-3 py-1 border-t border-b">${item.quantity}</span>
<button class="increase-quantity px-2 py-1 border rounded-r" data-id="${item.id}">+</button>
</div>
</div>
<div class="ml-4 font-medium">
$${itemTotal.toFixed(2)}
</div>
`;
cartItemsContainer.appendChild(cartItem);
});
// Update totals
cartSubtotal.textContent = `$${subtotal.toFixed(2)}`;
cartTotal.textContent = `$${subtotal.toFixed(2)}`;
// Add event listeners to new buttons
document.querySelectorAll('.remove-item').forEach(btn => {
btn.addEventListener('click', (e) => {
const productId = parseInt(e.target.closest('button').getAttribute('data-id'));
removeFromCart(productId);
});
});
document.querySelectorAll('.decrease-quantity').forEach(btn => {
btn.addEventListener('click', (e) => {
const productId = parseInt(e.target.getAttribute('data-id'));
const item = cart.find(item => item.id === productId);
if (item) {
updateCartItemQuantity(productId, item.quantity - 1);
}
});
});
document.querySelectorAll('.increase-quantity').forEach(btn => {
btn.addEventListener('click', (e) => {
const productId = parseInt(e.target.getAttribute('data-id'));
const item = cart.find(item => item.id === productId);
if (item) {
updateCartItemQuantity(productId, item.quantity + 1);
}
});
});
}
}
function showNotification(message) {
const notification = document.createElement('div');
notification.className = 'fixed bottom-4 right-4 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg flex items-center transform translate-y-10 opacity-0 transition-all duration-300';
notification.innerHTML = `
<i class="fas fa-check-circle mr-2"></i>
<span>${message}</span>
`;
document.body.appendChild(notification);
// Trigger reflow to enable transition
setTimeout(() => {
notification.classList.remove('translate-y-10');
notification.classList.remove('opacity-0');
notification.classList.add('opacity-100');
}, 10);
// Remove after 3 seconds
setTimeout(() => {
notification.classList.add('opacity-0');
notification.classList.add('translate-y-10');
setTimeout(() => {
notification.remove();
}, 300);
}, 3000);
}
// Load cart from localStorage if available
if (localStorage.getItem('cart')) {
cart = JSON.parse(localStorage.getItem('cart'));
updateCart();
}
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=david15tonon/ecompet" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>