285 lines
14 KiB
PHP
285 lines
14 KiB
PHP
<?php
|
|
declare(strict_types=1);
|
|
require_once __DIR__ . '/db/config.php';
|
|
$pdo = db();
|
|
|
|
// Initialize goals
|
|
$pdo->exec("INSERT IGNORE INTO user_goals (goal_key, goal_value) VALUES ('calories', 2500), ('protein', 130), ('creatine', 5), ('water', 2.5), ('weight', 75)");
|
|
|
|
$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Modern nutrition tracking for athletes.';
|
|
$projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
|
|
?>
|
|
<!doctype html>
|
|
<html lang="en" data-bs-theme="dark">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
|
|
<title>Nutrition Pulse</title>
|
|
<meta name="description" content="<?= htmlspecialchars($projectDescription) ?>" />
|
|
<meta property="og:description" content="<?= htmlspecialchars($projectDescription) ?>" />
|
|
<meta property="twitter:description" content="<?= htmlspecialchars($projectDescription) ?>" />
|
|
<?php if ($projectImageUrl): ?>
|
|
<meta property="og:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
|
|
<meta property="twitter:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
|
|
<?php endif; ?>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="assets/css/custom.css?v=<?= time() ?>">
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="container-mobile">
|
|
<header class="d-flex justify-content-between align-items-center mb-4">
|
|
<div>
|
|
<h1 class="h3 fw-bold mb-1">Nutrition Pulse</h1>
|
|
<p class="text-muted small mb-0"><?= date('l, M d') ?></p>
|
|
</div>
|
|
<div class="dropdown">
|
|
<button class="btn btn-outline-secondary btn-sm rounded-circle p-2 border-0" type="button" data-bs-toggle="dropdown">
|
|
<svg width="20" height="20" fill="currentColor" viewBox="0 0 16 16"><path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/></svg>
|
|
</button>
|
|
<ul class="dropdown-menu dropdown-menu-end shadow-lg border-0">
|
|
<li><a class="dropdown-item small py-2" href="#" data-bs-toggle="modal" data-bs-target="#goalsModal">Daily Goals</a></li>
|
|
<li><a class="dropdown-item small py-2" href="#" data-bs-toggle="modal" data-bs-target="#weightModal">Log Weight</a></li>
|
|
<li><hr class="dropdown-divider"></li>
|
|
<li><p class="dropdown-item-text text-muted mb-0" style="font-size: 0.7rem;">Bulgarian AI support enabled</p></li>
|
|
</ul>
|
|
</div>
|
|
</header>
|
|
|
|
<ul class="nav nav-pills mb-4 w-100 p-1" id="mainTab" role="tablist">
|
|
<li class="nav-item flex-fill" role="presentation">
|
|
<button class="nav-link active w-100" id="today-tab" data-bs-toggle="pill" data-bs-target="#today" type="button" role="tab">Today</button>
|
|
</li>
|
|
<li class="nav-item flex-fill" role="presentation">
|
|
<button class="nav-link w-100" id="health-tab" data-bs-toggle="pill" data-bs-target="#health" type="button" role="tab">Health</button>
|
|
</li>
|
|
<li class="nav-item flex-fill" role="presentation">
|
|
<button class="nav-link w-100" id="analysis-tab" data-bs-toggle="pill" data-bs-target="#analysis" type="button" role="tab">Trends</button>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="tab-content" id="mainTabContent">
|
|
<!-- TODAY TAB -->
|
|
<div class="tab-pane fade show active" id="today" role="tabpanel">
|
|
<!-- Reminders / Quick Status -->
|
|
<div id="reminders-row" class="d-flex gap-2 mb-3 overflow-auto pb-2" style="scrollbar-width: none;">
|
|
<!-- Reminders filled by JS -->
|
|
</div>
|
|
|
|
<!-- Stats Section -->
|
|
<div id="stats-container">
|
|
<!-- Calories -->
|
|
<div class="card-stat">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<span class="stat-label">Calories</span>
|
|
<span class="text-muted small"><span id="cal-left" class="fw-bold text-white">0</span> kcal left</span>
|
|
</div>
|
|
<div class="stat-value"><span id="cal-consumed">0</span> <span class="fs-6 fw-normal text-muted">/ <span id="cal-goal">0</span></span></div>
|
|
<div class="progress-thin"><div id="cal-progress" class="progress-bar-inner" style="width: 0%"></div></div>
|
|
</div>
|
|
|
|
<!-- Protein -->
|
|
<div class="card-stat">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<span class="stat-label">Protein</span>
|
|
<span class="text-muted small"><span id="pro-left" class="fw-bold text-white">0</span>g left</span>
|
|
</div>
|
|
<div class="stat-value"><span id="pro-consumed">0</span>g <span class="fs-6 fw-normal text-muted">/ <span id="pro-goal">0</span>g</span></div>
|
|
<div class="progress-thin"><div id="pro-progress" class="progress-bar-inner" style="width: 0%"></div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<button class="btn btn-primary-custom mb-4" data-bs-toggle="modal" data-bs-target="#addLogModal">Log Food / Supplement</button>
|
|
|
|
<!-- Recent History -->
|
|
<div class="recent-logs">
|
|
<h2 class="h6 fw-bold mb-3">Today's History</h2>
|
|
<div id="recent-logs-list">
|
|
<div class="text-center py-4">
|
|
<p class="text-muted small mb-0">No entries today yet.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- HEALTH TAB -->
|
|
<div class="tab-pane fade" id="health" role="tabpanel">
|
|
<!-- Water Intake -->
|
|
<div class="card-stat mb-4">
|
|
<div class="d-flex justify-content-between align-items-center mb-2">
|
|
<span class="stat-label text-info">Water Intake</span>
|
|
<span class="text-muted small"><span id="water-consumed">0</span> / <span id="water-goal">0</span> L</span>
|
|
</div>
|
|
<div class="d-flex align-items-center gap-3">
|
|
<div class="flex-grow-1">
|
|
<div class="progress-thin"><div id="water-progress" class="progress-bar-inner bg-info" style="width: 0%"></div></div>
|
|
</div>
|
|
<button id="btnAddWater" class="btn btn-info btn-sm rounded-circle p-2 text-white" style="width:36px; height:36px;">+</button>
|
|
</div>
|
|
<div class="mt-3 d-flex gap-2">
|
|
<button class="btn btn-outline-info btn-xs py-1 px-2 small water-btn" data-amount="0.25">250ml</button>
|
|
<button class="btn btn-outline-info btn-xs py-1 px-2 small water-btn" data-amount="0.5">500ml</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Weight Tracking -->
|
|
<div class="card-stat mb-4">
|
|
<div class="d-flex justify-content-between align-items-center mb-2">
|
|
<span class="stat-label text-warning">Current Weight</span>
|
|
<span class="text-muted small" id="weight-last-date">Last logged: --</span>
|
|
</div>
|
|
<div class="d-flex align-items-baseline gap-2">
|
|
<span class="stat-value text-warning mb-0" id="weight-current">0</span>
|
|
<span class="text-muted">kg</span>
|
|
</div>
|
|
<button class="btn btn-outline-warning w-100 mt-3 btn-sm" data-bs-toggle="modal" data-bs-target="#weightModal">Update Weight</button>
|
|
</div>
|
|
|
|
<!-- Supplement Status -->
|
|
<div class="card-stat">
|
|
<span class="stat-label">Supplements</span>
|
|
<div class="mt-3">
|
|
<div class="d-flex justify-content-between align-items-center mb-1">
|
|
<span class="small">Creatine</span>
|
|
<span id="cre-status" class="badge bg-danger">Not taken</span>
|
|
</div>
|
|
<div class="progress-thin"><div id="cre-progress-health" class="progress-bar-inner" style="width: 0%"></div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ANALYSIS TAB -->
|
|
<div class="tab-pane fade" id="analysis" role="tabpanel">
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<h2 class="h6 fw-bold mb-0">Performance Trends</h2>
|
|
<div class="btn-group btn-group-sm">
|
|
<input type="radio" class="btn-check" name="analysisPeriod" id="periodWeekly" checked>
|
|
<label class="btn btn-outline-secondary" for="periodWeekly">Week</label>
|
|
<input type="radio" class="btn-check" name="analysisPeriod" id="periodMonthly">
|
|
<label class="btn btn-outline-secondary" for="periodMonthly">Month</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-stat mb-4">
|
|
<span class="stat-label">Weight (kg)</span>
|
|
<div class="mt-2" style="height: 200px;">
|
|
<canvas id="weightChart"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-stat mb-4">
|
|
<span class="stat-label">Calories vs Goal</span>
|
|
<div class="mt-2" style="height: 200px;">
|
|
<canvas id="caloriesChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- MODALS -->
|
|
<div class="modal fade" id="addLogModal" tabindex="-1">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content p-4">
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<h2 class="h5 fw-bold mb-0">New Log</h2>
|
|
<ul class="nav nav-pills small" id="logTab" role="tablist">
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link active py-1 px-3" id="manual-tab" data-bs-toggle="pill" data-bs-target="#manual-log" type="button" role="tab">Manual</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link py-1 px-3" id="ai-tab" data-bs-toggle="pill" data-bs-target="#ai-log" type="button" role="tab">AI ✨</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="tab-content">
|
|
<div class="tab-pane fade show active" id="manual-log" role="tabpanel">
|
|
<form id="addLogForm">
|
|
<div class="mb-3">
|
|
<label class="form-label small fw-bold">Item Name</label>
|
|
<input type="text" id="logName" class="form-control" placeholder="e.g. Chicken Breast" required>
|
|
</div>
|
|
<div class="row g-3">
|
|
<div class="col-6 mb-3">
|
|
<label class="form-label small fw-bold">Calories (kcal)</label>
|
|
<input type="number" id="logCalories" class="form-control" placeholder="0">
|
|
</div>
|
|
<div class="col-6 mb-3">
|
|
<label class="form-label small fw-bold">Protein (g)</label>
|
|
<input type="number" id="logProtein" class="form-control" placeholder="0">
|
|
</div>
|
|
<div class="col-12 mb-3">
|
|
<label class="form-label small fw-bold">Creatine (g)</label>
|
|
<input type="number" step="0.1" id="logCreatine" class="form-control" placeholder="0">
|
|
</div>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary-custom mt-3">Save Entry</button>
|
|
</form>
|
|
</div>
|
|
<div class="tab-pane fade" id="ai-log" role="tabpanel">
|
|
<div class="mb-3">
|
|
<label class="form-label small fw-bold">Describe your meal (Bulgarian OK)</label>
|
|
<textarea id="aiInput" class="form-control" rows="4" placeholder="e.g. Една баница и протеинов шейк"></textarea>
|
|
<div id="aiFeedback" class="mt-2 small d-none"></div>
|
|
</div>
|
|
<button id="btnAnalyzeAI" class="btn btn-primary-custom">
|
|
<span id="aiBtnText">Analyze with AI</span>
|
|
<span id="aiBtnSpinner" class="spinner-border spinner-border-sm ms-2 d-none" role="status"></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal fade" id="weightModal" tabindex="-1">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content p-4">
|
|
<h2 class="h5 fw-bold mb-4">Log Weight</h2>
|
|
<form id="weightForm">
|
|
<div class="mb-3">
|
|
<label class="form-label small fw-bold">Weight (kg)</label>
|
|
<input type="number" step="0.1" id="weightInput" class="form-control" required>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary-custom mt-3">Save Weight</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal fade" id="goalsModal" tabindex="-1">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content p-4">
|
|
<h2 class="h5 fw-bold mb-4">Daily Goals</h2>
|
|
<form id="updateGoalsForm">
|
|
<div class="mb-3">
|
|
<label class="form-label small fw-bold">Calorie Target (kcal)</label>
|
|
<input type="number" id="goalCalories" class="form-control" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label small fw-bold">Protein Target (g)</label>
|
|
<input type="number" id="goalProtein" class="form-control" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label small fw-bold">Creatine Target (g)</label>
|
|
<input type="number" step="0.1" id="goalCreatine" class="form-control" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label small fw-bold">Water Target (L)</label>
|
|
<input type="number" step="0.1" id="goalWater" class="form-control" required>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary-custom mt-3">Update Goals</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script src="assets/js/main.js?v=<?= time() ?>"></script>
|
|
</body>
|
|
</html>
|