Hugging Face's logo

Spaces:
joung
/
joung-nag
Running

App Files Community
joung-nag / index.html
joung's picture
joung
Add 2 files
5178f5a verified
raw
history blame contribute delete
25.7 kB
 <!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HealthTrack - BMI ๊ณ„์‚ฐ๊ธฐ</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>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap');
body {
font-family: 'Noto Sans KR', sans-serif;
background-color: #f8fafc;
}
.gradient-bg {
background: linear-gradient(135deg, #3b82f6 0%, #10b981 100%);
}
.bmi-scale {
height: 8px;
background: linear-gradient(90deg, #10b981 0%, #f59e0b 50%, #ef4444 100%);
border-radius: 4px;
}
.marker {
position: absolute;
top: -10px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #3b82f6;
transform: translateX(-10px);
transition: left 0.5s ease;
}
.result-card {
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.result-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.15);
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: #3b82f6;
cursor: pointer;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
input[type="range"]::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: #3b82f6;
cursor: pointer;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body class="min-h-screen flex flex-col">
<!-- ํ—ค๋” ์„น์…˜ -->
<header class="gradient-bg text-white py-6">
<div class="container mx-auto px-4">
<div class="flex items-center justify-between">
<div class="flex items-center space-x-3">
<div class="bg-white rounded-full p-2">
<i class="fas fa-heartbeat text-2xl text-blue-500"></i>
</div>
<h1 class="text-2xl font-bold">HealthTrack</h1>
</div>
<div class="hidden md:block">
<span class="text-blue-100">๋‹น์‹ ์˜ ๊ฑด๊ฐ•์„ ์œ„ํ•œ ์ฒซ ๊ฑธ์Œ</span>
</div>
</div>
</div>
</header>
<!-- ๋ฉ”์ธ ์ฝ˜ํ…์ธ  -->
<main class="flex-grow container mx-auto px-4 py-8">
<div class="max-w-3xl mx-auto">
<div class="bg-white rounded-xl shadow-md overflow-hidden mb-8">
<div class="p-6 md:p-8">
<h2 class="text-2xl font-bold text-gray-800 mb-6">์ฒด์งˆ๋Ÿ‰ ์ง€์ˆ˜(BMI) ๊ณ„์‚ฐ๊ธฐ</h2>
<div class="grid md:grid-cols-2 gap-6">
<!-- ํ‚ค ์ž…๋ ฅ ์„น์…˜ -->
<div class="space-y-4">
<div>
<label for="height" class="block text-sm font-medium text-gray-700 mb-1">ํ‚ค (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="์˜ˆ: 175">
<div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
<span class="text-gray-500">cm</span>
</div>
</div>
<div class="mt-2">
<input type="range" id="height-slider" min="100" max="250" value="170"
class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
</div>
</div>
<!-- ์ฒด์ค‘ ์ž…๋ ฅ ์„น์…˜ -->
<div>
<label for="weight" class="block text-sm font-medium text-gray-700 mb-1">์ฒด์ค‘ (kg)</label>
<div class="relative">
<input type="number" id="weight" min="30" max="200" 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="์˜ˆ: 70">
<div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
<span class="text-gray-500">kg</span>
</div>
</div>
<div class="mt-2">
<input type="range" id="weight-slider" min="30" max="200" value="65"
class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
</div>
</div>
<button id="calculate-btn"
class="w-full gradient-bg text-white py-3 px-4 rounded-lg font-medium hover:opacity-90 transition duration-300 flex items-center justify-center space-x-2">
<i class="fas fa-calculator"></i>
<span>BMI ๊ณ„์‚ฐํ•˜๊ธฐ</span>
</button>
</div>
<!-- BMI ์Šค์ผ€์ผ ์‹œ๊ฐํ™” -->
<div class="flex flex-col justify-center">
<div class="bg-gray-50 p-4 rounded-lg border border-gray-200">
<h3 class="text-lg font-medium text-gray-800 mb-3">BMI ๋ฒ”์œ„</h3>
<div class="relative mb-8">
<div class="bmi-scale"></div>
<div class="marker" id="bmi-marker"></div>
</div>
<div class="grid grid-cols-5 gap-1 text-xs text-center">
<div class="text-green-600">์ €์ฒด์ค‘<br>(18.5 ๋ฏธ๋งŒ)</div>
<div class="text-green-700">์ •์ƒ<br>(18.5-23)</div>
<div class="text-yellow-600">๊ณผ์ฒด์ค‘<br>(23-25)</div>
<div class="text-orange-600">๋น„๋งŒ<br>(25-30)</div>
<div class="text-red-600">๊ณ ๋„๋น„๋งŒ<br>(30 ์ด์ƒ)</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ๊ฒฐ๊ณผ ์„น์…˜ (์ฒ˜์Œ์—๋Š” ์ˆจ๊ฒจ์ง) -->
<div id="result-section" class="hidden">
<div class="result-card bg-white rounded-xl shadow-md overflow-hidden mb-8">
<div class="p-6 md:p-8">
<h2 class="text-2xl font-bold text-gray-800 mb-4">๋‹น์‹ ์˜ BMI ๊ฒฐ๊ณผ</h2>
<div class="grid md:grid-cols-3 gap-6 mb-6">
<!-- BMI ์ˆ˜์น˜ ์นด๋“œ -->
<div class="bg-blue-50 rounded-lg p-4 border border-blue-100">
<div class="flex items-center justify-between">
<h3 class="text-lg font-medium text-blue-800">BMI ์ง€์ˆ˜</h3>
<i class="fas fa-chart-line text-blue-400 text-xl"></i>
</div>
<div class="mt-2">
<span id="bmi-value" class="text-3xl font-bold text-blue-600">0.00</span>
</div>
</div>
<!-- ๋ถ„๋ฅ˜ ์นด๋“œ -->
<div class="bg-green-50 rounded-lg p-4 border border-green-100">
<div class="flex items-center justify-between">
<h3 class="text-lg font-medium text-green-800">์ฒด์งˆ๋Ÿ‰ ๋ถ„๋ฅ˜</h3>
<i class="fas fa-tag text-green-400 text-xl"></i>
</div>
<div class="mt-2">
<span id="bmi-category" class="text-2xl font-bold text-green-600">-</span>
</div>
</div>
<!-- ์ด์ƒ์  ์ฒด์ค‘ ์นด๋“œ -->
<div class="bg-purple-50 rounded-lg p-4 border border-purple-100">
<div class="flex items-center justify-between">
<h3 class="text-lg font-medium text-purple-800">์ด์ƒ์  ์ฒด์ค‘ ๋ฒ”์œ„</h3>
<i class="fas fa-weight text-purple-400 text-xl"></i>
</div>
<div class="mt-2">
<span id="ideal-weight" class="text-xl font-bold text-purple-600">- kg</span>
</div>
</div>
</div>
<!-- ๊ฑด๊ฐ• ํŒ ์„น์…˜ -->
<div id="health-tips" class="space-y-4">
<h3 class="text-xl font-semibold text-gray-800 border-b pb-2">๊ฑด๊ฐ• ๊ด€๋ฆฌ ํŒ</h3>
<div id="underweight-tips" class="hidden">
<div class="flex items-start space-x-3">
<div class="bg-yellow-100 p-2 rounded-full">
<i class="fas fa-utensils text-yellow-600"></i>
</div>
<div>
<h4 class="font-medium text-gray-800">์ €์ฒด์ค‘์„ ์œ„ํ•œ ์˜์–‘ ์ „๋žต</h4>
<p class="text-gray-600 text-sm mt-1">๊ณ ์นผ๋กœ๋ฆฌ์ด๋ฉด์„œ ์˜์–‘๊ฐ€ ์žˆ๋Š” ์Œ์‹์„ ์„ญ์ทจํ•˜์„ธ์š”. ๊ฒฌ๊ณผ๋ฅ˜, ์•„๋ณด์นด๋„, ์˜ฌ๋ฆฌ๋ธŒ ์˜ค์ผ๊ณผ ๊ฐ™์€ ๊ฑด๊ฐ•ํ•œ ์ง€๋ฐฉ์„ ์ถ”๊ฐ€ํ•˜๊ณ , ๋‹จ๋ฐฑ์งˆ ์„ญ์ทจ๋ฅผ ๋Š˜๋ฆฌ๋ฉฐ, ์†Œ๋Ÿ‰์˜ ์‹์‚ฌ๋ฅผ ์ž์ฃผ ๋“œ์„ธ์š”.</p>
</div>
</div>
<div class="flex items-start space-x-3 mt-3">
<div class="bg-blue-100 p-2 rounded-full">
<i class="fas fa-dumbbell text-blue-600"></i>
</div>
<div>
<h4 class="font-medium text-gray-800">๊ทผ๋ ฅ ์šด๋™ ์ถ”์ฒœ</h4>
<p class="text-gray-600 text-sm mt-1">๊ทผ์œก๋Ÿ‰์„ ์ฆ๊ฐ€์‹œํ‚ค๊ธฐ ์œ„ํ•ด ์ €ํ•ญ ์šด๋™์„ ๊พธ์ค€ํžˆ ํ•˜์„ธ์š”. ์Šค์ฟผํŠธ, ๋ฐ๋“œ๋ฆฌํ”„ํŠธ, ๋ฒค์น˜ํ”„๋ ˆ์Šค์™€ ๊ฐ™์€ ๋ณตํ•ฉ ์šด๋™์ด ํšจ๊ณผ์ ์ด๋ฉฐ, ์ฃผ 2-3ํšŒ ๊ทผ๋ ฅ ํ›ˆ๋ จ์„ ๊ถŒ์žฅํ•ฉ๋‹ˆ๋‹ค.</p>
</div>
</div>
</div>
<div id="normal-tips" class="hidden">
<div class="flex items-start space-x-3">
<div class="bg-green-100 p-2 rounded-full">
<i class="fas fa-check-circle text-green-600"></i>
</div>
<div>
<h4 class="font-medium text-gray-800">ํ˜„ ์ƒํƒœ ์œ ์ง€๋ฅผ ์œ„ํ•œ ์กฐ์–ธ</h4>
<p class="text-gray-600 text-sm mt-1">๊ท ํ˜• ์žกํžŒ ์‹๋‹จ๊ณผ ๊ทœ์น™์ ์ธ ์šด๋™์„ ์œ ์ง€ํ•˜์„ธ์š”. ๋‹ค์–‘ํ•œ ์ƒ‰๊น”์˜ ์ฑ„์†Œ์™€ ๊ณผ์ผ์„ ์ถฉ๋ถ„ํžˆ ์„ญ์ทจํ•˜๊ณ , ์ •์ œ๋œ ํƒ„์ˆ˜ํ™”๋ฌผ ๋Œ€์‹  ์ „๊ณก์„ ์„ ํƒํ•˜๋ฉฐ, ๊ฐ€๊ณต ์‹ํ’ˆ์„ ์ค„์ด์„ธ์š”.</p>
</div>
</div>
<div class="flex items-start space-x-3 mt-3">
<div class="bg-blue-100 p-2 rounded-full">
<i class="fas fa-running text-blue-600"></i>
</div>
<div>
<h4 class="font-medium text-gray-800">์ข…ํ•ฉ์ ์ธ ์šด๋™ ๊ณ„ํš</h4>
<p class="text-gray-600 text-sm mt-1">์ฃผ 150๋ถ„์˜ ์ค‘๋“ฑ๋„ ์œ ์‚ฐ์†Œ ์šด๋™ ๋˜๋Š” 75๋ถ„์˜ ๊ณ ๊ฐ•๋„ ์œ ์‚ฐ์†Œ ์šด๋™๊ณผ ์ฃผ 2ํšŒ์˜ ๊ทผ๋ ฅ ์šด๋™์„ ์กฐํ•ฉํ•˜์„ธ์š”. ์š”๊ฐ€๋‚˜ ํ•„๋ผํ…Œ์Šค๋กœ ์œ ์—ฐ์„ฑ๋„ ๊ด€๋ฆฌํ•˜๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค.</p>
</div>
</div>
</div>
<div id="overweight-tips" class="hidden">
<div class="flex items-start space-x-3">
<div class="bg-orange-100 p-2 rounded-full">
<i class="fas fa-carrot text-orange-600"></i>
</div>
<div>
<h4 class="font-medium text-gray-800">์ฒด์ค‘ ๊ฐ๋Ÿ‰์„ ์œ„ํ•œ ์‹๋‹จ</h4>
<p class="text-gray-600 text-sm mt-1">ํ•˜๋ฃจ ์„ญ์ทจ ์นผ๋กœ๋ฆฌ๋ฅผ 300-500kcal ์ค„์ด๋˜ ์˜์–‘์†Œ๋Š” ์ถฉ๋ถ„ํžˆ ์„ญ์ทจํ•˜์„ธ์š”. ๋‹จ๋ฐฑ์งˆ ์„ญ์ทจ๋ฅผ ๋Š˜๋ ค ํฌ๋งŒ๊ฐ์„ ์œ ์ง€ํ•˜๊ณ , ์„คํƒ•๊ณผ ์ •์ œ ํƒ„์ˆ˜ํ™”๋ฌผ์„ ์ค„์ด๋ฉฐ, ๋ฌผ์„ ์ถฉ๋ถ„ํžˆ ๋งˆ์‹œ์„ธ์š”.</p>
</div>
</div>
<div class="flex items-start space-x-3 mt-3">
<div class="bg-blue-100 p-2 rounded-full">
<i class="fas fa-heartbeat text-blue-600"></i>
</div>
<div>
<h4 class="font-medium text-gray-800">ํšจ๊ณผ์ ์ธ ์šด๋™ ๋ฐฉ๋ฒ•</h4>
<p class="text-gray-600 text-sm mt-1">์ฃผ 5์ผ, ํ•˜๋ฃจ 30๋ถ„ ์ด์ƒ์˜ ์œ ์‚ฐ์†Œ ์šด๋™(๋น ๋ฅธ ๊ฑท๊ธฐ, ์ˆ˜์˜, ์‚ฌ์ดํด๋ง)๊ณผ ์ฃผ 2-3ํšŒ์˜ ๊ทผ๋ ฅ ์šด๋™์„ ๋ณ‘ํ–‰ํ•˜์„ธ์š”. ์ผ์ƒ ์ƒํ™œ์—์„œ ํ™œ๋™๋Ÿ‰์„ ๋Š˜๋ฆฌ๋Š” ๊ฒƒ๋„ ์ค‘์š”ํ•ฉ๋‹ˆ๋‹ค.</p>
</div>
</div>
</div>
<div id="obese-tips" class="hidden">
<div class="flex items-start space-x-3">
<div class="bg-red-100 p-2 rounded-full">
<i class="fas fa-notes-medical text-red-600"></i>
</div>
<div>
<h4 class="font-medium text-gray-800">์˜๋ฃŒ ์ „๋ฌธ๊ฐ€์™€์˜ ์ƒ๋‹ด</h4>
<p class="text-gray-600 text-sm mt-1">๊ณ ๋„ ๋น„๋งŒ์˜ ๊ฒฝ์šฐ ์ „๋ฌธ์˜์™€ ์ƒ๋‹ดํ•˜์—ฌ ์ฒด๊ณ„์ ์ธ ๊ด€๋ฆฌ ๊ณ„ํš์„ ์ˆ˜๋ฆฝํ•˜์„ธ์š”. ๊ฐœ์ธ ๋งž์ถคํ˜• ์‹๋‹จ๊ณผ ์šด๋™ ํ”„๋กœ๊ทธ๋žจ์ด ํ•„์š”ํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ, ๊ธฐ์ € ์งˆํ™˜ ํ™•์ธ์ด ์ค‘์š”ํ•ฉ๋‹ˆ๋‹ค.</p>
</div>
</div>
<div class="flex items-start space-x-3 mt-3">
<div class="bg-blue-100 p-2 rounded-full">
<i class="fas fa-walking text-blue-600"></i>
</div>
<div>
<h4 class="font-medium text-gray-800">์•ˆ์ „ํ•œ ์šด๋™ ์ ‘๊ทผ๋ฒ•</h4>
<p class="text-gray-600 text-sm mt-1">๊ด€์ ˆ์— ๋ฌด๋ฆฌ๊ฐ€ ๊ฐ€์ง€ ์•Š๋Š” ์šด๋™(์ˆ˜์ค‘ ์šด๋™, ์ž์ „๊ฑฐ ํƒ€๊ธฐ)๋ถ€ํ„ฐ ์‹œ์ž‘ํ•˜์„ธ์š”. ์ ์ง„์ ์œผ๋กœ ์šด๋™ ๊ฐ•๋„๋ฅผ ๋†’์ด๊ณ , ์ „๋ฌธ ํŠธ๋ ˆ์ด๋„ˆ์˜ ์ง€๋„๋ฅผ ๋ฐ›๋Š” ๊ฒƒ์ด ์•ˆ์ „ํ•ฉ๋‹ˆ๋‹ค.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- ํ‘ธํ„ฐ ์„น์…˜ -->
<footer class="bg-gray-800 text-white py-6">
<div class="container mx-auto px-4">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="mb-4 md:mb-0">
<div class="flex items-center space-x-2">
<i class="fas fa-heartbeat text-xl text-blue-400"></i>
<span class="font-medium">HealthTrack</span>
</div>
<p class="text-gray-400 text-sm mt-1">๋‹น์‹ ์˜ ๊ฑด๊ฐ•์„ ์ฑ…์ž„์ง€๋Š” ํŒŒํŠธ๋„ˆ</p>
</div>
<div class="text-sm text-gray-400 text-center md:text-right">
<p>ยฉ 2023 HealthTrack. All rights reserved.</p>
<p class="mt-1">์ด ๊ฒฐ๊ณผ๋Š” ์ฐธ๊ณ ์šฉ์ด๋ฉฐ, ์ „๋ฌธ ์˜๋ฃŒ ์ƒ๋‹ด์„ ๋Œ€์ฒดํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.</p>
</div>
</div>
</div>
</footer>
<script>
document.addEventListener('DOMContentLoaded', function() {
// DOM ์š”์†Œ ์„ ํƒ
const heightInput = document.getElementById('height');
const weightInput = document.getElementById('weight');
const heightSlider = document.getElementById('height-slider');
const weightSlider = document.getElementById('weight-slider');
const calculateBtn = document.getElementById('calculate-btn');
const resultSection = document.getElementById('result-section');
const bmiValue = document.getElementById('bmi-value');
const bmiCategory = document.getElementById('bmi-category');
const idealWeight = document.getElementById('ideal-weight');
const bmiMarker = document.getElementById('bmi-marker');
// ์ž…๋ ฅ ํ•„๋“œ์™€ ์Šฌ๋ผ์ด๋” ๋™๊ธฐํ™”
heightInput.addEventListener('input', function() {
heightSlider.value = this.value;
});
heightSlider.addEventListener('input', function() {
heightInput.value = this.value;
});
weightInput.addEventListener('input', function() {
weightSlider.value = this.value;
});
weightSlider.addEventListener('input', function() {
weightInput.value = this.value;
});
// BMI ๊ณ„์‚ฐ ํ•จ์ˆ˜
function calculateBMI(height, weight) {
// cm๋ฅผ m๋กœ ๋ณ€ํ™˜
const heightInMeters = height / 100;
// BMI ๊ณ„์‚ฐ: ์ฒด์ค‘(kg) / (ํ‚ค(m))^2
return weight / (heightInMeters * heightInMeters);
}
// BMI ๋ถ„๋ฅ˜ ๊ฒฐ์ • ํ•จ์ˆ˜ (ํ•œ๊ตญ ๊ธฐ์ค€)
function getBMICategory(bmi) {
if (bmi < 18.5) return '์ €์ฒด์ค‘';
if (bmi < 23) return '์ •์ƒ ์ฒด์ค‘';
if (bmi < 25) return '๊ณผ์ฒด์ค‘';
if (bmi < 30) return '๋น„๋งŒ';
return '๊ณ ๋„ ๋น„๋งŒ';
}
// BMI์— ๋”ฐ๋ฅธ ์ƒ‰์ƒ ๋ฐ˜ํ™˜
function getBMIColor(bmi) {
if (bmi < 18.5) return 'text-yellow-500';
if (bmi < 23) return 'text-green-600';
if (bmi < 25) return 'text-yellow-600';
if (bmi < 30) return 'text-orange-600';
return 'text-red-600';
}
// ์ด์ƒ์  ์ฒด์ค‘ ๋ฒ”์œ„ ๊ณ„์‚ฐ
function getIdealWeightRange(height) {
const heightInMeters = height / 100;
const lower = 18.5 * (heightInMeters * heightInMeters);
const upper = 23 * (heightInMeters * heightInMeters);
return `${lower.toFixed(1)} - ${upper.toFixed(1)}`;
}
// BMI ๋งˆ์ปค ์œ„์น˜ ์—…๋ฐ์ดํŠธ
function updateBMIMarker(bmi) {
// BMI ๋ฒ”์œ„: 15 ~ 40 (์‹œ๊ฐํ™”๋ฅผ ์œ„ํ•œ ๋ฒ”์œ„)
const minBMI = 15;
const maxBMI = 40;
// ์‹ค์ œ BMI๊ฐ€ ์‹œ๊ฐํ™” ๋ฒ”์œ„๋ฅผ ๋ฒ—์–ด๋‚˜๋Š” ๊ฒฝ์šฐ ์กฐ์ •
let displayBMI = Math.max(minBMI, Math.min(maxBMI, bmi));
// ๋งˆ์ปค ์œ„์น˜ ๊ณ„์‚ฐ (0% ~ 100%)
const percentage = ((displayBMI - minBMI) / (maxBMI - minBMI)) * 100;
bmiMarker.style.left = `${percentage}%`;
// ๋งˆ์ปค ์ƒ‰์ƒ ์—…๋ฐ์ดํŠธ
bmiMarker.style.borderTopColor = getBMIColor(bmi).replace('text', 'bg').split('-')[1];
}
// ๊ฑด๊ฐ• ํŒ ํ‘œ์‹œ
function showHealthTips(bmi) {
// ๋ชจ๋“  ํŒ ์ˆจ๊ธฐ๊ธฐ
document.querySelectorAll('#health-tips > div').forEach(el => {
el.classList.add('hidden');
});
// BMI ๋ฒ”์œ„์— ๋”ฐ๋ผ ํ•ด๋‹น ํŒ ํ‘œ์‹œ
if (bmi < 18.5) {
document.getElementById('underweight-tips').classList.remove('hidden');
} else if (bmi < 23) {
document.getElementById('normal-tips').classList.remove('hidden');
} else if (bmi < 25) {
document.getElementById('overweight-tips').classList.remove('hidden');
} else {
document.getElementById('obese-tips').classList.remove('hidden');
}
}
// ๊ณ„์‚ฐ ๋ฒ„ํŠผ ํด๋ฆญ ์ด๋ฒคํŠธ
calculateBtn.addEventListener('click', function() {
const height = parseFloat(heightInput.value);
const weight = parseFloat(weightInput.value);
// ์ž…๋ ฅ ์œ ํšจ์„ฑ ๊ฒ€์‚ฌ
if (isNaN(height) || isNaN(weight) || height <= 0 || weight <= 0) {
alert('์˜ฌ๋ฐ”๋ฅธ ํ‚ค์™€ ์ฒด์ค‘์„ ์ž…๋ ฅํ•ด์ฃผ์„ธ์š”.');
return;
}
// BMI ๊ณ„์‚ฐ
const bmi = calculateBMI(height, weight);
const roundedBMI = bmi.toFixed(2);
const category = getBMICategory(bmi);
const idealRange = getIdealWeightRange(height);
// ๊ฒฐ๊ณผ ์—…๋ฐ์ดํŠธ
bmiValue.textContent = roundedBMI;
bmiValue.className = `text-3xl font-bold ${getBMIColor(bmi)}`;
bmiCategory.textContent = category;
bmiCategory.className = `text-2xl font-bold ${getBMIColor(bmi)}`;
idealWeight.textContent = `${idealRange} kg`;
// BMI ๋งˆ์ปค ์—…๋ฐ์ดํŠธ
updateBMIMarker(bmi);
// ๊ฑด๊ฐ• ํŒ ํ‘œ์‹œ
showHealthTips(bmi);
// ๊ฒฐ๊ณผ ์„น์…˜ ํ‘œ์‹œ
resultSection.classList.remove('hidden');
// ๊ฒฐ๊ณผ ์„น์…˜์œผ๋กœ ์Šคํฌ๋กค
resultSection.scrollIntoView({ behavior: 'smooth' });
});
// ์ดˆ๊ธฐ ๋งˆ์ปค ์œ„์น˜ ์„ค์ • (์ค‘๊ฐ„ ๊ฐ’)
updateBMIMarker(22);
});
</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=joung/joung-nag" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>