r93/habit_detail.html · 约 2816 字符
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>习惯详情</title>
7<link rel="stylesheet" href="style.css">
8</head>
9<body>
10<div class="app">
11 <header class="top">
12 <div class="top-l">专注者 · 小满</div>
13 <div class="top-r">习惯详情</div>
14 </header>
15 <main class="main">
16<div class="card row"><div class="thumb">🧘</div><div class="info" style="flex:1">
17 <div class="nm" style="font-size:16px;font-weight:800">冥想 10 分</div>
18 <div class="muted">🔥 连续 21 天 · 创建于 2026-06-26</div></div>
19 <span class="badge b-ok">今日✓</span></div>
20<div class="card">
21 <div class="sec-title"><span>📅</span> 近 7 日打卡</div>
22 <div class="row" style="gap:6px">
23 <div style="flex:1;text-align:center"><div class="dot on"></div><div class="muted" style="margin-top:4px">一</div></div><div style="flex:1;text-align:center"><div class="dot on"></div><div class="muted" style="margin-top:4px">二</div></div><div style="flex:1;text-align:center"><div class="dot on"></div><div class="muted" style="margin-top:4px">三</div></div><div style="flex:1;text-align:center"><div class="dot "></div><div class="muted" style="margin-top:4px">四</div></div><div style="flex:1;text-align:center"><div class="dot on"></div><div class="muted" style="margin-top:4px">五</div></div><div style="flex:1;text-align:center"><div class="dot on"></div><div class="muted" style="margin-top:4px">六</div></div><div style="flex:1;text-align:center"><div class="dot on"></div><div class="muted" style="margin-top:4px">日</div></div>
24 </div>
25</div>
26<div class="card">
27 <div class="sec-title"><span>📝</span> 打卡备注</div>
28 <textarea class="ta">周一清晨 10 分钟呼吸练习，状态更平稳。</textarea>
29</div>
30<div class="row" style="gap:8px;margin:2px 2px 12px">
31 <button class="btn flex" style="flex:1">✓ 立即打卡</button>
32 <button class="btn line flex" style="flex:1">🗑 删除习惯</button>
33</div>
34</main>
35 <nav class="nav"><a class="" href="index.html"><span class="ic">🍅</span>今日</a><a class="" href="timer.html"><span class="ic">⏱️</span>计时</a><a class="" href="habits.html"><span class="ic">✅</span>习惯</a><a class=" on" href="habit_detail.html"><span class="ic">📖</span>详情</a><a class="" href="stats.html"><span class="ic">📊</span>统计</a><a class="" href="goals.html"><span class="ic">🎯</span>目标</a><a class="" href="sound.html"><span class="ic">🎵</span>白噪</a><a class="" href="calendar.html"><span class="ic">📅</span>日历</a><a class="" href="settings.html"><span class="ic">⚙️</span>设置</a></nav>
36</div>
37<script></script>
38</body>
39</html>