prayer168 / science-portal
science-portal
互動式數位教材中心建置技能。當使用者想要建立一個收錄多個互動教材連結的網站， 並具備分類管理、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
{
"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 架構
skill.md