🍅 番茄工作法计时器（Pomodoro Timer）

一个纯前端实现的番茄工作法计时器单页 Web 应用，使用原生 HTML、CSS、JavaScript 编写，无需任何构建工具或外部依赖，打开即用。

功能特性

• 番茄钟计时：默认 25 分钟工作 / 5 分钟短休息 / 15 分钟长休息，倒计时以 MM:SS 大号数字显示
• 控制按钮：开始 / 暂停 / 重置
• 模式切换：工作、短休息、长休息三种模式，不同模式使用不同主色区分（工作为番茄红，休息为青绿）
• 主题切换：顶部下拉框保留「番茄钟」并新增「橙子钟」，切换时同步更新标题、图标和配色，选择会自动保存在浏览器本地
• 长休息自动触发：每完成 4 个番茄自动进入长休息，圆点 + 文字展示本轮进度
• 今日统计：自动统计当日完成的番茄数量，跨天自动清零
• 任务清单：可添加、标记完成、删除任务，数据通过 localStorage 持久化
• 提示音：计时结束播放由 Web Audio API 实时生成的提示音，无需外部音频文件
• 桌面通知（可选）：计时结束时可弹出浏览器桌面通知（需授权）
• 键盘快捷键：按空格键即可开始 / 暂停

主题说明

本版本保留经典「番茄钟」，并提供独立的「橙子钟」选项。选择橙子钟后，页面标题、统计图标和工作模式配色会切换为橙子风格；任务清单与今日统计数据保持不变。

文件结构

pomodoro-timer/
├── index.html    # 页面结构（语义化 HTML）
├── style.css     # 样式（现代卡片式、响应式布局）
├── script.js     # 交互逻辑（计时、任务、存储、音频）
└── README.md     # 项目说明

使用方法

1. 打开页面后默认进入「工作」模式，点击 开始 开始倒计时。
2. 计时期间可 暂停 或 重置。
3. 顶部标签可手动切换 工作 / 短休息 / 长休息 模式。
4. 每完成一个番茄自动进入休息；每完成 4 个番茄自动进入 15 分钟长休息。
5. 在「任务清单」输入框输入任务后回车或点击 添加，即可管理任务。
6. 所有数据（任务、今日统计）自动保存在浏览器本地，刷新或关闭页面后不丢失。

本地运行

由于是纯静态页面，无需任何服务器或安装依赖，任选其一即可：

• 方式一：直接双击打开 index.html。

• 方式二（推荐，避免某些浏览器对 localStorage / 音频的限制）：在项目目录下启动一个静态服务器：

  # Python 3
  python -m http.server 8000
  
  # Node.js（若已安装 npx）
  npx serve .
  

  然后在浏览器访问 http://localhost:8000。

技术说明

• 计时：setInterval 每秒递减，模式切换时重设剩余秒数。
• 持久化：localStorage 保存任务列表与今日统计（含日期，跨天自动重置）。
• 提示音：Web Audio API 动态生成三音符提示音，无需外部音频资源。
• 主题：通过 CSS 变量 --accent / --accent-soft 切换工作 / 休息配色；主题偏好保存在 localStorage。

自定义

可在 script.js 顶部 MODES 常量中修改各模式的时长（分钟），或调整 POMODOROS_PER_CYCLE 修改进入长休息的番茄数量。