Hugging Face's logo

Spaces:
Yocapp
/
yoc-app
Running

App Files Community
yoc-app / index.html
Yocapp's picture
Yocapp
Add 1 files
d47f968 verified
Raw
History Blame Contribute Delete
59.9 kB
<!DOCTYPE html>
<html lang="fr">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>YOC - Batch Cooking Anti-Gaspi</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>
 @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: #f8f9fa;
 max-width: 430px;
 margin: 0 auto;
 position: relative;
 height: 100vh;
 overflow-x: hidden;
 color: #2d3748;
 }
.gradient-bg {
 background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%);
 }
.recipe-card {
 transition: transform 0.3s ease;
 flex: 0 0 auto;
 width: 70%;
 scroll-snap-align: start;
 }
.recipe-card:hover {
 transform: translateY(-5px);
 }
.shadow-soft {
 box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
 }
.tab-active {
 position: relative;
 color: #38a169;
 }
.tab-active:after {
 content: '';
 position: absolute;
 bottom: -8px;
 left: 50%;
 transform: translateX(-50%);
 width: 6px;
 height: 6px;
 border-radius: 50%;
 background-color: #38a169;
 }
.ingredient-tag {
 transition: all 0.2s ease;
 }
.ingredient-tag:hover {
 background-color: #38a169;
 color: white;
 }
.recipe-carousel {
 display: flex;
 overflow-x: auto;
 scroll-snap-type: x mandatory;
 gap: 16px;
 padding-bottom: 16px;
 -webkit-overflow-scrolling: touch;
 scrollbar-width: none;
 }
.recipe-carousel::-webkit-scrollbar {
 display: none;
 }
.recipe-badge {
 position: absolute;
 top: 10px;
 left: 10px;
 padding: 4px 8px;
 border-radius: 12px;
 font-size: 10px;
 font-weight: 600;
 text-transform: uppercase;
 }
.badge-discovery {
 background-color: #9F7AEA;
 color: white;
 }
.badge-classic {
 background-color: #4299E1;
 color: white;
 }
.badge-vegetarian {
 background-color: #48BB78;
 color: white;
 }
.hidden {
 display: none;
 }
.meal-option {
 transition: all 0.2s ease;
 }
.meal-option:hover {
 transform: scale(1.03);
 }
.selected-day {
 background-color: #38a169;
 color: white;
 }
.day-meal {
 transition: all 0.2s ease;
 }
.day-meal:hover {
 background-color: #f0fff4;
 }
.meal-selected {
 border-left: 4px solid #38a169;
 background-color: #f0fff4;
 }
.day-meal-image {
 width: 50px;
 height: 50px;
 object-fit: cover;
 border-radius: 8px;
 }
/* Chat styles */
 .chat-container {
 height: 400px;
 overflow-y: auto;
 scrollbar-width: thin;
 }
.chat-container::-webkit-scrollbar {
 width: 6px;
 }
.chat-container::-webkit-scrollbar-thumb {
 background-color: rgba(0,0,0,0.2);
 border-radius: 3px;
 }
.user-message {
 background-color: #e3f2fd;
 border-radius: 18px 18px 0 18px;
 max-width: 80%;
 }
.nova-message {
 background-color: #f1f1f1;
 border-radius: 18px 18px 18px 0;
 max-width: 80%;
 }
/* Group styles */
 .member-card {
 transition: all 0.2s ease;
 }
.member-card:hover {
 transform: translateY(-2px);
 }
/* Animation for NOVA */
 @keyframes pulse {
 0% { transform: scale(1); }
 50% { transform: scale(1.05); }
 100% { transform: scale(1); }
 }
.pulse-animation {
 animation: pulse 2s infinite;
 }
 </style>
</head>
<body class="relative pb-20">
 <!-- Main Page -->
 <div id="main-page">
 <!-- Header -->
 <header class="gradient-bg text-white p-4 rounded-b-3xl shadow-soft">
 <div class="flex justify-between items-center">
 <div class="flex items-center space-x-2">
 <div class="w-10 h-10 bg-white rounded-full flex items-center justify-center">
 <span class="text-green-500 font-bold text-xl">YOC</span>
 </div>
 <h1 class="font-bold text-xl"></h1>
 </div>
 <div class="flex space-x-4">
 <button onclick="showCollaborativeGroup()" class="w-8 h-8 bg-white bg-opacity-20 rounded-full flex items-center justify-center">
 <i class="fas fa-users"></i>
 </button>
 <button onclick="showNovaAssistant()" class="w-8 h-8 bg-white bg-opacity-20 rounded-full flex items-center justify-center pulse-animation">
 <i class="fas fa-robot"></i>
 </button>
 <button class="w-8 h-8 bg-white bg-opacity-20 rounded-full flex items-center justify-center">
 <i class="fas fa-user"></i>
 </button>
 </div>
 </div>
<div class="mt-6">
 <h2 class="text-2xl font-bold">Bon appétit <span class="text-yellow-200">sans gaspiller</span></h2>
 <p class="text-sm opacity-90 mt-1">Découvrez des recettes anti-gaspi et batch cooking</p>
 </div>
<div class="mt-6 flex space-x-3">
 <button class="bg-white text-green-600 px-4 py-2 rounded-full text-sm font-medium flex items-center">
 <i class="fas fa-bolt mr-1"></i> Recettes express
 </button>
 <button class="bg-white bg-opacity-20 px-4 py-2 rounded-full text-sm font-medium flex items-center">
 <i class="fas fa-utensils mr-1"></i> Batch cooking
 </button>
 </div>
 </header>
