jekkinoopy/sechskies
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix 六六歌模式規劃

Browse Source
This commit is contained in:
jekkinoopy
2026-05-15 02:47:26 +08:00
parent 0e64e5d571
commit 2d1497c045
20 changed files with 263 additions and 179 deletions
Download Patch File Download Diff File Expand all files Collapse all files
extra/member.html
-155
View File
@@ -1,155 +0,0 @@
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>水晶男孩｜六顆水晶 · 黑白分流</title>
<link rel="stylesheet" href="../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="member-crystal-page">
<header class="map-archive-header">
<div class="header-inner">
<h1 class="main-title">六顆水晶</h1>
<div class="subtitle-wrap">
<span class="sub-title">BLACK KIES · WHITE KIES</span>
</div>
</div>
</header>
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></nav>
<canvas id="particles"></canvas>
<main class="content-container member-crystal-main" id="crystal-board">
<p class="member-crystal-lead">
團名源自德語「六顆水晶」：六位成員依聲線與舞台角色分為<strong>黑水晶</strong>（Rap／舞蹈）與<strong>白水晶</strong>（主唱），並排成經典的黑白分流印象。
</p>
<!-- 2×4 交錯：上排左三黑水晶、右一介紹；下排左一介紹、右三白水晶 -->
<div class="member-crystal-board" role="region" aria-label="黑水晶與白水晶成員配置">
<div class="member-crystal-cell member-crystal-cell--poster" data-area="b1">
<article class="member-poster member-poster--black" aria-labelledby="poster-ejw">
<div class="member-poster__wanted">BLACK</div>
<div class="member-poster__sheet">
<div class="member-poster__photo">
<img src="../assets/images/Eun Ji Won.jpeg" alt="殷志源肖像" width="280" height="340" loading="lazy">
</div>
<p class="member-poster__role">Leader · Rap · Dance</p>
<h2 class="member-poster__name" id="poster-ejw">殷志源</h2>
<p class="member-poster__name-en">EUN JI WON</p>
<p class="member-poster__stamp">BLACK KIES</p>
</div>
</article>
</div>
<div class="member-crystal-cell member-crystal-cell--poster" data-area="b2">
<article class="member-poster member-poster--black" aria-labelledby="poster-ljj">
<div class="member-poster__wanted">BLACK</div>
<div class="member-poster__sheet">
<div class="member-poster__photo">
<img src="../assets/images/member/1595330620293.jpg" alt="李宰鎮肖像" width="280" height="340" loading="lazy">
</div>
<p class="member-poster__role">Rap · Dance</p>
<h2 class="member-poster__name" id="poster-ljj">李宰鎮</h2>
<p class="member-poster__name-en">LEE JAE JIN</p>
<p class="member-poster__stamp">BLACK KIES</p>
</div>
</article>
</div>
<div class="member-crystal-cell member-crystal-cell--poster" data-area="b3">
<article class="member-poster member-poster--black" aria-labelledby="poster-kjd">
<div class="member-poster__wanted">BLACK</div>
<div class="member-poster__sheet">
<div class="member-poster__photo">
<img src="../assets/images/member/4c0e013b341e85622979475bc230719b.jpg" alt="金在德肖像" width="280" height="340" loading="lazy">
</div>
<p class="member-poster__role">Rap · Dance</p>
<h2 class="member-poster__name" id="poster-kjd">金在德</h2>
<p class="member-poster__name-en">KIM JAE DUC</p>
<p class="member-poster__stamp">BLACK KIES</p>
</div>
</article>
</div>
<div class="member-crystal-cell member-crystal-cell--intro member-crystal-cell--intro-black" data-area="intro-black">
<div class="member-crystal-intro member-crystal-intro--black">
<h2 class="member-crystal-intro__title">黑水晶</h2>
<p class="member-crystal-intro__en">Black Kies</p>
<p>殷志源、李宰鎮、金在德：偏重節奏與舞台張力的路線，Rap 與舞蹈撐起現場骨架，也是團體在舞曲與嘻哈語彙上最容易被第一眼認出的「深色稜線」。</p>
<p>視覺上常以俐落、酷感與強烈節拍感與白水晶區隔；在編曲結構裡，常負責推進段落與製造記憶點的「引擎室」。</p>
</div>
</div>
<div class="member-crystal-cell member-crystal-cell--intro member-crystal-cell--intro-white" data-area="intro-white">
<div class="member-crystal-intro member-crystal-intro--white">
<h2 class="member-crystal-intro__title">白水晶</h2>
<p class="member-crystal-intro__en">White Kies</p>
<p>姜成勳、高志溶、張水院：以主唱與和聲線條為核心，負責旋律的延展與情緒堆疊；許多主打裡讓人一聽就忘不掉的副歌與高音色彩，多半與這條「亮色聲帶」有關。</p>
<p>與黑水晶並列時，剛好形成「節奏骨架 × 旋律羽翼」的經典分工想像，也是團名裡「水晶」雙色對照最常見的說法來源。</p>
</div>
</div>
<div class="member-crystal-cell member-crystal-cell--poster" data-area="w1">
<article class="member-poster member-poster--white" aria-labelledby="poster-ksh">
<div class="member-poster__wanted">WHITE</div>
<div class="member-poster__sheet">
<div class="member-poster__photo">
<img src="../assets/images/member/92599-502183.jpg" alt="姜成勳肖像" width="280" height="340" loading="lazy">
</div>
<p class="member-poster__role">Main Vocal</p>
<h2 class="member-poster__name" id="poster-ksh">姜成勳</h2>
<p class="member-poster__name-en">KANG SUNG HOON</p>
<p class="member-poster__stamp">WHITE KIES</p>
</div>
</article>
</div>
<div class="member-crystal-cell member-crystal-cell--poster" data-area="w2">
<article class="member-poster member-poster--white" aria-labelledby="poster-kjy">
<div class="member-poster__wanted">WHITE</div>
<div class="member-poster__sheet">
<div class="member-poster__photo">
<img src="../assets/images/member/noona7273___Bt7EZHRAGgs___.jpg" alt="高志溶肖像" width="280" height="340" loading="lazy">
</div>
<p class="member-poster__role">Vocal</p>
<h2 class="member-poster__name" id="poster-kjy">高志溶</h2>
<p class="member-poster__name-en">KO JI YONG</p>
<p class="member-poster__stamp">WHITE KIES</p>
</div>
</article>
</div>
<div class="member-crystal-cell member-crystal-cell--poster" data-area="w3">
<article class="member-poster member-poster--white" aria-labelledby="poster-jsw">
<div class="member-poster__wanted">WHITE</div>
<div class="member-poster__sheet">
<div class="member-poster__photo">
<img src="../assets/images/member/seven7lai_1___BuRBxcPAIsP___.jpg" alt="張水院肖像" width="280" height="340" loading="lazy">
</div>
<p class="member-poster__role">Vocal</p>
<h2 class="member-poster__name" id="poster-jsw">張水院</h2>
<p class="member-poster__name-en">JANG SU WON</p>
<p class="member-poster__stamp">WHITE KIES</p>
</div>
</article>
</div>
</div>
</main>
<footer>
<p>SECHSKIES Fanpage &copy; 2026 — 六顆水晶 · 黑白分流</p>
<a href="https://jekkinoopy.github.io/Portfolio/" class="studio-link" target="_blank" rel="noopener noreferrer">
Design by <span class="mark_b">Jekkinoopy Studio</span>
</a>
</footer>
<script src="../assets/js/portal-nav.js"></script>
<script src="../assets/js/particles.js"></script>
</body>
</html>
extra/minister.html
-131
View File
@@ -1,131 +0,0 @@
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>水晶男孩推廣部｜視覺進化論</title>
<link rel="stylesheet" href="../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="chronicle-page minister-page">
<header class="map-archive-header">
<div class="header-inner">
<h1 class="main-title">視覺進化論</h1>
<div class="subtitle-wrap">
<span class="sub-title">FROM CURIOSITY TO FULL-STACK</span>
</div>
</div>
</header>
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></nav>
<canvas id="particles"></canvas>
<main class="content-container variety-page-main chronicle-reader minister-main">
<p class="minister-hero-lead">
關於我：<span class="mark_b">從「好奇」到「全端」的進化之路</span>
</p>
<section id="intro" class="variety-block">
<h2 class="section-title">跨越時空的開端</h2>
<p class="intro-text">
這段旅程始於 2016 年 4 月，透過《無限挑戰》的回歸企劃，讓原本不認識這組傳奇團體的我，因一時好奇點開節目。即便錯過了 2000 年巔峰解散的時代，我依然被那份真誠且專業的魅力所震撼。</p>
<p class="slogan-quote slogan-quote--awakening"><span class="slogan-quote__inner">對我而言，這不只是追星的開始，更是自我覺醒的起點。</span></p>
</section>
<section id="slant" class="variety-block">
<h2 class="section-title">為了熱愛而進化的斜槓精神</h2>
<p class="intro-text">
我始於「水晶廢人」的自嘲，卻在熱愛中長成了各個領域的策劃者：
</p>
<ul class="minister-skill-list">
<li><span class="minister-hashtag">#水晶推廣部</span>身為品牌設計師，我堅持「不看醜東西」的原則，親自操刀所有視覺，將這份能量轉化為專業策劃。</li>
<li><span class="minister-hashtag">#水晶訓練營</span>為了聽懂歐巴的每一句話，我開始學韓文、考韓檢、健身、跳舞，證明追星是自我提升最強大的動力。</li>
<li><span class="minister-hashtag">#全端開發者</span>這是我當下最重要的挑戰，將設計專業與程式技術結合，搭建一個專屬於這份熱愛的數位平台。</li>
</ul>
</section>
<section id="journey" class="minister-journey story-archive" aria-labelledby="journey-title">
<h2 class="section-title" id="journey-title">Journey：成長時間軸</h2>
<div class="subtitle-wrap">
<span class="sub-title">GROWTH TIMELINE</span>
</div>
<div class="merged-storyline">
<article id="journey-2016" class="story-node" data-era="2016">
<h3>從「欣賞」到「實踐」的元年</h3>
<p class="minister-month">07 月｜手作初試</p>
<p>開始學習勾針，為金在德製作第一個鴨鴨置物籃，這是從旁觀者轉為實踐者的第一步。</p>
<figure class="minister-photo">
<img src="../assets/images/minister/image_3c1739.jpg" alt="手作鴨鴨置物籃" width="1040" height="780" loading="lazy">
</figure>
<p class="minister-month">08 月｜螢幕後的參與</p>
<p>以「水晶廢人字幕組」粉絲身分，用手繪應援板與勾針作品參與應援影片籌備。</p>
<figure class="minister-photo">
<img src="../assets/images/minister/image_3c13d7.jpg" alt="手繪應援板與勾針作品" width="1040" height="780" loading="lazy">
</figure>
<p class="minister-month">09 月｜孤注一擲的現場</p>
<p>在經濟窘迫、甚至需要借錢籌措旅費的情況下，飛往首爾參加首場演唱會。在那裡，我握著導師設計的台灣小黃手幅，第一次感受到設計與才華帶來的震撼。</p>
<figure class="minister-photo">
<img src="../assets/images/minister/image_3bb254.jpg" alt="台灣小黃手幅" width="1040" height="780" loading="lazy">
</figure>
<p class="minister-month">12 月｜溫暖的饋贈</p>
<p>在「#水晶文具社」聚會中，收到了同好精緻的手繪聖誕卡片。看著別人的創作，我更加確信自己也想成為能用作品傳遞能量的人。</p>
<figure class="minister-photo">
<img src="../assets/images/minister/image_3bab17.jpg" alt="手繪聖誕卡片" width="1040" height="780" loading="lazy">
</figure>
</article>
<article id="journey-2017" class="story-node" data-era="2017">
<h3>從「身體」到「文字」的深化</h3>
<p class="minister-month">01 月｜職人精神的啟發</p>
<p>參與資管組 D 大的新年紅包活動。其書法與刻印結合的質感，深深影響了我對美感的標準。</p>
<figure class="minister-photo">
<img src="../assets/images/minister/image_3ba74f.jpg" alt="新年紅包活動" width="1040" height="780" loading="lazy">
</figure>
<p class="minister-month">02 月｜身體記憶的熱血</p>
<p>擔任應援組熱舞企劃小組長，在板橋與中山地下街教舞兩個月，為此減重 10 公斤，用身體記憶跨越世紀的節奏。</p>
<p class="minister-month">04 月｜筆尖的沈澱</p>
<p>跟著文具社走遍全台咖啡廳，在鋼筆墨水與玻璃杯的陪伴下，用手寫記錄初心。</p>
<figure class="minister-photo minister-photo--dual">
<img src="../assets/images/minister/image_3baed1.jpg" alt="鋼筆墨水與玻璃杯" width="1040" height="780" loading="lazy">
<img src="../assets/images/minister/image_3c2299.jpg" alt="手寫記錄初心" width="1040" height="780" loading="lazy">
</figure>
</article>
<article id="journey-now" class="story-node" data-era="NOW">
<h3>以熱愛為名的設計進化</h3>
<p class="minister-month">2018 年｜設計靈魂覺醒</p>
<p>正式踏入設計領域。因為想為水晶男孩創作的執念，所有的練習都以他們為主題，這種動力讓我的設計實力產生質變。</p>
<p class="minister-month">現在｜全端開發與推廣</p>
<p>不再只是感嘆導師與他人的才華。我正運用包裝設計與全端開發的積累，親手搭建這個數位平台，證明追星是讓我「變厲害」的軍功章。</p>
</article>
</div>
</section>
<p class="minister-back">
<a href="../index.html#mission" class="btn">回到首頁 · 成立的初衷</a>
</p>
</main>
<footer>
<p>SECHSKIES Fanpage &copy; 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>
</body>
</html>
extra/site-guide.html
+28 -28
View File
@@ -134,9 +134,9 @@
<td class="site-guide-nav-link-cell"><a href="totoga2-copy-timeline.html"><code>extra/totoga2-copy-timeline.html</code></a></td>
</tr>
<tr data-site-guide-depth="3">
<td class="site-guide-nav-menu-cell"><span class="site-guide-nav-name"><a href="totoga2.html">網頁版（TOTOGA2）</a></span></td>
<td class="site-guide-nav-menu-cell"><span class="site-guide-nav-name"><a href="../fallen/totoga2.html">網頁版（TOTOGA2）</a></span></td>
<td class="site-guide-nav-desc">單頁整合：影片／電子書／長文模式切換與八章錨點。</td>
<td class="site-guide-nav-link-cell"><a href="totoga2.html"><code>extra/totoga2.html</code></a></td>
<td class="site-guide-nav-link-cell"><a href="../fallen/totoga2.html"><code>fallen/totoga2.html</code></a></td>
</tr>
<tr data-site-guide-depth="2">
<td class="site-guide-nav-menu-cell"><span class="site-guide-nav-name"><span class="site-guide-nav-nolink">全員發瘋</span></span></td>
@@ -159,9 +159,9 @@
<td class="site-guide-nav-link-cell"><a href="../variety/NJTW/NJTW5.html"><code>variety/NJTW/NJTW5.html</code></a></td>
</tr>
<tr data-site-guide-depth="1">
<td class="site-guide-nav-menu-cell"><span class="site-guide-nav-name"><a href="member.html">完整的六顆</a></span></td>
<td class="site-guide-nav-menu-cell"><span class="site-guide-nav-name"><a href="../member/member.html">完整的六顆</a></span></td>
<td class="site-guide-nav-desc">黑／白水晶六人海報板、團名典故與成員靜態介紹。</td>
<td class="site-guide-nav-link-cell"><a href="member.html"><code>extra/member.html</code></a></td>
<td class="site-guide-nav-link-cell"><a href="../member/member.html"><code>member/member.html</code></a></td>
</tr>
<tr data-site-guide-depth="1">
<td class="site-guide-nav-menu-cell"><span class="site-guide-nav-name"><a href="../concert/concert.html">現場的震撼</a></span></td>
@@ -194,19 +194,19 @@
<td class="site-guide-nav-link-cell"><a href="../albums/albums.html#classic"><code>albums/albums.html#classic</code></a></td>
</tr>
<tr data-site-guide-depth="1">
<td class="site-guide-nav-menu-cell"><span class="site-guide-nav-name"><a href="../map/map.html">Yellow Note</a></span></td>
<td class="site-guide-nav-menu-cell"><span class="site-guide-nav-name"><a href="../yellow-note/map.html">Yellow Note</a></span></td>
<td class="site-guide-nav-desc">台灣行程表、成員行程篩選、搜尋與地圖主體。</td>
<td class="site-guide-nav-link-cell"><a href="../map/map.html"><code>map/map.html</code></a></td>
<td class="site-guide-nav-link-cell"><a href="../yellow-note/map.html"><code>yellow-note/map.html</code></a></td>
</tr>
<tr data-site-guide-depth="2">
<td class="site-guide-nav-menu-cell"><span class="site-guide-nav-name"><a href="minister.html">視覺進化論</a></span></td>
<td class="site-guide-nav-menu-cell"><span class="site-guide-nav-name"><a href="../yellow-note/minister.html">視覺進化論</a></span></td>
<td class="site-guide-nav-desc">「從好奇到全端」自述與時間軸式章節段落。</td>
<td class="site-guide-nav-link-cell"><a href="minister.html"><code>extra/minister.html</code></a></td>
<td class="site-guide-nav-link-cell"><a href="../yellow-note/minister.html"><code>yellow-note/minister.html</code></a></td>
</tr>
<tr data-site-guide-depth="2">
<td class="site-guide-nav-menu-cell"><span class="site-guide-nav-name"><a href="../map/map.html">聖地巡禮</a></span></td>
<td class="site-guide-nav-menu-cell"><span class="site-guide-nav-name"><a href="../yellow-note/map.html">聖地巡禮</a></span></td>
<td class="site-guide-nav-desc">台灣行程表、成員行程篩選、搜尋與地圖主體。</td>
<td class="site-guide-nav-link-cell"><a href="../map/map.html"><code>map/map.html</code></a></td>
<td class="site-guide-nav-link-cell"><a href="../yellow-note/map.html"><code>yellow-note/map.html</code></a></td>
</tr>
</tbody>
</table>
@@ -218,7 +218,7 @@
<tbody>
<tr>
<th scope="row"><code>COMING_SOON_PAGES</code></th>
<td><code>albums</code>、<code>map</code>、<code>minister</code>、<code>minister_ge</code>、<code>totoga2</code>、<code>variety</code> 檔名 → 一般頁改 <code>#</code></td>
<td><code>albums</code>、<code>yellow-note/map</code>、<code>minister</code>、<code>minister_ge</code>、<code>totoga2</code>、<code>variety</code> 檔名 → 一般頁改 <code>#</code></td>
</tr>
<tr>
<th scope="row"><code>INDEX_NAV_OPEN_HASHES</code></th>
@@ -266,31 +266,31 @@
<td>平行單頁 · <code>totoga2-copy-timeline.html</code></td>
</tr>
<tr>
<td><a href="totoga2.html">網頁版（TOTOGA2）</a></td>
<td>整合長頁 · <code>totoga2.html</code></td>
<td><a href="../fallen/totoga2.html">網頁版（TOTOGA2）</a></td>
<td>整合長頁 · <code>fallen/totoga2.html</code></td>
</tr>
</tbody>
</table>
</div>
<div class="site-guide-grid site-guide-grid--compact">
<article class="site-guide-card site-guide-card--totoga2">
<h3><a href="totoga2.html">六六歌2 · 四入口</a></h3>
<h3><a href="../fallen/totoga2.html">六六歌2 · 四入口</a></h3>
<p class="site-guide-note">複本總覽：<a href="totoga2%20copy.html">totoga2 copy.html</a>。章節錨點僅在網頁版（TOTOGA2）內。</p>
<ul class="site-guide-inline-links">
<li><a href="totoga2-copy-video.html">影片</a></li>
<li><a href="totoga2-copy-ebook.html">電子書</a></li>
<li><a href="totoga2-copy-timeline.html">時間軸</a></li>
<li><a href="totoga2.html">網頁版（TOTOGA2）</a></li>
<li><a href="../fallen/totoga2.html">網頁版（TOTOGA2）</a></li>
</ul>
<nav class="site-guide-chapter-nav" aria-label="totoga2 章節">
<a href="totoga2.html#challenge">無限挑戰</a>
<a href="totoga2.html#ssg2">六六歌2</a>
<a href="totoga2.html#sechskies-profile">水晶男孩</a>
<a href="totoga2.html#gather">召集</a>
<a href="totoga2.html#negotiate">交涉</a>
<a href="totoga2.html#variables">變數</a>
<a href="totoga2.html#surprise">驚喜</a>
<a href="totoga2.html#final-stage">登場</a>
<a href="../fallen/totoga2.html#challenge">無限挑戰</a>
<a href="../fallen/totoga2.html#ssg2">六六歌2</a>
<a href="../fallen/totoga2.html#sechskies-profile">水晶男孩</a>
<a href="../fallen/totoga2.html#gather">召集</a>
<a href="../fallen/totoga2.html#negotiate">交涉</a>
<a href="../fallen/totoga2.html#variables">變數</a>
<a href="../fallen/totoga2.html#surprise">驚喜</a>
<a href="../fallen/totoga2.html#final-stage">登場</a>
</nav>
</article>
</div>
@@ -303,11 +303,11 @@
<tbody>
<tr>
<th scope="row">頁</th>
<td><a href="member.html">extra/member.html</a></td>
<td><a href="../member/member.html">member/member.html</a></td>
</tr>
<tr>
<th scope="row">錨點</th>
<td><a href="member.html#crystal-board">#crystal-board</a></td>
<td><a href="../member/member.html#crystal-board">#crystal-board</a></td>
</tr>
</tbody>
</table>
@@ -357,7 +357,7 @@
<tbody>
<tr>
<th scope="row">視覺</th>
<td><a href="minister.html">minister.html</a></td>
<td><a href="../yellow-note/minister.html">yellow-note/minister.html</a></td>
</tr>
<tr>
<th scope="row">minister 長版</th>
@@ -365,7 +365,7 @@
</tr>
<tr>
<th scope="row">地圖</th>
<td><a href="../map/map.html">map.html</a> · <a href="../map/map.html#taipei">#taipei</a> · <a href="../map/map.html#global">#global</a></td>
<td><a href="../yellow-note/map.html">map.html</a> · <a href="../yellow-note/map.html#taipei">#taipei</a> · <a href="../yellow-note/map.html#global">#global</a></td>
</tr>
</tbody>
</table>
@@ -392,7 +392,7 @@
<section class="site-guide-group site-guide-group--extra" aria-labelledby="sg-nav-extra">
<h2 class="section-title" id="sg-nav-extra">extra/ 其餘</h2>
<p class="site-guide-folder-hint">未列頂欄主模板；<code>member</code>／<code>totoga2</code>／<code>minister</code> 與六六歌2 四入口已見主選單樹。</p>
<p class="site-guide-folder-hint">未列頂欄主模板之草稿／實驗頁。主選單對應頁面已移至 <code>fallen/</code>、<code>member/</code>、<code>yellow-note/</code>、<code>variety/</code> 等資料夾；六六歌2 四入口之複本仍在本目錄。</p>
<div class="site-guide-nav-table-wrap">
<table class="site-guide-mini-table">
<thead>
extra/totoga2 copy.html
+3 -10
View File
@@ -14,15 +14,8 @@
<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 — 複本導覽</span>
<span class="event-date">APRIL 14, 2016</span>
<span class="sub-title">水晶男孩回來啦！</span>
</div>
</div>
</header>
@@ -36,7 +29,7 @@
<h2 class="section-title" id="totoga2-copy-hub-title">六六歌2 複本 · 三頁分開</h2>
<p class="ebook-intro-lead">
原先單頁以按鈕切換「影片／電子書／時間軸＋長文」；此複本改為<strong>三個獨立 HTML</strong>（檔名無空白，較利分享與書籤）。
正式整合版仍以 <a href="totoga2.html">extra/totoga2.html</a> 為準。
正式整合版仍以 <a href="../fallen/totoga2.html">fallen/totoga2.html</a> 為準。
</p>
</section>
@@ -53,7 +46,7 @@
<p class="ebook-back-link content-container">
<a href="../index.html#story" class="btn">回到首頁 · 傳奇的轉折</a>
<a href="totoga2.html" class="btn">主檔 totoga2.html</a>
<a href="../fallen/totoga2.html" class="btn">主檔 fallen/totoga2.html</a>
</p>
<footer>
extra/totoga2-copy-ebook.html
+1 -6
View File
@@ -14,13 +14,8 @@
<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>
<span class="sub-title">水晶男孩回來啦！</span>
</div>
</div>
</header>
extra/totoga2-copy-timeline.html
+1 -6
View File
@@ -14,13 +14,8 @@
<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 · 時間軸 · 紀實長文</span>
<span class="event-date">APRIL 14, 2016</span>
<span class="sub-title">水晶男孩回來啦！</span>
</div>
</div>
</header>
extra/totoga2-copy-video.html
+69 -40
View File
@@ -10,17 +10,12 @@
<link rel="stylesheet" href="../assets/css/tablet.css">
</head>
<body class="ebook-ssg2-page totoga2-page">
<body class="ebook-ssg2-page totoga2-page totoga2-video-copy-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 — 節目影片</span>
<span class="event-date">APRIL 14, 2016</span>
<span class="sub-title">水晶男孩回來啦！</span>
</div>
</div>
</header>
@@ -37,41 +32,43 @@
</nav>
<div class="content-container ebook-main">
<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>
<section class="ebook-intro section" aria-labelledby="ebook-bilivideo-heading">
<h2 class="section-title" id="ebook-bilivideo-heading">節目影片</h2>
<div class="bilivideo-stack">
<section class="bilivideo-block" aria-labelledby="bilivideo-top">
<h3 id="bilivideo-top">上集</h3>
<div class="bilivideo-frame">
<iframe
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 class="bilivideo-tabs" id="bilivideo-tabs">
<div class="bilivideo-tabs__shell">
<div class="bilivideo-tabs__list" role="tablist" aria-label="節目影片集數">
<button type="button" class="bilivideo-tabs__tab bilivideo-tabs__tab--active" role="tab" id="bilivideo-tab-1"
aria-controls="bilivideo-panel-1" aria-selected="true">上集</button>
<button type="button" class="bilivideo-tabs__tab" role="tab" id="bilivideo-tab-2"
aria-controls="bilivideo-panel-2" aria-selected="false" tabindex="-1">中集</button>
<button type="button" class="bilivideo-tabs__tab" role="tab" id="bilivideo-tab-3"
aria-controls="bilivideo-panel-3" aria-selected="false" tabindex="-1">下集</button>
</div>
<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>
<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="//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>
</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="//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>
</section>
</div>
</div>
</section>
</div>
<p class="ebook-back-link content-container">
@@ -89,6 +86,38 @@
<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-tabs__tab--active");
else tab.classList.remove("bilivideo-tabs__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>
extra/totoga2.html
-263
View File
@@ -1,263 +0,0 @@
<!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">
<style>
/* 僅本頁 main：加寬、取消左右內距（覆寫 .chronicle-reader / .content-container 的 padding） */
body.totoga2-page main#totoga2-reader.chronicle-reader {
max-width: min(1280px, 96vw);
padding-left: 0;
padding-right: 0;
position: relative;
z-index: 1;
}
/* 覆寫全站 .container（1200px／置中／大 padding），此頁圖列專用。
* 勿沿用全站 header,nav,.container 的 z-index:1，否則圖列會疊在後方 h2、p 內文之上。 */
body.totoga2-page #totoga2-reader .container {
width: 100%;
max-width: none;
margin: 0;
padding: 0;
height: auto;
min-height: 0;
background-color: #ccc;
clear: both;
box-sizing: border-box;
position: static;
z-index: auto;
}
/* 章節卡 .chronicle-chapter 有左右 padding；直屬 .container 負邊距拉出 → 貼滿 main 內寬 */
body.totoga2-page #totoga2-reader .chronicle-chapter {
--totoga-chapter-pad-inline: 20px;
overflow: visible;
display: flow-root;
}
body.totoga2-page #totoga2-reader .chronicle-chapter > h2,
body.totoga2-page #totoga2-reader .chronicle-chapter > p {
clear: both;
position: relative;
z-index: 1;
}
body.totoga2-page #totoga2-reader .chronicle-chapter > .container {
width: calc(100% + 2 * var(--totoga-chapter-pad-inline));
margin-left: calc(-1 * var(--totoga-chapter-pad-inline));
margin-right: calc(-1 * var(--totoga-chapter-pad-inline));
}
@media (max-width: 640px) {
body.totoga2-page #totoga2-reader .chronicle-chapter {
--totoga-chapter-pad-inline: 14px;
}
}
/* 含圖列：必須寫在含 #totoga2-reader 的選取器上，否則會輸給上一段 #totoga2-reader .container 的 height，圖會溢出蓋住後文 */
body.totoga2-page #totoga2-reader.chronicle-reader .container:has(img) {
height: auto;
min-height: 0;
overflow: visible;
}
body.totoga2-page #totoga2-reader.chronicle-reader .container:has(img)::after {
content: "";
display: table;
clear: both;
}
body.totoga2-page #totoga2-reader.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>
<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>
<main class="content-container chronicle-reader" id="totoga2-reader" data-mode="scroll">
<article class="chronicle-chapter active" id="challenge" data-title="無限挑戰">
<!-- 序號一：第一列 container21（右欄 float:right）+ container22（左欄 float:left）→ 畫面左 01、右 02 -->
<div class="container">
<div class="container22">
</div>
<div class="container21">
<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>
<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>
<p class="ebook-back-link content-container">
<a href="../index.html#story" class="btn">回到首頁 · 傳奇的轉折</a>
</p>
<footer>
<p>SECHSKIES Fanpage &copy; 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>