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 分鐘開始
電腦
- 下載這個專案（綠色 Code 按鈕 → Download ZIP），解壓縮。
- 雙擊
index.html，用 Chrome、Edge、Safari、Firefox 開都可以。
- 下方選單切到「今日」，輸入今天最重要的一件事，選分類，按 ＋。
- 按任務旁邊的 ▶，就會切到「專注」開始倒數。
- 想當桌上時鐘：切到「時鐘」，輕觸畫面（或按
F）進入全螢幕；按 Esc 或點「離開」回來。
手機、平板（加到主畫面，像 App 一樣用）
- 用手機打開線上版：https://larryveryhandsome.github.io/tw-focus-clock/
- iPhone / iPad（Safari）：點下方「分享」按鈕 → 加入主畫面。
- Android（Chrome）：點右上角「⋮」→ 加到主畫面（或「安裝應用程式」）。
- 之後從主畫面圖示打開，就是全螢幕的 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 自動化、房仲遠端助理
- 👤 作者：留白事務所