<!-- Main Content -->
 <main class="px-4 mt-6">
 <!-- Categories -->
 <div class="flex overflow-x-auto pb-2 space-x-4 hide-scrollbar">
 <button class="flex-shrink-0 bg-green-100 text-green-700 px-4 py-2 rounded-full text-sm font-medium">
 Toutes
 </button>
 <button class="flex-shrink-0 bg-gray-100 text-gray-700 px-4 py-2 rounded-full text-sm font-medium">
 Légumes
 </button>
 <button class="flex-shrink-0 bg-gray-100 text-gray-700 px-4 py-2 rounded-full text-sm font-medium">
 Viandes
 </button>
 <button class="flex-shrink-0 bg-gray-100 text-gray-700 px-4 py-2 rounded-full text-sm font-medium">
 Restes
 </button>
 <button class="flex-shrink-0 bg-gray-100 text-gray-700 px-4 py-2 rounded-full text-sm font-medium">
 Desserts
 </button>
 </div>
<!-- Featured Recipes Carousel -->
 <h3 class="font-bold text-lg mt-6 mb-3">Recettes du moment</h3>
 <div class="recipe-carousel">
 <!-- Recipe 1 - Découverte -->
 <div class="recipe-card bg-white rounded-xl overflow-hidden shadow-soft" onclick="showMealPlanner('discovery')">
 <div class="relative">
 <img src="https://images.unsplash.com/photo-1546069901-ba9599a7e63c?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80"
alt="Salade anti-gaspi" class="w-full h-32 object-cover">
 <div class="recipe-badge badge-discovery">Découverte</div>
 <div class="absolute top-2 right-2 bg-white bg-opacity-80 rounded-full w-8 h-8 flex items-center justify-center">
 <i class="fas fa-heart text-gray-500"></i>
 </div>
 </div>
 <div class="p-3">
 <h4 class="font-semibold text-sm">Salade de restes créative</h4>
 <div class="flex justify-between items-center mt-2">
 <div class="flex items-center text-xs text-gray-500">
 <i class="fas fa-clock mr-1"></i> 15 min
 </div>
 <div class="flex items-center text-xs text-gray-500">
 <i class="fas fa-utensils mr-1"></i> 2 pers
 </div>
 </div>
 </div>
 </div>
<!-- Recipe 2 - Classique -->
 <div class="recipe-card bg-white rounded-xl overflow-hidden shadow-soft" onclick="showMealPlanner('classic')">
 <div class="relative">
 <img src="https://images.unsplash.com/photo-1559847844-5315695dadae?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80"
alt="Poulet rôti" class="w-full h-32 object-cover">
 <div class="recipe-badge badge-classic">Classique</div>
 <div class="absolute top-2 right-2 bg-white bg-opacity-80 rounded-full w-8 h-8 flex items-center justify-center">
 <i class="fas fa-heart text-gray-500"></i>
 </div>
 </div>
 <div class="p-3">
 <h4 class="font-semibold text-sm">Poulet rôti batch</h4>
 <div class="flex justify-between items-center mt-2">
 <div class="flex items-center text-xs text-gray-500">
 <i class="fas fa-clock mr-1"></i> 45 min
 </div>
 <div class="flex items-center text-xs text-gray-500">
 <i class="fas fa-utensils mr-1"></i> 4 pers
 </div>
 </div>
 </div>
 </div>
<!-- Recipe 3 - Végétarien -->
 <div class="recipe-card bg-white rounded-xl overflow-hidden shadow-soft" onclick="showMealPlanner('vegetarian')">
 <div class="relative">
 <img src="https://images.unsplash.com/photo-1512621776951-a57141f2eefd?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80"
alt="Bowl de légumes" class="w-full h-32 object-cover">
 <div class="recipe-badge badge-vegetarian">Végétarien</div>
 <div class="absolute top-2 right-2 bg-white bg-opacity-80 rounded-full w-8 h-8 flex items-center justify-center">
 <i class="fas fa-heart text-gray-500"></i>
 </div>
 </div>
 <div class="p-3">
 <h4 class="font-semibold text-sm">Bowl batch cooking</h4>
 <div class="flex justify-between items-center mt-2">
 <div class="flex items-center text-xs text-gray-500">
 <i class="fas fa-clock mr-1"></i> 25 min
 </div>
 <div class="flex items-center text-xs text-gray-500">
 <i class="fas fa-utensils mr-1"></i> 4 pers
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- Batch Cooking Section -->
 <h3 class="font-bold text-lg mt-8 mb-3">Batch cooking de la semaine</h3>
 <div class="bg-white rounded-xl p-4 shadow-soft">
 <div class="flex items-center">
 <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center text-green-600">
 <i class="fas fa-calendar-alt text-xl"></i>
 </div>
 <div class="ml-3">
 <h4 class="font-semibold">Planification facile</h4>
 <p class="text-xs text-gray-500" id="meal-count">5 repas en 2h de préparation</p>
 </div>
 </div>
<div class="mt-4 grid grid-cols-3 gap-2" id="weekly-meals">
 <div class="bg-green-50 rounded-lg p-2 text-center">
 <p class="text-xs font-medium">Lundi</p>
 <p class="text-green-600 font-bold text-sm">Curry</p>
 </div>
 <div class="bg-green-50 rounded-lg p-2 text-center">
 <p class="text-xs font-medium">Mardi</p>
 <p class="text-green-600 font-bold text-sm">Pâtes</p>
 </div>
 <div class="bg-green-50 rounded-lg p-2 text-center">
 <p class="text-xs font-medium">Mercredi</p>
 <p class="text-green-600 font-bold text-sm">Gratin</p>
 </div>
 <div class="bg-green-50 rounded-lg p-2 text-center">
 <p class="text-xs font-medium">Jeudi</p>
 <p class="text-green-600 font-bold text-sm">Soupe</p>
 </div>
 <div class="bg-green-50 rounded-lg p-2 text-center">
 <p class="text-xs font-medium">Vendredi</p>
 <p class="text-green-600 font-bold text-sm">Wok</p>
 </div>
 <div class="bg-green-50 rounded-lg p-2 text-center">
 <p class="text-xs font-medium">+</p>
 <p class="text-green-600 font-bold text-sm">Voir</p>
 </div>
 </div>
