Créer une application web complète "Cabine Dressing Virtuel avec IA" - Interface professionnelle mode/retail.
d1518bb verified | <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Mon Dressing | Dressing Virtuel by AI</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#20808D', | |
| primaryHover: '#1D747F', | |
| background: '#FCFCF9', | |
| surface: '#FFFFFE', | |
| text: '#134252', | |
| textSecondary: '#626C71', | |
| border: 'rgba(94,82,64,0.2)', | |
| success: '#21808D', | |
| accentLight: 'rgba(32,128,141,0.1)', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| </head> | |
| <body class="bg-background text-text"> | |
| <custom-navbar></custom-navbar> | |
| <main class="container mx-auto px-4 py-8"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <h1 class="text-3xl font-bold">Mes looks sauvegardés</h1> | |
| <button class="btn-primary flex items-center"> | |
| <i data-feather="plus" class="w-4 h-4 mr-2"></i> Nouveau look | |
| </button> | |
| </div> | |
| <div class="bg-surface rounded-xl p-6 shadow-sm mb-8"> | |
| <div class="flex flex-col md:flex-row md:items-center gap-4"> | |
| <div class="flex-1"> | |
| <div class="relative"> | |
| <i data-feather="search" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-textSecondary"></i> | |
| <input type="text" placeholder="Rechercher un look..." class="input pl-10 w-full"> | |
| </div> | |
| </div> | |
| <div class="flex gap-2"> | |
| <select class="input"> | |
| <option>Trier par date</option> | |
| <option>Trier par style</option> | |
| <option>Trier par occasion</option> | |
| </select> | |
| <select class="input"> | |
| <option>Tous les looks</option> | |
| <option>Favoris</option> | |
| <option>Soirée</option> | |
| <option>Travail</option> | |
| <option>Week-end</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Look Card 1 --> | |
| <div class="card group"> | |
| <div class="relative overflow-hidden rounded-lg mb-4"> | |
| <img src="https://images.unsplash.com/photo-1515372039744-b8f02a3ae446?w=600" alt="Look soirée" class="w-full h-64 object-cover transition duration-500 group-hover:scale-105"> | |
| <div class="absolute top-3 right-3"> | |
| <button class="w-8 h-8 rounded-full bg-surface/80 flex items-center justify-center hover:bg-primary hover:text-surface transition"> | |
| <i data-feather="heart" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <h3 class="font-semibold text-lg mb-1">Look soirée élégante</h3> | |
| <p class="text-textSecondary text-sm mb-4">Créé le 12/05/2024</p> | |
| <div class="flex gap-2"> | |
| <span class="inline-block px-3 py-1 rounded-full text-sm bg-accentLight text-primary">Soirée</span> | |
| <span class="inline-block px-3 py-1 rounded-full text-sm bg-accentLight text-primary">Chic</span> | |
| </div> | |
| <div class="flex justify-between mt-6"> | |
| <button class="btn-secondary flex items-center text-sm"> | |
| <i data-feather="edit" class="w-4 h-4 mr-1"></i> Modifier | |
| </button> | |
| <button class="btn-secondary flex items-center text-sm"> | |
| <i data-feather="share-2" class="w-4 h-4 mr-1"></i> Partager | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Look Card 2 --> | |
| <div class="card group"> | |
| <div class="relative overflow-hidden rounded-lg mb-4"> | |
| <img src="https://images.unsplash.com/photo-1490481651871-ab68de25d43d?w=600" alt="Streetwear moderne" class="w-full h-64 object-cover transition duration-500 group-hover:scale-105"> | |
| <div class="absolute top-3 right-3"> | |
| <button class="w-8 h-8 rounded-full bg-surface/80 flex items-center justify-center text-primary hover:bg-primary hover:text-surface transition"> | |
| <i data-feather="heart" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <h3 class="font-semibold text-lg mb-1">Streetwear du weekend</h3> | |
| <p class="text-textSecondary text-sm mb-4">Créé le 08/05/2024</p> | |
| <div class="flex gap-2"> | |
| <span class="inline-block px-3 py-1 rounded-full text-sm bg-accentLight text-primary">Casual</span> | |
| <span class="inline-block px-3 py-1 rounded-full text-sm bg-accentLight text-primary">Urbain</span> | |
| </div> | |
| <div class="flex justify-between mt-6"> | |
| <button class="btn-secondary flex items-center text-sm"> | |
| <i data-feather="edit" class="w-4 h-4 mr-1"></i> Modifier | |
| </button> | |
| <button class="btn-secondary flex items-center text-sm"> | |
| <i data-feather="share-2" class="w-4 h-4 mr-1"></i> Partager | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Look Card 3 --> | |
| <div class="card group"> | |
| <div class="relative overflow-hidden rounded-lg mb-4"> | |
| <img src="https://images.unsplash.com/photo-1487222477894-8943e31ef7b2?w=600" alt="Business chic" class="w-full h-64 object-cover transition duration-500 group-hover:scale-105"> | |
| <div class="absolute top-3 right-3"> | |
| <button class="w-8 h-8 rounded-full bg-surface/80 flex items-center justify-center hover:bg-primary hover:text-surface transition"> | |
| <i data-feather="heart" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <h3 class="font-semibold text-lg mb-1">Tenue professionnelle</h3> | |
| <p class="text-textSecondary text-sm mb-4">Créé le 05/05/2024</p> | |
| <div class="flex gap-2"> | |
| <span class="inline-block px-3 py-1 rounded-full text-sm bg-accentLight text-primary">Travail</span> | |
| <span class="inline-block px-3 py-1 rounded-full text-sm bg-accentLight text-primary">Chic</span> | |
| </div> | |
| <div class="flex justify-between mt-6"> | |
| <button class="btn-secondary flex items-center text-sm"> | |
| <i data-feather="edit" class="w-4 h-4 mr-1"></i> Modifier | |
| </button> | |
| <button class="btn-secondary flex items-center text-sm"> | |
| <i data-feather="share-2" class="w-4 h-4 mr-1"></i> Partager | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Look Card 4 --> | |
| <div class="card group"> | |
| <div class="relative overflow-hidden rounded-lg mb-4"> | |
| <img src="https://images.unsplash.com/photo-1509631179647-0177331693ae?w=600" alt="Look casual quotidien" class="w-full h-64 object-cover transition duration-500 group-hover:scale-105"> | |
| <div class="absolute top-3 right-3"> | |
| <button class="w-8 h-8 rounded-full bg-surface/80 flex items-center justify-center text-primary hover:bg-primary hover:text-surface transition"> | |
| <i data-feather="heart" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <h3 class="font-semibold text-lg mb-1">Look quotidien confort</h3> | |
| <p class="text-textSecondary text-sm mb-4">Créé le 01/05/2024</p> | |
| <div class="flex gap-2"> | |
| <span class="inline-block px-3 py-1 rounded-full text-sm bg-accentLight text-primary">Casual</span> | |
| <span class="inline-block px-3 py-1 rounded-full text-sm bg-accentLight text-primary">Confort</span> | |
| </div> | |
| <div class="flex justify-between mt-6"> | |
| <button class="btn-secondary flex items-center text-sm"> | |
| <i data-feather="edit" class="w-4 h-4 mr-1"></i> Modifier | |
| </button> | |
| <button class="btn-secondary flex items-center text-sm"> | |
| <i data-feather="share-2" class="w-4 h-4 mr-1"></i> Partager | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Look Card 5 --> | |
| <div class="card group"> | |
| <div class="relative overflow-hidden rounded-lg mb-4"> | |
| <img src="https://images.unsplash.com/photo-1524504388940-b1c1722653e1?w=600" alt="Style bohème élégant" class="w-full h-64 object-cover transition duration-500 group-hover:scale-105"> | |
| <div class="absolute top-3 right-3"> | |
| <button class="w-8 h-8 rounded-full bg-surface/80 flex items-center justify-center hover:bg-primary hover:text-surface transition"> | |
| <i data-feather="heart" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <h3 class="font-semibold text-lg mb-1">Style bohème élégant</h3> | |
| <p class="text-textSecondary text-sm mb-4">Créé le 28/04/2024</p> | |
| <div class="flex gap-2"> | |
| <span class="inline-block px-3 py-1 rounded-full text-sm bg-accentLight text-primary">Bohème</span> | |
| <span class="inline-block px-3 py-1 rounded-full text-sm bg-accentLight text-primary">Été</span> | |
| </div> | |
| <div class="flex justify-between mt-6"> | |
| <button class="btn-secondary flex items-center text-sm"> | |
| <i data-feather="edit" class="w-4 h-4 mr-1"></i> Modifier | |
| </button> | |
| <button class="btn-secondary flex items-center text-sm"> | |
| <i data-feather="share-2" class="w-4 h-4 mr-1"></i> Partager | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Look Card 6 --> | |
| <div class="card group"> | |
| <div class="relative overflow-hidden rounded-lg mb-4"> | |
| <img src="https://images.unsplash.com/photo-1469334031218-e382a71b716b?w=600" alt="Athleisure mode" class="w-full h-64 object-cover transition duration-500 group-hover:scale-105"> | |
| <div class="absolute top-3 right-3"> | |
| <button class="w-8 h-8 rounded-full bg-surface/80 flex items-center justify-center hover:bg-primary hover:text-surface transition"> | |
| <i data-feather="heart" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <h3 class="font-semibold text-lg mb-1">Athleisure sport chic</h3> | |
| <p class="text-textSecondary text-sm mb-4">Créé le 25/04/2024</p> | |
| <div class="flex gap-2"> | |
| <span class="inline-block px-3 py-1 rounded-full text-sm bg-accentLight text-primary">Sport</span> | |
| <span class="inline-block px-3 py-1 rounded-full text-sm bg-accentLight text-primary">Urbain</span> | |
| </div> | |
| <div class="flex justify-between mt-6"> | |
| <button class="btn-secondary flex items-center text-sm"> | |
| <i data-feather="edit" class="w-4 h-4 mr-1"></i> Modifier | |
| </button> | |
| <button class="btn-secondary flex items-center text-sm"> | |
| <i data-feather="share-2" class="w-4 h-4 mr-1"></i> Partager | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-center mt-12"> | |
| <button class="btn-secondary flex items-center"> | |
| Afficher plus <i data-feather="chevron-down" class="w-5 h-5 ml-2"></i> | |
| </button> | |
| </div> | |
| </main> | |
| <custom-footer></custom-footer> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/footer.js"></script> | |
| <script src="script.js"></script> | |
| <script>feather.replace();</script> | |
| </body> | |
| </html> |