ching
3eaecd18da
- 全屏点击即可记录，响应更快 - 长按直接进入输入模式 - 快速标签：工作/学习/运动/休息/创意/其他 - 底部常驻统计，无需切换页面 - 右侧面板显示最近记录 - 成就解锁动画提示 - 优化移动端触摸体验
97 lines
3.7 KiB
HTML
97 lines
3.7 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, viewport-fit=cover">
|
|
<meta name="theme-color" content="#0d0d0f">
|
|
<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>
|
|
if ('serviceWorker' in navigator) {
|
|
navigator.serviceWorker.register('/sw.js');
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<!-- 主触发区 - 全屏点击即可记录 -->
|
|
<div class="din-trigger" id="trigger-area">
|
|
<button class="big-btn" id="din-btn" aria-label="记录 din">
|
|
<span class="btn-icon">⚡</span>
|
|
<span class="btn-text">din</span>
|
|
</button>
|
|
<p class="hint">点击任意处记录 · 长按快捷输入</p>
|
|
</div>
|
|
|
|
<!-- 底部统计 -->
|
|
<div class="stats-bar">
|
|
<div class="stat-item">
|
|
<div class="stat-num" id="stat-today">0</div>
|
|
<div class="stat-label">今日</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-num" id="stat-week">0</div>
|
|
<div class="stat-label">本周</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-num total" id="stat-total">0</div>
|
|
<div class="stat-label">总计</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 成就按钮 -->
|
|
<button class="achievements-btn" id="achievements-btn" title="成就">🏆</button>
|
|
|
|
<!-- 最近记录面板 -->
|
|
<div class="recent-panel" id="recent-panel">
|
|
<div class="recent-title">
|
|
<span>最近记录</span>
|
|
<span class="recent-count" id="recent-count">0</span>
|
|
</div>
|
|
<div class="recent-list" id="recent-list">
|
|
<div class="recent-item">
|
|
<span class="recent-content empty">点击大按钮开始记录</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 快速输入面板 -->
|
|
<div class="input-overlay" id="input-overlay">
|
|
<div class="input-panel">
|
|
<div class="input-header">
|
|
<span class="input-title">添加备注</span>
|
|
<span class="timestamp" id="input-timestamp">--:--</span>
|
|
</div>
|
|
<input type="text" class="quick-input" id="quick-input" placeholder="做了什么？（可选）" autocomplete="off">
|
|
<div class="quick-tags" id="quick-tags">
|
|
<span class="tag" data-text="工作">💼 工作</span>
|
|
<span class="tag" data-text="学习">📚 学习</span>
|
|
<span class="tag" data-text="运动">💪 运动</span>
|
|
<span class="tag" data-text="休息">😴 休息</span>
|
|
<span class="tag" data-text="创意">💡 创意</span>
|
|
<span class="tag" data-text="其他">📝 其他</span>
|
|
</div>
|
|
<div class="input-actions">
|
|
<button class="btn btn-skip" id="btn-skip">跳过</button>
|
|
<button class="btn btn-save" id="btn-save">保存</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Toast -->
|
|
<div class="toast" id="toast">已记录！</div>
|
|
|
|
<!-- 成就解锁提示 -->
|
|
<div class="achievement-toast" id="achievement-toast">
|
|
<span class="achievement-icon">🏆</span>
|
|
<span id="achievement-text">解锁成就</span>
|
|
</div>
|
|
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|