# Prototypes — 四個視覺方向

四個可運行的單頁 HTML 原型，共用同一套內容與素材，用於內部評審與快速測試。

## 快速開始

直接打開 `prototypes/index.html`，或用本地伺服器：

```bash
cd /path/to/Website-FGT
python3 -m http.server 8000
# 瀏覽 http://localhost:8000/prototypes/
```

每個原型亦可單獨打開：

```
prototypes/01-ceremonial-editorial/index.html
prototypes/02-institutional-modern/index.html
prototypes/03-youth-formation/index.html
prototypes/04-cinematic-chronicle/index.html
```

> 原型透過 Google Fonts 載入字體。如網絡受限，會回退到系統字體（PingFang TC / Microsoft JhengHei / 宋體），版面仍可使用，但視覺效果會略有差異。

## 四個方向

| # | 名稱 | 關鍵詞 | 最適合 | 主要風險 |
|---|---|---|---|---|
| A | 旗幟之下（Ceremonial Editorial） | 莊嚴、榮譽、編輯感、對稱 | 首頁、About、成就 | 紅色面積大時易像政府宣傳頁 |
| B | 科大藍 · 紀律幾何（Institutional Modern） | 品牌合規、精確、現代、可擴展 | 全站結構、Training、Media | 情感張力較弱，易變成部門網站 |
| C | 青年儀仗（Youth in Formation） | 熱血、招募、運動隊、社交媒體 | `/join` 招募頁、IG campaign | 大面積紅黑會削弱莊嚴感 |
| D | 光影紀事（Cinematic Chronicle） | 電影感、沉浸、專題、年度回顧 | `/stories`、聯合升旗紀念頁 | 對比與無障礙風險、素材要求高 |

## 共同內容

所有原型使用同一套公開資料：

- 2025 年成立，首屆 24 名隊員。
- 2025-07-01 首度亮相：200+ 現場、30,000+ 直播。
- 2026-04-12 首次參賽：正步銀獎、齊步銅獎。
- 2026-05-31 至 06-04 訪京團：11 所院校、116 名代表。
- 2026-10-01 與駐港部隊聯合升旗：250+ 現場、10,000+ 直播。
- 聯絡：ssa@ust.hk；LG3005, Indoor Sports Complex（Lift 3 或 6）。

## 設計與技術說明

- **單頁式**：每個原型是一個完整的首頁，包含 hero、數字、使命、訓練／故事、成就、gallery、招募 CTA、footer。
- **響應式**：桌面、平板、手機三個斷點；手機版有 sticky CTA 或簡化導航。
- **無障礙**：語意化標籤、skip link、focus 狀態、`prefers-reduced-motion`、圖片 alt。
- **動效**：IntersectionObserver 淡入；可用 `?reveal=1` 強制顯示所有內容（方便截圖與列印）。
- **無外部 JS 依賴**：所有互動為原生 JavaScript。
- **圖片**：已壓縮為 WebP/JPEG 友好的尺寸；正式版應轉為 AVIF/WebP 並加 `srcset`。

## 素材與授權

原型使用的照片來自：

- HKUST DSTO Flag Guard Team 頁面
- HKUST News（2025-07-01 升旗典禮）
- HKUST DSTO「Congratulations to HKUST Flag Guard Team」（2026-04-12 比賽）
- 2026 招募海報

這些素材僅供**內部設計討論**。正式對外發佈前，必須：

1. 取得 DSTO／PAO 的品牌與圖片使用許可。
2. 取得攝影師、隊員及嘉賓的肖像使用同意。
3. 確認國旗、區旗、校旗圖像符合官方規範。
4. 將 Google Fonts 替換為本地字體或 HKUST 指定字體（Muli / Arial / Noto Sans TC）。
5. 移除所有 `#` 佔位連結，接上正式頁面與 Microsoft Forms。

## 已知限制

- 只有首頁，沒有完整的 About／Training／Team／Join 子頁。
- 招募表單、Instagram、YouTube 連結多為佔位；正式版需接入。
- 數字與日期以 2026-10-26 的公開資料為準；上線前需更新。
- 沒有 CMS；正式版建議用 Astro + Markdown／Decap CMS。
- 沒有做跨瀏覽器實機測試；建議在 Safari、Chrome、Edge、iOS、Android 上各測一次。

## 建議的評審問題

1. 哪一個方向最像「我們希望外界第一眼看到的護衛隊」？
2. 哪一個方向最適合招募？哪一個最適合媒體與官方？
3. 紅色應該佔多大比例？科大藍是否足夠？
4. 我們是否願意用襯線字（A/D）？還是必須維持 HKUST 的無襯線系統（B）？
5. 手機版第一屏是否能在 10 秒內回答「這是什麼、為什麼重要、下一步」？
6. 哪一個方向的內容維護成本最低？

## 下一步

1. 選出 1 個主方向 + 1 個招募方向。
2. 用 5–8 位學生與 DSTO 同事做快速測試（5 秒印象、偏好、理解度）。
3. 把選定方向擴展為 7 頁 MVP（Home / About / Training / Team / Achievements / Join / Media）。
4. 建立 design tokens 與 component library。
5. 接入 CMS、三語、表單、analytics。
6. 完成品牌、法律、無障礙與照片授權審查後上線。