Add 1 files

index.html

@@ -81,6 +81,21 @@
             border-left: 5px solid;
             border-radius: 8px 0 0 8px;
         }
+        .macro-slider-container {
+            background-color: #f8f9fa;
+            border-radius: 10px;
+            padding: 15px;
+            margin-bottom: 15px;
+        }
+        .macro-slider-label {
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 5px;
+        }
+        .macro-percentage {
+            font-weight: bold;
+            color: #4A00E0;
+        }
         @keyframes pulse {
             0% { transform: scale(1); }
             50% { transform: scale(1.05); }
@@ -152,7 +167,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>
@@ -212,6 +227,71 @@
                 </div>
             </div>
             
+            <!-- Nueva sección para personalizar macros -->
+            <div class="mt-8">
+                <h3 class="text-xl font-semibold text-gray-800 mb-4 flex items-center">
+                    <span class="emoji-input">⚖️</span> Distribución de Macronutrientes
+                </h3>
+                
+                <div class="mb-4">
+                    <div class="flex items-center mb-2">
+                        <input type="checkbox" id="customMacrosToggle" class="mr-2 h-5 w-5">
+                        <label for="customMacrosToggle" class="text-gray-700 font-medium flex items-center">
+                            <span class="emoji-input">🎛️</span> Personalizar distribución de macros
+                        </label>
+                    </div>
+                    <p class="text-sm text-gray-500 mb-4">Deja desmarcado para usar valores recomendados según tu objetivo</p>
+                </div>
+                
+                <div id="customMacrosSection" class="hidden">
+                    <div class="macro-slider-container">
+                        <div class="macro-slider-label">
+                            <span class="flex items-center">
+                                <span class="emoji-input">🍗</span> Proteína (%)
+                            </span>
+                            <span id="proteinPercentValue" class="macro-percentage">30%</span>
+                        </div>
+                        <input type="range" id="proteinPercent" class="w-full" min="10" max="50" value="30" step="1">
+                        <div class="flex justify-between text-xs text-gray-500 mt-1">
+                            <span>10%</span>
+                            <span>50%</span>
+                        </div>
+                    </div>
+                    
+                    <div class="macro-slider-container">
+                        <div class="macro-slider-label">
+                            <span class="flex items-center">
+                                <span class="emoji-input">🥑</span> Grasas (%)
+                            </span>
+                            <span id="fatPercentValue" class="macro-percentage">30%</span>
+                        </div>
+                        <input type="range" id="fatPercent" class="w-full" min="10" max="50" value="30" step="1">
+                        <div class="flex justify-between text-xs text-gray-500 mt-1">
+                            <span>10%</span>
+                            <span>50%</span>
+                        </div>
+                    </div>
+                    
+                    <div class="macro-slider-container">
+                        <div class="macro-slider-label">
+                            <span class="flex items-center">
+                                <span class="emoji-input">🍞</span> Carbohidratos (%)
+                            </span>
+                            <span id="carbsPercentValue" class="macro-percentage">40%</span>
+                        </div>
+                        <input type="range" id="carbsPercent" class="w-full" min="10" max="80" value="40" step="1">
+                        <div class="flex justify-between text-xs text-gray-500 mt-1">
+                            <span>10%</span>
+                            <span>80%</span>
+                        </div>
+                        <div class="mt-2 text-sm text-gray-600">
+                            <span id="totalPercent" class="font-bold">Total: 100%</span>
+                            <span id="percentError" class="text-red-500 ml-2 hidden">⚠️ La suma debe ser 100%</span>
+                        </div>
+                    </div>
+                </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
@@ -464,6 +544,12 @@
         document.getElementById('manualTab').addEventListener('click', () => switchBodyfatTab('manual'));
         document.getElementById('calculateTab').addEventListener('click', () => switchBodyfatTab('calculate'));
         document.getElementById('calculateBodyfatBtn').addEventListener('click', calculateBodyfatPercentage);
+        document.getElementById('customMacrosToggle').addEventListener('change', toggleCustomMacros);
+        
+        // Sliders de macros personalizados
+        document.getElementById('proteinPercent').addEventListener('input', updateMacroPercentages);
+        document.getElementById('fatPercent').addEventListener('input', updateMacroPercentages);
+        document.getElementById('carbsPercent').addEventListener('input', updateMacroPercentages);
         
         // Funciones
         function setGender(selectedGender) {
@@ -507,6 +593,40 @@
             document.getElementById('bodyfatValue').textContent = `${bodyfat}%`;
         }
         
+        function toggleCustomMacros() {
+            const customMacrosSection = document.getElementById('customMacrosSection');
+            if (document.getElementById('customMacrosToggle').checked) {
+                customMacrosSection.classList.remove('hidden');
+                // Actualizar porcentajes iniciales
+                updateMacroPercentages();
+            } else {
+                customMacrosSection.classList.add('hidden');
+            }
+        }
+        
+        function updateMacroPercentages() {
+            const proteinPercent = parseInt(document.getElementById('proteinPercent').value);
+            const fatPercent = parseInt(document.getElementById('fatPercent').value);
+            const carbsPercent = parseInt(document.getElementById('carbsPercent').value);
+            
+            // Actualizar valores mostrados
+            document.getElementById('proteinPercentValue').textContent = `${proteinPercent}%`;
+            document.getElementById('fatPercentValue').textContent = `${fatPercent}%`;
+            document.getElementById('carbsPercentValue').textContent = `${carbsPercent}%`;
+            
+            // Calcular total
+            const total = proteinPercent + fatPercent + carbsPercent;
+            document.getElementById('totalPercent').textContent = `Total: ${total}%`;
+            
+            // Mostrar error si no suma 100%
+            const errorElement = document.getElementById('percentError');
+            if (total !== 100) {
+                errorElement.classList.remove('hidden');
+            } else {
+                errorElement.classList.add('hidden');
+            }
+        }
+        
         function calculateBodyfatPercentage() {
             const neck = parseFloat(document.getElementById('neck').value);
             const waist = parseFloat(document.getElementById('waist').value);
@@ -546,6 +666,7 @@
             const activity = parseFloat(document.getElementById('activity').value);
             const goal = document.getElementById('goal').value;
             const bodyfat = parseInt(document.getElementById('bodyfat').value) || 20;
+            const useCustomMacros = document.getElementById('customMacrosToggle').checked;
             
             // Validaciones básicas
             if (age < 15 || age > 100 || weight < 40 || weight > 200 || height < 140 || height > 220) {
@@ -553,6 +674,19 @@
                 return;
             }
             
+            // Validar porcentajes de macros si está usando valores personalizados
+            if (useCustomMacros) {
+                const proteinPercent = parseInt(document.getElementById('proteinPercent').value);
+                const fatPercent = parseInt(document.getElementById('fatPercent').value);
+                const carbsPercent = parseInt(document.getElementById('carbsPercent').value);
+                const total = proteinPercent + fatPercent + carbsPercent;
+                
+                if (total !== 100) {
+                    alert('⚠️ La suma de los porcentajes de macronutrientes debe ser exactamente 100%');
+                    return;
+                }
+            }
+            
             // Calcular calorías (Harris-Benedict revisada por Mifflin-St Jeor)
             let bmr;
             if (gender === 'male') {
@@ -579,33 +713,47 @@
             const dailyCalories = Math.round(tdee + calorieAdjustment);
             
             // Calcular macronutrientes
-            // Proteína: 2.2g/kg para pérdida de peso, 1.8g/kg para mantenimiento, 1.6g/kg para aumento
-            let proteinPerKg;
-            if (goal === 'loss') {
-                proteinPerKg = 2.2;
-            } else if (goal === 'maintenance') {
-                proteinPerKg = 1.8;
-            } else {
-                proteinPerKg = 1.6;
-            }
+            let proteinGrams, fatGrams, carbsGrams;
             
-            // Ajustar proteína si hay % grasa alto (>25%)
-            if (bodyfat > 25) {
-                proteinPerKg = Math.min(proteinPerKg + 0.2, 2.5);
+            if (useCustomMacros) {
+                // Usar porcentajes personalizados
+                const proteinPercent = parseInt(document.getElementById('proteinPercent').value);
+                const fatPercent = parseInt(document.getElementById('fatPercent').value);
+                const carbsPercent = parseInt(document.getElementById('carbsPercent').value);
+                
+                proteinGrams = Math.round((dailyCalories * proteinPercent / 100) / 4);
+                fatGrams = Math.round((dailyCalories * fatPercent / 100) / 9);
+                carbsGrams = Math.round((dailyCalories * carbsPercent / 100) / 4);
+            } else {
+                // Usar valores recomendados según objetivo
+                // Proteína: 2.2g/kg para pérdida de peso, 1.8g/kg para mantenimiento, 1.6g/kg para aumento
+                let proteinPerKg;
+                if (goal === 'loss') {
+                    proteinPerKg = 2.2;
+                } else if (goal === 'maintenance') {
+                    proteinPerKg = 1.8;
+                } else {
+                    proteinPerKg = 1.6;
+                }
+                
+                // Ajustar proteína si hay % grasa alto (>25%)
+                if (bodyfat > 25) {
+                    proteinPerKg = Math.min(proteinPerKg + 0.2, 2.5);
+                }
+                
+                proteinGrams = Math.round(weight * proteinPerKg);
+                const proteinCalories = proteinGrams * 4;
+                
+                // Grasas: 25-35% de calorías
+                const fatPercentage = 0.3; // 30%
+                const fatCalories = Math.round(dailyCalories * fatPercentage);
+                fatGrams = Math.round(fatCalories / 9);
+                
+                // Carbohidratos: resto de calorías
+                const carbsCalories = dailyCalories - proteinCalories - fatCalories;
+                carbsGrams = Math.round(carbsCalories / 4);
             }
             
-            const proteinGrams = Math.round(weight * proteinPerKg);
-            const proteinCalories = proteinGrams * 4;
-            
-            // Grasas: 25-35% de calorías
-            const fatPercentage = 0.3; // 30%
-            const fatCalories = Math.round(dailyCalories * fatPercentage);
-            const fatGrams = Math.round(fatCalories / 9);
-            
-            // Carbohidratos: resto de calorías
-            const carbsCalories = dailyCalories - proteinCalories - fatCalories;
-            const carbsGrams = Math.round(carbsCalories / 4);
-            
             // Agua recomendada
             const waterIntake = Math.round((weight * 0.035) * 10) / 10; // 35ml por kg
             
@@ -625,7 +773,7 @@
             document.getElementById('fatBar').style.width = `${Math.min(fatGrams / (weight * 1.2) * 100, 100)}%`;
             
             // Generar recomendaciones
-            generateRecommendations(goal, dailyCalories, proteinGrams, carbsGrams, fatGrams, waterIntake);
+            generateRecommendations(goal, dailyCalories, proteinGrams, carbsGrams, fatGrams, waterIntake, useCustomMacros);
             
             // Crear/actualizar gráfico
             updateChart(proteinGrams, carbsGrams, fatGrams);
@@ -637,7 +785,7 @@
             document.getElementById('results').scrollIntoView({ behavior: 'smooth' });
         }
         
-        function generateRecommendations(goal, calories, protein, carbs, fat, water) {
+        function generateRecommendations(goal, calories, protein, carbs, fat, water, customMacros) {
             const recommendationsEl = document.getElementById('recommendations');
             recommendationsEl.innerHTML = '';
             
@@ -657,6 +805,13 @@
             
             addRecommendation(goalRecommendation);
             
+            if (customMacros) {
+                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
+                addRecommendation(`Estás usando valores recomendados de macronutrientes para tu objetivo de ${goal === 'loss' ? 'pérdida' : goal === 'gain' ? 'aumento' : 'mantenimiento'} de peso.`);
+            }
+            
             // Recomendación de proteína
             addRecommendation(`Consume aproximadamente ${protein}g de proteína diarios 🍗. Buenas fuentes incluyen carnes magras, pescado 🐟, huevos 🥚 y lácteos 🧀.`);
             
@@ -756,6 +911,7 @@
         
         // Inicializar
         setGender('male');
+        updateMacroPercentages(); // Para mostrar los valores iniciales
     </script>
 <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>
 </html>