💻 代码预览 · 小草待办清单

1<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><title>番茄专注 · 小草待办清单</title><link rel="stylesheet" href="style.css"></head><body>
2<div class="header"><span class="back" onclick="history.back()">‹</span><h1>番茄专注</h1><span class="right">🍅</span></div>
3<div class="focus-hero">
4  <div class="fh-timer" id="fh-timer">25:00</div>
5  <div class="fh-state" id="fh-state">准备专注 · 25分钟一轮</div>
6  <div class="fh-round" id="fh-round">今日第 2 个番茄 · 已完成 2/8</div>
7  <div class="focus-controls">
8    <span class="fc-btn" onclick="T.sec=25*60;toast('已重置为25分钟')">↺</span>
9    <span class="fc-btn stop" onclick="toggleFocus()">⏸</span>
10    <span class="fc-btn" onclick="T.sec=5*60;toast('已切到休息5分钟')">☕</span>
11  </div>
12</div>
13<div class="section-title">今日专注统计</div>
14<div class="stat-grid">
15  <div class="sg-item"><b>2</b><span>完成番茄</span></div>
16  <div class="sg-item"><b>50′</b><span>专注时长</span></div>
17  <div class="sg-item"><b>92%</b><span>专注效率</span></div>
18</div>
19<div class="section-title">本周专注</div>
20<div class="card">
21  <div style="display:flex;gap:6px;align-items:flex-end;height:90px;padding:0 4px">
22    ${[3,5,2,6,4,7,2].map((v,i)=>'<div style="flex:1;text-align:center"><div style="height:'+v*11+'px;background:linear-gradient(180deg,#4f46e5,#818cf8);border-radius:6px 6px 0 0"></div><small style="font-size:9px;color:#8b94ad">'+['一','二','三','四','五','六','日'][i]+'</small></div>').join('')}
23  </div>
24</div>
25<div class="card" style="font-size:12px;color:#8b94ad;line-height:2">
26  🍅 番茄工作法：25分钟专注 + 5分钟休息<br>⚙️ 时长可自定义（背单词40分钟 / 写论文50分钟）
27</div>
28<div style="height:80px"></div>
29<div class="tabbar">
30  <a href="index.html"><span class="icon">🏠</span>今日</a>
31  <a href="tasks.html"><span class="icon">📝</span>清单</a>
32  <a href="calendar.html"><span class="icon">📅</span>日历</a>
33  <a class="active" href="focus.html"><span class="icon">🍅</span>专注</a>
34  <a href="mine.html"><span class="icon">👤</span>我的</a>
35</div>
36<script src="data.js"></script><script src="app.js"></script>
37<script>renderFocus();</script>
38</body></html>