| <!DOCTYPE html> |
| <html lang="fr"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>SkinCare AI - Votre routine beauté personnalisée</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"> |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| colors: { |
| primary: '#FF9AA2', |
| secondary: '#FFB7B2', |
| accent: '#FFDAC1', |
| light: '#E2F0CB', |
| dark: '#B5EAD7', |
| } |
| } |
| } |
| } |
| </script> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); |
| |
| body { |
| font-family: 'Poppins', sans-serif; |
| background-color: #fafafa; |
| max-width: 430px; |
| margin: 0 auto; |
| min-height: 100vh; |
| position: relative; |
| box-shadow: 0 0 30px rgba(0,0,0,0.1); |
| } |
| |
| .slide-in { |
| animation: slideIn 0.3s ease-out forwards; |
| } |
| |
| .slide-out { |
| animation: slideOut 0.3s ease-in forwards; |
| } |
| |
| @keyframes slideIn { |
| from { transform: translateX(100%); opacity: 0; } |
| to { transform: translateX(0); opacity: 1; } |
| } |
| |
| @keyframes slideOut { |
| from { transform: translateX(0); opacity: 1; } |
| to { transform: translateX(-100%); opacity: 0; } |
| } |
| |
| .typing { |
| display: inline-block; |
| } |
| |
| .typing-dot { |
| display: inline-block; |
| width: 8px; |
| height: 8px; |
| border-radius: 50%; |
| background-color: #888; |
| margin-right: 3px; |
| animation: typingAnimation 1.4s infinite ease-in-out; |
| } |
| |
| .typing-dot:nth-child(1) { |
| animation-delay: 0s; |
| } |
| |
| .typing-dot:nth-child(2) { |
| animation-delay: 0.2s; |
| } |
| |
| .typing-dot:nth-child(3) { |
| animation-delay: 0.4s; |
| margin-right: 0; |
| } |
| |
| @keyframes typingAnimation { |
| 0%, 60%, 100% { transform: translateY(0); } |
| 30% { transform: translateY(-5px); } |
| } |
| |
| .product-card { |
| transition: all 0.3s ease; |
| } |
| |
| .product-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 10px 20px rgba(0,0,0,0.1); |
| } |
| |
| .fade-in { |
| animation: fadeIn 0.5s ease-in forwards; |
| } |
| |
| @keyframes fadeIn { |
| from { opacity: 0; } |
| to { opacity: 1; } |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50"> |
| |
| <div id="app" class="min-h-screen flex flex-col"> |
| |
| <header class="bg-gradient-to-r from-primary to-secondary p-4 text-white shadow-md"> |
| <div class="flex items-center justify-between"> |
| <button id="menuBtn" class="text-white"> |
| <i class="fas fa-bars text-xl"></i> |
| </button> |
| <h1 class="text-xl font-bold">SkinCare AI</h1> |
| <button class="text-white"> |
| <i class="fas fa-user-circle text-xl"></i> |
| </button> |
| </div> |
| </header> |
|
|
| |
| <main id="mainContent" class="flex-1 p-4 overflow-y-auto"> |
| |
| <div id="onboardingContainer" class="h-full flex flex-col"> |
| |
| <div id="welcomeScreen" class="flex-1 flex flex-col items-center justify-center text-center"> |
| <div class="mb-8"> |
| <img src="https://cdn-icons-png.flaticon.com/512/3003/3003035.png" alt="SkinCare Logo" class="w-40 h-40 mx-auto"> |
| </div> |
| <h2 class="text-3xl font-bold text-gray-800 mb-4">Bienvenue sur SkinCare AI</h2> |
| <p class="text-gray-600 mb-8 px-4">Votre assistant personnel pour une routine de soin de la peau parfaitement adaptée à vos besoins.</p> |
| <button id="startOnboardingBtn" class="bg-primary hover:bg-primary-dark text-white font-bold py-3 px-8 rounded-full shadow-lg transition duration-300"> |
| Commencer |
| </button> |
| </div> |
| </div> |
| </main> |
|
|
| |
| <nav class="bg-white border-t border-gray-200 p-2 flex justify-around"> |
| <button class="p-2 text-gray-500 hover:text-primary"> |
| <i class="fas fa-home text-xl"></i> |
| </button> |
| <button class="p-2 text-gray-500 hover:text-primary"> |
| <i class="fas fa-search text-xl"></i> |
| </button> |
| <button class="p-2 text-gray-500 hover:text-primary"> |
| <i class="fas fa-heart text-xl"></i> |
| </button> |
| <button class="p-2 text-gray-500 hover:text-primary"> |
| <i class="fas fa-user text-xl"></i> |
| </button> |
| </nav> |
| </div> |
|
|
| |
| <div id="sideMenu" class="fixed inset-y-0 left-0 w-64 bg-white shadow-xl transform -translate-x-full transition-transform duration-300 z-50"> |
| <div class="p-4 border-b border-gray-200 flex items-center"> |
| <img src="https://cdn-icons-png.flaticon.com/512/3135/3135715.png" alt="User" class="w-10 h-10 rounded-full mr-3"> |
| <div> |
| <p class="font-semibold">Marie Dupont</p> |
| <p class="text-sm text-gray-500">Niveau 3</p> |
| </div> |
| </div> |
| <nav class="p-2"> |
| <a href="#" class="block p-3 rounded-lg hover:bg-gray-100"><i class="fas fa-user mr-3 text-primary"></i> Mon Profil</a> |
| <a href="#" class="block p-3 rounded-lg hover:bg-gray-100"><i class="fas fa-heart mr-3 text-primary"></i> Ma Routine</a> |
| <a href="#" class="block p-3 rounded-lg hover:bg-gray-100"><i class="fas fa-history mr-3 text-primary"></i> Historique</a> |
| <a href="#" class="block p-3 rounded-lg hover:bg-gray-100"><i class="fas fa-cog mr-3 text-primary"></i> Paramètres</a> |
| <a href="#" class="block p-3 rounded-lg hover:bg-gray-100"><i class="fas fa-question-circle mr-3 text-primary"></i> Aide</a> |
| <a href="#" class="block p-3 rounded-lg hover:bg-gray-100"><i class="fas fa-sign-out-alt mr-3 text-primary"></i> Déconnexion</a> |
| </nav> |
| </div> |
| <div id="menuOverlay" class="fixed inset-0 bg-black bg-opacity-50 hidden z-40"></div> |
|
|
| <script> |
| // Current onboarding step |
| let currentStep = 0; |
| const onboardingSteps = [ |
| { |
| title: "Profil de base", |
| content: ` |
| <div class="flex-1"> |
| <h2 class="text-2xl font-bold text-gray-800 mb-6">Dites-nous en plus sur vous</h2> |
| |
| <div class="mb-4"> |
| <label class="block text-gray-700 mb-2">Âge</label> |
| <input type="number" id="age" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="Votre âge"> |
| </div> |
| |
| <div class="mb-4"> |
| <label class="block text-gray-700 mb-2">Genre</label> |
| <div class="flex space-x-2"> |
| <button class="gender-btn flex-1 py-2 px-4 border rounded-lg" data-value="female">Femme</button> |
| <button class="gender-btn flex-1 py-2 px-4 border rounded-lg" data-value="male">Homme</button> |
| <button class="gender-btn flex-1 py-2 px-4 border rounded-lg" data-value="other">Autre</button> |
| </div> |
| </div> |
| |
| <div class="mb-4"> |
| <label class="block text-gray-700 mb-2">Type de peau</label> |
| <select id="skinType" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent"> |
| <option value="">Sélectionnez</option> |
| <option value="normal">Normale</option> |
| <option value="dry">Sèche</option> |
| <option value="oily">Grasse</option> |
| <option value="combination">Mixte</option> |
| <option value="sensitive">Sensible</option> |
| </select> |
| </div> |
| </div> |
| <div class="mt-6"> |
| <button id="nextBtn" class="w-full bg-primary hover:bg-primary-dark text-white font-bold py-3 px-4 rounded-full shadow-lg transition duration-300"> |
| Continuer |
| </button> |
| </div> |
| ` |
| }, |
| { |
| title: "Habitudes de soin", |
| content: ` |
| <div class="flex-1"> |
| <h2 class="text-2xl font-bold text-gray-800 mb-6">Vos habitudes de soin</h2> |
| |
| <div class="mb-4"> |
| <label class="block text-gray-700 mb-2">À quelle fréquence vous lavez-vous le visage?</label> |
| <select id="cleansingFrequency" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent"> |
| <option value="">Sélectionnez</option> |
| <option value="once">1 fois/jour</option> |
| <option value="twice">2 fois/jour</option> |
| <option value="more">Plus de 2 fois</option> |
| <option value="rarely">Moins d'une fois</option> |
| </select> |
| </div> |
| |
| <div class="mb-4"> |
| <label class="block text-gray-700 mb-2">Utilisez-vous actuellement des produits de soin?</label> |
| <div class="flex space-x-2"> |
| <button class="currentProducts-btn flex-1 py-2 px-4 border rounded-lg" data-value="yes">Oui</button> |
| <button class="currentProducts-btn flex-1 py-2 px-4 border rounded-lg" data-value="no">Non</button> |
| <button class="currentProducts-btn flex-1 py-2 px-4 border rounded-lg" data-value="sometimes">Parfois</button> |
| </div> |
| </div> |
| |
| <div class="mb-4"> |
| <label class="block text-gray-700 mb-2">Quels sont vos principaux problèmes de peau? (multiple)</label> |
| <div class="space-y-2"> |
| <label class="flex items-center"> |
| <input type="checkbox" class="skinIssue" value="acne" class="mr-2"> |
| <span>Acné</span> |
| </label> |
| <label class="flex items-center"> |
| <input type="checkbox" class="skinIssue" value="wrinkles" class="mr-2"> |
| <span>Rides</span> |
| </label> |
| <label class="flex items-center"> |
| <input type="checkbox" class="skinIssue" value="darkSpots" class="mr-2"> |
| <span>Taches brunes</span> |
| </label> |
| <label class="flex items-center"> |
| <input type="checkbox" class="skinIssue" value="redness" class="mr-2"> |
| <span>Rougeurs</span> |
| </label> |
| <label class="flex items-center"> |
| <input type="checkbox" class="skinIssue" value="dryness" class="mr-2"> |
| <span>Sécheresse</span> |
| </label> |
| </div> |
| </div> |
| </div> |
| <div class="mt-6 flex space-x-2"> |
| <button id="backBtn" class="flex-1 bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-3 px-4 rounded-full shadow transition duration-300"> |
| Retour |
| </button> |
| <button id="nextBtn" class="flex-1 bg-primary hover:bg-primary-dark text-white font-bold py-3 px-4 rounded-full shadow-lg transition duration-300"> |
| Continuer |
| </button> |
| </div> |
| ` |
| }, |
| { |
| title: "Conversation avec l'IA", |
| content: ` |
| <div class="flex-1"> |
| <h2 class="text-2xl font-bold text-gray-800 mb-6">Conversation avec SkinCare AI</h2> |
| |
| <div class="bg-white rounded-xl shadow-md p-4 mb-4 h-64 overflow-y-auto" id="chatContainer"> |
| <div class="chat-message ai-message mb-4"> |
| <div class="flex items-start"> |
| <div class="bg-primary text-white rounded-full w-8 h-8 flex items-center justify-center mr-2"> |
| <i class="fas fa-robot"></i> |
| </div> |
| <div class="bg-gray-100 rounded-lg p-3 max-w-xs"> |
| <p>Bonjour! Je suis votre assistant SkinCare AI. Je vais vous poser quelques questions supplémentaires pour affiner votre routine personnalisée.</p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="chat-message ai-message mb-4"> |
| <div class="flex items-start"> |
| <div class="bg-primary text-white rounded-full w-8 h-8 flex items-center justify-center mr-2"> |
| <i class="fas fa-robot"></i> |
| </div> |
| <div class="bg-gray-100 rounded-lg p-3 max-w-xs"> |
| <p>Quels sont vos principaux objectifs pour votre peau?</p> |
| </div> |
| </div> |
| </div> |
| |
| <div id="typingIndicator" class="flex items-start mb-4 hidden"> |
| <div class="bg-primary text-white rounded-full w-8 h-8 flex items-center justify-center mr-2"> |
| <i class="fas fa-robot"></i> |
| </div> |
| <div class="bg-gray-100 rounded-lg p-3"> |
| <div class="typing"> |
| <span class="typing-dot"></span> |
| <span class="typing-dot"></span> |
| <span class="typing-dot"></span> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="flex"> |
| <input type="text" id="userMessage" class="flex-1 p-3 border border-gray-300 rounded-l-lg focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="Votre réponse..."> |
| <button id="sendMessageBtn" class="bg-primary hover:bg-primary-dark text-white font-bold py-3 px-4 rounded-r-lg"> |
| <i class="fas fa-paper-plane"></i> |
| </button> |
| </div> |
| </div> |
| <div class="mt-6 flex space-x-2"> |
| <button id="backBtn" class="flex-1 bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-3 px-4 rounded-full shadow transition duration-300"> |
| Retour |
| </button> |
| <button id="finishBtn" class="flex-1 bg-primary hover:bg-primary-dark text-white font-bold py-3 px-4 rounded-full shadow-lg transition duration-300 hidden"> |
| Terminer |
| </button> |
| </div> |
| ` |
| }, |
| { |
| title: "Routine personnalisée", |
| content: ` |
| <div class="flex-1"> |
| <div class="text-center mb-6"> |
| <img src="https://cdn-icons-png.flaticon.com/512/2853/2853307.png" alt="Completed" class="w-24 h-24 mx-auto mb-4"> |
| <h2 class="text-2xl font-bold text-gray-800 mb-2">Votre routine est prête!</h2> |
| <p class="text-gray-600">Voici les recommandations personnalisées basées sur vos réponses.</p> |
| </div> |
| |
| <div class="bg-white rounded-xl shadow-md p-4 mb-4"> |
| <h3 class="font-bold text-lg mb-3">Votre routine matinale</h3> |
| <div class="space-y-3"> |
| <div class="flex items-center p-2 bg-gray-50 rounded-lg"> |
| <div class="bg-primary bg-opacity-20 text-primary rounded-full w-10 h-10 flex items-center justify-center mr-3"> |
| <i class="fas fa-1"></i> |
| </div> |
| <div> |
| <p class="font-medium">Nettoyant doux</p> |
| <p class="text-sm text-gray-500">Pour éliminer les impuretés sans assécher</p> |
| </div> |
| </div> |
| <div class="flex items-center p-2 bg-gray-50 rounded-lg"> |
| <div class="bg-primary bg-opacity-20 text-primary rounded-full w-10 h-10 flex items-center justify-center mr-3"> |
| <i class="fas fa-2"></i> |
| </div> |
| <div> |
| <p class="font-medium">Sérum vitamine C</p> |
| <p class="text-sm text-gray-500">Pour unifier le teint et protéger des radicaux libres</p> |
| </div> |
| </div> |
| <div class="flex items-center p-2 bg-gray-50 rounded-lg"> |
| <div class="bg-primary bg-opacity-20 text-primary rounded-full w-10 h-10 flex items-center justify-center mr-3"> |
| <i class="fas fa-3"></i> |
| </div> |
| <div> |
| <p class="font-medium">Crème hydratante SPF 30</p> |
| <p class="text-sm text-gray-500">Pour hydrater et protéger des UV</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="bg-white rounded-xl shadow-md p-4 mb-4"> |
| <h3 class="font-bold text-lg mb-3">Votre routine du soir</h3> |
| <div class="space-y-3"> |
| <div class="flex items-center p-2 bg-gray-50 rounded-lg"> |
| <div class="bg-primary bg-opacity-20 text-primary rounded-full w-10 h-10 flex items-center justify-center mr-3"> |
| <i class="fas fa-1"></i> |
| </div> |
| <div> |
| <p class="font-medium">Démaquillant doux</p> |
| <p class="text-sm text-gray-500">Pour éliminer maquillage et impuretés</p> |
| </div> |
| </div> |
| <div class="flex items-center p-2 bg-gray-50 rounded-lg"> |
| <div class="bg-primary bg-opacity-20 text-primary rounded-full w-10 h-10 flex items-center justify-center mr-3"> |
| <i class="fas fa-2"></i> |
| </div> |
| <div> |
| <p class="font-medium">Sérum rétinol</p> |
| <p class="text-sm text-gray-500">Pour stimuler le renouvellement cellulaire</p> |
| </div> |
| </div> |
| <div class="flex items-center p-2 bg-gray-50 rounded-lg"> |
| <div class="bg-primary bg-opacity-20 text-primary rounded-full w-10 h-10 flex items-center justify-center mr-3"> |
| <i class="fas fa-3"></i> |
| </div> |
| <div> |
| <p class="font-medium">Crème hydratante riche</p> |
| <p class="text-sm text-gray-500">Pour nourrir la peau pendant la nuit</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <h3 class="font-bold text-lg mb-3">Produits recommandés</h3> |
| <div class="grid grid-cols-2 gap-3 mb-4" id="recommendedProducts"> |
| |
| </div> |
| </div> |
| <div class="mt-6"> |
| <button id="goToDashboardBtn" class="w-full bg-primary hover:bg-primary-dark text-white font-bold py-3 px-4 rounded-full shadow-lg transition duration-300"> |
| Accéder à mon dashboard |
| </button> |
| </div> |
| ` |
| } |
| ]; |
| |
| // User profile data |
| const userProfile = { |
| age: null, |
| gender: null, |
| skinType: null, |
| cleansingFrequency: null, |
| currentProducts: null, |
| skinIssues: [], |
| conversation: [] |
| }; |
| |
| // DOM Elements |
| const mainContent = document.getElementById('mainContent'); |
| const onboardingContainer = document.getElementById('onboardingContainer'); |
| const welcomeScreen = document.getElementById('welcomeScreen'); |
| const startOnboardingBtn = document.getElementById('startOnboardingBtn'); |
| const sideMenu = document.getElementById('sideMenu'); |
| const menuBtn = document.getElementById('menuBtn'); |
| const menuOverlay = document.getElementById('menuOverlay'); |
| |
| // Event Listeners |
| menuBtn.addEventListener('click', toggleMenu); |
| menuOverlay.addEventListener('click', toggleMenu); |
| startOnboardingBtn.addEventListener('click', startOnboarding); |
| |
| // Functions |
| function toggleMenu() { |
| sideMenu.classList.toggle('-translate-x-full'); |
| menuOverlay.classList.toggle('hidden'); |
| } |
| |
| function startOnboarding() { |
| welcomeScreen.classList.add('slide-out'); |
| |
| setTimeout(() => { |
| welcomeScreen.remove(); |
| loadOnboardingStep(currentStep); |
| }, 300); |
| } |
| |
| function loadOnboardingStep(stepIndex) { |
| const step = onboardingSteps[stepIndex]; |
| |
| const stepElement = document.createElement('div'); |
| stepElement.className = 'flex flex-col h-full slide-in'; |
| stepElement.innerHTML = step.content; |
| |
| onboardingContainer.innerHTML = ''; |
| onboardingContainer.appendChild(stepElement); |
| |
| // Add event listeners based on current step |
| if (stepIndex === 0) { |
| // Step 1: Basic profile |
| const genderButtons = document.querySelectorAll('.gender-btn'); |
| genderButtons.forEach(btn => { |
| btn.addEventListener('click', function() { |
| genderButtons.forEach(b => b.classList.remove('bg-primary', 'text-white')); |
| this.classList.add('bg-primary', 'text-white'); |
| userProfile.gender = this.dataset.value; |
| }); |
| }); |
| |
| const nextBtn = document.getElementById('nextBtn'); |
| nextBtn.addEventListener('click', () => { |
| userProfile.age = document.getElementById('age').value; |
| userProfile.skinType = document.getElementById('skinType').value; |
| |
| if (validateStep1()) { |
| currentStep++; |
| loadOnboardingStep(currentStep); |
| } else { |
| alert('Veuillez remplir tous les champs'); |
| } |
| }); |
| } else if (stepIndex === 1) { |
| // Step 2: Care habits |
| const currentProductsButtons = document.querySelectorAll('.currentProducts-btn'); |
| currentProductsButtons.forEach(btn => { |
| btn.addEventListener('click', function() { |
| currentProductsButtons.forEach(b => b.classList.remove('bg-primary', 'text-white')); |
| this.classList.add('bg-primary', 'text-white'); |
| userProfile.currentProducts = this.dataset.value; |
| }); |
| }); |
| |
| const skinIssues = document.querySelectorAll('.skinIssue'); |
| skinIssues.forEach(issue => { |
| issue.addEventListener('change', function() { |
| if (this.checked) { |
| userProfile.skinIssues.push(this.value); |
| } else { |
| const index = userProfile.skinIssues.indexOf(this.value); |
| if (index > -1) { |
| userProfile.skinIssues.splice(index, 1); |
| } |
| } |
| }); |
| }); |
| |
| const backBtn = document.getElementById('backBtn'); |
| backBtn.addEventListener('click', () => { |
| currentStep--; |
| loadOnboardingStep(currentStep); |
| }); |
| |
| const nextBtn = document.getElementById('nextBtn'); |
| nextBtn.addEventListener('click', () => { |
| userProfile.cleansingFrequency = document.getElementById('cleansingFrequency').value; |
| |
| if (validateStep2()) { |
| currentStep++; |
| loadOnboardingStep(currentStep); |
| } else { |
| alert('Veuillez remplir tous les champs'); |
| } |
| }); |
| } else if (stepIndex === 2) { |
| // Step 3: AI Conversation |
| const chatContainer = document.getElementById('chatContainer'); |
| const userMessage = document.getElementById('userMessage'); |
| const sendMessageBtn = document.getElementById('sendMessageBtn'); |
| const typingIndicator = document.getElementById('typingIndicator'); |
| const finishBtn = document.getElementById('finishBtn'); |
| |
| sendMessageBtn.addEventListener('click', sendMessage); |
| userMessage.addEventListener('keypress', function(e) { |
| if (e.key === 'Enter') { |
| sendMessage(); |
| } |
| }); |
| |
| finishBtn.addEventListener('click', () => { |
| currentStep++; |
| loadOnboardingStep(currentStep); |
| loadRecommendedProducts(); |
| }); |
| |
| const backBtn = document.getElementById('backBtn'); |
| backBtn.addEventListener('click', () => { |
| currentStep--; |
| loadOnboardingStep(currentStep); |
| }); |
| |
| function sendMessage() { |
| const message = userMessage.value.trim(); |
| if (message) { |
| // Add user message to chat |
| addMessageToChat('user', message); |
| userProfile.conversation.push({ role: 'user', content: message }); |
| userMessage.value = ''; |
| |
| // Show typing indicator |
| typingIndicator.classList.remove('hidden'); |
| |
| // Simulate AI response after delay |
| setTimeout(() => { |
| typingIndicator.classList.add('hidden'); |
| |
| // In a real app, this would call the OpenAI API |
| const aiResponse = generateAIResponse(message); |
| addMessageToChat('ai', aiResponse); |
| userProfile.conversation.push({ role: 'ai', content: aiResponse }); |
| |
| // If it's the last question, show finish button |
| if (userProfile.conversation.length >= 4) { |
| finishBtn.classList.remove('hidden'); |
| } |
| }, 1500); |
| } |
| } |
| |
| function addMessageToChat(role, message) { |
| const messageDiv = document.createElement('div'); |
| messageDiv.className = `chat-message ${role}-message mb-4`; |
| |
| const messageContent = ` |
| <div class="flex items-start"> |
| <div class="${role === 'ai' ? 'bg-primary text-white' : 'bg-accent text-gray-800'} rounded-full w-8 h-8 flex items-center justify-center mr-2"> |
| <i class="fas ${role === 'ai' ? 'fa-robot' : 'fa-user'}"></i> |
| </div> |
| <div class="${role === 'ai' ? 'bg-gray-100' : 'bg-accent'} rounded-lg p-3 max-w-xs"> |
| <p>${message}</p> |
| </div> |
| </div> |
| `; |
| |
| messageDiv.innerHTML = messageContent; |
| chatContainer.appendChild(messageDiv); |
| chatContainer.scrollTop = chatContainer.scrollHeight; |
| } |
| |
| // Initial AI messages |
| setTimeout(() => { |
| addMessageToChat('ai', 'Quels sont vos principaux objectifs pour votre peau?'); |
| userProfile.conversation.push({ |
| role: 'ai', |
| content: 'Quels sont vos principaux objectifs pour votre peau?' |
| }); |
| }, 500); |
| } else if (stepIndex === 3) { |
| // Step 4: Recommendations |
| const goToDashboardBtn = document.getElementById('goToDashboardBtn'); |
| goToDashboardBtn.addEventListener('click', () => { |
| // In a real app, would redirect to dashboard |
| alert('Redirection vers le dashboard'); |
| }); |
| } |
| } |
| |
| function validateStep1() { |
| return userProfile.age && userProfile.gender && userProfile.skinType; |
| } |
| |
| function validateStep2() { |
| return userProfile.cleansingFrequency && userProfile.currentProducts && userProfile.skinIssues.length > 0; |
| } |
| |
| function generateAIResponse(userMessage) { |
| // In a real app, this would call the OpenAI API |
| // Here we simulate responses based on common skincare questions |
| |
| const lowerMessage = userMessage.toLowerCase(); |
| |
| if (lowerMessage.includes('hydratation') || lowerMessage.includes('sèche')) { |
| return "L'hydratation est essentielle, surtout pour les peaux sèches. Je recommande d'utiliser un sérum à l'acide hyaluronique suivi d'une crème hydratante riche en céramides."; |
| } else if (lowerMessage.includes('rides') || lowerMessage.includes('vieillissement')) { |
| return "Pour prévenir les signes de vieillissement, les ingrédients clés sont le rétinol, la vitamine C et les peptides. Commencez par un rétinol à faible concentration 2-3 fois par semaine."; |
| } else if (lowerMessage.includes('acné') || lowerMessage.includes('boutons')) { |
| return "Pour l'acné, une routine avec un nettoyant à l'acide salicylique, un traitement localisé au peroxyde de benzoyle et une crème hydratante non comédogène serait idéale."; |
| } else if (lowerMessage.includes('taches') || lowerMessage.includes('pigmentation')) { |
| return "Les taches pigmentaires répondent bien à la vitamine C, à l'acide kojique et à la niacinamide. N'oubliez pas d'utiliser un SPF quotidiennement pour prévenir leur apparition."; |
| } else if (lowerMessage.includes('routine') || lowerMessage.includes('conseil')) { |
| return "Votre routine devrait inclure: nettoyage, traitement ciblé (comme un sérum), hydratation et protection solaire le matin. Le soir, ajoutez un démaquillage en profondeur."; |
| } else { |
| return "Merci pour ces informations! Pour affiner mes recommandations, pourriez-vous me dire quels types de produits vous préférez (naturels, de luxe, pharmacie, etc.)?"; |
| } |
| } |
| |
| function loadRecommendedProducts() { |
| // In a real app, this would call an external API |
| // Here we simulate API response with mock data |
| |
| const products = [ |
| { |
| id: 1, |
| name: "Nettoyant Doux Hydratant", |
| brand: "CeraVe", |
| price: "14,90€", |
| image: "https://m.media-amazon.com/images/I/61O2WXYJRVL._SL1500_.jpg", |
| rating: 4.5 |
| }, |
| { |
| id: 2, |
| name: "Sérum Vitamine C 20%", |
| brand: "The Ordinary", |
| price: "12,90€", |
| image: "https://m.media-amazon.com/images/I/61O2WXYJRVL._SL1500_.jpg", |
| rating: 4.7 |
| }, |
| { |
| id: 3, |
| name: "Crème Hydratante SPF 30", |
| brand: "La Roche-Posay", |
| price: "19,50€", |
| image: "https://m.media-amazon.com/images/I/61O2WXYJRVL._SL1500_.jpg", |
| rating: 4.6 |
| }, |
| { |
| id: 4, |
| name: "Rétinol 0.5% en Squalane", |
| brand: "The Ordinary", |
| price: "11,90€", |
| image: "https://m.media-amazon.com/images/I/61O2WXYJRVL._SL1500_.jpg", |
| rating: 4.3 |
| }, |
| { |
| id: 5, |
| name: "Masque Hydratant Nuit", |
| brand: "Neutrogena", |
| price: "8,90€", |
| image: "https://m.media-amazon.com/images/I/61O2WXYJRVL._SL1500_.jpg", |
| rating: 4.4 |
| }, |
| { |
| id: 6, |
| name: "Sérum Acide Hyaluronique", |
| brand: "The Inkey List", |
| price: "9,90€", |
| image: "https://m.media-amazon.com/images/I/61O2WXYJRVL._SL1500_.jpg", |
| rating: 4.5 |
| } |
| ]; |
| |
| const productsContainer = document.getElementById('recommendedProducts'); |
| productsContainer.innerHTML = ''; |
| |
| products.forEach(product => { |
| const productElement = document.createElement('div'); |
| productElement.className = 'product-card bg-white rounded-lg shadow-md overflow-hidden fade-in'; |
| productElement.innerHTML = ` |
| <img src="${product.image}" alt="${product.name}" class="w-full h-32 object-cover"> |
| <div class="p-3"> |
| <h4 class="font-bold text-sm truncate">${product.brand}</h4> |
| <h3 class="font-semibold text-sm mb-1 truncate">${product.name}</h3> |
| <div class="flex items-center justify-between"> |
| <span class="text-primary font-bold">${product.price}</span> |
| <div class="flex items-center"> |
| <i class="fas fa-star text-yellow-400 text-xs"></i> |
| <span class="text-xs ml-1">${product.rating}</span> |
| </div> |
| </div> |
| </div> |
| `; |
| |
| productsContainer.appendChild(productElement); |
| }); |
| } |
| </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=SKINMATEAPPDEV/v2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |