diff --git a/.cursor/collaboration-notes.md b/.cursor/collaboration-notes.md index 4b44299..020a764 100644 --- a/.cursor/collaboration-notes.md +++ b/.cursor/collaboration-notes.md @@ -32,7 +32,7 @@ - 頂欄與頁內按鈕：**`NAV_SOON_PHRASES` 隨機氣泡**（滑過）；無障礙 aria「尚無開放」。 - 頁內按鈕：**不加**可見「（籌備中）」後綴。 -- `totoga2-copy-timeline.html` 在 `COMING_SOON_PAGES`（時間軸不公開）。 +- `totoga2/timeline.html` 在 `COMING_SOON_PAGES`（時間軸不公開）；圖文好讀版為 `totoga2/readable.html`。 --- diff --git a/.cursor/rules/portal-nav-rules.mdc b/.cursor/rules/portal-nav-rules.mdc index 4df3604..8201a77 100644 --- a/.cursor/rules/portal-nav-rules.mdc +++ b/.cursor/rules/portal-nav-rules.mdc @@ -20,7 +20,7 @@ alwaysApply: true 1. **未經站主逐句同意**：不得從 `COMING_SOON_PAGES` **刪**檔名、不得擴充 `INDEX_NAV_OPEN_HASHES`、不得在 `buildPortalNavInnerHTML` **新增**可點項、不得把籌備中改成真 `href`、不得刪站主已同意列入頂欄的項。 2. **「檔案在 repo」≠「可開放導覽」**；不得自行推論。 -3. **`fallen/totoga2.html`（整合頁）**、**`variety/variety.html`**：站主**沒有明講對外開放**時，檔名**必須**留在 `COMING_SOON_PAGES`（訪客頂欄不可點進）。要開放時**只**能等站主說了再從 Set 移除。 +3. **`totoga2/readable.html`（圖文好讀版，檔名 `readable.html`）**、**`variety/variety.html`**：站主**沒有明講對外開放**時，檔名**必須**留在 `COMING_SOON_PAGES`（訪客頂欄不可點進）。要開放時**只**能等站主說了再從 Set 移除。 4. **「刪除／拿掉／不要了」**：若未寫明是**單一檔案**、**頂欄某一列**、**整段子選單**還是**整個資料夾**，**一律先問站主**，禁止自行擴大刪除範圍。 5. **不確定**是否開放、連哪、是否例外：**先問站主再改**，不要猜。 6. 站主說要刪的是 **`某頁#錨點`**（頁內區塊）時：先改該頁 DOM，再修死錨連結；**不要**只動導覽、也不要把「刪區塊」擴成刪頂欄整段。細節見 **`user-scope-and-nav.mdc`**（§ 頁面錨點刪除）。 @@ -65,7 +65,7 @@ alwaysApply: true | 新頁要**正式開放** | 寫進 `buildPortalNavInnerHTML`（`assets/js/portal-nav.js`），並**確認檔名不在** `COMING_SOON_PAGES`。若曾暫時關閉，記得從 Set **刪除**該檔名。 | | 新頁先**占位、不開放** | 可選擇：仍寫進導覽，但把檔名**加進** `COMING_SOON_PAGES`；或暫時不要放進導覽。 | -（目前 Set 內含哪些檔，以 `assets/js/portal-nav.js` 為準；站主明講開放後才從 Set 移除該檔名，例如 `totoga2.html`。） +（目前 Set 內含哪些檔，以 `assets/js/portal-nav.js` 為準；站主明講開放後才從 Set 移除該檔名，例如 `readable.html`。） --- diff --git a/.cursor/rules/user-scope-and-nav.mdc b/.cursor/rules/user-scope-and-nav.mdc index 8983cde..ef60755 100644 --- a/.cursor/rules/user-scope-and-nav.mdc +++ b/.cursor/rules/user-scope-and-nav.mdc @@ -9,7 +9,7 @@ alwaysApply: true 1. **`extra/site-guide.html`**：站主自用；該頁頂欄 `data-portal-nav-all-open` → **全部連結可點**；主文 `
` 的 `` **不准**用腳本改成籌備中。 2. **其他每一頁**：未公開＝**籌備中**（頂欄＋頁內連結皆鎖、須寫出「籌備中」）；依 **`COMING_SOON_PAGES` / `INDEX_NAV_OPEN_HASHES`**；不准在其他頁加 `all-open`。 -3. **`totoga2.html`**、**`variety.html`**：站主沒說「對外開放」→ **留在 `COMING_SOON_PAGES`**；不得自以為可以幫忙開放。 +3. **`totoga2/readable.html`**（檔名 `readable.html`）、**`variety.html`**：站主沒說「對外開放」→ **留在 `COMING_SOON_PAGES`**；不得自以為可以幫忙開放。 4. **沒寫在指令裡的開放／連結／從 Set 移除／刪檔或刪導覽列**：**一律先問**，禁止推論；「刪除」未指明範圍（單檔 vs 頂欄整段 vs 資料夾）＝必須先問。 5. 技術細節與檢查清單：**`portal-nav-rules.mdc`**（與本檔一起讀）。 6. **頂欄 `portal-nav`（header）**：文案與巢狀結構對齊 `extra/site-guide.html` **主選單樹**（有連結者）；`site-guide-nav-nolink` 與 `COMING_SOON_PAGES` 維持籌備中、**不准擅自開放或改未列開放之頁內容**。勿把此句誤做成 `extra/` 分頁列或全站 `nav` 黑底規則。 @@ -26,11 +26,11 @@ alwaysApply: true - **不得**因為「內容已搬到某頁」就自行推論「導覽也應該開放」——導覽是否開放**只聽使用者口述**。 - 若使用者只要求搬內容、刪檔、改站內某段文案，**預設不改** `assets/js/portal-nav.js` 的開放狀態與連結目標。 -## 「傳奇的轉折」與 `fallen/totoga2.html`（特別記牢） +## 「傳奇的轉折」與 `totoga2/readable.html`（特別記牢） -- 頂欄模板裡「傳奇的轉折」連到 **`fallen/totoga2.html`**（見 `buildPortalNavInnerHTML`）。 -- 使用者**沒有明講對外開放整合頁**時：`totoga2.html` **必須**在 **`COMING_SOON_PAGES`** 裡 → 訪客頂欄該項為籌備中、**不可點進**。 -- **禁止**在未獲同意下：從 Set **移除** `totoga2.html`、或改成連到其他頁並當成已開放。 +- 頂欄「圖文好讀版」連到 **`totoga2/readable.html`**（見 `buildPortalNavInnerHTML`）。 +- 使用者**沒有明講對外開放整合頁**時：`readable.html` **必須**在 **`COMING_SOON_PAGES`** 裡 → 訪客頂欄該項為籌備中、**不可點進**。 +- **禁止**在未獲同意下：從 Set **移除** `readable.html`、或改成連到其他頁並當成已開放。 - 首頁錨點另依 **`INDEX_NAV_OPEN_HASHES`**；與「傳奇的轉折／totoga2」分開判斷。 ## 實作前自檢 diff --git a/.cursor/site-voice-notes.md b/.cursor/site-voice-notes.md index 2b91e7a..05d5711 100644 --- a/.cursor/site-voice-notes.md +++ b/.cursor/site-voice-notes.md @@ -28,7 +28,7 @@ ## 六六歌2 電子書 intro -- 站主採用版：第一次感性改寫（「四月那場重逢…」開頭），見 `extra/totoga2-copy-ebook.html`。 +- 站主採用版：第一次感性改寫（「四月那場重逢…」開頭），見 `totoga2/ebook.html`。 - **勿**再改成 FlipHTML5／PDF 技術說明，也**勿**把 `#start`＋整條 timeline 名詞塞滿一段（東拼西湊版）。 ## 其他 diff --git a/.cursor/totoga2-video-notes.md b/.cursor/totoga2-video-notes.md index d7ed57f..4b5ae16 100644 --- a/.cursor/totoga2-video-notes.md +++ b/.cursor/totoga2-video-notes.md @@ -6,4 +6,4 @@ - 中集、下集 iframe 使用 `data-src`，第一次切到該分頁時由頁內 script 寫入 `src`；改連結時請改 `data-src`（或已寫入後的 `src`）。 - 目前中／下集預設與上集同一 BV，僅作占位；正式替換時改各分頁 iframe 的 `data-src` 即可。 - 此頁 `body.totoga2-video-copy-page` 會覆寫 `.map-archive-header` 的整屏高度（`100vh`／`100dvh`），避免與導覽、影片疊加後出現整頁直向捲軸；其他全屏 banner 頁不受影響。 -- 資訊架構：頂部黃色列僅 **上集／中集／下集**（`role="tab"`）；**紀實電子書、時間軸＋長文、複本總覽** 為其下文字連結，仍各為獨立 HTML；`totoga2-copy-ebook.html` 等頁仍保留原四鈕列。 +- 資訊架構：頂部黃色列僅 **上集／中集／下集**（`role="tab"`）；四入口為 `totoga2/` 下 `timeline.html`、`ebook.html`、`readable.html`、`video.html`，頁內四鈕列共用 `split-nav.css`。 diff --git a/assets/css/index.css b/assets/css/index.css index 2808752..6a03696 100644 --- a/assets/css/index.css +++ b/assets/css/index.css @@ -438,3 +438,13 @@ header#origin .site-header-inner .subtitle-wrap::after { font-size: 1rem; } } + +/* 首頁時間軸末：2019／NOW 改為未完待續占位 */ +.home-page #timeline .story-node--tbc { + text-align: center; +} + +.home-page #timeline .story-node--tbc h3 { + margin: 0; + white-space: nowrap; +} diff --git a/assets/css/style.css b/assets/css/style.css index 18c6f6a..e039cc0 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -13,7 +13,7 @@ --card-bg: #1a1a1a; --bg-alt: #fcfaf2; --text-main: #333; - --text-muted: #888; + --text-muted: #4d4d4d; --surface: #fffdf7; --surface-soft: #fff9e8; /* 導覽無法進入之提示後備（互動後各連結以 inline 變數覆寫，每次滑過／聚焦重抽） */ @@ -473,9 +473,7 @@ nav a { height: 100dvh; margin: 0; padding: - max(0.85rem, env(safe-area-inset-top, 0px)) - clamp(14px, 2vw + 10px, 32px) - max(1rem, env(safe-area-inset-bottom, 0px)); + max(0.85rem, env(safe-area-inset-top, 0px)) clamp(14px, 2vw + 10px, 32px) max(1rem, env(safe-area-inset-bottom, 0px)); z-index: 10000; overflow: hidden; background-color: var(--black); @@ -2622,7 +2620,7 @@ body.ebook-ssg2-page .ebook-main p { line-height: 1.7; } -body.ebook-ssg2-page .ebook-intro.section p + p { +body.ebook-ssg2-page .ebook-intro.section p+p { margin-top: -0.5rem; font-size: 0.88rem; color: #777; @@ -2641,7 +2639,7 @@ body.ebook-ssg2-page .ebook-intro-notes .ebook-intro-note { line-height: 1.5; } -body.ebook-ssg2-page .ebook-intro-notes .ebook-intro-note + .ebook-intro-note { +body.ebook-ssg2-page .ebook-intro-notes .ebook-intro-note+.ebook-intro-note { margin-top: 0.35rem; } @@ -2683,7 +2681,7 @@ body.ebook-ssg2-page .flip-ebook-aspect iframe { } /* PDF.js + PageFlip：與 iframe 相同，填滿 padding-top 預留區，否則父層 height:0 會看不到內容 */ -body.ebook-ssg2-page .flip-ebook-aspect > #my-flipbook { +body.ebook-ssg2-page .flip-ebook-aspect>#my-flipbook { position: absolute; left: 0; top: 0; @@ -2720,7 +2718,7 @@ body.ebook-ssg2-page .flip-ebook-aspect.flip-ebook-aspect--pageflip { background: #0a0a0a; } -body.ebook-ssg2-page .flip-ebook-aspect--pageflip > #my-flipbook { +body.ebook-ssg2-page .flip-ebook-aspect--pageflip>#my-flipbook { position: static; width: auto; height: auto; @@ -2765,7 +2763,7 @@ body.ebook-ssg2-page .ebook-back-link { margin: 0 0 2.5rem; } -/* extra/totoga2-copy-ebook：翻書區與上方 section 同欄寬、無額外外距；#my-flipbook 滿寬＋圓角裁切 */ +/* totoga2/ebook.html：翻書區與上方 section 同欄寬、無額外外距；#my-flipbook 滿寬＋圓角裁切 */ body.ebook-ssg2-page.totoga2-ebook-copy-page .ebook-intro.section { margin-bottom: 1.25rem; } @@ -2790,7 +2788,7 @@ body.ebook-ssg2-page.totoga2-ebook-copy-page .flip-ebook-aspect.flip-ebook-aspec } body.ebook-ssg2-page.totoga2-ebook-copy-page #book-container.flip-ebook-aspect--pageflip, -body.ebook-ssg2-page.totoga2-ebook-copy-page .flip-ebook-aspect--pageflip > #my-flipbook { +body.ebook-ssg2-page.totoga2-ebook-copy-page .flip-ebook-aspect--pageflip>#my-flipbook { width: 100%; max-width: 100%; margin: 0; @@ -2840,30 +2838,7 @@ body.totoga2-page.totoga2-video-copy-page .ebook-main .bilivideo-tabs__shell { margin-right: auto; } -body.totoga2-page.totoga2-video-copy-page .totoga2-copy-sibling-links { - text-align: center; - font-size: 0.9rem; - margin: 0.5rem auto 0.85rem; - color: #555; -} - -body.totoga2-page.totoga2-video-copy-page .totoga2-copy-sibling-links a { - color: #4a3d12; - font-weight: 650; - text-decoration: underline; - text-underline-offset: 0.2em; -} - -body.totoga2-page.totoga2-video-copy-page .totoga2-copy-sibling-links a:hover { - color: #221a06; -} - -body.totoga2-page.totoga2-video-copy-page .totoga2-copy-sibling-links__sep { - margin: 0 0.4rem; - opacity: 0.55; -} - -/* DOM 上 tablist 在 panels 前（見 totoga2-video.html）；order 讓畫面仍為「影片在上、分集在下」 */ +/* DOM 上 tablist 在 panels 前（見 totoga2/video.html）；order 讓畫面仍為「影片在上、分集在下」 */ body.totoga2-page.totoga2-video-copy-page .bilivideo-tabs__shell nav.bilivideo-episode-nav { order: 2; display: flex; @@ -3007,26 +2982,11 @@ body.totoga2-page .ebook-back-link { gap: 12px; } -/* extra/totoga2 copy.html — 複本改為三獨立頁後的總覽；主檔 fallen/totoga2.html；子頁共用 .totoga2-split-crossnav */ +/* totoga2/* 子頁共用 .totoga2-split-crossnav */ body.totoga2-page .totoga2-split-crossnav { margin-top: 0.75rem; } -body.totoga2-page .totoga2-copy-hub-main { - max-width: 960px; - margin: 0 auto 2rem; - padding: 0 14px; -} - -body.totoga2-page .totoga2-copy-hub-nav { - margin-bottom: 2rem; -} - -body.totoga2-page .totoga2-copy-hub-anchor-hint { - text-align: center; - font-size: 0.95rem; -} - /* member/member.html — 黑白水晶交錯格（2×4）與懸賞令海報 */ body.member-crystal-page .member-crystal-main { padding: 1.75rem 14px 3rem; diff --git a/extra/site-guide.html b/extra/site-guide.html index fc81e95..45cdda7 100644 --- a/extra/site-guide.html +++ b/extra/site-guide.html @@ -314,7 +314,7 @@
@@ -467,10 +467,6 @@ grok.html 實驗單頁 - - totoga2 copy.html - 複本總覽 - Untitled-1.html 草稿 diff --git a/extra/totoga2 copy.html b/extra/totoga2 copy.html deleted file mode 100644 index 25c2835..0000000 --- a/extra/totoga2 copy.html +++ /dev/null @@ -1,65 +0,0 @@ - - - - - - - 水晶男孩｜無限挑戰六六歌2 — 複本分頁導覽 - - - - - - - -
-
-

