171 lines
5.6 KiB
Markdown
171 lines
5.6 KiB
Markdown
# 水晶熱舞社頁面改版對話紀錄
|
||
|
||
> 來源：`yellow-note/crystal-dance-survey.html` 改版討論
|
||
> 日期：2026-07-09
|
||
> 用途：可貼上 Notion 的整理稿
|
||
|
||
---
|
||
|
||
## 一、任務目標
|
||
|
||
把 **水晶熱舞社** 頁（`yellow-note/crystal-dance-survey.html`）從「自創黃框、多層卡片、閱讀擁擠」改成：
|
||
|
||
1. **對齊首頁／全站簡約風格**（黑底 + 白卡片 + 品牌黃）
|
||
2. **多套用全站 CSS**（`style.css` 的 `section`、`.section-title`、`.card` 語彙）
|
||
3. **熱舞社相關內容不刪**（可改外觀與排版）
|
||
4. **Bootstrap class 必須保留**（作業要求）
|
||
5. **表單區參考「見面會應援調查表」的 summer-form 邊框排版**，顏色仍用全站黃色 token
|
||
|
||
---
|
||
|
||
## 二、核心原則（這次定下來的）
|
||
|
||
| 原則 | 說明 |
|
||
|------|------|
|
||
| 內容優先 | 跟熱舞社相關的資訊不要刪；外觀排版可以改 |
|
||
| 只改被點名的頁 | 主要動 `crystal-dance-survey.html` |
|
||
| Bootstrap 保留 | `row` / `col` / `form-control` / `form-select` / `btn-check` / `ratio` 等 class 留下 |
|
||
| 顏色不動 | 用全站 `--color-brand` 系列，不改成參考圖的藍 |
|
||
| 美感對齊 | 參考 index 簡約乾淨 + 參考圖的留白與分階段框線 |
|
||
|
||
---
|
||
|
||
## 三、舊版問題診斷
|
||
|
||
### 為什麼「怎麼看都不順眼」
|
||
|
||
1. **雙重／三重卡片**
|
||
全站 `section` 本身已是圓角白卡片，頁內又加 `video-card`、`song-card`、`form-panel` → 盒子套盒子。
|
||
|
||
2. **約 400 行 inline CSS 重做設計系統**
|
||
全站已有 `.card`、`.section-title`，卻自創多套黃框樣式。
|
||
|
||
3. **`info-card` 深色漸層突兀**
|
||
跟全站暖白、輕盈感相反。
|
||
|
||
4. **導覽太吵**
|
||
五顆黃色 pill 按鈕搶眼；首頁錨點是低調文字列。
|
||
|
||
5. **UX 問題（後續回饋）**
|
||
- 表單左右分欄難讀
|
||
- 標題跟內容距離太近
|
||
- 主影片寬度沒跟下方三支影片左右對齊
|
||
- 文字擠在一起、閱讀節奏差
|
||
|
||
---
|
||
|
||
## 四、結構重組（6 區 → 3 區）
|
||
|
||
### 備份
|
||
|
||
```
|
||
yellow-note/crystal-dance-survey.backup-2026-07-09.html
|
||
```
|
||
|
||
（本地備份；改動前版本）
|
||
|
||
### 新架構
|
||
|
||
| 新區塊 | ID | 合併來源 | 合併理由 |
|
||
|--------|-----|----------|----------|
|
||
| ① 認識水晶熱舞社 | `#about` | Hero + 熱舞社介紹 | 都在回答「這是什麼」 |
|
||
| ② 從 20TH 到 30TH | `#from-20th-to-30th` | 20TH 影片回顧 + 30TH 應援募集敘事 | 同一條時間軸：過去記憶 → 未來募集 |
|
||
| ③ 30TH 應援募集表單 | `#form-30th` | 表單區獨立 | Bootstrap 表單作業清楚；敘事講完才行動 |
|
||
|
||
### 移除
|
||
|
||
- 整個 **經典舞曲區**（`#song-archive` 四張 song-card）
|
||
- 歌曲資訊不丟：表單「想練的歌曲」`<select>` 仍保留 Couple / Com' Back / Road Fighter / Pom Saeng Pom Sa / 其他
|
||
|
||
---
|
||
|
||
## 五、視覺與版型決策
|
||
|
||
### 對齊全站
|
||
|
||
- 骨架：`inner-page-header` → `portal-nav` → `particles` → `container` → `section`
|
||
- 大區塊靠全站 `section` 白卡片浮在星空底上
|
||
- 避免 section 內再套一層 `.card`（影片／表單尤甚）
|
||
|
||
### 影片區
|
||
|
||
- 主影片與下方三支延伸影片包在同一 `video-grid`
|
||
- **主影片寬度與下方三欄左右切齊**（拿掉主影片單獨 `max-width: 720px` 置中）
|
||
|
||
### 間距與閱讀
|
||
|
||
- `.section-title` 與內文拉開（約 `2rem`）
|
||
- 段落行高約 `1.9`、段間距加大
|
||
- 子標題（延伸閱讀、30TH）上方留白加大，避免貼住上一段
|
||
|
||
---
|
||
|
||
## 六、表單：summer-form 風格
|
||
|
||
參考「見面會應援調查表」的**排版結構**，**顏色維持全站黃**：
|
||
|
||
### 結構
|
||
|
||
1. **填寫須知**（淡黃底邊框盒）
|
||
2. **第一階段｜參與者基本資料**（暱稱、Email、練舞年數、可參與日期）
|
||
3. **第二階段｜30TH 參與意向**（20TH 經驗、參與內容複選）
|
||
4. **第三階段｜應援內容與祝福**（歌曲、上傳、留言）
|
||
5. **底部按鈕**（重新填寫 / 送出並排）
|
||
|
||
### 排版特徵
|
||
|
||
- 階段標題在邊框盒**上方**、左對齊
|
||
- 每階段獨立 `summer-form__stage-body`（圓角細邊框）
|
||
- label 在上、輸入在下（單欄垂直流）
|
||
- 不用表單左右分欄
|
||
- Bootstrap class 全保留
|
||
|
||
### Class 命名（頁面專用）
|
||
|
||
- `.summer-form`
|
||
- `.summer-form__stage`
|
||
- `.summer-form__stage-title`
|
||
- `.summer-form__stage-body`
|
||
- `.summer-form__stage-body--notice`
|
||
- `.summer-form__option-row`
|
||
- `.summer-form__actions`
|
||
|
||
---
|
||
|
||
## 七、必須保留的 Bootstrap class（作業）
|
||
|
||
```html
|
||
row / col-* / g-*
|
||
form-label / form-control / form-select / form-text
|
||
btn-check / btn
|
||
ratio / ratio-16x9
|
||
d-flex / flex-wrap / gap-* / mt-*
|
||
```
|
||
|
||
---
|
||
|
||
## 八、Git 狀態（對話當時）
|
||
|
||
- Commit：`a977e78`
|
||
`refactor: 水晶熱舞社頁面重組為三區並對齊全站簡約風格`
|
||
- 已 push 至 `origin/main`（後續還有本地再改：間距、影片對齊、summer-form）
|
||
- 後續的 summer-form／間距微調若尚未再 commit，需另開 commit
|
||
|
||
---
|
||
|
||
## 九、給下次改這頁的檢查清單
|
||
|
||
- [ ] 熱舞社敘事、20TH 影片、30TH 募集說明、表單欄位是否都在
|
||
- [ ] 是否又出現「section 外套 + 內層黃框」雙重卡片
|
||
- [ ] 主影片是否與下方三支左右對齊
|
||
- [ ] 表單是否單欄分階段（summer-form），沒有左右表單／須知分欄
|
||
- [ ] 標題與內文、區塊與區塊是否有足夠留白
|
||
- [ ] Bootstrap 必要 class 是否還在
|
||
- [ ] 顏色是否仍用 `--color-brand` 系列（沒偷換成藍色）
|
||
|
||
---
|
||
|
||
## 十、一句話總結
|
||
|
||
> **讓 Bootstrap 負責格線與表單元件，讓 `style.css` 負責全站美感；頁面專用 CSS 只補缺口。內容依敘事合三區，表單用 summer-form 分階段邊框，顏色不動。**
|