| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>HealthyEats - Nutrition App</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://cdn.jsdelivr.net/npm/lottie-web@5.9.1/build/player/lottie.min.js"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| @keyframes fadeIn { |
| from { opacity: 0; } |
| to { opacity: 1; } |
| } |
| .fade-in { animation: fadeIn 0.5s ease-in; } |
| .hidden { display: none; } |
| .slide-in { |
| animation: slideIn 0.3s forwards; |
| } |
| @keyframes slideIn { |
| from { transform: translateX(100%); } |
| to { transform: translateX(0); } |
| } |
| .grow-animation { |
| animation: grow 0.3s forwards; |
| } |
| @keyframes grow { |
| from { transform: scale(0.8); opacity: 0; } |
| to { transform: scale(1); opacity: 1; } |
| } |
| |
| .theme-green { |
| --primary: #4ade80; |
| --primary-dark: #22c55e; |
| --primary-light: #86efac; |
| --text-on-primary: #1c1917; |
| } |
| .theme-blue { |
| --primary: #60a5fa; |
| --primary-dark: #3b82f6; |
| --primary-light: #93c5fd; |
| --text-on-primary: #1e293b; |
| } |
| .theme-purple { |
| --primary: #a78bfa; |
| --primary-dark: #8b5cf6; |
| --primary-light: #c4b5fd; |
| --text-on-primary: #1e1b4b; |
| } |
| .theme-orange { |
| --primary: #fb923c; |
| --primary-dark: #f97316; |
| --primary-light: #fdba74; |
| --text-on-primary: #431407; |
| } |
| .theme-red { |
| --primary: #f87171; |
| --primary-dark: #ef4444; |
| --primary-light: #fca5a5; |
| --text-on-primary: #450a0a; |
| } |
| .theme-yellow { |
| --primary: #facc15; |
| --primary-dark: #eab308; |
| --primary-light: #fde047; |
| --text-on-primary: #422006; |
| } |
| .theme-pink { |
| --primary: #f472b6; |
| --primary-dark: #ec4899; |
| --primary-light: #f9a8d4; |
| --text-on-primary: #500724; |
| } |
| .bg-primary { |
| background-color: var(--primary); |
| } |
| .bg-primary-dark { |
| background-color: var(--primary-dark); |
| } |
| .bg-primary-light { |
| background-color: var(--primary-light); |
| } |
| .text-primary { |
| color: var(--primary); |
| } |
| .border-primary { |
| border-color: var(--primary); |
| } |
| </style> |
| </head> |
| <body class="font-sans bg-gray-50 theme-green"> |
| |
| <div id="splash" class="fixed inset-0 flex flex-col items-center justify-center bg-white z-50"> |
| <div id="lottie-container" class="w-64 h-64"></div> |
| <h1 class="text-3xl font-bold mt-6 text-gray-800">HealthyEats</h1> |
| <p class="text-gray-500 mt-2">Your personalized nutrition advisor</p> |
| <button id="getStartedBtn" class="mt-10 px-6 py-3 rounded-full bg-green-500 text-white font-medium hover:bg-green-600 transition-all"> |
| Get Started |
| </button> |
| </div> |
|
|
| |
| <div id="onboarding" class="hidden max-w-md mx-auto p-6"> |
| <div class="flex justify-between items-center mb-8"> |
| <h1 class="text-2xl font-bold"><span class="text-primary">Healthy</span>Eats</h1> |
| <div class="text-sm text-gray-500">Step <span id="currentStep">1</span> of 7</div> |
| </div> |
|
|
| |
| <div class="w-full bg-gray-200 rounded-full h-2.5 mb-8"> |
| <div id="progressBar" class="bg-primary h-2.5 rounded-full" style="width: 14%"></div> |
| </div> |
|
|
| <div id="onboardingContent" class="space-y-8"> |
| |
| <div id="step1" class="step fade-in"> |
| <h2 class="text-xl font-bold mb-4">Select Your Preferred Language</h2> |
| <div class="grid grid-cols-2 gap-4"> |
| <button class="lang-btn p-3 border rounded-lg hover:bg-gray-100 transition" data-lang="en"> |
| <div class="flex items-center space-x-2"> |
| <span class="text-xl">🇬🇧</span> |
| <span>English</span> |
| </div> |
| </button> |
| <button class="lang-btn p-3 border rounded-lg hover:bg-gray-100 transition" data-lang="ru"> |
| <div class="flex items-center space-x-2"> |
| <span class="text-xl">🇷🇺</span> |
| <span>Russian</span> |
| </div> |
| </button> |
| <button class="lang-btn p-3 border rounded-lg hover:bg-gray-100 transition" data-lang="hy"> |
| <div class="flex items-center space-x-2"> |
| <span class="text-xl">🇦🇲</span> |
| <span>Armenian</span> |
| </div> |
| </button> |
| <button class="lang-btn p-3 border rounded-lg hover:bg-gray-100 transition" data-lang="uk"> |
| <div class="flex items-center space-x-2"> |
| <span class="text-xl">🇺🇦</span> |
| <span>Ukrainian</span> |
| </div> |
| </button> |
| <button class="lang-btn p-3 border rounded-lg hover:bg-gray-100 transition" data-lang="zh"> |
| <div class="flex items-center space-x-2"> |
| <span class="text-xl">🇨🇳</span> |
| <span>Chinese</span> |
| </div> |
| </button> |
| <button class="lang-btn p-3 border rounded-lg hover:bg-gray-100 transition" data-lang="de"> |
| <div class="flex items-center space-x-2"> |
| <span class="text-xl">🇩🇪</span> |
| <span>German</span> |
| </div> |
| </button> |
| <button class="lang-btn p-3 border rounded-lg hover:bg-gray-100 transition" data-lang="fr"> |
| <div class="flex items-center space-x-2"> |
| <span class="text-xl">🇫🇷</span> |
| <span>French</span> |
| </div> |
| </button> |
| <button class="lang-btn p-3 border rounded-lg hover:bg-gray-100 transition" data-lang="es"> |
| <div class="flex items-center space-x-2"> |
| <span class="text-xl">🇪🇸</span> |
| <span>Spanish</span> |
| </div> |
| </button> |
| </div> |
| <div class="mt-4"> |
| <select class="w-full p-3 border rounded-lg"> |
| <option value="">More languages...</option> |
| <option value="it">Italian</option> |
| <option value="pt">Portuguese</option> |
| <option value="ja">Japanese</option> |
| <option value="ko">Korean</option> |
| <option value="ar">Arabic</option> |
| <option value="hi">Hindi</option> |
| </select> |
| </div> |
| </div> |
|
|
| |
| <div id="step2" class="step hidden"> |
| <h2 class="text-xl font-bold mb-4">Choose Your App Theme</h2> |
| <div class="grid grid-cols-2 sm:grid-cols-3 gap-4"> |
| <button class="theme-btn p-4 rounded-lg hover:opacity-90 transition" data-theme="green" style="background-color: #4ade80;"> |
| <div class="flex items-center justify-center h-16"> |
| <div class="flex"> |
| <div class="w-3 h-16 bg-green-800"></div> |
| <div class="w-3 h-16 bg-green-600"></div> |
| <div class="w-3 h-16 bg-green-400"></div> |
| <div class="w-3 h-16 bg-green-200"></div> |
| </div> |
| </div> |
| <div class="text-center mt-2 font-medium">Green</div> |
| </button> |
| <button class="theme-btn p-4 rounded-lg hover:opacity-90 transition" data-theme="blue" style="background-color: #60a5fa;"> |
| <div class="flex items-center justify-center h-16"> |
| <div class="flex"> |
| <div class="w-3 h-16 bg-blue-800"></div> |
| <div class="w-3 h-16 bg-blue-600"></div> |
| <div class="w-3 h-16 bg-blue-400"></div> |
| <div class="w-3 h-16 bg-blue-200"></div> |
| </div> |
| </div> |
| <div class="text-center mt-2 font-medium">Blue</div> |
| </button> |
| <button class="theme-btn p-4 rounded-lg hover:opacity-90 transition" data-theme="purple" style="background-color: #a78bfa;"> |
| <div class="flex items-center justify-center h-16"> |
| <div class="flex"> |
| <div class="w-3 h-16 bg-purple-800"></div> |
| <div class="w-3 h-16 bg-purple-600"></div> |
| <div class="w-3 h-16 bg-purple-400"></div> |
| <div class="w-3 h-16 bg-purple-200"></div> |
| </div> |
| </div> |
| <div class="text-center mt-2 font-medium">Purple</div> |
| </button> |
| <button class="theme-btn p-4 rounded-lg hover:opacity-90 transition" data-theme="orange" style="background-color: #fb923c;"> |
| <div class="flex items-center justify-center h-16"> |
| <div class="flex"> |
| <div class="w-3 h-16 bg-orange-800"></div> |
| <div class="w-3 h-16 bg-orange-600"></div> |
| <div class="w-3 h-16 bg-orange-400"></div> |
| <div class="w-3 h-16 bg-orange-200"></div> |
| </div> |
| </div> |
| <div class="text-center mt-2 font-medium">Orange</div> |
| </button> |
| <button class="theme-btn p-4 rounded-lg hover:opacity-90 transition" data-theme="red" style="background-color: #f87171;"> |
| <div class="flex items-center justify-center h-16"> |
| <div class="flex"> |
| <div class="w-3 h-16 bg-red-800"></div> |
| <div class="w-3 h-16 bg-red-600"></div> |
| <div class="w-3 h-16 bg-red-400"></div> |
| <div class="w-3 h-16 bg-red-200"></div> |
| </div> |
| </div> |
| <div class="text-center mt-2 font-medium">Red</div> |
| </button> |
| <button class="theme-btn p-4 rounded-lg hover:opacity-90 transition" data-theme="yellow" style="background-color: #facc15;"> |
| <div class="flex items-center justify-center h-16"> |
| <div class="flex"> |
| <div class="w-3 h-16 bg-yellow-800"></div> |
| <div class="w-3 h-16 bg-yellow-600"></div> |
| <div class="w-3 h-16 bg-yellow-400"></div> |
| <div class="w-3 h-16 bg-yellow-200"></div> |
| </div> |
| </div> |
| <div class="text-center mt-2 font-medium">Yellow</div> |
| </button> |
| <button class="theme-btn p-4 rounded-lg hover:opacity-90 transition" data-theme="pink" style="background-color: #f472b6;"> |
| <div class="flex items-center justify-center h-16"> |
| <div class="flex"> |
| <div class="w-3 h-16 bg-pink-800"></div> |
| <div class="w-3 h-16 bg-pink-600"></div> |
| <div class="w-3 h-16 bg-pink-400"></div> |
| <div class="w-3 h-16 bg-pink-200"></div> |
| </div> |
| </div> |
| <div class="text-center mt-2 font-medium">Pink</div> |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div id="step3" class="step hidden"> |
| <h2 class="text-xl font-bold mb-4">Tell Us About Yourself</h2> |
| <div class="space-y-4"> |
| <div> |
| <label class="block text-sm font-medium mb-1">Full Name</label> |
| <input type="text" id="fullName" class="w-full p-3 border rounded-lg focus:ring-2 focus:ring-primary focus:border-primary" placeholder="John Doe"> |
| </div> |
| <div> |
| <label class="block text-sm font-medium mb-1">Age</label> |
| <input type="number" id="age" class="w-full p-3 border rounded-lg focus:ring-2 focus:ring-primary focus:border-primary" placeholder="30" min="1" max="120"> |
| </div> |
| <div> |
| <label class="block text-sm font-medium mb-1">Gender</label> |
| <div class="grid grid-cols-3 gap-2"> |
| <button class="gender-btn p-3 border rounded-lg hover:bg-gray-100 transition" data-gender="male">Male</button> |
| <button class="gender-btn p-3 border rounded-lg hover:bg-gray-100 transition" data-gender="female">Female</button> |
| <button class="gender-btn p-3 border rounded-lg hover:bg-gray-100 transition" data-gender="other">Other</button> |
| </div> |
| </div> |
| <div class="grid grid-cols-2 gap-4"> |
| <div> |
| <label class="block text-sm font-medium mb-1">Height (cm)</label> |
| <input type="number" id="height" class="w-full p-3 border rounded-lg focus:ring-2 focus:ring-primary focus:border-primary" placeholder="175" min="50" max="250"> |
| </div> |
| <div> |
| <label class="block text-sm font-medium mb-1">Weight (kg)</label> |
| <input type="number" id="weight" class="w-full p-3 border rounded-lg focus:ring-2 focus:ring-primary focus:border-primary" placeholder="70" min="10" max="300"> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="step4" class="step hidden"> |
| <h2 class="text-xl font-bold mb-4">Your Dietary Preferences</h2> |
| <div class="grid grid-cols-2 gap-4"> |
| <button class="diet-btn p-4 border rounded-lg hover:bg-gray-100 transition" data-diet="normal"> |
| <div class="flex items-center space-x-2"> |
| <i class="fas fa-bread-slice"></i> |
| <span>Normal</span> |
| </div> |
| </button> |
| <button class="diet-btn p-4 border rounded-lg hover:bg-gray-100 transition" data-diet="vegan"> |
| <div class="flex items-center space-x-2"> |
| <i class="fas fa-leaf"></i> |
| <span>Vegan</span> |
| </div> |
| </button> |
| <button class="diet-btn p-4 border rounded-lg hover:bg-gray-100 transition" data-diet="vegetarian"> |
| <div class="flex items-center space-x-2"> |
| <i class="fas fa-carrot"></i> |
| <span>Vegetarian</span> |
| </div> |
| </button> |
| <button class="diet-btn p-4 border rounded-lg hover:bg-gray-100 transition" data-diet="gluten-free"> |
| <div class="flex items-center space-x-2"> |
| <i class="fas fa-times-circle"></i> |
| <span>Gluten-Free</span> |
| </div> |
| </button> |
| <button class="diet-btn p-4 border rounded-lg hover:bg-gray-100 transition" data-diet="keto"> |
| <div class="flex items-center space-x-2"> |
| <i class="fas fa-bacon"></i> |
| <span>Keto</span> |
| </div> |
| </button> |
| <button class="diet-btn p-4 border rounded-lg hover:bg-gray-100 transition" data-diet="paleo"> |
| <div class="flex items-center space-x-2"> |
| <i class="fas fa-drumstick-bite"></i> |
| <span>Paleo</span> |
| </div> |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div id="step5" class="step hidden"> |
| <h2 class="text-xl font-bold mb-4">Your Specific Needs</h2> |
| <div class="grid grid-cols-2 gap-4"> |
| <button class="role-btn p-4 border rounded-lg hover:bg-gray-100 transition" data-role="athlete"> |
| <div class="flex items-center space-x-2"> |
| <i class="fas fa-running"></i> |
| <span>Athlete</span> |
| </div> |
| </button> |
| <button class="role-btn p-4 border rounded-lg hover:bg-gray-100 transition" data-role="nursing-mother"> |
| <div class="flex items-center space-x-2"> |
| <i class="fas fa-baby"></i> |
| <span>Nursing Mother</span> |
| </div> |
| </button> |
| <button class="role-btn p-4 border rounded-lg hover:bg-gray-100 transition" data-role="pregnant"> |
| <div class="flex items-center space-x-2"> |
| <i class="fas fa-baby-carriage"></i> |
| <span>Pregnant</span> |
| </div> |
| </button> |
| <button class="role-btn p-4 border rounded-lg hover:bg-gray-100 transition" data-role="post-op"> |
| <div class="flex items-center space-x-2"> |
| <i class="fas fa-procedures"></i> |
| <span>Post-Op</span> |
| </div> |
| </button> |
| <button class="role-btn p-4 border rounded-lg hover:bg-gray-100 transition" data-role="diabetic"> |
| <div class="flex items-center space-x-2"> |
| <i class="fas fa-syringe"></i> |
| <span>Diabetic</span> |
| </div> |
| </button> |
| <button class="role-btn p-4 border rounded-lg hover:bg-gray-100 transition" data-role="student"> |
| <div class="flex items-center space-x-2"> |
| <i class="fas fa-graduation-cap"></i> |
| <span>Student</span> |
| </div> |
| </button> |
| <button class="role-btn p-4 border rounded-lg hover:bg-gray-100 transition" data-role="none"> |
| <div class="flex items-center space-x-2"> |
| <i class="fas fa-user"></i> |
| <span>None</span> |
| </div> |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div id="step6" class="step hidden"> |
| <h2 class="text-xl font-bold mb-4">Any Food Allergies?</h2> |
| <div class="grid grid-cols-2 gap-4"> |
| <div class="flex items-center space-x-2"> |
| <input type="checkbox" id="nuts-allergy" class="h-5 w-5 rounded border-gray-300 text-primary focus:ring-primary"> |
| <label for="nuts-allergy">Nuts</label> |
| </div> |
| <div class="flex items-center space-x-2"> |
| <input type="checkbox" id="oil-allergy" class="h-5 w-5 rounded border-gray-300 text-primary focus:ring-primary"> |
| <label for="oil-allergy">Oils</label> |
| </div> |
| <div class="flex items-center space-x-2"> |
| <input type="checkbox" id="citrus-allergy" class="h-5 w-5 rounded border-gray-300 text-primary focus:ring-primary"> |
| <label for="citrus-allergy">Citrus</label> |
| </div> |
| <div class="flex items-center space-x-2"> |
| <input type="checkbox" id="dairy-allergy" class="h-5 w-5 rounded border-gray-300 text-primary focus:ring-primary"> |
| <label for="dairy-allergy">Dairy</label> |
| </div> |
| <div class="flex items-center space-x-2"> |
| <input type="checkbox" id="gluten-allergy" class="h-5 w-5 rounded border-gray-300 text-primary focus:ring-primary"> |
| <label for="gluten-allergy">Gluten</label> |
| </div> |
| </div> |
| <div class="mt-4"> |
| <label class="block text-sm font-medium mb-1">Other Allergies</label> |
| <input type="text" id="otherAllergies" class="w-full p-3 border rounded-lg focus:ring-2 focus:ring-primary focus:border-primary" placeholder="List any other allergies"> |
| </div> |
| </div> |
|
|
| |
| <div id="step7" class="step hidden"> |
| <div class="text-center"> |
| <div class="w-24 h-24 bg-primary-light rounded-full flex items-center justify-center mx-auto mb-6"> |
| <i class="fas fa-check text-4xl text-primary-dark"></i> |
| </div> |
| <h2 class="text-xl font-bold mb-2">You're All Set!</h2> |
| <p class="text-gray-500 mb-6">You're ready to start your personalized nutrition journey with HealthyEats.</p> |
| <div class="bg-blue-50 border border-blue-100 rounded-lg p-4 text-left mb-6"> |
| <h3 class="font-medium text-blue-800 mb-1">Your Summary:</h3> |
| <div id="summaryContent" class="text-sm text-gray-700"></div> |
| </div> |
| <button id="completeBtn" class="w-full px-6 py-3 rounded-lg bg-primary text-white font-medium hover:bg-primary-dark transition"> |
| Complete Registration |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="flex justify-between mt-8"> |
| <button id="prevBtn" class="px-4 py-2 border rounded-lg text-gray-600 hover:bg-gray-100 transition hidden"> |
| <i class="fas fa-arrow-left mr-2"></i> Back |
| </button> |
| <button id="nextBtn" class="ml-auto px-6 py-2 rounded-lg bg-primary text-white font-medium hover:bg-primary-dark transition"> |
| Next <i class="fas fa-arrow-right ml-2"></i> |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div id="app" class="hidden min-h-screen"> |
| |
| <header class="sticky top-0 z-10 bg-white shadow-sm"> |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> |
| <div class="flex items-center space-x-2"> |
| <span class="text-xl font-bold"><span class="text-primary">Healthy</span>Eats</span> |
| <button class="text-primary bg-primary-light rounded-full p-2 hidden md:block"> |
| <i class="fas fa-utensils"></i> |
| </button> |
| </div> |
| <div class="flex items-center space-x-4"> |
| <button class="text-gray-600"> |
| <i class="fas fa-bell"></i> |
| </button> |
| <button class="text-gray-600"> |
| <i class="fas fa-cog"></i> |
| </button> |
| <div class="hidden md:flex items-center"> |
| <div class="w-8 h-8 rounded-full bg-primary-light flex items-center justify-center mr-2"> |
| <i class="fas fa-user text-primary-dark"></i> |
| </div> |
| <span id="userNameHeader" class="font-medium">John</span> |
| </div> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <nav class="fixed bottom-0 left-0 right-0 bg-white border-t z-10"> |
| <div class="flex justify-around"> |
| <button class="tab-btn active-tab py-3 px-4 text-primary" data-tab="home"> |
| <i class="fas fa-home block text-center text-xl mb-1"></i> |
| <span class="text-xs">Home</span> |
| </button> |
| <button class="tab-btn py-3 px-4 text-gray-500" data-tab="recipes"> |
| <i class="fas fa-book block text-center text-xl mb-1"></i> |
| <span class="text-xs">Recipes</span> |
| </button> |
| <button class="tab-btn py-3 px-4 text-gray-500" data-tab="shopping"> |
| <i class="fas fa-shopping-basket block text-center text-xl mb-1"></i> |
| <span class="text-xs">Shopping</span> |
| </button> |
| <button class="tab-btn py-3 px-4 text-gray-500" data-tab="chat"> |
| <i class="fas fa-comments block text-center text-xl mb-1"></i> |
| <span class="text-xs">Chat</span> |
| </button> |
| </div> |
| </nav> |
|
|
| |
| <main class="container mx-auto px-4 pb-24 pt-6"> |
| |
| <div id="home-tab" class="tab-content"> |
| <div class="flex items-center justify-between mb-6"> |
| <h1 class="text-2xl font-bold">Hello, <span id="userNameHome">John</span> 👋</h1> |
| </div> |
|
|
| |
| <div class="grid grid-cols-2 gap-4 mb-8"> |
| <button class="quick-action-btn bg-white p-4 rounded-xl shadow-sm hover:shadow-md transition" data-modal="scanner"> |
| <div class="flex items-center justify-center text-white mb-3"> |
| <div class="w-12 h-12 rounded-full bg-purple-500 flex items-center justify-center"> |
| <i class="fas fa-camera"></i> |
| </div> |
| </div> |
| <h3 class="font-medium text-center">Product Scanner</h3> |
| </button> |
| <button class="quick-action-btn bg-white p-4 rounded-xl shadow-sm hover:shadow-md transition" data-modal="voice"> |
| <div class="flex items-center justify-center text-white mb-3"> |
| <div class="w-12 h-12 rounded-full bg-blue-500 flex items-center justify-center"> |
| <i class="fas fa-microphone"></i> |
| </div> |
| </div> |
| <h3 class="font-medium text-center">Voice Input</h3> |
| </button> |
| <button class="quick-action-btn bg-white p-4 rounded-xl shadow-sm hover:shadow-md transition" data-modal="chat"> |
| <div class="flex items-center justify-center text-white mb-3"> |
| <div class="w-12 h-12 rounded-full bg-green-500 flex items-center justify-center"> |
| <i class="fas fa-robot"></i> |
| </div> |
| </div> |
| <h3 class="font-medium text-center">AI Dietitian</h3> |
| </button> |
| <button class="quick-action-btn bg-white p-4 rounded-xl shadow-sm hover:shadow-md transition" data-modal="tracker"> |
| <div class="flex items-center justify-center text-white mb-3"> |
| <div class="w-12 h-12 rounded-full bg-orange-500 flex items-center justify-center"> |
| <i class="fas fa-chart-line"></i> |
| </div> |
| </div> |
| <h3 class="font-medium text-center">Calorie Tracker</h3> |
| </button> |
| </div> |
|
|
| |
| <div class="mb-8"> |
| <h2 class="text-lg font-bold mb-4">Health Tips For You</h2> |
| <div class="bg-primary-light rounded-xl p-4"> |
| <div class="flex items-start"> |
| <div class="mr-3 mt-1"> |
| <i class="fas fa-lightbulb text-primary"></i> |
| </div> |
| <div> |
| <h3 class="font-medium mb-1">Drink More Water</h3> |
| <p class="text-sm text-gray-700">Based on your weight (70kg), aim for 2.1 liters of water today.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div> |
| <div class="flex justify-between items-center mb-4"> |
| <h2 class="text-lg font-bold">Recommended Recipes</h2> |
| <button class="text-primary text-sm font-medium">See All</button> |
| </div> |
| <div class="grid grid-cols-2 gap-4"> |
| <div class="bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition"> |
| <div class="h-32 bg-gray-200 relative"> |
| <div class="absolute bottom-2 right-2 bg-primary text-white text-xs px-2 py-1 rounded"> |
| <i class="fas fa-clock mr-1"></i> 15 min |
| </div> |
| </div> |
| <div class="p-3"> |
| <h3 class="font-medium mb-1">Avocado Toast</h3> |
| <div class="flex items-center text-xs text-gray-500"> |
| <i class="fas fa-fire mr-1"></i> 320 cal |
| </div> |
| </div> |
| </div> |
| <div class="bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition"> |
| <div class="h-32 bg-gray-200 relative"> |
| <div class="absolute bottom-2 right-2 bg-primary text-white text-xs px-2 py-1 rounded"> |
| <i class="fas fa-clock mr-1"></i> 25 min |
| </div> |
| </div> |
| <div class="p-3"> |
| <h3 class="font-medium mb-1">Quinoa Salad</h3> |
| <div class="flex items-center text-xs text-gray-500"> |
| <i class="fas fa-fire mr-1"></i> 280 cal |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="mt-6 bg-white rounded-xl p-4 shadow-sm"> |
| <h3 class="font-medium mb-3">Generate Personalized Recipe</h3> |
| <div class="flex"> |
| <input type="text" class="flex-1 p-3 border rounded-l-lg focus:ring-2 focus:ring-primary focus:border-primary" placeholder="Ingredients (e.g., chicken, rice, tomatoes)"> |
| <button class="bg-primary text-white px-4 rounded-r-lg hover:bg-primary-dark transition"> |
| <i class="fas fa-magic"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="recipes-tab" class="tab-content hidden"> |
| <h1 class="text-2xl font-bold mb-6">Recipes</h1> |
| |
| |
| <div class="mb-6"> |
| <div class="relative mb-4"> |
| <input type="text" class="w-full p-3 pl-10 border rounded-lg focus:ring-2 focus:ring-primary focus:border-primary" placeholder="Search recipes..."> |
| <i class="fas fa-search absolute left-3 top-3.5 text-gray-400"></i> |
| </div> |
| |
| <div class="flex space-x-2 overflow-x-auto pb-2"> |
| <button class="filter-btn px-3 py-1 bg-primary text-white rounded-full text-sm whitespace-nowrap" data-meal="all">All</button> |
| <button class="filter-btn px-3 py-1 bg-gray-200 rounded-full text-sm whitespace-nowrap" data-meal="breakfast">Breakfast</button> |
| <button class="filter-btn px-3 py-1 bg-gray-200 rounded-full text-sm whitespace-nowrap" data-meal="lunch">Lunch</button> |
| <button class="filter-btn px-3 py-1 bg-gray-200 rounded-full text-sm whitespace-nowrap" data-meal="dinner">Dinner</button> |
| <button class="filter-btn px-3 py-1 bg-gray-200 rounded-full text-sm whitespace-nowrap" data-meal="snacks">Snacks</button> |
| <button class="filter-btn px-3 py-1 bg-gray-200 rounded-full text-sm whitespace-nowrap" data-meal="desserts">Desserts</button> |
| </div> |
| |
| <div class="mt-4"> |
| <h3 class="text-sm font-medium mb-2">Cuisine</h3> |
| <div class="flex space-x-2 overflow-x-auto pb-2"> |
| <button class="cuisine-btn px-3 py-1 bg-gray-200 rounded-full text-sm whitespace-nowrap" data-cuisine="all">All</button> |
| <button class="cuisine-btn px-3 py-1 bg-gray-200 rounded-full text-sm whitespace-nowrap" data-cuisine="italian">Italian</button> |
| <button class="cuisine-btn px-3 py-1 bg-gray-200 rounded-full text-sm whitespace-nowrap" data-cuisine="japanese">Japanese</button> |
| <button class="cuisine-btn px-3 py-1 bg-gray-200 rounded-full text-sm whitespace-nowrap" data-cuisine="armenian">Armenian</button> |
| <button class="cuisine-btn px-3 py-1 bg-gray-200 rounded-full text-sm whitespace-nowrap" data-cuisine="mexican">Mexican</button> |
| <button class="cuisine-btn px-3 py-1 bg-gray-200 rounded-full text-sm whitespace-nowrap" data-cuisine="indian">Indian</button> |
| <button class="cuisine-btn px-3 py-1 bg-gray-200 rounded-full text-sm whitespace-nowrap" data-cuisine="american">American</button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="grid grid-cols-2 gap-4"> |
| <div class="recipe-card bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition cursor-pointer" data-id="1"> |
| <div class="h-40 bg-gray-200 relative"> |
| <div class="absolute bottom-2 right-2 bg-primary text-white text-xs px-2 py-1 rounded"> |
| <i class="fas fa-clock mr-1"></i> 20 min |
| </div> |
| </div> |
| <div class="p-3"> |
| <h3 class="font-medium mb-1">Pasta Carbonara</h3> |
| <div class="flex items-center text-xs text-gray-500 mb-2"> |
| <i class="fas fa-fire mr-1"></i> 420 cal |
| <span class="mx-2">|</span> |
| <i class="fas fa-utensils mr-1"></i> Italian |
| </div> |
| <div class="flex justify-between items-center"> |
| <span class="text-xs text-gray-500">Dinner</span> |
| <button class="text-primary text-xs font-medium">View →</button> |
| </div> |
| </div> |
| </div> |
| |
| <div class="recipe-card bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition cursor-pointer" data-id="2"> |
| <div class="h-40 bg-gray-200 relative"> |
| <div class="absolute bottom-2 right-2 bg-primary text-white text-xs px-2 py-1 rounded"> |
| <i class="fas fa-clock mr-1"></i> 15 min |
| </div> |
| </div> |
| <div class="p-3"> |
| <h3 class="font-medium mb-1">Avocado Toast</h3> |
| <div class="flex items-center text-xs text-gray-500 mb-2"> |
| <i class="fas fa-fire mr-1"></i> 320 cal |
| <span class="mx-2">|</span> |
| <i class="fas fa-utensils mr-1"></i> American |
| </div> |
| <div class="flex justify-between items-center"> |
| <span class="text-xs text-gray-500">Breakfast</span> |
| <button class="text-primary text-xs font-medium">View →</button> |
| </div> |
| </div> |
| </div> |
| |
| <div class="recipe-card bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition cursor-pointer" data-id="3"> |
| <div class="h-40 bg-gray-200 relative"> |
| <div class="absolute bottom-2 right-2 bg-primary text-white text-xs px-2 py-1 rounded"> |
| <i class="fas fa-clock mr-1"></i> 35 min |
| </div> |
| </div> |
| <div class="p-3"> |
| <h3 class="font-medium mb-1">Vegetable Stir Fry</h3> |
| <div class="flex items-center text-xs text-gray-500 mb-2"> |
| <i class="fas fa-fire mr-1"></i> 280 cal |
| <span class="mx-2">|</span> |
| <i class="fas fa-utensils mr-1"></i> Asian |
| </div> |
| <div class="flex justify-between items-center"> |
| <span class="text-xs text-gray-500">Lunch</span> |
| <button class="text-primary text-xs font-medium">View →</button> |
| </div> |
| </div> |
| </div> |
| |
| <div class="recipe-card bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition cursor-pointer" data-id="4"> |
| <div class="h-40 bg-gray-200 relative"> |
| <div class="absolute bottom-2 right-2 bg-primary text-white text-xs px-2 py-1 rounded"> |
| <i class="fas fa-clock mr-1"></i> 45 min |
| </div> |
| </div> |
| <div class="p-3"> |
| <h3 class="font-medium mb-1">Lentil Soup</h3> |
| <div class="flex items-center text-xs text-gray-500 mb-2"> |
| <i class="fas fa-fire mr-1"></i> 210 cal |
| <span class="mx-2">|</span> |
| <i class="fas fa-utensils mr-1"></i> Mediterranean |
| </div> |
| <div class="flex justify-between items-center"> |
| <span class="text-xs text-gray-500">Dinner</span> |
| <button class="text-primary text-xs font-medium">View →</button> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mt-6 flex justify-center"> |
| <button id="showMoreRecipes" class="px-4 py-2 border rounded-lg text-gray-600 hover:bg-gray-100 transition"> |
| Show More |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div id="shopping-tab" class="tab-content hidden"> |
| <h1 class="text-2xl font-bold mb-6">Shopping List</h1> |
| |
| <div class="mb-6"> |
| <div class="flex items-center"> |
| <input type="text" class="flex-1 p-3 border rounded-l-lg focus:ring-2 focus:ring-primary focus:border-primary" placeholder="Add item..."> |
| <button class="bg-primary text-white px-4 py-3 rounded-r-lg hover:bg-primary-dark transition"> |
| <i class="fas fa-plus"></i> |
| </button> |
| </div> |
| |
| <div class="mt-3 text-sm text-gray-500"> |
| <button id="autoFillBtn" class="text-primary border-b border-primary border-dashed">Auto-fill from recipes</button> |
| </div> |
| </div> |
| |
| <div class="bg-white rounded-xl shadow-sm overflow-hidden"> |
| <div class="px-4 py-3 border-b flex justify-between items-center"> |
| <h2 class="font-medium">Current List</h2> |
| <div class="text-sm text-gray-500">3 of 8 items</div> |
| </div> |
| |
| <div class="divide-y"> |
| <div class="p-4 flex items-center"> |
| <input type="checkbox" class="h-5 w-5 rounded border-gray-300 text-primary focus:ring-primary mr-3"> |
| <div class="flex-1">Tomatoes</div> |
| <div class="text-sm text-gray-500">2 lb</div> |
| </div> |
| <div class="p-4 flex items-center"> |
| <input type="checkbox" class="h-5 w-5 rounded border-gray-300 text-primary focus:ring-primary mr-3"> |
| <div class="flex-1">Chicken breast</div> |
| <div class="text-sm text-gray-500">1 lb</div> |
| </div> |
| <div class="p-4 flex items-center opacity-50"> |
| <input type="checkbox" class="h-5 w-5 rounded border-gray-300 text-primary focus:ring-primary mr-3" checked> |
| <div class="flex-1 line-through">Avocados</div> |
| <div class="text-sm text-gray-500">3 pcs</div> |
| </div> |
| <div class="p-4 flex items-center"> |
| <input type="checkbox" class="h-5 w-5 rounded border-gray-300 text-primary focus:ring-primary mr-3"> |
| <div class="flex-1">Whole wheat bread</div> |
| <div class="text-sm text-gray-500">1 loaf</div> |
| </div> |
| <div class="p-4 flex items-center"> |
| <input type="checkbox" class="h-5 w-5 rounded border-gray-300 text-primary focus:ring-primary mr-3"> |
| <div class="flex-1">Eggs</div> |
| <div class="text-sm text-gray-500">12 pcs</div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mt-6 bg-primary-light rounded-xl p-4"> |
| <h3 class="font-medium mb-2">Smart Suggestions</h3> |
| <p class="text-sm text-gray-700">Based on your recipes, you might also need: <span class="font-medium">spinach, olive oil, garlic</span></p> |
| </div> |
| </div> |
|
|
| |
| <div id="chat-tab" class="tab-content hidden"> |
| <h1 class="text-2xl font-bold mb-6">AI Dietitian</h1> |
| |
| <div class="bg-white rounded-xl shadow-sm p-4 mb-4"> |
| <h3 class="font-medium mb-2">Get Personalized Advice</h3> |
| <p class="text-sm text-gray-600 mb-3">Ask our AI nutritionist about meal plans, ingredients, or health tips.</p> |
| |
| <div class="flex items-center space-x-2 overflow-x-auto pb-2"> |
| <button class="quick-question-btn px-3 py-1 bg-gray-100 rounded-full text-sm whitespace-nowrap">What to cook with chicken?</button> |
| <button class="quick-question-btn px-3 py-1 bg-gray-100 rounded-full text-sm whitespace-nowrap">Best vegan protein sources</button> |
| <button class="quick-question-btn px-3 py-1 bg-gray-100 rounded-full text-sm whitespace-nowrap">Low-calorie dinner ideas</button> |
| </div> |
| </div> |
| |
| <div class="chat-container bg-white rounded-xl shadow-sm p-4 h-96 overflow-y-auto mb-4"> |
| <div class="mb-4"> |
| <div class="flex justify-end mb-1"> |
| <div class="bg-primary text-white rounded-lg p-3 max-w-xs"> |
| What's a healthy breakfast for weight loss? |
| </div> |
| </div> |
| <div class="text-xs text-gray-500 text-right mb-3">10:23 AM</div> |
| </div> |
| |
| <div class="mb-4"> |
| <div class="flex items-start mb-1"> |
| <div class="w-8 h-8 rounded-full bg-primary-light flex items-center justify-center mr-2"> |
| <i class="fas fa-robot text-primary-dark"></i> |
| </div> |
| <div class="bg-gray-100 rounded-lg p-3 max-w-xs"> |
| For weight loss, try a high-protein breakfast like Greek yogurt with berries and nuts, or scrambled eggs with avocado on whole grain toast. Both keep you full longer and support fat loss. |
| </div> |
| </div> |
| <div class="text-xs text-gray-500 ml-10 mb-3">10:24 AM</div> |
| </div> |
| </div> |
| |
| <div class="flex items-center"> |
| <input type="text" class="flex-1 p-3 border rounded-l-lg focus:ring-2 focus:ring-primary focus:border-primary" placeholder="Type your question..."> |
| <button class="bg-primary text-white px-4 py-3 rounded-r-lg hover:bg-primary-dark transition"> |
| <i class="fas fa-paper-plane"></i> |
| </button> |
| </div> |
| </div> |
| </main> |
| </div> |
|
|
| |
| <div id="modalOverlay" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center p-4"> |
| |
| <div id="scannerModal" class="modal hidden bg-white rounded-xl w-full max-w-md overflow-hidden"> |
| <div class="p-4 border-b"> |
| <h2 class="text-xl font-bold flex items-center"> |
| <i class="fas fa-camera mr-2"></i> Product Scanner |
| </h2> |
| </div> |
| <div class="p-4 text-center"> |
| <div class="w-full h-64 bg-gray-200 rounded-lg mb-4 flex items-center justify-center"> |
| <i class="fas fa-camera text-4xl text-gray-400"></i> |
| </div> |
| <button class="w-full py-3 bg-primary text-white rounded-lg font-medium"> |
| <i class="fas fa-camera mr-2"></i> Take Photo |
| </button> |
| <p class="text-sm text-gray-500 mt-3">Or upload from gallery</p> |
| </div> |
| <div class="p-4 border-t text-right"> |
| <button class="close-modal px-4 py-2 text-gray-500 hover:text-gray-700"> |
| Cancel |
| </button> |
| </div> |
| </div> |
| |
| |
| <div id="voiceModal" class="modal hidden bg-white rounded-xl w-full max-w-md overflow-hidden"> |
| <div class="p-4 border-b"> |
| <h2 class="text-xl font-bold flex items-center"> |
| <i class="fas fa-microphone mr-2"></i> Voice Input |
| </h2> |
| </div> |
| <div class="p-4 text-center"> |
| <div class="w-24 h-24 rounded-full bg-blue-100 flex items-center justify-center mx-auto mb-6"> |
| <i class="fas fa-microphone text-3xl text-blue-500"></i> |
| </div> |
| <p class="mb-6">Press the button below and say ingredients or meal names</p> |
| <button id="startRecording" class="w-16 h-16 rounded-full bg-blue-500 text-white mx-auto flex items-center justify-center"> |
| <i class="fas fa-microphone text-2xl"></i> |
| </button> |
| <p id="recordingStatus" class="text-sm text-gray-500 mt-3">Ready to record</p> |
| </div> |
| <div class="p-4 border-t"> |
| <div id="recordingResult" class="hidden mb-4 p-3 bg-gray-50 rounded-lg"> |
| <h3 class="font-medium mb-2">Your input:</h3> |
| <p id="transcribedText">"I have chicken, rice, and vegetables"</p> |
| </div> |
| <div class="flex justify-between"> |
| <button class="close-modal px-4 py-2 text-gray-500 hover:text-gray-700"> |
| Cancel |
| </button> |
| <button id="useVoiceInput" class="px-4 py-2 bg-primary text-white rounded-lg font-medium hidden"> |
| Use This |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div id="recipeModal" class="modal hidden bg-white rounded-xl w-full max-w-md overflow-hidden max-h-screen overflow-y-auto"> |
| <div> |
| <div class="h-48 bg-gray-200"></div> |
| <div class="p-4"> |
| <div class="flex justify-between items-start mb-3"> |
| <h2 class="text-xl font-bold">Pasta Carbonara</h2> |
| <button class="text-primary"> |
| <i class="fas fa-bookmark"></i> |
| </button> |
| </div> |
| |
| <div class="flex items-center justify-between mb-4"> |
| <div class="flex items-center space-x-2"> |
| <span class="px-2 py-1 bg-primary-light text-primary-dark rounded-full text-xs"> |
| <i class="fas fa-clock mr-1"></i> 20 min |
| </span> |
| <span class="px-2 py-1 bg-primary-light text-primary-dark rounded-full text-xs"> |
| <i class="fas fa-fire mr-1"></i> 420 cal |
| </span> |
| <span class="px-2 py-1 bg-primary-light text-primary-dark rounded-full text-xs"> |
| <i class="fas fa-utensils mr-1"></i> Italian |
| </span> |
| </div> |
| </div> |
| |
| <div class="mb-6"> |
| <h3 class="font-medium mb-2 text-primary flex items-center"> |
| <i class="fas fa-list-ul mr-2"></i> Ingredients |
| </h3> |
| <ul class="space-y-2"> |
| <li class="flex items-start"> |
| <input type="checkbox" class="mr-3 mt-1 h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary"> |
| <span>8 oz spaghetti</span> |
| </li> |
| <li class="flex items-start"> |
| <input type="checkbox" class="mr-3 mt-1 h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary"> |
| <span>2 large eggs</span> |
| </li> |
| <li class="flex items-start"> |
| <input type="checkbox" class="mr-3 mt-1 h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary"> |
| <span>1/2 cup grated Parmesan cheese</span> |
| </li> |
| <li class="flex items-start"> |
| <input type="checkbox" class="mr-3 mt-1 h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary"> |
| <span>4 slices bacon, diced</span> |
| </li> |
| <li class="flex items-start"> |
| <input type="checkbox" class="mr-3 mt-1 h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary"> |
| <span>2 garlic cloves, minced</span> |
| </li> |
| <li class="flex items-start"> |
| <input type="checkbox" class="mr-3 mt-1 h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary"> |
| <span>Salt and black pepper to taste</span> |
| </li> |
| </ul> |
| </div> |
| |
| <div class="mb-6"> |
| <h3 class="font-medium mb-2 text-primary flex items-center"> |
| <i class="fas fa-mortar-pestle mr-2"></i> Instructions |
| </h3> |
| <ol class="list-decimal list-inside space-y-2"> |
| <li>Cook spaghetti according to package directions.</li> |
| <li>In a bowl, whisk eggs and Parmesan together.</li> |
| <li>Cook bacon in a large skillet until crispy.</li> |
| <li>Add garlic to the skillet and cook for 30 seconds.</li> |
| <li>Drain pasta, reserving 1/2 cup of pasta water.</li> |
| <li>Working quickly, mix pasta with egg mixture in the skillet.</li> |
| <li>Add pasta water as needed to create a creamy sauce.</li> |
| <li>Season with salt and pepper to taste.</li> |
| </ol> |
| </div> |
| |
| <div class="flex justify-center space-x-4"> |
| <button id="addToShopping" class="px-4 py-2 border rounded-lg text-primary font-medium hover:bg-primary hover:text-white transition"> |
| <i class="fas fa-shopping-basket mr-2"></i> Add to List |
| </button> |
| <button class="px-4 py-2 bg-primary text-white rounded-lg font-medium"> |
| <i class="fas fa-play mr-2"></i> Video Guide |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| document.addEventListener('DOMContentLoaded', function() { |
| |
| const container = document.getElementById('lottie-container'); |
| const anim = lottie.loadAnimation({ |
| container: container, |
| renderer: 'svg', |
| loop: true, |
| autoplay: true, |
| path: 'https://assets3.lottiefiles.com/packages/lf20_9h6ftzxr.json' |
| }); |
| |
| |
| const splash = document.getElementById('splash'); |
| const onboarding = document.getElementById('onboarding'); |
| const app = document.getElementById('app'); |
| |
| document.getElementById('getStartedBtn').addEventListener('click', function() { |
| splash.classList.add('hidden'); |
| onboarding.classList.remove('hidden'); |
| anim.stop(); |
| }); |
| |
| |
| const steps = document.querySelectorAll('.step'); |
| const currentStepEl = document.getElementById('currentStep'); |
| const progressBar = document.getElementById('progressBar'); |
| const nextBtn = document.getElementById('nextBtn'); |
| const prevBtn = document.getElementById('prevBtn'); |
| let currentStep = 1; |
| |
| nextBtn.addEventListener('click', function() { |
| if (currentStep < 7) { |
| document.getElementById(`step${currentStep}`).classList.add('hidden'); |
| currentStep++; |
| document.getElementById(`step${currentStep}`).classList.remove('hidden'); |
| currentStepEl.textContent = currentStep; |
| progressBar.style.width = `${(currentStep / 7) * 100}%`; |
| prevBtn.classList.remove('hidden'); |
| |
| if (currentStep === 7) { |
| nextBtn.classList.add('hidden'); |
| generateSummary(); |
| } |
| } |
| }); |
| |
| prevBtn.addEventListener('click', function() { |
| if (currentStep > 1) { |
| document.getElementById(`step${currentStep}`).classList.add('hidden'); |
| currentStep--; |
| document.getElementById(`step${currentStep}`).classList.remove('hidden'); |
| currentStepEl.textContent = currentStep; |
| progressBar.style.width = `${(currentStep / 7) * 100}%`; |
| nextBtn.classList.remove('hidden'); |
| |
| if (currentStep === 7) { |
| nextBtn.classList.add('hidden'); |
| } |
| |
| if (currentStep === 1) { |
| prevBtn.classList.add('hidden'); |
| } |
| } |
| }); |
| |
| |
| let selectedLang = null; |
| document.querySelectorAll('.lang-btn').forEach(btn => { |
| btn.addEventListener('click', function() { |
| document.querySelectorAll('.lang-btn').forEach(b => b.classList.remove('border-primary')); |
| this.classList.add('border-primary'); |
| selectedLang = this.dataset.lang; |
| }); |
| }); |
| |
| document.querySelectorAll('.theme-btn').forEach(btn => { |
| btn.addEventListener('click', function() { |
| document.body.className = `font-sans bg-gray-50 theme-${this.dataset.theme}`; |
| }); |
| }); |
| |
| let selectedGender = null; |
| document.querySelectorAll('.gender-btn').forEach(btn => { |
| btn.addEventListener('click', function() { |
| document.querySelectorAll('.gender-btn').forEach(b => b.classList.remove('border-primary')); |
| this.classList.add('border-primary'); |
| selectedGender = this.dataset.gender; |
| }); |
| }); |
| |
| let selectedDiet = null; |
| document.querySelectorAll('.diet-btn').forEach(btn => { |
| btn.addEventListener('click', function() { |
| document.querySelectorAll('.diet-btn').forEach(b => b.classList.remove('border-primary')); |
| this.classList.add('border-primary'); |
| selectedDiet = this.dataset.diet; |
| }); |
| }); |
| |
| let selectedRole = null; |
| document.querySelectorAll('.role-btn').forEach(btn => { |
| btn.addEventListener('click', function() { |
| document.querySelectorAll('.role-btn').forEach(b => b.classList.remove('border-primary')); |
| this.classList.add('border-primary'); |
| selectedRole = this.dataset.role; |
| }); |
| }); |
| |
| |
| document.getElementById('completeBtn').addEventListener('click', function() { |
| onboarding.classList.add('hidden'); |
| app.classList.remove('hidden'); |
| document.getElementById('userNameHeader').textContent = document.getElementById('fullName').value || 'User'; |
| document.getElementById('userNameHome').textContent = document.getElementById('fullName').value || 'User'; |
| }); |
| |
| function generateSummary() { |
| const summary = document.getElementById('summaryContent'); |
| summary.innerHTML = ''; |
| |
| const name = document.getElementById('fullName').value || 'Not provided'; |
| const age = document.getElementById('age').value || 'Not provided'; |
| const height = document.getElementById('height').value || 'Not provided'; |
| const weight = document.getElementById('weight').value || 'Not provided'; |
| |
| const items = [ |
| `Name: ${name}`, |
| `Age: ${age}`, |
| `Gender: ${selectedGender || 'Not selected'}`, |
| `Height: ${height} cm`, |
| `Weight: ${weight} kg`, |
| `Diet: ${selectedDiet || 'Not selected'}`, |
| `Special Needs: ${selectedRole || 'None'}`, |
| `Allergies: ${getSelectedAllergies()}` |
| ]; |
| |
| items.forEach(item => { |
| const p = document.createElement('p'); |
| p.textContent = item; |
| p.className = 'mb-1'; |
| summary.appendChild(p); |
| }); |
| } |
| |
| function getSelectedAllergies() { |
| const allergies = []; |
| if (document.getElementById('nuts-allergy').checked) allergies.push('Nuts'); |
| if (document.getElementById('oil-allergy').checked) allergies.push('Oils'); |
| if (document.getElementById('citrus-allergy').checked) allergies.push('Citrus'); |
| if (document.getElementById('dairy-allergy').checked) allergies.push('Dairy'); |
| if (document.getElementById('gluten-allergy').checked) allergies.push('Gluten'); |
| |
| const other = document.getElementById('otherAllergies').value; |
| if (other) allergies.push(other); |
| |
| return allergies.length > 0 ? allergies.join(', ') : 'None'; |
| } |
| |
| |
| document.querySelectorAll('.tab-btn').forEach(btn => { |
| btn.addEventListener('click', function() { |
| |
| document.querySelectorAll('.tab-btn').forEach(b => { |
| b.classList.remove('active-tab'); |
| b.classList.add('text-gray-500'); |
| }); |
| this.classList.add('active-tab'); |
| this.classList.remove('text-gray-500'); |
| |
| |
| const tab = this.dataset.tab; |
| document.querySelectorAll('.tab-content').forEach(content => { |
| content.classList.add('hidden'); |
| }); |
| document.getElementById(`${tab}-tab`).classList.remove('hidden'); |
| }); |
| }); |
| |
| |
| const modalOverlay = document.getElementById('modalOverlay'); |
| |
| document.querySelectorAll('.quick-action-btn').forEach(btn => { |
| btn.addEventListener('click', function() { |
| document.querySelectorAll('.modal').forEach(modal => modal.classList.add('hidden')); |
| document.getElementById(`${this.dataset.modal}Modal`).classList.remove('hidden'); |
| modalOverlay.classList.remove('hidden'); |
| }); |
| }); |
| |
| document.querySelectorAll('.close-modal').forEach(btn => { |
| btn.addEventListener('click', function() { |
| modalOverlay.classList.add('hidden'); |
| if (isRecording) { |
| stopRecording(); |
| } |
| }); |
| }); |
| |
| modalOverlay.addEventListener('click', function(e) { |
| if (e.target === this) { |
| modalOverlay.classList.add('hidden'); |
| if (isRecording) { |
| stopRecording(); |
| } |
| } |
| }); |
| |
| |
| document.querySelectorAll('.recipe-card').forEach(card => { |
| card.addEventListener('click', function() { |
| document.querySelectorAll('.modal').forEach(modal => modal.classList.add('hidden')); |
| document.getElementById('recipeModal').classList.remove('hidden'); |
| modalOverlay.classList.remove('hidden'); |
| }); |
| }); |
| |
| |
| const startRecordingBtn = document.getElementById('startRecording'); |
| const recordingStatus = document.getElementById('recordingStatus'); |
| const useVoiceInput = document.getElementById('useVoiceInput'); |
| const recordingResult = document.getElementById('recordingResult'); |
| let isRecording = false; |
| |
| startRecordingBtn.addEventListener('click', function() { |
| if (!isRecording) { |
| startRecording(); |
| } else { |
| stopRecording(); |
| } |
| }); |
| |
| function startRecording() { |
| isRecording = true; |
| startRecordingBtn.innerHTML = '<i class="fas fa-stop text-2xl"></i>'; |
| startRecordingBtn.classList.add('bg-red-500'); |
| startRecordingBtn.classList.remove('bg-blue-500'); |
| recordingStatus.textContent = 'Listening...'; |
| } |
| |
| function stopRecording() { |
| isRecording = false; |
| startRecordingBtn.innerHTML = '<i class="fas fa-microphone text-2xl"></i>'; |
| startRecordingBtn.classList.add('bg-blue-500'); |
| startRecordingBtn.classList.remove('bg-red-500'); |
| recordingStatus.textContent = 'Recording stopped'; |
| |
| |
| setTimeout(() => { |
| recordingResult.classList.remove('hidden'); |
| useVoiceInput.classList.remove('hidden'); |
| }, 1000); |
| } |
| |
| |
| document.querySelectorAll('.quick-question-btn').forEach(btn => { |
| btn.addEventListener('click', function() { |
| const chatContainer = document.querySelector('.chat-container'); |
| |
| |
| const questionDiv = document.createElement('div'); |
| questionDiv.className = 'mb-4'; |
| questionDiv.innerHTML = ` |
| <div class="flex justify-end mb-1"> |
| <div class="bg-primary text-white rounded-lg p-3 max-w-xs"> |
| ${this.textContent} |
| </div> |
| </div> |
| <div class="text-xs text-gray-500 text-right mb-3">${formatTime(new Date())}</div> |
| `; |
| chatContainer.appendChild(questionDiv); |
| |
| |
| setTimeout(() => { |
| const responseDiv = document.createElement('div'); |
| responseDiv.className = 'mb-4'; |
| responseDiv.innerHTML = ` |
| <div class="flex items-start mb-1"> |
| <div class="w-8 h-8 rounded-full bg-primary-light flex items-center justify-center mr-2"> |
| <i class="fas fa-robot text-primary-dark"></i> |
| </div> |
| <div class="bg-gray-100 rounded-lg p-3 max-w-xs"> |
| ${getAIResponse(this.textContent)} |
| </div> |
| </div> |
| <div class="text-xs text-gray-500 ml-10 mb-3">${formatTime(new Date())}</div> |
| `; |
| chatContainer.appendChild(responseDiv); |
| chatContainer.scrollTop = chatContainer.scrollHeight; |
| }, 1500); |
| |
| chatContainer.scrollTop = chatContainer.scrollHeight; |
| }); |
| }); |
| |
| function getAIResponse(question) { |
| if (question.includes('chicken')) { |
| return "For chicken, try chicken stir-fry with vegetables, grilled chicken salad, or chicken curry with coconut milk. All are delicious and healthy options!"; |
| } else if (question.includes('vegan')) { |
| return "Great vegan protein sources include lentils, chickpeas, tofu, tempeh, quinoa, chia seeds, and nuts. Try combining them for complete protein!"; |
| } else if (question.includes('low-calorie')) { |
| return "For low-calorie dinners, consider zucchini noodles with shrimp, stuffed bell peppers with lean turkey, or baked salmon with roasted vegetables."; |
| } else { |
| return "I'd be happy to help with that! Could you please provide more details about your dietary preferences or specific ingredients you're working with?"; |
| } |
| } |
| |
| function formatTime(date) { |
| let hours = date.getHours(); |
| let minutes = date.getMinutes(); |
| const ampm = hours >= 12 ? 'PM' : 'AM'; |
| hours = hours % 12; |
| hours = hours ? hours : 12; |
| minutes = minutes < 10 ? '0'+minutes : minutes; |
| return `${hours}:${minutes} ${ampm}`; |
| } |
| |
| |
| document.getElementById('autoFillBtn').addEventListener('click', function() { |
| alert('Shopping list would be filled with ingredients from your saved recipes'); |
| }); |
| |
| |
| document.getElementById('addToShopping').addEventListener('click', function() { |
| alert('Selected ingredients would be added to your shopping list'); |
| }); |
| |
| |
| document.querySelectorAll('.filter-btn, .cuisine-btn').forEach(btn => { |
| btn.addEventListener('click', function() { |
| |
| document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('bg-primary', 'text-white')); |
| document.querySelectorAll('.cuisine-btn').forEach(b => b.classList.remove('bg-primary', 'text-white')); |
| |
| if (this.classList.contains('filter-btn') || this.classList.contains('cuisine-btn')) { |
| this.classList.add('bg-primary', 'text-white'); |
| } |
| }); |
| }); |
| |
| |
| document.getElementById('showMoreRecipes').addEventListener('click', function() { |
| alert('More recipes would be loaded via API in a real app'); |
| }); |
| }); |
| </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=rafo3711/https-huggingface-co-rafo3711" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
