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">
|
|
|
|
|
|
<meta name="theme-color" content="#ffffff">
|
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">
|
|
|
|
|
|
<h2>🍎 Food Tracker</h2>
|
2025-06-11 21:09:35 -03:00
|
|
|
|
</div>
|
2025-06-12 18:30:11 -03:00
|
|
|
|
|
|
|
|
|
|
<!-- Authentication Forms -->
|
|
|
|
|
|
<div id="auth-section" class="auth-section">
|
|
|
|
|
|
<!-- Login Form -->
|
|
|
|
|
|
<div id="login-form" class="auth-form">
|
|
|
|
|
|
<h3>Login</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>Register</h3>
|
|
|
|
|
|
<form id="registerForm">
|
|
|
|
|
|
<div class="form-group">
|
2025-06-12 18:52:44 -03:00
|
|
|
|
<input type="text" id="registerName" placeholder="Name" required>
|
2025-06-12 18:30:11 -03:00
|
|
|
|
</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>
|
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-06-13 19:18:31 -03:00
|
|
|
|
<button id="settingsBtn" class="logout-btn">Settings</button>
|
2025-06-12 18:30:11 -03:00
|
|
|
|
<button id="logoutBtn" class="logout-btn">Logout</button>
|
|
|
|
|
|
</div>
|
2025-06-11 21:09:35 -03:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
2025-06-12 18:30:11 -03:00
|
|
|
|
</header>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 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-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
|
|
|
|
|
2025-06-16 17:33:52 -03:00
|
|
|
|
<!-- Food Search Input -->
|
|
|
|
|
|
|
|
|
|
|
|
|
2025-06-12 18:30:11 -03:00
|
|
|
|
<div class="add-food-section">
|
|
|
|
|
|
<h2 class="add-food-title">Add Food</h2>
|
|
|
|
|
|
<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>
|
|
|
|
|
|
</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>
|
|
|
|
|
|
</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-06-11 21:09:35 -03:00
|
|
|
|
</div>
|
|
|
|
|
|
|
2025-06-12 18:30:11 -03:00
|
|
|
|
<div class="food-table-section">
|
|
|
|
|
|
<div class="table-title">Food Log</div>
|
|
|
|
|
|
<div class="table-wrapper">
|
|
|
|
|
|
<table class="food-table">
|
|
|
|
|
|
<thead>
|
|
|
|
|
|
<tr>
|
|
|
|
|
|
<th class="hidden-column">ID</th>
|
|
|
|
|
|
<th>Time</th>
|
|
|
|
|
|
<th>Food</th>
|
|
|
|
|
|
<th>Grams</th>
|
|
|
|
|
|
<th>Calories</th>
|
|
|
|
|
|
<th>Protein (g)</th>
|
|
|
|
|
|
<th>Fat (g)</th>
|
|
|
|
|
|
<th>Carbs (g)</th>
|
|
|
|
|
|
<th>Fiber (g)</th>
|
|
|
|
|
|
<th>Action</th>
|
2025-06-18 16:56:11 -03:00
|
|
|
|
<th class="hidden-column">Alkaline</th>
|
2025-06-12 18:30:11 -03:00
|
|
|
|
</tr>
|
|
|
|
|
|
</thead>
|
|
|
|
|
|
<tbody id="foodTableBody">
|
|
|
|
|
|
<!-- Food entries will be added here -->
|
|
|
|
|
|
</tbody>
|
|
|
|
|
|
</table>
|
|
|
|
|
|
</div>
|
2025-09-02 18:21:59 -03:00
|
|
|
|
<div class="food-cards-container" id="foodCardsContainer">
|
|
|
|
|
|
<!-- Food cards will be added here -->
|
|
|
|
|
|
</div>
|
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>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="date-display">Define your macros goal</div>
|
|
|
|
|
|
|
|
|
|
|
|
<form id="settingsForm" class="settings-form">
|
2025-06-23 18:24:37 -03:00
|
|
|
|
<div class="form-group">
|
|
|
|
|
|
<label for="caloriesGoal">Calories goal</label>
|
|
|
|
|
|
<input type="number" id="caloriesGoal" placeholder="Calories" required>
|
|
|
|
|
|
</div>
|
2025-06-13 19:18:31 -03:00
|
|
|
|
<div class="form-group">
|
2025-06-16 17:33:52 -03:00
|
|
|
|
<label for="proteinGoal">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-06-16 17:33:52 -03:00
|
|
|
|
<label for="proteinGoal">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-06-16 17:33:52 -03:00
|
|
|
|
<label for="proteinGoal">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-06-16 17:33:52 -03:00
|
|
|
|
<label for="proteinGoal">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>
|
