From 91d2f82a2649e55e17f72b4a653c1ed753db59ef Mon Sep 17 00:00:00 2001 From: JekkiNoopy Date: Sat, 9 May 2026 01:00:07 +0800 Subject: [PATCH] =?UTF-8?q?feat=20=E6=95=B4=E5=90=88=E5=A4=9A=E9=A0=81?= =?UTF-8?q?=E9=9D=A2=20=E5=B0=8E=E8=A6=BD=E5=88=97?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- chronicle.html | 146 +++++++++++++++++++ chronicle.js | 57 ++++++++ classic.html | 167 ++++++++++++++++++++++ concert.css | 35 +++-- concert.html | 122 +++++++++++++++- index.html | 60 +++++++- map.html | 373 +++++++++++++++++++++++++++---------------------- map.js | 279 ++++++++++++++++++++++++++++++++++++ particles.js | 58 ++++++++ portal-nav.js | 65 +++++++++ style.css | 367 ++++++++++++++++++++++++++++++++++++++++++++++-- 11 files changed, 1533 insertions(+), 196 deletions(-) create mode 100644 chronicle.html create mode 100644 chronicle.js create mode 100644 classic.html create mode 100644 map.js create mode 100644 particles.js create mode 100644 portal-nav.js diff --git a/chronicle.html b/chronicle.html new file mode 100644 index 0000000..8382d53 --- /dev/null +++ b/chronicle.html @@ -0,0 +1,146 @@ + + + + + + + 水晶男孩｜十六年約定 + + + + + +
+
+

十六年約定

+
+ SECHSKIES COM' BACK · APRIL 14 · 2016 +
+
+
+ + + + + +
+ + +
+ +
+
+

04 無限挑戰

+

《無限挑戰》是韓國綜藝史上指標性的真人秀節目。「星期六星期六是歌手（六六歌）」企劃，成為水晶男孩 2016 回歸舞台的關鍵起點。

+

第一季掀起 90 年代懷舊熱潮，雖然水晶男孩未能完整出演，卻留下「總有一天要六人完整回到舞台」的遺憾伏筆。

+
+ +
+

06 六六歌第二季

+

第二季改成「為單一團體打造完整回歸敘事」，保密層級更高，連主持群都縮小到劉在錫與 HAHA，避免消息提前走漏。

+

從開場的復古裝扮、試探式線索到真正揭曉團體身份，節目節奏在搞笑與懸念間拉開這場 16 年重逢序章。

+
+ +
+

08 水晶男孩

+

1997 出道後迅速登頂，與同世代頂流並列，短短三年創下極高銷量與舞台紀錄，卻在 2000 無預警解散，留下集體創傷。

+

16 年間六人從未以水晶男孩名義完整合體，這次企劃不只是回憶，而是回應當年未說完的離別。

+
+ +
+

10 召集

+

製作組先與隊長殷志源交涉，再透過隱藏攝影機確認成員意願。大家都希望重組，卻同時知道最困難的拼圖是離開演藝圈多年的高志溶。

+

這個階段的重點不是舞台，而是「願不願意再次站在一起」的心理門檻。

+
+ +
+

11 正式交涉

+

主持人與成員深度對話，回顧解散緣由、舞台記憶、KTV 挑戰與游擊演唱會規則。笑鬧之間，團魂逐漸浮現。

+

同時，節目也把高志溶議題正式擺上檯面：如果不是完整體，這次回歸是否還成立？

+
+ +
+

16 變數

+

排練期間接連出現傷病、手術需求與消息外流，原本理想的游擊演唱會計畫屢次被迫改寫，團隊陷入 B 計畫陰影。

+

在體力與心理都被拉到極限的情況下，成員仍選擇撐住，只為把久違舞台交回給等待 16 年的小黃。

+
+ +
+

19 驚喜

+

當所有人幾乎接受「不完整」時，節目仍悄悄推進最後安排。高志溶與成員的情感張力在此段達到最高點。

+

這份驚喜不是綜藝反轉，而是把六顆水晶的空位真正填回舞台。

+
+ +
+

21 登場

+

眼罩揭開後，滿場黃海與哭聲同時湧現。從《請記得我》到安可，《離別曲》在那一晚變成了「重逢證詞」。

+

2000 的缺憾，在 2016 終於補上。這一頁不是結束，而是團體與粉絲共同完成的回歸章節。

