291 lines
18 KiB
PHP
291 lines
18 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, viewport-fit=cover" />
|
|
<title>Nutrition Pulse</title>
|
|
<meta name="description" content="<?= htmlspecialchars($projectDescription) ?>" />
|
|
|
|
<!-- Mobile / PWA Meta Tags -->
|
|
<meta name="mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
|
<meta name="apple-mobile-web-app-title" content="Pulse">
|
|
<meta name="theme-color" content="#0f172a">
|
|
<link rel="manifest" href="manifest.json">
|
|
|
|
<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="app-shell">
|
|
<header class="app-bar px-3 py-2">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<h1 class="h5 fw-bold mb-0">Nutrition Pulse</h1>
|
|
<p class="text-muted x-small mb-0"><?= date('l, F d') ?></p>
|
|
</div>
|
|
<div class="dropdown">
|
|
<button class="btn btn-outline-secondary btn-sm rounded-circle p-1 border-0" type="button" data-bs-toggle="dropdown">
|
|
<svg width="24" height="24" 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><a class="dropdown-item small py-2" href="#" data-bs-toggle="modal" data-bs-target="#photoModal">Upload Progress Photo</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>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Hidden tab triggers for Bootstrap API -->
|
|
<ul class="nav nav-pills d-none" id="mainTab" role="tablist">
|
|
<li class="nav-item" role="presentation"><button class="nav-link active" id="today-tab" data-bs-toggle="pill" data-bs-target="#today" type="button" role="tab"></button></li>
|
|
<li class="nav-item" role="presentation"><button class="nav-link" id="health-tab" data-bs-toggle="pill" data-bs-target="#health" type="button" role="tab"></button></li>
|
|
<li class="nav-item" role="presentation"><button class="nav-link" id="gallery-tab" data-bs-toggle="pill" data-bs-target="#gallery" type="button" role="tab"></button></li>
|
|
<li class="nav-item" role="presentation"><button class="nav-link" id="analysis-tab" data-bs-toggle="pill" data-bs-target="#analysis" type="button" role="tab"></button></li>
|
|
</ul>
|
|
|
|
<main class="app-content px-3 pt-3 pb-5">
|
|
<div class="tab-content" id="mainTabContent">
|
|
<!-- TODAY TAB -->
|
|
<div class="tab-pane fade show active" id="today" role="tabpanel">
|
|
<div id="reminders-row" class="d-flex gap-2 mb-3 overflow-auto pb-2" style="scrollbar-width: none;"></div>
|
|
<div id="stats-container">
|
|
<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>
|
|
<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>
|
|
<div class="card-stat mb-3">
|
|
<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 class="today-water-consumed fw-bold text-white">0</span> / <span class="today-water-goal">0</span> L</span>
|
|
</div>
|
|
<div class="progress-thin mb-3"><div class="today-water-progress-bar progress-bar-inner bg-info" style="width: 0%"></div></div>
|
|
<div class="d-flex gap-2">
|
|
<button class="btn btn-outline-info flex-fill py-2 small water-btn" data-amount="0.25">+250ml</button>
|
|
<button class="btn btn-outline-info flex-fill py-2 small water-btn" data-amount="0.5">+500ml</button>
|
|
</div>
|
|
</div>
|
|
<div class="card-stat mb-4">
|
|
<span class="stat-label mb-3 d-block">Supplements</span>
|
|
<div id="today-supplements-list" class="d-flex flex-wrap gap-2"></div>
|
|
</div>
|
|
<button class="btn btn-primary-custom mb-4 shadow-sm" data-bs-toggle="modal" data-bs-target="#addLogModal">Log Food / Supplement</button>
|
|
<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">
|
|
<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>
|
|
<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>
|
|
<div class="card-stat">
|
|
<span class="stat-label">Creatine Status</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>
|
|
|
|
<!-- GALLERY TAB -->
|
|
<div class="tab-pane fade" id="gallery" role="tabpanel">
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<h2 class="h6 fw-bold mb-0">Progress Gallery</h2>
|
|
<button class="btn btn-primary-custom btn-sm w-auto py-2 px-3" data-bs-toggle="modal" data-bs-target="#photoModal">+ Add Photo</button>
|
|
</div>
|
|
<div id="gallery-container" class="row g-3"></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>
|
|
</main>
|
|
|
|
<nav class="bottom-nav">
|
|
<a href="#" class="nav-item active" data-tab="today">
|
|
<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
|
|
<span>Today</span>
|
|
</a>
|
|
<a href="#" class="nav-item" data-tab="health">
|
|
<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
|
|
<span>Health</span>
|
|
</a>
|
|
<a href="#" class="nav-item" data-tab="gallery">
|
|
<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
|
|
<span>Gallery</span>
|
|
</a>
|
|
<a href="#" class="nav-item" data-tab="analysis">
|
|
<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path></svg>
|
|
<span>Trends</span>
|
|
</a>
|
|
</nav>
|
|
</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="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>
|
|
<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="photoModal" tabindex="-1">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content p-4">
|
|
<h2 class="h5 fw-bold mb-4">Progress Photo</h2>
|
|
<form id="photoForm">
|
|
<div class="mb-3"><label class="form-label small fw-bold">Select Photo</label><input type="file" id="photoInput" class="form-control" accept="image/*" required></div>
|
|
<div class="mb-3"><label class="form-label small fw-bold">Current Weight (kg - optional)</label><input type="number" step="0.1" id="photoWeight" class="form-control"></div>
|
|
<button type="submit" class="btn btn-primary-custom mt-3">Upload Photo</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>
|