feat 整合多頁面 導覽列
This commit is contained in:
+167
@@ -0,0 +1,167 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user