diff --git a/CHANGESET-review.md b/CHANGESET-review.md new file mode 100644 index 0000000..82784f7 --- /dev/null +++ b/CHANGESET-review.md @@ -0,0 +1,136 @@ +# 變更檢查清單（工作區 vs `HEAD`） + +> **說明：** 此為對話當初「第一批」完整筆記存檔（五檔：`archive`／`index.css`／`index.html`／`style.css`／`portal-nav`）。**目前工作區是否仍為下列每一項，請以 `git diff` 與實際檔案為準**，本文不作為程式真值來源。 + +本文依 **`git diff`** 對照 **`HEAD`** 整理，方便逐項核對；不含未在本 diff 出現之檔案或臆測內容。 + +**涉及檔案（5）**：`archive.html`、`index.css`、`index.html`、`portal-nav.js`、`style.css` +**統計**：以 `git diff --stat` 為準（以下內容對應該批變更初版筆記）。 + +--- + +## 1. `archive.html` + +### 目的 + +- 年表區塊（「啟動新篇章」「輝煌全盛期」）每一資料列：**點列上非連結區域**時，於新分頁開對應 **Spotify 專輯**。 +- 列內既有 ``（本站 `lyrics.html`、`concert.html`、`classic.html`）維持原行為。 + +### 標記與無障礙 + +每一列 `` 增加： + +| 屬性 | 說明 | +|------|------| +| `class="archive-row-spotify"` | 供腳本與樣式選取 | +| `tabindex="0"` | 鍵盤可聚焦列 | +| `data-spotify-url="https://open.spotify.com/album/…"` | 要開啟的專輯網址 | +| `aria-label="…"` | 螢幕閱讀器簡述 | + +### Spotify 連結對照（請自行點連結確認標題是否仍正確） + +| 區塊 | 年份／列語意 | `data-spotify-url`（專輯頁） | +|------|----------------|------------------------------| +| 啟動新篇章 | 2016 數位單曲（THREE WORDS） | `https://open.spotify.com/album/1Dijv8G0wnCN8PzFZoC8bN` | +| 啟動新篇章 | 2017 ANOTHER LIGHT | `https://open.spotify.com/album/5f2LzIFxljQF4FH7w3rXcQ` | +| 啟動新篇章 | 2020 ALL FOR YOU | `https://open.spotify.com/album/7vqIRL00YfTtuO0sSAK3Uv` | +| 輝煌全盛期 | 1997 學園別曲（School Byeolgok） | `https://open.spotify.com/album/18P1aqSLQA9WdNljjEhv9q` | +| 輝煌全盛期 | 1998 Road Fighter | `https://open.spotify.com/album/08TW1bmGzSg172Db8C2Bde` | +| 輝煌全盛期 | 1999 Com' Back | `https://open.spotify.com/album/3XWtqLXDZycu7Q0BGofhiq` | + +### 內嵌腳本（`` 前，`portal-nav.js` 之後） + +- `querySelectorAll('tr.archive-row-spotify[data-spotify-url]')` 綁定： + - **click**：若 `e.target.closest('a')` 則不處理；否則 `window.open(url, '_blank', 'noopener,noreferrer')` + - **keydown**：僅 `Enter` / `空白鍵`；同樣避開錨點焦點；`preventDefault()` 後同上開新分頁 + +--- + +## 2. `index.css` + +### 新增選擇器（僅作用於 `.archive-discography` 內） + +| 規則 | 效果 | +|------|------| +| `tbody tr.archive-row-spotify` | `cursor: pointer` | +| `tbody tr.archive-row-spotify:hover td` | 淡黃底 `rgba(255, 204, 0, 0.06)` | +| `tbody tr.archive-row-spotify:focus-visible` | 黃色外框約 2px、`outline-offset: -2px` | + +--- + +## 3. `index.html` + +### 變更位置 + +- 時間軸／故事區：**「傳奇回歸：重逢的感動合體」**那一段（`data-era="2016"`）。 + +### 具體修改 + +1. `
` 追加 modifier：`story-node--ebook-ssg2`。 +2. 在該篇 `

…

