时间感知应用

这是一个基于HTML/CSS/JavaScript的时间管理工具，它可以帮助你可视化一天中的时间分配，并记录各种活动的持续时间。

主要功能

1. 24小时进度条可视化：实时展示今天已经过去的时间和剩余时间。
2. 活动追踪：开始一项活动后，进度条会用相应颜色标记这段时间。
3. 时间段编辑：可以手动设置特定时间段为某种活动（适用于忘记开始/停止记录的情况）。
4. 预设活动管理：可以添加、编辑和删除预设活动，每种活动可以设置不同的颜色。
5. 数据持久化：所有活动和记录会保存在浏览器的本地存储中。
6. 活动统计：实时统计每种活动累计花费的时间。

使用方法

1. 直接打开 index.html 文件即可使用。
2. 界面上方的进度条显示今天24小时的时间分配情况。
3. 要开始记录一项活动，点击对应的活动按钮。
4. 要停止当前活动，再次点击同一个活动按钮。
5. 要切换到另一个活动，直接点击新的活动按钮。
6. 要添加新的活动类型，在"预设活动"区域输入活动名称和选择颜色，然后点击"添加预设"。
7. 要编辑某个时间段，在"编辑时间段"区域设置开始时间、结束时间和活动类型，然后点击"应用修改"。
8. 如果要将某个时间段恢复为默认状态（即没有活动），选择"-- 恢复默认 --"选项。

特性说明

• 不同颜色的进度条片段代表不同类型的活动。
• 默认灰色显示的是未记录任何活动的时间。
• 浅灰色表示今天剩余的时间，深灰色表示已经过去的时间（未记录活动）。
• 活动按钮上的编辑图标(✏️)可以修改活动的名称和颜色。
• 活动按钮上的删除图标(❌)可以删除该预设活动。
• 修改活动的颜色会同时更新所有使用该活动记录的时间段颜色。
• 活动统计区域显示每种活动今天累计花费的时间。

技术实现

• 纯前端实现，无需服务器支持。
• 使用HTML/CSS/JavaScript技术栈。
• 使用localStorage实现数据持久化。
• 进度条由1440个小片段组成，对应一天中的每一分钟。