無限挑戰 · 六六歌2

-
- 水晶男孩回來啦！ -
-
-
- - - - - -
-
-

六六歌2 複本 · 三頁分開

-

- 原先單頁以按鈕切換「影片／電子書／時間軸＋長文」；此複本改為三個獨立 HTML（檔名無空白，較利分享與書籤）。 - 正式整合版仍以 totoga2/readable.html 為準。 -

-
- - - -

- 長文章節錨點請用 #challenge 等同名 id（見時間軸頁）。 -

-
- -

- 回到首頁 · 傳奇的轉折 - 主檔 totoga2/readable.html -

- - - - - - - - \ No newline at end of file diff --git a/extra/totoga2-copy-ebook.html b/extra/totoga2-copy-ebook.html deleted file mode 100644 index d038e4f..0000000 --- a/extra/totoga2-copy-ebook.html +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - -已搬移 - - -

頁面已搬至 totoga2/ebook.html

- diff --git a/extra/totoga2-copy-timeline.html b/extra/totoga2-copy-timeline.html deleted file mode 100644 index e7425d2..0000000 --- a/extra/totoga2-copy-timeline.html +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - -已搬移 - - -

頁面已搬至 totoga2/timeline.html

- diff --git a/extra/totoga2-video.html b/extra/totoga2-video.html deleted file mode 100644 index 7c2a080..0000000 --- a/extra/totoga2-video.html +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - -已搬移 - - -

