190 lines
7.8 KiB
HTML
190 lines
7.8 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-TW">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>水晶男孩 SECHSKIES | 永恆的六顆水晶</title>
|
||
|
||
<link rel="stylesheet" href="../assets/css/style.css">
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
||
<link rel="stylesheet" href="../assets/css/tablet.css">
|
||
|
||
</head>
|
||
<body>
|
||
|
||
<!-- 英雄區 -->
|
||
<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="../assets/images/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(--color-brand);">「謝謝你們一直陪伴，我們還在這裡。」</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> |