shop-store / index.html
VisionBleuLED's picture
Add 3 files
cb3d569 verified
Raw History Blame Contribute Delete
40.6 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VB LED - Professional Lighting Solutions</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>
.cart-slider {
transform: translateX(100%);
transition: transform 0.3s ease-in-out;
}
.cart-slider.open {
transform: translateX(0);
}
.product-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}
.category-block:hover {
transform: scale(1.03);
}
.hero-section {
background-image: url('https://images.unsplash.com/photo-1600585154340-be6161a56a0c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');
background-size: cover;
background-position: center;
position: relative;
}
.hero-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
}
.hero-content {
position: relative;
z-index: 1;
}
</style>
</head>
<body class="font-sans bg-white text-black">
<!-- Header -->
<header class="sticky top-0 z-50 bg-white shadow-sm">
<div class="container mx-auto px-4 py-3 flex items-center justify-between">
<!-- Logo -->
<div class="flex items-center">
<a href="#" class="text-2xl font-bold text-blue-600">VB LED</a>
</div>
<!-- Navigation -->
<nav class="hidden md:flex space-x-8">
<a href="#" class="font-medium hover:text-blue-600">Shop All Products</a>
<a href="#" class="font-medium hover:text-blue-600">Support</a>
<a href="#" class="font-medium hover:text-blue-600">My Account</a>
</nav>
<!-- Cart -->
<div class="flex items-center">
<button id="cart-button" class="relative">
<i class="fas fa-shopping-cart text-xl"></i>
<span id="cart-count" class="absolute -top-2 -right-2 bg-blue-600 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">0</span>
</button>
</div>
</div>
</header>
<!-- Mobile Menu Button (hidden on desktop) -->
<div class="md:hidden bg-white py-2 px-4 flex justify-between items-center">
<button id="mobile-menu-button" class="text-xl">
<i class="fas fa-bars"></i>
</button>
<a href="#" class="text-xl font-bold text-blue-600">VB LED</a>
<button id="mobile-cart-button" class="relative">
<i class="fas fa-shopping-cart text-xl"></i>
<span id="mobile-cart-count" class="absolute -top-2 -right-2 bg-blue-600 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">0</span>
</button>
</div>
<!-- Mobile Menu (hidden by default) -->
<div id="mobile-menu" class="hidden md:hidden bg-white shadow-lg">
<div class="px-4 py-2 space-y-3">
<a href="#" class="block py-2 font-medium border-b">Shop All Products</a>
<a href="#" class="block py-2 font-medium border-b">Support</a>
<a href="#" class="block py-2 font-medium border-b">My Account</a>
</div>
</div>
<!-- Hero Section -->
<section class="hero-section py-16 md:py-24">
<div class="hero-overlay"></div>
<div class="container mx-auto px-4 hero-content text-center">
<h1 class="text-3xl md:text-5xl font-bold mb-4 text-white">Professional-Grade Lighting Solutions</h1>
<p class="text-lg md:text-xl text-gray-200 mb-8">Premium quality lighting components designed for electricians and professional installers.</p>
<a href="#all-products" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-lg transition duration-300 inline-block">Explore Products</a>
</div>
</section>
<!-- Service Icons -->
<section class="py-12 bg-white">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="text-center p-6 rounded-lg">
<div class="text-blue-600 text-4xl mb-4">
<i class="fas fa-truck"></i>
</div>
<h3 class="text-xl font-bold mb-2">Fast Shipping</h3>
<p class="text-gray-600">Nationwide delivery within 2–3 business days</p>
</div>
<div class="text-center p-6 rounded-lg">
<div class="text-blue-600 text-4xl mb-4">
<i class="fas fa-shield-alt"></i>
</div>
<h3 class="text-xl font-bold mb-2">5-Year Warranty</h3>
<p class="text-gray-600">All products include industry-leading coverage</p>
</div>
<div class="text-center p-6 rounded-lg">
<div class="text-blue-600 text-4xl mb-4">
<i class="fas fa-tools"></i>
</div>
<h3 class="text-xl font-bold mb-2">Expert Support</h3>
<p class="text-gray-600">Our team includes experienced electricians</p>
</div>
</div>
</div>
</section>
<!-- Featured Categories -->
<section class="py-12 bg-gray-50">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold mb-12 text-center">Shop By Category</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
<!-- Pixel LEDs -->
<a href="#all-products" data-category="pixel-leds" class="category-block bg-white rounded-lg overflow-hidden shadow-md transition duration-300">
<img src="https://img.icons8.com/ios/500/light-on.png" alt="Pixel LEDs" class="w-full h-48 object-contain p-4">
<div class="p-4">
<h3 class="text-xl font-bold mb-2">Pixel LEDs</h3>
<p class="text-gray-600">High-quality LED strings and modules</p>
</div>
</a>
<!-- Controllers & Power -->
<a href="#all-products" data-category="controllers-power" class="category-block bg-white rounded-lg overflow-hidden shadow-md transition duration-300">
<img src="https://img.icons8.com/ios/500/light-on.png" alt="Controllers & Power" class="w-full h-48 object-contain p-4">
<div class="p-4">
<h3 class="text-xl font-bold mb-2">Controllers & Power</h3>
<p class="text-gray-600">Control boxes and 24V power supplies</p>
</div>
</a>
<!-- Aluminum Rails -->
<a href="#all-products" data-category="aluminum-rails" class="category-block bg-white rounded-lg overflow-hidden shadow-md transition duration-300">
<img src="https://img.icons8.com/ios/500/light-on.png" alt="Aluminum Rails" class="w-full h-48 object-contain p-4">
<div class="p-4">
<h3 class="text-xl font-bold mb-2">Aluminum Rails</h3>
<p class="text-gray-600">Track 8 and Track 4 mounting solutions</p>
</div>
</a>
<!-- Wiring & Tools -->
<a href="#all-products" data-category="wiring-tools" class="category-block bg-white rounded-lg overflow-hidden shadow-md transition duration-300">
<img src="https://img.icons8.com/ios/500/light-on.png" alt="Wiring & Tools" class="w-full h-48 object-contain p-4">
<div class="p-4">
<h3 class="text-xl font-bold mb-2">Wiring & Tools</h3>
<p class="text-gray-600">Wire spools and installation accessories</p>
</div>
</a>
</div>
<div class="text-center mt-12">
<a href="#all-products" class="inline-block bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-lg transition duration-300">View All Products</a>
</div>
</div>
</section>
<!-- Shop All Products Section -->
<section id="all-products" class="py-12 bg-white">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold mb-8 text-center">All Products</h2>
<div class="flex flex-col md:flex-row">
<!-- Filters Sidebar -->
<div class="w-full md:w-1/4 pr-0 md:pr-8 mb-8 md:mb-0">
<div class="bg-white p-4 rounded-lg shadow-sm">
<h3 class="font-bold mb-4">Filters</h3>
<div class="mb-6">
<h4 class="font-medium mb-2">Categories</h4>
<div class="space-y-2">
<label class="flex items-center">
<input type="checkbox" class="mr-2 category-filter" value="pixel-leds"> Pixel LEDs
</label>
<label class="flex items-center">
<input type="checkbox" class="mr-2 category-filter" value="controllers-power"> Controllers & Power
</label>
<label class="flex items-center">
<input type="checkbox" class="mr-2 category-filter" value="aluminum-rails"> Aluminum Rails
</label>
<label class="flex items-center">
<input type="checkbox" class="mr-2 category-filter" value="wiring-tools"> Wiring & Tools
</label>
</div>
</div>
<button id="apply-filters" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 rounded">Apply Filters</button>
</div>
</div>
<!-- Product Grid -->
<div class="w-full md:w-3/4">
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6" id="product-grid">
<!-- Product 1 -->
<div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300" data-category="pixel-leds">
<a href="#">
<img src="https://img.icons8.com/ios/500/light-on.png" alt="LED Strip" class="w-full h-48 object-contain p-4">
</a>
<div class="p-4">
<a href="#" class="text-lg font-bold mb-2 hover:text-blue-600">24V RGB LED Strip</a>
<p class="text-gray-600 text-sm mb-3">High-density 120 LEDs/m, waterproof</p>
<p class="text-xl font-bold mb-4">$29.99</p>
<div class="flex items-center justify-between">
<div class="flex items-center border rounded">
<button class="quantity-btn px-3 py-1">-</button>
<span class="quantity-display px-3">1</span>
<button class="quantity-btn px-3 py-1">+</button>
</div>
<button class="add-to-cart bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded text-sm"
data-id="1"
data-name="24V RGB LED Strip"
data-price="29.99"
data-image="https://img.icons8.com/ios/500/light-on.png">Add to Cart</button>
</div>
</div>
</div>
<!-- Product 2 -->
<div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300" data-category="pixel-leds">
<a href="#">
<img src="https://img.icons8.com/ios/500/light-on.png" alt="LED Module" class="w-full h-48 object-contain p-4">
</a>
<div class="p-4">
<a href="#" class="text-lg font-bold mb-2 hover:text-blue-600">RGB LED Module</a>
<p class="text-gray-600 text-sm mb-3">50W high-power RGB module</p>
<p class="text-xl font-bold mb-4">$39.99</p>
<div class="flex items-center justify-between">
<div class="flex items-center border rounded">
<button class="quantity-btn px-3 py-1">-</button>
<span class="quantity-display px-3">1</span>
<button class="quantity-btn px-3 py-1">+</button>
</div>
<button class="add-to-cart bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded text-sm"
data-id="2"
data-name="RGB LED Module"
data-price="39.99"
data-image="https://img.icons8.com/ios/500/light-on.png">Add to Cart</button>
</div>
</div>
</div>
<!-- Product 3 -->
<div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300" data-category="controllers-power">
<a href="#">
<img src="https://img.icons8.com/ios/500/light-on.png" alt="LED Controller" class="w-full h-48 object-contain p-4">
</a>
<div class="p-4">
<a href="#" class="text-lg font-bold mb-2 hover:text-blue-600">24V RGB Controller</a>
<p class="text-gray-600 text-sm mb-3">4-zone control, WiFi enabled</p>
<p class="text-xl font-bold mb-4">$49.99</p>
<div class="flex items-center justify-between">
<div class="flex items-center border rounded">
<button class="quantity-btn px-3 py-1">-</button>
<span class="quantity-display px-3">1</span>
<button class="quantity-btn px-3 py-1">+</button>
</div>
<button class="add-to-cart bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded text-sm"
data-id="3"
data-name="24V RGB Controller"
data-price="49.99"
data-image="https://img.icons8.com/ios/500/light-on.png">Add to Cart</button>
</div>
</div>
</div>
<!-- Product 4 -->
<div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300" data-category="controllers-power">
<a href="#">
<img src="https://img.icons8.com/ios/500/light-on.png" alt="Power Supply" class="w-full h-48 object-contain p-4">
</a>
<div class="p-4">
<a href="#" class="text-lg font-bold mb-2 hover:text-blue-600">24V 200W Power Supply</a>
<p class="text-gray-600 text-sm mb-3">Waterproof, DIN rail mount</p>
<p class="text-xl font-bold mb-4">$79.99</p>
<div class="flex items-center justify-between">
<div class="flex items-center border rounded">
<button class="quantity-btn px-3 py-1">-</button>
<span class="quantity-display px-3">1</span>
<button class="quantity-btn px-3 py-1">+</button>
</div>
<button class="add-to-cart bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded text-sm"
data-id="4"
data-name="24V 200W Power Supply"
data-price="79.99"
data-image="https://img.icons8.com/ios/500/light-on.png">Add to Cart</button>
</div>
</div>
</div>
<!-- Product 5 -->
<div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300" data-category="aluminum-rails">
<a href="#">
<img src="https://img.icons8.com/ios/500/light-on.png" alt="Aluminum Rail" class="w-full h-48 object-contain p-4">
</a>
<div class="p-4">
<a href="#" class="text-lg font-bold mb-2 hover:text-blue-600">Track 8 Aluminum Rail</a>
<p class="text-gray-600 text-sm mb-3">1m length, matte black finish</p>
<p class="text-xl font-bold mb-4">$14.99</p>
<div class="flex items-center justify-between">
<div class="flex items-center border rounded">
<button class="quantity-btn px-3 py-1">-</button>
<span class="quantity-display px-3">1</span>
<button class="quantity-btn px-3 py-1">+</button>
</div>
<button class="add-to-cart bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded text-sm"
data-id="5"
data-name="Track 8 Aluminum Rail"
data-price="14.99"
data-image="https://img.icons8.com/ios/500/light-on.png">Add to Cart</button>
</div>
</div>
</div>
<!-- Product 6 -->
<div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300" data-category="aluminum-rails">
<a href="#">
<img src="https://img.icons8.com/ios/500/light-on.png" alt="Aluminum Rail" class="w-full h-48 object-contain p-4">
</a>
<div class="p-4">
<a href="#" class="text-lg font-bold mb-2 hover:text-blue-600">Track 4 Aluminum Rail</a>
<p class="text-gray-600 text-sm mb-3">1m length, matte black finish</p>
<p class="text-xl font-bold mb-4">$12.99</p>
<div class="flex items-center justify-between">
<div class="flex items-center border rounded">
<button class="quantity-btn px-3 py-1">-</button>
<span class="quantity-display px-3">1</span>
<button class="quantity-btn px-3 py-1">+</button>
</div>
<button class="add-to-cart bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded text-sm"
data-id="6"
data-name="Track 4 Aluminum Rail"
data-price="12.99"
data-image="https://img.icons8.com/ios/500/light-on.png">Add to Cart</button>
</div>
</div>
</div>
<!-- Product 7 -->
<div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300" data-category="wiring-tools">
<a href="#">
<img src="https://img.icons8.com/ios/500/light-on.png" alt="Wire Spool" class="w-full h-48 object-contain p-4">
</a>
<div class="p-4">
<a href="#" class="text-lg font-bold mb-2 hover:text-blue-600">18AWG Wire Spool</a>
<p class="text-gray-600 text-sm mb-3">100ft roll, black/red pair</p>
<p class="text-xl font-bold mb-4">$19.99</p>
<div class="flex items-center justify-between">
<div class="flex items-center border rounded">
<button class="quantity-btn px-3 py-1">-</button>
<span class="quantity-display px-3">1</span>
<button class="quantity-btn px-3 py-1">+</button>
</div>
<button class="add-to-cart bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded text-sm"
data-id="7"
data-name="18AWG Wire Spool"
data-price="19.99"
data-image="https://img.icons8.com/ios/500/light-on.png">Add to Cart</button>
</div>
</div>
</div>
<!-- Product 8 -->
<div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300" data-category="wiring-tools">
<a href="#">
<img src="https://img.icons8.com/ios/500/light-on.png" alt="Installation Kit" class="w-full h-48 object-contain p-4">
</a>
<div class="p-4">
<a href="#" class="text-lg font-bold mb-2 hover:text-blue-600">Installation Tool Kit</a>
<p class="text-gray-600 text-sm mb-3">Includes all essential tools</p>
<p class="text-xl font-bold mb-4">$49.99</p>
<div class="flex items-center justify-between">
<div class="flex items-center border rounded">
<button class="quantity-btn px-3 py-1">-</button>
<span class="quantity-display px-3">1</span>
<button class="quantity-btn px-3 py-1">+</button>
</div>
<button class="add-to-cart bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded text-sm"
data-id="8"
data-name="Installation Tool Kit"
data-price="49.99"
data-image="https://img.icons8.com/ios/500/light-on.png">Add to Cart</button>
</div>
</div>
</div>
</div>
<!-- Pagination -->
<div class="mt-8 flex justify-center">
<nav class="flex items-center space-x-2">
<a href="#" class="px-3 py-1 rounded border">&laquo;</a>
<a href="#" class="px-3 py-1 rounded border bg-blue-600 text-white">1</a>
<a href="#" class="px-3 py-1 rounded border">2</a>
<a href="#" class="px-3 py-1 rounded border">3</a>
<a href="#" class="px-3 py-1 rounded border">&raquo;</a>
</nav>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900 text-white py-12">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<h3 class="text-xl font-bold mb-4">VB LED</h3>
<p class="text-gray-400">Professional lighting solutions for electricians and installers.</p>
</div>
<div>
<h4 class="font-bold mb-4">Quick Links</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white">Shop All Products</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Support</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">My Account</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Dealer Application</a></li>
</ul>
</div>
<div>
<h4 class="font-bold mb-4">Company</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white">About Us</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Contact</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Terms & Conditions</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a></li>
</ul>
</div>
<div>
<h4 class="font-bold mb-4">Newsletter</h4>
<p class="text-gray-400 mb-4">Subscribe for product updates and special offers.</p>
<form class="flex">
<input type="email" placeholder="Your email" class="px-3 py-2 rounded-l text-gray-900 w-full">
<button type="submit" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-r">
<i class="fas fa-paper-plane"></i>
</button>
</form>
<div class="mt-4 flex space-x-4">
<a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-instagram"></i></a>
<a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-linkedin"></i></a>
</div>
</div>
</div>
<div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
<p>&copy; 2023 VB LED. All rights reserved.</p>
</div>
</div>
</footer>
<!-- Cart Slider -->
<div id="cart-slider" class="cart-slider fixed top-0 right-0 w-full md:w-1/3 h-full bg-white shadow-xl 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"></i>
</button>
</div>
<div id="cart-items" class="space-y-4">
<!-- Cart items will be added here dynamically -->
<div 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 class="border-t border-gray-200 mt-6 pt-6">
<div class="flex justify-between mb-2">
<span class="font-medium">Subtotal</span>
<span id="cart-subtotal" class="font-bold">$0.00</span>
</div>
<button id="checkout-button" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg transition duration-300">
Checkout
</button>
</div>
</div>
</div>
<!-- Overlay for cart -->
<div id="cart-overlay" class="hidden fixed inset-0 bg-black bg-opacity-50 z-40"></div>
<script>
// Mobile menu toggle
const mobileMenuButton = document.getElementById('mobile-menu-button');
const mobileMenu = document.getElementById('mobile-menu');
mobileMenuButton.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
});
// Cart functionality
const cartButton = document.getElementById('cart-button');
const mobileCartButton = document.getElementById('mobile-cart-button');
const closeCart = document.getElementById('close-cart');
const cartSlider = document.getElementById('cart-slider');
const cartOverlay = document.getElementById('cart-overlay');
const cartCount = document.getElementById('cart-count');
const mobileCartCount = document.getElementById('mobile-cart-count');
const cartItemsContainer = document.getElementById('cart-items');
const cartSubtotal = document.getElementById('cart-subtotal');
const checkoutButton = document.getElementById('checkout-button');
const applyFiltersButton = document.getElementById('apply-filters');
let cart = [];
function toggleCart() {
cartSlider.classList.toggle('open');
cartOverlay.classList.toggle('hidden');
document.body.style.overflow = cartSlider.classList.contains('open') ? 'hidden' : '';
}
function updateCartCount() {
const totalItems = cart.reduce((total, item) => total + item.quantity, 0);
cartCount.textContent = totalItems;
mobileCartCount.textContent = totalItems;
}
function updateCartDisplay() {
if (cart.length === 0) {
cartItemsContainer.innerHTML = `
<div 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>
`;
cartSubtotal.textContent = '$0.00';
checkoutButton.disabled = true;
return;
}
let itemsHTML = '';
let subtotal = 0;
cart.forEach(item => {
const itemTotal = item.price * item.quantity;
subtotal += itemTotal;
itemsHTML += `
<div class="flex items-center justify-between py-4 border-b">
<div class="flex items-center">
<img src="${item.image}" alt="${item.name}" class="w-16 h-16 object-cover rounded">
<div class="ml-4">
<h4 class="font-medium">${item.name}</h4>
<p class="text-gray-600 text-sm">$${item.price.toFixed(2)}</p>
</div>
</div>
<div class="flex items-center">
<div class="flex items-center border rounded">
<button class="decrease-quantity px-2 py-1" data-id="${item.id}">-</button>
<span class="px-2">${item.quantity}</span>
<button class="increase-quantity px-2 py-1" data-id="${item.id}">+</button>
</div>
<button class="remove-item ml-4 text-red-500" data-id="${item.id}">
<i class="fas fa-trash"></i>
</button>
</div>
</div>
`;
});
cartItemsContainer.innerHTML = itemsHTML;
cartSubtotal.textContent = `$${subtotal.toFixed(2)}`;
checkoutButton.disabled = false;
// Add event listeners to the new buttons
document.querySelectorAll('.decrease-quantity').forEach(button => {
button.addEventListener('click', (e) => {
const id = e.target.getAttribute('data-id');
updateQuantity(id, -1);
});
});
document.querySelectorAll('.increase-quantity').forEach(button => {
button.addEventListener('click', (e) => {
const id = e.target.getAttribute('data-id');
updateQuantity(id, 1);
});
});
document.querySelectorAll('.remove-item').forEach(button => {
button.addEventListener('click', (e) => {
const id = e.target.closest('button').getAttribute('data-id');
removeItem(id);
});
});
}
function addToCart(product) {
const existingItem = cart.find(item => item.id === product.id);
if (existingItem) {
existingItem.quantity += product.quantity;
} else {
cart.push({...product});
}
updateCartCount();
updateCartDisplay();
}
function updateQuantity(id, change) {
const item = cart.find(item => item.id === id);
if (item) {
item.quantity += change;
if (item.quantity <= 0) {
cart = cart.filter(item => item.id !== id);
}
updateCartCount();
updateCartDisplay();
}
}
function removeItem(id) {
cart = cart.filter(item => item.id !== id);
updateCartCount();
updateCartDisplay();
}
// Event listeners
cartButton.addEventListener('click', toggleCart);
mobileCartButton.addEventListener('click', toggleCart);
closeCart.addEventListener('click', toggleCart);
cartOverlay.addEventListener('click', toggleCart);
// Add to cart buttons with quantity
document.querySelectorAll('.add-to-cart').forEach(button => {
button.addEventListener('click', (e) => {
const product = {
id: button.getAttribute('data-id'),
name: button.getAttribute('data-name'),
price: parseFloat(button.getAttribute('data-price')),
image: button.getAttribute('data-image'),
quantity: parseInt(button.closest('.product-card').querySelector('.quantity-display').textContent)
};
addToCart(product);
});
});
// Quantity buttons in product cards
document.querySelectorAll('.quantity-btn').forEach(button => {
button.addEventListener('click', (e) => {
const quantityElement = e.target.parentElement.querySelector('.quantity-display');
let quantity = parseInt(quantityElement.textContent);
if (e.target.textContent === '+') {
quantity++;
} else if (e.target.textContent === '-' && quantity > 1) {
quantity--;
}
quantityElement.textContent = quantity;
});
});
// Category filtering
document.querySelectorAll('[data-category]').forEach(link => {
link.addEventListener('click', (e) => {
if (link.getAttribute('href') === '#all-products') {
e.preventDefault();
const category = link.getAttribute('data-category');
// Uncheck all category filters
document.querySelectorAll('.category-filter').forEach(checkbox => {
checkbox.checked = false;
});
// Check the selected category
document.querySelector(`.category-filter[value="${category}"]`).checked = true;
// Apply filters
applyFilters();
// Scroll to products section
document.getElementById('all-products').scrollIntoView({ behavior: 'smooth' });
}
});
});
applyFiltersButton.addEventListener('click', applyFilters);
function applyFilters() {
const selectedCategories = Array.from(document.querySelectorAll('.category-filter:checked')).map(cb => cb.value);
document.querySelectorAll('.product-card').forEach(product => {
const productCategory = product.getAttribute('data-category');
if (selectedCategories.length === 0 || selectedCategories.includes(productCategory)) {
product.style.display = 'block';
} else {
product.style.display = 'none';
}
});
}
// Initialize cart
updateCartDisplay();
</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=VisionBleuLED/shop-store" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>