頁面已搬至 totoga2/video.html

- diff --git a/fallen/totoga2(old).html b/fallen/totoga2(old).html deleted file mode 100644 index 34a3a0c..0000000 --- a/fallen/totoga2(old).html +++ /dev/null @@ -1,257 +0,0 @@ - - - - - - - 水晶男孩｜無限挑戰六六歌2 — 紀實電子書 - - - - - - - -
-
-

無限挑戰 · 六六歌2

-
- 水晶男孩回來啦！ -
-
-
- - - - -
-
- - - -
-
- 六六歌2 -
-
-
-
-
-
- 六六歌2 電子書跨頁圖（序號一 · 右） -
-
-

04 無限挑戰

-

《無限挑戰》是韓國綜藝史上指標性的真人秀節目。「星期六星期六是歌手（六六歌）」企劃，成為水晶男孩 2016 回歸舞台的關鍵起點。

-

第一季掀起 90 年代懷舊熱潮，雖然水晶男孩未能完整出演，卻留下「總有一天要六人完整回到舞台」的遺憾伏筆。

-
- -
-

06 六六歌第二季

-

第二季改成「為單一團體打造完整回歸敘事」，保密層級更高，連主持群都縮小到劉在錫與 HAHA，避免消息提前走漏。

-

從開場的復古裝扮、試探式線索到真正揭曉團體身份，節目節奏在搞笑與懸念間拉開這場 16 年重逢序章。

