Download index.html from rafo3711/https-huggingface-co-rafo3711: direct link, hf CLI and curl.
- Browser
- Download file 74.6 kB
-
https://huggingface.co/spaces/rafo3711/https-huggingface-co-rafo3711/resolve/main/index.html
- Command line
-
hf download hf://spaces/rafo3711/https-huggingface-co-rafo3711/index.html
-
curl -L -o index.html https://huggingface.co/spaces/rafo3711/https-huggingface-co-rafo3711/resolve/main/index.html
74.6 kB
| <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; } | |
| } | |
| /* Custom theme colors */ | |
| .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"> | |
| <!-- Splash Screen --> | |
| <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> | |
| <!-- Onboarding Container --> | |
| <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> | |
| <!-- Progress Bar --> | |
| <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"> | |
| <!-- Language Selection --> | |
| <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> | |
| <!-- Theme Selection --> | |
| <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> | |
| <!-- Personal Information --> | |
| <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> | |
| <!-- Dietary Preferences --> | |
| <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> | |
| <!-- User Role --> | |
| <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> | |
| <!-- Allergies --> | |
| <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> | |
| <!-- Complete Registration --> | |
| <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> | |
| <!-- Main App Container --> | |
| <div id="app" class="hidden min-h-screen"> | |
| <!-- Header --> | |
| <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> | |
| <!-- Bottom Navigation --> | |
| <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 Content --> | |
| <main class="container mx-auto px-4 pb-24 pt-6"> | |
| <!-- Home Tab --> | |
| <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> | |
| <!-- Quick Actions --> | |
| <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> | |
| <!-- Health Tips --> | |
| <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> | |
| <!-- Recipe Recommendations --> | |
| <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> | |
| <!-- AI Recipe Generator --> | |
| <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> | |
| <!-- Recipes Tab --> | |
| <div id="recipes-tab" class="tab-content hidden"> | |
| <h1 class="text-2xl font-bold mb-6">Recipes</h1> | |
| <!-- Search and Filters --> | |
| <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> | |
| <!-- Recipe Cards --> | |
| <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> | |
| <!-- Shopping Tab --> | |
| <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> | |
| <!-- Chat Tab --> | |
| <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> | |
| <!-- Modal Overlay --> | |
| <div id="modalOverlay" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center p-4"> | |
| <!-- Scanner Modal --> | |
| <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> | |
| <!-- Voice Input Modal --> | |
| <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> | |
| <!-- Recipe Modal --> | |
| <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() { | |
| // Lottie animation setup | |
| 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' // Food/health animation | |
| }); | |
| // Splash screen to onboarding transition | |
| 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(); | |
| }); | |
| // Onboarding navigation | |
| 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'); | |
| } | |
| } | |
| }); | |
| // Step selections | |
| 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; | |
| }); | |
| }); | |
| // Complete registration | |
| 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'; | |
| } | |
| // Main app navigation | |
| document.querySelectorAll('.tab-btn').forEach(btn => { | |
| btn.addEventListener('click', function() { | |
| // Update active tab styling | |
| 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'); | |
| // Show corresponding tab content | |
| const tab = this.dataset.tab; | |
| document.querySelectorAll('.tab-content').forEach(content => { | |
| content.classList.add('hidden'); | |
| }); | |
| document.getElementById(`${tab}-tab`).classList.remove('hidden'); | |
| }); | |
| }); | |
| // Modal handling | |
| 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(); | |
| } | |
| } | |
| }); | |
| // Recipe cards click | |
| 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'); | |
| }); | |
| }); | |
| // Voice recording | |
| 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'; | |
| // Simulate transcription (would use Web Speech API in real app) | |
| setTimeout(() => { | |
| recordingResult.classList.remove('hidden'); | |
| useVoiceInput.classList.remove('hidden'); | |
| }, 1000); | |
| } | |
| // Quick questions | |
| document.querySelectorAll('.quick-question-btn').forEach(btn => { | |
| btn.addEventListener('click', function() { | |
| const chatContainer = document.querySelector('.chat-container'); | |
| // Add user question | |
| 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); | |
| // Simulate AI response after delay | |
| 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}`; | |
| } | |
| // Auto-fill shopping list | |
| document.getElementById('autoFillBtn').addEventListener('click', function() { | |
| alert('Shopping list would be filled with ingredients from your saved recipes'); | |
| }); | |
| // Add recipe ingredients to shopping list | |
| document.getElementById('addToShopping').addEventListener('click', function() { | |
| alert('Selected ingredients would be added to your shopping list'); | |
| }); | |
| // Filters for recipes | |
| document.querySelectorAll('.filter-btn, .cuisine-btn').forEach(btn => { | |
| btn.addEventListener('click', function() { | |
| // In a real app, this would filter the recipe cards | |
| 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'); | |
| } | |
| }); | |
| }); | |
| // Show more recipes | |
| 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> |