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

feat minister_ge.html

Browse Source
This commit is contained in:
jekkinoopy
2026-05-13 23:10:23 +08:00
parent 98f47f0020
commit 2b5a86f6f7
23 changed files with 977 additions and 404 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.cursor/rules/user-scope-and-nav.mdc
+26
View File
@@ -0,0 +1,26 @@
---
description: 未經使用者明確交代，不得擅自開放導覽、改連結或擴充需求範圍（本 repo 含全站導覽與 totoga2 等）。
alwaysApply: true
---
# 使用者意圖與導覽（sechskies）
## 只做被交代的事
- **不得**在未被使用者**明確要求**的情況下：把導覽連結從「籌備中／尚無開放」改成可點、更換 `href` 成真實頁面、從 `COMING_SOON_PAGES` 移除、或把錨點加入 `INDEX_NAV_OPEN_HASHES`。
- **不得**因為「內容已搬到某頁」就自行推論「導覽也應該開放」——導覽是否開放**只聽使用者口述**。
- 若使用者只要求搬內容、刪檔、改站內某段文案，**預設不改** `portal-nav.js` 的開放狀態與連結目標。
## 「傳奇的轉折」導覽（特別記牢）
- 使用者**沒有說要開放**時：導覽上的「傳奇的轉折」必須維持 **尚無開放**（例如維持 `index.html#story` 且 **`#story` 不在 `INDEX_NAV_OPEN_HASHES`**，或等價的籌備中處理）。
- **禁止**在未獲使用者同意下，將該項改為連到 `totoga2.html` 或其他已上線頁面。
## 實作前自檢
- 若變更會影響 `portal-nav.js`（`PORTAL_NAV_INNER_HTML`、`COMING_SOON_PAGES`、`INDEX_NAV_OPEN_HASHES`）：**對照使用者原句**，確認每一項連結的開／關都有被明確交代。
## 名詞對齊（避免做錯檔）
- **頂部橫列導覽（常稱 navbar）**：`portal-nav.js` 注入的 `<nav class="portal-nav" data-portal-nav>`，每一頁頂端黑底那一條。**備份稿／未公開頁**除非使用者**明講要上這條**，否則不要寫進 `PORTAL_NAV_INNER_HTML`。
- **全站頁面索引**：`site-guide.html`（自行開網址），用來列檔案與錨點；**不影響**頂欄是否出現該連結。使用者說「留在全站導覽」常指保留在 **site-guide** 或站內說明，**不等於**要掛進頂欄。
CHANGESET-review.md
+2 -2
View File
@@ -68,14 +68,14 @@
1. `<article class="story-node">` 追加 modifier：`story-node--ebook-ssg2`。
2. 在該篇 `<p>…</p>` 之後新增：
- `<a href="ssg2-ebook.html" class="timeline-ebook-cta">`
- `<a href="totoga2.html#ebook" class="timeline-ebook-cta">`
- Font Awesome：`fa-solid fa-hand-pointer`（`aria-hidden="true"`）
- 文案：「點這裡翻開《六六歌2》紀實電子書」
### 相依性（請檢查）
- 頁面須已載入 Font Awesome（與現有 `<link>` 一致），否則圖示不顯示。
- `ssg2-ebook.html` 須存在且路徑正確。
- `totoga2.html` 須存在；`totoga2.js` 會辨識網址列 `#ebook` 並切換至電子書模式。
---
archive.html
+1 -1
View File
@@ -122,7 +122,7 @@
<footer>
<p>SECHSKIES Fanpage &copy; 2026 - 黃色氣球永遠飄揚</p>
<a href="https://jekkinoopy.github.io/Portfolio/" class="studio-link" target="_blank">
Design by <strong>Jekkinoopy Studio</strong>
Design by <span class="mark_b">Jekkinoopy Studio</span>
</a>
</footer>
chronicle.html
-100
View File
@@ -1,100 +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="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="tablet.css">
</head>
<body class="chronicle-page">
<header class="map-archive-header">
<div class="header-inner">
<h1 class="main-title">傳奇紀實長卷</h1>
<div class="subtitle-wrap">
<span class="sub-title">COM' BACK CHRONICLE</span>
</div>
</div>
</header>
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></nav>
<canvas id="particles"></canvas>
<div class="chronicle-controls content-container">
<button class="mode-btn active" data-mode="scroll">網漫模式（一路滑下去）</button>
<button class="mode-btn" data-mode="paged">分頁模式（上一頁 / 下一頁）</button>
</div>
<main class="content-container chronicle-reader" id="chronicle-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="chronicle-pager" hidden>
<button id="prev-chapter" class="btn">上一頁</button>
<span id="chapter-indicator">1 / 8</span>
<button id="next-chapter" class="btn">下一頁</button>
</div>
<footer>
<p>SECHSKIES Fanpage &copy; 2026 - 黃色氣球永遠飄揚</p>
<a href="https://jekkinoopy.github.io/Portfolio/" class="studio-link" target="_blank">
Design by <strong>Jekkinoopy Studio</strong>
</a>
</footer>
<script src="portal-nav.js"></script>
<script src="particles.js"></script>
<script src="chronicle.js"></script>
</body>
</html>
chronicle.js
-57
View File
@@ -1,57 +0,0 @@
(() => {
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");
})();
concert.html
+1 -1
View File
@@ -572,7 +572,7 @@
<footer>
<p>SECHSKIES Fanpage &copy; 2026 - 黃色氣球永遠飄揚</p>
<a href="https://jekkinoopy.github.io/Portfolio/" class="studio-link" target="_blank">
Design by <strong>Jekkinoopy Studio</strong>
Design by <span class="mark_b">Jekkinoopy Studio</span>
</a>
</footer>
<script>
docs/portal-nav-rules.md
+92
View File
@@ -0,0 +1,92 @@
# 全站導覽列規則（`portal-nav.js`）
之後**每新增一個要上線、可點的 HTML 頁面**，請一併完成導覽更新；規則都集中在 **`portal-nav.js`**。
---
## 1. 必做：把頁面掛進導覽 HTML
在 **`PORTAL_NAV_INNER_HTML`**（約第 123 行起）裡加入連結：
- 依資訊架構放在對應的 **`<li>`** 底下；需要子選單時用 **`portal-submenu`**。
- `href` 使用與其他頁一致的**相對路徑**（例如 `newpage.html`、`index.html#section`）。
- Logo 列不要動：`<a class="logo" href="index.html">…</a>`。
新增或調整完後，所有帶 **`data-portal-nav`** 的 `<nav class="portal-nav">` 都會在載入腳本時被注入同一份 HTML。
---
## 2. 可點 vs「籌備中」：`COMING_SOON_PAGES`
腳本會對導覽裡的連結做 **`applyComingSoonToNav`**：
- 若連結的**檔名**（小寫）出現在 **`COMING_SOON_PAGES`** 這個 `Set` 裡，該連結會被改成 **`href="#"`**、加上 **`data-coming-soon="true"`**，點擊無法前往（顯示隨機籌備中文案）。
- **不要出現在 Set 裡**＝視為已開放，維持真實 `href`。
因此：
| 需求 | 做法 |
|------|------|
| 新頁要**正式開放** | 寫進 `PORTAL_NAV_INNER_HTML`，並**確認檔名不在** `COMING_SOON_PAGES`。若曾暫時關閉，記得從 Set **刪除**該檔名。 |
| 新頁先**占位、不開放** | 可選擇：仍寫進導覽，但把檔名**加進** `COMING_SOON_PAGES`；或暫時不要放進導覽。 |
（目前 Set 內含哪些檔，以 `portal-nav.js` 為準；例如 `totoga2.html` 若已開放，就不應出現在 Set 裡。）
---
## 3. 首頁錨點：`INDEX_NAV_OPEN_HASHES`
指向 **`index.html#...`** 的連結，除了檔名判斷外，還會看 **錨點**：
- 若 `href` 是 `index.html#某錨點`，且該錨點**不在** **`INDEX_NAV_OPEN_HASHES`**，會被當成籌備中（與整頁關閉不同，是「這個錨點未開」）。
- 新增首頁區塊且要從導覽直達時：在 **`INDEX_NAV_OPEN_HASHES`** 加上對應字串，例如 `"#story"`（**僅在使用者要求開放該錨點時**；若約定維持關閉則勿加入）。
---
## 4. 新頁面 HTML 檢查清單
- 在 `<body>` 內適當位置放：
```html
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></nav>
```
- 在 `</body>` 前載入（順序可與現有頁一致）：
```html
<script src="portal-nav.js"></script>
```
- 若該頁有 **`particles.js`**／共用樣式，比照其他內頁一併引入即可。
---
## 5. 刻意不進導覽的頁面
若某頁只給自己用（例如站內索引、草稿），**不要**寫進 `PORTAL_NAV_INNER_HTML` 即可；不必改 `COMING_SOON_PAGES`。
---
## 6. 改完請自檢
1. 從導覽點進新頁是否正常。
2. 若應為開放頁，確認不會變成「尚無開放」、不會被改成 `href="#"`。
3. 若為首頁錨點，確認已加入 `INDEX_NAV_OPEN_HASHES`（若有需要）。
---
## 7. 與使用者約定：開放範圍
- **不要**在未經使用者**明確交代**的情況下，自行把導覽改為「可點進入」或更換目標頁（例如把「傳奇的轉折」改成連到 `totoga2.html`）。
- 「傳奇的轉折」是否開放、連到哪裡，**只依使用者指示**；實作細節亦寫在專案規則 **`.cursor/rules/user-scope-and-nav.mdc`**（給 Cursor 代理讀取）。
---
## 相關檔案
| 檔案 | 用途 |
|------|------|
| `portal-nav.js` | `PORTAL_NAV_INNER_HTML`、`COMING_SOON_PAGES`、`INDEX_NAV_OPEN_HASHES`、籌備中邏輯 |
| `style.css` | `.portal-nav`、子選單、`.nav-current` 等樣式 |
（導覽文案隨機句：`NAV_SOON_PHRASES`，僅影響籌備中連結的提示，與新頁是否開放無關。）
grok.html
+28 -47
View File
@@ -6,6 +6,7 @@
<title>水晶男孩 SECHSKIES | 永恆的六顆水晶</title>
<link rel="stylesheet" href="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="tablet.css">
</head>
@@ -78,59 +79,39 @@
</div>
</section>
<!-- 歷年作品 -->
<section id="discography">
<h2>歷年主要作品</h2>
<div class="timeline">
<div class="timeline-item">
<div class="timeline-content">
<h3>1997 《學園別曲》</h3>
<!-- 歷年作品（與首頁跨時空軌跡相同：merged-storyline） -->
<section id="discography" class="story-archive">
<h2 class="section-title">歷年主要作品</h2>
<div class="subtitle-wrap">
<span class="sub-title">MAIN RELEASES</span>
</div>
<div class="merged-storyline">
<article class="story-node" data-era="1997">
<h3>《學園別曲》出道</h3>
<p>出道專輯，主打〈學園別曲〉、〈사랑하는 너에게〉</p>
</div>
<div class="timeline-year">1997</div>
</div>
<div class="timeline-item">
<div class="timeline-content">
<h3>1997 《Welcome To The Sechskies Land》</h3>
<h3>《Welcome To The Sechskies Land》</h3>
<p>第二張專輯，拿下多個一位</p>
</div>
<div class="timeline-year">1997</div>
</div>
<div class="timeline-item">
<div class="timeline-content">
<h3>1998 《Road Fighter》</h3>
</article>
<article class="story-node" data-era="1998">
<h3>《Road Fighter》</h3>
<p>第三張專輯，經典舞曲代表作</p>
</div>
<div class="timeline-year">1998</div>
</div>
<div class="timeline-item">
<div class="timeline-content">
<h3>1999 《Com' Back》</h3>
</article>
<article class="story-node" data-era="1999">
<h3>《Com' Back》</h3>
<p>第四張專輯，主打〈Com' Back〉</p>
</div>
<div class="timeline-year">1999</div>
</div>
<div class="timeline-item">
<div class="timeline-content">
<h3>2016 《2016 Re-ALBUM》 & 《THREE WORDS》</h3>
</article>
<article class="story-node" data-era="2016">
<h3>《2016 Re-ALBUM》與《THREE WORDS》</h3>
<p>重啟後首支單曲與重製專輯</p>
</div>
<div class="timeline-year">2016</div>
</div>
<div class="timeline-item">
<div class="timeline-content">
<h3>2017 《ANOTHER LIGHT》</h3>
</article>
<article class="story-node" data-era="2017">
<h3>《ANOTHER LIGHT》</h3>
<p>第五張正規專輯</p>
</div>
<div class="timeline-year">2017</div>
</div>
<div class="timeline-item">
<div class="timeline-content">
<h3>2021 《DON'T LOOK BACK》</h3>
</article>
<article class="story-node" data-era="2021">
<h3>《DON'T LOOK BACK》</h3>
<p>近期重要專輯</p>
</div>
<div class="timeline-year">2021</div>
</div>
</article>
</div>
</section>
@@ -139,7 +120,7 @@
<h2>現在的故事線</h2>
<div class="now-content">
<p>2019年後，水晶男孩以四人組合（殷志源、李宰鎮、金在德、張水院）繼續活動。雖然回歸頻率不高，但每一次舞台與演唱會依然充滿90年代的經典魅力與深厚情感。</p>
<p>官方應援色 <strong style="color:#FFDD00;">黃色</strong> 與粉絲名 <strong>YELLOWKIES</strong> 依然是他們最堅強的後盾。</p>
<p>官方應援色 <span class="mark_b">黃色</span> 與粉絲名 <span class="mark_b">YELLOWKIES</span> 依然是他們最堅強的後盾。</p>
<p>無論時間過去多久，這六顆水晶永遠閃耀在韓流歷史的天空。</p>
<br>
<p style="font-size:1.4rem; color:var(--yellow);">「謝謝你們一直陪伴，我們還在這裡。」</p>
img/minister/.gitkeep
View File
index.css
+113 -11
View File
@@ -164,14 +164,18 @@ section.archive-block p:last-child {
box-sizing: border-box;
}
.home-page #start .intro-text {
.home-page #start .intro-text,
.home-page .container>section .intro-text {
max-width: 42rem;
margin-inline: auto;
}
.home-page #start .intro-text p.intro-text,
.home-page #start .core-description,
.home-page #start .call-to-action {
.home-page #start .call-to-action,
.home-page .container>section .intro-text>p.intro-text,
.home-page .container>section .intro-text .core-description,
.home-page .container>section .intro-text .call-to-action {
font-size: 1.0625rem;
line-height: 1.75;
color: #4a4a4a;
@@ -182,6 +186,109 @@ section.archive-block p:last-child {
margin-bottom: 0;
}
/* 與首頁同欄寬：區塊內列表（minister_ge 等） */
.home-page .container>section .intro-text ul {
margin: 0.5rem 0 0;
padding-left: 1.2rem;
color: #4a4a4a;
line-height: 1.75;
font-size: 1.0625rem;
}
.home-page .container>section .intro-text ul li {
margin-bottom: 0.75rem;
}
.home-page .container>section .intro-text ul li:last-child {
margin-bottom: 0;
}
/* 頂部一句話（深色底上，與舊 minister-hero-lead 同角色） */
.home-page .landing-intro {
color: #ececec;
max-width: 48rem;
margin-inline: auto;
}
.home-page .landing-intro p {
font-size: 1.1rem;
line-height: 1.65;
margin: 0;
}
.home-page .landing-intro .mark_b {
color: var(--light-yellow);
}
/* 頁尾 CTA 區（首頁 landing-actions 延伸） */
.home-page .container>.landing-actions {
text-align: center;
margin-top: 0.5rem;
margin-bottom: 2rem;
}
/* minister_ge · 推廣部進化史：年份僅在軸標 data-era；卡內 h3 僅螢幕閱讀器可見 */
.home-page #journey .journey-year-sr {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.home-page #journey .merged-storyline .story-node .journey-sublabel {
display: inline-block;
margin: 0 0 0.5rem;
padding: 0.22rem 0.65rem 0.24rem;
border-radius: 999px;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
color: #4a3d10;
background: rgba(255, 204, 0, 0.22);
border: 1px solid rgba(255, 204, 0, 0.45);
}
.home-page #journey .merged-storyline .story-node .journey-month {
margin: 0.75rem 0 0.3rem;
padding: 0.32rem 0.7rem 0.32rem 0;
border-right: 3px solid var(--primary);
border-left: 0;
font-size: 0.82rem;
font-weight: 800;
letter-spacing: 0.1em;
color: #6b5210;
line-height: 1.35;
background: linear-gradient(270deg, rgba(255, 204, 0, 0.14) 0%, transparent 100%);
}
.home-page #journey .merged-storyline .story-node .journey-sublabel + .journey-month {
margin-top: 0.35rem;
}
.home-page #journey .merged-storyline .story-node .journey-month + p {
margin-top: 0;
margin-bottom: 0.35rem;
}
.home-page #journey .merged-storyline .story-node .journey-milestone {
margin: 1rem 0 0.35rem;
padding-top: 0.5rem;
border-top: 1px dashed rgba(255, 204, 0, 0.45);
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.14em;
color: #8a6910;
}
.home-page #journey .merged-storyline .story-node .journey-milestone + p {
margin-top: 0;
}
.home-page #story > p.intro-text {
max-width: 44rem;
margin-inline: auto;
@@ -191,15 +298,6 @@ section.archive-block p:last-child {
color: #4a4a4a;
}
.home-page .merged-storyline .story-node p {
font-size: 1rem;
line-height: 1.75;
}
.home-page .merged-storyline .story-node h3 {
font-size: 1.0625rem;
}
@media (max-width: 640px) {
.home-page .container {
@@ -209,6 +307,10 @@ section.archive-block p:last-child {
.home-page #start .intro-text p.intro-text,
.home-page #start .core-description,
.home-page #start .call-to-action,
.home-page .container>section .intro-text>p.intro-text,
.home-page .container>section .intro-text .core-description,
.home-page .container>section .intro-text .call-to-action,
.home-page .container>section .intro-text ul,
.home-page #story > p.intro-text {
font-size: 1rem;
}
index.html
+10 -11
View File
@@ -13,7 +13,7 @@
</head>
<body class="home-page">
<!-- <header id="origin">
<header id="origin">
<div class="hero">
<h1>SECHSKIES<br>水晶男孩</h1>
<p>六顆永恆的水晶 • 左右命運的傳奇</p>
@@ -23,7 +23,7 @@
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></nav>
<canvas id="particles"></canvas> -->
<canvas id="particles"></canvas>
<div class="container">
@@ -93,9 +93,9 @@
</div>
</div>
<div class="quote-box">
我們要用這座<span class="mark_b">藝廊般的網站</span>證明：<br>追星的孩子不僅不會變壞，更會因為那份<span
class="mark_b">守護的熱情</span>，<br>讓現在的自己變得比追星前的自己還要厲害!
<div class="slogan-quote">
<span class="slogan-quote__inner">我們要用這座<span class="mark_b">藝廊般的網站</span>證明：<br>追星的孩子不僅不會變壞，更會因為那份<span
class="mark_b">守護的熱情</span>，<br>讓現在的自己變得比追星前的自己還要厲害!</span>
</div>
</section>
@@ -120,7 +120,7 @@
<article class="story-node story-node--ebook-ssg2" data-era="2016">
<h3>傳奇回歸：重逢的感動合體</h3>
<p>透過《無限挑戰》「六六歌2」跨越16年再次重聚，引起全韓黃色氣球海再現。</p>
<a href="ssg2-ebook.html" class="timeline-ebook-cta">
<a href="totoga2.html#ebook" class="timeline-ebook-cta">
<i class="fa-solid fa-hand-pointer" aria-hidden="true"></i>
<span>點這裡翻開《六六歌2》紀實電子書</span>
</a>
@@ -144,12 +144,11 @@
<span class="sub-title">PLOT TWIST</span>
</div>
<p class="intro-text">
像劇情的反轉一樣過癮：這幾個節點，剛好是許多人從「旁觀綜藝」滑進「正式入坑」的轉軌。若想讀對白級細節，可開
<a href="totoga2.html">六六歌2 整合專區</a>（影片／電子書／長卷），或使用獨立長文
<a href="chronicle.html">傳奇紀實長卷</a>。
像劇情的反轉一樣過癮：這幾個節點，剛好是許多人從「旁觀綜藝」滑進「正式入坑」的轉軌。若想讀對白級細節，請開
<a href="totoga2.html">六六歌2 整合專區</a>（影片／電子書／紀實長文八章，同一頁切換模式即可）。
</p>
<div class="story-ebook-cta">
<a href="ssg2-ebook.html" class="btn story-ebook-btn">開啟六六歌2 紀實電子書</a>
<a href="totoga2.html#ebook" class="btn story-ebook-btn">開啟六六歌2 紀實電子書</a>
<a href="totoga2.html" class="btn story-ebook-btn">六六歌2 整合專區</a>
</div>
@@ -181,7 +180,7 @@
<footer>
<p>SECHSKIES Fanpage &copy; 2026 - 黃色氣球永遠飄揚</p>
<a href="https://jekkinoopy.github.io/Portfolio/" class="studio-link" target="_blank">
Design by <strong>Jekkinoopy Studio</strong>
Design by <span class="mark_b">Jekkinoopy Studio</span>
</a>
</footer>
jiwon.html
+1 -1
View File
@@ -40,7 +40,7 @@
<footer>
<p>SECHSKIES Fanpage &copy; 2026 - 黃色氣球永遠飄揚</p>
<a href="https://jekkinoopy.github.io/Portfolio/" class="studio-link" target="_blank">
Design by <strong>Jekkinoopy Studio</strong>
Design by <span class="mark_b">Jekkinoopy Studio</span>
</a>
</footer>
map.html
+1 -1
View File
@@ -503,7 +503,7 @@
<div id="global"></div>
<p>SECHSKIES Fanpage &copy; 2026 - 黃色氣球永遠飄揚</p>
<a href="https://jekkinoopy.github.io/Portfolio/" class="studio-link" target="_blank">
Design by <strong>Jekkinoopy Studio</strong>
Design by <span class="mark_b">Jekkinoopy Studio</span>
</a>
</footer>
minister.html
+131
View File
@@ -0,0 +1,131 @@
<!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="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="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"><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="img/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="img/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="img/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="img/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="img/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="img/minister/image_3baed1.jpg" alt="鋼筆墨水與玻璃杯" width="1040" height="780" loading="lazy">
<img src="img/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="particles.js"></script>
<script src="portal-nav.js"></script>
</body>
</html>
minister_ge.html
+191
View File
@@ -0,0 +1,191 @@
<!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="style.css">
<link rel="stylesheet" href="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="tablet.css">
</head>
<body class="home-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>
<div class="container">
<div class="landing-intro">
<p>關於我：<span class="mark_b">把水晶置入生活，將熱愛驅動為進化的燃料</span></p>
</div>
<section id="intro">
<h2 class="section-title">跨越時空的開端</h2>
<div class="intro-tags" role="list">
<span class="hashtag-chip" role="listitem">#水晶傳教士</span>
<span class="hashtag-chip" role="listitem">#認真魔人</span>
</div>
<div class="intro-text">
<p class="intro-text">
這段旅程始於 2016 年 4 月，透過國民綜藝《無限挑戰》六六歌 2 的回歸企劃，讓原本不認識這組傳奇元祖偶像的我，因一時好奇點開節目。當我回頭回溯那段歷史，才發現他們在 2000
年巔峰解散時，我還未曾參與過那個屬於他們的世紀末。即便如此，隨著節目的鋪陳，我依然被那份熱血、真誠且專業的魅力所震撼，那些搞笑又感動的內容結束了我原本的低潮期，從此深陷其中。
</p>
<div class="slogan-quote">
<span class="slogan-quote__inner">這不只是追星的開始，更成為我自我覺醒的起點。</span>
</div>
<p class="core-description">
當年的節目剛播出，無數新粉集體淪陷，紛紛加入了「水晶廢人」的行列。
在那段瘋狂的歲月裡，我們像是一群共振的靈魂，我也在這股浪潮中開啟了屬於我的進化之路：
身為一名<span class="mark_b">「水晶傳教士」</span>，我秉持著「飯隨偶像，所以要讓自己變得和他們一樣優秀」的信念，將這份狂熱轉化為跨領域的創作動力。身為熱愛學習新事物的「認真魔人」，我的生活分為旺季與淡季：旺季時為愛進化，挑戰各種專業技能；淡季時則在《動森》認真耍廢半年，甚至組建了「水晶森友會」來獲得另類的成就感。
</p>
</div>
</section>
<section id="identity">
<h2 class="section-title">#Identity：為了熱愛而進化的斜槓精神</h2>
<div class="intro-text">
<p class="intro-text">這份熱愛，讓我橫跨領域，長成了現在的模樣：</p>
<p class="core-description">
<span class="hashtag-chip">#水晶推廣部：視覺即是正義</span>
身為專業品牌設計師，我堅持「不看醜東西」的職業傲骨。我親自操刀所有視覺輸出，將對偶像的滿腔熱血轉化為專業的品牌策劃，這是對這份熱愛最基本的尊重。
</p>
<p class="core-description">
<span class="hashtag-chip">#水晶訓練營：自我提升的最高級</span>
為了聽懂歐巴說的每一句話，我開始挑戰韓檢、投身健身、鑽研舞蹈。我用<span class="mark_b">聽力 93 分</span>與<span class="mark_b">增肌減脂 20%</span>
的數據證明：追星是推動自我實現最強大的燃料。
</p>
<p class="core-description">
<span class="hashtag-chip">#全端開發者：技術與藝術的終極交織</span>
我正將多年的設計積累與程式技術縫合，運用數位開發邏輯，搭建一個專屬於這份熱愛的數位平台。這是我為這段十年長跑獻上的最高致敬。
</p>
</div>
</section>
<section id="evolution" class="story-archive">
<h2 class="section-title">熱愛驅動的職涯轉型</h2>
<div class="subtitle-wrap">
<span class="sub-title">GROWTH TIMELINE</span>
</div>
<div class="merged-storyline">
<article class="story-node" data-era="語言">
<h3>語言與紀律：打破隔閡</h3>
<p>為了聽懂歐巴的每一句話，佛系自學後配合師大進修部三個月，順利通過韓檢 TOPIK 2 級。</p>
</article>
<article class="story-node" data-era="設計">
<h3>設計覺醒：從美編到品牌設計</h3>
<p>學習多媒體設計兩個月即入職美編，半年後升任平面設計，現為專業品牌視覺設計師。</p>
</article>
<article class="story-node" data-era="價值">
<h3>價值提升：3.5 年薪資 +10K</h3>
<p>為了賺錢買周邊與去韓國看演唱會，努力提升技能，在 3 年半內成功提升薪資 10K。證明追星也可以很勵志！</p>
</article>
</div>
</section>
<section id="journey" class="story-archive">
<h2 class="section-title">Journey：推廣部進化史</h2>
<div class="subtitle-wrap">
<span class="sub-title">GROWTH TIMELINE (2016 - 2020)</span>
</div>
<div class="merged-storyline">
<article class="story-node" data-era="2016">
<h3 class="journey-year-sr">2016</h3>
<p class="journey-sublabel">命定緣分與實踐</p>
<h4 class="journey-month">04 月</h4>
<p>點開影片，開啟與水晶男孩的命定緣分。</p>
<h4 class="journey-month">09 月</h4>
<p>飛往首爾參加首場演唱會，受「人生導師」的手幅視覺震撼，確立推廣方向。</p>
</article>
<article class="story-node" data-era="2017">
<h3 class="journey-year-sr">2017</h3>
<p class="journey-sublabel">意志與熱舞</p>
<h4 class="journey-month">02 月</h4>
<p>擔任熱舞小組長，成功減重 10 公斤，展現為愛而戰的意志。</p>
</article>
<article class="story-node" data-era="2018">
<h3 class="journey-year-sr">2018</h3>
<p class="journey-sublabel">數位推廣元年</p>
<h4 class="journey-month">06 月</h4>
<p>進入行銷設計班，首日即遇見高志溶並製成首支好評作品，踏出數位策展的第一步。</p>
</article>
<article class="story-node" data-era="2019">
<h3 class="journey-year-sr">2019</h3>
<p class="journey-sublabel">價值提升與自律</p>
<h4 class="journey-month">05 月</h4>
<p>憑藉<span class="mark_b">聽力 93 分</span>通過 TOPIK 2 級合格，同年職涯從美編晉升平面設計師。</p>
<h4 class="journey-month">06－08 月</h4>
<p>發動全方位打歌行動；達成<span class="mark_b">增肌減脂 20%</span> 目標，開啟與偶像同步的自律生活。</p>
<h4 class="journey-milestone">成果</h4>
<p>3.5 年內成功提升薪資 10K，證明熱愛能驅動實質的自我實現。</p>
</article>
<article class="story-node" data-era="2020">
<h3 class="journey-year-sr">2020</h3>
<p class="journey-sublabel">從參與到創作</p>
<h4 class="journey-month">06 月</h4>
<p>在《動森》完成巨型 젝키 Logo 地景，並再次為殷志源製作慶生影片。</p>
<h4 class="journey-month">07－08 月</h4>
<p>正式受邀製作張水院應援小卡，並在職場桌曆中巧妙致敬《新西遊記 5》，實現職涯與熱愛的完美融合。</p>
</article>
</div>
</section>
<section id="training">
<h2 class="section-title">#水晶訓練營：意志力的磨練</h2>
<div class="intro-text">
<p class="intro-text">為了擁有更好的體態跟上歐巴，我將少女心跳成專業舞步，並透過多元運動鍛鍊出強大的紀律：</p>
<ul>
<li><span class="hashtag-chip">#律動</span>熱舞（用身體記憶跨世紀的節奏）。</li>
<li><span class="hashtag-chip">#核心</span>重訓、空中瑜珈。</li>
<li><span class="hashtag-chip">#耐力</span>單車、游泳、爬山。</li>
<li><span class="hashtag-chip">#敏捷</span>桌球。</li>
</ul>
</div>
</section>
<section id="tech-stack">
<h2 class="section-title">全端開發與數位推廣</h2>
<div class="intro-text">
<p class="intro-text">
這十年，我從台下的仰望者進化成了手握技術的守護者。當前最重要的挑戰：朝著前端設計師努力，結合包裝設計的審美與 PHP／MySQL／JS 技術，親手搭建這個數位平台。這份熱愛，就是我最強大的軍功章。
</p>
</div>
<div class="story-grid">
<div class="card">
<h3>Visual &amp; Branding</h3>
<p>品牌包裝設計、視覺藝術策劃；11 種設計軟體掌握（含影像剪輯）。</p>
</div>
<div class="card">
<h3>Full-stack Dev</h3>
<p>HTML, CSS, JS, PHP, MySQL, Cursor AI</p>
</div>
</div>
</section>
<div class="landing-actions">
<a href="index.html#mission" class="btn">回到首頁 · 成立的初衷</a>
</div>
</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="particles.js"></script>
<script src="portal-nav.js"></script>
</body>
</html>
origin.html
-16
View File
@@ -1,16 +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>
<meta http-equiv="refresh" content="0; url=index.html">
<link rel="canonical" href="index.html">
</head>
<body>
<p>淪陷瞬間已與首頁合併。<a href="index.html#origin">前往首頁 Hero</a></p>
</body>
</html>
portal-nav.js
+3 -6
View File
@@ -1,7 +1,7 @@
(() => {
/**
* ── 導覽「尚未開放」連結 ─────────────────────────────────────────
* ① 整個檔案先關：COMING_SOON_PAGES（目前已含長卷／電子書／志源頁／演唱會／典藏／地圖等）。
* ① 整個檔案先關：COMING_SOON_PAGES（目前已含志源頁／演唱會／典藏／地圖／視覺進化論等）。
* ② index.html 細到錨點：INDEX_NAV_OPEN_HASHES。
* ③ 文案 NAV_SOON_PHRASES：每次「滑過或鍵盤聚焦」連結時隨機擇一句（不交錯只靠重整）。
* 浮層、title 與該次互動同步；無障礙用語固定為「尚無開放」（避免標籤隨機跳動）。
@@ -27,12 +27,12 @@
}
const COMING_SOON_PAGES = new Set([
"chronicle.html",
"ssg2-ebook.html",
"jiwon.html",
"concert.html",
"archive.html",
"map.html",
"minister.html",
"minister_ge.html",
]);
/** 目前先開：淪陷瞬間 #origin + 子選單三項 #start / #mission / #timeline */
@@ -129,9 +129,6 @@
<li><a href="index.html#mission">成立的初衷</a></li>
<li><a href="index.html#timeline">跨時空軌跡</a></li>
<li><a href="index.html#story">傳奇的轉折</a></li>
<li><a href="chronicle.html">傳奇紀實長卷</a></li>
<li><a href="ssg2-ebook.html">六六歌2 電子書</a></li>
<li><a href="totoga2.html">六六歌2 整合專區</a></li>
</ul>
</li>
<li><a href="jiwon.html">瘋子與天才</a>
site-guide.html
+64 -53
View File
@@ -26,8 +26,8 @@
<main class="content-container site-guide-main">
<p class="site-guide-lead">
以下為本專案目前所有 HTML 頁面：每張卡片含<strong>連結</strong>、瀏覽器分頁上的<strong>標題</strong>（<code>&lt;title&gt;</code>）、以及主要<strong>區塊／錨點</strong>，方便你開發或簡報時一鍵跳轉。
<strong>此頁未放入全站導覽列</strong>，僅供你自行書籤或輸入網址（例如 <code>site-guide.html</code>）開啟。
以下為本專案目前所有 HTML 頁面：每張卡片含<span class="mark_b">連結</span>、瀏覽器分頁上的<span class="mark_b">標題</span>（<code>&lt;title&gt;</code>）、以及主要<span class="mark_b">區塊／錨點</span>，方便你開發或簡報時一鍵跳轉。
<span class="mark_b">此頁未放入全站導覽列</span>，僅供你自行書籤或輸入網址（例如 <code>site-guide.html</code>）開啟。
</p>
<section class="site-guide-group" aria-labelledby="sg-home">
@@ -47,16 +47,6 @@
</ul>
</article>
<article class="site-guide-card">
<h3><a href="origin.html">origin.html</a></h3>
<p class="site-guide-meta">標題列：<cite>重新導向…</cite></p>
<p class="site-guide-note">Meta refresh → <code>index.html</code>；保留給舊書籤。</p>
<h4>說明</h4>
<ul>
<li><a href="index.html#origin">index.html#origin</a> — 建議改連到首頁錨點</li>
</ul>
</article>
<article class="site-guide-card">
<h3><a href="grok.html">grok.html</a></h3>
<p class="site-guide-meta">標題列：<cite>水晶男孩 SECHSKIES | 永恆的六顆水晶</cite></p>
@@ -72,52 +62,38 @@
</div>
</section>
<section class="site-guide-group" aria-labelledby="sg-ssg2">
<section class="site-guide-group site-guide-group--ssg2" aria-labelledby="sg-ssg2">
<h2 class="section-title" id="sg-ssg2">無限挑戰 · 六六歌 2</h2>
<div class="site-guide-grid">
<article class="site-guide-card">
<article class="site-guide-card site-guide-card--totoga2">
<h3><a href="totoga2.html">totoga2.html</a></h3>
<p class="site-guide-meta">標題列：<cite>水晶男孩｜無限挑戰六六歌2 — 紀實電子書</cite>（與電子書頁同標題列）</p>
<p class="site-guide-note">整合：影片／電子書／傳奇的轉折＋長卷。章節錨點與 <a href="chronicle.html">chronicle.html</a> 相同（<code>#ssg2</code> 等），網址較短。</p>
<h4>長卷章節（錨點）</h4>
<ul>
<li><a href="totoga2.html#challenge">#challenge</a> — 無限挑戰</li>
<li><a href="totoga2.html#ssg2">#ssg2</a> — 六六歌第二季</li>
<li><a href="totoga2.html#sechskies-profile">#sechskies-profile</a> — 水晶男孩</li>
<li><a href="totoga2.html#gather">#gather</a> — 召集</li>
<li><a href="totoga2.html#negotiate">#negotiate</a> — 正式交涉</li>
<li><a href="totoga2.html#variables">#variables</a> — 變數</li>
<li><a href="totoga2.html#surprise">#surprise</a> — 驚喜</li>
<li><a href="totoga2.html#final-stage">#final-stage</a> — 登場</li>
</ul>
</article>
<article class="site-guide-card">
<h3><a href="ssg2-ebook.html">ssg2-ebook.html</a></h3>
<p class="site-guide-meta">標題列：<cite>水晶男孩｜無限挑戰六六歌2 — 紀實電子書</cite></p>
<p class="site-guide-note">FlipHTML5 跨頁電子書全螢幕嵌入。</p>
<h4>結構</h4>
<ul>
<li>標題區 <code>map-archive-header</code></li>
<li>主內容 <code>ebook-main</code> → <code>flip-ebook-shell</code></li>
</ul>
</article>
<p class="site-guide-note">單一入口：影片三集、FlipHTML5 電子書、傳奇的轉折時間軸、紀實長文八章（可切網漫／分頁）。</p>
<article class="site-guide-card">
<h3><a href="chronicle.html">chronicle.html</a></h3>
<p class="site-guide-meta">標題列：<cite>水晶男孩｜傳奇紀實長卷</cite></p>
<p class="site-guide-note">八章長文；<strong>網漫模式</strong>／<strong>分頁模式</strong>。</p>
<h4>章節錨點</h4>
<ul>
<li><a href="chronicle.html#challenge">#challenge</a> — 無限挑戰</li>
<li><a href="chronicle.html#ssg2">#ssg2</a> — 六六歌第二季</li>
<li><a href="chronicle.html#sechskies-profile">#sechskies-profile</a></li>
<li><a href="chronicle.html#gather">#gather</a></li>
<li><a href="chronicle.html#negotiate">#negotiate</a></li>
<li><a href="chronicle.html#variables">#variables</a></li>
<li><a href="chronicle.html#surprise">#surprise</a></li>
<li><a href="chronicle.html#final-stage">#final-stage</a></li>
<div class="site-guide-totoga2-panel">
<p class="site-guide-kicker">怎麼開</p>
<ul class="site-guide-modes site-guide-modes--totoga2">
<li><a href="totoga2.html">影片模式</a> — 預設開啟（三集 Bilibili）。</li>
<li><a href="totoga2.html#ebook">電子書模式</a> — 進頁即切到 FlipHTML5 全螢幕。</li>
<li><a href="totoga2.html#challenge">紀實長文</a> — 自「無限挑戰」章進入；亦可從下方任一章捷徑直達。</li>
</ul>
</div>
<div class="site-guide-totoga2-panel">
<p class="site-guide-kicker">長文章節捷徑</p>
<nav class="site-guide-chapter-nav" aria-label="totoga2 紀實長文章節">
<a href="totoga2.html#challenge">無限挑戰</a>
<a href="totoga2.html#ssg2">六六歌第二季</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>
</nav>
</div>
<p class="site-guide-fine-print">舊檔 <code>ssg2-ebook.html</code>、<code>chronicle.html</code> 已併入 <a href="totoga2.html">totoga2 整合頁</a>。</p>
</article>
</div>
</section>
@@ -147,6 +123,41 @@
</div>
</section>
<section class="site-guide-group" aria-labelledby="sg-minister">
<h2 class="section-title" id="sg-minister">推廣部 · 視覺進化論</h2>
<div class="site-guide-grid">
<article class="site-guide-card">
<h3><a href="minister.html">minister.html</a></h3>
<p class="site-guide-meta">標題列：<cite>水晶男孩推廣部｜視覺進化論</cite></p>
<p class="site-guide-note">頂欄未開放；僅由此全站導覽索引或書籤開啟。圖檔請放 <code>img/minister/</code>（與頁面內檔名一致）。</p>
<h4>區塊錨點</h4>
<ul>
<li><a href="minister.html#intro">#intro</a> — 跨越時空的開端</li>
<li><a href="minister.html#slant">#slant</a> — 斜槓精神</li>
<li><a href="minister.html#journey">#journey</a> — 成長時間軸</li>
<li><a href="minister.html#journey-2016">#journey-2016</a> — 2016</li>
<li><a href="minister.html#journey-2017">#journey-2017</a> — 2017</li>
<li><a href="minister.html#journey-now">#journey-now</a> — 2018 至今</li>
</ul>
</article>
<article class="site-guide-card">
<h3><a href="minister_ge.html">minister_ge.html</a></h3>
<p class="site-guide-meta">標題列：<cite>水晶男孩推廣部｜視覺進化論：認真魔人的進化之路</cite></p>
<p class="site-guide-note">供 Gemini 等工具改稿用的<span class="mark_b">備份頁</span>；頂欄未開放，請由此索引或書籤開啟。</p>
<h4>區塊錨點</h4>
<ul>
<li><a href="minister_ge.html#intro">#intro</a> — 品牌起源</li>
<li><a href="minister_ge.html#identity">#identity</a> — 斜槓精神</li>
<li><a href="minister_ge.html#evolution">#evolution</a> — 進化里程</li>
<li><a href="minister_ge.html#journey">#journey</a> — 推廣部進化史</li>
<li><a href="minister_ge.html#training">#training</a> — 訓練營</li>
<li><a href="minister_ge.html#tech-stack">#tech-stack</a> — 技術實力</li>
</ul>
</article>
</div>
</section>
<section class="site-guide-group" aria-labelledby="sg-media">
<h2 class="section-title" id="sg-media">現場 · 典藏 · 地圖 · 歌詞</h2>
<div class="site-guide-grid">
@@ -196,7 +207,7 @@
<footer>
<p>SECHSKIES Fanpage &copy; 2026 - 黃色氣球永遠飄揚</p>
<a href="https://jekkinoopy.github.io/Portfolio/" class="studio-link" target="_blank">
Design by <strong>Jekkinoopy Studio</strong>
Design by <span class="mark_b">Jekkinoopy Studio</span>
</a>
</footer>
ssg2-ebook.html
-59
View File
@@ -1,59 +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="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="tablet.css">
</head>
<body class="ebook-ssg2-page">
<header class="map-archive-header">
<div class="header-inner">
<h1 class="main-title">無限挑戰 · 六六歌2</h1>
<div class="subtitle-wrap">
<span class="sub-title">INFINITE CHALLENGE · SIX SONGS 2 — E-BOOK</span>
</div>
</div>
</header>
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></nav>
<canvas id="particles"></canvas>
<main class="content-container ebook-main">
<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>
<p class="ebook-back-link">
<a href="index.html#story" 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 <strong>Jekkinoopy Studio</strong>
</a>
</footer>
<script src="particles.js"></script>
<script src="portal-nav.js"></script>
</body>
</html>
style.css
+284 -17
View File
@@ -536,21 +536,41 @@ section {
}
}
/* 金句：獨立於雙欄之下，全區塊寬度內致中 */
.mission-section>.quote-box {
/* 全站：金句 — 語彙對齊 .subtitle-wrap（兩側金線）＋ .sub-title（字距、灰色階） */
.slogan-quote {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: 44rem;
max-width: 52rem;
margin: 2rem auto 0;
padding: 1rem 1.25rem;
background: linear-gradient(135deg, var(--surface-soft) 0%, #fff7da 100%);
border-left: 4px solid var(--primary);
border-radius: 10px;
color: #55420a;
font-size: 1.02rem;
font-weight: 600;
line-height: 1.65;
padding: 0;
background: none;
border: none;
box-shadow: none;
}
.slogan-quote::before,
.slogan-quote::after {
content: "";
flex: 1;
height: 2px;
background-color: var(--primary);
max-width: 56px;
opacity: 0.7;
}
.slogan-quote__inner {
display: block;
margin: 0 18px;
max-width: 40rem;
text-align: center;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
font-size: clamp(0.88rem, 1.65vw, 1.05rem);
font-weight: 600;
letter-spacing: 0.12em;
line-height: 1.75;
color: #5c5c5c;
text-wrap: balance;
}
.mission-visual {
@@ -806,17 +826,22 @@ a {
}
}
.story-node h3 {
.merged-storyline .story-node h3 {
color: #303030;
margin-bottom: 8px;
font-size: 1rem;
font-size: 1.0625rem;
line-height: 1.5;
}
.story-node p {
.merged-storyline .story-node h3:not(:first-of-type) {
margin-top: 1rem;
}
.merged-storyline .story-node p {
color: #575757;
font-size: 0.9rem;
line-height: 1.7;
font-size: 1rem;
line-height: 1.75;
margin: 0 0 10px;
}
@media (max-width: 900px) {
@@ -859,6 +884,11 @@ footer {
font-weight: bold;
}
/* 深色頁尾內的 mark_b：維持可讀與全站黃色語彙 */
footer a .mark_b {
color: var(--primary);
}
/* map.html */
.map-page .map-archive-header,
.map-page .portal-nav,
@@ -1751,3 +1781,240 @@ body.site-guide-page .site-guide-card code {
padding: 0.1em 0.35em;
border-radius: 4px;
}
/* site-guide：六六歌2 區（單卡寬版、頁面連結為主） */
body.site-guide-page .site-guide-group--ssg2 .site-guide-grid {
grid-template-columns: minmax(0, min(100%, 40rem));
justify-content: center;
}
body.site-guide-page .site-guide-card--totoga2 .site-guide-note {
margin-bottom: 1rem;
}
body.site-guide-page .site-guide-totoga2-panel {
margin-top: 0.35rem;
padding: 0.85rem 1rem;
background: rgba(255, 252, 240, 0.9);
border: 1px solid rgba(255, 204, 0, 0.14);
border-radius: 10px;
}
body.site-guide-page .site-guide-totoga2-panel + .site-guide-totoga2-panel {
margin-top: 0.75rem;
}
body.site-guide-page .site-guide-kicker {
margin: 0 0 0.55rem;
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #888;
}
body.site-guide-page .site-guide-modes {
margin: 0;
padding-left: 1.15rem;
color: #3a3a3a;
font-size: 0.9rem;
line-height: 1.65;
}
body.site-guide-page .site-guide-modes .mark_b {
color: #2c2c2c;
}
body.site-guide-page .site-guide-modes--totoga2 a {
font-weight: 800;
color: #5c4810;
text-decoration: none;
}
body.site-guide-page .site-guide-modes--totoga2 a:hover {
text-decoration: underline;
}
body.site-guide-page .site-guide-chapter-nav {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
}
body.site-guide-page .site-guide-chapter-nav a {
display: inline-block;
padding: 0.4rem 0.65rem;
border-radius: 999px;
font-size: 0.86rem;
font-weight: 700;
color: #3a3210;
text-decoration: none;
background: rgba(255, 204, 0, 0.14);
border: 1px solid rgba(255, 204, 0, 0.35);
}
body.site-guide-page .site-guide-chapter-nav a:hover {
background: rgba(255, 204, 0, 0.28);
}
body.site-guide-page .site-guide-fine-print {
margin: 1rem 0 0;
font-size: 0.78rem;
color: #888;
line-height: 1.5;
}
body.site-guide-page .site-guide-fine-print a {
color: #6a5710;
font-weight: 700;
text-decoration: none;
}
body.site-guide-page .site-guide-fine-print a:hover {
text-decoration: underline;
}
/* minister.html — 主欄底距；頂部引句（minister_ge 已改用首頁 .landing-intro） */
body.minister-page main {
padding-bottom: 48px;
}
body.minister-page .minister-hero-lead {
text-align: center;
font-size: 1.1rem;
line-height: 1.65;
color: #ececec;
margin: 0 auto 1.5rem;
max-width: 48rem;
}
body.minister-page .minister-hero-lead .mark_b {
color: var(--light-yellow);
}
body.minister-page .variety-block .intro-text {
color: #333;
line-height: 1.9;
margin: 0 0 10px;
}
body.minister-page .variety-block .slogan-quote + .intro-text {
margin-top: 1rem;
}
body.minister-page .minister-skill-list {
margin: 0.75rem 0 0;
padding-left: 1.2rem;
color: #333;
line-height: 1.75;
}
body.minister-page .minister-skill-list li {
margin-bottom: 0.85rem;
}
/* hashtag 膠囊：minister.html 與 home-page（minister_ge .hashtag-chip）共用 */
body.minister-page .minister-hashtag,
.home-page .hashtag-chip {
display: inline-flex;
align-items: center;
flex-shrink: 0;
padding: 0.3em 0.78em 0.34em;
border-radius: 999px;
font-weight: 700;
font-size: clamp(0.78rem, 1.65vw, 0.9rem);
letter-spacing: 0.06em;
line-height: 1.2;
color: var(--dark-yellow);
background: linear-gradient(180deg, rgba(255, 253, 247, 0.98) 0%, var(--surface-soft) 100%);
border: 1px solid rgba(255, 204, 0, 0.52);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.88) inset,
0 2px 10px rgba(78, 73, 43, 0.07);
margin-right: 0.45em;
vertical-align: 0.1em;
}
body.minister-page .minister-hashtag-row,
.home-page .intro-tags {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 0.55rem 0.7rem;
margin: 0.25rem auto 1.05rem;
max-width: 44rem;
}
body.minister-page .minister-hashtag-row .minister-hashtag,
.home-page .intro-tags .hashtag-chip {
margin-right: 0;
}
body.minister-page .minister-journey {
margin-top: 0.5rem;
}
body.minister-page .minister-journey > .section-title {
margin-bottom: 0.35rem;
}
body.minister-page .minister-journey .subtitle-wrap {
margin-top: 0;
margin-bottom: 1rem;
}
body.minister-page .minister-journey .sub-title {
color: #b0b0b0;
}
body.minister-page .merged-storyline .story-node p.minister-month {
font-weight: 800;
color: #8a6910;
margin: 1rem 0 0.4rem;
letter-spacing: 0.02em;
}
body.minister-page .merged-storyline .story-node h3 + p.minister-month {
margin-top: 0.35rem;
}
body.minister-page .minister-photo {
margin: 0.6rem 0 0;
}
body.minister-page .minister-photo img {
display: block;
width: 100%;
max-width: 520px;
margin: 0 auto;
height: auto;
border-radius: 12px;
border: 1px solid rgba(255, 204, 0, 0.28);
box-shadow: 0 10px 26px rgba(0, 0, 0, 0.1);
}
body.minister-page .minister-photo--dual {
display: grid;
gap: 14px;
grid-template-columns: 1fr 1fr;
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
body.minister-page .minister-photo--dual img {
max-width: none;
width: 100%;
}
body.minister-page .minister-back {
text-align: center;
margin: 2rem 0 0;
}
@media (max-width: 640px) {
body.minister-page .minister-photo--dual {
grid-template-columns: 1fr;
}
}
sunghoon.html
+1 -1
View File
@@ -40,7 +40,7 @@
<footer>
<p>SECHSKIES Fanpage &copy; 2026 - 黃色氣球永遠飄揚</p>
<a href="https://jekkinoopy.github.io/Portfolio/" class="studio-link" target="_blank">
Design by <strong>Jekkinoopy Studio</strong>
Design by <span class="mark_b">Jekkinoopy Studio</span>
</a>
</footer>
totoga2.html
+3 -4
View File
@@ -89,8 +89,7 @@
<span class="sub-title">PLOT TWIST</span>
</div>
<p class="intro-text">
與首頁相同的節點提要；點下方連結可跳到本頁「紀實長卷」對應章節。完整獨立長卷仍可在
<a href="chronicle.html">傳奇紀實長卷</a> 閱讀。
與首頁相同的節點提要；點下方連結可跳到本頁「紀實長文」對應章節（八章皆在本頁，無需另開檔案）。
</p>
<div class="merged-storyline">
@@ -181,13 +180,13 @@
<p class="ebook-back-link content-container">
<a href="index.html#story" class="btn">回到首頁 · 傳奇的轉折</a>
<a href="ssg2-ebook.html" class="btn">僅開電子書全螢幕版</a>
<a href="#ebook" 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 <strong>Jekkinoopy Studio</strong>
Design by <span class="mark_b">Jekkinoopy Studio</span>
</a>
</footer>
totoga2.js
+9
View File
@@ -76,7 +76,12 @@
setHubPanel(initialHub);
setReaderMode("scroll");
function applyLocationHashNavigation() {
const hash = (location.hash || "").slice(1);
if (hash === "ebook") {
setHubPanel("ebook");
return;
}
if (hash && document.getElementById(hash)) {
setHubPanel("reader");
setReaderMode("scroll");
@@ -85,4 +90,8 @@
document.getElementById(hash)?.scrollIntoView({ behavior: "smooth", block: "start" });
});
}
}
applyLocationHashNavigation();
window.addEventListener("hashchange", applyLocationHashNavigation);
})();