Spaces:

andyontrade
/

macros

Running

App Files Files Community

andyontrade commited on Apr 10

Commit

eb13a61

verified ·

1 Parent(s): a9ec097

Add 1 files

Browse files

Files changed (1) hide show

index.html +190 -97

index.html CHANGED Viewed

@@ -3,19 +3,26 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Calculadora de Macronutrientes</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
         .gradient-bg {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
         }
         .result-card {
             transition: all 0.3s ease;
         }
         .result-card:hover {
             transform: translateY(-5px);
-            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
         }
         .nutri-circle {
             width: 100px;
@@ -26,194 +33,260 @@
             justify-content: center;
             font-weight: bold;
             margin: 0 auto;
         }
         input[type="range"] {
             -webkit-appearance: none;
-            height: 8px;
-            border-radius: 5px;
             background: #e0e0e0;
             outline: none;
         }
         input[type="range"]::-webkit-slider-thumb {
             -webkit-appearance: none;
             appearance: none;
-            width: 20px;
-            height: 20px;
             border-radius: 50%;
-            background: #667eea;
             cursor: pointer;
         }
         .tab-btn {
             transition: all 0.3s ease;
         }
         .tab-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
             color: white;
         }
     </style>
 </head>
-<body class="min-h-screen bg-gray-50">
     <div class="gradient-bg text-white py-12 px-4 shadow-lg">
         <div class="max-w-4xl mx-auto text-center">
-            <h1 class="text-4xl font-bold mb-4">Calculadora de Macronutrientes</h1>
-            <p class="text-xl opacity-90">Calcula tus necesidades nutricionales personalizadas</p>
         </div>
     </div>
     <div class="max-w-4xl mx-auto px-4 py-8">
-        <div class="bg-white rounded-xl shadow-md p-6 mb-8">
-            <h2 class="text-2xl font-semibold text-gray-800 mb-6">Datos Personales</h2>
             <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                 <div>
-                    <label class="block text-gray-700 mb-2">Género</label>
                     <div class="flex space-x-4">
-                        <button id="maleBtn" class="gender-btn px-4 py-2 rounded-lg bg-blue-100 text-blue-700 font-medium">Hombre</button>
-                        <button id="femaleBtn" class="gender-btn px-4 py-2 rounded-lg bg-pink-100 text-pink-700 font-medium">Mujer</button>
                     </div>
                 </div>
                 <div>
-                    <label class="block text-gray-700 mb-2">Objetivo</label>
-                    <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">
-                        <option value="loss">Pérdida de peso</option>
-                        <option value="maintenance" selected>Mantenimiento</option>
-                        <option value="gain">Aumento de peso</option>
                     </select>
                 </div>
                 <div>
-                    <label class="block text-gray-700 mb-2">Edad (años)</label>
-                    <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">
                 </div>
                 <div>
-                    <label class="block text-gray-700 mb-2">Nivel de actividad</label>
-                    <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">
-                        <option value="1.2">Sedentario (poco o nada de ejercicio)</option>
-                        <option value="1.375">Ligero (ejercicio 1-3 días/semana)</option>
-                        <option value="1.55" selected>Moderado (ejercicio 3-5 días/semana)</option>
-                        <option value="1.725">Activo (ejercicio 6-7 días/semana)</option>
-                        <option value="1.9">Muy activo (ejercicio intenso diario)</option>
                     </select>
                 </div>
                 <div>
-                    <label class="block text-gray-700 mb-2">Peso (kg)</label>
-                    <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">
                 </div>
                 <div>
-                    <label class="block text-gray-700 mb-2">Altura (cm)</label>
-                    <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">
                 </div>
             </div>
             <div class="mt-6">
                 <div class="flex mb-4">
-                    <button id="manualTab" class="tab-btn px-4 py-2 rounded-l-lg border border-gray-300 font-medium active">Manual</button>
-                    <button id="calculateTab" class="tab-btn px-4 py-2 rounded-r-lg border border-gray-300 font-medium">Calcular % Grasa</button>
                 </div>
                 <div id="manualBodyfatSection">
