「石門國小 第103屆畢業典禮」是阿凱老師為桃園市龍潭區石門國民小學(鱻魚特色學園)打造的畢業典禮數位主場,把一場典禮需要的所有資訊與互動,收進一個漂亮、好用、全 RWD 的單頁網站。
🎓 典禮資訊一站到齊
- 倒數計時 + 典禮資訊卡:日期、時間、地點一眼掌握,倒數動畫帶氣氛
- YouTube 站內直播:無法到場的家長線上同步觀看,日期感知自動切換「即將開始/直播中」
- 互動校園巡禮:實景平面圖路線圖,帶家長認識校園
- 畢業歌〈風箏〉MV:嵌入畢業歌,典禮氛圍滿點
- 班導師專區:六班導師沙龍照與班級祝福
💛 最大亮點:即時祝福牆互動閉環
這是整個網站的靈魂——一條 掃碼 → 留言 → 審核 → 即時上牆 的完整互動流:
- 家長手機掃 QR Code 或點按鈕,開啟祝福表單
- 送出後寫進 Google Sheet,老師的 LINE 立刻收到卡片通知
- 老師在 LINE 一鍵審核通過,祝福同步公開
- 祝福立刻飛上現場大螢幕的星空投影(最新優先),家長剛寫完抬頭就看到自己
祝福牆有三種版本:主頁分頁牆、放大沉浸牆(含六班導師合影背景)、現場星空投影版(流星動畫 + 〈風箏〉BGM + 班級篩選 + 掃碼留祝福)。未成年學生姓名自動去識別化保護隱私,師長與校友完整顯示。
🧰 技術棧
純靜態 HTML/CSS/JS + GitHub Pages、Google Apps Script + Google Sheet 當免費後端、LINE Messaging API 卡片審核、PWA Service Worker、schema.org Event 結構化資料、社群分享 OG 圖。零成本、零維運、全裝置 RWD。桃園市龍潭區石門國民小學 × 阿凱老師打造。 啟程・感恩・祝福,陪每個孩子勇敢啟程。