Spaces:

ChristopheDucharme
/

v-tements-en-ligne

Running

App Files Files Community

ChristopheDucharme commited on 6 days ago

Commit

0d8b421

verified ·

1 Parent(s): 2e6ce1b

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +645 -19
prompts.txt +1 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: V Tements En Ligne
-emoji: 📈
-colorFrom: pink
-colorTo: yellow
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: v-tements-en-ligne
+emoji: 🐳
+colorFrom: blue
+colorTo: purple
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,645 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!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>
+        /* Animation pour le bouton du panier */
+        @keyframes bounce {
+            0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
+            40% {transform: translateY(-10px);}
+            60% {transform: translateY(-5px);}
+        }
+        .bounce {
+            animation: bounce 1s;
+        }
+        /* Animation pour les cartes de produits */
+        .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">
+    <!-- Barre de navigation -->
+    <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">
+                <!-- Logo -->
+                <div class="flex items-center space-x-4">
+                    <span class="text-2xl font-bold text-indigo-600">Mode Élégance</span>
+                </div>
+                <!-- Liens de navigation -->
+                <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>
+                <!-- Icônes du panier et de recherche -->
+                <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>
+                    <!-- Menu mobile -->
+                    <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>
+            <!-- Menu mobile (caché par défaut) -->
+            <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>
+    <!-- Panier latéral -->
+    <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">
+                <!-- Les articles du panier seront ajoutés ici dynamiquement -->
+                <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>
+    <!-- Overlay pour le panier -->
+    <div id="cart-overlay" class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden"></div>
+    <!-- Bannière principale -->
+    <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>
+    <!-- Carrousel de promotions -->
+    <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">
+                    <!-- Les slides seront ajoutées dynamiquement -->
+                </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>
+    <!-- Catégories -->
+    <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>
+    <!-- Produits populaires -->
+    <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">
+                <!-- Les produits seront ajoutés dynamiquement -->
+            </div>
+        </div>
+    </div>
+    <!-- Avantages -->
+    <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>
+    <!-- Newsletter -->
+    <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>
+    <!-- Pied de page -->
+    <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>
+        // Données des produits
+        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"]
+            }
+        ];
+        // Données des promotions
+        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"
+            }
+        ];
+        // Panier
+        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 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');
+        // Initialisation
+        document.addEventListener('DOMContentLoaded', () => {
+            renderProducts();
+            renderPromotions();
+            updateCartUI();
+        });
+        // Render products
+        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);
+            });
+        }
+        // Render promotions slider
+        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);
+            });
+        }
+        // Carrousel navigation
+        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}%)`;
+        }
+        // Gestion du panier
+        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() {
+            // Mettre à jour le compteur
+            cartCount.textContent = cart.reduce((total, item) => total + item.quantity, 0);
+            // Mettre à jour les articles du panier
+            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);
+                });
+                // Mettre à jour le sous-total
+                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);
+        }
+        // Gestion de l'affichage du panier
+        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';
+        }
+        // Menu mobile
+        mobileMenuButton.addEventListener('click', () => {
+            mobileMenu.classList.toggle('hidden');
+        });
+        // Exposer les fonctions au scope global pour les boutons HTML
+        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>

prompts.txt ADDED Viewed

	@@ -0,0 +1 @@


1	+ Crée une page de vente en ligne de vêtements