Crée un site e-commerce moderne pour une boutique de vêtements du nom de la marque LA BANANE PARIS . Design minimaliste avec palette de couleurs pastel (NOIR, JAUNE,). Inclus : header avec navigation sticky, hero section avec image de fond et CTA, grille de produits avec photos, prix et boutons d'ajout au panier, système de personnalisation (taille, niveau de sucre, toppings), panier latéral qui s'ouvre en slide, formulaire de commande, et footer avec horaires et réseaux sociaux. - Initial Deployment
5d83569 verified | <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>LA BANANE PARIS - Vêtements Premium</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> | |
| .hero-image { | |
| background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1489987707025-afc232f7ea0f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80'); | |
| background-size: cover; | |
| background-position: center; | |
| height: 80vh; | |
| } | |
| .cart-slide { | |
| transform: translateX(100%); | |
| transition: transform 0.3s ease-in-out; | |
| } | |
| .cart-slide.open { | |
| transform: translateX(0); | |
| } | |
| .product-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); | |
| } | |
| .customization-option { | |
| transition: all 0.2s ease; | |
| } | |
| .customization-option:hover { | |
| background-color: #fef08a; | |
| } | |
| .customization-option.selected { | |
| background-color: #facc15; | |
| color: black; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans"> | |
| <!-- Header Sticky --> | |
| <header class="sticky top-0 z-50 bg-black text-white shadow-md"> | |
| <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-tshirt text-yellow-400 text-2xl"></i> | |
| <h1 class="text-2xl font-bold">LA BANANE <span class="text-yellow-400">PARIS</span></h1> | |
| </div> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="#" class="hover:text-yellow-400 transition">Nouveautés</a> | |
| <a href="#" class="hover:text-yellow-400 transition">Homme</a> | |
| <a href="#" class="hover:text-yellow-400 transition">Femme</a> | |
| <a href="#" class="hover:text-yellow-400 transition">Collections</a> | |
| <a href="#" class="hover:text-yellow-400 transition">À propos</a> | |
| </nav> | |
| <div class="flex items-center space-x-4"> | |
| <button id="search-btn" class="hover:text-yellow-400 transition"> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| <button id="cart-btn" class="hover:text-yellow-400 transition relative"> | |
| <i class="fas fa-shopping-bag"></i> | |
| <span id="cart-count" class="absolute -top-2 -right-2 bg-yellow-400 text-black text-xs font-bold rounded-full h-5 w-5 flex items-center justify-center">0</span> | |
| </button> | |
| <button class="md:hidden" id="menu-btn"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Mobile Menu --> | |
| <div id="mobile-menu" class="hidden bg-black text-white py-4 px-4 md:hidden"> | |
| <div class="flex flex-col space-y-3"> | |
| <a href="#" class="hover:text-yellow-400 transition">Nouveautés</a> | |
| <a href="#" class="hover:text-yellow-400 transition">Homme</a> | |
| <a href="#" class="hover:text-yellow-400 transition">Femme</a> | |
| <a href="#" class="hover:text-yellow-400 transition">Collections</a> | |
| <a href="#" class="hover:text-yellow-400 transition">À propos</a> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="hero-image flex items-center justify-center text-white"> | |
| <div class="text-center px-4"> | |
| <h2 class="text-4xl md:text-6xl font-bold mb-4">COLLECTION ÉTÉ 2023</h2> | |
| <p class="text-xl md:text-2xl mb-8">Découvrez notre nouvelle collection inspirée de Paris</p> | |
| <button class="bg-yellow-400 hover:bg-yellow-500 text-black font-bold py-3 px-8 rounded-full transition transform hover:scale-105"> | |
| Découvrir | |
| </button> | |
| </div> | |
| </section> | |
| <!-- Featured Products --> | |
| <section class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12">NOS PRODUITS PHARES</h2> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8"> | |
| <!-- Product 1 --> | |
| <div class="product-card bg-gray-50 rounded-lg overflow-hidden shadow-md transition"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1529374255404-311a2a4f1fd9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2069&q=80" alt="T-shirt LA BANANE" class="w-full h-64 object-cover"> | |
| <div class="absolute top-2 right-2 bg-yellow-400 text-black text-xs font-bold px-2 py-1 rounded"> | |
| NOUVEAU | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg mb-1">T-shirt Signature</h3> | |
| <p class="text-gray-600 text-sm mb-3">Collection Paris</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-lg">49€</span> | |
| <button class="add-to-cart bg-black text-white hover:bg-yellow-400 hover:text-black px-3 py-1 rounded-full text-sm transition" data-product="T-shirt Signature" data-price="49"> | |
| Ajouter | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 2 --> | |
| <div class="product-card bg-gray-50 rounded-lg overflow-hidden shadow-md transition"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1591047139829-d91aecb6caea?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1936&q=80" alt="Pull LA BANANE" class="w-full h-64 object-cover"> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg mb-1">Pull Oversize</h3> | |
| <p class="text-gray-600 text-sm mb-3">Collection Banane</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-lg">89€</span> | |
| <button class="add-to-cart bg-black text-white hover:bg-yellow-400 hover:text-black px-3 py-1 rounded-full text-sm transition" data-product="Pull Oversize" data-price="89"> | |
| Ajouter | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 3 --> | |
| <div class="product-card bg-gray-50 rounded-lg overflow-hidden shadow-md transition"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1527719327859-c6ce80353573?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1964&q=80" alt="Veste LA BANANE" class="w-full h-64 object-cover"> | |
| <div class="absolute top-2 right-2 bg-yellow-400 text-black text-xs font-bold px-2 py-1 rounded"> | |
| BEST-SELLER | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg mb-1">Veste en Jean</h3> | |
| <p class="text-gray-600 text-sm mb-3">Collection Urban</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-lg">129€</span> | |
| <button class="add-to-cart bg-black text-white hover:bg-yellow-400 hover:text-black px-3 py-1 rounded-full text-sm transition" data-product="Veste en Jean" data-price="129"> | |
| Ajouter | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 4 --> | |
| <div class="product-card bg-gray-50 rounded-lg overflow-hidden shadow-md transition"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1594633312681-425c7b97ccd1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1887&q=80" alt="Pantalon LA BANANE" class="w-full h-64 object-cover"> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg mb-1">Pantalon Cargo</h3> | |
| <p class="text-gray-600 text-sm mb-3">Collection Street</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-lg">79€</span> | |
| <button class="add-to-cart bg-black text-white hover:bg-yellow-400 hover:text-black px-3 py-1 rounded-full text-sm transition" data-product="Pantalon Cargo" data-price="79"> | |
| Ajouter | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <button class="border-2 border-black hover:bg-black hover:text-white px-6 py-2 rounded-full font-bold transition"> | |
| Voir toute la collection | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Customization Section --> | |
| <section class="py-16 bg-gray-100"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12">PERSONNALISEZ VOTRE ARTICLE</h2> | |
| <div class="max-w-4xl mx-auto bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="md:flex"> | |
| <div class="md:w-1/2"> | |
| <img src="https://images.unsplash.com/photo-1529374255404-311a2a4f1fd9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2069&q=80" alt="T-shirt personnalisable" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="p-8 md:w-1/2"> | |
| <h3 class="font-bold text-2xl mb-4">T-shirt Personnalisable</h3> | |
| <p class="text-gray-600 mb-6">Créez votre propre design avec nos options de personnalisation exclusives.</p> | |
| <div class="mb-6"> | |
| <h4 class="font-bold mb-3">Tailles</h4> | |
| <div class="flex flex-wrap gap-2"> | |
| <button class="customization-option border border-gray-300 px-4 py-2 rounded-full text-sm" data-option="size" data-value="XS">XS</button> | |
| <button class="customization-option border border-gray-300 px-4 py-2 rounded-full text-sm" data-option="size" data-value="S">S</button> | |
| <button class="customization-option border border-gray-300 px-4 py-2 rounded-full text-sm selected" data-option="size" data-value="M">M</button> | |
| <button class="customization-option border border-gray-300 px-4 py-2 rounded-full text-sm" data-option="size" data-value="L">L</button> | |
| <button class="customization-option border border-gray-300 px-4 py-2 rounded-full text-sm" data-option="size" data-value="XL">XL</button> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <h4 class="font-bold mb-3">Couleurs</h4> | |
| <div class="flex flex-wrap gap-2"> | |
| <button class="customization-option border border-gray-300 px-4 py-2 rounded-full text-sm" data-option="color" data-value="Noir">Noir</button> | |
| <button class="customization-option border border-gray-300 px-4 py-2 rounded-full text-sm selected" data-option="color" data-value="Jaune">Jaune</button> | |
| <button class="customization-option border border-gray-300 px-4 py-2 rounded-full text-sm" data-option="color" data-value="Blanc">Blanc</button> | |
| <button class="customization-option border border-gray-300 px-4 py-2 rounded-full text-sm" data-option="color" data-value="Gris">Gris</button> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <h4 class="font-bold mb-3">Personnalisation</h4> | |
| <div class="flex flex-wrap gap-2"> | |
| <button class="customization-option border border-gray-300 px-4 py-2 rounded-full text-sm" data-option="design" data-value="Logo">Logo</button> | |
| <button class="customization-option border border-gray-300 px-4 py-2 rounded-full text-sm selected" data-option="design" data-value="Texte">Texte</button> | |
| <button class="customization-option border border-gray-300 px-4 py-2 rounded-full text-sm" data-option="design" data-value="Dessin">Dessin</button> | |
| </div> | |
| <input type="text" placeholder="Entrez votre texte" class="w-full mt-3 px-4 py-2 border border-gray-300 rounded-lg"> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-2xl">59€</span> | |
| <button class="add-to-cart bg-black text-white hover:bg-yellow-400 hover:text-black px-6 py-2 rounded-full font-bold transition" data-product="T-shirt Personnalisé" data-price="59"> | |
| Ajouter au panier | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Shopping Cart Sidebar --> | |
| <div id="cart-sidebar" class="cart-slide fixed top-0 right-0 h-full w-full md:w-1/3 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">VOTRE PANIER</h3> | |
| <button id="close-cart" class="text-gray-500 hover:text-black"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div id="cart-items" class="mb-6"> | |
| <!-- Cart items will be added here dynamically --> | |
| <div class="text-center py-8 text-gray-500"> | |
| <i class="fas fa-shopping-bag text-4xl mb-2"></i> | |
| <p>Votre panier est vide</p> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-200 pt-4 mb-4"> | |
| <div class="flex justify-between mb-2"> | |
| <span>Sous-total</span> | |
| <span id="cart-subtotal">0€</span> | |
| </div> | |
| <div class="flex justify-between mb-2"> | |
| <span>Livraison</span> | |
| <span>Calculé à l'étape suivante</span> | |
| </div> | |
| <div class="flex justify-between font-bold text-lg"> | |
| <span>Total</span> | |
| <span id="cart-total">0€</span> | |
| </div> | |
| </div> | |
| <button id="checkout-btn" class="w-full bg-yellow-400 hover:bg-yellow-500 text-black font-bold py-3 rounded-full transition"> | |
| Passer la commande | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Checkout Form (hidden by default) --> | |
| <div id="checkout-form" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden items-center justify-center"> | |
| <div class="bg-white rounded-xl p-8 max-w-2xl w-full mx-4 max-h-screen overflow-y-auto"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h3 class="text-2xl font-bold">VOTRE COMMANDE</h3> | |
| <button id="close-checkout" class="text-gray-500 hover:text-black"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <form id="order-form"> | |
| <div class="mb-6"> | |
| <h4 class="font-bold text-lg mb-4">Informations personnelles</h4> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div> | |
| <label for="first-name" class="block text-sm font-medium mb-1">Prénom</label> | |
| <input type="text" id="first-name" class="w-full px-4 py-2 border border-gray-300 rounded-lg" required> | |
| </div> | |
| <div> | |
| <label for="last-name" class="block text-sm font-medium mb-1">Nom</label> | |
| <input type="text" id="last-name" class="w-full px-4 py-2 border border-gray-300 rounded-lg" required> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-sm font-medium mb-1">Email</label> | |
| <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg" required> | |
| </div> | |
| <div> | |
| <label for="phone" class="block text-sm font-medium mb-1">Téléphone</label> | |
| <input type="tel" id="phone" class="w-full px-4 py-2 border border-gray-300 rounded-lg" required> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <h4 class="font-bold text-lg mb-4">Adresse de livraison</h4> | |
| <div class="grid grid-cols-1 gap-4"> | |
| <div> | |
| <label for="address" class="block text-sm font-medium mb-1">Adresse</label> | |
| <input type="text" id="address" class="w-full px-4 py-2 border border-gray-300 rounded-lg" required> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <div> | |
| <label for="postal-code" class="block text-sm font-medium mb-1">Code postal</label> | |
| <input type="text" id="postal-code" class="w-full px-4 py-2 border border-gray-300 rounded-lg" required> | |
| </div> | |
| <div> | |
| <label for="city" class="block text-sm font-medium mb-1">Ville</label> | |
| <input type="text" id="city" class="w-full px-4 py-2 border border-gray-300 rounded-lg" required> | |
| </div> | |
| <div> | |
| <label for="country" class="block text-sm font-medium mb-1">Pays</label> | |
| <select id="country" class="w-full px-4 py-2 border border-gray-300 rounded-lg" required> | |
| <option value="France">France</option> | |
| <option value="Belgique">Belgique</option> | |
| <option value="Suisse">Suisse</option> | |
| <option value="Luxembourg">Luxembourg</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <h4 class="font-bold text-lg mb-4">Méthode de paiement</h4> | |
| <div class="space-y-3"> | |
| <div class="flex items-center"> | |
| <input type="radio" id="credit-card" name="payment" value="credit-card" class="mr-2" checked> | |
| <label for="credit-card">Carte de crédit</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="radio" id="paypal" name="payment" value="paypal" class="mr-2"> | |
| <label for="paypal">PayPal</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="radio" id="bank-transfer" name="payment" value="bank-transfer" class="mr-2"> | |
| <label for="bank-transfer">Virement bancaire</label> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-200 pt-4 mb-6"> | |
| <h4 class="font-bold text-lg mb-4">Récapitulatif de la commande</h4> | |
| <div id="checkout-items" class="mb-4"> | |
| <!-- Items will be added here --> | |
| </div> | |
| <div class="flex justify-between font-bold text-lg"> | |
| <span>Total</span> | |
| <span id="checkout-total">0€</span> | |
| </div> | |
| </div> | |
| <button type="submit" class="w-full bg-yellow-400 hover:bg-yellow-500 text-black font-bold py-3 rounded-full transition"> | |
| Payer maintenant | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-black text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h4 class="text-xl font-bold mb-4 flex items-center"> | |
| <i class="fas fa-tshirt text-yellow-400 mr-2"></i> | |
| LA BANANE <span class="text-yellow-400">PARIS</span> | |
| </h4> | |
| <p class="text-gray-400">Vêtements premium inspirés de l'élégance parisienne et du streetwear moderne.</p> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Boutique</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-yellow-400 transition">Nouveautés</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-yellow-400 transition">Homme</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-yellow-400 transition">Femme</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-yellow-400 transition">Collections</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Informations</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-yellow-400 transition">À propos</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-yellow-400 transition">Contact</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-yellow-400 transition">Livraison</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-yellow-400 transition">Retours</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Contact</h4> | |
| <div class="space-y-3"> | |
| <div class="flex items-start"> | |
| <i class="fas fa-map-marker-alt text-yellow-400 mt-1 mr-2"></i> | |
| <span class="text-gray-400">15 Rue de la Banane, 75001 Paris</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-phone text-yellow-400 mr-2"></i> | |
| <span class="text-gray-400">+33 1 23 45 67 89</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-envelope text-yellow-400 mr-2"></i> | |
| <span class="text-gray-400">contact@labananeparis.com</span> | |
| </div> | |
| </div> | |
| <h4 class="font-bold mt-6 mb-3">Horaires</h4> | |
| <p class="text-gray-400">Lundi - Samedi: 10h - 20h</p> | |
| <p class="text-gray-400">Dimanche: 11h - 18h</p> | |
| <div class="flex space-x-4 mt-4"> | |
| <a href="#" class="text-gray-400 hover:text-yellow-400 transition"><i class="fab fa-instagram"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-yellow-400 transition"><i class="fab fa-facebook"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-yellow-400 transition"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-yellow-400 transition"><i class="fab fa-pinterest"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400"> | |
| <p>© 2023 LA BANANE PARIS. Tous droits réservés.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| const menuBtn = document.getElementById('menu-btn'); | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| menuBtn.addEventListener('click', () => { | |
| mobileMenu.classList.toggle('hidden'); | |
| }); | |
| // Cart functionality | |
| const cartBtn = document.getElementById('cart-btn'); | |
| const closeCartBtn = document.getElementById('close-cart'); | |
| const cartSidebar = document.getElementById('cart-sidebar'); | |
| const addToCartBtns = document.querySelectorAll('.add-to-cart'); | |
| const cartItemsContainer = document.getElementById('cart-items'); | |
| const cartCount = document.getElementById('cart-count'); | |
| const cartSubtotal = document.getElementById('cart-subtotal'); | |
| const cartTotal = document.getElementById('cart-total'); | |
| let cart = []; | |
| // Open/close cart | |
| cartBtn.addEventListener('click', () => { | |
| cartSidebar.classList.add('open'); | |
| document.body.style.overflow = 'hidden'; | |
| }); | |
| closeCartBtn.addEventListener('click', () => { | |
| cartSidebar.classList.remove('open'); | |
| document.body.style.overflow = 'auto'; | |
| }); | |
| // Add to cart | |
| addToCartBtns.forEach(btn => { | |
| btn.addEventListener('click', () => { | |
| const product = btn.getAttribute('data-product'); | |
| const price = parseFloat(btn.getAttribute('data-price')); | |
| // Check if product already in cart | |
| const existingItem = cart.find(item => item.product === product); | |
| if (existingItem) { | |
| existingItem.quantity += 1; | |
| } else { | |
| cart.push({ | |
| product, | |
| price, | |
| quantity: 1 | |
| }); | |
| } | |
| updateCart(); | |
| // Show cart | |
| cartSidebar.classList.add('open'); | |
| document.body.style.overflow = 'hidden'; | |
| }); | |
| }); | |
| // Update cart UI | |
| function updateCart() { | |
| // Update count | |
| const totalItems = cart.reduce((sum, item) => sum + item.quantity, 0); | |
| cartCount.textContent = totalItems; | |
| // Update items list | |
| if (cart.length === 0) { | |
| cartItemsContainer.innerHTML = ` | |
| <div class="text-center py-8 text-gray-500"> | |
| <i class="fas fa-shopping-bag text-4xl mb-2"></i> | |
| <p>Votre panier est vide</p> | |
| </div> | |
| `; | |
| } else { | |
| let itemsHTML = ''; | |
| let subtotal = 0; | |
| cart.forEach((item, index) => { | |
| const itemTotal = item.price * item.quantity; | |
| subtotal += itemTotal; | |
| itemsHTML += ` | |
| <div class="flex justify-between items-center py-4 border-b border-gray-200"> | |
| <div> | |
| <h4 class="font-medium">${item.product}</h4> | |
| <p class="text-sm text-gray-500">${item.price}€ x ${item.quantity}</p> | |
| </div> | |
| <div class="flex items-center"> | |
| <span class="font-medium mr-4">${itemTotal.toFixed(2)}€</span> | |
| <button class="remove-item text-gray-400 hover:text-black" data-index="${index}"> | |
| <i class="fas fa-trash"></i> | |
| </button> | |
| </div> | |
| </div> | |
| `; | |
| }); | |
| cartItemsContainer.innerHTML = itemsHTML; | |
| // Add event listeners to remove buttons | |
| document.querySelectorAll('.remove-item').forEach(btn => { | |
| btn.addEventListener('click', (e) => { | |
| const index = parseInt(e.target.closest('button').getAttribute('data-index')); | |
| cart.splice(index, 1); | |
| updateCart(); | |
| }); | |
| }); | |
| // Update totals | |
| cartSubtotal.textContent = `${subtotal.toFixed(2)}€`; | |
| cartTotal.textContent = `${subtotal.toFixed(2)}€`; | |
| } | |
| } | |
| // Customization options | |
| const customizationOptions = document.querySelectorAll('.customization-option'); | |
| customizationOptions.forEach(option => { | |
| option.addEventListener('click', (e) => { | |
| const optionType = e.target.getAttribute('data-option'); | |
| // Remove selected class from all options of this type | |
| document.querySelectorAll(`[data-option="${optionType}"]`).forEach(opt => { | |
| opt.classList.remove('selected'); | |
| }); | |
| // Add selected class to clicked option | |
| e.target.classList.add('selected'); | |
| }); | |
| }); | |
| // Checkout functionality | |
| const checkoutBtn = document.getElementById('checkout-btn'); | |
| const closeCheckoutBtn = document.getElementById('close-checkout'); | |
| const checkoutForm = document.getElementById('checkout-form'); | |
| const checkoutItemsContainer = document.getElementById('checkout-items'); | |
| const checkoutTotal = document.getElementById('checkout-total'); | |
| checkoutBtn.addEventListener('click', () => { | |
| if (cart.length === 0) return; | |
| // Update checkout items | |
| let itemsHTML = ''; | |
| let total = 0; | |
| cart.forEach(item => { | |
| const itemTotal = item.price * item.quantity; | |
| total += itemTotal; | |
| itemsHTML += ` | |
| <div class="flex justify-between items-center py-2"> | |
| <div> | |
| <h4 class="font-medium">${item.product}</h4> | |
| <p class="text-sm text-gray-500">${item.quantity} x ${item.price}€</p> | |
| </div> | |
| <span class="font-medium">${itemTotal.toFixed(2)}€</span> | |
| </div> | |
| `; | |
| }); | |
| checkoutItemsContainer.innerHTML = itemsHTML; | |
| checkoutTotal.textContent = `${total.toFixed(2)}€`; | |
| // Show checkout form | |
| checkoutForm.classList.remove('hidden'); | |
| cartSidebar.classList.remove('open'); | |
| document.body.style.overflow = 'hidden'; | |
| }); | |
| closeCheckoutBtn.addEventListener('click', () => { | |
| checkoutForm.classList.add('hidden'); | |
| document.body.style.overflow = 'auto'; | |
| }); | |
| // Form submission | |
| const orderForm = document.getElementById('order-form'); | |
| orderForm.addEventListener('submit', (e) => { | |
| e.preventDefault(); | |
| // Here you would typically send the order to your backend | |
| alert('Merci pour votre commande ! Un email de confirmation vous a été envoyé.'); | |
| // Reset cart | |
| cart = []; | |
| updateCart(); | |
| // Hide forms | |
| checkoutForm.classList.add('hidden'); | |
| cartSidebar.classList.remove('open'); | |
| document.body.style.overflow = 'auto'; | |
| // Reset form | |
| orderForm.reset(); | |
| }); | |
| </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=Hamidoudp/test2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |