fix 調整資料夾結構
This commit is contained in:
+190
@@ -0,0 +1,190 @@
|
||||
<!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="../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>
|
||||
|
||||
<!-- 英雄區 -->
|
||||
<header>
|
||||
<canvas id="particles"></canvas>
|
||||
<div class="hero">
|
||||
<h1>SECHSKIES<br>水晶男孩</h1>
|
||||
<p>六顆永恆的水晶 • 左右命運的傳奇</p>
|
||||
<a href="#story" class="btn">探索他們的故事</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 故事背景 -->
|
||||
<section id="story">
|
||||
<h2>故事背景</h2>
|
||||
<div class="story-grid">
|
||||
<div class="card">
|
||||
<h3>出道與巔峰（1997-2000）</h3>
|
||||
<p>1997年4月15日，水晶男孩以《學園別曲》正式出道，是韓國第一代偶像團體，與H.O.T.並稱為90年代後期兩大山脈。團名源自德語「六顆水晶」，象徵六位成員能左右命運。</p>
|
||||
<p>分為「黑水晶」（殷志源、李宰鎮、金在德 — Rap與舞蹈）和「白水晶」（姜成勳、高志溶、張水院 — 主唱）。</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>解散與重逢（2000-2016）</h3>
|
||||
<p>2000年5月20日正式解散，成員各自發展。2016年4月14日，時隔16年在《無限挑戰》「六六歌」特輯驚喜合體，引起巨大迴響。</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>YG時期與現在</h3>
|
||||
<p>2016年5月，除高志溶外五人與YG娛樂簽約重啟活動。2019年起調整為四人組合（殷志源、李宰鎮、金在德、張水院），繼續以經典魅力感動粉絲。</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 成員介紹 -->
|
||||
<section id="members">
|
||||
<h2>六位永恆成員</h2>
|
||||
<div class="members-grid">
|
||||
<div class="member">
|
||||
<img src="img/Eun Ji Won.jpeg" alt="殷志源">
|
||||
<h3>殷志源 (Eun Ji Won)</h3>
|
||||
<p>Leader • Rap • Black Kies</p>
|
||||
</div>
|
||||
<div class="member">
|
||||
<img src="https://via.placeholder.com/300x400/FFDD00/000?text=李宰鎮" alt="李宰鎮">
|
||||
<h3>李宰鎮 (Lee Jae Jin)</h3>
|
||||
<p>Rap • Dance • Black Kies</p>
|
||||
</div>
|
||||
<div class="member">
|
||||
<img src="https://via.placeholder.com/300x400/FFDD00/000?text=金在德" alt="金在德">
|
||||
<h3>金在德 (Kim Jae Duc)</h3>
|
||||
<p>Rap • Dance • Black Kies</p>
|
||||
</div>
|
||||
<div class="member">
|
||||
<img src="https://via.placeholder.com/300x400/FFDD00/000?text=姜成勳" alt="姜成勳">
|
||||
<h3>姜成勳 (Kang Sung Hoon)</h3>
|
||||
<p>Main Vocal • White Kies</p>
|
||||
</div>
|
||||
<div class="member">
|
||||
<img src="https://via.placeholder.com/300x400/FFDD00/000?text=高志溶" alt="高志溶">
|
||||
<h3>高志溶 (Ko Ji Yong)</h3>
|
||||
<p>Vocal • White Kies</p>
|
||||
</div>
|
||||
<div class="member">
|
||||
<img src="https://via.placeholder.com/300x400/FFDD00/000?text=張水院" alt="張水院">
|
||||
<h3>張水院 (Jang Su Won)</h3>
|
||||
<p>Vocal • White Kies</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 歷年作品（與首頁跨時空軌跡相同：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>
|
||||
<h3>《Welcome To The Sechskies Land》</h3>
|
||||
<p>第二張專輯，拿下多個一位</p>
|
||||
</article>
|
||||
<article class="story-node" data-era="1998">
|
||||
<h3>《Road Fighter》</h3>
|
||||
<p>第三張專輯，經典舞曲代表作</p>
|
||||
</article>
|
||||
<article class="story-node" data-era="1999">
|
||||
<h3>《Com' Back》</h3>
|
||||
<p>第四張專輯，主打〈Com' Back〉</p>
|
||||
</article>
|
||||
<article class="story-node" data-era="2016">
|
||||
<h3>《2016 Re-ALBUM》與《THREE WORDS》</h3>
|
||||
<p>重啟後首支單曲與重製專輯</p>
|
||||
</article>
|
||||
<article class="story-node" data-era="2017">
|
||||
<h3>《ANOTHER LIGHT》</h3>
|
||||
<p>第五張正規專輯</p>
|
||||
</article>
|
||||
<article class="story-node" data-era="2021">
|
||||
<h3>《DON'T LOOK BACK》</h3>
|
||||
<p>近期重要專輯</p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 現在的故事線 -->
|
||||
<section id="now">
|
||||
<h2>現在的故事線</h2>
|
||||
<div class="now-content">
|
||||
<p>2019年後，水晶男孩以四人組合（殷志源、李宰鎮、金在德、張水院）繼續活動。雖然回歸頻率不高，但每一次舞台與演唱會依然充滿90年代的經典魅力與深厚情感。</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>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<p>© 2026 水晶男孩 SECHSKIES 粉絲致敬網頁 | 應援色：黃色 • YELLOWKIES Forever</p>
|
||||
</footer>
|
||||
|
||||
<!-- 簡單粒子效果（黃色水晶粒子） -->
|
||||
<script>
|
||||
const canvas = document.getElementById('particles');
|
||||
const ctx = canvas.getContext('2d');
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
|
||||
let particles = [];
|
||||
class Particle {
|
||||
constructor() {
|
||||
this.x = Math.random() * canvas.width;
|
||||
this.y = Math.random() * canvas.height;
|
||||
this.size = Math.random() * 4 + 1;
|
||||
this.speedX = Math.random() * 0.5 - 0.25;
|
||||
this.speedY = Math.random() * 0.5 + 0.2;
|
||||
}
|
||||
update() {
|
||||
this.x += this.speedX;
|
||||
this.y += this.speedY;
|
||||
if (this.y > canvas.height) this.y = 0;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = '#FFDD00';
|
||||
ctx.globalAlpha = 0.6;
|
||||
ctx.beginPath();
|
||||
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
}
|
||||
}
|
||||
|
||||
function init() {
|
||||
particles = [];
|
||||
for (let i = 0; i < 80; i++) {
|
||||
particles.push(new Particle());
|
||||
}
|
||||
}
|
||||
|
||||
function animate() {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
for (let p of particles) {
|
||||
p.update();
|
||||
p.draw();
|
||||
}
|
||||
requestAnimationFrame(animate);
|
||||
}
|
||||
|
||||
window.addEventListener('resize', () => {
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
init();
|
||||
});
|
||||
|
||||
init();
|
||||
animate();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,182 @@
|
||||
/* 歌詞頁：載入於 style.css 之後，並以 .lyrics-page 提高權重，避免被全站 table / body 洗版 */
|
||||
|
||||
body.lyrics-page {
|
||||
--lyrics-bg: #2a2a2a;
|
||||
--lyrics-paper: #faf6e8;
|
||||
--lyrics-accent: #f5dfa8;
|
||||
--lyrics-muted: #c9c2a8;
|
||||
|
||||
font-family: "Nanum Pen Script", cursive;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
background-color: var(--lyrics-bg) !important;
|
||||
color: #fff !important;
|
||||
margin: 0 !important;
|
||||
padding: clamp(1rem, 4vw, 2.5rem) !important;
|
||||
min-height: 100dvh;
|
||||
line-height: 1.55;
|
||||
overflow-x: hidden;
|
||||
font-size: clamp(18px, 2.8vw, 26px);
|
||||
}
|
||||
|
||||
body.lyrics-page h1 {
|
||||
color: var(--lyrics-accent);
|
||||
font-size: clamp(1.75rem, 4vw, 2.5rem);
|
||||
text-align: center;
|
||||
margin: 0 0 1.25rem;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
body.lyrics-page .lyrics-layout {
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
body.lyrics-page .lyrics-main-table {
|
||||
width: 100%;
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
table-layout: fixed;
|
||||
border-collapse: separate;
|
||||
border-spacing: clamp(0.75rem, 2.5vw, 1.75rem);
|
||||
background: transparent !important;
|
||||
box-shadow: none !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
body.lyrics-page .lyrics-main-table > tbody > tr > td {
|
||||
padding: 0 !important;
|
||||
border: none !important;
|
||||
border-bottom: none !important;
|
||||
text-align: left !important;
|
||||
color: inherit !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
/* 兩欄等寬 + 同一套「卡片区」留白與邊框，左右才對稱 */
|
||||
body.lyrics-page .main-left,
|
||||
body.lyrics-page .lyrics-text-cell,
|
||||
body.lyrics-page .lyrics-map-cell,
|
||||
body.lyrics-page .lyrics-contact-cell {
|
||||
width: 50%;
|
||||
max-width: none;
|
||||
box-sizing: border-box;
|
||||
padding: clamp(0.85rem, 2vw, 1.15rem) clamp(0.9rem, 2.2vw, 1.25rem) !important;
|
||||
border-radius: 14px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
background: rgba(0, 0, 0, 0.22);
|
||||
}
|
||||
|
||||
body.lyrics-page .main-left,
|
||||
body.lyrics-page .lyrics-text-cell {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
body.lyrics-page .lyrics-map-cell {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
body.lyrics-page .lyrics-contact-cell {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
body.lyrics-page .main-left iframe {
|
||||
display: block;
|
||||
width: 100%;
|
||||
border: 0;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
|
||||
body.lyrics-page .songInfo {
|
||||
color: var(--lyrics-accent);
|
||||
display: grid;
|
||||
grid-template-columns: max-content 1fr;
|
||||
gap: 0.4rem 0.75rem;
|
||||
align-items: baseline;
|
||||
font-size: 1rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
body.lyrics-page .songInfo dt {
|
||||
font-weight: 700;
|
||||
color: var(--lyrics-muted);
|
||||
}
|
||||
|
||||
body.lyrics-page .songInfo dd {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body.lyrics-page .lyrics-main-table p {
|
||||
color: #fff;
|
||||
line-height: 1.55;
|
||||
font-size: clamp(1rem, 2.2vw, 1.35rem);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body.lyrics-page .lyrics-map-cell iframe {
|
||||
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
|
||||
body.lyrics-page .lyrics-contact-cell .contact {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
body.lyrics-page a {
|
||||
color: #b8e6ff;
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 0.15em;
|
||||
}
|
||||
|
||||
body.lyrics-page a:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
body.lyrics-page .contact {
|
||||
color: var(--lyrics-paper);
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
body.lyrics-page .contact h3 {
|
||||
color: var(--lyrics-accent);
|
||||
font-size: 1.15rem;
|
||||
margin: 0.35rem 0 0.5rem;
|
||||
font-family: "Nanum Pen Script", cursive;
|
||||
}
|
||||
|
||||
body.lyrics-page .contact img {
|
||||
max-height: 36px;
|
||||
width: auto;
|
||||
display: block;
|
||||
margin-bottom: 0.35rem;
|
||||
}
|
||||
|
||||
body.lyrics-page .contact i {
|
||||
font-size: 0.75em;
|
||||
margin-right: 0.35rem;
|
||||
color: var(--lyrics-accent);
|
||||
}
|
||||
|
||||
@media (max-width: 820px) {
|
||||
body.lyrics-page .lyrics-main-table,
|
||||
body.lyrics-page .lyrics-main-table tbody,
|
||||
body.lyrics-page .lyrics-main-table tr,
|
||||
body.lyrics-page .lyrics-main-table td {
|
||||
display: block;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
body.lyrics-page .lyrics-main-table {
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
body.lyrics-page .main-left {
|
||||
max-width: none;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
body.lyrics-page .lyrics-main-table > tbody > tr > td + td {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,118 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>세 단어 (THREE WORDS) — SECHSKIES</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
<link rel="stylesheet" href="../style.css">
|
||||
<link rel="stylesheet" href="lyrics.css">
|
||||
<link rel="stylesheet" href="../tablet.css">
|
||||
</head>
|
||||
|
||||
<body class="lyrics-page">
|
||||
<div class="lyrics-layout">
|
||||
<h1>세 단어 (THREE WORDS)</h1>
|
||||
<table class="lyrics-main-table">
|
||||
<tr>
|
||||
<td class="main-left">
|
||||
<iframe width="560" height="315" style="aspect-ratio: 16 / 9; max-width: 100%; height: auto; min-height: 200px;"
|
||||
src="https://www.youtube.com/embed/m7Zt_p9S-yg"
|
||||
title="SECHSKIES - ‘세 단어 (THREE WORDS)’ M/V" allowfullscreen
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
referrerpolicy="strict-origin-when-cross-origin"></iframe>
|
||||
<dl class="songInfo">
|
||||
<dt>Artist</dt>
|
||||
<dd>SECHSKIES</dd>
|
||||
<dt>Album</dt>
|
||||
<dd>2016 Re-ALBUM</dd>
|
||||
<dt>Release Date</dt>
|
||||
<dd>2016년</dd>
|
||||
<dt>Genre</dt>
|
||||
<dd>K-Pop</dd>
|
||||
</dl>
|
||||
</td>
|
||||
<td class="lyrics-text-cell">
|
||||
<p>다신 볼 수 없을 것만 같던<br>
|
||||
그대가 내 앞에 서 있네요<br>
|
||||
지킬 수 있을지 모르며 약속했던<br>
|
||||
그 언젠가가 지금인 거군요<br>
|
||||
단 하루도 널, 널 잊었던 적<br>
|
||||
없다는 말은 거짓말이겠지만<br>
|
||||
그대가 곁에 있지 않을 때 외로웠죠 (외로웠죠)<br>
|
||||
한 순간도 널, 널 잊었던 적<br>
|
||||
없다는 말이 무슨 의미겠어요<br>
|
||||
지금 여기 우리 세 단어면 돼요<br>
|
||||
I just wanna be with you<br>
|
||||
내가 사는 이유<br>
|
||||
다시는 멀리 가지 않을게요<br>
|
||||
I'll always be here for you<br>
|
||||
세월이 지난 후<br>
|
||||
세상이 다시 우릴 갈라놔도<br>
|
||||
떠나야만 해도<br>
|
||||
멀리 있진 않을게요 uh<br>
|
||||
참 멀리 멀리 멀리도 돌아왔네요<br>
|
||||
지독한 세월과 세상에게 수없이 꺾이고 (꺾이고)<br>
|
||||
발밑엔 낙엽이 뒤덮이고 이 야윈 모습이지만<br>
|
||||
여기 여전히 그대 곁에 서있죠<br>
|
||||
I missed you 한 순간도 편히 잠든 적 없어 (없어)<br>
|
||||
잘 지낸 것 같겠지만 I missed you<br>
|
||||
한 순간도 진짜 웃은 적 없어 (없어)<br>
|
||||
한 순간도 널, 널 잊었던 적<br>
|
||||
없다는 말이 무슨 의미겠어요<br>
|
||||
지금 여기 우리 세 단어면 돼요<br>
|
||||
I just wanna be with you<br>
|
||||
내가 사는 이유<br>
|
||||
다시는 멀리 가지 않을게요<br>
|
||||
I'll always be here for you<br>
|
||||
세월이 지난 후<br>
|
||||
세상이 다시 우릴 갈라놔도<br>
|
||||
떠나야만 해도<br>
|
||||
멀리 있진 않을게요<br>
|
||||
시간은 참 무섭게도 가네요<br>
|
||||
붙잡으려 해도 잡히지 않을 거예요<br>
|
||||
언젠가 다시 헤어지게 되어도<br>
|
||||
여기 가까이 서있을게<br>
|
||||
지금 여기 우리<br>
|
||||
I just wanna be with you<br>
|
||||
내가 사는 이유 (miss you baby)<br>
|
||||
다시는 멀리 가지 않을게요 (가지 않을게요)<br>
|
||||
I'll always be here for you<br>
|
||||
세월이 지난 후<br>
|
||||
세상이 다시 우릴 갈라놔도 (우릴 갈라놔도)<br>
|
||||
떠나야만 해도 (떠나야만 해도)<br>
|
||||
멀리 (멀리) 있진 않을게요<br>
|
||||
멀리 있진 않을게<br>
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="lyrics-map-cell">
|
||||
<iframe
|
||||
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3163.2574996244366!2d126.9052587762962!3d37.54899662513289!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x357c992bb3f6a887%3A0x6058954f87325221!2sYG%20Entertainment!5e0!3m2!1szh-TW!2stw!4v1776239000614!5m2!1szh-TW!2stw"
|
||||
width="100%" style="aspect-ratio: 16 / 9; border: 0; border-radius: 10px; display: block; min-height: 200px;"
|
||||
allowfullscreen loading="lazy"
|
||||
referrerpolicy="no-referrer-when-downgrade"></iframe>
|
||||
</td>
|
||||
<td class="lyrics-contact-cell">
|
||||
<div class="contact">
|
||||
<img src="https://ygfamily.com/home/assets/images/f_logo.svg" alt="YG Entertainment logo">
|
||||
<h3>YG Entertainment</h3>
|
||||
<p>
|
||||
<i class="fa-solid fa-map-location-dot"></i> Huiujeong-ro 1-gil, Mapo-gu, Seoul, South Korea<br>
|
||||
<i class="fas fa-globe"></i> <a href="https://www.ygfamily.com/"
|
||||
target="_blank" rel="noopener noreferrer">https://www.ygfamily.com/</a><br>
|
||||
<i class="fas fa-phone"></i> +82231421104
|
||||
</p>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -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 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="../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 © 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>
|
||||
@@ -0,0 +1,243 @@
|
||||
<!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 slogan-quote--awakening">
|
||||
<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.01</h4>
|
||||
<p>進入行銷設計班，在 Premiere 課程首日即以高志溶為素材完成作業，獲得好評並正式開啟數位策展元年。</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>
|
||||
</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 地景；再次運用 Premiere 實力為殷志源製作慶生影片。</p>
|
||||
<h4 class="journey-month">07.15</h4>
|
||||
<p>受邀製作首份張水院實體應援小卡，正式從仰望者進化為實體應援的創作者。</p>
|
||||
<h4 class="journey-month">08 月</h4>
|
||||
<p>在公司桌曆巧妙致敬《新西遊記 5》，手繪「無臉男」與「陰間使者」，實現職涯美學與熱愛的完美融合。</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 & 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 © 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>
|
||||
@@ -0,0 +1,221 @@
|
||||
<!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="site-guide-page">
|
||||
<header class="map-archive-header">
|
||||
<div class="header-inner">
|
||||
<h1 class="main-title">全站導覽</h1>
|
||||
<div class="subtitle-wrap">
|
||||
<span class="sub-title">SITE MAP · 頁面索引</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></nav>
|
||||
|
||||
<canvas id="particles"></canvas>
|
||||
|
||||
<main class="content-container site-guide-main">
|
||||
<p class="site-guide-lead">
|
||||
以下為本專案目前所有 HTML 頁面：每張卡片含<span class="mark_b">連結</span>、瀏覽器分頁上的<span
|
||||
class="mark_b">標題</span>（<code><title></code>）、以及主要<span
|
||||
class="mark_b">區塊／錨點</span>，方便你開發或簡報時一鍵跳轉。
|
||||
<span class="mark_b">此頁未放入全站導覽列</span>，僅供你自行書籤或輸入網址（例如 <code>extra/site-guide.html</code>）開啟。
|
||||
</p>
|
||||
|
||||
<section class="site-guide-group" aria-labelledby="sg-home">
|
||||
<h2 class="section-title" id="sg-home">首頁與入口</h2>
|
||||
<div class="site-guide-grid">
|
||||
<article class="site-guide-card">
|
||||
<h3><a href="../index.html">index.html</a></h3>
|
||||
<p class="site-guide-meta">標題列：<cite>SECHSKIES - 水晶男孩傳奇介紹</cite></p>
|
||||
<p class="site-guide-note">主視覺與導覽列；內文以區塊錨點分段。</p>
|
||||
<h4>區塊錨點</h4>
|
||||
<ul>
|
||||
<li><a href="../index.html#origin">#origin</a> — 淪陷瞬間（Hero，與導覽一致）</li>
|
||||
<li><a href="../index.html#start">#start</a> — 好奇的開端</li>
|
||||
<li><a href="../index.html#mission">#mission</a> — 成立的初衷</li>
|
||||
<li><a href="../index.html#timeline">#timeline</a> — 跨時空軌跡</li>
|
||||
<li><a href="../index.html#story">#story</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>
|
||||
<p class="site-guide-note">單頁多區塊版型（實驗／簡報用）。</p>
|
||||
<h4>區塊錨點</h4>
|
||||
<ul>
|
||||
<li><a href="grok.html#story">#story</a></li>
|
||||
<li><a href="grok.html#members">#members</a></li>
|
||||
<li><a href="grok.html#discography">#discography</a></li>
|
||||
<li><a href="grok.html#now">#now</a></li>
|
||||
</ul>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<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 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">單一入口：影片三集、FlipHTML5 電子書、傳奇的轉折時間軸、紀實長文八章（可切網漫／分頁）。</p>
|
||||
|
||||
<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>
|
||||
|
||||
<section class="site-guide-group" aria-labelledby="sg-members">
|
||||
<h2 class="section-title" id="sg-members">成員與紀實</h2>
|
||||
<div class="site-guide-grid">
|
||||
<article class="site-guide-card">
|
||||
<h3><a href="../jiwon/jiwon.html">jiwon/jiwon.html</a></h3>
|
||||
<p class="site-guide-meta">標題列：<cite>水晶男孩｜瘋子與天才</cite></p>
|
||||
<h4>區塊錨點</h4>
|
||||
<ul>
|
||||
<li><a href="../jiwon/jiwon.html#variety">#variety</a> — 瘋狂出演中</li>
|
||||
<li><a href="../jiwon/jiwon.html#stage">#stage</a> — 隊長的氣場</li>
|
||||
</ul>
|
||||
</article>
|
||||
|
||||
<article class="site-guide-card">
|
||||
<h3><a href="sunghoon.html">sunghoon.html</a></h3>
|
||||
<p class="site-guide-meta">標題列：<cite>水晶男孩｜消失的真相</cite></p>
|
||||
<h4>區塊錨點</h4>
|
||||
<ul>
|
||||
<li><a href="sunghoon.html#truth">#truth</a></li>
|
||||
<li><a href="sunghoon.html#voice">#voice</a></li>
|
||||
</ul>
|
||||
</article>
|
||||
</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">
|
||||
<article class="site-guide-card">
|
||||
<h3><a href="../concert/concert.html">concert/concert.html</a></h3>
|
||||
<p class="site-guide-meta">標題列：<cite>SECHSKIES Concert Archive</cite></p>
|
||||
<h4>區塊錨點</h4>
|
||||
<ul>
|
||||
<li><a href="../concert/concert.html#stage-now">#stage-now</a> — 永恆的重逢</li>
|
||||
<li><a href="../concert/concert.html#stage-past">#stage-past</a> — 燦爛的最初</li>
|
||||
</ul>
|
||||
</article>
|
||||
|
||||
<article class="site-guide-card">
|
||||
<h3><a href="../albums/albums.html">albums/albums.html</a></h3>
|
||||
<p class="site-guide-meta">標題列：<cite>水晶男孩｜黃色留聲機</cite></p>
|
||||
<h4>區塊錨點</h4>
|
||||
<ul>
|
||||
<li><a href="../albums/albums.html#new">#new</a> — 啟動新篇章</li>
|
||||
<li><a href="../albums/albums.html#classic">#classic</a> — 輝煌全盛期</li>
|
||||
</ul>
|
||||
</article>
|
||||
|
||||
<article class="site-guide-card">
|
||||
<h3><a href="../map/map.html">map/map.html</a></h3>
|
||||
<p class="site-guide-meta">標題列：<cite>SECHSKIES 台灣行程地圖</cite></p>
|
||||
<h4>區塊錨點</h4>
|
||||
<ul>
|
||||
<li><a href="../map/map.html#taipei">#taipei</a> — 台北聖地（主版面）</li>
|
||||
<li><a href="../map/map.html#global">#global</a> — 海外遠征</li>
|
||||
</ul>
|
||||
</article>
|
||||
|
||||
<article class="site-guide-card">
|
||||
<h3><a href="lyrics.html">lyrics.html</a></h3>
|
||||
<p class="site-guide-meta">標題列：<cite>세 단어 (THREE WORDS) — SECHSKIES</cite></p>
|
||||
<p class="site-guide-note"><code><html lang="ko"></code>；歌詞＋YouTube 嵌入單頁。</p>
|
||||
<h4>結構</h4>
|
||||
<ul>
|
||||
<li><code>.lyrics-layout</code> — 主標＋表格雙欄</li>
|
||||
</ul>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<p>SECHSKIES Fanpage © 2026 - 黃色氣球永遠飄揚</p>
|
||||
<a href="https://jekkinoopy.github.io/Portfolio/" class="studio-link" target="_blank">
|
||||
Design by <span class="mark_b">Jekkinoopy Studio</span>
|
||||
</a>
|
||||
</footer>
|
||||
|
||||
<script src="../particles.js"></script>
|
||||
<script src="../portal-nav.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,51 @@
|
||||
<!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">VOICE · RAIN · NARRATIVE</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">
|
||||
<section id="truth" class="variety-block">
|
||||
<h2 class="section-title">還原那場雨</h2>
|
||||
<p class="intro-text">流言與標題往往跑在當事人之前；這裡不急著下判決，而是把時間軸、公開說法與作品留痕擺在同一視線高度，讓讀的人自己拼出輪廓。</p>
|
||||
<p class="intro-text">此區預留給你之後補上的整理與引用來源；先立欄位，避免情緒性的單句蓋過事實層次。</p>
|
||||
</section>
|
||||
<section id="voice" class="variety-block">
|
||||
<h2 class="section-title">被掩蓋的主唱</h2>
|
||||
<p class="intro-text">White Kies 的高音與哭腔，曾在無數主打裡替團名撐住「好聽」這兩個字；當鏡頭轉向別處，那些聲線與和聲仍留在音檔裡，等耳朵重新打開。</p>
|
||||
<p class="intro-text">之後可在此收錄現場、翻唱、與合作曲目，讓「主唱」不被標籤蓋過，而被聽見。</p>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<p>SECHSKIES Fanpage © 2026 - 黃色氣球永遠飄揚</p>
|
||||
<a href="https://jekkinoopy.github.io/Portfolio/" class="studio-link" target="_blank">
|
||||
Design by <span class="mark_b">Jekkinoopy Studio</span>
|
||||
</a>
|
||||
</footer>
|
||||
|
||||
<script src="../portal-nav.js"></script>
|
||||
<script src="../particles.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,198 @@
|
||||
<!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 totoga2-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>
|
||||
|
||||
<div class="totoga2-hub-controls content-container" role="tablist" aria-label="六六歌2 內容模式">
|
||||
<button type="button" class="mode-btn totoga2-hub-btn active" data-totoga-hub="video">影片模式</button>
|
||||
<button type="button" class="mode-btn totoga2-hub-btn" data-totoga-hub="ebook">電子書模式</button>
|
||||
<button type="button" class="mode-btn totoga2-hub-btn" data-totoga-hub="reader">紀實長文（時間軸＋長卷）</button>
|
||||
</div>
|
||||
|
||||
<!-- 影片：上／中／下三集（Bilibili 嵌入；中／下可替換 bvid） -->
|
||||
<div class="totoga2-hub-panel content-container ebook-main" data-totoga-panel="video">
|
||||
<section class="ebook-intro section" aria-label="影片三集">
|
||||
<h2 class="section-title">節目影片</h2>
|
||||
<p class="ebook-intro-lead">
|
||||
以下為 Bilibili 嵌入播放器（16：9）。若無法播放，請至站內搜尋同一 BV 號；中集、下集請將 iframe 的 <code>bvid</code> 換成你的分集連結。
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<div class="bilivideo-stack">
|
||||
<section class="bilivideo-block" aria-labelledby="bilivideo-top">
|
||||
<h3 id="bilivideo-top">上集</h3>
|
||||
<div class="bilivideo-frame">
|
||||
<iframe src="https://player.bilibili.com/player.html?bvid=BV1SW411a7cZ&page=1&high_quality=1&danmaku=0"
|
||||
title="Bilibili 影片：上集（BV1SW411a7cZ）" allowfullscreen></iframe>
|
||||
</div>
|
||||
</section>
|
||||
<section class="bilivideo-block" aria-labelledby="bilivideo-mid">
|
||||
<h3 id="bilivideo-mid">中集</h3>
|
||||
<p class="bilivideo-placeholder-note">預設與上集同一支；請替換 <code>bvid</code> 為中集 BV。</p>
|
||||
<div class="bilivideo-frame">
|
||||
<iframe src="https://player.bilibili.com/player.html?bvid=BV1SW411a7cZ&page=1&high_quality=1&danmaku=0"
|
||||
title="Bilibili 影片：中集（請替換 BV）" allowfullscreen></iframe>
|
||||
</div>
|
||||
</section>
|
||||
<section class="bilivideo-block" aria-labelledby="bilivideo-bot">
|
||||
<h3 id="bilivideo-bot">下集</h3>
|
||||
<p class="bilivideo-placeholder-note">預設與上集同一支；請替換 <code>bvid</code> 為下集 BV。</p>
|
||||
<div class="bilivideo-frame">
|
||||
<iframe src="https://player.bilibili.com/player.html?bvid=BV1SW411a7cZ&page=1&high_quality=1&danmaku=0"
|
||||
title="Bilibili 影片：下集（請替換 BV）" allowfullscreen></iframe>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="totoga2-hub-panel content-container ebook-main" data-totoga-panel="ebook" hidden>
|
||||
<section class="ebook-intro section" aria-label="電子書說明">
|
||||
<h2 class="section-title">紀實電子書</h2>
|
||||
<p class="ebook-intro-lead">
|
||||
以下為《無限挑戰》六六歌2 相關跨頁電子書（FlipHTML5）。若載入較慢，請稍候或重新整理；全螢幕閱讀請使用閱讀器內建控制項。
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<div class="flip-ebook-shell">
|
||||
<div class="flip-ebook-aspect">
|
||||
<iframe src="https://online.fliphtml5.com/tjyxm/vqff/"
|
||||
title="2023_電子書_無限挑戰六六歌2_final跨頁" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="totoga2-hub-panel totoga2-reader-hub" data-totoga-panel="reader" hidden>
|
||||
<section class="story-archive totoga2-plot content-container" aria-labelledby="totoga2-plot-title">
|
||||
<h2 class="section-title" id="totoga2-plot-title">傳奇的轉折</h2>
|
||||
<div class="subtitle-wrap">
|
||||
<span class="sub-title">PLOT TWIST</span>
|
||||
</div>
|
||||
<p class="intro-text">
|
||||
與首頁相同的節點提要；點下方連結可跳到本頁「紀實長文」對應章節（八章皆在本頁，無需另開檔案）。
|
||||
</p>
|
||||
|
||||
<div class="merged-storyline">
|
||||
<article id="totoga2-special" class="story-node" data-era="六六歌">
|
||||
<h3>六六歌實錄</h3>
|
||||
<p>把懸念、試探與哭點縫在同一條時間軸上；很多人第一次真正把「水晶男孩」打進搜尋框，就是從這種瘋狂的剪輯節奏開始。</p>
|
||||
<p><a href="#ssg2">對照本頁幕後敘事 · 六六歌第二季</a></p>
|
||||
</article>
|
||||
<article id="totoga2-negotiate-card" class="story-node" data-era="交涉">
|
||||
<h3>命運的交涉</h3>
|
||||
<p>KTV、游擊演唱會規則、與其說講道理不如說把真心擺上桌面——交涉的不是合約字面，而是還願不願意再一次肩並肩。</p>
|
||||
<p><a href="#negotiate">讀本頁 · 正式交涉</a></p>
|
||||
</article>
|
||||
<article id="totoga2-complete" class="story-node" data-era="歸位">
|
||||
<h3>拼圖的歸位</h3>
|
||||
<p>變數一個個被排除之後，驚喜接上登場段落；缺一角舞台的視覺，終於對齊觀眾席上堅守的那片黃。</p>
|
||||
<p><a href="#gather">從本頁「召集」段開始補這條線</a></p>
|
||||
</article>
|
||||
<article id="totoga2-past" class="story-node" data-era="最初">
|
||||
<h3>巔峰與雨天</h3>
|
||||
<p>急凍、告別、各自的跑道——並不是要你沉浸遺憾，而是讓你懂：後來每一次亮燈，為什麼會更值得尖叫。</p>
|
||||
<p><a href="#sechskies-profile">讀本頁脈絡起點 · 水晶男孩</a></p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="chronicle-controls content-container totoga2-chronicle-controls">
|
||||
<button type="button" class="mode-btn active" data-totoga-reader-mode="scroll">網漫模式（一路滑下去）</button>
|
||||
<button type="button" class="mode-btn" data-totoga-reader-mode="paged">分頁模式（上一頁 / 下一頁）</button>
|
||||
</div>
|
||||
|
||||
<main class="content-container chronicle-reader" id="totoga2-reader" data-mode="scroll">
|
||||
<article class="chronicle-chapter active" id="challenge" data-title="無限挑戰">
|
||||
<h2>04 無限挑戰</h2>
|
||||
<p>《無限挑戰》是韓國綜藝史上指標性的真人秀節目。「星期六星期六是歌手（六六歌）」企劃，成為水晶男孩 2016 回歸舞台的關鍵起點。</p>
|
||||
<p>第一季掀起 90 年代懷舊熱潮，雖然水晶男孩未能完整出演，卻留下「總有一天要六人完整回到舞台」的遺憾伏筆。</p>
|
||||
</article>
|
||||
|
||||
<article class="chronicle-chapter" id="ssg2" data-title="六六歌第二季">
|
||||
<h2>06 六六歌第二季</h2>
|
||||
<p>第二季改成「為單一團體打造完整回歸敘事」，保密層級更高，連主持群都縮小到劉在錫與 HAHA，避免消息提前走漏。</p>
|
||||
<p>從開場的復古裝扮、試探式線索到真正揭曉團體身份，節目節奏在搞笑與懸念間拉開這場 16 年重逢序章。</p>
|
||||
</article>
|
||||
|
||||
<article class="chronicle-chapter" id="sechskies-profile" data-title="水晶男孩">
|
||||
<h2>08 水晶男孩</h2>
|
||||
<p>1997 出道後迅速登頂，與同世代頂流並列，短短三年創下極高銷量與舞台紀錄，卻在 2000 無預警解散，留下集體創傷。</p>
|
||||
<p>16 年間六人從未以水晶男孩名義完整合體，這次企劃不只是回憶，而是回應當年未說完的離別。</p>
|
||||
</article>
|
||||
|
||||
<article class="chronicle-chapter" id="gather" data-title="召集">
|
||||
<h2>10 召集</h2>
|
||||
<p>製作組先與隊長殷志源交涉，再透過隱藏攝影機確認成員意願。大家都希望重組，卻同時知道最困難的拼圖是離開演藝圈多年的高志溶。</p>
|
||||
<p>這個階段的重點不是舞台，而是「願不願意再次站在一起」的心理門檻。</p>
|
||||
</article>
|
||||
|
||||
<article class="chronicle-chapter" id="negotiate" data-title="正式交涉">
|
||||
<h2>11 正式交涉</h2>
|
||||
<p>主持人與成員深度對話，回顧解散緣由、舞台記憶、KTV 挑戰與游擊演唱會規則。笑鬧之間，團魂逐漸浮現。</p>
|
||||
<p>同時，節目也把高志溶議題正式擺上檯面：如果不是完整體，這次回歸是否還成立？</p>
|
||||
</article>
|
||||
|
||||
<article class="chronicle-chapter" id="variables" data-title="變數">
|
||||
<h2>16 變數</h2>
|
||||
<p>排練期間接連出現傷病、手術需求與消息外流，原本理想的游擊演唱會計畫屢次被迫改寫，團隊陷入 B 計畫陰影。</p>
|
||||
<p>在體力與心理都被拉到極限的情況下，成員仍選擇撐住，只為把久違舞台交回給等待 16 年的小黃。</p>
|
||||
</article>
|
||||
|
||||
<article class="chronicle-chapter" id="surprise" data-title="驚喜">
|
||||
<h2>19 驚喜</h2>
|
||||
<p>當所有人幾乎接受「不完整」時，節目仍悄悄推進最後安排。高志溶與成員的情感張力在此段達到最高點。</p>
|
||||
<p>這份驚喜不是綜藝反轉，而是把六顆水晶的空位真正填回舞台。</p>
|
||||
</article>
|
||||
|
||||
<article class="chronicle-chapter" id="final-stage" data-title="登場">
|
||||
<h2>21 登場</h2>
|
||||
<p>眼罩揭開後，滿場黃海與哭聲同時湧現。從《請記得我》到安可，《離別曲》在那一晚變成了「重逢證詞」。</p>
|
||||
<p>2000 的缺憾，在 2016 終於補上。這一頁不是結束，而是團體與粉絲共同完成的回歸章節。</p>
|
||||
</article>
|
||||
</main>
|
||||
|
||||
<div class="chronicle-pager content-container" id="totoga2-pager" hidden>
|
||||
<button type="button" id="totoga2-prev" class="btn">上一頁</button>
|
||||
<span id="totoga2-chapter-indicator">1 / 8</span>
|
||||
<button type="button" id="totoga2-next" class="btn">下一頁</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="ebook-back-link content-container">
|
||||
<a href="../index.html#story" class="btn">回到首頁 · 傳奇的轉折</a>
|
||||
<a href="#ebook" class="btn">同頁 · 電子書全螢幕</a>
|
||||
</p>
|
||||
|
||||
<footer>
|
||||
<p>SECHSKIES Fanpage © 2026 - 黃色氣球永遠飄揚</p>
|
||||
<a href="https://jekkinoopy.github.io/Portfolio/" class="studio-link" target="_blank">
|
||||
Design by <span class="mark_b">Jekkinoopy Studio</span>
|
||||
</a>
|
||||
</footer>
|
||||
|
||||
<script src="../particles.js"></script>
|
||||
<script src="../portal-nav.js"></script>
|
||||
<script src="totoga2.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,97 @@
|
||||
(() => {
|
||||
const hubButtons = Array.from(document.querySelectorAll("[data-totoga-hub]"));
|
||||
const hubPanels = Array.from(document.querySelectorAll("[data-totoga-panel]"));
|
||||
|
||||
function setHubPanel(name) {
|
||||
hubButtons.forEach((btn) => btn.classList.toggle("active", btn.dataset.totogaHub === name));
|
||||
hubPanels.forEach((panel) => {
|
||||
panel.hidden = panel.dataset.totogaPanel !== name;
|
||||
});
|
||||
}
|
||||
|
||||
hubButtons.forEach((btn) => {
|
||||
btn.addEventListener("click", () => setHubPanel(btn.dataset.totogaHub));
|
||||
});
|
||||
|
||||
const reader = document.getElementById("totoga2-reader");
|
||||
if (!reader) return;
|
||||
|
||||
const chapters = Array.from(reader.querySelectorAll(".chronicle-chapter"));
|
||||
const modeButtons = Array.from(document.querySelectorAll("[data-totoga-reader-mode]"));
|
||||
const pager = document.getElementById("totoga2-pager");
|
||||
const prevBtn = document.getElementById("totoga2-prev");
|
||||
const nextBtn = document.getElementById("totoga2-next");
|
||||
const indicator = document.getElementById("totoga2-chapter-indicator");
|
||||
if (!pager || !prevBtn || !nextBtn || !indicator) return;
|
||||
|
||||
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 setReaderMode(mode) {
|
||||
reader.dataset.mode = mode;
|
||||
modeButtons.forEach((btn) => btn.classList.toggle("active", btn.dataset.totogaReaderMode === 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", () => setReaderMode(button.dataset.totogaReaderMode));
|
||||
});
|
||||
|
||||
prevBtn.addEventListener("click", () => {
|
||||
if (currentIndex > 0) {
|
||||
currentIndex -= 1;
|
||||
updatePagedView();
|
||||
}
|
||||
});
|
||||
|
||||
nextBtn.addEventListener("click", () => {
|
||||
if (currentIndex < chapters.length - 1) {
|
||||
currentIndex += 1;
|
||||
updatePagedView();
|
||||
}
|
||||
});
|
||||
|
||||
const initialHub =
|
||||
hubButtons.find((b) => b.classList.contains("active"))?.dataset.totogaHub ||
|
||||
hubButtons[0]?.dataset.totogaHub ||
|
||||
"video";
|
||||
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");
|
||||
pager.hidden = true;
|
||||
requestAnimationFrame(() => {
|
||||
document.getElementById(hash)?.scrollIntoView({ behavior: "smooth", block: "start" });
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
applyLocationHashNavigation();
|
||||
window.addEventListener("hashchange", applyLocationHashNavigation);
|
||||
})();
|
||||
@@ -0,0 +1,51 @@
|
||||
<!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">EUN JI-WON × VARIETY GRAVITY</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">
|
||||
<section id="variety" class="variety-block">
|
||||
<h2 class="section-title">瘋狂出演中</h2>
|
||||
<p class="intro-text">鏡頭一開就跑偏、台詞唸不完，卻總能把段子的節奏剪成「非他不可」——這是最容易被路人一眼看見的瘋勁，也是綜藝剪輯願意一路卡特寫給他的理由。</p>
|
||||
<p class="intro-text">卸妝後的聊天、運動場上的暴走、對成員毫不修飾的吐槽；那些看起來像日常，其實比劇本更誇張。此區之後會補上節目清單、名場面與入坑路線，先把舞台留好。</p>
|
||||
</section>
|
||||
<section id="stage" class="variety-block">
|
||||
<h2 class="section-title">隊長的氣場</h2>
|
||||
<p class="intro-text">同樣一句話，由他說出口就變成節奏點；同樣混亂的場面，他一站出來觀眾會先笑、再安靜聽。那不是威嚴口號，而是多年在台上台下磨出來的「控場直覺」。</p>
|
||||
<p class="intro-text">此區預留給談話、音樂、與團體互動裡的隊長切片——讓新粉先用氣場認人，再慢慢讀懂他背後的堅持。</p>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<p>SECHSKIES Fanpage © 2026 - 黃色氣球永遠飄揚</p>
|
||||
<a href="https://jekkinoopy.github.io/Portfolio/" class="studio-link" target="_blank">
|
||||
Design by <span class="mark_b">Jekkinoopy Studio</span>
|
||||
</a>
|
||||
</footer>
|
||||
|
||||
<script src="../portal-nav.js"></script>
|
||||
<script src="../particles.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user