Spaces:

andyontrade
/

macros

Running

App Files Files Community

andyontrade commited on Apr 9

Commit

a9ec097

verified ·

1 Parent(s): 3476d04

Add 1 files

Browse files

Files changed (1) hide show

index.html +91 -6

index.html CHANGED Viewed

@@ -43,6 +43,13 @@
             background: #667eea;
             cursor: pointer;
         }
     </style>
 </head>
 <body class="min-h-screen bg-gray-50">
@@ -103,12 +110,39 @@
             </div>
             <div class="mt-6">
-                <label class="block text-gray-700 mb-2">% Grasa corporal (opcional)</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>
@@ -207,6 +241,10 @@
         document.getElementById('femaleBtn').addEventListener('click', () => setGender('female'));
         document.getElementById('bodyfat').addEventListener('input', updateBodyfatValue);
         document.getElementById('calculateBtn').addEventListener('click', calculateNutrition);
         // Funciones
         function setGender(selectedGender) {
@@ -219,9 +257,25 @@
             if (selectedGender === 'male') {
                 document.getElementById('maleBtn').classList.remove('bg-blue-100', 'text-blue-700');
                 document.getElementById('maleBtn').classList.add('gradient-bg', 'text-white');
             } else {
                 document.getElementById('femaleBtn').classList.remove('bg-pink-100', 'text-pink-700');
                 document.getElementById('femaleBtn').classList.add('gradient-bg', 'text-white');
             }
         }
@@ -230,6 +284,37 @@
             document.getElementById('bodyfatValue').textContent = `${bodyfat}%`;
         }
         function calculateNutrition() {
             // Obtener valores del formulario
             const age = parseInt(document.getElementById('age').value);

             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>
             <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>
         document.getElementById('femaleBtn').addEventListener('click', () => setGender('female'));
         document.getElementById('bodyfat').addEventListener('input', updateBodyfatValue);
         document.getElementById('calculateBtn').addEventListener('click', calculateNutrition);
+        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) {
             if (selectedGender === 'male') {
                 document.getElementById('maleBtn').classList.remove('bg-blue-100', 'text-blue-700');
                 document.getElementById('maleBtn').classList.add('gradient-bg', 'text-white');
+                document.getElementById('hipSection').classList.add('hidden');
             } else {
                 document.getElementById('femaleBtn').classList.remove('bg-pink-100', 'text-pink-700');
                 document.getElementById('femaleBtn').classList.add('gradient-bg', 'text-white');
+                document.getElementById('hipSection').classList.remove('hidden');
+            }
+        }
+        function switchBodyfatTab(tab) {
+            if (tab === 'manual') {
+                document.getElementById('manualTab').classList.add('active');
+                document.getElementById('calculateTab').classList.remove('active');
+                document.getElementById('manualBodyfatSection').classList.remove('hidden');
+                document.getElementById('calculateBodyfatSection').classList.add('hidden');
+            } else {
+                document.getElementById('manualTab').classList.remove('active');
+                document.getElementById('calculateTab').classList.add('active');
+                document.getElementById('manualBodyfatSection').classList.add('hidden');
+                document.getElementById('calculateBodyfatSection').classList.remove('hidden');
             }
         }
             document.getElementById('bodyfatValue').textContent = `${bodyfat}%`;
         }
+        function calculateBodyfatPercentage() {
+            const neck = parseFloat(document.getElementById('neck').value);
+            const waist = parseFloat(document.getElementById('waist').value);
+            const height = parseFloat(document.getElementById('height').value);
+            // Fórmula de la Marina de EE.UU. para calcular % de grasa corporal
+            let bodyfatPercentage;
+            if (gender === 'male') {
+                // Fórmula para hombres
+                bodyfatPercentage = 86.010 * Math.log10(waist - neck) - 70.041 * Math.log10(height) + 36.76;
+            } else {
+                // Fórmula para mujeres (necesita medida de cadera)
+                const hip = parseFloat(document.getElementById('hip').value);
+                bodyfatPercentage = 163.205 * Math.log10(waist + hip - neck) - 97.684 * Math.log10(height) - 78.387;
+            }
+            // Asegurarse que el porcentaje esté dentro de límites razonables
+            bodyfatPercentage = Math.max(5, Math.min(50, bodyfatPercentage));
+            // Actualizar el slider y el valor mostrado
+            document.getElementById('bodyfat').value = Math.round(bodyfatPercentage);
+            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');
+        }
         function calculateNutrition() {
             // Obtener valores del formulario
             const age = parseInt(document.getElementById('age').value);