437 lines
14 KiB
HTML
437 lines
14 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>
|
||
<style>
|
||
/* 基本樣式與應援色設定 */
|
||
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&display=swap');
|
||
:root {
|
||
--yellow: #FFD700;
|
||
/* 應援黃色 */
|
||
--dark-yellow: #4e492b;
|
||
--black: #1a1a1a;
|
||
--gray: #f4f4f4;
|
||
--text-color: #333;
|
||
--dark: #777;
|
||
--accent: #FFD700;
|
||
}
|
||
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
html {
|
||
background: #0A0A0A;
|
||
min-height: 100%;
|
||
}
|
||
|
||
body {
|
||
font-family: 'Noto Sans TC', system-ui, sans-serif;
|
||
color: var(--text-color);
|
||
line-height: 1.6;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
header {
|
||
/* aspect-ratio: 1920 / 1080; */
|
||
/* width: 100%; */
|
||
height: 100vh; /* 預設為全屏高度，實際高度由 JS 調整 */
|
||
background-image: url(img/header.png);
|
||
background-size: cover;
|
||
background-position: center;
|
||
background-repeat: no-repeat;
|
||
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
text-align: center;
|
||
/* position: relative; */
|
||
overflow: hidden;
|
||
margin: 0;
|
||
padding: 0;
|
||
vertical-align: bottom; /* 消除某些瀏覽器對區塊元素的底邊留白 */
|
||
}
|
||
|
||
/* 導覽列 */
|
||
nav {
|
||
background-color: var(--black);
|
||
padding: 0.5rem;
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 1000;
|
||
display: flex;
|
||
justify-content: center;
|
||
margin: 0;
|
||
}
|
||
|
||
nav a {
|
||
color: var(--yellow);
|
||
text-decoration: none;
|
||
margin: 0 20px;
|
||
font-weight: bold;
|
||
transition: 0.3s;
|
||
}
|
||
|
||
nav a:hover {
|
||
color: white;
|
||
}
|
||
|
||
#particles {
|
||
position: absolute;
|
||
left: 0;
|
||
width: 100%;
|
||
display: block;
|
||
z-index: 1;
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* 橫幅 Hero Section */
|
||
.hero {
|
||
z-index: 2;
|
||
position: relative;
|
||
width: 100%;
|
||
text-shadow: 0 0 10px rgba(28, 28, 26, 0.3);
|
||
}
|
||
|
||
.hero h1 {
|
||
font-size: 2.5rem;
|
||
line-height: 1.2;
|
||
color: var(--yellow);
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
.hero p {
|
||
font-size: 1.2rem;
|
||
margin-bottom: 2rem;
|
||
color: var(--gray);
|
||
|
||
}
|
||
.btn {
|
||
display: inline-block;
|
||
padding: 10px 30px;
|
||
background: var(--yellow);
|
||
color: #000;
|
||
font-weight: bold;
|
||
border-radius: 50px;
|
||
text-decoration: none;
|
||
transition: all 0.3s;
|
||
}
|
||
.btn:hover {
|
||
transform: scale(1.1);
|
||
background: #FFEE66;
|
||
}
|
||
|
||
|
||
/* 區塊容器 */
|
||
.container {
|
||
max-width: 1000px;
|
||
margin: 0 auto;
|
||
padding: 40px 20px;
|
||
}
|
||
.story-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||
gap: 40px;
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
}
|
||
.card {
|
||
/* background: rgba(0, 0, 0, 0.85); */
|
||
border-radius: 20px;
|
||
padding: 30px;
|
||
transition: transform 0.4s, box-shadow 0.4s;
|
||
}
|
||
.card:hover {
|
||
transform: translateY(-15px);
|
||
box-shadow: 0 5px 5px rgba(255,221,0,0.2);
|
||
}
|
||
.card h3 {
|
||
color: var(--yellow);
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
section {
|
||
margin-bottom: 60px;
|
||
background: rgba(255, 255, 255, 0.95);
|
||
padding: 30px;
|
||
border-radius: 15px;
|
||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
|
||
position: relative;
|
||
z-index: 10;
|
||
}
|
||
|
||
h2 {
|
||
border-left: 5px solid var(--yellow);
|
||
padding-left: 15px;
|
||
color: var(--black);
|
||
margin-bottom: 25px;
|
||
}
|
||
|
||
/* 作品列表表格 */
|
||
table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
table th {
|
||
background-color: var(--yellow);
|
||
color: var(--black);
|
||
padding: 12px;
|
||
}
|
||
|
||
table td {
|
||
padding: 12px;
|
||
border-bottom: 1px solid #ddd;
|
||
text-align: center;
|
||
}
|
||
|
||
a {
|
||
color: var(--text-color);
|
||
text-decoration: none;
|
||
}
|
||
|
||
/* 現在的故事線樣式 */
|
||
.timeline {
|
||
border-left: 3px solid var(--yellow);
|
||
padding-left: 20px;
|
||
margin-left: 10px;
|
||
}
|
||
|
||
.timeline-item {
|
||
margin-bottom: 20px;
|
||
position: relative;
|
||
}
|
||
|
||
.timeline-item::before {
|
||
content: '';
|
||
width: 12px;
|
||
height: 12px;
|
||
background: var(--black);
|
||
border: 3px solid var(--yellow);
|
||
border-radius: 50%;
|
||
position: absolute;
|
||
left: -31px;
|
||
top: 5px;
|
||
}
|
||
|
||
/* 頁尾 */
|
||
footer {
|
||
background-color: var(--black);
|
||
color: white;
|
||
text-align: center;
|
||
padding: 20px 0;
|
||
margin-top: 50px;
|
||
}
|
||
|
||
.highlight {
|
||
color: var(--dark-yellow);
|
||
font-weight: bold;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<header>
|
||
<div class="hero">
|
||
<h1>SECHSKIES<br>水晶男孩</h1>
|
||
<p>六顆永恆的水晶 • 左右命運的傳奇</p>
|
||
<a href="#story" class="btn">探索他們的故事</a>
|
||
</div>
|
||
</header>
|
||
|
||
<nav>
|
||
<a href="#background">故事背景</a>
|
||
<a href="#albums">歷年作品</a>
|
||
<a href="#current">現在故事線</a>
|
||
</nav>
|
||
|
||
<canvas id="particles"></canvas>
|
||
|
||
<div class="container">
|
||
|
||
<section id="background">
|
||
<h2>故事背景</h2>
|
||
<p>
|
||
<span class="highlight">SECHSKIES（水晶男孩）</span> 於 1997 年 4 月 15 日出道，是韓國第一代頂尖男子團體。隊名在德語中意為「六顆水晶」，代表六位成員。
|
||
</p>
|
||
<p>
|
||
他們在 90 年代末與 H.O.T 並稱為 K-POP 的兩大山脈。然而，在事業巔峰期的 2000 年 5 月，團體突然宣佈解散，成為當時韓國演藝界最震撼的消息。解散後的 16
|
||
年間，成員各自在不同領域發展，但「小黃（粉絲暱稱）」們從未忘記那片黃色氣球海。
|
||
</p>
|
||
|
||
<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="albums">
|
||
<h2>歷年作品 (精選)</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">
|
||
<h2>現在的故事線</h2>
|
||
<div class="timeline">
|
||
<div class="timeline-item">
|
||
<strong>2016年：傳奇回歸</strong>
|
||
<p>透過綜藝節目《無限挑戰》的「土土歌2」特輯，成員們跨越 16 年再次重聚。隨後正式與 YG 娛樂簽約，發行《Three Words》橫掃音源榜。</p>
|
||
</div>
|
||
<div class="timeline-item">
|
||
<strong>2019年：體制調整</strong>
|
||
<p>團體重組為四人體制（殷志源、李宰鎮、金在德、張水院），繼續展開活動。</p>
|
||
</div>
|
||
<div class="timeline-item">
|
||
<strong>至今：個人與團體並行</strong>
|
||
<p>隊長殷志源活躍於各類綜藝節目，成員們也積極參與音樂與個人品牌活動。雖然活動節奏放緩，但水晶男孩仍是 K-POP 史上的長壽標竿。</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
</div>
|
||
|
||
<footer>
|
||
<p>SECHSKIES Fanpage © 2026 - 黃色氣球永遠飄揚</p>
|
||
</footer>
|
||
<!-- 粒子效果 -->
|
||
<script>
|
||
// 根據圖片比例 (1920:1080) 調整 header 高度
|
||
const header = document.querySelector('header');
|
||
|
||
function setHeaderHeight() {
|
||
const width = window.innerWidth;
|
||
const height = width * (1080 / 1920);
|
||
header.style.height = height + 'px';
|
||
}
|
||
|
||
// 確保在 DOM 完全載入後執行
|
||
if (document.readyState === 'loading') {
|
||
document.addEventListener('DOMContentLoaded', setHeaderHeight);
|
||
} else {
|
||
setHeaderHeight();
|
||
}
|
||
|
||
window.addEventListener('resize', setHeaderHeight);
|
||
window.addEventListener('load', setHeaderHeight);
|
||
|
||
const canvas = document.getElementById('particles');
|
||
const ctx = canvas.getContext('2d');
|
||
const container = canvas.nextElementSibling;
|
||
|
||
function resizeCanvas() {
|
||
canvas.width = window.innerWidth;
|
||
canvas.height = container.offsetHeight;
|
||
}
|
||
|
||
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> |