一个计时器，你一动鼠标，它就重置

我最近开发了一个叫 haveabreak 的网页小工具，用来强迫自己在工作过程中短暂休息一段时间。它本质是一个定时器，启动后，鼠标一动、或者键盘一动，它就重来。

界面用了拟物的设计，软乎乎的，像个安静的邀请。

打开它，选好休息的时长，它就会接管你的屏幕，开始一场安静的倒计时。

对我们这些总在电脑前久坐的人来说，这是个有点“不讲道理”的伙伴。它用一种近乎固执的温柔，把你从屏幕前拽出来。

在那几分钟里，你不能动鼠标，不能碰键盘，连屏幕也别想再看一眼。只要你一忍不住，它就会轻声提醒你：糟糕，你移动了。休息失败，得从头再来。

只有老老实实等到时间结束，它才会为你鸣响庆祝的礼炮，宣告你终于完成了这次短暂的逃离。

为什么要做这样一个工具呢？well-being 这件事，有时候需要一点外部的环境来帮忙营造。而它，就是这样一个小小的、却又无比坚定的角落。

视线从紧盯着的屏幕光亮里移开，才能看见杯子里的水凉了，听见窗外的风穿过树叶的声音，或者，什么都不做，只是呼吸。haveabreak 用一个全屏的定时器，帮你强制按下暂停键。它会轻声告诉你，休息，本身就是一种享受。

至于怎么退出？很简单，关掉全屏，再关掉网页就好。就像结束一场短暂的散步，轻轻推开门，回到房间里来。

最后，其实这个功能并非我原创，其灵感来自 reboot.netlify.app，但我给它添了更多细节：自定义的提示语，会悄悄告诉你“去倒杯水吧”；可以调整的提示语切换时长，像呼吸一样，有自己的节奏。

愿大家都能好好休息，拥有一个健康的头脑。

开发了一个强迫你休息的网页小工具 [haveabreak](http://break.white-noise.online/)。
打开后选择休息时长，会进入全屏倒计时。期间，一旦移动鼠标、按下键盘或者触摸屏幕，会导致休息失败，重新开始倒计时。
坚持到设定时长结束后，即可完成休息任务，触发礼炮庆祝效果。
特别适合容易在电脑前久坐不动的知识工作者。
ps. 怎么退出：因为是在浏览器里的 web app，退出全屏后关闭网页就可以了。

为什么要写这个APP

视线从紧盯着的屏幕中转移开，停下来，才能留意到还有很多事情值得做。haveabreak 这样一个 web app ，就能通过开启一个全屏显示定时器的方式，来强制自己短暂离开电脑、手机屏幕。并通过提示语给出一些关于 well-being 的启示，例如，给自己倒杯水喝...

well-being ，需要环境的营造。

总之，这是一个关于 well-being 的 app，开发这个 app，是为了提醒自己，休息，就是一种享受。

界面使用拟物风设计...

这个并不是我的原始主义，灵感来自于 https://reboot.netlify.app/ ，这个应用提供了最基本的功能，而我开发的 haveabreak 增加了更丰富的功能。包括自定义提示语，及提示语的切换时常等。

提示词：

1. 一个休息app，名称就叫 haveabreak 吧，是一个 pwa，是一个为自己充电的 app

2. 功能上，本质是一个定时器，启动后，鼠标一动、或者键盘一动，它就重来（不是回到开始页，而是计时器回到最初），短暂提示你去休息，不要移动，

3. 计时器要有一个环形的进度条。

4. 除了预置的时间长度，还要运行用户自定义时间长度。

5. 细节方面要有好的用户体验，例如开始计时器后就全屏，并且应用本身要始终 viewport-fit cover

6. 直至你休息到足够长的时间，会有庆祝效果

7. 界面上要有能提高 SEO 表现的文案等

8. 要国际化，支持至少 10 种主流语言。

9. 要设计好 favicon: 根据本项目的建设内容和 ui 风格，基于 next/og 的 ImageResponse API，设计 icon。并创建 next.js api route ，要支持动态尺寸参数。项目中所有需要图标的位置（包括元标签、导航栏Logo、PWA应用图标、社交分享图片等）统一替换为使用动态生成的API图标 /api/icon，根据不同用途设置合适的尺寸参数。

10. 移动端计时器太宽了，看不到阴影。

页面还缺点紫色的背景装饰。

要预置很多提醒的文案，在计时器计时的过程中变换着的提示。也要在主页支持配置，允许用户添加和删除文案，这些信息最终存到本地。因为主页开始计时，之前用户自定义输入时长，我觉得逻辑是这样的，不需要一个设置按钮了。时长如果有输入的话，上面那些按钮就不要聚焦，然后聚焦到这个输入框。最终取聚焦了的值就行了

现在定时器卡片的宽度会随着时钟的数字变化

可以可以，人要学会保护自己的小心脏，编程为了生活，而不是生活为了编程