-                    <label class="block text-gray-700 mb-2">% Grasa corporal</label>
                     <input type="range" id="bodyfat" class="w-full" min="5" max="50" value="20">
                     <div class="flex justify-between text-sm text-gray-600 mt-1">
-                        <span>5%</span>
                         <span id="bodyfatValue">20%</span>
-                        <span>50%</span>
                     </div>
                 </div>
                 <div id="calculateBodyfatSection" class="hidden">
                     <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
                         <div>
-                            <label class="block text-gray-700 mb-2">Cuello (cm)</label>
-                            <input type="number" id="neck" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" min="20" max="50" value="38">
                         </div>
                         <div>
-                            <label class="block text-gray-700 mb-2">Cintura (cm)</label>
-                            <input type="number" id="waist" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" min="50" max="150" value="80">
                         </div>
                         <div id="hipSection">
-                            <label class="block text-gray-700 mb-2">Cadera (cm)</label>
-                            <input type="number" id="hip" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" min="60" max="150" value="95">
                         </div>
                     </div>
-                    <button id="calculateBodyfatBtn" class="w-full bg-gray-200 text-gray-800 py-2 rounded-lg font-medium hover:bg-gray-300 transition duration-300">
-                        Calcular % Grasa
                     </button>
                 </div>
             </div>
             <div class="mt-8">
-                <button id="calculateBtn" class="w-full gradient-bg text-white py-3 rounded-lg font-bold text-lg hover:opacity-90 transition duration-300">
-                    Calcular mis macronutrientes
                 </button>
             </div>
         </div>
-        <div id="results" class="hidden bg-white rounded-xl shadow-md p-6 mb-8">
-            <h2 class="text-2xl font-semibold text-gray-800 mb-6">Tus resultados nutricionales</h2>
             <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
-                <div class="result-card bg-blue-50 rounded-xl p-6 text-center">
-                    <div class="nutri-circle bg-blue-100 text-blue-700 text-2xl mb-4" id="caloriesCircle">0</div>
-                    <h3 class="text-xl font-semibold text-blue-800 mb-2">Calorías diarias</h3>
                     <p class="text-gray-600">Recomendación basada en tus datos</p>
                 </div>
-                <div class="result-card bg-green-50 rounded-xl p-6 text-center">
-                    <div class="nutri-circle bg-green-100 text-green-700 text-2xl mb-4" id="proteinCircle">0g</div>
-                    <h3 class="text-xl font-semibold text-green-800 mb-2">Proteína</h3>
                     <p class="text-gray-600">Esencial para músculos y recuperación</p>
                 </div>
-                <div class="result-card bg-yellow-50 rounded-xl p-6 text-center">
-                    <div class="nutri-circle bg-yellow-100 text-yellow-700 text-2xl mb-4" id="carbsCircle">0g</div>
-                    <h3 class="text-xl font-semibold text-yellow-800 mb-2">Carbohidratos</h3>
                     <p class="text-gray-600">Energía para tu día y entrenamientos</p>
                 </div>
             </div>
             <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-                <div class="result-card bg-purple-50 rounded-xl p-6">
-                    <h3 class="text-xl font-semibold text-purple-800 mb-4">Distribución de macronutrientes</h3>
                     <div class="h-64 flex items-center justify-center">
                         <canvas id="macrosChart"></canvas>
                     </div>
                 </div>
-                <div class="result-card bg-red-50 rounded-xl p-6">
-                    <h3 class="text-xl font-semibold text-red-800 mb-4">Detalles nutricionales</h3>
                     <div class="space-y-4">
                         <div class="flex justify-between items-center">
-                            <span class="text-gray-700">Grasas</span>
                             <span class="font-semibold text-red-700" id="fatValue">0g</span>
                         </div>
-                        <div class="w-full bg-gray-200 rounded-full h-2.5">
-                            <div id="fatBar" class="bg-red-500 h-2.5 rounded-full" style="width: 0%"></div>
                         </div>
                         <div class="flex justify-between items-center">
