220 lines
6.8 KiB
HTML
220 lines
6.8 KiB
HTML
<!doctype html>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>杨轩体重趋势 — 2026-06-12 ~ 2026-07-10</title>
|
||
<style>
|
||
:root {
|
||
color-scheme: light dark;
|
||
--bg: #f8fafc;
|
||
--fg: #172033;
|
||
--muted: #5b6475;
|
||
--line: #64748b;
|
||
--neutral: #e2e8f0;
|
||
--input: #bfdbfe;
|
||
--process: #c7d2fe;
|
||
--storage: #99f6e4;
|
||
--external: #fde68a;
|
||
--risk: #fecaca;
|
||
}
|
||
@media (prefers-color-scheme: dark) {
|
||
:root {
|
||
--bg: #0f172a;
|
||
--fg: #e5e7eb;
|
||
--muted: #a3adbd;
|
||
--line: #94a3b8;
|
||
--neutral: #334155;
|
||
--input: #1d4ed8;
|
||
--process: #4338ca;
|
||
--storage: #0f766e;
|
||
--external: #92400e;
|
||
--risk: #991b1b;
|
||
}
|
||
}
|
||
body {
|
||
margin: 0;
|
||
background: var(--bg);
|
||
color: var(--fg);
|
||
font: 14px/1.4 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||
}
|
||
main {
|
||
max-width: 800px;
|
||
margin: 32px auto;
|
||
padding: 0 20px;
|
||
}
|
||
svg {
|
||
width: 100%;
|
||
height: auto;
|
||
display: block;
|
||
}
|
||
.title {
|
||
font-size: 20px;
|
||
font-weight: 650;
|
||
fill: var(--fg);
|
||
}
|
||
.subtitle {
|
||
font-size: 13px;
|
||
fill: var(--muted);
|
||
}
|
||
.label {
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
fill: var(--fg);
|
||
}
|
||
.small {
|
||
font-size: 11px;
|
||
fill: var(--muted);
|
||
}
|
||
.highlight {
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
}
|
||
.grid {
|
||
stroke: var(--neutral);
|
||
stroke-width: 0.5;
|
||
stroke-dasharray: 4 4;
|
||
}
|
||
.data-line {
|
||
stroke: #2563eb;
|
||
stroke-width: 2.5;
|
||
fill: none;
|
||
stroke-linejoin: round;
|
||
stroke-linecap: round;
|
||
}
|
||
.data-dot {
|
||
fill: #2563eb;
|
||
stroke: white;
|
||
stroke-width: 1.5;
|
||
}
|
||
.target-line {
|
||
stroke: #f97316;
|
||
stroke-width: 1;
|
||
stroke-dasharray: 6 4;
|
||
}
|
||
.target-label {
|
||
font-size: 11px;
|
||
fill: #f97316;
|
||
}
|
||
.annotation {
|
||
font-size: 11px;
|
||
fill: var(--muted);
|
||
}
|
||
.arrow {
|
||
stroke: var(--muted);
|
||
stroke-width: 1;
|
||
fill: none;
|
||
}
|
||
.card {
|
||
fill: var(--neutral);
|
||
rx: 6;
|
||
ry: 6;
|
||
}
|
||
.stats-val {
|
||
font-size: 18px;
|
||
font-weight: 700;
|
||
fill: var(--fg);
|
||
}
|
||
.stats-lbl {
|
||
font-size: 11px;
|
||
fill: var(--muted);
|
||
}
|
||
.stats-down {
|
||
fill: #16a34a;
|
||
}
|
||
.stats-flat {
|
||
fill: #f59e0b;
|
||
}
|
||
</style>
|
||
<main>
|
||
<svg viewBox="0 0 740 520" xmlns="http://www.w3.org/2000/svg">
|
||
<text x="370" y="32" text-anchor="middle" class="title">杨轩 体重趋势 📉</text>
|
||
<text x="370" y="52" text-anchor="middle" class="subtitle">2026-06-12 → 2026-07-10（29天，-0.8斤）</text>
|
||
|
||
<!-- Summary cards -->
|
||
<rect x="40" y="68" width="200" height="72" class="card" />
|
||
<text x="60" y="92" class="stats-lbl">起始体重</text>
|
||
<text x="60" y="118" class="stats-val">134.0 斤</text>
|
||
|
||
<rect x="270" y="68" width="200" height="72" class="card" />
|
||
<text x="290" y="92" class="stats-lbl">当前体重</text>
|
||
<text x="290" y="118" class="stats-val" fill="#2563eb">133.2 斤</text>
|
||
|
||
<rect x="500" y="68" width="200" height="72" class="card" />
|
||
<text x="520" y="92" class="stats-lbl">变化</text>
|
||
<text x="520" y="118" class="stats-val stats-down">▼ 0.8 斤</text>
|
||
<text x="520" y="132" class="small">日均 -0.03 斤</text>
|
||
|
||
<!-- Chart area -->
|
||
<!-- Grid Y axis labels -->
|
||
<text x="35" y="178" text-anchor="end" class="small">134.5</text>
|
||
<line x1="42" y1="175" x2="710" y2="175" class="grid" />
|
||
|
||
<text x="35" y="213" text-anchor="end" class="small">134.0</text>
|
||
<line x1="42" y1="210" x2="710" y2="210" class="grid" />
|
||
|
||
<text x="35" y="248" text-anchor="end" class="small">133.5</text>
|
||
<line x1="42" y1="245" x2="710" y2="245" class="grid" />
|
||
|
||
<text x="35" y="283" text-anchor="end" class="small">133.0</text>
|
||
<line x1="42" y1="280" x2="710" y2="280" class="grid" />
|
||
|
||
<text x="35" y="318" text-anchor="end" class="small">132.5</text>
|
||
<line x1="42" y1="315" x2="710" y2="315" class="grid" />
|
||
|
||
<text x="35" y="353" text-anchor="end" class="small">132.0</text>
|
||
<line x1="42" y1="350" x2="710" y2="350" class="grid" />
|
||
|
||
<!-- X axis labels -->
|
||
<text x="129" y="375" text-anchor="middle" class="small">06-12</text>
|
||
<text x="275" y="375" text-anchor="middle" class="small">06-17</text>
|
||
<text x="348" y="375" text-anchor="middle" class="small">06-18</text>
|
||
<text x="537" y="375" text-anchor="middle" class="small">06-26</text>
|
||
<text x="680" y="375" text-anchor="middle" class="small">07-10</text>
|
||
|
||
<!-- Data points (y = 175 + (134.5 - weight) * 70 / 1.0) -->
|
||
<!-- 134.0 → y=210, 134.2 → y=196, 133.6 → y=238, 133.6 → y=238, 133.2 → y=266 -->
|
||
<!-- Line -->
|
||
<polyline points="129,210 275,196 348,238 537,238 680,266" class="data-line" />
|
||
|
||
<!-- Dots -->
|
||
<circle cx="129" cy="210" r="5" class="data-dot" />
|
||
<circle cx="275" cy="196" r="5" class="data-dot" />
|
||
<circle cx="348" cy="238" r="5" class="data-dot" />
|
||
<circle cx="537" cy="238" r="5" class="data-dot" />
|
||
<circle cx="680" cy="266" r="6" class="data-dot" style="fill:#dc2625;stroke-width:2;" />
|
||
|
||
<!-- Value labels above dots -->
|
||
<text x="129" y="200" text-anchor="middle" class="highlight" fill="var(--fg)">134.0</text>
|
||
<text x="275" y="186" text-anchor="middle" class="highlight" fill="var(--fg)">134.2</text>
|
||
<text x="348" y="228" text-anchor="middle" class="highlight" fill="var(--fg)">133.6</text>
|
||
<text x="537" y="228" text-anchor="middle" class="highlight" fill="var(--fg)">133.6</text>
|
||
<text x="680" y="256" text-anchor="middle" class="highlight" style="fill:#dc2625;">133.2 ✨</text>
|
||
|
||
<!-- Annotations -->
|
||
<!-- 平台期标注 -->
|
||
<line x1="348" y1="238" x2="537" y2="238" stroke="#f59e0b" stroke-width="2" stroke-dasharray="4 3" />
|
||
<text x="442" y="232" text-anchor="middle" class="small" fill="#f59e0b">平台期 8天持平</text>
|
||
|
||
<!-- 突破标注 -->
|
||
<path d="M 600,278 L 630,295 L 660,278" class="arrow" />
|
||
<text x="630" y="308" text-anchor="middle" class="small" style="fill:#16a34a;">⬇ 平台突破</text>
|
||
|
||
<!-- X axis baseline -->
|
||
<line x1="42" y1="360" x2="710" y2="360" stroke="var(--line)" stroke-width="1" />
|
||
|
||
<!-- Legend -->
|
||
<text x="42" y="405" class="small">● 实际测量值</text>
|
||
<text x="42" y="425" class="small">
|
||
<tspan fill="#2563eb">━━ 体重趋势线</tspan>
|
||
</text>
|
||
<text x="42" y="445" class="small">
|
||
<tspan fill="#f59e0b">╌╌ 平台期</tspan>
|
||
</text>
|
||
<text x="280" y="405" class="small">▲ 空腹血糖: 6.26 mmol/L</text>
|
||
|
||
<!-- Analysis -->
|
||
<text x="42" y="475" class="highlight" fill="var(--fg)">📊 分析摘要</text>
|
||
<text x="42" y="495" class="small">29天从134.0→133.2斤（-0.8斤），日均约-0.03斤。经历了一次小波动和8天平缓期，7月出现突破迹象。</text>
|
||
</svg>
|
||
</main>
|
||
</html>
|