ADHD时间进度条

一个帮助ADHD患者更好地管理和可视化时间的Web应用。

项目结构

.
├── index.html    # 主页面结构
├── styles.css    # 样式表
├── script.js     # 交互逻辑
└── README.md     # 项目说明

功能特点

• 多种时间视图模式：
  • 月度进度
  • 周度进度
  • 25分钟倒计时
  • 年度进度
  • 日期显示
• 直观的网格和点阵可视化
• 进度条显示
• 响应式设计，支持移动设备

优化建议

性能优化

1. 使用Canvas/SVG替代DOM网格

   • 当前使用大量DOM元素来创建网格，可能影响性能
   • 建议使用Canvas或SVG来绘制网格，减少DOM节点数量
   • 可以实现更流畅的动画效果

2. CSS优化

   • 压缩CSS文件
   • 使用CSS变量统一管理主题色
   • 优化选择器性能

3. JavaScript优化

   • 使用requestAnimationFrame优化动画
   • 实现虚拟列表，优化大量网格项的渲染
   • 添加防抖/节流处理

功能增强

1. 本地存储

   • 使用localStorage保存用户设置和进度
   • 支持自定义倒计时时长

2. 通知功能

   • 添加倒计时结束提醒
   • 支持桌面通知

3. 主题定制

   • 支持明暗主题切换
   • 自定义主题色

4. 辅助功能

   • 添加键盘快捷键
   • 提供屏幕阅读器支持

浏览器兼容性

• 添加浏览器前缀
• 使用现代CSS特性时提供降级方案
• 测试主流浏览器（Chrome、Firefox、Safari、Edge）

使用方法

1. 克隆仓库
2. 在浏览器中打开index.html
3. 选择合适的时间视图模式
4. 开始专注时间管理

贡献

欢迎提交Issue和Pull Request来帮助改进项目。

许可证

MIT License