-                            <span class="text-gray-700">Proteína</span>
                             <span class="font-semibold text-blue-700" id="proteinValue">0g</span>
                         </div>
-                        <div class="w-full bg-gray-200 rounded-full h-2.5">
-                            <div id="proteinBar" class="bg-blue-500 h-2.5 rounded-full" style="width: 0%"></div>
                         </div>
                         <div class="flex justify-between items-center">
-                            <span class="text-gray-700">Carbohidratos</span>
                             <span class="font-semibold text-yellow-700" id="carbsValue">0g</span>
                         </div>
-                        <div class="w-full bg-gray-200 rounded-full h-2.5">
-                            <div id="carbsBar" class="bg-yellow-500 h-2.5 rounded-full" style="width: 0%"></div>
                         </div>
                         <div class="pt-4 border-t border-gray-200">
                             <div class="flex justify-between items-center">
-                                <span class="text-gray-700 font-medium">Agua recomendada</span>
                                 <span class="font-semibold text-blue-700" id="waterValue">0L</span>
                             </div>
                         </div>
@@ -221,8 +294,10 @@
                 </div>
             </div>
-            <div class="mt-8 bg-gray-50 rounded-xl p-6">
-                <h3 class="text-xl font-semibold text-gray-800 mb-4">Recomendaciones personalizadas</h3>
                 <div id="recommendations" class="space-y-3 text-gray-700">
                     <!-- Las recomendaciones se generarán aquí -->
                 </div>
@@ -244,14 +319,17 @@
         document.getElementById('manualTab').addEventListener('click', () => switchBodyfatTab('manual'));
         document.getElementById('calculateTab').addEventListener('click', () => switchBodyfatTab('calculate'));
         document.getElementById('calculateBodyfatBtn').addEventListener('click', calculateBodyfatPercentage);
