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 自動化、房仲遠端助理
- 👤 作者:留白事務所