Spaces:
Running
Running
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Calculadora de IMC - Saúde e Bem-estar</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, #4f46e5 0%, #10b981 100%); | |
| } | |
| .result-box { | |
| transition: all 0.5s ease; | |
| max-height: 0; | |
| overflow: hidden; | |
| } | |
| .result-box.show { | |
| max-height: 500px; | |
| } | |
| .progress-bar { | |
| height: 8px; | |
| background: #e5e7eb; | |
| border-radius: 4px; | |
| overflow: hidden; | |
| } | |
| .progress-fill { | |
| height: 100%; | |
| transition: width 0.5s ease; | |
| } | |
| .tooltip { | |
| position: relative; | |
| display: inline-block; | |
| } | |
| .tooltip .tooltip-text { | |
| visibility: hidden; | |
| width: 200px; | |
| background-color: #333; | |
| color: #fff; | |
| text-align: center; | |
| border-radius: 6px; | |
| padding: 5px; | |
| position: absolute; | |
| z-index: 1; | |
| bottom: 125%; | |
| left: 50%; | |
| margin-left: -100px; | |
| opacity: 0; | |
| transition: opacity 0.3s; | |
| } | |
| .tooltip:hover .tooltip-text { | |
| visibility: visible; | |
| opacity: 1; | |
| } | |
| @keyframes pulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| 100% { transform: scale(1); } | |
| } | |
| .pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| input[type=number]::-webkit-inner-spin-button, | |
| input[type=number]::-webkit-outer-spin-button { | |
| -webkit-appearance: none; | |
| margin: 0; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans"> | |
| <div class="min-h-screen flex flex-col"> | |
| <!-- Header --> | |
| <header class="gradient-bg text-white py-8 px-4 shadow-lg"> | |
| <div class="container mx-auto text-center"> | |
| <h1 class="text-4xl font-bold mb-2">Calculadora de IMC</h1> | |
| <p class="text-xl opacity-90">Descubra seu Índice de Massa Corporal e saiba como melhorar sua saúde</p> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="flex-grow container mx-auto px-4 py-8"> | |
| <div class="max-w-3xl mx-auto bg-white rounded-xl shadow-md overflow-hidden"> | |
| <!-- Calculator Section --> | |
| <div class="p-6 md:p-8"> | |
| <h2 class="text-2xl font-semibold text-gray-800 mb-6">Preencha seus dados</h2> | |
| <form id="imcForm" class="space-y-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <!-- Height Input --> | |
| <div> | |
| <label for="height" class="block text-sm font-medium text-gray-700 mb-1"> | |
| Altura (cm) | |
| <span class="tooltip ml-1"> | |
| <i class="fas fa-info-circle text-blue-500"></i> | |
| <span class="tooltip-text">Informe sua altura em centímetros. Ex: 175cm</span> | |
| </span> | |
| </label> | |
| <div class="relative"> | |
| <input type="number" id="height" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="Ex: 175" min="100" max="250" required> | |
| <span class="absolute right-3 top-3 text-gray-500">cm</span> | |
| </div> | |
| </div> | |
| <!-- Weight Input --> | |
| <div> | |
| <label for="weight" class="block text-sm font-medium text-gray-700 mb-1"> | |
| Peso (kg) | |
| <span class="tooltip ml-1"> | |
| <i class="fas fa-info-circle text-blue-500"></i> | |
| <span class="tooltip-text">Informe seu peso em quilogramas com até 1 casa decimal. Ex: 10.5kg</span> | |
| </span> | |
| </label> | |
| <div class="relative"> | |
| <input type="number" id="weight" step="0.1" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="Ex: 10.5" min="10" max="300" required> | |
| <span class="absolute right-3 top-3 text-gray-500">kg</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Age Input --> | |
| <div> | |
| <label for="age" class="block text-sm font-medium text-gray-700 mb-1">Idade (opcional)</label> | |
| <input type="number" id="age" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="Ex: 35" min="2" max="120"> | |
| </div> | |
| <!-- Gender Selection --> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Sexo (opcional)</label> | |
| <div class="flex space-x-4"> | |
| <label class="inline-flex items-center"> | |
| <input type="radio" name="gender" value="male" class="h-5 w-5 text-blue-600"> | |
| <span class="ml-2 text-gray-700">Masculino</span> | |
| </label> | |
| <label class="inline-flex items-center"> | |
| <input type="radio" name="gender" value="female" class="h-5 w-5 text-blue-600"> | |
| <span class="ml-2 text-gray-700">Feminino</span> | |
| </label> | |
| </div> | |
| </div> | |
| <!-- Calculate Button --> | |
| <div class="pt-2"> | |
| <button type="submit" class="w-full gradient-bg text-white py-3 px-6 rounded-lg font-semibold text-lg hover:opacity-90 transition duration-300 shadow-md flex items-center justify-center"> | |
| <i class="fas fa-calculator mr-2"></i> Calcular IMC | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| <!-- Results Section (Initially Hidden) --> | |
| <div id="resultBox" class="result-box px-6 pb-6"> | |
| <div class="border-t border-gray-200 pt-6"> | |
| <h2 class="text-2xl font-semibold text-gray-800 mb-4">Seu Resultado</h2> | |
| <!-- IMC Value --> | |
| <div class="bg-gray-50 rounded-lg p-4 mb-6"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="text-lg font-medium text-gray-700">Seu IMC:</span> | |
| <span id="imcValue" class="text-3xl font-bold text-blue-600">--</span> | |
| </div> | |
| <div class="progress-bar"> | |
| <div id="progressFill" class="progress-fill" style="width: 0%"></div> | |
| </div> | |
| <div id="idealWeightRange" class="mt-3 text-sm text-gray-600"></div> | |
| <div id="waistCircumference" class="mt-2 text-sm text-gray-600"></div> | |
| </div> | |
| <!-- Classification --> | |
| <div id="classification" class="mb-6"> | |
| <div class="flex items-start"> | |
| <div id="statusIcon" class="text-4xl mr-3"></div> | |
| <div> | |
| <h3 id="statusTitle" class="text-xl font-semibold mb-1"></h3> | |
| <p id="statusDescription" class="text-gray-600"></p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Health Risks --> | |
| <div id="healthRisks" class="bg-red-50 border-l-4 border-red-500 rounded-r-lg p-4 mb-6 hidden"> | |
| <div class="flex"> | |
| <div class="flex-shrink-0 text-red-500"> | |
| <i class="fas fa-exclamation-triangle text-xl"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <h3 class="text-lg font-medium text-red-800 mb-2">Riscos à Saúde</h3> | |
| <div id="risksList" class="text-red-700 space-y-2"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recommendations --> | |
| <div id="recommendations" class="bg-blue-50 border-l-4 border-blue-500 rounded-r-lg p-4"> | |
| <div class="flex"> | |
| <div class="flex-shrink-0 text-blue-500"> | |
| <i class="fas fa-heartbeat text-xl"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <h3 class="text-lg font-medium text-blue-800 mb-2">Recomendações</h3> | |
| <div id="recommendationsList" class="text-blue-700 space-y-2"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- IMC Table Info --> | |
| <div class="max-w-3xl mx-auto mt-8 bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="p-6 md:p-8"> | |
| <h2 class="text-2xl font-semibold text-gray-800 mb-4">Tabela de Classificação do IMC</h2> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">IMC</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Classificação</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Risco de Saúde</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Circunferência Abdominal Ideal</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Abaixo de 18,5</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Abaixo do peso</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Desnutrição, osteoporose</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Homens: até 94cm<br>Mulheres: até 80cm</td> | |
| </tr> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">18,5 - 24,9</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Peso normal</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Baixo risco</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Homens: até 94cm<br>Mulheres: até 80cm</td> | |
| </tr> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">25,0 - 29,9</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Sobrepeso</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Risco aumentado</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Homens: abaixo de 102cm<br>Mulheres: abaixo de 88cm</td> | |
| </tr> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">30,0 - 34,9</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Obesidade Grau I</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Alto risco</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Homens: abaixo de 102cm<br>Mulheres: abaixo de 88cm</td> | |
| </tr> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">35,0 - 39,9</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Obesidade Grau II</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Muito alto risco</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Homens: abaixo de 102cm<br>Mulheres: abaixo de 88cm</td> | |
| </tr> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-9">Acima de 40,0</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Obesidade Grau III</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Risco extremo</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Homens: abaixo de 102cm<br>Mulheres: abaixo de 88cm</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 text-white py-6 px-4"> | |
| <div class="container mx-auto text-center"> | |
| <p class="mb-2">© 2023 Calculadora de IMC - Todos os direitos reservados</p> | |
| <p class="text-sm text-gray-400">Esta calculadora fornece apenas informações gerais e não substitui orientações médicas profissionais.</p> | |
| </div> | |
| </footer> | |
| </div> | |
| <script> | |
| document.getElementById('imcForm').addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| // Get input values | |
| const height = parseFloat(document.getElementById('height').value) / 100; // Convert cm to m | |
| const weight = parseFloat(document.getElementById('weight').value); | |
| const gender = document.querySelector('input[name="gender"]:checked')?.value; | |
| // Calculate IMC | |
| const imc = weight / (height * height); | |
| const roundedImc = Math.round(imc * 10) / 10; | |
| // Display result | |
| document.getElementById('imcValue').textContent = roundedImc; | |
| // Calculate ideal weight range (IMC 18.5 to 24.9) | |
| const minIdealWeight = Math.round(18.5 * (height * height) * 10) / 10; | |
| const maxIdealWeight = Math.round(24.9 * (height * height) * 10) / 10; | |
| document.getElementById('idealWeightRange').innerHTML = | |
| `<span class="font-medium">Peso ideal para sua altura:</span> ${minIdealWeight}kg a ${maxIdealWeight}kg`; | |
| // Calculate and display ideal waist circumference | |
| let waistCircumferenceInfo = ""; | |
| if (gender === 'male') { | |
| if (roundedImc < 25) { | |
| waistCircumferenceInfo = "Circunferência abdominal ideal para homens: até 94cm"; | |
| } else { | |
| waistCircumferenceInfo = "Circunferência abdominal ideal para homens: abaixo de 102cm"; | |
| } | |
| } else if (gender === 'female') { | |
| if (roundedImc < 25) { | |
| waistCircumferenceInfo = "Circunferência abdominal ideal para mulheres: até 80cm"; | |
| } else { | |
| waistCircumferenceInfo = "Circunferência abdominal ideal para mulheres: abaixo de 88cm"; | |
| } | |
| } else { | |
| waistCircumferenceInfo = "Circunferência abdominal ideal: Homens até 94cm (abaixo de 102cm se sobrepeso), Mulheres até 80cm (abaixo de 88cm se sobrepeso)"; | |
| } | |
| document.getElementById('waistCircumference').innerHTML = | |
| `<span class="font-medium">${waistCircumferenceInfo}</span>`; | |
| // Calculate progress bar position (IMC range: 15 to 45) | |
| const progressPercentage = ((roundedImc - 15) / 30) * 100; | |
| document.getElementById('progressFill').style.width = `${Math.min(Math.max(progressPercentage, 0), 100)}%`; | |
| // Determine classification and set colors | |
| let classification, statusColor, iconClass, icon; | |
| if (roundedImc < 18.5) { | |
| classification = "Abaixo do peso"; | |
| statusColor = "text-yellow-600"; | |
| iconClass = "fas fa-exclamation-circle text-yellow-500"; | |
| icon = "⚠️"; | |
| } else if (roundedImc >= 18.5 && roundedImc < 25) { | |
| classification = "Peso normal"; | |
| statusColor = "text-green-600"; | |
| iconClass = "fas fa-check-circle text-green-500"; | |
| icon = "✅"; | |
| } else if (roundedImc >= 25 && roundedImc < 30) { | |
| classification = "Sobrepeso"; | |
| statusColor = "text-orange-600"; | |
| iconClass = "fas fa-exclamation-triangle text-orange-500"; | |
| icon = "⚠️"; | |
| } else if (roundedImc >= 30 && roundedImc < 35) { | |
| classification = "Obesidade Grau I"; | |
| statusColor = "text-red-600"; | |
| iconClass = "fas fa-times-circle text-red-500 pulse"; | |
| icon = "❌"; | |
| } else if (roundedImc >= 35 && roundedImc < 40) { | |
| classification = "Obesidade Grau II"; | |
| statusColor = "text-red-700"; | |
| iconClass = "fas fa-times-circle text-red-600 pulse"; | |
| icon = "❌"; | |
| } else { | |
| classification = "Obesidade Grau III"; | |
| statusColor = "text-red-800"; | |
| iconClass = "fas fa-skull-crossbones text-red-700 pulse"; | |
| icon = "💀"; | |
| } | |
| // Set progress bar color | |
| document.getElementById('progressFill').className = `progress-fill ${statusColor.replace('text-', 'bg-')}`; | |
| // Update classification display | |
| document.getElementById('statusIcon').className = iconClass; | |
| document.getElementById('statusTitle').className = `text-xl font-semibold mb-1 ${statusColor}`; | |
| document.getElementById('statusTitle').textContent = classification; | |
| let description = ""; | |
| if (roundedImc < 18.5) { | |
| description = `Seu peso está abaixo do ideal para sua altura. O peso saudável para sua altura seria entre ${minIdealWeight}kg e ${maxIdealWeight}kg.`; | |
| } else if (roundedImc < 25) { | |
| description = `Parabéns! Seu peso está dentro da faixa considerada saudável para sua altura (${minIdealWeight}kg a ${maxIdealWeight}kg).`; | |
| } else if (roundedImc < 30) { | |
| description = `Você está com sobrepeso. O peso ideal para sua altura seria entre ${minIdealWeight}kg e ${maxIdealWeight}kg.`; | |
| } else { | |
| description = `Você está na faixa de obesidade. O peso saudável para sua altura seria entre ${minIdealWeight}kg e ${maxIdealWeight}kg.`; | |
| } | |
| document.getElementById('statusDescription').textContent = description; | |
| // Show health risks if outside normal range | |
| const healthRisksElement = document.getElementById('healthRisks'); | |
| const risksListElement = document.getElementById('risksList'); | |
| if (roundedImc < 18.5 || roundedImc >= 25) { | |
| healthRisksElement.classList.remove('hidden'); | |
| risksListElement.innerHTML = ''; | |
| const risks = []; | |
| if (roundedImc < 18.5) { | |
| risks.push( | |
| "Desnutrição e deficiências nutricionais", | |
| "Osteoporose e fraturas ósseas", | |
| "Sistema imunológico enfraquecido", | |
| "Problemas de crescimento (em jovens)", | |
| "Infertilidade e irregularidades menstruais" | |
| ); | |
| } else if (roundedImc >= 25 && roundedImc < 30) { | |
| risks.push( | |
| "Aumento do risco de doenças cardíacas", | |
| "Maior chance de desenvolver diabetes tipo 2", | |
| "Pressão arterial elevada", | |
| "Problemas articulares e artrite", | |
| "Apneia do sono e problemas respiratórios" | |
| ); | |
| } else if (roundedImc >= 30) { | |
| risks.push( | |
| "Risco muito alto de doenças cardiovasculares", | |
| "Diabetes tipo 2 e resistência à insulina", | |
| "Pressão arterial perigosamente alta", | |
| "Maior chance de certos tipos de câncer", | |
| "Problemas graves nas articulações e mobilidade reduzida", | |
| "Depressão e baixa autoestima", | |
| "Expectativa de vida reduzida" | |
| ); | |
| } | |
| risks.forEach(risk => { | |
| const li = document.createElement('p'); | |
| li.className = 'flex items-start'; | |
| li.innerHTML = `<span class="mr-2">•</span> ${risk}`; | |
| risksListElement.appendChild(li); | |
| }); | |
| } else { | |
| healthRisksElement.classList.add('hidden'); | |
| } | |
| // Show recommendations | |
| const recommendationsListElement = document.getElementById('recommendationsList'); | |
| recommendationsListElement.innerHTML = ''; | |
| const recommendations = []; | |
| if (roundedImc < 18.5) { | |
| recommendations.push( | |
| "Consulte um nutricionista para desenvolver um plano alimentar adequado", | |
| "Aumente gradualmente a ingestão de alimentos nutritivos e calóricos", | |
| "Inclua proteínas, carboidratos complexos e gorduras saudáveis em cada refeição", | |
| "Pratique exercícios de força para ganhar massa muscular", | |
| "Evite pular refeições e faça pequenos lanches entre as refeições principais", | |
| `Meta de peso saudável: entre ${minIdealWeight}kg e ${maxIdealWeight}kg` | |
| ); | |
| } else if (roundedImc < 25) { | |
| recommendations.push( | |
| "Mantenha seus hábitos saudáveis de alimentação e exercícios", | |
| "Continue monitorando seu peso regularmente", | |
| "Varie sua dieta para obter todos os nutrientes necessários", | |
| "Pratique atividades físicas regularmente para manter sua saúde", | |
| "Durma bem e gerencie o estresse para manter o equilíbrio", | |
| `Faixa de peso ideal mantida: ${minIdealWeight}kg a ${maxIdealWeight}kg` | |
| ); | |
| } else { | |
| recommendations.push( | |
| "Consulte um médico ou nutricionista para orientação personalizada", | |
| "Reduza gradualmente a ingestão de calorias, focando em alimentos nutritivos", | |
| "Aumente sua atividade física diária (comece com caminhadas se necessário)", | |
| "Reduza o consumo de alimentos processados, açúcares e gorduras saturadas", | |
| "Estabeleça metas realistas de perda de peso (0,5-1kg por semana)", | |
| "Mantenha um diário alimentar para acompanhar seus progressos", | |
| "Busque apoio de grupos ou profissionais para manter a motivação", | |
| `Meta de peso saudável: entre ${minIdealWeight}kg e ${maxIdealWeight}kg` | |
| ); | |
| } | |
| recommendations.forEach(rec => { | |
| const li = document.createElement('p'); | |
| li.className = 'flex items-start'; | |
| li.innerHTML = `<span class="mr-2">•</span> ${rec}`; | |
| recommendationsListElement.appendChild(li); | |
| }); | |
| // Show result box with animation | |
| document.getElementById('resultBox').classList.add('show'); | |
| // Scroll to results | |
| document.getElementById('resultBox').scrollIntoView({ behavior: 'smooth' }); | |
| }); | |
| </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=ricardosantis/projetos" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |