132 lines
7.0 KiB
HTML
132 lines
7.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>水晶男孩｜六六歌2 — 節目影片</title>
|
||
<link rel="stylesheet" href="../assets/css/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="../assets/css/tablet.css">
|
||
<link rel="stylesheet" href="totoga2-split-nav.css">
|
||
</head>
|
||
|
||
<body class="ebook-ssg2-page totoga2-page totoga2-video-copy-page">
|
||
<header class="map-archive-header">
|
||
<div class="header-inner">
|
||
<h1 class="main-title">無限挑戰 · 六六歌2</h1>
|
||
<div class="subtitle-wrap">
|
||
<span class="sub-title">水晶男孩回來啦！</span>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></nav>
|
||
|
||
<canvas id="particles"></canvas>
|
||
|
||
<div id="bilivideo-tabs" class="bilivideo-hub">
|
||
<nav class="ebook-back-link content-container totoga2-split-crossnav" aria-label="六六歌2 閱讀入口">
|
||
<a href="totoga2-video.html" class="btn" aria-current="page" title="無限挑戰 · 六六歌2 嵌入影片單頁">影片</a>
|
||
<a href="totoga2-copy-ebook.html" class="btn" title="紀實電子書內容獨立成頁">電子書</a>
|
||
<a href="totoga2-copy-timeline.html" class="btn" title="時間軸與紀實八章長文單頁">時間軸</a>
|
||
<a href="../fallen/totoga2.html" class="btn" title="單頁整合：影片／電子書／長文模式切換與八章錨點">網頁版（TOTOGA2）</a>
|
||
</nav>
|
||
|
||
<div class="content-container ebook-main">
|
||
<section class="ebook-intro section" aria-labelledby="ebook-bilivideo-heading">
|
||
<h2 class="section-title" id="ebook-bilivideo-heading">節目影片</h2>
|
||
|
||
<div class="bilivideo-tabs__shell">
|
||
<!-- tablist 在 DOM 上須先於 iframe，否則 B 站播放器合成層易蓋住下方按鈕文字；畫面順序改由 CSS flex order 控制 -->
|
||
<nav class="bilivideo-episode-nav" role="tablist" aria-label="節目影片集數">
|
||
<button type="button" class="btn bilivideo-episode-nav__tab bilivideo-episode-nav__tab--active"
|
||
role="tab" id="bilivideo-tab-1" aria-controls="bilivideo-panel-1"
|
||
aria-selected="true">上集</button>
|
||
<button type="button" class="btn bilivideo-episode-nav__tab" role="tab" id="bilivideo-tab-2"
|
||
aria-controls="bilivideo-panel-2" aria-selected="false" tabindex="-1">中集</button>
|
||
<button type="button" class="btn bilivideo-episode-nav__tab" role="tab" id="bilivideo-tab-3"
|
||
aria-controls="bilivideo-panel-3" aria-selected="false" tabindex="-1">下集</button>
|
||
</nav>
|
||
<div class="bilivideo-tabs__panels">
|
||
<div class="bilivideo-tabs__panel" role="tabpanel" id="bilivideo-panel-1"
|
||
aria-labelledby="bilivideo-tab-1">
|
||
<div class="bilivideo-frame">
|
||
<iframe title="無限挑戰 六六歌2 上集"
|
||
src="//player.bilibili.com/player.html?isOutside=true&aid=12288323&bvid=BV1Yx411B7TC&cid=20353565&p=1"
|
||
scrolling="no" border="0" frameborder="no" framespacing="0"
|
||
allowfullscreen="true"></iframe>
|
||
</div>
|
||
</div>
|
||
<div class="bilivideo-tabs__panel" role="tabpanel" id="bilivideo-panel-2"
|
||
aria-labelledby="bilivideo-tab-2" hidden>
|
||
<div class="bilivideo-frame">
|
||
<iframe title="無限挑戰 六六歌2 中集"
|
||
data-src="//player.bilibili.com/player.html?isOutside=true&aid=12288323&bvid=BV1Yx411B7TC&cid=20353561&p=2"
|
||
scrolling="no" border="0" frameborder="no" framespacing="0"
|
||
allowfullscreen="true"></iframe>
|
||
</div>
|
||
</div>
|
||
<div class="bilivideo-tabs__panel" role="tabpanel" id="bilivideo-panel-3"
|
||
aria-labelledby="bilivideo-tab-3" hidden>
|
||
<div class="bilivideo-frame">
|
||
<iframe title="無限挑戰 六六歌2 下集"
|
||
data-src="//player.bilibili.com/player.html?isOutside=true&aid=12288323&bvid=BV1Yx411B7TC&cid=20353562&p=3"
|
||
scrolling="no" border="0" frameborder="no" framespacing="0"
|
||
allowfullscreen="true"></iframe>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
|
||
<p class="ebook-back-link content-container">
|
||
<a href="../index.html#story" class="btn">回到首頁 · 傳奇的轉折</a>
|
||
</p>
|
||
|
||
<footer>
|
||
<p>SECHSKIES Fanpage © 2026 - 黃色氣球永遠飄揚</p>
|
||
<a href="https://jekkinoopy.github.io/Portfolio/" class="studio-link" target="_blank">
|
||
Design by <span class="mark_b">Jekkinoopy Studio</span>
|
||
</a>
|
||
</footer>
|
||
|
||
<script src="../assets/js/particles.js"></script>
|
||
<script src="../assets/js/portal-nav.js"></script>
|
||
<script>
|
||
(function () {
|
||
var root = document.getElementById("bilivideo-tabs");
|
||
if (!root) return;
|
||
var tabs = Array.prototype.slice.call(root.querySelectorAll('[role="tab"]'));
|
||
var panels = Array.prototype.slice.call(root.querySelectorAll('[role="tabpanel"]'));
|
||
|
||
function activate(index) {
|
||
tabs.forEach(function (tab, i) {
|
||
var on = i === index;
|
||
tab.setAttribute("aria-selected", on ? "true" : "false");
|
||
tab.tabIndex = on ? 0 : -1;
|
||
if (on) tab.classList.add("bilivideo-episode-nav__tab--active");
|
||
else tab.classList.remove("bilivideo-episode-nav__tab--active");
|
||
panels[i].hidden = !on;
|
||
if (on) {
|
||
var iframe = panels[i].querySelector("iframe[data-src]");
|
||
if (iframe && !iframe.getAttribute("src")) {
|
||
iframe.setAttribute("src", iframe.getAttribute("data-src"));
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
tabs.forEach(function (tab, i) {
|
||
tab.addEventListener("click", function () {
|
||
activate(i);
|
||
});
|
||
});
|
||
activate(0);
|
||
})();
|
||
</script>
|
||
</body>
|
||
|
||
</html> |