index.html · 约 4715 字符
1<!DOCTYPE html>
2<html lang="zh-CN">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
6<title>体温记录日历 H5 · 体温日志</title>
7<link rel="stylesheet" href="css/style.css">
8</head>
9<body>
10<div class="phone">
11 <!-- 标题 + 统计 -->
12 <div class="hd">
13 <div class="hd-top">
14 <div class="ic">🌡️</div>
15 <div>
16 <h1>体温日志</h1>
17 <div class="sub">每日体温记录 · 异常自动高亮</div>
18 </div>
19 <div class="set"><button id="btnSet">⚙ 阈值</button></div>
20 </div>
21 <div class="stats">
22 <div class="st"><b id="stDays">0</b><span>记录天数</span></div>
23 <div class="st warn"><b id="stAbn">0</b><span>异常天数</span></div>
24 <div class="st"><b id="stHi">—</b><span>本月最高</span></div>
25 <div class="st"><b id="stLo">—</b><span>本月最低</span></div>
26 </div>
27 </div>
28
29 <!-- 日历 -->
30 <div class="cal">
31 <div class="cal-bar">
32 <button class="mv" id="prevM">‹</button>
33 <div class="ttl" id="calTitle">—</div>
34 <button class="today" id="toToday">今天</button>
35 <button class="mv" id="nextM">›</button>
36 </div>
37 <div class="wk"><div>日</div><div>一</div><div>二</div><div>三</div><div>四</div><div>五</div><div>六</div></div>
38 <div class="grid" id="grid"></div>
39 <div class="legend">
40 <div class="lg"><span class="dot n"></span>正常</div>
41 <div class="lg"><span class="dot lo"></span>偏低/过低</div>
42 <div class="lg"><span class="dot fl"></span>低热</div>
43 <div class="lg"><span class="dot fh"></span>高热</div>
44 </div>
45 </div>
46
47 <!-- 选中日记录 -->
48 <div class="day">
49 <div class="day-h">
50 <div class="dt" id="dayDate">—</div>
51 <button class="add" id="dayAdd">＋ 添加记录</button>
52 </div>
53 <div id="dayBox"></div>
54 </div>
55</div>
56
57<!-- 添加记录弹层 -->
58<div class="mask" id="mask"></div>
59<div class="sheet" id="sheet">
60 <div class="grab"></div>
61 <h3>添加体温记录 · <span id="sfDate"></span></h3>
62 <div class="fld">
63 <label>体温（℃）</label>
64 <input type="number" id="sfTemp" inputmode="decimal" step="0.1" min="30" max="45" placeholder="例如 37.5">
65 </div>
66 <div class="fld">
67 <label>测量部位</label>
68 <div class="seg" data-seg="site">
69 <button data-v="口腔" class="on">口腔</button>
70 <button data-v="腋下">腋下</button>
71 <button data-v="额温">额温</button>
72 </div>
73 </div>
74 <div class="fld">
75 <label>测量时段</label>
76 <div class="seg" data-seg="time">
77 <button data-v="早" class="on">早</button>
78 <button data-v="中">中</button>
79 <button data-v="晚">晚</button>
80 <button data-v="夜">夜</button>
81 </div>
82 </div>
83 <div class="fld">
84 <label>备注（症状等，可选）</label>
85 <textarea id="sfNote" placeholder="如：头痛、乏力、已服药…"></textarea>
86 </div>
87 <button class="btn-save" id="sfSave">保存记录</button>
88 <button class="btn-del" id="sfCancel" style="border:none;background:#eef3f7;color:#5a6675">取消</button>
89</div>
90
91<!-- 设置弹层 -->
92<div class="mask" id="setMask"></div>
93<div class="sheet" id="setSheet">
94 <div class="grab"></div>
95 <h3>异常判定阈值（口腔）</h3>
96 <div class="set-row"><div class="k">体温过低<small>低于此值提示过低</small></div><input type="number" id="svHypo" step="0.1"></div>
97 <div class="set-row"><div class="k">偏低下限<small>低于此值记为偏低</small></div><input type="number" id="svLow" step="0.1"></div>
98 <div class="set-row"><div class="k">正常上限<small>此范围内为正常</small></div><input type="number" id="svHigh" step="0.1"></div>
99 <div class="set-row"><div class="k">低热起点<small>达到此值记低热</small></div><input type="number" id="svFeverLo" step="0.1"></div>
100 <div class="set-row"><div class="k">高热起点<small>达到此值记高热</small></div><input type="number" id="svFeverHi" step="0.1"></div>
101 <div class="tip">默认：正常 36.0~37.2℃；低热 ≥37.3℃；高热 ≥38.1℃；低于 36.0℃ 偏低，低于 35.5℃ 体温过低。修改后日历会立即重新高亮。</div>
102 <button class="btn-save" id="setSave">保存阈值</button>
103 <button class="btn-del" id="setReset" style="border:none;background:#eef3f7;color:#5a6675">恢复默认</button>
104 <button class="btn-del" id="setCancel" style="border:none;background:#eef3f7;color:#5a6675">取消</button>
105</div>
106
107<script src="js/main.js"></script>
108</body>
109</html>