151 lines
7.4 KiB
HTML
151 lines
7.4 KiB
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="map-archive-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>
|