docs: 新增 color-tokens 規範文件
This commit is contained in:
+168
-168
@@ -1,169 +1,169 @@
|
||||
<!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="../assets/css/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="../assets/css/tablet.css">
|
||||
<link rel="stylesheet" href="split-nav.css">
|
||||
</head>
|
||||
|
||||
<body class="ebook-ssg2-page totoga2-page totoga2-ebook-copy-page">
|
||||
<header class="inner-page-header">
|
||||
<div class="header-inner site-header-inner">
|
||||
<h1 class="main-title">無限挑戰 · 六六歌2</h1>
|
||||
<div class="subtitle-wrap">
|
||||
<span class="sub-title">水晶男孩回來啦！</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></nav>
|
||||
|
||||
<canvas id="particles"></canvas>
|
||||
|
||||
<nav class="ebook-back-link content-container totoga2-split-crossnav" aria-label="六六歌2 閱讀入口">
|
||||
<a href="timeline.html" class="btn" title="時間軸與紀實八章長文單頁">時間軸</a>
|
||||
<a href="ebook.html" class="btn" aria-current="page" title="紀實電子書內容獨立成頁">電子書</a>
|
||||
<a href="readable.html" class="btn" title="單頁整合：影片／電子書／長文模式切換與八章錨點">圖文好讀版</a>
|
||||
<a href="video.html" class="btn" title="無限挑戰 · 六六歌2 嵌入影片單頁">影片</a>
|
||||
</nav>
|
||||
|
||||
<div class="content-container ebook-main">
|
||||
<section class="ebook-intro section" aria-label="電子書說明">
|
||||
<h2 class="section-title">紀實電子書</h2>
|
||||
<p class="ebook-intro-lead">
|
||||
四月那場重逢，不只是一集綜藝，而是塵封十六年的旋律，終於在笑聲與淚水裡再次被聽見。這本紀實電子書留住《無限挑戰》六六歌2
|
||||
的每一頁：有驚喜、有拉扯，也有那些當時說不出口的想念。。
|
||||
</p>
|
||||
<div class="ebook-intro-notes fa-before-lead fa-before-lead--balloon">
|
||||
<p class="ebook-intro-note">看看後面飄落的氣球，等等十秒，電子書就會出現囉。</p>
|
||||
<p class="ebook-intro-note">翻頁方式：點擊書頁左、右側，或拖曳頁角即可往前／往後翻。</p>
|
||||
</div>
|
||||
</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 class="flip-ebook-shell">
|
||||
<div id="book-container" class="flip-ebook-aspect flip-ebook-aspect--pageflip">
|
||||
<!-- PDF.js + PageFlip 會在此產生頁面 -->
|
||||
<div id="my-flipbook"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="ebook-back-link content-container">
|
||||
<a href="../index.html#story" class="btn">回到首頁 · 傳奇的轉折</a>
|
||||
</p>
|
||||
|
||||
<footer>
|
||||
<p>SECHSKIES Fanpage © 2026 - 黃色氣球永遠飄揚</p>
|
||||
<a href="https://jekkinoopy.github.io/Portfolio/" class="studio-link" target="_blank">
|
||||
Design by <span class="mark_b">Jekkinoopy Studio</span>
|
||||
</a>
|
||||
</footer>
|
||||
|
||||
<script src="../assets/js/particles.js"></script>
|
||||
<script src="../assets/js/portal-nav.js"></script>
|
||||
<!-- 1. 引入 PDF.js 核心庫 -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
|
||||
<!-- 2. 引入 PageFlip -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/page-flip/dist/js/page-flip.browser.js"></script>
|
||||
<script>
|
||||
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';
|
||||
|
||||
/** 專案內實際存在的 PDF（原 totoga2/ebook/totoga2_ebook.pdf 尚未建檔） */
|
||||
var EBOOK_PDF_URL = '../assets/images/totoga2/totoga2.pdf';
|
||||
|
||||
function showEbookError(message) {
|
||||
var box = document.getElementById('my-flipbook');
|
||||
if (!box) return;
|
||||
box.innerHTML = '<p class="ebook-pdf-error" role="alert">' + message + '</p>';
|
||||
}
|
||||
|
||||
async function initEbook(pdfUrl) {
|
||||
var container = document.getElementById('my-flipbook');
|
||||
if (!container) throw new Error('找不到 #my-flipbook');
|
||||
if (typeof pdfjsLib === 'undefined') throw new Error('PDF.js 未載入');
|
||||
if (typeof St === 'undefined' || !St.PageFlip) throw new Error('PageFlip（St.PageFlip）未載入');
|
||||
|
||||
var loadingTask = pdfjsLib.getDocument(pdfUrl);
|
||||
var pdf = await loadingTask.promise;
|
||||
|
||||
/* 第 1 頁為封面；內文比例以第 2 頁為準（與 PageFlip showCover 一致） */
|
||||
var sizePageIndex = pdf.numPages >= 2 ? 2 : 1;
|
||||
var sizePage = await pdf.getPage(sizePageIndex);
|
||||
var natural = sizePage.getViewport({ scale: 1 });
|
||||
var shell = document.querySelector('.flip-ebook-shell');
|
||||
var bookHost = document.getElementById('book-container');
|
||||
if (bookHost) {
|
||||
bookHost.style.width = '100%';
|
||||
bookHost.style.maxWidth = '100%';
|
||||
bookHost.style.marginLeft = '0';
|
||||
bookHost.style.marginRight = '0';
|
||||
}
|
||||
container.style.width = '100%';
|
||||
container.style.maxWidth = '100%';
|
||||
|
||||
var measureEl = bookHost || shell;
|
||||
var pageW = Math.max(320, Math.floor((measureEl && measureEl.clientWidth) || 0));
|
||||
var pageH = Math.floor(pageW * (natural.height / natural.width));
|
||||
var renderScale = (pageW / natural.width) * Math.min(window.devicePixelRatio || 1, 2);
|
||||
|
||||
for (var i = 1; i <= pdf.numPages; i++) {
|
||||
var page = await pdf.getPage(i);
|
||||
var viewport = page.getViewport({ scale: renderScale });
|
||||
|
||||
var canvas = document.createElement('canvas');
|
||||
var context = canvas.getContext('2d');
|
||||
canvas.height = viewport.height;
|
||||
canvas.width = viewport.width;
|
||||
|
||||
await page.render({ canvasContext: context, viewport: viewport }).promise;
|
||||
|
||||
var pageElement = document.createElement('div');
|
||||
pageElement.className = 'page';
|
||||
if (i === 1) {
|
||||
pageElement.setAttribute('data-density', 'hard');
|
||||
} else if (i === pdf.numPages) {
|
||||
pageElement.setAttribute('data-density', 'hard');
|
||||
}
|
||||
pageElement.appendChild(canvas);
|
||||
container.appendChild(pageElement);
|
||||
}
|
||||
|
||||
var pageFlip = new St.PageFlip(container, {
|
||||
width: pageW,
|
||||
height: pageH,
|
||||
/* stretch 在寬容器會固定走 landscape（總寬=2×半頁），跨頁 PDF 會被切成左空白+右半頁 */
|
||||
size: 'fixed',
|
||||
usePortrait: true,
|
||||
showCover: true,
|
||||
startPage: 0,
|
||||
autoSize: true,
|
||||
drawShadow: true,
|
||||
maxShadowOpacity: 0.4
|
||||
});
|
||||
pageFlip.loadFromHTML(document.querySelectorAll('#my-flipbook .page'));
|
||||
}
|
||||
|
||||
initEbook(EBOOK_PDF_URL).catch(function (err) {
|
||||
console.error(err);
|
||||
showEbookError(
|
||||
'電子書 PDF 無法載入或翻頁初始化失敗。若用本機直接開檔案（file://），請改由本機伺服器開啟；並確認路徑存在：<code>'
|
||||
+ EBOOK_PDF_URL + '</code>'
|
||||
);
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
<!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="../assets/css/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="../assets/css/tablet.css">
|
||||
<link rel="stylesheet" href="split-nav.css">
|
||||
</head>
|
||||
|
||||
<body class="ebook-ssg2-page totoga2-page totoga2-ebook-copy-page">
|
||||
<header class="inner-page-header">
|
||||
<div class="header-inner site-header-inner">
|
||||
<h1 class="main-title">無限挑戰 · 六六歌2</h1>
|
||||
<div class="subtitle-wrap">
|
||||
<span class="sub-title">水晶男孩回來啦！</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></nav>
|
||||
|
||||
<canvas id="particles"></canvas>
|
||||
|
||||
<nav class="ebook-back-link content-container totoga2-split-crossnav" aria-label="六六歌2 閱讀入口">
|
||||
<a href="timeline.html" class="btn" title="時間軸與紀實八章長文單頁">時間軸</a>
|
||||
<a href="ebook.html" class="btn" aria-current="page" title="紀實電子書內容獨立成頁">電子書</a>
|
||||
<a href="readable.html" class="btn" title="單頁整合：影片／電子書／長文模式切換與八章錨點">圖文好讀版</a>
|
||||
<a href="video.html" class="btn" title="無限挑戰 · 六六歌2 嵌入影片單頁">影片</a>
|
||||
</nav>
|
||||
|
||||
<div class="content-container ebook-main">
|
||||
<section class="ebook-intro section" aria-label="電子書說明">
|
||||
<h2 class="section-title">紀實電子書</h2>
|
||||
<p class="ebook-intro-lead">
|
||||
四月那場重逢，不只是一集綜藝，而是塵封十六年的旋律，終於在笑聲與淚水裡再次被聽見。這本紀實電子書留住《無限挑戰》六六歌2
|
||||
的每一頁：有驚喜、有拉扯，也有那些當時說不出口的想念。。
|
||||
</p>
|
||||
<div class="ebook-intro-notes fa-before-lead fa-before-lead--balloon">
|
||||
<p class="ebook-intro-note">看看後面飄落的氣球，等等十秒，電子書就會出現囉。</p>
|
||||
<p class="ebook-intro-note">翻頁方式：點擊書頁左、右側，或拖曳頁角即可往前／往後翻。</p>
|
||||
</div>
|
||||
</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 class="flip-ebook-shell">
|
||||
<div id="book-container" class="flip-ebook-aspect flip-ebook-aspect--pageflip">
|
||||
<!-- PDF.js + PageFlip 會在此產生頁面 -->
|
||||
<div id="my-flipbook"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="ebook-back-link content-container">
|
||||
<a href="../index.html#story" class="btn">回到首頁 · 傳奇的轉折</a>
|
||||
</p>
|
||||
|
||||
<footer>
|
||||
<p>SECHSKIES Fanpage © 2026 - 黃色氣球永遠飄揚</p>
|
||||
<a href="https://jekkinoopy.github.io/Portfolio/" class="studio-link" target="_blank">
|
||||
Design by <span class="mark_b">Jekkinoopy Studio</span>
|
||||
</a>
|
||||
</footer>
|
||||
|
||||
<script src="../assets/js/particles.js"></script>
|
||||
<script src="../assets/js/portal-nav.js"></script>
|
||||
<!-- 1. 引入 PDF.js 核心庫 -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
|
||||
<!-- 2. 引入 PageFlip -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/page-flip/dist/js/page-flip.browser.js"></script>
|
||||
<script>
|
||||
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';
|
||||
|
||||
/** 專案內實際存在的 PDF（原 totoga2/ebook/totoga2_ebook.pdf 尚未建檔） */
|
||||
var EBOOK_PDF_URL = '../assets/images/totoga2/totoga2.pdf';
|
||||
|
||||
function showEbookError(message) {
|
||||
var box = document.getElementById('my-flipbook');
|
||||
if (!box) return;
|
||||
box.innerHTML = '<p class="ebook-pdf-error" role="alert">' + message + '</p>';
|
||||
}
|
||||
|
||||
async function initEbook(pdfUrl) {
|
||||
var container = document.getElementById('my-flipbook');
|
||||
if (!container) throw new Error('找不到 #my-flipbook');
|
||||
if (typeof pdfjsLib === 'undefined') throw new Error('PDF.js 未載入');
|
||||
if (typeof St === 'undefined' || !St.PageFlip) throw new Error('PageFlip（St.PageFlip）未載入');
|
||||
|
||||
var loadingTask = pdfjsLib.getDocument(pdfUrl);
|
||||
var pdf = await loadingTask.promise;
|
||||
|
||||
/* 第 1 頁為封面；內文比例以第 2 頁為準（與 PageFlip showCover 一致） */
|
||||
var sizePageIndex = pdf.numPages >= 2 ? 2 : 1;
|
||||
var sizePage = await pdf.getPage(sizePageIndex);
|
||||
var natural = sizePage.getViewport({ scale: 1 });
|
||||
var shell = document.querySelector('.flip-ebook-shell');
|
||||
var bookHost = document.getElementById('book-container');
|
||||
if (bookHost) {
|
||||
bookHost.style.width = '100%';
|
||||
bookHost.style.maxWidth = '100%';
|
||||
bookHost.style.marginLeft = '0';
|
||||
bookHost.style.marginRight = '0';
|
||||
}
|
||||
container.style.width = '100%';
|
||||
container.style.maxWidth = '100%';
|
||||
|
||||
var measureEl = bookHost || shell;
|
||||
var pageW = Math.max(320, Math.floor((measureEl && measureEl.clientWidth) || 0));
|
||||
var pageH = Math.floor(pageW * (natural.height / natural.width));
|
||||
var renderScale = (pageW / natural.width) * Math.min(window.devicePixelRatio || 1, 2);
|
||||
|
||||
for (var i = 1; i <= pdf.numPages; i++) {
|
||||
var page = await pdf.getPage(i);
|
||||
var viewport = page.getViewport({ scale: renderScale });
|
||||
|
||||
var canvas = document.createElement('canvas');
|
||||
var context = canvas.getContext('2d');
|
||||
canvas.height = viewport.height;
|
||||
canvas.width = viewport.width;
|
||||
|
||||
await page.render({ canvasContext: context, viewport: viewport }).promise;
|
||||
|
||||
var pageElement = document.createElement('div');
|
||||
pageElement.className = 'page';
|
||||
if (i === 1) {
|
||||
pageElement.setAttribute('data-density', 'hard');
|
||||
} else if (i === pdf.numPages) {
|
||||
pageElement.setAttribute('data-density', 'hard');
|
||||
}
|
||||
pageElement.appendChild(canvas);
|
||||
container.appendChild(pageElement);
|
||||
}
|
||||
|
||||
var pageFlip = new St.PageFlip(container, {
|
||||
width: pageW,
|
||||
height: pageH,
|
||||
/* stretch 在寬容器會固定走 landscape（總寬=2×半頁），跨頁 PDF 會被切成左空白+右半頁 */
|
||||
size: 'fixed',
|
||||
usePortrait: true,
|
||||
showCover: true,
|
||||
startPage: 0,
|
||||
autoSize: true,
|
||||
drawShadow: true,
|
||||
maxShadowOpacity: 0.4
|
||||
});
|
||||
pageFlip.loadFromHTML(document.querySelectorAll('#my-flipbook .page'));
|
||||
}
|
||||
|
||||
initEbook(EBOOK_PDF_URL).catch(function (err) {
|
||||
console.error(err);
|
||||
showEbookError(
|
||||
'電子書 PDF 無法載入或翻頁初始化失敗。若用本機直接開檔案（file://），請改由本機伺服器開啟；並確認路徑存在：<code>'
|
||||
+ EBOOK_PDF_URL + '</code>'
|
||||
);
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -28,7 +28,7 @@
|
||||
box-sizing: border-box;
|
||||
position: static;
|
||||
z-index: auto;
|
||||
background: var(--surface);
|
||||
background: var(--color-surface);
|
||||
border: 1px solid rgba(255, 204, 0, 0.15);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 14px 34px rgba(0, 0, 0, 0.15);
|
||||
@@ -50,7 +50,7 @@
|
||||
body.ebook-ssg2-page.totoga2-page #totoga2-reader .container:has(> .container41):has(> .container42):has(> .container43):has(> .container44) {
|
||||
/* padding: 0.75rem; */
|
||||
gap: 0.75rem;
|
||||
/* background: var(--surface);
|
||||
/* background: var(--color-surface);
|
||||
border: 1px solid rgba(255, 204, 0, 0.15); */
|
||||
border-radius: 16px;
|
||||
/* box-shadow: 0 14px 34px rgba(0, 0, 0, 0.15); */
|
||||
@@ -407,7 +407,7 @@
|
||||
max-width: 42rem;
|
||||
margin: 0.5rem auto 0.875rem;
|
||||
padding-left: 0.75rem;
|
||||
border-left: 3px solid var(--primary);
|
||||
border-left: 3px solid var(--color-brand);
|
||||
color: #2a2a2a;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
@@ -419,7 +419,7 @@
|
||||
max-width: 42rem;
|
||||
margin: 0.5rem auto 0.875rem;
|
||||
padding-left: 0.75rem;
|
||||
border-left: 3px solid var(--primary);
|
||||
border-left: 3px solid var(--color-brand);
|
||||
color: #2a2a2a;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
@@ -762,8 +762,8 @@
|
||||
</div>
|
||||
<div class="container21">
|
||||
<section class="ebook-section"
|
||||
style="background-color: var(--primary); color: var(--black); height:100%;">
|
||||
<h3 style="color:var(--black); border-left-color:var(--black)">保密協議與解散緣由</h3>
|
||||
style="background-color: var(--color-brand); color: var(--color-bg-raised); height:100%;">
|
||||
<h3 style="color:var(--color-bg-raised); border-left-color:var(--color-bg-raised)">保密協議與解散緣由</h3>
|
||||
<p class="ebook-intro-lead">
|
||||
進而聊到解散情況，當時解散的原因是不滿公司的壓榨，原本想集體離開公司，卻被公司強制解散…當時鬧得很大，父母都到公司開會了...
|
||||
</p>
|
||||
@@ -900,8 +900,8 @@
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<section class="ebook-section" style="background-color: var(--black); color: #fff;">
|
||||
<h2 class="section-title" style="color: var(--primary); border-left-color: var(--primary);">
|
||||
<section class="ebook-section" style="background-color: var(--color-bg-raised); color: #fff;">
|
||||
<h2 class="section-title" style="color: var(--color-brand); border-left-color: var(--color-brand);">
|
||||
請脫下眼罩：累積16年的情感爆發</h2>
|
||||
<p class="ebook-intro-lead" style="color: #eee;">
|
||||
高志溶獨自先到達休息室等待，其他五位成員率先出場。主持人在成員上台前，和台下粉絲約定好安靜，等大家脫下眼罩才能發出聲音。成員們一進場時，台上台下一片寂寥與黑暗，戴著眼罩的成員們此刻非常緊張，就連平常看似無所畏懼的隊長殷志源都緊張到伸出手找金在德牽著。
|
||||
@@ -909,7 +909,7 @@
|
||||
<p class="ebook-intro-lead" style="color: #eee;">成員們一句時隔 16
|
||||
年的問候：「大家好，我們是水晶男孩！」台下粉絲已淚光閃爍！成勳問：「我們的小黃，來了很多嗎？」台下還是鴉雀無聲，讓成員們愈來愈沒信心，嗓音也逐漸變小...金在德表示雖然不知道現場來了多少人，即使只來了
|
||||
10 個人，他們也會開心地獻上表演...</p>
|
||||
<p class="ebook-intro-lead" style="color: var(--primary); font-weight: bold;">
|
||||
<p class="ebook-intro-lead" style="color: var(--color-brand); font-weight: bold;">
|
||||
成員們依序脫下眼罩，此時台下還是一片黑茫茫，只有零星的黃色燈光在閃爍著。最後張水院和李宰鎮同時脫下眼罩時，燈光一打，一望無際的黃色波浪伴隨著熱烈的歡呼聲，如山呼海嘯般傳來！
|
||||
</p>
|
||||
<p class="ebook-intro-lead" style="color: #eee;">全場小黃累積了 16
|
||||
@@ -958,7 +958,7 @@
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<section class="ebook-section" style="border: 2px solid var(--primary);">
|
||||
<section class="ebook-section" style="border: 2px solid var(--color-brand);">
|
||||
<h2 class="section-title">安可：世界上最感動的結局</h2>
|
||||
<p class="ebook-intro-lead">
|
||||
結束了最後的問候後，帶來了〈Couple〉做為安可曲。金在德興奮地跳著舞脫離了隊形，張水院轉頭發現，寵溺地笑著看他要走去哪裡。金在德走到一半回頭看成員，才發現只有自己離開舞台中心，害羞地笑著走回原位，相當可愛！
|
||||
@@ -966,7 +966,7 @@
|
||||
<p class="ebook-intro-lead">
|
||||
付出長達六個月心血打造的舞台，因為拿著黃氣球的粉絲才能聚在一起，水晶男孩回到他們最華麗的時期；小黃們也回到最熱情的時期！〈Couple〉的歌詞說：「現在，我不再是自己孤單一人，而是有你們在身邊」彷彿就在述說這一刻！
|
||||
</p>
|
||||
<p class="ebook-intro-lead" style="font-weight: bold; color: var(--dark-yellow);">
|
||||
<p class="ebook-intro-lead" style="font-weight: bold; color: var(--color-brand-dark);">
|
||||
六個人一起跳著舞，聽著他們的歌曲沉浸在幸福中，這是世界上最讓他們感動的結局！本特輯搞笑又感動，長久羈絆的情感令人動容，千萬不要錯過。</p>
|
||||
<p class="ebook-intro-lead"
|
||||
style="text-align: center; margin-top: 1.25rem; font-size: 1rem; letter-spacing: 0.12em;">
|
||||
|
||||
+534
-534
File diff suppressed because it is too large
Load Diff
+87
-87
@@ -1,87 +1,87 @@
|
||||
# 圖文好讀版 · 稿本對照表
|
||||
|
||||
站主自用：只列**有落差**的項目；四檔皆齊的不重複寫。路徑均相對 `totoga2/`。
|
||||
|
||||
---
|
||||
|
||||
## 1. 檔案總覽
|
||||
|
||||
| 檔案 | 行數（約） | 大小（約） | 定位 |
|
||||
|------|------------|------------|------|
|
||||
| **`readable.html`** | 781 | 52 KB | **正式版**（對外） |
|
||||
| **`readable copy 2.html`** | 964 | 68 KB | 版型同正式版 + **全章**（補稿首選） |
|
||||
| **`readable copy.html`** | 535 | 37 KB | 全章文字、`intro-text`（對句用） |
|
||||
| **`readable copy 3.html`** | 908 | 35 KB | HTML 僅開頭；**全文在 `</html>` 後註解** |
|
||||
|
||||
---
|
||||
|
||||
## 2. 版型差異（非全檔一致者）
|
||||
|
||||
| 項目 | readable | copy 2 | copy | copy 3 |
|
||||
|------|:--------:|:------:|:----:|:------:|
|
||||
| `ebook-main` + 頁首導語 | ✓ | ✓ | 部分 | ✗ |
|
||||
| `readable-col-*` 圖列 | ✓ | ✓ | 簡化 | ✗ |
|
||||
| `ebook-ssg2-page` 樣式 | ✓ | ✓ | ✗ | 部分 |
|
||||
| 八章錨點 `#ssg2` … `#final-stage` | ✗ | ✗ | ✗ | ✗ |
|
||||
| `totoga2.js` | ✗ | ✗ | ✗ | ✓（誤載） |
|
||||
| 檔尾 PDF 註解 | ✗ | ✗ | ✗ | ✓（約 600 行） |
|
||||
|
||||
---
|
||||
|
||||
## 3. 內文：正式版缺或與複本不同
|
||||
|
||||
**正式版目前寫到：**「嚴肅話題下的爆笑神反轉」止（約 `readable.html` 第 760 行前）。
|
||||
|
||||
| 區塊 | 正式版 | 複本／備註 |
|
||||
|------|--------|------------|
|
||||
| 傳奇男團 · 2000/5/18 解散、16 年未合體 | **缺** | copy 2 約 556–558 行 |
|
||||
| 圖文好讀版導語（copy 3 可見 HTML） | ✓ | copy 3：**僅註解**，頁面無 |
|
||||
| 冷凍美男－姜成勳 | **較長改寫** | copy 2／copy 較短 |
|
||||
| 李宰鎮細節（多 h3） | **最完整** | copy 2 有分 h3 但較短；copy 一段；copy 3 HTML 極短 |
|
||||
| 嚴肅話題・解散・父母去結算 | 獨立小標 + collage | copy 2 併入「保密協議與解散緣由」 |
|
||||
| **後半本**（召集 → KTV → 志溶 → 變數 → B 計劃現場 → 世界盃 → 眼罩 → 請記得我 → 安可） | **整段缺** | copy 2／copy 有；copy 2 約 716–940 行 |
|
||||
| 秘密召集（敘事順序） | 缺 | copy 2 寫在**李宰鎮之後**，合併宜前移 |
|
||||
| 選擇歌單 | **缺** | **僅** copy 3 註解 |
|
||||
|
||||
---
|
||||
|
||||
## 4. 八章錨點：正式版待補
|
||||
|
||||
| 錨點 | 主題 | 建議來源 |
|
||||
|------|------|----------|
|
||||
| `#sechskies-profile` | 補解散段 | copy 2 約 556–558 行 |
|
||||
| `#gather` | 召集 | copy 2 約 716–725 行 |
|
||||
| `#negotiate` | KTV、高志溶 | copy 2 約 765–778 行 |
|
||||
| `#variables` | 變數 | copy 2 約 788–810 行 |
|
||||
| `#surprise` | 驚喜 | copy 2 約 830–866 行 |
|
||||
| `#final-stage` | 登場 | copy 2 約 870–940 行 |
|
||||
| （無錨點） | 選擇歌單 | copy 3 註解 |
|
||||
|
||||
---
|
||||
|
||||
## 5. 補進 `readable.html`（摘要）
|
||||
|
||||
1. 不覆蓋正式版已有改寫（開場～李宰鎮～嚴肅話題）。
|
||||
2. 後半自 **copy 2 約 716 行**接至安可，改 `ebook-intro` 版型；**召集**順序前移。
|
||||
3. 傳奇男團併入 2000/5/18 解散段。
|
||||
4. 選擇歌單自 copy 3 註解改寫（建議 KTV 與志溶之間）。
|
||||
5. 併入前修 copy 2：「190 **萬**張」、約 618 行壞 `img`。
|
||||
|
||||
---
|
||||
|
||||
## 6. copy 2 勿原樣上線
|
||||
|
||||
| 位置（約） | 問題 |
|
||||
|------------|------|
|
||||
| 556 行 | 「190 張」→「190 萬張」 |
|
||||
| 618 行 | `<img src=alt="…">` 損壞 |
|
||||
| 716 行起 | 召集順序偏後 |
|
||||
| 947 行 | `<footer>` 在 `<main>` 內 |
|
||||
|
||||
---
|
||||
|
||||
*正式對外僅 `readable.html`。全檔皆有、無落差者不列。*
|
||||
|
||||
|
||||
|
||||
暫時先改副本2 之後在對照優化內文
|
||||
# 圖文好讀版 · 稿本對照表
|
||||
|
||||
站主自用：只列**有落差**的項目；四檔皆齊的不重複寫。路徑均相對 `totoga2/`。
|
||||
|
||||
---
|
||||
|
||||
## 1. 檔案總覽
|
||||
|
||||
| 檔案 | 行數（約） | 大小（約） | 定位 |
|
||||
|------|------------|------------|------|
|
||||
| **`readable.html`** | 781 | 52 KB | **正式版**（對外） |
|
||||
| **`readable copy 2.html`** | 964 | 68 KB | 版型同正式版 + **全章**（補稿首選） |
|
||||
| **`readable copy.html`** | 535 | 37 KB | 全章文字、`intro-text`（對句用） |
|
||||
| **`readable copy 3.html`** | 908 | 35 KB | HTML 僅開頭；**全文在 `</html>` 後註解** |
|
||||
|
||||
---
|
||||
|
||||
## 2. 版型差異（非全檔一致者）
|
||||
|
||||
| 項目 | readable | copy 2 | copy | copy 3 |
|
||||
|------|:--------:|:------:|:----:|:------:|
|
||||
| `ebook-main` + 頁首導語 | ✓ | ✓ | 部分 | ✗ |
|
||||
| `readable-col-*` 圖列 | ✓ | ✓ | 簡化 | ✗ |
|
||||
| `ebook-ssg2-page` 樣式 | ✓ | ✓ | ✗ | 部分 |
|
||||
| 八章錨點 `#ssg2` … `#final-stage` | ✗ | ✗ | ✗ | ✗ |
|
||||
| `totoga2.js` | ✗ | ✗ | ✗ | ✓（誤載） |
|
||||
| 檔尾 PDF 註解 | ✗ | ✗ | ✗ | ✓（約 600 行） |
|
||||
|
||||
---
|
||||
|
||||
## 3. 內文：正式版缺或與複本不同
|
||||
|
||||
**正式版目前寫到：**「嚴肅話題下的爆笑神反轉」止（約 `readable.html` 第 760 行前）。
|
||||
|
||||
| 區塊 | 正式版 | 複本／備註 |
|
||||
|------|--------|------------|
|
||||
| 傳奇男團 · 2000/5/18 解散、16 年未合體 | **缺** | copy 2 約 556–558 行 |
|
||||
| 圖文好讀版導語（copy 3 可見 HTML） | ✓ | copy 3：**僅註解**，頁面無 |
|
||||
| 冷凍美男－姜成勳 | **較長改寫** | copy 2／copy 較短 |
|
||||
| 李宰鎮細節（多 h3） | **最完整** | copy 2 有分 h3 但較短；copy 一段；copy 3 HTML 極短 |
|
||||
| 嚴肅話題・解散・父母去結算 | 獨立小標 + collage | copy 2 併入「保密協議與解散緣由」 |
|
||||
| **後半本**（召集 → KTV → 志溶 → 變數 → B 計劃現場 → 世界盃 → 眼罩 → 請記得我 → 安可） | **整段缺** | copy 2／copy 有；copy 2 約 716–940 行 |
|
||||
| 秘密召集（敘事順序） | 缺 | copy 2 寫在**李宰鎮之後**，合併宜前移 |
|
||||
| 選擇歌單 | **缺** | **僅** copy 3 註解 |
|
||||
|
||||
---
|
||||
|
||||
## 4. 八章錨點：正式版待補
|
||||
|
||||
| 錨點 | 主題 | 建議來源 |
|
||||
|------|------|----------|
|
||||
| `#sechskies-profile` | 補解散段 | copy 2 約 556–558 行 |
|
||||
| `#gather` | 召集 | copy 2 約 716–725 行 |
|
||||
| `#negotiate` | KTV、高志溶 | copy 2 約 765–778 行 |
|
||||
| `#variables` | 變數 | copy 2 約 788–810 行 |
|
||||
| `#surprise` | 驚喜 | copy 2 約 830–866 行 |
|
||||
| `#final-stage` | 登場 | copy 2 約 870–940 行 |
|
||||
| （無錨點） | 選擇歌單 | copy 3 註解 |
|
||||
|
||||
---
|
||||
|
||||
## 5. 補進 `readable.html`（摘要）
|
||||
|
||||
1. 不覆蓋正式版已有改寫（開場～李宰鎮～嚴肅話題）。
|
||||
2. 後半自 **copy 2 約 716 行**接至安可，改 `ebook-intro` 版型；**召集**順序前移。
|
||||
3. 傳奇男團併入 2000/5/18 解散段。
|
||||
4. 選擇歌單自 copy 3 註解改寫（建議 KTV 與志溶之間）。
|
||||
5. 併入前修 copy 2：「190 **萬**張」、約 618 行壞 `img`。
|
||||
|
||||
---
|
||||
|
||||
## 6. copy 2 勿原樣上線
|
||||
|
||||
| 位置（約） | 問題 |
|
||||
|------------|------|
|
||||
| 556 行 | 「190 張」→「190 萬張」 |
|
||||
| 618 行 | `<img src=alt="…">` 損壞 |
|
||||
| 716 行起 | 召集順序偏後 |
|
||||
| 947 行 | `<footer>` 在 `<main>` 內 |
|
||||
|
||||
---
|
||||
|
||||
*正式對外僅 `readable.html`。全檔皆有、無落差者不列。*
|
||||
|
||||
|
||||
|
||||
暫時先改副本2 之後在對照優化內文
|
||||
|
||||
+12
-12
@@ -28,7 +28,7 @@
|
||||
box-sizing: border-box;
|
||||
position: static;
|
||||
z-index: auto;
|
||||
background: var(--surface);
|
||||
background: var(--color-surface);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
|
||||
overflow: visible;
|
||||
@@ -51,7 +51,7 @@
|
||||
body.ebook-ssg2-page.totoga2-page #totoga2-reader .container:has(> .container41):has(> .container42):has(> .container43):has(> .container44):not(.overlap-style) {
|
||||
gap: 0.75rem;
|
||||
padding: 0.75rem;
|
||||
background: var(--surface);
|
||||
background: var(--color-surface);
|
||||
border: 1px solid rgba(255, 204, 0, 0.15);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 14px 34px rgba(0, 0, 0, 0.15);
|
||||
@@ -516,7 +516,7 @@
|
||||
font-size: 1.5rem;
|
||||
margin: 0 0 1rem 0;
|
||||
padding-bottom: 0.75rem;
|
||||
border-bottom: 3px solid var(--primary);
|
||||
border-bottom: 3px solid var(--color-brand);
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
@@ -530,7 +530,7 @@
|
||||
max-width: 100%;
|
||||
margin: 0.75rem 0 1rem 0;
|
||||
padding-left: 0.75rem;
|
||||
border-left: 4px solid var(--primary);
|
||||
border-left: 4px solid var(--color-brand);
|
||||
color: #2a2a2a;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
@@ -566,7 +566,7 @@
|
||||
padding: 1.25rem;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 1.5rem;
|
||||
/* border-left: 5px solid var(--primary); */
|
||||
/* border-left: 5px solid var(--color-brand); */
|
||||
}
|
||||
|
||||
/* 文字在上、圖在下（單圖／雙圖共用；雙圖同列等高） */
|
||||
@@ -1046,8 +1046,8 @@
|
||||
</div>
|
||||
<div class="container21">
|
||||
<section class="ebook-section"
|
||||
style="background-color: var(--primary); color: var(--black); height:100%;">
|
||||
<h3 style="color:var(--black); border-left-color:var(--black)">保密協議與解散緣由</h3>
|
||||
style="background-color: var(--color-brand); color: var(--color-bg-raised); height:100%;">
|
||||
<h3 style="color:var(--color-bg-raised); border-left-color:var(--color-bg-raised)">保密協議與解散緣由</h3>
|
||||
<p class="ebook-intro-lead">
|
||||
進而聊到解散情況，當時解散的原因是不滿公司的壓榨，原本想集體離開公司，卻被公司強制解散…當時鬧得很大，父母都到公司開會了...
|
||||
</p>
|
||||
@@ -1184,8 +1184,8 @@
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<section class="ebook-section" style="background-color: var(--black); color: #fff;">
|
||||
<h2 class="section-title" style="color: var(--primary); border-left-color: var(--primary);">
|
||||
<section class="ebook-section" style="background-color: var(--color-bg-raised); color: #fff;">
|
||||
<h2 class="section-title" style="color: var(--color-brand); border-left-color: var(--color-brand);">
|
||||
請脫下眼罩：累積16年的情感爆發</h2>
|
||||
<p class="ebook-intro-lead" style="color: #eee;">
|
||||
高志溶獨自先到達休息室等待，其他五位成員率先出場。主持人在成員上台前，和台下粉絲約定好安靜，等大家脫下眼罩才能發出聲音。成員們一進場時，台上台下一片寂寥與黑暗，戴著眼罩的成員們此刻非常緊張，就連平常看似無所畏懼的隊長殷志源都緊張到伸出手找金在德牽著。
|
||||
@@ -1193,7 +1193,7 @@
|
||||
<p class="ebook-intro-lead" style="color: #eee;">成員們一句時隔 16
|
||||
年的問候：「大家好，我們是水晶男孩！」台下粉絲已淚光閃爍！成勳問：「我們的小黃，來了很多嗎？」台下還是鴉雀無聲，讓成員們愈來愈沒信心，嗓音也逐漸變小...金在德表示雖然不知道現場來了多少人，即使只來了
|
||||
10 個人，他們也會開心地獻上表演...</p>
|
||||
<p class="ebook-intro-lead" style="color: var(--primary); font-weight: bold;">
|
||||
<p class="ebook-intro-lead" style="color: var(--color-brand); font-weight: bold;">
|
||||
成員們依序脫下眼罩，此時台下還是一片黑茫茫，只有零星的黃色燈光在閃爍著。最後張水院和李宰鎮同時脫下眼罩時，燈光一打，一望無際的黃色波浪伴隨著熱烈的歡呼聲，如山呼海嘯般傳來！
|
||||
</p>
|
||||
<p class="ebook-intro-lead" style="color: #eee;">全場小黃累積了 16
|
||||
@@ -1219,7 +1219,7 @@
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<section class="ebook-section" style="border: 2px solid var(--primary);">
|
||||
<section class="ebook-section" style="border: 2px solid var(--color-brand);">
|
||||
<h2 class="section-title">安可：世界上最感動的結局</h2>
|
||||
<p class="ebook-intro-lead">
|
||||
結束了最後的問候後，帶來了〈Couple〉做為安可曲。金在德興奮地跳著舞脫離了隊形，張水院轉頭發現，寵溺地笑著看他要走去哪裡。金在德走到一半回頭看成員，才發現只有自己離開舞台中心，害羞地笑著走回原位，相當可愛！
|
||||
@@ -1227,7 +1227,7 @@
|
||||
<p class="ebook-intro-lead">
|
||||
付出長達六個月心血打造的舞台，因為拿著黃氣球的粉絲才能聚在一起，水晶男孩回到他們最華麗的時期；小黃們也回到最熱情的時期！〈Couple〉的歌詞說：「現在，我不再是自己孤單一人，而是有你們在身邊」彷彿就在述說這一刻！
|
||||
</p>
|
||||
<p class="ebook-intro-lead" style="font-weight: bold; color: var(--dark-yellow);">
|
||||
<p class="ebook-intro-lead" style="font-weight: bold; color: var(--color-brand-dark);">
|
||||
六個人一起跳著舞，聽著他們的歌曲沉浸在幸福中，這是世界上最讓他們感動的結局！本特輯搞笑又感動，長久羈絆的情感令人動容，千萬不要錯過。</p>
|
||||
<p class="ebook-intro-lead"
|
||||
style="text-align: center; margin-top: 1.25rem; font-size: 1rem; letter-spacing: 0.12em;">
|
||||
|
||||
+828
-828
File diff suppressed because it is too large
Load Diff
+601
-601
File diff suppressed because it is too large
Load Diff
+14
-14
@@ -1,14 +1,14 @@
|
||||
/* 僅 extra 六六歌2 四入口單頁載入（見 site-guide 傳奇的轉折）；不寫入 assets/css/style.css */
|
||||
body.totoga2-page nav.totoga2-split-crossnav.ebook-back-link {
|
||||
margin: 0.75rem auto 1.25rem;
|
||||
padding: 0.35rem 14px;
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
box-sizing: border-box;
|
||||
background: transparent;
|
||||
background-color: transparent;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
/* 僅 extra 六六歌2 四入口單頁載入（見 site-guide 傳奇的轉折）；不寫入 assets/css/style.css */
|
||||
body.totoga2-page nav.totoga2-split-crossnav.ebook-back-link {
|
||||
margin: 0.75rem auto 1.25rem;
|
||||
padding: 0.35rem 14px;
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
box-sizing: border-box;
|
||||
background: transparent;
|
||||
background-color: transparent;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
+84
-84
@@ -1,85 +1,85 @@
|
||||
<!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="../assets/css/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="../assets/css/tablet.css">
|
||||
<link rel="stylesheet" href="split-nav.css">
|
||||
</head>
|
||||
|
||||
<body class="ebook-ssg2-page totoga2-page">
|
||||
<header class="inner-page-header">
|
||||
<div class="header-inner site-header-inner">
|
||||
<h1 class="main-title">無限挑戰 · 六六歌2</h1>
|
||||
<div class="subtitle-wrap">
|
||||
<span class="sub-title">水晶男孩回來啦！</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></nav>
|
||||
|
||||
<canvas id="particles"></canvas>
|
||||
|
||||
<nav class="ebook-back-link content-container totoga2-split-crossnav" aria-label="六六歌2 閱讀入口">
|
||||
<a href="timeline.html" class="btn" aria-current="page" title="時間軸與紀實八章長文單頁">時間軸</a>
|
||||
<a href="ebook.html" class="btn" title="紀實電子書內容獨立成頁">電子書</a>
|
||||
<a href="readable.html" class="btn" title="單頁整合：影片／電子書／長文模式切換與八章錨點">圖文好讀版</a>
|
||||
<a href="video.html" class="btn" title="無限挑戰 · 六六歌2 嵌入影片單頁">影片</a>
|
||||
</nav>
|
||||
|
||||
<div class="totoga2-reader-hub content-container ebook-main">
|
||||
<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">
|
||||
與首頁相同的節點提要；點下方連結可跳到本頁「紀實長文」對應章節（八章皆在本頁，無需另開檔案）。
|
||||
</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>
|
||||
|
||||
<p class="ebook-back-link content-container">
|
||||
<a href="../index.html#story" class="btn">回到首頁 · 傳奇的轉折</a>
|
||||
</p>
|
||||
|
||||
<footer>
|
||||
<p>SECHSKIES Fanpage © 2026 - 黃色氣球永遠飄揚</p>
|
||||
<a href="https://jekkinoopy.github.io/Portfolio/" class="studio-link" target="_blank">
|
||||
Design by <span class="mark_b">Jekkinoopy Studio</span>
|
||||
</a>
|
||||
</footer>
|
||||
|
||||
<script src="../assets/js/particles.js"></script>
|
||||
<script src="../assets/js/portal-nav.js"></script>
|
||||
<script src="../assets/js/totoga2.js"></script>
|
||||
</body>
|
||||
|
||||
<!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="../assets/css/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="../assets/css/tablet.css">
|
||||
<link rel="stylesheet" href="split-nav.css">
|
||||
</head>
|
||||
|
||||
<body class="ebook-ssg2-page totoga2-page">
|
||||
<header class="inner-page-header">
|
||||
<div class="header-inner site-header-inner">
|
||||
<h1 class="main-title">無限挑戰 · 六六歌2</h1>
|
||||
<div class="subtitle-wrap">
|
||||
<span class="sub-title">水晶男孩回來啦！</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></nav>
|
||||
|
||||
<canvas id="particles"></canvas>
|
||||
|
||||
<nav class="ebook-back-link content-container totoga2-split-crossnav" aria-label="六六歌2 閱讀入口">
|
||||
<a href="timeline.html" class="btn" aria-current="page" title="時間軸與紀實八章長文單頁">時間軸</a>
|
||||
<a href="ebook.html" class="btn" title="紀實電子書內容獨立成頁">電子書</a>
|
||||
<a href="readable.html" class="btn" title="單頁整合：影片／電子書／長文模式切換與八章錨點">圖文好讀版</a>
|
||||
<a href="video.html" class="btn" title="無限挑戰 · 六六歌2 嵌入影片單頁">影片</a>
|
||||
</nav>
|
||||
|
||||
<div class="totoga2-reader-hub content-container ebook-main">
|
||||
<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">
|
||||
與首頁相同的節點提要；點下方連結可跳到本頁「紀實長文」對應章節（八章皆在本頁，無需另開檔案）。
|
||||
</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>
|
||||
|
||||
<p class="ebook-back-link content-container">
|
||||
<a href="../index.html#story" class="btn">回到首頁 · 傳奇的轉折</a>
|
||||
</p>
|
||||
|
||||
<footer>
|
||||
<p>SECHSKIES Fanpage © 2026 - 黃色氣球永遠飄揚</p>
|
||||
<a href="https://jekkinoopy.github.io/Portfolio/" class="studio-link" target="_blank">
|
||||
Design by <span class="mark_b">Jekkinoopy Studio</span>
|
||||
</a>
|
||||
</footer>
|
||||
|
||||
<script src="../assets/js/particles.js"></script>
|
||||
<script src="../assets/js/portal-nav.js"></script>
|
||||
<script src="../assets/js/totoga2.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
+121
-121
@@ -1,121 +1,121 @@
|
||||
<!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="../assets/css/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="../assets/css/tablet.css">
|
||||
<link rel="stylesheet" href="split-nav.css">
|
||||
</head>
|
||||
|
||||
<body class="ebook-ssg2-page totoga2-page totoga2-video-copy-page">
|
||||
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></nav>
|
||||
|
||||
<canvas id="particles"></canvas>
|
||||
|
||||
<nav class="ebook-back-link content-container totoga2-split-crossnav" aria-label="六六歌2 閱讀入口">
|
||||
<a href="timeline.html" class="btn" title="時間軸與紀實八章長文單頁">時間軸</a>
|
||||
<a href="ebook.html" class="btn" title="紀實電子書內容獨立成頁">電子書</a>
|
||||
<a href="readable.html" class="btn" title="單頁整合：影片／電子書／長文模式切換與八章錨點">圖文好讀版</a>
|
||||
<a href="video.html" class="btn" aria-current="page" title="無限挑戰 · 六六歌2 嵌入影片單頁">影片</a>
|
||||
</nav>
|
||||
|
||||
<div class="content-container ebook-main">
|
||||
<section class="ebook-intro section" aria-labelledby="ebook-bilivideo-heading">
|
||||
<h2 class="section-title" id="ebook-bilivideo-heading">節目影片</h2>
|
||||
|
||||
<div id="bilivideo-tabs" class="bilivideo-tabs__shell">
|
||||
<!-- tablist 在 DOM 上須先於 iframe，否則 B 站播放器合成層易蓋住下方按鈕文字；畫面順序改由 CSS flex order 控制 -->
|
||||
<nav class="bilivideo-episode-nav" role="tablist" aria-label="節目影片集數">
|
||||
<button type="button" class="btn bilivideo-episode-nav__tab bilivideo-episode-nav__tab--active"
|
||||
role="tab" id="bilivideo-tab-1" aria-controls="bilivideo-panel-1"
|
||||
aria-selected="true">上集</button>
|
||||
<button type="button" class="btn bilivideo-episode-nav__tab" role="tab" id="bilivideo-tab-2"
|
||||
aria-controls="bilivideo-panel-2" aria-selected="false" tabindex="-1">中集</button>
|
||||
<button type="button" class="btn bilivideo-episode-nav__tab" role="tab" id="bilivideo-tab-3"
|
||||
aria-controls="bilivideo-panel-3" aria-selected="false" tabindex="-1">下集</button>
|
||||
</nav>
|
||||
<div class="bilivideo-tabs__panels">
|
||||
<div class="bilivideo-tabs__panel" role="tabpanel" id="bilivideo-panel-1"
|
||||
aria-labelledby="bilivideo-tab-1">
|
||||
<div class="bilivideo-frame">
|
||||
<iframe title="無限挑戰 六六歌2 上集"
|
||||
src="//player.bilibili.com/player.html?isOutside=true&aid=12288323&bvid=BV1Yx411B7TC&cid=20353565&p=1"
|
||||
scrolling="no" border="0" frameborder="no" framespacing="0"
|
||||
allowfullscreen="true"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bilivideo-tabs__panel" role="tabpanel" id="bilivideo-panel-2"
|
||||
aria-labelledby="bilivideo-tab-2" hidden>
|
||||
<div class="bilivideo-frame">
|
||||
<iframe title="無限挑戰 六六歌2 中集"
|
||||
data-src="//player.bilibili.com/player.html?isOutside=true&aid=12288323&bvid=BV1Yx411B7TC&cid=20353561&p=2"
|
||||
scrolling="no" border="0" frameborder="no" framespacing="0"
|
||||
allowfullscreen="true"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bilivideo-tabs__panel" role="tabpanel" id="bilivideo-panel-3"
|
||||
aria-labelledby="bilivideo-tab-3" hidden>
|
||||
<div class="bilivideo-frame">
|
||||
<iframe title="無限挑戰 六六歌2 下集"
|
||||
data-src="//player.bilibili.com/player.html?isOutside=true&aid=12288323&bvid=BV1Yx411B7TC&cid=20353562&p=3"
|
||||
scrolling="no" border="0" frameborder="no" framespacing="0"
|
||||
allowfullscreen="true"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<p class="ebook-back-link content-container">
|
||||
<a href="../index.html#story" class="btn">回到首頁 · 傳奇的轉折</a>
|
||||
</p>
|
||||
|
||||
<footer>
|
||||
<p>SECHSKIES Fanpage © 2026 - 黃色氣球永遠飄揚</p>
|
||||
<a href="https://jekkinoopy.github.io/Portfolio/" class="studio-link" target="_blank">
|
||||
Design by <span class="mark_b">Jekkinoopy Studio</span>
|
||||
</a>
|
||||
</footer>
|
||||
|
||||
<script src="../assets/js/particles.js"></script>
|
||||
<script src="../assets/js/portal-nav.js"></script>
|
||||
<script>
|
||||
(function () {
|
||||
var root = document.getElementById("bilivideo-tabs");
|
||||
if (!root) return;
|
||||
var tabs = Array.prototype.slice.call(root.querySelectorAll('[role="tab"]'));
|
||||
var panels = Array.prototype.slice.call(root.querySelectorAll('[role="tabpanel"]'));
|
||||
|
||||
function activate(index) {
|
||||
tabs.forEach(function (tab, i) {
|
||||
var on = i === index;
|
||||
tab.setAttribute("aria-selected", on ? "true" : "false");
|
||||
tab.tabIndex = on ? 0 : -1;
|
||||
if (on) tab.classList.add("bilivideo-episode-nav__tab--active");
|
||||
else tab.classList.remove("bilivideo-episode-nav__tab--active");
|
||||
panels[i].hidden = !on;
|
||||
if (on) {
|
||||
var iframe = panels[i].querySelector("iframe[data-src]");
|
||||
if (iframe && !iframe.getAttribute("src")) {
|
||||
iframe.setAttribute("src", iframe.getAttribute("data-src"));
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
tabs.forEach(function (tab, i) {
|
||||
tab.addEventListener("click", function () {
|
||||
activate(i);
|
||||
});
|
||||
});
|
||||
activate(0);
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
<!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="../assets/css/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="../assets/css/tablet.css">
|
||||
<link rel="stylesheet" href="split-nav.css">
|
||||
</head>
|
||||
|
||||
<body class="ebook-ssg2-page totoga2-page totoga2-video-copy-page">
|
||||
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></nav>
|
||||
|
||||
<canvas id="particles"></canvas>
|
||||
|
||||
<nav class="ebook-back-link content-container totoga2-split-crossnav" aria-label="六六歌2 閱讀入口">
|
||||
<a href="timeline.html" class="btn" title="時間軸與紀實八章長文單頁">時間軸</a>
|
||||
<a href="ebook.html" class="btn" title="紀實電子書內容獨立成頁">電子書</a>
|
||||
<a href="readable.html" class="btn" title="單頁整合：影片／電子書／長文模式切換與八章錨點">圖文好讀版</a>
|
||||
<a href="video.html" class="btn" aria-current="page" title="無限挑戰 · 六六歌2 嵌入影片單頁">影片</a>
|
||||
</nav>
|
||||
|
||||
<div class="content-container ebook-main">
|
||||
<section class="ebook-intro section" aria-labelledby="ebook-bilivideo-heading">
|
||||
<h2 class="section-title" id="ebook-bilivideo-heading">節目影片</h2>
|
||||
|
||||
<div id="bilivideo-tabs" class="bilivideo-tabs__shell">
|
||||
<!-- tablist 在 DOM 上須先於 iframe，否則 B 站播放器合成層易蓋住下方按鈕文字；畫面順序改由 CSS flex order 控制 -->
|
||||
<nav class="bilivideo-episode-nav" role="tablist" aria-label="節目影片集數">
|
||||
<button type="button" class="btn bilivideo-episode-nav__tab bilivideo-episode-nav__tab--active"
|
||||
role="tab" id="bilivideo-tab-1" aria-controls="bilivideo-panel-1"
|
||||
aria-selected="true">上集</button>
|
||||
<button type="button" class="btn bilivideo-episode-nav__tab" role="tab" id="bilivideo-tab-2"
|
||||
aria-controls="bilivideo-panel-2" aria-selected="false" tabindex="-1">中集</button>
|
||||
<button type="button" class="btn bilivideo-episode-nav__tab" role="tab" id="bilivideo-tab-3"
|
||||
aria-controls="bilivideo-panel-3" aria-selected="false" tabindex="-1">下集</button>
|
||||
</nav>
|
||||
<div class="bilivideo-tabs__panels">
|
||||
<div class="bilivideo-tabs__panel" role="tabpanel" id="bilivideo-panel-1"
|
||||
aria-labelledby="bilivideo-tab-1">
|
||||
<div class="bilivideo-frame">
|
||||
<iframe title="無限挑戰 六六歌2 上集"
|
||||
src="//player.bilibili.com/player.html?isOutside=true&aid=12288323&bvid=BV1Yx411B7TC&cid=20353565&p=1"
|
||||
scrolling="no" border="0" frameborder="no" framespacing="0"
|
||||
allowfullscreen="true"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bilivideo-tabs__panel" role="tabpanel" id="bilivideo-panel-2"
|
||||
aria-labelledby="bilivideo-tab-2" hidden>
|
||||
<div class="bilivideo-frame">
|
||||
<iframe title="無限挑戰 六六歌2 中集"
|
||||
data-src="//player.bilibili.com/player.html?isOutside=true&aid=12288323&bvid=BV1Yx411B7TC&cid=20353561&p=2"
|
||||
scrolling="no" border="0" frameborder="no" framespacing="0"
|
||||
allowfullscreen="true"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bilivideo-tabs__panel" role="tabpanel" id="bilivideo-panel-3"
|
||||
aria-labelledby="bilivideo-tab-3" hidden>
|
||||
<div class="bilivideo-frame">
|
||||
<iframe title="無限挑戰 六六歌2 下集"
|
||||
data-src="//player.bilibili.com/player.html?isOutside=true&aid=12288323&bvid=BV1Yx411B7TC&cid=20353562&p=3"
|
||||
scrolling="no" border="0" frameborder="no" framespacing="0"
|
||||
allowfullscreen="true"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<p class="ebook-back-link content-container">
|
||||
<a href="../index.html#story" class="btn">回到首頁 · 傳奇的轉折</a>
|
||||
</p>
|
||||
|
||||
<footer>
|
||||
<p>SECHSKIES Fanpage © 2026 - 黃色氣球永遠飄揚</p>
|
||||
<a href="https://jekkinoopy.github.io/Portfolio/" class="studio-link" target="_blank">
|
||||
Design by <span class="mark_b">Jekkinoopy Studio</span>
|
||||
</a>
|
||||
</footer>
|
||||
|
||||
<script src="../assets/js/particles.js"></script>
|
||||
<script src="../assets/js/portal-nav.js"></script>
|
||||
<script>
|
||||
(function () {
|
||||
var root = document.getElementById("bilivideo-tabs");
|
||||
if (!root) return;
|
||||
var tabs = Array.prototype.slice.call(root.querySelectorAll('[role="tab"]'));
|
||||
var panels = Array.prototype.slice.call(root.querySelectorAll('[role="tabpanel"]'));
|
||||
|
||||
function activate(index) {
|
||||
tabs.forEach(function (tab, i) {
|
||||
var on = i === index;
|
||||
tab.setAttribute("aria-selected", on ? "true" : "false");
|
||||
tab.tabIndex = on ? 0 : -1;
|
||||
if (on) tab.classList.add("bilivideo-episode-nav__tab--active");
|
||||
else tab.classList.remove("bilivideo-episode-nav__tab--active");
|
||||
panels[i].hidden = !on;
|
||||
if (on) {
|
||||
var iframe = panels[i].querySelector("iframe[data-src]");
|
||||
if (iframe && !iframe.getAttribute("src")) {
|
||||
iframe.setAttribute("src", iframe.getAttribute("data-src"));
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
tabs.forEach(function (tab, i) {
|
||||
tab.addEventListener("click", function () {
|
||||
activate(i);
|
||||
});
|
||||
});
|
||||
activate(0);
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user