feat 新增網路版介紹電子書
This commit is contained in:
Binary file not shown.
|
After Width: | Height: | Size: 795 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 482 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 721 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 591 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 631 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 808 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 816 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 852 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 849 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 833 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 803 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 750 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 743 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 887 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 830 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 293 KiB |
+21
-13
@@ -3,30 +3,26 @@
|
|||||||
const hubPanels = Array.from(document.querySelectorAll("[data-totoga-panel]"));
|
const hubPanels = Array.from(document.querySelectorAll("[data-totoga-panel]"));
|
||||||
|
|
||||||
function setHubPanel(name) {
|
function setHubPanel(name) {
|
||||||
|
if (!hubButtons.length || !hubPanels.length) return;
|
||||||
hubButtons.forEach((btn) => btn.classList.toggle("active", btn.dataset.totogaHub === name));
|
hubButtons.forEach((btn) => btn.classList.toggle("active", btn.dataset.totogaHub === name));
|
||||||
hubPanels.forEach((panel) => {
|
hubPanels.forEach((panel) => {
|
||||||
panel.hidden = panel.dataset.totogaPanel !== name;
|
panel.hidden = panel.dataset.totogaPanel !== name;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
hubButtons.forEach((btn) => {
|
|
||||||
btn.addEventListener("click", () => setHubPanel(btn.dataset.totogaHub));
|
|
||||||
});
|
|
||||||
|
|
||||||
const reader = document.getElementById("totoga2-reader");
|
const reader = document.getElementById("totoga2-reader");
|
||||||
if (!reader) return;
|
const chapters = reader ? Array.from(reader.querySelectorAll(".chronicle-chapter")) : [];
|
||||||
|
|
||||||
const chapters = Array.from(reader.querySelectorAll(".chronicle-chapter"));
|
|
||||||
const modeButtons = Array.from(document.querySelectorAll("[data-totoga-reader-mode]"));
|
const modeButtons = Array.from(document.querySelectorAll("[data-totoga-reader-mode]"));
|
||||||
const pager = document.getElementById("totoga2-pager");
|
const pager = document.getElementById("totoga2-pager");
|
||||||
const prevBtn = document.getElementById("totoga2-prev");
|
const prevBtn = document.getElementById("totoga2-prev");
|
||||||
const nextBtn = document.getElementById("totoga2-next");
|
const nextBtn = document.getElementById("totoga2-next");
|
||||||
const indicator = document.getElementById("totoga2-chapter-indicator");
|
const indicator = document.getElementById("totoga2-chapter-indicator");
|
||||||
if (!pager || !prevBtn || !nextBtn || !indicator) return;
|
const hasPager = Boolean(pager && prevBtn && nextBtn && indicator);
|
||||||
|
|
||||||
let currentIndex = 0;
|
let currentIndex = 0;
|
||||||
|
|
||||||
function updatePagedView() {
|
function updatePagedView() {
|
||||||
|
if (!hasPager) return;
|
||||||
chapters.forEach((chapter, index) => {
|
chapters.forEach((chapter, index) => {
|
||||||
chapter.style.display = index === currentIndex ? "" : "none";
|
chapter.style.display = index === currentIndex ? "" : "none";
|
||||||
chapter.classList.toggle("active", index === currentIndex);
|
chapter.classList.toggle("active", index === currentIndex);
|
||||||
@@ -37,13 +33,14 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
function setReaderMode(mode) {
|
function setReaderMode(mode) {
|
||||||
|
if (!reader) return;
|
||||||
reader.dataset.mode = mode;
|
reader.dataset.mode = mode;
|
||||||
modeButtons.forEach((btn) => btn.classList.toggle("active", btn.dataset.totogaReaderMode === mode));
|
modeButtons.forEach((btn) => btn.classList.toggle("active", btn.dataset.totogaReaderMode === mode));
|
||||||
if (mode === "paged") {
|
if (mode === "paged" && hasPager) {
|
||||||
pager.hidden = false;
|
pager.hidden = false;
|
||||||
updatePagedView();
|
updatePagedView();
|
||||||
} else {
|
} else {
|
||||||
pager.hidden = true;
|
if (pager) pager.hidden = true;
|
||||||
chapters.forEach((chapter) => {
|
chapters.forEach((chapter) => {
|
||||||
chapter.style.display = "";
|
chapter.style.display = "";
|
||||||
chapter.classList.remove("active");
|
chapter.classList.remove("active");
|
||||||
@@ -55,6 +52,7 @@
|
|||||||
button.addEventListener("click", () => setReaderMode(button.dataset.totogaReaderMode));
|
button.addEventListener("click", () => setReaderMode(button.dataset.totogaReaderMode));
|
||||||
});
|
});
|
||||||
|
|
||||||
|
if (hasPager) {
|
||||||
prevBtn.addEventListener("click", () => {
|
prevBtn.addEventListener("click", () => {
|
||||||
if (currentIndex > 0) {
|
if (currentIndex > 0) {
|
||||||
currentIndex -= 1;
|
currentIndex -= 1;
|
||||||
@@ -68,24 +66,34 @@
|
|||||||
updatePagedView();
|
updatePagedView();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (hubButtons.length > 0) {
|
||||||
const initialHub =
|
const initialHub =
|
||||||
hubButtons.find((b) => b.classList.contains("active"))?.dataset.totogaHub ||
|
hubButtons.find((b) => b.classList.contains("active"))?.dataset.totogaHub ||
|
||||||
hubButtons[0]?.dataset.totogaHub ||
|
hubButtons[0]?.dataset.totogaHub ||
|
||||||
"video";
|
"video";
|
||||||
setHubPanel(initialHub);
|
setHubPanel(initialHub);
|
||||||
|
} else {
|
||||||
|
hubPanels.forEach((panel) => {
|
||||||
|
panel.hidden = false;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (reader) {
|
||||||
setReaderMode("scroll");
|
setReaderMode("scroll");
|
||||||
|
}
|
||||||
|
|
||||||
function applyLocationHashNavigation() {
|
function applyLocationHashNavigation() {
|
||||||
const hash = (location.hash || "").slice(1);
|
const hash = (location.hash || "").slice(1);
|
||||||
if (hash === "ebook") {
|
if (hash === "ebook" && hubButtons.length > 0) {
|
||||||
setHubPanel("ebook");
|
setHubPanel("ebook");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
if (hash && document.getElementById(hash)) {
|
if (hash && document.getElementById(hash)) {
|
||||||
setHubPanel("reader");
|
if (hubButtons.length > 0) setHubPanel("reader");
|
||||||
setReaderMode("scroll");
|
setReaderMode("scroll");
|
||||||
pager.hidden = true;
|
if (pager) pager.hidden = true;
|
||||||
requestAnimationFrame(() => {
|
requestAnimationFrame(() => {
|
||||||
document.getElementById(hash)?.scrollIntoView({ behavior: "smooth", block: "start" });
|
document.getElementById(hash)?.scrollIntoView({ behavior: "smooth", block: "start" });
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -0,0 +1,46 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=<div class=" container">
|
||||||
|
<div class="container21">
|
||||||
|
<img src="../assets/images/totoga2/jpg/2023_電子書_無限挑戰六六歌2_final跨頁_頁面_01.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="container22">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="container">
|
||||||
|
<div class="container31">
|
||||||
|
img[s]
|
||||||
|
</div>
|
||||||
|
<div class="container32">
|
||||||
|
img[s]
|
||||||
|
</div>
|
||||||
|
<div class="container33">
|
||||||
|
img[s]
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="container">
|
||||||
|
<div class="container41">
|
||||||
|
img[s]
|
||||||
|
</div>
|
||||||
|
<div class="container42">
|
||||||
|
img[s]
|
||||||
|
</div>
|
||||||
|
<div class="container43">
|
||||||
|
img[s]
|
||||||
|
</div>
|
||||||
|
<div class="container44">
|
||||||
|
img[s]
|
||||||
|
</div>
|
||||||
|
</div>, initial-scale=1.0">
|
||||||
|
<title>Document</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,206 @@
|
|||||||
|
<!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">
|
||||||
|
</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="main-content-title">
|
||||||
|
<span class="highlight-text">水晶男孩回來啦！</span>
|
||||||
|
<span class="eng-title">SECHSKIES COM' BACK</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="subtitle-wrap">
|
||||||
|
<span class="sub-title">INFINITE CHALLENGE · SIX SONGS 2 — E-BOOK</span>
|
||||||
|
<span class="event-date">APRIL 14, 2016</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">
|
||||||
|
與首頁相同的節點提要；點下方連結可跳到本頁「紀實長文」對應章節（八章皆在本頁，無需另開檔案）。
|
||||||
|
</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="#ebook" 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>
|
||||||
+123
-107
@@ -8,12 +8,116 @@
|
|||||||
<link rel="stylesheet" href="../assets/css/style.css">
|
<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="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="../assets/css/tablet.css">
|
||||||
|
<style>
|
||||||
|
/* 預設列高（無圖示範用）；含圖列改由下方 :has(img) 覆寫為隨圖比例 */
|
||||||
|
.container {
|
||||||
|
width: 100%;
|
||||||
|
height: 25vh;
|
||||||
|
background-color: #ccc;
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 電子書跨頁圖：列高不可寫死 vh，內層也不可 height:100%，否則圖片無法依欄寬維持長寬比 */
|
||||||
|
body.totoga2-page .chronicle-reader .container:has(img) {
|
||||||
|
height: auto;
|
||||||
|
min-height: 0;
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.totoga2-page .chronicle-reader .container:has(img)::after {
|
||||||
|
content: "";
|
||||||
|
display: table;
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.totoga2-page .chronicle-reader .container:has(img)>[class^="container"] {
|
||||||
|
height: auto;
|
||||||
|
min-height: 0;
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container11 {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: lightpink;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container21 {
|
||||||
|
float: right;
|
||||||
|
width: 50%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: lightblue;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container22 {
|
||||||
|
float: left;
|
||||||
|
width: 50%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: lightyellow;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container31 {
|
||||||
|
float: left;
|
||||||
|
width: 33%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: darkblue;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container32 {
|
||||||
|
float: left;
|
||||||
|
width: 33%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: darkgreen;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container33 {
|
||||||
|
float: right;
|
||||||
|
width: 33%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: darkmagenta;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container41 {
|
||||||
|
float: left;
|
||||||
|
width: 25%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: lightblue;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container42 {
|
||||||
|
float: left;
|
||||||
|
width: 25%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: lightgreen;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container43 {
|
||||||
|
float: right;
|
||||||
|
width: 25%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: lightpink;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container44 {
|
||||||
|
float: right;
|
||||||
|
width: 25%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: lightyellow;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 圖在欄寬內鋪滿，高度由瀏覽器依 intrinsic ratio 計算（須配合上方 :has(img) 拿掉固定列高） */
|
||||||
|
body.totoga2-page .chronicle-reader img {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body class="ebook-ssg2-page totoga2-page">
|
<body class="ebook-ssg2-page totoga2-page">
|
||||||
<header class="map-archive-header">
|
<header class="map-archive-header">
|
||||||
<div class="header-inner">
|
<div class="header-inner">
|
||||||
<!-- 核心特輯名稱 -->
|
|
||||||
<h1 class="main-title">無限挑戰 · 六六歌2</h1>
|
<h1 class="main-title">無限挑戰 · 六六歌2</h1>
|
||||||
|
|
||||||
<div class="main-content-title">
|
<div class="main-content-title">
|
||||||
@@ -31,106 +135,26 @@
|
|||||||
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></nav>
|
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></nav>
|
||||||
|
|
||||||
<canvas id="particles"></canvas>
|
<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">
|
|
||||||
與首頁相同的節點提要；點下方連結可跳到本頁「紀實長文」對應章節（八章皆在本頁，無需另開檔案）。
|
|
||||||
</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">
|
<main class="content-container chronicle-reader" id="totoga2-reader" data-mode="scroll">
|
||||||
<article class="chronicle-chapter active" id="challenge" data-title="無限挑戰">
|
<article class="chronicle-chapter active" id="challenge" data-title="無限挑戰">
|
||||||
|
<!-- 序號一：第一列 container21（右欄 float:right）+ container22（左欄 float:left）→ 畫面左 01、右 02 -->
|
||||||
|
<div class="container">
|
||||||
|
<div class="container21">
|
||||||
|
<img src="../assets/images/totoga2/jpg/2023_電子書_無限挑戰六六歌2_final跨頁_頁面_02.jpg"
|
||||||
|
alt="六六歌2 電子書跨頁圖（序號一 · 右）">
|
||||||
|
</div>
|
||||||
|
<div class="container22">
|
||||||
|
<img src="../assets/images/totoga2/jpg/2023_電子書_無限挑戰六六歌2_final跨頁_頁面_01.jpg"
|
||||||
|
alt="六六歌2 電子書跨頁圖（序號一 · 左）">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 序號二：第二列單一全寬 container11 -->
|
||||||
|
<div class="container">
|
||||||
|
<div class="container11">
|
||||||
|
<img src="../assets/images/totoga2/jpg/2023_電子書_無限挑戰六六歌2_final跨頁_頁面_03.jpg"
|
||||||
|
alt="六六歌2 電子書跨頁圖（序號二 · 全寬）">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<h2>04 無限挑戰</h2>
|
<h2>04 無限挑戰</h2>
|
||||||
<p>《無限挑戰》是韓國綜藝史上指標性的真人秀節目。「星期六星期六是歌手（六六歌）」企劃，成為水晶男孩 2016 回歸舞台的關鍵起點。</p>
|
<p>《無限挑戰》是韓國綜藝史上指標性的真人秀節目。「星期六星期六是歌手（六六歌）」企劃，成為水晶男孩 2016 回歸舞台的關鍵起點。</p>
|
||||||
<p>第一季掀起 90 年代懷舊熱潮，雖然水晶男孩未能完整出演，卻留下「總有一天要六人完整回到舞台」的遺憾伏筆。</p>
|
<p>第一季掀起 90 年代懷舊熱潮，雖然水晶男孩未能完整出演，卻留下「總有一天要六人完整回到舞台」的遺憾伏筆。</p>
|
||||||
@@ -179,16 +203,8 @@
|
|||||||
</article>
|
</article>
|
||||||
</main>
|
</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">
|
<p class="ebook-back-link content-container">
|
||||||
<a href="../index.html#story" class="btn">回到首頁 · 傳奇的轉折</a>
|
<a href="../index.html#story" class="btn">回到首頁 · 傳奇的轉折</a>
|
||||||
<a href="#ebook" class="btn">同頁 · 電子書全螢幕</a>
|
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
|
|||||||
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 954 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 220 KiB |
+86
-7
@@ -50,6 +50,7 @@
|
|||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
|
<div class="njtw-td-fill">
|
||||||
<div class="member-card m1 parchment-card">
|
<div class="member-card m1 parchment-card">
|
||||||
<div class="parchment-inner">
|
<div class="parchment-inner">
|
||||||
|
|
||||||
@@ -94,8 +95,10 @@
|
|||||||
<p class="parchment-tags">#吃貨精靈 #低聲細語</p>
|
<p class="parchment-tags">#吃貨精靈 #低聲細語</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
|
<div class="njtw-td-fill">
|
||||||
<div class="member-card m2 parchment-card">
|
<div class="member-card m2 parchment-card">
|
||||||
<div class="parchment-inner">
|
<div class="parchment-inner">
|
||||||
<div class="parchment-headline">
|
<div class="parchment-headline">
|
||||||
@@ -139,8 +142,10 @@
|
|||||||
<p class="parchment-tags">#最強短腿 #瘋狂跑動</p>
|
<p class="parchment-tags">#最強短腿 #瘋狂跑動</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
|
<div class="njtw-td-fill">
|
||||||
<div class="member-card m3 parchment-card">
|
<div class="member-card m3 parchment-card">
|
||||||
<div class="parchment-inner">
|
<div class="parchment-inner">
|
||||||
<div class="parchment-headline">
|
<div class="parchment-headline">
|
||||||
@@ -188,21 +193,90 @@
|
|||||||
<p class="parchment-tags">#瘋子使者 #最帥鬼怪</p>
|
<p class="parchment-tags">#瘋子使者 #最帥鬼怪</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</td>
|
</td>
|
||||||
<td class="njtw-layout-slot shinmyohan OB">
|
<td class="njtw-layout-slot shinmyohan OB">
|
||||||
<h1>OB</h1>
|
<div class="njtw-td-fill">
|
||||||
<img src="1.png" alt="" class=""><img src="2.png" alt="" class=""><img src="3.png" alt=""
|
<div class="njtw-slot-stack njtw-team-panel ob-panel">
|
||||||
class="">
|
<div class="njtw-slot-visual">
|
||||||
|
<div class="njtw-team-title-band">
|
||||||
|
<h2 class="njtw-team-hero-title" id="njtw-ob-team-title">OB 隊：老練的瘋子們</h2>
|
||||||
|
</div>
|
||||||
|
<div class="njtw-slot-faces">
|
||||||
|
<img src="1.png" alt="" />
|
||||||
|
<img src="2.png" alt="" />
|
||||||
|
<img src="3.png" alt="" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="team-info">
|
||||||
|
<p>看他們玩遊戲不是在看技術，是在看如何「鑽漏洞」和「互相背叛」。他們不用說話，光是一個眼神就能知道對方在想什麼（通常是壞主意）。</p>
|
||||||
|
<p><strong>圈粉亮點：</strong>鎬童的食量、壽根的即興才藝、志源那種「初丁」卻天才的直覺。</p>
|
||||||
|
<div class="parchment-stats">
|
||||||
|
<div class="parchment-stat-row">
|
||||||
|
<span class="parchment-stat-label">老練度</span>
|
||||||
|
<div class="parchment-stat-balls" aria-label="5">
|
||||||
|
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||||
|
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||||
|
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||||
|
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||||
|
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="parchment-stat-row">
|
||||||
|
<span class="parchment-stat-label">體力值</span>
|
||||||
|
<div class="parchment-stat-balls" aria-label="1">
|
||||||
|
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="njtw-team-catchphrase">口頭禪：喔嗚！吃吧！</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td class="njtw-layout-slot shinmyohan YB">
|
<td class="njtw-layout-slot shinmyohan YB">
|
||||||
<h1>YB</h1>
|
<div class="njtw-td-fill">
|
||||||
<img src="4.png" alt="" class=""><img src="5.png" alt="" class=""><img src="6.png" alt=""
|
<div class="njtw-slot-stack njtw-team-panel yb-panel">
|
||||||
class="Shinmyohan">
|
<div class="njtw-slot-visual">
|
||||||
</td>
|
<div class="njtw-team-title-band">
|
||||||
|
<h2 class="njtw-team-hero-title" id="njtw-yb-team-title">YB 隊：新瘋子隊</h2>
|
||||||
|
</div>
|
||||||
|
<div class="njtw-slot-faces">
|
||||||
|
<img src="4.png" alt="" />
|
||||||
|
<img src="5.png" alt="" />
|
||||||
|
<img src="6.png" alt="" class="Shinmyohan" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="team-info">
|
||||||
|
<p>一開始以為是來幫哥哥們打雜的，結果卻是一個比一個還瘋的「瘋子新秀」。他們擁有體力優勢，卻常常在簡單的常識題中全軍覆沒。</p>
|
||||||
|
<p><strong>圈粉亮點：</strong>安宰賢的紙片人運動神經、宋旻浩的藝術靈魂與神手指、P.O 的超大聲反應。</p>
|
||||||
|
<div class="parchment-stats">
|
||||||
|
<div class="parchment-stat-row">
|
||||||
|
<span class="parchment-stat-label">老練度</span>
|
||||||
|
<div class="parchment-stat-balls" aria-label="1">
|
||||||
|
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="parchment-stat-row">
|
||||||
|
<span class="parchment-stat-label">體力值</span>
|
||||||
|
<div class="parchment-stat-balls" aria-label="5">
|
||||||
|
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||||
|
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||||
|
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||||
|
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||||
|
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="njtw-team-catchphrase">口頭禪：哥！對不起！</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
|
<div class="njtw-td-fill">
|
||||||
<div class="member-card m4 parchment-card">
|
<div class="member-card m4 parchment-card">
|
||||||
<div class="parchment-inner">
|
<div class="parchment-inner">
|
||||||
<div class="parchment-headline">
|
<div class="parchment-headline">
|
||||||
@@ -244,8 +318,10 @@
|
|||||||
<p class="parchment-tags">#美男殭屍 #運動白痴</p>
|
<p class="parchment-tags">#美男殭屍 #運動白痴</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
|
<div class="njtw-td-fill">
|
||||||
<div class="member-card m5 parchment-card">
|
<div class="member-card m5 parchment-card">
|
||||||
<div class="parchment-inner">
|
<div class="parchment-inner">
|
||||||
<div class="parchment-headline">
|
<div class="parchment-headline">
|
||||||
@@ -291,8 +367,10 @@
|
|||||||
<p class="parchment-tags">#長髮宋 #綜藝神降臨</p>
|
<p class="parchment-tags">#長髮宋 #綜藝神降臨</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
|
<div class="njtw-td-fill">
|
||||||
<div class="member-card m6 parchment-card">
|
<div class="member-card m6 parchment-card">
|
||||||
<div class="parchment-inner">
|
<div class="parchment-inner">
|
||||||
<div class="parchment-headline">
|
<div class="parchment-headline">
|
||||||
@@ -337,6 +415,7 @@
|
|||||||
<p class="parchment-tags">#新弟子 #德古拉</p>
|
<p class="parchment-tags">#新弟子 #德古拉</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
|
|||||||
+222
-19
@@ -19,7 +19,8 @@ body.njtw5-page {
|
|||||||
/* 視窗 ≤ --njtw-member-zoom-max-px 起套用 zoom；除數略大於該值，寬度剛好等於斷點時 zoom 仍 < 1，避免龍珠壓字 */
|
/* 視窗 ≤ --njtw-member-zoom-max-px 起套用 zoom；除數略大於該值，寬度剛好等於斷點時 zoom 仍 < 1，避免龍珠壓字 */
|
||||||
--njtw-member-zoom-max-px: 1556;
|
--njtw-member-zoom-max-px: 1556;
|
||||||
--njtw-member-zoom-divisor-px: 1588;
|
--njtw-member-zoom-divisor-px: 1588;
|
||||||
|
/* OB/YB 隊伍列小頭貼（與成員卡 .member-image 不同：那是 div 背景裁切，尺度大很多） */
|
||||||
|
--njtw-slot-face-img-size: clamp(52px, min(13vw, 12vmin), 104px);
|
||||||
background:
|
background:
|
||||||
radial-gradient(ellipse 85% 55% at 50% -8%, rgba(255, 220, 170, 0.35) 0%, transparent 52%),
|
radial-gradient(ellipse 85% 55% at 50% -8%, rgba(255, 220, 170, 0.35) 0%, transparent 52%),
|
||||||
radial-gradient(ellipse 70% 45% at 100% 20%, rgba(255, 200, 160, 0.12) 0%, transparent 45%),
|
radial-gradient(ellipse 70% 45% at 100% 20%, rgba(255, 200, 160, 0.12) 0%, transparent 45%),
|
||||||
@@ -135,6 +136,7 @@ body.njtw5-page .njtw-member-table-wrap {
|
|||||||
}
|
}
|
||||||
|
|
||||||
body.njtw5-page .njtw-member-table {
|
body.njtw5-page .njtw-member-table {
|
||||||
|
--njtw-member-td-pad: clamp(4px, 0.6vw, 8px);
|
||||||
table-layout: fixed;
|
table-layout: fixed;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
@@ -148,9 +150,16 @@ body.njtw5-page .njtw-member-table {
|
|||||||
overflow: visible;
|
overflow: visible;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 列高＝該列最高欄；勿對 td 設 display:flex（會破壞 table-cell，整列儲存格會直向堆疊）。
|
||||||
|
* tbody tr height:1px 為表格常用技巧，讓同列 td 可算出一致高度；卡片放在 td 內 .njtw-td-fill 再 flex 撐滿。 */
|
||||||
|
body.njtw5-page .njtw-member-table tbody tr {
|
||||||
|
height: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
body.njtw5-page .njtw-member-table td {
|
body.njtw5-page .njtw-member-table td {
|
||||||
width: 25%;
|
width: 25%;
|
||||||
padding: clamp(4px, 0.6vw, 8px);
|
height: inherit;
|
||||||
|
padding: var(--njtw-member-td-pad);
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
border: 0;
|
border: 0;
|
||||||
@@ -160,23 +169,201 @@ body.njtw5-page .njtw-member-table td {
|
|||||||
color: inherit;
|
color: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
body.njtw5-page .njtw-member-table .member-card.parchment-card {
|
body.njtw5-page .njtw-member-table td > .njtw-td-fill {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: stretch;
|
||||||
|
min-height: 100%;
|
||||||
|
height: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.njtw5-page .njtw-member-table td > .njtw-td-fill > .member-card.parchment-card,
|
||||||
|
body.njtw5-page .njtw-member-table td > .njtw-td-fill > .njtw-team-panel {
|
||||||
|
flex: 1 1 auto;
|
||||||
|
min-height: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
body.njtw5-page .njtw-member-table .njtw-layout-slot {
|
/* 與成員卡同列時撐滿儲存格高度：內層直向 flex，標籤列貼底 */
|
||||||
white-space: nowrap;
|
body.njtw5-page .njtw-member-table .member-card.parchment-card {
|
||||||
vertical-align: middle;
|
display: flex;
|
||||||
text-align: center;
|
flex-direction: column;
|
||||||
font-weight: 800;
|
|
||||||
font-size: clamp(1.35rem, 3.5vw, 1.85rem);
|
|
||||||
letter-spacing: 0.12em;
|
|
||||||
color: var(--njtw-ink);
|
|
||||||
opacity: 0.75;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
body.njtw5-page .njtw-member-table .member-card.parchment-card .parchment-inner {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.njtw5-page .njtw-member-table .parchment-card .parchment-tags {
|
||||||
|
margin-top: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 表格內 OB／YB：深色「反色」羊皮紙＋龍珠數值（與角色淺色卡對照） */
|
||||||
|
body.njtw5-page .njtw-member-table .njtw-layout-slot.shinmyohan {
|
||||||
|
white-space: normal;
|
||||||
|
text-align: left;
|
||||||
|
font-weight: inherit;
|
||||||
|
font-size: inherit;
|
||||||
|
letter-spacing: normal;
|
||||||
|
opacity: 1;
|
||||||
|
color: #f5e8d8;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.njtw5-page .njtw-member-table .njtw-team-panel {
|
||||||
|
/* 內距與成員 .parchment-inner 對齊；字重與 .parchment-byline 同為 700 */
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 1.55;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: clamp(12px, 2.4vw, 18px) clamp(10px, 2vw, 14px);
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 2px solid rgba(255, 200, 140, 0.28);
|
||||||
|
background:
|
||||||
|
radial-gradient(ellipse 120% 80% at 50% 0%, rgba(255, 200, 150, 0.12) 0%, transparent 55%),
|
||||||
|
linear-gradient(165deg, #3d2a22 0%, #2a1c18 42%, #1a1410 100%);
|
||||||
|
box-shadow:
|
||||||
|
inset 0 1px 0 rgba(255, 230, 200, 0.1),
|
||||||
|
inset 0 -12px 28px rgba(0, 0, 0, 0.18),
|
||||||
|
0 3px 0 rgba(0, 0, 0, 0.28),
|
||||||
|
0 10px 22px rgba(24, 12, 8, 0.35);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.njtw5-page .njtw-member-table .njtw-team-panel.ob-panel {
|
||||||
|
border-top: 3px solid rgba(232, 136, 74, 0.65);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.njtw5-page .njtw-member-table .njtw-team-panel.yb-panel {
|
||||||
|
border-top: 3px solid rgba(130, 190, 220, 0.55);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.njtw5-page .njtw-member-table .njtw-slot-stack {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex: 1;
|
||||||
|
min-height: 0;
|
||||||
|
gap: clamp(8px, 1.5vw, 12px);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.njtw5-page .njtw-member-table .njtw-slot-visual {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: clamp(12px, 2.2vw, 18px);
|
||||||
|
padding-bottom: clamp(10px, 1.8vw, 14px);
|
||||||
|
border-bottom: 1px dashed rgba(255, 200, 160, 0.22);
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 隊名專用區塊：對應成員卡 .parchment-headline 的呼吸空間，勿與臉圖擠在同一塊 */
|
||||||
|
body.njtw5-page .njtw-member-table .njtw-team-title-band {
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
padding: clamp(14px, 2.5vw, 22px) clamp(12px, 2.2vw, 20px);
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 1px solid rgba(255, 200, 160, 0.26);
|
||||||
|
background:
|
||||||
|
radial-gradient(ellipse 110% 100% at 50% 0%, rgba(255, 210, 170, 0.16) 0%, transparent 55%),
|
||||||
|
linear-gradient(165deg, rgba(55, 38, 30, 0.95) 0%, rgba(34, 24, 20, 0.72) 100%);
|
||||||
|
box-shadow:
|
||||||
|
inset 0 1px 0 rgba(255, 230, 200, 0.12),
|
||||||
|
inset 0 -10px 24px rgba(0, 0, 0, 0.12);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 原「OB／YB」單字大標的字級，改套在完整隊名上 */
|
||||||
|
body.njtw5-page .njtw-member-table .njtw-team-hero-title {
|
||||||
|
margin: 0;
|
||||||
|
max-width: 100%;
|
||||||
|
font-size: clamp(1.15rem, 2.6vw, 1.55rem);
|
||||||
|
font-weight: 900;
|
||||||
|
letter-spacing: 0.06em;
|
||||||
|
line-height: 1.25;
|
||||||
|
text-align: center;
|
||||||
|
background: linear-gradient(180deg, #ffd8a8 0%, #f0a060 45%, #d97840 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
background-clip: text;
|
||||||
|
color: transparent;
|
||||||
|
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
|
||||||
|
}
|
||||||
|
|
||||||
|
body.njtw5-page .njtw-member-table .njtw-slot-faces {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 6px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.njtw5-page .njtw-member-table td.OB .njtw-slot-faces {
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.njtw5-page .njtw-member-table td.YB .njtw-slot-faces {
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 勿用欄寬百分比：窄 td 時 28% 會變成極小圖；尺寸見 --njtw-slot-face-img-size（仍遠小於成員卡 .member-image 背景區） */
|
||||||
|
body.njtw5-page .njtw-member-table .njtw-slot-faces img {
|
||||||
|
float: none;
|
||||||
|
width: var(--njtw-slot-face-img-size);
|
||||||
|
max-width: var(--njtw-slot-face-img-size);
|
||||||
|
height: auto;
|
||||||
|
border-radius: 6px;
|
||||||
|
object-fit: cover;
|
||||||
|
flex-shrink: 0;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.njtw5-page .njtw-member-table td.shinmyohan .team-info {
|
||||||
|
flex: 1;
|
||||||
|
min-height: 0;
|
||||||
|
overflow-y: auto;
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
font-size: inherit;
|
||||||
|
font-weight: inherit;
|
||||||
|
line-height: inherit;
|
||||||
|
color: rgba(250, 236, 220, 0.92);
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.njtw5-page .njtw-member-table td.shinmyohan .team-info .parchment-stats {
|
||||||
|
margin-top: clamp(10px, 1.8vw, 14px);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.njtw5-page .njtw-member-table td.shinmyohan .team-info p {
|
||||||
|
margin: 0 0 clamp(10px, 1.8vw, 15px);
|
||||||
|
font-size: inherit;
|
||||||
|
font-weight: inherit;
|
||||||
|
line-height: 1.65;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.njtw5-page .njtw-member-table td.shinmyohan .team-info p:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.njtw5-page .njtw-member-table td.shinmyohan .team-info strong {
|
||||||
|
color: #ffd4a8;
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.njtw5-page .njtw-member-table td.shinmyohan .njtw-team-catchphrase {
|
||||||
|
margin: clamp(10px, 1.8vw, 14px) 0 0;
|
||||||
|
padding-top: clamp(10px, 1.8vw, 14px);
|
||||||
|
border-top: 1px dashed rgba(255, 200, 160, 0.22);
|
||||||
|
font-weight: 700;
|
||||||
|
color: rgba(255, 236, 210, 0.95);
|
||||||
|
line-height: 1.55;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* OB/YB 龍珠列：與成員卡共用 .parchment-stats / .parchment-stat-row 結構，樣式見下方合併規則與深色覆寫 */
|
||||||
|
|
||||||
body.njtw5-page .container .section-title,
|
body.njtw5-page .container .section-title,
|
||||||
body.njtw5-page .video-container .video-title {
|
body.njtw5-page .video-container .video-title {
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
@@ -410,7 +597,8 @@ body.njtw5-page .parchment-card .member-image {
|
|||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
body.njtw5-page .parchment-card .parchment-stats {
|
body.njtw5-page .parchment-card .parchment-stats,
|
||||||
|
body.njtw5-page .njtw-member-table .njtw-team-panel .parchment-stats {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0 clamp(4px, 1vw, 8px);
|
padding: 0 clamp(4px, 1vw, 8px);
|
||||||
@@ -420,7 +608,8 @@ body.njtw5-page .parchment-card .parchment-stats {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* 龍珠：單行不換行；球徑只看 .parchment-stats 的 font-size + em，全卡一致 */
|
/* 龍珠：單行不換行；球徑只看 .parchment-stats 的 font-size + em，全卡一致 */
|
||||||
body.njtw5-page .parchment-card .parchment-stat-row {
|
body.njtw5-page .parchment-card .parchment-stat-row,
|
||||||
|
body.njtw5-page .njtw-member-table .njtw-team-panel .parchment-stat-row {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: auto minmax(0, 1fr);
|
grid-template-columns: auto minmax(0, 1fr);
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -428,11 +617,13 @@ body.njtw5-page .parchment-card .parchment-stat-row {
|
|||||||
margin-bottom: clamp(8px, 1.6vw, 12px);
|
margin-bottom: clamp(8px, 1.6vw, 12px);
|
||||||
}
|
}
|
||||||
|
|
||||||
body.njtw5-page .parchment-card .parchment-stat-row:last-of-type {
|
body.njtw5-page .parchment-card .parchment-stat-row:last-of-type,
|
||||||
|
body.njtw5-page .njtw-member-table .njtw-team-panel .parchment-stat-row:last-of-type {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
body.njtw5-page .parchment-card .parchment-stat-label {
|
body.njtw5-page .parchment-card .parchment-stat-label,
|
||||||
|
body.njtw5-page .njtw-member-table .njtw-team-panel .parchment-stat-label {
|
||||||
font-size: clamp(0.88rem, 2.1vw, 1rem);
|
font-size: clamp(0.88rem, 2.1vw, 1rem);
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
color: #7a4040;
|
color: #7a4040;
|
||||||
@@ -441,7 +632,8 @@ body.njtw5-page .parchment-card .parchment-stat-label {
|
|||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
body.njtw5-page .parchment-card .parchment-stat-balls {
|
body.njtw5-page .parchment-card .parchment-stat-balls,
|
||||||
|
body.njtw5-page .njtw-member-table .njtw-team-panel .parchment-stat-balls {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: nowrap;
|
flex-wrap: nowrap;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
@@ -453,7 +645,8 @@ body.njtw5-page .parchment-card .parchment-stat-balls {
|
|||||||
padding-bottom: 2px;
|
padding-bottom: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
body.njtw5-page .parchment-card .parchment-stat-balls img {
|
body.njtw5-page .parchment-card .parchment-stat-balls img,
|
||||||
|
body.njtw5-page .njtw-member-table .njtw-team-panel .parchment-stat-balls img {
|
||||||
display: block;
|
display: block;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
width: 2.15em;
|
width: 2.15em;
|
||||||
@@ -465,6 +658,16 @@ body.njtw5-page .parchment-card .parchment-stat-balls img {
|
|||||||
filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
|
filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 深色隊伍卡：龍珠列標籤改淺色（覆寫上一段 #7a4040） */
|
||||||
|
body.njtw5-page .njtw-member-table .njtw-team-panel .parchment-stat-label {
|
||||||
|
color: rgba(255, 214, 190, 0.96);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.njtw5-page .njtw-member-table .njtw-team-panel .parchment-stat-balls img {
|
||||||
|
float: none;
|
||||||
|
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
|
||||||
|
}
|
||||||
|
|
||||||
body.njtw5-page .parchment-card .parchment-tags {
|
body.njtw5-page .parchment-card .parchment-tags {
|
||||||
margin: clamp(12px, 2vw, 16px) 0 0;
|
margin: clamp(12px, 2vw, 16px) 0 0;
|
||||||
padding-top: clamp(10px, 1.8vw, 14px);
|
padding-top: clamp(10px, 1.8vw, 14px);
|
||||||
@@ -522,7 +725,7 @@ body.njtw5-page .video-container .video-embed {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.shinmyohan img {
|
.shinmyohan img {
|
||||||
width: 33%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user