一個功能豐富的網頁倒計時器，支援快捷鍵操作、背景音樂、多主題切換，並提供 PWA 功能可安裝使用。
- 靈活時間設定: 支援分鐘和秒數的獨立調整
- 實時編輯: 點擊時間數字直接編輯，支援 +/- 按鈕和鍵盤方向鍵
- 進度顯示: 可視化進度條和剩餘時間顯示
- 快速設定: 提供 1分、3分、5分、10分、15分、30分 快速設定按鈕
- ← →: 按調整單位減少/增加時間
- Shift + ← →: 切換時間調整單位（1秒、5秒、15秒、30秒、1分鐘、5分鐘、10分鐘、30分鐘）
- 空格鍵: 開始/暫停計時
- ESC: 重設計時器
- 任意鍵: 關閉鬧鐘提醒
- 自動播放: 計時開始時自動播放背景音樂
- 智能控制: 時間到達時自動暫停音樂播放鬧鐘
- 音樂控制: 支援播放/暫停、上一首/下一首、音量調整
- 懸浮面板: 滑鼠懸停展開完整音樂控制面板
- 預設主題: 藍紫色漸變（#667eea → #764ba2）
- 深色主題: 深灰色調（#2c3e50 → #34495e）
- 淺色主題: 藍色調（#74b9ff → #0984e3）
- 記憶功能: 自動記憶使用者選擇的主題
- 可安裝: 支援安裝到桌面或手機主畫面
- 離線使用: 完整的離線功能支援
- 應用程式快捷方式:
- 5分鐘計時快捷方式
- 10分鐘計時快捷方式
- 30分鐘計時快捷方式
- 自動更新: 新版本自動提示更新
-
設定時間:
- 點擊分鐘或秒數區域直接編輯
- 使用快速設定按鈕
- 使用快捷鍵調整時間
-
開始計時:
- 點擊「開始」按鈕
- 或按空格鍵
-
暫停/繼續:
- 點擊「暫停」按鈕
- 或再次按空格鍵
-
重設:
- 按 ESC 鍵重設計時器
- 時間調整單位: 使用 Shift + ← → 切換調整單位
- 背景音樂: 懸停右上角音樂按鈕展開控制面板
- 主題切換: 懸停右上角主題按鈕選擇喜愛的主題
- 幫助資訊: 點擊問號按鈕查看完整使用說明
- HTML5: 語義化標記，完整的 meta 標籤配置
- CSS3:
- Flexbox 和 Grid 布局
- CSS 變數和現代特性
- 響應式設計
- 動畫和過渡效果
- JavaScript ES6+:
- 類別導向設計
- 模組化架構
- 現代 API 使用
- Service Worker: 快取策略和離線功能
- Web App Manifest: 安裝和啟動配置
- 快取策略:
- 核心文件優先快取
- 音樂文件網路優先
- 智能快取更新機制
- CountdownTimer: 計時器主邏輯
- MusicPlayer: 背景音樂管理
- ThemeManager: 主題切換管理
- FloatingButtonsManager: 懸浮按鈕控制
- PWAManager: PWA 功能管理
tools-timer/
├── index.html # 主應用程式文件
├── manifest.json # PWA 清單文件
├── sw.js # Service Worker
├── browserconfig.xml # IE/Edge 瓷磚設定
├── icons/ # 應用程式圖標
│ ├── icon-16x16.svg
│ ├── icon-32x32.svg
│ ├── icon-72x72.svg
│ ├── icon-96x96.svg
│ ├── icon-128x128.svg
│ ├── icon-144x144.svg
│ ├── icon-152x152.svg
│ ├── icon-192x192.svg
│ ├── icon-384x384.svg
│ └── icon-512x512.svg
├── songs/ # 背景音樂文件
│ ├── 001.mp3
│ └── 002.mp3
├── PWA-README.md # PWA 功能說明
└── README.md # 本檔案
# 使用 Python 建立本地伺服器
python -m http.server 8000
# 或使用 Node.js
npx serve .
# 或使用 PHP
php -S localhost:8000- 在瀏覽器中開啟
http://localhost:8000 - 開啟開發者工具 (F12)
- 檢查 Application > Service Workers
- 使用 Lighthouse 測試 PWA 評分
- GitHub Pages: 推送到 GitHub 並啟用 Pages
- Netlify: 連接 GitHub 倉庫自動部署
- Vercel: 連接 GitHub 倉庫自動部署
- ✅ Chrome 67+
- ✅ Firefox 79+
- ✅ Safari 14.1+
- ✅ Edge 79+
⚠️ IE 不支援
- Chrome/Edge: 點擊網址列的安裝圖示
- Firefox: 選單 > 安裝應用程式
- Android: 瀏覽器會自動顯示安裝橫幅
- iOS Safari: 分享 > 加入到主畫面
- 直觀操作: 點擊即可編輯，視覺化進度顯示
- 無障礙設計: 完整的鍵盤導航支援
- 響應式設計: 適配各種螢幕尺寸
- 流暢動畫: 自然的過渡效果和視覺反饋
- 記憶設定: 自動記憶主題選擇
- 運行時調整: 計時器運行時仍可調整時間
- 智能音樂控制: 根據計時狀態自動控制音樂播放
- 視覺提示: 計時狀態的視覺化呈現
- 漸進式音調: 800Hz → 1000Hz → 1200Hz
- 重複播放: 每 2 秒循環播放
- 音量控制: 適中的音量設定（30%）
- 自動循環: 音樂文件自動循環播放
- 智能控制: 與計時器狀態同步
- 音量調整: 使用者可自由調整音量
- 毛玻璃效果: backdrop-filter 實現現代 UI
- 漸變背景: 多層次的色彩搭配
- 圓角設計: 柔和的視覺體驗
- 陰影效果: 立體的視覺層次
- 懸浮效果: 滑鼠懸停的即時反饋
- 按壓反饋: 點擊時的視覺確認
- 狀態指示: 清晰的狀態區分
- 動畫過渡: 流暢的狀態切換
目前版本：v0.3.0-beta
完整的版本記錄請查看 CHANGELOG.md 和 changelogs/ 資料夾。
本專案使用 GitHub Actions 實現自動化發佈：
- 開發 - 在
dev分支進行功能開發 - 準備發佈 - 創建對應版本的 changelog 文件
- 創建標籤 - 在 dev 分支創建
vX.X.X格式標籤 - 自動發佈 - GitHub Actions 自動合併到 main 並發佈 Release
- 自動部署 - 自動部署到 GitHub Pages
詳細發佈流程請參考 發佈指南。
UI/UX 改進與響應式設計優化 - 查看詳細記錄
- ✅ 全面響應式設計 (RWD) - 6個斷點完整支援
- ✅ 觸控設備優化與橫屏模式支援
- ✅ 無滾動條設計與跨瀏覽器兼容
- ✅ 音樂播放邏輯優化 - 鬧鐘後不自動恢復
- ✅ 版本信息顯示
- ✅ Mobile-first 設計架構
- ✅ 高解析度螢幕支援
自動化與版本管理改進 - 查看詳細記錄
- ✅ GitHub Actions 自動發佈系統
- ✅ 版本標籤觸發的自動化流程
- ✅ 自動合併到 main 分支和發佈 Release
- ✅ 自動部署到 GitHub Pages
- ✅ 分離式 Changelog 結構
- ✅ 完整的發佈指南文檔
初始版本 - 查看詳細記錄
- ✅ 基礎計時器功能
- ✅ 快捷鍵操作支援
- ✅ 分鐘/秒數實時編輯
- ✅ 快速時間設定按鈕
- ✅ 背景音樂播放系統
- ✅ 多主題切換功能
- ✅ PWA 功能支援
- ✅ 響應式設計
- ✅ 離線使用功能
歡迎提交 Issue 和 Pull Request 來改進這個專案！
- Fork 本專案
- 創建功能分支
- 提交變更
- 推送到分支
- 創建 Pull Request
本專案採用 MIT 授權條款，詳見 LICENSE 文件。
享受高效的時間管理！ ⏰✨