v2 / index.html
SKINMATEAPPDEV's picture
Add 2 files
8e5059e verified
Raw History Blame Contribute Delete
39.9 kB
<!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">
<!-- App Container -->
<div id="app" class="min-h-screen flex flex-col">
<!-- Header -->
<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 Content - Will be dynamically loaded -->
<main id="mainContent" class="flex-1 p-4 overflow-y-auto">
<!-- Onboarding screens will be loaded here -->
<div id="onboardingContainer" class="h-full flex flex-col">
<!-- Welcome Screen -->
<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>
<!-- Navigation -->
<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>
<!-- Side Menu -->
<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">
<!-- Products will be loaded here from API -->
</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>