ching
5177028bae
- 核心功能：一键记录 din 时刻 - 统计面板：日/周/月/总计 + 同比 - 成就系统：24个成就，支持配置文件扩展 - PWA 支持：离线可用，可安装到主屏幕 - 东八区时区支持 - SQLite 数据存储
97 lines
3.5 KiB
HTML
97 lines
3.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
<meta name="theme-color" content="#1a1a2e">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
|
<meta name="apple-mobile-web-app-title" content="din">
|
|
<title>din - Do It Now</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
<link rel="manifest" href="manifest.json">
|
|
<link rel="apple-touch-icon" href="icon-192.png">
|
|
<script>
|
|
// 注册 Service Worker
|
|
if ('serviceWorker' in navigator) {
|
|
navigator.serviceWorker.register('/sw.js')
|
|
.then(reg => console.log('SW registered'))
|
|
.catch(err => console.log('SW error:', err));
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<!-- 头部 -->
|
|
<header>
|
|
<h1>🦐 din</h1>
|
|
<p class="subtitle">Do It Now - 想到就做</p>
|
|
</header>
|
|
|
|
<!-- 统计面板 -->
|
|
<section class="stats">
|
|
<div class="stat-card">
|
|
<div class="stat-value" id="stat-today">0</div>
|
|
<div class="stat-label">今日</div>
|
|
<div class="stat-growth" id="growth-today">-</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-value" id="stat-week">0</div>
|
|
<div class="stat-label">本周</div>
|
|
<div class="stat-growth" id="growth-week">-</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-value" id="stat-month">0</div>
|
|
<div class="stat-label">本月</div>
|
|
<div class="stat-growth" id="growth-month">-</div>
|
|
</div>
|
|
<div class="stat-card total">
|
|
<div class="stat-value" id="stat-total">0</div>
|
|
<div class="stat-label">总计</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 大按钮 -->
|
|
<section class="main-action">
|
|
<button id="din-btn" class="din-button">
|
|
<span class="btn-text">🔴</span>
|
|
<span class="btn-label">Do It Now</span>
|
|
</button>
|
|
</section>
|
|
|
|
<!-- 快速输入（点击后显示） -->
|
|
<section id="input-section" class="input-section hidden">
|
|
<input type="text" id="din-content" placeholder="做了什么？（可选，直接回车跳过）" maxlength="100">
|
|
<div class="input-actions">
|
|
<button id="save-btn" class="btn-primary">保存</button>
|
|
<button id="skip-btn" class="btn-secondary">跳过</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 最近记录 -->
|
|
<section class="recent">
|
|
<h2>📝 最近记录</h2>
|
|
<div id="recent-list" class="recent-list">
|
|
<div class="empty">还没有记录，点击上方按钮开始！</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 成就 -->
|
|
<section class="achievements">
|
|
<h2>🏆 成就 <span id="achievement-progress">(0/8)</span></h2>
|
|
<div id="achievement-list" class="achievement-list">
|
|
<!-- 动态生成 -->
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<!-- 成功提示 -->
|
|
<div id="toast" class="toast hidden">
|
|
<span class="toast-icon">✓</span>
|
|
<span class="toast-text">记录成功！</span>
|
|
</div>
|
|
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|