r94/habit_detail.html · 约 2860 字符
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="tile t-blue" style="margin-bottom:13px">
17 <div class="row"><span class="te">📚</span><span class="badge b-pri">已连续 28 天</span></div>
18 <div><div class="tn">阅读 30 分钟</div><div class="tl">本月打卡 26/30 · 最佳记录 41 天</div></div>
19</div>
20<div class="card"><div class="sec-title">📅 近 30 天打卡</div>
21 <div class="cal">
22 <div class="wd">一</div><div class="wd">二</div><div class="wd">三</div><div class="wd">四</div><div class="wd">五</div><div class="wd">六</div><div class="wd">日</div>
23 <div class="cell h3">1</div><div class="cell h3">2</div><div class="cell h3">3</div><div class="cell h2">4</div><div class="cell h3">5</div><div class="cell ">6</div><div class="cell h1">7</div><div class="cell h3">8</div><div class="cell h3">9</div><div class="cell h3">10</div><div class="cell h2">11</div><div class="cell h3">12</div><div class="cell h3">13</div><div class="cell ">14</div><div class="cell h1">15</div><div class="cell h3">16</div><div class="cell h3">17</div><div class="cell h3">18</div><div class="cell h3">19</div><div class="cell h2">20</div><div class="cell h3">21</div><div class="cell h3">22</div><div class="cell ">23</div><div class="cell h1">24</div><div class="cell h3">25</div><div class="cell h3">26</div><div class="cell h3">27</div><div class="cell h2">28</div><div class="cell h3">29</div><div class="cell h3">30</div>
24 </div>
25 <div class="row" style="margin-top:12px"><span class="muted">🟪 已打卡 · 🟦 部分 · ⬜ 未打卡</span></div>
26</div>
27<div class="card"><div class="sec-title">📝 打卡备注</div>
28 <div class="habit"><div class="thumb t-cyan">💡</div><div class="info"><div class="nm">今日书摘</div><div class="sub">"专注力是数字时代最稀缺的肌肉。"</div></div></div>
29</div>
30<div class="row" style="gap:10px"><button class="btn full">今日打卡</button><button class="btn line" onclick="alert('已进入编辑（演示）')">编辑</button></div>
31</main>
32 <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=" on" href="habits.html"><span class="ic">✅</span>习惯</a><a class="" href="stats.html"><span class="ic">📊</span>统计</a><a class="" href="settings.html"><span class="ic">⚙️</span>设置</a></nav>
33</div>
34<script></script>
35</body>
36</html>