classic.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 &copy; 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>