Add 1 files

index.html

@@ -96,6 +96,13 @@
             font-weight: bold;
             color: #4A00E0;
         }
+        .meal-plan-card {
+            transition: all 0.3s ease;
+            border-left: 4px solid;
+        }
+        .meal-plan-card:hover {
+            transform: translateX(5px);
+        }
         @keyframes pulse {
             0% { transform: scale(1); }
             50% { transform: scale(1.05); }
@@ -167,7 +174,7 @@
                     <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">
+                    <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>
@@ -292,6 +299,25 @@
                 </div>
             </div>
             
+            <!-- Nueva sección para seleccionar número de comidas -->
+            <div class="mt-6">
+                <h3 class="text-xl font-semibold text-gray-800 mb-4 flex items-center">
+                    <span class="emoji-input">🍽️</span> Plan de Comidas
+                </h3>
+                
+                <div class="mb-4">
+                    <label class="block text-gray-700 mb-2 flex items-center">
+                        <span class="emoji-input">⏱️</span> Número de comidas al día
+                    </label>
+                    <select id="mealsPerDay" 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="3">3 comidas (Desayuno, Almuerzo, Cena)</option>
+                        <option value="4" selected>4 comidas (Desayuno, Almuerzo, Merienda, Cena)</option>
+                        <option value="5">5 comidas (Desayuno, Media mañana, Almuerzo, Merienda, Cena)</option>
+                        <option value="6">6 comidas (3 comidas principales + 3 snacks)</option>
+                    </select>
+                </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
@@ -387,6 +413,17 @@
                 </div>
             </div>
             
+            <!-- Nueva sección de plan de comidas -->
+            <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> Plan de Comidas Diario
+                </h3>
+                
+                <div id="mealPlanContainer" class="space-y-4">
+                    <!-- El plan de comidas se generará aquí dinámicamente -->
+                </div>
+            </div>
+            
             <!-- Nueva sección de alimentos recomendados -->
             <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">
@@ -667,6 +704,7 @@
             const goal = document.getElementById('goal').value;
             const bodyfat = parseInt(document.getElementById('bodyfat').value) || 20;
             const useCustomMacros = document.getElementById('customMacrosToggle').checked;
+            const mealsPerDay = parseInt(document.getElementById('mealsPerDay').value);
             
             // Validaciones básicas
             if (age < 15 || age > 100 || weight < 40 || weight > 200 || height < 140 || height > 220) {
@@ -775,6 +813,9 @@
             // Generar recomendaciones
             generateRecommendations(goal, dailyCalories, proteinGrams, carbsGrams, fatGrams, waterIntake, useCustomMacros);
             
+            // Generar plan de comidas
+            generateMealPlan(mealsPerDay, dailyCalories, proteinGrams, carbsGrams, fatGrams);
+            
             // Crear/actualizar gráfico
             updateChart(proteinGrams, carbsGrams, fatGrams);
             
@@ -785,7 +826,135 @@
             document.getElementById('results').scrollIntoView({ behavior: 'smooth' });
         }
         
-        function generateRecommendations(goal, calories, protein, carbs, fat, water, customMacros) {
+        function generateMealPlan(mealsPerDay, calories, protein, carbs, fat) {
+            const mealPlanContainer = document.getElementById('mealPlanContainer');
+            mealPlanContainer.innerHTML = '';
+            
+            // Calcular macros por comida
+            const proteinPerMeal = Math.round(protein / mealsPerDay);
+            const carbsPerMeal = Math.round(carbs / mealsPerDay);
+            const fatPerMeal = Math.round(fat / mealsPerDay);
+            const caloriesPerMeal = Math.round(calories / mealsPerDay);
+            
+            // Definir nombres de comidas según cantidad
+            const mealNames = {
+                3: ['Desayuno', 'Almuerzo', 'Cena'],
+                4: ['Desayuno', 'Almuerzo', 'Merienda', 'Cena'],
+                5: ['Desayuno', 'Media mañana', 'Almuerzo', 'Merienda', 'Cena'],
+                6: ['Desayuno', 'Snack mañana', 'Almuerzo', 'Merienda', 'Cena', 'Snack noche']
+            };
+            
+            // Generar cada comida
+            for (let i = 0; i < mealsPerDay; i++) {
+                const mealName = mealNames[mealsPerDay][i];
+                const mealType = getMealType(i, mealsPerDay);
+                
+                const mealCard = document.createElement('div');
+                mealCard.className = `meal-plan-card bg-white p-4 rounded-lg shadow-sm border-l-4 ${getMealColorClass(mealType)}`;
+                
+                // Sugerir alimentos según el tipo de comida
+                const foodSuggestions = getFoodSuggestions(mealType, proteinPerMeal, carbsPerMeal, fatPerMeal);
+                
+                mealCard.innerHTML = `
+                    <div class="flex justify-between items-start mb-2">
+                        <h4 class="text-lg font-semibold text-gray-800 flex items-center">
+                            <span class="emoji-input">${getMealEmoji(mealType)}</span> ${mealName}
+                        </h4>
+                        <span class="text-sm font-medium text-gray-500">${caloriesPerMeal} kcal</span>
+                    </div>
+                    <div class="grid grid-cols-3 gap-2 text-sm mb-3">
+                        <div class="bg-blue-50 text-blue-700 px-2 py-1 rounded text-center">
+                            <span class="font-medium">${proteinPerMeal}g</span> proteína
+                        </div>
+                        <div class="bg-yellow-50 text-yellow-700 px-2 py-1 rounded text-center">
+                            <span class="font-medium">${carbsPerMeal}g</span> carbos
+                        </div>
+                        <div class="bg-red-50 text-red-700 px-2 py-1 rounded text-center">
+                            <span class="font-medium">${fatPerMeal}g</span> grasas
+                        </div>
+                    </div>
+                    <div class="text-sm text-gray-700">
+                        <p class="font-medium mb-1">Sugerencias:</p>
+                        <ul class="list-disc list-inside space-y-1">
+                            ${foodSuggestions.map(item => `<li>${item}</li>`).join('')}
+                        </ul>
+                    </div>
+                `;
+                
+                mealPlanContainer.appendChild(mealCard);
+            }
+        }
+        
+        function getMealType(mealIndex, totalMeals) {
+            if (totalMeals === 3) {
+                return mealIndex === 0 ? 'breakfast' : mealIndex === 1 ? 'lunch' : 'dinner';
+            } else if (totalMeals === 4) {
+                return mealIndex === 0 ? 'breakfast' : mealIndex === 1 ? 'lunch' : mealIndex === 2 ? 'snack' : 'dinner';
+            } else if (totalMeals === 5) {
+                return mealIndex === 0 ? 'breakfast' : mealIndex === 1 ? 'snack' : mealIndex === 2 ? 'lunch' : mealIndex === 3 ? 'snack' : 'dinner';
+            } else {
+                return mealIndex === 0 ? 'breakfast' : mealIndex % 2 === 1 ? 'snack' : mealIndex === 2 ? 'lunch' : 'dinner';
+            }
+        }
+        
+        function getMealColorClass(mealType) {
+            switch(mealType) {
+                case 'breakfast': return 'border-blue-400 bg-blue-50';
+                case 'lunch': return 'border-green-400 bg-green-50';
+                case 'dinner': return 'border-purple-400 bg-purple-50';
+                case 'snack': return 'border-yellow-400 bg-yellow-50';
+                default: return 'border-gray-400 bg-gray-50';
+            }
+        }
+        
+        function getMealEmoji(mealType) {
+            switch(mealType) {
+                case 'breakfast': return '🥣';
+                case 'lunch': return '🍲';
+                case 'dinner': return '🍽️';
+                case 'snack': return '🍎';
+                default: return '🍴';
+            }
+        }
+        
+        function getFoodSuggestions(mealType, protein, carbs, fat) {
+            const suggestions = [];
+            
+            // Proteínas
+            if (mealType === 'breakfast') {
+                suggestions.push(`Huevos (${Math.min(3, Math.round(protein/6))} unidades)`);
+                suggestions.push(`Requesón (${Math.round(protein/12*100)}g)`);
+            } else if (mealType === 'lunch' || mealType === 'dinner') {
+                suggestions.push(`Pollo (${Math.round(protein/30*100)}g)`);
+                suggestions.push(`Pescado (${Math.round(protein/25*100)}g)`);
+            } else {
+                suggestions.push(`Yogur griego (${Math.round(protein/10*100)}g)`);
+            }
+            
+            // Carbohidratos
+            if (mealType === 'breakfast') {
+                suggestions.push(`Avena (${Math.round(carbs/66*100)}g)`);
+                suggestions.push(`Pan integral (${Math.round(carbs/50*100)}g)`);
+            } else if (mealType === 'lunch' || mealType === 'dinner') {
+                suggestions.push(`Arroz integral (${Math.round(carbs/28*100)}g)`);
+                suggestions.push(`Quinoa (${Math.round(carbs/21*100)}g)`);
+            } else {
+                suggestions.push(`Fruta (${Math.round(carbs/20*100)}g)`);
+            }
+            
+            // Grasas
+            if (mealType === 'breakfast') {
+                suggestions.push(`Aguacate (${Math.round(fat/15*100)}g)`);
+            } else if (mealType === 'lunch' || mealType === 'dinner') {
+                suggestions.push(`Aceite de oliva (${Math.round(fat/100*10)}ml)`);
+            } else {
+                suggestions.push(`Frutos secos (${Math.round(fat/50*30)}g)`);
+            }
+            
+            return suggestions;
+        }
+        
+        function generateRecommendations(goal, dailyCalories, proteinGrams, carbsGrams, fatGrams, waterIntake, useCustomMacros) {
             const recommendationsEl = document.getElementById('recommendations');
             recommendationsEl.innerHTML = '';
             
@@ -805,7 +974,7 @@
             
             addRecommendation(goalRecommendation);
             
-            if (customMacros) {
+            if (useCustomMacros) {
                 addRecommendation('Estás usando una distribución personalizada de macronutrientes 🎛️. Asegúrate de seguir tus porcentajes establecidos.');
             } else {
                 // Recomendación basada en valores por defecto
@@ -813,20 +982,20 @@
             }
             
             // Recomendación de proteína
-            addRecommendation(`Consume aproximadamente ${protein}g de proteína diarios 🍗. Buenas fuentes incluyen carnes magras, pescado 🐟, huevos 🥚 y lácteos 🧀.`);
+            addRecommendation(`Consume aproximadamente ${proteinGrams}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 ⚡.`);
+                addRecommendation(`Prioriza carbohidratos complejos (${carbsGrams}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 🥣.`);
+                addRecommendation(`Consume ${carbsGrams}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 🐠.`);
+            addRecommendation(`Incluye ${fatGrams}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.`);
+            addRecommendation(`Bebe al menos ${waterIntake} 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.');