🗳️ #93 石門國小自治市市長計票系統：5 畫面雙端架構（公開監票 / 後台唱票 / A4 報告 / OBS 直播 / 1080×1920 海報）
#93「🗳️ 石門國小自治市市長選舉計票系統」是阿凱寫的**即時計票 + 即時監票雙端系統**。**5 個畫面**：viewer 公開監票 / admin 教師後台唱票 / report A4 直式開票報告 / overlay OBS 直播浮層 / poster 1080×1920 當選海報。Firebase Realtime Database + Auth + GitHub Pages 部署。可嵌入學校官網 5 分鐘上線。
國小「自治市市長選舉」的真實規格
108 課綱推動「公民教育」 — 國小自治市市長選舉是經典實踐：
- 全校學生投票選出小市長
- 每位候選人有政見發表
- 開票要全班同步觀看（每班大螢幕）
- 教師後台唱票輸入
痛點：
- ❌ 紙本選票算半天
- ❌ 教室不知道現在票數
- ❌ 學生看不到「選舉的過程」
- ❌ 計票錯了無法重來
阿凱的 #93 自治市市長計票系統 反向：5 畫面雙端架構 + Firebase 即時 + 全校同步監票。
#93 真實怎麼做？
真實標題：「🗳️ 石門國小自治市市長選舉計票系統」
📐 5 個畫面（雙端架構）
| 頁面 | 用途 | 權限 |
|---|---|---|
index.html | 入口分流 | 公開 |
viewer.html | 公開監票（全班觀看、即時同步、含當選公告動畫） | 公開 |
admin.html | 後台唱票 / 候選人設定 / 列印報告 / 時間軸 | 教師帳號登入後可寫 |
report.html | A4 直式開票結果報告（可列印 / 存 PDF） | 公開 |
overlay.html | OBS 直播浮層（透明背景，給直播主用） | 公開 |
poster.html | 1080×1920 當選海報（社群分享用） | 公開 |
→ 同一套資料 6 個視覺呈現 = 完整選舉生態系。
🔒 安全原則
- viewer 連結：即使被學生拿到也只能看
- admin 連結：必須以管理員 email/密碼登入才能改票數
- Realtime DB rules 端把關
🪟 可嵌入學校官網
README 提供完整嵌入程式碼：
<!-- 監票即時票數（最常用）-->
<iframe src="https://cagoooo.github.io/Little-Mayer/viewer.html"></iframe>
5 分鐘上線 — 校網管理員不需要會程式。
真實技術棧
- 前端：純 HTML / CSS / JavaScript（推測無框架）
- 後端：Firebase Realtime Database（即時同步）
- 認證：Firebase Auth（教師 email/密碼登入）
- 部署：
cagoooo.github.io/Little-Mayer/
為什麼 5 個畫面是核心設計？
阿凱「為不同角色設計專屬畫面」哲學：
| 角色 | 用哪個畫面 | 為什麼 |
|---|---|---|
| 教師主任（計票員） | admin.html | 唱票輸入 + 控制節奏 |
| 全班學生（觀察者） | viewer.html | 即時看票數變化 |
| 校長 / 督學（報告對象） | report.html | A4 開票報告紙本 |
| 學校 IG / FB 小編（公關） | poster.html | 1080×1920 直接分享 |
| 學校直播主（媒體） | overlay.html | OBS 透明背景 |
| 學校官網訪客（家長） | iframe 嵌入 viewer | 官網直接看 |
6 種使用情境一次滿足 — 不需要切多套系統。
跟 #96 龍潭 DFC 投票的繼承關係
#96 DFC 投票 README 明確標示：「模式參考自 cagoooo/Little-Mayer」 = #93 的延伸版。
| # | 工具 | 學校 |
|---|---|---|
| #93 自治市市長計票（本篇） | 石門國小（阿凱主導） | |
| #96 龍潭 DFC 投票 | 龍潭國小（阿凱協助） |
跨校合作：阿凱的工具不只服務石門 — 龍潭也用了類似架構。
教學情境
自治市市長選舉日（半天活動）：
- 早上 → 候選人政見發表
- 中午 → 全校投票
- 下午開票：
- 教師主任在 admin.html 唱票
- 全班大螢幕掛 viewer.html → 即時看票數
- 直播社團用 overlay.html → IG 直播
- 結果出爐 → poster.html 分享社群 + report.html 列印給校長
公民教育單元「民主選舉」：
- 講「選舉怎麼運作」抽象
- 用 #93 跑模擬選舉
- 學生體驗候選人 / 計票員 / 選民三種角色
校務會議報告：
- 自治市選舉結果 → A4 report.html 列印給每位主任
- 永久存檔
校史紀錄：
- 每年自治市選舉用 poster.html 留下海報
- 累積學校民主教育歷史
配對工具推薦
- #96 龍潭 DFC 投票 — 繼承版本（跨校）
- #3 即時投票 — 課堂版投票
- #11 剛好學課堂互動 — 9 大模式版
適用對象
- 國中小自治市 / 班聯會選舉承辦
- 學務 / 訓育組
- 公民教育 / 社會老師（民主選舉單元）
- 校長 / 主任（看選舉視覺化呈現）
- 想做「校園民主數位化」的學校
- 想看「Firebase Realtime + 5 畫面架構」案例的開發者
想試試？
下次你校自治市選舉 — 5 個畫面服務 6 種角色 → 全校 + 家長 + 媒體一次到位。