jekkinoopy/sechskies
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix 六六歌模式規劃

Browse Source
This commit is contained in:
jekkinoopy
2026-05-15 02:47:26 +08:00
parent 0e64e5d571
commit 2d1497c045
20 changed files with 263 additions and 179 deletions
Download Patch File Download Diff File Expand all files Collapse all files
extra/totoga2-copy-video.html
+69 -40
View File
@@ -10,17 +10,12 @@
<link rel="stylesheet" href="../assets/css/tablet.css">
</head>
<body class="ebook-ssg2-page totoga2-page">
<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="main-content-title">
<span class="highlight-text">水晶男孩回來啦！</span>
<span class="eng-title">SECHSKIES COM' BACK</span>
</div>
<div class="subtitle-wrap">
<span class="sub-title">INFINITE CHALLENGE · SIX SONGS 2 — 節目影片</span>
<span class="event-date">APRIL 14, 2016</span>
<span class="sub-title">水晶男孩回來啦！</span>
</div>
</div>
</header>
@@ -37,41 +32,43 @@
</nav>
<div class="content-container ebook-main">
<section class="ebook-intro section" aria-label="影片三集">
<h2 class="section-title">節目影片</h2>
<p class="ebook-intro-lead">
以下為 Bilibili 嵌入播放器（16：9）。若無法播放，請至站內搜尋同一 BV 號；中集、下集請將 iframe 的 <code>bvid</code> 換成你的分集連結。
</p>
</section>
<section class="ebook-intro section" aria-labelledby="ebook-bilivideo-heading">
<h2 class="section-title" id="ebook-bilivideo-heading">節目影片</h2>
<div class="bilivideo-stack">
<section class="bilivideo-block" aria-labelledby="bilivideo-top">
<h3 id="bilivideo-top">上集</h3>
<div class="bilivideo-frame">
<iframe
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 class="bilivideo-tabs" id="bilivideo-tabs">
<div class="bilivideo-tabs__shell">
<div class="bilivideo-tabs__list" role="tablist" aria-label="節目影片集數">
<button type="button" class="bilivideo-tabs__tab bilivideo-tabs__tab--active" role="tab" id="bilivideo-tab-1"
aria-controls="bilivideo-panel-1" aria-selected="true">上集</button>
<button type="button" class="bilivideo-tabs__tab" role="tab" id="bilivideo-tab-2"
aria-controls="bilivideo-panel-2" aria-selected="false" tabindex="-1">中集</button>
<button type="button" class="bilivideo-tabs__tab" role="tab" id="bilivideo-tab-3"
aria-controls="bilivideo-panel-3" aria-selected="false" tabindex="-1">下集</button>
</div>
<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>
<section class="bilivideo-block" aria-labelledby="bilivideo-mid">
<h3 id="bilivideo-mid">中集</h3>
<p class="bilivideo-placeholder-note">預設與上集同一支；請替換 <code>bvid</code> 為中集 BV。</p>
<div class="bilivideo-frame">
<iframe
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>
</section>
<section class="bilivideo-block" aria-labelledby="bilivideo-bot">
<h3 id="bilivideo-bot">下集</h3>
<p class="bilivideo-placeholder-note">預設與上集同一支；請替換 <code>bvid</code> 為下集 BV。</p>
<div class="bilivideo-frame">
<iframe
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>
</section>
</div>
</div>
</section>
</div>
<p class="ebook-back-link content-container">
@@ -89,6 +86,38 @@
<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-tabs__tab--active");
else tab.classList.remove("bilivideo-tabs__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>