首页/ mobileweb/ 番茄钟与习惯打卡器H5移动端功能演示/ 代码预览

💻 代码预览 · 番茄钟与习惯打卡器H5移动端功能演示

mw_tool · 上传者 驰旭教育
← 返回详情
r93/calendar.html · 约 2654 字符
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">
17  <div class="row" style="margin-bottom:10px"><div class="sec-title" style="margin:0"><span>📅</span> 2026 年 7 月</div><span class="tag">🔥 连续 9 天</span></div>
18  <div class="muted" style="margin-bottom:8px">一 二 三 四 五 六 日</div>
19  <div class="heat">
20    <i class=""></i><i class="l1"></i><i class="l2"></i><i class="l3"></i><i class="l4"></i><i class="l4"></i><i class="l2"></i><i class="l3"></i><i class="l4"></i><i class="l4"></i><i class="l1"></i><i class="l3"></i><i class="l4"></i><i class="l2"></i><i class="l4"></i><i class="l4"></i><i class="l3"></i><i class="l2"></i><i class="l4"></i><i class="l4"></i><i class="l1"></i><i class="l3"></i><i class="l4"></i><i class="l4"></i><i class=""></i><i class=""></i><i class=""></i><i class=""></i>
21  </div>
22  <div class="row" style="margin-top:10px"><span class="muted">浅→深:打卡强度</span><span class="badge b-ok">本月 21 天</span></div>
23</div>
24<div class="card">
25  <div class="sec-title"><span>✅</span> 今日打卡</div>
26  <div class="item"><div class="thumb">💧</div><div class="info"><div class="nm">喝水 8 杯</div></div><span class="badge b-ok">✓</span></div>
27  <div class="item"><div class="thumb">🧘</div><div class="info"><div class="nm">冥想 10 分</div></div><span class="badge b-ok">✓</span></div>
28  <div class="item"><div class="thumb">🏃</div><div class="info"><div class="nm">运动打卡</div></div><span class="badge b-pri">待打卡</span></div>
29</div>
30</main>
31  <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="" 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=" on" href="calendar.html"><span class="ic">📅</span>日历</a><a class="" href="settings.html"><span class="ic">⚙️</span>设置</a></nav>
32</div>
33<script></script>
34</body>
35</html>