andyontrade commited on
Commit
3476d04
·
verified ·
1 Parent(s): 773db5e

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +438 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Macros
3
- emoji: 📊
4
- colorFrom: indigo
5
- colorTo: purple
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: macros
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: gray
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,438 @@
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="es">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Calculadora de Macronutrientes</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .gradient-bg {
11
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
12
+ }
13
+ .result-card {
14
+ transition: all 0.3s ease;
15
+ }
16
+ .result-card:hover {
17
+ transform: translateY(-5px);
18
+ box-shadow: 0 10px 20px rgba(0,0,0,0.1);
19
+ }
20
+ .nutri-circle {
21
+ width: 100px;
22
+ height: 100px;
23
+ border-radius: 50%;
24
+ display: flex;
25
+ align-items: center;
26
+ justify-content: center;
27
+ font-weight: bold;
28
+ margin: 0 auto;
29
+ }
30
+ input[type="range"] {
31
+ -webkit-appearance: none;
32
+ height: 8px;
33
+ border-radius: 5px;
34
+ background: #e0e0e0;
35
+ outline: none;
36
+ }
37
+ input[type="range"]::-webkit-slider-thumb {
38
+ -webkit-appearance: none;
39
+ appearance: none;
40
+ width: 20px;
41
+ height: 20px;
42
+ border-radius: 50%;
43
+ background: #667eea;
44
+ cursor: pointer;
45
+ }
46
+ </style>
47
+ </head>
48
+ <body class="min-h-screen bg-gray-50">
49
+ <div class="gradient-bg text-white py-12 px-4 shadow-lg">
50
+ <div class="max-w-4xl mx-auto text-center">
51
+ <h1 class="text-4xl font-bold mb-4">Calculadora de Macronutrientes</h1>
52
+ <p class="text-xl opacity-90">Calcula tus necesidades nutricionales personalizadas</p>
53
+ </div>
54
+ </div>
55
+
56
+ <div class="max-w-4xl mx-auto px-4 py-8">
57
+ <div class="bg-white rounded-xl shadow-md p-6 mb-8">
58
+ <h2 class="text-2xl font-semibold text-gray-800 mb-6">Datos Personales</h2>
59
+
60
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
61
+ <div>
62
+ <label class="block text-gray-700 mb-2">Género</label>
63
+ <div class="flex space-x-4">
64
+ <button id="maleBtn" class="gender-btn px-4 py-2 rounded-lg bg-blue-100 text-blue-700 font-medium">Hombre</button>
65
+ <button id="femaleBtn" class="gender-btn px-4 py-2 rounded-lg bg-pink-100 text-pink-700 font-medium">Mujer</button>
66
+ </div>
67
+ </div>
68
+
69
+ <div>
70
+ <label class="block text-gray-700 mb-2">Objetivo</label>
71
+ <select id="goal" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
72
+ <option value="loss">Pérdida de peso</option>
73
+ <option value="maintenance" selected>Mantenimiento</option>
74
+ <option value="gain">Aumento de peso</option>
75
+ </select>
76
+ </div>
77
+
78
+ <div>
79
+ <label class="block text-gray-700 mb-2">Edad (años)</label>
80
+ <input type="number" id="age" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" min="15" max="100" value="30">
81
+ </div>
82
+
83
+ <div>
84
+ <label class="block text-gray-700 mb-2">Nivel de actividad</label>
85
+ <select id="activity" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
86
+ <option value="1.2">Sedentario (poco o nada de ejercicio)</option>
87
+ <option value="1.375">Ligero (ejercicio 1-3 días/semana)</option>
88
+ <option value="1.55" selected>Moderado (ejercicio 3-5 días/semana)</option>
89
+ <option value="1.725">Activo (ejercicio 6-7 días/semana)</option>
90
+ <option value="1.9">Muy activo (ejercicio intenso diario)</option>
91
+ </select>
92
+ </div>
93
+
94
+ <div>
95
+ <label class="block text-gray-700 mb-2">Peso (kg)</label>
96
+ <input type="number" id="weight" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" min="40" max="200" value="70">
97
+ </div>
98
+
99
+ <div>
100
+ <label class="block text-gray-700 mb-2">Altura (cm)</label>
101
+ <input type="number" id="height" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" min="140" max="220" value="170">
102
+ </div>
103
+ </div>
104
+
105
+ <div class="mt-6">
106
+ <label class="block text-gray-700 mb-2">% Grasa corporal (opcional)</label>
107
+ <input type="range" id="bodyfat" class="w-full" min="5" max="50" value="20">
108
+ <div class="flex justify-between text-sm text-gray-600 mt-1">
109
+ <span>5%</span>
110
+ <span id="bodyfatValue">20%</span>
111
+ <span>50%</span>
112
+ </div>
113
+ </div>
114
+
115
+ <div class="mt-8">
116
+ <button id="calculateBtn" class="w-full gradient-bg text-white py-3 rounded-lg font-bold text-lg hover:opacity-90 transition duration-300">
117
+ Calcular mis macronutrientes
118
+ </button>
119
+ </div>
120
+ </div>
121
+
122
+ <div id="results" class="hidden bg-white rounded-xl shadow-md p-6 mb-8">
123
+ <h2 class="text-2xl font-semibold text-gray-800 mb-6">Tus resultados nutricionales</h2>
124
+
125
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
126
+ <div class="result-card bg-blue-50 rounded-xl p-6 text-center">
127
+ <div class="nutri-circle bg-blue-100 text-blue-700 text-2xl mb-4" id="caloriesCircle">0</div>
128
+ <h3 class="text-xl font-semibold text-blue-800 mb-2">Calorías diarias</h3>
129
+ <p class="text-gray-600">Recomendación basada en tus datos</p>
130
+ </div>
131
+
132
+ <div class="result-card bg-green-50 rounded-xl p-6 text-center">
133
+ <div class="nutri-circle bg-green-100 text-green-700 text-2xl mb-4" id="proteinCircle">0g</div>
134
+ <h3 class="text-xl font-semibold text-green-800 mb-2">Proteína</h3>
135
+ <p class="text-gray-600">Esencial para músculos y recuperación</p>
136
+ </div>
137
+
138
+ <div class="result-card bg-yellow-50 rounded-xl p-6 text-center">
139
+ <div class="nutri-circle bg-yellow-100 text-yellow-700 text-2xl mb-4" id="carbsCircle">0g</div>
140
+ <h3 class="text-xl font-semibold text-yellow-800 mb-2">Carbohidratos</h3>
141
+ <p class="text-gray-600">Energía para tu día y entrenamientos</p>
142
+ </div>
143
+ </div>
144
+
145
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
146
+ <div class="result-card bg-purple-50 rounded-xl p-6">
147
+ <h3 class="text-xl font-semibold text-purple-800 mb-4">Distribución de macronutrientes</h3>
148
+ <div class="h-64 flex items-center justify-center">
149
+ <canvas id="macrosChart"></canvas>
150
+ </div>
151
+ </div>
152
+
153
+ <div class="result-card bg-red-50 rounded-xl p-6">
154
+ <h3 class="text-xl font-semibold text-red-800 mb-4">Detalles nutricionales</h3>
155
+ <div class="space-y-4">
156
+ <div class="flex justify-between items-center">
157
+ <span class="text-gray-700">Grasas</span>
158
+ <span class="font-semibold text-red-700" id="fatValue">0g</span>
159
+ </div>
160
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
161
+ <div id="fatBar" class="bg-red-500 h-2.5 rounded-full" style="width: 0%"></div>
162
+ </div>
163
+
164
+ <div class="flex justify-between items-center">
165
+ <span class="text-gray-700">Proteína</span>
166
+ <span class="font-semibold text-blue-700" id="proteinValue">0g</span>
167
+ </div>
168
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
169
+ <div id="proteinBar" class="bg-blue-500 h-2.5 rounded-full" style="width: 0%"></div>
170
+ </div>
171
+
172
+ <div class="flex justify-between items-center">
173
+ <span class="text-gray-700">Carbohidratos</span>
174
+ <span class="font-semibold text-yellow-700" id="carbsValue">0g</span>
175
+ </div>
176
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
177
+ <div id="carbsBar" class="bg-yellow-500 h-2.5 rounded-full" style="width: 0%"></div>
178
+ </div>
179
+
180
+ <div class="pt-4 border-t border-gray-200">
181
+ <div class="flex justify-between items-center">
182
+ <span class="text-gray-700 font-medium">Agua recomendada</span>
183
+ <span class="font-semibold text-blue-700" id="waterValue">0L</span>
184
+ </div>
185
+ </div>
186
+ </div>
187
+ </div>
188
+ </div>
189
+
190
+ <div class="mt-8 bg-gray-50 rounded-xl p-6">
191
+ <h3 class="text-xl font-semibold text-gray-800 mb-4">Recomendaciones personalizadas</h3>
192
+ <div id="recommendations" class="space-y-3 text-gray-700">
193
+ <!-- Las recomendaciones se generarán aquí -->
194
+ </div>
195
+ </div>
196
+ </div>
197
+ </div>
198
+
199
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
200
+ <script>
201
+ // Variables globales
202
+ let gender = 'male';
203
+ let macrosChart = null;
204
+
205
+ // Event listeners
206
+ document.getElementById('maleBtn').addEventListener('click', () => setGender('male'));
207
+ document.getElementById('femaleBtn').addEventListener('click', () => setGender('female'));
208
+ document.getElementById('bodyfat').addEventListener('input', updateBodyfatValue);
209
+ document.getElementById('calculateBtn').addEventListener('click', calculateNutrition);
210
+
211
+ // Funciones
212
+ function setGender(selectedGender) {
213
+ gender = selectedGender;
214
+ document.querySelectorAll('.gender-btn').forEach(btn => {
215
+ btn.classList.remove('gradient-bg', 'text-white');
216
+ btn.classList.add('bg-gray-100', 'text-gray-700');
217
+ });
218
+
219
+ if (selectedGender === 'male') {
220
+ document.getElementById('maleBtn').classList.remove('bg-blue-100', 'text-blue-700');
221
+ document.getElementById('maleBtn').classList.add('gradient-bg', 'text-white');
222
+ } else {
223
+ document.getElementById('femaleBtn').classList.remove('bg-pink-100', 'text-pink-700');
224
+ document.getElementById('femaleBtn').classList.add('gradient-bg', 'text-white');
225
+ }
226
+ }
227
+
228
+ function updateBodyfatValue() {
229
+ const bodyfat = document.getElementById('bodyfat').value;
230
+ document.getElementById('bodyfatValue').textContent = `${bodyfat}%`;
231
+ }
232
+
233
+ function calculateNutrition() {
234
+ // Obtener valores del formulario
235
+ const age = parseInt(document.getElementById('age').value);
236
+ const weight = parseFloat(document.getElementById('weight').value);
237
+ const height = parseFloat(document.getElementById('height').value);
238
+ const activity = parseFloat(document.getElementById('activity').value);
239
+ const goal = document.getElementById('goal').value;
240
+ const bodyfat = parseInt(document.getElementById('bodyfat').value) || 20;
241
+
242
+ // Validaciones básicas
243
+ if (age < 15 || age > 100 || weight < 40 || weight > 200 || height < 140 || height > 220) {
244
+ alert('Por favor ingresa valores válidos en todos los campos');
245
+ return;
246
+ }
247
+
248
+ // Calcular calorías (Harris-Benedict revisada por Mifflin-St Jeor)
249
+ let bmr;
250
+ if (gender === 'male') {
251
+ bmr = 10 * weight + 6.25 * height - 5 * age + 5;
252
+ } else {
253
+ bmr = 10 * weight + 6.25 * height - 5 * age - 161;
254
+ }
255
+
256
+ let tdee = bmr * activity;
257
+
258
+ // Ajustar según objetivo
259
+ let calorieAdjustment = 0;
260
+ switch(goal) {
261
+ case 'loss':
262
+ calorieAdjustment = -500;
263
+ break;
264
+ case 'gain':
265
+ calorieAdjustment = 500;
266
+ break;
267
+ default:
268
+ calorieAdjustment = 0;
269
+ }
270
+
271
+ const dailyCalories = Math.round(tdee + calorieAdjustment);
272
+
273
+ // Calcular macronutrientes
274
+ // Proteína: 2.2g/kg para pérdida de peso, 1.8g/kg para mantenimiento, 1.6g/kg para aumento
275
+ let proteinPerKg;
276
+ if (goal === 'loss') {
277
+ proteinPerKg = 2.2;
278
+ } else if (goal === 'maintenance') {
279
+ proteinPerKg = 1.8;
280
+ } else {
281
+ proteinPerKg = 1.6;
282
+ }
283
+
284
+ // Ajustar proteína si hay % grasa alto (>25%)
285
+ if (bodyfat > 25) {
286
+ proteinPerKg = Math.min(proteinPerKg + 0.2, 2.5);
287
+ }
288
+
289
+ const proteinGrams = Math.round(weight * proteinPerKg);
290
+ const proteinCalories = proteinGrams * 4;
291
+
292
+ // Grasas: 25-35% de calorías
293
+ const fatPercentage = 0.3; // 30%
294
+ const fatCalories = Math.round(dailyCalories * fatPercentage);
295
+ const fatGrams = Math.round(fatCalories / 9);
296
+
297
+ // Carbohidratos: resto de calorías
298
+ const carbsCalories = dailyCalories - proteinCalories - fatCalories;
299
+ const carbsGrams = Math.round(carbsCalories / 4);
300
+
301
+ // Agua recomendada
302
+ const waterIntake = Math.round((weight * 0.035) * 10) / 10; // 35ml por kg
303
+
304
+ // Mostrar resultados
305
+ document.getElementById('caloriesCircle').textContent = dailyCalories;
306
+ document.getElementById('proteinCircle').textContent = `${proteinGrams}g`;
307
+ document.getElementById('carbsCircle').textContent = `${carbsGrams}g`;
308
+
309
+ document.getElementById('proteinValue').textContent = `${proteinGrams}g`;
310
+ document.getElementById('carbsValue').textContent = `${carbsGrams}g`;
311
+ document.getElementById('fatValue').textContent = `${fatGrams}g`;
312
+ document.getElementById('waterValue').textContent = `${waterIntake}L`;
313
+
314
+ // Actualizar barras de progreso
315
+ document.getElementById('proteinBar').style.width = `${Math.min(proteinGrams / weight * 50, 100)}%`;
316
+ document.getElementById('carbsBar').style.width = `${Math.min(carbsGrams / (weight * 3) * 100, 100)}%`;
317
+ document.getElementById('fatBar').style.width = `${Math.min(fatGrams / (weight * 1.2) * 100, 100)}%`;
318
+
319
+ // Generar recomendaciones
320
+ generateRecommendations(goal, dailyCalories, proteinGrams, carbsGrams, fatGrams, waterIntake);
321
+
322
+ // Crear/actualizar gráfico
323
+ updateChart(proteinGrams, carbsGrams, fatGrams);
324
+
325
+ // Mostrar resultados
326
+ document.getElementById('results').classList.remove('hidden');
327
+
328
+ // Scroll a resultados
329
+ document.getElementById('results').scrollIntoView({ behavior: 'smooth' });
330
+ }
331
+
332
+ function generateRecommendations(goal, calories, protein, carbs, fat, water) {
333
+ const recommendationsEl = document.getElementById('recommendations');
334
+ recommendationsEl.innerHTML = '';
335
+
336
+ // Recomendación general según objetivo
337
+ let goalRecommendation = '';
338
+ switch(goal) {
339
+ case 'loss':
340
+ goalRecommendation = 'Para pérdida de peso, mantén un déficit calórico constante y prioriza proteínas para preservar masa muscular.';
341
+ break;
342
+ case 'maintenance':
343
+ goalRecommendation = 'Para mantenimiento, sigue una dieta balanceada y mantén tus niveles de actividad.';
344
+ break;
345
+ case 'gain':
346
+ goalRecommendation = 'Para aumento de peso, asegúrate de consumir suficientes calorías y proteínas para apoyar el crecimiento muscular.';
347
+ break;
348
+ }
349
+
350
+ addRecommendation(goalRecommendation);
351
+
352
+ // Recomendación de proteína
353
+ addRecommendation(`Consume aproximadamente ${protein}g de proteína diarios. Buenas fuentes incluyen carnes magras, pescado, huevos y lácteos.`);
354
+
355
+ // Recomendación de carbohidratos
356
+ if (goal === 'loss') {
357
+ addRecommendation(`Prioriza carbohidratos complejos (${carbs}g/día) como vegetales, granos enteros y legumbres para energía sostenida.`);
358
+ } else {
359
+ addRecommendation(`Consume ${carbs}g de carbohidratos diarios, priorizando fuentes complejas como arroz integral, quinoa y avena.`);
360
+ }
361
+
362
+ // Recomendación de grasas
363
+ addRecommendation(`Incluye ${fat}g de grasas saludables diarias de fuentes como aguacate, frutos secos, aceite de oliva y pescados grasos.`);
364
+
365
+ // Recomendación de agua
366
+ addRecommendation(`Bebe al menos ${water} litros de agua al día para mantener una hidratación óptima.`);
367
+
368
+ // Recomendación de comidas
369
+ addRecommendation('Distribuye tus macronutrientes en 3-5 comidas al día para mejor digestión y absorción.');
370
+
371
+ function addRecommendation(text) {
372
+ const div = document.createElement('div');
373
+ div.className = 'flex items-start';
374
+ div.innerHTML = `
375
+ <span class="text-blue-500 mr-3 mt-1"><i class="fas fa-check-circle"></i></span>
376
+ <span>${text}</span>
377
+ `;
378
+ recommendationsEl.appendChild(div);
379
+ }
380
+ }
381
+
382
+ function updateChart(protein, carbs, fat) {
383
+ const ctx = document.getElementById('macrosChart').getContext('2d');
384
+
385
+ // Destruir gráfico anterior si existe
386
+ if (macrosChart) {
387
+ macrosChart.destroy();
388
+ }
389
+
390
+ macrosChart = new Chart(ctx, {
391
+ type: 'doughnut',
392
+ data: {
393
+ labels: ['Proteína', 'Carbohidratos', 'Grasas'],
394
+ datasets: [{
395
+ data: [protein, carbs, fat],
396
+ backgroundColor: [
397
+ '#3b82f6',
398
+ '#f59e0b',
399
+ '#ef4444'
400
+ ],
401
+ borderWidth: 0
402
+ }]
403
+ },
404
+ options: {
405
+ responsive: true,
406
+ maintainAspectRatio: false,
407
+ plugins: {
408
+ legend: {
409
+ position: 'bottom',
410
+ labels: {
411
+ font: {
412
+ size: 14
413
+ },
414
+ padding: 20
415
+ }
416
+ },
417
+ tooltip: {
418
+ callbacks: {
419
+ label: function(context) {
420
+ const label = context.label || '';
421
+ const value = context.raw || 0;
422
+ const total = context.dataset.data.reduce((a, b) => a + b, 0);
423
+ const percentage = Math.round((value / total) * 100);
424
+ return `${label}: ${value}g (${percentage}%)`;
425
+ }
426
+ }
427
+ }
428
+ },
429
+ cutout: '70%'
430
+ }
431
+ });
432
+ }
433
+
434
+ // Inicializar
435
+ setGender('male');
436
+ </script>
437
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=andyontrade/macros" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
438
+ </html>