Improve plan UX and split web UI components
This commit is contained in:
Daniel
parent
f73b58a158
commit
33d50258ce
7 changed files with 580 additions and 400 deletions
97
web/src/AnalyticsPage.svelte
Normal file
97
web/src/AnalyticsPage.svelte
Normal file
|
|
@ -0,0 +1,97 @@
|
||||||
|
<script>
|
||||||
|
import { onDestroy, onMount, tick } from 'svelte';
|
||||||
|
|
||||||
|
export let week = [];
|
||||||
|
|
||||||
|
let calorieCanvas;
|
||||||
|
let produceCanvas;
|
||||||
|
let chartTimer;
|
||||||
|
|
||||||
|
onMount(scheduleCharts);
|
||||||
|
onDestroy(() => clearTimeout(chartTimer));
|
||||||
|
|
||||||
|
$: scheduleCharts(week);
|
||||||
|
|
||||||
|
function scheduleCharts() {
|
||||||
|
clearTimeout(chartTimer);
|
||||||
|
chartTimer = setTimeout(drawCharts, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function drawCharts() {
|
||||||
|
await tick();
|
||||||
|
drawBars(calorieCanvas, week, 'calories');
|
||||||
|
drawBars(produceCanvas, week, 'produce');
|
||||||
|
}
|
||||||
|
|
||||||
|
function drawBars(canvas, days, mode) {
|
||||||
|
if (!canvas) return;
|
||||||
|
const dpr = window.devicePixelRatio || 1;
|
||||||
|
const cssW = canvas.offsetWidth || 400;
|
||||||
|
const cssH = canvas.offsetHeight || 200;
|
||||||
|
canvas.width = cssW * dpr;
|
||||||
|
canvas.height = cssH * dpr;
|
||||||
|
const ctx = canvas.getContext('2d');
|
||||||
|
ctx.scale(dpr, dpr);
|
||||||
|
const values = days.map(day => mode === 'calories' ? day.calories : day.fruit + day.vegetables);
|
||||||
|
const max = Math.max(1, ...values);
|
||||||
|
const left = 4;
|
||||||
|
const bottom = cssH - 32;
|
||||||
|
const barHeight = cssH - 52;
|
||||||
|
const gap = 8;
|
||||||
|
const bar = (cssW - left * 2 - gap * 6) / 7;
|
||||||
|
ctx.textAlign = 'center';
|
||||||
|
days.forEach((day, index) => {
|
||||||
|
const x = left + index * (bar + gap);
|
||||||
|
const h = values[index] / max * barHeight;
|
||||||
|
ctx.fillStyle = '#e2e8f0';
|
||||||
|
roundRect(ctx, x, bottom - barHeight, bar, barHeight, 6);
|
||||||
|
ctx.fillStyle = mode === 'calories' ? '#2563eb' : '#f59e0b';
|
||||||
|
roundRect(ctx, x, bottom - h, bar, h, 6);
|
||||||
|
if (mode === 'produce' && day.vegetables > 0) {
|
||||||
|
const vegH = day.vegetables / max * barHeight;
|
||||||
|
ctx.fillStyle = '#10b981';
|
||||||
|
roundRect(ctx, x + bar * 0.52, bottom - vegH, bar * 0.48, vegH, 5);
|
||||||
|
}
|
||||||
|
ctx.fillStyle = '#64748b';
|
||||||
|
ctx.font = `${Math.max(10, Math.min(13, bar * 0.55))}px Inter, sans-serif`;
|
||||||
|
ctx.fillText(day.label, x + bar / 2, bottom + 20);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function roundRect(ctx, x, y, w, h, r) {
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.roundRect(x, y, w, Math.max(1, h), r);
|
||||||
|
ctx.fill();
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<section class="space-y-4">
|
||||||
|
<div>
|
||||||
|
<h2 class="text-xl font-bold">Analytics</h2>
|
||||||
|
<p class="text-sm text-slate-500">Seven-day calorie and produce trends.</p>
|
||||||
|
</div>
|
||||||
|
<div class="grid gap-4 xl:grid-cols-2">
|
||||||
|
<section class="card">
|
||||||
|
<h3 class="card-title">Calories - last 7 days</h3>
|
||||||
|
<div class="p-4" style="height:220px">
|
||||||
|
<canvas id="calorieChart" bind:this={calorieCanvas} class="w-full h-full"></canvas>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="card">
|
||||||
|
<h3 class="card-title">Fruit and vegetables</h3>
|
||||||
|
<div class="p-4" style="height:220px">
|
||||||
|
<canvas id="produceChart" bind:this={produceCanvas} class="w-full h-full"></canvas>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
<div class="grid gap-3 sm:grid-cols-3">
|
||||||
|
{#each week.slice().reverse().slice(0, 3) as day}
|
||||||
|
<article class="card p-4">
|
||||||
|
<div class="text-xs font-semibold text-slate-400">{day.date}</div>
|
||||||
|
<div class="mt-1 text-xl font-black text-slate-800">{day.calories} kcal</div>
|
||||||
|
<div class="text-xs text-slate-500">P {day.protein}g · C {day.carbs}g · F {day.fat}g</div>
|
||||||
|
<div class="text-xs text-slate-400">Fruit {day.fruit.toFixed(1)} · Veg {day.vegetables.toFixed(1)}</div>
|
||||||
|
</article>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
@ -1,49 +1,15 @@
|
||||||
<script>
|
<script>
|
||||||
import { onMount, tick } from 'svelte';
|
import { onMount } from 'svelte';
|
||||||
import Icon from './Icon.svelte';
|
import AppShell from './AppShell.svelte';
|
||||||
import Field from './Field.svelte';
|
import DashboardPage from './DashboardPage.svelte';
|
||||||
import Stat from './Stat.svelte';
|
import AnalyticsPage from './AnalyticsPage.svelte';
|
||||||
import MealForm from './MealForm.svelte';
|
import MealForm from './MealForm.svelte';
|
||||||
import DiaryPage from './DiaryPage.svelte';
|
import DiaryPage from './DiaryPage.svelte';
|
||||||
import SettingsPage from './SettingsPage.svelte';
|
import SettingsPage from './SettingsPage.svelte';
|
||||||
import PlansPage from './PlansPage.svelte';
|
import PlansPage from './PlansPage.svelte';
|
||||||
|
import { defaultSettings, fallbackModels, mealTypes, pages } from './appConfig.js';
|
||||||
import { calculateCaloriePlan, planSummary } from './calorie.js';
|
import { calculateCaloriePlan, planSummary } from './calorie.js';
|
||||||
|
|
||||||
const pages = [
|
|
||||||
{ id: 'dashboard', label: 'Dashboard', icon: 'dashboard', group: 'Tracker' },
|
|
||||||
{ id: 'log', label: 'Log meal', icon: 'plus', group: 'Tracker' },
|
|
||||||
{ id: 'analytics', label: 'Analytics', icon: 'analytics', group: 'Tracker' },
|
|
||||||
{ id: 'diary', label: 'Diary', icon: 'diary', group: 'Tracker' },
|
|
||||||
{ id: 'trash', label: 'Trash', icon: 'trash', group: 'Tracker' },
|
|
||||||
{ id: 'plans', label: 'Plans', icon: 'plans', group: 'Tracker' },
|
|
||||||
{ id: 'settings', label: 'Settings', icon: 'settings', group: 'Admin' },
|
|
||||||
];
|
|
||||||
const mealTypes = ['Breakfast', 'Lunch', 'Dinner', 'Snack', 'Other'];
|
|
||||||
const fallbackModels = [
|
|
||||||
{ id: 'claude-haiku-4.5', name: 'Claude Haiku 4.5' },
|
|
||||||
{ id: 'claude-sonnet-4.6', name: 'Claude Sonnet 4.6' },
|
|
||||||
{ id: 'gemini-2.5-flash', name: 'Gemini 2.5 Flash' },
|
|
||||||
{ id: 'gpt-4o-mini', name: 'GPT-4o mini' },
|
|
||||||
];
|
|
||||||
const defaultSettings = {
|
|
||||||
visionModel: fallbackModels[0].id,
|
|
||||||
taskModel: fallbackModels[0].id,
|
|
||||||
sex: '',
|
|
||||||
age: '',
|
|
||||||
heightCm: '',
|
|
||||||
weightKg: '',
|
|
||||||
targetWeightKg: '',
|
|
||||||
goal: 'Lose weight',
|
|
||||||
calorieTarget: '',
|
|
||||||
activityLevel: 'Moderate',
|
|
||||||
pace: 'Steady',
|
|
||||||
motivation: '',
|
|
||||||
challenge: '',
|
|
||||||
trackingStyle: '',
|
|
||||||
calorieCountingExperience: '',
|
|
||||||
fastingInterest: '',
|
|
||||||
};
|
|
||||||
|
|
||||||
let loginMode = location.pathname === '/login' || location.pathname === '/reset' || location.pathname === '/verify';
|
let loginMode = location.pathname === '/login' || location.pathname === '/reset' || location.pathname === '/verify';
|
||||||
let username = 'admin';
|
let username = 'admin';
|
||||||
let password = '';
|
let password = '';
|
||||||
|
|
@ -107,11 +73,6 @@
|
||||||
let selectedEntryIds = [];
|
let selectedEntryIds = [];
|
||||||
let trash = [];
|
let trash = [];
|
||||||
|
|
||||||
let calorieCanvas;
|
|
||||||
let produceCanvas;
|
|
||||||
|
|
||||||
$: trackerPages = pages.filter(item => item.group === 'Tracker');
|
|
||||||
$: adminPages = pages.filter(item => item.group === 'Admin');
|
|
||||||
$: today = totalsFor(todayKey());
|
$: today = totalsFor(todayKey());
|
||||||
$: week = last7Days();
|
$: week = last7Days();
|
||||||
$: weekAverage = Math.round(week.reduce((sum, day) => sum + day.calories, 0) / week.length);
|
$: weekAverage = Math.round(week.reduce((sum, day) => sum + day.calories, 0) / week.length);
|
||||||
|
|
@ -143,17 +104,8 @@
|
||||||
page = localStorage.getItem('calorie_ai_last_tab') || 'dashboard';
|
page = localStorage.getItem('calorie_ai_last_tab') || 'dashboard';
|
||||||
setDefaultMealDateTime();
|
setDefaultMealDateTime();
|
||||||
await Promise.all([loadSettingsFromServer(), loadEntriesFromServer(), loadActivitiesFromServer(), loadModels(), loadPlans()]);
|
await Promise.all([loadSettingsFromServer(), loadEntriesFromServer(), loadActivitiesFromServer(), loadModels(), loadPlans()]);
|
||||||
await drawCharts();
|
|
||||||
});
|
});
|
||||||
|
|
||||||
$: if (!loginMode) scheduleCharts(entries, page);
|
|
||||||
|
|
||||||
let chartTimer;
|
|
||||||
function scheduleCharts() {
|
|
||||||
clearTimeout(chartTimer);
|
|
||||||
chartTimer = setTimeout(drawCharts, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
function dateKey(date) {
|
function dateKey(date) {
|
||||||
return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
|
return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
|
||||||
}
|
}
|
||||||
|
|
@ -866,52 +818,6 @@ Include: daily calorie target, maintenance calories, protein target, meal loggin
|
||||||
if (response.ok) applyPlanConfig(await response.json());
|
if (response.ok) applyPlanConfig(await response.json());
|
||||||
}
|
}
|
||||||
|
|
||||||
async function drawCharts() {
|
|
||||||
await tick();
|
|
||||||
drawBars(calorieCanvas, week, 'calories');
|
|
||||||
drawBars(produceCanvas, week, 'produce');
|
|
||||||
}
|
|
||||||
|
|
||||||
function drawBars(canvas, days, mode) {
|
|
||||||
if (!canvas) return;
|
|
||||||
const dpr = window.devicePixelRatio || 1;
|
|
||||||
const cssW = canvas.offsetWidth || 400;
|
|
||||||
const cssH = canvas.offsetHeight || 200;
|
|
||||||
canvas.width = cssW * dpr;
|
|
||||||
canvas.height = cssH * dpr;
|
|
||||||
const ctx = canvas.getContext('2d');
|
|
||||||
ctx.scale(dpr, dpr);
|
|
||||||
const values = days.map(day => mode === 'calories' ? day.calories : day.fruit + day.vegetables);
|
|
||||||
const max = Math.max(1, ...values);
|
|
||||||
const left = 4;
|
|
||||||
const bottom = cssH - 32;
|
|
||||||
const barHeight = cssH - 52;
|
|
||||||
const gap = 8;
|
|
||||||
const bar = (cssW - left * 2 - gap * 6) / 7;
|
|
||||||
ctx.textAlign = 'center';
|
|
||||||
days.forEach((day, index) => {
|
|
||||||
const x = left + index * (bar + gap);
|
|
||||||
const h = values[index] / max * barHeight;
|
|
||||||
ctx.fillStyle = '#e2e8f0';
|
|
||||||
roundRect(ctx, x, bottom - barHeight, bar, barHeight, 6);
|
|
||||||
ctx.fillStyle = mode === 'calories' ? '#2563eb' : '#f59e0b';
|
|
||||||
roundRect(ctx, x, bottom - h, bar, h, 6);
|
|
||||||
if (mode === 'produce' && day.vegetables > 0) {
|
|
||||||
const vegH = day.vegetables / max * barHeight;
|
|
||||||
ctx.fillStyle = '#10b981';
|
|
||||||
roundRect(ctx, x + bar * 0.52, bottom - vegH, bar * 0.48, vegH, 5);
|
|
||||||
}
|
|
||||||
ctx.fillStyle = '#64748b';
|
|
||||||
ctx.font = `${Math.max(10, Math.min(13, bar * 0.55))}px Inter, sans-serif`;
|
|
||||||
ctx.fillText(day.label, x + bar / 2, bottom + 20);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function roundRect(ctx, x, y, w, h, r) {
|
|
||||||
ctx.beginPath();
|
|
||||||
ctx.roundRect(x, y, w, Math.max(1, h), r);
|
|
||||||
ctx.fill();
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#if loginMode}
|
{#if loginMode}
|
||||||
|
|
@ -968,137 +874,20 @@ Include: daily calorie target, maintenance calories, protein target, meal loggin
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
{:else}
|
{:else}
|
||||||
<div class="min-h-screen bg-slate-50 text-slate-900 lg:grid lg:grid-cols-[auto_1fr]">
|
<AppShell {pages} {page} bind:menuOpen bind:sidebarCollapsed {selectPage} {logout}>
|
||||||
<aside class:translate-x-0={menuOpen} class:collapsed-sidebar={sidebarCollapsed} class="sidebar-shell fixed inset-y-0 left-0 z-40 w-64 -translate-x-full overflow-hidden border-r border-slate-200 bg-white shadow-xl transition-all duration-200 lg:sticky lg:top-0 lg:h-screen lg:translate-x-0 lg:shadow-none lg:w-56">
|
|
||||||
<div class="sidebar-header flex h-16 items-center justify-between border-b border-slate-200 px-4">
|
|
||||||
<div class="flex min-w-0 items-center gap-3">
|
|
||||||
<div class="sidebar-logo grid h-9 w-9 flex-none place-items-center rounded-xl bg-blue-600 text-xs font-black text-white">CA</div>
|
|
||||||
<div class="sidebar-brand min-w-0">
|
|
||||||
<div class="truncate text-base font-black text-slate-950">Calorie AI</div>
|
|
||||||
<div class="text-xs text-slate-500">Food diary</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<button class="collapse-button hidden h-8 w-8 place-items-center rounded-lg text-slate-400 hover:bg-slate-100 hover:text-slate-700 lg:grid" type="button" on:click={() => sidebarCollapsed = !sidebarCollapsed} aria-label="Collapse menu">
|
|
||||||
<svg viewBox="0 0 20 20" fill="currentColor" width="16" height="16"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"/></svg>
|
|
||||||
</button>
|
|
||||||
<button class="rounded-md px-2.5 py-1 text-xs font-bold text-slate-600 hover:bg-slate-100 lg:hidden" type="button" on:click={() => menuOpen = false}>Close</button>
|
|
||||||
</div>
|
|
||||||
<nav class="p-2" aria-label="Main menu">
|
|
||||||
{#if trackerPages.length}<div class="sidebar-section-label px-3 py-2 text-[10px] font-bold uppercase tracking-widest text-slate-400">Tracker</div>{/if}
|
|
||||||
{#each trackerPages as item}
|
|
||||||
<button class:active-tab={page === item.id} class="tab-button" type="button" title={item.label} on:click={() => selectPage(item.id)}>
|
|
||||||
<span class="tab-icon"><Icon name={item.icon} /></span>
|
|
||||||
<span class="tab-label">{item.label}</span>
|
|
||||||
</button>
|
|
||||||
{/each}
|
|
||||||
{#if adminPages.length}<div class="sidebar-section-label px-3 py-2 text-[10px] font-bold uppercase tracking-widest text-slate-400">Admin</div>{/if}
|
|
||||||
{#each adminPages as item}
|
|
||||||
<button class:active-tab={page === item.id} class="tab-button" type="button" title={item.label} on:click={() => selectPage(item.id)}>
|
|
||||||
<span class="tab-icon"><Icon name={item.icon} /></span>
|
|
||||||
<span class="tab-label">{item.label}</span>
|
|
||||||
</button>
|
|
||||||
{/each}
|
|
||||||
</nav>
|
|
||||||
</aside>
|
|
||||||
{#if menuOpen}<button class="fixed inset-0 z-30 bg-slate-950/40 lg:hidden" type="button" aria-label="Close menu" on:click={() => menuOpen = false}></button>{/if}
|
|
||||||
|
|
||||||
<div class="min-w-0">
|
|
||||||
<header class="sticky top-0 z-20 border-b border-slate-200 bg-white/95 shadow-sm backdrop-blur">
|
|
||||||
<div class="flex h-16 items-center justify-between gap-3 px-4 lg:px-6">
|
|
||||||
<div class="flex min-w-0 items-center gap-3">
|
|
||||||
<button class="grid h-9 w-9 place-items-center rounded-xl bg-blue-600 text-white hover:bg-blue-700 lg:hidden" type="button" on:click={() => menuOpen = true} aria-label="Open menu">
|
|
||||||
<svg viewBox="0 0 20 20" fill="currentColor" width="18" height="18"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"/></svg>
|
|
||||||
</button>
|
|
||||||
<h1 class="truncate text-base font-bold text-slate-900">{pages.find(item => item.id === page)?.label || 'Dashboard'}</h1>
|
|
||||||
</div>
|
|
||||||
<button class="rounded-lg border border-slate-200 px-3 py-1.5 text-sm font-semibold text-slate-600 hover:border-slate-300 hover:text-slate-900" type="button" on:click={logout}>Sign out</button>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main class="min-w-0 flex-1 p-4 lg:p-6">
|
|
||||||
{#if page === 'dashboard'}
|
{#if page === 'dashboard'}
|
||||||
<section class="space-y-4">
|
<DashboardPage
|
||||||
<div class="grid gap-3 sm:grid-cols-2 xl:grid-cols-5">
|
{today}
|
||||||
<article class="sm:col-span-2 rounded-2xl bg-gradient-to-br from-blue-600 to-indigo-700 p-5 text-white shadow-sm">
|
{activeCalorieTarget}
|
||||||
<div class="text-xs font-semibold uppercase tracking-widest text-blue-200">Today</div>
|
{targetPercent}
|
||||||
<div id="todayCalories" class="mt-1 text-4xl font-black tracking-tight">{today.calories} kcal</div>
|
{macroTotal}
|
||||||
{#if activeCalorieTarget}
|
{produceToday}
|
||||||
<div class="mt-2 h-2 overflow-hidden rounded-full bg-white/20"><div class="h-full rounded-full bg-white" style="width:{targetPercent}%"></div></div>
|
{todayEntries}
|
||||||
<div class="mt-1 text-xs font-semibold text-blue-100">{Math.max(0, activeCalorieTarget - today.calories)} kcal left of {activeCalorieTarget}</div>
|
{todayActivities}
|
||||||
{/if}
|
{activityToday}
|
||||||
<div id="todayMacroText" class="mt-2 text-sm font-medium text-blue-100">P {today.protein}g · C {today.carbs}g · F {today.fat}g</div>
|
{weekAverage}
|
||||||
<div id="todayProduceText" class="text-sm text-blue-200">Fruit {today.fruit.toFixed(1)} · Veg {today.vegetables.toFixed(1)}</div>
|
{selectPage}
|
||||||
</article>
|
/>
|
||||||
<Stat label="Meals today" value={today.meals} note={today.meals === 1 ? 'meal logged' : 'meals logged'} />
|
|
||||||
<Stat label="7-day average" value={`${weekAverage} kcal`} note="Calories per day" />
|
|
||||||
<Stat label="Activity today" value={`${Math.round(activityToday.calories)} kcal`} note={`${activityToday.steps} steps`} />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid gap-4 lg:grid-cols-2">
|
|
||||||
<section class="card">
|
|
||||||
<h3 class="card-title">Macros today</h3>
|
|
||||||
<div class="space-y-3 p-4">
|
|
||||||
{#each [['Protein', today.protein, '#2563eb', 'bg-blue-500'], ['Carbs', today.carbs, '#f59e0b', 'bg-amber-400'], ['Fat', today.fat, '#7c3aed', 'bg-violet-500']] as [label, val, , cls]}
|
|
||||||
<div>
|
|
||||||
<div class="mb-1.5 flex justify-between text-sm">
|
|
||||||
<span class="font-semibold text-slate-700">{label}</span>
|
|
||||||
<span class="text-slate-500">{val}g · {Math.round(val / macroTotal * 100)}%</span>
|
|
||||||
</div>
|
|
||||||
<div class="h-2.5 overflow-hidden rounded-full bg-slate-100">
|
|
||||||
<div class="h-full rounded-full transition-all {cls}" style="width:{Math.round(val / macroTotal * 100)}%"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/each}
|
|
||||||
<div class="border-t border-slate-100 pt-2 text-xs text-slate-400">{today.calories} kcal total · produce {produceToday.toFixed(1)} / 5</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="card">
|
|
||||||
<h3 class="card-title">Today's meals</h3>
|
|
||||||
<div class="divide-y divide-slate-100">
|
|
||||||
{#each todayEntries as entry}
|
|
||||||
<div class="flex items-center justify-between px-4 py-3">
|
|
||||||
<div class="min-w-0">
|
|
||||||
<div class="truncate text-sm font-semibold text-slate-800">{entry.mealName || entry.description}</div>
|
|
||||||
<div class="text-xs text-slate-400">{entry.mealType} · {entry.time}</div>
|
|
||||||
</div>
|
|
||||||
<div class="ml-3 shrink-0 text-sm font-bold text-slate-600">{entry.calories} kcal</div>
|
|
||||||
</div>
|
|
||||||
{:else}
|
|
||||||
<div class="px-4 py-8 text-center text-sm text-slate-400">No meals logged today</div>
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
{#if todayEntries.length}
|
|
||||||
<div class="border-t border-slate-100 px-4 py-2">
|
|
||||||
<button class="text-xs font-semibold text-blue-600 hover:text-blue-700" type="button" on:click={() => selectPage('log')}>+ Log another meal</button>
|
|
||||||
</div>
|
|
||||||
{:else}
|
|
||||||
<div class="border-t border-slate-100 px-4 py-2">
|
|
||||||
<button class="text-xs font-semibold text-blue-600 hover:text-blue-700" type="button" on:click={() => selectPage('log')}>Log your first meal today</button>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
</section>
|
|
||||||
<section class="card lg:col-span-2">
|
|
||||||
<h3 class="card-title">Synced activity</h3>
|
|
||||||
<div class="divide-y divide-slate-100">
|
|
||||||
{#each todayActivities.slice(0, 5) as activity}
|
|
||||||
<div class="flex items-center justify-between px-4 py-3">
|
|
||||||
<div class="min-w-0">
|
|
||||||
<div class="truncate text-sm font-semibold text-slate-800">{activity.title || activity.type || 'Activity'}</div>
|
|
||||||
<div class="text-xs text-slate-400">{activity.sourceName || activity.source || 'External'} · {String(activity.startAt || '').slice(11, 16) || 'All day'}</div>
|
|
||||||
</div>
|
|
||||||
<div class="ml-3 shrink-0 text-right text-sm font-bold text-slate-600">
|
|
||||||
{Math.round(Number(activity.calories || 0))} kcal
|
|
||||||
{#if activity.steps}<div class="text-xs font-medium text-slate-400">{activity.steps} steps</div>{/if}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{:else}
|
|
||||||
<div class="px-4 py-8 text-center text-sm text-slate-400">No activity synced yet. Connect Garmin or gym apps through Health Connect on Android.</div>
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{:else if page === 'log'}
|
{:else if page === 'log'}
|
||||||
<MealForm
|
<MealForm
|
||||||
|
|
@ -1121,36 +910,7 @@ Include: daily calorie target, maintenance calories, protein target, meal loggin
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{:else if page === 'analytics'}
|
{:else if page === 'analytics'}
|
||||||
<section class="space-y-4">
|
<AnalyticsPage {week} />
|
||||||
<div>
|
|
||||||
<h2 class="text-xl font-bold">Analytics</h2>
|
|
||||||
<p class="text-sm text-slate-500">Seven-day calorie and produce trends.</p>
|
|
||||||
</div>
|
|
||||||
<div class="grid gap-4 xl:grid-cols-2">
|
|
||||||
<section class="card">
|
|
||||||
<h3 class="card-title">Calories — last 7 days</h3>
|
|
||||||
<div class="p-4" style="height:220px">
|
|
||||||
<canvas id="calorieChart" bind:this={calorieCanvas} class="w-full h-full"></canvas>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<section class="card">
|
|
||||||
<h3 class="card-title">Fruit and vegetables</h3>
|
|
||||||
<div class="p-4" style="height:220px">
|
|
||||||
<canvas id="produceChart" bind:this={produceCanvas} class="w-full h-full"></canvas>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
<div class="grid gap-3 sm:grid-cols-3">
|
|
||||||
{#each week.slice().reverse().slice(0, 3) as day}
|
|
||||||
<article class="card p-4">
|
|
||||||
<div class="text-xs font-semibold text-slate-400">{day.date}</div>
|
|
||||||
<div class="mt-1 text-xl font-black text-slate-800">{day.calories} kcal</div>
|
|
||||||
<div class="text-xs text-slate-500">P {day.protein}g · C {day.carbs}g · F {day.fat}g</div>
|
|
||||||
<div class="text-xs text-slate-400">Fruit {day.fruit.toFixed(1)} · Veg {day.vegetables.toFixed(1)}</div>
|
|
||||||
</article>
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{:else if page === 'diary'}
|
{:else if page === 'diary'}
|
||||||
<DiaryPage
|
<DiaryPage
|
||||||
|
|
@ -1230,19 +990,5 @@ Include: daily calorie target, maintenance calories, protein target, meal loggin
|
||||||
{resetPassword}
|
{resetPassword}
|
||||||
/>
|
/>
|
||||||
{/if}
|
{/if}
|
||||||
</main>
|
</AppShell>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<style>
|
|
||||||
.tab-button { display: flex; width: 100%; align-items: center; gap: 0.6rem; border-left: 3px solid transparent; border-radius: 0.5rem; padding: 0.55rem 0.85rem; text-align: left; font-size: 0.875rem; font-weight: 600; color: #64748b; transition: background 0.1s, color 0.1s; }
|
|
||||||
.tab-button:hover { background: #f8fafc; color: #0f172a; }
|
|
||||||
.active-tab { border-left-color: #2563eb; background: #eff6ff; color: #2563eb; }
|
|
||||||
.tab-icon { display: flex; width: 1.25rem; height: 1.25rem; flex: 0 0 1.25rem; align-items: center; justify-content: center; }
|
|
||||||
:global(.collapsed-sidebar) { width: 4.25rem !important; }
|
|
||||||
:global(.collapsed-sidebar .sidebar-header) { justify-content: center; padding-left: 0; padding-right: 0; }
|
|
||||||
:global(.collapsed-sidebar .tab-label), :global(.collapsed-sidebar .sidebar-section-label), :global(.collapsed-sidebar .sidebar-brand) { display: none; }
|
|
||||||
:global(.collapsed-sidebar .tab-button) { justify-content: center; padding-left: 0; padding-right: 0; }
|
|
||||||
:global(.collapsed-sidebar .collapse-button) { display: grid; }
|
|
||||||
</style>
|
|
||||||
|
|
|
||||||
79
web/src/AppShell.svelte
Normal file
79
web/src/AppShell.svelte
Normal file
|
|
@ -0,0 +1,79 @@
|
||||||
|
<script>
|
||||||
|
import Icon from './Icon.svelte';
|
||||||
|
|
||||||
|
export let pages = [];
|
||||||
|
export let page = 'dashboard';
|
||||||
|
export let menuOpen = false;
|
||||||
|
export let sidebarCollapsed = false;
|
||||||
|
export let selectPage;
|
||||||
|
export let logout;
|
||||||
|
|
||||||
|
$: trackerPages = pages.filter(item => item.group === 'Tracker');
|
||||||
|
$: adminPages = pages.filter(item => item.group === 'Admin');
|
||||||
|
$: pageLabel = pages.find(item => item.id === page)?.label || 'Dashboard';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="min-h-screen bg-slate-50 text-slate-900 lg:grid lg:grid-cols-[auto_1fr]">
|
||||||
|
<aside class:translate-x-0={menuOpen} class:collapsed-sidebar={sidebarCollapsed} class="sidebar-shell fixed inset-y-0 left-0 z-40 w-64 -translate-x-full overflow-hidden border-r border-slate-200 bg-white shadow-xl transition-all duration-200 lg:sticky lg:top-0 lg:h-screen lg:translate-x-0 lg:shadow-none lg:w-56">
|
||||||
|
<div class="sidebar-header flex h-16 items-center justify-between border-b border-slate-200 px-4">
|
||||||
|
<div class="flex min-w-0 items-center gap-3">
|
||||||
|
<div class="sidebar-logo grid h-9 w-9 flex-none place-items-center rounded-xl bg-blue-600 text-xs font-black text-white">CA</div>
|
||||||
|
<div class="sidebar-brand min-w-0">
|
||||||
|
<div class="truncate text-base font-black text-slate-950">Calorie AI</div>
|
||||||
|
<div class="text-xs text-slate-500">Food diary</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button class="collapse-button hidden h-8 w-8 place-items-center rounded-lg text-slate-400 hover:bg-slate-100 hover:text-slate-700 lg:grid" type="button" on:click={() => sidebarCollapsed = !sidebarCollapsed} aria-label="Collapse menu">
|
||||||
|
<svg viewBox="0 0 20 20" fill="currentColor" width="16" height="16"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"/></svg>
|
||||||
|
</button>
|
||||||
|
<button class="rounded-md px-2.5 py-1 text-xs font-bold text-slate-600 hover:bg-slate-100 lg:hidden" type="button" on:click={() => menuOpen = false}>Close</button>
|
||||||
|
</div>
|
||||||
|
<nav class="p-2" aria-label="Main menu">
|
||||||
|
{#if trackerPages.length}<div class="sidebar-section-label px-3 py-2 text-[10px] font-bold uppercase tracking-widest text-slate-400">Tracker</div>{/if}
|
||||||
|
{#each trackerPages as item}
|
||||||
|
<button class:active-tab={page === item.id} class="tab-button" type="button" title={item.label} on:click={() => selectPage(item.id)}>
|
||||||
|
<span class="tab-icon"><Icon name={item.icon} /></span>
|
||||||
|
<span class="tab-label">{item.label}</span>
|
||||||
|
</button>
|
||||||
|
{/each}
|
||||||
|
{#if adminPages.length}<div class="sidebar-section-label px-3 py-2 text-[10px] font-bold uppercase tracking-widest text-slate-400">Admin</div>{/if}
|
||||||
|
{#each adminPages as item}
|
||||||
|
<button class:active-tab={page === item.id} class="tab-button" type="button" title={item.label} on:click={() => selectPage(item.id)}>
|
||||||
|
<span class="tab-icon"><Icon name={item.icon} /></span>
|
||||||
|
<span class="tab-label">{item.label}</span>
|
||||||
|
</button>
|
||||||
|
{/each}
|
||||||
|
</nav>
|
||||||
|
</aside>
|
||||||
|
{#if menuOpen}<button class="fixed inset-0 z-30 bg-slate-950/40 lg:hidden" type="button" aria-label="Close menu" on:click={() => menuOpen = false}></button>{/if}
|
||||||
|
|
||||||
|
<div class="min-w-0">
|
||||||
|
<header class="sticky top-0 z-20 border-b border-slate-200 bg-white/95 shadow-sm backdrop-blur">
|
||||||
|
<div class="flex h-16 items-center justify-between gap-3 px-4 lg:px-6">
|
||||||
|
<div class="flex min-w-0 items-center gap-3">
|
||||||
|
<button class="grid h-9 w-9 place-items-center rounded-xl bg-blue-600 text-white hover:bg-blue-700 lg:hidden" type="button" on:click={() => menuOpen = true} aria-label="Open menu">
|
||||||
|
<svg viewBox="0 0 20 20" fill="currentColor" width="18" height="18"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"/></svg>
|
||||||
|
</button>
|
||||||
|
<h1 class="truncate text-base font-bold text-slate-900">{pageLabel}</h1>
|
||||||
|
</div>
|
||||||
|
<button class="rounded-lg border border-slate-200 px-3 py-1.5 text-sm font-semibold text-slate-600 hover:border-slate-300 hover:text-slate-900" type="button" on:click={logout}>Sign out</button>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main class="min-w-0 flex-1 p-4 lg:p-6">
|
||||||
|
<slot />
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.tab-button { display: flex; width: 100%; align-items: center; gap: 0.6rem; border-left: 3px solid transparent; border-radius: 0.5rem; padding: 0.55rem 0.85rem; text-align: left; font-size: 0.875rem; font-weight: 600; color: #64748b; transition: background 0.1s, color 0.1s; }
|
||||||
|
.tab-button:hover { background: #f8fafc; color: #0f172a; }
|
||||||
|
.active-tab { border-left-color: #2563eb; background: #eff6ff; color: #2563eb; }
|
||||||
|
.tab-icon { display: flex; width: 1.25rem; height: 1.25rem; flex: 0 0 1.25rem; align-items: center; justify-content: center; }
|
||||||
|
.collapsed-sidebar { width: 4.25rem !important; }
|
||||||
|
.collapsed-sidebar .sidebar-header { justify-content: center; padding-left: 0; padding-right: 0; }
|
||||||
|
.collapsed-sidebar .tab-label, .collapsed-sidebar .sidebar-section-label, .collapsed-sidebar .sidebar-brand { display: none; }
|
||||||
|
.collapsed-sidebar .tab-button { justify-content: center; padding-left: 0; padding-right: 0; }
|
||||||
|
.collapsed-sidebar .collapse-button { display: grid; }
|
||||||
|
</style>
|
||||||
109
web/src/DashboardPage.svelte
Normal file
109
web/src/DashboardPage.svelte
Normal file
|
|
@ -0,0 +1,109 @@
|
||||||
|
<script>
|
||||||
|
import Stat from './Stat.svelte';
|
||||||
|
|
||||||
|
export let today;
|
||||||
|
export let activeCalorieTarget;
|
||||||
|
export let targetPercent;
|
||||||
|
export let macroTotal;
|
||||||
|
export let produceToday;
|
||||||
|
export let todayEntries = [];
|
||||||
|
export let todayActivities = [];
|
||||||
|
export let activityToday;
|
||||||
|
export let weekAverage;
|
||||||
|
export let selectPage;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<section class="space-y-4">
|
||||||
|
<div class="grid gap-3 sm:grid-cols-2 xl:grid-cols-5">
|
||||||
|
<article class="sm:col-span-2 rounded-2xl bg-gradient-to-br from-blue-600 to-indigo-700 p-5 text-white shadow-sm">
|
||||||
|
<div class="text-xs font-semibold uppercase tracking-widest text-blue-200">Today</div>
|
||||||
|
<div id="todayCalories" class="mt-1 text-4xl font-black tracking-tight">{today.calories} kcal</div>
|
||||||
|
{#if activeCalorieTarget}
|
||||||
|
<div class="mt-2 h-2 overflow-hidden rounded-full bg-white/20"><div class="h-full rounded-full bg-white" style="width:{targetPercent}%"></div></div>
|
||||||
|
<div class="mt-1 text-xs font-semibold text-blue-100">{Math.max(0, activeCalorieTarget - today.calories)} kcal left of {activeCalorieTarget}</div>
|
||||||
|
{/if}
|
||||||
|
<div id="todayMacroText" class="mt-2 text-sm font-medium text-blue-100">P {today.protein}g · C {today.carbs}g · F {today.fat}g</div>
|
||||||
|
<div id="todayProduceText" class="text-sm text-blue-200">Fruit {today.fruit.toFixed(1)} · Veg {today.vegetables.toFixed(1)}</div>
|
||||||
|
</article>
|
||||||
|
<Stat label="Meals today" value={today.meals} note={today.meals === 1 ? 'meal logged' : 'meals logged'} />
|
||||||
|
<Stat label="7-day average" value={`${weekAverage} kcal`} note="Calories per day" />
|
||||||
|
<Stat label="Activity today" value={`${Math.round(activityToday.calories)} kcal`} note={`${activityToday.steps} steps`} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid gap-4 lg:grid-cols-2">
|
||||||
|
<section class="card">
|
||||||
|
<h3 class="card-title">Macros today</h3>
|
||||||
|
<div class="space-y-3 p-4">
|
||||||
|
{#each [['Protein', today.protein, 'bg-blue-500'], ['Carbs', today.carbs, 'bg-amber-400'], ['Fat', today.fat, 'bg-violet-500']] as [label, val, cls]}
|
||||||
|
<div>
|
||||||
|
<div class="mb-1.5 flex justify-between text-sm">
|
||||||
|
<span class="font-semibold text-slate-700">{label}</span>
|
||||||
|
<span class="text-slate-500">{val}g · {Math.round(val / macroTotal * 100)}%</span>
|
||||||
|
</div>
|
||||||
|
<div class="h-2.5 overflow-hidden rounded-full bg-slate-100">
|
||||||
|
<div class="h-full rounded-full transition-all {cls}" style="width:{Math.round(val / macroTotal * 100)}%"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
<div class="border-t border-slate-100 pt-2 text-xs text-slate-400">{today.calories} kcal total · produce {produceToday.toFixed(1)} / 5</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="card">
|
||||||
|
<h3 class="card-title">Today's meals</h3>
|
||||||
|
<div class="divide-y divide-slate-100">
|
||||||
|
{#each todayEntries as entry}
|
||||||
|
<div class="flex items-center justify-between px-4 py-3">
|
||||||
|
<div class="min-w-0">
|
||||||
|
<div class="truncate text-sm font-semibold text-slate-800">{entry.mealName || entry.description}</div>
|
||||||
|
<div class="text-xs text-slate-400">{entry.mealType} · {entry.time}</div>
|
||||||
|
</div>
|
||||||
|
<div class="ml-3 shrink-0 text-sm font-bold text-slate-600">{entry.calories} kcal</div>
|
||||||
|
</div>
|
||||||
|
{:else}
|
||||||
|
<div class="px-4 py-8 text-center text-sm text-slate-400">No meals logged today</div>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
{#if todayEntries.length}
|
||||||
|
<div class="border-t border-slate-100 px-4 py-2">
|
||||||
|
<button class="text-xs font-semibold text-blue-600 hover:text-blue-700" type="button" on:click={() => selectPage('log')}>+ Log another meal</button>
|
||||||
|
</div>
|
||||||
|
{:else}
|
||||||
|
<div class="border-t border-slate-100 px-4 py-2">
|
||||||
|
<button class="text-xs font-semibold text-blue-600 hover:text-blue-700" type="button" on:click={() => selectPage('log')}>Log your first meal today</button>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="card lg:col-span-2">
|
||||||
|
<h3 class="card-title">Synced activity</h3>
|
||||||
|
<div class="divide-y divide-slate-100">
|
||||||
|
{#each todayActivities.slice(0, 5) as activity}
|
||||||
|
<div class="flex items-center justify-between px-4 py-3">
|
||||||
|
<div class="min-w-0">
|
||||||
|
<div class="truncate text-sm font-semibold text-slate-800">{activity.title || activity.type || 'Activity'}</div>
|
||||||
|
<div class="text-xs text-slate-400">{activity.sourceName || activity.source || 'External'} · {String(activity.startAt || '').slice(11, 16) || 'All day'}</div>
|
||||||
|
</div>
|
||||||
|
<div class="ml-3 shrink-0 text-right text-sm font-bold text-slate-600">
|
||||||
|
{Math.round(Number(activity.calories || 0))} kcal
|
||||||
|
{#if activity.steps}<div class="text-xs font-medium text-slate-400">{activity.steps} steps</div>{/if}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{:else}
|
||||||
|
<div class="grid gap-4 p-4 md:grid-cols-[1fr_1.1fr] md:items-center">
|
||||||
|
<div class="rounded-2xl bg-blue-50 p-4 text-left">
|
||||||
|
<div class="text-xs font-black uppercase tracking-widest text-blue-700">Connect Garmin</div>
|
||||||
|
<h4 class="mt-1 text-lg font-black text-slate-950">Use the Android app to sync your watch.</h4>
|
||||||
|
<p class="mt-2 text-sm leading-6 text-slate-600">The web dashboard shows synced activity, but Garmin pairing runs through Garmin Connect and Android Health Connect.</p>
|
||||||
|
</div>
|
||||||
|
<ol class="grid gap-2 text-sm leading-6 text-slate-600">
|
||||||
|
<li><strong class="text-slate-900">1.</strong> Sync your watch in Garmin Connect on Android.</li>
|
||||||
|
<li><strong class="text-slate-900">2.</strong> In Garmin Connect, enable sharing to Health Connect.</li>
|
||||||
|
<li><strong class="text-slate-900">3.</strong> Open Calorie AI on Android and tap Settings -> Sync Health Connect.</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
@ -14,8 +14,6 @@
|
||||||
export let selectPlan;
|
export let selectPlan;
|
||||||
export let deletePlan;
|
export let deletePlan;
|
||||||
|
|
||||||
$: selectedPlan = plans.find(plan => plan.id === selectedPlanId) || plans[0];
|
|
||||||
$: caloriePlan = calculateCaloriePlan(settings);
|
|
||||||
let faqOpen = null;
|
let faqOpen = null;
|
||||||
|
|
||||||
const sexOptions = ['Female', 'Male'];
|
const sexOptions = ['Female', 'Male'];
|
||||||
|
|
@ -28,35 +26,55 @@
|
||||||
|
|
||||||
const faqs = [
|
const faqs = [
|
||||||
{
|
{
|
||||||
q: 'How does the AI build my plan?',
|
q: 'What changes when I generate a new plan?',
|
||||||
a: 'It reads your height, weight, target, activity level, and pace, then looks at your most recent logged meals to understand your actual eating patterns. The result is a calorie range, protein target, and practical habits tailored to you.',
|
a: 'A new saved version is created. Your older versions stay in Plan history, so you can switch back later.',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
q: 'How often should I update my plan?',
|
q: 'What should I write in the update box?',
|
||||||
a: 'Update it whenever something changes — a new weigh-in, a shift in activity, or after a few weeks of logging. Use the fine-tune box to tell the AI what changed and it will revise the plan without starting from scratch.',
|
a: 'Use short real-world notes: hunger, weight trend, steps, workouts, missed meals, cravings, sleep, schedule changes, or anything that made the plan hard to follow.',
|
||||||
},
|
|
||||||
{
|
|
||||||
q: 'Is this medical or clinical advice?',
|
|
||||||
a: 'No. This is an AI-generated nutrition estimate based on self-reported data. It is not a substitute for advice from a registered dietitian or doctor. If you have a medical condition, are pregnant, or have a history of disordered eating, consult a qualified health professional first.',
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
q: 'Are my fine-tune notes stored?',
|
q: 'Are my fine-tune notes stored?',
|
||||||
a: 'No. Notes you add in the fine-tune box are sent to the AI to update the plan and then discarded. Only the resulting plan text is saved.',
|
a: 'No. Notes are sent to the AI to create the next plan version, then discarded. Only the resulting plan text is saved.',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
q: 'Can I go back to an older plan?',
|
q: 'Is this medical advice?',
|
||||||
a: 'Yes. Every version is kept in Plan history. Click any entry there to make it the active plan and it will appear in the Current plan panel.',
|
a: 'No. It is AI-generated guidance based on your inputs and logs. If you have a medical condition, are pregnant, or have a history of disordered eating, use a clinician or dietitian.',
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
const knownHeadings = new Set([
|
const knownHeadings = new Set([
|
||||||
'plan', 'personalized weight-loss plan', 'your details', 'daily calorie range',
|
'plan', 'personalized weight-loss plan', 'your details', 'daily calorie target',
|
||||||
'protein target', 'healthy habits', 'weekly review steps', 'safety notes',
|
'daily calorie range', 'maintenance calories', 'protein target', 'meal logging strategy',
|
||||||
'getting started', 'targets', 'habits',
|
'activity adjustment rules', 'challenge-specific tactics', 'weekly review steps',
|
||||||
|
'safety notes', 'healthy habits', 'getting started', 'targets', 'habits',
|
||||||
]);
|
]);
|
||||||
|
|
||||||
|
$: selectedPlan = plans.find(plan => plan.id === selectedPlanId) || plans[0];
|
||||||
|
$: caloriePlan = calculateCaloriePlan(settings);
|
||||||
|
$: targetCalories = Number(settings.calorieTarget) || caloriePlan?.goalCalories || 0;
|
||||||
|
$: profileMissing = [
|
||||||
|
['sex', settings.sex],
|
||||||
|
['age', settings.age],
|
||||||
|
['height', settings.heightCm],
|
||||||
|
['current weight', settings.weightKg],
|
||||||
|
].filter(([, value]) => !value).map(([label]) => label);
|
||||||
|
$: profileReady = profileMissing.length === 0;
|
||||||
|
$: planSections = sections(selectedPlan?.content);
|
||||||
|
$: summaryCards = [
|
||||||
|
{ label: 'Daily target', value: targetCalories ? `${targetCalories} kcal` : 'Add profile', note: settings.goal || 'Goal not set' },
|
||||||
|
{ label: 'Maintenance', value: caloriePlan ? `${caloriePlan.maintenanceCalories} kcal` : 'Unknown', note: caloriePlan ? `BMR ${caloriePlan.bmr} kcal` : 'Needs basics' },
|
||||||
|
{ label: 'Pace', value: settings.pace || 'Not set', note: settings.activityLevel ? `${settings.activityLevel} activity` : 'Activity not set' },
|
||||||
|
];
|
||||||
|
|
||||||
function cleanLine(line) {
|
function cleanLine(line) {
|
||||||
return line.replace(/^#{1,6}\s*/, '').replace(/^[-*]\s+/, '').replace(/\*\*/g, '').replace(/^---+$/, '').trim();
|
return line
|
||||||
|
.replace(/^#{1,6}\s*/, '')
|
||||||
|
.replace(/^[-*]\s+/, '')
|
||||||
|
.replace(/^\d+\.\s+/, '')
|
||||||
|
.replace(/\*\*/g, '')
|
||||||
|
.replace(/^---+$/, '')
|
||||||
|
.trim();
|
||||||
}
|
}
|
||||||
|
|
||||||
function isHeading(line) {
|
function isHeading(line) {
|
||||||
|
|
@ -74,124 +92,213 @@
|
||||||
for (const line of lines) {
|
for (const line of lines) {
|
||||||
if (isHeading(line)) {
|
if (isHeading(line)) {
|
||||||
if (current.items.length) output.push(current);
|
if (current.items.length) output.push(current);
|
||||||
current = { title: line.replace(/^\d+\.\s+/, '').replace(/:$/, ''), items: [] };
|
current = { title: line.replace(/:$/, ''), items: [] };
|
||||||
} else {
|
} else {
|
||||||
current.items.push(line);
|
current.items.push(line);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
output.push(current);
|
if (current.items.length) output.push(current);
|
||||||
return output.filter(section => section.items.length || section.title !== 'Plan');
|
return output;
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatDate(value) {
|
||||||
|
if (!value) return 'Unknown date';
|
||||||
|
return new Date(value).toLocaleString([], { month: 'short', day: 'numeric', year: 'numeric', hour: 'numeric', minute: '2-digit' });
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<section class="space-y-4">
|
<section class="space-y-5">
|
||||||
<p class="text-sm text-slate-500">Your plan is built from your body stats, goal, habits, challenges, and recent meals.</p>
|
<section class="overflow-hidden rounded-3xl border border-slate-200 bg-slate-950 text-white shadow-sm">
|
||||||
|
<div class="grid gap-6 p-5 lg:grid-cols-[1fr_420px] lg:p-7">
|
||||||
<div class="grid gap-4 xl:grid-cols-[0.8fr_1.2fr]">
|
<div>
|
||||||
<section class="card">
|
<div class="text-xs font-black uppercase tracking-[0.28em] text-blue-200">Personal plan</div>
|
||||||
<h3 class="card-title">Profile</h3>
|
<h2 class="mt-3 max-w-3xl text-3xl font-black tracking-tight sm:text-4xl">Build a plan you can actually follow this week.</h2>
|
||||||
<div class="grid gap-3 p-4 md:grid-cols-2 xl:grid-cols-1">
|
<p class="mt-3 max-w-2xl text-sm leading-6 text-slate-300">Set your basics, add the behavior details that usually make dieting hard, then keep each generated version as a clean document.</p>
|
||||||
<Field label="Sex"><select class="input" bind:value={settings.sex}><option value="">Select</option>{#each sexOptions as option}<option>{option}</option>{/each}</select></Field>
|
<div class="mt-5 flex flex-wrap gap-2 text-xs font-bold">
|
||||||
<Field label="Age"><input class="input" type="number" min="16" max="100" bind:value={settings.age}></Field>
|
<span class="rounded-full bg-white/10 px-3 py-1 text-white">{plans.length || 0} saved version{plans.length === 1 ? '' : 's'}</span>
|
||||||
<Field label="Height (cm)"><input class="input" type="number" min="80" bind:value={settings.heightCm}></Field>
|
<span class="rounded-full bg-white/10 px-3 py-1 text-white">{profileReady ? 'Ready to generate' : `Missing ${profileMissing.join(', ')}`}</span>
|
||||||
<Field label="Current weight (kg)"><input class="input" type="number" min="20" step="0.1" bind:value={settings.weightKg}></Field>
|
{#if selectedPlan}<span class="rounded-full bg-blue-500 px-3 py-1 text-white">Active v{selectedPlan.version || 1}</span>{/if}
|
||||||
<Field label="Target weight (kg)"><input class="input" type="number" min="20" step="0.1" bind:value={settings.targetWeightKg}></Field>
|
</div>
|
||||||
<Field label="Main goal"><select class="input" bind:value={settings.goal}>{#each goalOptions as option}<option>{option}</option>{/each}</select></Field>
|
|
||||||
<Field label="Activity"><select class="input" bind:value={settings.activityLevel}><option>Low</option><option>Moderate</option><option>High</option></select></Field>
|
|
||||||
<Field label="Pace"><select class="input" bind:value={settings.pace}><option>Gentle</option><option>Steady</option><option>Aggressive</option></select></Field>
|
|
||||||
<Field label="Daily kcal goal"><input class="input" type="number" min="0" bind:value={settings.calorieTarget} placeholder={caloriePlan ? `${caloriePlan.goalCalories}` : 'Calculated after profile'}></Field>
|
|
||||||
{#if caloriePlan}
|
|
||||||
<div class="rounded-xl border border-blue-100 bg-blue-50 p-3 text-sm text-blue-950 md:col-span-2 xl:col-span-1">
|
|
||||||
<div class="font-black">Calculated target</div>
|
|
||||||
<div>{planSummary(settings)}</div>
|
|
||||||
<div class="mt-1 text-xs text-blue-700">Maintenance: {caloriePlan.maintenanceCalories} kcal/day · BMR: {caloriePlan.bmr} kcal/day</div>
|
|
||||||
</div>
|
|
||||||
{:else}
|
|
||||||
<p class="text-xs text-amber-600 font-medium">Fill in sex, age, height, and current weight to calculate a plan.</p>
|
|
||||||
{/if}
|
|
||||||
<button class="btn-primary" type="button" on:click={generatePlan} disabled={planLoading || !caloriePlan}>{planLoading ? 'Generating...' : 'Generate new plan'}</button>
|
|
||||||
{#if planStatus}<p class:text-red-600={planError} class="text-sm font-semibold text-green-700">{planStatus}</p>{/if}
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="card">
|
<div class="grid gap-3 sm:grid-cols-3 lg:grid-cols-1">
|
||||||
<h3 class="card-title">Personalization</h3>
|
{#each summaryCards as item}
|
||||||
<div class="grid gap-3 p-4 md:grid-cols-2 xl:grid-cols-1">
|
<article class="rounded-2xl border border-white/10 bg-white/10 p-4 backdrop-blur">
|
||||||
<Field label="Why this matters"><select class="input" bind:value={settings.motivation}><option value="">Select</option>{#each motivationOptions as option}<option>{option}</option>{/each}</select></Field>
|
<div class="text-[0.68rem] font-black uppercase tracking-widest text-blue-100">{item.label}</div>
|
||||||
<Field label="Biggest challenge"><select class="input" bind:value={settings.challenge}><option value="">Select</option>{#each challengeOptions as option}<option>{option}</option>{/each}</select></Field>
|
<div class="mt-1 text-2xl font-black text-white">{item.value}</div>
|
||||||
<Field label="Tracking style"><select class="input" bind:value={settings.trackingStyle}><option value="">Select</option>{#each trackingOptions as option}<option>{option}</option>{/each}</select></Field>
|
<div class="mt-1 text-xs text-slate-300">{item.note}</div>
|
||||||
<Field label="Calorie-counting experience"><select class="input" bind:value={settings.calorieCountingExperience}><option value="">Select</option>{#each calorieExperienceOptions as option}<option>{option}</option>{/each}</select></Field>
|
</article>
|
||||||
<Field label="Fasting interest"><select class="input" bind:value={settings.fastingInterest}><option value="">Select</option>{#each fastingOptions as option}<option>{option}</option>{/each}</select></Field>
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="card xl:col-span-2">
|
|
||||||
<h3 class="card-title">Current plan</h3>
|
|
||||||
<div class="grid gap-4 p-4">
|
|
||||||
{#if selectedPlan}
|
|
||||||
<div class="flex flex-col justify-between gap-2 sm:flex-row sm:items-center">
|
|
||||||
<div>
|
|
||||||
<strong>{selectedPlan.title}</strong>
|
|
||||||
<div class="text-xs text-slate-500">Version {selectedPlan.version || 1} · {new Date(selectedPlan.createdAt).toLocaleString()}</div>
|
|
||||||
</div>
|
|
||||||
<button class="rounded-md bg-red-50 px-3 py-1.5 text-xs font-bold text-red-600 hover:bg-red-100" type="button" on:click={() => deletePlan(selectedPlan.id)}>Delete</button>
|
|
||||||
</div>
|
|
||||||
<div class="grid gap-3">
|
|
||||||
{#each sections(selectedPlan.content) as section}
|
|
||||||
<article class="rounded-xl border border-slate-200 bg-slate-50 p-4">
|
|
||||||
<h4 class="border-b border-slate-200 pb-2 text-base font-black text-slate-950">{section.title}</h4>
|
|
||||||
<ul class="mt-3 grid gap-2 text-sm leading-6 text-slate-700">
|
|
||||||
{#each section.items as item}<li>{item}</li>{/each}
|
|
||||||
</ul>
|
|
||||||
</article>
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
<div class="border-t border-slate-200 pt-4">
|
|
||||||
<Field label="Fine-tune with meals, activities, or progress notes">
|
|
||||||
<textarea class="input min-h-28" bind:value={tuneNote} placeholder="Example: walked 7,000 steps daily this week, felt hungry at night, lost 0.3 kg"></textarea>
|
|
||||||
</Field>
|
|
||||||
<p class="mt-1 text-xs text-slate-400">These notes are sent to the AI to update your plan and are not stored afterwards.</p>
|
|
||||||
<button class="btn-primary mt-3" type="button" on:click={() => tunePlan(selectedPlan.id)} disabled={planLoading || !tuneNote?.trim()}>{planLoading ? 'Updating...' : 'Update plan with AI'}</button>
|
|
||||||
</div>
|
|
||||||
{:else}
|
|
||||||
<div class="empty-state">No plans yet. Fill in your profile and click Generate.</div>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{#if plans.length > 1}
|
|
||||||
<section class="card">
|
|
||||||
<h3 class="card-title">Plan history</h3>
|
|
||||||
<div class="grid gap-2 p-4 md:grid-cols-2 xl:grid-cols-3">
|
|
||||||
{#each plans as plan}
|
|
||||||
<button class="rounded-xl border px-3 py-2 text-left text-sm hover:border-blue-300 hover:bg-blue-50" class:border-blue-500={plan.id === selectedPlanId} type="button" on:click={() => selectPlan(plan.id)}>
|
|
||||||
<strong>{plan.title}</strong>
|
|
||||||
<div class="text-xs text-slate-500">Version {plan.version || 1} · {new Date(plan.createdAt).toLocaleString()}</div>
|
|
||||||
</button>
|
|
||||||
{/each}
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
{/if}
|
|
||||||
|
|
||||||
<section class="card">
|
<div class="grid gap-5 xl:grid-cols-[370px_minmax(0,1fr)]">
|
||||||
<h3 class="card-title">Frequently asked questions</h3>
|
<aside class="space-y-5">
|
||||||
<div class="divide-y divide-slate-100">
|
<section class="card">
|
||||||
{#each faqs as faq, i}
|
<div class="border-b border-slate-200 bg-white p-4">
|
||||||
<div>
|
<div class="flex items-center justify-between gap-3">
|
||||||
<button
|
<h3 class="text-sm font-black text-slate-950">1. Body target</h3>
|
||||||
class="flex w-full items-center justify-between gap-4 px-4 py-3 text-left text-sm font-semibold text-slate-800 hover:bg-slate-50"
|
<span class="rounded-full px-2.5 py-1 text-xs font-black {profileReady ? 'bg-green-50 text-green-700' : 'bg-amber-50 text-amber-700'}">{profileReady ? 'Complete' : 'Needs basics'}</span>
|
||||||
type="button"
|
</div>
|
||||||
on:click={() => faqOpen = faqOpen === i ? null : i}
|
<p class="mt-1 text-xs leading-5 text-slate-500">These numbers calculate the baseline. Save or generate to persist changes.</p>
|
||||||
>
|
</div>
|
||||||
<span>{faq.q}</span>
|
<div class="grid gap-3 p-4 sm:grid-cols-2 xl:grid-cols-1">
|
||||||
<svg class="h-4 w-4 flex-none text-slate-400 transition-transform {faqOpen === i ? 'rotate-180' : ''}" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd"/></svg>
|
<Field label="Sex"><select class="input" bind:value={settings.sex}><option value="">Select</option>{#each sexOptions as option}<option>{option}</option>{/each}</select></Field>
|
||||||
</button>
|
<Field label="Age"><input class="input" type="number" min="16" max="100" bind:value={settings.age}></Field>
|
||||||
{#if faqOpen === i}
|
<Field label="Height (cm)"><input class="input" type="number" min="80" bind:value={settings.heightCm}></Field>
|
||||||
<p class="px-4 pb-4 text-sm leading-6 text-slate-600">{faq.a}</p>
|
<Field label="Current weight (kg)"><input class="input" type="number" min="20" step="0.1" bind:value={settings.weightKg}></Field>
|
||||||
|
<Field label="Target weight (kg)"><input class="input" type="number" min="20" step="0.1" bind:value={settings.targetWeightKg}></Field>
|
||||||
|
<Field label="Main goal"><select class="input" bind:value={settings.goal}>{#each goalOptions as option}<option>{option}</option>{/each}</select></Field>
|
||||||
|
<Field label="Activity"><select class="input" bind:value={settings.activityLevel}><option>Low</option><option>Moderate</option><option>High</option></select></Field>
|
||||||
|
<Field label="Pace"><select class="input" bind:value={settings.pace}><option>Gentle</option><option>Steady</option><option>Aggressive</option></select></Field>
|
||||||
|
<Field label="Daily kcal goal"><input class="input" type="number" min="0" bind:value={settings.calorieTarget} placeholder={caloriePlan ? `${caloriePlan.goalCalories}` : 'Calculated after profile'}></Field>
|
||||||
|
{#if caloriePlan}
|
||||||
|
<div class="rounded-2xl border border-blue-100 bg-blue-50 p-3 text-sm text-blue-950 sm:col-span-2 xl:col-span-1">
|
||||||
|
<div class="font-black">Calculated target</div>
|
||||||
|
<div>{planSummary(settings)}</div>
|
||||||
|
<div class="mt-1 text-xs text-blue-700">Maintenance {caloriePlan.maintenanceCalories} kcal/day · BMR {caloriePlan.bmr} kcal/day</div>
|
||||||
|
</div>
|
||||||
|
{:else}
|
||||||
|
<p class="text-xs font-medium text-amber-600 sm:col-span-2 xl:col-span-1">Fill in sex, age, height, and current weight before generating.</p>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
{/each}
|
</section>
|
||||||
|
|
||||||
|
<section class="card">
|
||||||
|
<div class="border-b border-slate-200 bg-white p-4">
|
||||||
|
<h3 class="text-sm font-black text-slate-950">2. Personal strategy</h3>
|
||||||
|
<p class="mt-1 text-xs leading-5 text-slate-500">This keeps the plan from reading like generic diet advice.</p>
|
||||||
|
</div>
|
||||||
|
<div class="grid gap-3 p-4">
|
||||||
|
<Field label="Why this matters"><select class="input" bind:value={settings.motivation}><option value="">Select</option>{#each motivationOptions as option}<option>{option}</option>{/each}</select></Field>
|
||||||
|
<Field label="Biggest challenge"><select class="input" bind:value={settings.challenge}><option value="">Select</option>{#each challengeOptions as option}<option>{option}</option>{/each}</select></Field>
|
||||||
|
<Field label="Tracking style"><select class="input" bind:value={settings.trackingStyle}><option value="">Select</option>{#each trackingOptions as option}<option>{option}</option>{/each}</select></Field>
|
||||||
|
<Field label="Calorie-counting experience"><select class="input" bind:value={settings.calorieCountingExperience}><option value="">Select</option>{#each calorieExperienceOptions as option}<option>{option}</option>{/each}</select></Field>
|
||||||
|
<Field label="Fasting interest"><select class="input" bind:value={settings.fastingInterest}><option value="">Select</option>{#each fastingOptions as option}<option>{option}</option>{/each}</select></Field>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="card">
|
||||||
|
<div class="border-b border-slate-200 bg-white p-4">
|
||||||
|
<h3 class="text-sm font-black text-slate-950">3. Generate</h3>
|
||||||
|
<p class="mt-1 text-xs leading-5 text-slate-500">Creates a new version and keeps the older one.</p>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-3 p-4">
|
||||||
|
<button class="btn-primary w-full" type="button" on:click={generatePlan} disabled={planLoading || !caloriePlan}>{planLoading ? 'Generating...' : 'Generate new plan'}</button>
|
||||||
|
{#if planStatus}<p class:text-red-600={planError} class="rounded-xl bg-slate-50 p-3 text-sm font-semibold text-green-700">{planStatus}</p>{/if}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="card">
|
||||||
|
<div class="border-b border-slate-200 bg-white p-4">
|
||||||
|
<h3 class="text-sm font-black text-slate-950">Plan history</h3>
|
||||||
|
<p class="mt-1 text-xs leading-5 text-slate-500">Switch versions without deleting the current one.</p>
|
||||||
|
</div>
|
||||||
|
<div class="grid gap-2 p-4">
|
||||||
|
{#each plans as plan}
|
||||||
|
<button class="rounded-2xl border px-3 py-3 text-left text-sm hover:border-blue-300 hover:bg-blue-50" class:border-blue-500={plan.id === selectedPlanId} class:bg-blue-50={plan.id === selectedPlanId} type="button" on:click={() => selectPlan(plan.id)}>
|
||||||
|
<div class="flex items-center justify-between gap-3">
|
||||||
|
<strong class="text-slate-900">{plan.title}</strong>
|
||||||
|
{#if plan.id === selectedPlanId}<span class="rounded-full bg-blue-600 px-2 py-0.5 text-[0.65rem] font-black uppercase tracking-wider text-white">Active</span>{/if}
|
||||||
|
</div>
|
||||||
|
<div class="mt-1 text-xs text-slate-500">Version {plan.version || 1} · {formatDate(plan.createdAt)}</div>
|
||||||
|
</button>
|
||||||
|
{:else}
|
||||||
|
<div class="rounded-2xl border border-dashed border-slate-300 p-4 text-sm text-slate-500">No versions yet.</div>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<div class="space-y-5">
|
||||||
|
{#if selectedPlan}
|
||||||
|
<section class="overflow-hidden rounded-3xl border border-slate-200 bg-white shadow-sm">
|
||||||
|
<div class="border-b border-slate-200 bg-gradient-to-r from-slate-50 to-blue-50 p-5">
|
||||||
|
<div class="flex flex-col justify-between gap-4 sm:flex-row sm:items-start">
|
||||||
|
<div>
|
||||||
|
<div class="text-xs font-black uppercase tracking-[0.22em] text-blue-700">Current plan</div>
|
||||||
|
<h3 class="mt-1 text-2xl font-black tracking-tight text-slate-950">{selectedPlan.title}</h3>
|
||||||
|
<p class="mt-1 text-sm text-slate-500">Version {selectedPlan.version || 1} · saved {formatDate(selectedPlan.createdAt)}</p>
|
||||||
|
</div>
|
||||||
|
<button class="rounded-xl bg-red-50 px-4 py-2 text-sm font-black text-red-600 hover:bg-red-100" type="button" on:click={() => deletePlan(selectedPlan.id)}>Delete plan</button>
|
||||||
|
</div>
|
||||||
|
<div class="mt-4 grid gap-3 md:grid-cols-3">
|
||||||
|
{#each summaryCards as item}
|
||||||
|
<div class="rounded-2xl border border-white bg-white/80 p-3 shadow-sm">
|
||||||
|
<div class="text-[0.68rem] font-black uppercase tracking-widest text-slate-400">{item.label}</div>
|
||||||
|
<div class="mt-1 text-lg font-black text-slate-950">{item.value}</div>
|
||||||
|
<div class="text-xs text-slate-500">{item.note}</div>
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid gap-4 p-4 lg:p-5">
|
||||||
|
{#each planSections as section, index}
|
||||||
|
<article class="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm lg:p-5">
|
||||||
|
<div class="flex items-center gap-3 border-b border-slate-100 pb-3">
|
||||||
|
<span class="grid h-8 w-8 shrink-0 place-items-center rounded-full bg-blue-600 text-xs font-black text-white">{index + 1}</span>
|
||||||
|
<h4 class="text-base font-black text-slate-950">{section.title}</h4>
|
||||||
|
</div>
|
||||||
|
<ul class="mt-4 grid gap-3 text-sm leading-6 text-slate-700">
|
||||||
|
{#each section.items as item}
|
||||||
|
<li class="flex gap-3">
|
||||||
|
<span class="mt-2 h-2 w-2 shrink-0 rounded-full bg-blue-500"></span>
|
||||||
|
<span>{item}</span>
|
||||||
|
</li>
|
||||||
|
{/each}
|
||||||
|
</ul>
|
||||||
|
</article>
|
||||||
|
{:else}
|
||||||
|
<pre class="whitespace-pre-wrap rounded-2xl border border-slate-200 bg-slate-50 p-4 text-sm leading-6 text-slate-700">{selectedPlan.content}</pre>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="card">
|
||||||
|
<div class="border-b border-slate-200 bg-white p-4">
|
||||||
|
<h3 class="text-sm font-black text-slate-950">Adjust this plan</h3>
|
||||||
|
<p class="mt-1 text-xs leading-5 text-slate-500">Tell the AI what happened since the last version. The note is not saved, only the new plan is.</p>
|
||||||
|
</div>
|
||||||
|
<div class="p-4">
|
||||||
|
<Field label="Fine-tune with meals, activities, or progress notes">
|
||||||
|
<textarea class="input min-h-32" bind:value={tuneNote} placeholder="Example: walked 7,000 steps daily, felt hungry at night, lost 0.3 kg, struggled with breakfast"></textarea>
|
||||||
|
</Field>
|
||||||
|
<div class="mt-3 flex flex-col gap-3 sm:flex-row sm:items-center">
|
||||||
|
<button class="btn-primary" type="button" on:click={() => tunePlan(selectedPlan.id)} disabled={planLoading || !tuneNote?.trim()}>{planLoading ? 'Updating...' : 'Update plan with AI'}</button>
|
||||||
|
<p class="text-xs leading-5 text-slate-400">This keeps the current version in history and creates a new active version.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
{:else}
|
||||||
|
<section class="rounded-3xl border border-dashed border-slate-300 bg-white p-8 text-center shadow-sm">
|
||||||
|
<div class="mx-auto grid h-14 w-14 place-items-center rounded-2xl bg-blue-50 text-xl font-black text-blue-600">1</div>
|
||||||
|
<h3 class="mt-4 text-xl font-black text-slate-950">No plan yet</h3>
|
||||||
|
<p class="mx-auto mt-2 max-w-lg text-sm leading-6 text-slate-500">Fill in the body target and strategy sections, then generate your first saved plan.</p>
|
||||||
|
</section>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<section class="card">
|
||||||
|
<h3 class="card-title">Plan questions</h3>
|
||||||
|
<div class="divide-y divide-slate-100">
|
||||||
|
{#each faqs as faq, i}
|
||||||
|
<div>
|
||||||
|
<button
|
||||||
|
class="flex w-full items-center justify-between gap-4 px-4 py-3 text-left text-sm font-semibold text-slate-800 hover:bg-slate-50"
|
||||||
|
type="button"
|
||||||
|
on:click={() => faqOpen = faqOpen === i ? null : i}
|
||||||
|
>
|
||||||
|
<span>{faq.q}</span>
|
||||||
|
<svg class="h-4 w-4 flex-none text-slate-400 transition-transform {faqOpen === i ? 'rotate-180' : ''}" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd"/></svg>
|
||||||
|
</button>
|
||||||
|
{#if faqOpen === i}
|
||||||
|
<p class="px-4 pb-4 text-sm leading-6 text-slate-600">{faq.a}</p>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
|
||||||
|
|
@ -80,12 +80,17 @@
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="card xl:col-span-2">
|
<section class="card xl:col-span-2">
|
||||||
<h3 class="card-title">Wearables and gym machines</h3>
|
<div class="border-b border-slate-200 bg-gradient-to-r from-blue-50 to-slate-50 p-4">
|
||||||
<div class="grid gap-3 p-4 text-sm leading-6 text-slate-600 md:grid-cols-3">
|
<div class="text-xs font-black uppercase tracking-[0.24em] text-blue-700">Garmin and Health Connect</div>
|
||||||
<div class="rounded-xl border border-slate-200 bg-slate-50 p-3"><strong class="block text-slate-900">Garmin</strong>Sync Garmin Connect to Android Health Connect, then tap Sync Health Connect in the Android app.</div>
|
<h3 class="mt-1 text-xl font-black text-slate-950">Connect Garmin from the Android app</h3>
|
||||||
<div class="rounded-xl border border-slate-200 bg-slate-50 p-3"><strong class="block text-slate-900">Gym machines</strong>Use the machine or gym app to write workouts to Health Connect. Calorie AI imports the workout sessions and daily active calories.</div>
|
<p class="mt-1 text-sm leading-6 text-slate-600">The web app cannot pair directly with a Garmin watch. Garmin writes to Android Health Connect, then Calorie AI imports that activity.</p>
|
||||||
<div class="rounded-xl border border-slate-200 bg-slate-50 p-3"><strong class="block text-slate-900">Planning</strong>Synced active calories and steps are saved on the server and included when generating or updating plans.</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="grid gap-3 p-4 text-sm leading-6 text-slate-600 lg:grid-cols-3">
|
||||||
|
<div class="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm"><strong class="block text-slate-900">1. Garmin Connect</strong>Pair the watch and confirm it syncs in the Garmin Connect Android app.</div>
|
||||||
|
<div class="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm"><strong class="block text-slate-900">2. Health Connect</strong>In Garmin Connect, enable sharing to Android Health Connect. Garmin sends steps, calories, and workouts after each device sync.</div>
|
||||||
|
<div class="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm"><strong class="block text-slate-900">3. Calorie AI Android</strong>Open Calorie AI on Android, go to Settings, and tap Sync Health Connect. The web dashboard updates after the server receives the sync.</div>
|
||||||
|
</div>
|
||||||
|
<div class="border-t border-slate-100 bg-slate-50 px-4 py-3 text-xs leading-5 text-slate-500">Direct Garmin web login is not available because Garmin Health API requires partner approval and API credentials.</div>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
|
||||||
37
web/src/appConfig.js
Normal file
37
web/src/appConfig.js
Normal file
|
|
@ -0,0 +1,37 @@
|
||||||
|
export const pages = [
|
||||||
|
{ id: 'dashboard', label: 'Dashboard', icon: 'dashboard', group: 'Tracker' },
|
||||||
|
{ id: 'log', label: 'Log meal', icon: 'plus', group: 'Tracker' },
|
||||||
|
{ id: 'analytics', label: 'Analytics', icon: 'analytics', group: 'Tracker' },
|
||||||
|
{ id: 'diary', label: 'Diary', icon: 'diary', group: 'Tracker' },
|
||||||
|
{ id: 'trash', label: 'Trash', icon: 'trash', group: 'Tracker' },
|
||||||
|
{ id: 'plans', label: 'Plans', icon: 'plans', group: 'Tracker' },
|
||||||
|
{ id: 'settings', label: 'Settings', icon: 'settings', group: 'Admin' },
|
||||||
|
];
|
||||||
|
|
||||||
|
export const mealTypes = ['Breakfast', 'Lunch', 'Dinner', 'Snack', 'Other'];
|
||||||
|
|
||||||
|
export const fallbackModels = [
|
||||||
|
{ id: 'claude-haiku-4.5', name: 'Claude Haiku 4.5' },
|
||||||
|
{ id: 'claude-sonnet-4.6', name: 'Claude Sonnet 4.6' },
|
||||||
|
{ id: 'gemini-2.5-flash', name: 'Gemini 2.5 Flash' },
|
||||||
|
{ id: 'gpt-4o-mini', name: 'GPT-4o mini' },
|
||||||
|
];
|
||||||
|
|
||||||
|
export const defaultSettings = {
|
||||||
|
visionModel: fallbackModels[0].id,
|
||||||
|
taskModel: fallbackModels[0].id,
|
||||||
|
sex: '',
|
||||||
|
age: '',
|
||||||
|
heightCm: '',
|
||||||
|
weightKg: '',
|
||||||
|
targetWeightKg: '',
|
||||||
|
goal: 'Lose weight',
|
||||||
|
calorieTarget: '',
|
||||||
|
activityLevel: 'Moderate',
|
||||||
|
pace: 'Steady',
|
||||||
|
motivation: '',
|
||||||
|
challenge: '',
|
||||||
|
trackingStyle: '',
|
||||||
|
calorieCountingExperience: '',
|
||||||
|
fastingInterest: '',
|
||||||
|
};
|
||||||
Loading…
Reference in a new issue