Hugging Face's logo

Spaces:
Porto333
/
protocolo-alquimista
Running

App Files Community
Porto333 commited on
Commit
a0ab537
·
verified ·
1 Parent(s): 28cf1bb

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +484 -18
index.html CHANGED
@@ -1,19 +1,485 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="pt-BR">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Protocolo Alquimista: Painel Interativo</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
9
+ <link rel="preconnect" href="https://fonts.googleapis.com">
10
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11
+ <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@700;900&family=Montserrat:wght@400;600&display=swap" rel="stylesheet">
12
+ <link rel="manifest" href="manifest.json">
13
+ <meta name="theme-color" content="#32CD32">
14
+ <!-- Chosen Palette: Black, Gold & Neon Green -->
15
+ <!-- Application Structure Plan: A dashboard-style, tabbed single-page application was chosen to deconstruct the dense, linear PDF into a user-friendly, interactive experience. The structure prioritizes user tasks and logical content grouping over mirroring the report's layout. The architecture includes: 1) A 'Visão Geral' tab as a landing dashboard for a high-level strategic overview. 2) An interactive 'Planos Alimentares' tab with sub-navigation to allow users to instantly switch between and compare daily meal plans. 3) A dedicated 'Suplementação' tab for clear, focused information. 4) A 'Diretrizes' tab that separates actionable rules and adjustment plans from the daily protocol. This tabbed structure prevents overwhelming the user with a long scroll, making the complex information digestible and easily navigable. A new 'Calculadora' tab has been added for food substitutions. -->
16
+ <!-- Visualization & Content Choices:
17
+ - Report Info: Weekly training/diet schedule -> Goal: Change -> Viz: Bar Chart (Chart.js) -> Interaction: Hover to see daily macro goal -> Justification: Clearly visualizes the fluctuation of carb intake across the week, linking it to training days. NO SVG.
18
+ - Report Info: Macro breakdown per day type (High/Mid/Low) -> Goal: Compare -> Viz: Donut Charts (Chart.js) -> Interaction: Hover for calorie details -> Justification: Provides an immediate visual comparison of the macronutrient composition for each strategic day. NO SVG.
19
+ - Report Info: Detailed daily meal plans -> Goal: Organize/Inform -> Presentation: HTML Tables within a dynamic content area -> Interaction: Click buttons (High/Mid/Low) to switch displayed content -> Justification: Allows users to focus on one meal plan at a time and easily compare them without scrolling through a long document. NO SVG.
20
+ - Report Info: Dynamic adjustment rules -> Goal: Organize -> Presentation: Simplified text block. -> Interaction: None -> Justification: Direct and clear instruction is more effective than a complex diagram for this point. NO SVG/Mermaid.
21
+ - Report Info: Supplementation protocol -> Goal: Inform -> Presentation: Static HTML Table -> Interaction: None -> Justification: Presents structured data in a clear, easy-to-read format. NO SVG.
22
+ - New Feature: Food Substitution Calculator -> Goal: Interact/Inform -> Presentation: Interactive form with dropdowns and dynamic output -> Justification: Empowers the user with flexibility and control over their diet, making adherence easier. The AI-like functionality is achieved via a comprehensive static database (TACO-based). NO SVG.
23
+ -->
24
+ <!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->
25
+ <style>
26
+ body { font-family: 'Montserrat', sans-serif; background-color: #000000; color: #E5E5E5; }
27
+ .font-display { font-family: 'Cinzel', serif; }
28
+ .bg-alchemist {
29
+ background-color: #121212;
30
+ position: relative;
31
+ }
32
+ .container { position: relative; z-index: 1; }
33
+ .tab-active { color: #32CD32; border-color: #32CD32; background: linear-gradient(to top, rgba(4, 120, 87, 0.2), transparent); }
34
+ .tab-inactive { border-color: transparent; color: #a3a3a3; }
35
+ .plan-btn-green { background-color: #32CD32; color: #000000; box-shadow: 0 0 15px rgba(50, 205, 50, 0.5); }
36
+ .plan-btn-yellow { background-color: #DAA520; color: #000000; box-shadow: 0 0 15px rgba(218, 165, 32, 0.5); }
37
+ .plan-btn-red { background-color: #DC2626; color: #FFFFFF; box-shadow: 0 0 15px rgba(220, 38, 38, 0.5); }
38
+ .sub-tab-inactive { background-color: #1F2937; color: #E5E5E5; }
39
+ .chart-container { position: relative; width: 100%; max-width: 600px; margin-left: auto; margin-right: auto; height: 288px; max-height: 400px; } /* h-72 */
40
+ @media (min-width: 640px) { .chart-container { height: 320px; } } /* sm:h-80 */
41
+ @media (min-width: 768px) { .chart-container { height: 350px; } }
42
+ @media (min-width: 1024px) { .chart-container { max-width: 100%; } }
43
+ .card-bg { background-color: rgba(17, 24, 39, 0.6); backdrop-filter: blur(10px); border: 1px solid #374151; }
44
+ .text-gold { color: #DAA520; }
45
+ .text-glow-gold { text-shadow: 0 0 8px rgba(218, 165, 32, 0.7); }
46
+ .text-glow-green { text-shadow: 0 0 8px rgba(50, 205, 50, 0.7); }
47
+ select, input {
48
+ -webkit-appearance: none; -moz-appearance: none; appearance: none;
49
+ background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3a3a3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
50
+ background-repeat: no-repeat;
51
+ background-position: right 0.75rem center;
52
+ background-size: 1.5em 1.5em;
53
+ }
54
+ .nav-scroll::-webkit-scrollbar { display: none; }
55
+ .nav-scroll { -ms-overflow-style: none; scrollbar-width: none; }
56
+ </style>
57
+ </head>
58
+ <body class="bg-alchemist">
59
+ <div class="container mx-auto p-4 sm:p-6 lg:p-8">
60
+
61
+ <header class="text-center pt-8 pb-4">
62
+ <h1 class="text-3xl sm:text-4xl md:text-6xl font-black font-display text-gold text-glow-gold">PROTOCOLO ALQUIMISTA</h1>
63
+ </header>
64
+
65
+ <div class="border-b-2 border-gray-800 mb-8 overflow-hidden">
66
+ <nav class="flex overflow-x-auto whitespace-nowrap justify-start md:justify-center nav-scroll">
67
+ <button data-target="overview" class="tab-btn font-display text-sm sm:text-base tracking-widest uppercase py-4 px-6 border-b-2 font-bold transition-colors duration-300 tab-active flex-shrink-0">Visão Geral</button>
68
+ <button data-target="meal-plans" class="tab-btn font-display text-sm sm:text-base tracking-widest uppercase py-4 px-6 border-b-2 font-bold transition-colors duration-300 tab-inactive flex-shrink-0">Planos</button>
69
+ <button data-target="calculator" class="tab-btn font-display text-sm sm:text-base tracking-widest uppercase py-4 px-6 border-b-2 font-bold transition-colors duration-300 tab-inactive flex-shrink-0">Calculadora</button>
70
+ <button data-target="supplements" class="tab-btn font-display text-sm sm:text-base tracking-widest uppercase py-4 px-6 border-b-2 font-bold transition-colors duration-300 tab-inactive flex-shrink-0">Suplementos</button>
71
+ <button data-target="guidelines" class="tab-btn font-display text-sm sm:text-base tracking-widest uppercase py-4 px-6 border-b-2 font-bold transition-colors duration-300 tab-inactive flex-shrink-0">Diretrizes</button>
72
+ </nav>
73
+ </div>
74
+
75
+ <main>
76
+ <section id="overview" class="tab-content">
77
+ <div class="text-center mb-10">
78
+ <h2 class="text-2xl sm:text-3xl md:text-4xl font-bold font-display text-gold text-glow-gold">Estratégia Semanal</h2>
79
+ <p class="max-w-3xl mx-auto mt-2 text-gray-400 text-sm sm:text-base">A flutuação de carboidratos sincronizada com os treinos para maximizar performance e recuperação.</p>
80
+ </div>
81
+ <div class="card-bg p-4 sm:p-6 rounded-2xl shadow-2xl mb-12">
82
+ <div class="chart-container h-64 sm:h-80 md:h-96">
83
+ <canvas id="weeklyCycleChart"></canvas>
84
+ </div>
85
+ </div>
86
+
87
+ <div class="text-center mb-10">
88
+ <h2 class="text-2xl sm:text-3xl md:text-4xl font-bold font-display text-gold text-glow-gold">Composição dos Dias</h2>
89
+ <p class="max-w-3xl mx-auto mt-2 text-gray-400 text-sm sm:text-base">Estruturas de macronutrientes únicas para cada objetivo, mantendo o total calórico de 3.000 kcal.</p>
90
+ </div>
91
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
92
+ <div class="card-bg p-6 rounded-2xl shadow-2xl">
93
+ <h3 class="font-bold text-xl sm:text-2xl text-center mb-2 font-display text-green-400 text-glow-green">High Carb</h3>
94
+ <p class="text-center text-sm text-gray-400 mb-4">(3000 kcal | C: 400g, P: 240g, G: 47g)</p>
95
+ <div class="chart-container h-64 sm:h-72">
96
+ <canvas id="highCarbDonut"></canvas>
97
+ </div>
98
+ </div>
99
+ <div class="card-bg p-6 rounded-2xl shadow-2xl">
100
+ <h3 class="font-bold text-xl sm:text-2xl text-center mb-2 font-display text-green-400 text-glow-green">Mid Carb</h3>
101
+ <p class="text-center text-sm text-gray-400 mb-4">(3000 kcal | C: 250g, P: 240g, G: 100g)</p>
102
+ <div class="chart-container h-64 sm:h-72">
103
+ <canvas id="midCarbDonut"></canvas>
104
+ </div>
105
+ </div>
106
+ <div class="card-bg p-6 rounded-2xl shadow-2xl">
107
+ <h3 class="font-bold text-xl sm:text-2xl text-center mb-2 font-display text-green-400 text-glow-green">Low Carb</h3>
108
+ <p class="text-center text-sm text-gray-400 mb-4">(3000 kcal | C: 100g, P: 240g, G: 167g)</p>
109
+ <div class="chart-container h-64 sm:h-72">
110
+ <canvas id="lowCarbDonut"></canvas>
111
+ </div>
112
+ </div>
113
+ </div>
114
+ </section>
115
+
116
+ <section id="meal-plans" class="tab-content hidden">
117
+ <div class="text-center mb-10">
118
+ <h2 class="text-2xl sm:text-3xl md:text-4xl font-bold font-display text-gold text-glow-gold">Planos Alimentares</h2>
119
+ <p class="max-w-3xl mx-auto mt-2 text-gray-400 text-sm sm:text-base">Selecione o dia para visualizar o plano de refeições detalhado.</p>
120
+ </div>
121
+ <div class="flex justify-center items-center gap-2 sm:gap-4 mb-8">
122
+ <button data-plan="high" class="plan-btn text-sm sm:text-base font-bold py-3 px-6 sm:px-8 rounded-full shadow-md transition-all duration-300">High Carb</button>
123
+ <button data-plan="mid" class="plan-btn text-sm sm:text-base font-bold py-3 px-6 sm:px-8 rounded-full shadow-md transition-all duration-300">Mid Carb</button>
124
+ <button data-plan="low" class="plan-btn text-sm sm:text-base font-bold py-3 px-6 sm:px-8 rounded-full shadow-md transition-all duration-300">Low Carb</button>
125
+ </div>
126
+ <div id="mealPlanContent" class="card-bg p-4 sm:p-8 rounded-2xl shadow-2xl transition-opacity duration-500">
127
+ </div>
128
+ <div class="text-center mt-6">
129
+ <p class="text-xs sm:text-sm text-gray-400 italic">
130
+ <strong>Observação:</strong> Em dias que não treinar pela manhã, inverter a refeição pós-treino de 12:00 para as 16:00 ou 19:00 (dependendo do horário que foi treinar).<br>
131
+ Lembrando que os horários de intervalo entre as refeições não precisam ser seguidos à risca, apenas como base.
132
+ </p>
133
+ </div>
134
+ </section>
135
+
136
+ <section id="calculator" class="tab-content hidden">
137
+ <div class="text-center mb-10">
138
+ <h2 class="text-2xl sm:text-3xl md:text-4xl font-bold font-display text-gold text-glow-gold">Calculadora de Alquimia</h2>
139
+ <p class="max-w-3xl mx-auto mt-2 text-gray-400 text-sm sm:text-base">Substitua alimentos de forma inteligente, mantendo a equivalência de macros e calorias.</p>
140
+ </div>
141
+ <div class="card-bg p-6 sm:p-8 rounded-2xl shadow-2xl max-w-4xl mx-auto">
142
+ <div class="grid grid-cols-1 md:grid-cols-5 gap-6 items-end">
143
+ <div class="md:col-span-2">
144
+ <label for="food-from" class="block mb-2 text-sm font-medium text-gray-300">Alimento Original</label>
145
+ <select id="food-from" class="bg-gray-900 border border-gray-700 text-white text-sm rounded-lg focus:ring-green-500 focus:border-green-500 block w-full p-2.5"></select>
146
+ </div>
147
+ <div>
148
+ <label for="amount-from" class="block mb-2 text-sm font-medium text-gray-300">Peso (g)</label>
149
+ <input type="number" id="amount-from" value="100" class="bg-gray-900 border border-gray-700 text-white text-sm rounded-lg focus:ring-green-500 focus:border-green-500 block w-full p-2.5">
150
+ </div>
151
+ <div class="md:col-span-2">
152
+ <label for="food-to" class="block mb-2 text-sm font-medium text-gray-300">Substituir Por</label>
153
+ <select id="food-to" class="bg-gray-900 border border-gray-700 text-white text-sm rounded-lg focus:ring-green-500 focus:border-green-500 block w-full p-2.5"></select>
154
+ </div>
155
+ </div>
156
+ <div id="calculation-result" class="mt-8 text-center bg-black/30 p-6 rounded-lg hidden border border-gray-700">
157
+ <p class="text-gray-300">Para substituir <strong id="res-amount-from" class="text-green-400"></strong> de <strong id="res-food-from" class="text-green-400"></strong>, você precisará de:</p>
158
+ <p class="text-3xl sm:text-4xl font-bold text-white my-2"><strong id="res-amount-to" class="text-green-400"></strong> de <strong id="res-food-to" class="text-green-400"></strong></p>
159
+ <div class="text-xs text-gray-400 mt-4 grid grid-cols-1 md:grid-cols-2 gap-x-4">
160
+ <p id="res-from-macros"></p>
161
+ <p id="res-to-macros"></p>
162
+ </div>
163
+ </div>
164
+ </div>
165
+ </section>
166
+
167
+ <section id="supplements" class="tab-content hidden">
168
+ <div class="text-center mb-10">
169
+ <h2 class="text-2xl sm:text-3xl md:text-4xl font-bold font-display text-gold text-glow-gold">Protocolo de Suplementação</h2>
170
+ <p class="max-w-3xl mx-auto mt-2 text-gray-400 text-sm sm:text-base">Ferramentas de precisão. Siga o timing e as dosagens para potencializar os resultados.</p>
171
+ </div>
172
+ <div class="card-bg rounded-2xl shadow-2xl overflow-x-auto">
173
+ <table class="w-full text-left text-sm sm:text-base">
174
+ <thead class="bg-black/30">
175
+ <tr>
176
+ <th class="p-4 font-display text-sm uppercase tracking-wider text-green-400">Timing</th>
177
+ <th class="p-4 font-display text-sm uppercase tracking-wider text-green-400">Suplemento e Dosagem</th>
178
+ <th class="p-4 font-display text-sm uppercase tracking-wider text-green-400">Objetivo</th>
179
+ </tr>
180
+ </thead>
181
+ <tbody class="divide-y divide-gray-700">
182
+ <tr>
183
+ <td class="p-4 font-bold">Ao Acordar</td>
184
+ <td class="p-4">5g Glutamina<br>5g Creatina<br>1mg Vit. B12 (Metilcob.)</td>
185
+ <td class="p-4">Hidratação celular, suporte imune e otimização da produção de energia.</td>
186
+ </tr>
187
+ <tr>
188
+ <td class="p-4 font-bold">12:00 (1ª Refeição)</td>
189
+ <td class="p-4">1x Multivitamínico A-Z<br>600mg NAC<br>320mg Saw Palmetto<br>500mg Metformina*</td>
190
+ <td class="p-4">Suporte metabólico, antioxidante e otimização da sensibilidade à insulina.</td>
191
+ </tr>
192
+ <tr>
193
+ <td class="p-4 font-bold">Pré-Treino</td>
194
+ <td class="p-4">150-300mg Cafeína (opc.)<br>8g Citrulina Malato<br>5g Beta-Alanina</td>
195
+ <td class="p-4">Foco, performance, vasodilatação (pump) e resistência muscular.</td>
196
+ </tr>
197
+ <tr>
198
+ <td class="p-4 font-bold">Última Refeição</td>
199
+ <td class="p-4">5.000ui Vit. D3 + 100mcg K2<br>2g Ômega 3 (alto EPA/DHA)<br>30-50mg Zinco Quelato<br>400mg Magnésio</td>
200
+ <td class="p-4">Recuperação noturna, otimização hormonal e qualidade do sono.</td>
201
+ </tr>
202
+ </tbody>
203
+ <tfoot>
204
+ <tr>
205
+ <td colspan="3" class="p-4 text-xs text-gray-500 text-center">*O uso de Metformina (Glifage) exige prescrição e acompanhamento médico contínuo.</td>
206
+ </tr>
207
+ </tfoot>
208
+ </table>
209
+ </div>
210
+ </section>
211
+
212
+ <section id="guidelines" class="tab-content hidden">
213
+ <div class="text-center mb-10">
214
+ <h2 class="text-2xl sm:text-3xl md:text-4xl font-bold font-display text-gold text-glow-gold">Diretrizes e Ajustes</h2>
215
+ <p class="max-w-3xl mx-auto mt-2 text-gray-400 text-sm sm:text-base">O sucesso depende da execução e da capacidade de adaptar.</p>
216
+ </div>
217
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
218
+ <div class="card-bg p-6 rounded-2xl shadow-2xl">
219
+ <h3 class="text-xl sm:text-2xl font-bold font-display mb-4 text-green-400 text-glow-green">Pilares do Sucesso</h3>
220
+ <ul class="space-y-4">
221
+ <li class="flex items-start"><span class="text-3xl mr-4 text-green-400">💧</span><div><strong>Hidratação:</strong> Mínimo 4L de água por dia. É crucial para todos os processos bioquímicos.</div></li>
222
+ <li class="flex items-start"><span class="text-3xl mr-4 text-green-400">🔬</span><div><strong>Biofeedback:</strong> Monitore sono, libido, humor e energia. São os melhores indicadores de progresso.</div></li>
223
+ <li class="flex items-start"><span class="text-3xl mr-4 text-green-400">🎯</span><div><strong>Execução:</strong> A disciplina na execução de cada refeição e treino é o que separa os amadores dos campeões.</div></li>
224
+ </ul>
225
+ </div>
226
+ <div class="card-bg p-6 rounded-2xl shadow-2xl">
227
+ <h3 class="text-xl sm:text-2xl font-bold font-display mb-4 text-green-400 text-glow-green">Ajustes</h3>
228
+ <div class="text-center flex flex-col justify-center h-full">
229
+ <p class="text-lg text-gray-300">Sentiu estagnação, queda de performance ou perda de peso muito rápida?</p>
230
+ <p class="text-2xl font-bold text-white mt-4">Me chama no Telegram.</p>
231
+ <p class="text-green-400 mt-2 text-lg">@fidelporto</p>
232
+ </div>
233
+ </div>
234
+ </div>
235
+ </section>
236
+ </main>
237
+ </div>
238
+
239
+ <script>
240
+ document.addEventListener('DOMContentLoaded', function() {
241
+ let currentPlanType = 'high';
242
+ const contentDiv = document.getElementById('mealPlanContent');
243
+
244
+ const chartTextColor = '#d4d4d4';
245
+ const chartGridColor = 'rgba(55, 65, 81, 0.5)';
246
+ const chartDefaultOptions = {
247
+ responsive: true,
248
+ maintainAspectRatio: false,
249
+ plugins: {
250
+ legend: { position: 'bottom', labels: { color: chartTextColor, font: { family: "'Montserrat', sans-serif" } } },
251
+ tooltip: {
252
+ callbacks: {
253
+ title: function(tooltipItems) {
254
+ const item = tooltipItems[0];
255
+ let label = item.chart.data.labels[item.dataIndex];
256
+ return Array.isArray(label) ? label.join(' ') : label;
257
+ }
258
+ }
259
+ }
260
+ }
261
+ };
262
+
263
+ const mealPlansHTML = {
264
+ high: `
265
+ <div class="overflow-x-auto"><table class="w-full text-left text-sm sm:text-base">
266
+ <thead><tr class="bg-black/30"><th class="p-4 font-semibold">Horário</th><th class="p-4 font-semibold">Refeição</th><th class="p-4 font-semibold">Detalhes</th></tr></thead>
267
+ <tbody class="divide-y divide-gray-700">
268
+ <tr><td class="p-4 align-top">12:00</td><td class="p-4 align-top">Pós-Treino</td><td class="p-4">200g Carne Magra (ex: tilápia), 500g (Arroz/Mandioca/Inhame/Batata Doce/Macarrão), 60g Mel.<br><em class="text-xs text-gray-400">Opção Expressa: 300g de macarrão com 200g de patinho moído.</em></td></tr>
269
+ <tr><td class="p-4 align-top">16:00</td><td class="p-4 align-top">Refeição 2</td><td class="p-4">200g Carne Magra, 250g (Arroz/Mandioca/Inhame/Batata Doce/Macarrão), 150g Feijão, Salada.<br><em class="text-xs text-gray-400">Opção Expressa: Wrap grande com 250g de frango desfiado e salada.</em></td></tr>
270
+ <tr><td class="p-4 align-top">19:00</td><td class="p-4 align-top">Refeição 3</td><td class="p-4"><strong>Sanduíche:</strong> 4 fatias Pão Integral, 100g Carne Magra, 30g Requeijão Light.<br><strong>Acompanhamento:</strong> 200g Mamão.<br><em class="text-xs text-gray-400">Opção Expressa: Shake com 40g Whey, 100g aveia e 1 banana.</em></td></tr>
271
+ <tr><td class="p-4 align-top">22:00</td><td class="p-4 align-top">Ceia</td><td class="p-4"><strong>Shake:</strong> 50g Carnibol (Beef Protein), 50g Aveia.<br><strong>Acompanhamento:</strong> 2 Bananas.<br><em class="text-xs text-gray-400">Opção Expressa: 4 ovos inteiros com 4 fatias de pão integral.</em></td></tr>
272
+ </tbody>
273
+ </table></div>`,
274
+ mid: `
275
+ <div class="overflow-x-auto"><table class="w-full text-left text-sm sm:text-base">
276
+ <thead><tr class="bg-black/30"><th class="p-4 font-semibold">Horário</th><th class="p-4 font-semibold">Refeição</th><th class="p-4 font-semibold">Detalhes</th></tr></thead>
277
+ <tbody class="divide-y divide-gray-700">
278
+ <tr><td class="p-4 align-top">12:00</td><td class="p-4 align-top">Pós-Treino</td><td class="p-4">200g Carne Magra, 300g (Arroz/Mandioca/Inhame/Batata Doce/Macarrão), 200g Abacaxi.<br><em class="text-xs text-gray-400">Opção Expressa: Shake com 50g Whey, 70g aveia e 1 banana.</em></td></tr>
279
+ <tr><td class="p-4 align-top">16:00</td><td class="p-4 align-top">Refeição 2</td><td class="p-4">200g Carne Magra, 200g (Arroz/Mandioca/Inhame/Batata Doce/Macarrão), 150g Ervilhas, Salada com 15g de azeite.<br><em class="text-xs text-gray-400">Opção Expressa: Omelete com 6 ovos e 50g de queijo, servido com 200g de batata doce.</em></td></tr>
280
+ <tr><td class="p-4 align-top">19:00</td><td class="p-4 align-top">Refeição 3</td><td class="p-4"><strong>Ovos:</strong> 4 ovos inteiros + 2 claras com 60g Requeijão Light.<br><strong>Acompanhamento:</strong> 30g Castanhas.<br><em class="text-xs text-gray-400">Opção Expressa: 200g de Salmão grelhado.</em></td></tr>
281
+ <tr><td class="p-4 align-top">22:00</td><td class="p-4 align-top">Ceia</td><td class="p-4">250g Queijo Cottage, 2 fatias Pão Integral, 30g Pasta de Amendoim.<br><em class="text-xs text-gray-400">Opção Expressa: Shake com 50g de Caseína e 30g de pasta de amendoim.</em></td></tr>
282
+ </tbody>
283
+ </table></div>`,
284
+ low: `
285
+ <div class="overflow-x-auto"><table class="w-full text-left text-sm sm:text-base">
286
+ <thead><tr class="bg-black/30"><th class="p-4 font-semibold">Horário</th><th class="p-4 font-semibold">Refeição</th><th class="p-4 font-semibold">Detalhes</th></tr></thead>
287
+ <tbody class="divide-y divide-gray-700">
288
+ <tr><td class="p-4 align-top">12:00</td><td class="p-4 align-top">Pós-Treino</td><td class="p-4"><strong>(Única janela de carboidratos):</strong> 50g Carnibol (Beef Protein) misturado com 100g de aveia (mingau).<br><em class="text-xs text-gray-400">Opção Expressa: Shake com 50g Whey Protein e 2 bananas médias.</em></td></tr>
289
+ <tr><td class="p-4 align-top">16:00</td><td class="p-4 align-top">Refeição 2</td><td class="p-4">250g Carne Magra, Salada verde com 30g de azeite e 1/2 abacate.<br><em class="text-xs text-gray-400">Opção Expressa: 300g de Salmão assado com brócolis.</em></td></tr>
290
+ <tr><td class="p-4 align-top">19:00</td><td class="p-4 align-top">Refeição 3</td><td class="p-4"><strong>Ovos:</strong> 5 ovos inteiros com 100g Carne Magra e 50g de queijo.<br><em class="text-xs text-gray-400">Opção Expressa: 2 espetos de carne (200g total) com queijo coalho.</em></td></tr>
291
+ <tr><td class="p-4 align-top">22:00</td><td class="p-4 align-top">Ceia</td><td class="p-4">250g Carne Magra (ex: tilápia), brócolis e aspargos com 15g de azeite.<br><em class="text-xs text-gray-400">Opção Expressa: Omelete com 6 ovos e salada.</em></td></tr>
292
+ </tbody>
293
+ </table></div>`
294
+ };
295
+
296
+ const displayMealPlan = (planType) => {
297
+ currentPlanType = planType;
298
+ contentDiv.style.opacity = 0;
299
+ setTimeout(() => {
300
+ contentDiv.innerHTML = mealPlansHTML[planType];
301
+ contentDiv.style.opacity = 1;
302
+ }, 300);
303
+ };
304
+
305
+ new Chart(document.getElementById('weeklyCycleChart').getContext('2d'), {
306
+ type: 'bar',
307
+ data: {
308
+ labels: ['Seg (Peito)', 'Ter (Dorsais)', 'Qua (Ombros)', 'Qui (Pernas)', 'Sex (Braços)', 'Sáb (Cardio)', 'Dom (Pernas)'],
309
+ datasets: [{
310
+ label: 'Carboidratos (g)', data: [400, 250, 400, 250, 100, 400, 250],
311
+ backgroundColor: [
312
+ 'rgba(50, 205, 50, 0.6)', // Seg (High) - Verde
313
+ 'rgba(218, 165, 32, 0.6)', // Ter (Mid) - Amarelo
314
+ 'rgba(50, 205, 50, 0.6)', // Qua (High) - Verde
315
+ 'rgba(218, 165, 32, 0.6)', // Qui (Mid) - Amarelo
316
+ 'rgba(220, 38, 38, 0.6)', // Sex (Low) - Vermelho
317
+ 'rgba(50, 205, 50, 0.6)', // Sáb (High) - Verde
318
+ 'rgba(218, 165, 32, 0.6)' // Dom (Mid) - Amarelo
319
+ ],
320
+ borderColor: [
321
+ '#32CD32',
322
+ '#DAA520',
323
+ '#32CD32',
324
+ '#DAA520',
325
+ '#DC2626',
326
+ '#32CD32',
327
+ '#DAA520'
328
+ ],
329
+ borderWidth: 1, borderRadius: 5,
330
+ }]
331
+ },
332
+ options: { ...chartDefaultOptions, scales: {
333
+ y: { beginAtZero: true, grid: { color: chartGridColor }, ticks: { color: chartTextColor, font: { weight: '600' } } },
334
+ x: { grid: { display: false }, ticks: { color: chartTextColor, font: { weight: '600' } } }
335
+ } }
336
+ });
337
+
338
+ const donutColors = ['#32CD32', '#DAA520', '#374151'];
339
+ new Chart(document.getElementById('highCarbDonut').getContext('2d'), {
340
+ type: 'doughnut', data: { labels: ['Carbs (53%)', 'Proteínas (32%)', 'Gorduras (15%)'], datasets: [{ data: [400, 240, 47], backgroundColor: donutColors, borderColor: '#111827' }] },
341
+ options: chartDefaultOptions
342
+ });
343
+ new Chart(document.getElementById('midCarbDonut').getContext('2d'), {
344
+ type: 'doughnut', data: { labels: ['Carbs (33%)', 'Proteínas (32%)', 'Gorduras (35%)'], datasets: [{ data: [250, 240, 100], backgroundColor: donutColors, borderColor: '#111827' }] },
345
+ options: chartDefaultOptions
346
+ });
347
+ new Chart(document.getElementById('lowCarbDonut').getContext('2d'), {
348
+ type: 'doughnut', data: { labels: ['Carbs (13%)', 'Proteínas (32%)', 'Gorduras (55%)'], datasets: [{ data: [100, 240, 167], backgroundColor: donutColors, borderColor: '#111827' }] },
349
+ options: chartDefaultOptions
350
+ });
351
+
352
+ const tabs = document.querySelectorAll('.tab-btn');
353
+ const contents = document.querySelectorAll('.tab-content');
354
+ tabs.forEach(tab => {
355
+ tab.addEventListener('click', () => {
356
+ const target = tab.getAttribute('data-target');
357
+ tabs.forEach(t => {
358
+ t.classList.remove('tab-active');
359
+ t.classList.add('tab-inactive');
360
+ });
361
+ tab.classList.add('tab-active');
362
+ tab.classList.remove('tab-inactive');
363
+ contents.forEach(content => { content.id === target ? content.classList.remove('hidden') : content.classList.add('hidden'); });
364
+ });
365
+ });
366
+
367
+ const planBtns = document.querySelectorAll('.plan-btn');
368
+ planBtns.forEach(btn => {
369
+ btn.addEventListener('click', () => {
370
+ const planType = btn.getAttribute('data-plan');
371
+
372
+ planBtns.forEach(pBtn => {
373
+ pBtn.classList.remove('plan-btn-green', 'plan-btn-yellow', 'plan-btn-red');
374
+ pBtn.classList.add('sub-tab-inactive');
375
+ });
376
+
377
+ btn.classList.remove('sub-tab-inactive');
378
+ if (planType === 'high') {
379
+ btn.classList.add('plan-btn-green');
380
+ } else if (planType === 'mid') {
381
+ btn.classList.add('plan-btn-yellow');
382
+ } else if (planType === 'low') {
383
+ btn.classList.add('plan-btn-red');
384
+ }
385
+
386
+ displayMealPlan(planType);
387
+ });
388
+ });
389
+
390
+ // Set initial state
391
+ document.querySelector('.plan-btn[data-plan="high"]').classList.add('plan-btn-green');
392
+ document.querySelector('.plan-btn[data-plan="mid"]').classList.add('sub-tab-inactive');
393
+ document.querySelector('.plan-btn[data-plan="low"]').classList.add('sub-tab-inactive');
394
+ displayMealPlan('high');
395
+
396
+ const foodDatabase = {
397
+ proteinas: {
398
+ "Frango (peito, cozido)": { p: 31, c: 0, g: 3.6, cal: 165 }, "Tilápia (assada)": { p: 26, c: 0, g: 2.7, cal: 128 },
399
+ "Patinho (cozido)": { p: 29, c: 0, g: 9, cal: 216 }, "Ovo (cozido)": { p: 13, c: 1.1, g: 11, cal: 155 },
400
+ "Whey Protein Isolado": { p: 85, c: 5, g: 1, cal: 370 }, "Clara de Ovo (cozida)": { p: 11, c: 0.7, g: 0.2, cal: 52 },
401
+ "Salmão (assado)": { p: 25, c: 0, g: 13, cal: 220 }, "Carnibol (Beef Protein)": { p: 84, c: 0, g: 2, cal: 354 },
402
+ },
403
+ carboidratos: {
404
+ "Arroz Branco (cozido)": { p: 2.7, c: 28, g: 0.3, cal: 130 }, "Batata Doce (cozida)": { p: 1.6, c: 20, g: 0.1, cal: 86 },
405
+ "Mandioca (cozida)": { p: 1.4, c: 38, g: 0.3, cal: 160 }, "Inhame (cozido)": { p: 1.5, c: 28, g: 0.2, cal: 118 },
406
+ "Macarrão (cozido)": { p: 5, c: 25, g: 1.1, cal: 131 }, "Pão de Forma Integral": { p: 13, c: 49, g: 3.2, cal: 265 },
407
+ "Aveia em Flocos": { p: 17, c: 66, g: 7, cal: 389 }, "Banana": { p: 1.1, c: 23, g: 0.3, cal: 89 },
408
+ },
409
+ gorduras: {
410
+ "Pasta de Amendoim": { p: 25, c: 20, g: 50, cal: 588 }, "Abacate": { p: 2, c: 9, g: 15, cal: 160 },
411
+ "Azeite de Oliva": { p: 0, c: 0, g: 100, cal: 884 }, "Castanha-do-Pará": { p: 14, c: 12, g: 66, cal: 656 },
412
+ }
413
+ };
414
+
415
+ const fromSelect = document.getElementById('food-from');
416
+ const toSelect = document.getElementById('food-to');
417
+ const amountFromInput = document.getElementById('amount-from');
418
+ const resultDiv = document.getElementById('calculation-result');
419
+
420
+ const populateSelects = () => {
421
+ for (const category in foodDatabase) {
422
+ const optgroup = document.createElement('optgroup');
423
+ optgroup.label = category.charAt(0).toUpperCase() + category.slice(1);
424
+ for (const food in foodDatabase[category]) {
425
+ const option = document.createElement('option');
426
+ option.value = food;
427
+ option.textContent = food;
428
+ optgroup.appendChild(option);
429
+ }
430
+ fromSelect.appendChild(optgroup.cloneNode(true));
431
+ toSelect.appendChild(optgroup);
432
+ }
433
+ };
434
+
435
+ const calculateSubstitution = () => {
436
+ const fromFoodName = fromSelect.value;
437
+ const toFoodName = toSelect.value;
438
+ const amountFrom = parseFloat(amountFromInput.value);
439
+
440
+ if (!fromFoodName || !toFoodName || isNaN(amountFrom) || amountFrom <= 0) {
441
+ resultDiv.classList.add('hidden');
442
+ return;
443
+ }
444
+
445
+ let fromFoodData, fromCategory, toFoodData, toCategory;
446
+ for(const cat in foodDatabase) {
447
+ if(foodDatabase[cat][fromFoodName]) { fromFoodData = foodDatabase[cat][fromFoodName]; fromCategory = cat; }
448
+ if(foodDatabase[cat][toFoodName]) { toFoodData = foodDatabase[cat][toFoodName]; toCategory = cat; }
449
+ }
450
+
451
+ if (!fromFoodData || !toFoodData) return;
452
+
453
+ const fromCal = (fromFoodData.cal / 100) * amountFrom;
454
+ let targetMetric = 'cal';
455
+ if (fromCategory === 'proteinas' && toCategory === 'proteinas') targetMetric = 'p';
456
+ if (fromCategory === 'carboidratos' && toCategory === 'carboidratos') targetMetric = 'c';
457
+ if (fromCategory === 'gorduras' && toCategory === 'gorduras') targetMetric = 'g';
458
+
459
+ const fromMetricValue = (fromFoodData[targetMetric] / 100) * amountFrom;
460
+ const toMetricPerGram = toFoodData[targetMetric] / 100;
461
+
462
+ const amountTo = toMetricPerGram > 0 ? (fromMetricValue / toMetricPerGram).toFixed(0) : 0;
463
+ const toCal = (toFoodData.cal / 100) * parseFloat(amountTo);
464
+
465
+ document.getElementById('res-amount-from').textContent = `${amountFrom}g`;
466
+ document.getElementById('res-food-from').textContent = fromFoodName;
467
+ document.getElementById('res-amount-to').textContent = `${amountTo}g`;
468
+ document.getElementById('res-food-to').textContent = toFoodName;
469
+
470
+ document.getElementById('res-from-macros').textContent = `Origem: ${fromCal.toFixed(0)}kcal (P:${((fromFoodData.p/100)*amountFrom).toFixed(1)} C:${((fromFoodData.c/100)*amountFrom).toFixed(1)} G:${((fromFoodData.g/100)*amountFrom).toFixed(1)})`;
471
+ document.getElementById('res-to-macros').textContent = `Substituto: ${toCal.toFixed(0)}kcal (P:${((toFoodData.p/100)*amountTo).toFixed(1)} C:${((toFoodData.c/100)*amountTo).toFixed(1)} G:${((toFoodData.g/100)*amountTo).toFixed(1)})`;
472
+
473
+ resultDiv.classList.remove('hidden');
474
+ };
475
+
476
+ populateSelects();
477
+ fromSelect.addEventListener('change', calculateSubstitution);
478
+ toSelect.addEventListener('change', calculateSubstitution);
479
+ amountFromInput.addEventListener('input', calculateSubstitution);
480
+ calculateSubstitution();
481
+ });
482
+ </script>
483
+ </body>
484
  </html>
485
+