-        document.getElementById('gender').addEventListener('change', toggleHipInput);
         // Funciones
         function setGender(selectedGender) {
             gender = selectedGender;
             document.querySelectorAll('.gender-btn').forEach(btn => {
                 btn.classList.remove('gradient-bg', 'text-white');
-                btn.classList.add('bg-gray-100', 'text-gray-700');
             });
             if (selectedGender === 'male') {
@@ -309,7 +387,7 @@
             document.getElementById('bodyfatValue').textContent = `${Math.round(bodyfatPercentage)}%`;
             // Mostrar notificación de éxito
-            alert(`Tu porcentaje de grasa corporal calculado es: ${Math.round(bodyfatPercentage)}%`);
             // Cambiar a la pestaña manual para mostrar el resultado
             switchBodyfatTab('manual');
@@ -326,7 +404,7 @@
             // Validaciones básicas
             if (age < 15 || age > 100 || weight < 40 || weight > 200 || height < 140 || height > 220) {
-                alert('Por favor ingresa valores válidos en todos los campos');
                 return;
             }
@@ -422,42 +500,42 @@
             let goalRecommendation = '';
             switch(goal) {
                 case 'loss':
-                    goalRecommendation = 'Para pérdida de peso, mantén un déficit calórico constante y prioriza proteínas para preservar masa muscular.';
                     break;
                 case 'maintenance':
-                    goalRecommendation = 'Para mantenimiento, sigue una dieta balanceada y mantén tus niveles de actividad.';
                     break;
                 case 'gain':
-                    goalRecommendation = 'Para aumento de peso, asegúrate de consumir suficientes calorías y proteínas para apoyar el crecimiento muscular.';
                     break;
             }
             addRecommendation(goalRecommendation);
             // Recomendación de proteína
-            addRecommendation(`Consume aproximadamente ${protein}g de proteína diarios. Buenas fuentes incluyen carnes magras, pescado, huevos y lácteos.`);
             // Recomendación de carbohidratos
             if (goal === 'loss') {
-                addRecommendation(`Prioriza carbohidratos complejos (${carbs}g/día) como vegetales, granos enteros y legumbres para energía sostenida.`);
             } else {
-                addRecommendation(`Consume ${carbs}g de carbohidratos diarios, priorizando fuentes complejas como arroz integral, quinoa y avena.`);
             }
             // Recomendación de grasas
-            addRecommendation(`Incluye ${fat}g de grasas saludables diarias de fuentes como aguacate, frutos secos, aceite de oliva y pescados grasos.`);
             // Recomendación de agua
-            addRecommendation(`Bebe al menos ${water} litros de agua al día para mantener una hidratación óptima.`);
             // Recomendación de comidas
-            addRecommendation('Distribuye tus macronutrientes en 3-5 comidas al día para mejor digestión y absorción.');
             function addRecommendation(text) {
                 const div = document.createElement('div');
-                div.className = 'flex items-start';
                 div.innerHTML = `
-                    <span class="text-blue-500 mr-3 mt-1"><i class="fas fa-check-circle"></i></span>
                     <span>${text}</span>
                 `;
                 recommendationsEl.appendChild(div);
@@ -475,7 +553,7 @@
             macrosChart = new Chart(ctx, {
                 type: 'doughnut',
                 data: {
-                    labels: ['Proteína', 'Carbohidratos', 'Grasas'],
                     datasets: [{
                         data: [protein, carbs, fat],
                         backgroundColor: [
@@ -483,7 +561,8 @@
                             '#f59e0b',
                             '#ef4444'
                         ],
-                        borderWidth: 0
                     }]
                 },
                 options: {
@@ -494,9 +573,12 @@
                             position: 'bottom',
                             labels: {
                                 font: {
-                                    size: 14
                                 },
-                                padding: 20
                             }
                         },
                         tooltip: {
@@ -508,10 +590,21 @@
                                     const percentage = Math.round((value / total) * 100);
                                     return `${label}: ${value}g (${percentage}%)`;
                                 }
                             }
                         }
                     },
-                    cutout: '70%'
                 }
             });
         }

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Calculadora de Macronutrientes 🍎</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
         .gradient-bg {
+            background: linear-gradient(135deg, #8E2DE2 0%, #4A00E0 100%);
+        }
+        .gradient-bg-secondary {
+            background: linear-gradient(135deg, #f5af19 0%, #f12711 100%);
+        }
+        .gradient-bg-green {
+            background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
         }
         .result-card {
             transition: all 0.3s ease;
+            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
         }
         .result-card:hover {
             transform: translateY(-5px);
+            box-shadow: 0 10px 25px rgba(0,0,0,0.2);
         }
         .nutri-circle {
             width: 100px;
             justify-content: center;
             font-weight: bold;
             margin: 0 auto;
+            box-shadow: inset 0 0 10px rgba(0,0,0,0.1);
         }
         input[type="range"] {
             -webkit-appearance: none;
+            height: 12px;
+            border-radius: 10px;
             background: #e0e0e0;
             outline: none;
         }
         input[type="range"]::-webkit-slider-thumb {
             -webkit-appearance: none;
             appearance: none;
+            width: 25px;
+            height: 25px;
             border-radius: 50%;
+            background: #8E2DE2;
             cursor: pointer;
+            box-shadow: 0 0 5px rgba(0,0,0,0.3);
         }
         .tab-btn {
             transition: all 0.3s ease;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
         }
         .tab-btn.active {
+            background: linear-gradient(135deg, #8E2DE2 0%, #4A00E0 100%);
             color: white;
+            transform: translateY(-2px);
+        }
+        .emoji-input {
+            font-size: 1.2em;
+            margin-right: 5px;
+        }
+        .pulse-animation {
+            animation: pulse 2s infinite;
+        }
+        @keyframes pulse {
+            0% { transform: scale(1); }
+            50% { transform: scale(1.05); }
+            100% { transform: scale(1); }
         }
     </style>
 </head>
+<body class="min-h-screen bg-gradient-to-br from-blue-50 to-purple-50">
     <div class="gradient-bg text-white py-12 px-4 shadow-lg">
         <div class="max-w-4xl mx-auto text-center">
+            <h1 class="text-4xl font-bold mb-4">Calculadora de Macronutrientes 🍏</h1>
+            <p class="text-xl opacity-90">Calcula tus necesidades nutricionales personalizadas 📊</p>
         </div>
     </div>
     <div class="max-w-4xl mx-auto px-4 py-8">
+        <div class="bg-white rounded-2xl shadow-xl p-6 mb-8 border-2 border-purple-100">
+            <h2 class="text-2xl font-semibold text-gray-800 mb-6 flex items-center">
+                <span class="emoji-input">👤</span> Datos Personales
+            </h2>
             <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                 <div>
+                    <label class="block text-gray-700 mb-2 flex items-center">
+                        <span class="emoji-input">🚻</span> Género
+                    </label>
                     <div class="flex space-x-4">
+                        <button id="maleBtn" class="gender-btn px-4 py-3 rounded-xl bg-blue-100 text-blue-700 font-medium hover:bg-blue-200 transition duration-300 flex items-center">
+                            <span class="emoji-input">👨</span> Hombre
+                        </button>
+                        <button id="femaleBtn" class="gender-btn px-4 py-3 rounded-xl bg-pink-100 text-pink-700 font-medium hover:bg-pink-200 transition duration-300 flex items-center">
+                            <span class="emoji-input">👩</span> Mujer
+                        </button>
                     </div>
                 </div>
                 <div>
+                    <label class="block text-gray-700 mb-2 flex items-center">
+                        <span class="emoji-input">🎯</span> Objetivo
+                    </label>
+                    <select id="goal" class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent">
+                        <option value="loss">📉 Pérdida de peso</option>
+                        <option value="maintenance" selected>⚖️ Mantenimiento</option>
+                        <option value="gain">📈 Aumento de peso</option>
                     </select>
                 </div>
                 <div>
+                    <label class="block text-gray-700 mb-2 flex items-center">
+                        <span class="emoji-input">🎂</span> Edad (años)
+                    </label>
+                    <input type="number" id="age" class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent" min="15" max="100" value="30">
                 </div>
                 <div>
+                    <label class="block text-gray-700 mb-2 flex items-center">
+                        <span class="emoji-input">🏃</span> Nivel de actividad
+                    </label>
+                    <select id="activity" class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent">
+                        <option value="1.2">🛋️ Sedentario (poco o nada de ejercicio)</option>
+                        <option value="1.375">🚶‍♂️ Ligero (ejercicio 1-3 días/semana)</option>
+                        <option value="1.55" selected>🏋️‍♂️ Moderado (ejercicio 3-5 días/semana)</option>
+                        <option value="1.725">🚴‍♀️ Activo (ejercicio 6-7 días/semana)</option>
+                        <option value="1.9">🔥 Muy activo (ejercicio intenso diario)</option>
                     </select>
                 </div>
                 <div>
+                    <label class="block text-gray-700 mb-2 flex items-center">
+                        <span class="emoji-input">⚖️</span> Peso (kg)
+                    </label>
+                    <input type="number" id="weight" class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent" min="40" max="200" value="70">
                 </div>
                 <div>
+                    <label class="block text-gray-700 mb-2 flex items-center">
+                        <span class="emoji-input">📏</span> Altura (cm)
+                    </label>
+                    <input type="number" id="height" class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent" min="140" max="220" value="170">
                 </div>
             </div>
             <div class="mt-6">
                 <div class="flex mb-4">
+                    <button id="manualTab" class="tab-btn px-4 py-3 rounded-l-xl border-2 border-gray-200 font-medium active flex items-center">
+                        <span class="emoji-input">✋</span> Manual
+                    </button>
+                    <button id="calculateTab" class="tab-btn px-4 py-3 rounded-r-xl border-2 border-gray-200 font-medium flex items-center">
+                        <span class="emoji-input">🧮</span> Calcular % Grasa
+                    </button>
                 </div>
                 <div id="manualBodyfatSection">
+                    <label class="block text-gray-700 mb-2 flex items-center">
+                        <span class="emoji-input">💪</span> % Grasa corporal
+                    </label>
                     <input type="range" id="bodyfat" class="w-full" min="5" max="50" value="20">
                     <div class="flex justify-between text-sm text-gray-600 mt-1">
+                        <span>5% 🏃‍♂️</span>
                         <span id="bodyfatValue">20%</span>
+                        <span>50% 🍔</span>
                     </div>
                 </div>
                 <div id="calculateBodyfatSection" class="hidden">
                     <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
                         <div>
+                            <label class="block text-gray-700 mb-2 flex items-center">
+                                <span class="emoji-input">👔</span> Cuello (cm)
+                            </label>
+                            <input type="number" id="neck" class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent" min="20" max="50" value="38">
                         </div>
                         <div>
+                            <label class="block text-gray-700 mb-2 flex items-center">
+                                <span class="emoji-input">👖</span> Cintura (cm)
+                            </label>
+                            <input type="number" id="waist" class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent" min="50" max="150" value="80">
                         </div>
                         <div id="hipSection">
+                            <label class="block text-gray-700 mb-2 flex items-center">
+                                <span class="emoji-input">👗</span> Cadera (cm)
+                            </label>
+                            <input type="number" id="hip" class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent" min="60" max="150" value="95">
                         </div>
                     </div>
+                    <button id="calculateBodyfatBtn" class="w-full gradient-bg-secondary text-white py-3 rounded-xl font-bold text-lg hover:opacity-90 transition duration-300 flex items-center justify-center pulse-animation">
+                        <span class="emoji-input">🧠</span> Calcular % Grasa
                     </button>
                 </div>
             </div>
             <div class="mt-8">
+                <button id="calculateBtn" class="w-full gradient-bg text-white py-4 rounded-xl font-bold text-lg hover:opacity-90 transition duration-300 flex items-center justify-center pulse-animation">
+                    <span class="emoji-input">✨</span> Calcular mis macronutrientes
                 </button>
             </div>
         </div>
+        <div id="results" class="hidden bg-white rounded-2xl shadow-xl p-6 mb-8 border-2 border-purple-100">
+            <h2 class="text-2xl font-semibold text-gray-800 mb-6 flex items-center">
+                <span class="emoji-input">📊</span> Tus resultados nutricionales
+            </h2>
             <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
+                <div class="result-card bg-gradient-to-br from-blue-50 to-indigo-50 rounded-2xl p-6 text-center border-2 border-blue-100">
+                    <div class="nutri-circle bg-gradient-to-br from-blue-100 to-blue-200 text-blue-700 text-3xl mb-4" id="caloriesCircle">0</div>
+                    <h3 class="text-xl font-semibold text-blue-800 mb-2 flex items-center justify-center">
+                        <span class="emoji-input">🔥</span> Calorías diarias
+                    </h3>
                     <p class="text-gray-600">Recomendación basada en tus datos</p>
                 </div>
+                <div class="result-card bg-gradient-to-br from-green-50 to-teal-50 rounded-2xl p-6 text-center border-2 border-green-100">
+                    <div class="nutri-circle bg-gradient-to-br from-green-100 to-green-200 text-green-700 text-3xl mb-4" id="proteinCircle">0g</div>
+                    <h3 class="text-xl font-semibold text-green-800 mb-2 flex items-center justify-center">
+                        <span class="emoji-input">🍗</span> Proteína
+                    </h3>
                     <p class="text-gray-600">Esencial para músculos y recuperación</p>
                 </div>
+                <div class="result-card bg-gradient-to-br from-yellow-50 to-amber-50 rounded-2xl p-6 text-center border-2 border-yellow-100">
+                    <div class="nutri-circle bg-gradient-to-br from-yellow-100 to-yellow-200 text-yellow-700 text-3xl mb-4" id="carbsCircle">0g</div>
+                    <h3 class="text-xl font-semibold text-yellow-800 mb-2 flex items-center justify-center">
+                        <span class="emoji-input">🍞</span> Carbohidratos
+                    </h3>
                     <p class="text-gray-600">Energía para tu día y entrenamientos</p>
                 </div>
             </div>
             <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <div class="result-card bg-gradient-to-br from-purple-50 to-indigo-50 rounded-2xl p-6 border-2 border-purple-100">
+                    <h3 class="text-xl font-semibold text-purple-800 mb-4 flex items-center">
+                        <span class="emoji-input">📊</span> Distribución de macronutrientes
+                    </h3>
                     <div class="h-64 flex items-center justify-center">
                         <canvas id="macrosChart"></canvas>
                     </div>
                 </div>
+                <div class="result-card bg-gradient-to-br from-red-50 to-pink-50 rounded-2xl p-6 border-2 border-red-100">
+                    <h3 class="text-xl font-semibold text-red-800 mb-4 flex items-center">
+                        <span class="emoji-input">🔍</span> Detalles nutricionales
+                    </h3>
                     <div class="space-y-4">
                         <div class="flex justify-between items-center">
+                            <span class="text-gray-700 flex items-center">
+                                <span class="emoji-input">🥑</span> Grasas
+                            </span>
                             <span class="font-semibold text-red-700" id="fatValue">0g</span>
                         </div>
+                        <div class="w-full bg-gray-200 rounded-full h-3">
+                            <div id="fatBar" class="bg-gradient-to-r from-red-400 to-red-600 h-3 rounded-full" style="width: 0%"></div>
                         </div>
                         <div class="flex justify-between items-center">
+                            <span class="text-gray-700 flex items-center">
+                                <span class="emoji-input">🍗</span> Proteína
+                            </span>
                             <span class="font-semibold text-blue-700" id="proteinValue">0g</span>
                         </div>
+                        <div class="w-full bg-gray-200 rounded-full h-3">
+                            <div id="proteinBar" class="bg-gradient-to-r from-blue-400 to-blue-600 h-3 rounded-full" style="width: 0%"></div>
                         </div>
                         <div class="flex justify-between items-center">
+                            <span class="text-gray-700 flex items-center">
+                                <span class="emoji-input">🍞</span> Carbohidratos
+                            </span>
                             <span class="font-semibold text-yellow-700" id="carbsValue">0g</span>
                         </div>
+                        <div class="w-full bg-gray-200 rounded-full h-3">
+                            <div id="carbsBar" class="bg-gradient-to-r from-yellow-400 to-yellow-600 h-3 rounded-full" style="width: 0%"></div>
                         </div>
                         <div class="pt-4 border-t border-gray-200">
                             <div class="flex justify-between items-center">
+                                <span class="text-gray-700 font-medium flex items-center">
+                                    <span class="emoji-input">💧</span> Agua recomendada
+                                </span>
                                 <span class="font-semibold text-blue-700" id="waterValue">0L</span>
                             </div>
                         </div>
                 </div>
             </div>
+            <div class="mt-8 bg-gradient-to-br from-gray-50 to-gray-100 rounded-2xl p-6 border-2 border-gray-200">
+                <h3 class="text-xl font-semibold text-gray-800 mb-4 flex items-center">
+                    <span class="emoji-input">💡</span> Recomendaciones personalizadas
+                </h3>
                 <div id="recommendations" class="space-y-3 text-gray-700">
                     <!-- Las recomendaciones se generarán aquí -->
                 </div>
         document.getElementById('manualTab').addEventListener('click', () => switchBodyfatTab('manual'));
         document.getElementById('calculateTab').addEventListener('click', () => switchBodyfatTab('calculate'));
         document.getElementById('calculateBodyfatBtn').addEventListener('click', calculateBodyfatPercentage);
         // Funciones
         function setGender(selectedGender) {
             gender = selectedGender;
             document.querySelectorAll('.gender-btn').forEach(btn => {
                 btn.classList.remove('gradient-bg', 'text-white');
+                if (btn.id === 'maleBtn') {
+                    btn.classList.add('bg-blue-100', 'text-blue-700');
+                } else {
+                    btn.classList.add('bg-pink-100', 'text-pink-700');
+                }
             });
             if (selectedGender === 'male') {
             document.getElementById('bodyfatValue').textContent = `${Math.round(bodyfatPercentage)}%`;
             // Mostrar notificación de éxito
+            alert(`🎉 Tu porcentaje de grasa corporal calculado es: ${Math.round(bodyfatPercentage)}%`);
             // Cambiar a la pestaña manual para mostrar el resultado
             switchBodyfatTab('manual');
             // Validaciones básicas
             if (age < 15 || age > 100 || weight < 40 || weight > 200 || height < 140 || height > 220) {
+                alert('⚠️ Por favor ingresa valores válidos en todos los campos');
                 return;
             }
             let goalRecommendation = '';
             switch(goal) {
                 case 'loss':
+                    goalRecommendation = 'Para pérdida de peso 🏃‍♂️, mantén un déficit calórico constante y prioriza proteínas para preservar masa muscular 💪.';
                     break;
                 case 'maintenance':
+                    goalRecommendation = 'Para mantenimiento ⚖️, sigue una dieta balanceada y mantén tus niveles de actividad 🚶‍♀️.';
                     break;
                 case 'gain':
+                    goalRecommendation = 'Para aumento de peso 📈, asegúrate de consumir suficientes calorías y proteínas para apoyar el crecimiento muscular 🏋️‍♂️.';
                     break;
             }
             addRecommendation(goalRecommendation);
             // Recomendación de proteína
+            addRecommendation(`Consume aproximadamente ${protein}g de proteína diarios 🍗. Buenas fuentes incluyen carnes magras, pescado 🐟, huevos 🥚 y lácteos 🧀.`);
             // Recomendación de carbohidratos
             if (goal === 'loss') {
+                addRecommendation(`Prioriza carbohidratos complejos (${carbs}g/día) como vegetales 🥦, granos enteros 🌾 y legumbres para energía sostenida ⚡.`);
             } else {
+                addRecommendation(`Consume ${carbs}g de carbohidratos diarios 🍞, priorizando fuentes complejas como arroz integral 🍚, quinoa y avena 🥣.`);
             }
             // Recomendación de grasas
+            addRecommendation(`Incluye ${fat}g de grasas saludables diarias 🥑 de fuentes como aguacate, frutos secos 🥜, aceite de oliva y pescados grasos 🐠.`);
             // Recomendación de agua
+            addRecommendation(`Bebe al menos ${water} litros de agua al día 💧 para mantener una hidratación óptima.`);
             // Recomendación de comidas
+            addRecommendation('Distribuye tus macronutrientes en 3-5 comidas al día 🍽️ para mejor digestión y absorción.');
             function addRecommendation(text) {
                 const div = document.createElement('div');
+                div.className = 'flex items-start bg-white p-4 rounded-lg border border-gray-200';
                 div.innerHTML = `
+                    <span class="text-purple-500 mr-3 mt-1"><i class="fas fa-check-circle"></i></span>
                     <span>${text}</span>
                 `;
                 recommendationsEl.appendChild(div);
             macrosChart = new Chart(ctx, {
                 type: 'doughnut',
                 data: {
+                    labels: ['Proteína 🍗', 'Carbohidratos 🍞', 'Grasas 🥑'],
                     datasets: [{
                         data: [protein, carbs, fat],
                         backgroundColor: [
                             '#f59e0b',
                             '#ef4444'
                         ],
+                        borderWidth: 0,
+                        hoverOffset: 10
                     }]
                 },
                 options: {
                             position: 'bottom',
                             labels: {
                                 font: {
+                                    size: 14,
+                                    family: 'sans-serif'
                                 },
+                                padding: 20,
+                                usePointStyle: true,
+                                pointStyle: 'circle'
                             }
                         },
                         tooltip: {
                                     const percentage = Math.round((value / total) * 100);
                                     return `${label}: ${value}g (${percentage}%)`;
                                 }
+                            },
+                            bodyFont: {
+                                size: 14
+                            },
+                            titleFont: {
+                                size: 16,
+                                weight: 'bold'
                             }
                         }
                     },
+                    cutout: '70%',
+                    animation: {
+                        animateScale: true,
+                        animateRotate: true
+                    }
                 }
             });
         }