-
- -
-

08 水晶男孩

-

1997 出道後迅速登頂，與同世代頂流並列，短短三年創下極高銷量與舞台紀錄，卻在 2000 無預警解散，留下集體創傷。

-

16 年間六人從未以水晶男孩名義完整合體，這次企劃不只是回憶，而是回應當年未說完的離別。

-
- -
-

10 召集

-

製作組先與隊長殷志源交涉，再透過隱藏攝影機確認成員意願。大家都希望重組，卻同時知道最困難的拼圖是離開演藝圈多年的高志溶。

-

這個階段的重點不是舞台，而是「願不願意再次站在一起」的心理門檻。

-
- -
-

11 正式交涉

-

主持人與成員深度對話，回顧解散緣由、舞台記憶、KTV 挑戰與游擊演唱會規則。笑鬧之間，團魂逐漸浮現。

-

同時，節目也把高志溶議題正式擺上檯面：如果不是完整體，這次回歸是否還成立？

-
- -
-

16 變數

-

排練期間接連出現傷病、手術需求與消息外流，原本理想的游擊演唱會計畫屢次被迫改寫，團隊陷入 B 計畫陰影。

-

在體力與心理都被拉到極限的情況下，成員仍選擇撐住，只為把久違舞台交回給等待 16 年的小黃。

