301 lines
15 KiB
HTML
301 lines
15 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="../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>
|