<button class="w-full mt-4 bg-green-500 text-white py-2 rounded-lg font-medium text-sm">
 Voir le planning complet
 </button>
 </div>
<!-- Ingredients to Use -->
 <h3 class="font-bold text-lg mt-8 mb-3">Vos ingrédients à utiliser</h3>
 <div class="flex flex-wrap gap-2">
 <div class="ingredient-tag bg-gray-100 text-gray-700 px-3 py-1 rounded-full text-xs font-medium">
 Carottes (3)
 </div>
 <div class="ingredient-tag bg-gray-100 text-gray-700 px-3 py-1 rounded-full text-xs font-medium">
 Poulet
 </div>
 <div class="ingredient-tag bg-gray-100 text-gray-700 px-3 py-1 rounded-full text-xs font-medium">
 Riz cuit
 </div>
 <div class="ingredient-tag bg-gray-100 text-gray-700 px-3 py-1 rounded-full text-xs font-medium">
 Tomates (5)
 </div>
 <div class="ingredient-tag bg-gray-100 text-gray-700 px-3 py-1 rounded-full text-xs font-medium">
 Oignons
 </div>
 <div class="ingredient-tag bg-gray-100 text-gray-700 px-3 py-1 rounded-full text-xs font-medium">
 Pain rassis
 </div>
 </div>
<button onclick="showNovaAssistant()" class="w-full mt-4 border border-green-500 text-green-500 py-2 rounded-lg font-medium text-sm">
 Scanner mes ingrédients
 </button>
 </main>
 </div>
<!-- Meal Planner Page (hidden by default) -->
 <div id="meal-planner-page" class="hidden">
 <header class="gradient-bg text-white p-4 rounded-b-3xl shadow-soft">
 <div class="flex justify-between items-center">
 <button onclick="hideMealPlanner()" class="w-8 h-8 bg-white bg-opacity-20 rounded-full flex items-center justify-center">
 <i class="fas fa-arrow-left"></i>
 </button>
 <h1 class="font-bold text-xl">Planifier la semaine</h1>
 <div class="w-8 h-8"></div> <!-- Spacer for alignment -->
 </div>
<div class="mt-4">
 <h2 class="text-xl font-bold" id="planner-title">Créez votre menu</h2>
 <p class="text-sm opacity-90 mt-1">Modifiez les plats si nécessaire</p>
 </div>
 </header>
<main class="px-4 mt-6">
 <!-- Weekly Meals List -->
 <div class="bg-white rounded-xl overflow-hidden shadow-soft mb-6">
 <!-- Lundi -->
 <div class="day-meal p-4 border-b border-gray-100" data-day="lundi">
 <div class="flex justify-between items-center">
 <div class="flex items-center space-x-3">
 <img src="https://images.unsplash.com/photo-1546069901-ba9599a7e63c?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80"
alt="Salade de restes" class="day-meal-image">
 <div>
 <h3 class="font-semibold">Lundi</h3>
 <p class="text-sm text-gray-600" id="lundi-meal">Salade de restes créative</p>
 </div>
 </div>
 <button class="text-green-500" onclick="showMealOptions('lundi')">
 <i class="fas fa-exchange-alt"></i>
 </button>
 </div>
 </div>
<!-- Mardi -->
 <div class="day-meal p-4 border-b border-gray-100" data-day="mardi">
 <div class="flex justify-between items-center">
 <div class="flex items-center space-x-3">
 <img src="https://images.unsplash.com/photo-1559847844-5315695dadae?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80"
alt="Poulet rôti" class="day-meal-image">
 <div>
 <h3 class="font-semibold">Mardi</h3>
 <p class="text-sm text-gray-600" id="mardi-meal">Poulet rôti batch</p>
 </div>
 </div>
 <button class="text-green-500" onclick="showMealOptions('mardi')">
 <i class="fas fa-exchange-alt"></i>
 </button>
 </div>
 </div>
<!-- Mercredi -->
 <div class="day-meal p-4 border-b border-gray-100" data-day="mercredi">
 <div class="flex justify-between items-center">
 <div class="flex items-center space-x-3">
 <img src="https://images.unsplash.com/photo-1512621776951-a57141f2eefd?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80"
alt="Bowl végétarien" class="day-meal-image">
 <div>
 <h3 class="font-semibold">Mercredi</h3>
 <p class="text-sm text-gray-600" id="mercredi-meal">Bowl batch cooking</p>
 </div>
 </div>
 <button class="text-green-500" onclick="showMealOptions('mercredi')">
 <i class="fas fa-exchange-alt"></i>
 </button>
 </div>
 </div>
<!-- Jeudi -->
 <div class="day-meal p-4 border-b border-gray-100" data-day="jeudi">
 <div class="flex justify-between items-center">
 <div class="flex items-center space-x-3">
 <img src="https://images.unsplash.com/photo-1611279301496-04d28b7f9099?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80"
alt="Pâtes carbonara" class="day-meal-image">
 <div>
 <h3 class="font-semibold">Jeudi</h3>
 <p class="text-sm text-gray-600" id="jeudi-meal">Pâtes carbonara</p>
 </div>
 </div>
 <button class="text-green-500" onclick="showMealOptions('jeudi')">
 <i class="fas fa-exchange-alt"></i>
 </button>
 </div>
 </div>
<!-- Vendredi -->
 <div class="day-meal p-4" data-day="vendredi">
 <div class="flex justify-between items-center">
 <div class="flex items-center space-x-3">
 <img src="https://images.unsplash.com/photo-1547592180-85f173990554?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80"
