|
|
<!DOCTYPE html> |
|
|
<html lang="fr"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Mode Élégance - Boutique en ligne</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> |
|
|
|
|
|
@keyframes bounce { |
|
|
0%, 20%, 50%, 80%, 100% {transform: translateY(0);} |
|
|
40% {transform: translateY(-10px);} |
|
|
60% {transform: translateY(-5px);} |
|
|
} |
|
|
.bounce { |
|
|
animation: bounce 1s; |
|
|
} |
|
|
|
|
|
|
|
|
.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; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 font-sans"> |
|
|
|
|
|
<nav class="bg-white shadow-lg sticky top-0 z-50"> |
|
|
<div class="max-w-7xl mx-auto px-4"> |
|
|
<div class="flex justify-between items-center py-4"> |
|
|
|
|
|
<div class="flex items-center space-x-4"> |
|
|
<span class="text-2xl font-bold text-indigo-600">Mode Élégance</span> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="hidden md:flex items-center space-x-8"> |
|
|
<a href="#" class="text-gray-800 hover:text-indigo-600 font-medium">Accueil</a> |
|
|
<a href="#" class="text-gray-800 hover:text-indigo-600 font-medium">Femmes</a> |
|
|
<a href="#" class="text-gray-800 hover:text-indigo-600 font-medium">Hommes</a> |
|
|
<a href="#" class="text-gray-800 hover:text-indigo-600 font-medium">Enfants</a> |
|
|
<a href="#" class="text-gray-800 hover:text-indigo-600 font-medium">Nouveautés</a> |
|
|
<a href="#" class="text-gray-800 hover:text-indigo-600 font-medium">Contact</a> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex items-center space-x-4"> |
|
|
<button class="p-2 text-gray-600 hover:text-indigo-600"> |
|
|
<i class="fas fa-search text-lg"></i> |
|
|
</button> |
|
|
<button id="cart-btn" class="p-2 text-gray-600 hover:text-indigo-600 relative"> |
|
|
<i class="fas fa-shopping-cart text-lg"></i> |
|
|
<span id="cart-count" class="absolute -top-1 -right-1 bg-indigo-600 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">0</span> |
|
|
</button> |
|
|
|
|
|
|
|
|
<button id="mobile-menu-button" class="md:hidden p-2 text-gray-600 hover:text-indigo-600"> |
|
|
<i class="fas fa-bars text-xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="mobile-menu" class="md:hidden hidden pb-4 px-2"> |
|
|
<a href="#" class="block py-2 px-4 text-gray-800 hover:bg-gray-100 rounded">Accueil</a> |
|
|
<a href="#" class="block py-2 px-4 text-gray-800 hover:bg-gray-100 rounded">Femmes</a> |
|
|
<a href="#" class="block py-2 px-4 text-gray-800 hover:bg-gray-100 rounded">Hommes</a> |
|
|
<a href="#" class="block py-2 px-4 text-gray-800 hover:bg-gray-100 rounded">Enfants</a> |
|
|
<a href="#" class="block py-2 px-4 text-gray-800 hover:bg-gray-100 rounded">Nouveautés</a> |
|
|
<a href="#" class="block py-2 px-4 text-gray-800 hover:bg-gray-100 rounded">Contact</a> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<div id="cart-sidebar" class="fixed top-0 right-0 h-full w-full md:w-96 bg-white shadow-xl z-50 transform translate-x-full transition-transform duration-300 ease-in-out overflow-y-auto"> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h2 class="text-xl font-bold">Votre Panier</h2> |
|
|
<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"> |
|
|
|
|
|
<p id="empty-cart-message" class="text-gray-500 text-center py-8">Votre panier est vide</p> |
|
|
</div> |
|
|
|
|
|
<div class="border-t border-gray-200 mt-6 pt-6"> |
|
|
<div class="flex justify-between mb-2"> |
|
|
<span class="font-medium">Sous-total:</span> |
|
|
<span id="cart-subtotal" class="font-bold">€0.00</span> |
|
|
</div> |
|
|
<button class="w-full bg-indigo-600 text-white py-3 rounded-lg hover:bg-indigo-700 transition duration-300"> |
|
|
Passer la commande |
|
|
</button> |
|
|
<button class="w-full mt-2 border border-gray-300 text-gray-700 py-3 rounded-lg hover:bg-gray-50 transition duration-300"> |
|
|
Continuer vos achats |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="cart-overlay" class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden"></div> |
|
|
|
|
|
|
|
|
<div class="relative bg-gradient-to-r from-indigo-500 to-purple-600 text-white py-20"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="md:w-1/2"> |
|
|
<h1 class="text-4xl md:text-5xl font-bold mb-4">Collection Printemps-Été 2023</h1> |
|
|
<p class="text-xl mb-8">Découvrez nos nouvelles tendances pour une saison ensoleillée. Des pièces uniques pour chaque occasion.</p> |
|
|
<button class="bg-white text-indigo-600 px-6 py-3 rounded-lg font-medium hover:bg-gray-100 transition duration-300"> |
|
|
Acheter maintenant |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-100 py-8"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<h2 class="text-2xl font-bold mb-6 text-center">Promotions du moment</h2> |
|
|
<div class="relative overflow-hidden"> |
|
|
<div id="promo-slider" class="flex transition-transform duration-300 ease-in-out"> |
|
|
|
|
|
</div> |
|
|
<button id="prev-slide" class="absolute left-2 top-1/2 -translate-y-1/2 bg-white p-2 rounded-full shadow-md hover:bg-gray-100"> |
|
|
<i class="fas fa-chevron-left text-gray-800"></i> |
|
|
</button> |
|
|
<button id="next-slide" class="absolute right-2 top-1/2 -translate-y-1/2 bg-white p-2 rounded-full shadow-md hover:bg-gray-100"> |
|
|
<i class="fas fa-chevron-right text-gray-800"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="py-12"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<h2 class="text-2xl font-bold mb-8 text-center">Nos Catégories</h2> |
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6"> |
|
|
<div class="relative rounded-lg overflow-hidden h-64 group"> |
|
|
<img src="https://images.unsplash.com/photo-1525507119028-ed4c629a60a3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Femmes" class="w-full h-full object-cover"> |
|
|
<div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center"> |
|
|
<div class="text-center"> |
|
|
<h3 class="text-white text-2xl font-bold mb-2">Femmes</h3> |
|
|
<button class="px-4 py-2 bg-white text-gray-800 rounded-lg font-medium opacity-0 group-hover:opacity-100 transition duration-300"> |
|
|
Voir la collection |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="relative rounded-lg overflow-hidden h-64 group"> |
|
|
<img src="https://images.unsplash.com/photo-1543076447-215ad9ba6923?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Hommes" class="w-full h-full object-cover"> |
|
|
<div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center"> |
|
|
<div class="text-center"> |
|
|
<h3 class="text-white text-2xl font-bold mb-2">Hommes</h3> |
|
|
<button class="px-4 py-2 bg-white text-gray-800 rounded-lg font-medium opacity-0 group-hover:opacity-100 transition duration-300"> |
|
|
Voir la collection |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="relative rounded-lg overflow-hidden h-64 group"> |
|
|
<img src="https://images.unsplash.com/photo-1600185365483-26c7a9e035e7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Enfants" class="w-full h-full object-cover"> |
|
|
<div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center"> |
|
|
<div class="text-center"> |
|
|
<h3 class="text-white text-2xl font-bold mb-2">Enfants</h3> |
|
|
<button class="px-4 py-2 bg-white text-gray-800 rounded-lg font-medium opacity-0 group-hover:opacity-100 transition duration-300"> |
|
|
Voir la collection |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="relative rounded-lg overflow-hidden h-64 group"> |
|
|
<img src="https://images.unsplash.com/photo-1552374196-c4e7ffc6e126?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Accessoires" class="w-full h-full object-cover"> |
|
|
<div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center"> |
|
|
<div class="text-center"> |
|
|
<h3 class="text-white text-2xl font-bold mb-2">Accessoires</h3> |
|
|
<button class="px-4 py-2 bg-white text-gray-800 rounded-lg font-medium opacity-0 group-hover:opacity-100 transition duration-300"> |
|
|
Voir la collection |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="py-12 bg-gray-50"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<h2 class="text-2xl font-bold mb-8 text-center">Nos Produits Populaires</h2> |
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="py-12 bg-white"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
|
<div class="text-center p-6 rounded-lg hover:shadow-md transition duration-300"> |
|
|
<div class="bg-indigo-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-4"> |
|
|
<i class="fas fa-truck text-indigo-600 text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-bold mb-2">Livraison rapide</h3> |
|
|
<p class="text-gray-600">Livraison express en 24-48h sur toute la France métropolitaine.</p> |
|
|
</div> |
|
|
<div class="text-center p-6 rounded-lg hover:shadow-md transition duration-300"> |
|
|
<div class="bg-indigo-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-4"> |
|
|
<i class="fas fa-exchange-alt text-indigo-600 text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-bold mb-2">Retours faciles</h3> |
|
|
<p class="text-gray-600">Retours gratuits sous 30 jours pour un achat en toute confiance.</p> |
|
|
</div> |
|
|
<div class="text-center p-6 rounded-lg hover:shadow-md transition duration-300"> |
|
|
<div class="bg-indigo-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-4"> |
|
|
<i class="fas fa-lock text-indigo-600 text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-bold mb-2">Paiement sécurisé</h3> |
|
|
<p class="text-gray-600">Paiement 100% sécurisé avec cryptage SSL pour vos transactions.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="py-16 bg-indigo-600 text-white"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> |
|
|
<h2 class="text-2xl font-bold mb-4">Abonnez-vous à notre newsletter</h2> |
|
|
<p class="mb-8 max-w-2xl mx-auto">Recevez en exclusivité nos offres spéciales, nouveautés et conseils mode directement dans votre boîte mail.</p> |
|
|
<div class="max-w-md mx-auto flex"> |
|
|
<input type="email" placeholder="Votre email" class="flex-grow px-4 py-3 rounded-l-lg focus:outline-none text-gray-800"> |
|
|
<button class="bg-indigo-800 px-6 py-3 rounded-r-lg font-medium hover:bg-indigo-900 transition duration-300"> |
|
|
S'abonner |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-900 text-white pt-12 pb-6"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8"> |
|
|
<div> |
|
|
<h3 class="text-lg font-bold mb-4">Mode Élégance</h3> |
|
|
<p class="text-gray-400">Notre mission est de vous offrir des vêtements de qualité à des prix abordables, tout en promouvant une mode responsable.</p> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-bold mb-4">Liens rapides</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Accueil</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Produits</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">À propos</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Contact</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-bold mb-4">Catégories</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Femmes</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Hommes</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Enfants</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Accessoires</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Nouveautés</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-bold mb-4">Contact</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li class="flex items-center text-gray-400"><i class="fas fa-map-marker-alt mr-2"></i> 123 Rue de la Mode, Paris</li> |
|
|
<li class="flex items-center text-gray-400"><i class="fas fa-phone mr-2"></i> +33 1 23 45 67 89</li> |
|
|
<li class="flex items-center text-gray-400"><i class="fas fa-envelope mr-2"></i> [email protected]</li> |
|
|
</ul> |
|
|
<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"></i></a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border-t border-gray-800 pt-6 flex flex-col md:flex-row justify-between items-center"> |
|
|
<p class="text-gray-400 text-sm mb-4 md:mb-0">© 2023 Mode Élégance. Tous droits réservés.</p> |
|
|
<div class="flex space-x-6"> |
|
|
<a href="#" class="text-gray-400 hover:text-white text-sm">Mentions légales</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white text-sm">Politique de confidentialité</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white text-sm">Conditions générales</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
const products = [ |
|
|
{ |
|
|
id: 1, |
|
|
name: "Robe d'été fleurie", |
|
|
price: 59.99, |
|
|
oldPrice: 79.99, |
|
|
image: "https://images.unsplash.com/photo-1551232864-3f0890e580d9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80", |
|
|
category: "femmes", |
|
|
isNew: true, |
|
|
colors: ["rose", "bleu", "vert"] |
|
|
}, |
|
|
{ |
|
|
id: 2, |
|
|
name: "Jeans slim délavé", |
|
|
price: 49.99, |
|
|
image: "https://images.unsplash.com/photo-1542272604-787c3835535d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1026&q=80", |
|
|
category: "hommes", |
|
|
isNew: false, |
|
|
colors: ["bleu", "noir"] |
|
|
}, |
|
|
{ |
|
|
id: 3, |
|
|
name: "Pull en cachemire", |
|
|
price: 89.99, |
|
|
oldPrice: 109.99, |
|
|
image: "https://images.unsplash.com/photo-1527719327859-c6ce80353573?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=684&q=80", |
|
|
category: "femmes", |
|
|
isNew: false, |
|
|
colors: ["beige", "gris", "bleu marine"] |
|
|
}, |
|
|
{ |
|
|
id: 4, |
|
|
name: "Baskets urbaines", |
|
|
price: 69.99, |
|
|
image: "https://images.unsplash.com/photo-1600269452121-4f2416e55c28?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=765&q=80", |
|
|
category: "unisexe", |
|
|
isNew: true, |
|
|
colors: ["blanc", "noir"] |
|
|
}, |
|
|
{ |
|
|
id: 5, |
|
|
name: "Chemise en lin", |
|
|
price: 45.99, |
|
|
oldPrice: 59.99, |
|
|
image: "https://images.unsplash.com/photo-1598033129183-c4f50c736f10?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1025&q=80", |
|
|
category: "hommes", |
|
|
isNew: false, |
|
|
colors: ["blanc", "bleu clair"] |
|
|
}, |
|
|
{ |
|
|
id: 6, |
|
|
name: "Jupe plissée", |
|
|
price: 39.99, |
|
|
image: "https://images.unsplash.com/photo-1551232864-3f0890e580d9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80", |
|
|
category: "femmes", |
|
|
isNew: true, |
|
|
colors: ["noir", "rouge", "bleu marine"] |
|
|
}, |
|
|
{ |
|
|
id: 7, |
|
|
name: "Veste en cuir", |
|
|
price: 129.99, |
|
|
oldPrice: 159.99, |
|
|
image: "https://images.unsplash.com/photo-1551232864-3f0890e580d9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80", |
|
|
category: "femmes", |
|
|
isNew: false, |
|
|
colors: ["noir", "marron"] |
|
|
}, |
|
|
{ |
|
|
id: 8, |
|
|
name: "Chaussures élégantes", |
|
|
price: 79.99, |
|
|
image: "https://images.unsplash.com/photo-1560769629-975ec94e6a86?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=764&q=80", |
|
|
category: "hommes", |
|
|
isNew: true, |
|
|
colors: ["noir", "marron"] |
|
|
} |
|
|
]; |
|
|
|
|
|
|
|
|
const promotions = [ |
|
|
{ |
|
|
id: 1, |
|
|
title: "Soldes d'été", |
|
|
subtitle: "Jusqu'à -50% sur une sélection", |
|
|
image: "https://images.unsplash.com/photo-1469334031218-e382a71b716b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80", |
|
|
cta: "Voir les offres" |
|
|
}, |
|
|
{ |
|
|
id: 2, |
|
|
title: "Nouvelle collection", |
|
|
subtitle: "Découvrez nos dernières tendances", |
|
|
image: "https://images.unsplash.com/photo-1483985988355-763728e1935b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80", |
|
|
cta: "Découvrir" |
|
|
}, |
|
|
{ |
|
|
id: 3, |
|
|
title: "Livraison offerte", |
|
|
subtitle: "Sur toutes les commandes dès 50€", |
|
|
image: "https://images.unsplash.com/photo-1607082348824-0a96f2a4b9da?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80", |
|
|
cta: "En savoir plus" |
|
|
} |
|
|
]; |
|
|
|
|
|
|
|
|
let cart = []; |
|
|
|
|
|
|
|
|
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 cartCount = document.getElementById('cart-count'); |
|
|
const cartSubtotal = document.getElementById('cart-subtotal'); |
|
|
const emptyCartMessage = document.getElementById('empty-cart-message'); |
|
|
const mobileMenuButton = document.getElementById('mobile-menu-button'); |
|
|
const mobileMenu = document.getElementById('mobile-menu'); |
|
|
const promoSlider = document.getElementById('promo-slider'); |
|
|
const prevSlideBtn = document.getElementById('prev-slide'); |
|
|
const nextSlideBtn = document.getElementById('next-slide'); |
|
|
const productsContainer = document.querySelector('.grid.grid-cols-1.sm\\:grid-cols-2.lg\\:grid-cols-4.gap-8'); |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', () => { |
|
|
renderProducts(); |
|
|
renderPromotions(); |
|
|
updateCartUI(); |
|
|
}); |
|
|
|
|
|
|
|
|
function renderProducts() { |
|
|
productsContainer.innerHTML = ''; |
|
|
|
|
|
products.forEach(product => { |
|
|
const productCard = document.createElement('div'); |
|
|
productCard.className = 'product-card bg-white rounded-lg overflow-hidden shadow-md'; |
|
|
|
|
|
let badge = ''; |
|
|
if (product.isNew) { |
|
|
badge = '<span class="absolute top-2 right-2 bg-indigo-600 text-white text-xs px-2 py-1 rounded">Nouveau</span>'; |
|
|
} else if (product.oldPrice) { |
|
|
const discount = Math.round((1 - product.price / product.oldPrice) * 100); |
|
|
badge = `<span class="absolute top-2 right-2 bg-red-500 text-white text-xs px-2 py-1 rounded">-${discount}%</span>`; |
|
|
} |
|
|
|
|
|
productCard.innerHTML = ` |
|
|
<div class="relative"> |
|
|
<img src="${product.image}" alt="${product.name}" class="w-full h-64 object-cover"> |
|
|
${badge} |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<div class="flex justify-between items-start mb-2"> |
|
|
<h3 class="font-bold text-lg">${product.name}</h3> |
|
|
<div class="flex space-x-1"> |
|
|
${product.colors.map(color => `<span class="w-4 h-4 rounded-full bg-${color}-500"></span>`).join('')} |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center mb-4"> |
|
|
<span class="font-bold text-indigo-600">€${product.price.toFixed(2)}</span> |
|
|
${product.oldPrice ? `<span class="ml-2 text-sm text-gray-500 line-through">€${product.oldPrice.toFixed(2)}</span>` : ''} |
|
|
</div> |
|
|
<button onclick="addToCart(${product.id})" class="w-full bg-indigo-100 text-indigo-600 py-2 rounded hover:bg-indigo-200 transition duration-300"> |
|
|
Ajouter au panier |
|
|
</button> |
|
|
</div> |
|
|
`; |
|
|
|
|
|
productsContainer.appendChild(productCard); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
function renderPromotions() { |
|
|
promoSlider.innerHTML = ''; |
|
|
promoSlider.style.width = `${promotions.length * 100}%`; |
|
|
|
|
|
promotions.forEach(promo => { |
|
|
const slide = document.createElement('div'); |
|
|
slide.className = 'w-full flex-shrink-0 p-4'; |
|
|
slide.style.width = `${100 / promotions.length}%`; |
|
|
|
|
|
slide.innerHTML = ` |
|
|
<div class="relative h-64 rounded-lg overflow-hidden"> |
|
|
<img src="${promo.image}" alt="${promo.title}" class="w-full h-full object-cover"> |
|
|
<div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center p-6"> |
|
|
<div class="text-center text-white"> |
|
|
<h3 class="text-2xl font-bold mb-2">${promo.title}</h3> |
|
|
<p class="mb-4">${promo.subtitle}</p> |
|
|
<button class="px-6 py-2 bg-white text-indigo-600 rounded-lg font-medium hover:bg-gray-100 transition duration-300"> |
|
|
${promo.cta} |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
|
|
|
promoSlider.appendChild(slide); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
let currentSlide = 0; |
|
|
|
|
|
nextSlideBtn.addEventListener('click', () => { |
|
|
if (currentSlide < promotions.length - 1) { |
|
|
currentSlide++; |
|
|
updateSliderPosition(); |
|
|
} |
|
|
}); |
|
|
|
|
|
prevSlideBtn.addEventListener('click', () => { |
|
|
if (currentSlide > 0) { |
|
|
currentSlide--; |
|
|
updateSliderPosition(); |
|
|
} |
|
|
}); |
|
|
|
|
|
function updateSliderPosition() { |
|
|
const slideWidth = 100 / promotions.length; |
|
|
promoSlider.style.transform = `translateX(-${currentSlide * slideWidth}%)`; |
|
|
} |
|
|
|
|
|
|
|
|
function addToCart(productId) { |
|
|
const product = products.find(p => p.id === productId); |
|
|
const existingItem = cart.find(item => item.id === productId); |
|
|
|
|
|
if (existingItem) { |
|
|
existingItem.quantity++; |
|
|
} else { |
|
|
cart.push({ |
|
|
...product, |
|
|
quantity: 1 |
|
|
}); |
|
|
} |
|
|
|
|
|
updateCartUI(); |
|
|
animateCartButton(); |
|
|
} |
|
|
|
|
|
function removeFromCart(productId) { |
|
|
cart = cart.filter(item => item.id !== productId); |
|
|
updateCartUI(); |
|
|
} |
|
|
|
|
|
function updateCartUI() { |
|
|
|
|
|
cartCount.textContent = cart.reduce((total, item) => total + item.quantity, 0); |
|
|
|
|
|
|
|
|
cartItemsContainer.innerHTML = ''; |
|
|
|
|
|
if (cart.length === 0) { |
|
|
emptyCartMessage.classList.remove('hidden'); |
|
|
} else { |
|
|
emptyCartMessage.classList.add('hidden'); |
|
|
|
|
|
cart.forEach(item => { |
|
|
const cartItem = document.createElement('div'); |
|
|
cartItem.className = 'flex items-center justify-between py-4 border-b border-gray-200'; |
|
|
|
|
|
cartItem.innerHTML = ` |
|
|
<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-indigo-600">€${item.price.toFixed(2)}</p> |
|
|
<div class="flex items-center mt-1"> |
|
|
<button onclick="updateQuantity(${item.id}, ${item.quantity - 1})" ${item.quantity <= 1 ? 'disabled' : ''} class="text-gray-500 hover:text-indigo-600 ${item.quantity <= 1 ? 'opacity-50 cursor-not-allowed' : ''}"> |
|
|
<i class="fas fa-minus text-xs"></i> |
|
|
</button> |
|
|
<span class="mx-2">${item.quantity}</span> |
|
|
<button onclick="updateQuantity(${item.id}, ${item.quantity + 1})" class="text-gray-500 hover:text-indigo-600"> |
|
|
<i class="fas fa-plus text-xs"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<button onclick="removeFromCart(${item.id})" class="text-gray-500 hover:text-red-500"> |
|
|
<i class="fas fa-trash"></i> |
|
|
</button> |
|
|
`; |
|
|
|
|
|
cartItemsContainer.appendChild(cartItem); |
|
|
}); |
|
|
|
|
|
|
|
|
const subtotal = cart.reduce((total, item) => total + (item.price * item.quantity), 0); |
|
|
cartSubtotal.textContent = `€${subtotal.toFixed(2)}`; |
|
|
} |
|
|
} |
|
|
|
|
|
function updateQuantity(productId, newQuantity) { |
|
|
const item = cart.find(item => item.id === productId); |
|
|
|
|
|
if (item) { |
|
|
if (newQuantity <= 0) { |
|
|
removeFromCart(productId); |
|
|
} else { |
|
|
item.quantity = newQuantity; |
|
|
updateCartUI(); |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
function animateCartButton() { |
|
|
cartBtn.classList.add('bounce'); |
|
|
setTimeout(() => { |
|
|
cartBtn.classList.remove('bounce'); |
|
|
}, 1000); |
|
|
} |
|
|
|
|
|
|
|
|
cartBtn.addEventListener('click', () => { |
|
|
cartSidebar.classList.remove('translate-x-full'); |
|
|
cartOverlay.classList.remove('hidden'); |
|
|
document.body.style.overflow = 'hidden'; |
|
|
}); |
|
|
|
|
|
closeCartBtn.addEventListener('click', closeCart); |
|
|
cartOverlay.addEventListener('click', closeCart); |
|
|
|
|
|
function closeCart() { |
|
|
cartSidebar.classList.add('translate-x-full'); |
|
|
cartOverlay.classList.add('hidden'); |
|
|
document.body.style.overflow = 'auto'; |
|
|
} |
|
|
|
|
|
|
|
|
mobileMenuButton.addEventListener('click', () => { |
|
|
mobileMenu.classList.toggle('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
window.addToCart = addToCart; |
|
|
window.removeFromCart = removeFromCart; |
|
|
window.updateQuantity = updateQuantity; |
|
|
</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=ChristopheDucharme/v-tements-en-ligne" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
