168 lines
6.3 KiB
HTML
168 lines
6.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>水晶男孩｜輝煌全盛期</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">
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<header>
|
||
|
|
<div class="hero">
|
||
|
|
<h1>輝煌全盛期</h1>
|
||
|
|
<p>26 年前的經典作品整理</p>
|
||
|
|
<a href="#classic-albums" class="btn">查看專輯清單</a>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽">
|
||
|
|
<a class="logo" href="index.html"><img src="./img/logov.svg" alt="SECHSKIES Logo"></a>
|
||
|
|
<ul>
|
||
|
|
<li><a href="index.html#intro">淪陷瞬間</a>
|
||
|
|
<ul class="portal-submenu">
|
||
|
|
<li><a href="index.html#mission">成立的初衷</a></li>
|
||
|
|
<li><a href="index.html#current">跨時空軌跡</a></li>
|
||
|
|
<li><a href="index.html#story">好奇的代價</a></li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li><a href="chronicle.html">十六年約定</a>
|
||
|
|
<ul class="portal-submenu">
|
||
|
|
<li><a href="chronicle.html#challenge">無限挑戰</a></li>
|
||
|
|
<li><a href="chronicle.html#ssg2">六六歌第二季</a></li>
|
||
|
|
<li><a href="chronicle.html#sechskies-profile">水晶男孩</a></li>
|
||
|
|
<li><a href="chronicle.html#gather">召集</a></li>
|
||
|
|
<li><a href="chronicle.html#negotiate">正式交涉</a></li>
|
||
|
|
<li><a href="chronicle.html#variables">變數</a></li>
|
||
|
|
<li><a href="chronicle.html#surprise">驚喜</a></li>
|
||
|
|
<li><a href="chronicle.html#final-stage">登場</a></li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li><a href="index.html#archive">黃色留聲機</a>
|
||
|
|
<ul class="portal-submenu">
|
||
|
|
<li><a href="classic.html">輝煌全盛期</a></li>
|
||
|
|
<li><a href="index.html#new">啟動新篇章</a></li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li><a href="concert.html">現場的悸動</a>
|
||
|
|
<ul class="portal-submenu">
|
||
|
|
<li><a href="concert.html#classic-stage" data-coming-soon="true" aria-disabled="true">燦爛的最初</a></li>
|
||
|
|
<li><a href="concert.html#reunion-stage">永恆的重逢</a></li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li class="coming-soon"><a href="variety.html" data-coming-soon="true" aria-disabled="true">綜藝熱播中</a>
|
||
|
|
<ul class="portal-submenu">
|
||
|
|
<li><a href="variety.html#jiwon" data-coming-soon="true" aria-disabled="true">瘋子與天才</a></li>
|
||
|
|
<li><a href="variety.html#group" data-coming-soon="true" aria-disabled="true">舞台外真實</a></li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li><a href="map.html">聖地巡禮</a>
|
||
|
|
<ul class="portal-submenu">
|
||
|
|
<li><a href="map.html#taiwan">台灣聖地</a></li>
|
||
|
|
<li><a href="map.html#global">海外遠征</a></li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
<canvas id="particles"></canvas>
|
||
|
|
|
||
|
|
<div class="container">
|
||
|
|
<section id="classic-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>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</section>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<footer>
|
||
|
|
<p>SECHSKIES Fanpage © 2026 - 黃色氣球永遠飄揚</p>
|
||
|
|
</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 (const p of particles) {
|
||
|
|
p.update();
|
||
|
|
p.draw();
|
||
|
|
}
|
||
|
|
requestAnimationFrame(animate);
|
||
|
|
}
|
||
|
|
|
||
|
|
window.addEventListener('resize', () => {
|
||
|
|
resizeCanvas();
|
||
|
|
init();
|
||
|
|
});
|
||
|
|
|
||
|
|
init();
|
||
|
|
animate();
|
||
|
|
</script>
|
||
|
|
<script src="portal-nav.js"></script>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|