全港最完整的免費開源實時城市數據儀表板
A comprehensive, real-time open-source city dashboard for Hong Kong using 100% government open data APIs
🌐 Live Demo · 📱 Install as App · 🐛 Report Bug · 💡 Request Feature
| 總覽 Overview | 天氣 Weather | 巴士 Bus ETA |
|---|---|---|
| 地圖 Map | 潮汐 Tides | 假期 Holidays |
|---|---|---|
- 實時天氣 — 氣溫、濕度、紫外線、海水溫度（香港天文台 HKO）
- 九天預報 — 圖示、最高/最低溫、降雨概率
- 本地天氣預報全文 — 天氣概況、預測、展望
- 天氣警告系統 — 颱風（T1–T10）、暴雨（黃/紅/黑）、寒冷、酷熱警告，全幅顏色橫幅提示
- 各區氣溫分佈 — 全港 27 個氣象站即時溫度
- 各區降雨量 — 過去一小時降雨數據
- 港鐵班次 — 所有路線實時班次，10秒刷新
- 輕鐵班次 — 各站各月台分組顯示
- MTR 服務狀況 — 8條主要路線是否正常，故障即時提示
- 路線搜尋 — 輸入路線號，自動列出所有站點，點擊即顯示到站時間
- KMB 九巴 — 全港 1600+ 路線，實時 ETA
- CTB 城巴 — 實時到站時間
- GMB 專線小巴 — 新界/九龍/港島所有路線
- 常用站點 — 預設屯門/兆康/龍門居等新界常用路線
- 逐時潮汐圖 — SVG 折線圖顯示今日 24 小時潮汐高度
- 7個測潮站 — 屯門（TMW）、鰂魚涌、赤鱲角、昂船洲、馬灣、大埔滘、塔門
- 地震資訊 — 最近地震強度、地區、深度
- 34 個法定泳灘 — 環保署水質等級（良好/尚可/欠佳）
- 按地區篩選 — 西貢、南區、大嶼山、九龍、離島等
- 停車場空位 — 全港 562 個停車場實時空位，顏色標示（綠/藍/黃/紅）
- AQHI 監測站 — 15 個空氣質素監測站
- 泳灘水質圖層 — 泳灘分佈及水質
- AED 心臟除顫器 — 25 個主要 AED 位置（醫院、MTR、商場）
- 562 個停車場 — 私家車、電單車、輕型貨車空位
- 地區篩選 — 按 18 區過濾
- 名稱搜尋 — 即時搜尋停車場名稱
- 急症室等候時間 — 全港所有公立醫院，每小時更新
- AQHI 空氣質素健康指數 — 一般及路邊監測站預報
- 健康建議 — 各等級對應健康指引
- 公眾假期 — 2024-2026 全部法定假期，倒計時下一個假期
- 24 節氣 — 當前節氣及下一個節氣倒計時
- 年份切換 — 2024/2025/2026 完整假期列表
- 每日平均氣溫 — HKO 實時數據，SVG 折線圖
- 過去 12 個月 — 月均溫趨勢棒型圖
- 1991-2020 氣候標準值 — 各月份歷史平均對照
- 恒生指數 — 即時 HSI 指數，升跌幅（Yahoo Finance）
- 港元匯率 — 兌美元、人民幣、英鎊、日元、歐元
- 64 條 NLB 路線 — 大嶼山、東涌、深圳灣口岸、迪士尼
- 路線搜尋 — 按名稱/路線號過濾
- 垃圾收集日 — 按星期顯示是否收集日
- 三色回收箱 — 各類回收指引
- 大型家電回收 — 預約電話及流程
- 廚餘機 — 位置及使用說明
- 24 個確認可用攝影機 — 青葵公路、城門隧道、大老山、觀塘繞道、元朗公路
- 一鍵全部載入 — 同時查看所有攝影機
- 每分鐘自動更新
這個儀表板支援 PWA（Progressive Web App），可以像原生 App 一樣安裝到手機主屏幕：
iOS (iPhone/iPad):
- 用 Safari 打開網站
- 點擊底部分享按鈕
⬆ - 選「加入主畫面」
Android:
- 用 Chrome 打開網站
- 點擊「安裝」提示橫幅，或選單 → 「安裝應用程式」
功能：
- ✅ 離線緩存 — 無網絡時顯示上次數據
- ✅ 全屏顯示 — 無瀏覽器欄
- ✅ 主屏幕圖示
| 數據 | 來源 | API |
|---|---|---|
| 天氣、潮汐、地震 | 香港天文台 HKO | data.weather.gov.hk |
| 空氣質素 AQHI | 香港環保署 EPD | datagovhk.blob.core.windows.net |
| 急症室等候時間 | 醫院管理局 HA | ha.org.hk |
| MTR / 輕鐵班次 | 香港鐵路 MTR | rt.data.gov.hk |
| KMB 九巴 ETA | 九龍巴士 | data.etabus.gov.hk |
| CTB 城巴 ETA | 城巴 | rt.data.gov.hk |
| GMB 專線小巴 | 運輸署 | data.etagmb.gov.hk |
| NLB 嶼巴路線 | 新大嶼山巴士 | rt.data.gov.hk |
| 停車場空位 | data.gov.hk | api.data.gov.hk |
| 泳灘水質 | 環保署 EPD | 靜態數據（季度更新） |
| 公眾假期 | 1823 | 1823.gov.hk |
| 恒生指數 | Yahoo Finance | query1.finance.yahoo.com |
| 匯率 | Frankfurter | api.frankfurter.app |
| 道路快拍 CCTV | 運輸署 | tdcctv.data.one.gov.hk |
所有數據來自香港政府官方開放數據平台 data.gov.hk，完全免費使用。
打開 Live Demo 即可，無需安裝。
# Clone the repo
git clone https://github.com/badboyhong/hk-dashboard.git
cd hk-dashboard
# Serve locally (Python)
python3 -m http.server 8080
# Or with Node.js
npx serve .打開 http://localhost:8080
- 打開 replit.com
- 點「+ Create Repl」→「Import from GitHub」
- 輸入
https://github.com/badboyhong/hk-dashboard - 點「Run ▶」
hk-dashboard/
├── index.html # 主頁面（15個分頁）
├── manifest.json # PWA 設定
├── sw.js # Service Worker（離線緩存）
├── css/
│ ├── tokens.css # CSS 設計 tokens（顏色/字體/間距）
│ └── base.css # 基礎樣式 + 響應式
└── js/
├── core.js # 主題切換、時鐘、農曆、導航
├── weather.js # 天氣模組（HKO）
├── transport.js # 交通模組（MTR/LRT）
├── bus.js # 巴士 ETA（KMB/CTB/GMB）
├── tides.js # 潮汐 + 地震 + 天氣展望
├── health.js # 急症室等候時間
├── environment.js # AQHI 空氣質素
├── parking.js # 停車場空位
├── cctv.js # 道路快拍
├── ferry.js # NLB 嶼巴路線
├── holidays.js # 公眾假期 + 節氣
├── climate.js # 氣候數據
├── beach.js # 泳灘水質
├── map.js # 互動地圖（Leaflet.js）
├── finance.js # 恒指 + 匯率
├── waste.js # 回收資訊
└── app.js # 主入口（初始化 + 自動刷新）
| 技術 | 用途 |
|---|---|
| Pure HTML/CSS/JS | 零依賴，無需構建工具 |
| Leaflet.js | 互動地圖（CDN） |
| CartoDB Tiles | 深色/淺色地圖底圖 |
| Service Worker | PWA 離線支援 |
| CSS Custom Properties | 深色/淺色主題切換 |
| Google Fonts | Noto Sans TC + Inter + JetBrains Mono |
無需任何後端、無需資料庫、無需 API key。
完全靜態，可部署到任何靜態主機（GitHub Pages、Replit、Vercel、Netlify 等）。
- 主色
#60a5fa（深色）/#0070c0（淺色） - 背景 深海軍藍
#0d1b2e（深色）/ 白#ffffff（淺色） - 字體 Noto Sans TC（中文）、Inter（英文）、JetBrains Mono（數字）
- 圓角 一致的 border-radius tokens
- 動畫 骨架屏載入、脈衝徽章、平滑過渡
歡迎任何形式的貢獻！
# Fork 這個 repo
# 建立你的 feature branch
git checkout -b feature/amazing-feature
# Commit 你的改動
git commit -m 'Add some amazing feature'
# Push 到 branch
git push origin feature/amazing-feature
# 開一個 Pull Request- 🔍 找到更多可用的 CCTV 攝影機代碼
- 🌊 整合更多 data.gov.hk 開放 API
- 🐛 修復 bug
- 🌐 英文翻譯改善
- 📱 手機版體驗優化
- 🗺 地圖新增更多圖層
- 用戶自定義常用路線收藏
- GPS 定位顯示附近停車場/泳灘
- 颱風路徑實時追蹤圖
- 水塘存量（待環保署開放 API）
- 交通速度圖（待運輸署開放 API）
- 更多語言支援（普通話）
- Apple Watch 小工具
MIT License — 免費使用、修改、分發。
詳見 LICENSE 文件。
- 香港天文台 Hong Kong Observatory — 天氣、潮汐、地震數據
- data.gov.hk — 香港政府開放數據平台
- 香港環保署 EPD — 空氣質素、泳灘水質
- 醫院管理局 HA — 急症室數據
- 香港鐵路 MTR — 班次數據
- Leaflet.js — 開源地圖庫
- Frankfurter — 免費匯率 API
如果這個項目對你有幫助，請給一個 ⭐ Star！
Made with ❤️ for Hong Kong · 為香港而做