alt="Soupe de légumes" class="day-meal-image">
 <div>
 <h3 class="font-semibold">Vendredi</h3>
 <p class="text-sm text-gray-600" id="vendredi-meal">Soupe de légumes</p>
 </div>
 </div>
 <button class="text-green-500" onclick="showMealOptions('vendredi')">
 <i class="fas fa-exchange-alt"></i>
 </button>
 </div>
 </div>
 </div>
<!-- Meal Options (hidden by default) -->
 <div id="meal-options" class="hidden bg-white rounded-xl p-4 shadow-soft mb-6">
 <h3 class="font-semibold mb-3">Choisissez un plat</h3>
 <div class="grid grid-cols-2 gap-3">
 <div class="meal-option bg-gray-50 rounded-lg p-3 text-center" onclick="selectMeal('Salade de restes créative', 'https://images.unsplash.com/photo-1546069901-ba9599a7e63c?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80')">
 <img src="https://images.unsplash.com/photo-1546069901-ba9599a7e63c?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80"
alt="Salade de restes" class="w-full h-16 object-cover rounded-lg mb-2">
 <h4 class="font-semibold text-xs">Salade de restes</h4>
 <div class="flex justify-center items-center mt-1 text-xs text-gray-500">
 <i class="fas fa-clock mr-1"></i> 15 min
 </div>
 </div>
 <div class="meal-option bg-gray-50 rounded-lg p-3 text-center" onclick="selectMeal('Poulet rôti batch', 'https://images.unsplash.com/photo-1559847844-5315695dadae?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80')">
 <img src="https://images.unsplash.com/photo-1559847844-5315695dadae?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80"
alt="Poulet rôti" class="w-full h-16 object-cover rounded-lg mb-2">
 <h4 class="font-semibold text-xs">Poulet rôti</h4>
 <div class="flex justify-center items-center mt-1 text-xs text-gray-500">
 <i class="fas fa-clock mr-1"></i> 45 min
 </div>
 </div>
 <div class="meal-option bg-gray-50 rounded-lg p-3 text-center" onclick="selectMeal('Bowl batch cooking', 'https://images.unsplash.com/photo-1512621776951-a57141f2eefd?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80')">
 <img src="https://images.unsplash.com/photo-1512621776951-a57141f2eefd?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80"
alt="Bowl végétarien" class="w-full h-16 object-cover rounded-lg mb-2">
 <h4 class="font-semibold text-xs">Bowl végétarien</h4>
 <div class="flex justify-center items-center mt-1 text-xs text-gray-500">
 <i class="fas fa-clock mr-1"></i> 25 min
 </div>
 </div>
 <div class="meal-option bg-gray-50 rounded-lg p-3 text-center" onclick="selectMeal('Pâtes carbonara', 'https://images.unsplash.com/photo-1611279301496-04d28b7f9099?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80')">
 <img src="https://images.unsplash.com/photo-1611279301496-04d28b7f9099?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80"
alt="Pâtes carbonara" class="w-full h-16 object-cover rounded-lg mb-2">
 <h4 class="font-semibold text-xs">Pâtes carbonara</h4>
 <div class="flex justify-center items-center mt-1 text-xs text-gray-500">
 <i class="fas fa-clock mr-1"></i> 20 min
 </div>
 </div>
 <div class="meal-option bg-gray-50 rounded-lg p-3 text-center" onclick="selectMeal('Soupe de légumes', 'https://images.unsplash.com/photo-1547592180-85f173990554?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80')">
 <img src="https://images.unsplash.com/photo-1547592180-85f173990554?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80"
alt="Soupe de légumes" class="w-full h-16 object-cover rounded-lg mb-2">
 <h4 class="font-semibold text-xs">Soupe de légumes</h4>
 <div class="flex justify-center items-center mt-1 text-xs text-gray-500">
 <i class="fas fa-clock mr-1"></i> 30 min
 </div>
 </div>
 <div class="meal-option bg-gray-50 rounded-lg p-3 text-center" onclick="selectMeal('Gratin dauphinois', 'https://images.unsplash.com/photo-1603105037880-8802c0a7b071?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80')">
 <img src="https://images.unsplash.com/photo-1603105037880-8802c0a7b071?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80"
alt="Gratin dauphinois" class="w-full h-16 object-cover rounded-lg mb-2">
 <h4 class="font-semibold text-xs">Gratin dauphinois</h4>
 <div class="flex justify-center items-center mt-1 text-xs text-gray-500">
 <i class="fas fa-clock mr-1"></i> 50 min
 </div>
 </div>
 </div>
 <button onclick="hideMealOptions()" class="w-full mt-4 border border-gray-300 text-gray-700 py-2 rounded-lg font-medium text-sm">
 Annuler
 </button>
 </div>
<button id="validate-plan" class="w-full bg-green-500 text-white py-3 rounded-lg font-medium text-sm">
 Valider mon planning
 </button>
 </main>
 </div>
<!-- Collaborative Group Page -->
 <div id="collaborative-group-page" class="hidden">
 <header class="gradient-bg text-white p-4 rounded-b-3xl shadow-soft">
 <div class="flex justify-between items-center">
 <button onclick="hideCollaborativeGroup()" class="w-8 h-8 bg-white bg-opacity-20 rounded-full flex items-center justify-center">
 <i class="fas fa-arrow-left"></i>
 </button>
 <h1 class="font-bold text-xl">Groupe collaboratif</h1>
 <div class="w-8 h-8"></div> <!-- Spacer for alignment -->
 </div>
<div class="mt-4">
 <h2 class="text-xl font-bold">Planifiez ensemble</h2>
 <p class="text-sm opacity-90 mt-1">Partagez vos idées de repas avec votre groupe</p>
 </div>
 </header>
