tw-focus-clock｜時。刻 專注時鐘

一個網頁，三種用法：

• 時鐘：輕觸螢幕進入全螢幕，純黑背景、大字、螢幕不休眠，舊手機或平板直接變桌上時鐘
• 專注：番茄鐘倒數（預設專注 25 分、休息 5 分，每 4 段長休息 15 分），可暫停、繼續，重新整理也不會亂掉
• 今日三件事：每天只排 3 件最重要的事，分類、編輯、完成；前幾天沒做完的，隔天會溫柔問你要不要加入今天——「不要緊，你正在前進。」

再加上簡單的回顧：今天完成幾件、專注幾分鐘、連續幾天有在前進。

免安裝、免帳號、免伺服器：雙擊 index.html 就能用，沒有網路也能用。資料只存在你這台裝置的瀏覽器。

線上試用：https://larryveryhandsome.github.io/tw-focus-clock/

---

這是什麼

把同一位作者的兩個小作品合成一個、重新整理過的版本：

• 「時。刻」專注 App：今日聚焦三件事、分類、專注計時、暖心提醒
• 「時。刻」沉浸時鐘：全螢幕、防休眠、OLED 純黑、防烙印微位移

這一版拿掉了所有外部載入（不用 CDN、不用 Google 字型、不用圖示庫），整個網頁就是幾個小檔案，打開不會連到任何外部網站。

---

適合誰

• 讀書、寫報告、準備考試：一次專心 25 分鐘，休息 5 分鐘
• 上班專注：早上排好今天最重要的 3 件事，按 ▶ 開始計時，專注時間自動記在那件事上
• 店裡櫃檯當大時鐘：舊平板放櫃檯，全螢幕大字時鐘，螢幕不會自己暗掉
• 平板展示、會議室、教室：一眼看得到時間和倒數

---

5 分鐘開始

電腦

1. 下載這個專案（綠色 Code 按鈕 → Download ZIP），解壓縮。
2. 雙擊 index.html，用 Chrome、Edge、Safari、Firefox 開都可以。
3. 下方選單切到「今日」，輸入今天最重要的一件事，選分類，按 ＋。
4. 按任務旁邊的 ▶，就會切到「專注」開始倒數。
5. 想當桌上時鐘：切到「時鐘」，輕觸畫面（或按 F）進入全螢幕；按 Esc 或點「離開」回來。

手機、平板（加到主畫面，像 App 一樣用）

1. 用手機打開線上版：https://larryveryhandsome.github.io/tw-focus-clock/
2. iPhone / iPad（Safari）：點下方「分享」按鈕 → 加入主畫面。
3. Android（Chrome）：點右上角「⋮」→ 加到主畫面（或「安裝應用程式」）。
4. 之後從主畫面圖示打開，就是全螢幕的 App；開過一次後，沒網路也能用。

想用自己的網址：把這個專案 Fork 到你的 GitHub，在 Settings → Pages 選 main 分支、根目錄，就會有 https://你的帳號.github.io/tw-focus-clock/。

---

功能

時鐘

• 指針＋數字，或「只顯示大數字」（設定裡切換，遠遠也看得清楚）
• 輕觸畫面進入全螢幕、純黑背景、隱藏游標
• 防休眠：支援的瀏覽器（Chrome、Edge、Android、較新的 Safari）會讓螢幕保持開啟；不支援時畫面會告訴你，請改到系統設定把「自動鎖定／螢幕逾時」調長
• 每分鐘微微移動位置，降低 OLED 螢幕烙印
• 專注計時中，時鐘畫面也看得到剩幾分鐘

專注（番茄鐘）

• 專注／短休息／長休息，長度都可以改
• 暫停、繼續、重設、跳到下一段
• 重新整理、關掉分頁再打開都接得上：記的是「幾點幾分結束」，不是一秒一秒數，手機鎖屏、分頁被暫停也算得準
• 時間到嗶三聲（瀏覽器合成音，不用下載音檔，可在設定關掉）；支援的手機會震動
• 可以指定「這段專注在」哪一件任務，時間會累積到那件事上
• 中途停止的話，滿 1 分鐘的部分也會記錄
• 計時中盡量讓螢幕不休眠（可在設定關掉）

今日三件事

