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>Application | 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"> | |
| <h1 class="text-3xl font-bold mb-8">Créez votre look parfait</h1> | |
| <div class="flex flex-col lg:flex-row gap-8"> | |
| <!-- Sidebar Left --> | |
| <div class="lg:w-1/4 bg-surface p-6 rounded-xl shadow-sm"> | |
| <h2 class="text-xl font-semibold mb-6">Personnalisez votre look</h2> | |
| <div class="mb-8"> | |
| <div class="border-2 border-dashed border-primary/30 rounded-xl p-8 text-center cursor-pointer hover:bg-accentLight transition"> | |
| <i data-feather="upload" class="w-12 h-12 mx-auto text-primary mb-4"></i> | |
| <p class="font-medium">Glissez votre photo ici</p> | |
| <p class="text-sm text-textSecondary mt-2">ou cliquez pour sélectionner</p> | |
| </div> | |
| </div> | |
| <div class="space-y-6"> | |
| <div> | |
| <label class="block font-medium mb-2">Style</label> | |
| <select class="input"> | |
| <option>Sélectionnez un style</option> | |
| <option>Casual</option> | |
| <option>Chic</option> | |
| <option>Sport</option> | |
| <option>Soirée</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block font-medium mb-2">Occasion</label> | |
| <select class="input"> | |
| <option>Sélectionnez une occasion</option> | |
| <option>Quotidien</option> | |
| <option>Travail</option> | |
| <option>Soirée</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block font-medium mb-2">Saison</label> | |
| <select class="input"> | |
| <option>Sélectionnez une saison</option> | |
| <option>Printemps</option> | |
| <option>Été</option> | |
| <option>Automne</option> | |
| <option>Hiver</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block font-medium mb-2">Budget</label> | |
| <input type="range" min="50" max="500" step="50" class="w-full" value="200"> | |
| <div class="flex justify-between text-sm text-textSecondary mt-1"> | |
| <span>50€</span> | |
| <span>500€</span> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="accessories" class="mr-2 h-5 w-5 rounded border-textSecondary text-primary focus:ring-primary"> | |
| <label for="accessories">Inclure les accessoires</label> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="lg:w-2/4"> | |
| <div class="bg-surface rounded-xl p-6 shadow-sm h-full flex flex-col items-center justify-center min-h-[500px]"> | |
| <div class="text-center"> | |
| <i data-feather="image" class="w-16 h-16 mx-auto text-primary/30 mb-4"></i> | |
| <h3 class="text-xl font-medium mb-2">Votre look apparaîtra ici</h3> | |
| <p class="text-textSecondary mb-6">Configurez vos préférences et cliquez sur "Générer mon look"</p> | |
| <button class="btn-primary px-8 py-3 text-lg">Générer mon look</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Sidebar Right --> | |
| <div class="lg:w-1/4 bg-surface p-6 rounded-xl shadow-sm"> | |
| <h2 class="text-xl font-semibold mb-6">Vêtements recommandés</h2> | |
| <div class="space-y-6"> | |
| <div class="flex gap-4 items-start"> | |
| <img src="https://images.unsplash.com/photo-1515886657613-9f3515b0c78f?w=400" alt="Veste en jean" class="w-20 h-20 object-cover rounded-lg"> | |
| <div> | |
| <h3 class="font-medium">Veste en jean</h3> | |
| <p class="text-sm text-textSecondary">Zara</p> | |
| <p class="font-medium text-primary mt-1">49,99€</p> | |
| <button class="text-sm text-primary font-medium mt-2 flex items-center"> | |
| Voir le produit <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flex gap-4 items-start"> | |
| <img src="https://images.unsplash.com/photo-1594633313593-bab3825d0caf?w=400" alt="Robe d'été" class="w-20 h-20 object-cover rounded-lg"> | |
| <div> | |
| <h3 class="font-medium">Robe d'été</h3> | |
| <p class="text-sm text-textSecondary">Mango</p> | |
| <p class="font-medium text-primary mt-1">59,99€</p> | |
| <button class="text-sm text-primary font-medium mt-2 flex items-center"> | |
| Voir le produit <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flex gap-4 items-start"> | |
| <img src="https://images.unsplash.com/photo-1551488831-00ddcb6c6bd3?w=400" alt="Chaussures élégantes" class="w-20 h-20 object-cover rounded-lg"> | |
| <div> | |
| <h3 class="font-medium">Chaussures élégantes</h3> | |
| <p class="text-sm text-textSecondary">COS</p> | |
| <p class="font-medium text-primary mt-1">89,99€</p> | |
| <button class="text-sm text-primary font-medium mt-2 flex items-center"> | |
| Voir le produit <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <button class="btn-secondary w-full mt-6 flex items-center justify-center"> | |
| Voir plus <i data-feather="plus" class="w-4 h-4 ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </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> |