<main class="px-4 mt-6">
 <!-- Group Members -->
 <div class="bg-white rounded-xl p-4 shadow-soft mb-6">
 <div class="flex justify-between items-center mb-4">
 <h3 class="font-semibold">Membres du groupe</h3>
 <button onclick="showInviteForm()" class="text-green-500 text-sm font-medium">
 <i class="fas fa-plus mr-1"></i> Inviter
 </button>
 </div>
<div class="space-y-3">
 <!-- Current User -->
 <div class="member-card bg-gray-50 rounded-lg p-3 flex items-center">
 <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center text-green-600">
 <i class="fas fa-user"></i>
 </div>
 <div class="ml-3">
 <h4 class="font-medium">Vous</h4>
 <p class="text-xs text-gray-500">Administrateur</p>
 </div>
 <div class="ml-auto text-gray-400">
 <i class="fas fa-ellipsis-v"></i>
 </div>
 </div>
<!-- Member 1 -->
 <div class="member-card bg-gray-50 rounded-lg p-3 flex items-center">
 <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center text-blue-600">
 <span class="font-medium">JD</span>
 </div>
 <div class="ml-3">
 <h4 class="font-medium">Jean Dupont</h4>
 <p class="text-xs text-gray-500">Membre</p>
 </div>
 <div class="ml-auto text-gray-400">
 <i class="fas fa-ellipsis-v"></i>
 </div>
 </div>
<!-- Member 2 -->
 <div class="member-card bg-gray-50 rounded-lg p-3 flex items-center">
 <div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center text-purple-600">
 <span class="font-medium">MA</span>
 </div>
 <div class="ml-3">
 <h4 class="font-medium">Marie André</h4>
 <p class="text-xs text-gray-500">Membre</p>
 </div>
 <div class="ml-auto text-gray-400">
 <i class="fas fa-ellipsis-v"></i>
 </div>
 </div>
 </div>
 </div>
<!-- Group Suggestions -->
 <div class="bg-white rounded-xl p-4 shadow-soft mb-6">
 <h3 class="font-semibold mb-4">Suggestions du groupe</h3>
<div class="space-y-4">
 <!-- Suggestion 1 -->
 <div class="bg-gray-50 rounded-lg p-3">
 <div class="flex items-center">
 <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center text-blue-600">
 <span class="text-xs font-medium">JD</span>
 </div>
 <div class="ml-2">
 <h4 class="text-sm font-medium">Jean Dupont</h4>
 <p class="text-xs text-gray-500">Hier à 18:30</p>
 </div>
 </div>
 <p class="mt-2 text-sm">"Pourquoi ne pas essayer une salade de pâtes avec les restes de légumes ?"</p>
 <div class="mt-2 flex space-x-2">
 <button class="text-green-500 text-xs">
 <i class="fas fa-thumbs-up mr-1"></i> J'aime
 </button>
 <button class="text-gray-500 text-xs">
 <i class="fas fa-comment mr-1"></i> Commenter
 </button>
 </div>
 </div>
<!-- Suggestion 2 -->
 <div class="bg-gray-50 rounded-lg p-3">
 <div class="flex items-center">
 <div class="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center text-purple-600">
 <span class="text-xs font-medium">MA</span>
 </div>
 <div class="ml-2">
 <h4 class="text-sm font-medium">Marie André</h4>
 <p class="text-xs text-gray-500">Aujourd'hui à 09:15</p>
 </div>
 </div>
 <p class="mt-2 text-sm">"J'ai vu qu'on avait du poulet, je propose un curry pour mardi soir."</p>
 <div class="mt-2 flex space-x-2">
 <button class="text-green-500 text-xs">
 <i class="fas fa-thumbs-up mr-1"></i> J'aime
 </button>
 <button class="text-gray-500 text-xs">
 <i class="fas fa-comment mr-1"></i> Commenter
 </button>
 </div>
 </div>
 </div>
 </div>
<!-- Add Suggestion -->
 <div class="bg-white rounded-xl p-4 shadow-soft">
 <h3 class="font-semibold mb-3">Ajouter une suggestion</h3>
 <textarea class="w-full border border-gray-200 rounded-lg p-3 text-sm" placeholder="Partagez votre idée de repas avec le groupe..."></textarea>
 <button class="w-full mt-3 bg-green-500 text-white py-2 rounded-lg font-medium text-sm">
 Publier
 </button>
 </div>
 </main>
 </div>
<!-- Invite Form (hidden by default) -->
 <div id="invite-form" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
 <div class="bg-white rounded-xl p-6 w-full max-w-sm mx-4">
 <h3 class="font-semibold text-lg mb-4">Inviter un membre</h3>
<div class="mb-4">
 <label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
 <input type="email" class="w-full border border-gray-300 rounded-lg p-2 text-sm" placeholder="email@exemple.com">
 </div>
<div class="mb-4">
 <label class="block text-sm font-medium text-gray-700 mb-1">Rôle</label>
 <select class="w-full border border-gray-300 rounded-lg p-2 text-sm">
 <option>Membre</option>
 <option>Administrateur</option>
 </select>
 </div>
<div class="flex space-x-3">
 <button onclick="hideInviteForm()" class="flex-1 border border-gray-300 text-gray-700 py-2 rounded-lg font-medium text-sm">
 Annuler
 </button>
 <button onclick="sendInvitation()" class="flex-1 bg-green-500 text-white py-2 rounded-lg font-medium text-sm">
 Envoyer
 </button>
 </div>
 </div>
 </div>