• 每天最多 3 件（config.js 可改），新增、編輯、完成、刪除
• 四個分類：工作、生活、學習、健康（名稱和顏色可改）
• 跨日延續：前幾天沒完成的事，隔天打開會跳出「暖心提醒」，勾選要加入今天的；今天放不下的會留在原本的日期
• 從舊版「時。刻」網頁（同一個瀏覽器）用過的人，第一次打開會自動帶入舊任務

回顧

• 今日完成數、今日專注分鐘、連續天數（當天完成 1 件或專注滿 1 分鐘就算；今天還沒開始不算斷）
• 近 7 天專注長條圖、本月各分類時間、未完成的承諾

其他

• 深色／淺色／跟隨系統（右上角圓形按鈕切換）
• 手機 375px 寬也不會左右滑動；大字、高對比，鍵盤也能操作
• 匯出／匯入備份（JSON 檔）：換手機、清瀏覽器前先匯出；匯入時會先檢查檔案，有問題整份不匯入
• 瀏覽器不給存資料（例如某些無痕模式）也能用，只是關掉後不會保留，畫面會提醒你

---

設定（config.js）

用記事本打開 config.js，改完存檔、重新整理網頁：

設定	說明
focusMinutes	專注幾分鐘（預設 25）
shortBreakMinutes / longBreakMinutes	短休息、長休息幾分鐘（預設 5、15）
longBreakEvery	每專注幾段換一次長休息（預設 4）
maxTasksPerDay	一天最多幾件事（預設 3）
sound	時間到要不要嗶聲
keepAwake	專注計時中讓螢幕保持開啟
autoStartNext	一段結束自動開始下一段
theme	system 跟隨系統、light 淺色、dark 深色
clockStyle	both 指針＋數字、digital 只顯示大數字
hour12	true 顯示「下午 1:05」
categories	任務分類的名稱和顏色（id 不要改）
quotes	完成專注時隨機出現的一句話

這些是預設值。使用者在網頁右上角「設定」改過的，會存在自己的瀏覽器並優先使用。

---

給開發者

index.html            畫面（圖示是內嵌 SVG，不載入任何外部資源）
css/style.css         樣式（手寫 CSS，含深色模式、沉浸模式）
config.js             預設設定
js/core.js            核心（純函式）：zh-TW 時間格式、計時器狀態機、任務、跨日延續、統計與連續天數、備份驗證
js/app.js             畫面邏輯：儲存、全螢幕、Wake Lock、WebAudio、匯入匯出
sw.js                 離線快取（只在 http/https 註冊，file:// 不會載入）
manifest.webmanifest  加到主畫面用（同上，只在 http/https 載入）
tests/                單元測試（node:test，不用裝任何套件）

npm test

測試涵蓋：暫停／繼續／重新整理後的計時、跨日與延續、跨月跨年的連續天數、備份檔驗證（拒絕壞檔）、時間格式，以及「網頁檔案裡沒有任何外部網址」。

資料存在 localStorage 的 tw-focus-clock:v1；所有讀寫都包在 try/catch 裡，存不了也不會壞掉。

🔑 需要金鑰嗎？

不需要任何金鑰、帳號或付費服務。 這個網頁不呼叫任何 API、不連任何外部網站，時間用你裝置的時鐘，資料存在你的瀏覽器。說明見 docs/金鑰申請.md。

注意事項

• 時間以你裝置的時鐘為準。
• 防休眠、全螢幕、震動是否有效，原則上依瀏覽器與系統支援而定；省電模式可能會讓防休眠失效。
• 資料只在這台裝置的瀏覽器裡；清除瀏覽資料會一起刪掉，重要的話請定期匯出備份。

授權

Apache License 2.0

---

🛠️ 需要客製化？

這個工具是開源的，可以免費使用。如果你想要：

• 改成符合你們公司的流程、欄位或品牌
• 串接你現在在用的系統（LINE、Google 表單、POS、會計軟體……）
• 幫你安裝、架站、教學，或長期維護

歡迎加 LINE 跟我們聊。我們會依需求的範圍與複雜度報價，原則上以實際報價單為準。

• 💬 LINE：林其衞（請註明「專注時鐘 客製化」）
• 🏢 留白事務所：網頁設計、AI 自動化、房仲遠端助理
• 👤 作者：留白事務所