diff --git a/index.html b/index.html index 9a62c58..9e30611 100644 --- a/index.html +++ b/index.html @@ -144,33 +144,35 @@ PLOT TWIST

- 像劇情的反轉一樣過癮：這幾個節點，剛好是許多人從「旁觀綜藝」滑進「正式入坑」的轉軌。若想讀對白級細節，隨時可切到完整紀實長文。 - 開啟完整紀實篇章 + 像劇情的反轉一樣過癮：這幾個節點，剛好是許多人從「旁觀綜藝」滑進「正式入坑」的轉軌。若想讀對白級細節，可開 + 六六歌2 整合專區（影片／電子書／長卷），或使用獨立長文 + 傳奇紀實長卷。

開啟六六歌2 紀實電子書 + 六六歌2 整合專區

六六歌實錄

把懸念、試探與哭點縫在同一條時間軸上；很多人第一次真正把「水晶男孩」打進搜尋框，就是從這種瘋狂的剪輯節奏開始。

-

對照這一段幕後敘事

+

對照這一段幕後敘事

命運的交涉

KTV、游擊演唱會規則、與其說講道理不如說把真心擺上桌面——交涉的不是合約字面，而是還願不願意再一次肩並肩。

-

讀交涉與對話肌理

+

讀交涉與對話肌理

拼圖的歸位

變數一個個被排除之後，驚喜接上登場段落；缺一角舞台的視覺，終於對齊觀眾席上堅守的那片黃。

-

從「召集」段開始補這條線

+

從「召集」段開始補這條線

巔峰與雨天

急凍、告別、各自的跑道——並不是要你沉浸遺憾，而是讓你懂：後來每一次亮燈，為什麼會更值得尖叫。

-

讀這條脈絡的起點

+

讀這條脈絡的起點

