122 lines
3.7 KiB
HTML
122 lines
3.7 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">
|
|
<link rel="stylesheet" href="tablet.css">
|
|
</head>
|
|
|
|
<body>
|
|
<header>
|
|
<div class="hero">
|
|
<h1>輝煌全盛期</h1>
|
|
<p>全盛期作品與主打脈絡整理</p>
|
|
<a href="#classic-albums" class="btn">查看專輯清單</a>
|
|
</div>
|
|
</header>
|
|
|
|
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></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>
|