File size: 10,036 Bytes
7d80450 fc67011 7d80450 fc67011 7d80450 fc67011 7d80450 fc67011 7d80450 fc67011 7d80450 fc67011 7d80450 fc67011 7d80450 fc67011 7d80450 fc67011 7d80450 fc67011 7d80450 fc67011 7d80450 fc67011 7d80450 fc67011 7d80450 fc67011 7d80450 fc67011 7d80450 fc67011 7d80450 fc67011 7d80450 fc67011 7d80450 fc67011 604fc3f fc67011 604fc3f fc67011 604fc3f fc67011 7d80450 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 |
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculadora de IMC</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>
.bmi-scale {
background: linear-gradient(90deg, #3b82f6 0%, #10b981 25%, #f59e0b 50%, #ef4444 75%);
}
.tooltip {
position: absolute;
transform: translateX(-50%);
transition: all 0.3s ease;
}
.tooltip::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border-width: 8px;
border-style: solid;
border-color: #1f2937 transparent transparent transparent;
}
</style>
</head>
<body class="bg-gray-100 min-h-screen flex items-center justify-center p-4">
<div class="bg-white rounded-2xl shadow-xl overflow-hidden w-full max-w-md">
<div class="bg-gradient-to-r from-blue-500 to-purple-600 p-6 text-white">
<h1 class="text-2xl font-bold flex items-center">
<i class="fas fa-weight-scale mr-3"></i>
Calculadora de IMC
</h1>
<p class="text-blue-100 mt-2">Índice de Masa Corporal</p>
</div>
<div class="p-6">
<form id="bmiForm" class="space-y-4">
<div>
<label for="height" class="block text-sm font-medium text-gray-700 mb-1">Estatura (cm)</label>
<div class="relative">
<input type="number" id="height" min="100" max="250" step="0.1"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
placeholder="Ej. 175" required>
<div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
<i class="fas fa-ruler-vertical text-gray-400"></i>
</div>
</div>
</div>
<div>
<label for="weight" class="block text-sm font-medium text-gray-700 mb-1">Peso (kg)</label>
<div class="relative">
<input type="number" id="weight" min="30" max="300" step="0.1"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
placeholder="Ej. 70" required>
<div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
<i class="fas fa-weight-hanging text-gray-400"></i>
</div>
</div>
</div>
<div class="pt-2">
<button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg transition duration-200 flex items-center justify-center">
<i class="fas fa-calculator mr-2"></i>
Calcular IMC
</button>
</div>
</form>
<div id="result" class="mt-6 hidden">
<div class="bg-gray-50 p-4 rounded-lg border border-gray-200">
<h3 class="font-semibold text-lg text-gray-800 mb-2">Tu resultado:</h3>
<div class="flex items-center justify-between">
<div>
<p class="text-sm text-gray-600">Índice de Masa Corporal</p>
<p id="bmiValue" class="text-3xl font-bold text-gray-900">--</p>
</div>
<div id="bmiCategory" class="px-3 py-1 rounded-full text-sm font-medium"></div>
</div>
<div class="mt-4 relative h-8 bmi-scale rounded-full overflow-hidden">
<div id="bmiIndicator" class="tooltip bg-white w-4 h-4 rounded-full border-2 border-gray-800 absolute -top-1" style="left: 0%"></div>
</div>
<div class="mt-6">
<p id="bmiMessage" class="text-sm text-gray-600"></p>
</div>
</div>
</div>
</div>
<div class="bg-gray-50 p-6 border-t border-gray-200">
<h3 class="font-medium text-gray-800 mb-2 flex items-center">
<i class="fas fa-info-circle text-blue-500 mr-2"></i>
Escala de IMC
</h3>
<ul class="space-y-2 text-sm text-gray-600">
<li class="flex items-center"><span class="w-3 h-3 bg-blue-500 rounded-full mr-2"></span> Bajo peso: menos de 18.5</li>
<li class="flex items-center"><span class="w-3 h-3 bg-green-500 rounded-full mr-2"></span> Normal: 18.5 - 24.9</li>
<li class="flex items-center"><span class="w-3 h-3 bg-yellow-500 rounded-full mr-2"></span> Sobrepeso: 25 - 29.9</li>
<li class="flex items-center"><span class="w-3 h-3 bg-red-500 rounded-full mr-2"></span> Obesidad: 30 o más</li>
</ul>
</div>
</div>
<script>
document.getElementById('bmiForm').addEventListener('submit', function(e) {
e.preventDefault();
const height = parseFloat(document.getElementById('height').value) / 100; // Convert cm to m
const weight = parseFloat(document.getElementById('weight').value);
if (isNaN(height) || isNaN(weight) || height <= 0 || weight <= 0) {
alert('Por favor ingresa valores válidos');
return;
}
const bmi = weight / (height * height);
const roundedBMI = bmi.toFixed(1);
document.getElementById('bmiValue').textContent = roundedBMI;
let category = '';
let categoryClass = '';
let message = '';
let position = 0;
if (bmi < 18.5) {
category = 'Bajo peso';
categoryClass = 'bg-blue-100 text-blue-800';
message = 'Tu peso es inferior al normal. Considera consultar con un nutricionista para un plan de alimentación adecuado.';
position = (bmi / 18.5) * 25;
} else if (bmi >= 18.5 && bmi < 25) {
category = 'Normal';
categoryClass = 'bg-green-100 text-green-800';
message = '¡Felicidades! Tu peso es saludable. Mantén una dieta balanceada y ejercicio regular.';
position = 25 + ((bmi - 18.5) / (25 - 18.5)) * 25;
} else if (bmi >= 25 && bmi < 30) {
category = 'Sobrepeso';
categoryClass = 'bg-yellow-100 text-yellow-800';
message = 'Tienes sobrepeso. Considera aumentar tu actividad física y mejorar tus hábitos alimenticios.';
position = 50 + ((bmi - 25) / (30 - 25)) * 25;
} else {
category = 'Obesidad';
categoryClass = 'bg-red-100 text-red-800';
message = 'Tienes obesidad. Es recomendable consultar con un médico o nutricionista para un plan de salud adecuado.';
position = 75 + ((Math.min(bmi, 40) - 30) / (40 - 30)) * 25;
}
document.getElementById('bmiCategory').textContent = category;
document.getElementById('bmiCategory').className = `px-3 py-1 rounded-full text-sm font-medium ${categoryClass}`;
document.getElementById('bmiMessage').textContent = message;
const indicator = document.getElementById('bmiIndicator');
indicator.style.left = `${Math.min(Math.max(position, 2), 98)}%`;
indicator.setAttribute('data-tooltip', `IMC: ${roundedBMI} (${category})`);
document.getElementById('result').classList.remove('hidden');
// Smooth scroll to results
document.getElementById('result').scrollIntoView({ behavior: 'smooth' });
});
// Tooltip functionality
document.addEventListener('DOMContentLoaded', function() {
const indicator = document.getElementById('bmiIndicator');
indicator.addEventListener('mouseover', function() {
const tooltip = document.createElement('div');
tooltip.className = 'tooltip bg-gray-800 text-white text-xs px-2 py-1 rounded absolute -top-8 whitespace-nowrap';
tooltip.textContent = this.getAttribute('data-tooltip') || '';
this.appendChild(tooltip);
});
indicator.addEventListener('mouseout', function() {
const tooltip = this.querySelector('.tooltip');
if (tooltip) {
tooltip.remove();
}
});
});
</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=Davidal07/test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html> |