115 lines
4.9 KiB
HTML
Executable File
115 lines
4.9 KiB
HTML
Executable File
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>身体健康分析</title>
|
||
<link rel="stylesheet" href="styles.css">
|
||
<link rel="stylesheet" href="background.css">
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<header class="header">
|
||
<h1 class="title">身体健康分析</h1>
|
||
<p class="subtitle">通过身高、体重、年龄、性别多维度分析身体健康状态</p>
|
||
</header>
|
||
|
||
<main class="main-content">
|
||
<div class="form-section">
|
||
<form id="healthForm" class="health-form">
|
||
<div class="form-group">
|
||
<label for="height" class="form-label">身高 (cm)</label>
|
||
<input type="number" id="height" name="height" class="form-input" placeholder="请输入身高" min="100" max="250" required>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="weight" class="form-label">体重 (kg)</label>
|
||
<input type="number" id="weight" name="weight" class="form-input" placeholder="请输入体重" min="30" max="200" required>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="age" class="form-label">年龄</label>
|
||
<input type="number" id="age" name="age" class="form-input" placeholder="请输入年龄" min="1" max="120" required>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="gender" class="form-label">性别</label>
|
||
<select id="gender" name="gender" class="form-select" required>
|
||
<option value="">请选择性别</option>
|
||
<option value="male">男性</option>
|
||
<option value="female">女性</option>
|
||
</select>
|
||
</div>
|
||
|
||
<button type="submit" class="submit-btn" id="analyzeBtn">
|
||
<span class="btn-text">开始分析</span>
|
||
<div class="loading-spinner" style="display: none;"></div>
|
||
</button>
|
||
</form>
|
||
</div>
|
||
|
||
<div class="result-section" id="resultSection" style="display: none;">
|
||
<div class="result-header">
|
||
<h2 class="result-title">分析结果</h2>
|
||
<button class="reset-btn" id="resetBtn">重新分析</button>
|
||
</div>
|
||
|
||
<div class="result-content">
|
||
<div class="basic-info-card">
|
||
<h3 class="card-title">基本信息</h3>
|
||
<div class="info-grid" id="basicInfo"></div>
|
||
</div>
|
||
|
||
<div class="bmi-card">
|
||
<h3 class="card-title">BMI 分析</h3>
|
||
<div class="bmi-content" id="bmiContent"></div>
|
||
</div>
|
||
|
||
<div class="weight-card">
|
||
<h3 class="card-title">体重评估</h3>
|
||
<div class="weight-content" id="weightContent"></div>
|
||
</div>
|
||
|
||
<div class="metabolism-card">
|
||
<h3 class="card-title">代谢分析</h3>
|
||
<div class="metabolism-content" id="metabolismContent"></div>
|
||
</div>
|
||
|
||
<div class="body-fat-card">
|
||
<h3 class="card-title">体脂分析</h3>
|
||
<div class="body-fat-content" id="bodyFatContent"></div>
|
||
</div>
|
||
|
||
<div class="measurements-card">
|
||
<h3 class="card-title">理想三围</h3>
|
||
<div class="measurements-content" id="measurementsContent"></div>
|
||
</div>
|
||
|
||
<div class="advice-card">
|
||
<h3 class="card-title">健康建议</h3>
|
||
<div class="advice-content" id="adviceContent"></div>
|
||
</div>
|
||
|
||
<div class="disclaimer-card">
|
||
<p class="disclaimer" id="disclaimer"></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="error-section" id="errorSection" style="display: none;">
|
||
<div class="error-content">
|
||
<h3 class="error-title">分析失败</h3>
|
||
<p class="error-message" id="errorMessage"></p>
|
||
<button class="retry-btn" id="retryBtn">重试</button>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
|
||
<footer class="footer">
|
||
<p class="footer-text">数据来源：60s API</p>
|
||
</footer>
|
||
</div>
|
||
|
||
<script src="script.js"></script>
|
||
</body>
|
||
</html> |