chore: initial project setup with documentation and design assets
Add project foundation: CLAUDE.md, requirements tracking system, technical architecture docs, Firestore setup guide, device testing guide, and Stitch design mockups for Precision Vitality app. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,74 @@
|
||||
# GOOGLE STITCH DESIGN BRIEF — CalorieTracker
|
||||
|
||||
**App name:** CalorieTracker
|
||||
**Platform:** Mobile (iOS + Android), Ionic Capacitor
|
||||
**Language:** Italiano
|
||||
|
||||
---
|
||||
|
||||
#### IDENTITÀ VISIVA
|
||||
|
||||
**Mood:** Energico ma pulito. Non medicale, non pesante. Motivante.
|
||||
**Palette colori:**
|
||||
- Primario: Verde salute `#4CAF50` (azioni positive, conferme, obiettivo raggiunto)
|
||||
- Accent: Arancione energia `#FF7043` (FAB, CTA principale, avvisi morbidi)
|
||||
- Errore/Eccesso: Rosso `#F44336` (obiettivo superato, validazioni)
|
||||
- Background: Bianco sporco `#FAFAFA`
|
||||
- Superfici card: Bianco `#FFFFFF` con ombra leggera
|
||||
- Testo primario: `#212121`
|
||||
- Testo secondario: `#757575`
|
||||
|
||||
**Tipografia:**
|
||||
- Font: Roboto (già incluso in Ionic)
|
||||
- Titolo totale kcal: 48px, bold, colore primario
|
||||
- Label: 14px, medium
|
||||
- Corpo lista: 16px, regular
|
||||
|
||||
**Iconografia:** Material Icons (set standard Ionic/Angular Material)
|
||||
|
||||
---
|
||||
|
||||
#### SCHERMATE DA GENERARE
|
||||
|
||||
**SCHERMATA 1 — Home**
|
||||
- Header: data odierna (es. "Mercoledì 16 aprile") centrata, testo secondario
|
||||
- Centro schermata: numero kcal totali giornalieri in grande (48px, verde), label "calorie oggi" sotto
|
||||
- Barra progresso orizzontale: kcal consumate / 2000 kcal obiettivo, colore verde → rosso se >100%
|
||||
- Lista pasti sotto la barra: card minimal con [ora | descrizione | kcal] su ogni riga
|
||||
- Badge piccolo a destra: "AI" (arancione) se stima LLM, "M" (grigio) se manuale
|
||||
- FAB in basso a destra: cerchio arancione `#FF7043`, icona "+" bianca, dimensione XL
|
||||
- Empty state se nessun pasto: illustrazione semplice + "Nessun pasto registrato oggi. Inizia!"
|
||||
|
||||
**SCHERMATA 2 — Bottom Sheet scelta input**
|
||||
- Modal bottom sheet (mezzo schermo)
|
||||
- Titolo: "Come vuoi registrare?"
|
||||
- Due opzioni a tutta larghezza, staccate, con icona:
|
||||
- "Inserisci kcal" — icona tastiera numerica — sfondo bianco con bordo verde
|
||||
- "Descrivi il pasto" — icona microfono/testo — sfondo bianco con bordo arancione
|
||||
- Bottone X in alto a destra per chiudere
|
||||
|
||||
**SCHERMATA 3 — Modal input numerico**
|
||||
- Titolo: "Inserisci calorie"
|
||||
- Campo numerico grande al centro: font 40px, placeholder "0"
|
||||
- Label sotto campo: "kcal"
|
||||
- Campo testo sotto: "Descrizione (opzionale)", font normale, bordo leggero
|
||||
- Bottone "Salva" verde a tutta larghezza in basso
|
||||
|
||||
**SCHERMATA 4 — Modal descrizione LLM**
|
||||
- Titolo: "Descrivi il pasto"
|
||||
- Textarea grande: placeholder "Es. piatto di pasta al pomodoro con 2 cucchiai di parmigiano"
|
||||
- Bottone "Stima calorie" arancione a tutta larghezza
|
||||
- Stato risultato (visibile dopo risposta LLM):
|
||||
- Box risultato: kcal stimati in grande, badge confidence (verde/giallo/rosso)
|
||||
- Testo spiegazione in corsivo sotto
|
||||
- Campo kcal modificabile (pre-compilato con stima)
|
||||
- Bottone "Salva" verde
|
||||
|
||||
**SCHERMATA 5 — Statistiche settimanali**
|
||||
- Tab selector: "Oggi" | "Settimana"
|
||||
- Vista settimana: grafico a barre 7 giorni
|
||||
- Barre verdi se ≤ obiettivo, rosse se sopra
|
||||
- Asse X: giorni abbreviati (Lun, Mar...)
|
||||
- Asse Y: kcal (0, 500, 1000, 1500, 2000+)
|
||||
- Sotto grafico: card "Media settimanale: X kcal/giorno"
|
||||
- Navigazione settimana: frecce sinistra/destra con label "14–20 apr"
|
||||
@@ -0,0 +1,193 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" lang="it"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Descrivi il pasto - Precision Vitality</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Lexend:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"inverse-on-surface": "#9c9d9d",
|
||||
"on-tertiary-container": "#690002",
|
||||
"on-primary-container": "#005e17",
|
||||
"surface-variant": "#dbdddd",
|
||||
"surface": "#f6f6f6",
|
||||
"on-secondary-container": "#862400",
|
||||
"error-container": "#f95630",
|
||||
"on-surface": "#2d2f2f",
|
||||
"primary-fixed-dim": "#83e881",
|
||||
"on-secondary": "#ffefeb",
|
||||
"on-surface-variant": "#5a5c5c",
|
||||
"primary": "#006b1b",
|
||||
"inverse-surface": "#0c0f0f",
|
||||
"inverse-primary": "#91f78e",
|
||||
"surface-tint": "#006b1b",
|
||||
"surface-bright": "#f6f6f6",
|
||||
"on-tertiary-fixed": "#3a0001",
|
||||
"tertiary": "#b71211",
|
||||
"tertiary-dim": "#a40007",
|
||||
"primary-fixed": "#91f78e",
|
||||
"secondary-dim": "#952800",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"error": "#b02500",
|
||||
"on-background": "#2d2f2f",
|
||||
"on-error-container": "#520c00",
|
||||
"on-tertiary": "#ffefed",
|
||||
"surface-container-low": "#f0f1f1",
|
||||
"surface-container-highest": "#dbdddd",
|
||||
"tertiary-fixed": "#ff9385",
|
||||
"on-secondary-fixed-variant": "#972900",
|
||||
"surface-dim": "#d3d5d5",
|
||||
"on-secondary-fixed": "#651900",
|
||||
"on-error": "#ffefec",
|
||||
"secondary-container": "#ffc4b3",
|
||||
"surface-container": "#e7e8e8",
|
||||
"secondary": "#a83206",
|
||||
"outline": "#767777",
|
||||
"primary-container": "#91f78e",
|
||||
"on-primary": "#d1ffc8",
|
||||
"on-tertiary-fixed-variant": "#7a0003",
|
||||
"outline-variant": "#acadad",
|
||||
"background": "#f6f6f6",
|
||||
"secondary-fixed": "#ffc4b3",
|
||||
"on-primary-fixed-variant": "#00691a",
|
||||
"primary-dim": "#005d16",
|
||||
"surface-container-high": "#e1e3e3",
|
||||
"tertiary-container": "#ff9385",
|
||||
"tertiary-fixed-dim": "#ff7c6c",
|
||||
"on-primary-fixed": "#00480f",
|
||||
"secondary-fixed-dim": "#ffb19a",
|
||||
"error-dim": "#b92902"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline": ["Lexend"],
|
||||
"body": ["Plus Jakarta Sans"],
|
||||
"label": ["Plus Jakarta Sans"]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body { font-family: 'Plus Jakarta Sans', sans-serif; }
|
||||
h1, h2, h3, .display-lg { font-family: 'Lexend', sans-serif; }
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.kinetic-gradient {
|
||||
background: linear-gradient(135deg, #006b1b 0%, #005d16 100%);
|
||||
}
|
||||
.energy-gradient {
|
||||
background: linear-gradient(135deg, #a83206 0%, #952800 100%);
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface text-on-surface min-h-screen pb-24">
|
||||
<!-- Top Navigation Shell -->
|
||||
<nav class="fixed top-0 w-full flex justify-between items-center px-6 h-16 bg-white/80 dark:bg-zinc-900/80 backdrop-blur-xl z-50">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="material-symbols-outlined text-on-surface-variant cursor-pointer">close</span>
|
||||
<span class="text-xl font-bold tracking-tight text-green-700 dark:text-green-500">Precision Vitality</span>
|
||||
</div>
|
||||
<div class="w-10 h-10 rounded-full overflow-hidden">
|
||||
<img class="w-full h-full object-cover" data-alt="close up professional headshot of a smiling man with clean background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuB3ZTuiToTbzi1xyLIep2NDhvydENIomB2p1AxfdYnIsJIhDe2rG5vNpXmRpuWz0sIpilOKsIzauEJD0WsIMcnNf3GTSF2hFHfgoYrA2bx30T0Smy-Q-A7IRn8uSr7tMM_ffx6nyUrcQoV4upparHsyoz2k6WDNSUxhl0erHoFjMYpfRH_5cXVasigJ7Qw58JAMao5lI3cNq3ajcuySHutW4o2x-ArQKLCPZdWC325u6vhI8qLPTXfXWIyNwpe0OICW-AkYDOJ35wc"/>
|
||||
</div>
|
||||
</nav>
|
||||
<main class="pt-24 px-6 max-w-2xl mx-auto">
|
||||
<!-- Header Section -->
|
||||
<header class="mb-8">
|
||||
<h1 class="text-3xl font-bold text-on-surface mb-2">Descrivi il pasto</h1>
|
||||
<p class="text-on-surface-variant">Usa il linguaggio naturale per stimare i tuoi nutrienti in pochi secondi.</p>
|
||||
</header>
|
||||
<!-- Editor Card -->
|
||||
<div class="bg-surface-container-lowest rounded-[2rem] p-6 mb-6 shadow-sm">
|
||||
<div class="mb-6">
|
||||
<label class="block text-xs font-bold uppercase tracking-widest text-on-surface-variant mb-3 px-1">Il tuo pasto</label>
|
||||
<textarea class="w-full min-h-[160px] bg-surface-container-low border-0 rounded-xl p-4 text-on-surface focus:ring-2 focus:ring-primary/20 placeholder:text-outline resize-none text-lg leading-relaxed" placeholder="Esempio: Pizza margherita e una birra media...">Pizza margherita e una birra</textarea>
|
||||
</div>
|
||||
<!-- Kinetic Action Button -->
|
||||
<button class="w-full energy-gradient text-on-primary py-4 px-6 rounded-full font-bold text-lg flex items-center justify-center gap-2 hover:opacity-90 transition-opacity active:scale-[0.98] duration-200">
|
||||
<span class="material-symbols-outlined">psychology</span>
|
||||
Stima calorie
|
||||
</button>
|
||||
</div>
|
||||
<!-- AI Analysis Result (The Kinetic Editor Style) -->
|
||||
<div class="bg-surface-container-low rounded-[2rem] p-8 relative overflow-hidden">
|
||||
<!-- Background Accent -->
|
||||
<div class="absolute -right-12 -top-12 w-48 h-48 bg-primary/5 rounded-full blur-3xl"></div>
|
||||
<div class="relative z-10 flex flex-col items-center text-center">
|
||||
<div class="bg-primary/10 text-primary-dim px-4 py-1.5 rounded-full text-xs font-extrabold uppercase tracking-widest mb-6 flex items-center gap-1.5">
|
||||
<span class="material-symbols-outlined text-[16px]" style="font-variation-settings: 'FILL' 1;">verified</span>
|
||||
Alta precisione
|
||||
</div>
|
||||
<div class="flex flex-col items-center mb-4">
|
||||
<span class="display-lg text-[4rem] leading-none font-bold text-primary block">650</span>
|
||||
<span class="text-xs font-bold uppercase tracking-[0.2em] text-on-surface-variant -mt-1">KCAL STIMATE</span>
|
||||
</div>
|
||||
<!-- Macro Breakdown - Minimalist Style -->
|
||||
<div class="w-full grid grid-cols-3 gap-4 mt-4 mb-8">
|
||||
<div class="flex flex-col items-center">
|
||||
<span class="text-sm font-bold text-on-surface">85g</span>
|
||||
<span class="text-[10px] font-bold uppercase text-outline">Carbi</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center border-x border-outline/10">
|
||||
<span class="text-sm font-bold text-on-surface">22g</span>
|
||||
<span class="text-[10px] font-bold uppercase text-outline">Proteine</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center">
|
||||
<span class="text-sm font-bold text-on-surface">18g</span>
|
||||
<span class="text-[10px] font-bold uppercase text-outline">Grassi</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-on-surface-variant italic text-xs leading-relaxed max-w-[280px]">
|
||||
Basato su ingredienti standard e porzioni medie per una pizza tradizionale e 33cl di birra.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Sticky Bottom Action -->
|
||||
<div class="fixed bottom-24 left-0 w-full px-6 z-40 max-w-2xl mx-auto right-0">
|
||||
<button class="w-full bg-primary text-on-primary py-5 rounded-2xl font-bold text-lg shadow-[0px_12px_32px_rgba(0,107,27,0.15)] flex items-center justify-center gap-2 active:scale-95 transition-transform">
|
||||
<span class="material-symbols-outlined">check_circle</span>
|
||||
Salva
|
||||
</button>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Navigation Shell (Bottom) -->
|
||||
<nav class="fixed bottom-0 left-0 w-full z-50 flex justify-around items-center px-4 pb-6 pt-2 bg-white/80 dark:bg-zinc-900/80 backdrop-blur-xl rounded-t-[2rem] shadow-[0px_-12px_32px_rgba(0,107,27,0.08)]">
|
||||
<div class="flex flex-col items-center justify-center bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-200 rounded-2xl px-5 py-2 scale-90 transition-transform">
|
||||
<span class="material-symbols-outlined" data-icon="event_note">event_note</span>
|
||||
<span class="font-headline text-[10px] font-bold uppercase tracking-widest mt-1">Journal</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center justify-center text-zinc-400 dark:text-zinc-500 px-5 py-2 hover:text-green-600 transition-opacity">
|
||||
<span class="material-symbols-outlined" data-icon="bar_chart">bar_chart</span>
|
||||
<span class="font-headline text-[10px] font-bold uppercase tracking-widest mt-1">Stats</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center justify-center text-zinc-400 dark:text-zinc-500 px-5 py-2 hover:text-green-600 transition-opacity">
|
||||
<span class="material-symbols-outlined" data-icon="restaurant_menu">restaurant_menu</span>
|
||||
<span class="font-headline text-[10px] font-bold uppercase tracking-widest mt-1">Plans</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center justify-center text-zinc-400 dark:text-zinc-500 px-5 py-2 hover:text-green-600 transition-opacity">
|
||||
<span class="material-symbols-outlined" data-icon="person">person</span>
|
||||
<span class="font-headline text-[10px] font-bold uppercase tracking-widest mt-1">Profile</span>
|
||||
</div>
|
||||
</nav>
|
||||
</body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 173 KiB |
@@ -0,0 +1,209 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" lang="it"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Precision Vitality - Journal</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Lexend:wght@400;500;700;800&family=Plus+Jakarta+Sans:wght@400;500;600&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"inverse-on-surface": "#9c9d9d",
|
||||
"on-tertiary-container": "#690002",
|
||||
"on-primary-container": "#005e17",
|
||||
"surface-variant": "#dbdddd",
|
||||
"surface": "#f6f6f6",
|
||||
"on-secondary-container": "#862400",
|
||||
"error-container": "#f95630",
|
||||
"on-surface": "#2d2f2f",
|
||||
"primary-fixed-dim": "#83e881",
|
||||
"on-secondary": "#ffefeb",
|
||||
"on-surface-variant": "#5a5c5c",
|
||||
"primary": "#006b1b",
|
||||
"inverse-surface": "#0c0f0f",
|
||||
"inverse-primary": "#91f78e",
|
||||
"surface-tint": "#006b1b",
|
||||
"surface-bright": "#f6f6f6",
|
||||
"on-tertiary-fixed": "#3a0001",
|
||||
"tertiary": "#b71211",
|
||||
"tertiary-dim": "#a40007",
|
||||
"primary-fixed": "#91f78e",
|
||||
"secondary-dim": "#952800",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"error": "#b02500",
|
||||
"on-background": "#2d2f2f",
|
||||
"on-error-container": "#520c00",
|
||||
"on-tertiary": "#ffefed",
|
||||
"surface-container-low": "#f0f1f1",
|
||||
"surface-container-highest": "#dbdddd",
|
||||
"tertiary-fixed": "#ff9385",
|
||||
"on-secondary-fixed-variant": "#972900",
|
||||
"surface-dim": "#d3d5d5",
|
||||
"on-secondary-fixed": "#651900",
|
||||
"on-error": "#ffefec",
|
||||
"secondary-container": "#ffc4b3",
|
||||
"surface-container": "#e7e8e8",
|
||||
"secondary": "#a83206",
|
||||
"outline": "#767777",
|
||||
"primary-container": "#91f78e",
|
||||
"on-primary": "#d1ffc8",
|
||||
"on-tertiary-fixed-variant": "#7a0003",
|
||||
"outline-variant": "#acadad",
|
||||
"background": "#f6f6f6",
|
||||
"secondary-fixed": "#ffc4b3",
|
||||
"on-primary-fixed-variant": "#00691a",
|
||||
"primary-dim": "#005d16",
|
||||
"surface-container-high": "#e1e3e3",
|
||||
"tertiary-container": "#ff9385",
|
||||
"tertiary-fixed-dim": "#ff7c6c",
|
||||
"on-primary-fixed": "#00480f",
|
||||
"secondary-fixed-dim": "#ffb19a",
|
||||
"error-dim": "#b92902"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline": ["Lexend"],
|
||||
"body": ["Plus Jakarta Sans"],
|
||||
"label": ["Plus Jakarta Sans"]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body { font-family: 'Plus Jakarta Sans', sans-serif; }
|
||||
h1, h2, .font-headline { font-family: 'Lexend', sans-serif; }
|
||||
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
|
||||
</style>
|
||||
<style>
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface text-on-surface min-h-screen pb-32">
|
||||
<!-- TopAppBar -->
|
||||
<header class="fixed top-0 w-full flex justify-between items-center px-6 h-16 bg-white/80 dark:bg-zinc-900/80 backdrop-blur-xl z-50">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-full overflow-hidden bg-surface-container">
|
||||
<img alt="User Profile" class="w-full h-full object-cover" data-alt="Professional studio portrait of a smiling young man with friendly eyes and soft natural lighting against a neutral background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCYLHnqZTkjUzITUdAwv_saSlGzWcd7dMu3wqqrMYBm-2xFL7A9D150Gi3nhfpkXlh6rav5vwDqe2QqM7s7SH8QECG-Qt18YbbOi4JGLinwhQhni6njNxJDhPYPSPiuRCvN49xs3728RN-eZXlmPHfUh8-vGZUnokRHlhf_M2sWhFA_Vw-4vjD9ecmVLe6487040GPmcAu7t4etj2W_KMUehn0_KEvL3rlOsJ8TQ29Z6AHbzWV3gklT05hhXAChvrq9K4TRqu_IboQ"/>
|
||||
</div>
|
||||
<span class="text-xl font-bold tracking-tight text-green-700 dark:text-green-500 font-headline">Precision Vitality</span>
|
||||
</div>
|
||||
<button class="text-zinc-500 hover:opacity-80 transition-opacity">
|
||||
<span class="material-symbols-outlined text-2xl" data-icon="settings">settings</span>
|
||||
</button>
|
||||
</header>
|
||||
<main class="pt-24 px-6 max-w-2xl mx-auto">
|
||||
<!-- Date Header -->
|
||||
<div class="text-center mb-10">
|
||||
<p class="text-on-surface-variant font-medium text-sm font-label uppercase tracking-widest">Mercoledì 16 aprile</p>
|
||||
<h2 class="text-on-surface font-headline font-bold text-lg">Il tuo progresso giornaliero</h2>
|
||||
</div>
|
||||
<!-- Main Score Hero -->
|
||||
<div class="relative flex flex-col items-center mb-12">
|
||||
<!-- Macro Donut Overlay (Kinetic Suite) -->
|
||||
<div class="absolute -z-10 w-64 h-64 border-[4px] border-surface-container-highest rounded-full flex items-center justify-center opacity-40">
|
||||
<div class="w-full h-full rounded-full border-[4px] border-primary border-t-transparent -rotate-45"></div>
|
||||
</div>
|
||||
<span class="text-[3.5rem] font-bold text-primary font-headline leading-none">1450</span>
|
||||
<span class="text-on-surface-variant font-label font-medium text-sm mt-2">calorie oggi</span>
|
||||
<div class="w-full max-w-xs mt-8">
|
||||
<div class="flex justify-between text-[10px] font-bold font-headline uppercase tracking-wider text-on-surface-variant mb-2">
|
||||
<span>Attuale: 1450</span>
|
||||
<span>Obiettivo: 2000</span>
|
||||
</div>
|
||||
<div class="h-3 w-full bg-surface-container-highest rounded-full overflow-hidden">
|
||||
<div class="h-full bg-gradient-to-r from-primary-fixed to-primary w-[72.5%] rounded-full shadow-[0px_4px_12px_rgba(0,107,27,0.15)]"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Meal List Section -->
|
||||
<div class="space-y-6">
|
||||
<h3 class="font-headline font-bold text-xl mb-4 ml-2">Diario Alimentare</h3>
|
||||
<!-- Meal Card 1 -->
|
||||
<div class="bg-surface-container-lowest p-5 rounded-xl shadow-[0px_8px_24px_rgba(0,0,0,0.04)] flex items-center justify-between transition-transform duration-200 hover:scale-[1.02]">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="text-on-surface-variant font-medium text-sm w-12">08:30</div>
|
||||
<div>
|
||||
<p class="font-semibold text-on-surface">Colazione Proteica</p>
|
||||
<div class="flex gap-2 mt-1">
|
||||
<span class="bg-surface-container text-on-surface-variant text-[10px] font-bold px-2 py-0.5 rounded-full uppercase tracking-tighter">M</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<span class="font-headline font-bold text-primary">350 kcal</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Meal Card 2 -->
|
||||
<div class="bg-surface-container-lowest p-5 rounded-xl shadow-[0px_8px_24px_rgba(0,0,0,0.04)] flex items-center justify-between transition-transform duration-200 hover:scale-[1.02]">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="text-on-surface-variant font-medium text-sm w-12">13:00</div>
|
||||
<div>
|
||||
<p class="font-semibold text-on-surface">Pasta al pesto</p>
|
||||
<div class="flex gap-2 mt-1">
|
||||
<span class="bg-secondary-container text-on-secondary-container text-[10px] font-bold px-2 py-0.5 rounded-full uppercase tracking-tighter">AI</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<span class="font-headline font-bold text-primary">650 kcal</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Meal Card 3 -->
|
||||
<div class="bg-surface-container-lowest p-5 rounded-xl shadow-[0px_8px_24px_rgba(0,0,0,0.04)] flex items-center justify-between transition-transform duration-200 hover:scale-[1.02]">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="text-on-surface-variant font-medium text-sm w-12">16:45</div>
|
||||
<div>
|
||||
<p class="font-semibold text-on-surface">Frutta fresca e noci</p>
|
||||
<div class="flex gap-2 mt-1">
|
||||
<span class="bg-secondary-container text-on-secondary-container text-[10px] font-bold px-2 py-0.5 rounded-full uppercase tracking-tighter">AI</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<span class="font-headline font-bold text-primary">450 kcal</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- FAB XL -->
|
||||
<button class="fixed bottom-28 right-6 w-16 h-16 bg-secondary text-on-secondary rounded-full flex items-center justify-center shadow-[0px_12px_32px_rgba(168,50,6,0.25)] hover:scale-95 transition-transform duration-200 ease-out z-40">
|
||||
<span class="material-symbols-outlined text-3xl font-bold" data-icon="add">add</span>
|
||||
</button>
|
||||
<!-- BottomNavBar -->
|
||||
<nav class="fixed bottom-0 left-0 w-full z-50 flex justify-around items-center px-4 pb-6 pt-2 bg-white/80 dark:bg-zinc-900/80 backdrop-blur-xl rounded-t-[2rem] shadow-[0px_-12px_32px_rgba(0,107,27,0.08)]">
|
||||
<!-- Journal Active -->
|
||||
<a class="flex flex-col items-center justify-center bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-200 rounded-2xl px-5 py-2 scale-90 transition-transform duration-300" href="#">
|
||||
<span class="material-symbols-outlined mb-1" data-icon="event_note" style="font-variation-settings: 'FILL' 1;">event_note</span>
|
||||
<span class="font-headline text-[10px] font-bold uppercase tracking-widest">Journal</span>
|
||||
</a>
|
||||
<!-- Stats Inactive -->
|
||||
<a class="flex flex-col items-center justify-center text-zinc-400 dark:text-zinc-500 px-5 py-2 hover:text-green-600 transition-opacity" href="#">
|
||||
<span class="material-symbols-outlined mb-1" data-icon="bar_chart">bar_chart</span>
|
||||
<span class="font-headline text-[10px] font-bold uppercase tracking-widest">Stats</span>
|
||||
</a>
|
||||
<!-- Plans Inactive -->
|
||||
<a class="flex flex-col items-center justify-center text-zinc-400 dark:text-zinc-500 px-5 py-2 hover:text-green-600 transition-opacity" href="#">
|
||||
<span class="material-symbols-outlined mb-1" data-icon="restaurant_menu">restaurant_menu</span>
|
||||
<span class="font-headline text-[10px] font-bold uppercase tracking-widest">Plans</span>
|
||||
</a>
|
||||
<!-- Profile Inactive -->
|
||||
<a class="flex flex-col items-center justify-center text-zinc-400 dark:text-zinc-500 px-5 py-2 hover:text-green-600 transition-opacity" href="#">
|
||||
<span class="material-symbols-outlined mb-1" data-icon="person">person</span>
|
||||
<span class="font-headline text-[10px] font-bold uppercase tracking-widest">Profile</span>
|
||||
</a>
|
||||
</nav>
|
||||
</body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 197 KiB |
@@ -0,0 +1,175 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="it"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Precision Vitality — Inserisci calorie</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Lexend:wght@400;500;700;800&family=Plus+Jakarta+Sans:wght@400;500;600&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"inverse-on-surface": "#9c9d9d",
|
||||
"on-tertiary-container": "#690002",
|
||||
"on-primary-container": "#005e17",
|
||||
"surface-variant": "#dbdddd",
|
||||
"surface": "#f6f6f6",
|
||||
"on-secondary-container": "#862400",
|
||||
"error-container": "#f95630",
|
||||
"on-surface": "#2d2f2f",
|
||||
"primary-fixed-dim": "#83e881",
|
||||
"on-secondary": "#ffefeb",
|
||||
"on-surface-variant": "#5a5c5c",
|
||||
"primary": "#006b1b",
|
||||
"inverse-surface": "#0c0f0f",
|
||||
"inverse-primary": "#91f78e",
|
||||
"surface-tint": "#006b1b",
|
||||
"surface-bright": "#f6f6f6",
|
||||
"on-tertiary-fixed": "#3a0001",
|
||||
"tertiary": "#b71211",
|
||||
"tertiary-dim": "#a40007",
|
||||
"primary-fixed": "#91f78e",
|
||||
"secondary-dim": "#952800",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"error": "#b02500",
|
||||
"on-background": "#2d2f2f",
|
||||
"on-error-container": "#520c00",
|
||||
"on-tertiary": "#ffefed",
|
||||
"surface-container-low": "#f0f1f1",
|
||||
"surface-container-highest": "#dbdddd",
|
||||
"tertiary-fixed": "#ff9385",
|
||||
"on-secondary-fixed-variant": "#972900",
|
||||
"surface-dim": "#d3d5d5",
|
||||
"on-secondary-fixed": "#651900",
|
||||
"on-error": "#ffefec",
|
||||
"secondary-container": "#ffc4b3",
|
||||
"surface-container": "#e7e8e8",
|
||||
"secondary": "#a83206",
|
||||
"outline": "#767777",
|
||||
"primary-container": "#91f78e",
|
||||
"on-primary": "#d1ffc8",
|
||||
"on-tertiary-fixed-variant": "#7a0003",
|
||||
"outline-variant": "#acadad",
|
||||
"background": "#f6f6f6",
|
||||
"secondary-fixed": "#ffc4b3",
|
||||
"on-primary-fixed-variant": "#00691a",
|
||||
"primary-dim": "#005d16",
|
||||
"surface-container-high": "#e1e3e3",
|
||||
"tertiary-container": "#ff9385",
|
||||
"tertiary-fixed-dim": "#ff7c6c",
|
||||
"on-primary-fixed": "#00480f",
|
||||
"secondary-fixed-dim": "#ffb19a",
|
||||
"error-dim": "#b92902"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline": ["Lexend"],
|
||||
"body": ["Plus Jakarta Sans"],
|
||||
"label": ["Plus Jakarta Sans"]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Plus Jakarta Sans', sans-serif;
|
||||
background-color: #f6f6f6;
|
||||
}
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.input-no-spinner::-webkit-inner-spin-button,
|
||||
.input-no-spinner::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface text-on-surface min-h-screen flex flex-col items-center justify-center p-4">
|
||||
<!-- Modal Background -->
|
||||
<div class="fixed inset-0 bg-inverse-surface/20 backdrop-blur-md z-0"></div>
|
||||
<!-- Main Modal Canvas -->
|
||||
<div class="relative w-full max-w-md bg-surface-container-lowest rounded-[2.5rem] overflow-hidden shadow-[0px_24px_48px_rgba(0,107,27,0.12)] z-10">
|
||||
<!-- Top Navigation (Suppressing Shell as per Focus Rule) -->
|
||||
<div class="flex justify-between items-center px-8 pt-8 pb-4">
|
||||
<button class="w-10 h-10 flex items-center justify-center rounded-full bg-surface-container-low text-on-surface-variant hover:bg-surface-container-high transition-colors">
|
||||
<span class="material-symbols-outlined">close</span>
|
||||
</button>
|
||||
<h2 class="font-headline text-lg font-bold tracking-tight text-on-surface">Inserisci calorie</h2>
|
||||
<div class="w-10"></div> <!-- Spacer for symmetry -->
|
||||
</div>
|
||||
<!-- Content Body -->
|
||||
<div class="px-8 pb-10 flex flex-col items-center">
|
||||
<!-- Motivational Kinetic Element -->
|
||||
<div class="mt-4 mb-8 flex flex-col items-center">
|
||||
<div class="w-20 h-20 rounded-full bg-primary-container flex items-center justify-center mb-4">
|
||||
<span class="material-symbols-outlined text-on-primary-container text-4xl" style="font-variation-settings: 'FILL' 1;">bolt</span>
|
||||
</div>
|
||||
<p class="font-body text-on-surface-variant text-sm font-medium">Ogni dato conta per il tuo obiettivo.</p>
|
||||
</div>
|
||||
<!-- Kinetic Large Input Section -->
|
||||
<div class="w-full flex flex-col items-center mb-10">
|
||||
<div class="relative flex flex-col items-center">
|
||||
<input autofocus="" class="input-no-spinner w-full text-center bg-transparent border-none focus:ring-0 font-headline font-bold text-[80px] leading-tight text-primary placeholder:text-surface-container-highest" placeholder="0" style="font-size: 80px;" type="number"/>
|
||||
<span class="font-headline text-xl font-bold text-on-surface-variant -mt-2 tracking-widest uppercase">kcal</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Description Field -->
|
||||
<div class="w-full mb-12">
|
||||
<label class="block text-[10px] font-headline font-bold uppercase tracking-[0.2em] text-on-surface-variant mb-3 ml-2">Dettagli pasto</label>
|
||||
<div class="relative group">
|
||||
<input class="w-full h-14 px-6 bg-surface-container-low rounded-2xl border-2 border-transparent focus:border-primary-container focus:bg-surface-container-lowest outline-none transition-all duration-300 font-body text-on-surface placeholder:text-outline-variant" placeholder="Descrizione (opzionale)" type="text"/>
|
||||
<span class="absolute right-5 top-1/2 -translate-y-1/2 material-symbols-outlined text-outline-variant group-focus-within:text-primary transition-colors">edit_note</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Primary Action (Using specific hex requested #4CAF50 translated to closest branding logic) -->
|
||||
<button class="w-full h-16 bg-[#4CAF50] hover:opacity-90 active:scale-[0.98] transition-all duration-300 rounded-full flex items-center justify-center shadow-[0px_12px_24px_rgba(76,175,80,0.3)]">
|
||||
<span class="font-headline text-white font-bold text-lg tracking-wide">Salva</span>
|
||||
<span class="material-symbols-outlined text-white ml-2">check_circle</span>
|
||||
</button>
|
||||
<!-- Quick Suggestions (The Kinetic Grid) -->
|
||||
<div class="mt-8 w-full">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<span class="text-[10px] font-headline font-bold uppercase tracking-[0.2em] text-on-surface-variant ml-2">Suggerimenti veloci</span>
|
||||
</div>
|
||||
<div class="grid grid-cols-3 gap-3">
|
||||
<button class="py-3 px-2 bg-surface-container-low hover:bg-primary-container/30 rounded-xl transition-colors flex flex-col items-center">
|
||||
<span class="font-headline font-bold text-on-surface text-sm">150</span>
|
||||
<span class="text-[10px] font-body text-on-surface-variant">Spuntino</span>
|
||||
</button>
|
||||
<button class="py-3 px-2 bg-surface-container-low hover:bg-primary-container/30 rounded-xl transition-colors flex flex-col items-center">
|
||||
<span class="font-headline font-bold text-on-surface text-sm">450</span>
|
||||
<span class="text-[10px] font-body text-on-surface-variant">Pranzo</span>
|
||||
</button>
|
||||
<button class="py-3 px-2 bg-surface-container-low hover:bg-primary-container/30 rounded-xl transition-colors flex flex-col items-center">
|
||||
<span class="font-headline font-bold text-on-surface text-sm">600</span>
|
||||
<span class="text-[10px] font-body text-on-surface-variant">Cena</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Surface Decoration (Kinetic Editorial) -->
|
||||
<div class="absolute -bottom-20 -left-20 w-48 h-48 bg-primary/5 rounded-full blur-3xl"></div>
|
||||
<div class="absolute top-20 -right-20 w-48 h-48 bg-secondary-container/10 rounded-full blur-3xl"></div>
|
||||
</div>
|
||||
<!-- Background Image Layer (Contextual) -->
|
||||
<div class="fixed inset-0 -z-10 overflow-hidden">
|
||||
<img alt="Healthy lifestyle background" class="w-full h-full object-cover opacity-20 grayscale" data-alt="overhead shot of a healthy vibrant salad bowl with green vegetables and seeds in a professional editorial food photography style" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCMR0GVR1_hzjXrt5maXBXQ2w6xTD2gcBIFGVQDuK--44EQbdfOr4DvTLYCi6rMFHX8l-TopvBArPMqRaSTu59JU-c6iIcVIS_cioe7To6B6m21-uPLhn4Of8vyRSoOkohJwIxUfG2jGJfBJ4HMitFMewEgCiW5MFG-X6Y5soOFk4daRMkkSz5S6pGTZp1igGcT_PNRuXv2OX-GJCy01Kd3hQY16vgmwVSToNrXLxd0_jbd0pOLA96Ei8T8gO94_8UOBejzcWK7z4k"/>
|
||||
</div>
|
||||
</body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 154 KiB |
@@ -0,0 +1,187 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="it"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Lexend:wght@400;500;700;800&family=Plus_Jakarta_Sans:wght@400;500;600&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"inverse-on-surface": "#9c9d9d",
|
||||
"on-tertiary-container": "#690002",
|
||||
"on-primary-container": "#005e17",
|
||||
"surface-variant": "#dbdddd",
|
||||
"surface": "#f6f6f6",
|
||||
"on-secondary-container": "#862400",
|
||||
"error-container": "#f95630",
|
||||
"on-surface": "#2d2f2f",
|
||||
"primary-fixed-dim": "#83e881",
|
||||
"on-secondary": "#ffefeb",
|
||||
"on-surface-variant": "#5a5c5c",
|
||||
"primary": "#006b1b",
|
||||
"inverse-surface": "#0c0f0f",
|
||||
"inverse-primary": "#91f78e",
|
||||
"surface-tint": "#006b1b",
|
||||
"surface-bright": "#f6f6f6",
|
||||
"on-tertiary-fixed": "#3a0001",
|
||||
"tertiary": "#b71211",
|
||||
"tertiary-dim": "#a40007",
|
||||
"primary-fixed": "#91f78e",
|
||||
"secondary-dim": "#952800",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"error": "#b02500",
|
||||
"on-background": "#2d2f2f",
|
||||
"on-error-container": "#520c00",
|
||||
"on-tertiary": "#ffefed",
|
||||
"surface-container-low": "#f0f1f1",
|
||||
"surface-container-highest": "#dbdddd",
|
||||
"tertiary-fixed": "#ff9385",
|
||||
"on-secondary-fixed-variant": "#972900",
|
||||
"surface-dim": "#d3d5d5",
|
||||
"on-secondary-fixed": "#651900",
|
||||
"on-error": "#ffefec",
|
||||
"secondary-container": "#ffc4b3",
|
||||
"surface-container": "#e7e8e8",
|
||||
"secondary": "#a83206",
|
||||
"outline": "#767777",
|
||||
"primary-container": "#91f78e",
|
||||
"on-primary": "#d1ffc8",
|
||||
"on-tertiary-fixed-variant": "#7a0003",
|
||||
"outline-variant": "#acadad",
|
||||
"background": "#f6f6f6",
|
||||
"secondary-fixed": "#ffc4b3",
|
||||
"on-primary-fixed-variant": "#00691a",
|
||||
"primary-dim": "#005d16",
|
||||
"surface-container-high": "#e1e3e3",
|
||||
"tertiary-container": "#ff9385",
|
||||
"tertiary-fixed-dim": "#ff7c6c",
|
||||
"on-primary-fixed": "#00480f",
|
||||
"secondary-fixed-dim": "#ffb19a",
|
||||
"error-dim": "#b92902"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline": ["Lexend"],
|
||||
"body": ["Plus Jakarta Sans"],
|
||||
"label": ["Plus Jakarta Sans"]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.editorial-shadow {
|
||||
box-shadow: 0px 12px 32px rgba(0, 107, 27, 0.08);
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface font-body text-on-surface">
|
||||
<!-- Background Content (Simulated Home Screen) -->
|
||||
<div class="fixed inset-0 overflow-hidden opacity-40 grayscale pointer-events-none">
|
||||
<!-- TopAppBar Placeholder -->
|
||||
<header class="fixed top-0 w-full flex justify-between items-center px-6 h-16 bg-white/80 backdrop-blur-xl z-10">
|
||||
<h1 class="text-xl font-headline font-bold tracking-tight text-primary">Precision Vitality</h1>
|
||||
<div class="w-10 h-10 rounded-full bg-surface-container-high flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-outline">person</span>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Main Content Placeholder -->
|
||||
<main class="pt-20 px-6 space-y-8">
|
||||
<div class="space-y-2">
|
||||
<p class="text-label-md font-medium text-on-surface-variant">Oggi, 24 Maggio</p>
|
||||
<h2 class="text-[3.5rem] font-headline font-bold leading-tight text-primary">1,842</h2>
|
||||
<p class="text-on-surface-variant font-medium">kcal rimanenti</p>
|
||||
</div>
|
||||
<!-- Bento Grid Simulation -->
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="col-span-2 h-48 bg-surface-container-low rounded-xl p-6 flex flex-col justify-end">
|
||||
<div class="w-full h-3 bg-surface-container-highest rounded-full overflow-hidden">
|
||||
<div class="w-[65%] h-full bg-gradient-to-r from-primary-fixed to-primary"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="aspect-square bg-surface-container-low rounded-xl p-4"></div>
|
||||
<div class="aspect-square bg-surface-container-low rounded-xl p-4"></div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<!-- Modal Backdrop -->
|
||||
<div class="fixed inset-0 bg-inverse-surface/40 backdrop-blur-sm z-[60]"></div>
|
||||
<!-- Bottom Sheet -->
|
||||
<div class="fixed bottom-0 left-0 w-full z-[70] transition-transform duration-500 ease-out">
|
||||
<div class="bg-surface-container-lowest rounded-t-[2.5rem] p-8 editorial-shadow max-w-2xl mx-auto">
|
||||
<!-- Handle -->
|
||||
<div class="w-12 h-1.5 bg-surface-container-highest rounded-full mx-auto mb-8"></div>
|
||||
<!-- Header -->
|
||||
<div class="flex justify-between items-center mb-10">
|
||||
<h2 class="text-2xl font-headline font-bold text-on-surface">Come vuoi registrare?</h2>
|
||||
<button class="w-10 h-10 rounded-full bg-surface-container-low flex items-center justify-center hover:bg-surface-container hover:scale-95 transition-all">
|
||||
<span class="material-symbols-outlined text-on-surface-variant">close</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Options Stack -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 pb-8">
|
||||
<!-- Option 1: Manual Input -->
|
||||
<button class="group relative flex flex-col items-center justify-center p-8 rounded-[2rem] bg-surface-container-lowest transition-all hover:bg-primary-container/10 border-2 border-primary-fixed-dim">
|
||||
<div class="w-16 h-16 rounded-2xl bg-primary/10 flex items-center justify-center mb-4 transition-transform group-hover:scale-110">
|
||||
<span class="material-symbols-outlined text-primary text-4xl" data-icon="keyboard">keyboard</span>
|
||||
</div>
|
||||
<span class="font-headline font-bold text-lg text-on-surface">Inserisci kcal</span>
|
||||
<span class="text-sm text-on-surface-variant mt-2 font-medium">Input manuale veloce</span>
|
||||
</button>
|
||||
<!-- Option 2: Voice/AI Description -->
|
||||
<button class="group relative flex flex-col items-center justify-center p-8 rounded-[2rem] bg-surface-container-lowest transition-all hover:bg-secondary-container/10 border-2 border-secondary-fixed">
|
||||
<div class="w-16 h-16 rounded-2xl bg-secondary-container/30 flex items-center justify-center mb-4 transition-transform group-hover:scale-110">
|
||||
<span class="material-symbols-outlined text-secondary text-4xl" data-icon="mic">mic</span>
|
||||
</div>
|
||||
<span class="font-headline font-bold text-lg text-on-surface">Descrivi il pasto</span>
|
||||
<span class="text-sm text-on-surface-variant mt-2 font-medium">Usa l'intelligenza artificiale</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Contextual Tip -->
|
||||
<div class="bg-surface-container-low rounded-2xl p-4 flex items-start gap-4 mb-4">
|
||||
<span class="material-symbols-outlined text-primary" data-icon="lightbulb" style="font-variation-settings: 'FILL' 1;">lightbulb</span>
|
||||
<p class="text-sm text-on-surface-variant leading-relaxed">
|
||||
Puoi dire cose come <span class="font-bold text-on-surface italic">"Un'insalata russa e due bicchieri d'acqua"</span> per una stima precisa.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Bottom Navigation Shell (Consistent with Shared Components) -->
|
||||
<nav class="fixed bottom-0 left-0 w-full z-50 flex justify-around items-center px-4 pb-6 pt-2 bg-white/80 dark:bg-zinc-900/80 backdrop-blur-xl rounded-t-[2rem] shadow-[0px_-12px_32px_rgba(0,107,27,0.08)]">
|
||||
<div class="flex flex-col items-center justify-center text-zinc-400 dark:text-zinc-500 px-5 py-2 hover:text-green-600 transition-opacity">
|
||||
<span class="material-symbols-outlined" data-icon="event_note">event_note</span>
|
||||
<span class="font-headline text-[10px] font-bold uppercase tracking-widest mt-1">Journal</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center justify-center bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-200 rounded-2xl px-5 py-2 scale-90">
|
||||
<span class="material-symbols-outlined" data-icon="bar_chart">bar_chart</span>
|
||||
<span class="font-headline text-[10px] font-bold uppercase tracking-widest mt-1">Stats</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center justify-center text-zinc-400 dark:text-zinc-500 px-5 py-2 hover:text-green-600 transition-opacity">
|
||||
<span class="material-symbols-outlined" data-icon="restaurant_menu">restaurant_menu</span>
|
||||
<span class="font-headline text-[10px] font-bold uppercase tracking-widest mt-1">Plans</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center justify-center text-zinc-400 dark:text-zinc-500 px-5 py-2 hover:text-green-600 transition-opacity">
|
||||
<span class="material-symbols-outlined" data-icon="person">person</span>
|
||||
<span class="font-headline text-[10px] font-bold uppercase tracking-widest mt-1">Profile</span>
|
||||
</div>
|
||||
</nav>
|
||||
</body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 112 KiB |
@@ -0,0 +1,246 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="it"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Lexend:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"inverse-on-surface": "#9c9d9d",
|
||||
"on-tertiary-container": "#690002",
|
||||
"on-primary-container": "#005e17",
|
||||
"surface-variant": "#dbdddd",
|
||||
"surface": "#f6f6f6",
|
||||
"on-secondary-container": "#862400",
|
||||
"error-container": "#f95630",
|
||||
"on-surface": "#2d2f2f",
|
||||
"primary-fixed-dim": "#83e881",
|
||||
"on-secondary": "#ffefeb",
|
||||
"on-surface-variant": "#5a5c5c",
|
||||
"primary": "#006b1b",
|
||||
"inverse-surface": "#0c0f0f",
|
||||
"inverse-primary": "#91f78e",
|
||||
"surface-tint": "#006b1b",
|
||||
"surface-bright": "#f6f6f6",
|
||||
"on-tertiary-fixed": "#3a0001",
|
||||
"tertiary": "#b71211",
|
||||
"tertiary-dim": "#a40007",
|
||||
"primary-fixed": "#91f78e",
|
||||
"secondary-dim": "#952800",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"error": "#b02500",
|
||||
"on-background": "#2d2f2f",
|
||||
"on-error-container": "#520c00",
|
||||
"on-tertiary": "#ffefed",
|
||||
"surface-container-low": "#f0f1f1",
|
||||
"surface-container-highest": "#dbdddd",
|
||||
"tertiary-fixed": "#ff9385",
|
||||
"on-secondary-fixed-variant": "#972900",
|
||||
"surface-dim": "#d3d5d5",
|
||||
"on-secondary-fixed": "#651900",
|
||||
"on-error": "#ffefec",
|
||||
"secondary-container": "#ffc4b3",
|
||||
"surface-container": "#e7e8e8",
|
||||
"secondary": "#a83206",
|
||||
"outline": "#767777",
|
||||
"primary-container": "#91f78e",
|
||||
"on-primary": "#d1ffc8",
|
||||
"on-tertiary-fixed-variant": "#7a0003",
|
||||
"outline-variant": "#acadad",
|
||||
"background": "#f6f6f6",
|
||||
"secondary-fixed": "#ffc4b3",
|
||||
"on-primary-fixed-variant": "#00691a",
|
||||
"primary-dim": "#005d16",
|
||||
"surface-container-high": "#e1e3e3",
|
||||
"tertiary-container": "#ff9385",
|
||||
"tertiary-fixed-dim": "#ff7c6c",
|
||||
"on-primary-fixed": "#00480f",
|
||||
"secondary-fixed-dim": "#ffb19a",
|
||||
"error-dim": "#b92902"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline": ["Lexend"],
|
||||
"body": ["Plus Jakarta Sans"],
|
||||
"label": ["Plus Jakarta Sans"]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
vertical-align: middle;
|
||||
}
|
||||
body { font-family: 'Plus Jakarta Sans', sans-serif; background-color: #f6f6f6; }
|
||||
.font-headline { font-family: 'Lexend', sans-serif; }
|
||||
</style>
|
||||
<style>
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface text-on-surface min-h-screen pb-32">
|
||||
<!-- TopAppBar -->
|
||||
<header class="fixed top-0 w-full flex justify-between items-center px-6 h-16 bg-white/80 dark:bg-zinc-900/80 backdrop-blur-xl z-50">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 rounded-full overflow-hidden bg-surface-container">
|
||||
<img alt="Profile" class="w-full h-full object-cover" data-alt="Close-up portrait of a professional man with friendly expression in soft daylight studio setting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCqYGyjHm0Gmv8NEA7LgUR8XQneI4uQXOH9v_daWUsV-pjPrK6L3DNSQOfM1vDqqm25brto_p4nxzx20T5Gc7Lq5fZDEEPQ-Ge4HJ9vPT5wjTwf_KNLUuSyROh1y_rc8z6dFins05ib88sww_vnWCwbQr7QodSemo-9Ay73AFQFO2LRhwVIx2pLUphWO1BrdlPg2HZv0em04YJUU-GyXSW4cwCls0GRh-UXeVAIN7ojXqFNom4TPKIFlTijPba0Zb21TcEXYnukhOg"/>
|
||||
</div>
|
||||
<span class="text-xl font-headline font-bold tracking-tight text-green-700 dark:text-green-500">Precision Vitality</span>
|
||||
</div>
|
||||
<button class="text-zinc-500 dark:text-zinc-400 hover:opacity-80 transition-opacity active:scale-95 duration-200 ease-out">
|
||||
<span class="material-symbols-outlined" data-icon="settings">settings</span>
|
||||
</button>
|
||||
</header>
|
||||
<main class="pt-24 px-6 max-w-2xl mx-auto">
|
||||
<!-- Tab Selector: Kinetic Editorial Style -->
|
||||
<div class="flex p-1 bg-surface-container-low rounded-full mb-8">
|
||||
<button class="flex-1 py-3 px-6 rounded-full text-sm font-label font-medium transition-all text-on-surface-variant hover:text-on-surface">
|
||||
Oggi
|
||||
</button>
|
||||
<button class="flex-1 py-3 px-6 rounded-full text-sm font-label font-bold transition-all bg-surface-container-lowest text-primary shadow-sm">
|
||||
Settimana
|
||||
</button>
|
||||
</div>
|
||||
<!-- Temporal Navigation -->
|
||||
<div class="flex items-center justify-between mb-10 px-2">
|
||||
<button class="w-10 h-10 flex items-center justify-center rounded-full bg-surface-container-low text-on-surface-variant hover:bg-surface-container-high transition-colors">
|
||||
<span class="material-symbols-outlined">chevron_left</span>
|
||||
</button>
|
||||
<div class="text-center">
|
||||
<p class="text-[10px] font-headline font-bold uppercase tracking-[0.2em] text-on-surface-variant mb-1">Periodo Corrente</p>
|
||||
<h2 class="text-xl font-headline font-bold text-on-surface">14–20 apr</h2>
|
||||
</div>
|
||||
<button class="w-10 h-10 flex items-center justify-center rounded-full bg-surface-container-low text-on-surface-variant hover:bg-surface-container-high transition-colors">
|
||||
<span class="material-symbols-outlined">chevron_right</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Chart Section: The Kinetic Editor Grid -->
|
||||
<div class="bg-surface-container-lowest rounded-[2rem] p-8 mb-8">
|
||||
<div class="flex justify-between items-end h-64 gap-3 mb-6">
|
||||
<!-- Monday (Green - Under Goal) -->
|
||||
<div class="flex-1 flex flex-col items-center gap-3">
|
||||
<div class="relative w-full bg-surface-container-low rounded-full flex flex-col justify-end h-full overflow-hidden">
|
||||
<div class="w-full bg-gradient-to-t from-primary-dim to-primary rounded-full transition-all" style="height: 75%;"></div>
|
||||
</div>
|
||||
<span class="text-[10px] font-headline font-bold text-on-surface-variant">LUN</span>
|
||||
</div>
|
||||
<!-- Tuesday (Green - Under Goal) -->
|
||||
<div class="flex-1 flex flex-col items-center gap-3">
|
||||
<div class="relative w-full bg-surface-container-low rounded-full flex flex-col justify-end h-full overflow-hidden">
|
||||
<div class="w-full bg-gradient-to-t from-primary-dim to-primary rounded-full transition-all" style="height: 85%;"></div>
|
||||
</div>
|
||||
<span class="text-[10px] font-headline font-bold text-on-surface-variant">MAR</span>
|
||||
</div>
|
||||
<!-- Wednesday (Red - Over Goal) -->
|
||||
<div class="flex-1 flex flex-col items-center gap-3">
|
||||
<div class="relative w-full bg-surface-container-low rounded-full flex flex-col justify-end h-full overflow-hidden">
|
||||
<div class="w-full bg-gradient-to-t from-error-dim to-error rounded-full transition-all" style="height: 100%;"></div>
|
||||
<div class="absolute top-2 w-full flex justify-center">
|
||||
<span class="material-symbols-outlined text-white text-xs" style="font-size: 14px;">warning</span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-[10px] font-headline font-bold text-error">MER</span>
|
||||
</div>
|
||||
<!-- Thursday (Green - Under Goal) -->
|
||||
<div class="flex-1 flex flex-col items-center gap-3">
|
||||
<div class="relative w-full bg-surface-container-low rounded-full flex flex-col justify-end h-full overflow-hidden">
|
||||
<div class="w-full bg-gradient-to-t from-primary-dim to-primary rounded-full transition-all" style="height: 60%;"></div>
|
||||
</div>
|
||||
<span class="text-[10px] font-headline font-bold text-on-surface-variant">GIO</span>
|
||||
</div>
|
||||
<!-- Friday (Green - Under Goal) -->
|
||||
<div class="flex-1 flex flex-col items-center gap-3">
|
||||
<div class="relative w-full bg-surface-container-low rounded-full flex flex-col justify-end h-full overflow-hidden">
|
||||
<div class="w-full bg-gradient-to-t from-primary-dim to-primary rounded-full transition-all" style="height: 90%;"></div>
|
||||
</div>
|
||||
<span class="text-[10px] font-headline font-bold text-on-surface-variant">VEN</span>
|
||||
</div>
|
||||
<!-- Saturday (Red - Over Goal) -->
|
||||
<div class="flex-1 flex flex-col items-center gap-3">
|
||||
<div class="relative w-full bg-surface-container-low rounded-full flex flex-col justify-end h-full overflow-hidden">
|
||||
<div class="w-full bg-gradient-to-t from-error-dim to-error rounded-full transition-all" style="height: 98%;"></div>
|
||||
</div>
|
||||
<span class="text-[10px] font-headline font-bold text-error">SAB</span>
|
||||
</div>
|
||||
<!-- Sunday (Green - Under Goal) -->
|
||||
<div class="flex-1 flex flex-col items-center gap-3">
|
||||
<div class="relative w-full bg-surface-container-low rounded-full flex flex-col justify-end h-full overflow-hidden">
|
||||
<div class="w-full bg-gradient-to-t from-primary-dim to-primary rounded-full transition-all" style="height: 40%;"></div>
|
||||
</div>
|
||||
<span class="text-[10px] font-headline font-bold text-on-surface-variant">DOM</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between pt-6 border-t border-surface-container">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-3 h-3 rounded-full bg-primary"></div>
|
||||
<span class="text-xs font-label text-on-surface-variant">In target</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-3 h-3 rounded-full bg-error"></div>
|
||||
<span class="text-xs font-label text-on-surface-variant">Eccesso</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Weekly Summary Card: Editorial Style -->
|
||||
<div class="relative overflow-hidden bg-surface-container-low rounded-[2rem] p-8">
|
||||
<div class="absolute -right-12 -top-12 w-48 h-48 bg-primary/5 rounded-full blur-3xl"></div>
|
||||
<div class="relative z-10">
|
||||
<h3 class="text-[10px] font-headline font-bold uppercase tracking-[0.2em] text-on-surface-variant mb-4">Riepilogo Prestazioni</h3>
|
||||
<div class="flex items-baseline gap-2 mb-2">
|
||||
<span class="text-4xl font-headline font-extrabold text-primary">1850</span>
|
||||
<span class="text-lg font-headline font-bold text-on-surface">kcal/giorno</span>
|
||||
</div>
|
||||
<p class="text-sm font-label text-on-surface-variant leading-relaxed max-w-[200px]">
|
||||
Media settimanale: <span class="text-on-surface font-bold">1850 kcal/giorno</span>. Ottimo lavoro, sei costante!
|
||||
</p>
|
||||
<div class="mt-8 flex gap-4">
|
||||
<div class="flex-1 p-4 bg-surface-container-lowest rounded-2xl">
|
||||
<span class="material-symbols-outlined text-primary mb-2">trending_down</span>
|
||||
<p class="text-[10px] font-headline font-bold uppercase tracking-widest text-on-surface-variant">-12%</p>
|
||||
<p class="text-xs font-label text-on-surface">vs scorsa sett.</p>
|
||||
</div>
|
||||
<div class="flex-1 p-4 bg-surface-container-lowest rounded-2xl">
|
||||
<span class="material-symbols-outlined text-secondary mb-2" style="font-variation-settings: 'FILL' 1;">bolt</span>
|
||||
<p class="text-[10px] font-headline font-bold uppercase tracking-widest text-on-surface-variant">5/7</p>
|
||||
<p class="text-xs font-label text-on-surface">Giorni in target</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- BottomNavBar -->
|
||||
<nav class="fixed bottom-0 left-0 w-full z-50 flex justify-around items-center px-4 pb-6 pt-2 bg-white/80 dark:bg-zinc-900/80 backdrop-blur-xl rounded-t-[2rem] shadow-[0px_-12px_32px_rgba(0,107,27,0.08)]">
|
||||
<a class="flex flex-col items-center justify-center text-zinc-400 dark:text-zinc-500 px-5 py-2 hover:text-green-600 transition-opacity" href="#">
|
||||
<span class="material-symbols-outlined mb-1" data-icon="event_note">event_note</span>
|
||||
<span class="font-headline text-[10px] font-bold uppercase tracking-widest">Journal</span>
|
||||
</a>
|
||||
<a class="flex flex-col items-center justify-center bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-200 rounded-2xl px-5 py-2 scale-90 transition-transform duration-300" href="#">
|
||||
<span class="material-symbols-outlined mb-1" data-icon="bar_chart" style="font-variation-settings: 'FILL' 1;">bar_chart</span>
|
||||
<span class="font-headline text-[10px] font-bold uppercase tracking-widest">Stats</span>
|
||||
</a>
|
||||
<a class="flex flex-col items-center justify-center text-zinc-400 dark:text-zinc-500 px-5 py-2 hover:text-green-600 transition-opacity" href="#">
|
||||
<span class="material-symbols-outlined mb-1" data-icon="restaurant_menu">restaurant_menu</span>
|
||||
<span class="font-headline text-[10px] font-bold uppercase tracking-widest">Plans</span>
|
||||
</a>
|
||||
<a class="flex flex-col items-center justify-center text-zinc-400 dark:text-zinc-500 px-5 py-2 hover:text-green-600 transition-opacity" href="#">
|
||||
<span class="material-symbols-outlined mb-1" data-icon="person">person</span>
|
||||
<span class="font-headline text-[10px] font-bold uppercase tracking-widest">Profile</span>
|
||||
</a>
|
||||
</nav>
|
||||
</body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 106 KiB |
@@ -0,0 +1,76 @@
|
||||
# Design System Document: Precision Vitality
|
||||
|
||||
## 1. Overview & Creative North Star
|
||||
The "Creative North Star" for this design system is **The Kinetic Editor**.
|
||||
|
||||
While many fitness apps feel like static spreadsheets, this system treats health data as a living, breathing editorial story. We move beyond the "standard tracker" by utilizing high-contrast typography scales, intentional asymmetry, and a sophisticated layering system. The goal is to make the user feel like they are interacting with a premium digital magazine that reacts to their progress. By breaking the grid with overlapping elements and prioritizing tonal depth over rigid borders, we create an environment that feels energetic yet remarkably clean.
|
||||
|
||||
## 2. Color Strategy: Tonal Vitality
|
||||
Our palette utilizes the Material Design convention to ensure a "Health Green" core that feels professional rather than radioactive.
|
||||
|
||||
### The "No-Line" Rule
|
||||
**Borders are prohibited.** You must never use a 1px solid border to define sections. Boundaries are created through:
|
||||
* **Background Shifts:** Placing a `surface-container-lowest` card against a `surface` background.
|
||||
* **Tonal Transitions:** Using `surface-container-low` for secondary groupings to create natural separation.
|
||||
|
||||
### Surface Hierarchy & Nesting
|
||||
Treat the UI as a series of physical layers—like stacked sheets of fine paper.
|
||||
* **Level 0 (Base):** `surface` (#f6f6f6) – The canvas.
|
||||
* **Level 1 (Sections):** `surface-container-low` (#f0f1f1) – For grouping related modules.
|
||||
* **Level 2 (Active Cards):** `surface-container-lowest` (#ffffff) – The highest priority interactive elements.
|
||||
|
||||
### The "Glass & Gradient" Rule
|
||||
To inject "visual soul," use subtle gradients.
|
||||
* **Primary Action:** Transition from `primary` (#006b1b) to `primary-dim` (#005d16) at a 135° angle.
|
||||
* **Floating Elements:** Apply Glassmorphism to top navigation bars or floating action buttons using `surface` at 80% opacity with a `24px` backdrop-blur.
|
||||
|
||||
## 3. Typography: Editorial Impact
|
||||
We pair the geometric precision of **Lexend** for data with the humanist readability of **Plus Jakarta Sans** for interface elements.
|
||||
|
||||
* **Main Kcal Display (`display-lg`):** Lexend, 3.5rem (56px), Bold. Use `primary` color. This is the "Hero" of the screen.
|
||||
* **Section Headlines (`headline-sm`):** Lexend, 1.5rem. Use `on-surface`.
|
||||
* **Primary Labels (`label-md`):** Plus Jakarta Sans, 0.75rem, Medium. Use `on-surface-variant` for metadata.
|
||||
* **Body Copy (`body-lg`):** Plus Jakarta Sans, 1rem, Regular. Use `on-surface`.
|
||||
|
||||
The high contrast between the massive `display-lg` calorie counts and the tight `label-sm` metadata creates an "Editorial" hierarchy that guides the eye instantly to what matters.
|
||||
|
||||
## 4. Elevation & Depth: Tonal Layering
|
||||
Depth is achieved through "stacking" rather than traditional drop shadows.
|
||||
|
||||
* **The Layering Principle:** Avoid shadows on static cards. Instead, place a `surface-container-lowest` card on a `surface-container` background. The subtle 2-3% shift in hex value provides a sophisticated, modern lift.
|
||||
* **Ambient Shadows:** For floating elements (e.g., a "Log Food" button), use a 15% opacity `primary` color shadow: `0px 12px 32px rgba(0, 107, 27, 0.15)`. This mimics natural light reflecting off a colored surface.
|
||||
* **The Ghost Border Fallback:** If accessibility requires a stroke, use `outline-variant` at 15% opacity. Never use 100% opaque lines.
|
||||
|
||||
## 5. Components: The Kinetic Suite
|
||||
|
||||
### Progress Bars (The Core Vital)
|
||||
* **Style:** Horizontal, `12px` height, `full` roundedness.
|
||||
* **Container:** `surface-container-highest`.
|
||||
* **Fill:** A linear gradient from `primary-fixed` to `primary`.
|
||||
* **Animation:** Always use a "Spring" ease-out (0.6s) to make progress feel energetic.
|
||||
|
||||
### Cards & Modules
|
||||
* **Rule:** Forbid divider lines. Use `1.5rem (xl)` corner radius for main dashboard cards and `1rem (lg)` for nested items.
|
||||
* **Spacing:** Use `24px` vertical padding to provide significant breathing room.
|
||||
|
||||
### Buttons
|
||||
* **Primary:** `primary` background, `on-primary` text. No shadow. `full` roundedness.
|
||||
* **Secondary (Energy):** `secondary-container` background, `on-secondary-container` text. Use for "Add Calories" or "High Energy" actions.
|
||||
|
||||
### Input Fields
|
||||
* **Style:** Minimalist. No bottom line. Use a `surface-container-low` background with a `0.5rem (sm)` radius. On focus, transition background to `surface-container-highest`.
|
||||
|
||||
### Contextual Components: "The Macro-Donut"
|
||||
* Use a large-scale, thin-stroke (4px) ring for Macronutrient breakdowns. Overlap the donut slightly with the `display-lg` calorie title to create a sense of depth and custom-fit design.
|
||||
|
||||
## 6. Do's and Don'ts
|
||||
|
||||
### Do:
|
||||
* **Do** use asymmetrical margins. For example, give the "Main Kcal" title a larger left-hand gutter (32px) than the body text (16px) to create a rhythmic, magazine-style layout.
|
||||
* **Do** use `secondary` (Energy Orange) sparingly for high-motivation moments only (e.g., reaching a streak).
|
||||
* **Do** prioritize "Breathing Room." If a screen feels crowded, increase the `surface-container` spacing rather than adding lines.
|
||||
|
||||
### Don't:
|
||||
* **Don't** use Material Icons in their "Filled" state if they feel too heavy. Use "Outlined" or "Two-Tone" with `outline` color to maintain the "Clean" mood.
|
||||
* **Don't** ever use #000000 for text. Always use `on-background` or `on-surface` (#2d2f2f) to keep the look premium and soft.
|
||||
* **Don't** use standard 4px "Card Shadows." If it doesn't look like it's floating in a real-world space, don't shadow it.
|
||||
Reference in New Issue
Block a user