feat: 本機新增頁面與導覽調整
This commit is contained in:
@@ -0,0 +1,300 @@
|
||||
<!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="../assets/css/style.css">
|
||||
<link rel="stylesheet" href="../assets/css/captain-aura.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
||||
<link rel="stylesheet" href="../assets/css/tablet.css">
|
||||
</head>
|
||||
|
||||
<body class="captain-aura-page">
|
||||
<header class="inner-page-header">
|
||||
<div class="header-inner site-header-inner">
|
||||
<h1 class="main-title">殷志源台北見面會</h1>
|
||||
<div class="subtitle-wrap">
|
||||
<span class="sub-title">G1 private · 1theland in Taipei · 2018.07.21</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></nav>
|
||||
<canvas id="particles"></canvas>
|
||||
|
||||
<div class="captain-aura-hero" aria-hidden="true">
|
||||
<img src="../assets/images/concert/captain-aura/hero-placeholder.svg"
|
||||
alt="見面會橫幅假圖（待替換 hero.jpg）" width="1920" height="1003" loading="eager">
|
||||
</div>
|
||||
|
||||
<main class="captain-aura-main content-container" id="captain-aura-archive">
|
||||
|
||||
<p class="captain-aura-divider" role="presentation">上半場</p>
|
||||
|
||||
<section class="captain-aura-act" aria-labelledby="act-truck">
|
||||
<h2 class="captain-aura-act__title" id="act-truck">8t. Truck</h2>
|
||||
<div class="captain-aura-videos">
|
||||
<div class="captain-aura-video">
|
||||
<iframe title="8t. Truck ①" src="https://www.youtube.com/embed/phsOnzzHrZs"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
allowfullscreen loading="lazy"></iframe>
|
||||
</div>
|
||||
<div class="captain-aura-video">
|
||||
<iframe title="8t. Truck ②" src="https://www.youtube.com/embed/FccoV2LboWI"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
allowfullscreen loading="lazy"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="captain-aura-act" aria-labelledby="act-entry">
|
||||
<h2 class="captain-aura-act__title" id="act-entry">入境表格</h2>
|
||||
<div class="captain-aura-videos">
|
||||
<div class="captain-aura-video">
|
||||
<iframe title="入境表格 ①" src="https://www.youtube.com/embed/R9k6Cs4Rwqc"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
allowfullscreen loading="lazy"></iframe>
|
||||
</div>
|
||||
<div class="captain-aura-video">
|
||||
<iframe title="入境表格 ②" src="https://www.youtube.com/embed/tRPHtT0-JkE"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
allowfullscreen loading="lazy"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="captain-aura-act" aria-labelledby="act-fan-q">
|
||||
<h2 class="captain-aura-act__title captain-aura-act__title--plain" id="act-fan-q">粉絲提問</h2>
|
||||
<h2 class="captain-aura-act__title captain-aura-act__title--plain">Taipei in Melody</h2>
|
||||
<h2 class="captain-aura-act__title captain-aura-act__title--plain">G1's Great Moment</h2>
|
||||
<h2 class="captain-aura-act__title" id="act-dance">Dance</h2>
|
||||
<div class="captain-aura-videos">
|
||||
<div class="captain-aura-video">
|
||||
<iframe title="Dance ①" src="https://www.youtube.com/embed/9uOETcuFjbE"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
allowfullscreen loading="lazy"></iframe>
|
||||
</div>
|
||||
<div class="captain-aura-video">
|
||||
<iframe title="Dance ②" src="https://www.youtube.com/embed/lOdKgsr9ttU"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
allowfullscreen loading="lazy"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="captain-aura-act" aria-labelledby="act-aegyo">
|
||||
<h2 class="captain-aura-act__title" id="act-aegyo">撒嬌</h2>
|
||||
<div class="captain-aura-videos">
|
||||
<div class="captain-aura-video">
|
||||
<iframe title="撒嬌" src="https://www.youtube.com/embed/S7HJAZ4Kgso"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
allowfullscreen loading="lazy"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="captain-aura-act" aria-labelledby="act-1theland">
|
||||
<h2 class="captain-aura-act__title captain-aura-act__title--plain" id="act-1theland">1 the land</h2>
|
||||
</section>
|
||||
|
||||
<section class="captain-aura-act" aria-labelledby="act-ukulele">
|
||||
<h2 class="captain-aura-act__title" id="act-ukulele">烏克麗麗</h2>
|
||||
<div class="captain-aura-videos">
|
||||
<div class="captain-aura-video">
|
||||
<iframe title="烏克麗麗 ①" src="https://www.youtube.com/embed/p5_PiYMsoZc"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
allowfullscreen loading="lazy"></iframe>
|
||||
</div>
|
||||
<div class="captain-aura-video">
|
||||
<iframe title="烏克麗麗 ②" src="https://www.youtube.com/embed/7A_0l9wVoNE"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
allowfullscreen loading="lazy"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="captain-aura-act" aria-labelledby="act-couple">
|
||||
<h2 class="captain-aura-act__title" id="act-couple">Couple大合唱</h2>
|
||||
<div class="captain-aura-videos">
|
||||
<div class="captain-aura-video">
|
||||
<iframe title="Couple大合唱 ①" src="https://www.youtube.com/embed/sQ5P3BWL15E"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
allowfullscreen loading="lazy"></iframe>
|
||||
</div>
|
||||
<div class="captain-aura-video">
|
||||
<iframe title="Couple大合唱 ②" src="https://www.youtube.com/embed/XZvyS4yDulk"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
allowfullscreen loading="lazy"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="captain-aura-act" aria-labelledby="act-never">
|
||||
<h2 class="captain-aura-act__title" id="act-never">Never, Ever…</h2>
|
||||
<div class="captain-aura-videos">
|
||||
<div class="captain-aura-video">
|
||||
<iframe title="Never, Ever… ①" src="https://www.youtube.com/embed/v8XBssrcM0U"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
allowfullscreen loading="lazy"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<p class="captain-aura-divider" role="presentation">下半場</p>
|
||||
|
||||
<section class="captain-aura-act" aria-labelledby="act-never-2">
|
||||
<div class="captain-aura-videos">
|
||||
<div class="captain-aura-video">
|
||||
<iframe title="Never, Ever… ②" src="https://www.youtube.com/embed/0uQgXToOyiA"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
allowfullscreen loading="lazy"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="captain-aura-act" aria-labelledby="act-drunk">
|
||||
<h2 class="captain-aura-act__title" id="act-drunk">酒醉</h2>
|
||||
<div class="captain-aura-videos">
|
||||
<div class="captain-aura-video">
|
||||
<iframe title="酒醉" src="https://www.youtube.com/embed/6mUl85XOyQw"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
allowfullscreen loading="lazy"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="captain-aura-act" aria-labelledby="act-melody">
|
||||
<h2 class="captain-aura-act__title" id="act-melody">滿醉 in Melody</h2>
|
||||
<div class="captain-aura-videos">
|
||||
<div class="captain-aura-video">
|
||||
<iframe title="滿醉 in Melody ①" src="https://www.youtube.com/embed/EJcpA7bubqM"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
allowfullscreen loading="lazy"></iframe>
|
||||
</div>
|
||||
<div class="captain-aura-video">
|
||||
<iframe title="滿醉 in Melody ②" src="https://www.youtube.com/embed/Ovzu07lYVVU"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
allowfullscreen loading="lazy"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="captain-aura-act" aria-labelledby="act-allfamy">
|
||||
<h2 class="captain-aura-act__title" id="act-allfamy">All Famy</h2>
|
||||
<div class="captain-aura-videos">
|
||||
<div class="captain-aura-video">
|
||||
<iframe title="All Famy ①" src="https://www.youtube.com/embed/b6S-CAk-RAA"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
allowfullscreen loading="lazy"></iframe>
|
||||
</div>
|
||||
<div class="captain-aura-video">
|
||||
<iframe title="All Famy ②" src="https://www.youtube.com/embed/G8u7D3Xleeo"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
allowfullscreen loading="lazy"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="captain-aura-act" aria-labelledby="act-suddenly">
|
||||
<h2 class="captain-aura-act__title" id="act-suddenly">Suddenly</h2>
|
||||
<div class="captain-aura-videos">
|
||||
<div class="captain-aura-video">
|
||||
<iframe title="Suddenly" src="https://www.youtube.com/embed/a70ojjXoB4M"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
allowfullscreen loading="lazy"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="captain-aura-act" aria-labelledby="act-one">
|
||||
<h2 class="captain-aura-act__title" id="act-one">ONE</h2>
|
||||
<div class="captain-aura-videos">
|
||||
<div class="captain-aura-video">
|
||||
<iframe title="ONE ①" src="https://www.youtube.com/embed/fhgboeZ-J0s"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
allowfullscreen loading="lazy"></iframe>
|
||||
</div>
|
||||
<div class="captain-aura-video">
|
||||
<iframe title="ONE ②" src="https://www.youtube.com/embed/CIhAi_gw0fI"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
allowfullscreen loading="lazy"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="captain-aura-act" aria-labelledby="act-encore">
|
||||
<h2 class="captain-aura-act__title" id="act-encore">安可 / Adios</h2>
|
||||
<div class="captain-aura-videos">
|
||||
<div class="captain-aura-video">
|
||||
<iframe title="安可 / Adios ①" src="https://www.youtube.com/embed/Jz3zUZolzjM"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
allowfullscreen loading="lazy"></iframe>
|
||||
</div>
|
||||
<div class="captain-aura-video">
|
||||
<iframe title="安可 / Adios ②" src="https://www.youtube.com/embed/ycydd8Bfkb8"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
allowfullscreen loading="lazy"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<script>
|
||||
const canvas = document.getElementById('particles');
|
||||
const ctx = canvas.getContext('2d');
|
||||
|
||||
function resizeCanvas() {
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
}
|
||||
|
||||
resizeCanvas();
|
||||
window.addEventListener('resize', resizeCanvas);
|
||||
|
||||
let particles = [];
|
||||
class Particle {
|
||||
constructor() {
|
||||
this.x = Math.random() * canvas.width;
|
||||
this.y = Math.random() * canvas.height;
|
||||
this.size = Math.random() * 2 + 0.5;
|
||||
this.speedX = (Math.random() - 0.5) * 0.3;
|
||||
this.speedY = (Math.random() - 0.5) * 0.3;
|
||||
}
|
||||
update() {
|
||||
this.x += this.speedX;
|
||||
this.y += this.speedY;
|
||||
if (this.x < 0 || this.x > canvas.width) this.speedX *= -1;
|
||||
if (this.y < 0 || this.y > canvas.height) this.speedY *= -1;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = 'rgba(255, 204, 0, 0.35)';
|
||||
ctx.beginPath();
|
||||
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
}
|
||||
}
|
||||
|
||||
function initParticles() {
|
||||
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);
|
||||
}
|
||||
|
||||
initParticles();
|
||||
animate();
|
||||
</script>
|
||||
<script src="../assets/js/portal-nav.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user