Stretchly 自定义休息界面：3 个 HTML 文件、4 个 CSS 文件改出你的提示屏

Stretchly 自定义休息界面3 个 HTML 文件、4 个 CSS 文件改出你的提示屏【免费下载链接】stretchlyThe break time reminder app项目地址: https://gitcode.com/gh_mirrors/st/stretchlyStretchly 是一个开源的休息提醒应用它把迷你休息和长休息界面做成普通的网页。本文带你找到源码中的 3 个 HTML 文件并修改休息提示文本、界面配色和进度条交互。找到休息界面的 HTML 文件Stretchly 每个界面都是独立的 HTML5 页面全部位于 app/ 目录下文件界面用途app/microbreak.html迷你休息约 20 秒的短暂休息显示一行提示语app/break.html长休息5 分钟休息标题与正文两段展示app/preferences.html设置页日程、主题、语言等配置项三个页面共用一组样式文件normalize.css 负责样式标准化color-scheme.css 定义深浅色变量commons.css 是通用样式各页面再引入自己的主样式break.css 或 preferences.css。修改休息提示文本的位置在 break.html 里标题和正文是两个空 divdiv classbreak-idea dirauto/div div classbreak-text dirauto/divmicrobreak.html 更简单只有一个 .microbreak-idea。这些 div 的内容不是写死的break-renderer.js 在运行时读取当前想法列表经 sanitizeIdea 处理后注入。想改默认提示语修改 app/utils/defaultBreakIdeas.js 中的数组每项形如 data: [标题, 正文]临时改动可以直接在设置页编辑不用碰代码。另外页面上的静态文案按钮文字、窗口标题通过 />修改休息界面主题与配色休息界面主题切换的逻辑全部在 app/css/color-scheme.css 中。文件按 media (prefers-color-scheme: light/dark) 分成两块每块定义一组 CSS 变量:root { --main-color: rgba(255,255,255,0.85); --main-bg-color: #2D2D2D; }布局、按钮、进度条都引用这些变量改一个变量就影响全局。想换背景色可以直接改 --main-bg-color也可以用设置页的主色设置——main.js 会在运行时读取该颜色并应用到 body 背景。app/css/break.css 负责休息界面的布局、进度条和提示气泡样式改进度条粗细、按钮位置就动这个文件。理解进度条与按钮的 JS 逻辑交互逻辑在 app/break-renderer.js 里。启动时先通过 window.breaks.sendBreakData() 拿到休息开始时间和总时长之后每 100 毫秒一个 setInterval更新 #progress 的值和 #progress-time 的剩余时间文本按延后与跳过规则决定是否显示 postpone / skip 按钮所有按钮点击都包一层 runOnce保证每个按钮只响应一次如果想把进度条换成自定义元素改 HTML 里的元素和 break-renderer.js 中按 id 查询 #progress 的更新逻辑即可按钮反馈与翻译逻辑互不影响。收尾Stretchly 的三个界面就是普通网页会写网页就能改提示语、换主题、调交互。想深入可以阅读 app/main.js 的主进程调度逻辑或 test/ 目录下各模块的单元测试。【免费下载链接】stretchlyThe break time reminder app项目地址: https://gitcode.com/gh_mirrors/st/stretchly创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考