210 lines
9.7 KiB
HTML
210 lines
9.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Keep My Weight - Personal Weight & Meal Tracker</title>
|
|
<link rel="stylesheet" href="css/styles.css">
|
|
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>⚖️</text></svg>">
|
|
<!-- Authentication is now handled by Nginx -->
|
|
</head>
|
|
<body>
|
|
<div class="app-container">
|
|
<header>
|
|
<h1>Keep My Weight</h1>
|
|
<p class="tagline">Simple, private weight & meal tracking</p>
|
|
</header>
|
|
|
|
<main>
|
|
<section class="tabs">
|
|
<button id="tab-weight" class="tab-btn active">Weight Log</button>
|
|
<button id="tab-meals" class="tab-btn">Meal Log</button>
|
|
<button id="tab-charts" class="tab-btn">Progress</button>
|
|
<button id="tab-settings" class="tab-btn">Settings</button>
|
|
</section>
|
|
|
|
<!-- Weight Log Tab -->
|
|
<div id="weight-log-content" class="tab-content active">
|
|
<div class="card">
|
|
<h2>Add Weight Entry</h2>
|
|
<form id="weight-form">
|
|
<div class="form-group">
|
|
<label for="weight-date">Date</label>
|
|
<input type="date" id="weight-date" name="weight-date" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="weight-value">Weight (kg)</label>
|
|
<input type="number" id="weight-value" name="weight-value" step="0.1" min="20" max="500" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="weight-notes">Notes (optional)</label>
|
|
<textarea id="weight-notes" name="weight-notes" rows="2"></textarea>
|
|
</div>
|
|
<button type="submit" class="btn primary-btn">Save Weight</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h2>Weight History</h2>
|
|
<div class="table-container">
|
|
<table id="weight-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Date</th>
|
|
<th>Weight (kg)</th>
|
|
<th>Notes</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="weight-entries">
|
|
<!-- Weight entries will be added here dynamically -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Meals Log Tab -->
|
|
<div id="meals-log-content" class="tab-content">
|
|
<div class="card">
|
|
<h2>Add Meal Entries</h2>
|
|
<form id="meal-form">
|
|
<div class="form-group">
|
|
<label for="meal-date">Date</label>
|
|
<input type="date" id="meal-date" name="meal-date" required>
|
|
</div>
|
|
|
|
<div class="meal-sections">
|
|
<div class="form-group">
|
|
<label for="breakfast">Breakfast</label>
|
|
<textarea id="breakfast" name="breakfast" rows="2"></textarea>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="lunch">Lunch</label>
|
|
<textarea id="lunch" name="lunch" rows="2"></textarea>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="dinner">Dinner</label>
|
|
<textarea id="dinner" name="dinner" rows="2"></textarea>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="other-meals">Other</label>
|
|
<textarea id="other-meals" name="other-meals" rows="2"></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<button type="submit" class="btn primary-btn">Save Meals</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h2>Meal History</h2>
|
|
<div class="table-container">
|
|
<table id="meal-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Date</th>
|
|
<th>Breakfast</th>
|
|
<th>Lunch</th>
|
|
<th>Dinner</th>
|
|
<th>Other</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="meal-entries">
|
|
<!-- Meal entries will be added here dynamically -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Charts Tab -->
|
|
<div id="charts-content" class="tab-content">
|
|
<div class="card">
|
|
<h2>Weight Progress</h2>
|
|
<div class="chart-filters">
|
|
<div class="form-group">
|
|
<label for="chart-start-date">From</label>
|
|
<input type="date" id="chart-start-date">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="chart-end-date">To</label>
|
|
<input type="date" id="chart-end-date">
|
|
</div>
|
|
<button id="apply-date-filter" class="btn secondary-btn">Apply Filter</button>
|
|
<button id="reset-date-filter" class="btn text-btn">Reset</button>
|
|
</div>
|
|
<div id="weight-chart" class="chart-container">
|
|
<!-- Weight chart will be rendered here -->
|
|
<div class="placeholder-message">Add weight entries to see your progress chart</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h2>Export Data</h2>
|
|
<div class="btn-group">
|
|
<button id="export-csv" class="btn secondary-btn">Export as CSV</button>
|
|
<button id="copy-table-data" class="btn secondary-btn">Copy to Clipboard</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Settings Tab -->
|
|
<div id="settings-content" class="tab-content">
|
|
<div class="card">
|
|
<h2>Data Management</h2>
|
|
<div class="form-group">
|
|
<h3>Backup Data</h3>
|
|
<p>Download all your weight and meal data as a JSON file</p>
|
|
<button id="export-data" class="btn primary-btn">Export Data</button>
|
|
</div>
|
|
<div class="form-group">
|
|
<h3>Import Data</h3>
|
|
<p>Load previously exported data from a JSON file</p>
|
|
<div class="file-input-container">
|
|
<label for="import-data-file" class="btn primary-btn">Choose File</label>
|
|
<input type="file" id="import-data-file" accept=".json">
|
|
<span id="file-name-display">No file selected</span>
|
|
</div>
|
|
<div class="import-options">
|
|
<label class="radio-container">
|
|
<input type="radio" name="import-mode" value="merge" checked>
|
|
<span class="radio-text">Merge with existing data</span>
|
|
</label>
|
|
<label class="radio-container">
|
|
<input type="radio" name="import-mode" value="overwrite">
|
|
<span class="radio-text">Overwrite existing data</span>
|
|
</label>
|
|
</div>
|
|
<button id="import-data" class="btn secondary-btn" disabled>Import</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h2>About</h2>
|
|
<p>Keep My Weight is a minimalist, privacy-first weight and meal tracking application.</p>
|
|
<ul class="features-list">
|
|
<li>All your data stays on your device</li>
|
|
<li>No account or registration required</li>
|
|
<li>Simple, distraction-free interface</li>
|
|
</ul>
|
|
<p><strong>Version:</strong> 1.0.0</p>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<footer>
|
|
<p>© 2025 Keep My Weight. Your data stays private, always.</p>
|
|
</footer>
|
|
</div>
|
|
|
|
<!-- JavaScript -->
|
|
<script src="js/utils.js"></script>
|
|
<script src="js/dataManager.js"></script>
|
|
<script src="js/ui.js"></script>
|
|
<script src="js/charts.js"></script>
|
|
<script src="js/app.js"></script>
|
|
</body>
|
|
</html>
|