--- name: science-portal description: > 互動式數位教材中心建置技能。當使用者想要建立一個收錄多個互動教材連結的網站，並具備分類管理、Firebase 雲端同步、Google 帳號後台登入等功能時，使用本技能。觸發條件：使用者提到「教材網站」、「教材中心」、「學科入口網站」、「Firebase 教材管理」、「互動教材清單」或要求建立帶有後台管理的靜態教學網站。 --- # 互動式數位教材中心建置技能 ## 目標產生一個**單一 HTML 檔案**的互動教材入口網站，具備： - 多類別分頁瀏覽（可自訂類別與顏色） - 卡片式教材清單，點擊直接開啟教材 - Firebase Google 帳號登入的後台管理介面 - Firestore 雲端同步（跨裝置資料一致） - 教材的新增、刪除、移動類別、重新命名 - 批次操作（勾選多筆刪除或移動） - 自訂類別（新增 / 刪除 / 重新命名） - 資料匯出（複製 JSON 備份） --- ## 技術架構 | 層次 | 技術 | |------|------| | 前端框架 | 純 HTML + CSS + Vanilla JS（無框架依賴） | | 字體 | Google Fonts：Nunito（英文標題）、Noto Sans TC（中文） | | 認證 | Firebase Authentication（Google Sign-In） | | 資料庫 | Firebase Firestore（`portal/v1` 單一文件存全部資料） | | 部署 | GitHub Pages（單一 `index.html`） | | 快取 | localStorage 作為離線 / 初次載入快取 | --- ## 資料模型 Firestore 文件路徑：`portal/v1` ```json { "materials": [ { "cat": "三年級", "name": "打雷示範動畫", "url": "https://...", "icon": "⚡" } ], "customCats": [ { "key": "自訂類別", "emoji": "🔭", "desc": "說明文字", "color": "#6c5ce7", "custom": true } ] } ``` 預設類別（鎖定，不可刪除）：三年級、四年級、五年級、六年級、教學應用、休閒（動動腦） --- ## Firestore 安全規則 ``` rules_version = '2'; service cloud.firestore { match /databases/{database}/documents { match /{document=**} { allow read: if true; allow write: if request.auth != null && request.auth.token.email == "管理員email@gmail.com"; } } } ``` --- ## HTML 架構 ``` CSS 變數（每個類別的主色、淺色、柔色）動態注入 CSS（injectCatStyles）登入彈窗（loginOverlay）

吉祥物 SVG + 標題 + 管理按鈕