feat 專案設計規範

This commit is contained in:
2026-05-15 03:19:07 +08:00
parent 2d1497c045
commit 2cd645baa4
6 changed files with 338 additions and 308 deletions
+41 -1
View File
@@ -155,7 +155,47 @@ section.archive-block p:last-child {
/* ---------- 首頁 home-page:閱讀寬度與字級(弱化對 vw 的依賴) ---------- */
/* 用 px 鎖上限,避免 72rem 隨根字級/無障礙字級變大(例如實測出 ~1390px) */
/* Hero 大標:維持全站水晶黃字色,用深色描邊+暈光與淺黃底圖區隔 */
.home-page header .hero h1 {
color: var(--primary);
font-weight: 900;
letter-spacing: 0.05em;
text-shadow:
0 0 0.04em rgba(42, 32, 0, 0.55),
0 0.03em 0 rgba(26, 20, 0, 0.42),
0 0.08em 0.12em rgba(0, 0, 0, 0.28),
0 -0.02em 0.06em rgba(255, 255, 255, 0.35),
0 0 0.35em rgba(255, 204, 0, 0.85),
0 0 0.85em rgba(255, 180, 0, 0.4);
}
/* 副標:結構與 concert 相同(subtitle-wrap + 兩側黃線);字級大於演唱會頁以利閱讀 */
.home-page header .hero .subtitle-wrap {
margin: 0.65rem auto 1.05rem;
padding: 0 0.75rem;
max-width: min(40rem, 94vw);
}
.home-page header .hero .subtitle-wrap::before,
.home-page header .hero .subtitle-wrap::after {
height: 3px;
max-width: min(72px, 14vw);
background-color: #ffcc00;
opacity: 1;
}
.home-page header .hero .subtitle-wrap .sub-title {
margin: 0 min(1.6rem, 4vw);
font-size: clamp(1.12rem, 2.4vw + 0.72rem, 1.52rem);
font-weight: 700;
letter-spacing: 0.22em;
line-height: 1.5;
color: #e6e6e6;
text-shadow:
0 0 0.35em rgba(0, 0, 0, 0.45),
0 0.06em 0.18em rgba(0, 0, 0, 0.35);
}
.home-page .container {
max-width: min(1200px, calc(100% - 2rem));
width: 100%;
+37 -49
View File
@@ -2170,7 +2170,7 @@ body.totoga2-page.totoga2-video-copy-page .ebook-intro.section {
margin-bottom: 1.5rem;
}
body.totoga2-page.totoga2-video-copy-page .ebook-intro.section .bilivideo-tabs {
body.totoga2-page.totoga2-video-copy-page .ebook-intro.section .bilivideo-tabs__shell {
margin-top: 0.5rem;
}
@@ -2178,10 +2178,43 @@ body.totoga2-page.totoga2-video-copy-page {
overflow-x: hidden;
}
/* 節目影片複本:三集=同一殼內分頁;非使用中 panel 不占版面(避免被 flex display 蓋掉 hidden */
body.totoga2-page.totoga2-video-copy-page .bilivideo-tabs {
/* 節目影片複本:頂列為上/中/下集(獨立 .btn);播放器外殼內僅 iframe */
body.totoga2-page.totoga2-video-copy-page .bilivideo-hub .bilivideo-tabs__shell {
max-width: 960px;
margin: 0 auto;
margin-left: auto;
margin-right: auto;
}
body.totoga2-page.totoga2-video-copy-page .totoga2-copy-sibling-links {
text-align: center;
font-size: 0.9rem;
margin: 0.35rem auto 0.85rem;
color: #555;
}
body.totoga2-page.totoga2-video-copy-page .totoga2-copy-sibling-links a {
color: #4a3d12;
font-weight: 650;
text-decoration: underline;
text-underline-offset: 0.2em;
}
body.totoga2-page.totoga2-video-copy-page .totoga2-copy-sibling-links a:hover {
color: #221a06;
}
body.totoga2-page.totoga2-video-copy-page .totoga2-copy-sibling-links__sep {
margin: 0 0.4rem;
opacity: 0.55;
}
body.totoga2-page.totoga2-video-copy-page .bilivideo-episode-nav .btn {
opacity: 0.9;
}
body.totoga2-page.totoga2-video-copy-page .bilivideo-episode-nav .bilivideo-episode-nav__tab--active {
opacity: 1;
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.28);
}
body.totoga2-page.totoga2-video-copy-page .bilivideo-tabs__shell {
@@ -2192,51 +2225,6 @@ body.totoga2-page.totoga2-video-copy-page .bilivideo-tabs__shell {
background: #070707;
}
body.totoga2-page.totoga2-video-copy-page .bilivideo-tabs__list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0;
margin: 0;
padding: 0;
}
body.totoga2-page.totoga2-video-copy-page .bilivideo-tabs__tab {
margin: 0;
padding: 0.75rem 0.5rem;
border: none;
border-right: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 0;
cursor: pointer;
font: inherit;
font-weight: 700;
font-size: clamp(0.88rem, 2.1vw, 1rem);
text-align: center;
color: #e8e4dc;
background: #151515;
letter-spacing: 0.12em;
}
body.totoga2-page.totoga2-video-copy-page .bilivideo-tabs__tab:last-child {
border-right: none;
}
body.totoga2-page.totoga2-video-copy-page .bilivideo-tabs__tab:hover {
background: #1f1f1f;
color: #fff;
}
body.totoga2-page.totoga2-video-copy-page .bilivideo-tabs__tab:focus-visible {
outline: 2px solid #ffcc00;
outline-offset: -2px;
position: relative;
z-index: 1;
}
body.totoga2-page.totoga2-video-copy-page .bilivideo-tabs__tab--active {
background: linear-gradient(180deg, #ffe566 0%, #ffcc00 100%);
color: #1a1406;
}
body.totoga2-page.totoga2-video-copy-page .bilivideo-tabs__panels {
overflow: hidden;
background: #000;
+1
View File
@@ -6,3 +6,4 @@
- 中集、下集 iframe 使用 `data-src`,第一次切到該分頁時由頁內 script 寫入 `src`;改連結時請改 `data-src`(或已寫入後的 `src`)。
- 目前中/下集預設與上集同一 BV,僅作占位;正式替換時改各分頁 iframe 的 `data-src` 即可。
- 此頁 `body.totoga2-video-copy-page` 會覆寫 `.map-archive-header` 的整屏高度(`100vh``100dvh`),避免與導覽、影片疊加後出現整頁直向捲軸;其他全屏 banner 頁不受影響。
- 資訊架構:頂部黃色列僅 **上集/中集/下集**`role="tab"`);**紀實電子書、時間軸+長文、複本總覽** 為其下文字連結,仍各為獨立 HTML;`totoga2-copy-ebook.html` 等頁仍保留原四鈕列。
+1 -1
View File
@@ -17,7 +17,7 @@
<canvas id="particles"></canvas>
<div class="hero">
<h1>SECHSKIES<br>水晶男孩</h1>
<p>六顆永恆的水晶 左右命運的傳奇</p>
<p>六顆永恆的水晶 · 左右命運的傳奇</p>
<a href="#story" class="btn">探索他們的故事</a>
</div>
</header>
+23 -24
View File
@@ -24,27 +24,28 @@
<canvas id="particles"></canvas>
<nav class="ebook-back-link content-container totoga2-split-crossnav" aria-label="六六歌2 複本分頁">
<a href="totoga2-copy-video.html" class="btn" aria-current="page">節目影片</a>
<a href="totoga2-copy-ebook.html" class="btn">紀實電子書</a>
<a href="totoga2-copy-timeline.html" class="btn">時間軸+長文</a>
<a href="totoga2%20copy.html" class="btn">複本總覽</a>
</nav>
<div id="bilivideo-tabs" class="bilivideo-hub">
<nav class="ebook-back-link content-container totoga2-split-crossnav 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>
<p class="totoga2-copy-sibling-links content-container" aria-label="六六歌2 其他複本入口">
<a href="totoga2-copy-ebook.html">紀實電子書</a>
<span class="totoga2-copy-sibling-links__sep" aria-hidden="true">·</span>
<a href="totoga2-copy-timeline.html">時間軸+長文</a>
<span class="totoga2-copy-sibling-links__sep" aria-hidden="true">·</span>
<a href="totoga2%20copy.html">複本總覽</a>
</p>
<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 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 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">
@@ -67,14 +68,12 @@
</div>
</div>
</div>
</div>
</section>
</section>
</div>
</div>
<p class="ebook-back-link content-container">
<a href="../index.html#story" class="btn">回到首頁 · 傳奇的轉折</a>
<a href="totoga2-copy-ebook.html" class="btn">紀實電子書(另頁)</a>
<a href="totoga2-copy-timeline.html" class="btn">時間軸+八章(另頁)</a>
</p>
<footer>
@@ -98,8 +97,8 @@
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");
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]");
+235 -233
View File
@@ -1,234 +1,236 @@
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SECHSKIES - 水晶男孩傳奇介紹</title>
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/index.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="home-page">
<header id="origin">
<div class="hero">
<h1>SECHSKIES<br>水晶男孩</h1>
<p>六顆永恆的水晶 • 左右命運的傳奇</p>
<a href="#start" class="btn">從這裡開始淪陷</a>
</div>
</header>
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></nav>
<canvas id="particles"></canvas>
<div class="container">
<section id="start">
<h2 class="section-title">好奇的開端</h2>
<div class="intro-text">
<p class="core-description">
這段旅程始於 2016 年 4 月,透過國民綜藝<span class="mark_b mark_y">《無限挑戰》</span>的回歸企劃,讓原本不認識這組傳奇的我,因一時好奇點開節目。
即便錯過了那個屬於他們的世紀末,但跟著節目的編排鋪陳,從歡笑到感動,我被這些熱血、真誠且專業的大男孩所震撼。
</p>
<p class="call-to-action">
身為在回歸後才被這場 <span class="mark_b mark_y">「黃色奇蹟」</span>
擊中的新一代粉絲,我深刻體會那種從好奇觀看到最終徹底淪陷的悸動。這種從<span class="mark_b"><span class="fan-journey-wave"
role="text">路人&nbsp;<i class="fa-solid fa-circle-right"
aria-hidden="true"></i>&nbsp;入坑否定期&nbsp;<i class="fa-solid fa-circle-right"
aria-hidden="true"></i>&nbsp;瘋狂考古期&nbsp;<i class="fa-solid fa-circle-right"
aria-hidden="true"></i>&nbsp;坑底躺平深陷其中</span></span>的過程,證明了魅力可以跨越時間,也正是這一切自我覺醒的起點,驅動我不斷進化的無限可能。
</p>
</div>
</section>
<section id="mission" class="mission-section">
<div class="mission-zigzag">
<div class="mission-row mission-row--intro">
<div class="mission-row__visual">
<div class="logo-wrapper">
<img src="./assets/images/logo.png" alt="SECHSKIES Logo Concept">
<div class="caption">
<span class="caption__line caption__line--title"><span class="arrow-icon mark_b"
aria-hidden="true">↑</span>設計概念:</span>
<span class="caption__line">六角形水晶、黃色海洋與我們的初心Six</span>
</div>
</div>
</div>
<div class="mission-row__body">
<h2 class="section-title mission-block-title">成立的初衷</h2>
<p class="mission-lead">
以推廣 <span class="mark_b mark_y">SECHSKIES 水晶男孩</span> 為核心,旨在透過 <span
class="mark_b">專業的視覺策展</span> 宣傳成員魅力與 <span class="mark_b">小黃們的應援活動</span>。嘗試以水晶男孩為
<span class="mark_b">靈感主軸</span>,延伸至
<span class="mark_b">網頁開發、視覺設計與內容企劃</span>
等多重領域,將對偶像的喜愛轉化為 <span class="mark_b">實質的專業養分</span>。在這裡,你不只能探索他們的 <span
class="mark_b">傳奇軌跡</span>,更能見證追星如何激發 <span class="mark_b">創作潛能</span>
</p>
<div class="slogan-quote slogan-quote--mission">
<span class="slogan-quote__inner">我要用這座<span
class="mark_b">藝廊般的網站</span>證明:<br>追星的孩子不僅不會變壞,更會因為那份<span
class="mark_b">守護並推廣的熱情</span><br>讓現在的自己變得比追星前的自己還要厲害!</span>
</div>
</div>
</div>
<div class="mission-row mission-row--concept">
<div class="mission-row__body">
<h3 class="mission-logo-heading">LOGO 設計理念</h3>
<p>
<span class="mark_b">「晶」</span>字發想來自<span class="mark_b">六角形的水晶</span>,為了強調水晶男孩<span
class="mark_b">初心為六人</span>。上半部形似<span class="mark_b">數字
6</span>,搭配演唱會必備的<span class="mark_b">手燈圖案</span>代表粉絲和水晶<span
class="mark_b">密不可分的關係</span><br>色彩配置發想來自無限挑戰六六歌特輯的回歸舞台,成員脫下眼罩的剎那,整個場地從<span
class="mark_b mark_y">一片漆黑瞬間發亮</span>映入眼簾的是一片<span class="mark_b">黃色海洋</span><span
class="mark_y">讓成員和粉絲的世界跟著亮了起來</span>。以此片段為契機,設計成<span
class="mark_b">黑色系與黃色系</span>的色彩搭配,來記錄那瞬間的感動。
</p>
</div>
<div class="mission-row__visual">
<div class="mission-moment-wrap">
<div class="mission-gif-frame" role="group" aria-label="回歸演唱會/黃色氣球海(16:9)">
<!-- 若改為 GIF 動圖,將底下 src 換成 ./assets/images/mission-balloon-sea.gif 即可 -->
<img src="./assets/images/黃色海洋.gif" alt="無限挑戰 六六歌2 放送畫面:全場黃色氣球海">
</div>
<span class="caption">
<span class="arrow-icon" aria-hidden="true"></span>
回歸演唱會的動人瞬間-黃色氣球海
</span>
</div>
</div>
</div>
</div>
</section>
<section id="timeline" class="story-archive">
<h2 class="section-title">跨時空軌跡</h2>
<div class="subtitle-wrap">
<span class="sub-title">SECHSKIES STORY ARCHIVE</span>
</div>
<div class="merged-storyline">
<article class="story-node" data-era="1997">
<h3>傳奇的誕生:六道光芒劃破韓流夜空</h3>
<p>1997年4月15日,水晶男孩以強悍的《學園別曲》為起點,「黑水晶|Rap與舞蹈」、「白水晶|主唱」的雙色魅力交織,奠定了
K-POP第一代傳奇的地位,開創了屬於黃色海洋的盛世與巔峰。</p>
<p>在那段被韓劇<a
href="https://www.disneyplus.com/browse/entity-3979fb82-8681-44e8-b7be-e313091f0d73?distributionPartner=google"
class="story-external-inline" target="_blank" rel="noopener noreferrer"><span
class="story-external-inline__label">《請回答1997》</span><i
class="fa-solid fa-arrow-up-right-from-square" aria-hidden="true"></i></a>奉為經典的歲月裡,水晶男孩與
H.O.T.
並稱為兩大巔峰。無論是雨中那場被劇集致敬的粉絲大戰,還是為了買票露宿街頭的狂熱,白與黃的旗幟對決,成了那個世代集體記憶的起點。</p>
</article>
<article class="story-node" data-era="2000">
<h3>遺憾的休止符:凍結有你的世界</h3>
<p>在最燦爛的時刻,這首華麗的樂章卻被迫畫下了休止符,2000年5月正式解散。成員各自發展走出了不同道路,水晶進入休眠期。
</p>
<p>那一場如同劇中描寫般、讓全韓無數少女世界崩塌的夢想演唱會告別現場,將未完的旋律封存在冷冽的空氣中。這一停頓,就是長達十六年的靜默,成為我們心中最完整、卻也最令人心碎的凝煉模樣
</p>
</article>
<article class="story-node story-node--ebook-ssg2" data-era="2016">
<h3>感動合體:那一晚,我們找回了完整</h3>
<p>塵封十六年的時光被溫柔拂去,跨越六千多天的等待,黃色氣球海再次淹沒了上岩運動場。當六個身影重新站在一起,那幅曾被凍結在 2000
年的畫面終於再次「溶解」並重合。那一晚,淚水證明了奇蹟真的存在,我們終於找回了那份久違的完整,以為故事從此能圓滿續寫。</p>
<span class="timeline-ebook-cta" aria-label="傳奇書寫中,連結暫停">
<span>點我見證傳奇</span><i class="fa-solid fa-hand-pointer" aria-hidden="true"></i>
</span>
</article>
<!-- 2016 年後續發展與情感轉折區塊 -->
<article class="story-node" data-era="2016.05">
<h3>從路人到鐵粉:從夢境進現實</h3>
<p>《無限挑戰》落幕後,原本以為這只是最後一場華麗的告別。在那段連期待都不敢奢侈、只能在螢幕前渴求消息的沈默裡,5 月 11
日的簽約消息像是一記響亮的耳光,將所有人從絕望中打醒。那是從未知的空虛到塵埃落定的震撼——原來這不是終點,奇蹟真的在現實生了根。</p>
<p>四月的重逢是老小黃們守候十六年的淚水;而九月的單獨演唱會,則讓無數新小黃見證了那份無法動搖的羈絆。在那片黃色海洋裡,我們不只愛上了水晶男孩,更愛上了他們與小黃之間那種跨越時空的愛情。雖然遺憾沒能看見六人並肩的畫面,但那股新舊交織的生命力,確實為水晶注入了新的靈魂。
</p>
<p>這份陪伴在十二月有了溫柔的延續。志溶雖然未回歸舞台,卻在《超回》中以最真實、幸福的模樣走入大家的生活。舞台上的空位雖讓心底隱隱作痛,但看著他幸福的樣子,我們才明白:原來大家只是換個方式一起變老,這份情誼早已超越了表演。
</p>
</article>
<article class="story-node" data-era="2016">
<h3>從路人到鐵粉:從夢境進現實</h3>
<p>當《無限挑戰》的燈光熄滅,原本以為這場跨越十六年的重逢僅是曇花一現的夢境,但隨後五位成員與 YG
簽約的消息,正式宣告了傳奇的歸來。九月演唱會上,新舊粉絲在黃色海洋中見證了跨越時空的強烈羈絆,那種心意相通的悸動,讓我們知道這道光從未真正熄滅過。</p>
<p>而志溶雖然未參與合體,卻在十二月演唱會落幕當天,透過《超人回來了》的預告驚喜現身。這不是告別,而是他選擇以另一種最真實、最溫馨的形式,在現實生活中繼續陪伴著大家。舞台上的空位雖然令人難過,但看到他帶著孩子幸福的模樣,我們才明白:原來水晶與粉絲的羈絆,早已超越了表演的定義,而是要在彼此的生活裡,一起變老,一起寫下新的篇章。
</p>
### 餘溫與新生:從奇蹟走向恆久
<p>當《無限挑戰》的燈光熄滅,原以為那場重逢只是十六年一次的曇花一現。同年五月,五位成員與 YG
簽約的消息,讓夢境落實成了現實。四月的「六六歌」是屬於老粉絲守候十六年的淚水與重逢;而九月的個人演唱會,則是一場關於愛情的傳承。無數新粉絲透過黃色海洋,目睹了偶像與歌迷間那種超越時空的生死契闊,雖然志溶未能站上舞台成了這場盛宴唯一的遺憾,但那種「水晶男孩」與「黃飯」共生的生命力,卻從那一刻起,重新注入了新的靈魂。
</p>
<p>這份羈絆在十二月有了更溫柔的延續。演唱會落幕當晚,志溶帶著孩子在《超人回來了》預告中驚喜現身。這不是告別,而是他換了一種最真實的形式,在現實生活中守護著這份情誼。舞台上的空位雖讓心底隱隱作痛,但看著他幸福的模樣,我們才懂得:水晶男孩的定義早已超越了表演,而是彼此約好在不同的時空裡,也要一起變老,一起寫下永不終結的篇章。
</p>
</article>
<article class="story-node" data-era="2019">
<h3>體制調整與穩定</h3>
<p>調整為四人組合(殷志源、李宰鎮、金在德、張水院),繼續以經典魅力活躍於樂壇與綜藝。</p>
</article>
<article class="story-node" data-era="NOW">
<h3>至今:個人與團體並行</h3>
<p>隊長殷志源活躍於各類綜藝節目,成員們也積極參與音樂與個人品牌活動。雖然活動節奏放緩,但水晶男孩仍是 K-POP 史上的長壽標竿。</p>
</article>
</div>
</section>
<!--
<section id="story" class="story-archive">
<h2 class="section-title">傳奇的轉折</h2>
<div class="subtitle-wrap">
<span class="sub-title">PLOT TWIST</span>
</div>
<p class="intro-text">
像劇情的反轉一樣過癮:這幾個節點,剛好是許多人從「旁觀綜藝」滑進「正式入坑」的轉軌。若想讀對白級細節,請開
<a href="fallen/totoga2.html">六六歌2 整合專區</a>(影片/電子書/紀實長文八章,同一頁切換模式即可)。
</p>
<div class="story-ebook-cta">
<a href="fallen/totoga2.html#ebook" class="btn story-ebook-btn">開啟六六歌2 紀實電子書</a>
<a href="fallen/totoga2.html" class="btn story-ebook-btn">六六歌2 整合專區</a>
</div>
<div class="merged-storyline">
<article id="special" class="story-node" data-era="六六歌">
<h3>六六歌實錄</h3>
<p>把懸念、試探與哭點縫在同一條時間軸上;很多人第一次真正把「水晶男孩」打進搜尋框,就是從這種瘋狂的剪輯節奏開始。</p>
<p><a href="fallen/totoga2.html#ssg2">對照這一段幕後敘事</a></p>
</article>
<article id="negotiate" class="story-node" data-era="交涉">
<h3>命運的交涉</h3>
<p>KTV、游擊演唱會規則、與其說講道理不如說把真心擺上桌面——交涉的不是合約字面,而是還願不願意再一次肩並肩。</p>
<p><a href="fallen/totoga2.html#negotiate">讀交涉與對話肌理</a></p>
</article>
<article id="complete" class="story-node" data-era="歸位">
<h3>拼圖的歸位</h3>
<p>變數一個個被排除之後,驚喜接上登場段落;缺一角舞台的視覺,終於對齊觀眾席上堅守的那片黃。</p>
<p><a href="fallen/totoga2.html#gather">從「召集」段開始補這條線</a></p>
</article>
<article id="past" class="story-node" data-era="最初">
<h3>巔峰與雨天</h3>
<p>急凍、告別、各自的跑道——並不是要你沉浸遺憾,而是讓你懂:後來每一次亮燈,為什麼會更值得尖叫。</p>
<p><a href="fallen/totoga2.html#sechskies-profile">讀這條脈絡的起點</a></p>
</article>
</div>
</section> -->
</div>
<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>
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SECHSKIES - 水晶男孩傳奇介紹</title>
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/index.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="home-page">
<header id="origin">
<div class="hero">
<h1>SECHSKIES<br>水晶男孩</h1>
<div class="subtitle-wrap">
<span class="sub-title">六顆永恆的水晶 • 左右命運的傳奇</span>
</div>
<a href="#start" class="btn">從這裡開始淪陷</a>
</div>
</header>
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></nav>
<canvas id="particles"></canvas>
<div class="container">
<section id="start">
<h2 class="section-title">好奇的開端</h2>
<div class="intro-text">
<p class="core-description">
這段旅程始於 2016 年 4 月,透過國民綜藝<span class="mark_b mark_y">《無限挑戰》</span>的回歸企劃,讓原本不認識這組傳奇的我,因一時好奇點開節目。
即便錯過了那個屬於他們的世紀末,但跟著節目的編排鋪陳,從歡笑到感動,我被這些熱血、真誠且專業的大男孩所震撼。
</p>
<p class="call-to-action">
身為在回歸後才被這場 <span class="mark_b mark_y">「黃色奇蹟」</span>
擊中的新一代粉絲,我深刻體會那種從好奇觀看到最終徹底淪陷的悸動。這種從<span class="mark_b"><span class="fan-journey-wave"
role="text">路人&nbsp;<i class="fa-solid fa-circle-right"
aria-hidden="true"></i>&nbsp;入坑否定期&nbsp;<i class="fa-solid fa-circle-right"
aria-hidden="true"></i>&nbsp;瘋狂考古期&nbsp;<i class="fa-solid fa-circle-right"
aria-hidden="true"></i>&nbsp;坑底躺平深陷其中</span></span>的過程,證明了魅力可以跨越時間,也正是這一切自我覺醒的起點,驅動我不斷進化的無限可能。
</p>
</div>
</section>
<section id="mission" class="mission-section">
<div class="mission-zigzag">
<div class="mission-row mission-row--intro">
<div class="mission-row__visual">
<div class="logo-wrapper">
<img src="./assets/images/logo.png" alt="SECHSKIES Logo Concept">
<div class="caption">
<span class="caption__line caption__line--title"><span class="arrow-icon mark_b"
aria-hidden="true">↑</span>設計概念:</span>
<span class="caption__line">六角形水晶、黃色海洋與我們的初心Six</span>
</div>
</div>
</div>
<div class="mission-row__body">
<h2 class="section-title mission-block-title">成立的初衷</h2>
<p class="mission-lead">
以推廣 <span class="mark_b mark_y">SECHSKIES 水晶男孩</span> 為核心,旨在透過 <span
class="mark_b">專業的視覺策展</span> 宣傳成員魅力與 <span class="mark_b">小黃們的應援活動</span>。嘗試以水晶男孩為
<span class="mark_b">靈感主軸</span>,延伸至
<span class="mark_b">網頁開發、視覺設計與內容企劃</span>
等多重領域,將對偶像的喜愛轉化為 <span class="mark_b">實質的專業養分</span>。在這裡,你不只能探索他們的 <span
class="mark_b">傳奇軌跡</span>,更能見證追星如何激發 <span class="mark_b">創作潛能</span>
</p>
<div class="slogan-quote slogan-quote--mission">
<span class="slogan-quote__inner">我要用這座<span
class="mark_b">藝廊般的網站</span>證明:<br>追星的孩子不僅不會變壞,更會因為那份<span
class="mark_b">守護並推廣的熱情</span><br>讓現在的自己變得比追星前的自己還要厲害!</span>
</div>
</div>
</div>
<div class="mission-row mission-row--concept">
<div class="mission-row__body">
<h3 class="mission-logo-heading">LOGO 設計理念</h3>
<p>
<span class="mark_b">「晶」</span>字發想來自<span class="mark_b">六角形的水晶</span>為了強調水晶男孩<span
class="mark_b">初心為六人</span>上半部形似<span class="mark_b">數字
6</span>搭配演唱會必備的<span class="mark_b">手燈圖案</span>代表粉絲和水晶<span
class="mark_b">密不可分的關係</span><br>色彩配置發想來自無限挑戰六六歌特輯的回歸舞台,成員脫下眼罩的剎那,整個場地從<span
class="mark_b mark_y">一片漆黑瞬間發亮</span>,映入眼簾的是一片<span class="mark_b">黃色海洋</span><span
class="mark_y">讓成員和粉絲的世界跟著亮了起來</span>。以此片段為契機,設計成<span
class="mark_b">黑色系與黃色系</span>的色彩搭配,來記錄那瞬間的感動。
</p>
</div>
<div class="mission-row__visual">
<div class="mission-moment-wrap">
<div class="mission-gif-frame" role="group" aria-label="回歸演唱會/黃色氣球海(16:9)">
<!-- 若改為 GIF 動圖,將底下 src 換成 ./assets/images/mission-balloon-sea.gif 即可 -->
<img src="./assets/images/黃色海洋.gif" alt="無限挑戰 六六歌2 放送畫面:全場黃色氣球海">
</div>
<span class="caption">
<span class="arrow-icon" aria-hidden="true"></span>
回歸演唱會的動人瞬間-黃色氣球海
</span>
</div>
</div>
</div>
</div>
</section>
<section id="timeline" class="story-archive">
<h2 class="section-title">跨時空軌跡</h2>
<div class="subtitle-wrap">
<span class="sub-title">SECHSKIES STORY ARCHIVE</span>
</div>
<div class="merged-storyline">
<article class="story-node" data-era="1997">
<h3>傳奇的誕生:六道光芒劃破韓流夜空</h3>
<p>1997年4月15日,水晶男孩以強悍的《學園別曲》為起點,「黑水晶|Rap與舞蹈」、「白水晶|主唱」的雙色魅力交織,奠定了
K-POP第一代傳奇的地位,開創了屬於黃色海洋的盛世與巔峰。</p>
<p>在那段被韓劇<a
href="https://www.disneyplus.com/browse/entity-3979fb82-8681-44e8-b7be-e313091f0d73?distributionPartner=google"
class="story-external-inline" target="_blank" rel="noopener noreferrer"><span
class="story-external-inline__label">《請回答1997》</span><i
class="fa-solid fa-arrow-up-right-from-square" aria-hidden="true"></i></a>奉為經典的歲月裡,水晶男孩與
H.O.T.
並稱為兩大巔峰。無論是雨中那場被劇集致敬的粉絲大戰,還是為了買票露宿街頭的狂熱,白與黃的旗幟對決,成了那個世代集體記憶的起點。</p>
</article>
<article class="story-node" data-era="2000">
<h3>遺憾的休止符:凍結有你的世界</h3>
<p>在最燦爛的時刻,這首華麗的樂章卻被迫畫下了休止符,2000年5月正式解散。成員各自發展走出了不同道路,水晶進入休眠期
</p>
<p>那一場如同劇中描寫般、讓全韓無數少女世界崩塌的夢想演唱會告別現場,將未完的旋律封存在冷冽的空氣中。這一停頓,就是長達十六年的靜默,成為我們心中最完整、卻也最令人心碎的凝煉模樣。
</p>
</article>
<article class="story-node story-node--ebook-ssg2" data-era="2016">
<h3>感動合體:那一晚,我們找回了完整</h3>
<p>塵封十六年的時光被溫柔拂去,跨越六千多天的等待,黃色氣球海再次淹沒了上岩運動場。當六個身影重新站在一起,那幅曾被凍結在 2000
年的畫面終於再次「溶解」並重合。那一晚,淚水證明了奇蹟真的存在,我們終於找回了那份久違的完整,以為故事從此能圓滿續寫。</p>
<span class="timeline-ebook-cta" aria-label="傳奇書寫中,連結暫停">
<span>點我見證傳奇</span><i class="fa-solid fa-hand-pointer" aria-hidden="true"></i>
</span>
</article>
<!-- 2016 年後續發展與情感轉折區塊 -->
<article class="story-node" data-era="2016.05">
<h3>從路人到鐵粉:從夢境進現實</h3>
<p>《無限挑戰》落幕後,原本以為這只是最後一場華麗的告別。在那段連期待都不敢奢侈、只能在螢幕前渴求消息的沈默裡,5 月 11
日的簽約消息像是一記響亮的耳光,將所有人從絕望中打醒。那是從未知的空虛到塵埃落定的震撼——原來這不是終點,奇蹟真的在現實生了根。</p>
<p>四月的重逢是老小黃們守候十六年的淚水;而九月的單獨演唱會,則讓無數新小黃見證了那份無法動搖的羈絆。在那片黃色海洋裡,我們不只愛上了水晶男孩,更愛上了他們與小黃之間那種跨越時空的愛情。雖然遺憾沒能看見六人並肩的畫面,但那股新舊交織的生命力,確實為水晶注入了新的靈魂。
</p>
<p>這份陪伴在十二月有了溫柔的延續。志溶雖然未回歸舞台,卻在《超回》中以最真實、幸福的模樣走入大家的生活。舞台上的空位雖讓心底隱隱作痛,但看著他幸福的樣子,我們才明白:原來大家只是換個方式一起變老,這份情誼早已超越了表演。
</p>
</article>
<article class="story-node" data-era="2016">
<h3>從路人到鐵粉:從夢境進現實</h3>
<p>當《無限挑戰》的燈光熄滅,原本以為這場跨越十六年的重逢僅是曇花一現的夢境,但隨後五位成員與 YG
簽約的消息,正式宣告了傳奇的歸來。九月演唱會上,新舊粉絲在黃色海洋中見證了跨越時空的強烈羈絆,那種心意相通的悸動,讓我們知道這道光從未真正熄滅過。</p>
<p>而志溶雖然未參與合體,卻在十二月演唱會落幕當天,透過《超人回來了》的預告驚喜現身。這不是告別,而是他選擇以另一種最真實、最溫馨的形式,在現實生活中繼續陪伴著大家。舞台上的空位雖然令人難過,但看到他帶著孩子幸福的模樣,我們才明白:原來水晶與粉絲的羈絆,早已超越了表演的定義,而是要在彼此的生活裡,一起變老,一起寫下新的篇章。
</p>
### 餘溫與新生:從奇蹟走向恆久
<p>當《無限挑戰》的燈光熄滅,原以為那場重逢只是十六年一次的曇花一現。同年五月,五位成員與 YG
簽約的消息,讓夢境落實成了現實。四月的「六六歌」是屬於老粉絲守候十六年的淚水與重逢;而九月的個人演唱會,則是一場關於愛情的傳承。無數新粉絲透過黃色海洋,目睹了偶像與歌迷間那種超越時空的生死契闊,雖然志溶未能站上舞台成了這場盛宴唯一的遺憾,但那種「水晶男孩」與「黃飯」共生的生命力,卻從那一刻起,重新注入了新的靈魂。
</p>
<p>這份羈絆在十二月有了更溫柔的延續。演唱會落幕當晚,志溶帶著孩子在《超人回來了》預告中驚喜現身。這不是告別,而是他換了一種最真實的形式,在現實生活中守護著這份情誼。舞台上的空位雖讓心底隱隱作痛,但看著他幸福的模樣,我們才懂得:水晶男孩的定義早已超越了表演,而是彼此約好在不同的時空裡,也要一起變老,一起寫下永不終結的篇章。
</p>
</article>
<article class="story-node" data-era="2019">
<h3>體制調整與穩定</h3>
<p>調整為四人組合(殷志源、李宰鎮、金在德、張水院),繼續以經典魅力活躍於樂壇與綜藝。</p>
</article>
<article class="story-node" data-era="NOW">
<h3>至今:個人與團體並行</h3>
<p>隊長殷志源活躍於各類綜藝節目,成員們也積極參與音樂與個人品牌活動。雖然活動節奏放緩,但水晶男孩仍是 K-POP 史上的長壽標竿。</p>
</article>
</div>
</section>
<!--
<section id="story" class="story-archive">
<h2 class="section-title">傳奇的轉折</h2>
<div class="subtitle-wrap">
<span class="sub-title">PLOT TWIST</span>
</div>
<p class="intro-text">
像劇情的反轉一樣過癮:這幾個節點,剛好是許多人從「旁觀綜藝」滑進「正式入坑」的轉軌。若想讀對白級細節,請開
<a href="fallen/totoga2.html">六六歌2 整合專區</a>(影片/電子書/紀實長文八章,同一頁切換模式即可)。
</p>
<div class="story-ebook-cta">
<a href="fallen/totoga2.html#ebook" class="btn story-ebook-btn">開啟六六歌2 紀實電子書</a>
<a href="fallen/totoga2.html" class="btn story-ebook-btn">六六歌2 整合專區</a>
</div>
<div class="merged-storyline">
<article id="special" class="story-node" data-era="六六歌">
<h3>六六歌實錄</h3>
<p>把懸念、試探與哭點縫在同一條時間軸上;很多人第一次真正把「水晶男孩」打進搜尋框,就是從這種瘋狂的剪輯節奏開始。</p>
<p><a href="fallen/totoga2.html#ssg2">對照這一段幕後敘事</a></p>
</article>
<article id="negotiate" class="story-node" data-era="交涉">
<h3>命運的交涉</h3>
<p>KTV、游擊演唱會規則、與其說講道理不如說把真心擺上桌面——交涉的不是合約字面,而是還願不願意再一次肩並肩。</p>
<p><a href="fallen/totoga2.html#negotiate">讀交涉與對話肌理</a></p>
</article>
<article id="complete" class="story-node" data-era="歸位">
<h3>拼圖的歸位</h3>
<p>變數一個個被排除之後,驚喜接上登場段落;缺一角舞台的視覺,終於對齊觀眾席上堅守的那片黃。</p>
<p><a href="fallen/totoga2.html#gather">從「召集」段開始補這條線</a></p>
</article>
<article id="past" class="story-node" data-era="最初">
<h3>巔峰與雨天</h3>
<p>急凍、告別、各自的跑道——並不是要你沉浸遺憾,而是讓你懂:後來每一次亮燈,為什麼會更值得尖叫。</p>
<p><a href="fallen/totoga2.html#sechskies-profile">讀這條脈絡的起點</a></p>
</article>
</div>
</section> -->
</div>
<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>