2025-06-11 21:09:35 -03:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > Daily Calorie Tracker< / title >
< link rel = "stylesheet" href = "style.css" >
2025-06-12 18:30:11 -03:00
< link rel = "stylesheet" href = "auth.css" >
2025-06-13 19:18:31 -03:00
< link rel = "stylesheet" href = "settings.css" >
2025-06-18 17:39:37 -03:00
< link rel = "apple-touch-icon" sizes = "57x57" href = "/assets/apple-icon-57x57.png" >
< link rel = "apple-touch-icon" sizes = "60x60" href = "/assets/apple-icon-60x60.png" >
< link rel = "apple-touch-icon" sizes = "72x72" href = "/assets/apple-icon-72x72.png" >
< link rel = "apple-touch-icon" sizes = "76x76" href = "/assets/apple-icon-76x76.png" >
< link rel = "apple-touch-icon" sizes = "114x114" href = "/assets/apple-icon-114x114.png" >
< link rel = "apple-touch-icon" sizes = "120x120" href = "/assets/apple-icon-120x120.png" >
< link rel = "apple-touch-icon" sizes = "144x144" href = "/assets/apple-icon-144x144.png" >
< link rel = "apple-touch-icon" sizes = "152x152" href = "/assets/apple-icon-152x152.png" >
< link rel = "apple-touch-icon" sizes = "180x180" href = "/assets/apple-icon-180x180.png" >
< link rel = "icon" type = "image/png" sizes = "192x192" href = "/assets/android-icon-192x192.png" >
< link rel = "icon" type = "image/png" sizes = "32x32" href = "/assets/favicon-32x32.png" >
< link rel = "icon" type = "image/png" sizes = "96x96" href = "/assets/favicon-96x96.png" >
< link rel = "icon" type = "image/png" sizes = "16x16" href = "/assets/favicon-16x16.png" >
< link rel = "manifest" href = "/assets/manifest.json" >
< meta name = "msapplication-TileColor" content = "#ffffff" >
< meta name = "msapplication-TileImage" content = "/assets/ms-icon-144x144.png" >
2025-10-27 12:51:50 -03:00
< meta name = "theme-color" content = "#121212" >
2025-06-11 21:09:35 -03:00
< / head >
< body >
2025-06-12 18:30:11 -03:00
<!-- Authentication Header -->
< header class = "auth-header" >
< div class = "auth-container" >
< div class = "logo" >
2025-12-03 16:42:52 -03:00
< h1 > 🍎 Food Tracker< / h1 >
2025-06-11 21:09:35 -03:00
< / div >
2025-06-12 18:30:11 -03:00
2025-12-03 16:42:52 -03:00
<!-- Authentication Buttons (shown when not logged in) -->
< div id = "auth-buttons" class = "auth-buttons" >
< button id = "open-login-btn" class = "header-btn" > Login< / button >
< button id = "open-register-btn" class = "header-btn primary" > Get Started< / button >
2025-06-11 21:09:35 -03:00
< / div >
2025-06-12 18:30:11 -03:00
<!-- User Info (shown when logged in) -->
< div id = "user-info" class = "user-info hidden" >
< div class = "user-details" >
< span id = "userName" > Welcome, User!< / span >
2025-09-04 13:49:01 -03:00
< div class = "header-buttons" >
2025-10-30 13:18:01 -03:00
< button id = "shareBtn" class = "header-btn" > 🔗 Share< / button >
2025-09-04 13:49:01 -03:00
< button id = "calendarBtn" class = "header-btn" > 📅 Calendar< / button >
< button id = "settingsBtn" class = "header-btn" > ⚙️ Settings< / button >
< button id = "logoutBtn" class = "header-btn logout" > 🚪 Logout< / button >
< / div >
< / div >
<!-- Mobile menu toggle -->
< button id = "mobileMenuToggle" class = "mobile-menu-toggle hidden" > ☰< / button >
<!-- Mobile dropdown menu -->
< div id = "mobileMenu" class = "mobile-menu hidden" >
2025-10-30 13:18:01 -03:00
< button id = "shareBtnMobile" class = "mobile-menu-item" > 🔗 Share< / button >
2025-09-04 13:49:01 -03:00
< button id = "calendarBtnMobile" class = "mobile-menu-item" > 📅 Calendar< / button >
< button id = "settingsBtnMobile" class = "mobile-menu-item" > ⚙️ Settings< / button >
< button id = "logoutBtnMobile" class = "mobile-menu-item logout" > 🚪 Logout< / button >
2025-06-12 18:30:11 -03:00
< / div >
2025-06-11 21:09:35 -03:00
< / div >
< / div >
2025-06-12 18:30:11 -03:00
< / header >
2025-12-03 16:42:52 -03:00
<!-- Authentication Modal -->
< div id = "auth-modal" class = "auth-modal hidden" >
< div class = "auth-modal-content" >
< button id = "close-auth-modal" class = "close-modal-btn" > × < / button >
<!-- Login Form -->
< div id = "login-form" class = "auth-form" >
< h3 > Welcome Back< / h3 >
< form id = "loginForm" >
< div class = "form-group" >
< input type = "email" id = "loginEmail" placeholder = "Email" required >
< / div >
< div class = "form-group" >
< input type = "password" id = "loginPassword" placeholder = "Password" required >
< / div >
< button type = "submit" class = "auth-btn" > Login< / button >
< p class = "auth-switch" >
Don't have an account?
< a href = "#" id = "showRegister" > Register here< / a >
< / p >
< / form >
< / div >
<!-- Register Form -->
< div id = "register-form" class = "auth-form hidden" >
< h3 > Create Your Account< / h3 >
< form id = "registerForm" >
< div class = "form-group" >
< input type = "text" id = "registerName" placeholder = "Name" required >
< / div >
< div class = "form-group" >
< input type = "email" id = "registerEmail" placeholder = "Email" required >
< / div >
< div class = "form-group" >
< input type = "password" id = "registerPassword" placeholder = "Password" required minlength = "8" >
< / div >
< button type = "submit" class = "auth-btn" > Register< / button >
< p class = "auth-switch" >
Already have an account?
< a href = "#" id = "showLogin" > Login here< / a >
< / p >
< / form >
< / div >
< / div >
< / div >
<!-- Landing Page Content (shown when not logged in) -->
< section id = "landing-page" class = "landing-page hidden" >
< div class = "landing-container" >
< div class = "landing-hero" >
< h1 class = "landing-title" > Track Your Nutrition, Transform Your Health< / h1 >
< p class = "landing-subtitle" > Take control of your diet with our comprehensive calorie and nutrition tracker. Perfect for anyone who wants to maintain a balanced diet and achieve their health goals.< / p >
< / div >
< div class = "landing-features" >
< div class = "feature-card" >
< div class = "feature-icon" > 📊< / div >
< h3 > Detailed Tracking< / h3 >
< p > Monitor calories, protein, fat, carbs, and fiber for every meal. Get a complete picture of your daily nutrition.< / p >
< / div >
< div class = "feature-card" >
< div class = "feature-icon" > 🎯< / div >
< h3 > Set Goals< / h3 >
< p > Define your daily macros targets and track your progress. Stay motivated and on track with your health journey.< / p >
< / div >
< div class = "feature-card" >
< div class = "feature-icon" > 📅< / div >
< h3 > Calendar View< / h3 >
< p > Visualize your nutrition history with an intuitive calendar. See patterns and maintain consistency over time.< / p >
< / div >
< div class = "feature-card" >
< div class = "feature-icon" > 🥗< / div >
< h3 > Alkaline Balance< / h3 >
< p > Track your alkaline food intake to maintain a healthy pH balance and support overall wellness.< / p >
< / div >
< div class = "feature-card" >
< div class = "feature-icon" > 🔍< / div >
< h3 > Smart Search< / h3 >
< p > Quickly find and log foods from our comprehensive database. Make tracking effortless and accurate.< / p >
< / div >
< div class = "feature-card" >
< div class = "feature-icon" > 🔗< / div >
< h3 > Share Progress< / h3 >
< p > Share your daily food log with friends, trainers, or nutritionists. Get support and accountability.< / p >
< / div >
< / div >
< div class = "landing-cta" >
< h2 > Ready to Start Your Health Journey?< / h2 >
< p > Join today and take the first step towards a healthier, more balanced lifestyle.< / p >
< div class = "cta-buttons" >
< button id = "cta-register-btn" class = "cta-btn primary" > Get Started Free< / button >
< button id = "cta-login-btn" class = "cta-btn secondary" > Already Have an Account?< / button >
< / div >
< / div >
< / div >
< / section >
2025-06-12 18:30:11 -03:00
<!-- Loading Overlay -->
< div id = "loading-overlay" class = "loading-overlay hidden" >
< div class = "loading-spinner" > < / div >
< p > Loading...< / p >
< / div >
2025-06-11 21:09:35 -03:00
2025-10-30 13:18:01 -03:00
<!-- Share Modal -->
< div id = "share-modal" class = "modal-overlay hidden" >
< div class = "modal-content" >
< h2 > 🔗 Share This Day< / h2 >
< p > Share your food log for this day with others!< / p >
< div class = "share-link-container" >
< input
type = "text"
id = "share-link-input"
class = "share-link-input"
readonly
placeholder = "Generating share link..."
>
< button id = "copy-share-link" class = "copy-btn" > Copy< / button >
< / div >
< div class = "modal-buttons" >
< button id = "close-share-modal" class = "modal-btn" > Close< / button >
< / div >
< / div >
< / div >
<!-- Shared View Banner -->
< div id = "shared-view-banner" class = "shared-view-banner hidden" >
< span id = "shared-view-text" > 👁️ Viewing shared day from < strong id = "shared-user-name" > < / strong > on < strong id = "shared-date" > < / strong > < / span >
< / div >
2025-06-12 18:30:11 -03:00
<!-- Main App Content -->
< main id = "app-content" class = "hidden" >
< div class = "container" >
< div class = "date-display" id = "currentDate" > < / div >
< div class = "calories-banner" >
< div class = "calories-number" id = "caloriesCounter" > 0< / div >
< div class = "calories-text" > Calories Today< / div >
2025-06-23 18:24:37 -03:00
< div class = "calories-text-goal" id = "caloriesGoalText" > of 0< / div >
2025-06-18 16:56:11 -03:00
< div class = "calories-text-alkaline" id = "alkaline-level" > 80% Alkaline< / div >
2025-06-12 18:30:11 -03:00
< / div >
< div class = "nutrition-summary" id = "nutritionSummary" >
< div class = "nutrition-item" >
2025-06-16 17:33:52 -03:00
< div class = "nutrition-label" > Protein (g)< / div >
2025-06-12 18:30:11 -03:00
< div class = "nutrition-value" id = "proteinValue" > 0< / div >
2025-06-13 19:18:31 -03:00
< div class = "nutrition-label hidden" id = "proteinGoalText" > of 190< / div >
2025-06-12 18:30:11 -03:00
< / div >
< div class = "nutrition-item" >
2025-06-16 17:33:52 -03:00
< div class = "nutrition-label" > Fat (g)< / div >
2025-06-12 18:30:11 -03:00
< div class = "nutrition-value" id = "fatValue" > 0< / div >
2025-06-13 19:18:31 -03:00
< div class = "nutrition-label hidden" id = "fatGoalText" > of 190< / div >
2025-06-11 21:09:35 -03:00
< / div >
2025-06-12 18:30:11 -03:00
< div class = "nutrition-item" >
2025-06-16 17:33:52 -03:00
< div class = "nutrition-label" > Carbs (g)< / div >
2025-06-12 18:30:11 -03:00
< div class = "nutrition-value" id = "carboValue" > 0< / div >
2025-06-13 19:18:31 -03:00
< div class = "nutrition-label hidden" id = "carboGoalText" > of 190< / div >
2025-06-12 18:30:11 -03:00
< / div >
< div class = "nutrition-item" >
2025-06-16 17:33:52 -03:00
< div class = "nutrition-label" > Fiber (g)< / div >
2025-06-12 18:30:11 -03:00
< div class = "nutrition-value" id = "fiberValue" > 0< / div >
2025-06-13 19:18:31 -03:00
< div class = "nutrition-label hidden" id = "fiberGoalText" > of 190< / div >
2025-06-11 21:09:35 -03:00
< / div >
< / div >
2025-06-12 18:30:11 -03:00
< div class = "add-food-section" >
2025-09-04 17:33:16 -03:00
< h2 class = "add-food-title" id = "add-foot-title" > Add Food Entry< / h2 >
2025-06-12 18:30:11 -03:00
< div class = "add-food-form" >
< div class = "form-group" >
< label for = "foodSelect" > Food Item< / label >
2025-06-16 17:33:52 -03:00
< div class = "food-search-container" >
< input
type = "text"
class = "food-search-input"
id = "foodSearchInput"
placeholder = "Search food (e.g., apple, chicken breast, rice...)"
autocomplete = "off"
>
< div class = "search-loading" id = "searchLoading" > < / div >
<!-- Search Results Overlay -->
< div class = "search-results" id = "searchResults" >
<!-- Results will be populated here -->
< / div >
2025-09-04 12:51:43 -03:00
<!-- Hidden inputs for state -->
< input type = "hidden" id = "foodIdToUpdate" >
< input type = "hidden" id = "foodTimeToUpdate" >
2025-09-04 17:12:14 -03:00
< input type = "hidden" id = "foodCaloriesToUpdate" >
2025-06-16 17:33:52 -03:00
< / div >
2025-06-12 11:02:03 -03:00
< / div >
2025-06-12 18:30:11 -03:00
< div class = "form-group" >
< label for = "gramAmount" > Amount (grams)< / label >
< input type = "number" id = "gramAmount" min = "1" step = "1" value = "100" >
2025-06-12 11:02:03 -03:00
< / div >
2025-06-12 18:30:11 -03:00
< button class = "add-btn" id = "add-food-btn" > Add Food< / button >
2025-09-04 12:51:43 -03:00
< button class = "cancel-btn" id = "cancel-food-btn" > Cancel< / button >
2025-06-12 18:30:11 -03:00
< / div >
< div class = "display-none" id = "food-preview" >
< div class = "nutrition-summary" >
< div class = "nutrition-item" >
< div class = "nutrition-value" id = "calorieValuePreview" > 0< / div >
< div class = "nutrition-label" > Calories< / div >
< / div >
< div class = "nutrition-item" >
< div class = "nutrition-value" id = "proteinValuePreview" > 0< / div >
< div class = "nutrition-label" > Protein (g)< / div >
< / div >
< div class = "nutrition-item" >
< div class = "nutrition-value" id = "fatValuePreview" > 0< / div >
< div class = "nutrition-label" > Fat (g)< / div >
< / div >
< div class = "nutrition-item" >
< div class = "nutrition-value" id = "carboValuePreview" > 0< / div >
< div class = "nutrition-label" > Carbs (g)< / div >
< / div >
< div class = "nutrition-item" >
< div class = "nutrition-value" id = "fiberValuePreview" > 0< / div >
< div class = "nutrition-label" > Fiber (g)< / div >
< / div >
2025-06-12 11:02:03 -03:00
< / div >
< / div >
2025-12-03 17:38:29 -03:00
<!-- AI Nutrition Info Card -->
< div class = "display-none" id = "ai-nutrition-card" >
< div class = "ai-nutrition-container" >
< h3 class = "ai-nutrition-title" >
< span class = "ai-badge" > AI< / span >
Detailed Nutrition Information
< / h3 >
<!-- Loading State -->
< div id = "ai-nutrition-loading" class = "ai-loading" >
< div class = "ai-spinner" > < / div >
< p > Analyzing nutritional content...< / p >
< / div >
<!-- Error State -->
< div id = "ai-nutrition-error" class = "ai-error hidden" >
< p > Unable to load detailed nutrition info. Please try again.< / p >
< / div >
<!-- Content -->
< div id = "ai-nutrition-content" class = "ai-nutrition-content hidden" >
<!-- Vitamins Section -->
< div class = "ai-nutrition-section" >
< h4 class = "ai-section-title" > Vitamins< / h4 >
< ul id = "ai-vitamins-list" class = "ai-list" > < / ul >
< / div >
<!-- Minerals Section -->
< div class = "ai-nutrition-section" >
< h4 class = "ai-section-title" > Minerals< / h4 >
< ul id = "ai-minerals-list" class = "ai-list" > < / ul >
< / div >
<!-- Benefits Section -->
< div class = "ai-nutrition-section" >
< h4 class = "ai-section-title" > Health Benefits< / h4 >
< ul id = "ai-benefits-list" class = "ai-list" > < / ul >
< / div >
<!-- Notes Section -->
< div class = "ai-nutrition-section" id = "ai-notes-section" >
< h4 class = "ai-section-title" > Notes< / h4 >
< p id = "ai-notes-text" class = "ai-notes" > < / p >
< / div >
< / div >
< / div >
< / div >
2025-06-11 21:09:35 -03:00
< / div >
2025-09-03 21:03:46 -03:00
< div class = "section-title" > Food Log< / div >
< div class = "food-cards-container" id = "foodCardsContainer" >
<!-- Food cards will be added here -->
2025-06-11 21:09:35 -03:00
< / div >
2025-06-12 18:30:11 -03:00
< div class = "calendar-section" >
< div class = "calendar-header" >
< button class = "calendar-nav" id = "previous-month-btn" > ‹ < / button >
< div class = "calendar-title" id = "calendarTitle" > Month Year< / div >
< button class = "calendar-nav" id = "next-month-btn" > › < / button >
< / div >
< div class = "calendar-grid" id = "calendarGrid" >
<!-- Calendar will be generated here -->
< / div >
2025-06-11 21:09:35 -03:00
< / div >
< / div >
2025-06-12 18:30:11 -03:00
< / main >
2025-06-11 21:09:35 -03:00
2025-06-13 19:18:31 -03:00
<!-- Settings -->
< section id = "settings-content" class = "hidden" >
< div class = "container" >
< h1 > ⚙️ Settings< / h1 >
2025-09-07 16:33:56 -03:00
< div class = "date-display" > Define your daily macros goal< / div >
2025-06-13 19:18:31 -03:00
< form id = "settingsForm" class = "settings-form" >
2025-06-23 18:24:37 -03:00
< div class = "form-group" >
2025-09-07 16:33:56 -03:00
< label for = "caloriesGoal" > Daily calorie goal< / label >
2025-06-23 18:24:37 -03:00
< input type = "number" id = "caloriesGoal" placeholder = "Calories" required >
< / div >
2025-06-13 19:18:31 -03:00
< div class = "form-group" >
2025-09-07 16:33:56 -03:00
< label for = "proteinGoal" > Daily protein goal< / label >
2025-06-13 19:18:31 -03:00
< input type = "number" id = "proteinGoal" placeholder = "Proteins in grams" required >
< / div >
< div class = "form-group" >
2025-09-07 16:33:56 -03:00
< label for = "fatGoal" > Daily fat goal< / label >
2025-06-13 19:18:31 -03:00
< input type = "number" id = "fatGoal" placeholder = "Fat in grams" required >
< / div >
< div class = "form-group" >
2025-09-07 16:33:56 -03:00
< label for = "carboGoal" > Daily carbs goal< / label >
2025-06-13 19:18:31 -03:00
< input type = "number" id = "carboGoal" placeholder = "Carbo in grams" required >
< / div >
< div class = "form-group" >
2025-09-07 16:33:56 -03:00
< label for = "fiberGoal" > Daily fiber goal< / label >
2025-06-13 19:18:31 -03:00
< input type = "number" id = "fiberGoal" placeholder = "Fiber in grams" required >
< / div >
< button type = "submit" class = "settings-btn" > Save< / button >
< / form >
< / div >
< / section >
2025-06-12 16:06:02 -03:00
< script type = "module" src = "src/index.ts" > < / script >
2025-06-11 21:09:35 -03:00
< / body >
< / html >
