206 lines
8.3 KiB
HTML
206 lines
8.3 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="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">
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<header>
|
|
<div class="hero">
|
|
<h1>SECHSKIES<br>水晶男孩</h1>
|
|
<p>六顆永恆的水晶 • 左右命運的傳奇</p>
|
|
<a href="#story" class="btn">探索他們的故事</a>
|
|
</div>
|
|
</header>
|
|
|
|
<nav>
|
|
<div class="logo"><img src="./img/logov.svg" alt=""></div>
|
|
<ul>
|
|
<li><a href="#background">重拾黃色奇蹟</a></li>
|
|
<li><a href="#albums">歷年作品</a></li>
|
|
<li><a href="#current">現在故事線</a></li>
|
|
<li><a href="concert.html">演唱會紀錄</a></li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<canvas id="particles"></canvas>
|
|
|
|
<div class="container">
|
|
<section id="background">
|
|
<h2 class="section-title">故事背景</h2>
|
|
<div class="intro-text">
|
|
<!-- 標題與第一段：點出「新粉」身分與震撼 -->
|
|
<p class="intro-text">
|
|
身為在回歸後才被這場 <span class="highlight">「黃色奇蹟」</span> 擊中的新一代粉絲，我深刻體會那種從好奇觀看到最終徹底淪陷的悸動。
|
|
</p>
|
|
<!-- 第二段：強調核心魅力與反差 -->
|
|
<p class="core-description">
|
|
水晶男孩（SECHSKIES）的魔力在於：即便錯過了 90 年代，依然會被他們 <span class="highlight">熱血、真誠且專業</span>
|
|
的舞台魅力所感動。這裡不僅是資訊站，更是由熱愛凝聚的空間。從舞台上的職人氣場，到台下如家人般的 <span class="highlight">「反差萌」</span>，他們展現了超越年齡的吸引力。
|
|
</p>
|
|
<!-- 結尾：溫馨號召 -->
|
|
<p class="call-to-action">
|
|
經典並非活在過去，而是每個當下都讓人心跳不已。加入我們，一起感受這場 <span class="highlight">仍在續寫的傳奇</span>。
|
|
</p>
|
|
</div>
|
|
</section>
|
|
<!-- 歷年作品表格區塊 -->
|
|
<section id="albums">
|
|
<h2 class="section-title">歷年作品 (精選)</h2>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>年份</th>
|
|
<th>專輯/作品</th>
|
|
<th>主打歌</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>1997</td>
|
|
<td>學園別曲</td>
|
|
<td>學園別曲 / 男兒之路 (Pom Saeng Pom Sa)</td>
|
|
</tr>
|
|
<tr>
|
|
<td>1998</td>
|
|
<td>Road Fighter</td>
|
|
<td>Road Fighter / Couple</td>
|
|
</tr>
|
|
<tr>
|
|
<td>1999</td>
|
|
<td>Com'Back</td>
|
|
<td>Com'Back</td>
|
|
</tr>
|
|
<tr>
|
|
<td>2016</td>
|
|
<td>
|
|
<a href="lyrics.html">數位單曲</a>
|
|
</td>
|
|
<td>
|
|
<a href="lyrics.html">Three Words (三個詞)</a>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>2017</td>
|
|
<td>ANOTHER LIGHT</td>
|
|
<td>Something Special / Smile</td>
|
|
</tr>
|
|
<tr>
|
|
<td>2020</td>
|
|
<td>ALL FOR YOU</td>
|
|
<td>ALL FOR YOU</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</section>
|
|
|
|
<section id="current" class="story-archive">
|
|
<h2 class="section-title">故事線</h2>
|
|
<div class="subtitle-wrap">
|
|
<span class="sub-title">SECHSKIES STORY ARCHIVE</span>
|
|
</div>
|
|
|
|
<div class="merged-storyline">
|
|
<article class="story-node" data-era="1997">
|
|
<h3>傳奇的誕生：出道與巔峰</h3>
|
|
<p>1997年4月15日，水晶男孩以《學園別曲》正式出道，是韓國第一代偶像團體，與H.O.T.並稱為90年代後期兩大山脈。團名源自德語「六顆水晶」，象徵六位成員能左右命運。</p>
|
|
<p>分為「黑水晶」（殷志源、李宰鎮、金在德 — Rap與舞蹈）和「白水晶」（姜成勳、高志溶、張水院 — 主唱）。</p>
|
|
</article>
|
|
|
|
<article class="story-node" data-era="2000">
|
|
<h3>遺憾的句點：宣告解散</h3>
|
|
<p>2000年5月20日正式解散，成員各自發展，水晶暫時進入休眠期。</p>
|
|
</article>
|
|
|
|
<article class="story-node" data-era="2016">
|
|
<h3>傳奇回歸：重逢的感動合體</h3>
|
|
<p>透過《無限挑戰》「六六歌2」跨越16年再次重聚，引起全韓黃色氣球海再現。</p>
|
|
</article>
|
|
|
|
<article class="story-node" data-era="2019">
|
|
<h3>體制調整與穩定</h3>
|
|
<p>調整為四人組合（殷志源、李宰鎮、金在德、張水院），繼續以經典魅力活躍於樂壇與綜藝。</p>
|
|
</article>
|
|
|
|
<article class="story-node" data-era="NOW">
|
|
<h3>至今：個人與團體並行</h3>
|
|
<p>隊長殷志源活躍於各類綜藝節目，成員們也積極參與音樂與個人品牌活動。雖然活動節奏放緩，但水晶男孩仍是 K-POP 史上的長壽標竿。</p>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
<footer>
|
|
<p>SECHSKIES Fanpage © 2026 - 黃色氣球永遠飄揚</p>
|
|
|
|
<a href="https://jekkinoopy.github.io/Portfolio/" class="studio-link" target="_blank">
|
|
Design by <strong>Jekkinoopy Studio</strong>
|
|
</a>
|
|
</footer> <!-- 粒子效果 -->
|
|
<script>
|
|
const canvas = document.getElementById('particles');
|
|
const ctx = canvas.getContext('2d');
|
|
|
|
function resizeCanvas() {
|
|
canvas.width = window.innerWidth;
|
|
canvas.height = window.innerHeight;
|
|
}
|
|
|
|
resizeCanvas();
|
|
|
|
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', () => {
|
|
resizeCanvas();
|
|
init();
|
|
});
|
|
|
|
init();
|
|
animate();
|
|
</script>
|
|
</body>
|
|
|
|
</html> |