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

0508

Browse Source
This commit is contained in:
jekkinoopy
2026-05-09 22:04:55 +08:00
parent 91d2f82a26
commit 4de9703cd8
16 changed files with 1111 additions and 314 deletions
Download Patch File Download Diff File Expand all files Collapse all files
archive.html
+145
View File
@@ -0,0 +1,145 @@
<!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="style.css">
<link rel="stylesheet" href="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="tablet.css">
</head>
<body>
<header class="map-archive-header">
<div class="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="水晶男孩推廣部導覽">
<a class="logo" href="index.html"><img src="./img/logov.svg" alt="SECHSKIES Logo"></a>
<ul>
<li><a href="index.html#origin">淪陷瞬間</a>
<ul class="portal-submenu">
<li><a href="index.html#mission">成立的初衷</a></li>
<li><a href="index.html#timeline">跨時空軌跡</a></li>
<li><a href="index.html#start">好奇的開端</a></li>
</ul>
</li>
<li><a href="jiwon.html">瘋子與天才</a>
<ul class="portal-submenu">
<li><a href="jiwon.html#variety">瘋狂出演中</a></li>
<li><a href="jiwon.html#stage">隊長的氣場</a></li>
</ul>
</li>
<li><a href="sunghoon.html">消失的真相</a>
<ul class="portal-submenu">
<li><a href="sunghoon.html#truth">還原那場雨</a></li>
<li><a href="sunghoon.html#voice">被掩蓋的主唱</a></li>
</ul>
</li>
<li><a href="concert.html">現場的震撼</a>
<ul class="portal-submenu">
<li><a href="concert.html#stage-now">永恆的重逢</a></li>
<li><a href="concert.html#stage-past">燦爛的最初</a></li>
</ul>
</li>
<li><a href="archive.html">黃色留聲機</a>
<ul class="portal-submenu">
<li><a href="archive.html#new">啟動新篇章</a></li>
<li><a href="archive.html#classic">輝煌全盛期</a></li>
</ul>
</li>
<li><a href="map.html">聖地巡禮</a>
<ul class="portal-submenu">
<li><a href="map.html#taipei">台北聖地</a></li>
<li><a href="map.html#global">海外遠征</a></li>
</ul>
</li>
</ul>
</nav>
<canvas id="particles"></canvas>
<div class="container">
<section class="archive-intro" aria-label="導語">
<p class="intro-text archive-intro-lead">
音軌才是與這個名字最直白相遇的方式——以下先收精選年表與深水連結。
</p>
</section>
<div id="new" class="archive-block">
<h2 class="section-title">啟動新篇章</h2>
<p>回歸後的數位單曲與專輯，是現在進行式的聲紋紀錄；耳機調大聲一格，就能把「新篇章」接住。</p>
<p><a href="lyrics.html">聽見歌詞細節</a></p>
</div>
<div id="classic" class="archive-block">
<h2 class="section-title">輝煌全盛期</h2>
<p>主打的記憶點、b-side 的伏筆、舞步與應援口號——想一次收進收藏庫，往這張整理頁走。</p>
<p><a href="classic.html">打開輝煌全盛期整理</a></p>
</div>
<section id="albums">
<h2 class="section-title">歷年作品 (精選)</h2>
<table>
<thead>
<tr>
<th>年份</th>
<th>專輯/作品</th>
<th>主打歌</th>
</tr>
</thead>
<tbody>
<tr>
<td>1997</td>
<td>學園別曲</td>
<td>學園別曲 / 男兒之路 (Pom Saeng Pom Sa)</td>
</tr>
<tr>
<td>1998</td>
<td>Road Fighter</td>
<td>Road Fighter / Couple</td>
</tr>
<tr>
<td>1999</td>
<td>Com'Back</td>
<td>Com'Back</td>
</tr>
<tr>
<td>2016</td>
<td><a href="lyrics.html">數位單曲</a></td>
<td><a href="lyrics.html">Three Words (三個詞)</a></td>
</tr>
<tr>
<td>2017</td>
<td>ANOTHER LIGHT</td>
<td>Something Special / Smile</td>
</tr>
<tr>
<td>2020</td>
<td>ALL FOR YOU</td>
<td>ALL FOR YOU</td>
</tr>
</tbody>
</table>
</section>
</div>
<footer>
<p>SECHSKIES Fanpage &copy; 2026 - 黃色氣球永遠飄揚</p>
<a href="https://jekkinoopy.github.io/Portfolio/" class="studio-link" target="_blank">
Design by <strong>Jekkinoopy Studio</strong>
</a>
</footer>
<script src="particles.js"></script>
<script src="portal-nav.js"></script>
</body>
</html>
chronicle.html
+20 -25
View File
@@ -4,17 +4,18 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>水晶男孩｜十六年約定</title>
<title>水晶男孩｜傳奇紀實長卷</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<link rel="stylesheet" href="tablet.css">
</head>
<body class="chronicle-page">
<header class="map-archive-header">
<div class="header-inner">
<h1 class="main-title">十六年約定</h1>
<h1 class="main-title">傳奇紀實長卷</h1>
<div class="subtitle-wrap">
<span class="sub-title">SECHSKIES COM' BACK · APRIL 14 · 2016</span>
<span class="sub-title">COM' BACK CHRONICLE</span>
</div>
</div>
</header>
@@ -22,46 +23,40 @@
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽">
<a class="logo" href="index.html"><img src="./img/logov.svg" alt="SECHSKIES Logo"></a>
<ul>
<li><a href="index.html#intro">淪陷瞬間</a>
<li><a href="index.html#origin">淪陷瞬間</a>
<ul class="portal-submenu">
<li><a href="index.html#mission">成立的初衷</a></li>
<li><a href="index.html#current">跨時空軌跡</a></li>
<li><a href="index.html#story">好奇的代價</a></li>
<li><a href="index.html#timeline">跨時空軌跡</a></li>
<li><a href="index.html#start">好奇的開端</a></li>
</ul>
</li>
<li><a href="chronicle.html">十六年約定</a>
<li><a href="jiwon.html">瘋子與天才</a>
<ul class="portal-submenu">
<li><a href="#challenge">無限挑戰</a></li>
<li><a href="#ssg2">六六歌第二季</a></li>
<li><a href="#sechskies-profile">水晶男孩</a></li>
<li><a href="#gather">召集</a></li>
<li><a href="#negotiate">正式交涉</a></li>
<li><a href="#variables">變數</a></li>
<li><a href="#surprise">驚喜</a></li>
<li><a href="#final-stage">登場</a></li>
<li><a href="jiwon.html#variety">瘋狂出演中</a></li>
<li><a href="jiwon.html#stage">隊長的氣場</a></li>
</ul>
</li>
<li><a href="index.html#archive">黃色留聲機</a>
<li><a href="sunghoon.html">消失的真相</a>
<ul class="portal-submenu">
<li><a href="classic.html">輝煌全盛期</a></li>
<li><a href="index.html#new">啟動新篇章</a></li>
<li><a href="sunghoon.html#truth">還原那場雨</a></li>
<li><a href="sunghoon.html#voice">被掩蓋的主唱</a></li>
</ul>
</li>
<li><a href="concert.html">現場的悸動</a>
<li><a href="concert.html">現場的震撼</a>
<ul class="portal-submenu">
<li><a href="concert.html#classic-stage" data-coming-soon="true" aria-disabled="true">燦爛的最初</a></li>
<li><a href="concert.html#reunion-stage">永恆的重逢</a></li>
<li><a href="concert.html#stage-now">永恆的重逢</a></li>
<li><a href="concert.html#stage-past">燦爛的最初</a></li>
</ul>
</li>
<li class="coming-soon"><a href="variety.html" data-coming-soon="true" aria-disabled="true">綜藝熱播中</a>
<li><a href="archive.html">黃色留聲機</a>
<ul class="portal-submenu">
<li><a href="variety.html#jiwon" data-coming-soon="true" aria-disabled="true">瘋子與天才</a></li>
<li><a href="variety.html#group" data-coming-soon="true" aria-disabled="true">舞台外真實</a></li>
<li><a href="archive.html#new">啟動新篇章</a></li>
<li><a href="archive.html#classic">輝煌全盛期</a></li>
</ul>
</li>
<li><a href="map.html">聖地巡禮</a>
<ul class="portal-submenu">
<li><a href="map.html#taiwan">台灣聖地</a></li>
<li><a href="map.html#taipei">台北聖地</a></li>
<li><a href="map.html#global">海外遠征</a></li>
</ul>
</li>
classic.html
+18 -23
View File
@@ -7,13 +7,14 @@
<title>水晶男孩｜輝煌全盛期</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<link rel="stylesheet" href="tablet.css">
</head>
<body>
<header>
<div class="hero">
<h1>輝煌全盛期</h1>
<p>26 年前的經典作品整理</p>
<p>全盛期作品與主打脈絡整理</p>
<a href="#classic-albums" class="btn">查看專輯清單</a>
</div>
</header>
@@ -21,46 +22,40 @@
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽">
<a class="logo" href="index.html"><img src="./img/logov.svg" alt="SECHSKIES Logo"></a>
<ul>
<li><a href="index.html#intro">淪陷瞬間</a>
<li><a href="index.html#origin">淪陷瞬間</a>
<ul class="portal-submenu">
<li><a href="index.html#mission">成立的初衷</a></li>
<li><a href="index.html#current">跨時空軌跡</a></li>
<li><a href="index.html#story">好奇的代價</a></li>
<li><a href="index.html#timeline">跨時空軌跡</a></li>
<li><a href="index.html#start">好奇的開端</a></li>
</ul>
</li>
<li><a href="chronicle.html">十六年約定</a>
<li><a href="jiwon.html">瘋子與天才</a>
<ul class="portal-submenu">
<li><a href="chronicle.html#challenge">無限挑戰</a></li>
<li><a href="chronicle.html#ssg2">六六歌第二季</a></li>
<li><a href="chronicle.html#sechskies-profile">水晶男孩</a></li>
<li><a href="chronicle.html#gather">召集</a></li>
<li><a href="chronicle.html#negotiate">正式交涉</a></li>
<li><a href="chronicle.html#variables">變數</a></li>
<li><a href="chronicle.html#surprise">驚喜</a></li>
<li><a href="chronicle.html#final-stage">登場</a></li>
<li><a href="jiwon.html#variety">瘋狂出演中</a></li>
<li><a href="jiwon.html#stage">隊長的氣場</a></li>
</ul>
</li>
<li><a href="index.html#archive">黃色留聲機</a>
<li><a href="sunghoon.html">消失的真相</a>
<ul class="portal-submenu">
<li><a href="classic.html">輝煌全盛期</a></li>
<li><a href="index.html#new">啟動新篇章</a></li>
<li><a href="sunghoon.html#truth">還原那場雨</a></li>
<li><a href="sunghoon.html#voice">被掩蓋的主唱</a></li>
</ul>
</li>
<li><a href="concert.html">現場的悸動</a>
<li><a href="concert.html">現場的震撼</a>
<ul class="portal-submenu">
<li><a href="concert.html#classic-stage" data-coming-soon="true" aria-disabled="true">燦爛的最初</a></li>
<li><a href="concert.html#reunion-stage">永恆的重逢</a></li>
<li><a href="concert.html#stage-now">永恆的重逢</a></li>
<li><a href="concert.html#stage-past">燦爛的最初</a></li>
</ul>
</li>
<li class="coming-soon"><a href="variety.html" data-coming-soon="true" aria-disabled="true">綜藝熱播中</a>
<li><a href="archive.html">黃色留聲機</a>
<ul class="portal-submenu">
<li><a href="variety.html#jiwon" data-coming-soon="true" aria-disabled="true">瘋子與天才</a></li>
<li><a href="variety.html#group" data-coming-soon="true" aria-disabled="true">舞台外真實</a></li>
<li><a href="archive.html#new">啟動新篇章</a></li>
<li><a href="archive.html#classic">輝煌全盛期</a></li>
</ul>
</li>
<li><a href="map.html">聖地巡禮</a>
<ul class="portal-submenu">
<li><a href="map.html#taiwan">台灣聖地</a></li>
<li><a href="map.html#taipei">台北聖地</a></li>
<li><a href="map.html#global">海外遠征</a></li>
</ul>
</li>
concert.css
+47 -1
View File
@@ -153,7 +153,8 @@ body {
.con-1,
.con-2,
.con-3,
.con-4 {
.con-4,
#yellownote-stage {
display: flex;
flex-direction: column;
background-color: #fff;
@@ -173,6 +174,23 @@ img {
align-items: center;
}
/* 重逢區：大卡垂直堆疊，錨點落在區塊頂端 */
#stage-now {
display: flex;
flex-direction: column;
gap: 0;
}
#yellownote-stage .yellownote-tagline {
margin: -1.5rem auto 1.75rem;
padding: 0 1rem;
text-align: center;
font-size: clamp(0.9rem, 1.8vw, 1rem);
font-weight: 650;
color: #555;
letter-spacing: 0.04em;
}
/* 右上角緞帶：改用獨立 div 或確保不被裁切 */
[data-tour]::after {
content: attr(data-tour);
@@ -199,6 +217,34 @@ img {
color: #333;
}
/* 燦爛的最初：小節標（對齊隔壁「一張大卡＋多個場次列」） */
#stage-past .stage-past-era {
margin-top: 2.25rem;
}
#stage-past .stage-past-era:first-of-type {
margin-top: 0;
}
#stage-past .tour-era-heading {
display: block;
margin: 0 0 0.5rem;
padding: 0 1rem;
font-size: clamp(1rem, 2vw, 1.12rem);
font-weight: 800;
text-align: center;
color: #333;
}
#stage-past .tour-era-meta {
opacity: 0.9;
font-size: 0.92rem;
margin: 0 0 0.85rem;
padding: 0 1rem;
text-align: center;
color: #555;
}
/* 第二層：地點區塊 (通用選擇器) */
/* 只要是 con-X-X 的格式都套用 */
[class*="con-"][class*="-"] {
concert.html
+226 -69
View File
@@ -8,6 +8,7 @@
<link rel="stylesheet" href="concert.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<link rel="stylesheet" href="tablet.css">
</head>
<body class="concert-page">
@@ -23,46 +24,40 @@
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽">
<a class="logo" href="index.html"><img src="./img/logov.svg" alt="SECHSKIES Logo"></a>
<ul>
<li><a href="index.html#intro">淪陷瞬間</a>
<li><a href="index.html#origin">淪陷瞬間</a>
<ul class="portal-submenu">
<li><a href="index.html#mission">成立的初衷</a></li>
<li><a href="index.html#current">跨時空軌跡</a></li>
<li><a href="index.html#story">好奇的代價</a></li>
<li><a href="index.html#timeline">跨時空軌跡</a></li>
<li><a href="index.html#start">好奇的開端</a></li>
</ul>
</li>
<li><a href="chronicle.html">十六年約定</a>
<li><a href="jiwon.html">瘋子與天才</a>
<ul class="portal-submenu">
<li><a href="chronicle.html#challenge">無限挑戰</a></li>
<li><a href="chronicle.html#ssg2">六六歌第二季</a></li>
<li><a href="chronicle.html#sechskies-profile">水晶男孩</a></li>
<li><a href="chronicle.html#gather">召集</a></li>
<li><a href="chronicle.html#negotiate">正式交涉</a></li>
<li><a href="chronicle.html#variables">變數</a></li>
<li><a href="chronicle.html#surprise">驚喜</a></li>
<li><a href="chronicle.html#final-stage">登場</a></li>
<li><a href="jiwon.html#variety">瘋狂出演中</a></li>
<li><a href="jiwon.html#stage">隊長的氣場</a></li>
</ul>
</li>
<li><a href="index.html#archive">黃色留聲機</a>
<li><a href="sunghoon.html">消失的真相</a>
<ul class="portal-submenu">
<li><a href="classic.html">輝煌全盛期</a></li>
<li><a href="index.html#new">啟動新篇章</a></li>
<li><a href="sunghoon.html#truth">還原那場雨</a></li>
<li><a href="sunghoon.html#voice">被掩蓋的主唱</a></li>
</ul>
</li>
<li><a href="concert.html">現場的悸動</a>
<li><a href="concert.html">現場的震撼</a>
<ul class="portal-submenu">
<li><a href="concert.html#classic-stage" data-coming-soon="true" aria-disabled="true">燦爛的最初</a></li>
<li><a href="concert.html#reunion-stage">永恆的重逢</a></li>
<li><a href="concert.html#stage-now">永恆的重逢</a></li>
<li><a href="concert.html#stage-past">燦爛的最初</a></li>
</ul>
</li>
<li class="coming-soon"><a href="variety.html" data-coming-soon="true" aria-disabled="true">綜藝熱播中</a>
<li><a href="archive.html">黃色留聲機</a>
<ul class="portal-submenu">
<li><a href="variety.html#jiwon" data-coming-soon="true" aria-disabled="true">瘋子與天才</a></li>
<li><a href="variety.html#group" data-coming-soon="true" aria-disabled="true">舞台外真實</a></li>
<li><a href="archive.html#new">啟動新篇章</a></li>
<li><a href="archive.html#classic">輝煌全盛期</a></li>
</ul>
</li>
<li><a href="map.html">聖地巡禮</a>
<ul class="portal-submenu">
<li><a href="map.html#taiwan">台灣聖地</a></li>
<li><a href="map.html#taipei">台北聖地</a></li>
<li><a href="map.html#global">海外遠征</a></li>
</ul>
</li>
@@ -74,47 +69,48 @@
</div>
<div class="concert-container">
<!-- 演唱會 con-$ -->
<div id="classic-stage" class="con-1" data-tour="YELLOW NOTE">
<span class="title">2016&nbsp;&nbsp;|&nbsp;&nbsp; YELLOW NOTE</span>
<!-- 永恆的重逢：2016 首場回歸演唱會 → 二十週年巡演 -->
<section id="stage-now" aria-label="永恆的重逢">
<div id="yellownote-stage" data-tour="YELLOW NOTE">
<span class="title">2016&nbsp;&nbsp;|&nbsp;&nbsp;YELLOW NOTE</span>
<p class="yellownote-tagline">首場回歸演唱會</p>
<img src="img/concert/2016.jpg" alt="">
<!-- 地點 con-$-$ -->
<div class="con-1-1 attended" data-date1="09.10">
<span class="location"> 首爾 | 首爾奧林匹克體操競技場</span>
<input type="checkbox" id="expand-con-1-1" class="expand-trigger">
<!-- 曲目 con-$-$-$ -->
<div class="con-yk-1 attended" data-date1="09.10">
<span class="location">首爾 | 首爾奧林匹克體操競技場</span>
<input type="checkbox" id="expand-yk-1" class="expand-trigger">
<div class="track-list">
<div class="track-item"><span class="track">COM' BACK</div>
<div class="track-item"><span class="track">ROAD FIGHTER</div>
<div class="track-item"><span class="track">폼생폼사 / 品生品死</div>
<div class="track-item"><span class="track">COME TO ME BABY</div>
<div class="track-item"><span class="track">배신감（BAD GIRL）/ 背叛感</div>
<div class="track-item"><span class="track">사랑하는 너에게（DEAR LOVE）/ 給親愛的你</div>
<div class="track-item"><span class="track">예감（GOT A FEELING）/ 預感</div>
<div class="track-item"><span class="track">너를 보내며（LET U GO）/ 送你離開</div>
<div class="track-item"><span class="track">8t. TRUCK － 殷志源</div>
<div class="track-item"><span class="track">DOUBLE J － 李宰鎮</div>
<div class="track-item"><span class="track">A+ － 金在德</div>
<div class="track-item"><span class="track">그대로 멈춰 / 就那樣停止－ BLACKKIES（殷志源、李宰鎮、金在德）</div>
<div class="track-item"><span class="track">SAY － WHITEKIES（姜成勳、張水院）</div>
<div class="track-item"><span class="track">SUDDENLY － 張水院</div>
<div class="track-item"><span class="track">MY GIRL － 姜成勳</div>
<div class="track-item"><span class="track">무모한 사랑（RECKLESS LOVE）/ 不可能的愛</div>
<div class="track-item"><span class="track">연정（HEARTBREAK）/ 戀情</div>
<div class="track-item"><span class="track">커플（COUPLE）/ 戀人</div>
<div class="track-item"><span class="track">기억해줄래 / 請記得好嗎</div>
<div class="track-item"><span class="track">ENCORE：학원별곡（RISE UP）/ 學園別曲</div>
<div class="track-item"><span class="track">기사도 / 騎士道</div>
<div class="track-item"><span class="track">그날까지（TOGETHER FOREVER）/ 直到那一天</div>
<div class="track-item"><span class="track">DOUBLE ENCORE：（2016年9月11日）</div>
<div class="track-item"><span class="track">사랑하는 너에게（DEAR LOVE）/ 給親愛的你</div>
<div class="track-item"><span class="track">커플（COUPLE）/ 戀人</div>
<div class="track-item"><span class="track">COM' BACK</span></div>
<div class="track-item"><span class="track">ROAD FIGHTER</span></div>
<div class="track-item"><span class="track">폼생폼사 / 品生品死</span></div>
<div class="track-item"><span class="track">COME TO ME BABY</span></div>
<div class="track-item"><span class="track">배신감（BAD GIRL）/ 背叛感</span></div>
<div class="track-item"><span class="track">사랑하는 너에게（DEAR LOVE）/ 給親愛的你</span></div>
<div class="track-item"><span class="track">예감（GOT A FEELING）/ 預感</span></div>
<div class="track-item"><span class="track">너를 보내며（LET U GO）/ 送你離開</span></div>
<div class="track-item"><span class="track">8t. TRUCK － 殷志源</span></div>
<div class="track-item"><span class="track">DOUBLE J － 李宰鎮</span></div>
<div class="track-item"><span class="track">A+ － 金在德</span></div>
<div class="track-item"><span class="track">그대로 멈춰 / 就那樣停止－ BLACKKIES（殷志源、李宰鎮、金在德）</span></div>
<div class="track-item"><span class="track">SAY － WHITEKIES（姜成勳、張水院）</span></div>
<div class="track-item"><span class="track">SUDDENLY － 張水院</span></div>
<div class="track-item"><span class="track">MY GIRL － 姜成勳</span></div>
<div class="track-item"><span class="track">무모한 사랑（RECKLESS LOVE）/ 不可能的愛</span></div>
<div class="track-item"><span class="track">연정（HEARTBREAK）/ 戀情</span></div>
<div class="track-item"><span class="track">커플（COUPLE）/ 戀人</span></div>
<div class="track-item"><span class="track">기억해줄래 / 請記得好嗎</span></div>
<div class="track-item"><span class="track">ENCORE：학원별곡（RISE UP）/ 學園別曲</span></div>
<div class="track-item"><span class="track">기사도 / 騎士道</span></div>
<div class="track-item"><span class="track">그날까지（TOGETHER FOREVER）/ 直到那一天</span></div>
<div class="track-item"><span class="track">DOUBLE ENCORE：（2016年9月11日）</span></div>
<div class="track-item"><span class="track">사랑하는 너에게（DEAR LOVE）/ 給親愛的你</span></div>
<div class="track-item"><span class="track">커플（COUPLE）/ 戀人</span></div>
</div>
<label for="expand-con-1-1" class="expand-btn"></label>
<label for="expand-yk-1" class="expand-btn"></label>
</div>
<div class="con-1-2">
<div class="con-yk-2">
<span class="location">大邱 | 大邱會展中心</span>
<input type="checkbox" id="expand-con-1-2" class="expand-trigger">
<input type="checkbox" id="expand-yk-2" class="expand-trigger">
<div class="track-list">
<div class="track-item"><span class="track">COM' BACK</span></div>
<div class="track-item"><span class="track">학원별곡（RISE UP）/ 學園別曲</span></div>
@@ -140,11 +136,11 @@
<div class="track-item"><span class="track">기억해줄래 / 請記得好嗎</span></div>
<div class="track-item"><span class="track">그날까지（TOGETHER FOREVER）/ 直到那一天</span></div>
</div>
<label for="expand-con-1-2" class="expand-btn"></label>
<label for="expand-yk-2" class="expand-btn"></label>
</div>
<div class="con-1-3 attended" data-date1="12.23" data-date2="12.24">
<div class="con-yk-3 attended" data-date1="12.23" data-date2="12.24">
<span class="location">釜山 | 釜山會展中心</span>
<input type="checkbox" id="expand-con-1-3" class="expand-trigger">
<input type="checkbox" id="expand-yk-3" class="expand-trigger">
<div class="track-list">
<div class="track-item"><span class="track">COM' BACK</span></div>
<div class="track-item"><span class="track">학원별곡（RISE UP）/ 學園別曲</span></div>
@@ -170,12 +166,11 @@
<div class="track-item"><span class="track">기억해줄래 / 請記得好嗎</span></div>
<div class="track-item"><span class="track">그날까지（TOGETHER FOREVER）/ 直到那一天</span></div>
</div>
<label for="expand-con-1-3" class="expand-btn"></label>
<label for="expand-yk-3" class="expand-btn"></label>
</div>
<div class="con-1-4">
<div class="con-yk-4">
<span class="location">首爾 | 蠶室室內體育館</span>
<input type="checkbox" id="expand-con-1-4" class="expand-trigger">
<input type="checkbox" id="expand-yk-4" class="expand-trigger">
<div class="track-list">
<div class="track-item"><span class="track">학원별곡（RISE UP）/ 學園別曲</span></div>
<div class="track-item"><span class="track">COM' BACK</span></div>
@@ -199,11 +194,11 @@
<div class="track-item"><span class="track">ROAD FIGHTER</span></div>
<div class="track-item"><span class="track">커플（COUPLE）/ 戀人</span></div>
</div>
<label for="expand-con-1-4" class="expand-btn"></label>
<label for="expand-yk-4" class="expand-btn"></label>
</div>
</div>
<!-- 演唱會 02 -->
<div id="reunion-stage" class="con-2" data-tour="20TH ANNIV.">
<div class="con-2" data-tour="20TH ANNIV.">
<span class="title">2017-2018&nbsp;&nbsp;|&nbsp;&nbsp;20TH ANNIVERSARY</span>
<img src="img/concert/2017.jpg" alt="">
@@ -384,6 +379,8 @@
<label for="expand-con-2-5" class="expand-btn"></label>
</div>
</div>
</section>
<!-- 演唱會 03 -->
<div class="con-3" data-tour="NOW・HERE・AGAIN.">
<span class="title">2018&nbsp;&nbsp;|&nbsp;&nbsp;NOW・HERE・AGAIN</span>
@@ -449,7 +446,167 @@
<!-- 移除展開按鈕，因為沒有曲目可展開 -->
</div>
</div>
</div>
<!-- 燦爛的最初（九十年代）／錨點 #stage-past -->
<section id="stage-past" aria-label="燦爛的最初">
<div class="con-1" data-tour="CLASSIC LIVE">
<span class="title">九十年代經典巡迴</span>
<div class="stage-past-era">
<span class="tour-era-heading">1997&nbsp;|&nbsp;Sechky的Christmas</span>
<div class="con-1-1">
<span class="location">1997.12.21 | 首爾 | 韓國 | 世宗文化會館</span>
<input type="checkbox" id="expand-con-1-1" class="expand-trigger">
<div class="track-list">
<div class="track-item"><span class="track">演出曲順待整理</span></div>
</div>
<label for="expand-con-1-1" class="expand-btn"></label>
</div>
</div>
<div class="stage-past-era">
<span class="tour-era-heading">1998&nbsp;|&nbsp;Encore Concert</span>
<div class="con-1-2">
<span class="location">1998.02.22 | 首爾 | 韓國 | 首爾奧林匹克體操競技場</span>
<input type="checkbox" id="expand-con-1-2" class="expand-trigger">
<div class="track-list">
<div class="track-item"><span class="track">演出曲順待整理</span></div>
</div>
<label for="expand-con-1-2" class="expand-btn"></label>
</div>
</div>
<div class="stage-past-era">
<span class="tour-era-heading">1998&nbsp;|&nbsp;全國巡迴演唱會</span>
<p class="tour-era-meta">1998年2月28日 — 4月5日・韓國・共 6 場</p>
<div class="con-1-3">
<span class="location">1998.02.28 | 釜山 | 韓國 | 釜山 KBS Hall</span>
<input type="checkbox" id="expand-con-1-3" class="expand-trigger">
<div class="track-list">
<div class="track-item"><span class="track">演出曲順待整理</span></div>
</div>
<label for="expand-con-1-3" class="expand-btn"></label>
</div>
<div class="con-1-4">
<span class="location">1998.03.08 | 蔚山 | 韓國 | 蔚山 KBS Hall</span>
<input type="checkbox" id="expand-con-1-4" class="expand-trigger">
<div class="track-list">
<div class="track-item"><span class="track">演出曲順待整理</span></div>
</div>
<label for="expand-con-1-4" class="expand-btn"></label>
</div>
<div class="con-1-5">
<span class="location">1998.03.14 | 光州 | 韓國 | 光州廣域市綜合體育館</span>
<input type="checkbox" id="expand-con-1-5" class="expand-trigger">
<div class="track-list">
<div class="track-item"><span class="track">演出曲順待整理</span></div>
</div>
<label for="expand-con-1-5" class="expand-btn"></label>
</div>
<div class="con-1-6">
<span class="location">1998.03.22 | 富川 | 韓國 | 富川室內體育館</span>
<input type="checkbox" id="expand-con-1-6" class="expand-trigger">
<div class="track-list">
<div class="track-item"><span class="track">演出曲順待整理</span></div>
</div>
<label for="expand-con-1-6" class="expand-btn"></label>
</div>
<div class="con-1-7">
<span class="location">1998.03.28 | 大邱 | 韓國 | E·WORLD</span>
<input type="checkbox" id="expand-con-1-7" class="expand-trigger">
<div class="track-list">
<div class="track-item"><span class="track">演出曲順待整理</span></div>
</div>
<label for="expand-con-1-7" class="expand-btn"></label>
</div>
<div class="con-1-8">
<span class="location">1998.04.05 | 大田 | 韓國 | CMB Expo Art Hall</span>
<input type="checkbox" id="expand-con-1-8" class="expand-trigger">
<div class="track-list">
<div class="track-item"><span class="track">演出曲順待整理</span></div>
</div>
<label for="expand-con-1-8" class="expand-btn"></label>
</div>
</div>
<div class="stage-past-era">
<span class="tour-era-heading">1998&nbsp;|&nbsp;Sechky的Christmas Concert</span>
<div class="con-1-9">
<span class="location">1998.12.24 | 釜山 | 韓國 | 社稷棒球場</span>
<input type="checkbox" id="expand-con-1-9" class="expand-trigger">
<div class="track-list">
<div class="track-item"><span class="track">演出曲順待整理</span></div>
</div>
<label for="expand-con-1-9" class="expand-btn"></label>
</div>
</div>
<div class="stage-past-era">
<span class="tour-era-heading">1999&nbsp;|&nbsp;Sechskies Live Concert</span>
<p class="tour-era-meta">1999年2月6日 — 2月27日・韓國・共 6 場</p>
<div class="con-1-10">
<span class="location">1999.02.06 · 場次 1 | 蔚山 | 韓國 | 蔚山 KBS Hall</span>
<input type="checkbox" id="expand-con-1-10" class="expand-trigger">
<div class="track-list">
<div class="track-item"><span class="track">演出曲順待整理</span></div>
</div>
<label for="expand-con-1-10" class="expand-btn"></label>
</div>
<div class="con-1-11">
<span class="location">1999.02.06 · 場次 2 | 蔚山 | 韓國 | 蔚山 KBS Hall</span>
<input type="checkbox" id="expand-con-1-11" class="expand-trigger">
<div class="track-list">
<div class="track-item"><span class="track">演出曲順待整理（同日第二場／詳記待考）</span></div>
</div>
<label for="expand-con-1-11" class="expand-btn"></label>
</div>
<div class="con-1-12">
<span class="location">1999.02.21 | 大邱 | 韓國 | 慶北大學</span>
<input type="checkbox" id="expand-con-1-12" class="expand-trigger">
<div class="track-list">
<div class="track-item"><span class="track">演出曲順待整理</span></div>
</div>
<label for="expand-con-1-12" class="expand-btn"></label>
</div>
<div class="con-1-13">
<span class="location">1999.02.25 | 首爾 | 韓國 | KBS88 體育館</span>
<input type="checkbox" id="expand-con-1-13" class="expand-trigger">
<div class="track-list">
<div class="track-item"><span class="track">演出曲順待整理</span></div>
</div>
<label for="expand-con-1-13" class="expand-btn"></label>
</div>
<div class="con-1-14">
<span class="location">1999.02.26 | 首爾 | 韓國 | KBS88 體育館</span>
<input type="checkbox" id="expand-con-1-14" class="expand-trigger">
<div class="track-list">
<div class="track-item"><span class="track">演出曲順待整理</span></div>
</div>
<label for="expand-con-1-14" class="expand-btn"></label>
</div>
<div class="con-1-15">
<span class="location">1999.02.27 | 首爾 | 韓國 | KBS88 體育館</span>
<input type="checkbox" id="expand-con-1-15" class="expand-trigger">
<div class="track-list">
<div class="track-item"><span class="track">演出曲順待整理</span></div>
</div>
<label for="expand-con-1-15" class="expand-btn"></label>
</div>
</div>
<div class="stage-past-era">
<span class="tour-era-heading">2000&nbsp;|&nbsp;SECHSKIES 2000 LIVE CONCERT</span>
<div class="con-1-16">
<span class="location">2000.02.28 | 首爾 | 韓國 | 首爾奧林匹克體操競技場</span>
<input type="checkbox" id="expand-con-1-16" class="expand-trigger">
<div class="track-list">
<div class="track-item"><span class="track">演出曲順待整理</span></div>
</div>
<label for="expand-con-1-16" class="expand-btn"></label>
</div>
</div>
</div>
</section>
</div>
<footer>
<p>SECHSKIES Fanpage &copy; 2026 - 黃色氣球永遠飄揚</p>
grok.html
+1
View File
@@ -6,6 +6,7 @@
<title>水晶男孩 SECHSKIES | 永恆的六顆水晶</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="tablet.css">
</head>
<body>
index.css
+31 -1
View File
@@ -76,4 +76,34 @@
.content p {
color: var(--text-muted);
line-height: 1.6;
}
}
#stage .stage-teaser {
margin-bottom: 1.75rem;
padding-bottom: 1.25rem;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
#stage .stage-teaser:last-of-type {
border-bottom: 0;
margin-bottom: 0;
padding-bottom: 0;
}
#archive .archive-block {
margin: 1.75rem 0;
}
.landing-intro {
text-align: center;
padding: 28px 0 48px;
}
.landing-actions .btn {
margin: 8px 6px;
}
.archive-intro-lead {
text-align: center;
margin-top: 8px;
}
index.html
+75 -155
View File
@@ -8,61 +8,56 @@
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="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="tablet.css">
</head>
<body>
<header>
<header id="origin">
<div class="hero">
<h1>SECHSKIES<br>水晶男孩</h1>
<p>六顆永恆的水晶 • 左右命運的傳奇</p>
<a href="#story" class="btn">探索他們的故事</a>
<a href="#start" class="btn">從這裡開始淪陷</a>
</div>
</header>
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽">
<a class="logo" href="index.html"><img src="./img/logov.svg" alt=""></a>
<a class="logo" href="index.html"><img src="./img/logov.svg" alt="SECHSKIES Logo"></a>
<ul>
<li><a href="index.html#intro">淪陷瞬間</a>
<li><a href="index.html#origin">淪陷瞬間</a>
<ul class="portal-submenu">
<li><a href="index.html#mission">成立的初衷</a></li>
<li><a href="index.html#current">跨時空軌跡</a></li>
<li><a href="index.html#story">好奇的代價</a></li>
<li><a href="index.html#timeline">跨時空軌跡</a></li>
<li><a href="index.html#start">好奇的開端</a></li>
</ul>
</li>
<li><a href="chronicle.html">十六年約定</a>
<li><a href="jiwon.html">瘋子與天才</a>
<ul class="portal-submenu">
<li><a href="chronicle.html#challenge">無限挑戰</a></li>
<li><a href="chronicle.html#ssg2">六六歌第二季</a></li>
<li><a href="chronicle.html#sechskies-profile">水晶男孩</a></li>
<li><a href="chronicle.html#gather">召集</a></li>
<li><a href="chronicle.html#negotiate">正式交涉</a></li>
<li><a href="chronicle.html#variables">變數</a></li>
<li><a href="chronicle.html#surprise">驚喜</a></li>
<li><a href="chronicle.html#final-stage">登場</a></li>
<li><a href="jiwon.html#variety">瘋狂出演中</a></li>
<li><a href="jiwon.html#stage">隊長的氣場</a></li>
</ul>
</li>
<li><a href="index.html#archive">黃色留聲機</a>
<li><a href="sunghoon.html">消失的真相</a>
<ul class="portal-submenu">
<li><a href="classic.html">輝煌全盛期</a></li>
<li><a href="index.html#new">啟動新篇章</a></li>
<li><a href="sunghoon.html#truth">還原那場雨</a></li>
<li><a href="sunghoon.html#voice">被掩蓋的主唱</a></li>
</ul>
</li>
<li><a href="concert.html">現場的悸動</a>
<li><a href="concert.html">現場的震撼</a>
<ul class="portal-submenu">
<li><a href="concert.html#classic-stage" data-coming-soon="true" aria-disabled="true">燦爛的最初</a></li>
<li><a href="concert.html#reunion-stage">永恆的重逢</a></li>
<li><a href="concert.html#stage-now">永恆的重逢</a></li>
<li><a href="concert.html#stage-past">燦爛的最初</a></li>
</ul>
</li>
<li class="coming-soon"><a href="variety.html" data-coming-soon="true" aria-disabled="true">綜藝熱播中</a>
<li><a href="archive.html">黃色留聲機</a>
<ul class="portal-submenu">
<li><a href="variety.html#jiwon" data-coming-soon="true" aria-disabled="true">瘋子與天才</a></li>
<li><a href="variety.html#group" data-coming-soon="true" aria-disabled="true">舞台外真實</a></li>
<li><a href="archive.html#new">啟動新篇章</a></li>
<li><a href="archive.html#classic">輝煌全盛期</a></li>
</ul>
</li>
<li><a href="map.html">聖地巡禮</a>
<ul class="portal-submenu">
<li><a href="map.html#taiwan">台灣聖地</a></li>
<li><a href="map.html#taipei">台北聖地</a></li>
<li><a href="map.html#global">海外遠征</a></li>
</ul>
</li>
@@ -72,83 +67,33 @@
<canvas id="particles"></canvas>
<div class="container">
<div id="intro"></div>
<div id="mission"></div>
<div id="timeline"></div>
<div id="story"></div>
<div id="archive"></div>
<div id="classic"></div>
<div id="new"></div>
<section id="background">
<h2 class="section-title">故事背景</h2>
<section id="mission">
<h2 class="section-title">成立的初衷</h2>
<div class="intro-text">
<!-- 標題與第一段：點出「新粉」身分與震撼 -->
<p class="intro-text">
身為在回歸後才被這場 <span class="highlight">「黃色奇蹟」</span> 擊中的新一代粉絲，我深刻體會那種從好奇觀看到最終徹底淪陷的悸動。
</p>
<!-- 第二段：強調核心魅力與反差 -->
<p class="core-description">
水晶男孩（SECHSKIES）的魔力在於：即便錯過了 90 年代，依然會被他們 <span class="highlight">熱血、真誠且專業</span>
的舞台魅力所感動。這裡不僅是資訊站，更是由熱愛凝聚的空間。從舞台上的職人氣場，到台下如家人般的 <span class="highlight">「反差萌」</span>，他們展現了超越年齡的吸引力。
</p>
<!-- 結尾：溫馨號召 -->
<p class="call-to-action">
經典並非活在過去，而是每個當下都讓人心跳不已。加入我們，一起感受這場 <span class="highlight">仍在續寫的傳奇</span>。
這裡先端出舞台上與綜藝裡最刺眼、也最誠實的魅力，接住每一次「怎麼又帥又好笑」的心跳；你越往深處挖，越容易聽懂那場 <span class="highlight">仍在續寫的傳奇</span>。
</p>
</div>
</section>
<!-- 歷年作品表格區塊 -->
<section id="albums">
<h2 class="section-title">歷年作品 (精選)</h2>
<table>
<thead>
<tr>
<th>年份</th>
<th>專輯/作品</th>
<th>主打歌</th>
</tr>
</thead>
<tbody>
<tr>
<td>1997</td>
<td>學園別曲</td>
<td>學園別曲 / 男兒之路 (Pom Saeng Pom Sa)</td>
</tr>
<tr>
<td>1998</td>
<td>Road Fighter</td>
<td>Road Fighter / Couple</td>
</tr>
<tr>
<td>1999</td>
<td>Com'Back</td>
<td>Com'Back</td>
</tr>
<tr>
<td>2016</td>
<td>
<a href="lyrics.html">數位單曲</a>
</td>
<td>
<a href="lyrics.html">Three Words (三個詞)</a>
</td>
</tr>
<tr>
<td>2017</td>
<td>ANOTHER LIGHT</td>
<td>Something Special / Smile</td>
</tr>
<tr>
<td>2020</td>
<td>ALL FOR YOU</td>
<td>ALL FOR YOU</td>
</tr>
</tbody>
</table>
<section id="start">
<h2 class="section-title">好奇的開端</h2>
<div class="intro-text">
<p class="intro-text">
身為在回歸後才被這場 <span class="highlight">「黃色奇蹟」</span> 擊中的新一代粉絲，我深刻體會那種從好奇觀看到最終徹底淪陷的悸動。
</p>
<p class="core-description">
水晶男孩（SECHSKIES）的魔力在於：即便錯過他們第一次站上大型舞台的年代，依然會被他們 <span class="highlight">熱血、真誠且專業</span>
的魅力所感動。這裡不僅是資訊站，更是由熱愛凝聚的空間。從台上的職人氣場，到台下像家人吵架又像互相撐腰的 <span class="highlight">反差</span>，把「現在入坑」變成一種完全被允許的日常。
</p>
<p class="call-to-action">
經典不是博物館的玻璃櫃，而是每次重播都讓人想跟著跳的節奏。加入我們，一起把手上的應援色舉高一點。
</p>
</div>
</section>
<section id="current" class="story-archive">
<h2 class="section-title">故事線</h2>
<section id="timeline" class="story-archive">
<h2 class="section-title">跨時空軌跡</h2>
<div class="subtitle-wrap">
<span class="sub-title">SECHSKIES STORY ARCHIVE</span>
</div>
@@ -182,73 +127,48 @@
</div>
</section>
<section id="story">
<h2 class="section-title">傳奇的轉折</h2>
<div class="subtitle-wrap">
<span class="sub-title">PLOT TWIST</span>
</div>
<p class="intro-text">
像劇情的反轉一樣過癮：這幾個節點，剛好是許多人從「旁觀綜藝」滑進「正式入坑」的轉軌。若想讀對白級細節，隨時可切到完整紀實長文。
<a href="chronicle.html">開啟完整紀實篇章</a>
</p>
<article id="special" class="story-node">
<h3>六六歌實錄</h3>
<p>把懸念、試探與哭點縫在同一條時間軸上；很多人第一次真正把「水晶男孩」打進搜尋框，就是從這種瘋狂的剪輯節奏開始。</p>
<p><a href="chronicle.html#ssg2">對照這一段幕後敘事</a></p>
</article>
<article id="negotiate" class="story-node">
<h3>命運的交涉</h3>
<p>KTV、游擊演唱會規則、與其說講道理不如說把真心擺上桌面——交涉的不是合約字面，而是還願不願意再一次肩並肩。</p>
<p><a href="chronicle.html#negotiate">讀交涉與對話肌理</a></p>
</article>
<article id="complete" class="story-node">
<h3>拼圖的歸位</h3>
<p>變數一個個被排除之後，驚喜接上登場段落；缺一角舞台的視覺，終於對齊觀眾席上堅守的那片黃。</p>
<p><a href="chronicle.html#gather">從「召集」段開始補這條線</a></p>
</article>
<article id="past" class="story-node">
<h3>巔峰與雨天</h3>
<p>急凍、告別、各自的跑道——並不是要你沉浸遺憾，而是讓你懂：後來每一次亮燈，為什麼會更值得尖叫。</p>
<p><a href="chronicle.html#sechskies-profile">讀這條脈絡的起點</a></p>
</article>
</section>
</div>
<footer>
<p>SECHSKIES Fanpage &copy; 2026 - 黃色氣球永遠飄揚</p>
<a href="https://jekkinoopy.github.io/Portfolio/" class="studio-link" target="_blank">
Design by <strong>Jekkinoopy Studio</strong>
</a>
</footer> <!-- 粒子效果 -->
<script>
const canvas = document.getElementById('particles');
const ctx = canvas.getContext('2d');
</footer>
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
resizeCanvas();
let particles = [];
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 init() {
particles = [];
for (let i = 0; i < 80; i++) {
particles.push(new Particle());
}
}
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (let p of particles) {
p.update();
p.draw();
}
requestAnimationFrame(animate);
}
window.addEventListener('resize', () => {
resizeCanvas();
init();
});
init();
animate();
</script>
<script src="particles.js"></script>
<script src="portal-nav.js"></script>
</body>
</html>
</html>
jiwon.html
+92
View File
@@ -0,0 +1,92 @@
<!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="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<link rel="stylesheet" href="tablet.css">
</head>
<body class="chronicle-page">
<header class="map-archive-header">
<div class="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="水晶男孩推廣部導覽">
<a class="logo" href="index.html"><img src="./img/logov.svg" alt="SECHSKIES Logo"></a>
<ul>
<li><a href="index.html#origin">淪陷瞬間</a>
<ul class="portal-submenu">
<li><a href="index.html#mission">成立的初衷</a></li>
<li><a href="index.html#timeline">跨時空軌跡</a></li>
<li><a href="index.html#start">好奇的開端</a></li>
</ul>
</li>
<li><a href="jiwon.html">瘋子與天才</a>
<ul class="portal-submenu">
<li><a href="jiwon.html#variety">瘋狂出演中</a></li>
<li><a href="jiwon.html#stage">隊長的氣場</a></li>
</ul>
</li>
<li><a href="sunghoon.html">消失的真相</a>
<ul class="portal-submenu">
<li><a href="sunghoon.html#truth">還原那場雨</a></li>
<li><a href="sunghoon.html#voice">被掩蓋的主唱</a></li>
</ul>
</li>
<li><a href="concert.html">現場的震撼</a>
<ul class="portal-submenu">
<li><a href="concert.html#stage-now">永恆的重逢</a></li>
<li><a href="concert.html#stage-past">燦爛的最初</a></li>
</ul>
</li>
<li><a href="archive.html">黃色留聲機</a>
<ul class="portal-submenu">
<li><a href="archive.html#new">啟動新篇章</a></li>
<li><a href="archive.html#classic">輝煌全盛期</a></li>
</ul>
</li>
<li><a href="map.html">聖地巡禮</a>
<ul class="portal-submenu">
<li><a href="map.html#taipei">台北聖地</a></li>
<li><a href="map.html#global">海外遠征</a></li>
</ul>
</li>
</ul>
</nav>
<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>
</section>
<section id="stage" class="variety-block">
<h2 class="section-title">隊長的氣場</h2>
<p class="intro-text">同樣一句話，由他說出口就變成節奏點；同樣混亂的場面，他一站出來觀眾會先笑、再安靜聽。那不是威嚴口號，而是多年在台上台下磨出來的「控場直覺」。</p>
<p class="intro-text">此區預留給談話、音樂、與團體互動裡的隊長切片——讓新粉先用氣場認人，再慢慢讀懂他背後的堅持。</p>
</section>
</main>
<footer>
<p>SECHSKIES Fanpage &copy; 2026 - 黃色氣球永遠飄揚</p>
<a href="https://jekkinoopy.github.io/Portfolio/" class="studio-link" target="_blank">
Design by <strong>Jekkinoopy Studio</strong>
</a>
</footer>
<script src="portal-nav.js"></script>
<script src="particles.js"></script>
</body>
</html>
lyrics.html
+1
View File
@@ -90,6 +90,7 @@
margin-right: 0.3rem;
}
</style>
<link rel="stylesheet" href="tablet.css">
</head>
<body class="nanum-pen-script-regular">
map.html
+55 -33
View File
@@ -7,6 +7,7 @@
<title>SECHSKIES 台灣行程地圖</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<link rel="stylesheet" href="tablet.css">
</head>
<body class="map-page">
@@ -24,46 +25,40 @@
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽">
<a class="logo" href="index.html"><img src="./img/logov.svg" alt="SECHSKIES Logo"></a>
<ul>
<li><a href="index.html#intro">淪陷瞬間</a>
<li><a href="index.html#origin">淪陷瞬間</a>
<ul class="portal-submenu">
<li><a href="index.html#mission">成立的初衷</a></li>
<li><a href="index.html#current">跨時空軌跡</a></li>
<li><a href="index.html#story">好奇的代價</a></li>
<li><a href="index.html#timeline">跨時空軌跡</a></li>
<li><a href="index.html#start">好奇的開端</a></li>
</ul>
</li>
<li><a href="chronicle.html">十六年約定</a>
<li><a href="jiwon.html">瘋子與天才</a>
<ul class="portal-submenu">
<li><a href="chronicle.html#challenge">無限挑戰</a></li>
<li><a href="chronicle.html#ssg2">六六歌第二季</a></li>
<li><a href="chronicle.html#sechskies-profile">水晶男孩</a></li>
<li><a href="chronicle.html#gather">召集</a></li>
<li><a href="chronicle.html#negotiate">正式交涉</a></li>
<li><a href="chronicle.html#variables">變數</a></li>
<li><a href="chronicle.html#surprise">驚喜</a></li>
<li><a href="chronicle.html#final-stage">登場</a></li>
<li><a href="jiwon.html#variety">瘋狂出演中</a></li>
<li><a href="jiwon.html#stage">隊長的氣場</a></li>
</ul>
</li>
<li><a href="index.html#archive">黃色留聲機</a>
<li><a href="sunghoon.html">消失的真相</a>
<ul class="portal-submenu">
<li><a href="classic.html">輝煌全盛期</a></li>
<li><a href="index.html#new">啟動新篇章</a></li>
<li><a href="sunghoon.html#truth">還原那場雨</a></li>
<li><a href="sunghoon.html#voice">被掩蓋的主唱</a></li>
</ul>
</li>
<li><a href="concert.html">現場的悸動</a>
<li><a href="concert.html">現場的震撼</a>
<ul class="portal-submenu">
<li><a href="concert.html#classic-stage" data-coming-soon="true" aria-disabled="true">燦爛的最初</a></li>
<li><a href="concert.html#reunion-stage">永恆的重逢</a></li>
<li><a href="concert.html#stage-now">永恆的重逢</a></li>
<li><a href="concert.html#stage-past">燦爛的最初</a></li>
</ul>
</li>
<li class="coming-soon"><a href="variety.html" data-coming-soon="true" aria-disabled="true">綜藝熱播中</a>
<li><a href="archive.html">黃色留聲機</a>
<ul class="portal-submenu">
<li><a href="variety.html#jiwon" data-coming-soon="true" aria-disabled="true">瘋子與天才</a></li>
<li><a href="variety.html#group" data-coming-soon="true" aria-disabled="true">舞台外真實</a></li>
<li><a href="archive.html#new">啟動新篇章</a></li>
<li><a href="archive.html#classic">輝煌全盛期</a></li>
</ul>
</li>
<li><a href="map.html">聖地巡禮</a>
<ul class="portal-submenu">
<li><a href="map.html#taiwan">台灣聖地</a></li>
<li><a href="map.html#taipei">台北聖地</a></li>
<li><a href="map.html#global">海外遠征</a></li>
</ul>
</li>
@@ -81,18 +76,45 @@
<input id="itinerary-search" type="search" aria-label="行程搜尋"
placeholder="搜尋地點、描述、標籤（例如：九份、夜市、Day 2）">
<main id="taiwan" class="content-container map-layout">
<!-- 備註：地圖區固定使用你的 Google My Maps iframe。
這裡不改地圖資料來源，右側列表只負責敘事與導覽。 -->
<main id="taipei" class="content-container map-layout">
<!-- 備註：Google My Maps 嵌入。「全部行程」並排兩張；單一成員時只顯示對應一張。
右側列表為敘事與導覽；地圖與標籤在 map.js 的 memberMaps 設定。 -->
<section class="map-sticky">
<h2 class="map-title">水晶男孩台灣行程地圖</h2>
<iframe id="member-map" title="SECHSKIES 踩點地圖" loading="lazy" referrerpolicy="no-referrer-when-downgrade"
src="https://www.google.com/maps/d/embed?mid=1VGZ76SPPjm3NWCBQe-hkm08oe5WPRJI&ehbc=2E312F">
</iframe>
<a id="open-map-link" class="map-link" target="_blank"
href="https://www.google.com/maps/d/u/0/viewer?mid=1VGZ76SPPjm3NWCBQe-hkm08oe5WPRJI">
在 Google My Maps 開啟完整地圖
</a>
<div class="map-embed-single" id="map-embed-single" hidden>
<iframe id="member-map" class="map-my-maps-frame" title="SECHSKIES 踩點地圖（單一行程）" loading="lazy"
referrerpolicy="no-referrer-when-downgrade"
src="https://www.google.com/maps/d/embed?mid=1VGZ76SPPjm3NWCBQe-hkm08oe5WPRJI&ehbc=2E312F">
</iframe>
</div>
<div class="map-embed-all" id="map-embed-all">
<div class="map-embed-pair">
<p class="map-embed-label">高高父子遊台灣</p>
<iframe id="member-map-ko" class="map-my-maps-frame" title="高高父子遊台灣 踩點地圖" loading="lazy"
referrerpolicy="no-referrer-when-downgrade"
src="https://www.google.com/maps/d/embed?mid=1xpAsSoO8gNmMiW4x2sfkndISFTtjMQDw&hl=zh-TW&ehbc=2E312F">
</iframe>
</div>
<div class="map-embed-pair">
<p class="map-embed-label">殷空少搭飛機去台灣高雄</p>
<iframe id="member-map-eun" class="map-my-maps-frame" title="殷志源高雄行程 踩點地圖" loading="lazy"
referrerpolicy="no-referrer-when-downgrade"
src="https://www.google.com/maps/d/embed?mid=1VGZ76SPPjm3NWCBQe-hkm08oe5WPRJI&ehbc=2E312F">
</iframe>
</div>
</div>
<div class="map-links-wrap">
<a id="open-map-link" class="map-link" target="_blank" hidden
href="https://www.google.com/maps/d/u/0/viewer?mid=1VGZ76SPPjm3NWCBQe-hkm08oe5WPRJI">
在 Google My Maps 開啟完整地圖
</a>
<div id="open-map-links-dual" class="map-links-dual">
<a id="open-map-link-ko" class="map-link" target="_blank"
href="https://www.google.com/maps/d/u/0/viewer?mid=1xpAsSoO8gNmMiW4x2sfkndISFTtjMQDw">開啟「高高父子遊台灣」My Maps</a>
<a id="open-map-link-eun" class="map-link" target="_blank"
href="https://www.google.com/maps/d/u/0/viewer?mid=1VGZ76SPPjm3NWCBQe-hkm08oe5WPRJI">開啟「殷空少搭飛機去台灣高雄」My Maps</a>
</div>
</div>
</section>
<section class="itinerary-list">
@@ -518,7 +540,7 @@
</article>
</section>
</main>
<footer id="contact">
<footer>
<div id="global"></div>
<p>SECHSKIES Fanpage &copy; 2026 - 黃色氣球永遠飄揚</p>
<a href="https://jekkinoopy.github.io/Portfolio/" class="studio-link" target="_blank">
map.js
+30 -5
View File
@@ -69,7 +69,12 @@
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 = "all";
@@ -115,12 +120,31 @@
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) return;
if (!mapConfig || !memberMapFrame) return;
memberMapFrame.src = mapConfig.embed;
openMapLink.href = mapConfig.open;
if (openMapLink) openMapLink.href = mapConfig.open;
}
function getCardSearchText(card) {
@@ -202,7 +226,8 @@
if (expandDay) {
ensureExpandedForCard(card);
}
updateMapByMember(card.dataset.member || "all");
const mapKey = currentMember === "all" ? "all" : currentMember;
updateMapByMember(mapKey);
detailDate.textContent = card.dataset.date || "";
detailTitle.textContent = card.dataset.title || "";
@@ -229,8 +254,8 @@
const fallbackCard = activeVisibleCard || firstVisible;
if (fallbackCard) {
setActiveCard(fallbackCard, { expandDay: false });
} else if (currentMember !== "all") {
updateMapByMember(currentMember);
} else {
updateMapByMember(currentMember === "all" ? "all" : currentMember);
}
}
origin.html
+16
View File
@@ -0,0 +1,16 @@
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>重新導向…</title>
<meta http-equiv="refresh" content="0; url=index.html">
<link rel="canonical" href="index.html">
</head>
<body>
<p>淪陷瞬間已與首頁合併。<a href="index.html#origin">前往首頁 Hero</a></p>
</body>
</html>
style.css
+47 -2
View File
@@ -801,7 +801,7 @@ footer {
letter-spacing: 1px;
}
#member-map {
.map-my-maps-frame {
width: 100%;
height: min(66vh, 640px);
min-height: 420px;
@@ -810,6 +810,34 @@ footer {
box-shadow: 0 10px 26px rgba(0, 0, 0, 0.1);
}
.map-embed-all {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.map-embed-label {
margin: 0 0 8px;
font-size: 0.88rem;
font-weight: 700;
color: #444;
}
.map-links-dual {
display: flex;
flex-direction: column;
gap: 6px;
margin-top: 12px;
}
.map-links-dual .map-link {
margin-top: 0;
}
.map-links-wrap .map-link {
align-self: flex-start;
}
.map-link {
display: inline-block;
margin-top: 12px;
@@ -1039,11 +1067,15 @@ footer {
padding: 14px;
}
#member-map {
.map-my-maps-frame {
height: 320px;
min-height: 320px;
}
.map-embed-all {
grid-template-columns: 1fr;
}
.polaroid-card {
flex-direction: column;
gap: 10px;
@@ -1063,6 +1095,19 @@ footer {
}
}
/* Variety hub */
.variety-block {
background: #fffdf6;
border-radius: 16px;
padding: 24px;
margin-top: 24px;
border: 1px solid rgba(0, 0, 0, 0.06);
}
.variety-page-main {
padding-bottom: 48px;
}
/* Chronicle (webcomic-like reader) */
.chronicle-controls {
max-width: 1200px;
sunghoon.html
+92
View File
@@ -0,0 +1,92 @@
<!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="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<link rel="stylesheet" href="tablet.css">
</head>
<body class="chronicle-page">
<header class="map-archive-header">
<div class="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="水晶男孩推廣部導覽">
<a class="logo" href="index.html"><img src="./img/logov.svg" alt="SECHSKIES Logo"></a>
<ul>
<li><a href="index.html#origin">淪陷瞬間</a>
<ul class="portal-submenu">
<li><a href="index.html#mission">成立的初衷</a></li>
<li><a href="index.html#timeline">跨時空軌跡</a></li>
<li><a href="index.html#start">好奇的開端</a></li>
</ul>
</li>
<li><a href="jiwon.html">瘋子與天才</a>
<ul class="portal-submenu">
<li><a href="jiwon.html#variety">瘋狂出演中</a></li>
<li><a href="jiwon.html#stage">隊長的氣場</a></li>
</ul>
</li>
<li><a href="sunghoon.html">消失的真相</a>
<ul class="portal-submenu">
<li><a href="sunghoon.html#truth">還原那場雨</a></li>
<li><a href="sunghoon.html#voice">被掩蓋的主唱</a></li>
</ul>
</li>
<li><a href="concert.html">現場的震撼</a>
<ul class="portal-submenu">
<li><a href="concert.html#stage-now">永恆的重逢</a></li>
<li><a href="concert.html#stage-past">燦爛的最初</a></li>
</ul>
</li>
<li><a href="archive.html">黃色留聲機</a>
<ul class="portal-submenu">
<li><a href="archive.html#new">啟動新篇章</a></li>
<li><a href="archive.html#classic">輝煌全盛期</a></li>
</ul>
</li>
<li><a href="map.html">聖地巡禮</a>
<ul class="portal-submenu">
<li><a href="map.html#taipei">台北聖地</a></li>
<li><a href="map.html#global">海外遠征</a></li>
</ul>
</li>
</ul>
</nav>
<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 &copy; 2026 - 黃色氣球永遠飄揚</p>
<a href="https://jekkinoopy.github.io/Portfolio/" class="studio-link" target="_blank">
Design by <strong>Jekkinoopy Studio</strong>
</a>
</footer>
<script src="portal-nav.js"></script>
<script src="particles.js"></script>
</body>
</html>
tablet.css
+215
View File
@@ -0,0 +1,215 @@
/* iPad／平板 RWD — max-width ≤1180px（含 iPad 直／橫與小平板／小筆電） */
@media (max-width: 1180px) {
html:has(body.map-page) {
scroll-padding-top: clamp(52px, 12vw, 76px);
}
nav,
.portal-nav {
padding-left: clamp(14px, 3.5vw, 32px) !important;
padding-right: clamp(14px, 3.5vw, 32px) !important;
row-gap: 12px;
flex-wrap: wrap;
align-items: flex-start;
}
.map-page .portal-nav {
padding-left: clamp(14px, 3.5vw, 32px) !important;
padding-right: clamp(14px, 3.5vw, 32px) !important;
}
.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;
align-items: center;
}
nav ul {
gap: clamp(12px, 2vw, 20px);
}
header {
background-size: cover;
background-position: center center;
}
.hero h1 {
font-size: clamp(1.75rem, 4.5vw, 2.35rem);
}
.hero p {
font-size: clamp(1rem, 2.8vw, 1.15rem);
}
.container,
.content-container {
padding-left: clamp(14px, 3vw, 22px);
padding-right: clamp(14px, 3vw, 22px);
}
section {
padding: clamp(26px, 5vw, 36px) clamp(16px, 4vw, 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 {
left: 14px;
right: auto;
transform: rotate(-8deg);
}
/* 紀實長卷／pillar 段落 */
.chronicle-reader,
.chronicle-pager {
max-width: min(920px, 100%);
}
.variety-block {
padding: clamp(18px, 4vw, 22px);
}
.map-archive-header .main-title,
.concert-archive-header .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*="img/concert/"] {
width: min(560px, 88%);
max-width: 100%;
}
/* 歌詞頁 body class（tablet.css 需載於該頁 inline style 之後才可蓋過行內 :root） */
body.nanum-pen-script-regular {
margin: clamp(24px, 5vw, 56px) !important;
box-sizing: border-box;
overflow-x: hidden;
}
html:has(body.nanum-pen-script-regular) {
font-size: 118.75% !important;
}
body.nanum-pen-script-regular table {
border-spacing: clamp(12px, 3vw, 24px) !important;
max-width: 100%;
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
body.nanum-pen-script-regular .main-left {
width: 100% !important;
display: block;
box-sizing: border-box;
}
body.nanum-pen-script-regular p {
font-size: 1.2rem !important;
}
body.nanum-pen-script-regular h1 {
font-size: clamp(1.6rem, 5vw, 2.1rem) !important;
}
}