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

feat 新增電子書頁面

Browse Source
This commit is contained in:
jekkinoopy
2026-05-13 14:16:38 +08:00
parent d994f841e5
commit b1f948f2d8
16 changed files with 243 additions and 359 deletions
Download Patch File Download Diff File Expand all files Collapse all files
archive.html
+1 -42
View File
@@ -21,48 +21,7 @@
</div>
</header>
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽">
<a class="logo" href="index.html"><img src="./img/logov.svg" alt="SECHSKIES Logo"></a>
<ul>
<li><a href="index.html#origin">淪陷瞬間</a>
<ul class="portal-submenu">
<li><a href="index.html#mission">成立的初衷</a></li>
<li><a href="index.html#timeline">跨時空軌跡</a></li>
<li><a href="index.html#start">好奇的開端</a></li>
</ul>
</li>
<li><a href="jiwon.html">瘋子與天才</a>
<ul class="portal-submenu">
<li><a href="jiwon.html#variety">瘋狂出演中</a></li>
<li><a href="jiwon.html#stage">隊長的氣場</a></li>
</ul>
</li>
<li><a href="sunghoon.html">消失的真相</a>
<ul class="portal-submenu">
<li><a href="sunghoon.html#truth">還原那場雨</a></li>
<li><a href="sunghoon.html#voice">被掩蓋的主唱</a></li>
</ul>
</li>
<li><a href="concert.html">現場的震撼</a>
<ul class="portal-submenu">
<li><a href="concert.html#stage-now">永恆的重逢</a></li>
<li><a href="concert.html#stage-past">燦爛的最初</a></li>
</ul>
</li>
<li><a href="archive.html">黃色留聲機</a>
<ul class="portal-submenu">
<li><a href="archive.html#new">啟動新篇章</a></li>
<li><a href="archive.html#classic">輝煌全盛期</a></li>
</ul>
</li>
<li><a href="map.html">聖地巡禮</a>
<ul class="portal-submenu">
<li><a href="map.html#taipei">台北聖地</a></li>
<li><a href="map.html#global">海外遠征</a></li>
</ul>
</li>
</ul>
</nav>
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></nav>
<canvas id="particles"></canvas>
chronicle.html
+1 -42
View File
@@ -20,48 +20,7 @@
</div>
</header>
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽">
<a class="logo" href="index.html"><img src="./img/logov.svg" alt="SECHSKIES Logo"></a>
<ul>
<li><a href="index.html#origin">淪陷瞬間</a>
<ul class="portal-submenu">
<li><a href="index.html#mission">成立的初衷</a></li>
<li><a href="index.html#timeline">跨時空軌跡</a></li>
<li><a href="index.html#start">好奇的開端</a></li>
</ul>
</li>
<li><a href="jiwon.html">瘋子與天才</a>
<ul class="portal-submenu">
<li><a href="jiwon.html#variety">瘋狂出演中</a></li>
<li><a href="jiwon.html#stage">隊長的氣場</a></li>
</ul>
</li>
<li><a href="sunghoon.html">消失的真相</a>
<ul class="portal-submenu">
<li><a href="sunghoon.html#truth">還原那場雨</a></li>
<li><a href="sunghoon.html#voice">被掩蓋的主唱</a></li>
</ul>
</li>
<li><a href="concert.html">現場的震撼</a>
<ul class="portal-submenu">
<li><a href="concert.html#stage-now">永恆的重逢</a></li>
<li><a href="concert.html#stage-past">燦爛的最初</a></li>
</ul>
</li>
<li><a href="archive.html">黃色留聲機</a>
<ul class="portal-submenu">
<li><a href="archive.html#new">啟動新篇章</a></li>
<li><a href="archive.html#classic">輝煌全盛期</a></li>
</ul>
</li>
<li><a href="map.html">聖地巡禮</a>
<ul class="portal-submenu">
<li><a href="map.html#taipei">台北聖地</a></li>
<li><a href="map.html#global">海外遠征</a></li>
</ul>
</li>
</ul>
</nav>
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></nav>
<canvas id="particles"></canvas>
classic.html
+1 -42
View File
@@ -19,48 +19,7 @@
</div>
</header>
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽">
<a class="logo" href="index.html"><img src="./img/logov.svg" alt="SECHSKIES Logo"></a>
<ul>
<li><a href="index.html#origin">淪陷瞬間</a>
<ul class="portal-submenu">
<li><a href="index.html#mission">成立的初衷</a></li>
<li><a href="index.html#timeline">跨時空軌跡</a></li>
<li><a href="index.html#start">好奇的開端</a></li>
</ul>
</li>
<li><a href="jiwon.html">瘋子與天才</a>
<ul class="portal-submenu">
<li><a href="jiwon.html#variety">瘋狂出演中</a></li>
<li><a href="jiwon.html#stage">隊長的氣場</a></li>
</ul>
</li>
<li><a href="sunghoon.html">消失的真相</a>
<ul class="portal-submenu">
<li><a href="sunghoon.html#truth">還原那場雨</a></li>
<li><a href="sunghoon.html#voice">被掩蓋的主唱</a></li>
</ul>
</li>
<li><a href="concert.html">現場的震撼</a>
<ul class="portal-submenu">
<li><a href="concert.html#stage-now">永恆的重逢</a></li>
<li><a href="concert.html#stage-past">燦爛的最初</a></li>
</ul>
</li>
<li><a href="archive.html">黃色留聲機</a>
<ul class="portal-submenu">
<li><a href="archive.html#new">啟動新篇章</a></li>
<li><a href="archive.html#classic">輝煌全盛期</a></li>
</ul>
</li>
<li><a href="map.html">聖地巡禮</a>
<ul class="portal-submenu">
<li><a href="map.html#taipei">台北聖地</a></li>
<li><a href="map.html#global">海外遠征</a></li>
</ul>
</li>
</ul>
</nav>
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></nav>
<canvas id="particles"></canvas>
concert.html
+1 -42
View File
@@ -21,48 +21,7 @@
</div>
</div>
</header>
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽">
<a class="logo" href="index.html"><img src="./img/logov.svg" alt="SECHSKIES Logo"></a>
<ul>
<li><a href="index.html#origin">淪陷瞬間</a>
<ul class="portal-submenu">
<li><a href="index.html#mission">成立的初衷</a></li>
<li><a href="index.html#timeline">跨時空軌跡</a></li>
<li><a href="index.html#start">好奇的開端</a></li>
</ul>
</li>
<li><a href="jiwon.html">瘋子與天才</a>
<ul class="portal-submenu">
<li><a href="jiwon.html#variety">瘋狂出演中</a></li>
<li><a href="jiwon.html#stage">隊長的氣場</a></li>
</ul>
</li>
<li><a href="sunghoon.html">消失的真相</a>
<ul class="portal-submenu">
<li><a href="sunghoon.html#truth">還原那場雨</a></li>
<li><a href="sunghoon.html#voice">被掩蓋的主唱</a></li>
</ul>
</li>
<li><a href="concert.html">現場的震撼</a>
<ul class="portal-submenu">
<li><a href="concert.html#stage-now">永恆的重逢</a></li>
<li><a href="concert.html#stage-past">燦爛的最初</a></li>
</ul>
</li>
<li><a href="archive.html">黃色留聲機</a>
<ul class="portal-submenu">
<li><a href="archive.html#new">啟動新篇章</a></li>
<li><a href="archive.html#classic">輝煌全盛期</a></li>
</ul>
</li>
<li><a href="map.html">聖地巡禮</a>
<ul class="portal-submenu">
<li><a href="map.html#taipei">台北聖地</a></li>
<li><a href="map.html#global">海外遠征</a></li>
</ul>
</li>
</ul>
</nav>
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></nav>
<canvas id="particles"></canvas>
<div class="search-section">
<input type="text" class="search-input" placeholder="搜尋曲目或場次...">
img/2023_電子書_無限挑戰六六歌2_final跨頁.pdf
BIN
View File
Binary file not shown.
img/志源生日.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 323 KiB

