时间针脚 TimeStitch

"你用时间的针脚，缝了什么？"

一个轻量的时间管理工具，用色彩针脚编织你的每一天。

✨ 特色

🎨 直观的视觉呈现

四象限表盘：计划和实践各对应上午、下午两个时钟表盘
彩色时间段：用8种颜色区分不同类型的任务（专注、战斗、警惕、放松、创意、活力、温暖、快乐）
动态时间指针：当前时间的针脚在表盘上动态显示为黑色针孔
过去时间标记：已过去的时间自动披上灰色蒙层

📊 完整的时间管理

计划管理：添加计划时间段，选择任务类型和颜色，直观展示在计划表盘上
实践记录：在实践表盘中选择已有计划或添加计划外任务，记录真实执行情况
实时统计：自动汇总统计各类任务的计划时间、实践时间和完成率
数据导出：支持导出JSON格式数据，方便备份和分析

🪶 极致轻量

单文件应用：整个工具仅一个 HTML 文件，体积小于 50KB
零依赖部署：点击即用，无需安装任何环境或依赖

🔒 隐私至上

本地存储：所有数据存储在浏览器 localStorage 中，无云端上传
即删即忘：完全关闭浏览器软件即可清除所有数据
日抛理念：每天自动清空实践记录，专注当下，轻装前行

📸 预览

时间针脚使用四个表盘展示你的一天：使用示例

🚀 快速开始

在线使用（推荐）

无需下载，直接访问在线版本：

🌐 立即开始使用

访问地址：https://foroneice.github.io/TimeStitch/

本地使用

下载文件

git clone https://github.com/ForOneIce/TimeStitch.git
cd TimeStitch

打开使用
- 点击 index.html 文件
- 或右键选择用任意浏览器打开
- 或将文件拖入浏览器窗口
开始规划
- 在"计划时间"区域添加今日计划
- 在"实践时间"区域记录实际执行情况
- 查看"时间统计"了解完成情况

作为桌面壁纸使用

你可以将时间针脚作为动态桌面背景：

在独立浏览器窗口中打开
设置为全屏或置顶显示
像壁纸一样闲置，随时查看计划时间

📖 使用指南

说明：时间最小颗粒度暂时仅支持30分钟

添加计划时间

在"计划时间"面板中选择开始时间和结束时间
选择任务类型和颜色：
- 🔵 蓝色 - 专注：深度工作、学习等
- 🔴 红色 - 战斗：紧急任务、挑战性工作
- 🟡 黄色 - 警惕：需要特别注意的事项
- 🟢 绿色 - 放松：休息、冥想时间
- 🟣 紫色 - 创意：创作、头脑风暴
- 🟠 橙色 - 活力：运动、社交活动
- 🟤 米白色 - 温暖：家庭/宠物/朋友/自我关怀时间
- 🩷 粉红色 - 快乐：愉悦/游戏/娱乐
输入任务名称（最多10字）
点击"添加计划时间段"

记录实践时间

在"实践时间"面板中选择开始时间和结束时间
从下拉菜单选择对应的计划任务
如果是计划外活动，选择"计划外"选项
点击"记录实践时间段"

查看统计数据

在"时间统计"面板查看各类任务的完成情况
包括计划时间、实践时间和完成率
支持按颜色/任务类型分类统计

数据管理

清除实践数据：点击底部"清除实践数据，开启新一天"按钮
导出数据：点击"导出数据"按钮，下载 JSON 格式文件
自动清除：每天第一次打开时自动清除前一天的实践记录

🎯 使用场景

场景一：番茄工作法实践者

规划30分钟专注时段，用蓝色标记深度工作，绿色标记休息，轻松可视化工作节奏。

场景二：自由职业者

用不同颜色区分客户项目、个人项目、日常事务，清晰掌握时间分配。

场景三：学生党

规划学习、运动、娱乐时间，对比计划与实际执行，培养自律习惯。

场景四：生活记录者

不仅记录工作，也记录生活的色彩——运动、阅读、陪伴家人，每一刻都值得铭记。

💡 设计理念

"日抛"式时间管理

时间针脚推崇"日抛"生活理念：

☀️ 每一天都是崭新的开始
📝 每天的实践记录都是全新干净的画布
🚫 不被过往的遗憾拖累
🔮 不为明天的未知焦虑
🎯 只专注书写今日的篇章

视觉化时间

"冰冷的数字平淡无味，我将用色彩为您的生活增添趣味。"

时间针脚相信：

时间不应该只是数字，应该有颜色、有温度
每种活动都值得一个专属的颜色标签
一瞥之间，便能洞悉时间流向

本地至上

时间针脚坚持：

🔒 隐私数据不上云
🪶 不依赖任何外部服务
💻 完全离线可用
👁️ 代码完全透明可审查

🛠️ 技术特点

纯原生实现：HTML5 + CSS3 + Vanilla JavaScript
Canvas绘图：使用 Canvas API 绘制时钟表盘
本地存储：使用 localStorage API 持久化数据

📁 项目结构

TimeStitch/
├── index.html    # 主程序文件（包含HTML/CSS/JS）
└── README.md     # 项目说明文档

🔧 自定义

你可以轻松自定义时间针脚：

修改颜色方案：在代码中搜索 colors 对象，修改颜色值
调整时间间隔：修改时间选择器的生成逻辑（当前为30分钟间隔）
添加新任务类型：在 plan-color 的 <select> 中添加新选项

⚠️ 注意事项

数据存储

数据存储在浏览器的 localStorage 中
刷新页面不会删除数据
关闭浏览器窗口会清除数据（取决于浏览器设置）
清除浏览器缓存会删除数据
建议定期使用"导出数据"功能备份

浏览器兼容性

推荐使用现代浏览器（Chrome、Firefox、Safari、Edge）
需要支持 HTML5 Canvas 和 localStorage
IE浏览器可能存在兼容性问题

📄 开源协议

本项目采用 GPL-3.0 协议开源。

🙏 致谢

"希望这个小工具可以帮助你摆脱时间困境。"

时间是我们最宝贵的财富，但忙碌的日常让它如流沙般难以掌控。时间针脚希望能帮助你记录和整理这些琐碎的时间碎片，编织成五彩斑斓的人生画卷。

时间针脚 - 专注当下，用心生活

—— 您忠实的「时间管家」，静候您的差遣。

Name		Name	Last commit message	Last commit date
Latest commit History 3 Commits
README.md		README.md
index.html		index.html

ForOneIce/TimeStitch

Folders and files

Latest commit

History

Repository files navigation