` 之後新增： + - `` + - Font Awesome：`fa-solid fa-hand-pointer`（`aria-hidden="true"`） + - 文案：「點這裡翻開《六六歌2》紀實電子書」 + +### 相依性（請檢查） + +- 頁面須已載入 Font Awesome（與現有 `` 一致），否則圖示不顯示。 +- `ssg2-ebook.html` 須存在且路徑正確。 + +--- + +## 4. `style.css` + +### 區塊註解 + +`/* 跨時空軌跡：2016 六六歌節點 — 強調電子書 CTA */` + +### 新增樣式摘要 + +| 選擇器 | 用途 | +|--------|------| +| `.merged-storyline .story-node.story-node--ebook-ssg2` | 2016 卡片邊框、陰影、淺黃漸層背景 | +| `.merged-storyline .story-node.story-node--ebook-ssg2 p:last-of-type` | 末段 `

` 下緣縮排，預留按鈕間距 | +| `.merged-storyline .timeline-ebook-cta` | 膠囊按鈕（flex、字重、黃色漸層、圓角、`hover` 上移與陰影） | +| `.merged-storyline .timeline-ebook-cta:focus-visible` | 鍵盤焦點外框 | +| `.merged-storyline .timeline-ebook-cta .fa-hand-pointer` | 略放大 + 動畫 `timeline-finger-nudge` | +| `@keyframes timeline-finger-nudge` | 輕微位移循環 | +| `@media (prefers-reduced-motion: reduce)` | 關閉手指動畫 | + +**注意**：樣式皆掛在 `.merged-storyline` 底下，請確認首頁時間軌 DOM 仍使用 `.merged-storyline` 包住對應節點，否則樣式不會套用。 + +--- + +## 5. `portal-nav.js` + +### 目的 + +- **隱藏**導覽中「消失的真相」（`sunghoon.html`）整個頂層 `

  • `＋子選單，且**不以 `//` 寫在 HTML 模板字串內**（避免字面文字注入 `innerHTML`）。 + +### 實作 + +- 新增常數：`const SHOW_NAV_SUNGHOON = false;` +- 將該段 `
  • …
    • ` 包在 template literal 插值： + `${SHOW_NAV_SUNGHOON ? \` … \` : ''}` +- 簡短註解說明為何不可用 `//` 註解模板內 HTML。 + +### 還原方式 + +- 將 `SHOW_NAV_SUNGHOON` 改為 `true` 即可重新顯示該區塊。 + +--- + +## 建議檢查步驟（逐項勾選） + +1. **`archive.html`**：每列空白處／封面／年份點擊 → 新分頁 Spotify 正確專輯；點列內本站連結 → 仍進本站、不開 Spotify。 +2. **`archive.html`**：鍵盤 Tab 聚焦列後 Enter／空白 → 開 Spotify；聚焦在 `    ` 上時 Enter → 遵循連結。 +3. **`index.html` + `style.css`**：2016 卡片外觀與 CTA 按鈕、`hover`、`focus-visible`、縮減動態偏好設定下手勢動畫關閉。 +4. **`portal-nav.js`**：全站注入後選單無「消失的真相」；改 `true` 後該項回來。 +5. **跨頁**：任意頁載入 `portal-nav.js` 後行為一致。 + +--- + +## 備註 + +- Spotify 專輯 ID 會隨平台重新發行／區域而變動；若連結失效請重新對照官方頁面更新 `data-spotify-url`。 +- 若你要把「檢查清單」與 git 提交對齊，可在提交前再跑一次：`git diff` 確認與本文及實際檔案一致。 diff --git a/archive.html b/archive.html index 759ca63..ee172b7 100644 --- a/archive.html +++ b/archive.html @@ -46,7 +46,9 @@ - + 2016 數位單曲 封面 @@ -54,7 +56,9 @@ 數位單曲 Three Words (三個詞) - + 2017 ANOTHER LIGHT 封面 @@ -62,7 +66,9 @@ ANOTHER LIGHT Something Special / Smile - + 2020 ALL FOR YOU 封面 @@ -87,17 +93,23 @@ - + 1997 學園別曲 學園別曲 / 男兒之路 (Pom Saeng Pom Sa) - + 1998 Road Fighter Road Fighter / Couple - + 1999 Com'Back Com'Back @@ -116,6 +128,23 @@ + diff --git a/classic.html b/classic.html index 390815c..620e501 100644 --- a/classic.html +++ b/classic.html @@ -26,6 +26,12 @@

    輝煌全盛期 (精選)

    +

    + 線上聆聽請至 + SECHSKIES｜Spotify 官方頁 + ，下列為站內精選年表整理。 +

    diff --git a/index.css b/index.css index 248f69e..044a091 100644 --- a/index.css +++ b/index.css @@ -126,6 +126,19 @@ section.archive-block p:last-child { background: #fff; } +.archive-discography tbody tr.archive-row-spotify { + cursor: pointer; +} + +.archive-discography tbody tr.archive-row-spotify:hover td { + background-color: rgba(255, 204, 0, 0.06); +} + +.archive-discography tbody tr.archive-row-spotify:focus-visible { + outline: 2px solid rgba(255, 204, 0, 0.65); + outline-offset: -2px; +} + .landing-intro { text-align: center; padding: 28px 0 48px; diff --git a/index.html b/index.html index f704fbc..2e0cd75 100644 --- a/index.html +++ b/index.html @@ -103,9 +103,13 @@

    2000年5月20日正式解散，成員各自發展，水晶暫時進入休眠期。

    -
    +
    diff --git a/portal-nav.js b/portal-nav.js index 71068fb..337dcf9 100644 --- a/portal-nav.js +++ b/portal-nav.js @@ -19,12 +19,7 @@
  • 隊長的氣場
    • -
  • 消失的真相 - -
    • +
  • 輝煌全盛期典藏
  • 現場的震撼
    • 永恆的重逢
      • diff --git a/style.css b/style.css index 038777c..9c73c89 100644 --- a/style.css +++ b/style.css @@ -640,6 +640,72 @@ a { transform: rotate(-30deg); } +/* 跨時空軌跡：2016 六六歌節點 — 強調電子書 CTA */ +.merged-storyline .story-node.story-node--ebook-ssg2 { + border: 2px solid rgba(255, 204, 0, 0.55); + box-shadow: + 0 0 0 1px rgba(255, 250, 220, 0.85), + 0 14px 36px rgba(255, 193, 7, 0.2), + 0 10px 24px rgba(0, 0, 0, 0.1); + background: linear-gradient(145deg, #fffdf0 0%, #fff 55%, #fff9e8 100%); +} + +.merged-storyline .story-node.story-node--ebook-ssg2 p:last-of-type { + margin-bottom: 0; +} + +.merged-storyline .timeline-ebook-cta { + display: inline-flex; + align-items: center; + gap: 0.5rem; + margin-top: 0.95rem; + padding: 0.6rem 1.1rem 0.6rem 0.9rem; + font-size: 0.86rem; + font-weight: 800; + letter-spacing: 0.05em; + color: #1a1400; + text-decoration: none; + background: linear-gradient(180deg, #ffe566 0%, #ffcc00 52%, #e6b800 100%); + border-radius: 999px; + border: 2px solid rgba(255, 255, 255, 0.9); + box-shadow: 0 4px 16px rgba(230, 184, 0, 0.42); + transition: transform 0.2s ease, box-shadow 0.2s ease; +} + +.merged-storyline .timeline-ebook-cta:hover { + transform: translateY(-2px); + box-shadow: 0 8px 22px rgba(230, 184, 0, 0.55); + color: #1a1400; +} + +.merged-storyline .timeline-ebook-cta:focus-visible { + outline: 3px solid #1a1a1a; + outline-offset: 3px; +} + +.merged-storyline .timeline-ebook-cta .fa-hand-pointer { + font-size: 1.1em; + animation: timeline-finger-nudge 1.15s ease-in-out infinite; +} + +@keyframes timeline-finger-nudge { + + 0%, + 100% { + transform: translate(0, 0); + } + + 50% { + transform: translate(4px, 1px); + } +} + +@media (prefers-reduced-motion: reduce) { + .merged-storyline .timeline-ebook-cta .fa-hand-pointer { + animation: none; + } +} + .story-node h3 { color: #303030; margin-bottom: 8px; @@ -1381,4 +1447,16 @@ body.ebook-ssg2-page .flip-ebook-aspect iframe { body.ebook-ssg2-page .ebook-back-link { text-align: center; margin: 0 0 2.5rem; -} \ No newline at end of file +} + +/* classic.html — #classic-albums Spotify 引導 */ +#classic-albums .classic-stream-lead { + margin: 0 0 1rem; + font-size: 0.95rem; + line-height: 1.65; + color: #444; +} + +#classic-albums .classic-stream-lead a { + font-weight: 700; +}