diff --git a/portal-nav.js b/portal-nav.js index 19c65a0..ecea517 100644 --- a/portal-nav.js +++ b/portal-nav.js @@ -131,6 +131,7 @@
  • 傳奇的轉折
  • 傳奇紀實長卷
  • 六六歌2 電子書
    • +
  • 六六歌2 整合專區
  • 瘋子與天才 diff --git a/site-guide.html b/site-guide.html new file mode 100644 index 0000000..c9c3cc6 --- /dev/null +++ b/site-guide.html @@ -0,0 +1,207 @@ + + + + + + + 水晶男孩｜全站導覽 + + + + + + +
    +
    +

    全站導覽

    +
    + SITE MAP · 頁面索引 +
    +
    +
    + + + + + +
    +

    + 以下為本專案目前所有 HTML 頁面：每張卡片含連結、瀏覽器分頁上的標題（<title>）、以及主要區塊／錨點，方便你開發或簡報時一鍵跳轉。 + 此頁未放入全站導覽列，僅供你自行書籤或輸入網址（例如 site-guide.html）開啟。 +

    + +
    +

    首頁與入口

    +
    +
    +

    index.html

    +

    標題列：SECHSKIES - 水晶男孩傳奇介紹

    +

    主視覺與導覽列；內文以區塊錨點分段。

    +

    區塊錨點

    + +
    + +
    +

    origin.html

    +

    標題列：重新導向…

    +

    Meta refresh → index.html；保留給舊書籤。

    +

    說明

    + +
    + + +
    +
    + +
    +

    無限挑戰 · 六六歌 2

    +
    +
    +

    totoga2.html

    +

    標題列：水晶男孩｜無限挑戰六六歌2 — 紀實電子書（與電子書頁同標題列）

    +

    整合：影片／電子書／傳奇的轉折＋長卷。章節錨點與 chronicle.html 相同（#ssg2 等），網址較短。

    +

    長卷章節（錨點）

    + +
    + +
    +

    ssg2-ebook.html

    +

    標題列：水晶男孩｜無限挑戰六六歌2 — 紀實電子書

    +

    FlipHTML5 跨頁電子書全螢幕嵌入。

    +

    結構

    +
      +
    • 標題區 map-archive-header
      • +
    • 主內容 ebook-main → flip-ebook-shell
      • +
    +
    + + +
    +
    + +
    +

    成員與紀實

    +
    +
    +

    jiwon.html

    +

    標題列：水晶男孩｜瘋子與天才

    +

    區塊錨點

    + +
    + + +
    +
    + +
    +

    現場 · 典藏 · 地圖 · 歌詞

    +
    + + +
    +

    archive.html

    +

    標題列：水晶男孩｜黃色留聲機

    +

    區塊錨點

    +
      +
    • #new — 啟動新篇章
      • +
    • #classic — 輝煌全盛期
      • +
    +
    + +
    +

    map.html

    +

    標題列：SECHSKIES 台灣行程地圖

    +

    區塊錨點

    +
      +
    • #taipei — 台北聖地（主版面）
      • +
    • #global — 海外遠征
      • +
    +
    + +
    +

    lyrics.html

    +

    標題列：세 단어 (THREE WORDS) — SECHSKIES

    +

    <html lang="ko">；歌詞＋YouTube 嵌入單頁。

    +

    結構

    +
      +
    • .lyrics-layout — 主標＋表格雙欄
      • +
    +
    +
    +
    +
    + + + + + + + + diff --git a/style.css b/style.css index 1dab0ae..6fee0bd 100644 --- a/style.css +++ b/style.css @@ -1570,3 +1570,184 @@ body.ebook-ssg2-page .ebook-back-link { text-align: center; margin: 0 0 2.5rem; } + +/* totoga2.html — 六六歌2 整合（影片／電子書／長文＋網漫／分頁） */ +body.totoga2-page .totoga2-hub-controls { + max-width: 1200px; + margin: 24px auto 10px; + padding: 0 14px; + display: flex; + gap: 10px; + flex-wrap: wrap; +} + +body.totoga2-page .bilivideo-stack { + display: flex; + flex-direction: column; + gap: 2rem; + margin-bottom: 2rem; +} + +body.totoga2-page .bilivideo-block h3 { + margin: 0 0 0.5rem; + font-size: 1.1rem; + color: #2a2a2a; +} + +body.totoga2-page .bilivideo-placeholder-note { + font-size: 0.88rem; + color: #666; + margin: 0 0 0.5rem; +} + +body.totoga2-page .bilivideo-frame { + position: relative; + width: 100%; + max-width: 960px; + margin: 0 auto; + padding-top: 56.25%; + height: 0; + border-radius: 12px; + overflow: hidden; + border: 1px solid rgba(255, 204, 0, 0.25); + box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12); + background: #0a0a0a; +} + +body.totoga2-page .bilivideo-frame iframe { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border: 0; +} + +body.totoga2-page .totoga2-reader-hub { + padding-bottom: 2rem; +} + +body.totoga2-page .totoga2-plot { + margin: 0 auto 1.5rem; +} + +body.totoga2-page .totoga2-plot .intro-text { + text-align: center; + color: #4a4a4a; + line-height: 1.7; + margin-bottom: 1.25rem; +} + +body.totoga2-page .totoga2-plot .intro-text a { + color: var(--dark-yellow); + font-weight: 700; + text-decoration: underline; +} + +body.totoga2-page #totoga2-chapter-indicator { + min-width: 64px; + text-align: center; + font-weight: 700; + color: #f6d66f; +} + +body.totoga2-page .ebook-back-link { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 12px; +} + +/* site-guide.html — 全站導覽索引 */ +body.site-guide-page .site-guide-main { + padding: 28px 14px 56px; + max-width: 1100px; +} + +body.site-guide-page .site-guide-lead { + text-align: center; + max-width: 42rem; + margin: 0 auto 2rem; + color: #444; + line-height: 1.75; + font-size: 1rem; +} + +body.site-guide-page .site-guide-group { + margin-bottom: 2.75rem; +} + +body.site-guide-page .site-guide-grid { + display: grid; + gap: 1.25rem; + grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); +} + +body.site-guide-page .site-guide-card { + background: linear-gradient(135deg, var(--surface-soft) 0%, #fff 100%); + border-radius: 14px; + padding: 1.25rem 1.35rem; + border: 1px solid rgba(255, 204, 0, 0.18); + box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); +} + +body.site-guide-page .site-guide-card h3 { + margin: 0 0 0.35rem; + font-size: 1.12rem; +} + +body.site-guide-page .site-guide-card h3 a { + color: var(--dark-yellow); + font-weight: 800; + text-decoration: none; +} + +body.site-guide-page .site-guide-card h3 a:hover { + text-decoration: underline; +} + +body.site-guide-page .site-guide-meta { + font-size: 0.82rem; + color: #666; + margin: 0 0 0.45rem; +} + +body.site-guide-page .site-guide-meta cite { + font-style: normal; + color: #555; +} + +body.site-guide-page .site-guide-note { + font-size: 0.88rem; + color: #555; + margin: 0 0 0.65rem; + line-height: 1.55; +} + +body.site-guide-page .site-guide-card h4 { + margin: 0.85rem 0 0.4rem; + font-size: 0.72rem; + text-transform: uppercase; + letter-spacing: 0.14em; + color: #888; +} + +body.site-guide-page .site-guide-card ul { + margin: 0; + padding-left: 1.15rem; + color: #3a3a3a; + font-size: 0.9rem; + line-height: 1.55; +} + +body.site-guide-page .site-guide-card ul a { + color: #5c4810; + font-weight: 700; +} + +body.site-guide-page .site-guide-card code { + font-size: 0.85em; + background: rgba(0, 0, 0, 0.06); + padding: 0.1em 0.35em; + border-radius: 4px; +} diff --git a/totoga2.html b/totoga2.html new file mode 100644 index 0000000..461d2e2 --- /dev/null +++ b/totoga2.html @@ -0,0 +1,199 @@ + + + + + + + 水晶男孩｜無限挑戰六六歌2 — 紀實電子書 + + + + + + +
    +
    +

    無限挑戰 · 六六歌2

    +
    + INFINITE CHALLENGE · SIX SONGS 2 — E-BOOK +
    +
    +
    + + + + + +
    + + + +
    + + +
    +
    +

    節目影片

    +

    + 以下為 Bilibili 嵌入播放器（16：9）。若無法播放，請至站內搜尋同一 BV 號；中集、下集請將 iframe 的 bvid 換成你的分集連結。 +

    +
    + +
    +
    +

    上集

    +
    + +
    +
    +
    +

    中集

    +

    預設與上集同一支；請替換 bvid 為中集 BV。

    +
    + +
    +
    +
    +

    下集

    +

    預設與上集同一支；請替換 bvid 為下集 BV。

    +
    + +
    +
    +
    +
    + + + + + +

    + 回到首頁 · 傳奇的轉折 + 僅開電子書全螢幕版 +

    + + + + + + + + + diff --git a/totoga2.js b/totoga2.js new file mode 100644 index 0000000..9030f08 --- /dev/null +++ b/totoga2.js @@ -0,0 +1,88 @@ +(() => { + const hubButtons = Array.from(document.querySelectorAll("[data-totoga-hub]")); + const hubPanels = Array.from(document.querySelectorAll("[data-totoga-panel]")); + + function setHubPanel(name) { + hubButtons.forEach((btn) => btn.classList.toggle("active", btn.dataset.totogaHub === name)); + hubPanels.forEach((panel) => { + panel.hidden = panel.dataset.totogaPanel !== name; + }); + } + + hubButtons.forEach((btn) => { + btn.addEventListener("click", () => setHubPanel(btn.dataset.totogaHub)); + }); + + const reader = document.getElementById("totoga2-reader"); + if (!reader) return; + + const chapters = Array.from(reader.querySelectorAll(".chronicle-chapter")); + const modeButtons = Array.from(document.querySelectorAll("[data-totoga-reader-mode]")); + const pager = document.getElementById("totoga2-pager"); + const prevBtn = document.getElementById("totoga2-prev"); + const nextBtn = document.getElementById("totoga2-next"); + const indicator = document.getElementById("totoga2-chapter-indicator"); + if (!pager || !prevBtn || !nextBtn || !indicator) return; + + let currentIndex = 0; + + function updatePagedView() { + chapters.forEach((chapter, index) => { + chapter.style.display = index === currentIndex ? "" : "none"; + chapter.classList.toggle("active", index === currentIndex); + }); + indicator.textContent = `${currentIndex + 1} / ${chapters.length}`; + prevBtn.disabled = currentIndex === 0; + nextBtn.disabled = currentIndex === chapters.length - 1; + } + + function setReaderMode(mode) { + reader.dataset.mode = mode; + modeButtons.forEach((btn) => btn.classList.toggle("active", btn.dataset.totogaReaderMode === mode)); + if (mode === "paged") { + pager.hidden = false; + updatePagedView(); + } else { + pager.hidden = true; + chapters.forEach((chapter) => { + chapter.style.display = ""; + chapter.classList.remove("active"); + }); + } + } + + modeButtons.forEach((button) => { + button.addEventListener("click", () => setReaderMode(button.dataset.totogaReaderMode)); + }); + + prevBtn.addEventListener("click", () => { + if (currentIndex > 0) { + currentIndex -= 1; + updatePagedView(); + } + }); + + nextBtn.addEventListener("click", () => { + if (currentIndex < chapters.length - 1) { + currentIndex += 1; + updatePagedView(); + } + }); + + const initialHub = + hubButtons.find((b) => b.classList.contains("active"))?.dataset.totogaHub || + hubButtons[0]?.dataset.totogaHub || + "video"; + setHubPanel(initialHub); + setReaderMode("scroll"); + + const hash = (location.hash || "").slice(1); + if (hash && document.getElementById(hash)) { + setHubPanel("reader"); + setReaderMode("scroll"); + pager.hidden = true; + requestAnimationFrame(() => { + document.getElementById(hash)?.scrollIntoView({ behavior: "smooth", block: "start" }); + }); + } +})();