<!-- NOVA Assistant Page -->
 <div id="nova-assistant-page" class="hidden">
 <header class="gradient-bg text-white p-4 rounded-b-3xl shadow-soft">
 <div class="flex justify-between items-center">
 <button onclick="hideNovaAssistant()" class="w-8 h-8 bg-white bg-opacity-20 rounded-full flex items-center justify-center">
 <i class="fas fa-arrow-left"></i>
 </button>
 <div class="flex items-center">
 <div class="w-8 h-8 bg-white rounded-full flex items-center justify-center mr-2">
 <i class="fas fa-robot text-green-500"></i>
 </div>
 <h1 class="font-bold text-xl">Assistant NOVA</h1>
 </div>
 <div class="w-8 h-8"></div> <!-- Spacer for alignment -->
 </div>
 </header>
<main class="px-4 mt-6">
 <!-- Chat Container -->
 <div class="chat-container bg-white rounded-xl p-4 shadow-soft mb-4" id="nova-chat">
 <!-- Welcome message -->
 <div class="nova-message p-3 mb-3 w-3/4">
 <p>Bonjour ! Je suis NOVA, votre assistant anti-gaspi. Quels ingrédients avez-vous sous la main ?</p>
 </div>
<!-- Sample response (will be added dynamically) -->
 <div class="user-message p-3 mb-3 ml-auto w-3/4 hidden">
 <p class="ingredients-input"></p>
 </div>
<!-- Sample response (will be added dynamically) -->
 <div class="nova-message p-3 mb-3 w-3/4 hidden">
 <p class="nova-response"></p>
 </div>
 </div>
<!-- Input Area -->
 <div class="bg-white rounded-xl p-4 shadow-soft">
 <div class="flex items-center">
 <input type="text" id="nova-input" class="flex-1 border border-gray-200 rounded-full py-2 px-4 text-sm" placeholder="Écrivez votre message...">
 <button onclick="sendVoiceCommand()" class="ml-2 w-10 h-10 bg-green-100 rounded-full flex items-center justify-center text-green-600">
 <i class="fas fa-microphone"></i>
 </button>
 <button onclick="sendTextCommand()" class="ml-2 w-10 h-10 bg-green-500 rounded-full flex items-center justify-center text-white">
 <i class="fas fa-paper-plane"></i>
 </button>
 </div>
<!-- Quick Ingredients -->
 <div class="mt-3 flex flex-wrap gap-2">
 <button onclick="addQuickIngredient('carottes')" class="ingredient-tag bg-gray-100 text-gray-700 px-3 py-1 rounded-full text-xs font-medium">
 Carottes
 </button>
 <button onclick="addQuickIngredient('poulet')" class="ingredient-tag bg-gray-100 text-gray-700 px-3 py-1 rounded-full text-xs font-medium">
 Poulet
 </button>
 <button onclick="addQuickIngredient('riz')" class="ingredient-tag bg-gray-100 text-gray-700 px-3 py-1 rounded-full text-xs font-medium">
 Riz
 </button>
 <button onclick="addQuickIngredient('tomates')" class="ingredient-tag bg-gray-100 text-gray-700 px-3 py-1 rounded-full text-xs font-medium">
 Tomates
 </button>
 </div>
 </div>
<!-- Suggested Recipes (hidden by default) -->
 <div id="suggested-recipes" class="hidden mt-6">
 <h3 class="font-semibold mb-3">Suggestions de recettes</h3>
<div class="bg-white rounded-xl p-4 shadow-soft mb-4">
 <div class="flex items-center mb-3">
 <img src="https://images.unsplash.com/photo-1546069901-ba9599a7e63c?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80"
alt="Salade de restes" class="w-16 h-16 object-cover rounded-lg">
 <div class="ml-3">
 <h4 class="font-semibold">Salade de restes créative</h4>
 <div class="flex items-center text-xs text-gray-500">
 <i class="fas fa-clock mr-1"></i> 15 min
 <i class="fas fa-utensils ml-2 mr-1"></i> 2 pers
 </div>
 </div>
 </div>
 <div class="flex justify-between">
 <button onclick="modifyIngredients()" class="text-green-500 text-sm font-medium">
 <i class="fas fa-edit mr-1"></i> Modifier ingrédients
 </button>
 <button onclick="saveRecipe()" class="text-green-500 text-sm font-medium">
 <i class="fas fa-save mr-1"></i> Sauvegarder
 </button>
 </div>
 </div>
<div class="bg-white rounded-xl p-4 shadow-soft">
 <div class="flex items-center mb-3">
 <img src="https://images.unsplash.com/photo-1512621776951-a57141f2eefd?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80"
alt="Bowl végétarien" class="w-16 h-16 object-cover rounded-lg">
 <div class="ml-3">
 <h4 class="font-semibold">Bowl batch cooking</h4>
 <div class="flex items-center text-xs text-gray-500">
 <i class="fas fa-clock mr-1"></i> 25 min
 <i class="fas fa-utensils ml-2 mr-1"></i> 4 pers
 </div>
 </div>
 </div>
 <div class="flex justify-between">
 <button onclick="modifyIngredients()" class="text-green-500 text-sm font-medium">
 <i class="fas fa-edit mr-1"></i> Modifier ingrédients
 </button>
 <button onclick="saveRecipe()" class="text-green-500 text-sm font-medium">
 <i class="fas fa-save mr-1"></i> Sauvegarder
 </button>
 </div>
 </div>
 </div>
 </main>
 </div>
<!-- Bottom Navigation -->
 <nav class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 flex justify-around py-3 px-4">
 <a href="#" class="flex flex-col items-center text-green-500 tab-active">
 <i class="fas fa-home text-lg"></i>
 <span class="text-xs mt-1">Accueil</span>
 </a>
 <a href="#" class="flex flex-col items-center text-gray-500">
 <i class="fas fa-book text-lg"></i>
 <span class="text-xs mt-1">Recettes</span>
 </a>
 <a href="#" class="flex flex-col items-center text-gray-500">
 <i class="fas fa-plus-circle text-lg"></i>
 <span class="text-xs mt-1">Ajouter</span>
 </a>
 <a href="#" class="flex flex-col items-center text-gray-500">
 <i class="fas fa-shopping-basket text-lg"></i>
 <span class="text-xs mt-1">Courses</span>
 </a>
 <a href="#" class="flex flex-col items-center text-gray-500">
 <i class="fas fa-cog text-lg"></i>
 <span class="text-xs mt-1">Profil</span>
 </a>
 </nav>
