Spaces:

joung
/

joung-nag

Running

App Files Files Community

joung commited on Apr 14

Commit

5178f5a

verified ·

1 Parent(s): 3467c33

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +454 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Joung Nag
-emoji: 🏆
-colorFrom: green
-colorTo: yellow
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: joung-nag
+emoji: 🐳
+colorFrom: yellow
+colorTo: gray
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,454 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!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>