🗺️ #74 1150328 親職日場地配置互動網：戶外籃球場 + 教室活動區 + 攤位展區 + 4 tab 切換的 SPA 場地圖
#74 真實標題「1150328 親職日場地配置互動網」（115/03/28 親職日專用）。Tailwind + Lucide 純前端 SPA，4 個 tab 切換（戶外班級區 / 1-3 年級教室區 / 攤位展區 / 其他區域），含戶外籃球場配置（4-6 年級與專區）+ 教室活動區（1-3 年級英語闖關）+ 攤位活動展區（石門國中升學輔導 / 性平教育展 / 家庭教育有獎徵答 / 星空計畫作品展示）。
親職日場地配置 — 紙本印一張 vs 互動式 SPA
傳統親職日場地配置：
- 印 A3 大張平面圖貼公佈欄
- 家長一進校門看一下就走
- 「今天我女兒攤位在哪」要找半天
阿凱的 #74「1150328 親職日場地配置互動網」 反向：手機掃 QR → 4 個 tab 即時切換 → 找攤位 / 找區域 / 找活動 = 10 秒到位。
#74 真實技術細節（curl Google Sites data-code 反推）
真實標題：「1150328 親職日場地配置互動網」（115/03/28 = 民國 115 年 3 月 28 日親職日）
4 個 tab 分區切換（從按鈕抽出）：
- 🏀 戶外班級區
- 🚪 1-3 年級教室區
- 🎪 攤位展區
- 📍 其他區域
完整場地章節（從 H 標籤抽出）：
戶外籃球場配置（4-6 年級與專區）
- 4 年級與幼兒園區域
- 5、6 年級區域
- 「4-2 / 4-3 / 4-4」班級對應按鈕
教室活動區（1-3 年級 & 英語闖關）
- 英語闖關活動 ⭐
- 1-3 年級教室分區
攤位與活動展區
- 石門國中升學輔導 🎓（給六年級家長看的銜接資訊）
- 性平教育展 🌈（重要課綱主題）
- 家庭教育有獎徵答 🎁（互動式有獎活動）
- 星空計畫作品展示 ✨（學生作品集中展示）
真實技術棧
- Tailwind CSS
- Lucide Icons
- 34,595 字元單檔 HTML
- 嵌進
sites.google.com/mail2.smes.tyc.edu.tw/academic/2026親職日場地配置 - 純前端，無 LLM
為什麼這值得部落格寫？
| 傳統紙本場地圖 | #74 互動式 SPA |
|---|---|
| 印 A3 貼公佈欄 | 掃 QR 手機看 |
| 全班標一張紙 | 4 個 tab 分區呈現 |
| 找攤位要看半天 | 10 秒到位 |
| 改動要重印 | 改一行程式碼即更新 |
| 家長看完丟掉 | 永久公開連結 |
親職日活動類型很完整
從場地配置看出阿凱 / 學校的親職日設計：
- 🎓 升學銜接（國中輔導）
- 🌈 議題教育（性平）
- 🎁 家庭教育（有獎徵答）
- ✨ 學生展能（星空計畫）
- 🇬🇧 英語闖關（雙語推動）
- 🏀 班級表演（戶外籃球場分區）
這是「現代化親職日 = 全方位家校共學」的真實案例。
配對工具推薦
- #62 親職教育日網站 — 親職日網站總入口
- #49 教務處寶藏庫 — academic 子站總目錄
- #46 場地預約系統 — 平日場地調度
適用對象
- 國中小教導處 / 學務處（親職日承辦）
- 各班導師（親職日場地預告）
- 想做數位化校園活動的學校
- 看「Google Sites + Tailwind = 5 分鐘做出活動專屬網」案例的老師
想試試？
下次你校親職日 — 用 Gemini 寫好 SPA + 貼 Google Sites Embedded HTML 一條龍，5 分鐘搞定。