<script>
 // Meal planner functionality
 let selectedDays = {
 lundi: { name: "", image: "" },
 mardi: { name: "", image: "" },
 mercredi: { name: "", image: "" },
 jeudi: { name: "", image: "" },
 vendredi: { name: "", image: "" }
 };
let currentSelectedDay = "";
 let recipeType = "";
// Meal suggestions based on recipe type
 const mealSuggestions = {
 discovery: {
 lundi: {
name: "Salade de restes créative",
 image: "https://images.unsplash.com/photo-1546069901-ba9599a7e63c?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80"
 },
 mardi: {
name: "Poulet rôti batch",
 image: "https://images.unsplash.com/photo-1559847844-5315695dadae?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80"
 },
 mercredi: {
name: "Bowl batch cooking",
 image: "https://images.unsplash.com/photo-1512621776951-a57141f2eefd?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80"
 },
 jeudi: {
name: "Pâtes carbonara",
 image: "https://images.unsplash.com/photo-1611279301496-04d28b7f9099?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80"
 },
 vendredi: {
name: "Soupe de légumes",
 image: "https://images.unsplash.com/photo-1547592180-85f173990554?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80"
 }
 },
 classic: {
 lundi: {
name: "Poulet rôti batch",
 image: "https://images.unsplash.com/photo-1559847844-5315695dadae?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80"
 },
 mardi: {
name: "Gratin dauphinois",
 image: "https://images.unsplash.com/photo-1603105037880-8802c0a7b071?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80"
 },
 mercredi: {
name: "Steak frites",
 image: "https://images.unsplash.com/photo-1603360946369-dc9bb6258143?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80"
 },
 jeudi: {
name: "Blanquette de veau",
 image: "https://images.unsplash.com/photo-1604909052743-94e838986d24?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80"
 },
 vendredi: {
name: "Tarte aux poireaux",
 image: "https://images.unsplash.com/photo-1601050690597-df0568f70950?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80"
 }
 },
 vegetarian: {
 lundi: {
name: "Bowl batch cooking",
 image: "https://images.unsplash.com/photo-1512621776951-a57141f2eefd?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80"
 },
 mardi: {
name: "Curry de légumes",
 image: "https://images.unsplash.com/photo-1547592180-85f173990554?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80"
 },
 mercredi: {
name: "Risotto aux champignons",
 image: "https://images.unsplash.com/photo-1603105037880-8802c0a7b071?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80"
 },
 jeudi: {
name: "Tarte aux légumes",
 image: "https://images.unsplash.com/photo-1601050690597-df0568f70950?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80"
 },
 vendredi: {
name: "Soupe de légumes",
 image: "https://images.unsplash.com/photo-1547592180-85f173990554?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80"
 }
 }
 };
function showMealPlanner(type) {
 document.getElementById('main-page').classList.add('hidden');
 document.getElementById('meal-planner-page').classList.remove('hidden');
// Set recipe type and generate suggestions
 recipeType = type;
 generateMealSuggestions(type);
// Set title based on recipe type
 let title = "Créez votre menu";
 if (type === 'discovery') title = "Inspiration Découverte";
 if (type === 'classic') title = "Inspiration Classique";
 if (type === 'vegetarian') title = "Inspiration Végétarienne";
document.getElementById('planner-title').textContent = title;
 }
function generateMealSuggestions(type) {
 const suggestions = mealSuggestions[type];
// Update the UI with suggestions
 for (const day in suggestions) {
 selectedDays[day] = suggestions[day];
 document.getElementById(`${day}-meal`).textContent = suggestions[day].name;
// Update the image
 const dayElement = document.querySelector(`.day-meal[data-day="${day}"]`);
 const imgElement = dayElement.querySelector('.day-meal-image');
 imgElement.src = suggestions[day].image;
 }
 }
function hideMealPlanner() {
 document.getElementById('main-page').classList.remove('hidden');
 document.getElementById('meal-planner-page').classList.add('hidden');
 document.getElementById('meal-options').classList.add('hidden');
 }
function showMealOptions(day) {
 currentSelectedDay = day;
 document.getElementById('meal-options').classList.remove('hidden');
// Highlight current selection
 document.querySelectorAll('.day-meal').forEach(el => {
 el.classList.remove('meal-selected');
 });
 document.querySelector(`.day-meal[data-day="${day}"]`).classList.add('meal-selected');
 }
function hideMealOptions() {
 document.getElementById('meal-options').classList.add('hidden');
 document.querySelectorAll('.day-meal').forEach(el => {
 el.classList.remove('meal-selected');
 });
 }
function selectMeal(meal, imageUrl) {
 selectedDays[currentSelectedDay] = { name: meal, image: imageUrl };
 document.getElementById(`${currentSelectedDay}-meal`).textContent = meal;
// Update the image
 const dayElement = document.querySelector(`.day-meal[data-day="${currentSelectedDay}"]`);
 const imgElement = dayElement.querySelector('.day-meal-image');
 imgElement.src = imageUrl;
hideMealOptions();
 }
