番茄时钟
提示词:
创建一个视觉精美的番茄工作法计时器网页,具有以下特点:
1. 核心功能:
- 页面中间显示带藤蔓和叶子细节的番茄形状倒计时器,以番茄红为主色调,包含光泽和纹理效果
- 默认工作时间25分钟,休息时间5分钟,可通过加减按钮自定义(工作时间1-60分钟,休息时间1-30分钟)
- 具备开始/暂停按钮(点击开始后变为暂停状态,再次点击暂停)
- 计时结束时有多重提醒:播放提示音、番茄图标震动、顶部弹出通知框显示阶段结束信息
- 可重置计时器,恢复当前模式初始时间
- 注意工作时间结束后自动切换到休息倒计时继续计时,休息结束自动切换回工作倒计时继续计时,交替进行
2. 附加功能:
- 包含统计功能,显示今日已完成番茄数,数据本地保存(刷新不丢失)且每天自动重置
- 完成一个工作时段生成一个小番茄奖励,显示在"今日收获"区域,并有浮动进入动画
- 页面顶部显示当前日期(格式为"YYYY年MM月DD日 星期X")
3. 界面设计:
- 布局采用番茄计时器上方显示,下方设置"今日收获"小番茄奖励区、统计卡片(显示已完成番茄数)和时间设置区域
- 工作模式(番茄红)和休息模式(绿色)有明显视觉区分(颜色渐变、阴影变化、背景图案切换)
- 计时器有进度环显示剩余时间比例,计时过程中番茄有脉动膨胀效果(时间越少脉动越强),最后5分钟效果增强
- 整体为响应式布局,适配不同设备
- 按钮有悬停和点击反馈动画
- 背景采用渐变色搭配微妙点阵图案(工作模式为灰白渐变+番茄红点阵,休息模式为淡绿渐变+绿色点阵)