+
+
+ + + + + + + + + + + diff --git a/chronicle.js b/chronicle.js new file mode 100644 index 0000000..2705437 --- /dev/null +++ b/chronicle.js @@ -0,0 +1,57 @@ +(() => { + const reader = document.getElementById("chronicle-reader"); + if (!reader) return; + + const chapters = Array.from(reader.querySelectorAll(".chronicle-chapter")); + const modeButtons = Array.from(document.querySelectorAll(".mode-btn")); + const pager = document.getElementById("chronicle-pager"); + const prevBtn = document.getElementById("prev-chapter"); + const nextBtn = document.getElementById("next-chapter"); + const indicator = document.getElementById("chapter-indicator"); + let currentIndex = 0; + + function updatePagedView() { + chapters.forEach((chapter, index) => { + chapter.style.display = index === currentIndex ? "" : "none"; + chapter.classList.toggle("active", index === currentIndex); + }); + indicator.textContent = `${currentIndex + 1} / ${chapters.length}`; + prevBtn.disabled = currentIndex === 0; + nextBtn.disabled = currentIndex === chapters.length - 1; + } + + function setMode(mode) { + reader.dataset.mode = mode; + modeButtons.forEach((btn) => btn.classList.toggle("active", btn.dataset.mode === mode)); + if (mode === "paged") { + pager.hidden = false; + updatePagedView(); + } else { + pager.hidden = true; + chapters.forEach((chapter) => { + chapter.style.display = ""; + chapter.classList.remove("active"); + }); + } + } + + modeButtons.forEach((button) => { + button.addEventListener("click", () => setMode(button.dataset.mode)); + }); + + prevBtn.addEventListener("click", () => { + if (currentIndex > 0) { + currentIndex -= 1; + updatePagedView(); + } + }); + + nextBtn.addEventListener("click", () => { + if (currentIndex < chapters.length - 1) { + currentIndex += 1; + updatePagedView(); + } + }); + + setMode("scroll"); +})(); diff --git a/classic.html b/classic.html new file mode 100644 index 0000000..4594309 --- /dev/null +++ b/classic.html @@ -0,0 +1,167 @@ + + + + + + + 水晶男孩｜輝煌全盛期 + + + + + +
+
+

輝煌全盛期

+

26 年前的經典作品整理

+ 查看專輯清單 +
+
+ + + + + +
+
+

輝煌全盛期 (精選)

+ + + + + + + + + + + + + + + + + + + + + + + + + +
年份專輯/作品主打歌
1997學園別曲學園別曲 / 男兒之路 (Pom Saeng Pom Sa)
1998Road FighterRoad Fighter / Couple
1999Com'BackCom'Back
+
+
+ + + + + + + + diff --git a/concert.css b/concert.css index 9ffe3d5..b6031d3 100644 --- a/concert.css +++ b/concert.css @@ -2,20 +2,38 @@ body { background-color: var(--); } +.concert-page { + background-color: var(--deep-black); + margin: 0; + padding: 0; +} + .concert-archive-header { + width: 100%; + height: 100vh; + min-height: 100dvh; + background-image: url('img/header.jpg'); + background-position: center center; + background-repeat: no-repeat; + background-size: 108%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; text-align: center; - padding: 100px 20px 80px; - background: #fcfaf2; - /* 延用你的米白背景 */ + padding: 0 20px; + overflow: hidden; + position: relative; } .main-title { font-size: 3.5rem; font-weight: 900; - color: #333; + color: var(--yellow); margin: 0; - letter-spacing: 10px; + letter-spacing: 8px; text-transform: uppercase; + text-shadow: 0 0 30px rgba(255, 221, 0, 0.75); } .subtitle-wrap { @@ -36,8 +54,8 @@ body { } .sub-title { - font-size: 1.2rem; - color: #888; + font-size: 1rem; + color: #d4d4d4; letter-spacing: 6px; margin: 0 25px; } @@ -126,8 +144,9 @@ body { } .concert-container { - max-width: 800px; + max-width: 1200px; margin: 0 auto; + padding: 0 20px; } /* 第一層：演唱會卡片外殼 */ diff --git a/concert.html b/concert.html index e9bb02c..5e29320 100644 --- a/concert.html +++ b/concert.html @@ -1,13 +1,16 @@ + + + SECHSKIES Concert Archive - + - +
@@ -17,13 +20,62 @@
+ +
-
+
2016  |   YELLOW NOTE @@ -151,7 +203,7 @@
-
+
2017-2018  |  20TH ANNIVERSARY @@ -399,7 +451,69 @@
+ + + \ No newline at end of file diff --git a/index.html b/index.html index f9d7776..b087036 100644 --- a/index.html +++ b/index.html @@ -20,19 +20,65 @@ -