// Validate plan
 document.getElementById('validate-plan').addEventListener('click', function() {
 // Update the weekly meals display on main page
 const weeklyMealsContainer = document.getElementById('weekly-meals');
 weeklyMealsContainer.innerHTML = `
 <div class="bg-green-50 rounded-lg p-2 text-center">
 <p class="text-xs font-medium">Lundi</p>
 <p class="text-green-600 font-bold text-sm">${selectedDays.lundi.name}</p>
 </div>
 <div class="bg-green-50 rounded-lg p-2 text-center">
 <p class="text-xs font-medium">Mardi</p>
 <p class="text-green-600 font-bold text-sm">${selectedDays.mardi.name}</p>
 </div>
 <div class="bg-green-50 rounded-lg p-2 text-center">
 <p class="text-xs font-medium">Mercredi</p>
 <p class="text-green-600 font-bold text-sm">${selectedDays.mercredi.name}</p>
 </div>
 <div class="bg-green-50 rounded-lg p-2 text-center">
 <p class="text-xs font-medium">Jeudi</p>
 <p class="text-green-600 font-bold text-sm">${selectedDays.jeudi.name}</p>
 </div>
 <div class="bg-green-50 rounded-lg p-2 text-center">
 <p class="text-xs font-medium">Vendredi</p>
 <p class="text-green-600 font-bold text-sm">${selectedDays.vendredi.name}</p>
 </div>
 <div class="bg-green-50 rounded-lg p-2 text-center">
 <p class="text-xs font-medium">+</p>
 <p class="text-green-600 font-bold text-sm">Voir</p>
 </div>
 `;
// Update meal count
 document.getElementById('meal-count').textContent = "5 repas planifiés";
// Go back to main page
 hideMealPlanner();
// Show success message
 alert("Votre planning de la semaine a été enregistré avec succès !");
 });
// Collaborative Group functions
 function showCollaborativeGroup() {
 document.getElementById('main-page').classList.add('hidden');
 document.getElementById('collaborative-group-page').classList.remove('hidden');
 }
function hideCollaborativeGroup() {
 document.getElementById('main-page').classList.remove('hidden');
 document.getElementById('collaborative-group-page').classList.add('hidden');
 hideInviteForm();
 }
function showInviteForm() {
 document.getElementById('invite-form').classList.remove('hidden');
 }
function hideInviteForm() {
 document.getElementById('invite-form').classList.add('hidden');
 }
function sendInvitation() {
 alert("Invitation envoyée avec succès !");
 hideInviteForm();
 }
// NOVA Assistant functions
 function showNovaAssistant() {
 document.getElementById('main-page').classList.add('hidden');
 document.getElementById('nova-assistant-page').classList.remove('hidden');
 document.getElementById('suggested-recipes').classList.add('hidden');
 }
function hideNovaAssistant() {
 document.getElementById('main-page').classList.remove('hidden');
 document.getElementById('nova-assistant-page').classList.add('hidden');
 }
function addQuickIngredient(ingredient) {
 const input = document.getElementById('nova-input');
 if (input.value) {
 input.value += `, ${ingredient}`;
 } else {
 input.value = ingredient;
 }
 }
function sendVoiceCommand() {
 // In a real app, this would use the Web Speech API
 alert("Fonctionnalité vocale activée. Parlez maintenant...");
// Simulate voice input after a delay
 setTimeout(() => {
 document.getElementById('nova-input').value = "carottes, poulet, riz, tomates";
 sendTextCommand();
 }, 1500);
 }
function sendTextCommand() {
 const input = document.getElementById('nova-input');
 const ingredients = input.value.trim();
if (!ingredients) return;
// Add user message to chat
 const chatContainer = document.getElementById('nova-chat');
 const userMessage = chatContainer.querySelector('.user-message').cloneNode(true);
 userMessage.classList.remove('hidden');
 userMessage.querySelector('.ingredients-input').textContent = ingredients;
 chatContainer.appendChild(userMessage);
// Clear input
 input.value = '';
// Simulate NOVA response after a delay
 setTimeout(() => {
 const novaResponse = chatContainer.querySelector('.nova-message').cloneNode(true);
 novaResponse.classList.remove('hidden');
// Simple response logic based on ingredients
 let responseText = "";
 if (ingredients.toLowerCase().includes('poulet') && ingredients.toLowerCase().includes('riz')) {
 responseText = "Avec ces ingrédients, je vous suggère un délicieux poulet au curry avec du riz. Voici quelques recettes qui pourraient vous intéresser :";
 document.getElementById('suggested-recipes').classList.remove('hidden');
 } else if (ingredients.toLowerCase().includes('tomates') && ingredients.toLowerCase().includes('carottes')) {
 responseText = "Parfait pour une soupe ou une salade fraîche ! Voici quelques idées :";
 document.getElementById('suggested-recipes').classList.remove('hidden');
 } else {
 responseText = "Merci pour ces informations. Je vais analyser vos ingrédients et vous proposer des recettes anti-gaspi adaptées.";
 }
novaResponse.querySelector('.nova-response').textContent = responseText;
 chatContainer.appendChild(novaResponse);
// Scroll to bottom
 chatContainer.scrollTop = chatContainer.scrollHeight;
 }, 1000);
 }
function modifyIngredients() {
 document.getElementById('nova-input').focus();
 document.getElementById('suggested-recipes').classList.add('hidden');
// Add a message to the chat
 const chatContainer = document.getElementById('nova-chat');
 const novaResponse = chatContainer.querySelector('.nova-message').cloneNode(true);
 novaResponse.classList.remove('hidden');
 novaResponse.querySelector('.nova-response').textContent = "Quels ingrédients souhaitez-vous ajouter ou retirer ?";
 chatContainer.appendChild(novaResponse);
// Scroll to bottom
 chatContainer.scrollTop = chatContainer.scrollHeight;
 }
function saveRecipe() {
 alert("Recette sauvegardée dans 'Mes recettes' !");
 hideNovaAssistant();
 }
 </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=Yocapp/yoc-app" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>