-
- -
-

19 驚喜

-

當所有人幾乎接受「不完整」時，節目仍悄悄推進最後安排。高志溶與成員的情感張力在此段達到最高點。

-

這份驚喜不是綜藝反轉，而是把六顆水晶的空位真正填回舞台。

-
- -
-

21 登場

-

眼罩揭開後，滿場黃海與哭聲同時湧現。從《請記得我》到安可，《離別曲》在那一晚變成了「重逢證詞」。

-

2000 的缺憾，在 2016 終於補上。這一頁不是結束，而是團體與粉絲共同完成的回歸章節。

-
-
- -

- 回到首頁 · 傳奇的轉折 -

- - - - - - - - - \ No newline at end of file diff --git a/fallen/totoga2.html b/fallen/totoga2.html deleted file mode 100644 index eb35b53..0000000 --- a/fallen/totoga2.html +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - -已搬移 - - -

頁面已搬至 totoga2/readable.html

- diff --git a/index.html b/index.html index 0dc683b..88b7adc 100644 --- a/index.html +++ b/index.html @@ -21,7 +21,7 @@ 六顆永恆的水晶 • 左右命運的傳奇 - 從這裡開始淪陷 + @@ -158,14 +158,8 @@

-
-

體制調整與穩定

-

調整為四人組合（殷志源、李宰鎮、金在德、張水院），繼續以經典魅力活躍於樂壇與綜藝。

-
- -
-

至今：個人與團體並行

-

隊長殷志源活躍於各類綜藝節目，成員們也積極參與音樂與個人品牌活動。雖然活動節奏放緩，但水晶男孩仍是 K-POP 史上的長壽標竿。

+
+

未完待續

diff --git a/totoga2/readable.html b/totoga2/readable.html index 7429b54..d0e5821 100644 --- a/totoga2/readable.html +++ b/totoga2/readable.html @@ -1,4 +1,4 @@ - + @@ -60,8 +60,6 @@ } } - totoga2.html - /* 含圖列：必須寫在含 #totoga2-reader 的選取器上，否則會輸給上一段 #totoga2-reader .container 的 height，圖會溢出蓋住後文 */ body.totoga2-page #totoga2-reader.chronicle-reader .container:has(img) { height: auto; @@ -158,7 +156,7 @@ display: block; } - + @@ -173,13 +171,13 @@ - - -