ching
c9ab4da3b5
- 按钮改用 SVG 图标，更现代简洁 - 移除按钮文字，纯图标设计 - 添加自定义确认弹窗，替换浏览器默认弹窗 - 删除功能添加确认对话框 - 优化按钮动画和光晕效果
155 lines
6.2 KiB
HTML
155 lines
6.2 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="#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>
|
|
if ('serviceWorker' in navigator) {
|
|
navigator.serviceWorker.register('/sw.js');
|
|
}
|
|
</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" aria-label="记录">
|
|
<svg class="btn-icon" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
|
|
<defs>
|
|
<linearGradient id="btnGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#ff6b6b;stop-opacity:1" />
|
|
<stop offset="100%" style="stop-color:#ee5a5a;stop-opacity:1" />
|
|
</linearGradient>
|
|
</defs>
|
|
<!-- 外发光圆环 -->
|
|
<circle cx="60" cy="60" r="56" fill="none" stroke="rgba(255,107,107,0.3)" stroke-width="1"/>
|
|
<!-- 主圆形背景 -->
|
|
<circle cx="60" cy="60" r="50" fill="url(#btnGrad)"/>
|
|
|
|
<!-- 闪电图标 -->
|
|
<path d="M68 30 L52 54 L62 54 L54 78 L72 50 L60 50 Z"
|
|
fill="white"
|
|
opacity="0.95"
|
|
filter="drop-shadow(0 2px 4px rgba(0,0,0,0.2))"/>
|
|
</svg>
|
|
</button>
|
|
<p class="hint">点击记录 · 长按添加备注</p>
|
|
</section>
|
|
|
|
<!-- 最近记录条 -->
|
|
<section class="recent-strip">
|
|
<div class="recent-header">
|
|
<span class="recent-title">最近记录</span>
|
|
<span class="view-all" id="btn-view-all">查看全部 →</span>
|
|
</div>
|
|
<div class="recent-chips" id="recent-chips">
|
|
<div class="recent-chip empty">点击上方按钮开始</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 成就展示 -->
|
|
<section class="achievements">
|
|
<div class="achievements-header">
|
|
<span class="achievements-title">成就</span>
|
|
<span class="achievements-progress" id="ach-progress">0/24</span>
|
|
</div>
|
|
<div class="achievements-scroll" id="achievements-list">
|
|
<!-- 动态生成 -->
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<!-- 遮罩 -->
|
|
<div class="overlay" id="overlay"></div>
|
|
|
|
<!-- 快速输入浮层 -->
|
|
<div class="float-input" id="float-input">
|
|
<div class="float-header">
|
|
<span class="float-title">添加备注</span>
|
|
<span class="float-time" id="float-time">--:--</span>
|
|
</div>
|
|
<input type="text" class="float-field" id="float-field" placeholder="做了什么？（可选）" autocomplete="off">
|
|
|
|
<div class="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>
|
|
</div>
|
|
|
|
<div class="float-actions">
|
|
<button class="btn btn-danger" id="btn-delete">🗑️ 删除</button>
|
|
<button class="btn btn-secondary" id="btn-skip">跳过</button>
|
|
<button class="btn btn-primary" id="btn-save">保存</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 历史记录面板（侧滑） -->
|
|
<div class="history-panel" id="history-panel">
|
|
<div class="history-header">
|
|
<span class="history-title">历史记录</span>
|
|
<button class="history-close" id="history-close">✕</button>
|
|
</div>
|
|
<div class="history-list" id="history-list">
|
|
<!-- 动态生成 -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Toast -->
|
|
<div class="toast" id="toast">已记录！</div>
|
|
|
|
<!-- 自定义确认弹窗 -->
|
|
<div class="confirm-overlay" id="confirm-overlay">
|
|
<div class="confirm-box">
|
|
<div class="confirm-icon">🗑️</div>
|
|
<div class="confirm-title">确认删除</div>
|
|
<div class="confirm-message">确定要删除这条记录吗？</div>
|
|
<div class="confirm-actions">
|
|
<button class="confirm-btn cancel" id="confirm-cancel">取消</button>
|
|
<button class="confirm-btn delete" id="confirm-ok">删除</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|