自治小市長-即時計票監票系統

「自治小市長 - 即時計票監票系統」（🗳️ 石門國小自治市市長選舉計票系統）是阿凱老師為 石門國小自治市市長選舉打造的 5 畫面雙端架構即時計票系統，把傳統黑板畫正字 + 五年級老師唱票 + 六年級小朋友算半天的混亂全收掉。

🎯 核心特色

• 📐 5 個畫面（同一套資料 6 個視覺呈現 = 完整選舉生態系）：
  • viewer.html 公開監票（全班觀看、即時同步、當選公告動畫）
  • admin.html 後台唱票（候選人設定 / 列印報告 / 時間軸，需教師登入）
  • report.html A4 直式開票結果報告（可列印 / 存 PDF）
  • overlay.html OBS 直播浮層（透明背景給直播主用）
  • poster.html 1080×1920 當選海報（社群分享用）
• ⚡ Firebase Realtime Database 即時同步 — 後台輸入 0.5 秒內反映到全校監票畫面
• 🔒 嚴格權限分流 — viewer 即使被學生拿到也只能看，admin 必須教師 email/密碼登入才能改票數，Realtime DB rules 端把關
• 🪟 可嵌入學校官網（5 分鐘上線） — 提供完整 iframe 嵌入程式碼，校網管理員不需會程式

💡 設計理念

前端：純 HTML / CSS / JavaScript（推測無框架）；後端：Firebase Realtime Database + Firebase Auth（教師 email/密碼登入）；部署 cagoooo.github.io/Little-Mayer/。阿凱「為不同角色設計專屬畫面」哲學：教師主任（計票員）用 admin、全班學生（觀察者）用 viewer、校長 / 督學（報告對象）用 report、學校 IG / FB 小編（公關）用 poster、學校直播主（媒體）用 overlay、學校官網訪客（家長）用 iframe — 6 種使用情境一次滿足，不需要切多套系統。

🎒 適合情境

自治市市長選舉日半天活動：早上候選人政見發表 → 中午全校投票 → 下午開票（主任 admin 唱票 + 全班大螢幕 viewer 即時看 + 直播社團 overlay IG 直播 + 結果出爐 poster 分享社群 + report 列印給校長）。公民教育單元「民主選舉」用 #93 跑模擬選舉，學生體驗候選人 / 計票員 / 選民三種角色。跨校合作：#96 龍潭 DFC 投票 README 明確標示「模式參考自 cagoooo/Little-Mayer」是 #93 的延伸版。可搭配 #3 即時投票（課堂版）、#11 剛好學課堂互動（9 大模式版）。