Repository navigation
Expand file tree
/
Copy pathindex.html
More file actions
177 lines (165 loc) · 23.3 KB
/
Copy pathindex.html
File metadata and controls
177 lines (165 loc) · 23.3 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
<meta name="theme-color" content="#111827">
<meta name="referrer" content="strict-origin-when-cross-origin">
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://cdn.jsdelivr.net; script-src-attr 'none'; connect-src 'self' https://azsmxatdvhpjdziiehoi.supabase.co wss://azsmxatdvhpjdziiehoi.supabase.co; img-src 'self' data: https:; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src https://fonts.gstatic.com; manifest-src 'self'; object-src 'none'; base-uri 'none'; form-action 'self'; upgrade-insecure-requests">
<title>Jeferson Fit</title>
<link rel="manifest" href="manifest.webmanifest">
<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2.112.4/dist/umd/supabase.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700&display=swap');
:root{--bg:#f8f9ff;--card:#fff;--text:#121c2a;--muted:#65706b;--primary:#065f46;--primary-dark:#004532;--primary-soft:#e4f3ed;--blue:#1260d6;--blue-soft:#e7f0ff;--amber:#8c3b00;--amber-soft:#ffede3;--yellow:#b98500;--yellow-soft:#fff5cf;--line:#e6ece9;--shadow:0 12px 34px rgba(18,28,42,.065);--radius:24px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:'Hanken Grotesk',system-ui,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}button,input,select,textarea{font:inherit}button{cursor:pointer}.hidden{display:none!important}
.material-symbols-outlined{font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24}
.app-shell{min-height:100vh;padding-bottom:88px}.page{max-width:760px;margin:0 auto;padding:28px 20px 44px}.app-header{position:sticky;top:0;z-index:30;background:rgba(248,249,255,.9);backdrop-filter:blur(18px);border-bottom:1px solid rgba(190,201,194,.24)}.header-inner{max-width:760px;margin:auto;height:72px;padding:0 20px;display:flex;align-items:center;justify-content:space-between}.brandmark{display:flex;align-items:center;gap:10px}.logo-dot{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--primary);color:#fff;box-shadow:0 6px 18px rgba(6,95,70,.2)}.logo-dot span{font-size:18px}.brandname{font-weight:700;font-size:15px;letter-spacing:-.02em}.page-label{font-size:15px;font-weight:700;letter-spacing:.12em}.profile-area{display:flex;align-items:center;gap:12px}.avatar{width:42px;height:42px;border-radius:50%;object-fit:cover;border:3px solid #fff;box-shadow:0 3px 12px rgba(18,28,42,.15)}.profile-meta{display:none}.profile-menu{position:relative}.logout-mini{border:0;background:transparent;color:var(--muted);font-size:12px;padding:0}
.bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:40;background:rgba(248,249,255,.94);backdrop-filter:blur(18px);border-top:1px solid rgba(190,201,194,.32);padding-bottom:max(env(safe-area-inset-bottom),6px)}.bottom-nav-inner{max-width:760px;margin:auto;height:68px;display:grid;grid-template-columns:repeat(4,1fr)}.bottom-nav button{border:0;background:transparent;color:#4f5b56;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:12px}.bottom-nav button span{font-size:22px}.bottom-nav button.active{color:var(--primary);font-weight:700}
.greeting{margin:10px 0 34px}.greeting h1{font-size:30px;line-height:1.2;margin:0 0 8px;font-weight:600;letter-spacing:-.025em}.greeting p{margin:0;color:var(--muted);font-size:16px}.section{margin:0 0 34px}.section-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.section-heading h2{margin:0;font-size:23px;font-weight:600;letter-spacing:-.02em}.section-heading .link-btn{border:0;background:transparent;color:var(--primary);font-weight:600;display:flex;align-items:center;gap:5px}
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;border:1px solid rgba(230,236,233,.65)}.metric-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.calorie-card{grid-column:1/-1}.metric-label{display:flex;align-items:center;gap:8px;color:#3f4944;font-weight:600}.metric-label .symbol{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary)}.metric-value{font-size:20px;font-weight:700}.metric-top{display:flex;justify-content:space-between;align-items:center;gap:12px}.progress-track{height:12px;background:#e7edf8;border-radius:999px;overflow:hidden;margin-top:18px}.progress-track>span{display:block;height:100%;border-radius:999px;background:var(--primary);transition:width .35s ease}.progress-track.water>span{background:var(--blue)}
.protein-card,.hunger-card{min-height:170px;display:flex;flex-direction:column}.protein-ring{--p:0;width:92px;height:92px;margin:auto;border-radius:50%;background:conic-gradient(var(--amber) calc(var(--p)*1%),#e8edf8 0);display:grid;place-items:center;position:relative}.protein-ring:before{content:'';position:absolute;inset:9px;background:#fff;border-radius:50%}.protein-ring>div{position:relative;text-align:center}.protein-ring b{display:block;font-size:19px}.protein-ring small{color:var(--muted)}.hunger-number{font-size:24px;color:#ba1a1a;margin-top:auto}.hunger-number small{font-size:14px;color:var(--muted)}.hunger-scale{display:grid;grid-template-columns:repeat(10,1fr);gap:2px;margin-top:10px}.hunger-scale i{height:7px;border-radius:2px;background:#e7edf8}.hunger-scale i.on{background:var(--primary)}.hunger-scale i.hot{background:#ba1a1a}
.meal-list,.workout-list,.history-list,.plan-list{display:grid;gap:12px}.meal-card,.workout-card,.history-item,.plan-card{background:#fff;border-radius:22px;box-shadow:0 8px 26px rgba(18,28,42,.045);border:1px solid rgba(230,236,233,.7)}.meal-card{padding:18px}.meal-top{display:flex;align-items:center;gap:12px}.meal-icon,.history-icon{width:48px;height:48px;border-radius:14px;background:#e7efff;color:#173b75;display:grid;place-items:center;flex:0 0 auto}.meal-copy{min-width:0;display:flex;flex-direction:column;gap:2px;flex:1}.meal-copy strong{font-size:17px}.meal-copy span{font-size:14px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kcal-chip{background:#e7f0ec;color:var(--primary-dark);padding:7px 10px;border-radius:9px;font-weight:600;white-space:nowrap}.macro-row{border-top:1px solid #edf1ef;margin-top:14px;padding-top:12px;display:grid;grid-template-columns:repeat(3,1fr) auto;align-items:center}.macro-row div{text-align:center;display:flex;flex-direction:column}.macro-row small{color:var(--muted)}.macro-row b{font-size:16px}.icon-button{width:38px;height:38px;border:0;border-radius:50%;background:transparent;color:var(--primary);display:grid;place-items:center}.icon-button:hover{background:var(--primary-soft)}.danger-btn{color:#a73535}
.primary-btn,.secondary-btn{min-height:52px;border-radius:15px;font-weight:600;border:0;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:0 18px}.primary-btn{background:var(--primary);color:#fff;box-shadow:0 8px 20px rgba(6,95,70,.15)}.secondary-btn{background:transparent;color:var(--primary);border:1px solid var(--primary)}.ghost-btn{border:0;background:transparent;color:var(--primary);font-weight:600;padding:8px}.quick-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.water-card .water-value{font-size:20px;display:flex;align-items:center;gap:8px}.water-card .water-value span.material-symbols-outlined{color:var(--blue)}.water-card .quick-actions button{border:0;border-radius:14px;background:var(--blue-soft);color:var(--blue);padding:14px;font-weight:600}.workout-card{padding:16px;display:flex;align-items:center;gap:14px}.workout-icon{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:#1671e8;color:white}.workout-copy{flex:1;display:flex;flex-direction:column}.workout-copy strong{font-size:17px}.workout-copy span{color:var(--muted)}.empty-inline,.empty-state{color:var(--muted);font-size:14px}.empty-state{padding:28px;text-align:center;border:1px dashed #b9c9c1;border-radius:22px;display:flex;flex-direction:column;align-items:center;gap:7px}.empty-state span.material-symbols-outlined{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:#edf3ff;color:#43526d}.empty-state.compact{padding:18px}
.form-panel{margin-top:14px;padding:20px}.form-panel h3{margin:0 0 14px;font-size:19px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.form-grid.one{grid-template-columns:1fr}.form-grid.three{grid-template-columns:repeat(3,1fr)}input,select,textarea{width:100%;border:0;background:#f0f3f4;border-radius:13px;padding:13px 14px;color:var(--text);outline:none}input:focus,select:focus,textarea:focus{box-shadow:0 0 0 2px rgba(6,95,70,.25)}textarea{resize:vertical}.form-actions{display:flex;gap:10px;margin-top:12px}.form-actions>*{flex:1}
.progress-hero h1,.plan-hero h1,.history-hero h1{font-size:30px;margin:5px 0 6px;font-weight:600}.hero-copy{color:var(--muted);margin:0 0 26px}.summary-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}.summary-card{padding:20px}.summary-card .top{display:flex;align-items:center;gap:7px;color:#3f4944}.summary-card .big{font-size:22px;margin-top:14px}.delta{display:inline-flex;margin-top:8px;background:var(--primary-soft);color:var(--primary);border-radius:999px;padding:5px 9px;font-weight:600;font-size:13px}.chart-card{padding:20px;margin-top:20px}.chart-card canvas{display:block;width:100%;height:220px;border-radius:14px}.history-item{padding:14px;display:flex;align-items:center;gap:14px}.date-badge{width:50px;height:50px;border-radius:50%;background:#e7efff;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#41516b}.date-badge b{font-size:15px}.date-badge small{font-size:9px}.history-item>div:last-child{display:flex;flex-direction:column;gap:2px}.history-item strong{font-size:15px}.history-item span{font-size:13px;color:var(--muted)}
.goals-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.goal-calories{grid-column:1/-1;background:linear-gradient(135deg,#edf4ff,#e9f0f6)}.goal-card{position:relative;overflow:hidden}.goal-card h3{font-size:17px;margin:0;color:#3f4944}.goal-card .goal-number{font-size:23px;margin-top:12px}.goal-card.protein{border-left:6px solid #1260d6}.goal-card.carbs{border-left:6px solid #ffb793}.goal-card.fat{border-left:6px solid #efb600}.goal-card.water{border-left:6px solid #1260d6}.plan-card{padding:18px}.plan-card-head{display:flex;align-items:center;justify-content:space-between}.section-chip,.macro-chips span{display:inline-flex;border-radius:999px;padding:6px 9px;font-size:12px;font-weight:600;background:var(--primary-soft);color:var(--primary)}.plan-card h4{font-size:19px;margin:12px 0 4px}.plan-card p{color:var(--muted);margin:0 0 14px;line-height:1.45}.plan-actions{display:flex}.macro-chips{display:flex;gap:7px;flex-wrap:wrap}.macro-chips span{background:#e8edf6;color:#1b2432}.macro-chips .protein{background:#e5efff;color:#0952b8}.macro-chips .carb{background:#fff0e9;color:#a94f22}.macro-chips .fat{background:#fff5cf;color:#8e6700}
.history-icon.meal-hist{background:#e7f0ec;color:var(--primary)}.history-icon.workout-hist{background:#e7efff;color:#165ec5}.history-columns{display:grid;grid-template-columns:1fr;gap:24px}.history-group h2{font-size:19px;margin:0 0 12px}.loading-login{min-height:100vh;display:grid;place-items:center;padding:24px}.auth-card{width:min(420px,100%);text-align:center;padding:34px}.auth-logo{width:72px;height:72px;border-radius:24px;background:var(--primary);color:#fff;display:grid;place-items:center;margin:0 auto 20px;box-shadow:0 18px 40px rgba(6,95,70,.18)}.auth-card h1{font-size:32px;margin:0 0 7px}.auth-card p{color:var(--muted);margin:0 0 26px}.google-btn{background:#fff;color:#202124;border:1px solid #d9dee0}.google-g{font-weight:700;color:#4285f4;font-size:19px}
@media(min-width:700px){.page{padding-top:36px}.profile-meta{display:block}.bottom-nav{left:50%;right:auto;transform:translateX(-50%);width:min(760px,100%);border-radius:22px 22px 0 0}.metric-grid{grid-template-columns:2fr 1fr 1fr}.calorie-card{grid-column:auto}.form-grid.four{grid-template-columns:repeat(4,1fr)}.history-columns{grid-template-columns:1fr 1fr}.page{max-width:900px}.header-inner,.bottom-nav-inner{max-width:900px}}
@media(max-width:520px){.form-grid,.form-grid.three{grid-template-columns:1fr}.form-actions{flex-direction:column}.summary-two,.goals-grid{grid-template-columns:1fr}.goal-calories{grid-column:auto}.metric-grid{grid-template-columns:1fr 1fr}.calorie-card{grid-column:1/-1}.page{padding-left:18px;padding-right:18px}}
/* v9 compatibility layer for the functional v8 markup */
.wrap{max-width:900px;margin:auto;padding:20px}.brand{display:flex;align-items:center;justify-content:space-between;gap:16px}
header{position:sticky;top:0;z-index:30;background:rgba(248,249,255,.92);backdrop-filter:blur(18px);border-bottom:1px solid rgba(190,201,194,.28)}
header h1{font-size:20px;margin:0;color:var(--primary)}nav{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px}
nav button{border:0;background:transparent;color:#4f5b56;padding:11px 8px;border-radius:14px;font-weight:600}nav button.active{background:var(--primary);color:#fff}
main{padding-bottom:90px}.targets{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:18px}.targets .card{margin:0;padding:18px}
.metric{font-size:25px;font-weight:700;margin-top:9px}.label{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.08em}.small,.sub{color:var(--muted);font-size:13px}
.bar{height:10px;background:#e7edf8;border-radius:999px;overflow:hidden;margin-top:12px}.bar>span{display:block;height:100%;background:var(--primary);border-radius:999px}
.row{display:flex;gap:10px;align-items:center}.row>*{flex:1}.list{display:grid;gap:12px}.item{display:flex;justify-content:space-between;gap:12px;padding:16px;border:1px solid var(--line);border-radius:18px;background:#fff}
button.primary,button.secondary{min-height:46px;border-radius:14px;padding:10px 15px;font-weight:600}button.primary{background:var(--primary);color:#fff;border:0}button.secondary{background:#fff;color:var(--primary);border:1px solid var(--primary)}
.login{min-height:100vh;display:grid;place-items:center}.loginBox{max-width:420px;width:100%;text-align:center;padding:34px}.google{width:100%}.note{padding:12px;border-radius:12px}.danger{background:#fef2f2;color:#991b1b}.avatar{width:42px;height:42px;border-radius:50%;object-fit:cover}.user{display:flex;gap:10px;align-items:center;min-width:0}.user>div{min-width:0;max-width:140px}#userName{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
canvas{width:100%;height:220px;background:#fff;border-radius:14px}.card h3{font-size:21px;margin:0 0 16px;font-weight:600}
.toast{position:fixed;left:50%;bottom:24px;z-index:100;transform:translate(-50%,20px);background:#123c30;color:#fff;padding:12px 18px;border-radius:999px;box-shadow:0 10px 30px rgba(18,28,42,.22);font-weight:600;opacity:0;pointer-events:none;transition:.2s ease;white-space:nowrap}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:700px){.targets{grid-template-columns:1fr 1fr}.row{flex-direction:column;align-items:stretch}.wrap{padding:18px}header .wrap{padding-top:8px;padding-bottom:10px}.brand{height:52px;min-height:52px;padding:0;overflow:visible}.brand>div:first-child{min-width:0}.brand>div:first-child .sub{display:none}.user{height:44px;flex:0 0 auto;gap:8px;overflow:visible}.user>div{max-width:none;flex:0 0 auto}#userName{display:none}.avatar{display:block;width:40px;height:40px;flex:0 0 40px;object-position:center}nav{position:static!important;display:grid;margin-top:8px;padding:0;background:transparent;border:0}nav button{font-size:12px}.toast{bottom:20px}}
</style>
</head>
<body>
<div id="loginScreen" class="wrap login">
<div class="card loginBox">
<h1 style="font-size:30px;margin-bottom:6px">Jeferson Fit</h1>
<div class="sub" style="font-size:14px;margin-bottom:28px">Alimentação, treinos e evolução em um só lugar.</div>
<button class="primary google" id="googleLogin">Entrar com Google</button>
<div id="loginError" class="note danger hidden" style="margin-top:14px"></div>
</div>
</div>
<div id="appScreen" class="hidden">
<header>
<div class="wrap">
<div class="brand">
<div><h1>Jeferson Fit</h1><div class="sub">Dados sincronizados com a nuvem</div></div>
<div class="user"><img id="avatar" class="avatar hidden"><div><div id="userName" style="font-size:13px;font-weight:700"></div><button id="logoutBtn" style="border:0;background:none;padding:0;color:#6b7280;cursor:pointer">Sair</button></div></div>
</div>
<nav>
<button data-tab="today" class="active">Hoje</button>
<button data-tab="progress">Progresso</button>
<button data-tab="plan">Plano</button>
<button data-tab="history">Histórico</button>
</nav>
</div>
</header>
<main class="wrap">
<section id="today">
<div class="targets">
<div class="card"><div class="label">Calorias</div><div class="metric"><span id="kcalNow">0</span></div><div class="small">meta <span id="kcalTarget">1950</span> kcal</div><div class="bar"><span id="kcalBar"></span></div></div>
<div class="card"><div class="label">Proteína</div><div class="metric"><span id="proteinNow">0</span>g</div><div class="small">meta <span id="proteinTarget">140</span> g</div><div class="bar"><span id="proteinBar"></span></div></div>
<div class="card"><div class="label">Água</div><div class="metric"><span id="waterNow">0,0</span>L</div><div class="small">meta <span id="waterTarget">2,5</span> L</div><div class="bar"><span id="waterBar"></span></div></div>
<div class="card"><div class="label">Fome 15–18h</div><div class="metric"><span id="hungerNow">–</span></div><div class="small">escala 0–10</div></div>
</div>
<div class="card">
<h3>Registrar refeição</h3>
<div class="row"><select id="mealType"><option>Café da manhã</option><option>Almoço</option><option>Lanche</option><option>Jantar</option><option>Extra</option></select><input id="mealName" placeholder="Ex.: pão + frango + ovo"></div>
<div class="row" style="margin-top:10px">
<select id="planMealSelect"><option value="">Usar opção do meu plano (opcional)</option></select>
<button class="secondary" id="loadPlanMealBtn">Puxar do plano</button>
</div>
<div class="row" style="margin-top:10px"><input id="mealKcal" type="number" placeholder="kcal"><input id="mealProtein" type="number" step="0.1" placeholder="proteína (g)"><input id="mealCarbs" type="number" step="0.1" placeholder="carbo (g)"><input id="mealFat" type="number" step="0.1" placeholder="gordura (g)"></div>
<div class="row" style="margin-top:10px">
<button class="primary" id="addMealBtn">Adicionar refeição</button>
<button class="secondary" id="saveCurrentMealToPlanBtn">Salvar esta refeição no meu plano</button>
</div>
<div id="mealList" class="list" style="margin-top:12px"></div>
</div>
<div class="card">
<h3>Água e fome</h3>
<div class="row"><input id="waterInput" type="number" min="0" step="50" placeholder="Água hoje (ml)"><input id="hungerInput" type="number" min="0" max="10" placeholder="Fome 15–18h (0–10)"></div>
<div class="row" style="margin-top:10px"><button class="secondary" type="button" data-add-water="250">+250 ml</button><button class="secondary" type="button" data-add-water="500">+500 ml</button></div>
<button class="primary" style="margin-top:10px" id="saveDayBtn">Salvar</button>
</div>
<div class="card">
<h3>Registrar treino</h3>
<div class="row"><select id="trainingType"><option>Musculação</option><option>Natação</option><option>Corrida</option><option>Outro</option></select><input id="trainingDate" type="date" aria-label="Data do treino"><input id="trainingMinutes" type="number" placeholder="Duração (min)"><input id="trainingDistance" type="number" step="0.01" placeholder="Distância (km, opcional)"></div>
<button class="primary" style="margin-top:10px" id="addWorkoutBtn">Adicionar treino</button>
<div id="workoutList" class="list" style="margin-top:12px"></div>
</div>
</section>
<section id="progress" class="hidden">
<div class="card">
<h3>Registrar progresso</h3>
<div class="row"><input id="weightInput" type="number" step="0.1" placeholder="Peso (kg)"><input id="waistInput" type="number" step="0.1" placeholder="Cintura (cm)"><input id="bodyFatInput" type="number" step="0.1" placeholder="Gordura corporal % (opcional)"></div>
<button class="primary" style="margin-top:10px" id="addProgressBtn">Registrar</button>
</div>
<div class="card"><h3>Peso</h3><canvas id="weightChart" width="820" height="220"></canvas></div>
<div class="card"><h3>Cintura</h3><canvas id="waistChart" width="820" height="220"></canvas></div>
<div id="progressList" class="list"></div>
</section>
<section id="plan" class="hidden">
<div class="card">
<h3>Metas atuais</h3>
<div class="row"><input id="goalKcal" type="number" value="1950" placeholder="kcal"><input id="goalProtein" type="number" value="140" placeholder="proteína g"><input id="goalCarbs" type="number" value="205" placeholder="carbo g"><input id="goalFat" type="number" value="60" placeholder="gordura g"><input id="goalWater" type="number" step="0.1" value="2.5" placeholder="água L"></div>
<button class="primary" style="margin-top:10px" id="saveGoalsBtn">Salvar metas</button>
</div>
<div class="card">
<h3>Meu plano alimentar</h3>
<div class="small" style="margin-bottom:12px">Este plano pertence somente à sua conta. Cada usuário do Jeferson Fit mantém o próprio plano.</div>
<input id="planItemId" type="hidden">
<div class="row">
<select id="planSection">
<option>Café da manhã</option>
<option>Almoço</option>
<option>Lanche</option>
<option>Jantar</option>
<option>Pré-treino</option>
<option>Pós-treino</option>
<option>Equivalência</option>
<option>Observação</option>
</select>
<input id="planTitle" placeholder="Ex.: Opção 1">
</div>
<textarea id="planDescription" rows="3" style="margin-top:10px" placeholder="Ex.: 3 ovos + banana + 20 g de aveia"></textarea>
<div class="row" style="margin-top:10px">
<input id="planKcal" type="number" step="0.1" placeholder="kcal">
<input id="planProtein" type="number" step="0.1" placeholder="proteína (g)">
<input id="planCarbs" type="number" step="0.1" placeholder="carbo (g)">
<input id="planFat" type="number" step="0.1" placeholder="gordura (g)">
</div>
<div class="row" style="margin-top:10px">
<input id="planOrder" type="number" min="0" value="0" placeholder="Ordem">
<button class="primary" id="savePlanItemBtn">Adicionar ao plano</button>
<button class="secondary hidden" id="cancelPlanEditBtn">Cancelar edição</button>
</div>
</div>
<div class="card">
<h3>Itens cadastrados</h3>
<div id="planItemsList" class="list"></div>
</div>
</section>
<section id="history" class="hidden">
<div class="card"><h3>Últimas refeições</h3><div id="historyMeals" class="list"></div></div>
<div class="card"><h3>Últimos treinos</h3><div id="historyWorkouts" class="list"></div></div>
</section>
</main>
</div>
<div id="toast" class="toast" role="status" aria-live="polite"></div>
<script src="app.js"></script>
</body>
</html>