128 lines
4.0 KiB
HTML
128 lines
4.0 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>
|
||
<p class="classic-stream-lead">
|
||
線上聆聽請至
|
||
<a href="https://open.spotify.com/artist/6uRyNreOHUvWPNGnKfIo27" target="_blank"
|
||
rel="noopener noreferrer">SECHSKIES｜Spotify 官方頁</a>
|
||
，下列為站內精選年表整理。
|
||
</p>
|
||
<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>
|