img/水晶男孩推廣部FB.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 722 KiB

index.html
+21 -49
View File
@@ -21,48 +21,7 @@
</div>
</header>
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽">
<a class="logo" href="index.html"><img src="./img/logov.svg" alt="SECHSKIES Logo"></a>
<ul>
<li><a href="index.html#origin">淪陷瞬間</a>
<ul class="portal-submenu">
<li><a href="index.html#mission">成立的初衷</a></li>
<li><a href="index.html#timeline">跨時空軌跡</a></li>
<li><a href="index.html#start">好奇的開端</a></li>
</ul>
</li>
<li><a href="jiwon.html">瘋子與天才</a>
<ul class="portal-submenu">
<li><a href="jiwon.html#variety">瘋狂出演中</a></li>
<li><a href="jiwon.html#stage">隊長的氣場</a></li>
</ul>
</li>
<li><a href="sunghoon.html">消失的真相</a>
<ul class="portal-submenu">
<li><a href="sunghoon.html#truth">還原那場雨</a></li>
<li><a href="sunghoon.html#voice">被掩蓋的主唱</a></li>
</ul>
</li>
<li><a href="concert.html">現場的震撼</a>
<ul class="portal-submenu">
<li><a href="concert.html#stage-now">永恆的重逢</a></li>
<li><a href="concert.html#stage-past">燦爛的最初</a></li>
</ul>
</li>
<li><a href="archive.html">黃色留聲機</a>
<ul class="portal-submenu">
<li><a href="archive.html#new">啟動新篇章</a></li>
<li><a href="archive.html#classic">輝煌全盛期</a></li>
</ul>
</li>
<li><a href="map.html">聖地巡禮</a>
<ul class="portal-submenu">
<li><a href="map.html#taipei">台北聖地</a></li>
<li><a href="map.html#global">海外遠征</a></li>
</ul>
</li>
</ul>
</nav>
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></nav>
<canvas id="particles"></canvas>
@@ -75,12 +34,11 @@
身為在回歸後才被這場 <span class="highlight">「黃色奇蹟」</span> 擊中的新一代粉絲，我深刻體會那種從好奇觀看到最終徹底淪陷的悸動。
</p>
<p class="core-description">
水晶男孩（SECHSKIES）的魔力在於：即便錯過他們第一次站上大型舞台的年代，依然會被他們 <span class="highlight">熱血、真誠且專業</span>
的魅力所感動。這裡不僅是資訊站，更是由熱愛凝聚的空間。從台上的職人氣場，到台下像家人吵架又像互相撐腰的 <span
class="highlight">反差</span>，把「現在入坑」變成一種完全被允許的日常。
這段旅程始於 2016 年 4 月，透過國民綜藝《無限挑戰》的回歸企劃，讓原本不認識這組傳奇的我，因一時好奇點開節目。
即便錯過了那個屬於他們的世紀末，但跟著節目的編排鋪陳，從歡笑到感動，我依然被那份熱血、真誠且專業的魅力所震撼。
</p>
<p class="call-to-action">
經典不是博物館的玻璃櫃，而是每次重播都讓人想跟著跳的節奏。加入我們，一起把手上的應援色舉高一點。
對我來說，經典不是博物館的玻璃櫃，而是每次重播都讓人想跟著跳的節奏。這種從路人轉化為深陷其中的過程，證明了魅力可以跨越時間，也正是這一切好奇的起點。
</p>
</div>
</section>
@@ -89,13 +47,23 @@
<div class="mission-layout">
<div class="mission-content">
<p>
本站是以 <span class="highlight">SECHSKIES 水晶男孩</span> 為核心的數位推廣部，旨在透過 <span class="highlight">專業的視覺策展</span> 宣傳成員魅力與 <span class="highlight">小黃們的應援活動</span>。我們不滿足於傳統的追星模式，而是嘗試以水晶男孩為 <span class="highlight">靈感主軸</span>，延伸至 <span class="highlight">網頁開發、視覺設計與內容企劃</span> 等多重領域，將對偶像的喜愛轉化為 <span class="highlight">實質的專業養分</span>。在這裡，你不只能探索他們的 <span class="highlight">傳奇軌跡</span>，更能見證追星如何激發 <span class="highlight">創作潛能</span>。
本站是以 <span class="highlight">SECHSKIES 水晶男孩</span> 為核心的數位推廣部，旨在透過 <span
class="highlight">專業的視覺策展</span> 宣傳成員魅力與 <span
class="highlight">小黃們的應援活動</span>。我們不滿足於傳統的追星模式，而是嘗試以水晶男孩為 <span
class="highlight">靈感主軸</span>，延伸至 <span class="highlight">網頁開發、視覺設計與內容企劃</span>
等多重領域，將對偶像的喜愛轉化為 <span class="highlight">實質的專業養分</span>。在這裡，你不只能探索他們的 <span
class="highlight">傳奇軌跡</span>，更能見證追星如何激發 <span class="highlight">創作潛能</span>。
</p>
<div class="logo-concept">
<h3>LOGO 設計理念</h3>
<p>
<span class="highlight">「晶」</span>字發想來自<span class="highlight">六角形的水晶</span>，為了強調水晶男孩<span class="highlight">初心為六人</span>。上半部形似<span class="highlight">數字 6</span>，搭配演唱會必備的<span class="highlight">手燈圖案</span>，代表粉絲和水晶<span class="highlight">密不可分的關係</span>。色彩配置發想來自回歸舞台成員脫下眼罩的剎那，整個場地從一片漆黑瞬間發亮，映入眼簾的是一片<span class="highlight">黃色海洋</span>。以此片段為契機，設計成<span class="highlight">黑色系與黃色系</span>的色彩搭配，來記錄那瞬間的感動。
<span class="highlight">「晶」</span>字發想來自<span class="highlight">六角形的水晶</span>，為了強調水晶男孩<span
class="highlight">初心為六人</span>。上半部形似<span class="highlight">數字 6</span>，搭配演唱會必備的<span
class="highlight">手燈圖案</span>，代表粉絲和水晶<span
class="highlight">密不可分的關係</span>。色彩配置發想來自回歸舞台成員脫下眼罩的剎那，整個場地從一片漆黑瞬間發亮，映入眼簾的是一片<span
class="highlight">黃色海洋</span>。以此片段為契機，設計成<span
class="highlight">黑色系與黃色系</span>的色彩搭配，來記錄那瞬間的感動。
</p>
</div>
</div>
@@ -112,7 +80,8 @@
</div>
<div class="quote-box">
「我們要用這座<span class="highlight">藝廊般的網站</span>證明：追星的孩子不僅不會變壞，更會因為那份<span class="highlight">守護的熱情</span>，讓現在的自己變得比追星前的自己還要厲害。」
「我們要用這座<span class="highlight">藝廊般的網站</span>證明：追星的孩子不僅不會變壞，更會因為那份<span
class="highlight">守護的熱情</span>，讓現在的自己變得比追星前的自己還要厲害。」
</div>
</section>
@@ -160,6 +129,9 @@
像劇情的反轉一樣過癮：這幾個節點，剛好是許多人從「旁觀綜藝」滑進「正式入坑」的轉軌。若想讀對白級細節，隨時可切到完整紀實長文。
<a href="chronicle.html">開啟完整紀實篇章</a>
</p>
<div class="story-ebook-cta">
<a href="ssg2-ebook.html" class="btn story-ebook-btn">開啟六六歌2 紀實電子書</a>
</div>
<div class="merged-storyline">
<article id="special" class="story-node" data-era="六六歌">
jiwon.html
+1 -42
View File
@@ -20,48 +20,7 @@
</div>
</header>
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽">
<a class="logo" href="index.html"><img src="./img/logov.svg" alt="SECHSKIES Logo"></a>
<ul>
<li><a href="index.html#origin">淪陷瞬間</a>
<ul class="portal-submenu">
<li><a href="index.html#mission">成立的初衷</a></li>
<li><a href="index.html#timeline">跨時空軌跡</a></li>
<li><a href="index.html#start">好奇的開端</a></li>
</ul>
</li>
<li><a href="jiwon.html">瘋子與天才</a>
<ul class="portal-submenu">
<li><a href="jiwon.html#variety">瘋狂出演中</a></li>
<li><a href="jiwon.html#stage">隊長的氣場</a></li>
</ul>
</li>
<li><a href="sunghoon.html">消失的真相</a>
<ul class="portal-submenu">
<li><a href="sunghoon.html#truth">還原那場雨</a></li>
<li><a href="sunghoon.html#voice">被掩蓋的主唱</a></li>
</ul>
</li>
<li><a href="concert.html">現場的震撼</a>
<ul class="portal-submenu">
<li><a href="concert.html#stage-now">永恆的重逢</a></li>
<li><a href="concert.html#stage-past">燦爛的最初</a></li>
</ul>
</li>
<li><a href="archive.html">黃色留聲機</a>
<ul class="portal-submenu">
<li><a href="archive.html#new">啟動新篇章</a></li>
<li><a href="archive.html#classic">輝煌全盛期</a></li>
</ul>
</li>
<li><a href="map.html">聖地巡禮</a>
<ul class="portal-submenu">
<li><a href="map.html#taipei">台北聖地</a></li>
<li><a href="map.html#global">海外遠征</a></li>
</ul>
</li>
</ul>
</nav>
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></nav>
<canvas id="particles"></canvas>
lyrics.css
+34 -7
View File
@@ -36,6 +36,7 @@ body.lyrics-page .lyrics-main-table {
width: 100%;
max-width: 1100px;
margin: 0 auto;
table-layout: fixed;
border-collapse: separate;
border-spacing: clamp(0.75rem, 2.5vw, 1.75rem);
background: transparent !important;
@@ -44,21 +45,41 @@ body.lyrics-page .lyrics-main-table {
}
body.lyrics-page .lyrics-main-table > tbody > tr > td {
padding: 0.35rem 0.5rem !important;
padding: 0 !important;
border: none !important;
border-bottom: none !important;
text-align: left !important;
color: inherit !important;
vertical-align: top !important;
background: transparent !important;
}
body.lyrics-page .main-left {
width: 48%;
max-width: 480px;
/* 兩欄等寬 + 同一套「卡片区」留白與邊框，左右才對稱 */
body.lyrics-page .main-left,
body.lyrics-page .lyrics-text-cell,
body.lyrics-page .lyrics-map-cell,
body.lyrics-page .lyrics-contact-cell {
width: 50%;
max-width: none;
box-sizing: border-box;
padding: clamp(0.85rem, 2vw, 1.15rem) clamp(0.9rem, 2.2vw, 1.25rem) !important;
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(0, 0, 0, 0.22);
}
body.lyrics-page .main-left,
body.lyrics-page .lyrics-text-cell {
vertical-align: top;
}
body.lyrics-page .lyrics-map-cell {
vertical-align: top;
}
body.lyrics-page .lyrics-contact-cell {
vertical-align: middle;
}
body.lyrics-page .main-left iframe {
display: block;
width: 100%;
@@ -91,7 +112,14 @@ body.lyrics-page .lyrics-main-table p {
line-height: 1.55;
font-size: clamp(1rem, 2.2vw, 1.35rem);
margin: 0;
max-width: 52ch;
}
body.lyrics-page .lyrics-map-cell iframe {
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}
body.lyrics-page .lyrics-contact-cell .contact {
margin-top: 0;
}
body.lyrics-page a {
@@ -108,7 +136,6 @@ body.lyrics-page .contact {
color: var(--lyrics-paper);
font-size: 0.95rem;
line-height: 1.65;
max-width: 42ch;
}
body.lyrics-page .contact h3 {
lyrics.html
+4 -6
View File
@@ -36,7 +36,7 @@
<dd>K-Pop</dd>
</dl>
</td>
<td>
<td class="lyrics-text-cell">
<p>다신 볼 수 없을 것만 같던<br>
그대가 내 앞에 서 있네요<br>
지킬 수 있을지 모르며 약속했던<br>
@@ -91,16 +91,14 @@
</td>
</tr>
<tr>
<td colspan="2">
<td class="lyrics-map-cell">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3163.2574996244366!2d126.9052587762962!3d37.54899662513289!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x357c992bb3f6a887%3A0x6058954f87325221!2sYG%20Entertainment!5e0!3m2!1szh-TW!2stw!4v1776239000614!5m2!1szh-TW!2stw"
width="100%" style="aspect-ratio: 16 / 9; max-width: 720px; border: 0; border-radius: 10px; display: block; margin: 1.5rem auto 0;"
width="100%" style="aspect-ratio: 16 / 9; border: 0; border-radius: 10px; display: block; min-height: 200px;"
allowfullscreen loading="lazy"
referrerpolicy="no-referrer-when-downgrade"></iframe>
</td>
</tr>
<tr>
<td colspan="2">
<td class="lyrics-contact-cell">
<div class="contact">
<img src="https://ygfamily.com/home/assets/images/f_logo.svg" alt="YG Entertainment logo">
<h3>YG Entertainment</h3>
map.html
+1 -42
View File
@@ -22,48 +22,7 @@
</div>
</header>
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽">
<a class="logo" href="index.html"><img src="./img/logov.svg" alt="SECHSKIES Logo"></a>
<ul>
<li><a href="index.html#origin">淪陷瞬間</a>
<ul class="portal-submenu">
<li><a href="index.html#mission">成立的初衷</a></li>
<li><a href="index.html#timeline">跨時空軌跡</a></li>
<li><a href="index.html#start">好奇的開端</a></li>
</ul>
</li>
<li><a href="jiwon.html">瘋子與天才</a>
<ul class="portal-submenu">
<li><a href="jiwon.html#variety">瘋狂出演中</a></li>
<li><a href="jiwon.html#stage">隊長的氣場</a></li>
</ul>
</li>
<li><a href="sunghoon.html">消失的真相</a>
<ul class="portal-submenu">
<li><a href="sunghoon.html#truth">還原那場雨</a></li>
<li><a href="sunghoon.html#voice">被掩蓋的主唱</a></li>
</ul>
</li>
<li><a href="concert.html">現場的震撼</a>
<ul class="portal-submenu">
<li><a href="concert.html#stage-now">永恆的重逢</a></li>
<li><a href="concert.html#stage-past">燦爛的最初</a></li>
</ul>
</li>
<li><a href="archive.html">黃色留聲機</a>
<ul class="portal-submenu">
<li><a href="archive.html#new">啟動新篇章</a></li>
<li><a href="archive.html#classic">輝煌全盛期</a></li>
</ul>
</li>
<li><a href="map.html">聖地巡禮</a>
<ul class="portal-submenu">
<li><a href="map.html#taipei">台北聖地</a></li>
<li><a href="map.html#global">海外遠征</a></li>
</ul>
</li>
</ul>
</nav>
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></nav>
<div class="member-tabs" aria-label="成員篩選">
<button class="tab-btn active" data-member="all" aria-pressed="true">全部行程</button>
portal-nav.js
+51
View File
@@ -1,4 +1,55 @@
(() => {
/** 全站導覽 HTML — 僅修改此字串即可同步所有頁面 */
const PORTAL_NAV_INNER_HTML = `
<a class="logo" href="index.html"><img src="./img/logov.svg" alt="SECHSKIES Logo"></a>
<ul>
<li><a href="index.html#origin">淪陷瞬間</a>
<ul class="portal-submenu">
<li><a href="index.html#start">好奇的開端</a></li>
<li><a href="index.html#mission">成立的初衷</a></li>
<li><a href="index.html#timeline">跨時空軌跡</a></li>
<li><a href="index.html#story">傳奇的轉折</a></li>
<li><a href="chronicle.html">傳奇紀實長卷</a></li>
<li><a href="ssg2-ebook.html">六六歌2 電子書</a></li>
</ul>
</li>
<li><a href="jiwon.html">瘋子與天才</a>
<ul class="portal-submenu">
<li><a href="jiwon.html#variety">瘋狂出演中</a></li>
<li><a href="jiwon.html#stage">隊長的氣場</a></li>
</ul>
</li>
<li><a href="sunghoon.html">消失的真相</a>
<ul class="portal-submenu">
<li><a href="sunghoon.html#truth">還原那場雨</a></li>
<li><a href="sunghoon.html#voice">被掩蓋的主唱</a></li>
</ul>
</li>
<li><a href="concert.html">現場的震撼</a>
<ul class="portal-submenu">
<li><a href="concert.html#stage-now">永恆的重逢</a></li>
<li><a href="concert.html#stage-past">燦爛的最初</a></li>
</ul>
</li>
<li><a href="archive.html">黃色留聲機</a>
<ul class="portal-submenu">
<li><a href="archive.html#new">啟動新篇章</a></li>
<li><a href="archive.html#classic">輝煌全盛期</a></li>
</ul>
</li>
<li><a href="map.html">聖地巡禮</a>
<ul class="portal-submenu">
<li><a href="map.html#taipei">台北聖地</a></li>
<li><a href="map.html#global">海外遠征</a></li>
</ul>
</li>
</ul>
`.trim();
document.querySelectorAll("nav.portal-nav[data-portal-nav]").forEach((nav) => {
nav.innerHTML = PORTAL_NAV_INNER_HTML;
});
const navs = Array.from(document.querySelectorAll(".portal-nav"));
if (!navs.length) return;
ssg2-ebook.html
+59
View File
@@ -0,0 +1,59 @@
<!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="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="tablet.css">
</head>
<body class="ebook-ssg2-page">
<header class="map-archive-header">
<div class="header-inner">
<h1 class="main-title">無限挑戰 · 六六歌2</h1>
<div class="subtitle-wrap">
<span class="sub-title">INFINITE CHALLENGE · SIX SONGS 2 — E-BOOK</span>
</div>
</div>
</header>
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></nav>
<canvas id="particles"></canvas>
<main class="content-container ebook-main">
<section class="ebook-intro section" aria-label="電子書說明">
<h2 class="section-title">紀實電子書</h2>
<p class="ebook-intro-lead">
以下為《無限挑戰》六六歌2 相關跨頁電子書（FlipHTML5）。若載入較慢，請稍候或重新整理；全螢幕閱讀請使用閱讀器內建控制項。
</p>
</section>
<div class="flip-ebook-shell">
<div class="flip-ebook-aspect">
<iframe src="https://online.fliphtml5.com/tjyxm/vqff/"
title="2023_電子書_無限挑戰六六歌2_final跨頁"
allowfullscreen></iframe>
</div>
</div>
<p class="ebook-back-link">
<a href="index.html#story" class="btn">回到首頁 · 傳奇的轉折</a>
</p>
</main>
<footer>
<p>SECHSKIES Fanpage &copy; 2026 - 黃色氣球永遠飄揚</p>
<a href="https://jekkinoopy.github.io/Portfolio/" class="studio-link" target="_blank">
Design by <strong>Jekkinoopy Studio</strong>
</a>
</footer>
<script src="particles.js"></script>
<script src="portal-nav.js"></script>
</body>
</html>
style.css
+67 -3
View File
@@ -384,7 +384,7 @@ section {
}
/* 首頁：成立的初衷 — 標題與全站一致置中；其下雙欄（文 7 : 圖 3） */
.mission-section > .section-title {
.mission-section>.section-title {
margin-bottom: clamp(1.25rem, 3vw, 1.75rem);
}
@@ -395,7 +395,7 @@ section {
align-items: start;
}
.mission-content > p,
.mission-content>p,
.mission-content .logo-concept p {
color: #4a4a4a;
font-size: 1rem;
@@ -422,7 +422,7 @@ section {
}
/* 金句：獨立於雙欄之下，全區塊寬度內致中 */
.mission-section > .quote-box {
.mission-section>.quote-box {
width: 100%;
max-width: 44rem;
margin: clamp(1.75rem, 4vw, 2.5rem) auto 0;
@@ -1317,4 +1317,68 @@ footer {
.mode-btn {
width: 100%;
}
}
/* 首頁 · 傳奇的轉折 — 電子書按鈕 */
.story-ebook-cta {
text-align: center;
margin: 0 0 1.75rem;
}
.story-ebook-btn {
display: inline-block;
padding: 12px 28px;
font-size: 0.95rem;
letter-spacing: 0.06em;
}
/* 六六歌2 電子書頁 */
body.ebook-ssg2-page .ebook-intro-lead {
text-align: center;
max-width: 42rem;
margin: 0 auto 1.5rem;
color: #4a4a4a;
line-height: 1.7;
}
body.ebook-ssg2-page .ebook-main,
body.ebook-ssg2-page footer {
position: relative;
z-index: 1;
}
body.ebook-ssg2-page .ebook-intro.section {
margin-bottom: 1.25rem;
}
body.ebook-ssg2-page .flip-ebook-shell {
position: relative;
width: 100%;
max-width: 1100px;
margin: 0 auto 2rem;
border-radius: 14px;
overflow: hidden;
border: 1px solid rgba(255, 204, 0, 0.22);
box-shadow: 0 16px 42px rgba(0, 0, 0, 0.22);
}
body.ebook-ssg2-page .flip-ebook-aspect {
position: relative;
padding-top: max(60%, 324px);
width: 100%;
height: 0;
}
body.ebook-ssg2-page .flip-ebook-aspect iframe {
position: absolute;
border: none;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
body.ebook-ssg2-page .ebook-back-link {
text-align: center;
margin: 0 0 2.5rem;
}
sunghoon.html
+1 -42
View File
@@ -20,48 +20,7 @@
</div>
</header>
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽">
<a class="logo" href="index.html"><img src="./img/logov.svg" alt="SECHSKIES Logo"></a>
<ul>
<li><a href="index.html#origin">淪陷瞬間</a>
<ul class="portal-submenu">
<li><a href="index.html#mission">成立的初衷</a></li>
<li><a href="index.html#timeline">跨時空軌跡</a></li>
<li><a href="index.html#start">好奇的開端</a></li>
</ul>
</li>
<li><a href="jiwon.html">瘋子與天才</a>
<ul class="portal-submenu">
<li><a href="jiwon.html#variety">瘋狂出演中</a></li>
<li><a href="jiwon.html#stage">隊長的氣場</a></li>
</ul>
</li>
<li><a href="sunghoon.html">消失的真相</a>
<ul class="portal-submenu">
<li><a href="sunghoon.html#truth">還原那場雨</a></li>
<li><a href="sunghoon.html#voice">被掩蓋的主唱</a></li>
</ul>
</li>
<li><a href="concert.html">現場的震撼</a>
<ul class="portal-submenu">
<li><a href="concert.html#stage-now">永恆的重逢</a></li>
<li><a href="concert.html#stage-past">燦爛的最初</a></li>
</ul>
</li>
<li><a href="archive.html">黃色留聲機</a>
<ul class="portal-submenu">
<li><a href="archive.html#new">啟動新篇章</a></li>
<li><a href="archive.html#classic">輝煌全盛期</a></li>
</ul>
</li>
<li><a href="map.html">聖地巡禮</a>
<ul class="portal-submenu">
<li><a href="map.html#taipei">台北聖地</a></li>
<li><a href="map.html#global">海外遠征</a></li>
</ul>
</li>
</ul>
</nav>
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></nav>
<canvas id="particles"></canvas>