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

style 調整版面

Browse Source
This commit is contained in:
jekkinoopy
2026-05-15 22:32:35 +08:00
parent 177fb831a9
commit 12fa333a02
9 changed files with 283 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files
extra/totoga2-copy-ebook.html
+13 -16
View File
@@ -39,7 +39,10 @@
四月那場重逢，不只是一集綜藝，而是塵封十六年的旋律，終於在笑聲與淚水裡再次被聽見。這本紀實電子書留住《無限挑戰》六六歌2
的每一頁：有驚喜、有拉扯，也有那些當時說不出口的想念。慢慢翻過去吧——我們後來才明白，有些情誼早已超越了表演，只是在節目的鏡頭裡，換了一種方式，陪彼此一起變老。
</p>
<p class="ebook-intro-note">翻頁方式：點擊書頁左、右側，或拖曳頁角即可往前／往後翻。若畫面載入較慢，請稍候再試。</p>
<div class="ebook-intro-notes fa-before-lead fa-before-lead--balloon">
<p class="ebook-intro-note">看看後面飄落的氣球，等等十秒，電子書就會出現囉。</p>
<p class="ebook-intro-note">翻頁方式：點擊書頁左、右側，或拖曳頁角即可往前／往後翻。</p>
</div>
</section>
<!-- <div class="flip-ebook-shell">
@@ -100,27 +103,21 @@
var sizePage = await pdf.getPage(sizePageIndex);
var natural = sizePage.getViewport({ scale: 1 });
var shell = document.querySelector('.flip-ebook-shell');
var maxW = shell ? shell.clientWidth : Math.min(window.innerWidth, 1200);
var pageW = Math.max(320, Math.floor(maxW));
var pageH = Math.floor(pageW * (natural.height / natural.width));
var maxH = Math.floor(window.innerHeight * 0.72);
if (pageH > maxH) {
pageH = maxH;
pageW = Math.floor(pageH * (natural.width / natural.height));
}
var renderScale = (pageW / natural.width) * Math.min(window.devicePixelRatio || 1, 2);
/* 單頁寬高與 PDF 同比例；外殼可滿欄，書本置中（不拉扁 canvas） */
var bookHost = document.getElementById('book-container');
if (bookHost) {
bookHost.style.width = pageW + 'px';
bookHost.style.width = '100%';
bookHost.style.maxWidth = '100%';
bookHost.style.marginLeft = 'auto';
bookHost.style.marginRight = 'auto';
bookHost.style.marginLeft = '0';
bookHost.style.marginRight = '0';
}
container.style.width = pageW + 'px';
container.style.width = '100%';
container.style.maxWidth = '100%';
var measureEl = bookHost || shell;
var pageW = Math.max(320, Math.floor((measureEl && measureEl.clientWidth) || 0));
var pageH = Math.floor(pageW * (natural.height / natural.width));
var renderScale = (pageW / natural.width) * Math.min(window.devicePixelRatio || 1, 2);
for (var i = 1; i <= pdf.numPages; i++) {
var page = await pdf.getPage(i);
var viewport = page.getViewport({ scale: renderScale });
extra/totoga2-video.html
+13 -24
View File
@@ -12,32 +12,22 @@
</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-copy-timeline.html" class="btn" title="時間軸與紀實八章長文單頁">時間軸</a>
<a href="totoga2-copy-ebook.html" class="btn" title="紀實電子書內容獨立成頁">電子書</a>
<a href="../fallen/totoga2.html" class="btn" title="單頁整合：影片／電子書／長文模式切換與八章錨點">圖文好讀版</a>
<a href="totoga2-video.html" class="btn" aria-current="page" title="無限挑戰 · 六六歌2 嵌入影片單頁">影片</a>
</nav>
<nav class="ebook-back-link content-container totoga2-split-crossnav" aria-label="六六歌2 閱讀入口">
<a href="totoga2-copy-timeline.html" class="btn" title="時間軸與紀實八章長文單頁">時間軸</a>
<a href="totoga2-copy-ebook.html" class="btn" title="紀實電子書內容獨立成頁">電子書</a>
<a href="../fallen/totoga2.html" class="btn" title="單頁整合：影片／電子書／長文模式切換與八章錨點">圖文好讀版</a>
<a href="totoga2-video.html" class="btn" aria-current="page" title="無限挑戰 · 六六歌2 嵌入影片單頁">影片</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="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">
<div id="bilivideo-tabs" 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"
@@ -77,9 +67,8 @@
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</section>
</div>
<p class="ebook-back-link content-container">
@@ -129,4 +118,4 @@
</script>
</body>
</html>
</html>