docs: 新增 color-tokens 規範文件
No files matched your search
@@ -1,2 +1,2 @@
|
||||
# 本機圖片備份(勿進 repo)
|
||||
*.png.bak
|
||||
# 本機圖片備份(勿進 repo)
|
||||
*.png.bak
|
||||
@@ -1,150 +1,150 @@
|
||||
<!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/index.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>
|
||||
<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">YELLOW PHONOGRAPH</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></nav>
|
||||
|
||||
<canvas id="particles"></canvas>
|
||||
|
||||
<div class="container">
|
||||
<section class="archive-intro" aria-label="導語">
|
||||
<p class="intro-text archive-intro-lead">
|
||||
音軌才是與這個名字最直白相遇的方式——以下先收精選年表與深水連結。
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section id="new" class="archive-block">
|
||||
<h2 class="section-title">啟動新篇章</h2>
|
||||
<p>回歸後的數位單曲與專輯,是現在進行式的聲紋紀錄;耳機調大聲一格,就能把「新篇章」接住。</p>
|
||||
<p><a href="../extra/lyrics.html">聽見歌詞細節(2016 代表曲目)</a></p>
|
||||
<table class="archive-discography">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">封面</th>
|
||||
<th scope="col">年份</th>
|
||||
<th scope="col">專輯/作品</th>
|
||||
<th scope="col">主打歌</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="archive-row-spotify" tabindex="0"
|
||||
data-spotify-url="https://open.spotify.com/album/1Dijv8G0wnCN8PzFZoC8bN"
|
||||
aria-label="在 Spotify 開啟:THREE WORDS(2016 數位單曲)">
|
||||
<td class="album-cover-cell">
|
||||
<img src="../assets/images/albums/2016.jpg" width="76" height="76" alt="2016 數位單曲 封面">
|
||||
</td>
|
||||
<td>2016</td>
|
||||
<td><a href="../extra/lyrics.html">數位單曲</a></td>
|
||||
<td><a href="../extra/lyrics.html">Three Words (三個詞)</a></td>
|
||||
</tr>
|
||||
<tr class="archive-row-spotify" tabindex="0"
|
||||
data-spotify-url="https://open.spotify.com/album/5f2LzIFxljQF4FH7w3rXcQ"
|
||||
aria-label="在 Spotify 開啟:ANOTHER LIGHT">
|
||||
<td class="album-cover-cell">
|
||||
<img src="../assets/images/albums/2017.jpg" width="76" height="76" alt="2017 ANOTHER LIGHT 封面">
|
||||
</td>
|
||||
<td>2017</td>
|
||||
<td><a href="../concert/concert.html#stage-now">ANOTHER LIGHT</a></td>
|
||||
<td><a href="../concert/concert.html#stage-now">Something Special / Smile</a></td>
|
||||
</tr>
|
||||
<tr class="archive-row-spotify" tabindex="0"
|
||||
data-spotify-url="https://open.spotify.com/album/7vqIRL00YfTtuO0sSAK3Uv"
|
||||
aria-label="在 Spotify 開啟:ALL FOR YOU">
|
||||
<td class="album-cover-cell">
|
||||
<img src="../assets/images/albums/2020.jpg" width="76" height="76" alt="2020 ALL FOR YOU 封面">
|
||||
</td>
|
||||
<td>2020</td>
|
||||
<td><a href="../concert/concert.html#stage-now">ALL FOR YOU</a></td>
|
||||
<td><a href="../concert/concert.html#stage-now">ALL FOR YOU</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
<section id="classic" class="archive-block">
|
||||
<h2 class="section-title">輝煌全盛期</h2>
|
||||
<p>主打的記憶點、b-side 的伏筆、舞步與應援口號——想一次收進收藏庫,往這張整理頁走。</p>
|
||||
<p><a href="#classic">於此區瀏覽輝煌全盛期年表</a></p>
|
||||
<table class="archive-discography">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">年份</th>
|
||||
<th scope="col">專輯/作品</th>
|
||||
<th scope="col">主打歌</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="archive-row-spotify" tabindex="0"
|
||||
data-spotify-url="https://open.spotify.com/album/18P1aqSLQA9WdNljjEhv9q"
|
||||
aria-label="在 Spotify 開啟:School Byeolgok(學園別曲)">
|
||||
<td>1997</td>
|
||||
<td><a href="#classic">學園別曲</a></td>
|
||||
<td><a href="#classic">學園別曲 / 男兒之路 (Pom Saeng Pom Sa)</a></td>
|
||||
</tr>
|
||||
<tr class="archive-row-spotify" tabindex="0"
|
||||
data-spotify-url="https://open.spotify.com/album/08TW1bmGzSg172Db8C2Bde"
|
||||
aria-label="在 Spotify 開啟:Road Fighter">
|
||||
<td>1998</td>
|
||||
<td><a href="#classic">Road Fighter</a></td>
|
||||
<td><a href="#classic">Road Fighter / Couple</a></td>
|
||||
</tr>
|
||||
<tr class="archive-row-spotify" tabindex="0"
|
||||
data-spotify-url="https://open.spotify.com/album/3XWtqLXDZycu7Q0BGofhiq"
|
||||
aria-label="在 Spotify 開啟:Com' Back">
|
||||
<td>1999</td>
|
||||
<td><a href="#classic">Com'Back</a></td>
|
||||
<td><a href="#classic">Com'Back</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<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 () {
|
||||
document.querySelectorAll('tr.archive-row-spotify[data-spotify-url]').forEach(function (row) {
|
||||
var url = row.getAttribute('data-spotify-url');
|
||||
row.addEventListener('click', function (e) {
|
||||
if (e.target.closest('a')) return;
|
||||
window.open(url, '_blank', 'noopener,noreferrer');
|
||||
});
|
||||
row.addEventListener('keydown', function (e) {
|
||||
if (e.key !== 'Enter' && e.key !== ' ') return;
|
||||
if (e.target.closest('a')) return;
|
||||
e.preventDefault();
|
||||
window.open(url, '_blank', 'noopener,noreferrer');
|
||||
});
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</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/index.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>
|
||||
<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">YELLOW PHONOGRAPH</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></nav>
|
||||
|
||||
<canvas id="particles"></canvas>
|
||||
|
||||
<div class="container">
|
||||
<section class="archive-intro" aria-label="導語">
|
||||
<p class="intro-text archive-intro-lead">
|
||||
音軌才是與這個名字最直白相遇的方式——以下先收精選年表與深水連結。
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section id="new" class="archive-block">
|
||||
<h2 class="section-title">啟動新篇章</h2>
|
||||
<p>回歸後的數位單曲與專輯,是現在進行式的聲紋紀錄;耳機調大聲一格,就能把「新篇章」接住。</p>
|
||||
<p><a href="../extra/lyrics.html">聽見歌詞細節(2016 代表曲目)</a></p>
|
||||
<table class="archive-discography">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">封面</th>
|
||||
<th scope="col">年份</th>
|
||||
<th scope="col">專輯/作品</th>
|
||||
<th scope="col">主打歌</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="archive-row-spotify" tabindex="0"
|
||||
data-spotify-url="https://open.spotify.com/album/1Dijv8G0wnCN8PzFZoC8bN"
|
||||
aria-label="在 Spotify 開啟:THREE WORDS(2016 數位單曲)">
|
||||
<td class="album-cover-cell">
|
||||
<img src="../assets/images/albums/2016.jpg" width="76" height="76" alt="2016 數位單曲 封面">
|
||||
</td>
|
||||
<td>2016</td>
|
||||
<td><a href="../extra/lyrics.html">數位單曲</a></td>
|
||||
<td><a href="../extra/lyrics.html">Three Words (三個詞)</a></td>
|
||||
</tr>
|
||||
<tr class="archive-row-spotify" tabindex="0"
|
||||
data-spotify-url="https://open.spotify.com/album/5f2LzIFxljQF4FH7w3rXcQ"
|
||||
aria-label="在 Spotify 開啟:ANOTHER LIGHT">
|
||||
<td class="album-cover-cell">
|
||||
<img src="../assets/images/albums/2017.jpg" width="76" height="76" alt="2017 ANOTHER LIGHT 封面">
|
||||
</td>
|
||||
<td>2017</td>
|
||||
<td><a href="../concert/concert.html#stage-now">ANOTHER LIGHT</a></td>
|
||||
<td><a href="../concert/concert.html#stage-now">Something Special / Smile</a></td>
|
||||
</tr>
|
||||
<tr class="archive-row-spotify" tabindex="0"
|
||||
data-spotify-url="https://open.spotify.com/album/7vqIRL00YfTtuO0sSAK3Uv"
|
||||
aria-label="在 Spotify 開啟:ALL FOR YOU">
|
||||
<td class="album-cover-cell">
|
||||
<img src="../assets/images/albums/2020.jpg" width="76" height="76" alt="2020 ALL FOR YOU 封面">
|
||||
</td>
|
||||
<td>2020</td>
|
||||
<td><a href="../concert/concert.html#stage-now">ALL FOR YOU</a></td>
|
||||
<td><a href="../concert/concert.html#stage-now">ALL FOR YOU</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
<section id="classic" class="archive-block">
|
||||
<h2 class="section-title">輝煌全盛期</h2>
|
||||
<p>主打的記憶點、b-side 的伏筆、舞步與應援口號——想一次收進收藏庫,往這張整理頁走。</p>
|
||||
<p><a href="#classic">於此區瀏覽輝煌全盛期年表</a></p>
|
||||
<table class="archive-discography">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">年份</th>
|
||||
<th scope="col">專輯/作品</th>
|
||||
<th scope="col">主打歌</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="archive-row-spotify" tabindex="0"
|
||||
data-spotify-url="https://open.spotify.com/album/18P1aqSLQA9WdNljjEhv9q"
|
||||
aria-label="在 Spotify 開啟:School Byeolgok(學園別曲)">
|
||||
<td>1997</td>
|
||||
<td><a href="#classic">學園別曲</a></td>
|
||||
<td><a href="#classic">學園別曲 / 男兒之路 (Pom Saeng Pom Sa)</a></td>
|
||||
</tr>
|
||||
<tr class="archive-row-spotify" tabindex="0"
|
||||
data-spotify-url="https://open.spotify.com/album/08TW1bmGzSg172Db8C2Bde"
|
||||
aria-label="在 Spotify 開啟:Road Fighter">
|
||||
<td>1998</td>
|
||||
<td><a href="#classic">Road Fighter</a></td>
|
||||
<td><a href="#classic">Road Fighter / Couple</a></td>
|
||||
</tr>
|
||||
<tr class="archive-row-spotify" tabindex="0"
|
||||
data-spotify-url="https://open.spotify.com/album/3XWtqLXDZycu7Q0BGofhiq"
|
||||
aria-label="在 Spotify 開啟:Com' Back">
|
||||
<td>1999</td>
|
||||
<td><a href="#classic">Com'Back</a></td>
|
||||
<td><a href="#classic">Com'Back</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<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 () {
|
||||
document.querySelectorAll('tr.archive-row-spotify[data-spotify-url]').forEach(function (row) {
|
||||
var url = row.getAttribute('data-spotify-url');
|
||||
row.addEventListener('click', function (e) {
|
||||
if (e.target.closest('a')) return;
|
||||
window.open(url, '_blank', 'noopener,noreferrer');
|
||||
});
|
||||
row.addEventListener('keydown', function (e) {
|
||||
if (e.key !== 'Enter' && e.key !== ' ') return;
|
||||
if (e.target.closest('a')) return;
|
||||
e.preventDefault();
|
||||
window.open(url, '_blank', 'noopener,noreferrer');
|
||||
});
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1,5 +1,5 @@
|
||||
body.concert-page {
|
||||
background-color: var(--deep-black, #0a0a0a);
|
||||
background-color: var(--color-bg);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 6px;
|
||||
background-color: var(--primary);
|
||||
background-color: var(--color-brand);
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
@@ -39,7 +39,7 @@
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #FFD700;
|
||||
color: var(--color-brand);
|
||||
text-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
|
||||
}
|
||||
|
||||
@@ -61,20 +61,20 @@
|
||||
.date-tag {
|
||||
display: inline-block;
|
||||
padding: 8px 20px;
|
||||
background: var(--accent);
|
||||
color: var(--text);
|
||||
background: var(--color-brand);
|
||||
color: var(--color-text-dark);
|
||||
border-radius: 50px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.content h3 {
|
||||
color: var(--primary);
|
||||
color: var(--color-brand);
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.content p {
|
||||
color: var(--text-muted);
|
||||
color: var(--color-text-muted);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
@@ -158,12 +158,12 @@ section.archive-intro p {
|
||||
|
||||
/*
|
||||
* 首頁 hero 主標/副標:與全站 .site-header-inner 相同(index.css 在 style.css 之後載入)。
|
||||
* 若留舊版 .home-page header .hero h1 { color: var(--primary); text-shadow: … } 會蓋過 style.css。
|
||||
* 若留舊版 .home-page header .hero h1 { color: var(--color-brand); text-shadow: … } 會蓋過 style.css。
|
||||
*/
|
||||
.home-page header#origin .site-header-inner .main-title {
|
||||
font-size: clamp(2rem, 4.5vw, 3.2rem);
|
||||
font-weight: 900;
|
||||
color: var(--text-main, #333);
|
||||
color: var(--color-text);
|
||||
letter-spacing: 6px;
|
||||
margin: 0;
|
||||
text-shadow: none;
|
||||
@@ -172,7 +172,7 @@ section.archive-intro p {
|
||||
.home-page header#origin .site-header-inner .sub-title {
|
||||
font-size: 0.92rem;
|
||||
letter-spacing: 4px;
|
||||
color: var(--text-muted, #888);
|
||||
color: var(--color-text-muted);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
@@ -282,7 +282,7 @@ header#origin .site-header-inner .subtitle-wrap::after {
|
||||
}
|
||||
|
||||
.home-page .landing-intro .mark_b {
|
||||
color: var(--light-yellow);
|
||||
color: var(--color-brand-light);
|
||||
}
|
||||
|
||||
.home-page #intro .intro-text .slogan-quote--awakening + .core-description {
|
||||
@@ -365,7 +365,7 @@ header#origin .site-header-inner .subtitle-wrap::after {
|
||||
.home-page #journey .merged-storyline .story-node .journey-month {
|
||||
margin: 0.75rem 0 0.3rem;
|
||||
padding: 0.32rem 0.7rem 0.32rem 0;
|
||||
border-right: 3px solid var(--primary);
|
||||
border-right: 3px solid var(--color-brand);
|
||||
border-left: 0;
|
||||
font-size: 0.82rem;
|
||||
font-weight: 800;
|
||||
|
||||
@@ -1,182 +1,182 @@
|
||||
/* 歌詞頁:載入於 style.css 之後,並以 .lyrics-page 提高權重,避免被全站 table / body 洗版 */
|
||||
|
||||
body.lyrics-page {
|
||||
--lyrics-bg: #2a2a2a;
|
||||
--lyrics-paper: #faf6e8;
|
||||
--lyrics-accent: #f5dfa8;
|
||||
--lyrics-muted: #c9c2a8;
|
||||
|
||||
font-family: "Nanum Pen Script", cursive;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
background-color: var(--lyrics-bg) !important;
|
||||
color: #fff !important;
|
||||
margin: 0 !important;
|
||||
padding: clamp(1rem, 4vw, 2.5rem) !important;
|
||||
min-height: 100dvh;
|
||||
line-height: 1.55;
|
||||
overflow-x: hidden;
|
||||
font-size: clamp(18px, 2.8vw, 26px);
|
||||
}
|
||||
|
||||
body.lyrics-page h1 {
|
||||
color: var(--lyrics-accent);
|
||||
font-size: clamp(1.75rem, 4vw, 2.5rem);
|
||||
text-align: center;
|
||||
margin: 0 0 1.25rem;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
body.lyrics-page .lyrics-layout {
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
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;
|
||||
box-shadow: none !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
body.lyrics-page .lyrics-main-table > tbody > tr > td {
|
||||
padding: 0 !important;
|
||||
border: none !important;
|
||||
border-bottom: none !important;
|
||||
text-align: left !important;
|
||||
color: inherit !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
/* 兩欄等寬 + 同一套「卡片区」留白與邊框,左右才對稱 */
|
||||
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%;
|
||||
border: 0;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
|
||||
body.lyrics-page .songInfo {
|
||||
color: var(--lyrics-accent);
|
||||
display: grid;
|
||||
grid-template-columns: max-content 1fr;
|
||||
gap: 0.4rem 0.75rem;
|
||||
align-items: baseline;
|
||||
font-size: 1rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
body.lyrics-page .songInfo dt {
|
||||
font-weight: 700;
|
||||
color: var(--lyrics-muted);
|
||||
}
|
||||
|
||||
body.lyrics-page .songInfo dd {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body.lyrics-page .lyrics-main-table p {
|
||||
color: #fff;
|
||||
line-height: 1.55;
|
||||
font-size: clamp(1rem, 2.2vw, 1.35rem);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
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 {
|
||||
color: #b8e6ff;
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 0.15em;
|
||||
}
|
||||
|
||||
body.lyrics-page a:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
body.lyrics-page .contact {
|
||||
color: var(--lyrics-paper);
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
body.lyrics-page .contact h3 {
|
||||
color: var(--lyrics-accent);
|
||||
font-size: 1.15rem;
|
||||
margin: 0.35rem 0 0.5rem;
|
||||
font-family: "Nanum Pen Script", cursive;
|
||||
}
|
||||
|
||||
body.lyrics-page .contact img {
|
||||
max-height: 36px;
|
||||
width: auto;
|
||||
display: block;
|
||||
margin-bottom: 0.35rem;
|
||||
}
|
||||
|
||||
body.lyrics-page .contact i {
|
||||
font-size: 0.75em;
|
||||
margin-right: 0.35rem;
|
||||
color: var(--lyrics-accent);
|
||||
}
|
||||
|
||||
@media (max-width: 820px) {
|
||||
body.lyrics-page .lyrics-main-table,
|
||||
body.lyrics-page .lyrics-main-table tbody,
|
||||
body.lyrics-page .lyrics-main-table tr,
|
||||
body.lyrics-page .lyrics-main-table td {
|
||||
display: block;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
body.lyrics-page .lyrics-main-table {
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
body.lyrics-page .main-left {
|
||||
max-width: none;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
body.lyrics-page .lyrics-main-table > tbody > tr > td + td {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
}
|
||||
/* 歌詞頁:載入於 style.css 之後,並以 .lyrics-page 提高權重,避免被全站 table / body 洗版 */
|
||||
|
||||
body.lyrics-page {
|
||||
--lyrics-bg: #2a2a2a;
|
||||
--lyrics-paper: #faf6e8;
|
||||
--lyrics-accent: #f5dfa8;
|
||||
--lyrics-muted: #c9c2a8;
|
||||
|
||||
font-family: "Nanum Pen Script", cursive;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
background-color: var(--lyrics-bg) !important;
|
||||
color: #fff !important;
|
||||
margin: 0 !important;
|
||||
padding: clamp(1rem, 4vw, 2.5rem) !important;
|
||||
min-height: 100dvh;
|
||||
line-height: 1.55;
|
||||
overflow-x: hidden;
|
||||
font-size: clamp(18px, 2.8vw, 26px);
|
||||
}
|
||||
|
||||
body.lyrics-page h1 {
|
||||
color: var(--lyrics-accent);
|
||||
font-size: clamp(1.75rem, 4vw, 2.5rem);
|
||||
text-align: center;
|
||||
margin: 0 0 1.25rem;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
body.lyrics-page .lyrics-layout {
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
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;
|
||||
box-shadow: none !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
body.lyrics-page .lyrics-main-table > tbody > tr > td {
|
||||
padding: 0 !important;
|
||||
border: none !important;
|
||||
border-bottom: none !important;
|
||||
text-align: left !important;
|
||||
color: inherit !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
/* 兩欄等寬 + 同一套「卡片区」留白與邊框,左右才對稱 */
|
||||
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%;
|
||||
border: 0;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
|
||||
body.lyrics-page .songInfo {
|
||||
color: var(--lyrics-accent);
|
||||
display: grid;
|
||||
grid-template-columns: max-content 1fr;
|
||||
gap: 0.4rem 0.75rem;
|
||||
align-items: baseline;
|
||||
font-size: 1rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
body.lyrics-page .songInfo dt {
|
||||
font-weight: 700;
|
||||
color: var(--lyrics-muted);
|
||||
}
|
||||
|
||||
body.lyrics-page .songInfo dd {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body.lyrics-page .lyrics-main-table p {
|
||||
color: #fff;
|
||||
line-height: 1.55;
|
||||
font-size: clamp(1rem, 2.2vw, 1.35rem);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
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 {
|
||||
color: #b8e6ff;
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 0.15em;
|
||||
}
|
||||
|
||||
body.lyrics-page a:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
body.lyrics-page .contact {
|
||||
color: var(--lyrics-paper);
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
body.lyrics-page .contact h3 {
|
||||
color: var(--lyrics-accent);
|
||||
font-size: 1.15rem;
|
||||
margin: 0.35rem 0 0.5rem;
|
||||
font-family: "Nanum Pen Script", cursive;
|
||||
}
|
||||
|
||||
body.lyrics-page .contact img {
|
||||
max-height: 36px;
|
||||
width: auto;
|
||||
display: block;
|
||||
margin-bottom: 0.35rem;
|
||||
}
|
||||
|
||||
body.lyrics-page .contact i {
|
||||
font-size: 0.75em;
|
||||
margin-right: 0.35rem;
|
||||
color: var(--lyrics-accent);
|
||||
}
|
||||
|
||||
@media (max-width: 820px) {
|
||||
body.lyrics-page .lyrics-main-table,
|
||||
body.lyrics-page .lyrics-main-table tbody,
|
||||
body.lyrics-page .lyrics-main-table tr,
|
||||
body.lyrics-page .lyrics-main-table td {
|
||||
display: block;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
body.lyrics-page .lyrics-main-table {
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
body.lyrics-page .main-left {
|
||||
max-width: none;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
body.lyrics-page .lyrics-main-table > tbody > tr > td + td {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
}
|
||||
@@ -1,22 +1,25 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&display=swap');
|
||||
|
||||
:root {
|
||||
--primary: #ffcc00;
|
||||
--light-yellow: #fceea7;
|
||||
--dark-yellow: #4e492b;
|
||||
--black: #1a1a1a;
|
||||
--deep-black: #0a0a0a;
|
||||
--gray: #f4f4f4;
|
||||
--text-color: #333;
|
||||
--accent: #FFD700;
|
||||
--text: #1a1a1a;
|
||||
--card-bg: #1a1a1a;
|
||||
--bg-alt: #fcfaf2;
|
||||
--text-main: #333;
|
||||
--text-muted: #4d4d4d;
|
||||
--surface: #fffdf7;
|
||||
--surface-soft: #fff9e8;
|
||||
/* ── 品牌色 ── */
|
||||
--color-brand: #ffcc00;
|
||||
--color-brand-light: #fceea7;
|
||||
--color-brand-dark: #4e492b;
|
||||
|
||||
/* ── 背景色 ── */
|
||||
--color-bg: #0a0a0a;
|
||||
--color-bg-raised: #1a1a1a;
|
||||
--color-bg-alt: #fcfaf2;
|
||||
|
||||
/* ── 表面色(淺色內容區) ── */
|
||||
--color-surface: #fffdf7;
|
||||
--color-surface-soft: #fff9e8;
|
||||
|
||||
/* ── 文字色 ── */
|
||||
--color-text: #333333;
|
||||
--color-text-dark: #1a1a1a;
|
||||
--color-text-muted: #4d4d4d;
|
||||
--color-text-inverse: #f4f4f4;
|
||||
}
|
||||
|
||||
/* 1. 先處理 body 和全域,確保沒人亂給外距 */
|
||||
@@ -29,7 +32,7 @@
|
||||
|
||||
html,
|
||||
body {
|
||||
background-color: var(--deep-black);
|
||||
background-color: var(--color-bg);
|
||||
color: #eeeeee;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
@@ -39,7 +42,7 @@ body {
|
||||
|
||||
body {
|
||||
font-family: 'Noto Sans TC', system-ui, sans-serif;
|
||||
color: var(--text-color);
|
||||
color: var(--color-text);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
@@ -63,7 +66,7 @@ header#origin {
|
||||
|
||||
/* 導覽列(排除 portal、B 站分集 tab 等自帶版面之 nav,避免 space-between/大 padding 破壞) */
|
||||
nav:not(.portal-nav):not(.bilivideo-episode-nav) {
|
||||
background-color: var(--black);
|
||||
background-color: var(--color-bg-raised);
|
||||
padding: 0.8rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@@ -120,7 +123,7 @@ nav a {
|
||||
width: 100%;
|
||||
margin: 0 0 14px;
|
||||
padding: 0.8rem 100px;
|
||||
background-color: var(--black);
|
||||
background-color: var(--color-bg-raised);
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
overflow: visible;
|
||||
@@ -144,11 +147,11 @@ nav a {
|
||||
border-radius: 10px;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
color: var(--primary);
|
||||
color: var(--color-brand);
|
||||
}
|
||||
|
||||
.portal-nav__menu-toggle:focus-visible {
|
||||
outline: 2px solid var(--primary);
|
||||
outline: 2px solid var(--color-brand);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
@@ -211,7 +214,7 @@ nav a {
|
||||
text-align: center;
|
||||
line-height: 1.15;
|
||||
text-decoration: none;
|
||||
color: var(--primary);
|
||||
color: var(--color-brand);
|
||||
font-size: 0.95rem;
|
||||
letter-spacing: 1px;
|
||||
padding: 2px 4px;
|
||||
@@ -482,7 +485,7 @@ nav a {
|
||||
max(0.85rem, env(safe-area-inset-top, 0px)) clamp(14px, 2vw + 10px, 32px) max(1rem, env(safe-area-inset-bottom, 0px));
|
||||
z-index: 10000;
|
||||
overflow: hidden;
|
||||
background-color: var(--black);
|
||||
background-color: var(--color-bg-raised);
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto minmax(0, 1fr);
|
||||
grid-template-areas:
|
||||
@@ -498,7 +501,7 @@ nav a {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
flex-shrink: 0;
|
||||
background-color: var(--black);
|
||||
background-color: var(--color-bg-raised);
|
||||
}
|
||||
|
||||
.portal-nav .logo {
|
||||
@@ -599,7 +602,7 @@ nav a {
|
||||
.portal-nav.portal-nav--open>ul>li.open>a {
|
||||
border-color: transparent;
|
||||
border-radius: 0;
|
||||
color: var(--primary);
|
||||
color: var(--color-brand);
|
||||
}
|
||||
|
||||
.portal-nav>ul>li {
|
||||
@@ -972,13 +975,13 @@ footer {
|
||||
|
||||
.hero p {
|
||||
font-size: 1.2rem;
|
||||
color: var(--gray);
|
||||
color: var(--color-text-inverse);
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 10px 30px;
|
||||
background: var(--primary);
|
||||
background: var(--color-brand);
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
border-radius: 50px;
|
||||
@@ -1007,7 +1010,7 @@ footer {
|
||||
}
|
||||
|
||||
.section-title {
|
||||
color: var(--primary);
|
||||
color: var(--color-brand);
|
||||
text-align: center;
|
||||
font-size: 1.35rem;
|
||||
letter-spacing: 3px;
|
||||
@@ -1020,7 +1023,7 @@ footer {
|
||||
display: block;
|
||||
width: 50px;
|
||||
height: 3px;
|
||||
background: var(--primary);
|
||||
background: var(--color-brand);
|
||||
margin: 15px auto 0;
|
||||
}
|
||||
|
||||
@@ -1036,7 +1039,7 @@ footer {
|
||||
content: "";
|
||||
flex: 1;
|
||||
height: 2px;
|
||||
background-color: var(--primary);
|
||||
background-color: var(--color-brand);
|
||||
max-width: 56px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
@@ -1059,7 +1062,7 @@ footer {
|
||||
}
|
||||
|
||||
.card {
|
||||
background: linear-gradient(135deg, var(--surface-soft) 0%, #ffffff 100%);
|
||||
background: linear-gradient(135deg, var(--color-surface-soft) 0%, #ffffff 100%);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 204, 0, 0.18);
|
||||
border-radius: 14px;
|
||||
@@ -1070,7 +1073,7 @@ footer {
|
||||
|
||||
.card:hover {
|
||||
transform: translateY(-8px);
|
||||
border-color: var(--primary);
|
||||
border-color: var(--color-brand);
|
||||
box-shadow: 0 16px 32px rgba(0, 0, 0, 0.14);
|
||||
}
|
||||
|
||||
@@ -1087,7 +1090,7 @@ footer {
|
||||
section {
|
||||
margin-top: 0 !important;
|
||||
margin-bottom: 60px;
|
||||
background: var(--surface);
|
||||
background: var(--color-surface);
|
||||
padding: 44px 36px;
|
||||
border-radius: 16px;
|
||||
border: 1px solid rgba(255, 204, 0, 0.15);
|
||||
@@ -1153,14 +1156,14 @@ section {
|
||||
width: 3.25rem;
|
||||
height: 4px;
|
||||
margin: 0.55rem 0 0;
|
||||
background: linear-gradient(90deg, var(--primary), #ffe066);
|
||||
background: linear-gradient(90deg, var(--color-brand), #ffe066);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.mission-section .mission-logo-heading {
|
||||
font-size: 1.08rem;
|
||||
letter-spacing: 0.18em;
|
||||
color: var(--primary);
|
||||
color: var(--color-brand);
|
||||
margin: 0 0 0.85rem;
|
||||
font-weight: 800;
|
||||
text-transform: uppercase;
|
||||
@@ -1199,7 +1202,7 @@ section {
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(255, 204, 0, 0.28);
|
||||
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
|
||||
background: #1a1a1a;
|
||||
background: var(--color-bg-raised);
|
||||
}
|
||||
|
||||
.mission-section .mission-gif-frame img {
|
||||
@@ -1281,7 +1284,7 @@ section {
|
||||
flex-shrink: 0;
|
||||
font-size: 0.95rem;
|
||||
line-height: 1;
|
||||
color: var(--primary);
|
||||
color: var(--color-brand);
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@@ -1338,7 +1341,7 @@ section {
|
||||
top: 0.15em;
|
||||
font-size: 1.05em;
|
||||
line-height: 1;
|
||||
color: var(--fa-before-color, var(--primary, #ffcc00));
|
||||
color: var(--fa-before-color, var(--color-brand));
|
||||
}
|
||||
|
||||
.fa-before-lead.fa-before-lead--balloon::before {
|
||||
@@ -1347,7 +1350,7 @@ section {
|
||||
width: 1.15em;
|
||||
height: 1.15em;
|
||||
top: 0.1em;
|
||||
background-color: var(--fa-before-color, var(--primary, #ffcc00));
|
||||
background-color: var(--fa-before-color, var(--color-brand));
|
||||
-webkit-mask: url('../images/icon/balloon.svg') center / contain no-repeat;
|
||||
mask: url('../images/icon/balloon.svg') center / contain no-repeat;
|
||||
}
|
||||
@@ -1383,7 +1386,7 @@ section {
|
||||
content: "";
|
||||
flex: 1;
|
||||
height: 2px;
|
||||
background-color: var(--primary);
|
||||
background-color: var(--color-brand);
|
||||
max-width: 56px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
@@ -1419,7 +1422,7 @@ section {
|
||||
linear-gradient(185deg, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0) 42%),
|
||||
linear-gradient(168deg, #fffef8 0%, #fff6d2 52%, #fffce8 100%);
|
||||
border: 1px solid rgba(220, 185, 90, 0.42);
|
||||
border-left: 5px solid var(--primary);
|
||||
border-left: 5px solid var(--color-brand);
|
||||
border-radius: 14px;
|
||||
box-shadow:
|
||||
0 1px 0 rgba(255, 255, 255, 0.92) inset,
|
||||
@@ -1463,8 +1466,8 @@ table {
|
||||
}
|
||||
|
||||
table th {
|
||||
background-color: var(--primary);
|
||||
color: var(--black);
|
||||
background-color: var(--color-brand);
|
||||
color: var(--color-bg-raised);
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
@@ -1476,7 +1479,7 @@ table td {
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--text-color);
|
||||
color: var(--color-text);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@@ -1518,7 +1521,7 @@ a {
|
||||
max-width: 42rem;
|
||||
margin: 0 0 28px;
|
||||
padding: 16px 18px;
|
||||
background: linear-gradient(135deg, var(--surface-soft) 0%, #fff 100%);
|
||||
background: linear-gradient(135deg, var(--color-surface-soft) 0%, #fff 100%);
|
||||
border: 1px solid rgba(255, 204, 0, 0.18);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
|
||||
@@ -1560,7 +1563,7 @@ a {
|
||||
content: attr(data-era);
|
||||
position: absolute;
|
||||
top: -14px;
|
||||
background-color: var(--primary);
|
||||
background-color: var(--color-brand);
|
||||
color: #303030;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 700;
|
||||
@@ -1701,7 +1704,7 @@ a {
|
||||
}
|
||||
|
||||
.merged-storyline .timeline-ebook-cta:focus-visible {
|
||||
outline: 3px solid #1a1a1a;
|
||||
outline: 3px solid var(--color-bg-raised);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
@@ -1802,7 +1805,7 @@ a {
|
||||
|
||||
.merged-storyline .story-external-inline:hover,
|
||||
.merged-storyline .story-external-inline:focus-visible {
|
||||
color: var(--dark-yellow);
|
||||
color: var(--color-brand-dark);
|
||||
}
|
||||
|
||||
.merged-storyline .story-external-inline i {
|
||||
@@ -1861,7 +1864,7 @@ a {
|
||||
|
||||
/* 頁尾 */
|
||||
footer {
|
||||
background-color: var(--black);
|
||||
background-color: var(--color-bg-raised);
|
||||
color: white;
|
||||
text-align: center;
|
||||
padding: 50px 0 20px;
|
||||
@@ -1869,13 +1872,13 @@ footer {
|
||||
|
||||
/* 全站:深色字重點(棕黃字色,與 <b> 不同於「顏色」) */
|
||||
.mark_b {
|
||||
color: var(--dark-yellow);
|
||||
color: var(--color-brand-dark);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* 深色頁尾內的 mark_b:維持可讀與全站黃色語彙 */
|
||||
footer a .mark_b {
|
||||
color: var(--primary);
|
||||
color: var(--color-brand);
|
||||
}
|
||||
|
||||
/* map.html — 主內容層;頂欄見全站 .portal-nav */
|
||||
@@ -1921,7 +1924,7 @@ footer a .mark_b {
|
||||
align-items: flex-end;
|
||||
text-align: right;
|
||||
white-space: normal;
|
||||
color: var(--primary);
|
||||
color: var(--color-brand);
|
||||
text-decoration: none;
|
||||
font-size: 0.95rem;
|
||||
letter-spacing: 1px;
|
||||
@@ -2196,7 +2199,7 @@ header.inner-page-header .sub-title {
|
||||
.site-header-inner .main-title {
|
||||
font-size: clamp(2rem, 4.5vw, 3.2rem);
|
||||
font-weight: 900;
|
||||
color: var(--text-main, #333);
|
||||
color: var(--color-text);
|
||||
letter-spacing: 6px;
|
||||
margin: 0;
|
||||
text-shadow: none;
|
||||
@@ -2228,7 +2231,7 @@ header.inner-page-header .sub-title {
|
||||
flex: 0 0 auto;
|
||||
font-size: 0.92rem;
|
||||
letter-spacing: 4px;
|
||||
color: var(--text-muted, #888);
|
||||
color: var(--color-text-muted);
|
||||
margin: 0 18px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
@@ -2268,7 +2271,7 @@ header.inner-page-header .sub-title {
|
||||
}
|
||||
|
||||
#itinerary-search:focus {
|
||||
border-color: #ffcc00;
|
||||
border-color: var(--color-brand);
|
||||
box-shadow: 0 0 0 3px rgba(255, 204, 0, 0.2);
|
||||
}
|
||||
|
||||
@@ -2287,9 +2290,9 @@ header.inner-page-header .sub-title {
|
||||
|
||||
.tab-btn:hover,
|
||||
.tab-btn.active {
|
||||
background: #ffcc00;
|
||||
background: var(--color-brand);
|
||||
color: #2f2f2f;
|
||||
border-color: #ffcc00;
|
||||
border-color: var(--color-brand);
|
||||
}
|
||||
|
||||
.map-sticky {
|
||||
@@ -2641,7 +2644,7 @@ header.inner-page-header .sub-title {
|
||||
}
|
||||
|
||||
.mode-btn.active {
|
||||
background: var(--primary);
|
||||
background: var(--color-brand);
|
||||
color: #161616;
|
||||
}
|
||||
|
||||
@@ -3111,7 +3114,7 @@ body.totoga2-page .totoga2-plot .intro-text {
|
||||
}
|
||||
|
||||
body.totoga2-page .totoga2-plot .intro-text a {
|
||||
color: var(--dark-yellow);
|
||||
color: var(--color-brand-dark);
|
||||
font-weight: 700;
|
||||
text-decoration: underline;
|
||||
}
|
||||
@@ -3257,7 +3260,7 @@ body.member-crystal-page .member-crystal-intro__title {
|
||||
}
|
||||
|
||||
body.member-crystal-page .member-crystal-intro--black .member-crystal-intro__title {
|
||||
color: var(--yellow);
|
||||
color: var(--color-brand);
|
||||
}
|
||||
|
||||
body.member-crystal-page .member-crystal-intro__en {
|
||||
@@ -3677,7 +3680,7 @@ body.site-guide-page .site-guide-grid {
|
||||
}
|
||||
|
||||
body.site-guide-page .site-guide-card {
|
||||
background: linear-gradient(135deg, var(--surface-soft) 0%, #fff 100%);
|
||||
background: linear-gradient(135deg, var(--color-surface-soft) 0%, #fff 100%);
|
||||
border-radius: 14px;
|
||||
padding: 1.25rem 1.35rem;
|
||||
border: 1px solid rgba(255, 204, 0, 0.18);
|
||||
@@ -3690,7 +3693,7 @@ body.site-guide-page .site-guide-card h3 {
|
||||
}
|
||||
|
||||
body.site-guide-page .site-guide-card h3 a {
|
||||
color: var(--dark-yellow);
|
||||
color: var(--color-brand-dark);
|
||||
font-weight: 800;
|
||||
text-decoration: none;
|
||||
}
|
||||
@@ -3852,7 +3855,7 @@ body.minister-page .minister-hero-lead {
|
||||
}
|
||||
|
||||
body.minister-page .minister-hero-lead .mark_b {
|
||||
color: var(--light-yellow);
|
||||
color: var(--color-brand-light);
|
||||
}
|
||||
|
||||
body.minister-page .variety-block .intro-text {
|
||||
@@ -3888,8 +3891,8 @@ body.minister-page .minister-hashtag,
|
||||
font-size: clamp(0.78rem, 1.65vw, 0.9rem);
|
||||
letter-spacing: 0.06em;
|
||||
line-height: 1.2;
|
||||
color: var(--dark-yellow);
|
||||
background: linear-gradient(180deg, rgba(255, 253, 247, 0.98) 0%, var(--surface-soft) 100%);
|
||||
color: var(--color-brand-dark);
|
||||
background: linear-gradient(180deg, rgba(255, 253, 247, 0.98) 0%, var(--color-surface-soft) 100%);
|
||||
border: 1px solid rgba(255, 204, 0, 0.52);
|
||||
box-shadow:
|
||||
0 1px 0 rgba(255, 255, 255, 0.88) inset,
|
||||
@@ -3972,12 +3975,4 @@ body.minister-page .minister-photo--dual img {
|
||||
}
|
||||
|
||||
body.minister-page .minister-back {
|
||||
text-align: center;
|
||||
margin: 2rem 0 0;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
body.minister-page .minister-photo--dual {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
text-
|
||||
@@ -1,257 +1,257 @@
|
||||
/* iPad/平板 RWD — max-width ≤1180px(含 iPad 直/橫與小平板/小筆電) */
|
||||
|
||||
/* 頂欄漢堡:與 style.css 992 斷點一致,避免本檔 1180 規則把選單列壓回橫排 */
|
||||
@media (max-width: 991px) {
|
||||
|
||||
.portal-nav>ul {
|
||||
flex: none;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.portal-nav>ul>li>a {
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1180px) {
|
||||
|
||||
html:has(.portal-nav) {
|
||||
scroll-padding-top: clamp(52px, 12vw, 76px);
|
||||
}
|
||||
|
||||
nav:not(.portal-nav) {
|
||||
padding-left: clamp(14px, 2vw + 10px, 32px) !important;
|
||||
padding-right: clamp(14px, 2vw + 10px, 32px) !important;
|
||||
}
|
||||
|
||||
.portal-nav {
|
||||
padding-left: clamp(14px, 2vw + 10px, 32px) !important;
|
||||
padding-right: clamp(14px, 2vw + 10px, 32px) !important;
|
||||
row-gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.portal-nav>ul {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.portal-nav .logo {
|
||||
width: min(240px, 38vw);
|
||||
max-width: 100%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.portal-nav>ul {
|
||||
flex-wrap: wrap;
|
||||
gap: clamp(12px, 2vw, 18px);
|
||||
justify-content: flex-end;
|
||||
min-width: 0;
|
||||
flex: 1 1 280px;
|
||||
}
|
||||
|
||||
.portal-nav>ul>li>a {
|
||||
min-height: 44px;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
nav:not(.portal-nav):not(.bilivideo-episode-nav) ul {
|
||||
gap: clamp(12px, 2vw, 20px);
|
||||
}
|
||||
|
||||
header.inner-page-header {
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
}
|
||||
|
||||
header#origin .hero .site-header-inner .main-title {
|
||||
font-size: clamp(1.75rem, 2.25vw + 1rem, 2.35rem);
|
||||
}
|
||||
|
||||
.hero p {
|
||||
font-size: clamp(1rem, 1.5vw + 0.65rem, 1.15rem);
|
||||
}
|
||||
|
||||
.container,
|
||||
.content-container {
|
||||
padding-left: clamp(14px, 1.5vw + 10px, 22px);
|
||||
padding-right: clamp(14px, 1.5vw + 10px, 22px);
|
||||
}
|
||||
|
||||
.home-page .container {
|
||||
padding-left: clamp(14px, 1.5vw + 10px, 22px);
|
||||
padding-right: clamp(14px, 1.5vw + 10px, 22px);
|
||||
}
|
||||
|
||||
section {
|
||||
padding: clamp(26px, 3vw + 18px, 36px) clamp(16px, 2.5vw + 12px, 28px) !important;
|
||||
}
|
||||
|
||||
.story-grid {
|
||||
gap: clamp(18px, 4vw, 28px);
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: clamp(18px, 4vw, 26px);
|
||||
}
|
||||
|
||||
table {
|
||||
font-size: 0.92rem;
|
||||
}
|
||||
|
||||
table th,
|
||||
table td {
|
||||
padding: clamp(10px, 2vw, 14px);
|
||||
}
|
||||
|
||||
/* 首頁/跨時空軌跡:鑽石主軸在平板改左側縱線(對齊舊 ≤900px 邏輯) */
|
||||
.merged-storyline::before {
|
||||
left: 18px;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.merged-storyline .story-node {
|
||||
width: calc(100% - 44px);
|
||||
margin-left: 44px;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.merged-storyline .story-node:nth-of-type(odd),
|
||||
.merged-storyline .story-node:nth-of-type(even) {
|
||||
margin-left: 44px;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.merged-storyline .story-node::before {
|
||||
left: -39px;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
.merged-storyline .story-node::after,
|
||||
.merged-storyline .story-node:nth-of-type(odd)::after,
|
||||
.merged-storyline .story-node:nth-of-type(even)::after {
|
||||
left: 12px;
|
||||
right: auto;
|
||||
top: -14px;
|
||||
transform: rotate(-8deg);
|
||||
transform-origin: center center;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 1.2;
|
||||
padding: 4px 9px;
|
||||
}
|
||||
|
||||
.merged-storyline .story-node:nth-of-type(odd)::before,
|
||||
.merged-storyline .story-node:nth-of-type(even)::before {
|
||||
left: -39px;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
.merged-storyline .story-node:nth-of-type(odd),
|
||||
.merged-storyline .story-node:nth-of-type(even) {
|
||||
margin-top: 60px;
|
||||
}
|
||||
|
||||
/* 紀實長卷/pillar 段落 */
|
||||
.chronicle-reader,
|
||||
.chronicle-pager {
|
||||
max-width: min(920px, 100%);
|
||||
}
|
||||
|
||||
.variety-block {
|
||||
padding: clamp(18px, 4vw, 22px);
|
||||
}
|
||||
|
||||
.site-header-inner .main-title {
|
||||
letter-spacing: clamp(3px, 1vw, 6px);
|
||||
}
|
||||
|
||||
.map-layout {
|
||||
grid-template-columns: minmax(280px, 42%) minmax(0, 1fr);
|
||||
gap: clamp(16px, 3vw, 22px);
|
||||
}
|
||||
|
||||
.map-my-maps-frame {
|
||||
height: min(52vh, 520px);
|
||||
min-height: 360px;
|
||||
}
|
||||
|
||||
.map-embed-all {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
/* 重逢區兩張演唱會大卡之間留白 */
|
||||
#stage-now {
|
||||
gap: clamp(36px, 5vw, 50px);
|
||||
}
|
||||
|
||||
/* 演唱會卡片內距 */
|
||||
.con-1,
|
||||
.con-2,
|
||||
.con-3,
|
||||
.con-4,
|
||||
#yellownote-stage {
|
||||
padding: clamp(32px, 5vw, 44px) clamp(22px, 5vw, 48px) !important;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: clamp(24px, 5vw, 40px) !important;
|
||||
font-size: clamp(1.15rem, 2.8vw, 1.45rem);
|
||||
}
|
||||
|
||||
.concert-container {
|
||||
padding-left: clamp(12px, 3vw, 20px);
|
||||
padding-right: clamp(12px, 3vw, 20px);
|
||||
}
|
||||
|
||||
.search-input:focus {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.concert-page .search-input:focus {
|
||||
width: min(100%, 440px);
|
||||
}
|
||||
|
||||
.concert-page img[src*="assets/images/concert/"] {
|
||||
width: min(560px, 88%);
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* 歌詞頁 */
|
||||
body.lyrics-page {
|
||||
margin: clamp(24px, 5vw, 56px) !important;
|
||||
box-sizing: border-box;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
html:has(body.lyrics-page) {
|
||||
font-size: 118.75% !important;
|
||||
}
|
||||
|
||||
body.lyrics-page .lyrics-main-table {
|
||||
border-spacing: clamp(12px, 3vw, 24px) !important;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
body.lyrics-page .main-left {
|
||||
width: 100% !important;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body.lyrics-page .lyrics-main-table p {
|
||||
font-size: 1.2rem !important;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
body.lyrics-page h1 {
|
||||
font-size: clamp(1.6rem, 5vw, 2.1rem) !important;
|
||||
}
|
||||
}
|
||||
/* iPad/平板 RWD — max-width ≤1180px(含 iPad 直/橫與小平板/小筆電) */
|
||||
|
||||
/* 頂欄漢堡:與 style.css 992 斷點一致,避免本檔 1180 規則把選單列壓回橫排 */
|
||||
@media (max-width: 991px) {
|
||||
|
||||
.portal-nav>ul {
|
||||
flex: none;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.portal-nav>ul>li>a {
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1180px) {
|
||||
|
||||
html:has(.portal-nav) {
|
||||
scroll-padding-top: clamp(52px, 12vw, 76px);
|
||||
}
|
||||
|
||||
nav:not(.portal-nav) {
|
||||
padding-left: clamp(14px, 2vw + 10px, 32px) !important;
|
||||
padding-right: clamp(14px, 2vw + 10px, 32px) !important;
|
||||
}
|
||||
|
||||
.portal-nav {
|
||||
padding-left: clamp(14px, 2vw + 10px, 32px) !important;
|
||||
padding-right: clamp(14px, 2vw + 10px, 32px) !important;
|
||||
row-gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.portal-nav>ul {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.portal-nav .logo {
|
||||
width: min(240px, 38vw);
|
||||
max-width: 100%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.portal-nav>ul {
|
||||
flex-wrap: wrap;
|
||||
gap: clamp(12px, 2vw, 18px);
|
||||
justify-content: flex-end;
|
||||
min-width: 0;
|
||||
flex: 1 1 280px;
|
||||
}
|
||||
|
||||
.portal-nav>ul>li>a {
|
||||
min-height: 44px;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
nav:not(.portal-nav):not(.bilivideo-episode-nav) ul {
|
||||
gap: clamp(12px, 2vw, 20px);
|
||||
}
|
||||
|
||||
header.inner-page-header {
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
}
|
||||
|
||||
header#origin .hero .site-header-inner .main-title {
|
||||
font-size: clamp(1.75rem, 2.25vw + 1rem, 2.35rem);
|
||||
}
|
||||
|
||||
.hero p {
|
||||
font-size: clamp(1rem, 1.5vw + 0.65rem, 1.15rem);
|
||||
}
|
||||
|
||||
.container,
|
||||
.content-container {
|
||||
padding-left: clamp(14px, 1.5vw + 10px, 22px);
|
||||
padding-right: clamp(14px, 1.5vw + 10px, 22px);
|
||||
}
|
||||
|
||||
.home-page .container {
|
||||
padding-left: clamp(14px, 1.5vw + 10px, 22px);
|
||||
padding-right: clamp(14px, 1.5vw + 10px, 22px);
|
||||
}
|
||||
|
||||
section {
|
||||
padding: clamp(26px, 3vw + 18px, 36px) clamp(16px, 2.5vw + 12px, 28px) !important;
|
||||
}
|
||||
|
||||
.story-grid {
|
||||
gap: clamp(18px, 4vw, 28px);
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: clamp(18px, 4vw, 26px);
|
||||
}
|
||||
|
||||
table {
|
||||
font-size: 0.92rem;
|
||||
}
|
||||
|
||||
table th,
|
||||
table td {
|
||||
padding: clamp(10px, 2vw, 14px);
|
||||
}
|
||||
|
||||
/* 首頁/跨時空軌跡:鑽石主軸在平板改左側縱線(對齊舊 ≤900px 邏輯) */
|
||||
.merged-storyline::before {
|
||||
left: 18px;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.merged-storyline .story-node {
|
||||
width: calc(100% - 44px);
|
||||
margin-left: 44px;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.merged-storyline .story-node:nth-of-type(odd),
|
||||
.merged-storyline .story-node:nth-of-type(even) {
|
||||
margin-left: 44px;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.merged-storyline .story-node::before {
|
||||
left: -39px;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
.merged-storyline .story-node::after,
|
||||
.merged-storyline .story-node:nth-of-type(odd)::after,
|
||||
.merged-storyline .story-node:nth-of-type(even)::after {
|
||||
left: 12px;
|
||||
right: auto;
|
||||
top: -14px;
|
||||
transform: rotate(-8deg);
|
||||
transform-origin: center center;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 1.2;
|
||||
padding: 4px 9px;
|
||||
}
|
||||
|
||||
.merged-storyline .story-node:nth-of-type(odd)::before,
|
||||
.merged-storyline .story-node:nth-of-type(even)::before {
|
||||
left: -39px;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
.merged-storyline .story-node:nth-of-type(odd),
|
||||
.merged-storyline .story-node:nth-of-type(even) {
|
||||
margin-top: 60px;
|
||||
}
|
||||
|
||||
/* 紀實長卷/pillar 段落 */
|
||||
.chronicle-reader,
|
||||
.chronicle-pager {
|
||||
max-width: min(920px, 100%);
|
||||
}
|
||||
|
||||
.variety-block {
|
||||
padding: clamp(18px, 4vw, 22px);
|
||||
}
|
||||
|
||||
.site-header-inner .main-title {
|
||||
letter-spacing: clamp(3px, 1vw, 6px);
|
||||
}
|
||||
|
||||
.map-layout {
|
||||
grid-template-columns: minmax(280px, 42%) minmax(0, 1fr);
|
||||
gap: clamp(16px, 3vw, 22px);
|
||||
}
|
||||
|
||||
.map-my-maps-frame {
|
||||
height: min(52vh, 520px);
|
||||
min-height: 360px;
|
||||
}
|
||||
|
||||
.map-embed-all {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
/* 重逢區兩張演唱會大卡之間留白 */
|
||||
#stage-now {
|
||||
gap: clamp(36px, 5vw, 50px);
|
||||
}
|
||||
|
||||
/* 演唱會卡片內距 */
|
||||
.con-1,
|
||||
.con-2,
|
||||
.con-3,
|
||||
.con-4,
|
||||
#yellownote-stage {
|
||||
padding: clamp(32px, 5vw, 44px) clamp(22px, 5vw, 48px) !important;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: clamp(24px, 5vw, 40px) !important;
|
||||
font-size: clamp(1.15rem, 2.8vw, 1.45rem);
|
||||
}
|
||||
|
||||
.concert-container {
|
||||
padding-left: clamp(12px, 3vw, 20px);
|
||||
padding-right: clamp(12px, 3vw, 20px);
|
||||
}
|
||||
|
||||
.search-input:focus {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.concert-page .search-input:focus {
|
||||
width: min(100%, 440px);
|
||||
}
|
||||
|
||||
.concert-page img[src*="assets/images/concert/"] {
|
||||
width: min(560px, 88%);
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* 歌詞頁 */
|
||||
body.lyrics-page {
|
||||
margin: clamp(24px, 5vw, 56px) !important;
|
||||
box-sizing: border-box;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
html:has(body.lyrics-page) {
|
||||
font-size: 118.75% !important;
|
||||
}
|
||||
|
||||
body.lyrics-page .lyrics-main-table {
|
||||
border-spacing: clamp(12px, 3vw, 24px) !important;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
body.lyrics-page .main-left {
|
||||
width: 100% !important;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body.lyrics-page .lyrics-main-table p {
|
||||
font-size: 1.2rem !important;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
body.lyrics-page h1 {
|
||||
font-size: clamp(1.6rem, 5vw, 2.1rem) !important;
|
||||
}
|
||||
}
|
||||
|
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 24 KiB |
@@ -1,6 +1,6 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 20" width="320" height="20" preserveAspectRatio="none" aria-hidden="true">
|
||||
<path fill="none" stroke="#c9a000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M2 13c11-9 23 8 36-1s28-7 42 5 30-12 46-2 34 9 50-1 26-6 40 4 22-8 36 2 28 5 42-3"/>
|
||||
<path fill="none" stroke="#f5d24a" stroke-width="1.5" stroke-linecap="round" opacity="0.92"
|
||||
d="M0 14c16-10 30 9 48-2s34-5 52 6 38-11 56-1 30 7 48-2 36-4 52 5 28-7 40 3"/>
|
||||
</svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 20" width="320" height="20" preserveAspectRatio="none" aria-hidden="true">
|
||||
<path fill="none" stroke="#c9a000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M2 13c11-9 23 8 36-1s28-7 42 5 30-12 46-2 34 9 50-1 26-6 40 4 22-8 36 2 28 5 42-3"/>
|
||||
<path fill="none" stroke="#f5d24a" stroke-width="1.5" stroke-linecap="round" opacity="0.92"
|
||||
d="M0 14c16-10 30 9 48-2s34-5 52 6 38-11 56-1 30 7 48-2 36-4 52 5 28-7 40 3"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 517 B After Width: | Height: | Size: 523 B |
@@ -1,47 +1,47 @@
|
||||
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
|
||||
<g>
|
||||
<g>
|
||||
<path d="M389.12,133.12C389.12,59.72,329.4,0,256,0S122.88,59.72,122.88,133.12c0,75.08,64.532,151.122,112.763,169.718
|
||||
l-7.373,7.352c-2.908,2.929-3.789,7.352-2.212,11.162c1.577,3.83,5.325,6.328,9.462,6.328h13.66
|
||||
c30.577,72.95,14.438,89.743-7.885,112.538c-13.701,14.008-29.225,29.86-36.209,59.167c-1.331,5.489,2.068,11.018,7.578,12.329
|
||||
c0.799,0.205,1.597,0.287,2.376,0.287c4.649,0,8.847-3.154,9.953-7.864c5.693-23.777,18.534-36.905,30.945-49.582
|
||||
c27.955-28.57,44.38-53.494,15.401-126.874h5.141c4.137,0,7.885-2.499,9.462-6.328c1.577-3.809,0.696-8.233-2.212-11.162
|
||||
l-7.373-7.352C324.588,284.242,389.12,208.2,389.12,133.12z M256,61.44c-39.526,0-71.68,32.154-71.68,71.68
|
||||
c0,5.652-4.588,10.24-10.24,10.24c-5.653,0-10.24-4.588-10.24-10.24c0-50.811,41.349-92.16,92.16-92.16
|
||||
c5.652,0,10.24,4.588,10.24,10.24S261.652,61.44,256,61.44z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
</svg>
|
||||
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
|
||||
<g>
|
||||
<g>
|
||||
<path d="M389.12,133.12C389.12,59.72,329.4,0,256,0S122.88,59.72,122.88,133.12c0,75.08,64.532,151.122,112.763,169.718
|
||||
l-7.373,7.352c-2.908,2.929-3.789,7.352-2.212,11.162c1.577,3.83,5.325,6.328,9.462,6.328h13.66
|
||||
c30.577,72.95,14.438,89.743-7.885,112.538c-13.701,14.008-29.225,29.86-36.209,59.167c-1.331,5.489,2.068,11.018,7.578,12.329
|
||||
c0.799,0.205,1.597,0.287,2.376,0.287c4.649,0,8.847-3.154,9.953-7.864c5.693-23.777,18.534-36.905,30.945-49.582
|
||||
c27.955-28.57,44.38-53.494,15.401-126.874h5.141c4.137,0,7.885-2.499,9.462-6.328c1.577-3.809,0.696-8.233-2.212-11.162
|
||||
l-7.373-7.352C324.588,284.242,389.12,208.2,389.12,133.12z M256,61.44c-39.526,0-71.68,32.154-71.68,71.68
|
||||
c0,5.652-4.588,10.24-10.24,10.24c-5.653,0-10.24-4.588-10.24-10.24c0-50.811,41.349-92.16,92.16-92.16
|
||||
c5.652,0,10.24,4.588,10.24,10.24S261.652,61.44,256,61.44z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 170 KiB After Width: | Height: | Size: 172 KiB |
@@ -1,304 +1,304 @@
|
||||
(() => {
|
||||
const canvas = document.getElementById("particles");
|
||||
if (canvas) {
|
||||
const ctx = canvas.getContext("2d");
|
||||
let particles = [];
|
||||
|
||||
function resizeCanvas() {
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
}
|
||||
|
||||
class Particle {
|
||||
constructor() {
|
||||
this.x = Math.random() * canvas.width;
|
||||
this.y = Math.random() * canvas.height;
|
||||
this.size = Math.random() * 4 + 1;
|
||||
this.speedX = Math.random() * 0.5 - 0.25;
|
||||
this.speedY = Math.random() * 0.5 + 0.2;
|
||||
}
|
||||
update() {
|
||||
this.x += this.speedX;
|
||||
this.y += this.speedY;
|
||||
if (this.y > canvas.height) this.y = 0;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#FFDD00";
|
||||
ctx.globalAlpha = 0.6;
|
||||
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 += 1) {
|
||||
particles.push(new Particle());
|
||||
}
|
||||
}
|
||||
|
||||
function animateParticles() {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
for (const particle of particles) {
|
||||
particle.update();
|
||||
particle.draw();
|
||||
}
|
||||
requestAnimationFrame(animateParticles);
|
||||
}
|
||||
|
||||
resizeCanvas();
|
||||
initParticles();
|
||||
animateParticles();
|
||||
window.addEventListener("resize", () => {
|
||||
resizeCanvas();
|
||||
initParticles();
|
||||
});
|
||||
}
|
||||
|
||||
const tabs = Array.from(document.querySelectorAll(".tab-btn"));
|
||||
const cards = Array.from(document.querySelectorAll(".polaroid-card"));
|
||||
const searchInput = document.getElementById("itinerary-search");
|
||||
const itineraryList = document.querySelector(".itinerary-list");
|
||||
const detailPanel = document.getElementById("detail-panel");
|
||||
const detailDate = document.getElementById("detail-date");
|
||||
const detailTitle = document.getElementById("detail-title");
|
||||
const detailDesc = document.getElementById("detail-desc");
|
||||
const detailQuote = document.getElementById("detail-quote");
|
||||
const detailTag = document.getElementById("detail-tag");
|
||||
const detailLink = document.getElementById("detail-link");
|
||||
const detailImage = document.getElementById("detail-image");
|
||||
const memberMapFrame = document.getElementById("member-map");
|
||||
const mapEmbedSingle = document.getElementById("map-embed-single");
|
||||
const mapEmbedAll = document.getElementById("map-embed-all");
|
||||
const openMapLink = document.getElementById("open-map-link");
|
||||
const openMapLinksDual = document.getElementById("open-map-links-dual");
|
||||
const openMapLinkKo = document.getElementById("open-map-link-ko");
|
||||
const openMapLinkEun = document.getElementById("open-map-link-eun");
|
||||
const dayGroups = new Map();
|
||||
|
||||
let currentMember = "eun";
|
||||
let currentKeyword = "";
|
||||
const memberMaps = {
|
||||
eun: {
|
||||
embed: "https://www.google.com/maps/d/embed?mid=1VGZ76SPPjm3NWCBQe-hkm08oe5WPRJI&ehbc=2E312F",
|
||||
open: "https://www.google.com/maps/d/u/0/viewer?mid=1VGZ76SPPjm3NWCBQe-hkm08oe5WPRJI"
|
||||
},
|
||||
ko: {
|
||||
embed: "https://www.google.com/maps/d/embed?mid=1xpAsSoO8gNmMiW4x2sfkndISFTtjMQDw&hl=zh-TW&ehbc=2E312F",
|
||||
open: "https://www.google.com/maps/d/u/0/viewer?mid=1xpAsSoO8gNmMiW4x2sfkndISFTtjMQDw"
|
||||
}
|
||||
};
|
||||
const memberTripPrefix = {
|
||||
ko: "高高父子遊台灣",
|
||||
eun: "殷空少搭飛機去台灣高雄"
|
||||
};
|
||||
const memberSortOrder = { eun: 0, ko: 1 };
|
||||
|
||||
function normalizeMember(member) {
|
||||
if (member === "kogo") return "ko";
|
||||
return member;
|
||||
}
|
||||
|
||||
function getMemberLabel(member) {
|
||||
const normalized = normalizeMember(member);
|
||||
if (normalized === "eun") return "殷志源";
|
||||
if (normalized === "ko") return "高志溶";
|
||||
return "未分類";
|
||||
}
|
||||
|
||||
function getDayToken(rawDate) {
|
||||
const match = String(rawDate || "").match(/Day\s*(\d+)/i);
|
||||
if (!match) return String(rawDate || "未分類");
|
||||
return "Day " + match[1];
|
||||
}
|
||||
|
||||
function getGroupLabel(card) {
|
||||
const date = getDayToken(card.dataset.date || "未分類");
|
||||
const normalized = normalizeMember(card.dataset.member || "");
|
||||
const prefix = memberTripPrefix[normalized] || getMemberLabel(normalized);
|
||||
return prefix + "_" + date;
|
||||
}
|
||||
|
||||
function setDualMapVisible(isAll) {
|
||||
if (mapEmbedSingle && mapEmbedAll) {
|
||||
mapEmbedSingle.hidden = isAll ? true : false;
|
||||
mapEmbedAll.hidden = isAll ? false : true;
|
||||
mapEmbedAll.setAttribute("aria-hidden", isAll ? "false" : "true");
|
||||
}
|
||||
if (openMapLink && openMapLinksDual) {
|
||||
openMapLink.hidden = isAll ? true : false;
|
||||
openMapLinksDual.hidden = isAll ? false : true;
|
||||
}
|
||||
}
|
||||
|
||||
function updateMapByMember(member) {
|
||||
const normalized = normalizeMember(member);
|
||||
if (normalized === "all") {
|
||||
setDualMapVisible(true);
|
||||
if (openMapLinkKo) openMapLinkKo.href = memberMaps.ko.open;
|
||||
if (openMapLinkEun) openMapLinkEun.href = memberMaps.eun.open;
|
||||
return;
|
||||
}
|
||||
setDualMapVisible(false);
|
||||
const mapConfig = memberMaps[normalized];
|
||||
if (!mapConfig || !memberMapFrame) return;
|
||||
memberMapFrame.src = mapConfig.embed;
|
||||
if (openMapLink) openMapLink.href = mapConfig.open;
|
||||
}
|
||||
|
||||
function getCardSearchText(card) {
|
||||
return [
|
||||
card.dataset.date || "",
|
||||
card.dataset.title || "",
|
||||
card.dataset.desc || "",
|
||||
card.dataset.tag || "",
|
||||
].join(" ").toLowerCase();
|
||||
}
|
||||
|
||||
function createDayGroup(dayLabel) {
|
||||
const group = document.createElement("section");
|
||||
group.className = "day-group";
|
||||
group.dataset.day = dayLabel;
|
||||
|
||||
const toggle = document.createElement("button");
|
||||
toggle.type = "button";
|
||||
toggle.className = "day-toggle";
|
||||
toggle.setAttribute("aria-expanded", "false");
|
||||
toggle.innerHTML = "<span>" + dayLabel + "</span><i class='fa-solid fa-chevron-down'></i>";
|
||||
|
||||
const body = document.createElement("div");
|
||||
body.className = "day-cards";
|
||||
body.style.display = "none";
|
||||
|
||||
group.appendChild(toggle);
|
||||
group.appendChild(body);
|
||||
itineraryList.appendChild(group);
|
||||
dayGroups.set(dayLabel, { group, toggle, body });
|
||||
return dayGroups.get(dayLabel);
|
||||
}
|
||||
|
||||
function setDayExpanded(dayGroup, shouldExpand) {
|
||||
dayGroup.toggle.setAttribute("aria-expanded", shouldExpand ? "true" : "false");
|
||||
dayGroup.body.style.display = shouldExpand ? "grid" : "none";
|
||||
dayGroup.group.classList.toggle("expanded", shouldExpand);
|
||||
}
|
||||
|
||||
function initializeDayGroups() {
|
||||
const sortedCards = [...cards].sort((a, b) => {
|
||||
const memberA = normalizeMember(a.dataset.member || "");
|
||||
const memberB = normalizeMember(b.dataset.member || "");
|
||||
const memberDiff = (memberSortOrder[memberA] ?? 99) - (memberSortOrder[memberB] ?? 99);
|
||||
if (memberDiff !== 0) return memberDiff;
|
||||
|
||||
const dayA = Number((getDayToken(a.dataset.date).match(/\d+/) || [999])[0]);
|
||||
const dayB = Number((getDayToken(b.dataset.date).match(/\d+/) || [999])[0]);
|
||||
return dayA - dayB;
|
||||
});
|
||||
|
||||
sortedCards.forEach((card) => {
|
||||
const dayLabel = getGroupLabel(card);
|
||||
const dayGroup = dayGroups.get(dayLabel) || createDayGroup(dayLabel);
|
||||
dayGroup.body.appendChild(card);
|
||||
});
|
||||
}
|
||||
|
||||
function updateDayGroupVisibility() {
|
||||
dayGroups.forEach(({ group, body, toggle }) => {
|
||||
const visibleCards = Array.from(body.querySelectorAll(".polaroid-card")).filter((card) => card.style.display !== "none");
|
||||
group.style.display = visibleCards.length ? "" : "none";
|
||||
if (!visibleCards.length) {
|
||||
setDayExpanded({ group, toggle, body }, false);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function ensureExpandedForCard(card) {
|
||||
const dayGroup = dayGroups.get(getGroupLabel(card));
|
||||
if (!dayGroup) return;
|
||||
setDayExpanded(dayGroup, true);
|
||||
}
|
||||
|
||||
function setActiveCard(card, options = {}) {
|
||||
const { expandDay = true } = options;
|
||||
cards.forEach((item) => item.classList.remove("active"));
|
||||
card.classList.add("active");
|
||||
if (expandDay) {
|
||||
ensureExpandedForCard(card);
|
||||
}
|
||||
const mapKey = currentMember === "all" ? "all" : currentMember;
|
||||
updateMapByMember(mapKey);
|
||||
|
||||
detailDate.textContent = card.dataset.date || "";
|
||||
detailTitle.textContent = card.dataset.title || "";
|
||||
detailDesc.textContent = card.dataset.desc || "";
|
||||
detailQuote.textContent = "「" + (card.dataset.quote || "") + "」";
|
||||
detailTag.textContent = card.dataset.tag || "";
|
||||
detailLink.href = card.dataset.link || "#";
|
||||
detailImage.src = card.querySelector("img").src;
|
||||
detailImage.alt = "節目截圖 - " + (card.dataset.title || "行程地點");
|
||||
}
|
||||
|
||||
function applyFilter() {
|
||||
let firstVisible = null;
|
||||
cards.forEach((card) => {
|
||||
const cardMember = normalizeMember(card.dataset.member || "");
|
||||
const matchedMember = currentMember === "all" || cardMember === currentMember;
|
||||
const matchedKeyword = !currentKeyword || getCardSearchText(card).includes(currentKeyword);
|
||||
const matched = matchedMember && matchedKeyword;
|
||||
card.style.display = matched ? "" : "none";
|
||||
if (matched && !firstVisible) firstVisible = card;
|
||||
});
|
||||
updateDayGroupVisibility();
|
||||
const activeVisibleCard = cards.find((card) => card.classList.contains("active") && card.style.display !== "none");
|
||||
const fallbackCard = activeVisibleCard || firstVisible;
|
||||
if (fallbackCard) {
|
||||
setActiveCard(fallbackCard, { expandDay: false });
|
||||
} else {
|
||||
updateMapByMember(currentMember === "all" ? "all" : currentMember);
|
||||
}
|
||||
}
|
||||
|
||||
tabs.forEach((tab) => {
|
||||
tab.addEventListener("click", () => {
|
||||
tabs.forEach((item) => {
|
||||
item.classList.remove("active");
|
||||
item.setAttribute("aria-pressed", "false");
|
||||
});
|
||||
tab.classList.add("active");
|
||||
tab.setAttribute("aria-pressed", "true");
|
||||
currentMember = normalizeMember(tab.dataset.member || "all");
|
||||
applyFilter();
|
||||
});
|
||||
});
|
||||
|
||||
if (searchInput) {
|
||||
searchInput.addEventListener("input", (event) => {
|
||||
currentKeyword = event.target.value.trim().toLowerCase();
|
||||
applyFilter();
|
||||
});
|
||||
}
|
||||
|
||||
itineraryList.addEventListener("click", (event) => {
|
||||
const toggle = event.target.closest(".day-toggle");
|
||||
if (!toggle) return;
|
||||
const group = toggle.closest(".day-group");
|
||||
if (!group) return;
|
||||
const dayGroup = dayGroups.get(group.dataset.day);
|
||||
if (!dayGroup) return;
|
||||
const isExpanded = dayGroup.toggle.getAttribute("aria-expanded") === "true";
|
||||
setDayExpanded(dayGroup, !isExpanded);
|
||||
});
|
||||
|
||||
cards.forEach((card) => {
|
||||
card.addEventListener("click", () => {
|
||||
setActiveCard(card, { expandDay: true });
|
||||
if (window.innerWidth < 920) {
|
||||
detailPanel.scrollIntoView({ behavior: "smooth", block: "start" });
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
initializeDayGroups();
|
||||
applyFilter();
|
||||
})();
|
||||
(() => {
|
||||
const canvas = document.getElementById("particles");
|
||||
if (canvas) {
|
||||
const ctx = canvas.getContext("2d");
|
||||
let particles = [];
|
||||
|
||||
function resizeCanvas() {
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
}
|
||||
|
||||
class Particle {
|
||||
constructor() {
|
||||
this.x = Math.random() * canvas.width;
|
||||
this.y = Math.random() * canvas.height;
|
||||
this.size = Math.random() * 4 + 1;
|
||||
this.speedX = Math.random() * 0.5 - 0.25;
|
||||
this.speedY = Math.random() * 0.5 + 0.2;
|
||||
}
|
||||
update() {
|
||||
this.x += this.speedX;
|
||||
this.y += this.speedY;
|
||||
if (this.y > canvas.height) this.y = 0;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#FFDD00";
|
||||
ctx.globalAlpha = 0.6;
|
||||
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 += 1) {
|
||||
particles.push(new Particle());
|
||||
}
|
||||
}
|
||||
|
||||
function animateParticles() {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
for (const particle of particles) {
|
||||
particle.update();
|
||||
particle.draw();
|
||||
}
|
||||
requestAnimationFrame(animateParticles);
|
||||
}
|
||||
|
||||
resizeCanvas();
|
||||
initParticles();
|
||||
animateParticles();
|
||||
window.addEventListener("resize", () => {
|
||||
resizeCanvas();
|
||||
initParticles();
|
||||
});
|
||||
}
|
||||
|
||||
const tabs = Array.from(document.querySelectorAll(".tab-btn"));
|
||||
const cards = Array.from(document.querySelectorAll(".polaroid-card"));
|
||||
const searchInput = document.getElementById("itinerary-search");
|
||||
const itineraryList = document.querySelector(".itinerary-list");
|
||||
const detailPanel = document.getElementById("detail-panel");
|
||||
const detailDate = document.getElementById("detail-date");
|
||||
const detailTitle = document.getElementById("detail-title");
|
||||
const detailDesc = document.getElementById("detail-desc");
|
||||
const detailQuote = document.getElementById("detail-quote");
|
||||
const detailTag = document.getElementById("detail-tag");
|
||||
const detailLink = document.getElementById("detail-link");
|
||||
const detailImage = document.getElementById("detail-image");
|
||||
const memberMapFrame = document.getElementById("member-map");
|
||||
const mapEmbedSingle = document.getElementById("map-embed-single");
|
||||
const mapEmbedAll = document.getElementById("map-embed-all");
|
||||
const openMapLink = document.getElementById("open-map-link");
|
||||
const openMapLinksDual = document.getElementById("open-map-links-dual");
|
||||
const openMapLinkKo = document.getElementById("open-map-link-ko");
|
||||
const openMapLinkEun = document.getElementById("open-map-link-eun");
|
||||
const dayGroups = new Map();
|
||||
|
||||
let currentMember = "eun";
|
||||
let currentKeyword = "";
|
||||
const memberMaps = {
|
||||
eun: {
|
||||
embed: "https://www.google.com/maps/d/embed?mid=1VGZ76SPPjm3NWCBQe-hkm08oe5WPRJI&ehbc=2E312F",
|
||||
open: "https://www.google.com/maps/d/u/0/viewer?mid=1VGZ76SPPjm3NWCBQe-hkm08oe5WPRJI"
|
||||
},
|
||||
ko: {
|
||||
embed: "https://www.google.com/maps/d/embed?mid=1xpAsSoO8gNmMiW4x2sfkndISFTtjMQDw&hl=zh-TW&ehbc=2E312F",
|
||||
open: "https://www.google.com/maps/d/u/0/viewer?mid=1xpAsSoO8gNmMiW4x2sfkndISFTtjMQDw"
|
||||
}
|
||||
};
|
||||
const memberTripPrefix = {
|
||||
ko: "高高父子遊台灣",
|
||||
eun: "殷空少搭飛機去台灣高雄"
|
||||
};
|
||||
const memberSortOrder = { eun: 0, ko: 1 };
|
||||
|
||||
function normalizeMember(member) {
|
||||
if (member === "kogo") return "ko";
|
||||
return member;
|
||||
}
|
||||
|
||||
function getMemberLabel(member) {
|
||||
const normalized = normalizeMember(member);
|
||||
if (normalized === "eun") return "殷志源";
|
||||
if (normalized === "ko") return "高志溶";
|
||||
return "未分類";
|
||||
}
|
||||
|
||||
function getDayToken(rawDate) {
|
||||
const match = String(rawDate || "").match(/Day\s*(\d+)/i);
|
||||
if (!match) return String(rawDate || "未分類");
|
||||
return "Day " + match[1];
|
||||
}
|
||||
|
||||
function getGroupLabel(card) {
|
||||
const date = getDayToken(card.dataset.date || "未分類");
|
||||
const normalized = normalizeMember(card.dataset.member || "");
|
||||
const prefix = memberTripPrefix[normalized] || getMemberLabel(normalized);
|
||||
return prefix + "_" + date;
|
||||
}
|
||||
|
||||
function setDualMapVisible(isAll) {
|
||||
if (mapEmbedSingle && mapEmbedAll) {
|
||||
mapEmbedSingle.hidden = isAll ? true : false;
|
||||
mapEmbedAll.hidden = isAll ? false : true;
|
||||
mapEmbedAll.setAttribute("aria-hidden", isAll ? "false" : "true");
|
||||
}
|
||||
if (openMapLink && openMapLinksDual) {
|
||||
openMapLink.hidden = isAll ? true : false;
|
||||
openMapLinksDual.hidden = isAll ? false : true;
|
||||
}
|
||||
}
|
||||
|
||||
function updateMapByMember(member) {
|
||||
const normalized = normalizeMember(member);
|
||||
if (normalized === "all") {
|
||||
setDualMapVisible(true);
|
||||
if (openMapLinkKo) openMapLinkKo.href = memberMaps.ko.open;
|
||||
if (openMapLinkEun) openMapLinkEun.href = memberMaps.eun.open;
|
||||
return;
|
||||
}
|
||||
setDualMapVisible(false);
|
||||
const mapConfig = memberMaps[normalized];
|
||||
if (!mapConfig || !memberMapFrame) return;
|
||||
memberMapFrame.src = mapConfig.embed;
|
||||
if (openMapLink) openMapLink.href = mapConfig.open;
|
||||
}
|
||||
|
||||
function getCardSearchText(card) {
|
||||
return [
|
||||
card.dataset.date || "",
|
||||
card.dataset.title || "",
|
||||
card.dataset.desc || "",
|
||||
card.dataset.tag || "",
|
||||
].join(" ").toLowerCase();
|
||||
}
|
||||
|
||||
function createDayGroup(dayLabel) {
|
||||
const group = document.createElement("section");
|
||||
group.className = "day-group";
|
||||
group.dataset.day = dayLabel;
|
||||
|
||||
const toggle = document.createElement("button");
|
||||
toggle.type = "button";
|
||||
toggle.className = "day-toggle";
|
||||
toggle.setAttribute("aria-expanded", "false");
|
||||
toggle.innerHTML = "<span>" + dayLabel + "</span><i class='fa-solid fa-chevron-down'></i>";
|
||||
|
||||
const body = document.createElement("div");
|
||||
body.className = "day-cards";
|
||||
body.style.display = "none";
|
||||
|
||||
group.appendChild(toggle);
|
||||
group.appendChild(body);
|
||||
itineraryList.appendChild(group);
|
||||
dayGroups.set(dayLabel, { group, toggle, body });
|
||||
return dayGroups.get(dayLabel);
|
||||
}
|
||||
|
||||
function setDayExpanded(dayGroup, shouldExpand) {
|
||||
dayGroup.toggle.setAttribute("aria-expanded", shouldExpand ? "true" : "false");
|
||||
dayGroup.body.style.display = shouldExpand ? "grid" : "none";
|
||||
dayGroup.group.classList.toggle("expanded", shouldExpand);
|
||||
}
|
||||
|
||||
function initializeDayGroups() {
|
||||
const sortedCards = [...cards].sort((a, b) => {
|
||||
const memberA = normalizeMember(a.dataset.member || "");
|
||||
const memberB = normalizeMember(b.dataset.member || "");
|
||||
const memberDiff = (memberSortOrder[memberA] ?? 99) - (memberSortOrder[memberB] ?? 99);
|
||||
if (memberDiff !== 0) return memberDiff;
|
||||
|
||||
const dayA = Number((getDayToken(a.dataset.date).match(/\d+/) || [999])[0]);
|
||||
const dayB = Number((getDayToken(b.dataset.date).match(/\d+/) || [999])[0]);
|
||||
return dayA - dayB;
|
||||
});
|
||||
|
||||
sortedCards.forEach((card) => {
|
||||
const dayLabel = getGroupLabel(card);
|
||||
const dayGroup = dayGroups.get(dayLabel) || createDayGroup(dayLabel);
|
||||
dayGroup.body.appendChild(card);
|
||||
});
|
||||
}
|
||||
|
||||
function updateDayGroupVisibility() {
|
||||
dayGroups.forEach(({ group, body, toggle }) => {
|
||||
const visibleCards = Array.from(body.querySelectorAll(".polaroid-card")).filter((card) => card.style.display !== "none");
|
||||
group.style.display = visibleCards.length ? "" : "none";
|
||||
if (!visibleCards.length) {
|
||||
setDayExpanded({ group, toggle, body }, false);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function ensureExpandedForCard(card) {
|
||||
const dayGroup = dayGroups.get(getGroupLabel(card));
|
||||
if (!dayGroup) return;
|
||||
setDayExpanded(dayGroup, true);
|
||||
}
|
||||
|
||||
function setActiveCard(card, options = {}) {
|
||||
const { expandDay = true } = options;
|
||||
cards.forEach((item) => item.classList.remove("active"));
|
||||
card.classList.add("active");
|
||||
if (expandDay) {
|
||||
ensureExpandedForCard(card);
|
||||
}
|
||||
const mapKey = currentMember === "all" ? "all" : currentMember;
|
||||
updateMapByMember(mapKey);
|
||||
|
||||
detailDate.textContent = card.dataset.date || "";
|
||||
detailTitle.textContent = card.dataset.title || "";
|
||||
detailDesc.textContent = card.dataset.desc || "";
|
||||
detailQuote.textContent = "「" + (card.dataset.quote || "") + "」";
|
||||
detailTag.textContent = card.dataset.tag || "";
|
||||
detailLink.href = card.dataset.link || "#";
|
||||
detailImage.src = card.querySelector("img").src;
|
||||
detailImage.alt = "節目截圖 - " + (card.dataset.title || "行程地點");
|
||||
}
|
||||
|
||||
function applyFilter() {
|
||||
let firstVisible = null;
|
||||
cards.forEach((card) => {
|
||||
const cardMember = normalizeMember(card.dataset.member || "");
|
||||
const matchedMember = currentMember === "all" || cardMember === currentMember;
|
||||
const matchedKeyword = !currentKeyword || getCardSearchText(card).includes(currentKeyword);
|
||||
const matched = matchedMember && matchedKeyword;
|
||||
card.style.display = matched ? "" : "none";
|
||||
if (matched && !firstVisible) firstVisible = card;
|
||||
});
|
||||
updateDayGroupVisibility();
|
||||
const activeVisibleCard = cards.find((card) => card.classList.contains("active") && card.style.display !== "none");
|
||||
const fallbackCard = activeVisibleCard || firstVisible;
|
||||
if (fallbackCard) {
|
||||
setActiveCard(fallbackCard, { expandDay: false });
|
||||
} else {
|
||||
updateMapByMember(currentMember === "all" ? "all" : currentMember);
|
||||
}
|
||||
}
|
||||
|
||||
tabs.forEach((tab) => {
|
||||
tab.addEventListener("click", () => {
|
||||
tabs.forEach((item) => {
|
||||
item.classList.remove("active");
|
||||
item.setAttribute("aria-pressed", "false");
|
||||
});
|
||||
tab.classList.add("active");
|
||||
tab.setAttribute("aria-pressed", "true");
|
||||
currentMember = normalizeMember(tab.dataset.member || "all");
|
||||
applyFilter();
|
||||
});
|
||||
});
|
||||
|
||||
if (searchInput) {
|
||||
searchInput.addEventListener("input", (event) => {
|
||||
currentKeyword = event.target.value.trim().toLowerCase();
|
||||
applyFilter();
|
||||
});
|
||||
}
|
||||
|
||||
itineraryList.addEventListener("click", (event) => {
|
||||
const toggle = event.target.closest(".day-toggle");
|
||||
if (!toggle) return;
|
||||
const group = toggle.closest(".day-group");
|
||||
if (!group) return;
|
||||
const dayGroup = dayGroups.get(group.dataset.day);
|
||||
if (!dayGroup) return;
|
||||
const isExpanded = dayGroup.toggle.getAttribute("aria-expanded") === "true";
|
||||
setDayExpanded(dayGroup, !isExpanded);
|
||||
});
|
||||
|
||||
cards.forEach((card) => {
|
||||
card.addEventListener("click", () => {
|
||||
setActiveCard(card, { expandDay: true });
|
||||
if (window.innerWidth < 920) {
|
||||
detailPanel.scrollIntoView({ behavior: "smooth", block: "start" });
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
initializeDayGroups();
|
||||
applyFilter();
|
||||
})();
|
||||
@@ -1,58 +1,58 @@
|
||||
(() => {
|
||||
const canvas = document.getElementById("particles");
|
||||
if (!canvas) return;
|
||||
|
||||
const ctx = canvas.getContext("2d");
|
||||
let particles = [];
|
||||
|
||||
function resizeCanvas() {
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
}
|
||||
|
||||
class Particle {
|
||||
constructor() {
|
||||
this.x = Math.random() * canvas.width;
|
||||
this.y = Math.random() * canvas.height;
|
||||
this.size = Math.random() * 4 + 1;
|
||||
this.speedX = Math.random() * 0.5 - 0.25;
|
||||
this.speedY = Math.random() * 0.5 + 0.2;
|
||||
}
|
||||
update() {
|
||||
this.x += this.speedX;
|
||||
this.y += this.speedY;
|
||||
if (this.y > canvas.height) this.y = 0;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#FFDD00";
|
||||
ctx.globalAlpha = 0.6;
|
||||
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 += 1) {
|
||||
particles.push(new Particle());
|
||||
}
|
||||
}
|
||||
|
||||
function animateParticles() {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
for (const particle of particles) {
|
||||
particle.update();
|
||||
particle.draw();
|
||||
}
|
||||
requestAnimationFrame(animateParticles);
|
||||
}
|
||||
|
||||
resizeCanvas();
|
||||
initParticles();
|
||||
animateParticles();
|
||||
window.addEventListener("resize", () => {
|
||||
resizeCanvas();
|
||||
initParticles();
|
||||
});
|
||||
})();
|
||||
(() => {
|
||||
const canvas = document.getElementById("particles");
|
||||
if (!canvas) return;
|
||||
|
||||
const ctx = canvas.getContext("2d");
|
||||
let particles = [];
|
||||
|
||||
function resizeCanvas() {
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
}
|
||||
|
||||
class Particle {
|
||||
constructor() {
|
||||
this.x = Math.random() * canvas.width;
|
||||
this.y = Math.random() * canvas.height;
|
||||
this.size = Math.random() * 4 + 1;
|
||||
this.speedX = Math.random() * 0.5 - 0.25;
|
||||
this.speedY = Math.random() * 0.5 + 0.2;
|
||||
}
|
||||
update() {
|
||||
this.x += this.speedX;
|
||||
this.y += this.speedY;
|
||||
if (this.y > canvas.height) this.y = 0;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#FFDD00";
|
||||
ctx.globalAlpha = 0.6;
|
||||
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 += 1) {
|
||||
particles.push(new Particle());
|
||||
}
|
||||
}
|
||||
|
||||
function animateParticles() {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
for (const particle of particles) {
|
||||
particle.update();
|
||||
particle.draw();
|
||||
}
|
||||
requestAnimationFrame(animateParticles);
|
||||
}
|
||||
|
||||
resizeCanvas();
|
||||
initParticles();
|
||||
animateParticles();
|
||||
window.addEventListener("resize", () => {
|
||||
resizeCanvas();
|
||||
initParticles();
|
||||
});
|
||||
})();
|
||||
@@ -1,479 +1,479 @@
|
||||
(() => {
|
||||
/**
|
||||
* ── 導覽「尚未開放」連結 ─────────────────────────────────────────
|
||||
* 【兩個世界】① 僅 `extra/site-guide.html`:`<nav data-portal-nav-all-open>` 頂欄全可點;`main.site-guide-main` 內 `<a>` 不改寫。
|
||||
* ② 其餘每一頁:頂欄+**頁內所有連結**(含 totoga2 分頁列、首頁內文)皆依 COMING_SOON/INDEX 白名單鎖定。
|
||||
* 【totoga2】頂欄四入口:時間軸(`timeline.html`)、圖文好讀版(`readable.html`)在 Set;電子書/影片可點。未同意不得從 Set 刪除或擅自開放。
|
||||
* 【硬規則】檔案在 repo ≠ 可開放;未同意不得從 Set 刪名、不得擴白名單、不得在模板新增可點項。
|
||||
* 【未公開】href 改 #、不可點。頂欄與頁內按鈕:NAV_SOON_PHRASES 滑過隨機氣泡(同 ::after);無障礙 aria「尚無開放」;不加可見「(籌備中)」文字後綴。
|
||||
* 【totoga2 開放】`totoga2/ebook.html`、`totoga2/video.html` 可點;`timeline.html` 與 `totoga2/readable.html` 在 Set 內。
|
||||
* 頂欄勿加 `portal-nav__sub`(站主未要求);曾用副標見 `.cursor/portal-nav-optimization-backlog.md`。
|
||||
* 完整條文:`.cursor/rules/portal-nav-rules.mdc`
|
||||
*/
|
||||
const NAV_SOON_PHRASES = [
|
||||
"奇蹟醞釀中",
|
||||
"感動載入中",
|
||||
"初心校準中",
|
||||
"黃海漫延中",
|
||||
"傳奇編排中",
|
||||
"夢想航行中",
|
||||
];
|
||||
|
||||
/** 主選單欄 `mouseleave` 後延遲關閉(ms),方便移入子選單或右側飛出層,避免略偏就關閉 */
|
||||
const SUBMENU_CLOSE_DELAY_MS = 650;
|
||||
|
||||
/** 橫向+右側飛出子選單;≤991px 改漢堡+直向展開(對齊常見 992 斷點) */
|
||||
const PORTAL_NAV_DESKTOP_MIN_PX = 992;
|
||||
|
||||
function isPortalNavDesktop() {
|
||||
return window.matchMedia(`(min-width: ${PORTAL_NAV_DESKTOP_MIN_PX}px)`).matches;
|
||||
}
|
||||
|
||||
function setPortalNavMenuOpen(nav, open) {
|
||||
nav.classList.toggle("portal-nav--open", open);
|
||||
const toggle = nav.querySelector(".portal-nav__menu-toggle");
|
||||
if (toggle) {
|
||||
toggle.setAttribute("aria-expanded", open ? "true" : "false");
|
||||
toggle.setAttribute("aria-label", open ? "關閉選單" : "開啟選單");
|
||||
}
|
||||
if (!isPortalNavDesktop()) {
|
||||
document.body.classList.toggle("portal-nav-menu-open", open);
|
||||
} else {
|
||||
document.body.classList.remove("portal-nav-menu-open");
|
||||
}
|
||||
if (!open) {
|
||||
nav.querySelectorAll(":scope > ul > li.open, .portal-nav__subgroup.open").forEach((el) => {
|
||||
el.classList.remove("open");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function pickSoonPhrase() {
|
||||
return NAV_SOON_PHRASES[Math.floor(Math.random() * NAV_SOON_PHRASES.length)];
|
||||
}
|
||||
|
||||
/** 籌備中連結:滑過/聚焦時隨機一句(氣泡與 title 同步,頂欄與頁內按鈕共用) */
|
||||
function rollSoonLabel(link) {
|
||||
const p = pickSoonPhrase();
|
||||
link.style.setProperty("--portal-nav-soon-msg", JSON.stringify(p));
|
||||
link.setAttribute("title", p);
|
||||
}
|
||||
|
||||
const COMING_SOON_PAGES = new Set([
|
||||
"albums.html",
|
||||
"map.html",
|
||||
"member.html",
|
||||
"minister.html",
|
||||
"minister_ge.html",
|
||||
"readable.html",
|
||||
"timeline.html",
|
||||
"variety.html",
|
||||
]);
|
||||
|
||||
/**
|
||||
* 首頁僅下列錨點可點;其餘(如 #story)維持籌備中,須站主同意後才可加入。
|
||||
* 空字串:連到 index.html 且無 # 片段時視為可點(淪陷瞬間主項)。
|
||||
*/
|
||||
const INDEX_NAV_OPEN_HASHES = new Set(["", "#origin", "#start", "#mission", "#timeline"]);
|
||||
|
||||
function normalizePageKey(href) {
|
||||
if (!href || href === "#") return "";
|
||||
const core = href.split("#")[0].split("?")[0];
|
||||
const parts = core.split("/").filter(Boolean);
|
||||
const last = parts.length ? parts[parts.length - 1] : "";
|
||||
return last.toLowerCase();
|
||||
}
|
||||
|
||||
/** 比照原邏輯:取 href 前半與網址列檔名比對 */
|
||||
function hrefMatchesCurrentPage(href, currentPage) {
|
||||
if (!href || href === "#") return false;
|
||||
const [filePart] = href.split("#");
|
||||
const base = filePart.split("/").pop();
|
||||
return base === currentPage;
|
||||
}
|
||||
|
||||
/** 取得 #fragment(含 #);若無錨點則回傳空字串 */
|
||||
function anchorFromHref(href) {
|
||||
const i = href.indexOf("#");
|
||||
if (i < 0) return "";
|
||||
return href.slice(i).split("?")[0];
|
||||
}
|
||||
|
||||
function markLinkComingSoon(link, originalHref) {
|
||||
const labelEl = link.querySelector(".portal-nav__label");
|
||||
const visibleTitle = labelEl ? labelEl.textContent.trim() : link.textContent.trim();
|
||||
link.setAttribute("data-coming-soon", "true");
|
||||
link.setAttribute("aria-disabled", "true");
|
||||
link.setAttribute("aria-label", `${visibleTitle},尚無開放`);
|
||||
|
||||
const onSoonInteract = () => rollSoonLabel(link);
|
||||
link.addEventListener("pointerenter", onSoonInteract);
|
||||
link.addEventListener("focus", onSoonInteract);
|
||||
link.addEventListener("touchstart", onSoonInteract, { passive: true });
|
||||
|
||||
if (!link.dataset.originalHref) {
|
||||
link.dataset.originalHref = originalHref;
|
||||
}
|
||||
|
||||
link.setAttribute("href", "#");
|
||||
link.dataset.portalNavSoonRoll = "1";
|
||||
}
|
||||
|
||||
function linkShouldBeComingSoon(href, pageKey, pageKeysSoon) {
|
||||
if (pageKeysSoon.has(pageKey)) {
|
||||
return true;
|
||||
}
|
||||
if (pageKey === "index.html") {
|
||||
const frag = anchorFromHref(href);
|
||||
return !INDEX_NAV_OPEN_HASHES.has(frag);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function getPageKeysSoon() {
|
||||
return new Set([...COMING_SOON_PAGES].map((p) => normalizePageKey(String(p))).filter(Boolean));
|
||||
}
|
||||
|
||||
/** 將籌備中規則套用至容器內錨點(頂欄或整頁;`site-guide` 主文除外) */
|
||||
function applyComingSoonToAnchorElements(container) {
|
||||
if (!container) return;
|
||||
const pageKeysSoon = getPageKeysSoon();
|
||||
|
||||
container.querySelectorAll("a[href]").forEach((link) => {
|
||||
if (link.classList.contains("logo")) return;
|
||||
if (link.getAttribute("data-coming-soon") === "true") return;
|
||||
|
||||
const href = link.getAttribute("href");
|
||||
if (!href || href === "#") return;
|
||||
if (/^https?:\/\//i.test(href)) return;
|
||||
|
||||
const pageKey = normalizePageKey(href);
|
||||
if (!pageKey) return;
|
||||
|
||||
if (!linkShouldBeComingSoon(href, pageKey, pageKeysSoon)) return;
|
||||
|
||||
markLinkComingSoon(link, href);
|
||||
});
|
||||
}
|
||||
|
||||
/** 訪客頁:頁內連結與頂欄同一套 COMING_SOON;僅 site-guide 的 main.site-guide-main 跳過(頂欄 all-open 不影響此條) */
|
||||
function applyComingSoonSiteWide() {
|
||||
const siteGuideMain = document.querySelector("main.site-guide-main");
|
||||
document.querySelectorAll("a[href]").forEach((link) => {
|
||||
if (link.closest("nav.portal-nav")) return;
|
||||
if (siteGuideMain && siteGuideMain.contains(link)) return;
|
||||
if (link.classList.contains("logo")) return;
|
||||
|
||||
const href = link.getAttribute("href");
|
||||
if (!href || href === "#") return;
|
||||
if (/^https?:\/\//i.test(href)) return;
|
||||
|
||||
const pageKey = normalizePageKey(href);
|
||||
if (!pageKey) return;
|
||||
|
||||
const pageKeysSoon = getPageKeysSoon();
|
||||
if (!linkShouldBeComingSoon(href, pageKey, pageKeysSoon)) return;
|
||||
|
||||
markLinkComingSoon(link, href);
|
||||
});
|
||||
}
|
||||
|
||||
function blockNavigation(event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
}
|
||||
|
||||
function bindComingSoonBlockers() {
|
||||
document.querySelectorAll('a[data-coming-soon="true"]').forEach((link) => {
|
||||
if (link.dataset.portalNavSoonBound === "1") return;
|
||||
link.dataset.portalNavSoonBound = "1";
|
||||
link.addEventListener("click", blockNavigation);
|
||||
link.addEventListener("auxclick", blockNavigation);
|
||||
});
|
||||
}
|
||||
|
||||
/** 將籌備中規則套用至單一導覽列(含頂層 li 樣式) */
|
||||
function applyComingSoonToNav(nav) {
|
||||
applyComingSoonToAnchorElements(nav);
|
||||
|
||||
nav.querySelectorAll(":scope > ul > li").forEach((li) => {
|
||||
const trigger = li.querySelector(":scope > a[href]");
|
||||
if (!trigger || trigger.classList.contains("logo")) return;
|
||||
if (trigger.getAttribute("data-coming-soon") === "true") {
|
||||
li.classList.add("coming-soon");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 站根與 `portal-nav.js` 同層;依腳本路徑與當前頁路徑計算回到站根的相對前綴(如 `../`)。
|
||||
* 子資料夾內頁面之導覽連結必須帶此前綴,否則 `./assets/images`、`index.html` 會錯層。
|
||||
*/
|
||||
function portalNavRootPrefix() {
|
||||
const el =
|
||||
document.currentScript ||
|
||||
Array.from(document.querySelectorAll("script[src*='portal-nav.js']")).find((s) => s.src);
|
||||
if (!el?.src) return "./";
|
||||
try {
|
||||
const scriptPathname = new URL(el.src, window.location.href).pathname;
|
||||
const scriptDirSegs = scriptPathname.split("/").filter(Boolean);
|
||||
scriptDirSegs.pop();
|
||||
const pageDirSegs = window.location.pathname.split("/").filter(Boolean);
|
||||
pageDirSegs.pop();
|
||||
let i = 0;
|
||||
const a = scriptDirSegs;
|
||||
const b = pageDirSegs;
|
||||
while (i < a.length && i < b.length && a[i] === b[i]) {
|
||||
i += 1;
|
||||
}
|
||||
const ups = b.length - i;
|
||||
return ups > 0 ? "../".repeat(ups) : "./";
|
||||
} catch {
|
||||
return "./";
|
||||
}
|
||||
}
|
||||
|
||||
/** 全站導覽 HTML — `rp` 為站根相對前綴;僅修改此模板即可同步所有頁面
|
||||
* 五主項:淪陷瞬間、完整的六顆、現場的震撼、黃色留聲機、Yellow Note(全員是瘋子子選單暫關)。 */
|
||||
function buildPortalNavInnerHTML(rp) {
|
||||
return `
|
||||
<a class="logo" target="_blank" rel="noopener noreferrer" href="${rp}index.html"><img src="${rp}assets/images/logov.svg" alt="SECHSKIES Logo"></a>
|
||||
<button type="button" class="portal-nav__menu-toggle" aria-expanded="false" aria-controls="portal-primary-menu" aria-label="開啟選單">
|
||||
<span class="portal-nav__menu-toggle-icon" aria-hidden="true">
|
||||
<span class="portal-nav__menu-toggle-bar"></span>
|
||||
<span class="portal-nav__menu-toggle-bar"></span>
|
||||
<span class="portal-nav__menu-toggle-bar"></span>
|
||||
</span>
|
||||
</button>
|
||||
<ul id="portal-primary-menu">
|
||||
<li><a target="_blank" rel="noopener noreferrer" href="${rp}index.html"><span class="portal-nav__label">淪陷瞬間</span></a>
|
||||
<ul class="portal-submenu">
|
||||
<li class="portal-nav__subgroup">
|
||||
<span class="portal-nav__subgroup-head"><span class="portal-nav__label">傳奇的轉折</span></span>
|
||||
<ul class="portal-submenu-nested" aria-label="傳奇的轉折">
|
||||
<li><a target="_blank" rel="noopener noreferrer" href="${rp}totoga2/timeline.html"><span class="portal-nav__label">時間軸</span></a></li>
|
||||
<li><a target="_blank" rel="noopener noreferrer" href="${rp}totoga2/ebook.html"><span class="portal-nav__label">電子書</span></a></li>
|
||||
<li><a target="_blank" rel="noopener noreferrer" href="${rp}totoga2/readable.html"><span class="portal-nav__label">圖文好讀版</span></a></li>
|
||||
<li><a target="_blank" rel="noopener noreferrer" href="${rp}totoga2/video.html"><span class="portal-nav__label">影片</span></a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<!-- 全員是瘋子(原全員發瘋):暫不顯示子選單;恢復時改回 subgroup 並用此標題 -->
|
||||
</ul>
|
||||
</li>
|
||||
<li><a target="_blank" rel="noopener noreferrer" href="${rp}member/member.html"><span class="portal-nav__label">完整的六顆</span></a></li>
|
||||
<li><a target="_blank" rel="noopener noreferrer" href="${rp}concert/concert.html"><span class="portal-nav__label">現場的震撼</span></a>
|
||||
<ul class="portal-submenu">
|
||||
<li><a target="_blank" rel="noopener noreferrer" href="${rp}concert/concert.html"><span class="portal-nav__label">集結水晶</span></a></li>
|
||||
<li><a href="#" data-coming-soon="true" aria-disabled="true" aria-label="隊長的氣場,尚無開放"><span class="portal-nav__label">隊長的氣場</span></a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a target="_blank" rel="noopener noreferrer" href="${rp}albums/albums.html"><span class="portal-nav__label">黃色留聲機</span></a>
|
||||
<ul class="portal-submenu">
|
||||
<li><a target="_blank" rel="noopener noreferrer" href="${rp}albums/albums.html#new"><span class="portal-nav__label">啟動新篇章</span></a></li>
|
||||
<li><a target="_blank" rel="noopener noreferrer" href="${rp}albums/albums.html#classic"><span class="portal-nav__label">輝煌全盛期</span></a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a target="_blank" rel="noopener noreferrer" href="${rp}yellow-note/map.html"><span class="portal-nav__label">Yellow Note</span></a>
|
||||
<ul class="portal-submenu">
|
||||
<li><a target="_blank" rel="noopener noreferrer" href="${rp}yellow-note/minister.html"><span class="portal-nav__label">視覺進化論</span></a></li>
|
||||
<li><a target="_blank" rel="noopener noreferrer" href="${rp}yellow-note/map.html"><span class="portal-nav__label">聖地巡禮</span></a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
`.trim();
|
||||
}
|
||||
|
||||
const rootPrefix = portalNavRootPrefix();
|
||||
document.querySelectorAll("nav.portal-nav[data-portal-nav]").forEach((nav) => {
|
||||
nav.innerHTML = buildPortalNavInnerHTML(rootPrefix);
|
||||
if (!nav.hasAttribute("data-portal-nav-all-open")) {
|
||||
applyComingSoonToNav(nav);
|
||||
}
|
||||
});
|
||||
|
||||
applyComingSoonSiteWide();
|
||||
bindComingSoonBlockers();
|
||||
|
||||
const navs = Array.from(document.querySelectorAll(".portal-nav"));
|
||||
if (!navs.length) return;
|
||||
|
||||
const currentPage = window.location.pathname.split("/").pop() || "index.html";
|
||||
|
||||
navs.forEach((nav) => {
|
||||
/* 僅頂層主欄;子選單內巢狀 li 不綁 open,否則會關閉整欄下拉 */
|
||||
const items = Array.from(nav.querySelectorAll(":scope > ul > li"));
|
||||
const menuToggle = nav.querySelector(".portal-nav__menu-toggle");
|
||||
const desktopMq = window.matchMedia(`(min-width: ${PORTAL_NAV_DESKTOP_MIN_PX}px)`);
|
||||
|
||||
if (menuToggle) {
|
||||
menuToggle.addEventListener("click", () => {
|
||||
setPortalNavMenuOpen(nav, !nav.classList.contains("portal-nav--open"));
|
||||
});
|
||||
}
|
||||
|
||||
const closeIfOutside = (event) => {
|
||||
if (!nav.contains(event.target)) {
|
||||
setPortalNavMenuOpen(nav, false);
|
||||
items.forEach((item) => item.classList.remove("open"));
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener("click", closeIfOutside);
|
||||
|
||||
document.addEventListener("keydown", (event) => {
|
||||
if (event.key === "Escape") setPortalNavMenuOpen(nav, false);
|
||||
});
|
||||
|
||||
desktopMq.addEventListener("change", (event) => {
|
||||
if (event.matches) setPortalNavMenuOpen(nav, false);
|
||||
});
|
||||
|
||||
nav.addEventListener("click", (event) => {
|
||||
if (isPortalNavDesktop()) return;
|
||||
|
||||
const subgroupHead = event.target.closest(".portal-nav__subgroup-head");
|
||||
if (subgroupHead) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
const subgroup = subgroupHead.closest(".portal-nav__subgroup");
|
||||
if (subgroup) subgroup.classList.toggle("open");
|
||||
return;
|
||||
}
|
||||
|
||||
const link = event.target.closest("a[href]");
|
||||
if (!link || link.classList.contains("logo")) return;
|
||||
|
||||
const topItem = link.closest(".portal-nav > ul > li");
|
||||
const isTopTrigger =
|
||||
topItem &&
|
||||
link === topItem.querySelector(":scope > a") &&
|
||||
topItem.querySelector(":scope > .portal-submenu");
|
||||
|
||||
if (isTopTrigger) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (link.getAttribute("data-coming-soon") === "true") return;
|
||||
const href = link.getAttribute("href");
|
||||
if (href && href !== "#") setPortalNavMenuOpen(nav, false);
|
||||
});
|
||||
|
||||
items.forEach((item) => {
|
||||
const trigger = item.querySelector(":scope > a");
|
||||
const submenu = item.querySelector(":scope > .portal-submenu");
|
||||
if (!trigger || !submenu) return;
|
||||
|
||||
let closeTimer = null;
|
||||
const nestedPanels = Array.from(item.querySelectorAll(".portal-submenu-nested"));
|
||||
const hoverBound = { on: false };
|
||||
|
||||
const openItem = () => {
|
||||
if (!isPortalNavDesktop()) return;
|
||||
if (closeTimer) window.clearTimeout(closeTimer);
|
||||
items.forEach((other) => {
|
||||
if (other !== item) other.classList.remove("open");
|
||||
});
|
||||
item.classList.add("open");
|
||||
};
|
||||
|
||||
const cancelClose = () => {
|
||||
if (closeTimer) {
|
||||
window.clearTimeout(closeTimer);
|
||||
closeTimer = null;
|
||||
}
|
||||
};
|
||||
|
||||
const scheduleClose = () => {
|
||||
cancelClose();
|
||||
closeTimer = window.setTimeout(() => item.classList.remove("open"), SUBMENU_CLOSE_DELAY_MS);
|
||||
};
|
||||
|
||||
const leaveUnlessStillInside = (event) => {
|
||||
const next = event.relatedTarget;
|
||||
if (next instanceof Node && item.contains(next)) return;
|
||||
scheduleClose();
|
||||
};
|
||||
|
||||
const bindDesktopHover = () => {
|
||||
if (hoverBound.on) return;
|
||||
item.addEventListener("mouseenter", openItem);
|
||||
item.addEventListener("mouseleave", leaveUnlessStillInside);
|
||||
submenu.addEventListener("mouseenter", cancelClose);
|
||||
submenu.addEventListener("mouseleave", leaveUnlessStillInside);
|
||||
nestedPanels.forEach((panel) => {
|
||||
panel.addEventListener("mouseenter", cancelClose);
|
||||
panel.addEventListener("mouseleave", leaveUnlessStillInside);
|
||||
});
|
||||
hoverBound.on = true;
|
||||
};
|
||||
|
||||
const unbindDesktopHover = () => {
|
||||
if (!hoverBound.on) return;
|
||||
item.removeEventListener("mouseenter", openItem);
|
||||
item.removeEventListener("mouseleave", leaveUnlessStillInside);
|
||||
submenu.removeEventListener("mouseenter", cancelClose);
|
||||
submenu.removeEventListener("mouseleave", leaveUnlessStillInside);
|
||||
nestedPanels.forEach((panel) => {
|
||||
panel.removeEventListener("mouseenter", cancelClose);
|
||||
panel.removeEventListener("mouseleave", leaveUnlessStillInside);
|
||||
});
|
||||
hoverBound.on = false;
|
||||
item.classList.remove("open");
|
||||
};
|
||||
|
||||
const syncDesktopHover = () => {
|
||||
if (isPortalNavDesktop()) bindDesktopHover();
|
||||
else unbindDesktopHover();
|
||||
};
|
||||
|
||||
syncDesktopHover();
|
||||
desktopMq.addEventListener("change", syncDesktopHover);
|
||||
|
||||
trigger.addEventListener("focus", () => {
|
||||
if (isPortalNavDesktop()) openItem();
|
||||
});
|
||||
|
||||
trigger.addEventListener("click", (event) => {
|
||||
const isSoon = trigger.getAttribute("data-coming-soon") === "true";
|
||||
|
||||
if (!isPortalNavDesktop()) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
if (!isSoon && !item.classList.contains("coming-soon")) {
|
||||
const menuList = nav.querySelector(":scope > ul");
|
||||
const prevScroll = menuList ? menuList.scrollTop : 0;
|
||||
items.forEach((other) => {
|
||||
if (other !== item) other.classList.remove("open");
|
||||
});
|
||||
item.classList.toggle("open");
|
||||
if (!item.classList.contains("open")) {
|
||||
item.querySelectorAll(".portal-nav__subgroup.open").forEach((sub) => {
|
||||
sub.classList.remove("open");
|
||||
});
|
||||
}
|
||||
if (menuList) {
|
||||
requestAnimationFrame(() => {
|
||||
menuList.scrollTop = prevScroll;
|
||||
});
|
||||
}
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (isSoon) {
|
||||
event.preventDefault();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const navLinks = Array.from(nav.querySelectorAll("a[href]")).filter((link) => !link.classList.contains("logo"));
|
||||
navLinks.forEach((link) => {
|
||||
const fallback = link.getAttribute("href");
|
||||
const source = link.dataset.originalHref || fallback;
|
||||
if (!source || source === "#") return;
|
||||
if (hrefMatchesCurrentPage(source, currentPage)) {
|
||||
link.classList.add("nav-current");
|
||||
}
|
||||
});
|
||||
});
|
||||
})();
|
||||
(() => {
|
||||
/**
|
||||
* ── 導覽「尚未開放」連結 ─────────────────────────────────────────
|
||||
* 【兩個世界】① 僅 `extra/site-guide.html`:`<nav data-portal-nav-all-open>` 頂欄全可點;`main.site-guide-main` 內 `<a>` 不改寫。
|
||||
* ② 其餘每一頁:頂欄+**頁內所有連結**(含 totoga2 分頁列、首頁內文)皆依 COMING_SOON/INDEX 白名單鎖定。
|
||||
* 【totoga2】頂欄四入口:時間軸(`timeline.html`)、圖文好讀版(`readable.html`)在 Set;電子書/影片可點。未同意不得從 Set 刪除或擅自開放。
|
||||
* 【硬規則】檔案在 repo ≠ 可開放;未同意不得從 Set 刪名、不得擴白名單、不得在模板新增可點項。
|
||||
* 【未公開】href 改 #、不可點。頂欄與頁內按鈕:NAV_SOON_PHRASES 滑過隨機氣泡(同 ::after);無障礙 aria「尚無開放」;不加可見「(籌備中)」文字後綴。
|
||||
* 【totoga2 開放】`totoga2/ebook.html`、`totoga2/video.html` 可點;`timeline.html` 與 `totoga2/readable.html` 在 Set 內。
|
||||
* 頂欄勿加 `portal-nav__sub`(站主未要求);曾用副標見 `.cursor/portal-nav-optimization-backlog.md`。
|
||||
* 完整條文:`.cursor/rules/portal-nav-rules.mdc`
|
||||
*/
|
||||
const NAV_SOON_PHRASES = [
|
||||
"奇蹟醞釀中",
|
||||
"感動載入中",
|
||||
"初心校準中",
|
||||
"黃海漫延中",
|
||||
"傳奇編排中",
|
||||
"夢想航行中",
|
||||
];
|
||||
|
||||
/** 主選單欄 `mouseleave` 後延遲關閉(ms),方便移入子選單或右側飛出層,避免略偏就關閉 */
|
||||
const SUBMENU_CLOSE_DELAY_MS = 650;
|
||||
|
||||
/** 橫向+右側飛出子選單;≤991px 改漢堡+直向展開(對齊常見 992 斷點) */
|
||||
const PORTAL_NAV_DESKTOP_MIN_PX = 992;
|
||||
|
||||
function isPortalNavDesktop() {
|
||||
return window.matchMedia(`(min-width: ${PORTAL_NAV_DESKTOP_MIN_PX}px)`).matches;
|
||||
}
|
||||
|
||||
function setPortalNavMenuOpen(nav, open) {
|
||||
nav.classList.toggle("portal-nav--open", open);
|
||||
const toggle = nav.querySelector(".portal-nav__menu-toggle");
|
||||
if (toggle) {
|
||||
toggle.setAttribute("aria-expanded", open ? "true" : "false");
|
||||
toggle.setAttribute("aria-label", open ? "關閉選單" : "開啟選單");
|
||||
}
|
||||
if (!isPortalNavDesktop()) {
|
||||
document.body.classList.toggle("portal-nav-menu-open", open);
|
||||
} else {
|
||||
document.body.classList.remove("portal-nav-menu-open");
|
||||
}
|
||||
if (!open) {
|
||||
nav.querySelectorAll(":scope > ul > li.open, .portal-nav__subgroup.open").forEach((el) => {
|
||||
el.classList.remove("open");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function pickSoonPhrase() {
|
||||
return NAV_SOON_PHRASES[Math.floor(Math.random() * NAV_SOON_PHRASES.length)];
|
||||
}
|
||||
|
||||
/** 籌備中連結:滑過/聚焦時隨機一句(氣泡與 title 同步,頂欄與頁內按鈕共用) */
|
||||
function rollSoonLabel(link) {
|
||||
const p = pickSoonPhrase();
|
||||
link.style.setProperty("--portal-nav-soon-msg", JSON.stringify(p));
|
||||
link.setAttribute("title", p);
|
||||
}
|
||||
|
||||
const COMING_SOON_PAGES = new Set([
|
||||
"albums.html",
|
||||
"map.html",
|
||||
"member.html",
|
||||
"minister.html",
|
||||
"minister_ge.html",
|
||||
"readable.html",
|
||||
"timeline.html",
|
||||
"variety.html",
|
||||
]);
|
||||
|
||||
/**
|
||||
* 首頁僅下列錨點可點;其餘(如 #story)維持籌備中,須站主同意後才可加入。
|
||||
* 空字串:連到 index.html 且無 # 片段時視為可點(淪陷瞬間主項)。
|
||||
*/
|
||||
const INDEX_NAV_OPEN_HASHES = new Set(["", "#origin", "#start", "#mission", "#timeline"]);
|
||||
|
||||
function normalizePageKey(href) {
|
||||
if (!href || href === "#") return "";
|
||||
const core = href.split("#")[0].split("?")[0];
|
||||
const parts = core.split("/").filter(Boolean);
|
||||
const last = parts.length ? parts[parts.length - 1] : "";
|
||||
return last.toLowerCase();
|
||||
}
|
||||
|
||||
/** 比照原邏輯:取 href 前半與網址列檔名比對 */
|
||||
function hrefMatchesCurrentPage(href, currentPage) {
|
||||
if (!href || href === "#") return false;
|
||||
const [filePart] = href.split("#");
|
||||
const base = filePart.split("/").pop();
|
||||
return base === currentPage;
|
||||
}
|
||||
|
||||
/** 取得 #fragment(含 #);若無錨點則回傳空字串 */
|
||||
function anchorFromHref(href) {
|
||||
const i = href.indexOf("#");
|
||||
if (i < 0) return "";
|
||||
return href.slice(i).split("?")[0];
|
||||
}
|
||||
|
||||
function markLinkComingSoon(link, originalHref) {
|
||||
const labelEl = link.querySelector(".portal-nav__label");
|
||||
const visibleTitle = labelEl ? labelEl.textContent.trim() : link.textContent.trim();
|
||||
link.setAttribute("data-coming-soon", "true");
|
||||
link.setAttribute("aria-disabled", "true");
|
||||
link.setAttribute("aria-label", `${visibleTitle},尚無開放`);
|
||||
|
||||
const onSoonInteract = () => rollSoonLabel(link);
|
||||
link.addEventListener("pointerenter", onSoonInteract);
|
||||
link.addEventListener("focus", onSoonInteract);
|
||||
link.addEventListener("touchstart", onSoonInteract, { passive: true });
|
||||
|
||||
if (!link.dataset.originalHref) {
|
||||
link.dataset.originalHref = originalHref;
|
||||
}
|
||||
|
||||
link.setAttribute("href", "#");
|
||||
link.dataset.portalNavSoonRoll = "1";
|
||||
}
|
||||
|
||||
function linkShouldBeComingSoon(href, pageKey, pageKeysSoon) {
|
||||
if (pageKeysSoon.has(pageKey)) {
|
||||
return true;
|
||||
}
|
||||
if (pageKey === "index.html") {
|
||||
const frag = anchorFromHref(href);
|
||||
return !INDEX_NAV_OPEN_HASHES.has(frag);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function getPageKeysSoon() {
|
||||
return new Set([...COMING_SOON_PAGES].map((p) => normalizePageKey(String(p))).filter(Boolean));
|
||||
}
|
||||
|
||||
/** 將籌備中規則套用至容器內錨點(頂欄或整頁;`site-guide` 主文除外) */
|
||||
function applyComingSoonToAnchorElements(container) {
|
||||
if (!container) return;
|
||||
const pageKeysSoon = getPageKeysSoon();
|
||||
|
||||
container.querySelectorAll("a[href]").forEach((link) => {
|
||||
if (link.classList.contains("logo")) return;
|
||||
if (link.getAttribute("data-coming-soon") === "true") return;
|
||||
|
||||
const href = link.getAttribute("href");
|
||||
if (!href || href === "#") return;
|
||||
if (/^https?:\/\//i.test(href)) return;
|
||||
|
||||
const pageKey = normalizePageKey(href);
|
||||
if (!pageKey) return;
|
||||
|
||||
if (!linkShouldBeComingSoon(href, pageKey, pageKeysSoon)) return;
|
||||
|
||||
markLinkComingSoon(link, href);
|
||||
});
|
||||
}
|
||||
|
||||
/** 訪客頁:頁內連結與頂欄同一套 COMING_SOON;僅 site-guide 的 main.site-guide-main 跳過(頂欄 all-open 不影響此條) */
|
||||
function applyComingSoonSiteWide() {
|
||||
const siteGuideMain = document.querySelector("main.site-guide-main");
|
||||
document.querySelectorAll("a[href]").forEach((link) => {
|
||||
if (link.closest("nav.portal-nav")) return;
|
||||
if (siteGuideMain && siteGuideMain.contains(link)) return;
|
||||
if (link.classList.contains("logo")) return;
|
||||
|
||||
const href = link.getAttribute("href");
|
||||
if (!href || href === "#") return;
|
||||
if (/^https?:\/\//i.test(href)) return;
|
||||
|
||||
const pageKey = normalizePageKey(href);
|
||||
if (!pageKey) return;
|
||||
|
||||
const pageKeysSoon = getPageKeysSoon();
|
||||
if (!linkShouldBeComingSoon(href, pageKey, pageKeysSoon)) return;
|
||||
|
||||
markLinkComingSoon(link, href);
|
||||
});
|
||||
}
|
||||
|
||||
function blockNavigation(event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
}
|
||||
|
||||
function bindComingSoonBlockers() {
|
||||
document.querySelectorAll('a[data-coming-soon="true"]').forEach((link) => {
|
||||
if (link.dataset.portalNavSoonBound === "1") return;
|
||||
link.dataset.portalNavSoonBound = "1";
|
||||
link.addEventListener("click", blockNavigation);
|
||||
link.addEventListener("auxclick", blockNavigation);
|
||||
});
|
||||
}
|
||||
|
||||
/** 將籌備中規則套用至單一導覽列(含頂層 li 樣式) */
|
||||
function applyComingSoonToNav(nav) {
|
||||
applyComingSoonToAnchorElements(nav);
|
||||
|
||||
nav.querySelectorAll(":scope > ul > li").forEach((li) => {
|
||||
const trigger = li.querySelector(":scope > a[href]");
|
||||
if (!trigger || trigger.classList.contains("logo")) return;
|
||||
if (trigger.getAttribute("data-coming-soon") === "true") {
|
||||
li.classList.add("coming-soon");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 站根與 `portal-nav.js` 同層;依腳本路徑與當前頁路徑計算回到站根的相對前綴(如 `../`)。
|
||||
* 子資料夾內頁面之導覽連結必須帶此前綴,否則 `./assets/images`、`index.html` 會錯層。
|
||||
*/
|
||||
function portalNavRootPrefix() {
|
||||
const el =
|
||||
document.currentScript ||
|
||||
Array.from(document.querySelectorAll("script[src*='portal-nav.js']")).find((s) => s.src);
|
||||
if (!el?.src) return "./";
|
||||
try {
|
||||
const scriptPathname = new URL(el.src, window.location.href).pathname;
|
||||
const scriptDirSegs = scriptPathname.split("/").filter(Boolean);
|
||||
scriptDirSegs.pop();
|
||||
const pageDirSegs = window.location.pathname.split("/").filter(Boolean);
|
||||
pageDirSegs.pop();
|
||||
let i = 0;
|
||||
const a = scriptDirSegs;
|
||||
const b = pageDirSegs;
|
||||
while (i < a.length && i < b.length && a[i] === b[i]) {
|
||||
i += 1;
|
||||
}
|
||||
const ups = b.length - i;
|
||||
return ups > 0 ? "../".repeat(ups) : "./";
|
||||
} catch {
|
||||
return "./";
|
||||
}
|
||||
}
|
||||
|
||||
/** 全站導覽 HTML — `rp` 為站根相對前綴;僅修改此模板即可同步所有頁面
|
||||
* 五主項:淪陷瞬間、完整的六顆、現場的震撼、黃色留聲機、Yellow Note(全員是瘋子子選單暫關)。 */
|
||||
function buildPortalNavInnerHTML(rp) {
|
||||
return `
|
||||
<a class="logo" target="_blank" rel="noopener noreferrer" href="${rp}index.html"><img src="${rp}assets/images/logov.svg" alt="SECHSKIES Logo"></a>
|
||||
<button type="button" class="portal-nav__menu-toggle" aria-expanded="false" aria-controls="portal-primary-menu" aria-label="開啟選單">
|
||||
<span class="portal-nav__menu-toggle-icon" aria-hidden="true">
|
||||
<span class="portal-nav__menu-toggle-bar"></span>
|
||||
<span class="portal-nav__menu-toggle-bar"></span>
|
||||
<span class="portal-nav__menu-toggle-bar"></span>
|
||||
</span>
|
||||
</button>
|
||||
<ul id="portal-primary-menu">
|
||||
<li><a target="_blank" rel="noopener noreferrer" href="${rp}index.html"><span class="portal-nav__label">淪陷瞬間</span></a>
|
||||
<ul class="portal-submenu">
|
||||
<li class="portal-nav__subgroup">
|
||||
<span class="portal-nav__subgroup-head"><span class="portal-nav__label">傳奇的轉折</span></span>
|
||||
<ul class="portal-submenu-nested" aria-label="傳奇的轉折">
|
||||
<li><a target="_blank" rel="noopener noreferrer" href="${rp}totoga2/timeline.html"><span class="portal-nav__label">時間軸</span></a></li>
|
||||
<li><a target="_blank" rel="noopener noreferrer" href="${rp}totoga2/ebook.html"><span class="portal-nav__label">電子書</span></a></li>
|
||||
<li><a target="_blank" rel="noopener noreferrer" href="${rp}totoga2/readable.html"><span class="portal-nav__label">圖文好讀版</span></a></li>
|
||||
<li><a target="_blank" rel="noopener noreferrer" href="${rp}totoga2/video.html"><span class="portal-nav__label">影片</span></a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<!-- 全員是瘋子(原全員發瘋):暫不顯示子選單;恢復時改回 subgroup 並用此標題 -->
|
||||
</ul>
|
||||
</li>
|
||||
<li><a target="_blank" rel="noopener noreferrer" href="${rp}member/member.html"><span class="portal-nav__label">完整的六顆</span></a></li>
|
||||
<li><a target="_blank" rel="noopener noreferrer" href="${rp}concert/concert.html"><span class="portal-nav__label">現場的震撼</span></a>
|
||||
<ul class="portal-submenu">
|
||||
<li><a target="_blank" rel="noopener noreferrer" href="${rp}concert/concert.html"><span class="portal-nav__label">集結水晶</span></a></li>
|
||||
<li><a href="#" data-coming-soon="true" aria-disabled="true" aria-label="隊長的氣場,尚無開放"><span class="portal-nav__label">隊長的氣場</span></a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a target="_blank" rel="noopener noreferrer" href="${rp}albums/albums.html"><span class="portal-nav__label">黃色留聲機</span></a>
|
||||
<ul class="portal-submenu">
|
||||
<li><a target="_blank" rel="noopener noreferrer" href="${rp}albums/albums.html#new"><span class="portal-nav__label">啟動新篇章</span></a></li>
|
||||
<li><a target="_blank" rel="noopener noreferrer" href="${rp}albums/albums.html#classic"><span class="portal-nav__label">輝煌全盛期</span></a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a target="_blank" rel="noopener noreferrer" href="${rp}yellow-note/map.html"><span class="portal-nav__label">Yellow Note</span></a>
|
||||
<ul class="portal-submenu">
|
||||
<li><a target="_blank" rel="noopener noreferrer" href="${rp}yellow-note/minister.html"><span class="portal-nav__label">視覺進化論</span></a></li>
|
||||
<li><a target="_blank" rel="noopener noreferrer" href="${rp}yellow-note/map.html"><span class="portal-nav__label">聖地巡禮</span></a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
`.trim();
|
||||
}
|
||||
|
||||
const rootPrefix = portalNavRootPrefix();
|
||||
document.querySelectorAll("nav.portal-nav[data-portal-nav]").forEach((nav) => {
|
||||
nav.innerHTML = buildPortalNavInnerHTML(rootPrefix);
|
||||
if (!nav.hasAttribute("data-portal-nav-all-open")) {
|
||||
applyComingSoonToNav(nav);
|
||||
}
|
||||
});
|
||||
|
||||
applyComingSoonSiteWide();
|
||||
bindComingSoonBlockers();
|
||||
|
||||
const navs = Array.from(document.querySelectorAll(".portal-nav"));
|
||||
if (!navs.length) return;
|
||||
|
||||
const currentPage = window.location.pathname.split("/").pop() || "index.html";
|
||||
|
||||
navs.forEach((nav) => {
|
||||
/* 僅頂層主欄;子選單內巢狀 li 不綁 open,否則會關閉整欄下拉 */
|
||||
const items = Array.from(nav.querySelectorAll(":scope > ul > li"));
|
||||
const menuToggle = nav.querySelector(".portal-nav__menu-toggle");
|
||||
const desktopMq = window.matchMedia(`(min-width: ${PORTAL_NAV_DESKTOP_MIN_PX}px)`);
|
||||
|
||||
if (menuToggle) {
|
||||
menuToggle.addEventListener("click", () => {
|
||||
setPortalNavMenuOpen(nav, !nav.classList.contains("portal-nav--open"));
|
||||
});
|
||||
}
|
||||
|
||||
const closeIfOutside = (event) => {
|
||||
if (!nav.contains(event.target)) {
|
||||
setPortalNavMenuOpen(nav, false);
|
||||
items.forEach((item) => item.classList.remove("open"));
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener("click", closeIfOutside);
|
||||
|
||||
document.addEventListener("keydown", (event) => {
|
||||
if (event.key === "Escape") setPortalNavMenuOpen(nav, false);
|
||||
});
|
||||
|
||||
desktopMq.addEventListener("change", (event) => {
|
||||
if (event.matches) setPortalNavMenuOpen(nav, false);
|
||||
});
|
||||
|
||||
nav.addEventListener("click", (event) => {
|
||||
if (isPortalNavDesktop()) return;
|
||||
|
||||
const subgroupHead = event.target.closest(".portal-nav__subgroup-head");
|
||||
if (subgroupHead) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
const subgroup = subgroupHead.closest(".portal-nav__subgroup");
|
||||
if (subgroup) subgroup.classList.toggle("open");
|
||||
return;
|
||||
}
|
||||
|
||||
const link = event.target.closest("a[href]");
|
||||
if (!link || link.classList.contains("logo")) return;
|
||||
|
||||
const topItem = link.closest(".portal-nav > ul > li");
|
||||
const isTopTrigger =
|
||||
topItem &&
|
||||
link === topItem.querySelector(":scope > a") &&
|
||||
topItem.querySelector(":scope > .portal-submenu");
|
||||
|
||||
if (isTopTrigger) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (link.getAttribute("data-coming-soon") === "true") return;
|
||||
const href = link.getAttribute("href");
|
||||
if (href && href !== "#") setPortalNavMenuOpen(nav, false);
|
||||
});
|
||||
|
||||
items.forEach((item) => {
|
||||
const trigger = item.querySelector(":scope > a");
|
||||
const submenu = item.querySelector(":scope > .portal-submenu");
|
||||
if (!trigger || !submenu) return;
|
||||
|
||||
let closeTimer = null;
|
||||
const nestedPanels = Array.from(item.querySelectorAll(".portal-submenu-nested"));
|
||||
const hoverBound = { on: false };
|
||||
|
||||
const openItem = () => {
|
||||
if (!isPortalNavDesktop()) return;
|
||||
if (closeTimer) window.clearTimeout(closeTimer);
|
||||
items.forEach((other) => {
|
||||
if (other !== item) other.classList.remove("open");
|
||||
});
|
||||
item.classList.add("open");
|
||||
};
|
||||
|
||||
const cancelClose = () => {
|
||||
if (closeTimer) {
|
||||
window.clearTimeout(closeTimer);
|
||||
closeTimer = null;
|
||||
}
|
||||
};
|
||||
|
||||
const scheduleClose = () => {
|
||||
cancelClose();
|
||||
closeTimer = window.setTimeout(() => item.classList.remove("open"), SUBMENU_CLOSE_DELAY_MS);
|
||||
};
|
||||
|
||||
const leaveUnlessStillInside = (event) => {
|
||||
const next = event.relatedTarget;
|
||||
if (next instanceof Node && item.contains(next)) return;
|
||||
scheduleClose();
|
||||
};
|
||||
|
||||
const bindDesktopHover = () => {
|
||||
if (hoverBound.on) return;
|
||||
item.addEventListener("mouseenter", openItem);
|
||||
item.addEventListener("mouseleave", leaveUnlessStillInside);
|
||||
submenu.addEventListener("mouseenter", cancelClose);
|
||||
submenu.addEventListener("mouseleave", leaveUnlessStillInside);
|
||||
nestedPanels.forEach((panel) => {
|
||||
panel.addEventListener("mouseenter", cancelClose);
|
||||
panel.addEventListener("mouseleave", leaveUnlessStillInside);
|
||||
});
|
||||
hoverBound.on = true;
|
||||
};
|
||||
|
||||
const unbindDesktopHover = () => {
|
||||
if (!hoverBound.on) return;
|
||||
item.removeEventListener("mouseenter", openItem);
|
||||
item.removeEventListener("mouseleave", leaveUnlessStillInside);
|
||||
submenu.removeEventListener("mouseenter", cancelClose);
|
||||
submenu.removeEventListener("mouseleave", leaveUnlessStillInside);
|
||||
nestedPanels.forEach((panel) => {
|
||||
panel.removeEventListener("mouseenter", cancelClose);
|
||||
panel.removeEventListener("mouseleave", leaveUnlessStillInside);
|
||||
});
|
||||
hoverBound.on = false;
|
||||
item.classList.remove("open");
|
||||
};
|
||||
|
||||
const syncDesktopHover = () => {
|
||||
if (isPortalNavDesktop()) bindDesktopHover();
|
||||
else unbindDesktopHover();
|
||||
};
|
||||
|
||||
syncDesktopHover();
|
||||
desktopMq.addEventListener("change", syncDesktopHover);
|
||||
|
||||
trigger.addEventListener("focus", () => {
|
||||
if (isPortalNavDesktop()) openItem();
|
||||
});
|
||||
|
||||
trigger.addEventListener("click", (event) => {
|
||||
const isSoon = trigger.getAttribute("data-coming-soon") === "true";
|
||||
|
||||
if (!isPortalNavDesktop()) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
if (!isSoon && !item.classList.contains("coming-soon")) {
|
||||
const menuList = nav.querySelector(":scope > ul");
|
||||
const prevScroll = menuList ? menuList.scrollTop : 0;
|
||||
items.forEach((other) => {
|
||||
if (other !== item) other.classList.remove("open");
|
||||
});
|
||||
item.classList.toggle("open");
|
||||
if (!item.classList.contains("open")) {
|
||||
item.querySelectorAll(".portal-nav__subgroup.open").forEach((sub) => {
|
||||
sub.classList.remove("open");
|
||||
});
|
||||
}
|
||||
if (menuList) {
|
||||
requestAnimationFrame(() => {
|
||||
menuList.scrollTop = prevScroll;
|
||||
});
|
||||
}
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (isSoon) {
|
||||
event.preventDefault();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const navLinks = Array.from(nav.querySelectorAll("a[href]")).filter((link) => !link.classList.contains("logo"));
|
||||
navLinks.forEach((link) => {
|
||||
const fallback = link.getAttribute("href");
|
||||
const source = link.dataset.originalHref || fallback;
|
||||
if (!source || source === "#") return;
|
||||
if (hrefMatchesCurrentPage(source, currentPage)) {
|
||||
link.classList.add("nav-current");
|
||||
}
|
||||
});
|
||||
});
|
||||
})();
|
||||
@@ -1,112 +1,112 @@
|
||||
(() => {
|
||||
const hubButtons = Array.from(document.querySelectorAll("[data-totoga-hub]"));
|
||||
const hubPanels = Array.from(document.querySelectorAll("[data-totoga-panel]"));
|
||||
|
||||
function setHubPanel(name) {
|
||||
if (!hubButtons.length || !hubPanels.length) return;
|
||||
hubButtons.forEach((btn) => btn.classList.toggle("active", btn.dataset.totogaHub === name));
|
||||
hubPanels.forEach((panel) => {
|
||||
panel.hidden = panel.dataset.totogaPanel !== name;
|
||||
});
|
||||
}
|
||||
|
||||
hubButtons.forEach((button) => {
|
||||
button.addEventListener("click", () => {
|
||||
const name = button.dataset.totogaHub;
|
||||
if (name) setHubPanel(name);
|
||||
});
|
||||
});
|
||||
|
||||
const reader = document.getElementById("totoga2-reader");
|
||||
const chapters = reader ? Array.from(reader.querySelectorAll(".chronicle-chapter")) : [];
|
||||
const modeButtons = Array.from(document.querySelectorAll("[data-totoga-reader-mode]"));
|
||||
const pager = document.getElementById("totoga2-pager");
|
||||
const prevBtn = document.getElementById("totoga2-prev");
|
||||
const nextBtn = document.getElementById("totoga2-next");
|
||||
const indicator = document.getElementById("totoga2-chapter-indicator");
|
||||
const hasPager = Boolean(pager && prevBtn && nextBtn && indicator);
|
||||
|
||||
let currentIndex = 0;
|
||||
|
||||
function updatePagedView() {
|
||||
if (!hasPager) return;
|
||||
chapters.forEach((chapter, index) => {
|
||||
chapter.style.display = index === currentIndex ? "" : "none";
|
||||
chapter.classList.toggle("active", index === currentIndex);
|
||||
});
|
||||
indicator.textContent = `${currentIndex + 1} / ${chapters.length}`;
|
||||
prevBtn.disabled = currentIndex === 0;
|
||||
nextBtn.disabled = currentIndex === chapters.length - 1;
|
||||
}
|
||||
|
||||
function setReaderMode(mode) {
|
||||
if (!reader) return;
|
||||
reader.dataset.mode = mode;
|
||||
modeButtons.forEach((btn) => btn.classList.toggle("active", btn.dataset.totogaReaderMode === mode));
|
||||
if (mode === "paged" && hasPager) {
|
||||
pager.hidden = false;
|
||||
updatePagedView();
|
||||
} else {
|
||||
if (pager) pager.hidden = true;
|
||||
chapters.forEach((chapter) => {
|
||||
chapter.style.display = "";
|
||||
chapter.classList.remove("active");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
modeButtons.forEach((button) => {
|
||||
button.addEventListener("click", () => setReaderMode(button.dataset.totogaReaderMode));
|
||||
});
|
||||
|
||||
if (hasPager) {
|
||||
prevBtn.addEventListener("click", () => {
|
||||
if (currentIndex > 0) {
|
||||
currentIndex -= 1;
|
||||
updatePagedView();
|
||||
}
|
||||
});
|
||||
|
||||
nextBtn.addEventListener("click", () => {
|
||||
if (currentIndex < chapters.length - 1) {
|
||||
currentIndex += 1;
|
||||
updatePagedView();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (hubButtons.length > 0) {
|
||||
const initialHub =
|
||||
hubButtons.find((b) => b.classList.contains("active"))?.dataset.totogaHub ||
|
||||
hubButtons[0]?.dataset.totogaHub ||
|
||||
"video";
|
||||
setHubPanel(initialHub);
|
||||
} else {
|
||||
hubPanels.forEach((panel) => {
|
||||
panel.hidden = false;
|
||||
});
|
||||
}
|
||||
|
||||
if (reader) {
|
||||
setReaderMode("scroll");
|
||||
}
|
||||
|
||||
function applyLocationHashNavigation() {
|
||||
const hash = (location.hash || "").slice(1);
|
||||
if (hash === "ebook" && hubButtons.length > 0) {
|
||||
setHubPanel("ebook");
|
||||
return;
|
||||
}
|
||||
if (hash && document.getElementById(hash)) {
|
||||
if (hubButtons.length > 0) setHubPanel("reader");
|
||||
setReaderMode("scroll");
|
||||
if (pager) pager.hidden = true;
|
||||
requestAnimationFrame(() => {
|
||||
document.getElementById(hash)?.scrollIntoView({ behavior: "smooth", block: "start" });
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
applyLocationHashNavigation();
|
||||
window.addEventListener("hashchange", applyLocationHashNavigation);
|
||||
})();
|
||||
(() => {
|
||||
const hubButtons = Array.from(document.querySelectorAll("[data-totoga-hub]"));
|
||||
const hubPanels = Array.from(document.querySelectorAll("[data-totoga-panel]"));
|
||||
|
||||
function setHubPanel(name) {
|
||||
if (!hubButtons.length || !hubPanels.length) return;
|
||||
hubButtons.forEach((btn) => btn.classList.toggle("active", btn.dataset.totogaHub === name));
|
||||
hubPanels.forEach((panel) => {
|
||||
panel.hidden = panel.dataset.totogaPanel !== name;
|
||||
});
|
||||
}
|
||||
|
||||
hubButtons.forEach((button) => {
|
||||
button.addEventListener("click", () => {
|
||||
const name = button.dataset.totogaHub;
|
||||
if (name) setHubPanel(name);
|
||||
});
|
||||
});
|
||||
|
||||
const reader = document.getElementById("totoga2-reader");
|
||||
const chapters = reader ? Array.from(reader.querySelectorAll(".chronicle-chapter")) : [];
|
||||
const modeButtons = Array.from(document.querySelectorAll("[data-totoga-reader-mode]"));
|
||||
const pager = document.getElementById("totoga2-pager");
|
||||
const prevBtn = document.getElementById("totoga2-prev");
|
||||
const nextBtn = document.getElementById("totoga2-next");
|
||||
const indicator = document.getElementById("totoga2-chapter-indicator");
|
||||
const hasPager = Boolean(pager && prevBtn && nextBtn && indicator);
|
||||
|
||||
let currentIndex = 0;
|
||||
|
||||
function updatePagedView() {
|
||||
if (!hasPager) return;
|
||||
chapters.forEach((chapter, index) => {
|
||||
chapter.style.display = index === currentIndex ? "" : "none";
|
||||
chapter.classList.toggle("active", index === currentIndex);
|
||||
});
|
||||
indicator.textContent = `${currentIndex + 1} / ${chapters.length}`;
|
||||
prevBtn.disabled = currentIndex === 0;
|
||||
nextBtn.disabled = currentIndex === chapters.length - 1;
|
||||
}
|
||||
|
||||
function setReaderMode(mode) {
|
||||
if (!reader) return;
|
||||
reader.dataset.mode = mode;
|
||||
modeButtons.forEach((btn) => btn.classList.toggle("active", btn.dataset.totogaReaderMode === mode));
|
||||
if (mode === "paged" && hasPager) {
|
||||
pager.hidden = false;
|
||||
updatePagedView();
|
||||
} else {
|
||||
if (pager) pager.hidden = true;
|
||||
chapters.forEach((chapter) => {
|
||||
chapter.style.display = "";
|
||||
chapter.classList.remove("active");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
modeButtons.forEach((button) => {
|
||||
button.addEventListener("click", () => setReaderMode(button.dataset.totogaReaderMode));
|
||||
});
|
||||
|
||||
if (hasPager) {
|
||||
prevBtn.addEventListener("click", () => {
|
||||
if (currentIndex > 0) {
|
||||
currentIndex -= 1;
|
||||
updatePagedView();
|
||||
}
|
||||
});
|
||||
|
||||
nextBtn.addEventListener("click", () => {
|
||||
if (currentIndex < chapters.length - 1) {
|
||||
currentIndex += 1;
|
||||
updatePagedView();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (hubButtons.length > 0) {
|
||||
const initialHub =
|
||||
hubButtons.find((b) => b.classList.contains("active"))?.dataset.totogaHub ||
|
||||
hubButtons[0]?.dataset.totogaHub ||
|
||||
"video";
|
||||
setHubPanel(initialHub);
|
||||
} else {
|
||||
hubPanels.forEach((panel) => {
|
||||
panel.hidden = false;
|
||||
});
|
||||
}
|
||||
|
||||
if (reader) {
|
||||
setReaderMode("scroll");
|
||||
}
|
||||
|
||||
function applyLocationHashNavigation() {
|
||||
const hash = (location.hash || "").slice(1);
|
||||
if (hash === "ebook" && hubButtons.length > 0) {
|
||||
setHubPanel("ebook");
|
||||
return;
|
||||
}
|
||||
if (hash && document.getElementById(hash)) {
|
||||
if (hubButtons.length > 0) setHubPanel("reader");
|
||||
setReaderMode("scroll");
|
||||
if (pager) pager.hidden = true;
|
||||
requestAnimationFrame(() => {
|
||||
document.getElementById(hash)?.scrollIntoView({ behavior: "smooth", block: "start" });
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
applyLocationHashNavigation();
|
||||
window.addEventListener("hashchange", applyLocationHashNavigation);
|
||||
})();
|
||||
@@ -0,0 +1,70 @@
|
||||
---
|
||||
description: 全站 CSS color token 一覽與使用規範。
|
||||
alwaysApply: true
|
||||
---
|
||||
|
||||
# 【顏色 Token 規範】全站 CSS 變數一覽
|
||||
|
||||
所有顏色**必須**透過以下 token 引用,**禁止**在 CSS / HTML inline style 硬寫 hex 值(`rgba()` 中的透明度變化除外)。
|
||||
|
||||
## Token 總表(定義於 `assets/css/style.css` `:root`)
|
||||
|
||||
### 品牌色
|
||||
| Token | 值 | 用途 |
|
||||
|---|---|---|
|
||||
| `--color-brand` | `#ffcc00` | 主要強調色:按鈕、邊框、標題裝飾線 |
|
||||
| `--color-brand-light` | `#fceea7` | 淡黃底色、hover 背景 |
|
||||
| `--color-brand-dark` | `#4e492b` | 深棕黃文字、引言色 |
|
||||
|
||||
### 背景色
|
||||
| Token | 值 | 用途 |
|
||||
|---|---|---|
|
||||
| `--color-bg` | `#0a0a0a` | 全站頁面底色 |
|
||||
| `--color-bg-raised` | `#1a1a1a` | 導覽列、頁尾、深色卡片 |
|
||||
| `--color-bg-alt` | `#fcfaf2` | 淺色替代底(不常用) |
|
||||
|
||||
### 表面色(淺色內容區)
|
||||
| Token | 值 | 用途 |
|
||||
|---|---|---|
|
||||
| `--color-surface` | `#fffdf7` | section 底色 |
|
||||
| `--color-surface-soft` | `#fff9e8` | 卡片、暖白底 |
|
||||
|
||||
### 文字色
|
||||
| Token | 值 | 用途 |
|
||||
|---|---|---|
|
||||
| `--color-text` | `#333333` | 一般內文 |
|
||||
| `--color-text-dark` | `#1a1a1a` | 強調、標題文字 |
|
||||
| `--color-text-muted` | `#4d4d4d` | 次要說明文字 |
|
||||
| `--color-text-inverse` | `#f4f4f4` | 深色背景上的淺色文字 |
|
||||
|
||||
## 廢除名稱(禁止再使用)
|
||||
|
||||
以下為舊命名,已全數替換,不得復用:
|
||||
|
||||
`--primary` `--accent` `--yellow` `--light-yellow` `--dark-yellow`
|
||||
`--black` `--card-bg` `--deep-black` `--bg-alt`
|
||||
`--surface` `--surface-soft`
|
||||
`--text-color` `--text-main` `--text` `--text-muted` `--gray`
|
||||
|
||||
## 例外:`rgba()` 透明度變化
|
||||
|
||||
token 無法直接放入 `rgba()` 的色版參數,此情況保留 hex 硬寫:
|
||||
|
||||
```css
|
||||
/* ✅ 允許 */
|
||||
border: 1px solid rgba(255, 204, 0, 0.28);
|
||||
|
||||
/* ✅ 允許 */
|
||||
background: var(--color-brand);
|
||||
|
||||
/* ❌ 禁止 */
|
||||
background-color: #ffcc00;
|
||||
```
|
||||
|
||||
## 頁面 / 套件 scope token
|
||||
|
||||
以下為特定頁面內部使用的 scope token,不屬於全站規範,**不可**在其他頁面引用:
|
||||
|
||||
- `--lyrics-*`(歌詞頁)
|
||||
- `--njtw-*`(NJTW5 節目頁)
|
||||
- `--access-*`(演唱會票務狀態)
|
||||
@@ -1,39 +1,40 @@
|
||||
---
|
||||
description: 改檔後的 commit 規範、push 禁令與本機修復流程。
|
||||
globs: "*"
|
||||
alwaysApply: true
|
||||
---
|
||||
|
||||
# 【Git 完整規範】commit 格式・push 禁令・修復流程
|
||||
|
||||
## Commit:改完必附
|
||||
|
||||
只要本次對話中**有任何改檔、寫 Code、生成程式碼、調整結構的任務完成**,在回覆結尾**必須、強制、主動**附上 commit 指令,絕對不准等使用者開口要!
|
||||
|
||||
> ⚠️ **死線警告**:若本次對話完全沒有改動任何檔案、純屬聊天或觀念問答,則「不必」附上。
|
||||
|
||||
**禁止**為了附 commit 而跑 `git status`/`git diff`/`git log`;只貼指令,由站主在本機執行。
|
||||
|
||||
### 輸出格式(一字不差):
|
||||
|
||||
```bash
|
||||
git add .
|
||||
git commit -m "type: 重點"
|
||||
```
|
||||
|
||||
| 項目 | 約定 |
|
||||
|------|------|
|
||||
| type | `feat`|`fix`|`style`|`refactor`|`chore` 五選一 |
|
||||
| 重點 | **15 字以內**(標點計入) |
|
||||
| add | **一律 `git add .`**,禁止只 add 單檔 |
|
||||
|
||||
## Push:禁止擅自執行
|
||||
|
||||
- **禁止 `git push`**,除非站主原句說「幫我 push」等。只貼 push 錯誤 ≠ 同意 push。
|
||||
- 修 push 失敗:只動本機(壓圖、`.gitignore`、`amend`/filter-branch **先問**),末尾只給站主:
|
||||
|
||||
```bash
|
||||
git push origin main
|
||||
```
|
||||
|
||||
- GitHub 單檔 **> 100 MB** 拒 push。`*.png.bak` 已在根 `.gitignore` 保護,`git add .` 不會送進備份檔。
|
||||
---
|
||||
description: 改檔後的 commit 規範、push 禁令與本機修復流程。
|
||||
globs: "*"
|
||||
alwaysApply: true
|
||||
---
|
||||
|
||||
# 【Git 完整規範】commit 格式・push 禁令・修復流程
|
||||
|
||||
## Commit:改完必附
|
||||
|
||||
只要本次對話中**有任何改檔、寫 Code、生成程式碼、調整結構的任務完成**,在回覆結尾**必須、強制、主動**附上 commit 指令,絕對不准等使用者開口要!
|
||||
|
||||
> ⚠️ **死線警告**:若本次對話完全沒有改動任何檔案、純屬聊天或觀念問答,則「不必」附上。
|
||||
|
||||
**禁止**在 sandbox(AI 執行環境)內執行**任何** `git` 指令,包含 `git add`、`git status`、`git diff`、`git log`;一律只輸出指令,由站主在本機執行。在 sandbox 跑 git 會留下 `index.lock` 殘檔,導致站主本機 git 卡住。
|
||||
|
||||
### 輸出格式(一字不差):
|
||||
|
||||
```bash
|
||||
git add .
|
||||
git commit -m "type: 重點"
|
||||
```
|
||||
|
||||
| 項目 | 約定 |
|
||||
|------|------|
|
||||
| type | `feat`|`fix`|`style`|`refactor`|`chore` 五選一 |
|
||||
| 重點 | **15 字以內**(標點計入) |
|
||||
| add | **一律 `git add .`**,禁止只 add 單檔 |
|
||||
| 串接 | **禁止 `&&`**(站主環境為 PowerShell,不支援) |
|
||||
|
||||
## Push:禁止擅自執行
|
||||
|
||||
- **禁止 `git push`**,除非站主原句說「幫我 push」等。只貼 push 錯誤 ≠ 同意 push。
|
||||
- 修 push 失敗:只動本機(壓圖、`.gitignore`、`amend`/filter-branch **先問**),末尾只給站主:
|
||||
|
||||
```bash
|
||||
git push origin main
|
||||
```
|
||||
|
||||
- GitHub 單檔 **> 100 MB** 拒 push。`*.png.bak` 已在根 `.gitignore` 保護,`git add .` 不會送進備份檔。
|
||||
@@ -1,134 +1,134 @@
|
||||
---
|
||||
description: 全站導覽與籌備中(portal-nav.js、site-guide、開放邊界、刪錨點)
|
||||
alwaysApply: true
|
||||
---
|
||||
|
||||
# 【全站導覽邏輯】portal-nav.js・籌備中控制・site-guide 例外
|
||||
|
||||
之後**每新增一個要上線、可點的 HTML 頁面**,請一併完成導覽更新;規則都集中在 **`assets/js/portal-nav.js`**。
|
||||
|
||||
---
|
||||
|
||||
## 0. 兩個世界(最高優先,實作前必讀)
|
||||
|
||||
| 誰在看 | 哪一頁/哪塊 | 行為 |
|
||||
|--------|----------------|------|
|
||||
| **站主自己** | 僅 **`extra/site-guide.html`** | 頂欄必須 **`data-portal-nav data-portal-nav-all-open`**。腳本**不**對該頁頂欄套用籌備中;**不**對 `<main class="site-guide-main">` 內任何 `<a href>` 改寫。表上連結**全部要點得進**(由站主在 HTML 維護)。 |
|
||||
| **訪客/大家** | **除上列以外**的每一頁 | 頂欄+**頁內所有 `<a href>`**(分頁列、內文等)依 `COMING_SOON_PAGES`、`INDEX_NAV_OPEN_HASHES` 鎖定;未公開者**一律標示「籌備中」**、不可點進。**禁止**在其他頁加 `data-portal-nav-all-open`。 |
|
||||
|
||||
**硬規則(違反=做錯)**
|
||||
|
||||
1. **未經站主逐句同意**:不得從 `COMING_SOON_PAGES` **刪**檔名、不得擴充 `INDEX_NAV_OPEN_HASHES`、不得在 `buildPortalNavInnerHTML` **新增**可點項、不得把籌備中改成真 `href`、不得刪站主已同意列入頂欄的項。
|
||||
2. **「檔案在 repo」≠「可開放導覽」**;不得自行推論。
|
||||
3. **`totoga2/readable.html`(圖文好讀版,檔名 `readable.html`)**、**`variety/variety.html`**:站主**沒有明講對外開放**時,檔名**必須**留在 `COMING_SOON_PAGES`(訪客頂欄不可點進)。要開放時**只**能等站主說了再從 Set 移除。
|
||||
4. **「刪除/拿掉/不要了」**:若未寫明是**單一檔案**、**頂欄某一列**、**整段子選單**還是**整個資料夾**,**一律先問站主**,禁止自行擴大刪除範圍。
|
||||
5. **不確定**是否開放、連哪、是否例外:**先問站主再改**,不要猜。
|
||||
6. 站主說刪 **`某頁#錨點`**:見下方 **§8 頁面錨點刪除**(先改 DOM,再修死鏈;禁止只動導覽)。
|
||||
|
||||
---
|
||||
|
||||
## 1. 必做:把頁面掛進導覽 HTML
|
||||
|
||||
在 **`buildPortalNavInnerHTML`**(`assets/js/portal-nav.js`)裡維護連結:
|
||||
|
||||
- 依資訊架構放在對應的 **`<li>`** 底下;需要子選單時用 **`portal-submenu`**。
|
||||
- `href` 使用**站根相對路徑**(腳本會依當前頁深度加上前綴 `rp`):例如 `` `${rp}variety/variety.html` ``、`` `${rp}index.html#section` ``。
|
||||
- Logo 列:`` `${rp}index.html` `` 與 `` `${rp}assets/images/logov.svg` ``。
|
||||
|
||||
新增或調整完後,所有帶 **`data-portal-nav`** 的 `<nav class="portal-nav">` 都會在載入腳本時被注入同一份 HTML。
|
||||
|
||||
---
|
||||
|
||||
## 1.1 未公開=籌備中(全站一致)
|
||||
|
||||
- **站主沒說對外開放**的頁/錨點:在訪客可見處**不得**留可點的真實 `href`(頂欄、totoga2 分頁列、首頁內文、頁尾 CTA 皆同)。
|
||||
- 腳本標記為 `data-coming-soon="true"` 時:提示與頁內按鈕須讓讀者看見 **「籌備中」**(`portal-nav.js` 的 `COMING_SOON_LABEL`),不是改寫成別的隨機句。
|
||||
- **唯一例外**:`extra/site-guide.html` 的 `main.site-guide-main` 內連結(站主索引自用);該頁頂欄 `data-portal-nav-all-open` 僅影響頂欄,**不**豁免主文以外區塊。
|
||||
|
||||
## 2. 可點 vs「籌備中」:`COMING_SOON_PAGES`
|
||||
|
||||
腳本會對導覽裡的連結做 **`applyComingSoonToNav`**:
|
||||
|
||||
- 若連結的**檔名**(小寫)出現在 **`COMING_SOON_PAGES`** 這個 `Set` 裡,該連結會被改成 **`href="#"`**、加上 **`data-coming-soon="true"`**,點擊無法前往(顯示隨機籌備中文案)。
|
||||
- **不要出現在 Set 裡**=視為已開放,維持真實 `href`。
|
||||
|
||||
因此:
|
||||
|
||||
| 需求 | 做法 |
|
||||
|------|------|
|
||||
| 新頁要**正式開放** | 寫進 `buildPortalNavInnerHTML`(`assets/js/portal-nav.js`),並**確認檔名不在** `COMING_SOON_PAGES`。若曾暫時關閉,記得從 Set **刪除**該檔名。 |
|
||||
| 新頁先**占位、不開放** | 可選擇:仍寫進導覽,但把檔名**加進** `COMING_SOON_PAGES`;或暫時不要放進導覽。 |
|
||||
|
||||
(目前 Set 內含哪些檔,以 `assets/js/portal-nav.js` 為準;站主明講開放後才從 Set 移除該檔名,例如 `readable.html`。)
|
||||
|
||||
---
|
||||
|
||||
## 3. 首頁錨點:`INDEX_NAV_OPEN_HASHES`
|
||||
|
||||
指向 **`index.html#...`** 的連結,除了檔名判斷外,還會看 **錨點**:
|
||||
|
||||
- 若 `href` 是 `index.html#某錨點`,且該錨點**不在** **`INDEX_NAV_OPEN_HASHES`**,會被當成籌備中(與整頁關閉不同,是「這個錨點未開」)。
|
||||
- 新增首頁區塊且要從導覽直達時:在 **`INDEX_NAV_OPEN_HASHES`** 加上對應字串,例如 `"#story"`(**僅在使用者要求開放該錨點時**;若約定維持關閉則勿加入)。
|
||||
|
||||
---
|
||||
|
||||
## 3.1 索引頁頂欄全開(僅 `site-guide.html`)
|
||||
|
||||
- **`extra/site-guide.html`** 的 `<nav>` 使用 **`data-portal-nav data-portal-nav-all-open`** 時:注入後**不套用**籌備中,頂欄連結維持真實 `href`。主文 `main.site-guide-main` 內連結不由腳本改寫。
|
||||
- **禁止**在 `site-guide.html` 以外的頁面使用 `data-portal-nav-all-open`。
|
||||
|
||||
---
|
||||
|
||||
## 4. 新頁面 HTML 檢查清單
|
||||
|
||||
- 在 `<body>` 內適當位置放:
|
||||
|
||||
```html
|
||||
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></nav>
|
||||
```
|
||||
|
||||
- 在 `</body>` 前載入(順序可與現有頁一致):
|
||||
|
||||
```html
|
||||
<script src="assets/js/portal-nav.js"></script>
|
||||
```
|
||||
|
||||
內頁(例如 `extra/`、`fallen/`、`member/`、`yellow-note/`、`variety/` 下)請用相對站根深度,例如:
|
||||
|
||||
```html
|
||||
<script src="../assets/js/portal-nav.js"></script>
|
||||
```
|
||||
|
||||
- 若該頁有 **`assets/js/particles.js`**/共用樣式(`assets/css/style.css` 等),比照其他內頁一併引入即可。
|
||||
|
||||
---
|
||||
|
||||
## 5. 刻意不進導覽的頁面
|
||||
|
||||
若某頁只給自己用(例如站內索引、草稿),**不要**寫進 `buildPortalNavInnerHTML` 即可;不必改 `COMING_SOON_PAGES`。
|
||||
|
||||
---
|
||||
|
||||
## 6. 改完請自檢
|
||||
|
||||
1. 從導覽點進新頁是否正常。
|
||||
2. 若應為開放頁,確認不會變成「尚無開放」、不會被改成 `href="#"`。
|
||||
3. 若為首頁錨點,確認已加入 `INDEX_NAV_OPEN_HASHES`(若有需要)。
|
||||
|
||||
---
|
||||
|
||||
## 7. 頁面錨點刪除(`某頁.html#id`)
|
||||
|
||||
指該 HTML 裡 **`id="…"` 的那一區**/`<section>`,不是刪整檔、不是刪資料夾、不是刪頂欄整段「全員發瘋」,也不是擅自改 `COMING_SOON_PAGES`(除非原句一併交代)。
|
||||
|
||||
1. **先**在目標頁拿掉該 DOM。
|
||||
2. **再**修仍指向死錨的 `href`(最小必要)。
|
||||
3. **禁止**只改 `portal-nav.js`/`site-guide.html` 卻不刪頁內區塊。
|
||||
|
||||
錨點拿掉後,書籤網址列仍可能顯示 `#…`,不代表 DOM 還在。header 大標 ≠ 已刪的 `#id` 區塊。「刪除」範圍不清 → **先問**。
|
||||
|
||||
## 名詞
|
||||
|
||||
- **頂欄**:`portal-nav.js` 注入的 `<nav class="portal-nav" data-portal-nav>`。
|
||||
- **全站索引**:`extra/site-guide.html`(可列草稿;**不等於**頂欄要掛)。
|
||||
- **程式真值**:`assets/js/portal-nav.js`(`COMING_SOON_LABEL`=「籌備中」)。
|
||||
---
|
||||
description: 全站導覽與籌備中(portal-nav.js、site-guide、開放邊界、刪錨點)
|
||||
alwaysApply: true
|
||||
---
|
||||
|
||||
# 【全站導覽邏輯】portal-nav.js・籌備中控制・site-guide 例外
|
||||
|
||||
之後**每新增一個要上線、可點的 HTML 頁面**,請一併完成導覽更新;規則都集中在 **`assets/js/portal-nav.js`**。
|
||||
|
||||
---
|
||||
|
||||
## 0. 兩個世界(最高優先,實作前必讀)
|
||||
|
||||
| 誰在看 | 哪一頁/哪塊 | 行為 |
|
||||
|--------|----------------|------|
|
||||
| **站主自己** | 僅 **`extra/site-guide.html`** | 頂欄必須 **`data-portal-nav data-portal-nav-all-open`**。腳本**不**對該頁頂欄套用籌備中;**不**對 `<main class="site-guide-main">` 內任何 `<a href>` 改寫。表上連結**全部要點得進**(由站主在 HTML 維護)。 |
|
||||
| **訪客/大家** | **除上列以外**的每一頁 | 頂欄+**頁內所有 `<a href>`**(分頁列、內文等)依 `COMING_SOON_PAGES`、`INDEX_NAV_OPEN_HASHES` 鎖定;未公開者**一律標示「籌備中」**、不可點進。**禁止**在其他頁加 `data-portal-nav-all-open`。 |
|
||||
|
||||
**硬規則(違反=做錯)**
|
||||
|
||||
1. **未經站主逐句同意**:不得從 `COMING_SOON_PAGES` **刪**檔名、不得擴充 `INDEX_NAV_OPEN_HASHES`、不得在 `buildPortalNavInnerHTML` **新增**可點項、不得把籌備中改成真 `href`、不得刪站主已同意列入頂欄的項。
|
||||
2. **「檔案在 repo」≠「可開放導覽」**;不得自行推論。
|
||||
3. **`totoga2/readable.html`(圖文好讀版,檔名 `readable.html`)**、**`variety/variety.html`**:站主**沒有明講對外開放**時,檔名**必須**留在 `COMING_SOON_PAGES`(訪客頂欄不可點進)。要開放時**只**能等站主說了再從 Set 移除。
|
||||
4. **「刪除/拿掉/不要了」**:若未寫明是**單一檔案**、**頂欄某一列**、**整段子選單**還是**整個資料夾**,**一律先問站主**,禁止自行擴大刪除範圍。
|
||||
5. **不確定**是否開放、連哪、是否例外:**先問站主再改**,不要猜。
|
||||
6. 站主說刪 **`某頁#錨點`**:見下方 **§8 頁面錨點刪除**(先改 DOM,再修死鏈;禁止只動導覽)。
|
||||
|
||||
---
|
||||
|
||||
## 1. 必做:把頁面掛進導覽 HTML
|
||||
|
||||
在 **`buildPortalNavInnerHTML`**(`assets/js/portal-nav.js`)裡維護連結:
|
||||
|
||||
- 依資訊架構放在對應的 **`<li>`** 底下;需要子選單時用 **`portal-submenu`**。
|
||||
- `href` 使用**站根相對路徑**(腳本會依當前頁深度加上前綴 `rp`):例如 `` `${rp}variety/variety.html` ``、`` `${rp}index.html#section` ``。
|
||||
- Logo 列:`` `${rp}index.html` `` 與 `` `${rp}assets/images/logov.svg` ``。
|
||||
|
||||
新增或調整完後,所有帶 **`data-portal-nav`** 的 `<nav class="portal-nav">` 都會在載入腳本時被注入同一份 HTML。
|
||||
|
||||
---
|
||||
|
||||
## 1.1 未公開=籌備中(全站一致)
|
||||
|
||||
- **站主沒說對外開放**的頁/錨點:在訪客可見處**不得**留可點的真實 `href`(頂欄、totoga2 分頁列、首頁內文、頁尾 CTA 皆同)。
|
||||
- 腳本標記為 `data-coming-soon="true"` 時:提示與頁內按鈕須讓讀者看見 **「籌備中」**(`portal-nav.js` 的 `COMING_SOON_LABEL`),不是改寫成別的隨機句。
|
||||
- **唯一例外**:`extra/site-guide.html` 的 `main.site-guide-main` 內連結(站主索引自用);該頁頂欄 `data-portal-nav-all-open` 僅影響頂欄,**不**豁免主文以外區塊。
|
||||
|
||||
## 2. 可點 vs「籌備中」:`COMING_SOON_PAGES`
|
||||
|
||||
腳本會對導覽裡的連結做 **`applyComingSoonToNav`**:
|
||||
|
||||
- 若連結的**檔名**(小寫)出現在 **`COMING_SOON_PAGES`** 這個 `Set` 裡,該連結會被改成 **`href="#"`**、加上 **`data-coming-soon="true"`**,點擊無法前往(顯示隨機籌備中文案)。
|
||||
- **不要出現在 Set 裡**=視為已開放,維持真實 `href`。
|
||||
|
||||
因此:
|
||||
|
||||
| 需求 | 做法 |
|
||||
|------|------|
|
||||
| 新頁要**正式開放** | 寫進 `buildPortalNavInnerHTML`(`assets/js/portal-nav.js`),並**確認檔名不在** `COMING_SOON_PAGES`。若曾暫時關閉,記得從 Set **刪除**該檔名。 |
|
||||
| 新頁先**占位、不開放** | 可選擇:仍寫進導覽,但把檔名**加進** `COMING_SOON_PAGES`;或暫時不要放進導覽。 |
|
||||
|
||||
(目前 Set 內含哪些檔,以 `assets/js/portal-nav.js` 為準;站主明講開放後才從 Set 移除該檔名,例如 `readable.html`。)
|
||||
|
||||
---
|
||||
|
||||
## 3. 首頁錨點:`INDEX_NAV_OPEN_HASHES`
|
||||
|
||||
指向 **`index.html#...`** 的連結,除了檔名判斷外,還會看 **錨點**:
|
||||
|
||||
- 若 `href` 是 `index.html#某錨點`,且該錨點**不在** **`INDEX_NAV_OPEN_HASHES`**,會被當成籌備中(與整頁關閉不同,是「這個錨點未開」)。
|
||||
- 新增首頁區塊且要從導覽直達時:在 **`INDEX_NAV_OPEN_HASHES`** 加上對應字串,例如 `"#story"`(**僅在使用者要求開放該錨點時**;若約定維持關閉則勿加入)。
|
||||
|
||||
---
|
||||
|
||||
## 3.1 索引頁頂欄全開(僅 `site-guide.html`)
|
||||
|
||||
- **`extra/site-guide.html`** 的 `<nav>` 使用 **`data-portal-nav data-portal-nav-all-open`** 時:注入後**不套用**籌備中,頂欄連結維持真實 `href`。主文 `main.site-guide-main` 內連結不由腳本改寫。
|
||||
- **禁止**在 `site-guide.html` 以外的頁面使用 `data-portal-nav-all-open`。
|
||||
|
||||
---
|
||||
|
||||
## 4. 新頁面 HTML 檢查清單
|
||||
|
||||
- 在 `<body>` 內適當位置放:
|
||||
|
||||
```html
|
||||
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></nav>
|
||||
```
|
||||
|
||||
- 在 `</body>` 前載入(順序可與現有頁一致):
|
||||
|
||||
```html
|
||||
<script src="assets/js/portal-nav.js"></script>
|
||||
```
|
||||
|
||||
內頁(例如 `extra/`、`fallen/`、`member/`、`yellow-note/`、`variety/` 下)請用相對站根深度,例如:
|
||||
|
||||
```html
|
||||
<script src="../assets/js/portal-nav.js"></script>
|
||||
```
|
||||
|
||||
- 若該頁有 **`assets/js/particles.js`**/共用樣式(`assets/css/style.css` 等),比照其他內頁一併引入即可。
|
||||
|
||||
---
|
||||
|
||||
## 5. 刻意不進導覽的頁面
|
||||
|
||||
若某頁只給自己用(例如站內索引、草稿),**不要**寫進 `buildPortalNavInnerHTML` 即可;不必改 `COMING_SOON_PAGES`。
|
||||
|
||||
---
|
||||
|
||||
## 6. 改完請自檢
|
||||
|
||||
1. 從導覽點進新頁是否正常。
|
||||
2. 若應為開放頁,確認不會變成「尚無開放」、不會被改成 `href="#"`。
|
||||
3. 若為首頁錨點,確認已加入 `INDEX_NAV_OPEN_HASHES`(若有需要)。
|
||||
|
||||
---
|
||||
|
||||
## 7. 頁面錨點刪除(`某頁.html#id`)
|
||||
|
||||
指該 HTML 裡 **`id="…"` 的那一區**/`<section>`,不是刪整檔、不是刪資料夾、不是刪頂欄整段「全員發瘋」,也不是擅自改 `COMING_SOON_PAGES`(除非原句一併交代)。
|
||||
|
||||
1. **先**在目標頁拿掉該 DOM。
|
||||
2. **再**修仍指向死錨的 `href`(最小必要)。
|
||||
3. **禁止**只改 `portal-nav.js`/`site-guide.html` 卻不刪頁內區塊。
|
||||
|
||||
錨點拿掉後,書籤網址列仍可能顯示 `#…`,不代表 DOM 還在。header 大標 ≠ 已刪的 `#id` 區塊。「刪除」範圍不清 → **先問**。
|
||||
|
||||
## 名詞
|
||||
|
||||
- **頂欄**:`portal-nav.js` 注入的 `<nav class="portal-nav" data-portal-nav>`。
|
||||
- **全站索引**:`extra/site-guide.html`(可列草稿;**不等於**頂欄要掛)。
|
||||
- **程式真值**:`assets/js/portal-nav.js`(`COMING_SOON_LABEL`=「籌備中」)。
|
||||
@@ -1,45 +1,45 @@
|
||||
---
|
||||
description: 全站對讀者文案語調(index body 開頭至 timeline data-era=2016.05)
|
||||
alwaysApply: true
|
||||
---
|
||||
|
||||
# 【文案調性】全站對訪客語感母本與禁止事項
|
||||
|
||||
撰寫或改寫**給訪客看的內文**時,語感對齊母本(站主指定範圍):
|
||||
|
||||
## 母本
|
||||
|
||||
**檔案** `index.html`:`<body>` 起 → `#timeline` 內 **`article[data-era="2016.05"]` 全文止**(含錨點句)。
|
||||
|
||||
| 區塊 | 說明 |
|
||||
|------|------|
|
||||
| `header#origin` | Hero |
|
||||
| `nav.portal-nav` | 頂欄 |
|
||||
| `#start` | 入坑 |
|
||||
| `#mission` | 初衷 |
|
||||
| `#timeline` | 至 1997 → 2000 → 2016 → **2016.05** |
|
||||
|
||||
**不納入** 2016.05 之後的 timeline 與 body 後段。
|
||||
|
||||
## 錨點句(2016.05)
|
||||
|
||||
> 原來大家只是換個方式一起變老,這份情誼早已超越了表演。
|
||||
|
||||
須承接入坑 → 初衷 → 四節時間軸,勿只複誦此句。
|
||||
|
||||
## 語感
|
||||
|
||||
站主 2016 入坑、藝廊式創作;盛世 → 休止 → 合體 → 落地。溫柔、具體、遺憾與釋懷並寫。
|
||||
|
||||
## 避免
|
||||
|
||||
- 只抄 timeline 末段或錨點句。
|
||||
- 2016.05 之後當母本。
|
||||
- 讀者向技術說明(除非站主明講)。
|
||||
- 單頁 intro 硬拼整條首頁時間軸;該頁先說**該頁主題**(如六六歌2 電子書),語感對齊即可。
|
||||
|
||||
## 六六歌2 單頁 intro
|
||||
|
||||
- 採用版見 `totoga2/ebook.html`(「四月那場重逢…」)。
|
||||
- 勿 FlipHTML5/PDF 操作說明。
|
||||
- 四入口順序:**時間軸 → 電子書 → 圖文好讀版 → 影片**。
|
||||
---
|
||||
description: 全站對讀者文案語調(index body 開頭至 timeline data-era=2016.05)
|
||||
alwaysApply: true
|
||||
---
|
||||
|
||||
# 【文案調性】全站對訪客語感母本與禁止事項
|
||||
|
||||
撰寫或改寫**給訪客看的內文**時,語感對齊母本(站主指定範圍):
|
||||
|
||||
## 母本
|
||||
|
||||
**檔案** `index.html`:`<body>` 起 → `#timeline` 內 **`article[data-era="2016.05"]` 全文止**(含錨點句)。
|
||||
|
||||
| 區塊 | 說明 |
|
||||
|------|------|
|
||||
| `header#origin` | Hero |
|
||||
| `nav.portal-nav` | 頂欄 |
|
||||
| `#start` | 入坑 |
|
||||
| `#mission` | 初衷 |
|
||||
| `#timeline` | 至 1997 → 2000 → 2016 → **2016.05** |
|
||||
|
||||
**不納入** 2016.05 之後的 timeline 與 body 後段。
|
||||
|
||||
## 錨點句(2016.05)
|
||||
|
||||
> 原來大家只是換個方式一起變老,這份情誼早已超越了表演。
|
||||
|
||||
須承接入坑 → 初衷 → 四節時間軸,勿只複誦此句。
|
||||
|
||||
## 語感
|
||||
|
||||
站主 2016 入坑、藝廊式創作;盛世 → 休止 → 合體 → 落地。溫柔、具體、遺憾與釋懷並寫。
|
||||
|
||||
## 避免
|
||||
|
||||
- 只抄 timeline 末段或錨點句。
|
||||
- 2016.05 之後當母本。
|
||||
- 讀者向技術說明(除非站主明講)。
|
||||
- 單頁 intro 硬拼整條首頁時間軸;該頁先說**該頁主題**(如六六歌2 電子書),語感對齊即可。
|
||||
|
||||
## 六六歌2 單頁 intro
|
||||
|
||||
- 採用版見 `totoga2/ebook.html`(「四月那場重逢…」)。
|
||||
- 勿 FlipHTML5/PDF 操作說明。
|
||||
- 四入口順序:**時間軸 → 電子書 → 圖文好讀版 → 影片**。
|
||||
@@ -1,136 +1,136 @@
|
||||
# 變更檢查清單(工作區 vs `HEAD`)
|
||||
|
||||
> **說明:** 此為對話當初「第一批」完整筆記存檔(五檔:`albums`(原 `archive`)/`assets/css/index.css`/`index.html`/`assets/css/style.css`/`assets/js/portal-nav`)。**目前工作區是否仍為下列每一項,請以 `git diff` 與實際檔案為準**,本文不作為程式真值來源。
|
||||
|
||||
本文依 **`git diff`** 對照 **`HEAD`** 整理,方便逐項核對;不含未在本 diff 出現之檔案或臆測內容。
|
||||
|
||||
**涉及檔案(5)**:`albums/albums.html`、`assets/css/index.css`、`index.html`、`assets/js/portal-nav.js`、`assets/css/style.css`
|
||||
**統計**:以 `git diff --stat` 為準(以下內容對應該批變更初版筆記)。
|
||||
|
||||
---
|
||||
|
||||
## 1. `albums/albums.html`
|
||||
|
||||
### 目的
|
||||
|
||||
- 年表區塊(「啟動新篇章」「輝煌全盛期」)每一資料列:**點列上非連結區域**時,於新分頁開對應 **Spotify 專輯**。
|
||||
- 列內既有 `<a>`(本站 `extra/lyrics.html`、`concert/concert.html`、`albums/albums.html#classic`)維持原行為。
|
||||
|
||||
### 標記與無障礙
|
||||
|
||||
每一列 `<tr>` 增加:
|
||||
|
||||
| 屬性 | 說明 |
|
||||
|------|------|
|
||||
| `class="archive-row-spotify"` | 供腳本與樣式選取 |
|
||||
| `tabindex="0"` | 鍵盤可聚焦列 |
|
||||
| `data-spotify-url="https://open.spotify.com/album/…"` | 要開啟的專輯網址 |
|
||||
| `aria-label="…"` | 螢幕閱讀器簡述 |
|
||||
|
||||
### Spotify 連結對照(請自行點連結確認標題是否仍正確)
|
||||
|
||||
| 區塊 | 年份/列語意 | `data-spotify-url`(專輯頁) |
|
||||
|------|----------------|------------------------------|
|
||||
| 啟動新篇章 | 2016 數位單曲(THREE WORDS) | `https://open.spotify.com/album/1Dijv8G0wnCN8PzFZoC8bN` |
|
||||
| 啟動新篇章 | 2017 ANOTHER LIGHT | `https://open.spotify.com/album/5f2LzIFxljQF4FH7w3rXcQ` |
|
||||
| 啟動新篇章 | 2020 ALL FOR YOU | `https://open.spotify.com/album/7vqIRL00YfTtuO0sSAK3Uv` |
|
||||
| 輝煌全盛期 | 1997 學園別曲(School Byeolgok) | `https://open.spotify.com/album/18P1aqSLQA9WdNljjEhv9q` |
|
||||
| 輝煌全盛期 | 1998 Road Fighter | `https://open.spotify.com/album/08TW1bmGzSg172Db8C2Bde` |
|
||||
| 輝煌全盛期 | 1999 Com' Back | `https://open.spotify.com/album/3XWtqLXDZycu7Q0BGofhiq` |
|
||||
|
||||
### 內嵌腳本(`</body>` 前,`assets/js/portal-nav.js` 之後)
|
||||
|
||||
- `querySelectorAll('tr.archive-row-spotify[data-spotify-url]')` 綁定:
|
||||
- **click**:若 `e.target.closest('a')` 則不處理;否則 `window.open(url, '_blank', 'noopener,noreferrer')`
|
||||
- **keydown**:僅 `Enter` / `空白鍵`;同樣避開錨點焦點;`preventDefault()` 後同上開新分頁
|
||||
|
||||
---
|
||||
|
||||
## 2. `assets/css/index.css`
|
||||
|
||||
### 新增選擇器(僅作用於 `.archive-discography` 內)
|
||||
|
||||
| 規則 | 效果 |
|
||||
|------|------|
|
||||
| `tbody tr.archive-row-spotify` | `cursor: pointer` |
|
||||
| `tbody tr.archive-row-spotify:hover td` | 淡黃底 `rgba(255, 204, 0, 0.06)` |
|
||||
| `tbody tr.archive-row-spotify:focus-visible` | 黃色外框約 2px、`outline-offset: -2px` |
|
||||
|
||||
---
|
||||
|
||||
## 3. `index.html`
|
||||
|
||||
### 變更位置
|
||||
|
||||
- 時間軸/故事區:**「傳奇回歸:重逢的感動合體」**那一段(`data-era="2016"`)。
|
||||
|
||||
### 具體修改
|
||||
|
||||
1. `<article class="story-node">` 追加 modifier:`story-node--ebook-ssg2`。
|
||||
2. 在該篇 `<p>…</p>` 之後新增:
|
||||
- `<a href="fallen/totoga2.html#ebook" class="timeline-ebook-cta">`
|
||||
- Font Awesome:`fa-solid fa-hand-pointer`(`aria-hidden="true"`)
|
||||
- 文案:「點這裡翻開《六六歌2》紀實電子書」
|
||||
|
||||
### 相依性(請檢查)
|
||||
|
||||
- 頁面須已載入 Font Awesome(與現有 `<link>` 一致),否則圖示不顯示。
|
||||
- `fallen/totoga2.html` 須存在;`assets/js/totoga2.js` 會辨識網址列 `#ebook` 並切換至電子書模式。
|
||||
|
||||
---
|
||||
|
||||
## 4. `assets/css/style.css`
|
||||
|
||||
### 區塊註解
|
||||
|
||||
`/* 跨時空軌跡:2016 六六歌節點 — 強調電子書 CTA */`
|
||||
|
||||
### 新增樣式摘要
|
||||
|
||||
| 選擇器 | 用途 |
|
||||
|--------|------|
|
||||
| `.merged-storyline .story-node.story-node--ebook-ssg2` | 2016 卡片邊框、陰影、淺黃漸層背景 |
|
||||
| `.merged-storyline .story-node.story-node--ebook-ssg2 p:last-of-type` | 末段 `<p>` 下緣縮排,預留按鈕間距 |
|
||||
| `.merged-storyline .timeline-ebook-cta` | 膠囊按鈕(flex、字重、黃色漸層、圓角、`hover` 上移與陰影) |
|
||||
| `.merged-storyline .timeline-ebook-cta:focus-visible` | 鍵盤焦點外框 |
|
||||
| `.merged-storyline .timeline-ebook-cta .fa-hand-pointer` | 略放大 + 動畫 `timeline-finger-nudge` |
|
||||
| `@keyframes timeline-finger-nudge` | 輕微位移循環 |
|
||||
| `@media (prefers-reduced-motion: reduce)` | 關閉手指動畫 |
|
||||
|
||||
**注意**:樣式皆掛在 `.merged-storyline` 底下,請確認首頁時間軌 DOM 仍使用 `.merged-storyline` 包住對應節點,否則樣式不會套用。
|
||||
|
||||
---
|
||||
|
||||
## 5. `assets/js/portal-nav.js`
|
||||
|
||||
### 目的
|
||||
|
||||
- **隱藏**導覽中「消失的真相」(`sunghoon.html`)整個頂層 `<li>`+子選單,且**不以 `//` 寫在 HTML 模板字串內**(避免字面文字注入 `innerHTML`)。
|
||||
|
||||
### 實作
|
||||
|
||||
- 新增常數:`const SHOW_NAV_SUNGHOON = false;`
|
||||
- 將該段 `<li>…</li>` 包在 template literal 插值:
|
||||
`${SHOW_NAV_SUNGHOON ? \` … \` : ''}`
|
||||
- 簡短註解說明為何不可用 `//` 註解模板內 HTML。
|
||||
|
||||
### 還原方式
|
||||
|
||||
- 將 `SHOW_NAV_SUNGHOON` 改為 `true` 即可重新顯示該區塊。
|
||||
|
||||
---
|
||||
|
||||
## 建議檢查步驟(逐項勾選)
|
||||
|
||||
1. **`albums/albums.html`**:每列空白處/封面/年份點擊 → 新分頁 Spotify 正確專輯;點列內本站連結 → 仍進本站、不開 Spotify。
|
||||
2. **`albums/albums.html`**:鍵盤 Tab 聚焦列後 Enter/空白 → 開 Spotify;聚焦在 `<a>` 上時 Enter → 遵循連結。
|
||||
3. **`index.html` + `assets/css/style.css`**:2016 卡片外觀與 CTA 按鈕、`hover`、`focus-visible`、縮減動態偏好設定下手勢動畫關閉。
|
||||
4. **`assets/js/portal-nav.js`**:全站注入後選單無「消失的真相」;改 `true` 後該項回來。
|
||||
5. **跨頁**:任意頁載入 `assets/js/portal-nav.js` 後行為一致。
|
||||
|
||||
---
|
||||
|
||||
## 備註
|
||||
|
||||
- Spotify 專輯 ID 會隨平台重新發行/區域而變動;若連結失效請重新對照官方頁面更新 `data-spotify-url`。
|
||||
- 若你要把「檢查清單」與 git 提交對齊,可在提交前再跑一次:`git diff` 確認與本文及實際檔案一致。
|
||||
# 變更檢查清單(工作區 vs `HEAD`)
|
||||
|
||||
> **說明:** 此為對話當初「第一批」完整筆記存檔(五檔:`albums`(原 `archive`)/`assets/css/index.css`/`index.html`/`assets/css/style.css`/`assets/js/portal-nav`)。**目前工作區是否仍為下列每一項,請以 `git diff` 與實際檔案為準**,本文不作為程式真值來源。
|
||||
|
||||
本文依 **`git diff`** 對照 **`HEAD`** 整理,方便逐項核對;不含未在本 diff 出現之檔案或臆測內容。
|
||||
|
||||
**涉及檔案(5)**:`albums/albums.html`、`assets/css/index.css`、`index.html`、`assets/js/portal-nav.js`、`assets/css/style.css`
|
||||
**統計**:以 `git diff --stat` 為準(以下內容對應該批變更初版筆記)。
|
||||
|
||||
---
|
||||
|
||||
## 1. `albums/albums.html`
|
||||
|
||||
### 目的
|
||||
|
||||
- 年表區塊(「啟動新篇章」「輝煌全盛期」)每一資料列:**點列上非連結區域**時,於新分頁開對應 **Spotify 專輯**。
|
||||
- 列內既有 `<a>`(本站 `extra/lyrics.html`、`concert/concert.html`、`albums/albums.html#classic`)維持原行為。
|
||||
|
||||
### 標記與無障礙
|
||||
|
||||
每一列 `<tr>` 增加:
|
||||
|
||||
| 屬性 | 說明 |
|
||||
|------|------|
|
||||
| `class="archive-row-spotify"` | 供腳本與樣式選取 |
|
||||
| `tabindex="0"` | 鍵盤可聚焦列 |
|
||||
| `data-spotify-url="https://open.spotify.com/album/…"` | 要開啟的專輯網址 |
|
||||
| `aria-label="…"` | 螢幕閱讀器簡述 |
|
||||
|
||||
### Spotify 連結對照(請自行點連結確認標題是否仍正確)
|
||||
|
||||
| 區塊 | 年份/列語意 | `data-spotify-url`(專輯頁) |
|
||||
|------|----------------|------------------------------|
|
||||
| 啟動新篇章 | 2016 數位單曲(THREE WORDS) | `https://open.spotify.com/album/1Dijv8G0wnCN8PzFZoC8bN` |
|
||||
| 啟動新篇章 | 2017 ANOTHER LIGHT | `https://open.spotify.com/album/5f2LzIFxljQF4FH7w3rXcQ` |
|
||||
| 啟動新篇章 | 2020 ALL FOR YOU | `https://open.spotify.com/album/7vqIRL00YfTtuO0sSAK3Uv` |
|
||||
| 輝煌全盛期 | 1997 學園別曲(School Byeolgok) | `https://open.spotify.com/album/18P1aqSLQA9WdNljjEhv9q` |
|
||||
| 輝煌全盛期 | 1998 Road Fighter | `https://open.spotify.com/album/08TW1bmGzSg172Db8C2Bde` |
|
||||
| 輝煌全盛期 | 1999 Com' Back | `https://open.spotify.com/album/3XWtqLXDZycu7Q0BGofhiq` |
|
||||
|
||||
### 內嵌腳本(`</body>` 前,`assets/js/portal-nav.js` 之後)
|
||||
|
||||
- `querySelectorAll('tr.archive-row-spotify[data-spotify-url]')` 綁定:
|
||||
- **click**:若 `e.target.closest('a')` 則不處理;否則 `window.open(url, '_blank', 'noopener,noreferrer')`
|
||||
- **keydown**:僅 `Enter` / `空白鍵`;同樣避開錨點焦點;`preventDefault()` 後同上開新分頁
|
||||
|
||||
---
|
||||
|
||||
## 2. `assets/css/index.css`
|
||||
|
||||
### 新增選擇器(僅作用於 `.archive-discography` 內)
|
||||
|
||||
| 規則 | 效果 |
|
||||
|------|------|
|
||||
| `tbody tr.archive-row-spotify` | `cursor: pointer` |
|
||||
| `tbody tr.archive-row-spotify:hover td` | 淡黃底 `rgba(255, 204, 0, 0.06)` |
|
||||
| `tbody tr.archive-row-spotify:focus-visible` | 黃色外框約 2px、`outline-offset: -2px` |
|
||||
|
||||
---
|
||||
|
||||
## 3. `index.html`
|
||||
|
||||
### 變更位置
|
||||
|
||||
- 時間軸/故事區:**「傳奇回歸:重逢的感動合體」**那一段(`data-era="2016"`)。
|
||||
|
||||
### 具體修改
|
||||
|
||||
1. `<article class="story-node">` 追加 modifier:`story-node--ebook-ssg2`。
|
||||
2. 在該篇 `<p>…</p>` 之後新增:
|
||||
- `<a href="fallen/totoga2.html#ebook" class="timeline-ebook-cta">`
|
||||
- Font Awesome:`fa-solid fa-hand-pointer`(`aria-hidden="true"`)
|
||||
- 文案:「點這裡翻開《六六歌2》紀實電子書」
|
||||
|
||||
### 相依性(請檢查)
|
||||
|
||||
- 頁面須已載入 Font Awesome(與現有 `<link>` 一致),否則圖示不顯示。
|
||||
- `fallen/totoga2.html` 須存在;`assets/js/totoga2.js` 會辨識網址列 `#ebook` 並切換至電子書模式。
|
||||
|
||||
---
|
||||
|
||||
## 4. `assets/css/style.css`
|
||||
|
||||
### 區塊註解
|
||||
|
||||
`/* 跨時空軌跡:2016 六六歌節點 — 強調電子書 CTA */`
|
||||
|
||||
### 新增樣式摘要
|
||||
|
||||
| 選擇器 | 用途 |
|
||||
|--------|------|
|
||||
| `.merged-storyline .story-node.story-node--ebook-ssg2` | 2016 卡片邊框、陰影、淺黃漸層背景 |
|
||||
| `.merged-storyline .story-node.story-node--ebook-ssg2 p:last-of-type` | 末段 `<p>` 下緣縮排,預留按鈕間距 |
|
||||
| `.merged-storyline .timeline-ebook-cta` | 膠囊按鈕(flex、字重、黃色漸層、圓角、`hover` 上移與陰影) |
|
||||
| `.merged-storyline .timeline-ebook-cta:focus-visible` | 鍵盤焦點外框 |
|
||||
| `.merged-storyline .timeline-ebook-cta .fa-hand-pointer` | 略放大 + 動畫 `timeline-finger-nudge` |
|
||||
| `@keyframes timeline-finger-nudge` | 輕微位移循環 |
|
||||
| `@media (prefers-reduced-motion: reduce)` | 關閉手指動畫 |
|
||||
|
||||
**注意**:樣式皆掛在 `.merged-storyline` 底下,請確認首頁時間軌 DOM 仍使用 `.merged-storyline` 包住對應節點,否則樣式不會套用。
|
||||
|
||||
---
|
||||
|
||||
## 5. `assets/js/portal-nav.js`
|
||||
|
||||
### 目的
|
||||
|
||||
- **隱藏**導覽中「消失的真相」(`sunghoon.html`)整個頂層 `<li>`+子選單,且**不以 `//` 寫在 HTML 模板字串內**(避免字面文字注入 `innerHTML`)。
|
||||
|
||||
### 實作
|
||||
|
||||
- 新增常數:`const SHOW_NAV_SUNGHOON = false;`
|
||||
- 將該段 `<li>…</li>` 包在 template literal 插值:
|
||||
`${SHOW_NAV_SUNGHOON ? \` … \` : ''}`
|
||||
- 簡短註解說明為何不可用 `//` 註解模板內 HTML。
|
||||
|
||||
### 還原方式
|
||||
|
||||
- 將 `SHOW_NAV_SUNGHOON` 改為 `true` 即可重新顯示該區塊。
|
||||
|
||||
---
|
||||
|
||||
## 建議檢查步驟(逐項勾選)
|
||||
|
||||
1. **`albums/albums.html`**:每列空白處/封面/年份點擊 → 新分頁 Spotify 正確專輯;點列內本站連結 → 仍進本站、不開 Spotify。
|
||||
2. **`albums/albums.html`**:鍵盤 Tab 聚焦列後 Enter/空白 → 開 Spotify;聚焦在 `<a>` 上時 Enter → 遵循連結。
|
||||
3. **`index.html` + `assets/css/style.css`**:2016 卡片外觀與 CTA 按鈕、`hover`、`focus-visible`、縮減動態偏好設定下手勢動畫關閉。
|
||||
4. **`assets/js/portal-nav.js`**:全站注入後選單無「消失的真相」;改 `true` 後該項回來。
|
||||
5. **跨頁**:任意頁載入 `assets/js/portal-nav.js` 後行為一致。
|
||||
|
||||
---
|
||||
|
||||
## 備註
|
||||
|
||||
- Spotify 專輯 ID 會隨平台重新發行/區域而變動;若連結失效請重新對照官方頁面更新 `data-spotify-url`。
|
||||
- 若你要把「檢查清單」與 git 提交對齊,可在提交前再跑一次:`git diff` 確認與本文及實際檔案一致。
|
||||
@@ -1,29 +1,29 @@
|
||||
# 站內資料夾與頂欄選單對照
|
||||
|
||||
與 `assets/js/portal-nav.js` 的 `buildPortalNavInnerHTML` 一致;路徑變更時請同步改導覽與 `extra/site-guide.html`。
|
||||
|
||||
| 頂欄主項/子項 | 路徑(站根相對) |
|
||||
|----------------|------------------|
|
||||
| 淪陷瞬間 · 初心與軌跡 | `index.html` |
|
||||
| 傳奇的轉折 | `fallen/totoga2.html` |
|
||||
| 全員發瘋 · 隊長帶弟弟 | `variety/variety.html`(錨點 `#variety`) |
|
||||
| 全員發瘋 · 各自暴走 · 新西遊記 | `variety/NJTW/NJTW5.html` |
|
||||
| 完整的六顆 | `member/member.html` |
|
||||
| 現場的震撼 | `concert/concert.html` |
|
||||
| 黃色留聲機 | `albums/albums.html` |
|
||||
| Yellow Note · 視覺進化論 | `yellow-note/minister.html` |
|
||||
| Yellow Note · 聖地巡禮 | `yellow-note/map.html` |
|
||||
|
||||
## 根目錄樹(精簡)
|
||||
|
||||
- `index.html` — 首頁(淪陷瞬間)
|
||||
- `fallen/` — 淪陷子線:六六歌2 整合長頁
|
||||
- `member/` — 成員介紹(六顆水晶)
|
||||
- `concert/`、`albums/` — 與選單同名主題
|
||||
- `yellow-note/` — Yellow Note(minister + map)
|
||||
- `variety/` — 綜藝與 NJTW 子頁
|
||||
- `extra/` — 未掛主欄之草稿、複本、全站索引 `site-guide.html` 等
|
||||
- `assets/` — 共用靜態資源
|
||||
- `docs/sql/` — SQL 練習、計畫(`sql_plan.md`)與 `.sql` 腳本/匯出
|
||||
|
||||
`COMING_SOON_PAGES` 仍以**檔名**(如 `totoga2.html`、`map.html`)判斷,與上層資料夾名無關。
|
||||
# 站內資料夾與頂欄選單對照
|
||||
|
||||
與 `assets/js/portal-nav.js` 的 `buildPortalNavInnerHTML` 一致;路徑變更時請同步改導覽與 `extra/site-guide.html`。
|
||||
|
||||
| 頂欄主項/子項 | 路徑(站根相對) |
|
||||
|----------------|------------------|
|
||||
| 淪陷瞬間 · 初心與軌跡 | `index.html` |
|
||||
| 傳奇的轉折 | `fallen/totoga2.html` |
|
||||
| 全員發瘋 · 隊長帶弟弟 | `variety/variety.html`(錨點 `#variety`) |
|
||||
| 全員發瘋 · 各自暴走 · 新西遊記 | `variety/NJTW/NJTW5.html` |
|
||||
| 完整的六顆 | `member/member.html` |
|
||||
| 現場的震撼 | `concert/concert.html` |
|
||||
| 黃色留聲機 | `albums/albums.html` |
|
||||
| Yellow Note · 視覺進化論 | `yellow-note/minister.html` |
|
||||
| Yellow Note · 聖地巡禮 | `yellow-note/map.html` |
|
||||
|
||||
## 根目錄樹(精簡)
|
||||
|
||||
- `index.html` — 首頁(淪陷瞬間)
|
||||
- `fallen/` — 淪陷子線:六六歌2 整合長頁
|
||||
- `member/` — 成員介紹(六顆水晶)
|
||||
- `concert/`、`albums/` — 與選單同名主題
|
||||
- `yellow-note/` — Yellow Note(minister + map)
|
||||
- `variety/` — 綜藝與 NJTW 子頁
|
||||
- `extra/` — 未掛主欄之草稿、複本、全站索引 `site-guide.html` 等
|
||||
- `assets/` — 共用靜態資源
|
||||
- `docs/sql/` — SQL 練習、計畫(`sql_plan.md`)與 `.sql` 腳本/匯出
|
||||
|
||||
`COMING_SOON_PAGES` 仍以**檔名**(如 `totoga2.html`、`map.html`)判斷,與上層資料夾名無關。
|
||||
@@ -1,38 +1,38 @@
|
||||
|
||||
|
||||
-- 水晶男孩資料庫備份
|
||||
|
||||
-- 1. 建立專輯表
|
||||
CREATE TABLE `albums` (
|
||||
`id` INT AUTO_INCREMENT PRIMARY KEY,
|
||||
`title` VARCHAR(50) NOT NULL,
|
||||
`release_date` DATE
|
||||
);
|
||||
|
||||
-- 2. 建立歌曲表
|
||||
CREATE TABLE `songs` (
|
||||
`id` INT AUTO_INCREMENT PRIMARY KEY,
|
||||
`album_id` INT NOT NULL,
|
||||
`title` VARCHAR(100) NOT NULL
|
||||
);
|
||||
|
||||
-- 3. 匯入專輯資料
|
||||
INSERT INTO `albums` (`id`, `title`, `release_date`) VALUES
|
||||
(1, '學園別曲', '1997-05-14'),
|
||||
(2, 'Welcome To The Sechskies Land', '1997-11-01'),
|
||||
(3, 'Road Fighter', '1998-07-15');
|
||||
|
||||
-- 4. 匯入第一張專輯曲目
|
||||
INSERT INTO `songs` (`album_id`, `title`)
|
||||
VALUES (1, '學園別曲'),
|
||||
(1, '戀情'),
|
||||
(1, '男兒之路(品生品死)'),
|
||||
(1, '確認'),
|
||||
(1, '背叛感'),
|
||||
(1, '請記得好嗎'),
|
||||
(1, 'Walking In The Rain'),
|
||||
(1, 'Dream Comes True'),
|
||||
(1, '愛的宣言'),
|
||||
(1, '一起來吧'),
|
||||
(1, '戀情(Remix)'),
|
||||
|
||||
|
||||
-- 水晶男孩資料庫備份
|
||||
|
||||
-- 1. 建立專輯表
|
||||
CREATE TABLE `albums` (
|
||||
`id` INT AUTO_INCREMENT PRIMARY KEY,
|
||||
`title` VARCHAR(50) NOT NULL,
|
||||
`release_date` DATE
|
||||
);
|
||||
|
||||
-- 2. 建立歌曲表
|
||||
CREATE TABLE `songs` (
|
||||
`id` INT AUTO_INCREMENT PRIMARY KEY,
|
||||
`album_id` INT NOT NULL,
|
||||
`title` VARCHAR(100) NOT NULL
|
||||
);
|
||||
|
||||
-- 3. 匯入專輯資料
|
||||
INSERT INTO `albums` (`id`, `title`, `release_date`) VALUES
|
||||
(1, '學園別曲', '1997-05-14'),
|
||||
(2, 'Welcome To The Sechskies Land', '1997-11-01'),
|
||||
(3, 'Road Fighter', '1998-07-15');
|
||||
|
||||
-- 4. 匯入第一張專輯曲目
|
||||
INSERT INTO `songs` (`album_id`, `title`)
|
||||
VALUES (1, '學園別曲'),
|
||||
(1, '戀情'),
|
||||
(1, '男兒之路(品生品死)'),
|
||||
(1, '確認'),
|
||||
(1, '背叛感'),
|
||||
(1, '請記得好嗎'),
|
||||
(1, 'Walking In The Rain'),
|
||||
(1, 'Dream Comes True'),
|
||||
(1, '愛的宣言'),
|
||||
(1, '一起來吧'),
|
||||
(1, '戀情(Remix)'),
|
||||
(1, '男兒之路(品生品死)(Remix)');
|
||||
@@ -1,98 +1,98 @@
|
||||
# 💎 水晶男孩推廣部:SQL 三日修煉手冊
|
||||
|
||||
> **任務清單 (SOP)**
|
||||
> * style(file): 檔案命名為 .md
|
||||
> * fix(db): 確保最後不帶多餘逗號
|
||||
> * perf(save): 隨手 Ctrl + S 存檔
|
||||
|
||||
---
|
||||
|
||||
## 📅 DAY 1:連連看基礎 (JOIN)
|
||||
**邏輯**:用 album_id 把「歌曲」與「專輯」黏起來。
|
||||
### 1. 傳統連表 (WHERE)
|
||||
```sql
|
||||
SELECT songs.title, albums.title
|
||||
FROM songs, albums
|
||||
WHERE songs.album_id = albums.id
|
||||
ORDER BY songs.id;
|
||||
```
|
||||
|
||||
### 2. 標準內連線 (INNER JOIN)
|
||||
```sql
|
||||
SELECT songs.title, albums.title
|
||||
FROM songs
|
||||
INNER JOIN albums ON songs.album_id = albums.id
|
||||
ORDER BY songs.id;
|
||||
```
|
||||
### 3. 左外連線 (LEFT JOIN)
|
||||
```sql
|
||||
SELECT songs.title, albums.title
|
||||
FROM songs
|
||||
LEFT JOIN albums ON songs.album_id = albums.id;
|
||||
```
|
||||
### 4. 右外連線 (RIGHT JOIN)
|
||||
```
|
||||
SELECT songs.title, albums.title
|
||||
FROM songs
|
||||
RIGHT JOIN albums ON songs.album_id = albums.id;
|
||||
```
|
||||
## 📅 DAY 2:資料美化與彙整
|
||||
**邏輯**:處理空值與統計數量。
|
||||
|
||||
### 1. 處理空值 (IFNULL)
|
||||
```sql
|
||||
SELECT
|
||||
IFNULL(songs.title, '未命名') AS '歌名',
|
||||
IFNULL(albums.title, '未知') AS '專輯'
|
||||
FROM songs
|
||||
RIGHT JOIN albums ON songs.album_id = albums.id;
|
||||
```
|
||||
### 2. 分組統計 (COUNT)
|
||||
```sql
|
||||
SELECT
|
||||
albums.title AS '專輯名稱',
|
||||
COUNT(songs.id) AS '歌曲總數'
|
||||
FROM albums
|
||||
LEFT JOIN songs ON albums.id = songs.album_id
|
||||
GROUP BY albums.id;
|
||||
```
|
||||
## 📅 DAY 3:魔王級子查詢 (Subquery)
|
||||
|
||||
### 1. 巢狀條件查詢
|
||||
```sql
|
||||
SELECT * FROM songs
|
||||
WHERE album_id = (SELECT id FROM albums WHERE title = 'Road Fighter');
|
||||
```
|
||||
-- 在每首歌後面顯示目前所有歌曲 album_id 的平均值(對比用)
|
||||
|
||||
### 2.多表關聯查詢
|
||||
```sql
|
||||
-- 邏輯:同時連三張表(歌曲、專輯、成員)
|
||||
SELECT
|
||||
songs.title AS '歌名',
|
||||
albums.title AS '專輯名稱',
|
||||
albums.release_date AS '發行日期'
|
||||
FROM
|
||||
songs,
|
||||
albums
|
||||
WHERE
|
||||
songs.album_id = albums.id AND
|
||||
albums.id = 1; -- 這裡的 1 代表第一張專輯(對應老師的 dept=1)
|
||||
|
||||
```
|
||||
### 3. 計算式子查詢
|
||||
```sql
|
||||
SELECT
|
||||
title,
|
||||
album_id,
|
||||
(SELECT AVG(album_id) FROM songs) AS '全庫平均編號'
|
||||
FROM
|
||||
songs;
|
||||
```
|
||||
|
||||
|
||||
## 🛠 努比的開發 SOP 筆記
|
||||
- **feat(db)**: 修改語法後先按 `Ctrl + S` 存檔。
|
||||
- **style(code)**: 關鍵字大寫,欄位名小寫。
|
||||
- **fix(db)**: 確保最後一個欄位沒有多餘的逗號。
|
||||
# 💎 水晶男孩推廣部:SQL 三日修煉手冊
|
||||
|
||||
> **任務清單 (SOP)**
|
||||
> * style(file): 檔案命名為 .md
|
||||
> * fix(db): 確保最後不帶多餘逗號
|
||||
> * perf(save): 隨手 Ctrl + S 存檔
|
||||
|
||||
---
|
||||
|
||||
## 📅 DAY 1:連連看基礎 (JOIN)
|
||||
**邏輯**:用 album_id 把「歌曲」與「專輯」黏起來。
|
||||
### 1. 傳統連表 (WHERE)
|
||||
```sql
|
||||
SELECT songs.title, albums.title
|
||||
FROM songs, albums
|
||||
WHERE songs.album_id = albums.id
|
||||
ORDER BY songs.id;
|
||||
```
|
||||
|
||||
### 2. 標準內連線 (INNER JOIN)
|
||||
```sql
|
||||
SELECT songs.title, albums.title
|
||||
FROM songs
|
||||
INNER JOIN albums ON songs.album_id = albums.id
|
||||
ORDER BY songs.id;
|
||||
```
|
||||
### 3. 左外連線 (LEFT JOIN)
|
||||
```sql
|
||||
SELECT songs.title, albums.title
|
||||
FROM songs
|
||||
LEFT JOIN albums ON songs.album_id = albums.id;
|
||||
```
|
||||
### 4. 右外連線 (RIGHT JOIN)
|
||||
```
|
||||
SELECT songs.title, albums.title
|
||||
FROM songs
|
||||
RIGHT JOIN albums ON songs.album_id = albums.id;
|
||||
```
|
||||
## 📅 DAY 2:資料美化與彙整
|
||||
**邏輯**:處理空值與統計數量。
|
||||
|
||||
### 1. 處理空值 (IFNULL)
|
||||
```sql
|
||||
SELECT
|
||||
IFNULL(songs.title, '未命名') AS '歌名',
|
||||
IFNULL(albums.title, '未知') AS '專輯'
|
||||
FROM songs
|
||||
RIGHT JOIN albums ON songs.album_id = albums.id;
|
||||
```
|
||||
### 2. 分組統計 (COUNT)
|
||||
```sql
|
||||
SELECT
|
||||
albums.title AS '專輯名稱',
|
||||
COUNT(songs.id) AS '歌曲總數'
|
||||
FROM albums
|
||||
LEFT JOIN songs ON albums.id = songs.album_id
|
||||
GROUP BY albums.id;
|
||||
```
|
||||
## 📅 DAY 3:魔王級子查詢 (Subquery)
|
||||
|
||||
### 1. 巢狀條件查詢
|
||||
```sql
|
||||
SELECT * FROM songs
|
||||
WHERE album_id = (SELECT id FROM albums WHERE title = 'Road Fighter');
|
||||
```
|
||||
-- 在每首歌後面顯示目前所有歌曲 album_id 的平均值(對比用)
|
||||
|
||||
### 2.多表關聯查詢
|
||||
```sql
|
||||
-- 邏輯:同時連三張表(歌曲、專輯、成員)
|
||||
SELECT
|
||||
songs.title AS '歌名',
|
||||
albums.title AS '專輯名稱',
|
||||
albums.release_date AS '發行日期'
|
||||
FROM
|
||||
songs,
|
||||
albums
|
||||
WHERE
|
||||
songs.album_id = albums.id AND
|
||||
albums.id = 1; -- 這裡的 1 代表第一張專輯(對應老師的 dept=1)
|
||||
|
||||
```
|
||||
### 3. 計算式子查詢
|
||||
```sql
|
||||
SELECT
|
||||
title,
|
||||
album_id,
|
||||
(SELECT AVG(album_id) FROM songs) AS '全庫平均編號'
|
||||
FROM
|
||||
songs;
|
||||
```
|
||||
|
||||
|
||||
## 🛠 努比的開發 SOP 筆記
|
||||
- **feat(db)**: 修改語法後先按 `Ctrl + S` 存檔。
|
||||
- **style(code)**: 關鍵字大寫,欄位名小寫。
|
||||
- **fix(db)**: 確保最後一個欄位沒有多餘的逗號。
|
||||
- **perf(note)**: 執行成功後,截圖貼到你的筆記網站。
|
||||
@@ -1,46 +1,46 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=<div class=" container">
|
||||
<div class="container21">
|
||||
<img src="../assets/images/totoga2/jpg/2023_電子書_無限挑戰六六歌2_final跨頁_頁面_01.jpg" alt="">
|
||||
</div>
|
||||
<div class="container22">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="container31">
|
||||
img[s]
|
||||
</div>
|
||||
<div class="container32">
|
||||
img[s]
|
||||
</div>
|
||||
<div class="container33">
|
||||
img[s]
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="container41">
|
||||
img[s]
|
||||
</div>
|
||||
<div class="container42">
|
||||
img[s]
|
||||
</div>
|
||||
<div class="container43">
|
||||
img[s]
|
||||
</div>
|
||||
<div class="container44">
|
||||
img[s]
|
||||
</div>
|
||||
</div>, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
</body>
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=<div class=" container">
|
||||
<div class="container21">
|
||||
<img src="../assets/images/totoga2/jpg/2023_電子書_無限挑戰六六歌2_final跨頁_頁面_01.jpg" alt="">
|
||||
</div>
|
||||
<div class="container22">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="container31">
|
||||
img[s]
|
||||
</div>
|
||||
<div class="container32">
|
||||
img[s]
|
||||
</div>
|
||||
<div class="container33">
|
||||
img[s]
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="container41">
|
||||
img[s]
|
||||
</div>
|
||||
<div class="container42">
|
||||
img[s]
|
||||
</div>
|
||||
<div class="container43">
|
||||
img[s]
|
||||
</div>
|
||||
<div class="container44">
|
||||
img[s]
|
||||
</div>
|
||||
</div>, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -123,7 +123,7 @@
|
||||
<p>官方應援色 <span class="mark_b">黃色</span> 與粉絲名 <span class="mark_b">YELLOWKIES</span> 依然是他們最堅強的後盾。</p>
|
||||
<p>無論時間過去多久,這六顆水晶永遠閃耀在韓流歷史的天空。</p>
|
||||
<br>
|
||||
<p style="font-size:1.4rem; color:var(--yellow);">「謝謝你們一直陪伴,我們還在這裡。」</p>
|
||||
<p style="font-size:1.4rem; color:var(--color-brand);">「謝謝你們一直陪伴,我們還在這裡。」</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
@@ -1,118 +1,118 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>세 단어 (THREE WORDS) — SECHSKIES</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
<link rel="stylesheet" href="../assets/css/style.css">
|
||||
<link rel="stylesheet" href="../assets/css/lyrics.css">
|
||||
<link rel="stylesheet" href="../assets/css/tablet.css">
|
||||
</head>
|
||||
|
||||
<body class="lyrics-page">
|
||||
<div class="lyrics-layout">
|
||||
<h1>세 단어 (THREE WORDS)</h1>
|
||||
<table class="lyrics-main-table">
|
||||
<tr>
|
||||
<td class="main-left">
|
||||
<iframe width="560" height="315" style="aspect-ratio: 16 / 9; max-width: 100%; height: auto; min-height: 200px;"
|
||||
src="https://www.youtube.com/embed/m7Zt_p9S-yg"
|
||||
title="SECHSKIES - ‘세 단어 (THREE WORDS)’ M/V" allowfullscreen
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
referrerpolicy="strict-origin-when-cross-origin"></iframe>
|
||||
<dl class="songInfo">
|
||||
<dt>Artist</dt>
|
||||
<dd>SECHSKIES</dd>
|
||||
<dt>Album</dt>
|
||||
<dd>2016 Re-ALBUM</dd>
|
||||
<dt>Release Date</dt>
|
||||
<dd>2016년</dd>
|
||||
<dt>Genre</dt>
|
||||
<dd>K-Pop</dd>
|
||||
</dl>
|
||||
</td>
|
||||
<td class="lyrics-text-cell">
|
||||
<p>다신 볼 수 없을 것만 같던<br>
|
||||
그대가 내 앞에 서 있네요<br>
|
||||
지킬 수 있을지 모르며 약속했던<br>
|
||||
그 언젠가가 지금인 거군요<br>
|
||||
단 하루도 널, 널 잊었던 적<br>
|
||||
없다는 말은 거짓말이겠지만<br>
|
||||
그대가 곁에 있지 않을 때 외로웠죠 (외로웠죠)<br>
|
||||
한 순간도 널, 널 잊었던 적<br>
|
||||
없다는 말이 무슨 의미겠어요<br>
|
||||
지금 여기 우리 세 단어면 돼요<br>
|
||||
I just wanna be with you<br>
|
||||
내가 사는 이유<br>
|
||||
다시는 멀리 가지 않을게요<br>
|
||||
I'll always be here for you<br>
|
||||
세월이 지난 후<br>
|
||||
세상이 다시 우릴 갈라놔도<br>
|
||||
떠나야만 해도<br>
|
||||
멀리 있진 않을게요 uh<br>
|
||||
참 멀리 멀리 멀리도 돌아왔네요<br>
|
||||
지독한 세월과 세상에게 수없이 꺾이고 (꺾이고)<br>
|
||||
발밑엔 낙엽이 뒤덮이고 이 야윈 모습이지만<br>
|
||||
여기 여전히 그대 곁에 서있죠<br>
|
||||
I missed you 한 순간도 편히 잠든 적 없어 (없어)<br>
|
||||
잘 지낸 것 같겠지만 I missed you<br>
|
||||
한 순간도 진짜 웃은 적 없어 (없어)<br>
|
||||
한 순간도 널, 널 잊었던 적<br>
|
||||
없다는 말이 무슨 의미겠어요<br>
|
||||
지금 여기 우리 세 단어면 돼요<br>
|
||||
I just wanna be with you<br>
|
||||
내가 사는 이유<br>
|
||||
다시는 멀리 가지 않을게요<br>
|
||||
I'll always be here for you<br>
|
||||
세월이 지난 후<br>
|
||||
세상이 다시 우릴 갈라놔도<br>
|
||||
떠나야만 해도<br>
|
||||
멀리 있진 않을게요<br>
|
||||
시간은 참 무섭게도 가네요<br>
|
||||
붙잡으려 해도 잡히지 않을 거예요<br>
|
||||
언젠가 다시 헤어지게 되어도<br>
|
||||
여기 가까이 서있을게<br>
|
||||
지금 여기 우리<br>
|
||||
I just wanna be with you<br>
|
||||
내가 사는 이유 (miss you baby)<br>
|
||||
다시는 멀리 가지 않을게요 (가지 않을게요)<br>
|
||||
I'll always be here for you<br>
|
||||
세월이 지난 후<br>
|
||||
세상이 다시 우릴 갈라놔도 (우릴 갈라놔도)<br>
|
||||
떠나야만 해도 (떠나야만 해도)<br>
|
||||
멀리 (멀리) 있진 않을게요<br>
|
||||
멀리 있진 않을게<br>
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<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; border: 0; border-radius: 10px; display: block; min-height: 200px;"
|
||||
allowfullscreen loading="lazy"
|
||||
referrerpolicy="no-referrer-when-downgrade"></iframe>
|
||||
</td>
|
||||
<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>
|
||||
<p>
|
||||
<i class="fa-solid fa-map-location-dot"></i> Huiujeong-ro 1-gil, Mapo-gu, Seoul, South Korea<br>
|
||||
<i class="fas fa-globe"></i> <a href="https://www.ygfamily.com/"
|
||||
target="_blank" rel="noopener noreferrer">https://www.ygfamily.com/</a><br>
|
||||
<i class="fas fa-phone"></i> +82231421104
|
||||
</p>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>세 단어 (THREE WORDS) — SECHSKIES</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
<link rel="stylesheet" href="../assets/css/style.css">
|
||||
<link rel="stylesheet" href="../assets/css/lyrics.css">
|
||||
<link rel="stylesheet" href="../assets/css/tablet.css">
|
||||
</head>
|
||||
|
||||
<body class="lyrics-page">
|
||||
<div class="lyrics-layout">
|
||||
<h1>세 단어 (THREE WORDS)</h1>
|
||||
<table class="lyrics-main-table">
|
||||
<tr>
|
||||
<td class="main-left">
|
||||
<iframe width="560" height="315" style="aspect-ratio: 16 / 9; max-width: 100%; height: auto; min-height: 200px;"
|
||||
src="https://www.youtube.com/embed/m7Zt_p9S-yg"
|
||||
title="SECHSKIES - ‘세 단어 (THREE WORDS)’ M/V" allowfullscreen
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
referrerpolicy="strict-origin-when-cross-origin"></iframe>
|
||||
<dl class="songInfo">
|
||||
<dt>Artist</dt>
|
||||
<dd>SECHSKIES</dd>
|
||||
<dt>Album</dt>
|
||||
<dd>2016 Re-ALBUM</dd>
|
||||
<dt>Release Date</dt>
|
||||
<dd>2016년</dd>
|
||||
<dt>Genre</dt>
|
||||
<dd>K-Pop</dd>
|
||||
</dl>
|
||||
</td>
|
||||
<td class="lyrics-text-cell">
|
||||
<p>다신 볼 수 없을 것만 같던<br>
|
||||
그대가 내 앞에 서 있네요<br>
|
||||
지킬 수 있을지 모르며 약속했던<br>
|
||||
그 언젠가가 지금인 거군요<br>
|
||||
단 하루도 널, 널 잊었던 적<br>
|
||||
없다는 말은 거짓말이겠지만<br>
|
||||
그대가 곁에 있지 않을 때 외로웠죠 (외로웠죠)<br>
|
||||
한 순간도 널, 널 잊었던 적<br>
|
||||
없다는 말이 무슨 의미겠어요<br>
|
||||
지금 여기 우리 세 단어면 돼요<br>
|
||||
I just wanna be with you<br>
|
||||
내가 사는 이유<br>
|
||||
다시는 멀리 가지 않을게요<br>
|
||||
I'll always be here for you<br>
|
||||
세월이 지난 후<br>
|
||||
세상이 다시 우릴 갈라놔도<br>
|
||||
떠나야만 해도<br>
|
||||
멀리 있진 않을게요 uh<br>
|
||||
참 멀리 멀리 멀리도 돌아왔네요<br>
|
||||
지독한 세월과 세상에게 수없이 꺾이고 (꺾이고)<br>
|
||||
발밑엔 낙엽이 뒤덮이고 이 야윈 모습이지만<br>
|
||||
여기 여전히 그대 곁에 서있죠<br>
|
||||
I missed you 한 순간도 편히 잠든 적 없어 (없어)<br>
|
||||
잘 지낸 것 같겠지만 I missed you<br>
|
||||
한 순간도 진짜 웃은 적 없어 (없어)<br>
|
||||
한 순간도 널, 널 잊었던 적<br>
|
||||
없다는 말이 무슨 의미겠어요<br>
|
||||
지금 여기 우리 세 단어면 돼요<br>
|
||||
I just wanna be with you<br>
|
||||
내가 사는 이유<br>
|
||||
다시는 멀리 가지 않을게요<br>
|
||||
I'll always be here for you<br>
|
||||
세월이 지난 후<br>
|
||||
세상이 다시 우릴 갈라놔도<br>
|
||||
떠나야만 해도<br>
|
||||
멀리 있진 않을게요<br>
|
||||
시간은 참 무섭게도 가네요<br>
|
||||
붙잡으려 해도 잡히지 않을 거예요<br>
|
||||
언젠가 다시 헤어지게 되어도<br>
|
||||
여기 가까이 서있을게<br>
|
||||
지금 여기 우리<br>
|
||||
I just wanna be with you<br>
|
||||
내가 사는 이유 (miss you baby)<br>
|
||||
다시는 멀리 가지 않을게요 (가지 않을게요)<br>
|
||||
I'll always be here for you<br>
|
||||
세월이 지난 후<br>
|
||||
세상이 다시 우릴 갈라놔도 (우릴 갈라놔도)<br>
|
||||
떠나야만 해도 (떠나야만 해도)<br>
|
||||
멀리 (멀리) 있진 않을게요<br>
|
||||
멀리 있진 않을게<br>
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<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; border: 0; border-radius: 10px; display: block; min-height: 200px;"
|
||||
allowfullscreen loading="lazy"
|
||||
referrerpolicy="no-referrer-when-downgrade"></iframe>
|
||||
</td>
|
||||
<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>
|
||||
<p>
|
||||
<i class="fa-solid fa-map-location-dot"></i> Huiujeong-ro 1-gil, Mapo-gu, Seoul, South Korea<br>
|
||||
<i class="fas fa-globe"></i> <a href="https://www.ygfamily.com/"
|
||||
target="_blank" rel="noopener noreferrer">https://www.ygfamily.com/</a><br>
|
||||
<i class="fas fa-phone"></i> +82231421104
|
||||
</p>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1,243 +1,243 @@
|
||||
<!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/index.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="home-page minister-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">FROM CURIOSITY TO FULL-STACK</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></nav>
|
||||
|
||||
<canvas id="particles"></canvas>
|
||||
|
||||
<div class="container">
|
||||
<div class="landing-intro">
|
||||
<p>關於我:<span class="mark_b">把水晶置入生活,將熱愛驅動為進化的燃料</span></p>
|
||||
</div>
|
||||
|
||||
<section id="intro">
|
||||
<h2 class="section-title">跨越時空的開端</h2>
|
||||
<div class="intro-tags" role="list">
|
||||
<span class="hashtag-chip" role="listitem">#水晶傳教士</span>
|
||||
<span class="hashtag-chip" role="listitem">#認真魔人</span>
|
||||
</div>
|
||||
<div class="intro-text">
|
||||
<p class="intro-text">
|
||||
這段旅程始於 2016 年 4 月,透過國民綜藝《無限挑戰》六六歌 2 的回歸企劃,讓原本不認識這組傳奇元祖偶像的我,因一時好奇點開節目。當我回頭回溯那段歷史,才發現他們在 2000
|
||||
年巔峰解散時,我還未曾參與過那個屬於他們的世紀末。即便如此,隨著節目的鋪陳,我依然被那份熱血、真誠且專業的魅力所震撼,那些搞笑又感動的內容結束了我原本的低潮期,從此深陷其中。
|
||||
</p>
|
||||
<div class="slogan-quote slogan-quote--awakening">
|
||||
<span class="slogan-quote__inner">這不只是追星的開始,更成為我自我覺醒的起點。</span>
|
||||
</div>
|
||||
<p class="core-description">
|
||||
當年的節目剛播出,無數新粉集體淪陷,紛紛加入了「水晶廢人」的行列。
|
||||
在那段瘋狂的歲月裡,我們像是一群共振的靈魂,我也在這股浪潮中開啟了屬於我的進化之路:
|
||||
身為一名<span
|
||||
class="mark_b">「水晶傳教士」</span>,我秉持著「飯隨偶像,所以要讓自己變得和他們一樣優秀」的信念,將這份狂熱轉化為跨領域的創作動力。身為熱愛學習新事物的「認真魔人」,我的生活分為旺季與淡季:旺季時為愛進化,挑戰各種專業技能;淡季時則在《動森》認真耍廢半年,甚至組建了「水晶森友會」來獲得另類的成就感。
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="identity">
|
||||
<h2 class="section-title">#Identity:為了熱愛而進化的斜槓精神</h2>
|
||||
<div class="intro-text">
|
||||
<p class="intro-text">這份熱愛,讓我橫跨領域,長成了現在的模樣:</p>
|
||||
<p class="core-description">
|
||||
<span class="hashtag-chip">#水晶推廣部:視覺即是正義</span>
|
||||
身為專業品牌設計師,我堅持「不看醜東西」的職業傲骨。我親自操刀所有視覺輸出,將對偶像的滿腔熱血轉化為專業的品牌策劃,這是對這份熱愛最基本的尊重。
|
||||
</p>
|
||||
<p class="core-description">
|
||||
<span class="hashtag-chip">#水晶訓練營:自我提升的最高級</span>
|
||||
為了聽懂歐巴說的每一句話,我開始挑戰韓檢、投身健身、鑽研舞蹈。我用<span class="mark_b">聽力 93 分</span>與<span class="mark_b">增肌減脂
|
||||
20%</span>
|
||||
的數據證明:追星是推動自我實現最強大的燃料。
|
||||
</p>
|
||||
<p class="core-description">
|
||||
<span class="hashtag-chip">#全端開發者:技術與藝術的終極交織</span>
|
||||
我正將多年的設計積累與程式技術縫合,運用數位開發邏輯,搭建一個專屬於這份熱愛的數位平台。這是我為這段十年長跑獻上的最高致敬。
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="evolution" class="story-archive">
|
||||
<h2 class="section-title">熱愛驅動的職涯轉型</h2>
|
||||
<div class="subtitle-wrap">
|
||||
<span class="sub-title">GROWTH TIMELINE</span>
|
||||
</div>
|
||||
<div class="merged-storyline">
|
||||
<article class="story-node" data-era="語言">
|
||||
<h3>語言與紀律:打破隔閡</h3>
|
||||
<p>為了聽懂歐巴的每一句話,佛系自學後配合師大進修部三個月,順利通過韓檢 TOPIK 2 級。</p>
|
||||
</article>
|
||||
<article class="story-node" data-era="設計">
|
||||
<h3>設計覺醒:從美編到品牌設計</h3>
|
||||
<p>學習多媒體設計兩個月即入職美編,半年後升任平面設計,現為專業品牌視覺設計師。</p>
|
||||
</article>
|
||||
<article class="story-node" data-era="價值">
|
||||
<h3>價值提升:3.5 年薪資 +10K</h3>
|
||||
<p>為了賺錢買周邊與去韓國看演唱會,努力提升技能,在 3 年半內成功提升薪資 10K。證明追星也可以很勵志!</p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
<section id="journey" class="story-archive">
|
||||
<h2 class="section-title">Journey:推廣部進化史</h2>
|
||||
<div class="subtitle-wrap">
|
||||
<span class="sub-title">GROWTH TIMELINE (2016 - 2020)</span>
|
||||
</div>
|
||||
<div class="merged-storyline">
|
||||
<article class="story-node" data-era="2016">
|
||||
<h3 class="journey-year-sr">2016</h3>
|
||||
<p class="journey-sublabel">命定緣分與視覺震撼</p>
|
||||
<h4 class="journey-month">04 月</h4>
|
||||
<p>因《無限挑戰》開啟與水晶男孩的命定緣分。</p>
|
||||
<h4 class="journey-month">09 月</h4>
|
||||
<p>飛往首爾參加首場演唱會,受「人生導師」的手幅視覺震撼,確立了以「專業設計」為導向的推廣路徑。</p>
|
||||
</article>
|
||||
|
||||
<article class="story-node" data-era="2017">
|
||||
<h3 class="journey-year-sr">2017</h3>
|
||||
<p class="journey-sublabel">意志與熱舞</p>
|
||||
<h4 class="journey-month">02 月</h4>
|
||||
<p>擔任應援組熱舞小組長,成功減重 10 公斤,用身體實踐為愛而戰的意志力。</p>
|
||||
</article>
|
||||
|
||||
<article class="story-node" data-era="2018">
|
||||
<h3 class="journey-year-sr">2018</h3>
|
||||
<p class="journey-sublabel">數位推廣與影像覺醒</p>
|
||||
<h4 class="journey-month">06.01</h4>
|
||||
<p>進入行銷設計班,在 Premiere 課程首日即以高志溶為素材完成作業,獲得好評並正式開啟數位策展元年。</p>
|
||||
</article>
|
||||
|
||||
<article class="story-node" data-era="2019">
|
||||
<h3 class="journey-year-sr">2019</h3>
|
||||
<p class="journey-sublabel">價值提升與自律生活</p>
|
||||
<h4 class="journey-month">05 月</h4>
|
||||
<p>憑藉<span class="mark_b">聽力 93 分</span>高分通過 TOPIK 2 級,同年職涯從美編晉升平面設計師。</p>
|
||||
<h4 class="journey-month">06 - 08 月</h4>
|
||||
<p>發動全方位打歌:橫跨健身房、單車巡迴與好友飲料店;達成<span class="mark_b">增肌減脂 20%</span>,開啟與偶像同步的自律生活。</p>
|
||||
</article>
|
||||
|
||||
<article class="story-node" data-era="2020">
|
||||
<h3 class="journey-year-sr">2020</h3>
|
||||
<p class="journey-sublabel">從羨慕者進化為應援創作者</p>
|
||||
<h4 class="journey-month">06 月</h4>
|
||||
<p>在《動森》完成巨型 젝키 Logo 地景;再次運用 Premiere 實力為殷志源製作慶生影片。</p>
|
||||
<h4 class="journey-month">07.15</h4>
|
||||
<p>受邀製作首份張水院實體應援小卡,正式從仰望者進化為實體應援的創作者。</p>
|
||||
<h4 class="journey-month">08 月</h4>
|
||||
<p>在公司桌曆巧妙致敬《新西遊記 5》,手繪「無臉男」與「陰間使者」,實現職涯美學與熱愛的完美融合。</p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
<section id="journey" class="story-archive">
|
||||
<h2 class="section-title">Journey:推廣部進化史</h2>
|
||||
<div class="subtitle-wrap">
|
||||
<span class="sub-title">GROWTH TIMELINE (2016 - 2020)</span>
|
||||
</div>
|
||||
<div class="merged-storyline">
|
||||
<article class="story-node" data-era="2016">
|
||||
<h3 class="journey-year-sr">2016</h3>
|
||||
<p class="journey-sublabel">命定緣分與實踐</p>
|
||||
<h4 class="journey-month">04 月</h4>
|
||||
<p>點開影片,開啟與水晶男孩的命定緣分。</p>
|
||||
<h4 class="journey-month">09 月</h4>
|
||||
<p>飛往首爾參加首場演唱會,受「人生導師」的手幅視覺震撼,確立推廣方向。</p>
|
||||
</article>
|
||||
<article class="story-node" data-era="2017">
|
||||
<h3 class="journey-year-sr">2017</h3>
|
||||
<p class="journey-sublabel">意志與熱舞</p>
|
||||
<h4 class="journey-month">02 月</h4>
|
||||
<p>擔任熱舞小組長,成功減重 10 公斤,展現為愛而戰的意志。</p>
|
||||
</article>
|
||||
<article class="story-node" data-era="2018">
|
||||
<h3 class="journey-year-sr">2018</h3>
|
||||
<p class="journey-sublabel">數位推廣元年</p>
|
||||
<h4 class="journey-month">06 月</h4>
|
||||
<p>踏進行銷設計的第一天,在剪輯老師突然出的作業後,立刻接收到與高志溶來台拍攝的消息;
|
||||
這份突如其來的驚喜,讓我有機會直接以偶像為素材完成首支好評作業,就此驚艷開啟數位策展元年。</p>
|
||||
</article>
|
||||
<article class="story-node" data-era="2019">
|
||||
<h3 class="journey-year-sr">2019</h3>
|
||||
<p class="journey-sublabel">價值提升與自律</p>
|
||||
<h4 class="journey-month">05 月</h4>
|
||||
<p>憑藉<span class="mark_b">聽力 93 分</span>通過 TOPIK 2 級合格,同年職涯從美編晉升平面設計師。</p>
|
||||
<h4 class="journey-month">06-08 月</h4>
|
||||
<p>發動全方位打歌行動;達成<span class="mark_b">增肌減脂 20%</span> 目標,開啟與偶像同步的自律生活。</p>
|
||||
<h4 class="journey-milestone">成果</h4>
|
||||
<p>3.5 年內成功提升薪資 10K,證明熱愛能驅動實質的自我實現。</p>
|
||||
</article>
|
||||
<article class="story-node" data-era="2020">
|
||||
<h3 class="journey-year-sr">2020</h3>
|
||||
<p class="journey-sublabel">從參與到創作</p>
|
||||
<h4 class="journey-month">06 月</h4>
|
||||
<p>在《動森》完成巨型 젝키 Logo 地景,並再次為殷志源製作慶生影片。</p>
|
||||
<h4 class="journey-month">07-08 月</h4>
|
||||
<p>正式受邀製作張水院應援小卡,並在職場桌曆中巧妙致敬《新西遊記 5》,實現職涯與熱愛的完美融合。</p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="training">
|
||||
<h2 class="section-title">#水晶訓練營:意志力的磨練</h2>
|
||||
<div class="intro-text">
|
||||
<p class="intro-text">為了擁有更好的體態跟上歐巴,我將少女心跳成專業舞步,並透過多元運動鍛鍊出強大的紀律:</p>
|
||||
<ul>
|
||||
<li><span class="hashtag-chip">#律動</span>熱舞(用身體記憶跨世紀的節奏)。</li>
|
||||
<li><span class="hashtag-chip">#核心</span>重訓、空中瑜珈。</li>
|
||||
<li><span class="hashtag-chip">#耐力</span>單車、游泳、爬山。</li>
|
||||
<li><span class="hashtag-chip">#敏捷</span>桌球。</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="tech-stack">
|
||||
<h2 class="section-title">全端開發與數位推廣</h2>
|
||||
<div class="intro-text">
|
||||
<p class="intro-text">
|
||||
這十年,我從台下的仰望者進化成了手握技術的守護者。當前最重要的挑戰:朝著前端設計師努力,結合包裝設計的審美與 PHP/MySQL/JS 技術,親手搭建這個數位平台。這份熱愛,就是我最強大的軍功章。
|
||||
</p>
|
||||
</div>
|
||||
<div class="story-grid">
|
||||
<div class="card">
|
||||
<h3>Visual & Branding</h3>
|
||||
<p>品牌包裝設計、視覺藝術策劃;11 種設計軟體掌握(含影像剪輯)。</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>Full-stack Dev</h3>
|
||||
<p>HTML, CSS, JS, PHP, MySQL, Cursor AI</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="landing-actions">
|
||||
<a href="../index.html#mission" class="btn">回到首頁 · 成立的初衷</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</body>
|
||||
|
||||
<!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/index.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="home-page minister-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">FROM CURIOSITY TO FULL-STACK</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></nav>
|
||||
|
||||
<canvas id="particles"></canvas>
|
||||
|
||||
<div class="container">
|
||||
<div class="landing-intro">
|
||||
<p>關於我:<span class="mark_b">把水晶置入生活,將熱愛驅動為進化的燃料</span></p>
|
||||
</div>
|
||||
|
||||
<section id="intro">
|
||||
<h2 class="section-title">跨越時空的開端</h2>
|
||||
<div class="intro-tags" role="list">
|
||||
<span class="hashtag-chip" role="listitem">#水晶傳教士</span>
|
||||
<span class="hashtag-chip" role="listitem">#認真魔人</span>
|
||||
</div>
|
||||
<div class="intro-text">
|
||||
<p class="intro-text">
|
||||
這段旅程始於 2016 年 4 月,透過國民綜藝《無限挑戰》六六歌 2 的回歸企劃,讓原本不認識這組傳奇元祖偶像的我,因一時好奇點開節目。當我回頭回溯那段歷史,才發現他們在 2000
|
||||
年巔峰解散時,我還未曾參與過那個屬於他們的世紀末。即便如此,隨著節目的鋪陳,我依然被那份熱血、真誠且專業的魅力所震撼,那些搞笑又感動的內容結束了我原本的低潮期,從此深陷其中。
|
||||
</p>
|
||||
<div class="slogan-quote slogan-quote--awakening">
|
||||
<span class="slogan-quote__inner">這不只是追星的開始,更成為我自我覺醒的起點。</span>
|
||||
</div>
|
||||
<p class="core-description">
|
||||
當年的節目剛播出,無數新粉集體淪陷,紛紛加入了「水晶廢人」的行列。
|
||||
在那段瘋狂的歲月裡,我們像是一群共振的靈魂,我也在這股浪潮中開啟了屬於我的進化之路:
|
||||
身為一名<span
|
||||
class="mark_b">「水晶傳教士」</span>,我秉持著「飯隨偶像,所以要讓自己變得和他們一樣優秀」的信念,將這份狂熱轉化為跨領域的創作動力。身為熱愛學習新事物的「認真魔人」,我的生活分為旺季與淡季:旺季時為愛進化,挑戰各種專業技能;淡季時則在《動森》認真耍廢半年,甚至組建了「水晶森友會」來獲得另類的成就感。
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="identity">
|
||||
<h2 class="section-title">#Identity:為了熱愛而進化的斜槓精神</h2>
|
||||
<div class="intro-text">
|
||||
<p class="intro-text">這份熱愛,讓我橫跨領域,長成了現在的模樣:</p>
|
||||
<p class="core-description">
|
||||
<span class="hashtag-chip">#水晶推廣部:視覺即是正義</span>
|
||||
身為專業品牌設計師,我堅持「不看醜東西」的職業傲骨。我親自操刀所有視覺輸出,將對偶像的滿腔熱血轉化為專業的品牌策劃,這是對這份熱愛最基本的尊重。
|
||||
</p>
|
||||
<p class="core-description">
|
||||
<span class="hashtag-chip">#水晶訓練營:自我提升的最高級</span>
|
||||
為了聽懂歐巴說的每一句話,我開始挑戰韓檢、投身健身、鑽研舞蹈。我用<span class="mark_b">聽力 93 分</span>與<span class="mark_b">增肌減脂
|
||||
20%</span>
|
||||
的數據證明:追星是推動自我實現最強大的燃料。
|
||||
</p>
|
||||
<p class="core-description">
|
||||
<span class="hashtag-chip">#全端開發者:技術與藝術的終極交織</span>
|
||||
我正將多年的設計積累與程式技術縫合,運用數位開發邏輯,搭建一個專屬於這份熱愛的數位平台。這是我為這段十年長跑獻上的最高致敬。
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="evolution" class="story-archive">
|
||||
<h2 class="section-title">熱愛驅動的職涯轉型</h2>
|
||||
<div class="subtitle-wrap">
|
||||
<span class="sub-title">GROWTH TIMELINE</span>
|
||||
</div>
|
||||
<div class="merged-storyline">
|
||||
<article class="story-node" data-era="語言">
|
||||
<h3>語言與紀律:打破隔閡</h3>
|
||||
<p>為了聽懂歐巴的每一句話,佛系自學後配合師大進修部三個月,順利通過韓檢 TOPIK 2 級。</p>
|
||||
</article>
|
||||
<article class="story-node" data-era="設計">
|
||||
<h3>設計覺醒:從美編到品牌設計</h3>
|
||||
<p>學習多媒體設計兩個月即入職美編,半年後升任平面設計,現為專業品牌視覺設計師。</p>
|
||||
</article>
|
||||
<article class="story-node" data-era="價值">
|
||||
<h3>價值提升:3.5 年薪資 +10K</h3>
|
||||
<p>為了賺錢買周邊與去韓國看演唱會,努力提升技能,在 3 年半內成功提升薪資 10K。證明追星也可以很勵志!</p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
<section id="journey" class="story-archive">
|
||||
<h2 class="section-title">Journey:推廣部進化史</h2>
|
||||
<div class="subtitle-wrap">
|
||||
<span class="sub-title">GROWTH TIMELINE (2016 - 2020)</span>
|
||||
</div>
|
||||
<div class="merged-storyline">
|
||||
<article class="story-node" data-era="2016">
|
||||
<h3 class="journey-year-sr">2016</h3>
|
||||
<p class="journey-sublabel">命定緣分與視覺震撼</p>
|
||||
<h4 class="journey-month">04 月</h4>
|
||||
<p>因《無限挑戰》開啟與水晶男孩的命定緣分。</p>
|
||||
<h4 class="journey-month">09 月</h4>
|
||||
<p>飛往首爾參加首場演唱會,受「人生導師」的手幅視覺震撼,確立了以「專業設計」為導向的推廣路徑。</p>
|
||||
</article>
|
||||
|
||||
<article class="story-node" data-era="2017">
|
||||
<h3 class="journey-year-sr">2017</h3>
|
||||
<p class="journey-sublabel">意志與熱舞</p>
|
||||
<h4 class="journey-month">02 月</h4>
|
||||
<p>擔任應援組熱舞小組長,成功減重 10 公斤,用身體實踐為愛而戰的意志力。</p>
|
||||
</article>
|
||||
|
||||
<article class="story-node" data-era="2018">
|
||||
<h3 class="journey-year-sr">2018</h3>
|
||||
<p class="journey-sublabel">數位推廣與影像覺醒</p>
|
||||
<h4 class="journey-month">06.01</h4>
|
||||
<p>進入行銷設計班,在 Premiere 課程首日即以高志溶為素材完成作業,獲得好評並正式開啟數位策展元年。</p>
|
||||
</article>
|
||||
|
||||
<article class="story-node" data-era="2019">
|
||||
<h3 class="journey-year-sr">2019</h3>
|
||||
<p class="journey-sublabel">價值提升與自律生活</p>
|
||||
<h4 class="journey-month">05 月</h4>
|
||||
<p>憑藉<span class="mark_b">聽力 93 分</span>高分通過 TOPIK 2 級,同年職涯從美編晉升平面設計師。</p>
|
||||
<h4 class="journey-month">06 - 08 月</h4>
|
||||
<p>發動全方位打歌:橫跨健身房、單車巡迴與好友飲料店;達成<span class="mark_b">增肌減脂 20%</span>,開啟與偶像同步的自律生活。</p>
|
||||
</article>
|
||||
|
||||
<article class="story-node" data-era="2020">
|
||||
<h3 class="journey-year-sr">2020</h3>
|
||||
<p class="journey-sublabel">從羨慕者進化為應援創作者</p>
|
||||
<h4 class="journey-month">06 月</h4>
|
||||
<p>在《動森》完成巨型 젝키 Logo 地景;再次運用 Premiere 實力為殷志源製作慶生影片。</p>
|
||||
<h4 class="journey-month">07.15</h4>
|
||||
<p>受邀製作首份張水院實體應援小卡,正式從仰望者進化為實體應援的創作者。</p>
|
||||
<h4 class="journey-month">08 月</h4>
|
||||
<p>在公司桌曆巧妙致敬《新西遊記 5》,手繪「無臉男」與「陰間使者」,實現職涯美學與熱愛的完美融合。</p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
<section id="journey" class="story-archive">
|
||||
<h2 class="section-title">Journey:推廣部進化史</h2>
|
||||
<div class="subtitle-wrap">
|
||||
<span class="sub-title">GROWTH TIMELINE (2016 - 2020)</span>
|
||||
</div>
|
||||
<div class="merged-storyline">
|
||||
<article class="story-node" data-era="2016">
|
||||
<h3 class="journey-year-sr">2016</h3>
|
||||
<p class="journey-sublabel">命定緣分與實踐</p>
|
||||
<h4 class="journey-month">04 月</h4>
|
||||
<p>點開影片,開啟與水晶男孩的命定緣分。</p>
|
||||
<h4 class="journey-month">09 月</h4>
|
||||
<p>飛往首爾參加首場演唱會,受「人生導師」的手幅視覺震撼,確立推廣方向。</p>
|
||||
</article>
|
||||
<article class="story-node" data-era="2017">
|
||||
<h3 class="journey-year-sr">2017</h3>
|
||||
<p class="journey-sublabel">意志與熱舞</p>
|
||||
<h4 class="journey-month">02 月</h4>
|
||||
<p>擔任熱舞小組長,成功減重 10 公斤,展現為愛而戰的意志。</p>
|
||||
</article>
|
||||
<article class="story-node" data-era="2018">
|
||||
<h3 class="journey-year-sr">2018</h3>
|
||||
<p class="journey-sublabel">數位推廣元年</p>
|
||||
<h4 class="journey-month">06 月</h4>
|
||||
<p>踏進行銷設計的第一天,在剪輯老師突然出的作業後,立刻接收到與高志溶來台拍攝的消息;
|
||||
這份突如其來的驚喜,讓我有機會直接以偶像為素材完成首支好評作業,就此驚艷開啟數位策展元年。</p>
|
||||
</article>
|
||||
<article class="story-node" data-era="2019">
|
||||
<h3 class="journey-year-sr">2019</h3>
|
||||
<p class="journey-sublabel">價值提升與自律</p>
|
||||
<h4 class="journey-month">05 月</h4>
|
||||
<p>憑藉<span class="mark_b">聽力 93 分</span>通過 TOPIK 2 級合格,同年職涯從美編晉升平面設計師。</p>
|
||||
<h4 class="journey-month">06-08 月</h4>
|
||||
<p>發動全方位打歌行動;達成<span class="mark_b">增肌減脂 20%</span> 目標,開啟與偶像同步的自律生活。</p>
|
||||
<h4 class="journey-milestone">成果</h4>
|
||||
<p>3.5 年內成功提升薪資 10K,證明熱愛能驅動實質的自我實現。</p>
|
||||
</article>
|
||||
<article class="story-node" data-era="2020">
|
||||
<h3 class="journey-year-sr">2020</h3>
|
||||
<p class="journey-sublabel">從參與到創作</p>
|
||||
<h4 class="journey-month">06 月</h4>
|
||||
<p>在《動森》完成巨型 젝키 Logo 地景,並再次為殷志源製作慶生影片。</p>
|
||||
<h4 class="journey-month">07-08 月</h4>
|
||||
<p>正式受邀製作張水院應援小卡,並在職場桌曆中巧妙致敬《新西遊記 5》,實現職涯與熱愛的完美融合。</p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="training">
|
||||
<h2 class="section-title">#水晶訓練營:意志力的磨練</h2>
|
||||
<div class="intro-text">
|
||||
<p class="intro-text">為了擁有更好的體態跟上歐巴,我將少女心跳成專業舞步,並透過多元運動鍛鍊出強大的紀律:</p>
|
||||
<ul>
|
||||
<li><span class="hashtag-chip">#律動</span>熱舞(用身體記憶跨世紀的節奏)。</li>
|
||||
<li><span class="hashtag-chip">#核心</span>重訓、空中瑜珈。</li>
|
||||
<li><span class="hashtag-chip">#耐力</span>單車、游泳、爬山。</li>
|
||||
<li><span class="hashtag-chip">#敏捷</span>桌球。</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="tech-stack">
|
||||
<h2 class="section-title">全端開發與數位推廣</h2>
|
||||
<div class="intro-text">
|
||||
<p class="intro-text">
|
||||
這十年,我從台下的仰望者進化成了手握技術的守護者。當前最重要的挑戰:朝著前端設計師努力,結合包裝設計的審美與 PHP/MySQL/JS 技術,親手搭建這個數位平台。這份熱愛,就是我最強大的軍功章。
|
||||
</p>
|
||||
</div>
|
||||
<div class="story-grid">
|
||||
<div class="card">
|
||||
<h3>Visual & Branding</h3>
|
||||
<p>品牌包裝設計、視覺藝術策劃;11 種設計軟體掌握(含影像剪輯)。</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>Full-stack Dev</h3>
|
||||
<p>HTML, CSS, JS, PHP, MySQL, Cursor AI</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="landing-actions">
|
||||
<a href="../index.html#mission" class="btn">回到首頁 · 成立的初衷</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -18,7 +18,7 @@
|
||||
box-sizing: border-box;
|
||||
margin: 0 0 14px;
|
||||
padding: 0.8rem clamp(16px, 4vw, 100px);
|
||||
background-color: var(--black);
|
||||
background-color: var(--color-bg-raised);
|
||||
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28);
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
@@ -1,51 +1,51 @@
|
||||
<!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="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="chronicle-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">VOICE · RAIN · NARRATIVE</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></nav>
|
||||
|
||||
<canvas id="particles"></canvas>
|
||||
|
||||
<main class="content-container variety-page-main chronicle-reader">
|
||||
<section id="truth" class="variety-block">
|
||||
<h2 class="section-title">還原那場雨</h2>
|
||||
<p class="intro-text">流言與標題往往跑在當事人之前;這裡不急著下判決,而是把時間軸、公開說法與作品留痕擺在同一視線高度,讓讀的人自己拼出輪廓。</p>
|
||||
<p class="intro-text">此區預留給你之後補上的整理與引用來源;先立欄位,避免情緒性的單句蓋過事實層次。</p>
|
||||
</section>
|
||||
<section id="voice" class="variety-block">
|
||||
<h2 class="section-title">被掩蓋的主唱</h2>
|
||||
<p class="intro-text">White Kies 的高音與哭腔,曾在無數主打裡替團名撐住「好聽」這兩個字;當鏡頭轉向別處,那些聲線與和聲仍留在音檔裡,等耳朵重新打開。</p>
|
||||
<p class="intro-text">之後可在此收錄現場、翻唱、與合作曲目,讓「主唱」不被標籤蓋過,而被聽見。</p>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<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/portal-nav.js"></script>
|
||||
<script src="../assets/js/particles.js"></script>
|
||||
</body>
|
||||
|
||||
</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="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="chronicle-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">VOICE · RAIN · NARRATIVE</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></nav>
|
||||
|
||||
<canvas id="particles"></canvas>
|
||||
|
||||
<main class="content-container variety-page-main chronicle-reader">
|
||||
<section id="truth" class="variety-block">
|
||||
<h2 class="section-title">還原那場雨</h2>
|
||||
<p class="intro-text">流言與標題往往跑在當事人之前;這裡不急著下判決,而是把時間軸、公開說法與作品留痕擺在同一視線高度,讓讀的人自己拼出輪廓。</p>
|
||||
<p class="intro-text">此區預留給你之後補上的整理與引用來源;先立欄位,避免情緒性的單句蓋過事實層次。</p>
|
||||
</section>
|
||||
<section id="voice" class="variety-block">
|
||||
<h2 class="section-title">被掩蓋的主唱</h2>
|
||||
<p class="intro-text">White Kies 的高音與哭腔,曾在無數主打裡替團名撐住「好聽」這兩個字;當鏡頭轉向別處,那些聲線與和聲仍留在音檔裡,等耳朵重新打開。</p>
|
||||
<p class="intro-text">之後可在此收錄現場、翻唱、與合作曲目,讓「主唱」不被標籤蓋過,而被聽見。</p>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<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/portal-nav.js"></script>
|
||||
<script src="../assets/js/particles.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1,15 +1,15 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-TW">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="refresh" content="0; url=fansform.php">
|
||||
<link rel="canonical" href="fansform.php">
|
||||
<title>水晶男孩|入坑申請書</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<p><a href="fansform.php">前往入坑申請書</a></p>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-TW">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="refresh" content="0; url=fansform.php">
|
||||
<link rel="canonical" href="fansform.php">
|
||||
<title>水晶男孩|入坑申請書</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<p><a href="fansform.php">前往入坑申請書</a></p>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1,217 +1,217 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-TW">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>SECHSKIES - 水晶男孩傳奇介紹</title>
|
||||
<link rel="stylesheet" href="assets/css/style.css">
|
||||
<link rel="stylesheet" href="assets/css/index.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="home-page">
|
||||
<header id="origin">
|
||||
<div class="hero">
|
||||
<div class="header-inner site-header-inner">
|
||||
<h1 class="main-title">SECHSKIES<br>水晶男孩</h1>
|
||||
<div class="subtitle-wrap">
|
||||
<span class="sub-title">六顆永恆的水晶 • 左右命運的傳奇</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <a href="#start" class="btn">從這裡開始淪陷</a> -->
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></nav>
|
||||
|
||||
<canvas id="particles"></canvas>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<section id="start">
|
||||
<h2 class="section-title">好奇的開端</h2>
|
||||
<div class="intro-text">
|
||||
<p class="core-description">
|
||||
這段旅程始於 2016 年 4 月,透過國民綜藝<span class="mark_b mark_y">《無限挑戰》</span>的回歸企劃,讓原本不認識這組傳奇的我,因一時好奇點開節目。
|
||||
即便錯過了那個屬於他們的世紀末,但跟著節目的編排鋪陳,從歡笑到感動,我被這些熱血、真誠且專業的大男孩所震撼。
|
||||
</p>
|
||||
<p class="call-to-action">
|
||||
身為在回歸後才被這場 <span class="mark_b mark_y">「黃色奇蹟」</span>
|
||||
擊中的新一代粉絲,我深刻體會那種從好奇觀看到最終徹底淪陷的悸動。這種從<span class="mark_b"><span class="fan-journey-wave"
|
||||
role="text">路人 <i class="fa-solid fa-circle-right"
|
||||
aria-hidden="true"></i> 入坑否定期 <i class="fa-solid fa-circle-right"
|
||||
aria-hidden="true"></i> 瘋狂考古期 <i class="fa-solid fa-circle-right"
|
||||
aria-hidden="true"></i> 坑底躺平深陷其中</span></span>的過程,證明了魅力可以跨越時間,也正是這一切自我覺醒的起點,驅動我不斷進化的無限可能。
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
<section id="mission" class="mission-section">
|
||||
<div class="mission-zigzag">
|
||||
<div class="mission-row mission-row--intro">
|
||||
<div class="mission-row__visual">
|
||||
<div class="logo-wrapper">
|
||||
<img src="./assets/images/logo.png" alt="SECHSKIES Logo Concept">
|
||||
<div class="caption">
|
||||
<span class="caption__line caption__line--title"><span class="arrow-icon mark_b"
|
||||
aria-hidden="true">↑</span>設計概念:</span>
|
||||
<span class="caption__line">六角形水晶、黃色海洋與我們的初心Six</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mission-row__body">
|
||||
<h2 class="section-title mission-block-title">成立的初衷</h2>
|
||||
<p class="mission-lead">
|
||||
以推廣 <span class="mark_y">SECHSKIES 水晶男孩</span> 為核心,旨在透過 專業的視覺策展 宣傳成員魅力與小黃們的應援活動。嘗試以水晶男孩為
|
||||
<span class="mark_b">靈感主軸</span>,延伸至 網頁開發、視覺設計與內容企劃 等多重領域,將對偶像的喜愛轉化為 <span
|
||||
class="mark_b">實質的專業養分</span>。在這裡,你不只能探索他們的 <span class="mark_b">傳奇軌跡</span>,更能見證追星如何激發
|
||||
<span class="mark_b">創作潛能</span>。
|
||||
</p>
|
||||
<div class="slogan-quote slogan-quote--mission">
|
||||
<span class="slogan-quote__inner">我要用這個<span
|
||||
class="mark_b">網站</span>證明:<br>追星的孩子不僅不會變壞,更會因為那份<span
|
||||
class="mark_b">守護並推廣的熱情</span>,<br>讓現在的自己變得比追星前的自己還要厲害!</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mission-row mission-row--concept">
|
||||
<div class="mission-row__body">
|
||||
<h3 class="mission-logo-heading">LOGO 設計理念</h3>
|
||||
<p>
|
||||
<span class="mark_b">「晶」</span>字發想來自<span class="mark_b">六角形的水晶</span>,為了強調水晶男孩<span
|
||||
class="mark_b">初心為六人</span>。上半部形似<span class="mark_b">數字
|
||||
6</span>,搭配演唱會必備的<span class="mark_b">手燈圖案</span>,代表粉絲和水晶<span
|
||||
class="mark_b">密不可分的關係</span>。<br>色彩配置發想來自無限挑戰六六歌特輯的回歸舞台,成員脫下眼罩的剎那,整個場地從<span
|
||||
class="mark_b mark_y">一片漆黑瞬間發亮</span>,映入眼簾的是一片<span class="mark_b">黃色海洋</span>,<span
|
||||
class="mark_y">讓成員和粉絲的世界跟著亮了起來</span>。以此片段為契機,設計成<span
|
||||
class="mark_b">黑色系與黃色系</span>的色彩搭配,來記錄那瞬間的感動。
|
||||
</p>
|
||||
</div>
|
||||
<div class="mission-row__visual">
|
||||
<div class="mission-moment-wrap">
|
||||
<div class="mission-gif-frame" role="group" aria-label="回歸演唱會/黃色氣球海(16:9)">
|
||||
<!-- 若改為 GIF 動圖,將底下 src 換成 ./assets/images/mission-balloon-sea.gif 即可 -->
|
||||
<img src="./assets/images/黃色海洋.gif" alt="無限挑戰 六六歌2 放送畫面:全場黃色氣球海">
|
||||
</div>
|
||||
<span class="caption">
|
||||
<span class="arrow-icon" aria-hidden="true">↑</span>
|
||||
回歸演唱會的動人瞬間-黃色氣球海
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<section id="timeline" class="story-archive">
|
||||
<h2 class="section-title">跨時空軌跡</h2>
|
||||
<div class="subtitle-wrap">
|
||||
<span class="sub-title">SECHSKIES STORY ARCHIVE</span>
|
||||
</div>
|
||||
|
||||
<div class="merged-storyline">
|
||||
<article class="story-node" data-era="1997">
|
||||
<h3>傳奇的誕生:六道光芒劃破韓流夜空</h3>
|
||||
<p>1997年4月15日,水晶男孩以強悍的《學園別曲》為起點,「黑水晶|Rap與舞蹈」、「白水晶|主唱」的雙色魅力交織,奠定了
|
||||
K-POP第一代傳奇的地位,開創了屬於黃色海洋的盛世與巔峰。</p>
|
||||
<p>在那段被韓劇<a
|
||||
href="https://www.disneyplus.com/browse/entity-3979fb82-8681-44e8-b7be-e313091f0d73?distributionPartner=google"
|
||||
class="story-external-inline" target="_blank" rel="noopener noreferrer"><span
|
||||
class="story-external-inline__label">《請回答1997》</span><i
|
||||
class="fa-solid fa-arrow-up-right-from-square" aria-hidden="true"></i></a>奉為經典的歲月裡,水晶男孩與
|
||||
H.O.T.
|
||||
並稱為兩大巔峰。無論是雨中那場被劇集致敬的粉絲大戰,還是為了買票露宿街頭的狂熱,白與黃的旗幟對決,成了那個世代集體記憶的起點。</p>
|
||||
</article>
|
||||
|
||||
<article class="story-node" data-era="2000">
|
||||
<h3>遺憾的休止符:凍結有你的世界</h3>
|
||||
<p>在最燦爛的時刻,這首華麗的樂章卻被迫畫下了休止符,2000年5月正式解散。成員各自發展走出了不同道路,水晶進入休眠期。
|
||||
</p>
|
||||
<p>那一場如同劇中描寫般、讓全韓無數少女世界崩塌的夢想演唱會告別現場,將未完的旋律封存在冷冽的空氣中。這一停頓,就是長達十六年的靜默,成為我們心中最完整、卻也最令人心碎的凝煉模樣。
|
||||
</p>
|
||||
</article>
|
||||
<article class="story-node story-node--ebook-ssg2" data-era="2016">
|
||||
<h3>感動合體:那一晚,我們找回了完整</h3>
|
||||
<p>塵封十六年的時光被溫柔拂去,跨越六千多天的等待,黃色氣球海再次淹沒了上岩運動場。當六個身影重新站在一起,那幅曾被凍結在 2000
|
||||
年的畫面終於再次「溶解」並重合。那一晚,淚水證明了奇蹟真的存在,我們終於找回了那份久違的完整,以為故事從此能圓滿續寫。</p>
|
||||
<span class="timeline-ebook-cta" aria-label="傳奇書寫中,連結暫停">
|
||||
<span>點我見證傳奇</span><i class="fa-solid fa-hand-pointer" aria-hidden="true"></i>
|
||||
</span>
|
||||
</article>
|
||||
<article class="story-node" data-era="2016.05">
|
||||
<h3>從路人到鐵粉:從夢境進現實</h3>
|
||||
<p>當《無限挑戰》的燈光熄滅,原以為那場重逢只是曇花一現。當我們陷入瘋狂但卻不敢過度期待合體、只在螢幕前等待每個oppa消息的時光,終於盼到了 5月 11
|
||||
日與 YG的簽約消息,所有新舊小黃從絕望中打醒。從未知的空虛到塵埃落定的感動——原來這不是終點,奇蹟真的在現實生了根。</p>
|
||||
</article>
|
||||
<article class="story-node" data-era="2016.09">
|
||||
<h3>九月首場:黃色海洋裡的羈絆</h3>
|
||||
<p>四月的重逢是老黃們守候十六年的淚水;而九月的單獨演唱會,則讓無數新小黃見證了那份無法動搖的羈絆。在那片黃色海洋裡,我們不只愛上了水晶男孩,更愛上了他們與小黃之間的愛情。雖然遺憾沒能親眼看見六人並肩的畫面,但那股新舊交織的生命力,確實為水晶注入了新的靈魂。
|
||||
</p>
|
||||
</article>
|
||||
<article class="story-node" data-era="2016.12">
|
||||
<h3>第六顆水晶:另一種形式的陪伴</h3>
|
||||
<p>而志溶雖然未參與合體,卻在十二月聖誕夜那場釜山演唱會落幕當天,帶著孩子在《超人回來了》的預告驚喜現身。這不是告別,而是他選擇以另一種最真實、最溫馨的形式,在現實生活中繼續陪伴著大家。舞台上的空位雖然令人難過,但看到他帶著孩子幸福的模樣,我們才明白:原來水晶與粉絲的羈絆,早已超越了表演的定義,而是要在彼此的生活裡,一起寫下新的篇章。
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article class="story-node story-node--tbc" data-era="未完">
|
||||
<h3>未完待續</h3>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
<!--
|
||||
<section id="story" class="story-archive">
|
||||
<h2 class="section-title">傳奇的轉折</h2>
|
||||
<div class="subtitle-wrap">
|
||||
<span class="sub-title">PLOT TWIST</span>
|
||||
</div>
|
||||
<p class="intro-text">
|
||||
像劇情的反轉一樣過癮:這幾個節點,剛好是許多人從「旁觀綜藝」滑進「正式入坑」的轉軌。若想讀對白級細節,請開
|
||||
<a href="totoga2/readable.html">六六歌2 整合專區</a>(影片/電子書/紀實長文八章,同一頁切換模式即可)。
|
||||
</p>
|
||||
<div class="story-ebook-cta">
|
||||
<a href="totoga2/readable.html#ebook" class="btn story-ebook-btn">開啟六六歌2 紀實電子書</a>
|
||||
<a href="totoga2/readable.html" class="btn story-ebook-btn">六六歌2 整合專區</a>
|
||||
</div>
|
||||
|
||||
<div class="merged-storyline">
|
||||
<article id="special" class="story-node" data-era="六六歌">
|
||||
<h3>六六歌實錄</h3>
|
||||
<p>把懸念、試探與哭點縫在同一條時間軸上;很多人第一次真正把「水晶男孩」打進搜尋框,就是從這種瘋狂的剪輯節奏開始。</p>
|
||||
<p><a href="totoga2/readable.html#ssg2">對照這一段幕後敘事</a></p>
|
||||
</article>
|
||||
<article id="negotiate" class="story-node" data-era="交涉">
|
||||
<h3>命運的交涉</h3>
|
||||
<p>KTV、游擊演唱會規則、與其說講道理不如說把真心擺上桌面——交涉的不是合約字面,而是還願不願意再一次肩並肩。</p>
|
||||
<p><a href="totoga2/readable.html#negotiate">讀交涉與對話肌理</a></p>
|
||||
</article>
|
||||
<article id="complete" class="story-node" data-era="歸位">
|
||||
<h3>拼圖的歸位</h3>
|
||||
<p>變數一個個被排除之後,驚喜接上登場段落;缺一角舞台的視覺,終於對齊觀眾席上堅守的那片黃。</p>
|
||||
<p><a href="totoga2/readable.html#gather">從「召集」段開始補這條線</a></p>
|
||||
</article>
|
||||
<article id="past" class="story-node" data-era="最初">
|
||||
<h3>巔峰與雨天</h3>
|
||||
<p>急凍、告別、各自的跑道——並不是要你沉浸遺憾,而是讓你懂:後來每一次亮燈,為什麼會更值得尖叫。</p>
|
||||
<p><a href="totoga2/readable.html#sechskies-profile">讀這條脈絡的起點</a></p>
|
||||
</article>
|
||||
</div>
|
||||
</section> -->
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</body>
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-TW">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>SECHSKIES - 水晶男孩傳奇介紹</title>
|
||||
<link rel="stylesheet" href="assets/css/style.css">
|
||||
<link rel="stylesheet" href="assets/css/index.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="home-page">
|
||||
<header id="origin">
|
||||
<div class="hero">
|
||||
<div class="header-inner site-header-inner">
|
||||
<h1 class="main-title">SECHSKIES<br>水晶男孩</h1>
|
||||
<div class="subtitle-wrap">
|
||||
<span class="sub-title">六顆永恆的水晶 • 左右命運的傳奇</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <a href="#start" class="btn">從這裡開始淪陷</a> -->
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></nav>
|
||||
|
||||
<canvas id="particles"></canvas>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<section id="start">
|
||||
<h2 class="section-title">好奇的開端</h2>
|
||||
<div class="intro-text">
|
||||
<p class="core-description">
|
||||
這段旅程始於 2016 年 4 月,透過國民綜藝<span class="mark_b mark_y">《無限挑戰》</span>的回歸企劃,讓原本不認識這組傳奇的我,因一時好奇點開節目。
|
||||
即便錯過了那個屬於他們的世紀末,但跟著節目的編排鋪陳,從歡笑到感動,我被這些熱血、真誠且專業的大男孩所震撼。
|
||||
</p>
|
||||
<p class="call-to-action">
|
||||
身為在回歸後才被這場 <span class="mark_b mark_y">「黃色奇蹟」</span>
|
||||
擊中的新一代粉絲,我深刻體會那種從好奇觀看到最終徹底淪陷的悸動。這種從<span class="mark_b"><span class="fan-journey-wave"
|
||||
role="text">路人 <i class="fa-solid fa-circle-right"
|
||||
aria-hidden="true"></i> 入坑否定期 <i class="fa-solid fa-circle-right"
|
||||
aria-hidden="true"></i> 瘋狂考古期 <i class="fa-solid fa-circle-right"
|
||||
aria-hidden="true"></i> 坑底躺平深陷其中</span></span>的過程,證明了魅力可以跨越時間,也正是這一切自我覺醒的起點,驅動我不斷進化的無限可能。
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
<section id="mission" class="mission-section">
|
||||
<div class="mission-zigzag">
|
||||
<div class="mission-row mission-row--intro">
|
||||
<div class="mission-row__visual">
|
||||
<div class="logo-wrapper">
|
||||
<img src="./assets/images/logo.png" alt="SECHSKIES Logo Concept">
|
||||
<div class="caption">
|
||||
<span class="caption__line caption__line--title"><span class="arrow-icon mark_b"
|
||||
aria-hidden="true">↑</span>設計概念:</span>
|
||||
<span class="caption__line">六角形水晶、黃色海洋與我們的初心Six</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mission-row__body">
|
||||
<h2 class="section-title mission-block-title">成立的初衷</h2>
|
||||
<p class="mission-lead">
|
||||
以推廣 <span class="mark_y">SECHSKIES 水晶男孩</span> 為核心,旨在透過 專業的視覺策展 宣傳成員魅力與小黃們的應援活動。嘗試以水晶男孩為
|
||||
<span class="mark_b">靈感主軸</span>,延伸至 網頁開發、視覺設計與內容企劃 等多重領域,將對偶像的喜愛轉化為 <span
|
||||
class="mark_b">實質的專業養分</span>。在這裡,你不只能探索他們的 <span class="mark_b">傳奇軌跡</span>,更能見證追星如何激發
|
||||
<span class="mark_b">創作潛能</span>。
|
||||
</p>
|
||||
<div class="slogan-quote slogan-quote--mission">
|
||||
<span class="slogan-quote__inner">我要用這個<span
|
||||
class="mark_b">網站</span>證明:<br>追星的孩子不僅不會變壞,更會因為那份<span
|
||||
class="mark_b">守護並推廣的熱情</span>,<br>讓現在的自己變得比追星前的自己還要厲害!</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mission-row mission-row--concept">
|
||||
<div class="mission-row__body">
|
||||
<h3 class="mission-logo-heading">LOGO 設計理念</h3>
|
||||
<p>
|
||||
<span class="mark_b">「晶」</span>字發想來自<span class="mark_b">六角形的水晶</span>,為了強調水晶男孩<span
|
||||
class="mark_b">初心為六人</span>。上半部形似<span class="mark_b">數字
|
||||
6</span>,搭配演唱會必備的<span class="mark_b">手燈圖案</span>,代表粉絲和水晶<span
|
||||
class="mark_b">密不可分的關係</span>。<br>色彩配置發想來自無限挑戰六六歌特輯的回歸舞台,成員脫下眼罩的剎那,整個場地從<span
|
||||
class="mark_b mark_y">一片漆黑瞬間發亮</span>,映入眼簾的是一片<span class="mark_b">黃色海洋</span>,<span
|
||||
class="mark_y">讓成員和粉絲的世界跟著亮了起來</span>。以此片段為契機,設計成<span
|
||||
class="mark_b">黑色系與黃色系</span>的色彩搭配,來記錄那瞬間的感動。
|
||||
</p>
|
||||
</div>
|
||||
<div class="mission-row__visual">
|
||||
<div class="mission-moment-wrap">
|
||||
<div class="mission-gif-frame" role="group" aria-label="回歸演唱會/黃色氣球海(16:9)">
|
||||
<!-- 若改為 GIF 動圖,將底下 src 換成 ./assets/images/mission-balloon-sea.gif 即可 -->
|
||||
<img src="./assets/images/黃色海洋.gif" alt="無限挑戰 六六歌2 放送畫面:全場黃色氣球海">
|
||||
</div>
|
||||
<span class="caption">
|
||||
<span class="arrow-icon" aria-hidden="true">↑</span>
|
||||
回歸演唱會的動人瞬間-黃色氣球海
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<section id="timeline" class="story-archive">
|
||||
<h2 class="section-title">跨時空軌跡</h2>
|
||||
<div class="subtitle-wrap">
|
||||
<span class="sub-title">SECHSKIES STORY ARCHIVE</span>
|
||||
</div>
|
||||
|
||||
<div class="merged-storyline">
|
||||
<article class="story-node" data-era="1997">
|
||||
<h3>傳奇的誕生:六道光芒劃破韓流夜空</h3>
|
||||
<p>1997年4月15日,水晶男孩以強悍的《學園別曲》為起點,「黑水晶|Rap與舞蹈」、「白水晶|主唱」的雙色魅力交織,奠定了
|
||||
K-POP第一代傳奇的地位,開創了屬於黃色海洋的盛世與巔峰。</p>
|
||||
<p>在那段被韓劇<a
|
||||
href="https://www.disneyplus.com/browse/entity-3979fb82-8681-44e8-b7be-e313091f0d73?distributionPartner=google"
|
||||
class="story-external-inline" target="_blank" rel="noopener noreferrer"><span
|
||||
class="story-external-inline__label">《請回答1997》</span><i
|
||||
class="fa-solid fa-arrow-up-right-from-square" aria-hidden="true"></i></a>奉為經典的歲月裡,水晶男孩與
|
||||
H.O.T.
|
||||
並稱為兩大巔峰。無論是雨中那場被劇集致敬的粉絲大戰,還是為了買票露宿街頭的狂熱,白與黃的旗幟對決,成了那個世代集體記憶的起點。</p>
|
||||
</article>
|
||||
|
||||
<article class="story-node" data-era="2000">
|
||||
<h3>遺憾的休止符:凍結有你的世界</h3>
|
||||
<p>在最燦爛的時刻,這首華麗的樂章卻被迫畫下了休止符,2000年5月正式解散。成員各自發展走出了不同道路,水晶進入休眠期。
|
||||
</p>
|
||||
<p>那一場如同劇中描寫般、讓全韓無數少女世界崩塌的夢想演唱會告別現場,將未完的旋律封存在冷冽的空氣中。這一停頓,就是長達十六年的靜默,成為我們心中最完整、卻也最令人心碎的凝煉模樣。
|
||||
</p>
|
||||
</article>
|
||||
<article class="story-node story-node--ebook-ssg2" data-era="2016">
|
||||
<h3>感動合體:那一晚,我們找回了完整</h3>
|
||||
<p>塵封十六年的時光被溫柔拂去,跨越六千多天的等待,黃色氣球海再次淹沒了上岩運動場。當六個身影重新站在一起,那幅曾被凍結在 2000
|
||||
年的畫面終於再次「溶解」並重合。那一晚,淚水證明了奇蹟真的存在,我們終於找回了那份久違的完整,以為故事從此能圓滿續寫。</p>
|
||||
<span class="timeline-ebook-cta" aria-label="傳奇書寫中,連結暫停">
|
||||
<span>點我見證傳奇</span><i class="fa-solid fa-hand-pointer" aria-hidden="true"></i>
|
||||
</span>
|
||||
</article>
|
||||
<article class="story-node" data-era="2016.05">
|
||||
<h3>從路人到鐵粉:從夢境進現實</h3>
|
||||
<p>當《無限挑戰》的燈光熄滅,原以為那場重逢只是曇花一現。當我們陷入瘋狂但卻不敢過度期待合體、只在螢幕前等待每個oppa消息的時光,終於盼到了 5月 11
|
||||
日與 YG的簽約消息,所有新舊小黃從絕望中打醒。從未知的空虛到塵埃落定的感動——原來這不是終點,奇蹟真的在現實生了根。</p>
|
||||
</article>
|
||||
<article class="story-node" data-era="2016.09">
|
||||
<h3>九月首場:黃色海洋裡的羈絆</h3>
|
||||
<p>四月的重逢是老黃們守候十六年的淚水;而九月的單獨演唱會,則讓無數新小黃見證了那份無法動搖的羈絆。在那片黃色海洋裡,我們不只愛上了水晶男孩,更愛上了他們與小黃之間的愛情。雖然遺憾沒能親眼看見六人並肩的畫面,但那股新舊交織的生命力,確實為水晶注入了新的靈魂。
|
||||
</p>
|
||||
</article>
|
||||
<article class="story-node" data-era="2016.12">
|
||||
<h3>第六顆水晶:另一種形式的陪伴</h3>
|
||||
<p>而志溶雖然未參與合體,卻在十二月聖誕夜那場釜山演唱會落幕當天,帶著孩子在《超人回來了》的預告驚喜現身。這不是告別,而是他選擇以另一種最真實、最溫馨的形式,在現實生活中繼續陪伴著大家。舞台上的空位雖然令人難過,但看到他帶著孩子幸福的模樣,我們才明白:原來水晶與粉絲的羈絆,早已超越了表演的定義,而是要在彼此的生活裡,一起寫下新的篇章。
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article class="story-node story-node--tbc" data-era="未完">
|
||||
<h3>未完待續</h3>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
<!--
|
||||
<section id="story" class="story-archive">
|
||||
<h2 class="section-title">傳奇的轉折</h2>
|
||||
<div class="subtitle-wrap">
|
||||
<span class="sub-title">PLOT TWIST</span>
|
||||
</div>
|
||||
<p class="intro-text">
|
||||
像劇情的反轉一樣過癮:這幾個節點,剛好是許多人從「旁觀綜藝」滑進「正式入坑」的轉軌。若想讀對白級細節,請開
|
||||
<a href="totoga2/readable.html">六六歌2 整合專區</a>(影片/電子書/紀實長文八章,同一頁切換模式即可)。
|
||||
</p>
|
||||
<div class="story-ebook-cta">
|
||||
<a href="totoga2/readable.html#ebook" class="btn story-ebook-btn">開啟六六歌2 紀實電子書</a>
|
||||
<a href="totoga2/readable.html" class="btn story-ebook-btn">六六歌2 整合專區</a>
|
||||
</div>
|
||||
|
||||
<div class="merged-storyline">
|
||||
<article id="special" class="story-node" data-era="六六歌">
|
||||
<h3>六六歌實錄</h3>
|
||||
<p>把懸念、試探與哭點縫在同一條時間軸上;很多人第一次真正把「水晶男孩」打進搜尋框,就是從這種瘋狂的剪輯節奏開始。</p>
|
||||
<p><a href="totoga2/readable.html#ssg2">對照這一段幕後敘事</a></p>
|
||||
</article>
|
||||
<article id="negotiate" class="story-node" data-era="交涉">
|
||||
<h3>命運的交涉</h3>
|
||||
<p>KTV、游擊演唱會規則、與其說講道理不如說把真心擺上桌面——交涉的不是合約字面,而是還願不願意再一次肩並肩。</p>
|
||||
<p><a href="totoga2/readable.html#negotiate">讀交涉與對話肌理</a></p>
|
||||
</article>
|
||||
<article id="complete" class="story-node" data-era="歸位">
|
||||
<h3>拼圖的歸位</h3>
|
||||
<p>變數一個個被排除之後,驚喜接上登場段落;缺一角舞台的視覺,終於對齊觀眾席上堅守的那片黃。</p>
|
||||
<p><a href="totoga2/readable.html#gather">從「召集」段開始補這條線</a></p>
|
||||
</article>
|
||||
<article id="past" class="story-node" data-era="最初">
|
||||
<h3>巔峰與雨天</h3>
|
||||
<p>急凍、告別、各自的跑道——並不是要你沉浸遺憾,而是讓你懂:後來每一次亮燈,為什麼會更值得尖叫。</p>
|
||||
<p><a href="totoga2/readable.html#sechskies-profile">讀這條脈絡的起點</a></p>
|
||||
</article>
|
||||
</div>
|
||||
</section> -->
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1,155 +1,155 @@
|
||||
<!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="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="member-crystal-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">BLACK KIES · WHITE KIES</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></nav>
|
||||
|
||||
<canvas id="particles"></canvas>
|
||||
|
||||
<main class="content-container member-crystal-main" id="crystal-board">
|
||||
<p class="member-crystal-lead">
|
||||
團名源自德語「六顆水晶」:六位成員依聲線與舞台角色分為<strong>黑水晶</strong>(Rap/舞蹈)與<strong>白水晶</strong>(主唱),並排成經典的黑白分流印象。
|
||||
</p>
|
||||
|
||||
<!-- 2×4 交錯:上排左三黑水晶、右一介紹;下排左一介紹、右三白水晶 -->
|
||||
<div class="member-crystal-board" role="region" aria-label="黑水晶與白水晶成員配置">
|
||||
<div class="member-crystal-cell member-crystal-cell--poster" data-area="b1">
|
||||
<article class="member-poster member-poster--black" aria-labelledby="poster-ejw">
|
||||
<div class="member-poster__wanted">BLACK</div>
|
||||
<div class="member-poster__sheet">
|
||||
<div class="member-poster__photo">
|
||||
<img src="../assets/images/Eun Ji Won.jpeg" alt="殷志源肖像" width="280" height="340" loading="lazy">
|
||||
</div>
|
||||
<p class="member-poster__role">Leader · Rap · Dance</p>
|
||||
<h2 class="member-poster__name" id="poster-ejw">殷志源</h2>
|
||||
<p class="member-poster__name-en">EUN JI WON</p>
|
||||
<p class="member-poster__stamp">BLACK KIES</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="member-crystal-cell member-crystal-cell--poster" data-area="b2">
|
||||
<article class="member-poster member-poster--black" aria-labelledby="poster-ljj">
|
||||
<div class="member-poster__wanted">BLACK</div>
|
||||
<div class="member-poster__sheet">
|
||||
<div class="member-poster__photo">
|
||||
<img src="../assets/images/member/1595330620293.jpg" alt="李宰鎮肖像" width="280" height="340" loading="lazy">
|
||||
</div>
|
||||
<p class="member-poster__role">Rap · Dance</p>
|
||||
<h2 class="member-poster__name" id="poster-ljj">李宰鎮</h2>
|
||||
<p class="member-poster__name-en">LEE JAE JIN</p>
|
||||
<p class="member-poster__stamp">BLACK KIES</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="member-crystal-cell member-crystal-cell--poster" data-area="b3">
|
||||
<article class="member-poster member-poster--black" aria-labelledby="poster-kjd">
|
||||
<div class="member-poster__wanted">BLACK</div>
|
||||
<div class="member-poster__sheet">
|
||||
<div class="member-poster__photo">
|
||||
<img src="../assets/images/member/4c0e013b341e85622979475bc230719b.jpg" alt="金在德肖像" width="280" height="340" loading="lazy">
|
||||
</div>
|
||||
<p class="member-poster__role">Rap · Dance</p>
|
||||
<h2 class="member-poster__name" id="poster-kjd">金在德</h2>
|
||||
<p class="member-poster__name-en">KIM JAE DUC</p>
|
||||
<p class="member-poster__stamp">BLACK KIES</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="member-crystal-cell member-crystal-cell--intro member-crystal-cell--intro-black" data-area="intro-black">
|
||||
<div class="member-crystal-intro member-crystal-intro--black">
|
||||
<h2 class="member-crystal-intro__title">黑水晶</h2>
|
||||
<p class="member-crystal-intro__en">Black Kies</p>
|
||||
<p>殷志源、李宰鎮、金在德:偏重節奏與舞台張力的路線,Rap 與舞蹈撐起現場骨架,也是團體在舞曲與嘻哈語彙上最容易被第一眼認出的「深色稜線」。</p>
|
||||
<p>視覺上常以俐落、酷感與強烈節拍感與白水晶區隔;在編曲結構裡,常負責推進段落與製造記憶點的「引擎室」。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="member-crystal-cell member-crystal-cell--intro member-crystal-cell--intro-white" data-area="intro-white">
|
||||
<div class="member-crystal-intro member-crystal-intro--white">
|
||||
<h2 class="member-crystal-intro__title">白水晶</h2>
|
||||
<p class="member-crystal-intro__en">White Kies</p>
|
||||
<p>姜成勳、高志溶、張水院:以主唱與和聲線條為核心,負責旋律的延展與情緒堆疊;許多主打裡讓人一聽就忘不掉的副歌與高音色彩,多半與這條「亮色聲帶」有關。</p>
|
||||
<p>與黑水晶並列時,剛好形成「節奏骨架 × 旋律羽翼」的經典分工想像,也是團名裡「水晶」雙色對照最常見的說法來源。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="member-crystal-cell member-crystal-cell--poster" data-area="w1">
|
||||
<article class="member-poster member-poster--white" aria-labelledby="poster-ksh">
|
||||
<div class="member-poster__wanted">WHITE</div>
|
||||
<div class="member-poster__sheet">
|
||||
<div class="member-poster__photo">
|
||||
<img src="../assets/images/member/92599-502183.jpg" alt="姜成勳肖像" width="280" height="340" loading="lazy">
|
||||
</div>
|
||||
<p class="member-poster__role">Main Vocal</p>
|
||||
<h2 class="member-poster__name" id="poster-ksh">姜成勳</h2>
|
||||
<p class="member-poster__name-en">KANG SUNG HOON</p>
|
||||
<p class="member-poster__stamp">WHITE KIES</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="member-crystal-cell member-crystal-cell--poster" data-area="w2">
|
||||
<article class="member-poster member-poster--white" aria-labelledby="poster-kjy">
|
||||
<div class="member-poster__wanted">WHITE</div>
|
||||
<div class="member-poster__sheet">
|
||||
<div class="member-poster__photo">
|
||||
<img src="../assets/images/member/noona7273___Bt7EZHRAGgs___.jpg" alt="高志溶肖像" width="280" height="340" loading="lazy">
|
||||
</div>
|
||||
<p class="member-poster__role">Vocal</p>
|
||||
<h2 class="member-poster__name" id="poster-kjy">高志溶</h2>
|
||||
<p class="member-poster__name-en">KO JI YONG</p>
|
||||
<p class="member-poster__stamp">WHITE KIES</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="member-crystal-cell member-crystal-cell--poster" data-area="w3">
|
||||
<article class="member-poster member-poster--white" aria-labelledby="poster-jsw">
|
||||
<div class="member-poster__wanted">WHITE</div>
|
||||
<div class="member-poster__sheet">
|
||||
<div class="member-poster__photo">
|
||||
<img src="../assets/images/member/seven7lai_1___BuRBxcPAIsP___.jpg" alt="張水院肖像" width="280" height="340" loading="lazy">
|
||||
</div>
|
||||
<p class="member-poster__role">Vocal</p>
|
||||
<h2 class="member-poster__name" id="poster-jsw">張水院</h2>
|
||||
<p class="member-poster__name-en">JANG SU WON</p>
|
||||
<p class="member-poster__stamp">WHITE KIES</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<p>SECHSKIES Fanpage © 2026 — 六顆水晶 · 黑白分流</p>
|
||||
<a href="https://jekkinoopy.github.io/Portfolio/" class="studio-link" target="_blank" rel="noopener noreferrer">
|
||||
Design by <span class="mark_b">Jekkinoopy Studio</span>
|
||||
</a>
|
||||
</footer>
|
||||
|
||||
<script src="../assets/js/portal-nav.js"></script>
|
||||
<script src="../assets/js/particles.js"></script>
|
||||
</body>
|
||||
|
||||
</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="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="member-crystal-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">BLACK KIES · WHITE KIES</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></nav>
|
||||
|
||||
<canvas id="particles"></canvas>
|
||||
|
||||
<main class="content-container member-crystal-main" id="crystal-board">
|
||||
<p class="member-crystal-lead">
|
||||
團名源自德語「六顆水晶」:六位成員依聲線與舞台角色分為<strong>黑水晶</strong>(Rap/舞蹈)與<strong>白水晶</strong>(主唱),並排成經典的黑白分流印象。
|
||||
</p>
|
||||
|
||||
<!-- 2×4 交錯:上排左三黑水晶、右一介紹;下排左一介紹、右三白水晶 -->
|
||||
<div class="member-crystal-board" role="region" aria-label="黑水晶與白水晶成員配置">
|
||||
<div class="member-crystal-cell member-crystal-cell--poster" data-area="b1">
|
||||
<article class="member-poster member-poster--black" aria-labelledby="poster-ejw">
|
||||
<div class="member-poster__wanted">BLACK</div>
|
||||
<div class="member-poster__sheet">
|
||||
<div class="member-poster__photo">
|
||||
<img src="../assets/images/Eun Ji Won.jpeg" alt="殷志源肖像" width="280" height="340" loading="lazy">
|
||||
</div>
|
||||
<p class="member-poster__role">Leader · Rap · Dance</p>
|
||||
<h2 class="member-poster__name" id="poster-ejw">殷志源</h2>
|
||||
<p class="member-poster__name-en">EUN JI WON</p>
|
||||
<p class="member-poster__stamp">BLACK KIES</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="member-crystal-cell member-crystal-cell--poster" data-area="b2">
|
||||
<article class="member-poster member-poster--black" aria-labelledby="poster-ljj">
|
||||
<div class="member-poster__wanted">BLACK</div>
|
||||
<div class="member-poster__sheet">
|
||||
<div class="member-poster__photo">
|
||||
<img src="../assets/images/member/1595330620293.jpg" alt="李宰鎮肖像" width="280" height="340" loading="lazy">
|
||||
</div>
|
||||
<p class="member-poster__role">Rap · Dance</p>
|
||||
<h2 class="member-poster__name" id="poster-ljj">李宰鎮</h2>
|
||||
<p class="member-poster__name-en">LEE JAE JIN</p>
|
||||
<p class="member-poster__stamp">BLACK KIES</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="member-crystal-cell member-crystal-cell--poster" data-area="b3">
|
||||
<article class="member-poster member-poster--black" aria-labelledby="poster-kjd">
|
||||
<div class="member-poster__wanted">BLACK</div>
|
||||
<div class="member-poster__sheet">
|
||||
<div class="member-poster__photo">
|
||||
<img src="../assets/images/member/4c0e013b341e85622979475bc230719b.jpg" alt="金在德肖像" width="280" height="340" loading="lazy">
|
||||
</div>
|
||||
<p class="member-poster__role">Rap · Dance</p>
|
||||
<h2 class="member-poster__name" id="poster-kjd">金在德</h2>
|
||||
<p class="member-poster__name-en">KIM JAE DUC</p>
|
||||
<p class="member-poster__stamp">BLACK KIES</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="member-crystal-cell member-crystal-cell--intro member-crystal-cell--intro-black" data-area="intro-black">
|
||||
<div class="member-crystal-intro member-crystal-intro--black">
|
||||
<h2 class="member-crystal-intro__title">黑水晶</h2>
|
||||
<p class="member-crystal-intro__en">Black Kies</p>
|
||||
<p>殷志源、李宰鎮、金在德:偏重節奏與舞台張力的路線,Rap 與舞蹈撐起現場骨架,也是團體在舞曲與嘻哈語彙上最容易被第一眼認出的「深色稜線」。</p>
|
||||
<p>視覺上常以俐落、酷感與強烈節拍感與白水晶區隔;在編曲結構裡,常負責推進段落與製造記憶點的「引擎室」。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="member-crystal-cell member-crystal-cell--intro member-crystal-cell--intro-white" data-area="intro-white">
|
||||
<div class="member-crystal-intro member-crystal-intro--white">
|
||||
<h2 class="member-crystal-intro__title">白水晶</h2>
|
||||
<p class="member-crystal-intro__en">White Kies</p>
|
||||
<p>姜成勳、高志溶、張水院:以主唱與和聲線條為核心,負責旋律的延展與情緒堆疊;許多主打裡讓人一聽就忘不掉的副歌與高音色彩,多半與這條「亮色聲帶」有關。</p>
|
||||
<p>與黑水晶並列時,剛好形成「節奏骨架 × 旋律羽翼」的經典分工想像,也是團名裡「水晶」雙色對照最常見的說法來源。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="member-crystal-cell member-crystal-cell--poster" data-area="w1">
|
||||
<article class="member-poster member-poster--white" aria-labelledby="poster-ksh">
|
||||
<div class="member-poster__wanted">WHITE</div>
|
||||
<div class="member-poster__sheet">
|
||||
<div class="member-poster__photo">
|
||||
<img src="../assets/images/member/92599-502183.jpg" alt="姜成勳肖像" width="280" height="340" loading="lazy">
|
||||
</div>
|
||||
<p class="member-poster__role">Main Vocal</p>
|
||||
<h2 class="member-poster__name" id="poster-ksh">姜成勳</h2>
|
||||
<p class="member-poster__name-en">KANG SUNG HOON</p>
|
||||
<p class="member-poster__stamp">WHITE KIES</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="member-crystal-cell member-crystal-cell--poster" data-area="w2">
|
||||
<article class="member-poster member-poster--white" aria-labelledby="poster-kjy">
|
||||
<div class="member-poster__wanted">WHITE</div>
|
||||
<div class="member-poster__sheet">
|
||||
<div class="member-poster__photo">
|
||||
<img src="../assets/images/member/noona7273___Bt7EZHRAGgs___.jpg" alt="高志溶肖像" width="280" height="340" loading="lazy">
|
||||
</div>
|
||||
<p class="member-poster__role">Vocal</p>
|
||||
<h2 class="member-poster__name" id="poster-kjy">高志溶</h2>
|
||||
<p class="member-poster__name-en">KO JI YONG</p>
|
||||
<p class="member-poster__stamp">WHITE KIES</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="member-crystal-cell member-crystal-cell--poster" data-area="w3">
|
||||
<article class="member-poster member-poster--white" aria-labelledby="poster-jsw">
|
||||
<div class="member-poster__wanted">WHITE</div>
|
||||
<div class="member-poster__sheet">
|
||||
<div class="member-poster__photo">
|
||||
<img src="../assets/images/member/seven7lai_1___BuRBxcPAIsP___.jpg" alt="張水院肖像" width="280" height="340" loading="lazy">
|
||||
</div>
|
||||
<p class="member-poster__role">Vocal</p>
|
||||
<h2 class="member-poster__name" id="poster-jsw">張水院</h2>
|
||||
<p class="member-poster__name-en">JANG SU WON</p>
|
||||
<p class="member-poster__stamp">WHITE KIES</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<p>SECHSKIES Fanpage © 2026 — 六顆水晶 · 黑白分流</p>
|
||||
<a href="https://jekkinoopy.github.io/Portfolio/" class="studio-link" target="_blank" rel="noopener noreferrer">
|
||||
Design by <span class="mark_b">Jekkinoopy Studio</span>
|
||||
</a>
|
||||
</footer>
|
||||
|
||||
<script src="../assets/js/portal-nav.js"></script>
|
||||
<script src="../assets/js/particles.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1,169 +1,169 @@
|
||||
<!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="split-nav.css">
|
||||
</head>
|
||||
|
||||
<body class="ebook-ssg2-page totoga2-page totoga2-ebook-copy-page">
|
||||
<header class="inner-page-header">
|
||||
<div class="header-inner site-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>
|
||||
|
||||
<nav class="ebook-back-link content-container totoga2-split-crossnav" aria-label="六六歌2 閱讀入口">
|
||||
<a href="timeline.html" class="btn" title="時間軸與紀實八章長文單頁">時間軸</a>
|
||||
<a href="ebook.html" class="btn" aria-current="page" title="紀實電子書內容獨立成頁">電子書</a>
|
||||
<a href="readable.html" class="btn" title="單頁整合:影片/電子書/長文模式切換與八章錨點">圖文好讀版</a>
|
||||
<a href="video.html" class="btn" title="無限挑戰 · 六六歌2 嵌入影片單頁">影片</a>
|
||||
</nav>
|
||||
|
||||
<div class="content-container ebook-main">
|
||||
<section class="ebook-intro section" aria-label="電子書說明">
|
||||
<h2 class="section-title">紀實電子書</h2>
|
||||
<p class="ebook-intro-lead">
|
||||
四月那場重逢,不只是一集綜藝,而是塵封十六年的旋律,終於在笑聲與淚水裡再次被聽見。這本紀實電子書留住《無限挑戰》六六歌2
|
||||
的每一頁:有驚喜、有拉扯,也有那些當時說不出口的想念。。
|
||||
</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">
|
||||
<div class="flip-ebook-aspect">
|
||||
<iframe src="https://online.fliphtml5.com/tjyxm/vqff/" title="2023_電子書_無限挑戰六六歌2_final跨頁"
|
||||
allowfullscreen></iframe>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<div class="flip-ebook-shell">
|
||||
<div id="book-container" class="flip-ebook-aspect flip-ebook-aspect--pageflip">
|
||||
<!-- PDF.js + PageFlip 會在此產生頁面 -->
|
||||
<div id="my-flipbook"></div>
|
||||
</div>
|
||||
</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>
|
||||
<!-- 1. 引入 PDF.js 核心庫 -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
|
||||
<!-- 2. 引入 PageFlip -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/page-flip/dist/js/page-flip.browser.js"></script>
|
||||
<script>
|
||||
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';
|
||||
|
||||
/** 專案內實際存在的 PDF(原 totoga2/ebook/totoga2_ebook.pdf 尚未建檔) */
|
||||
var EBOOK_PDF_URL = '../assets/images/totoga2/totoga2.pdf';
|
||||
|
||||
function showEbookError(message) {
|
||||
var box = document.getElementById('my-flipbook');
|
||||
if (!box) return;
|
||||
box.innerHTML = '<p class="ebook-pdf-error" role="alert">' + message + '</p>';
|
||||
}
|
||||
|
||||
async function initEbook(pdfUrl) {
|
||||
var container = document.getElementById('my-flipbook');
|
||||
if (!container) throw new Error('找不到 #my-flipbook');
|
||||
if (typeof pdfjsLib === 'undefined') throw new Error('PDF.js 未載入');
|
||||
if (typeof St === 'undefined' || !St.PageFlip) throw new Error('PageFlip(St.PageFlip)未載入');
|
||||
|
||||
var loadingTask = pdfjsLib.getDocument(pdfUrl);
|
||||
var pdf = await loadingTask.promise;
|
||||
|
||||
/* 第 1 頁為封面;內文比例以第 2 頁為準(與 PageFlip showCover 一致) */
|
||||
var sizePageIndex = pdf.numPages >= 2 ? 2 : 1;
|
||||
var sizePage = await pdf.getPage(sizePageIndex);
|
||||
var natural = sizePage.getViewport({ scale: 1 });
|
||||
var shell = document.querySelector('.flip-ebook-shell');
|
||||
var bookHost = document.getElementById('book-container');
|
||||
if (bookHost) {
|
||||
bookHost.style.width = '100%';
|
||||
bookHost.style.maxWidth = '100%';
|
||||
bookHost.style.marginLeft = '0';
|
||||
bookHost.style.marginRight = '0';
|
||||
}
|
||||
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 });
|
||||
|
||||
var canvas = document.createElement('canvas');
|
||||
var context = canvas.getContext('2d');
|
||||
canvas.height = viewport.height;
|
||||
canvas.width = viewport.width;
|
||||
|
||||
await page.render({ canvasContext: context, viewport: viewport }).promise;
|
||||
|
||||
var pageElement = document.createElement('div');
|
||||
pageElement.className = 'page';
|
||||
if (i === 1) {
|
||||
pageElement.setAttribute('data-density', 'hard');
|
||||
} else if (i === pdf.numPages) {
|
||||
pageElement.setAttribute('data-density', 'hard');
|
||||
}
|
||||
pageElement.appendChild(canvas);
|
||||
container.appendChild(pageElement);
|
||||
}
|
||||
|
||||
var pageFlip = new St.PageFlip(container, {
|
||||
width: pageW,
|
||||
height: pageH,
|
||||
/* stretch 在寬容器會固定走 landscape(總寬=2×半頁),跨頁 PDF 會被切成左空白+右半頁 */
|
||||
size: 'fixed',
|
||||
usePortrait: true,
|
||||
showCover: true,
|
||||
startPage: 0,
|
||||
autoSize: true,
|
||||
drawShadow: true,
|
||||
maxShadowOpacity: 0.4
|
||||
});
|
||||
pageFlip.loadFromHTML(document.querySelectorAll('#my-flipbook .page'));
|
||||
}
|
||||
|
||||
initEbook(EBOOK_PDF_URL).catch(function (err) {
|
||||
console.error(err);
|
||||
showEbookError(
|
||||
'電子書 PDF 無法載入或翻頁初始化失敗。若用本機直接開檔案(file://),請改由本機伺服器開啟;並確認路徑存在:<code>'
|
||||
+ EBOOK_PDF_URL + '</code>'
|
||||
);
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
<!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="split-nav.css">
|
||||
</head>
|
||||
|
||||
<body class="ebook-ssg2-page totoga2-page totoga2-ebook-copy-page">
|
||||
<header class="inner-page-header">
|
||||
<div class="header-inner site-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>
|
||||
|
||||
<nav class="ebook-back-link content-container totoga2-split-crossnav" aria-label="六六歌2 閱讀入口">
|
||||
<a href="timeline.html" class="btn" title="時間軸與紀實八章長文單頁">時間軸</a>
|
||||
<a href="ebook.html" class="btn" aria-current="page" title="紀實電子書內容獨立成頁">電子書</a>
|
||||
<a href="readable.html" class="btn" title="單頁整合:影片/電子書/長文模式切換與八章錨點">圖文好讀版</a>
|
||||
<a href="video.html" class="btn" title="無限挑戰 · 六六歌2 嵌入影片單頁">影片</a>
|
||||
</nav>
|
||||
|
||||
<div class="content-container ebook-main">
|
||||
<section class="ebook-intro section" aria-label="電子書說明">
|
||||
<h2 class="section-title">紀實電子書</h2>
|
||||
<p class="ebook-intro-lead">
|
||||
四月那場重逢,不只是一集綜藝,而是塵封十六年的旋律,終於在笑聲與淚水裡再次被聽見。這本紀實電子書留住《無限挑戰》六六歌2
|
||||
的每一頁:有驚喜、有拉扯,也有那些當時說不出口的想念。。
|
||||
</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">
|
||||
<div class="flip-ebook-aspect">
|
||||
<iframe src="https://online.fliphtml5.com/tjyxm/vqff/" title="2023_電子書_無限挑戰六六歌2_final跨頁"
|
||||
allowfullscreen></iframe>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<div class="flip-ebook-shell">
|
||||
<div id="book-container" class="flip-ebook-aspect flip-ebook-aspect--pageflip">
|
||||
<!-- PDF.js + PageFlip 會在此產生頁面 -->
|
||||
<div id="my-flipbook"></div>
|
||||
</div>
|
||||
</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>
|
||||
<!-- 1. 引入 PDF.js 核心庫 -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
|
||||
<!-- 2. 引入 PageFlip -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/page-flip/dist/js/page-flip.browser.js"></script>
|
||||
<script>
|
||||
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';
|
||||
|
||||
/** 專案內實際存在的 PDF(原 totoga2/ebook/totoga2_ebook.pdf 尚未建檔) */
|
||||
var EBOOK_PDF_URL = '../assets/images/totoga2/totoga2.pdf';
|
||||
|
||||
function showEbookError(message) {
|
||||
var box = document.getElementById('my-flipbook');
|
||||
if (!box) return;
|
||||
box.innerHTML = '<p class="ebook-pdf-error" role="alert">' + message + '</p>';
|
||||
}
|
||||
|
||||
async function initEbook(pdfUrl) {
|
||||
var container = document.getElementById('my-flipbook');
|
||||
if (!container) throw new Error('找不到 #my-flipbook');
|
||||
if (typeof pdfjsLib === 'undefined') throw new Error('PDF.js 未載入');
|
||||
if (typeof St === 'undefined' || !St.PageFlip) throw new Error('PageFlip(St.PageFlip)未載入');
|
||||
|
||||
var loadingTask = pdfjsLib.getDocument(pdfUrl);
|
||||
var pdf = await loadingTask.promise;
|
||||
|
||||
/* 第 1 頁為封面;內文比例以第 2 頁為準(與 PageFlip showCover 一致) */
|
||||
var sizePageIndex = pdf.numPages >= 2 ? 2 : 1;
|
||||
var sizePage = await pdf.getPage(sizePageIndex);
|
||||
var natural = sizePage.getViewport({ scale: 1 });
|
||||
var shell = document.querySelector('.flip-ebook-shell');
|
||||
var bookHost = document.getElementById('book-container');
|
||||
if (bookHost) {
|
||||
bookHost.style.width = '100%';
|
||||
bookHost.style.maxWidth = '100%';
|
||||
bookHost.style.marginLeft = '0';
|
||||
bookHost.style.marginRight = '0';
|
||||
}
|
||||
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 });
|
||||
|
||||
var canvas = document.createElement('canvas');
|
||||
var context = canvas.getContext('2d');
|
||||
canvas.height = viewport.height;
|
||||
canvas.width = viewport.width;
|
||||
|
||||
await page.render({ canvasContext: context, viewport: viewport }).promise;
|
||||
|
||||
var pageElement = document.createElement('div');
|
||||
pageElement.className = 'page';
|
||||
if (i === 1) {
|
||||
pageElement.setAttribute('data-density', 'hard');
|
||||
} else if (i === pdf.numPages) {
|
||||
pageElement.setAttribute('data-density', 'hard');
|
||||
}
|
||||
pageElement.appendChild(canvas);
|
||||
container.appendChild(pageElement);
|
||||
}
|
||||
|
||||
var pageFlip = new St.PageFlip(container, {
|
||||
width: pageW,
|
||||
height: pageH,
|
||||
/* stretch 在寬容器會固定走 landscape(總寬=2×半頁),跨頁 PDF 會被切成左空白+右半頁 */
|
||||
size: 'fixed',
|
||||
usePortrait: true,
|
||||
showCover: true,
|
||||
startPage: 0,
|
||||
autoSize: true,
|
||||
drawShadow: true,
|
||||
maxShadowOpacity: 0.4
|
||||
});
|
||||
pageFlip.loadFromHTML(document.querySelectorAll('#my-flipbook .page'));
|
||||
}
|
||||
|
||||
initEbook(EBOOK_PDF_URL).catch(function (err) {
|
||||
console.error(err);
|
||||
showEbookError(
|
||||
'電子書 PDF 無法載入或翻頁初始化失敗。若用本機直接開檔案(file://),請改由本機伺服器開啟;並確認路徑存在:<code>'
|
||||
+ EBOOK_PDF_URL + '</code>'
|
||||
);
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -28,7 +28,7 @@
|
||||
box-sizing: border-box;
|
||||
position: static;
|
||||
z-index: auto;
|
||||
background: var(--surface);
|
||||
background: var(--color-surface);
|
||||
border: 1px solid rgba(255, 204, 0, 0.15);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 14px 34px rgba(0, 0, 0, 0.15);
|
||||
@@ -50,7 +50,7 @@
|
||||
body.ebook-ssg2-page.totoga2-page #totoga2-reader .container:has(> .container41):has(> .container42):has(> .container43):has(> .container44) {
|
||||
/* padding: 0.75rem; */
|
||||
gap: 0.75rem;
|
||||
/* background: var(--surface);
|
||||
/* background: var(--color-surface);
|
||||
border: 1px solid rgba(255, 204, 0, 0.15); */
|
||||
border-radius: 16px;
|
||||
/* box-shadow: 0 14px 34px rgba(0, 0, 0, 0.15); */
|
||||
@@ -407,7 +407,7 @@
|
||||
max-width: 42rem;
|
||||
margin: 0.5rem auto 0.875rem;
|
||||
padding-left: 0.75rem;
|
||||
border-left: 3px solid var(--primary);
|
||||
border-left: 3px solid var(--color-brand);
|
||||
color: #2a2a2a;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
@@ -419,7 +419,7 @@
|
||||
max-width: 42rem;
|
||||
margin: 0.5rem auto 0.875rem;
|
||||
padding-left: 0.75rem;
|
||||
border-left: 3px solid var(--primary);
|
||||
border-left: 3px solid var(--color-brand);
|
||||
color: #2a2a2a;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
@@ -762,8 +762,8 @@
|
||||
</div>
|
||||
<div class="container21">
|
||||
<section class="ebook-section"
|
||||
style="background-color: var(--primary); color: var(--black); height:100%;">
|
||||
<h3 style="color:var(--black); border-left-color:var(--black)">保密協議與解散緣由</h3>
|
||||
style="background-color: var(--color-brand); color: var(--color-bg-raised); height:100%;">
|
||||
<h3 style="color:var(--color-bg-raised); border-left-color:var(--color-bg-raised)">保密協議與解散緣由</h3>
|
||||
<p class="ebook-intro-lead">
|
||||
進而聊到解散情況,當時解散的原因是不滿公司的壓榨,原本想集體離開公司,卻被公司強制解散…當時鬧得很大,父母都到公司開會了...
|
||||
</p>
|
||||
@@ -900,8 +900,8 @@
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<section class="ebook-section" style="background-color: var(--black); color: #fff;">
|
||||
<h2 class="section-title" style="color: var(--primary); border-left-color: var(--primary);">
|
||||
<section class="ebook-section" style="background-color: var(--color-bg-raised); color: #fff;">
|
||||
<h2 class="section-title" style="color: var(--color-brand); border-left-color: var(--color-brand);">
|
||||
請脫下眼罩:累積16年的情感爆發</h2>
|
||||
<p class="ebook-intro-lead" style="color: #eee;">
|
||||
高志溶獨自先到達休息室等待,其他五位成員率先出場。主持人在成員上台前,和台下粉絲約定好安靜,等大家脫下眼罩才能發出聲音。成員們一進場時,台上台下一片寂寥與黑暗,戴著眼罩的成員們此刻非常緊張,就連平常看似無所畏懼的隊長殷志源都緊張到伸出手找金在德牽著。
|
||||
@@ -909,7 +909,7 @@
|
||||
<p class="ebook-intro-lead" style="color: #eee;">成員們一句時隔 16
|
||||
年的問候:「大家好,我們是水晶男孩!」台下粉絲已淚光閃爍!成勳問:「我們的小黃,來了很多嗎?」台下還是鴉雀無聲,讓成員們愈來愈沒信心,嗓音也逐漸變小...金在德表示雖然不知道現場來了多少人,即使只來了
|
||||
10 個人,他們也會開心地獻上表演...</p>
|
||||
<p class="ebook-intro-lead" style="color: var(--primary); font-weight: bold;">
|
||||
<p class="ebook-intro-lead" style="color: var(--color-brand); font-weight: bold;">
|
||||
成員們依序脫下眼罩,此時台下還是一片黑茫茫,只有零星的黃色燈光在閃爍著。最後張水院和李宰鎮同時脫下眼罩時,燈光一打,一望無際的黃色波浪伴隨著熱烈的歡呼聲,如山呼海嘯般傳來!
|
||||
</p>
|
||||
<p class="ebook-intro-lead" style="color: #eee;">全場小黃累積了 16
|
||||
@@ -958,7 +958,7 @@
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<section class="ebook-section" style="border: 2px solid var(--primary);">
|
||||
<section class="ebook-section" style="border: 2px solid var(--color-brand);">
|
||||
<h2 class="section-title">安可:世界上最感動的結局</h2>
|
||||
<p class="ebook-intro-lead">
|
||||
結束了最後的問候後,帶來了〈Couple〉做為安可曲。金在德興奮地跳著舞脫離了隊形,張水院轉頭發現,寵溺地笑著看他要走去哪裡。金在德走到一半回頭看成員,才發現只有自己離開舞台中心,害羞地笑著走回原位,相當可愛!
|
||||
@@ -966,7 +966,7 @@
|
||||
<p class="ebook-intro-lead">
|
||||
付出長達六個月心血打造的舞台,因為拿著黃氣球的粉絲才能聚在一起,水晶男孩回到他們最華麗的時期;小黃們也回到最熱情的時期!〈Couple〉的歌詞說:「現在,我不再是自己孤單一人,而是有你們在身邊」彷彿就在述說這一刻!
|
||||
</p>
|
||||
<p class="ebook-intro-lead" style="font-weight: bold; color: var(--dark-yellow);">
|
||||
<p class="ebook-intro-lead" style="font-weight: bold; color: var(--color-brand-dark);">
|
||||
六個人一起跳著舞,聽著他們的歌曲沉浸在幸福中,這是世界上最讓他們感動的結局!本特輯搞笑又感動,長久羈絆的情感令人動容,千萬不要錯過。</p>
|
||||
<p class="ebook-intro-lead"
|
||||
style="text-align: center; margin-top: 1.25rem; font-size: 1rem; letter-spacing: 0.12em;">
|
||||
|
||||
@@ -1,87 +1,87 @@
|
||||
# 圖文好讀版 · 稿本對照表
|
||||
|
||||
站主自用:只列**有落差**的項目;四檔皆齊的不重複寫。路徑均相對 `totoga2/`。
|
||||
|
||||
---
|
||||
|
||||
## 1. 檔案總覽
|
||||
|
||||
| 檔案 | 行數(約) | 大小(約) | 定位 |
|
||||
|------|------------|------------|------|
|
||||
| **`readable.html`** | 781 | 52 KB | **正式版**(對外) |
|
||||
| **`readable copy 2.html`** | 964 | 68 KB | 版型同正式版 + **全章**(補稿首選) |
|
||||
| **`readable copy.html`** | 535 | 37 KB | 全章文字、`intro-text`(對句用) |
|
||||
| **`readable copy 3.html`** | 908 | 35 KB | HTML 僅開頭;**全文在 `</html>` 後註解** |
|
||||
|
||||
---
|
||||
|
||||
## 2. 版型差異(非全檔一致者)
|
||||
|
||||
| 項目 | readable | copy 2 | copy | copy 3 |
|
||||
|------|:--------:|:------:|:----:|:------:|
|
||||
| `ebook-main` + 頁首導語 | ✓ | ✓ | 部分 | ✗ |
|
||||
| `readable-col-*` 圖列 | ✓ | ✓ | 簡化 | ✗ |
|
||||
| `ebook-ssg2-page` 樣式 | ✓ | ✓ | ✗ | 部分 |
|
||||
| 八章錨點 `#ssg2` … `#final-stage` | ✗ | ✗ | ✗ | ✗ |
|
||||
| `totoga2.js` | ✗ | ✗ | ✗ | ✓(誤載) |
|
||||
| 檔尾 PDF 註解 | ✗ | ✗ | ✗ | ✓(約 600 行) |
|
||||
|
||||
---
|
||||
|
||||
## 3. 內文:正式版缺或與複本不同
|
||||
|
||||
**正式版目前寫到:**「嚴肅話題下的爆笑神反轉」止(約 `readable.html` 第 760 行前)。
|
||||
|
||||
| 區塊 | 正式版 | 複本/備註 |
|
||||
|------|--------|------------|
|
||||
| 傳奇男團 · 2000/5/18 解散、16 年未合體 | **缺** | copy 2 約 556–558 行 |
|
||||
| 圖文好讀版導語(copy 3 可見 HTML) | ✓ | copy 3:**僅註解**,頁面無 |
|
||||
| 冷凍美男-姜成勳 | **較長改寫** | copy 2/copy 較短 |
|
||||
| 李宰鎮細節(多 h3) | **最完整** | copy 2 有分 h3 但較短;copy 一段;copy 3 HTML 極短 |
|
||||
| 嚴肅話題・解散・父母去結算 | 獨立小標 + collage | copy 2 併入「保密協議與解散緣由」 |
|
||||
| **後半本**(召集 → KTV → 志溶 → 變數 → B 計劃現場 → 世界盃 → 眼罩 → 請記得我 → 安可) | **整段缺** | copy 2/copy 有;copy 2 約 716–940 行 |
|
||||
| 秘密召集(敘事順序) | 缺 | copy 2 寫在**李宰鎮之後**,合併宜前移 |
|
||||
| 選擇歌單 | **缺** | **僅** copy 3 註解 |
|
||||
|
||||
---
|
||||
|
||||
## 4. 八章錨點:正式版待補
|
||||
|
||||
| 錨點 | 主題 | 建議來源 |
|
||||
|------|------|----------|
|
||||
| `#sechskies-profile` | 補解散段 | copy 2 約 556–558 行 |
|
||||
| `#gather` | 召集 | copy 2 約 716–725 行 |
|
||||
| `#negotiate` | KTV、高志溶 | copy 2 約 765–778 行 |
|
||||
| `#variables` | 變數 | copy 2 約 788–810 行 |
|
||||
| `#surprise` | 驚喜 | copy 2 約 830–866 行 |
|
||||
| `#final-stage` | 登場 | copy 2 約 870–940 行 |
|
||||
| (無錨點) | 選擇歌單 | copy 3 註解 |
|
||||
|
||||
---
|
||||
|
||||
## 5. 補進 `readable.html`(摘要)
|
||||
|
||||
1. 不覆蓋正式版已有改寫(開場~李宰鎮~嚴肅話題)。
|
||||
2. 後半自 **copy 2 約 716 行**接至安可,改 `ebook-intro` 版型;**召集**順序前移。
|
||||
3. 傳奇男團併入 2000/5/18 解散段。
|
||||
4. 選擇歌單自 copy 3 註解改寫(建議 KTV 與志溶之間)。
|
||||
5. 併入前修 copy 2:「190 **萬**張」、約 618 行壞 `img`。
|
||||
|
||||
---
|
||||
|
||||
## 6. copy 2 勿原樣上線
|
||||
|
||||
| 位置(約) | 問題 |
|
||||
|------------|------|
|
||||
| 556 行 | 「190 張」→「190 萬張」 |
|
||||
| 618 行 | `<img src=alt="…">` 損壞 |
|
||||
| 716 行起 | 召集順序偏後 |
|
||||
| 947 行 | `<footer>` 在 `<main>` 內 |
|
||||
|
||||
---
|
||||
|
||||
*正式對外僅 `readable.html`。全檔皆有、無落差者不列。*
|
||||
|
||||
|
||||
|
||||
暫時先改副本2 之後在對照優化內文
|
||||
# 圖文好讀版 · 稿本對照表
|
||||
|
||||
站主自用:只列**有落差**的項目;四檔皆齊的不重複寫。路徑均相對 `totoga2/`。
|
||||
|
||||
---
|
||||
|
||||
## 1. 檔案總覽
|
||||
|
||||
| 檔案 | 行數(約) | 大小(約) | 定位 |
|
||||
|------|------------|------------|------|
|
||||
| **`readable.html`** | 781 | 52 KB | **正式版**(對外) |
|
||||
| **`readable copy 2.html`** | 964 | 68 KB | 版型同正式版 + **全章**(補稿首選) |
|
||||
| **`readable copy.html`** | 535 | 37 KB | 全章文字、`intro-text`(對句用) |
|
||||
| **`readable copy 3.html`** | 908 | 35 KB | HTML 僅開頭;**全文在 `</html>` 後註解** |
|
||||
|
||||
---
|
||||
|
||||
## 2. 版型差異(非全檔一致者)
|
||||
|
||||
| 項目 | readable | copy 2 | copy | copy 3 |
|
||||
|------|:--------:|:------:|:----:|:------:|
|
||||
| `ebook-main` + 頁首導語 | ✓ | ✓ | 部分 | ✗ |
|
||||
| `readable-col-*` 圖列 | ✓ | ✓ | 簡化 | ✗ |
|
||||
| `ebook-ssg2-page` 樣式 | ✓ | ✓ | ✗ | 部分 |
|
||||
| 八章錨點 `#ssg2` … `#final-stage` | ✗ | ✗ | ✗ | ✗ |
|
||||
| `totoga2.js` | ✗ | ✗ | ✗ | ✓(誤載) |
|
||||
| 檔尾 PDF 註解 | ✗ | ✗ | ✗ | ✓(約 600 行) |
|
||||
|
||||
---
|
||||
|
||||
## 3. 內文:正式版缺或與複本不同
|
||||
|
||||
**正式版目前寫到:**「嚴肅話題下的爆笑神反轉」止(約 `readable.html` 第 760 行前)。
|
||||
|
||||
| 區塊 | 正式版 | 複本/備註 |
|
||||
|------|--------|------------|
|
||||
| 傳奇男團 · 2000/5/18 解散、16 年未合體 | **缺** | copy 2 約 556–558 行 |
|
||||
| 圖文好讀版導語(copy 3 可見 HTML) | ✓ | copy 3:**僅註解**,頁面無 |
|
||||
| 冷凍美男-姜成勳 | **較長改寫** | copy 2/copy 較短 |
|
||||
| 李宰鎮細節(多 h3) | **最完整** | copy 2 有分 h3 但較短;copy 一段;copy 3 HTML 極短 |
|
||||
| 嚴肅話題・解散・父母去結算 | 獨立小標 + collage | copy 2 併入「保密協議與解散緣由」 |
|
||||
| **後半本**(召集 → KTV → 志溶 → 變數 → B 計劃現場 → 世界盃 → 眼罩 → 請記得我 → 安可) | **整段缺** | copy 2/copy 有;copy 2 約 716–940 行 |
|
||||
| 秘密召集(敘事順序) | 缺 | copy 2 寫在**李宰鎮之後**,合併宜前移 |
|
||||
| 選擇歌單 | **缺** | **僅** copy 3 註解 |
|
||||
|
||||
---
|
||||
|
||||
## 4. 八章錨點:正式版待補
|
||||
|
||||
| 錨點 | 主題 | 建議來源 |
|
||||
|------|------|----------|
|
||||
| `#sechskies-profile` | 補解散段 | copy 2 約 556–558 行 |
|
||||
| `#gather` | 召集 | copy 2 約 716–725 行 |
|
||||
| `#negotiate` | KTV、高志溶 | copy 2 約 765–778 行 |
|
||||
| `#variables` | 變數 | copy 2 約 788–810 行 |
|
||||
| `#surprise` | 驚喜 | copy 2 約 830–866 行 |
|
||||
| `#final-stage` | 登場 | copy 2 約 870–940 行 |
|
||||
| (無錨點) | 選擇歌單 | copy 3 註解 |
|
||||
|
||||
---
|
||||
|
||||
## 5. 補進 `readable.html`(摘要)
|
||||
|
||||
1. 不覆蓋正式版已有改寫(開場~李宰鎮~嚴肅話題)。
|
||||
2. 後半自 **copy 2 約 716 行**接至安可,改 `ebook-intro` 版型;**召集**順序前移。
|
||||
3. 傳奇男團併入 2000/5/18 解散段。
|
||||
4. 選擇歌單自 copy 3 註解改寫(建議 KTV 與志溶之間)。
|
||||
5. 併入前修 copy 2:「190 **萬**張」、約 618 行壞 `img`。
|
||||
|
||||
---
|
||||
|
||||
## 6. copy 2 勿原樣上線
|
||||
|
||||
| 位置(約) | 問題 |
|
||||
|------------|------|
|
||||
| 556 行 | 「190 張」→「190 萬張」 |
|
||||
| 618 行 | `<img src=alt="…">` 損壞 |
|
||||
| 716 行起 | 召集順序偏後 |
|
||||
| 947 行 | `<footer>` 在 `<main>` 內 |
|
||||
|
||||
---
|
||||
|
||||
*正式對外僅 `readable.html`。全檔皆有、無落差者不列。*
|
||||
|
||||
|
||||
|
||||
暫時先改副本2 之後在對照優化內文
|
||||
@@ -28,7 +28,7 @@
|
||||
box-sizing: border-box;
|
||||
position: static;
|
||||
z-index: auto;
|
||||
background: var(--surface);
|
||||
background: var(--color-surface);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
|
||||
overflow: visible;
|
||||
@@ -51,7 +51,7 @@
|
||||
body.ebook-ssg2-page.totoga2-page #totoga2-reader .container:has(> .container41):has(> .container42):has(> .container43):has(> .container44):not(.overlap-style) {
|
||||
gap: 0.75rem;
|
||||
padding: 0.75rem;
|
||||
background: var(--surface);
|
||||
background: var(--color-surface);
|
||||
border: 1px solid rgba(255, 204, 0, 0.15);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 14px 34px rgba(0, 0, 0, 0.15);
|
||||
@@ -516,7 +516,7 @@
|
||||
font-size: 1.5rem;
|
||||
margin: 0 0 1rem 0;
|
||||
padding-bottom: 0.75rem;
|
||||
border-bottom: 3px solid var(--primary);
|
||||
border-bottom: 3px solid var(--color-brand);
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
@@ -530,7 +530,7 @@
|
||||
max-width: 100%;
|
||||
margin: 0.75rem 0 1rem 0;
|
||||
padding-left: 0.75rem;
|
||||
border-left: 4px solid var(--primary);
|
||||
border-left: 4px solid var(--color-brand);
|
||||
color: #2a2a2a;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
@@ -566,7 +566,7 @@
|
||||
padding: 1.25rem;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 1.5rem;
|
||||
/* border-left: 5px solid var(--primary); */
|
||||
/* border-left: 5px solid var(--color-brand); */
|
||||
}
|
||||
|
||||
/* 文字在上、圖在下(單圖/雙圖共用;雙圖同列等高) */
|
||||
@@ -1046,8 +1046,8 @@
|
||||
</div>
|
||||
<div class="container21">
|
||||
<section class="ebook-section"
|
||||
style="background-color: var(--primary); color: var(--black); height:100%;">
|
||||
<h3 style="color:var(--black); border-left-color:var(--black)">保密協議與解散緣由</h3>
|
||||
style="background-color: var(--color-brand); color: var(--color-bg-raised); height:100%;">
|
||||
<h3 style="color:var(--color-bg-raised); border-left-color:var(--color-bg-raised)">保密協議與解散緣由</h3>
|
||||
<p class="ebook-intro-lead">
|
||||
進而聊到解散情況,當時解散的原因是不滿公司的壓榨,原本想集體離開公司,卻被公司強制解散…當時鬧得很大,父母都到公司開會了...
|
||||
</p>
|
||||
@@ -1184,8 +1184,8 @@
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<section class="ebook-section" style="background-color: var(--black); color: #fff;">
|
||||
<h2 class="section-title" style="color: var(--primary); border-left-color: var(--primary);">
|
||||
<section class="ebook-section" style="background-color: var(--color-bg-raised); color: #fff;">
|
||||
<h2 class="section-title" style="color: var(--color-brand); border-left-color: var(--color-brand);">
|
||||
請脫下眼罩:累積16年的情感爆發</h2>
|
||||
<p class="ebook-intro-lead" style="color: #eee;">
|
||||
高志溶獨自先到達休息室等待,其他五位成員率先出場。主持人在成員上台前,和台下粉絲約定好安靜,等大家脫下眼罩才能發出聲音。成員們一進場時,台上台下一片寂寥與黑暗,戴著眼罩的成員們此刻非常緊張,就連平常看似無所畏懼的隊長殷志源都緊張到伸出手找金在德牽著。
|
||||
@@ -1193,7 +1193,7 @@
|
||||
<p class="ebook-intro-lead" style="color: #eee;">成員們一句時隔 16
|
||||
年的問候:「大家好,我們是水晶男孩!」台下粉絲已淚光閃爍!成勳問:「我們的小黃,來了很多嗎?」台下還是鴉雀無聲,讓成員們愈來愈沒信心,嗓音也逐漸變小...金在德表示雖然不知道現場來了多少人,即使只來了
|
||||
10 個人,他們也會開心地獻上表演...</p>
|
||||
<p class="ebook-intro-lead" style="color: var(--primary); font-weight: bold;">
|
||||
<p class="ebook-intro-lead" style="color: var(--color-brand); font-weight: bold;">
|
||||
成員們依序脫下眼罩,此時台下還是一片黑茫茫,只有零星的黃色燈光在閃爍著。最後張水院和李宰鎮同時脫下眼罩時,燈光一打,一望無際的黃色波浪伴隨著熱烈的歡呼聲,如山呼海嘯般傳來!
|
||||
</p>
|
||||
<p class="ebook-intro-lead" style="color: #eee;">全場小黃累積了 16
|
||||
@@ -1219,7 +1219,7 @@
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<section class="ebook-section" style="border: 2px solid var(--primary);">
|
||||
<section class="ebook-section" style="border: 2px solid var(--color-brand);">
|
||||
<h2 class="section-title">安可:世界上最感動的結局</h2>
|
||||
<p class="ebook-intro-lead">
|
||||
結束了最後的問候後,帶來了〈Couple〉做為安可曲。金在德興奮地跳著舞脫離了隊形,張水院轉頭發現,寵溺地笑著看他要走去哪裡。金在德走到一半回頭看成員,才發現只有自己離開舞台中心,害羞地笑著走回原位,相當可愛!
|
||||
@@ -1227,7 +1227,7 @@
|
||||
<p class="ebook-intro-lead">
|
||||
付出長達六個月心血打造的舞台,因為拿著黃氣球的粉絲才能聚在一起,水晶男孩回到他們最華麗的時期;小黃們也回到最熱情的時期!〈Couple〉的歌詞說:「現在,我不再是自己孤單一人,而是有你們在身邊」彷彿就在述說這一刻!
|
||||
</p>
|
||||
<p class="ebook-intro-lead" style="font-weight: bold; color: var(--dark-yellow);">
|
||||
<p class="ebook-intro-lead" style="font-weight: bold; color: var(--color-brand-dark);">
|
||||
六個人一起跳著舞,聽著他們的歌曲沉浸在幸福中,這是世界上最讓他們感動的結局!本特輯搞笑又感動,長久羈絆的情感令人動容,千萬不要錯過。</p>
|
||||
<p class="ebook-intro-lead"
|
||||
style="text-align: center; margin-top: 1.25rem; font-size: 1rem; letter-spacing: 0.12em;">
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
/* 僅 extra 六六歌2 四入口單頁載入(見 site-guide 傳奇的轉折);不寫入 assets/css/style.css */
|
||||
body.totoga2-page nav.totoga2-split-crossnav.ebook-back-link {
|
||||
margin: 0.75rem auto 1.25rem;
|
||||
padding: 0.35rem 14px;
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
box-sizing: border-box;
|
||||
background: transparent;
|
||||
background-color: transparent;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
/* 僅 extra 六六歌2 四入口單頁載入(見 site-guide 傳奇的轉折);不寫入 assets/css/style.css */
|
||||
body.totoga2-page nav.totoga2-split-crossnav.ebook-back-link {
|
||||
margin: 0.75rem auto 1.25rem;
|
||||
padding: 0.35rem 14px;
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
box-sizing: border-box;
|
||||
background: transparent;
|
||||
background-color: transparent;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
@@ -1,85 +1,85 @@
|
||||
<!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="split-nav.css">
|
||||
</head>
|
||||
|
||||
<body class="ebook-ssg2-page totoga2-page">
|
||||
<header class="inner-page-header">
|
||||
<div class="header-inner site-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>
|
||||
|
||||
<nav class="ebook-back-link content-container totoga2-split-crossnav" aria-label="六六歌2 閱讀入口">
|
||||
<a href="timeline.html" class="btn" aria-current="page" title="時間軸與紀實八章長文單頁">時間軸</a>
|
||||
<a href="ebook.html" class="btn" title="紀實電子書內容獨立成頁">電子書</a>
|
||||
<a href="readable.html" class="btn" title="單頁整合:影片/電子書/長文模式切換與八章錨點">圖文好讀版</a>
|
||||
<a href="video.html" class="btn" title="無限挑戰 · 六六歌2 嵌入影片單頁">影片</a>
|
||||
</nav>
|
||||
|
||||
<div class="totoga2-reader-hub content-container ebook-main">
|
||||
<section class="story-archive totoga2-plot content-container" aria-labelledby="totoga2-plot-title">
|
||||
<h2 class="section-title" id="totoga2-plot-title">傳奇的轉折</h2>
|
||||
<div class="subtitle-wrap">
|
||||
<span class="sub-title">PLOT TWIST</span>
|
||||
</div>
|
||||
<p class="intro-text">
|
||||
與首頁相同的節點提要;點下方連結可跳到本頁「紀實長文」對應章節(八章皆在本頁,無需另開檔案)。
|
||||
</p>
|
||||
|
||||
<div class="merged-storyline">
|
||||
<article id="totoga2-special" class="story-node" data-era="六六歌">
|
||||
<h3>六六歌實錄</h3>
|
||||
<p>把懸念、試探與哭點縫在同一條時間軸上;很多人第一次真正把「水晶男孩」打進搜尋框,就是從這種瘋狂的剪輯節奏開始。</p>
|
||||
<p><a href="#ssg2">對照本頁幕後敘事 · 六六歌第二季</a></p>
|
||||
</article>
|
||||
<article id="totoga2-negotiate-card" class="story-node" data-era="交涉">
|
||||
<h3>命運的交涉</h3>
|
||||
<p>KTV、游擊演唱會規則、與其說講道理不如說把真心擺上桌面——交涉的不是合約字面,而是還願不願意再一次肩並肩。</p>
|
||||
<p><a href="#negotiate">讀本頁 · 正式交涉</a></p>
|
||||
</article>
|
||||
<article id="totoga2-complete" class="story-node" data-era="歸位">
|
||||
<h3>拼圖的歸位</h3>
|
||||
<p>變數一個個被排除之後,驚喜接上登場段落;缺一角舞台的視覺,終於對齊觀眾席上堅守的那片黃。</p>
|
||||
<p><a href="#gather">從本頁「召集」段開始補這條線</a></p>
|
||||
</article>
|
||||
<article id="totoga2-past" class="story-node" data-era="最初">
|
||||
<h3>巔峰與雨天</h3>
|
||||
<p>急凍、告別、各自的跑道——並不是要你沉浸遺憾,而是讓你懂:後來每一次亮燈,為什麼會更值得尖叫。</p>
|
||||
<p><a href="#sechskies-profile">讀本頁脈絡起點 · 水晶男孩</a></p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<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 src="../assets/js/totoga2.js"></script>
|
||||
</body>
|
||||
|
||||
<!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="split-nav.css">
|
||||
</head>
|
||||
|
||||
<body class="ebook-ssg2-page totoga2-page">
|
||||
<header class="inner-page-header">
|
||||
<div class="header-inner site-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>
|
||||
|
||||
<nav class="ebook-back-link content-container totoga2-split-crossnav" aria-label="六六歌2 閱讀入口">
|
||||
<a href="timeline.html" class="btn" aria-current="page" title="時間軸與紀實八章長文單頁">時間軸</a>
|
||||
<a href="ebook.html" class="btn" title="紀實電子書內容獨立成頁">電子書</a>
|
||||
<a href="readable.html" class="btn" title="單頁整合:影片/電子書/長文模式切換與八章錨點">圖文好讀版</a>
|
||||
<a href="video.html" class="btn" title="無限挑戰 · 六六歌2 嵌入影片單頁">影片</a>
|
||||
</nav>
|
||||
|
||||
<div class="totoga2-reader-hub content-container ebook-main">
|
||||
<section class="story-archive totoga2-plot content-container" aria-labelledby="totoga2-plot-title">
|
||||
<h2 class="section-title" id="totoga2-plot-title">傳奇的轉折</h2>
|
||||
<div class="subtitle-wrap">
|
||||
<span class="sub-title">PLOT TWIST</span>
|
||||
</div>
|
||||
<p class="intro-text">
|
||||
與首頁相同的節點提要;點下方連結可跳到本頁「紀實長文」對應章節(八章皆在本頁,無需另開檔案)。
|
||||
</p>
|
||||
|
||||
<div class="merged-storyline">
|
||||
<article id="totoga2-special" class="story-node" data-era="六六歌">
|
||||
<h3>六六歌實錄</h3>
|
||||
<p>把懸念、試探與哭點縫在同一條時間軸上;很多人第一次真正把「水晶男孩」打進搜尋框,就是從這種瘋狂的剪輯節奏開始。</p>
|
||||
<p><a href="#ssg2">對照本頁幕後敘事 · 六六歌第二季</a></p>
|
||||
</article>
|
||||
<article id="totoga2-negotiate-card" class="story-node" data-era="交涉">
|
||||
<h3>命運的交涉</h3>
|
||||
<p>KTV、游擊演唱會規則、與其說講道理不如說把真心擺上桌面——交涉的不是合約字面,而是還願不願意再一次肩並肩。</p>
|
||||
<p><a href="#negotiate">讀本頁 · 正式交涉</a></p>
|
||||
</article>
|
||||
<article id="totoga2-complete" class="story-node" data-era="歸位">
|
||||
<h3>拼圖的歸位</h3>
|
||||
<p>變數一個個被排除之後,驚喜接上登場段落;缺一角舞台的視覺,終於對齊觀眾席上堅守的那片黃。</p>
|
||||
<p><a href="#gather">從本頁「召集」段開始補這條線</a></p>
|
||||
</article>
|
||||
<article id="totoga2-past" class="story-node" data-era="最初">
|
||||
<h3>巔峰與雨天</h3>
|
||||
<p>急凍、告別、各自的跑道——並不是要你沉浸遺憾,而是讓你懂:後來每一次亮燈,為什麼會更值得尖叫。</p>
|
||||
<p><a href="#sechskies-profile">讀本頁脈絡起點 · 水晶男孩</a></p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<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 src="../assets/js/totoga2.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1,121 +1,121 @@
|
||||
<!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="split-nav.css">
|
||||
</head>
|
||||
|
||||
<body class="ebook-ssg2-page totoga2-page totoga2-video-copy-page">
|
||||
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></nav>
|
||||
|
||||
<canvas id="particles"></canvas>
|
||||
|
||||
<nav class="ebook-back-link content-container totoga2-split-crossnav" aria-label="六六歌2 閱讀入口">
|
||||
<a href="timeline.html" class="btn" title="時間軸與紀實八章長文單頁">時間軸</a>
|
||||
<a href="ebook.html" class="btn" title="紀實電子書內容獨立成頁">電子書</a>
|
||||
<a href="readable.html" class="btn" title="單頁整合:影片/電子書/長文模式切換與八章錨點">圖文好讀版</a>
|
||||
<a href="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 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"
|
||||
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>
|
||||
|
||||
<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>
|
||||
<!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="split-nav.css">
|
||||
</head>
|
||||
|
||||
<body class="ebook-ssg2-page totoga2-page totoga2-video-copy-page">
|
||||
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></nav>
|
||||
|
||||
<canvas id="particles"></canvas>
|
||||
|
||||
<nav class="ebook-back-link content-container totoga2-split-crossnav" aria-label="六六歌2 閱讀入口">
|
||||
<a href="timeline.html" class="btn" title="時間軸與紀實八章長文單頁">時間軸</a>
|
||||
<a href="ebook.html" class="btn" title="紀實電子書內容獨立成頁">電子書</a>
|
||||
<a href="readable.html" class="btn" title="單頁整合:影片/電子書/長文模式切換與八章錨點">圖文好讀版</a>
|
||||
<a href="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 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"
|
||||
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>
|
||||
|
||||
<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>
|
||||
@@ -1,437 +1,437 @@
|
||||
<!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/tablet.css">
|
||||
<link rel="stylesheet" href="njtw5.css">
|
||||
<style>
|
||||
/* 本頁專用:.nickname 只寫在 HTML(依你要求,未再放到 njtw5.css) */
|
||||
body.njtw5-page .member-card .nickname {
|
||||
display: block;
|
||||
margin-top: 0.65rem;
|
||||
padding: 0.15rem 0;
|
||||
font-size: max(14px, 0.92rem);
|
||||
font-weight: 700;
|
||||
color: #3d240c;
|
||||
line-height: 1.5;
|
||||
word-break: break-word;
|
||||
overflow-wrap: anywhere;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.main-header {
|
||||
text-align: center;
|
||||
margin-bottom: 50px;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="njtw5-page">
|
||||
<header class="main-header">
|
||||
<h1>新西遊記 5:與鬼神同行</h1>
|
||||
<p class="intro">
|
||||
這是一場驚心動魄(搞笑)的鬼怪盛宴!<br>
|
||||
六位成員化身世界各地的經典鬼怪,展開一場前往香港與北海道的爆笑冒險。
|
||||
</p>
|
||||
</header>
|
||||
<div class="container">
|
||||
<h2 class="section-title">鬼神介紹</h2>
|
||||
<!-- tr/td 必須放在 <table> 裡;外層用 div 接在 .container 的 grid 下,佔滿整列 -->
|
||||
<div class="njtw-member-table-wrap">
|
||||
<table class="njtw-member-table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="njtw-td-fill">
|
||||
<div class="member-card m1 parchment-card">
|
||||
<div class="parchment-inner">
|
||||
|
||||
<!-- <div class="parchment-logo" aria-hidden="true">新西遊記<span class="parchment-logo-num">5</span></div> -->
|
||||
<div class="parchment-headline">
|
||||
<p class="parchment-name"></p>
|
||||
<p class="parchment-role">姜鎬臉男 姜鎬童</p>
|
||||
<p class="parchment-byline">吃得津津有味的鬼怪</p>
|
||||
</div>
|
||||
<div class="parchment-figure">
|
||||
<div class="member-image"></div>
|
||||
</div>
|
||||
<div class="parchment-stats">
|
||||
<div class="parchment-stat-row">
|
||||
<span class="parchment-stat-label">視覺</span>
|
||||
<div class="parchment-stat-balls">
|
||||
<!-- 將每顆 img 的 src 改成你的龍珠圖片網址(或同資料夾檔名) -->
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="parchment-stat-row">
|
||||
<span class="parchment-stat-label">注目度</span>
|
||||
<div class="parchment-stat-balls">
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="parchment-stat-row">
|
||||
<span class="parchment-stat-label">可愛</span>
|
||||
<div class="parchment-stat-balls">
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="parchment-tags">#吃貨精靈 #低聲細語</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="njtw-td-fill">
|
||||
<div class="member-card m2 parchment-card">
|
||||
<div class="parchment-inner">
|
||||
<div class="parchment-headline">
|
||||
<p class="parchment-name"></p>
|
||||
<p class="parchment-role">鬼娃恰吉 李壽根</p>
|
||||
<p class="parchment-byline">不搞笑會死的鬼怪</p>
|
||||
</div>
|
||||
<div class="parchment-figure">
|
||||
<div class="member-image"></div>
|
||||
</div>
|
||||
<div class="parchment-stats">
|
||||
<div class="parchment-stat-row">
|
||||
<span class="parchment-stat-label">娃娃美</span>
|
||||
<div class="parchment-stat-balls">
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="parchment-stat-row">
|
||||
<span class="parchment-stat-label">語言能力</span>
|
||||
<div class="parchment-stat-balls">
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="parchment-stat-row">
|
||||
<span class="parchment-stat-label">體能</span>
|
||||
<div class="parchment-stat-balls">
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="parchment-tags">#最強短腿 #瘋狂跑動</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="njtw-td-fill">
|
||||
<div class="member-card m3 parchment-card">
|
||||
<div class="parchment-inner">
|
||||
<div class="parchment-headline">
|
||||
<p class="parchment-name"></p>
|
||||
<p class="parchment-role">陰間使者 殷志源</p>
|
||||
<p class="parchment-byline">戴上黑帽子 神志源回來了!</p>
|
||||
</div>
|
||||
<div class="parchment-figure">
|
||||
<div class="member-image"></div>
|
||||
</div>
|
||||
<div class="parchment-stats">
|
||||
<div class="parchment-stat-row">
|
||||
<span class="parchment-stat-label">化妝消化力</span>
|
||||
<div class="parchment-stat-balls">
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="parchment-stat-row">
|
||||
<span class="parchment-stat-label">黑眼圈</span>
|
||||
<div class="parchment-stat-balls">
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="parchment-stat-row">
|
||||
<span class="parchment-stat-label">暴走</span>
|
||||
<div class="parchment-stat-balls">
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="parchment-tags">#瘋子使者 #最帥鬼怪</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="njtw-layout-slot shinmyohan OB">
|
||||
<div class="njtw-td-fill">
|
||||
<div class="njtw-slot-stack njtw-team-panel ob-panel">
|
||||
<div class="njtw-slot-visual">
|
||||
<div class="njtw-team-title-band">
|
||||
<h2 class="njtw-team-hero-title" id="njtw-ob-team-title">OB 隊:老練的瘋子們</h2>
|
||||
</div>
|
||||
<div class="njtw-slot-faces">
|
||||
<img src="1.png" alt="" />
|
||||
<img src="2.png" alt="" />
|
||||
<img src="3.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="team-info">
|
||||
<p>看他們玩遊戲不是在看技術,是在看如何「鑽漏洞」和「互相背叛」。他們不用說話,光是一個眼神就能知道對方在想什麼(通常是壞主意)。</p>
|
||||
<p><strong>圈粉亮點:</strong>鎬童的食量、壽根的即興才藝、志源那種「初丁」卻天才的直覺。</p>
|
||||
<div class="parchment-stats">
|
||||
<div class="parchment-stat-row">
|
||||
<span class="parchment-stat-label">老練度</span>
|
||||
<div class="parchment-stat-balls" aria-label="5">
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="parchment-stat-row">
|
||||
<span class="parchment-stat-label">體力值</span>
|
||||
<div class="parchment-stat-balls" aria-label="1">
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="njtw-team-catchphrase">口頭禪:喔嗚!吃吧!</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="njtw-layout-slot shinmyohan YB">
|
||||
<div class="njtw-td-fill">
|
||||
<div class="njtw-slot-stack njtw-team-panel yb-panel">
|
||||
<div class="njtw-slot-visual">
|
||||
<div class="njtw-team-title-band">
|
||||
<h2 class="njtw-team-hero-title" id="njtw-yb-team-title">YB 隊:新瘋子隊</h2>
|
||||
</div>
|
||||
<div class="njtw-slot-faces">
|
||||
<img src="4.png" alt="" />
|
||||
<img src="5.png" alt="" />
|
||||
<img src="6.png" alt="" class="Shinmyohan" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="team-info">
|
||||
<p>一開始以為是來幫哥哥們打雜的,結果卻是一個比一個還瘋的「瘋子新秀」。他們擁有體力優勢,卻常常在簡單的常識題中全軍覆沒。</p>
|
||||
<p><strong>圈粉亮點:</strong>安宰賢的紙片人運動神經、宋旻浩的藝術靈魂與神手指、P.O 的超大聲反應。</p>
|
||||
<div class="parchment-stats">
|
||||
<div class="parchment-stat-row">
|
||||
<span class="parchment-stat-label">老練度</span>
|
||||
<div class="parchment-stat-balls" aria-label="1">
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="parchment-stat-row">
|
||||
<span class="parchment-stat-label">體力值</span>
|
||||
<div class="parchment-stat-balls" aria-label="5">
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="njtw-team-catchphrase">口頭禪:哥!對不起!</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="njtw-td-fill">
|
||||
<div class="member-card m4 parchment-card">
|
||||
<div class="parchment-inner">
|
||||
<div class="parchment-headline">
|
||||
<p class="parchment-name"></p>
|
||||
<p class="parchment-role">帥氣殭屍 安宰賢</p>
|
||||
<p class="parchment-byline">美貌&藝能兼具 八面玲瓏的帥氣殭屍</p>
|
||||
</div>
|
||||
<div class="parchment-figure">
|
||||
<div class="member-image"></div>
|
||||
</div>
|
||||
<div class="parchment-stats">
|
||||
<div class="parchment-stat-row">
|
||||
<span class="parchment-stat-label">帥氣度</span>
|
||||
<div class="parchment-stat-balls">
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="parchment-stat-row">
|
||||
<span class="parchment-stat-label">瘋癲</span>
|
||||
<div class="parchment-stat-balls">
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="parchment-stat-row">
|
||||
<span class="parchment-stat-label">臉紅紅</span>
|
||||
<div class="parchment-stat-balls">
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="parchment-tags">#美男殭屍 #運動白痴</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="njtw-td-fill">
|
||||
<div class="member-card m5 parchment-card">
|
||||
<div class="parchment-inner">
|
||||
<div class="parchment-headline">
|
||||
<p class="parchment-name"></p>
|
||||
<p class="parchment-role">現代鬼 宋旻浩</p>
|
||||
<p class="parchment-byline">獨特的文藝青年 現代鬼怪</p>
|
||||
</div>
|
||||
<div class="parchment-figure">
|
||||
<div class="member-image"></div>
|
||||
</div>
|
||||
<div class="parchment-stats">
|
||||
<div class="parchment-stat-row">
|
||||
<span class="parchment-stat-label">髮型</span>
|
||||
<div class="parchment-stat-balls">
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="parchment-stat-row">
|
||||
<span class="parchment-stat-label">清純美</span>
|
||||
<div class="parchment-stat-balls">
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="parchment-stat-row">
|
||||
<span class="parchment-stat-label">時髦度</span>
|
||||
<div class="parchment-stat-balls">
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="parchment-tags">#長髮宋 #綜藝神降臨</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="njtw-td-fill">
|
||||
<div class="member-card m6 parchment-card">
|
||||
<div class="parchment-inner">
|
||||
<div class="parchment-headline">
|
||||
<p class="parchment-name"></p>
|
||||
<p class="parchment-role">德古拉 P.O</p>
|
||||
<p class="parchment-byline">新血降臨!華麗誤答轟炸機!</p>
|
||||
</div>
|
||||
<div class="parchment-figure">
|
||||
<div class="member-image"></div>
|
||||
</div>
|
||||
<div class="parchment-stats">
|
||||
<div class="parchment-stat-row">
|
||||
<span class="parchment-stat-label">腦力</span>
|
||||
<div class="parchment-stat-balls">
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="parchment-stat-row">
|
||||
<span class="parchment-stat-label">披風+領子</span>
|
||||
<div class="parchment-stat-balls">
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="parchment-stat-row">
|
||||
<span class="parchment-stat-label">藝能感</span>
|
||||
<div class="parchment-stat-balls">
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="parchment-tags">#新弟子 #德古拉</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 影片區塊:將 iframe 的 src 換成 https://www.youtube.com/embed/你的影片ID -->
|
||||
<div class="video-container">
|
||||
<h2 class="video-title">經典片段回顧</h2>
|
||||
<div class="video-wrapper">
|
||||
<iframe class="video-embed" src="https://www.youtube.com/embed/3zSeN9Ss3BI" title="新西遊記 5 精華片段"
|
||||
loading="lazy"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<!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/tablet.css">
|
||||
<link rel="stylesheet" href="njtw5.css">
|
||||
<style>
|
||||
/* 本頁專用:.nickname 只寫在 HTML(依你要求,未再放到 njtw5.css) */
|
||||
body.njtw5-page .member-card .nickname {
|
||||
display: block;
|
||||
margin-top: 0.65rem;
|
||||
padding: 0.15rem 0;
|
||||
font-size: max(14px, 0.92rem);
|
||||
font-weight: 700;
|
||||
color: #3d240c;
|
||||
line-height: 1.5;
|
||||
word-break: break-word;
|
||||
overflow-wrap: anywhere;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.main-header {
|
||||
text-align: center;
|
||||
margin-bottom: 50px;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="njtw5-page">
|
||||
<header class="main-header">
|
||||
<h1>新西遊記 5:與鬼神同行</h1>
|
||||
<p class="intro">
|
||||
這是一場驚心動魄(搞笑)的鬼怪盛宴!<br>
|
||||
六位成員化身世界各地的經典鬼怪,展開一場前往香港與北海道的爆笑冒險。
|
||||
</p>
|
||||
</header>
|
||||
<div class="container">
|
||||
<h2 class="section-title">鬼神介紹</h2>
|
||||
<!-- tr/td 必須放在 <table> 裡;外層用 div 接在 .container 的 grid 下,佔滿整列 -->
|
||||
<div class="njtw-member-table-wrap">
|
||||
<table class="njtw-member-table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="njtw-td-fill">
|
||||
<div class="member-card m1 parchment-card">
|
||||
<div class="parchment-inner">
|
||||
|
||||
<!-- <div class="parchment-logo" aria-hidden="true">新西遊記<span class="parchment-logo-num">5</span></div> -->
|
||||
<div class="parchment-headline">
|
||||
<p class="parchment-name"></p>
|
||||
<p class="parchment-role">姜鎬臉男 姜鎬童</p>
|
||||
<p class="parchment-byline">吃得津津有味的鬼怪</p>
|
||||
</div>
|
||||
<div class="parchment-figure">
|
||||
<div class="member-image"></div>
|
||||
</div>
|
||||
<div class="parchment-stats">
|
||||
<div class="parchment-stat-row">
|
||||
<span class="parchment-stat-label">視覺</span>
|
||||
<div class="parchment-stat-balls">
|
||||
<!-- 將每顆 img 的 src 改成你的龍珠圖片網址(或同資料夾檔名) -->
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="parchment-stat-row">
|
||||
<span class="parchment-stat-label">注目度</span>
|
||||
<div class="parchment-stat-balls">
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="parchment-stat-row">
|
||||
<span class="parchment-stat-label">可愛</span>
|
||||
<div class="parchment-stat-balls">
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="parchment-tags">#吃貨精靈 #低聲細語</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="njtw-td-fill">
|
||||
<div class="member-card m2 parchment-card">
|
||||
<div class="parchment-inner">
|
||||
<div class="parchment-headline">
|
||||
<p class="parchment-name"></p>
|
||||
<p class="parchment-role">鬼娃恰吉 李壽根</p>
|
||||
<p class="parchment-byline">不搞笑會死的鬼怪</p>
|
||||
</div>
|
||||
<div class="parchment-figure">
|
||||
<div class="member-image"></div>
|
||||
</div>
|
||||
<div class="parchment-stats">
|
||||
<div class="parchment-stat-row">
|
||||
<span class="parchment-stat-label">娃娃美</span>
|
||||
<div class="parchment-stat-balls">
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="parchment-stat-row">
|
||||
<span class="parchment-stat-label">語言能力</span>
|
||||
<div class="parchment-stat-balls">
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="parchment-stat-row">
|
||||
<span class="parchment-stat-label">體能</span>
|
||||
<div class="parchment-stat-balls">
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="parchment-tags">#最強短腿 #瘋狂跑動</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="njtw-td-fill">
|
||||
<div class="member-card m3 parchment-card">
|
||||
<div class="parchment-inner">
|
||||
<div class="parchment-headline">
|
||||
<p class="parchment-name"></p>
|
||||
<p class="parchment-role">陰間使者 殷志源</p>
|
||||
<p class="parchment-byline">戴上黑帽子 神志源回來了!</p>
|
||||
</div>
|
||||
<div class="parchment-figure">
|
||||
<div class="member-image"></div>
|
||||
</div>
|
||||
<div class="parchment-stats">
|
||||
<div class="parchment-stat-row">
|
||||
<span class="parchment-stat-label">化妝消化力</span>
|
||||
<div class="parchment-stat-balls">
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="parchment-stat-row">
|
||||
<span class="parchment-stat-label">黑眼圈</span>
|
||||
<div class="parchment-stat-balls">
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="parchment-stat-row">
|
||||
<span class="parchment-stat-label">暴走</span>
|
||||
<div class="parchment-stat-balls">
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="parchment-tags">#瘋子使者 #最帥鬼怪</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="njtw-layout-slot shinmyohan OB">
|
||||
<div class="njtw-td-fill">
|
||||
<div class="njtw-slot-stack njtw-team-panel ob-panel">
|
||||
<div class="njtw-slot-visual">
|
||||
<div class="njtw-team-title-band">
|
||||
<h2 class="njtw-team-hero-title" id="njtw-ob-team-title">OB 隊:老練的瘋子們</h2>
|
||||
</div>
|
||||
<div class="njtw-slot-faces">
|
||||
<img src="1.png" alt="" />
|
||||
<img src="2.png" alt="" />
|
||||
<img src="3.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="team-info">
|
||||
<p>看他們玩遊戲不是在看技術,是在看如何「鑽漏洞」和「互相背叛」。他們不用說話,光是一個眼神就能知道對方在想什麼(通常是壞主意)。</p>
|
||||
<p><strong>圈粉亮點:</strong>鎬童的食量、壽根的即興才藝、志源那種「初丁」卻天才的直覺。</p>
|
||||
<div class="parchment-stats">
|
||||
<div class="parchment-stat-row">
|
||||
<span class="parchment-stat-label">老練度</span>
|
||||
<div class="parchment-stat-balls" aria-label="5">
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="parchment-stat-row">
|
||||
<span class="parchment-stat-label">體力值</span>
|
||||
<div class="parchment-stat-balls" aria-label="1">
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="njtw-team-catchphrase">口頭禪:喔嗚!吃吧!</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="njtw-layout-slot shinmyohan YB">
|
||||
<div class="njtw-td-fill">
|
||||
<div class="njtw-slot-stack njtw-team-panel yb-panel">
|
||||
<div class="njtw-slot-visual">
|
||||
<div class="njtw-team-title-band">
|
||||
<h2 class="njtw-team-hero-title" id="njtw-yb-team-title">YB 隊:新瘋子隊</h2>
|
||||
</div>
|
||||
<div class="njtw-slot-faces">
|
||||
<img src="4.png" alt="" />
|
||||
<img src="5.png" alt="" />
|
||||
<img src="6.png" alt="" class="Shinmyohan" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="team-info">
|
||||
<p>一開始以為是來幫哥哥們打雜的,結果卻是一個比一個還瘋的「瘋子新秀」。他們擁有體力優勢,卻常常在簡單的常識題中全軍覆沒。</p>
|
||||
<p><strong>圈粉亮點:</strong>安宰賢的紙片人運動神經、宋旻浩的藝術靈魂與神手指、P.O 的超大聲反應。</p>
|
||||
<div class="parchment-stats">
|
||||
<div class="parchment-stat-row">
|
||||
<span class="parchment-stat-label">老練度</span>
|
||||
<div class="parchment-stat-balls" aria-label="1">
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="parchment-stat-row">
|
||||
<span class="parchment-stat-label">體力值</span>
|
||||
<div class="parchment-stat-balls" aria-label="5">
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="njtw-team-catchphrase">口頭禪:哥!對不起!</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="njtw-td-fill">
|
||||
<div class="member-card m4 parchment-card">
|
||||
<div class="parchment-inner">
|
||||
<div class="parchment-headline">
|
||||
<p class="parchment-name"></p>
|
||||
<p class="parchment-role">帥氣殭屍 安宰賢</p>
|
||||
<p class="parchment-byline">美貌&藝能兼具 八面玲瓏的帥氣殭屍</p>
|
||||
</div>
|
||||
<div class="parchment-figure">
|
||||
<div class="member-image"></div>
|
||||
</div>
|
||||
<div class="parchment-stats">
|
||||
<div class="parchment-stat-row">
|
||||
<span class="parchment-stat-label">帥氣度</span>
|
||||
<div class="parchment-stat-balls">
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="parchment-stat-row">
|
||||
<span class="parchment-stat-label">瘋癲</span>
|
||||
<div class="parchment-stat-balls">
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="parchment-stat-row">
|
||||
<span class="parchment-stat-label">臉紅紅</span>
|
||||
<div class="parchment-stat-balls">
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="parchment-tags">#美男殭屍 #運動白痴</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="njtw-td-fill">
|
||||
<div class="member-card m5 parchment-card">
|
||||
<div class="parchment-inner">
|
||||
<div class="parchment-headline">
|
||||
<p class="parchment-name"></p>
|
||||
<p class="parchment-role">現代鬼 宋旻浩</p>
|
||||
<p class="parchment-byline">獨特的文藝青年 現代鬼怪</p>
|
||||
</div>
|
||||
<div class="parchment-figure">
|
||||
<div class="member-image"></div>
|
||||
</div>
|
||||
<div class="parchment-stats">
|
||||
<div class="parchment-stat-row">
|
||||
<span class="parchment-stat-label">髮型</span>
|
||||
<div class="parchment-stat-balls">
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="parchment-stat-row">
|
||||
<span class="parchment-stat-label">清純美</span>
|
||||
<div class="parchment-stat-balls">
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="parchment-stat-row">
|
||||
<span class="parchment-stat-label">時髦度</span>
|
||||
<div class="parchment-stat-balls">
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="parchment-tags">#長髮宋 #綜藝神降臨</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="njtw-td-fill">
|
||||
<div class="member-card m6 parchment-card">
|
||||
<div class="parchment-inner">
|
||||
<div class="parchment-headline">
|
||||
<p class="parchment-name"></p>
|
||||
<p class="parchment-role">德古拉 P.O</p>
|
||||
<p class="parchment-byline">新血降臨!華麗誤答轟炸機!</p>
|
||||
</div>
|
||||
<div class="parchment-figure">
|
||||
<div class="member-image"></div>
|
||||
</div>
|
||||
<div class="parchment-stats">
|
||||
<div class="parchment-stat-row">
|
||||
<span class="parchment-stat-label">腦力</span>
|
||||
<div class="parchment-stat-balls">
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="parchment-stat-row">
|
||||
<span class="parchment-stat-label">披風+領子</span>
|
||||
<div class="parchment-stat-balls">
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="parchment-stat-row">
|
||||
<span class="parchment-stat-label">藝能感</span>
|
||||
<div class="parchment-stat-balls">
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
<img src="dragon-ball.png" width="28" height="28" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="parchment-tags">#新弟子 #德古拉</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 影片區塊:將 iframe 的 src 換成 https://www.youtube.com/embed/你的影片ID -->
|
||||
<div class="video-container">
|
||||
<h2 class="video-title">經典片段回顧</h2>
|
||||
<div class="video-wrapper">
|
||||
<iframe class="video-embed" src="https://www.youtube.com/embed/3zSeN9Ss3BI" title="新西遊記 5 精華片段"
|
||||
loading="lazy"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1,47 +1,47 @@
|
||||
<!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="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="chronicle-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">EUN JI-WON × VARIETY GRAVITY</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></nav>
|
||||
|
||||
<canvas id="particles"></canvas>
|
||||
|
||||
<main class="content-container variety-page-main chronicle-reader">
|
||||
<section id="variety" class="variety-block">
|
||||
<h2 class="section-title">瘋狂出演中</h2>
|
||||
<p class="intro-text">鏡頭一開就跑偏、台詞唸不完,卻總能把段子的節奏剪成「非他不可」——這是最容易被路人一眼看見的瘋勁,也是綜藝剪輯願意一路卡特寫給他的理由。</p>
|
||||
<p class="intro-text">卸妝後的聊天、運動場上的暴走、對成員毫不修飾的吐槽;那些看起來像日常,其實比劇本更誇張。</p>
|
||||
<p class="intro-text"><a href="variety-shows.html#variety-shows">全員發瘋</a>:團綜「隊長帶弟弟」與個綜「各自暴走」分表整理;名場面與入坑路線仍會陸續補在本區。</p>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<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/portal-nav.js"></script>
|
||||
<script src="../assets/js/particles.js"></script>
|
||||
</body>
|
||||
|
||||
</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="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="chronicle-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">EUN JI-WON × VARIETY GRAVITY</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></nav>
|
||||
|
||||
<canvas id="particles"></canvas>
|
||||
|
||||
<main class="content-container variety-page-main chronicle-reader">
|
||||
<section id="variety" class="variety-block">
|
||||
<h2 class="section-title">瘋狂出演中</h2>
|
||||
<p class="intro-text">鏡頭一開就跑偏、台詞唸不完,卻總能把段子的節奏剪成「非他不可」——這是最容易被路人一眼看見的瘋勁,也是綜藝剪輯願意一路卡特寫給他的理由。</p>
|
||||
<p class="intro-text">卸妝後的聊天、運動場上的暴走、對成員毫不修飾的吐槽;那些看起來像日常,其實比劇本更誇張。</p>
|
||||
<p class="intro-text"><a href="variety-shows.html#variety-shows">全員發瘋</a>:團綜「隊長帶弟弟」與個綜「各自暴走」分表整理;名場面與入坑路線仍會陸續補在本區。</p>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<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/portal-nav.js"></script>
|
||||
<script src="../assets/js/particles.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1,131 +1,131 @@
|
||||
<!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="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="chronicle-page minister-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">FROM CURIOSITY TO FULL-STACK</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></nav>
|
||||
|
||||
<canvas id="particles"></canvas>
|
||||
|
||||
<main class="content-container variety-page-main chronicle-reader minister-main">
|
||||
<p class="minister-hero-lead">
|
||||
關於我:<span class="mark_b">從「好奇」到「全端」的進化之路</span>
|
||||
</p>
|
||||
|
||||
<section id="intro" class="variety-block">
|
||||
<h2 class="section-title">跨越時空的開端</h2>
|
||||
<p class="intro-text">
|
||||
這段旅程始於 2016 年 4 月,透過《無限挑戰》的回歸企劃,讓原本不認識這組傳奇團體的我,因一時好奇點開節目。即便錯過了 2000 年巔峰解散的時代,我依然被那份真誠且專業的魅力所震撼。</p>
|
||||
<p class="slogan-quote slogan-quote--awakening"><span class="slogan-quote__inner">對我而言,這不只是追星的開始,更是自我覺醒的起點。</span></p>
|
||||
</section>
|
||||
|
||||
<section id="slant" class="variety-block">
|
||||
<h2 class="section-title">為了熱愛而進化的斜槓精神</h2>
|
||||
<p class="intro-text">
|
||||
我始於「水晶廢人」的自嘲,卻在熱愛中長成了各個領域的策劃者:
|
||||
</p>
|
||||
<ul class="minister-skill-list">
|
||||
<li><span class="minister-hashtag">#水晶推廣部</span>身為品牌設計師,我堅持「不看醜東西」的原則,親自操刀所有視覺,將這份能量轉化為專業策劃。</li>
|
||||
<li><span class="minister-hashtag">#水晶訓練營</span>為了聽懂歐巴的每一句話,我開始學韓文、考韓檢、健身、跳舞,證明追星是自我提升最強大的動力。</li>
|
||||
<li><span class="minister-hashtag">#全端開發者</span>這是我當下最重要的挑戰,將設計專業與程式技術結合,搭建一個專屬於這份熱愛的數位平台。</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section id="journey" class="minister-journey story-archive" aria-labelledby="journey-title">
|
||||
<h2 class="section-title" id="journey-title">Journey:成長時間軸</h2>
|
||||
<div class="subtitle-wrap">
|
||||
<span class="sub-title">GROWTH TIMELINE</span>
|
||||
</div>
|
||||
|
||||
<div class="merged-storyline">
|
||||
<article id="journey-2016" class="story-node" data-era="2016">
|
||||
<h3>從「欣賞」到「實踐」的元年</h3>
|
||||
<p class="minister-month">07 月|手作初試</p>
|
||||
<p>開始學習勾針,為金在德製作第一個鴨鴨置物籃,這是從旁觀者轉為實踐者的第一步。</p>
|
||||
<figure class="minister-photo">
|
||||
<img src="../assets/images/minister/image_3c1739.jpg" alt="手作鴨鴨置物籃" width="1040" height="780" loading="lazy">
|
||||
</figure>
|
||||
|
||||
<p class="minister-month">08 月|螢幕後的參與</p>
|
||||
<p>以「水晶廢人字幕組」粉絲身分,用手繪應援板與勾針作品參與應援影片籌備。</p>
|
||||
<figure class="minister-photo">
|
||||
<img src="../assets/images/minister/image_3c13d7.jpg" alt="手繪應援板與勾針作品" width="1040" height="780" loading="lazy">
|
||||
</figure>
|
||||
|
||||
<p class="minister-month">09 月|孤注一擲的現場</p>
|
||||
<p>在經濟窘迫、甚至需要借錢籌措旅費的情況下,飛往首爾參加首場演唱會。在那裡,我握著導師設計的台灣小黃手幅,第一次感受到設計與才華帶來的震撼。</p>
|
||||
<figure class="minister-photo">
|
||||
<img src="../assets/images/minister/image_3bb254.jpg" alt="台灣小黃手幅" width="1040" height="780" loading="lazy">
|
||||
</figure>
|
||||
|
||||
<p class="minister-month">12 月|溫暖的饋贈</p>
|
||||
<p>在「#水晶文具社」聚會中,收到了同好精緻的手繪聖誕卡片。看著別人的創作,我更加確信自己也想成為能用作品傳遞能量的人。</p>
|
||||
<figure class="minister-photo">
|
||||
<img src="../assets/images/minister/image_3bab17.jpg" alt="手繪聖誕卡片" width="1040" height="780" loading="lazy">
|
||||
</figure>
|
||||
</article>
|
||||
|
||||
<article id="journey-2017" class="story-node" data-era="2017">
|
||||
<h3>從「身體」到「文字」的深化</h3>
|
||||
<p class="minister-month">01 月|職人精神的啟發</p>
|
||||
<p>參與資管組 D 大的新年紅包活動。其書法與刻印結合的質感,深深影響了我對美感的標準。</p>
|
||||
<figure class="minister-photo">
|
||||
<img src="../assets/images/minister/image_3ba74f.jpg" alt="新年紅包活動" width="1040" height="780" loading="lazy">
|
||||
</figure>
|
||||
|
||||
<p class="minister-month">02 月|身體記憶的熱血</p>
|
||||
<p>擔任應援組熱舞企劃小組長,在板橋與中山地下街教舞兩個月,為此減重 10 公斤,用身體記憶跨越世紀的節奏。</p>
|
||||
|
||||
<p class="minister-month">04 月|筆尖的沈澱</p>
|
||||
<p>跟著文具社走遍全台咖啡廳,在鋼筆墨水與玻璃杯的陪伴下,用手寫記錄初心。</p>
|
||||
<figure class="minister-photo minister-photo--dual">
|
||||
<img src="../assets/images/minister/image_3baed1.jpg" alt="鋼筆墨水與玻璃杯" width="1040" height="780" loading="lazy">
|
||||
<img src="../assets/images/minister/image_3c2299.jpg" alt="手寫記錄初心" width="1040" height="780" loading="lazy">
|
||||
</figure>
|
||||
</article>
|
||||
|
||||
<article id="journey-now" class="story-node" data-era="NOW">
|
||||
<h3>以熱愛為名的設計進化</h3>
|
||||
<p class="minister-month">2018 年|設計靈魂覺醒</p>
|
||||
<p>正式踏入設計領域。因為想為水晶男孩創作的執念,所有的練習都以他們為主題,這種動力讓我的設計實力產生質變。</p>
|
||||
|
||||
<p class="minister-month">現在|全端開發與推廣</p>
|
||||
<p>不再只是感嘆導師與他人的才華。我正運用包裝設計與全端開發的積累,親手搭建這個數位平台,證明追星是讓我「變厲害」的軍功章。</p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<p class="minister-back">
|
||||
<a href="../index.html#mission" class="btn">回到首頁 · 成立的初衷</a>
|
||||
</p>
|
||||
</main>
|
||||
|
||||
<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>
|
||||
</body>
|
||||
|
||||
</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="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="chronicle-page minister-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">FROM CURIOSITY TO FULL-STACK</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></nav>
|
||||
|
||||
<canvas id="particles"></canvas>
|
||||
|
||||
<main class="content-container variety-page-main chronicle-reader minister-main">
|
||||
<p class="minister-hero-lead">
|
||||
關於我:<span class="mark_b">從「好奇」到「全端」的進化之路</span>
|
||||
</p>
|
||||
|
||||
<section id="intro" class="variety-block">
|
||||
<h2 class="section-title">跨越時空的開端</h2>
|
||||
<p class="intro-text">
|
||||
這段旅程始於 2016 年 4 月,透過《無限挑戰》的回歸企劃,讓原本不認識這組傳奇團體的我,因一時好奇點開節目。即便錯過了 2000 年巔峰解散的時代,我依然被那份真誠且專業的魅力所震撼。</p>
|
||||
<p class="slogan-quote slogan-quote--awakening"><span class="slogan-quote__inner">對我而言,這不只是追星的開始,更是自我覺醒的起點。</span></p>
|
||||
</section>
|
||||
|
||||
<section id="slant" class="variety-block">
|
||||
<h2 class="section-title">為了熱愛而進化的斜槓精神</h2>
|
||||
<p class="intro-text">
|
||||
我始於「水晶廢人」的自嘲,卻在熱愛中長成了各個領域的策劃者:
|
||||
</p>
|
||||
<ul class="minister-skill-list">
|
||||
<li><span class="minister-hashtag">#水晶推廣部</span>身為品牌設計師,我堅持「不看醜東西」的原則,親自操刀所有視覺,將這份能量轉化為專業策劃。</li>
|
||||
<li><span class="minister-hashtag">#水晶訓練營</span>為了聽懂歐巴的每一句話,我開始學韓文、考韓檢、健身、跳舞,證明追星是自我提升最強大的動力。</li>
|
||||
<li><span class="minister-hashtag">#全端開發者</span>這是我當下最重要的挑戰,將設計專業與程式技術結合,搭建一個專屬於這份熱愛的數位平台。</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section id="journey" class="minister-journey story-archive" aria-labelledby="journey-title">
|
||||
<h2 class="section-title" id="journey-title">Journey:成長時間軸</h2>
|
||||
<div class="subtitle-wrap">
|
||||
<span class="sub-title">GROWTH TIMELINE</span>
|
||||
</div>
|
||||
|
||||
<div class="merged-storyline">
|
||||
<article id="journey-2016" class="story-node" data-era="2016">
|
||||
<h3>從「欣賞」到「實踐」的元年</h3>
|
||||
<p class="minister-month">07 月|手作初試</p>
|
||||
<p>開始學習勾針,為金在德製作第一個鴨鴨置物籃,這是從旁觀者轉為實踐者的第一步。</p>
|
||||
<figure class="minister-photo">
|
||||
<img src="../assets/images/minister/image_3c1739.jpg" alt="手作鴨鴨置物籃" width="1040" height="780" loading="lazy">
|
||||
</figure>
|
||||
|
||||
<p class="minister-month">08 月|螢幕後的參與</p>
|
||||
<p>以「水晶廢人字幕組」粉絲身分,用手繪應援板與勾針作品參與應援影片籌備。</p>
|
||||
<figure class="minister-photo">
|
||||
<img src="../assets/images/minister/image_3c13d7.jpg" alt="手繪應援板與勾針作品" width="1040" height="780" loading="lazy">
|
||||
</figure>
|
||||
|
||||
<p class="minister-month">09 月|孤注一擲的現場</p>
|
||||
<p>在經濟窘迫、甚至需要借錢籌措旅費的情況下,飛往首爾參加首場演唱會。在那裡,我握著導師設計的台灣小黃手幅,第一次感受到設計與才華帶來的震撼。</p>
|
||||
<figure class="minister-photo">
|
||||
<img src="../assets/images/minister/image_3bb254.jpg" alt="台灣小黃手幅" width="1040" height="780" loading="lazy">
|
||||
</figure>
|
||||
|
||||
<p class="minister-month">12 月|溫暖的饋贈</p>
|
||||
<p>在「#水晶文具社」聚會中,收到了同好精緻的手繪聖誕卡片。看著別人的創作,我更加確信自己也想成為能用作品傳遞能量的人。</p>
|
||||
<figure class="minister-photo">
|
||||
<img src="../assets/images/minister/image_3bab17.jpg" alt="手繪聖誕卡片" width="1040" height="780" loading="lazy">
|
||||
</figure>
|
||||
</article>
|
||||
|
||||
<article id="journey-2017" class="story-node" data-era="2017">
|
||||
<h3>從「身體」到「文字」的深化</h3>
|
||||
<p class="minister-month">01 月|職人精神的啟發</p>
|
||||
<p>參與資管組 D 大的新年紅包活動。其書法與刻印結合的質感,深深影響了我對美感的標準。</p>
|
||||
<figure class="minister-photo">
|
||||
<img src="../assets/images/minister/image_3ba74f.jpg" alt="新年紅包活動" width="1040" height="780" loading="lazy">
|
||||
</figure>
|
||||
|
||||
<p class="minister-month">02 月|身體記憶的熱血</p>
|
||||
<p>擔任應援組熱舞企劃小組長,在板橋與中山地下街教舞兩個月,為此減重 10 公斤,用身體記憶跨越世紀的節奏。</p>
|
||||
|
||||
<p class="minister-month">04 月|筆尖的沈澱</p>
|
||||
<p>跟著文具社走遍全台咖啡廳,在鋼筆墨水與玻璃杯的陪伴下,用手寫記錄初心。</p>
|
||||
<figure class="minister-photo minister-photo--dual">
|
||||
<img src="../assets/images/minister/image_3baed1.jpg" alt="鋼筆墨水與玻璃杯" width="1040" height="780" loading="lazy">
|
||||
<img src="../assets/images/minister/image_3c2299.jpg" alt="手寫記錄初心" width="1040" height="780" loading="lazy">
|
||||
</figure>
|
||||
</article>
|
||||
|
||||
<article id="journey-now" class="story-node" data-era="NOW">
|
||||
<h3>以熱愛為名的設計進化</h3>
|
||||
<p class="minister-month">2018 年|設計靈魂覺醒</p>
|
||||
<p>正式踏入設計領域。因為想為水晶男孩創作的執念,所有的練習都以他們為主題,這種動力讓我的設計實力產生質變。</p>
|
||||
|
||||
<p class="minister-month">現在|全端開發與推廣</p>
|
||||
<p>不再只是感嘆導師與他人的才華。我正運用包裝設計與全端開發的積累,親手搭建這個數位平台,證明追星是讓我「變厲害」的軍功章。</p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<p class="minister-back">
|
||||
<a href="../index.html#mission" class="btn">回到首頁 · 成立的初衷</a>
|
||||
</p>
|
||||
</main>
|
||||
|
||||
<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>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1,57 +1,57 @@
|
||||
# 站主與助手協作備忘
|
||||
|
||||
> **明天先看** → [`.cursor/明天先看.md`](./明天先看.md) → 內頁 header 整理 [`inner-page-header-audit.md`](./inner-page-header-audit.md)
|
||||
|
||||
由對話整理;**程式真值**仍以 repo 與 `.cursor/rules/*.mdc` 為準。本檔僅記「這次講定的做事方式」,不取代規則檔。
|
||||
|
||||
---
|
||||
|
||||
## 1. 邊界(站主明講)
|
||||
|
||||
- **沒有叫你做的,不要順手做**(含刪註解、順手整理、自訂「以後我都會……」流程)。
|
||||
- **看不懂先問**;你說「執行」再改檔。你說「檢查」就只對照回報,**不擅自改**。
|
||||
- **不要自己訂規則**代替站主(例如自創「只調樣式就保留註解」這類概括)。
|
||||
|
||||
---
|
||||
|
||||
## 2. 參考圖怎麼讀
|
||||
|
||||
- **畫線/粉線**:提醒「這一段要看」,**不是**「整段都要包 span」或「這裡一定要 `mark_b`」。
|
||||
- **實際標記**:對照圖裡**字重、黃標、一般內文**,再對應既有 class(`mark_y`、`mark_b`),自己判斷。
|
||||
- **開發者工具截圖**(勾選/刪除線):照**屬性開關**改 CSS;沒叫動註解就不要動註解。
|
||||
|
||||
---
|
||||
|
||||
## 3. 首頁 `#mission`(做法,非定稿內容)
|
||||
|
||||
- 第一段:站主若只說調 span,**只**增刪 `<span>` 與既有 class;未要求不改 CSS。實際哪些詞要 `mark_y`/`mark_b` **會變**,以當下 `index.html` 與站主圖為準,**不寫死**在筆記。
|
||||
- 第二段金句:未要求時**只改內文**、不改 span 結構。
|
||||
- devtools 截圖:照屬性開關改;沒叫動註解就不要動註解。
|
||||
|
||||
---
|
||||
|
||||
## 4. 籌備中連結(`portal-nav.js`,若後續對話有改動以檔案為準)
|
||||
|
||||
- 頂欄與頁內按鈕:**`NAV_SOON_PHRASES` 隨機氣泡**(滑過);無障礙 aria「尚無開放」。
|
||||
- 頁內按鈕:**不加**可見「(籌備中)」後綴。
|
||||
- `totoga2-copy-timeline.html` 在 `COMING_SOON_PAGES`(時間軸不公開)。
|
||||
|
||||
---
|
||||
|
||||
## 5. 2026-05 慘痛教訓(務必讀 `agent-must-ask.mdc`)
|
||||
|
||||
- 用 PowerShell 批次改全站 HTML **沒 UTF-8** → 首頁中文全毀、`</span>` 露出;已 `git checkout` 還原 HTML。
|
||||
- **擅自**把 `map-archive-header` 改成 `inner-page-header`(站主沒點頭、沒給名字)。
|
||||
- 站主說先電子書 + dev `center 78%`,助手卻自加 `clamp`/全站 `100vh`/又全站改掉。
|
||||
- 頂欄擅自「傳奇的轉折(六六歌2)」— 已改回「傳奇的轉折」;以後 nav 文案不自擴。
|
||||
|
||||
---
|
||||
|
||||
## 6. 相關規則檔
|
||||
|
||||
| 檔案 | 用途 |
|
||||
|------|------|
|
||||
| `.cursor/rules/agent-must-ask.mdc` | **必問再改**、禁止批次毀 UTF-8、header/nav 勿擅自改名 |
|
||||
| `.cursor/rules/ai-change-boundaries.mdc` | 變更範圍、共用 CSS |
|
||||
| `.cursor/rules/user-scope-and-nav.mdc` | 導覽開放、錨點刪除 |
|
||||
| `.cursor/rules/portal-nav-rules.mdc` | `portal-nav.js` 技術細節 |
|
||||
# 站主與助手協作備忘
|
||||
|
||||
> **明天先看** → [`.cursor/明天先看.md`](./明天先看.md) → 內頁 header 整理 [`inner-page-header-audit.md`](./inner-page-header-audit.md)
|
||||
|
||||
由對話整理;**程式真值**仍以 repo 與 `.cursor/rules/*.mdc` 為準。本檔僅記「這次講定的做事方式」,不取代規則檔。
|
||||
|
||||
---
|
||||
|
||||
## 1. 邊界(站主明講)
|
||||
|
||||
- **沒有叫你做的,不要順手做**(含刪註解、順手整理、自訂「以後我都會……」流程)。
|
||||
- **看不懂先問**;你說「執行」再改檔。你說「檢查」就只對照回報,**不擅自改**。
|
||||
- **不要自己訂規則**代替站主(例如自創「只調樣式就保留註解」這類概括)。
|
||||
|
||||
---
|
||||
|
||||
## 2. 參考圖怎麼讀
|
||||
|
||||
- **畫線/粉線**:提醒「這一段要看」,**不是**「整段都要包 span」或「這裡一定要 `mark_b`」。
|
||||
- **實際標記**:對照圖裡**字重、黃標、一般內文**,再對應既有 class(`mark_y`、`mark_b`),自己判斷。
|
||||
- **開發者工具截圖**(勾選/刪除線):照**屬性開關**改 CSS;沒叫動註解就不要動註解。
|
||||
|
||||
---
|
||||
|
||||
## 3. 首頁 `#mission`(做法,非定稿內容)
|
||||
|
||||
- 第一段:站主若只說調 span,**只**增刪 `<span>` 與既有 class;未要求不改 CSS。實際哪些詞要 `mark_y`/`mark_b` **會變**,以當下 `index.html` 與站主圖為準,**不寫死**在筆記。
|
||||
- 第二段金句:未要求時**只改內文**、不改 span 結構。
|
||||
- devtools 截圖:照屬性開關改;沒叫動註解就不要動註解。
|
||||
|
||||
---
|
||||
|
||||
## 4. 籌備中連結(`portal-nav.js`,若後續對話有改動以檔案為準)
|
||||
|
||||
- 頂欄與頁內按鈕:**`NAV_SOON_PHRASES` 隨機氣泡**(滑過);無障礙 aria「尚無開放」。
|
||||
- 頁內按鈕:**不加**可見「(籌備中)」後綴。
|
||||
- `totoga2-copy-timeline.html` 在 `COMING_SOON_PAGES`(時間軸不公開)。
|
||||
|
||||
---
|
||||
|
||||
## 5. 2026-05 慘痛教訓(務必讀 `agent-must-ask.mdc`)
|
||||
|
||||
- 用 PowerShell 批次改全站 HTML **沒 UTF-8** → 首頁中文全毀、`</span>` 露出;已 `git checkout` 還原 HTML。
|
||||
- **擅自**把 `map-archive-header` 改成 `inner-page-header`(站主沒點頭、沒給名字)。
|
||||
- 站主說先電子書 + dev `center 78%`,助手卻自加 `clamp`/全站 `100vh`/又全站改掉。
|
||||
- 頂欄擅自「傳奇的轉折(六六歌2)」— 已改回「傳奇的轉折」;以後 nav 文案不自擴。
|
||||
|
||||
---
|
||||
|
||||
## 6. 相關規則檔
|
||||
|
||||
| 檔案 | 用途 |
|
||||
|------|------|
|
||||
| `.cursor/rules/agent-must-ask.mdc` | **必問再改**、禁止批次毀 UTF-8、header/nav 勿擅自改名 |
|
||||
| `.cursor/rules/ai-change-boundaries.mdc` | 變更範圍、共用 CSS |
|
||||
| `.cursor/rules/user-scope-and-nav.mdc` | 導覽開放、錨點刪除 |
|
||||
| `.cursor/rules/portal-nav-rules.mdc` | `portal-nav.js` 技術細節 |
|
||||
@@ -1,128 +1,128 @@
|
||||
# 內頁頂部 header/header-inner 差異整理
|
||||
|
||||
站主自用;整理日:2026-05。程式真值以 repo 為準,改檔前請再對一次檔案。
|
||||
|
||||
---
|
||||
|
||||
## 重點
|
||||
|
||||
- **全 repo 沒有任何 `.header-inner` 的 CSS**;差異在外層 `header` 的 class 與內層 `.main-title`、`.subtitle-wrap`、`.sub-title`。
|
||||
- 標準內頁 HTML 幾乎相同;視覺不統一多半是 **CSS 疊加** 或 **少數頁根本沒用同一套 class**。
|
||||
|
||||
---
|
||||
|
||||
## 一、HTML 結構對照
|
||||
|
||||
| 類型 | 頁面 | 結構 |
|
||||
|------|------|------|
|
||||
| **標準** | `extra/totoga2-copy-ebook.html`、`extra/totoga2-copy-timeline.html`、`concert/concert.html`、`yellow-note/map.html`、`member/member.html`、`albums/albums.html`、`variety/variety.html`、`fallen/totoga2.html`、`extra/site-guide.html`、`extra/sunghoon.html`、`yellow-note/minister.html`、`extra/minister_ge.html`、`extra/totoga2 copy.html` 等 | `header.map-archive-header` → `motion.header-inner` → `h1.main-title` + `motion.subtitle-wrap` → `span.sub-title` |
|
||||
| **首頁** | `index.html` | `header#origin` → `motion.hero`(**無** `header-inner`) |
|
||||
| **無 header** | `extra/totoga2-video.html` | 無頂部 banner 區塊 |
|
||||
| **另一套** | `extra/grok.html` | 裸 `<header>` → `motion.hero` |
|
||||
| **另一套** | `variety/NJTW/NJTW5.html` | `header.main-header`(無 `header-inner`) |
|
||||
|
||||
---
|
||||
|
||||
## 二、CSS 來源(誰在管頂部)
|
||||
|
||||
### 1. 多數內頁共用 — `assets/css/style.css`
|
||||
|
||||
| 選擇器 | 內容摘要 |
|
||||
|--------|----------|
|
||||
| `header.map-archive-header` | `height: auto`;`min-height: clamp(14rem, 38vh, 24rem)`;`background-position: center 78%`;`background-size: cover`;`padding: clamp(1.75rem, 4vh, 2.75rem) 20px` |
|
||||
| `.map-archive-header .main-title` | `clamp(2rem, 4.5vw, 3.2rem)`、黃字、字距 6px |
|
||||
| `.map-archive-header .subtitle-wrap` | `margin-top: 20px` |
|
||||
| `.map-archive-header .subtitle-wrap::before/::after` | 黃線 3px、`max-width: 56px` |
|
||||
| `.map-archive-header .sub-title` | `0.92rem`、`#d4d4d4`、`letter-spacing: 4px` |
|
||||
| `@media (max-width: 920px)` `.map-archive-header .main-title` | `letter-spacing: 4px` |
|
||||
|
||||
**沒有** `.header-inner { … }`。
|
||||
|
||||
### 2. 首頁專用(不套在內頁 `map-archive-header`)
|
||||
|
||||
| 檔案 | 選擇器 | 與內頁差異 |
|
||||
|------|--------|------------|
|
||||
| `style.css` | `header#origin` | **100vh**、背景 `center`、`background-size: 108%` |
|
||||
| `style.css` | `.hero`、`.hero h1`、`.hero p` | 首頁 hero 字級 |
|
||||
| `index.css` | `.home-page header .hero .subtitle-wrap` 等 | 副標更大、描邊、字距不同 |
|
||||
|
||||
### 3. 容易造成「這頁長不一樣」的例外
|
||||
|
||||
| 頁面 | 額外 CSS | 說明 |
|
||||
|------|----------|------|
|
||||
| **`concert/concert.html`** | `assets/css/concert.css`(載入順序:**先** concert,**後** style) | 檔內有**裸** `.main-title`、`.subtitle-wrap`、`.sub-title`(無 `.map-archive-header` 前綴)→ 會影響**整頁**同名 class;header 內仍以 `.map-archive-header .…` 為準(優先權較高) |
|
||||
| **`extra/minister_ge.html`** | 多載 `index.css`,`body.home-page` | 只改 `.home-page header .hero`,不直接改 `map-archive-header` |
|
||||
| **全站** | `style.css` 裸 `.subtitle-wrap`、`.sub-title`(約 577 行起) | 區塊內非 header 的副標也會用到;header **內**由 `.map-archive-header .…` 覆寫 |
|
||||
|
||||
`concert.css` 裸選擇器摘要(與 `style.css` 內頁 header 不同):
|
||||
|
||||
```css
|
||||
.main-title { font-size: 3.5rem; letter-spacing: 8px; … }
|
||||
.subtitle-wrap { margin-top: 25px; … }
|
||||
.subtitle-wrap::before/::after { max-width: 60px; height: 3px; … }
|
||||
.sub-title { font-size: 1rem; letter-spacing: 6px; margin: 0 25px; … }
|
||||
```
|
||||
|
||||
### 4. 完全不是 `map-archive-header` 的頁
|
||||
|
||||
| 頁面 | CSS | 說明 |
|
||||
|------|-----|------|
|
||||
| `variety/NJTW/NJTW5.html` | `variety/NJTW/njtw5.css` | `body.njtw5-page header.main-header`:自訂背景圖、`aspect-ratio: 1280/706`、全寬 breakout,**無** 氣球 `header.jpg` |
|
||||
| `extra/grok.html` | 僅 `style.css` | 裸 `header` + `.hero` |
|
||||
|
||||
### 5. 平板 — `assets/css/tablet.css`(≤1180px)
|
||||
|
||||
- `.map-archive-header .main-title`(與全站內頁相同)
|
||||
|
||||
---
|
||||
|
||||
## 三、為什麼會覺得 header-inner 不統一
|
||||
|
||||
1. `.header-inner` **零樣式**,只是包裝 div。
|
||||
2. **演唱會**多 `concert.css` 裸 class,整頁標題語彙混在一起。
|
||||
3. **首頁 / NJTW5 / grok / 影片頁**不是同一套 header 系統。
|
||||
4. 全站裸 `.subtitle-wrap` 與 header 專用規則並存。
|
||||
|
||||
---
|
||||
|
||||
## 四、明天可決定的方向(改前請說「執行」)
|
||||
|
||||
1. **標準是否 = 電子書** — 現行 `header.map-archive-header` + `style.css` 約 1547 行起?
|
||||
2. **`concert.css` 裸標題** — 改為只作用在主內容,或刪除改吃全站?
|
||||
3. **是否新增** `.header-inner` 共用樣式?
|
||||
4. **class 改名** — 全站內頁是否要改掉 `map-archive-header`(需站主指定新名稱;**禁止** PowerShell 批次改 HTML,須 UTF-8 安全)?
|
||||
5. **grok / NJTW5 / 影片頁** — 併入標準 header,或維持特例?
|
||||
|
||||
---
|
||||
|
||||
## 五、相關檔案路徑
|
||||
|
||||
| 用途 | 路徑 |
|
||||
|------|------|
|
||||
| 內頁 banner 主規則 | `assets/css/style.css`(`header.map-archive-header` 區塊) |
|
||||
| 首頁 hero | `assets/css/style.css`(`header#origin`)、`assets/css/index.css` |
|
||||
| 演唱會頁額外 | `assets/css/concert.css` |
|
||||
| NJTW5 頂部 | `variety/NJTW/njtw5.css` |
|
||||
| 協作規則 | `.cursor/rules/agent-must-ask.mdc` |
|
||||
|
||||
---
|
||||
|
||||
## 六、有 `header-inner`:頂欄內標題/副標「長得不一樣」的 CSS 套別
|
||||
|
||||
只談 **`header.map-archive-header` → `.header-inner` 裡的 `h1.main-title`、`.subtitle-wrap`、`.sub-title`**(顏色、陰影、字級、字距、兩側黃線)。
|
||||
連結基準:`待確認/.cursor/` → `../../` 到站根,**Ctrl+點** 開 HTML。
|
||||
|
||||
> **線上 `assets/css/style.css` 現況**:內頁頂欄字樣幾乎都吃 **套別 A** 同一組 `.map-archive-header .…`;若你肉眼覺得某頁不同,先用下面代表頁並排,再回報頁名。
|
||||
|
||||
| 套別 | 頂欄內字樣差在哪(摘要) | CSS 來源 | 點一頁確認 |
|
||||
|------|--------------------------|----------|------------|
|
||||
| **A|內頁標準** | 主標 `clamp(2rem, 4.5vw, 3.2rem)`、黃字、`text-shadow` 黃光;副標 `0.92rem`、`#d4d4d4`、字距 `4px`;黃線 `3px` / `max-width 56px` | `style.css` → `.map-archive-header .main-title` 等(約 1566 行起) | [六六歌2 電子書](../../extra/totoga2-copy-ebook.html) |
|
||||
| **B|演唱會** | 頂欄**仍應**是套別 A(`.map-archive-header .…` 優先);另載 `concert.css` 的裸 `.main-title`(`3.5rem`)、`.sub-title`(`1rem`)主要搞**主內容**同名 class — 請專看 **banner 裡** 那組字與 A 是否真不同 | `concert.css` 先載 + `style.css` | [演唱會列表](../../concert/concert.html) |
|
||||
| **C|首頁 hero(對照)** | **沒有** `header-inner`;`header#origin` + `.hero`:`h1` 約 `2.5rem`,`index.css` 再疊**描邊+暈光**;副標 `clamp(1.12rem~1.52rem)`、`#e6e6e6`、字距 `0.22em` — 通常比內頁副標**大、亮** | `style.css` `.hero h1` + `index.css` `.home-page header .hero …` | [首頁](../../index.html) |
|
||||
|
||||
**套別 A — 同套還有(頂欄字樣應與電子書相同,不必每頁點)**
|
||||
`member/member.html`、`variety/variety.html`、`yellow-note/map.html`、`yellow-note/minister.html`、`extra/site-guide.html`、`extra/sunghoon.html`、`extra/minister_ge.html`(頂欄是 `map-archive-header`,**不是** `.hero`;`index.css` 只改首頁 hero)、`fallen/totoga2.html`、`extra/totoga2-copy-timeline.html`、`albums/albums.html`(有載 `index.css` 但 `body` 無 `home-page`,頂欄不受影響)。
|
||||
|
||||
**沒有 `header-inner`、不列入上表**(結構就不是同一顆球):`index` 以外見上文 §一 grok/NJTW5/影片/歌詞。
|
||||
|
||||
**備份勿當線上**:`待確認/assets/css/style.css` 曾有 `body.totoga2-page .map-archive-header` 壓矮 banner、舊版 `100vh` 氣球圖 — 與目前站根 `assets/css/style.css` 可能不一致。
|
||||
# 內頁頂部 header/header-inner 差異整理
|
||||
|
||||
站主自用;整理日:2026-05。程式真值以 repo 為準,改檔前請再對一次檔案。
|
||||
|
||||
---
|
||||
|
||||
## 重點
|
||||
|
||||
- **全 repo 沒有任何 `.header-inner` 的 CSS**;差異在外層 `header` 的 class 與內層 `.main-title`、`.subtitle-wrap`、`.sub-title`。
|
||||
- 標準內頁 HTML 幾乎相同;視覺不統一多半是 **CSS 疊加** 或 **少數頁根本沒用同一套 class**。
|
||||
|
||||
---
|
||||
|
||||
## 一、HTML 結構對照
|
||||
|
||||
| 類型 | 頁面 | 結構 |
|
||||
|------|------|------|
|
||||
| **標準** | `extra/totoga2-copy-ebook.html`、`extra/totoga2-copy-timeline.html`、`concert/concert.html`、`yellow-note/map.html`、`member/member.html`、`albums/albums.html`、`variety/variety.html`、`fallen/totoga2.html`、`extra/site-guide.html`、`extra/sunghoon.html`、`yellow-note/minister.html`、`extra/minister_ge.html`、`extra/totoga2 copy.html` 等 | `header.map-archive-header` → `motion.header-inner` → `h1.main-title` + `motion.subtitle-wrap` → `span.sub-title` |
|
||||
| **首頁** | `index.html` | `header#origin` → `motion.hero`(**無** `header-inner`) |
|
||||
| **無 header** | `extra/totoga2-video.html` | 無頂部 banner 區塊 |
|
||||
| **另一套** | `extra/grok.html` | 裸 `<header>` → `motion.hero` |
|
||||
| **另一套** | `variety/NJTW/NJTW5.html` | `header.main-header`(無 `header-inner`) |
|
||||
|
||||
---
|
||||
|
||||
## 二、CSS 來源(誰在管頂部)
|
||||
|
||||
### 1. 多數內頁共用 — `assets/css/style.css`
|
||||
|
||||
| 選擇器 | 內容摘要 |
|
||||
|--------|----------|
|
||||
| `header.map-archive-header` | `height: auto`;`min-height: clamp(14rem, 38vh, 24rem)`;`background-position: center 78%`;`background-size: cover`;`padding: clamp(1.75rem, 4vh, 2.75rem) 20px` |
|
||||
| `.map-archive-header .main-title` | `clamp(2rem, 4.5vw, 3.2rem)`、黃字、字距 6px |
|
||||
| `.map-archive-header .subtitle-wrap` | `margin-top: 20px` |
|
||||
| `.map-archive-header .subtitle-wrap::before/::after` | 黃線 3px、`max-width: 56px` |
|
||||
| `.map-archive-header .sub-title` | `0.92rem`、`#d4d4d4`、`letter-spacing: 4px` |
|
||||
| `@media (max-width: 920px)` `.map-archive-header .main-title` | `letter-spacing: 4px` |
|
||||
|
||||
**沒有** `.header-inner { … }`。
|
||||
|
||||
### 2. 首頁專用(不套在內頁 `map-archive-header`)
|
||||
|
||||
| 檔案 | 選擇器 | 與內頁差異 |
|
||||
|------|--------|------------|
|
||||
| `style.css` | `header#origin` | **100vh**、背景 `center`、`background-size: 108%` |
|
||||
| `style.css` | `.hero`、`.hero h1`、`.hero p` | 首頁 hero 字級 |
|
||||
| `index.css` | `.home-page header .hero .subtitle-wrap` 等 | 副標更大、描邊、字距不同 |
|
||||
|
||||
### 3. 容易造成「這頁長不一樣」的例外
|
||||
|
||||
| 頁面 | 額外 CSS | 說明 |
|
||||
|------|----------|------|
|
||||
| **`concert/concert.html`** | `assets/css/concert.css`(載入順序:**先** concert,**後** style) | 檔內有**裸** `.main-title`、`.subtitle-wrap`、`.sub-title`(無 `.map-archive-header` 前綴)→ 會影響**整頁**同名 class;header 內仍以 `.map-archive-header .…` 為準(優先權較高) |
|
||||
| **`extra/minister_ge.html`** | 多載 `index.css`,`body.home-page` | 只改 `.home-page header .hero`,不直接改 `map-archive-header` |
|
||||
| **全站** | `style.css` 裸 `.subtitle-wrap`、`.sub-title`(約 577 行起) | 區塊內非 header 的副標也會用到;header **內**由 `.map-archive-header .…` 覆寫 |
|
||||
|
||||
`concert.css` 裸選擇器摘要(與 `style.css` 內頁 header 不同):
|
||||
|
||||
```css
|
||||
.main-title { font-size: 3.5rem; letter-spacing: 8px; … }
|
||||
.subtitle-wrap { margin-top: 25px; … }
|
||||
.subtitle-wrap::before/::after { max-width: 60px; height: 3px; … }
|
||||
.sub-title { font-size: 1rem; letter-spacing: 6px; margin: 0 25px; … }
|
||||
```
|
||||
|
||||
### 4. 完全不是 `map-archive-header` 的頁
|
||||
|
||||
| 頁面 | CSS | 說明 |
|
||||
|------|-----|------|
|
||||
| `variety/NJTW/NJTW5.html` | `variety/NJTW/njtw5.css` | `body.njtw5-page header.main-header`:自訂背景圖、`aspect-ratio: 1280/706`、全寬 breakout,**無** 氣球 `header.jpg` |
|
||||
| `extra/grok.html` | 僅 `style.css` | 裸 `header` + `.hero` |
|
||||
|
||||
### 5. 平板 — `assets/css/tablet.css`(≤1180px)
|
||||
|
||||
- `.map-archive-header .main-title`(與全站內頁相同)
|
||||
|
||||
---
|
||||
|
||||
## 三、為什麼會覺得 header-inner 不統一
|
||||
|
||||
1. `.header-inner` **零樣式**,只是包裝 div。
|
||||
2. **演唱會**多 `concert.css` 裸 class,整頁標題語彙混在一起。
|
||||
3. **首頁 / NJTW5 / grok / 影片頁**不是同一套 header 系統。
|
||||
4. 全站裸 `.subtitle-wrap` 與 header 專用規則並存。
|
||||
|
||||
---
|
||||
|
||||
## 四、明天可決定的方向(改前請說「執行」)
|
||||
|
||||
1. **標準是否 = 電子書** — 現行 `header.map-archive-header` + `style.css` 約 1547 行起?
|
||||
2. **`concert.css` 裸標題** — 改為只作用在主內容,或刪除改吃全站?
|
||||
3. **是否新增** `.header-inner` 共用樣式?
|
||||
4. **class 改名** — 全站內頁是否要改掉 `map-archive-header`(需站主指定新名稱;**禁止** PowerShell 批次改 HTML,須 UTF-8 安全)?
|
||||
5. **grok / NJTW5 / 影片頁** — 併入標準 header,或維持特例?
|
||||
|
||||
---
|
||||
|
||||
## 五、相關檔案路徑
|
||||
|
||||
| 用途 | 路徑 |
|
||||
|------|------|
|
||||
| 內頁 banner 主規則 | `assets/css/style.css`(`header.map-archive-header` 區塊) |
|
||||
| 首頁 hero | `assets/css/style.css`(`header#origin`)、`assets/css/index.css` |
|
||||
| 演唱會頁額外 | `assets/css/concert.css` |
|
||||
| NJTW5 頂部 | `variety/NJTW/njtw5.css` |
|
||||
| 協作規則 | `.cursor/rules/agent-must-ask.mdc` |
|
||||
|
||||
---
|
||||
|
||||
## 六、有 `header-inner`:頂欄內標題/副標「長得不一樣」的 CSS 套別
|
||||
|
||||
只談 **`header.map-archive-header` → `.header-inner` 裡的 `h1.main-title`、`.subtitle-wrap`、`.sub-title`**(顏色、陰影、字級、字距、兩側黃線)。
|
||||
連結基準:`待確認/.cursor/` → `../../` 到站根,**Ctrl+點** 開 HTML。
|
||||
|
||||
> **線上 `assets/css/style.css` 現況**:內頁頂欄字樣幾乎都吃 **套別 A** 同一組 `.map-archive-header .…`;若你肉眼覺得某頁不同,先用下面代表頁並排,再回報頁名。
|
||||
|
||||
| 套別 | 頂欄內字樣差在哪(摘要) | CSS 來源 | 點一頁確認 |
|
||||
|------|--------------------------|----------|------------|
|
||||
| **A|內頁標準** | 主標 `clamp(2rem, 4.5vw, 3.2rem)`、黃字、`text-shadow` 黃光;副標 `0.92rem`、`#d4d4d4`、字距 `4px`;黃線 `3px` / `max-width 56px` | `style.css` → `.map-archive-header .main-title` 等(約 1566 行起) | [六六歌2 電子書](../../extra/totoga2-copy-ebook.html) |
|
||||
| **B|演唱會** | 頂欄**仍應**是套別 A(`.map-archive-header .…` 優先);另載 `concert.css` 的裸 `.main-title`(`3.5rem`)、`.sub-title`(`1rem`)主要搞**主內容**同名 class — 請專看 **banner 裡** 那組字與 A 是否真不同 | `concert.css` 先載 + `style.css` | [演唱會列表](../../concert/concert.html) |
|
||||
| **C|首頁 hero(對照)** | **沒有** `header-inner`;`header#origin` + `.hero`:`h1` 約 `2.5rem`,`index.css` 再疊**描邊+暈光**;副標 `clamp(1.12rem~1.52rem)`、`#e6e6e6`、字距 `0.22em` — 通常比內頁副標**大、亮** | `style.css` `.hero h1` + `index.css` `.home-page header .hero …` | [首頁](../../index.html) |
|
||||
|
||||
**套別 A — 同套還有(頂欄字樣應與電子書相同,不必每頁點)**
|
||||
`member/member.html`、`variety/variety.html`、`yellow-note/map.html`、`yellow-note/minister.html`、`extra/site-guide.html`、`extra/sunghoon.html`、`extra/minister_ge.html`(頂欄是 `map-archive-header`,**不是** `.hero`;`index.css` 只改首頁 hero)、`fallen/totoga2.html`、`extra/totoga2-copy-timeline.html`、`albums/albums.html`(有載 `index.css` 但 `body` 無 `home-page`,頂欄不受影響)。
|
||||
|
||||
**沒有 `header-inner`、不列入上表**(結構就不是同一顆球):`index` 以外見上文 §一 grok/NJTW5/影片/歌詞。
|
||||
|
||||
**備份勿當線上**:`待確認/assets/css/style.css` 曾有 `body.totoga2-page .map-archive-header` 壓矮 banner、舊版 `100vh` 氣球圖 — 與目前站根 `assets/css/style.css` 可能不一致。
|
||||
@@ -1,6 +1,6 @@
|
||||
# 明天打開專案先看這裡
|
||||
|
||||
1. **[內頁 header 差異整理 → `inner-page-header-audit.md`](./inner-page-header-audit.md)**
|
||||
(`header-inner` 各頁哪裡不同、演唱會/NJTW 例外、要決定怎麼統一)
|
||||
|
||||
改檔前記得:先跟你確認再 **執行**(見 `rules/agent-must-ask.mdc`)。
|
||||
# 明天打開專案先看這裡
|
||||
|
||||
1. **[內頁 header 差異整理 → `inner-page-header-audit.md`](./inner-page-header-audit.md)**
|
||||
(`header-inner` 各頁哪裡不同、演唱會/NJTW 例外、要決定怎麼統一)
|
||||
|
||||
改檔前記得:先跟你確認再 **執行**(見 `rules/agent-must-ask.mdc`)。
|
||||
@@ -1,3 +1,3 @@
|
||||
備份時間:2026-05-16 15:56
|
||||
基準 commit:fa8b04d(style 統一header)
|
||||
內容:相對 fa8b04d 未提交的修改與未追蹤新檔(還原前工作區快照)
|
||||
內容:相對 fa8b04d 未提交的修改與未追蹤新檔(還原前工作區快照)
|
||||
@@ -1,236 +1,236 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-TW">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>SECHSKIES - 水晶男孩傳奇介紹</title>
|
||||
<link rel="stylesheet" href="assets/css/style.css">
|
||||
<link rel="stylesheet" href="assets/css/index.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="home-page">
|
||||
<header id="origin">
|
||||
<div class="hero">
|
||||
<h1>SECHSKIES<br>水晶男孩</h1>
|
||||
<div class="subtitle-wrap">
|
||||
<span class="sub-title">六顆永恆的水晶 • 左右命運的傳奇</span>
|
||||
</div>
|
||||
<a href="#start" class="btn">從這裡開始淪陷</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></nav>
|
||||
|
||||
<canvas id="particles"></canvas>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<section id="start">
|
||||
<h2 class="section-title">好奇的開端</h2>
|
||||
<div class="intro-text">
|
||||
<p class="core-description">
|
||||
這段旅程始於 2016 年 4 月,透過國民綜藝<span class="mark_b mark_y">《無限挑戰》</span>的回歸企劃,讓原本不認識這組傳奇的我,因一時好奇點開節目。
|
||||
即便錯過了那個屬於他們的世紀末,但跟著節目的編排鋪陳,從歡笑到感動,我被這些熱血、真誠且專業的大男孩所震撼。
|
||||
</p>
|
||||
<p class="call-to-action">
|
||||
身為在回歸後才被這場 <span class="mark_b mark_y">「黃色奇蹟」</span>
|
||||
擊中的新一代粉絲,我深刻體會那種從好奇觀看到最終徹底淪陷的悸動。這種從<span class="mark_b"><span class="fan-journey-wave"
|
||||
role="text">路人 <i class="fa-solid fa-circle-right"
|
||||
aria-hidden="true"></i> 入坑否定期 <i class="fa-solid fa-circle-right"
|
||||
aria-hidden="true"></i> 瘋狂考古期 <i class="fa-solid fa-circle-right"
|
||||
aria-hidden="true"></i> 坑底躺平深陷其中</span></span>的過程,證明了魅力可以跨越時間,也正是這一切自我覺醒的起點,驅動我不斷進化的無限可能。
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
<section id="mission" class="mission-section">
|
||||
<div class="mission-zigzag">
|
||||
<div class="mission-row mission-row--intro">
|
||||
<div class="mission-row__visual">
|
||||
<div class="logo-wrapper">
|
||||
<img src="./assets/images/logo.png" alt="SECHSKIES Logo Concept">
|
||||
<div class="caption">
|
||||
<span class="caption__line caption__line--title"><span class="arrow-icon mark_b"
|
||||
aria-hidden="true">↑</span>設計概念:</span>
|
||||
<span class="caption__line">六角形水晶、黃色海洋與我們的初心Six</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mission-row__body">
|
||||
<h2 class="section-title mission-block-title">成立的初衷</h2>
|
||||
<p class="mission-lead">
|
||||
以推廣 SECHSKIES <span class="mark_y">水晶男孩</span> 為核心,旨在透過 <span
|
||||
class="mark_b">專業的視覺策展</span> 宣傳成員魅力與小黃們的應援活動。嘗試以水晶男孩為
|
||||
<span class="mark_b">靈感主軸</span>,延伸至
|
||||
<span class="mark_b">網頁開發、視覺設計與內容企劃</span>
|
||||
等多重領域,將對偶像的喜愛轉化為 <span class="mark_b">實質的專業養分</span>。在這裡,你不只能探索他們的 <span
|
||||
class="mark_b">傳奇軌跡</span>,更能見證追星如何激發 <span class="mark_b">創作潛能</span>。
|
||||
</p>
|
||||
<div class="slogan-quote slogan-quote--mission">
|
||||
<span class="slogan-quote__inner">我要用這座<span
|
||||
class="mark_b">藝廊般的網站</span>證明:<br>追星的孩子不僅不會變壞,更會因為那份<span
|
||||
class="mark_b">守護並推廣的熱情</span>,<br>讓現在的自己變得比追星前的自己還要厲害!</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mission-row mission-row--concept">
|
||||
<div class="mission-row__body">
|
||||
<h3 class="mission-logo-heading">LOGO 設計理念</h3>
|
||||
<p>
|
||||
<span class="mark_b">「晶」</span>字發想來自<span class="mark_b">六角形的水晶</span>,為了強調水晶男孩<span
|
||||
class="mark_b">初心為六人</span>。上半部形似<span class="mark_b">數字
|
||||
6</span>,搭配演唱會必備的<span class="mark_b">手燈圖案</span>,代表粉絲和水晶<span
|
||||
class="mark_b">密不可分的關係</span>。<br>色彩配置發想來自無限挑戰六六歌特輯的回歸舞台,成員脫下眼罩的剎那,整個場地從<span
|
||||
class="mark_b mark_y">一片漆黑瞬間發亮</span>,映入眼簾的是一片<span class="mark_b">黃色海洋</span>,<span
|
||||
class="mark_y">讓成員和粉絲的世界跟著亮了起來</span>。以此片段為契機,設計成<span
|
||||
class="mark_b">黑色系與黃色系</span>的色彩搭配,來記錄那瞬間的感動。
|
||||
</p>
|
||||
</div>
|
||||
<div class="mission-row__visual">
|
||||
<div class="mission-moment-wrap">
|
||||
<div class="mission-gif-frame" role="group" aria-label="回歸演唱會/黃色氣球海(16:9)">
|
||||
<!-- 若改為 GIF 動圖,將底下 src 換成 ./assets/images/mission-balloon-sea.gif 即可 -->
|
||||
<img src="./assets/images/黃色海洋.gif" alt="無限挑戰 六六歌2 放送畫面:全場黃色氣球海">
|
||||
</div>
|
||||
<span class="caption">
|
||||
<span class="arrow-icon" aria-hidden="true">↑</span>
|
||||
回歸演唱會的動人瞬間-黃色氣球海
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<section id="timeline" class="story-archive">
|
||||
<h2 class="section-title">跨時空軌跡</h2>
|
||||
<div class="subtitle-wrap">
|
||||
<span class="sub-title">SECHSKIES STORY ARCHIVE</span>
|
||||
</div>
|
||||
|
||||
<div class="merged-storyline">
|
||||
<article class="story-node" data-era="1997">
|
||||
<h3>傳奇的誕生:六道光芒劃破韓流夜空</h3>
|
||||
<p>1997年4月15日,水晶男孩以強悍的《學園別曲》為起點,「黑水晶|Rap與舞蹈」、「白水晶|主唱」的雙色魅力交織,奠定了
|
||||
K-POP第一代傳奇的地位,開創了屬於黃色海洋的盛世與巔峰。</p>
|
||||
<p>在那段被韓劇<a
|
||||
href="https://www.disneyplus.com/browse/entity-3979fb82-8681-44e8-b7be-e313091f0d73?distributionPartner=google"
|
||||
class="story-external-inline" target="_blank" rel="noopener noreferrer"><span
|
||||
class="story-external-inline__label">《請回答1997》</span><i
|
||||
class="fa-solid fa-arrow-up-right-from-square" aria-hidden="true"></i></a>奉為經典的歲月裡,水晶男孩與
|
||||
H.O.T.
|
||||
並稱為兩大巔峰。無論是雨中那場被劇集致敬的粉絲大戰,還是為了買票露宿街頭的狂熱,白與黃的旗幟對決,成了那個世代集體記憶的起點。</p>
|
||||
</article>
|
||||
|
||||
<article class="story-node" data-era="2000">
|
||||
<h3>遺憾的休止符:凍結有你的世界</h3>
|
||||
<p>在最燦爛的時刻,這首華麗的樂章卻被迫畫下了休止符,2000年5月正式解散。成員各自發展走出了不同道路,水晶進入休眠期。
|
||||
</p>
|
||||
<p>那一場如同劇中描寫般、讓全韓無數少女世界崩塌的夢想演唱會告別現場,將未完的旋律封存在冷冽的空氣中。這一停頓,就是長達十六年的靜默,成為我們心中最完整、卻也最令人心碎的凝煉模樣。
|
||||
</p>
|
||||
</article>
|
||||
<article class="story-node story-node--ebook-ssg2" data-era="2016">
|
||||
<h3>感動合體:那一晚,我們找回了完整</h3>
|
||||
<p>塵封十六年的時光被溫柔拂去,跨越六千多天的等待,黃色氣球海再次淹沒了上岩運動場。當六個身影重新站在一起,那幅曾被凍結在 2000
|
||||
年的畫面終於再次「溶解」並重合。那一晚,淚水證明了奇蹟真的存在,我們終於找回了那份久違的完整,以為故事從此能圓滿續寫。</p>
|
||||
<span class="timeline-ebook-cta" aria-label="傳奇書寫中,連結暫停">
|
||||
<span>點我見證傳奇</span><i class="fa-solid fa-hand-pointer" aria-hidden="true"></i>
|
||||
</span>
|
||||
</article>
|
||||
<!-- 2016 年後續發展與情感轉折區塊 -->
|
||||
<article class="story-node" data-era="2016.05">
|
||||
<h3>從路人到鐵粉:從夢境進現實</h3>
|
||||
|
||||
<p>《無限挑戰》落幕後,原本以為這只是最後一場華麗的告別。在那段連期待都不敢奢侈、只能在螢幕前渴求消息的沈默裡,5 月 11
|
||||
日的簽約消息像是一記響亮的耳光,將所有人從絕望中打醒。那是從未知的空虛到塵埃落定的震撼——原來這不是終點,奇蹟真的在現實生了根。</p>
|
||||
|
||||
<p>四月的重逢是老小黃們守候十六年的淚水;而九月的單獨演唱會,則讓無數新小黃見證了那份無法動搖的羈絆。在那片黃色海洋裡,我們不只愛上了水晶男孩,更愛上了他們與小黃之間那種跨越時空的愛情。雖然遺憾沒能看見六人並肩的畫面,但那股新舊交織的生命力,確實為水晶注入了新的靈魂。
|
||||
</p>
|
||||
|
||||
<p>這份陪伴在十二月有了溫柔的延續。志溶雖然未回歸舞台,卻在《超回》中以最真實、幸福的模樣走入大家的生活。舞台上的空位雖讓心底隱隱作痛,但看著他幸福的樣子,我們才明白:原來大家只是換個方式一起變老,這份情誼早已超越了表演。
|
||||
</p>
|
||||
</article>
|
||||
<article class="story-node" data-era="2016">
|
||||
<h3>從路人到鐵粉:從夢境進現實</h3>
|
||||
<p>當《無限挑戰》的燈光熄滅,原本以為這場跨越十六年的重逢僅是曇花一現的夢境,但隨後五位成員與 YG
|
||||
簽約的消息,正式宣告了傳奇的歸來。九月演唱會上,新舊粉絲在黃色海洋中見證了跨越時空的強烈羈絆,那種心意相通的悸動,讓我們知道這道光從未真正熄滅過。</p>
|
||||
|
||||
<p>而志溶雖然未參與合體,卻在十二月演唱會落幕當天,透過《超人回來了》的預告驚喜現身。這不是告別,而是他選擇以另一種最真實、最溫馨的形式,在現實生活中繼續陪伴著大家。舞台上的空位雖然令人難過,但看到他帶著孩子幸福的模樣,我們才明白:原來水晶與粉絲的羈絆,早已超越了表演的定義,而是要在彼此的生活裡,一起變老,一起寫下新的篇章。
|
||||
</p>
|
||||
### 餘溫與新生:從奇蹟走向恆久
|
||||
|
||||
<p>當《無限挑戰》的燈光熄滅,原以為那場重逢只是十六年一次的曇花一現。同年五月,五位成員與 YG
|
||||
簽約的消息,讓夢境落實成了現實。四月的「六六歌」是屬於老粉絲守候十六年的淚水與重逢;而九月的個人演唱會,則是一場關於愛情的傳承。無數新粉絲透過黃色海洋,目睹了偶像與歌迷間那種超越時空的生死契闊,雖然志溶未能站上舞台成了這場盛宴唯一的遺憾,但那種「水晶男孩」與「黃飯」共生的生命力,卻從那一刻起,重新注入了新的靈魂。
|
||||
</p>
|
||||
|
||||
<p>這份羈絆在十二月有了更溫柔的延續。演唱會落幕當晚,志溶帶著孩子在《超人回來了》預告中驚喜現身。這不是告別,而是他換了一種最真實的形式,在現實生活中守護著這份情誼。舞台上的空位雖讓心底隱隱作痛,但看著他幸福的模樣,我們才懂得:水晶男孩的定義早已超越了表演,而是彼此約好在不同的時空裡,也要一起變老,一起寫下永不終結的篇章。
|
||||
</p>
|
||||
</article>
|
||||
<article class="story-node" data-era="2019">
|
||||
<h3>體制調整與穩定</h3>
|
||||
<p>調整為四人組合(殷志源、李宰鎮、金在德、張水院),繼續以經典魅力活躍於樂壇與綜藝。</p>
|
||||
</article>
|
||||
|
||||
<article class="story-node" data-era="NOW">
|
||||
<h3>至今:個人與團體並行</h3>
|
||||
<p>隊長殷志源活躍於各類綜藝節目,成員們也積極參與音樂與個人品牌活動。雖然活動節奏放緩,但水晶男孩仍是 K-POP 史上的長壽標竿。</p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
<!--
|
||||
<section id="story" class="story-archive">
|
||||
<h2 class="section-title">傳奇的轉折</h2>
|
||||
<div class="subtitle-wrap">
|
||||
<span class="sub-title">PLOT TWIST</span>
|
||||
</div>
|
||||
<p class="intro-text">
|
||||
像劇情的反轉一樣過癮:這幾個節點,剛好是許多人從「旁觀綜藝」滑進「正式入坑」的轉軌。若想讀對白級細節,請開
|
||||
<a href="fallen/totoga2.html">六六歌2 整合專區</a>(影片/電子書/紀實長文八章,同一頁切換模式即可)。
|
||||
</p>
|
||||
<div class="story-ebook-cta">
|
||||
<a href="fallen/totoga2.html#ebook" class="btn story-ebook-btn">開啟六六歌2 紀實電子書</a>
|
||||
<a href="fallen/totoga2.html" class="btn story-ebook-btn">六六歌2 整合專區</a>
|
||||
</div>
|
||||
|
||||
<div class="merged-storyline">
|
||||
<article id="special" class="story-node" data-era="六六歌">
|
||||
<h3>六六歌實錄</h3>
|
||||
<p>把懸念、試探與哭點縫在同一條時間軸上;很多人第一次真正把「水晶男孩」打進搜尋框,就是從這種瘋狂的剪輯節奏開始。</p>
|
||||
<p><a href="fallen/totoga2.html#ssg2">對照這一段幕後敘事</a></p>
|
||||
</article>
|
||||
<article id="negotiate" class="story-node" data-era="交涉">
|
||||
<h3>命運的交涉</h3>
|
||||
<p>KTV、游擊演唱會規則、與其說講道理不如說把真心擺上桌面——交涉的不是合約字面,而是還願不願意再一次肩並肩。</p>
|
||||
<p><a href="fallen/totoga2.html#negotiate">讀交涉與對話肌理</a></p>
|
||||
</article>
|
||||
<article id="complete" class="story-node" data-era="歸位">
|
||||
<h3>拼圖的歸位</h3>
|
||||
<p>變數一個個被排除之後,驚喜接上登場段落;缺一角舞台的視覺,終於對齊觀眾席上堅守的那片黃。</p>
|
||||
<p><a href="fallen/totoga2.html#gather">從「召集」段開始補這條線</a></p>
|
||||
</article>
|
||||
<article id="past" class="story-node" data-era="最初">
|
||||
<h3>巔峰與雨天</h3>
|
||||
<p>急凍、告別、各自的跑道——並不是要你沉浸遺憾,而是讓你懂:後來每一次亮燈,為什麼會更值得尖叫。</p>
|
||||
<p><a href="fallen/totoga2.html#sechskies-profile">讀這條脈絡的起點</a></p>
|
||||
</article>
|
||||
</div>
|
||||
</section> -->
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</body>
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-TW">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>SECHSKIES - 水晶男孩傳奇介紹</title>
|
||||
<link rel="stylesheet" href="assets/css/style.css">
|
||||
<link rel="stylesheet" href="assets/css/index.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="home-page">
|
||||
<header id="origin">
|
||||
<div class="hero">
|
||||
<h1>SECHSKIES<br>水晶男孩</h1>
|
||||
<div class="subtitle-wrap">
|
||||
<span class="sub-title">六顆永恆的水晶 • 左右命運的傳奇</span>
|
||||
</div>
|
||||
<a href="#start" class="btn">從這裡開始淪陷</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></nav>
|
||||
|
||||
<canvas id="particles"></canvas>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<section id="start">
|
||||
<h2 class="section-title">好奇的開端</h2>
|
||||
<div class="intro-text">
|
||||
<p class="core-description">
|
||||
這段旅程始於 2016 年 4 月,透過國民綜藝<span class="mark_b mark_y">《無限挑戰》</span>的回歸企劃,讓原本不認識這組傳奇的我,因一時好奇點開節目。
|
||||
即便錯過了那個屬於他們的世紀末,但跟著節目的編排鋪陳,從歡笑到感動,我被這些熱血、真誠且專業的大男孩所震撼。
|
||||
</p>
|
||||
<p class="call-to-action">
|
||||
身為在回歸後才被這場 <span class="mark_b mark_y">「黃色奇蹟」</span>
|
||||
擊中的新一代粉絲,我深刻體會那種從好奇觀看到最終徹底淪陷的悸動。這種從<span class="mark_b"><span class="fan-journey-wave"
|
||||
role="text">路人 <i class="fa-solid fa-circle-right"
|
||||
aria-hidden="true"></i> 入坑否定期 <i class="fa-solid fa-circle-right"
|
||||
aria-hidden="true"></i> 瘋狂考古期 <i class="fa-solid fa-circle-right"
|
||||
aria-hidden="true"></i> 坑底躺平深陷其中</span></span>的過程,證明了魅力可以跨越時間,也正是這一切自我覺醒的起點,驅動我不斷進化的無限可能。
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
<section id="mission" class="mission-section">
|
||||
<div class="mission-zigzag">
|
||||
<div class="mission-row mission-row--intro">
|
||||
<div class="mission-row__visual">
|
||||
<div class="logo-wrapper">
|
||||
<img src="./assets/images/logo.png" alt="SECHSKIES Logo Concept">
|
||||
<div class="caption">
|
||||
<span class="caption__line caption__line--title"><span class="arrow-icon mark_b"
|
||||
aria-hidden="true">↑</span>設計概念:</span>
|
||||
<span class="caption__line">六角形水晶、黃色海洋與我們的初心Six</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mission-row__body">
|
||||
<h2 class="section-title mission-block-title">成立的初衷</h2>
|
||||
<p class="mission-lead">
|
||||
以推廣 SECHSKIES <span class="mark_y">水晶男孩</span> 為核心,旨在透過 <span
|
||||
class="mark_b">專業的視覺策展</span> 宣傳成員魅力與小黃們的應援活動。嘗試以水晶男孩為
|
||||
<span class="mark_b">靈感主軸</span>,延伸至
|
||||
<span class="mark_b">網頁開發、視覺設計與內容企劃</span>
|
||||
等多重領域,將對偶像的喜愛轉化為 <span class="mark_b">實質的專業養分</span>。在這裡,你不只能探索他們的 <span
|
||||
class="mark_b">傳奇軌跡</span>,更能見證追星如何激發 <span class="mark_b">創作潛能</span>。
|
||||
</p>
|
||||
<div class="slogan-quote slogan-quote--mission">
|
||||
<span class="slogan-quote__inner">我要用這座<span
|
||||
class="mark_b">藝廊般的網站</span>證明:<br>追星的孩子不僅不會變壞,更會因為那份<span
|
||||
class="mark_b">守護並推廣的熱情</span>,<br>讓現在的自己變得比追星前的自己還要厲害!</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mission-row mission-row--concept">
|
||||
<div class="mission-row__body">
|
||||
<h3 class="mission-logo-heading">LOGO 設計理念</h3>
|
||||
<p>
|
||||
<span class="mark_b">「晶」</span>字發想來自<span class="mark_b">六角形的水晶</span>,為了強調水晶男孩<span
|
||||
class="mark_b">初心為六人</span>。上半部形似<span class="mark_b">數字
|
||||
6</span>,搭配演唱會必備的<span class="mark_b">手燈圖案</span>,代表粉絲和水晶<span
|
||||
class="mark_b">密不可分的關係</span>。<br>色彩配置發想來自無限挑戰六六歌特輯的回歸舞台,成員脫下眼罩的剎那,整個場地從<span
|
||||
class="mark_b mark_y">一片漆黑瞬間發亮</span>,映入眼簾的是一片<span class="mark_b">黃色海洋</span>,<span
|
||||
class="mark_y">讓成員和粉絲的世界跟著亮了起來</span>。以此片段為契機,設計成<span
|
||||
class="mark_b">黑色系與黃色系</span>的色彩搭配,來記錄那瞬間的感動。
|
||||
</p>
|
||||
</div>
|
||||
<div class="mission-row__visual">
|
||||
<div class="mission-moment-wrap">
|
||||
<div class="mission-gif-frame" role="group" aria-label="回歸演唱會/黃色氣球海(16:9)">
|
||||
<!-- 若改為 GIF 動圖,將底下 src 換成 ./assets/images/mission-balloon-sea.gif 即可 -->
|
||||
<img src="./assets/images/黃色海洋.gif" alt="無限挑戰 六六歌2 放送畫面:全場黃色氣球海">
|
||||
</div>
|
||||
<span class="caption">
|
||||
<span class="arrow-icon" aria-hidden="true">↑</span>
|
||||
回歸演唱會的動人瞬間-黃色氣球海
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<section id="timeline" class="story-archive">
|
||||
<h2 class="section-title">跨時空軌跡</h2>
|
||||
<div class="subtitle-wrap">
|
||||
<span class="sub-title">SECHSKIES STORY ARCHIVE</span>
|
||||
</div>
|
||||
|
||||
<div class="merged-storyline">
|
||||
<article class="story-node" data-era="1997">
|
||||
<h3>傳奇的誕生:六道光芒劃破韓流夜空</h3>
|
||||
<p>1997年4月15日,水晶男孩以強悍的《學園別曲》為起點,「黑水晶|Rap與舞蹈」、「白水晶|主唱」的雙色魅力交織,奠定了
|
||||
K-POP第一代傳奇的地位,開創了屬於黃色海洋的盛世與巔峰。</p>
|
||||
<p>在那段被韓劇<a
|
||||
href="https://www.disneyplus.com/browse/entity-3979fb82-8681-44e8-b7be-e313091f0d73?distributionPartner=google"
|
||||
class="story-external-inline" target="_blank" rel="noopener noreferrer"><span
|
||||
class="story-external-inline__label">《請回答1997》</span><i
|
||||
class="fa-solid fa-arrow-up-right-from-square" aria-hidden="true"></i></a>奉為經典的歲月裡,水晶男孩與
|
||||
H.O.T.
|
||||
並稱為兩大巔峰。無論是雨中那場被劇集致敬的粉絲大戰,還是為了買票露宿街頭的狂熱,白與黃的旗幟對決,成了那個世代集體記憶的起點。</p>
|
||||
</article>
|
||||
|
||||
<article class="story-node" data-era="2000">
|
||||
<h3>遺憾的休止符:凍結有你的世界</h3>
|
||||
<p>在最燦爛的時刻,這首華麗的樂章卻被迫畫下了休止符,2000年5月正式解散。成員各自發展走出了不同道路,水晶進入休眠期。
|
||||
</p>
|
||||
<p>那一場如同劇中描寫般、讓全韓無數少女世界崩塌的夢想演唱會告別現場,將未完的旋律封存在冷冽的空氣中。這一停頓,就是長達十六年的靜默,成為我們心中最完整、卻也最令人心碎的凝煉模樣。
|
||||
</p>
|
||||
</article>
|
||||
<article class="story-node story-node--ebook-ssg2" data-era="2016">
|
||||
<h3>感動合體:那一晚,我們找回了完整</h3>
|
||||
<p>塵封十六年的時光被溫柔拂去,跨越六千多天的等待,黃色氣球海再次淹沒了上岩運動場。當六個身影重新站在一起,那幅曾被凍結在 2000
|
||||
年的畫面終於再次「溶解」並重合。那一晚,淚水證明了奇蹟真的存在,我們終於找回了那份久違的完整,以為故事從此能圓滿續寫。</p>
|
||||
<span class="timeline-ebook-cta" aria-label="傳奇書寫中,連結暫停">
|
||||
<span>點我見證傳奇</span><i class="fa-solid fa-hand-pointer" aria-hidden="true"></i>
|
||||
</span>
|
||||
</article>
|
||||
<!-- 2016 年後續發展與情感轉折區塊 -->
|
||||
<article class="story-node" data-era="2016.05">
|
||||
<h3>從路人到鐵粉:從夢境進現實</h3>
|
||||
|
||||
<p>《無限挑戰》落幕後,原本以為這只是最後一場華麗的告別。在那段連期待都不敢奢侈、只能在螢幕前渴求消息的沈默裡,5 月 11
|
||||
日的簽約消息像是一記響亮的耳光,將所有人從絕望中打醒。那是從未知的空虛到塵埃落定的震撼——原來這不是終點,奇蹟真的在現實生了根。</p>
|
||||
|
||||
<p>四月的重逢是老小黃們守候十六年的淚水;而九月的單獨演唱會,則讓無數新小黃見證了那份無法動搖的羈絆。在那片黃色海洋裡,我們不只愛上了水晶男孩,更愛上了他們與小黃之間那種跨越時空的愛情。雖然遺憾沒能看見六人並肩的畫面,但那股新舊交織的生命力,確實為水晶注入了新的靈魂。
|
||||
</p>
|
||||
|
||||
<p>這份陪伴在十二月有了溫柔的延續。志溶雖然未回歸舞台,卻在《超回》中以最真實、幸福的模樣走入大家的生活。舞台上的空位雖讓心底隱隱作痛,但看著他幸福的樣子,我們才明白:原來大家只是換個方式一起變老,這份情誼早已超越了表演。
|
||||
</p>
|
||||
</article>
|
||||
<article class="story-node" data-era="2016">
|
||||
<h3>從路人到鐵粉:從夢境進現實</h3>
|
||||
<p>當《無限挑戰》的燈光熄滅,原本以為這場跨越十六年的重逢僅是曇花一現的夢境,但隨後五位成員與 YG
|
||||
簽約的消息,正式宣告了傳奇的歸來。九月演唱會上,新舊粉絲在黃色海洋中見證了跨越時空的強烈羈絆,那種心意相通的悸動,讓我們知道這道光從未真正熄滅過。</p>
|
||||
|
||||
<p>而志溶雖然未參與合體,卻在十二月演唱會落幕當天,透過《超人回來了》的預告驚喜現身。這不是告別,而是他選擇以另一種最真實、最溫馨的形式,在現實生活中繼續陪伴著大家。舞台上的空位雖然令人難過,但看到他帶著孩子幸福的模樣,我們才明白:原來水晶與粉絲的羈絆,早已超越了表演的定義,而是要在彼此的生活裡,一起變老,一起寫下新的篇章。
|
||||
</p>
|
||||
### 餘溫與新生:從奇蹟走向恆久
|
||||
|
||||
<p>當《無限挑戰》的燈光熄滅,原以為那場重逢只是十六年一次的曇花一現。同年五月,五位成員與 YG
|
||||
簽約的消息,讓夢境落實成了現實。四月的「六六歌」是屬於老粉絲守候十六年的淚水與重逢;而九月的個人演唱會,則是一場關於愛情的傳承。無數新粉絲透過黃色海洋,目睹了偶像與歌迷間那種超越時空的生死契闊,雖然志溶未能站上舞台成了這場盛宴唯一的遺憾,但那種「水晶男孩」與「黃飯」共生的生命力,卻從那一刻起,重新注入了新的靈魂。
|
||||
</p>
|
||||
|
||||
<p>這份羈絆在十二月有了更溫柔的延續。演唱會落幕當晚,志溶帶著孩子在《超人回來了》預告中驚喜現身。這不是告別,而是他換了一種最真實的形式,在現實生活中守護著這份情誼。舞台上的空位雖讓心底隱隱作痛,但看著他幸福的模樣,我們才懂得:水晶男孩的定義早已超越了表演,而是彼此約好在不同的時空裡,也要一起變老,一起寫下永不終結的篇章。
|
||||
</p>
|
||||
</article>
|
||||
<article class="story-node" data-era="2019">
|
||||
<h3>體制調整與穩定</h3>
|
||||
<p>調整為四人組合(殷志源、李宰鎮、金在德、張水院),繼續以經典魅力活躍於樂壇與綜藝。</p>
|
||||
</article>
|
||||
|
||||
<article class="story-node" data-era="NOW">
|
||||
<h3>至今:個人與團體並行</h3>
|
||||
<p>隊長殷志源活躍於各類綜藝節目,成員們也積極參與音樂與個人品牌活動。雖然活動節奏放緩,但水晶男孩仍是 K-POP 史上的長壽標竿。</p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
<!--
|
||||
<section id="story" class="story-archive">
|
||||
<h2 class="section-title">傳奇的轉折</h2>
|
||||
<div class="subtitle-wrap">
|
||||
<span class="sub-title">PLOT TWIST</span>
|
||||
</div>
|
||||
<p class="intro-text">
|
||||
像劇情的反轉一樣過癮:這幾個節點,剛好是許多人從「旁觀綜藝」滑進「正式入坑」的轉軌。若想讀對白級細節,請開
|
||||
<a href="fallen/totoga2.html">六六歌2 整合專區</a>(影片/電子書/紀實長文八章,同一頁切換模式即可)。
|
||||
</p>
|
||||
<div class="story-ebook-cta">
|
||||
<a href="fallen/totoga2.html#ebook" class="btn story-ebook-btn">開啟六六歌2 紀實電子書</a>
|
||||
<a href="fallen/totoga2.html" class="btn story-ebook-btn">六六歌2 整合專區</a>
|
||||
</div>
|
||||
|
||||
<div class="merged-storyline">
|
||||
<article id="special" class="story-node" data-era="六六歌">
|
||||
<h3>六六歌實錄</h3>
|
||||
<p>把懸念、試探與哭點縫在同一條時間軸上;很多人第一次真正把「水晶男孩」打進搜尋框,就是從這種瘋狂的剪輯節奏開始。</p>
|
||||
<p><a href="fallen/totoga2.html#ssg2">對照這一段幕後敘事</a></p>
|
||||
</article>
|
||||
<article id="negotiate" class="story-node" data-era="交涉">
|
||||
<h3>命運的交涉</h3>
|
||||
<p>KTV、游擊演唱會規則、與其說講道理不如說把真心擺上桌面——交涉的不是合約字面,而是還願不願意再一次肩並肩。</p>
|
||||
<p><a href="fallen/totoga2.html#negotiate">讀交涉與對話肌理</a></p>
|
||||
</article>
|
||||
<article id="complete" class="story-node" data-era="歸位">
|
||||
<h3>拼圖的歸位</h3>
|
||||
<p>變數一個個被排除之後,驚喜接上登場段落;缺一角舞台的視覺,終於對齊觀眾席上堅守的那片黃。</p>
|
||||
<p><a href="fallen/totoga2.html#gather">從「召集」段開始補這條線</a></p>
|
||||
</article>
|
||||
<article id="past" class="story-node" data-era="最初">
|
||||
<h3>巔峰與雨天</h3>
|
||||
<p>急凍、告別、各自的跑道——並不是要你沉浸遺憾,而是讓你懂:後來每一次亮燈,為什麼會更值得尖叫。</p>
|
||||
<p><a href="fallen/totoga2.html#sechskies-profile">讀這條脈絡的起點</a></p>
|
||||
</article>
|
||||
</div>
|
||||
</section> -->
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</body>
|
||||
|
||||
</html>
|
||||