shumengya
0d8ea01b43
- 更新 AI 模型列表（models.generated.ts / image-models.generated.ts） - 新增 bmi-calculator.html Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
405 lines
11 KiB
HTML
405 lines
11 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>BMI 指数计算器</title>
|
||
<style>
|
||
:root {
|
||
--bg: #f4f7fa;
|
||
--card: #ffffff;
|
||
--text: #1f2937;
|
||
--muted: #6b7280;
|
||
--primary: #3b82f6;
|
||
--primary-dark: #2563eb;
|
||
--radius: 16px;
|
||
--shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
|
||
}
|
||
|
||
* {
|
||
box-sizing: border-box;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
|
||
background: var(--bg);
|
||
color: var(--text);
|
||
min-height: 100vh;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 20px;
|
||
}
|
||
|
||
.container {
|
||
width: 100%;
|
||
max-width: 480px;
|
||
background: var(--card);
|
||
border-radius: var(--radius);
|
||
box-shadow: var(--shadow);
|
||
padding: 32px;
|
||
}
|
||
|
||
h1 {
|
||
text-align: center;
|
||
font-size: 1.6rem;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.subtitle {
|
||
text-align: center;
|
||
color: var(--muted);
|
||
font-size: 0.9rem;
|
||
margin-bottom: 28px;
|
||
}
|
||
|
||
.form-group {
|
||
margin-bottom: 18px;
|
||
}
|
||
|
||
label {
|
||
display: block;
|
||
margin-bottom: 6px;
|
||
font-size: 0.9rem;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.unit-toggle {
|
||
display: flex;
|
||
gap: 10px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.unit-toggle button {
|
||
flex: 1;
|
||
padding: 10px;
|
||
border: 1px solid #d1d5db;
|
||
background: #f9fafb;
|
||
border-radius: 10px;
|
||
cursor: pointer;
|
||
font-size: 0.9rem;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.unit-toggle button.active {
|
||
background: var(--primary);
|
||
color: #fff;
|
||
border-color: var(--primary);
|
||
}
|
||
|
||
input[type="number"] {
|
||
width: 100%;
|
||
padding: 12px 14px;
|
||
border: 1px solid #d1d5db;
|
||
border-radius: 10px;
|
||
font-size: 1rem;
|
||
transition: border-color 0.2s, box-shadow 0.2s;
|
||
}
|
||
|
||
input[type="number"]:focus {
|
||
outline: none;
|
||
border-color: var(--primary);
|
||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
|
||
}
|
||
|
||
.input-row {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 14px;
|
||
}
|
||
|
||
.btn {
|
||
width: 100%;
|
||
padding: 14px;
|
||
margin-top: 10px;
|
||
border: none;
|
||
border-radius: 10px;
|
||
background: var(--primary);
|
||
color: #fff;
|
||
font-size: 1rem;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
transition: background 0.2s;
|
||
}
|
||
|
||
.btn:hover {
|
||
background: var(--primary-dark);
|
||
}
|
||
|
||
.result {
|
||
margin-top: 24px;
|
||
text-align: center;
|
||
display: none;
|
||
}
|
||
|
||
.result.show {
|
||
display: block;
|
||
animation: fadeIn 0.3s ease;
|
||
}
|
||
|
||
.bmi-value {
|
||
font-size: 3rem;
|
||
font-weight: 700;
|
||
line-height: 1;
|
||
}
|
||
|
||
.bmi-category {
|
||
font-size: 1.2rem;
|
||
margin-top: 8px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.bmi-tip {
|
||
margin-top: 10px;
|
||
color: var(--muted);
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.scale {
|
||
margin-top: 22px;
|
||
display: flex;
|
||
height: 14px;
|
||
border-radius: 999px;
|
||
overflow: hidden;
|
||
position: relative;
|
||
}
|
||
|
||
.scale span {
|
||
flex: 1;
|
||
}
|
||
|
||
.scale .under { background: #60a5fa; }
|
||
.scale .normal { background: #22c55e; }
|
||
.scale .over { background: #f59e0b; }
|
||
.scale .obese { background: #ef4444; }
|
||
|
||
.scale-marker {
|
||
position: absolute;
|
||
top: -4px;
|
||
width: 4px;
|
||
height: 22px;
|
||
background: #1f2937;
|
||
border-radius: 2px;
|
||
transform: translateX(-50%);
|
||
transition: left 0.4s ease;
|
||
}
|
||
|
||
.scale-labels {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 6px;
|
||
font-size: 0.75rem;
|
||
color: var(--muted);
|
||
}
|
||
|
||
.info-cards {
|
||
margin-top: 28px;
|
||
display: grid;
|
||
gap: 10px;
|
||
}
|
||
|
||
.info-card {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 12px 14px;
|
||
border-radius: 10px;
|
||
background: #f9fafb;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.dot {
|
||
width: 12px;
|
||
height: 12px;
|
||
border-radius: 50%;
|
||
margin-right: 10px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.dot.under { background: #60a5fa; }
|
||
.dot.normal { background: #22c55e; }
|
||
.dot.over { background: #f59e0b; }
|
||
.dot.obese { background: #ef4444; }
|
||
|
||
@keyframes fadeIn {
|
||
from { opacity: 0; transform: translateY(6px); }
|
||
to { opacity: 1; transform: translateY(0); }
|
||
}
|
||
|
||
@media (max-width: 480px) {
|
||
body {
|
||
padding: 0;
|
||
}
|
||
|
||
.container {
|
||
border-radius: 0;
|
||
min-height: 100vh;
|
||
max-width: 100%;
|
||
padding: 24px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
}
|
||
|
||
h1 {
|
||
font-size: 1.4rem;
|
||
}
|
||
|
||
.bmi-value {
|
||
font-size: 2.6rem;
|
||
}
|
||
|
||
.input-row {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<h1>BMI 指数计算器</h1>
|
||
<p class="subtitle">输入身高体重，快速了解你的身体质量指数</p>
|
||
|
||
<div class="unit-toggle">
|
||
<button id="unitMetric" class="active" onclick="setUnit('metric')">公制 (cm / kg)</button>
|
||
<button id="unitImperial" onclick="setUnit('imperial')">英制 (ft+in / lb)</button>
|
||
</div>
|
||
|
||
<form id="bmiForm" onsubmit="event.preventDefault(); calculateBMI();">
|
||
<div id="metricInputs">
|
||
<div class="form-group">
|
||
<label for="heightCm">身高（厘米）</label>
|
||
<input type="number" id="heightCm" placeholder="例如：175" min="1" step="0.1" />
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="weightKg">体重（公斤）</label>
|
||
<input type="number" id="weightKg" placeholder="例如：65" min="1" step="0.1" />
|
||
</div>
|
||
</div>
|
||
|
||
<div id="imperialInputs" style="display: none;">
|
||
<div class="input-row">
|
||
<div class="form-group">
|
||
<label for="heightFt">身高（英尺）</label>
|
||
<input type="number" id="heightFt" placeholder="ft" min="1" step="1" />
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="heightIn">身高（英寸）</label>
|
||
<input type="number" id="heightIn" placeholder="in" min="0" step="0.1" />
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="weightLb">体重（磅）</label>
|
||
<input type="number" id="weightLb" placeholder="例如：150" min="1" step="0.1" />
|
||
</div>
|
||
</div>
|
||
|
||
<button type="submit" class="btn">计算 BMI</button>
|
||
</form>
|
||
|
||
<div id="result" class="result">
|
||
<div class="bmi-value" id="bmiValue">--</div>
|
||
<div class="bmi-category" id="bmiCategory">--</div>
|
||
<div class="bmi-tip" id="bmiTip">--</div>
|
||
|
||
<div class="scale">
|
||
<span class="under"></span>
|
||
<span class="normal"></span>
|
||
<span class="over"></span>
|
||
<span class="obese"></span>
|
||
<div class="scale-marker" id="scaleMarker" style="left: 0%;"></div>
|
||
</div>
|
||
<div class="scale-labels">
|
||
<span>偏瘦</span>
|
||
<span>正常</span>
|
||
<span>偏胖</span>
|
||
<span>肥胖</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="info-cards">
|
||
<div class="info-card"><span class="dot under"></span>偏瘦：BMI < 18.5</div>
|
||
<div class="info-card"><span class="dot normal"></span>正常：18.5 ≤ BMI < 24</div>
|
||
<div class="info-card"><span class="dot over"></span>偏胖：24 ≤ BMI < 28</div>
|
||
<div class="info-card"><span class="dot obese"></span>肥胖：BMI ≥ 28</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
let currentUnit = 'metric';
|
||
|
||
function setUnit(unit) {
|
||
currentUnit = unit;
|
||
document.getElementById('unitMetric').classList.toggle('active', unit === 'metric');
|
||
document.getElementById('unitImperial').classList.toggle('active', unit === 'imperial');
|
||
document.getElementById('metricInputs').style.display = unit === 'metric' ? 'block' : 'none';
|
||
document.getElementById('imperialInputs').style.display = unit === 'imperial' ? 'block' : 'none';
|
||
document.getElementById('result').classList.remove('show');
|
||
}
|
||
|
||
function calculateBMI() {
|
||
let bmi = 0;
|
||
|
||
if (currentUnit === 'metric') {
|
||
const heightCm = parseFloat(document.getElementById('heightCm').value);
|
||
const weightKg = parseFloat(document.getElementById('weightKg').value);
|
||
if (!heightCm || !weightKg || heightCm <= 0 || weightKg <= 0) {
|
||
alert('请输入有效的身高和体重');
|
||
return;
|
||
}
|
||
const heightM = heightCm / 100;
|
||
bmi = weightKg / (heightM * heightM);
|
||
} else {
|
||
const heightFt = parseFloat(document.getElementById('heightFt').value) || 0;
|
||
const heightIn = parseFloat(document.getElementById('heightIn').value) || 0;
|
||
const weightLb = parseFloat(document.getElementById('weightLb').value);
|
||
const totalInches = heightFt * 12 + heightIn;
|
||
if (!totalInches || !weightLb || totalInches <= 0 || weightLb <= 0) {
|
||
alert('请输入有效的身高和体重');
|
||
return;
|
||
}
|
||
bmi = 703 * weightLb / (totalInches * totalInches);
|
||
}
|
||
|
||
bmi = Math.round(bmi * 10) / 10;
|
||
|
||
let category = '';
|
||
let tip = '';
|
||
let color = '';
|
||
|
||
if (bmi < 18.5) {
|
||
category = '偏瘦';
|
||
tip = '建议适当增加营养摄入，配合力量训练增肌。';
|
||
color = '#60a5fa';
|
||
} else if (bmi < 24) {
|
||
category = '正常';
|
||
tip = 'BMI 在正常范围内，继续保持健康的生活方式！';
|
||
color = '#22c55e';
|
||
} else if (bmi < 28) {
|
||
category = '偏胖';
|
||
tip = '建议适当控制饮食，增加有氧运动。';
|
||
color = '#f59e0b';
|
||
} else {
|
||
category = '肥胖';
|
||
tip = '建议咨询医生或营养师，制定科学的减重计划。';
|
||
color = '#ef4444';
|
||
}
|
||
|
||
document.getElementById('bmiValue').textContent = bmi;
|
||
document.getElementById('bmiValue').style.color = color;
|
||
document.getElementById('bmiCategory').textContent = category;
|
||
document.getElementById('bmiCategory').style.color = color;
|
||
document.getElementById('bmiTip').textContent = tip;
|
||
|
||
// 刻度位置：把 BMI 映射到 15~35 的区间
|
||
let percent = ((bmi - 15) / (35 - 15)) * 100;
|
||
percent = Math.max(0, Math.min(100, percent));
|
||
document.getElementById('scaleMarker').style.left = percent + '%';
|
||
|
||
document.getElementById('result').classList.add('show');
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|