feat site-guide.html
This commit is contained in:
+8
-6
@@ -144,33 +144,35 @@
|
||||
<span class="sub-title">PLOT TWIST</span>
|
||||
</div>
|
||||
<p class="intro-text">
|
||||
像劇情的反轉一樣過癮：這幾個節點，剛好是許多人從「旁觀綜藝」滑進「正式入坑」的轉軌。若想讀對白級細節，隨時可切到完整紀實長文。
|
||||
<a href="chronicle.html">開啟完整紀實篇章</a>
|
||||
像劇情的反轉一樣過癮：這幾個節點，剛好是許多人從「旁觀綜藝」滑進「正式入坑」的轉軌。若想讀對白級細節，可開
|
||||
<a href="totoga2.html">六六歌2 整合專區</a>（影片／電子書／長卷），或使用獨立長文
|
||||
<a href="chronicle.html">傳奇紀實長卷</a>。
|
||||
</p>
|
||||
<div class="story-ebook-cta">
|
||||
<a href="ssg2-ebook.html" class="btn story-ebook-btn">開啟六六歌2 紀實電子書</a>
|
||||
<a href="totoga2.html" class="btn story-ebook-btn">六六歌2 整合專區</a>
|
||||
</div>
|
||||
|
||||
<div class="merged-storyline">
|
||||
<article id="special" class="story-node" data-era="六六歌">
|
||||
<h3>六六歌實錄</h3>
|
||||
<p>把懸念、試探與哭點縫在同一條時間軸上；很多人第一次真正把「水晶男孩」打進搜尋框，就是從這種瘋狂的剪輯節奏開始。</p>
|
||||
<p><a href="chronicle.html#ssg2">對照這一段幕後敘事</a></p>
|
||||
<p><a href="totoga2.html#ssg2">對照這一段幕後敘事</a></p>
|
||||
</article>
|
||||
<article id="negotiate" class="story-node" data-era="交涉">
|
||||
<h3>命運的交涉</h3>
|
||||
<p>KTV、游擊演唱會規則、與其說講道理不如說把真心擺上桌面——交涉的不是合約字面，而是還願不願意再一次肩並肩。</p>
|
||||
<p><a href="chronicle.html#negotiate">讀交涉與對話肌理</a></p>
|
||||
<p><a href="totoga2.html#negotiate">讀交涉與對話肌理</a></p>
|
||||
</article>
|
||||
<article id="complete" class="story-node" data-era="歸位">
|
||||
<h3>拼圖的歸位</h3>
|
||||
<p>變數一個個被排除之後，驚喜接上登場段落；缺一角舞台的視覺，終於對齊觀眾席上堅守的那片黃。</p>
|
||||
<p><a href="chronicle.html#gather">從「召集」段開始補這條線</a></p>
|
||||
<p><a href="totoga2.html#gather">從「召集」段開始補這條線</a></p>
|
||||
</article>
|
||||
<article id="past" class="story-node" data-era="最初">
|
||||
<h3>巔峰與雨天</h3>
|
||||
<p>急凍、告別、各自的跑道——並不是要你沉浸遺憾，而是讓你懂：後來每一次亮燈，為什麼會更值得尖叫。</p>
|
||||
<p><a href="chronicle.html#sechskies-profile">讀這條脈絡的起點</a></p>
|
||||
<p><a href="totoga2.html#sechskies-profile">讀這條脈絡的起點</a></p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -131,6 +131,7 @@
|
||||
<li><a href="index.html#story">傳奇的轉折</a></li>
|
||||
<li><a href="chronicle.html">傳奇紀實長卷</a></li>
|
||||
<li><a href="ssg2-ebook.html">六六歌2 電子書</a></li>
|
||||
<li><a href="totoga2.html">六六歌2 整合專區</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="jiwon.html">瘋子與天才</a>
|
||||
|
||||
+207
@@ -0,0 +1,207 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-TW">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>水晶男孩｜全站導覽</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
||||
<link rel="stylesheet" href="tablet.css">
|
||||
</head>
|
||||
|
||||
<body class="site-guide-page">
|
||||
<header class="map-archive-header">
|
||||
<div class="header-inner">
|
||||
<h1 class="main-title">全站導覽</h1>
|
||||
<div class="subtitle-wrap">
|
||||
<span class="sub-title">SITE MAP · 頁面索引</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></nav>
|
||||
|
||||
<canvas id="particles"></canvas>
|
||||
|
||||
<main class="content-container site-guide-main">
|
||||
<p class="site-guide-lead">
|
||||
以下為本專案目前所有 HTML 頁面：每張卡片含<strong>連結</strong>、瀏覽器分頁上的<strong>標題</strong>（<code><title></code>）、以及主要<strong>區塊／錨點</strong>，方便你開發或簡報時一鍵跳轉。
|
||||
<strong>此頁未放入全站導覽列</strong>，僅供你自行書籤或輸入網址（例如 <code>site-guide.html</code>）開啟。
|
||||
</p>
|
||||
|
||||
<section class="site-guide-group" aria-labelledby="sg-home">
|
||||
<h2 class="section-title" id="sg-home">首頁與入口</h2>
|
||||
<div class="site-guide-grid">
|
||||
<article class="site-guide-card">
|
||||
<h3><a href="index.html">index.html</a></h3>
|
||||
<p class="site-guide-meta">標題列：<cite>SECHSKIES - 水晶男孩傳奇介紹</cite></p>
|
||||
<p class="site-guide-note">主視覺與導覽列；內文以區塊錨點分段。</p>
|
||||
<h4>區塊錨點</h4>
|
||||
<ul>
|
||||
<li><a href="index.html#origin">#origin</a> — 淪陷瞬間（Hero，與導覽一致）</li>
|
||||
<li><a href="index.html#start">#start</a> — 好奇的開端</li>
|
||||
<li><a href="index.html#mission">#mission</a> — 成立的初衷</li>
|
||||
<li><a href="index.html#timeline">#timeline</a> — 跨時空軌跡</li>
|
||||
<li><a href="index.html#story">#story</a> — 傳奇的轉折</li>
|
||||
</ul>
|
||||
</article>
|
||||
|
||||
<article class="site-guide-card">
|
||||
<h3><a href="origin.html">origin.html</a></h3>
|
||||
<p class="site-guide-meta">標題列：<cite>重新導向…</cite></p>
|
||||
<p class="site-guide-note">Meta refresh → <code>index.html</code>；保留給舊書籤。</p>
|
||||
<h4>說明</h4>
|
||||
<ul>
|
||||
<li><a href="index.html#origin">index.html#origin</a> — 建議改連到首頁錨點</li>
|
||||
</ul>
|
||||
</article>
|
||||
|
||||
<article class="site-guide-card">
|
||||
<h3><a href="grok.html">grok.html</a></h3>
|
||||
<p class="site-guide-meta">標題列：<cite>水晶男孩 SECHSKIES | 永恆的六顆水晶</cite></p>
|
||||
<p class="site-guide-note">單頁多區塊版型（實驗／簡報用）。</p>
|
||||
<h4>區塊錨點</h4>
|
||||
<ul>
|
||||
<li><a href="grok.html#story">#story</a></li>
|
||||
<li><a href="grok.html#members">#members</a></li>
|
||||
<li><a href="grok.html#discography">#discography</a></li>
|
||||
<li><a href="grok.html#now">#now</a></li>
|
||||
</ul>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="site-guide-group" aria-labelledby="sg-ssg2">
|
||||
<h2 class="section-title" id="sg-ssg2">無限挑戰 · 六六歌 2</h2>
|
||||
<div class="site-guide-grid">
|
||||
<article class="site-guide-card">
|
||||
<h3><a href="totoga2.html">totoga2.html</a></h3>
|
||||
<p class="site-guide-meta">標題列：<cite>水晶男孩｜無限挑戰六六歌2 — 紀實電子書</cite>（與電子書頁同標題列）</p>
|
||||
<p class="site-guide-note">整合：影片／電子書／傳奇的轉折＋長卷。章節錨點與 <a href="chronicle.html">chronicle.html</a> 相同（<code>#ssg2</code> 等），網址較短。</p>
|
||||
<h4>長卷章節（錨點）</h4>
|
||||
<ul>
|
||||
<li><a href="totoga2.html#challenge">#challenge</a> — 無限挑戰</li>
|
||||
<li><a href="totoga2.html#ssg2">#ssg2</a> — 六六歌第二季</li>
|
||||
<li><a href="totoga2.html#sechskies-profile">#sechskies-profile</a> — 水晶男孩</li>
|
||||
<li><a href="totoga2.html#gather">#gather</a> — 召集</li>
|
||||
<li><a href="totoga2.html#negotiate">#negotiate</a> — 正式交涉</li>
|
||||
<li><a href="totoga2.html#variables">#variables</a> — 變數</li>
|
||||
<li><a href="totoga2.html#surprise">#surprise</a> — 驚喜</li>
|
||||
<li><a href="totoga2.html#final-stage">#final-stage</a> — 登場</li>
|
||||
</ul>
|
||||
</article>
|
||||
|
||||
<article class="site-guide-card">
|
||||
<h3><a href="ssg2-ebook.html">ssg2-ebook.html</a></h3>
|
||||
<p class="site-guide-meta">標題列：<cite>水晶男孩｜無限挑戰六六歌2 — 紀實電子書</cite></p>
|
||||
<p class="site-guide-note">FlipHTML5 跨頁電子書全螢幕嵌入。</p>
|
||||
<h4>結構</h4>
|
||||
<ul>
|
||||
<li>標題區 <code>map-archive-header</code></li>
|
||||
<li>主內容 <code>ebook-main</code> → <code>flip-ebook-shell</code></li>
|
||||
</ul>
|
||||
</article>
|
||||
|
||||
<article class="site-guide-card">
|
||||
<h3><a href="chronicle.html">chronicle.html</a></h3>
|
||||
<p class="site-guide-meta">標題列：<cite>水晶男孩｜傳奇紀實長卷</cite></p>
|
||||
<p class="site-guide-note">八章長文；<strong>網漫模式</strong>／<strong>分頁模式</strong>。</p>
|
||||
<h4>章節錨點</h4>
|
||||
<ul>
|
||||
<li><a href="chronicle.html#challenge">#challenge</a> — 無限挑戰</li>
|
||||
<li><a href="chronicle.html#ssg2">#ssg2</a> — 六六歌第二季</li>
|
||||
<li><a href="chronicle.html#sechskies-profile">#sechskies-profile</a></li>
|
||||
<li><a href="chronicle.html#gather">#gather</a></li>
|
||||
<li><a href="chronicle.html#negotiate">#negotiate</a></li>
|
||||
<li><a href="chronicle.html#variables">#variables</a></li>
|
||||
<li><a href="chronicle.html#surprise">#surprise</a></li>
|
||||
<li><a href="chronicle.html#final-stage">#final-stage</a></li>
|
||||
</ul>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="site-guide-group" aria-labelledby="sg-members">
|
||||
<h2 class="section-title" id="sg-members">成員與紀實</h2>
|
||||
<div class="site-guide-grid">
|
||||
<article class="site-guide-card">
|
||||
<h3><a href="jiwon.html">jiwon.html</a></h3>
|
||||
<p class="site-guide-meta">標題列：<cite>水晶男孩｜瘋子與天才</cite></p>
|
||||
<h4>區塊錨點</h4>
|
||||
<ul>
|
||||
<li><a href="jiwon.html#variety">#variety</a> — 瘋狂出演中</li>
|
||||
<li><a href="jiwon.html#stage">#stage</a> — 隊長的氣場</li>
|
||||
</ul>
|
||||
</article>
|
||||
|
||||
<article class="site-guide-card">
|
||||
<h3><a href="sunghoon.html">sunghoon.html</a></h3>
|
||||
<p class="site-guide-meta">標題列：<cite>水晶男孩｜消失的真相</cite></p>
|
||||
<h4>區塊錨點</h4>
|
||||
<ul>
|
||||
<li><a href="sunghoon.html#truth">#truth</a></li>
|
||||
<li><a href="sunghoon.html#voice">#voice</a></li>
|
||||
</ul>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="site-guide-group" aria-labelledby="sg-media">
|
||||
<h2 class="section-title" id="sg-media">現場 · 典藏 · 地圖 · 歌詞</h2>
|
||||
<div class="site-guide-grid">
|
||||
<article class="site-guide-card">
|
||||
<h3><a href="concert.html">concert.html</a></h3>
|
||||
<p class="site-guide-meta">標題列：<cite>SECHSKIES Concert Archive</cite></p>
|
||||
<h4>區塊錨點</h4>
|
||||
<ul>
|
||||
<li><a href="concert.html#stage-now">#stage-now</a> — 永恆的重逢</li>
|
||||
<li><a href="concert.html#stage-past">#stage-past</a> — 燦爛的最初</li>
|
||||
</ul>
|
||||
</article>
|
||||
|
||||
<article class="site-guide-card">
|
||||
<h3><a href="archive.html">archive.html</a></h3>
|
||||
<p class="site-guide-meta">標題列：<cite>水晶男孩｜黃色留聲機</cite></p>
|
||||
<h4>區塊錨點</h4>
|
||||
<ul>
|
||||
<li><a href="archive.html#new">#new</a> — 啟動新篇章</li>
|
||||
<li><a href="archive.html#classic">#classic</a> — 輝煌全盛期</li>
|
||||
</ul>
|
||||
</article>
|
||||
|
||||
<article class="site-guide-card">
|
||||
<h3><a href="map.html">map.html</a></h3>
|
||||
<p class="site-guide-meta">標題列：<cite>SECHSKIES 台灣行程地圖</cite></p>
|
||||
<h4>區塊錨點</h4>
|
||||
<ul>
|
||||
<li><a href="map.html#taipei">#taipei</a> — 台北聖地（主版面）</li>
|
||||
<li><a href="map.html#global">#global</a> — 海外遠征</li>
|
||||
</ul>
|
||||
</article>
|
||||
|
||||
<article class="site-guide-card">
|
||||
<h3><a href="lyrics.html">lyrics.html</a></h3>
|
||||
<p class="site-guide-meta">標題列：<cite>세 단어 (THREE WORDS) — SECHSKIES</cite></p>
|
||||
<p class="site-guide-note"><code><html lang="ko"></code>；歌詞＋YouTube 嵌入單頁。</p>
|
||||
<h4>結構</h4>
|
||||
<ul>
|
||||
<li><code>.lyrics-layout</code> — 主標＋表格雙欄</li>
|
||||
</ul>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<p>SECHSKIES Fanpage © 2026 - 黃色氣球永遠飄揚</p>
|
||||
<a href="https://jekkinoopy.github.io/Portfolio/" class="studio-link" target="_blank">
|
||||
Design by <strong>Jekkinoopy Studio</strong>
|
||||
</a>
|
||||
</footer>
|
||||
|
||||
<script src="particles.js"></script>
|
||||
<script src="portal-nav.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
+199
@@ -0,0 +1,199 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-TW">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>水晶男孩｜無限挑戰六六歌2 — 紀實電子書</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
||||
<link rel="stylesheet" href="tablet.css">
|
||||
</head>
|
||||
|
||||
<body class="ebook-ssg2-page totoga2-page">
|
||||
<header class="map-archive-header">
|
||||
<div class="header-inner">
|
||||
<h1 class="main-title">無限挑戰 · 六六歌2</h1>
|
||||
<div class="subtitle-wrap">
|
||||
<span class="sub-title">INFINITE CHALLENGE · SIX SONGS 2 — E-BOOK</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></nav>
|
||||
|
||||
<canvas id="particles"></canvas>
|
||||
|
||||
<div class="totoga2-hub-controls content-container" role="tablist" aria-label="六六歌2 內容模式">
|
||||
<button type="button" class="mode-btn totoga2-hub-btn active" data-totoga-hub="video">影片模式</button>
|
||||
<button type="button" class="mode-btn totoga2-hub-btn" data-totoga-hub="ebook">電子書模式</button>
|
||||
<button type="button" class="mode-btn totoga2-hub-btn" data-totoga-hub="reader">紀實長文（時間軸＋長卷）</button>
|
||||
</div>
|
||||
|
||||
<!-- 影片：上／中／下三集（Bilibili 嵌入；中／下可替換 bvid） -->
|
||||
<div class="totoga2-hub-panel content-container ebook-main" data-totoga-panel="video">
|
||||
<section class="ebook-intro section" aria-label="影片三集">
|
||||
<h2 class="section-title">節目影片</h2>
|
||||
<p class="ebook-intro-lead">
|
||||
以下為 Bilibili 嵌入播放器（16：9）。若無法播放，請至站內搜尋同一 BV 號；中集、下集請將 iframe 的 <code>bvid</code> 換成你的分集連結。
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<div class="bilivideo-stack">
|
||||
<section class="bilivideo-block" aria-labelledby="bilivideo-top">
|
||||
<h3 id="bilivideo-top">上集</h3>
|
||||
<div class="bilivideo-frame">
|
||||
<iframe src="https://player.bilibili.com/player.html?bvid=BV1SW411a7cZ&page=1&high_quality=1&danmaku=0"
|
||||
title="Bilibili 影片：上集（BV1SW411a7cZ）" allowfullscreen></iframe>
|
||||
</div>
|
||||
</section>
|
||||
<section class="bilivideo-block" aria-labelledby="bilivideo-mid">
|
||||
<h3 id="bilivideo-mid">中集</h3>
|
||||
<p class="bilivideo-placeholder-note">預設與上集同一支；請替換 <code>bvid</code> 為中集 BV。</p>
|
||||
<div class="bilivideo-frame">
|
||||
<iframe src="https://player.bilibili.com/player.html?bvid=BV1SW411a7cZ&page=1&high_quality=1&danmaku=0"
|
||||
title="Bilibili 影片：中集（請替換 BV）" allowfullscreen></iframe>
|
||||
</div>
|
||||
</section>
|
||||
<section class="bilivideo-block" aria-labelledby="bilivideo-bot">
|
||||
<h3 id="bilivideo-bot">下集</h3>
|
||||
<p class="bilivideo-placeholder-note">預設與上集同一支；請替換 <code>bvid</code> 為下集 BV。</p>
|
||||
<div class="bilivideo-frame">
|
||||
<iframe src="https://player.bilibili.com/player.html?bvid=BV1SW411a7cZ&page=1&high_quality=1&danmaku=0"
|
||||
title="Bilibili 影片：下集（請替換 BV）" allowfullscreen></iframe>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="totoga2-hub-panel content-container ebook-main" data-totoga-panel="ebook" hidden>
|
||||
<section class="ebook-intro section" aria-label="電子書說明">
|
||||
<h2 class="section-title">紀實電子書</h2>
|
||||
<p class="ebook-intro-lead">
|
||||
以下為《無限挑戰》六六歌2 相關跨頁電子書（FlipHTML5）。若載入較慢，請稍候或重新整理；全螢幕閱讀請使用閱讀器內建控制項。
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<div class="flip-ebook-shell">
|
||||
<div class="flip-ebook-aspect">
|
||||
<iframe src="https://online.fliphtml5.com/tjyxm/vqff/"
|
||||
title="2023_電子書_無限挑戰六六歌2_final跨頁" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="totoga2-hub-panel totoga2-reader-hub" data-totoga-panel="reader" hidden>
|
||||
<section class="story-archive totoga2-plot content-container" aria-labelledby="totoga2-plot-title">
|
||||
<h2 class="section-title" id="totoga2-plot-title">傳奇的轉折</h2>
|
||||
<div class="subtitle-wrap">
|
||||
<span class="sub-title">PLOT TWIST</span>
|
||||
</div>
|
||||
<p class="intro-text">
|
||||
與首頁相同的節點提要；點下方連結可跳到本頁「紀實長卷」對應章節。完整獨立長卷仍可在
|
||||
<a href="chronicle.html">傳奇紀實長卷</a> 閱讀。
|
||||
</p>
|
||||
|
||||
<div class="merged-storyline">
|
||||
<article id="totoga2-special" class="story-node" data-era="六六歌">
|
||||
<h3>六六歌實錄</h3>
|
||||
<p>把懸念、試探與哭點縫在同一條時間軸上；很多人第一次真正把「水晶男孩」打進搜尋框，就是從這種瘋狂的剪輯節奏開始。</p>
|
||||
<p><a href="#ssg2">對照本頁幕後敘事 · 六六歌第二季</a></p>
|
||||
</article>
|
||||
<article id="totoga2-negotiate-card" class="story-node" data-era="交涉">
|
||||
<h3>命運的交涉</h3>
|
||||
<p>KTV、游擊演唱會規則、與其說講道理不如說把真心擺上桌面——交涉的不是合約字面，而是還願不願意再一次肩並肩。</p>
|
||||
<p><a href="#negotiate">讀本頁 · 正式交涉</a></p>
|
||||
</article>
|
||||
<article id="totoga2-complete" class="story-node" data-era="歸位">
|
||||
<h3>拼圖的歸位</h3>
|
||||
<p>變數一個個被排除之後，驚喜接上登場段落；缺一角舞台的視覺，終於對齊觀眾席上堅守的那片黃。</p>
|
||||
<p><a href="#gather">從本頁「召集」段開始補這條線</a></p>
|
||||
</article>
|
||||
<article id="totoga2-past" class="story-node" data-era="最初">
|
||||
<h3>巔峰與雨天</h3>
|
||||
<p>急凍、告別、各自的跑道——並不是要你沉浸遺憾，而是讓你懂：後來每一次亮燈，為什麼會更值得尖叫。</p>
|
||||
<p><a href="#sechskies-profile">讀本頁脈絡起點 · 水晶男孩</a></p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="chronicle-controls content-container totoga2-chronicle-controls">
|
||||
<button type="button" class="mode-btn active" data-totoga-reader-mode="scroll">網漫模式（一路滑下去）</button>
|
||||
<button type="button" class="mode-btn" data-totoga-reader-mode="paged">分頁模式（上一頁 / 下一頁）</button>
|
||||
</div>
|
||||
|
||||
<main class="content-container chronicle-reader" id="totoga2-reader" data-mode="scroll">
|
||||
<article class="chronicle-chapter active" id="challenge" data-title="無限挑戰">
|
||||
<h2>04 無限挑戰</h2>
|
||||
<p>《無限挑戰》是韓國綜藝史上指標性的真人秀節目。「星期六星期六是歌手（六六歌）」企劃，成為水晶男孩 2016 回歸舞台的關鍵起點。</p>
|
||||
<p>第一季掀起 90 年代懷舊熱潮，雖然水晶男孩未能完整出演，卻留下「總有一天要六人完整回到舞台」的遺憾伏筆。</p>
|
||||
</article>
|
||||
|
||||
<article class="chronicle-chapter" id="ssg2" data-title="六六歌第二季">
|
||||
<h2>06 六六歌第二季</h2>
|
||||
<p>第二季改成「為單一團體打造完整回歸敘事」，保密層級更高，連主持群都縮小到劉在錫與 HAHA，避免消息提前走漏。</p>
|
||||
<p>從開場的復古裝扮、試探式線索到真正揭曉團體身份，節目節奏在搞笑與懸念間拉開這場 16 年重逢序章。</p>
|
||||
</article>
|
||||
|
||||
<article class="chronicle-chapter" id="sechskies-profile" data-title="水晶男孩">
|
||||
<h2>08 水晶男孩</h2>
|
||||
<p>1997 出道後迅速登頂，與同世代頂流並列，短短三年創下極高銷量與舞台紀錄，卻在 2000 無預警解散，留下集體創傷。</p>
|
||||
<p>16 年間六人從未以水晶男孩名義完整合體，這次企劃不只是回憶，而是回應當年未說完的離別。</p>
|
||||
</article>
|
||||
|
||||
<article class="chronicle-chapter" id="gather" data-title="召集">
|
||||
<h2>10 召集</h2>
|
||||
<p>製作組先與隊長殷志源交涉，再透過隱藏攝影機確認成員意願。大家都希望重組，卻同時知道最困難的拼圖是離開演藝圈多年的高志溶。</p>
|
||||
<p>這個階段的重點不是舞台，而是「願不願意再次站在一起」的心理門檻。</p>
|
||||
</article>
|
||||
|
||||
<article class="chronicle-chapter" id="negotiate" data-title="正式交涉">
|
||||
<h2>11 正式交涉</h2>
|
||||
<p>主持人與成員深度對話，回顧解散緣由、舞台記憶、KTV 挑戰與游擊演唱會規則。笑鬧之間，團魂逐漸浮現。</p>
|
||||
<p>同時，節目也把高志溶議題正式擺上檯面：如果不是完整體，這次回歸是否還成立？</p>
|
||||
</article>
|
||||
|
||||
<article class="chronicle-chapter" id="variables" data-title="變數">
|
||||
<h2>16 變數</h2>
|
||||
<p>排練期間接連出現傷病、手術需求與消息外流，原本理想的游擊演唱會計畫屢次被迫改寫，團隊陷入 B 計畫陰影。</p>
|
||||
<p>在體力與心理都被拉到極限的情況下，成員仍選擇撐住，只為把久違舞台交回給等待 16 年的小黃。</p>
|
||||
</article>
|
||||
|
||||
<article class="chronicle-chapter" id="surprise" data-title="驚喜">
|
||||
<h2>19 驚喜</h2>
|
||||
<p>當所有人幾乎接受「不完整」時，節目仍悄悄推進最後安排。高志溶與成員的情感張力在此段達到最高點。</p>
|
||||
<p>這份驚喜不是綜藝反轉，而是把六顆水晶的空位真正填回舞台。</p>
|
||||
</article>
|
||||
|
||||
<article class="chronicle-chapter" id="final-stage" data-title="登場">
|
||||
<h2>21 登場</h2>
|
||||
<p>眼罩揭開後，滿場黃海與哭聲同時湧現。從《請記得我》到安可，《離別曲》在那一晚變成了「重逢證詞」。</p>
|
||||
<p>2000 的缺憾，在 2016 終於補上。這一頁不是結束，而是團體與粉絲共同完成的回歸章節。</p>
|
||||
</article>
|
||||
</main>
|
||||
|
||||
<div class="chronicle-pager content-container" id="totoga2-pager" hidden>
|
||||
<button type="button" id="totoga2-prev" class="btn">上一頁</button>
|
||||
<span id="totoga2-chapter-indicator">1 / 8</span>
|
||||
<button type="button" id="totoga2-next" class="btn">下一頁</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="ebook-back-link content-container">
|
||||
<a href="index.html#story" class="btn">回到首頁 · 傳奇的轉折</a>
|
||||
<a href="ssg2-ebook.html" class="btn">僅開電子書全螢幕版</a>
|
||||
</p>
|
||||
|
||||
<footer>
|
||||
<p>SECHSKIES Fanpage © 2026 - 黃色氣球永遠飄揚</p>
|
||||
<a href="https://jekkinoopy.github.io/Portfolio/" class="studio-link" target="_blank">
|
||||
Design by <strong>Jekkinoopy Studio</strong>
|
||||
</a>
|
||||
</footer>
|
||||
|
||||
<script src="particles.js"></script>
|
||||
<script src="portal-nav.js"></script>
|
||||
<script src="totoga2.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
+88
@@ -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" });
|
||||
});
|
||||
}
|
||||
})();
|
||||
Reference in New Issue
Block a user