<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>健康状态分析与食谱推荐</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Roboto, system-ui, -apple-system, sans-serif;
}
body {
background: linear-gradient(145deg, #f5f9fc 0%, #e3edf5 100%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
.app-card {
max-width: 750px;
width: 100%;
background: rgba(255, 255, 255, 0.75);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 48px;
padding: 30px 28px;
box-shadow: 0 20px 40px rgba(0, 20, 30, 0.15), 0 8px 16px rgba(0,0,0,0.05);
border: 1px solid rgba(255,255,255,0.3);
transition: all 0.2s ease;
}
h1 {
font-size: 2rem;
font-weight: 600;
color: #1a3b4f;
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 8px;
letter-spacing: -0.3px;
}
h1 small {
font-size: 0.9rem;
font-weight: 400;
color: #4a6f84;
margin-left: auto;
background: #d7e4ed;
padding: 4px 16px;
border-radius: 40px;
}
.subhead {
color: #3b5c70;
margin-bottom: 28px;
font-weight: 400;
border-left: 4px solid #5f9bb0;
padding-left: 16px;
background: rgba(95, 155, 176, 0.06);
border-radius: 0 12px 12px 0;
}
.input-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px 20px;
background: rgba(255,255,255,0.4);
padding: 22px 20px;
border-radius: 32px;
backdrop-filter: blur(4px);
border: 1px solid rgba(255,255,255,0.8);
margin-bottom: 28px;
}
.input-item {
display: flex;
flex-direction: column;
gap: 4px;
}
.input-item.full-width {
grid-column: 1 / -1;
}
.input-item label {
font-size: 0.85rem;
font-weight: 600;
color: #1f4054;
letter-spacing: 0.3px;
display: flex;
align-items: center;
gap: 6px;
}
.input-item label i {
font-style: normal;
background: #b6d2e0;
width: 20px;
height: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 30px;
color: #1a3b4f;
font-size: 0.7rem;
font-weight: 700;
}
.input-item input, .input-item select {
background: white;
border: 1px solid #d3e2ed;
border-radius: 60px;
padding: 12px 18px;
font-size: 1rem;
outline: none;
transition: all 0.2s;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
width: 100%;
color: #1a2f3d;
font-weight: 500;
}
.input-item input:focus, .input-item select:focus {
border-color: #3d8da8;
box-shadow: 0 0 0 3px rgba(61, 141, 168, 0.2), inset 0 2px 4px rgba(0,0,0,0.02);
}
.input-item input::placeholder {
color: #9bb7c9;
font-weight: 400;
}
.input-item select {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%233d6f86' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 16px center;
background-size: 16px;
}
.action-bar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 14px;
margin: 8px 0 22px 0;
}
.btn {
background: white;
border: none;
padding: 14px 32px;
border-radius: 60px;
font-weight: 600;
font-size: 1rem;
color: #1a3b4f;
box-shadow: 0 4px 8px rgba(0, 20, 30, 0.08);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
cursor: pointer;
transition: all 0.15s ease;
border: 1px solid transparent;
flex: 1 1 auto;
min-width: 120px;
}
.btn-primary {
background: #1f4a5f;
color: white;
box-shadow: 0 8px 18px rgba(26, 59, 79, 0.25);
border-color: #1f4a5f;
}
.btn-primary:hover {
background: #123846;
transform: scale(0.98);
box-shadow: 0 4px 12px rgba(26, 59, 79, 0.3);
}
.btn-secondary {
background: #e2eef7;
color: #1a3b4f;
border-color: #cbdae6;
}
.btn-secondary:hover {
background: #d0e2ee;
}
.btn:active { transform: scale(0.96); }
.result-area {
background: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(4px);
border-radius: 32px;
padding: 24px 24px 20px;
border: 1px solid rgba(255,255,255,0.9);
margin-top: 6px;
transition: all 0.3s ease;
}
.result-area h2 {
font-size: 1.2rem;
font-weight: 600;
color: #12303f;
display: flex;
align-items: center;
gap: 12px;
border-bottom: 2px dashed #b4cfdd;
padding-bottom: 12px;
margin-bottom: 18px;
}
.health-status {
background: #ebf4fa;
border-radius: 40px;
padding: 16px 22px;
margin-bottom: 22px;
border-left: 6px solid #2f7a94;
box-shadow: inset 0 1px 4px rgba(0,0,0,0.02);
}
.health-status .status-badge {
display: inline-block;
background: #1f4a5f;
color: white;
padding: 4px 18px;
border-radius: 40px;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
margin-bottom: 8px;
}
.health-status .status-text {
font-size: 1.1rem;
font-weight: 500;
color: #0d2c3d;
line-height: 1.5;
}
.recipe-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
margin-top: 8px;
}
.recipe-card {
background: white;
border-radius: 28px;
padding: 16px 18px 18px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
border: 1px solid #deecf3;
transition: all 0.1s ease;
}
.recipe-card h3 {
font-size: 1rem;
font-weight: 700;
color: #1d4157;
display: flex;
align-items: center;
gap: 6px;
border-bottom: 1px solid #e8f0f5;
padding-bottom: 10px;
margin-bottom: 10px;
}
.recipe-card h3 span {
background: #bee0e
