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

feat 加入黃色氣球海gif

Browse Source
This commit is contained in:
jekkinoopy
2026-05-13 16:11:45 +08:00
parent 12c0f3e482
commit 4275b0ac92
9 changed files with 136 additions and 187 deletions
Download Patch File Download Diff File Expand all files Collapse all files
CHANGESET-review.md
+1 -1
View File
@@ -14,7 +14,7 @@
### 目的
- 年表區塊（「啟動新篇章」「輝煌全盛期」）每一資料列：**點列上非連結區域**時，於新分頁開對應 **Spotify 專輯**。
- 列內既有 `<a>`（本站 `lyrics.html`、`concert.html`、`classic.html`）維持原行為。
- 列內既有 `<a>`（本站 `lyrics.html`、`concert.html`、`archive.html#classic`）維持原行為。
### 標記與無障礙
archive.html
+7 -7
View File
@@ -83,7 +83,7 @@
<section id="classic" class="archive-block">
<h2 class="section-title">輝煌全盛期</h2>
<p>主打的記憶點、b-side 的伏筆、舞步與應援口號——想一次收進收藏庫，往這張整理頁走。</p>
<p><a href="classic.html#classic-albums">打開輝煌全盛期整理</a></p>
<p><a href="#classic">於此區瀏覽輝煌全盛期年表</a></p>
<table class="archive-discography">
<thead>
<tr>
@@ -97,22 +97,22 @@
data-spotify-url="https://open.spotify.com/album/18P1aqSLQA9WdNljjEhv9q"
aria-label="在 Spotify 開啟：School Byeolgok（學園別曲）">
<td>1997</td>
<td><a href="classic.html#classic-albums">學園別曲</a></td>
<td><a href="classic.html#classic-albums">學園別曲 / 男兒之路 (Pom Saeng Pom Sa)</a></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.html#classic-albums">Road Fighter</a></td>
<td><a href="classic.html#classic-albums">Road Fighter / Couple</a></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.html#classic-albums">Com'Back</a></td>
<td><a href="classic.html#classic-albums">Com'Back</a></td>
<td><a href="#classic">Com'Back</a></td>
<td><a href="#classic">Com'Back</a></td>
</tr>
</tbody>
</table>
classic.html
-127
View File
@@ -1,127 +0,0 @@
<!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>
<header>
<div class="hero">
<h1>輝煌全盛期</h1>
<p>全盛期作品與主打脈絡整理</p>
<a href="#classic-albums" class="btn">查看專輯清單</a>
</div>
</header>
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></nav>
<canvas id="particles"></canvas>
<div class="container">
<section id="classic-albums">
<h2 class="section-title">輝煌全盛期 (精選)</h2>
<p class="classic-stream-lead">
線上聆聽請至
<a href="https://open.spotify.com/artist/6uRyNreOHUvWPNGnKfIo27" target="_blank"
rel="noopener noreferrer">SECHSKIES｜Spotify 官方頁</a>
，下列為站內精選年表整理。
</p>
<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>
</tbody>
</table>
</section>
</div>
<footer>
<p>SECHSKIES Fanpage &copy; 2026 - 黃色氣球永遠飄揚</p>
</footer>
<script>
const canvas = document.getElementById('particles');
const ctx = canvas.getContext('2d');
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 (const p of particles) {
p.update();
p.draw();
}
requestAnimationFrame(animate);
}
window.addEventListener('resize', () => {
resizeCanvas();
init();
});
init();
animate();
</script>
<script src="portal-nav.js"></script>
</body>
</html>
img/mission-balloon-sea.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 127 KiB

img/黃色海洋.gif
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 606 KiB

index.html
+32 -18
View File
@@ -45,6 +45,16 @@
<section id="mission" class="mission-section">
<h2 class="section-title">成立的初衷</h2>
<div class="mission-layout">
<div class="mission-visual">
<div class="logo-wrapper">
<img src="./img/logo.png" alt="SECHSKIES Logo Concept">
<span class="caption">
<span class="arrow-icon" aria-hidden="true">↓</span>
設計語彙：六角、黃海與初心
</span>
</div>
</div>
<div class="mission-content">
<p>
本站是以 <span class="highlight">SECHSKIES 水晶男孩</span> 為核心的數位推廣部，旨在透過 <span
@@ -57,24 +67,28 @@
<div class="logo-concept">
<h3>LOGO 設計理念</h3>
<p>
<span class="highlight">「晶」</span>字發想來自<span class="highlight">六角形的水晶</span>，為了強調水晶男孩<span
class="highlight">初心為六人</span>。上半部形似<span class="highlight">數字 6</span>，搭配演唱會必備的<span
class="highlight">手燈圖案</span>，代表粉絲和水晶<span
class="highlight">密不可分的關係</span>。色彩配置發想來自回歸舞台成員脫下眼罩的剎那，整個場地從一片漆黑瞬間發亮，映入眼簾的是一片<span
class="highlight">黃色海洋</span>。以此片段為契機，設計成<span
class="highlight">黑色系與黃色系</span>的色彩搭配，來記錄那瞬間的感動。
</p>
</div>
</div>
<div class="mission-visual">
<div class="logo-wrapper">
<img src="./img/logo.png" alt="SECHSKIES Logo Concept">
<span class="caption">
<span class="arrow-icon" aria-hidden="true">↓</span>
設計語彙：六角、黃海與初心
</span>
<div class="logo-concept-media-row">
<p>
<span class="highlight">「晶」</span>字發想來自<span
class="highlight">六角形的水晶</span>，為了強調水晶男孩<span
class="highlight">初心為六人</span>。上半部形似<span class="highlight">數字
6</span>，搭配演唱會必備的<span class="highlight">手燈圖案</span>，代表粉絲和水晶<span
class="highlight">密不可分的關係</span>。色彩配置發想來自回歸舞台成員脫下眼罩的剎那，整個場地從<span
class="highlight highlight-stage-flash">一片漆黑瞬間發亮</span>，映入眼簾的是一片<span
class="highlight">黃色海洋</span>。以此片段為契機，設計成<span
class="highlight">黑色系與黃色系</span>的色彩搭配，來記錄那瞬間的感動。
</p>
<div class="mission-moment-wrap">
<div class="mission-gif-frame" role="group" aria-label="回歸演唱會／黃色氣球海（16：9）">
<!-- 若改為 GIF 動圖，將底下 src 換成 ./img/mission-balloon-sea.gif 即可 -->
<img src="./img/黃色海洋.gif" alt="無限挑戰 六六歌2 放送畫面：全場黃色氣球海">
</div>
<span class="caption">
<span class="arrow-icon" aria-hidden="true">↓</span>
回歸演唱會的動人瞬間-黃色氣球海
</span>
</div>
</div>
</div>
</div>
</div>
portal-nav.js
-1
View File
@@ -19,7 +19,6 @@
<li><a href="jiwon.html#stage">隊長的氣場</a></li>
</ul>
</li>
<li><a href="classic.html#classic-albums">輝煌全盛期典藏</a></li>
<li><a href="concert.html">現場的震撼</a>
<ul class="portal-submenu">
<li><a href="concert.html#stage-now">永恆的重逢</a></li>
style.css
+96 -33
View File
@@ -390,13 +390,14 @@ section {
.mission-section .mission-layout {
display: grid;
grid-template-columns: minmax(0, 7fr) minmax(200px, 3fr);
grid-template-columns: minmax(200px, 3fr) minmax(0, 7fr);
gap: clamp(1.5rem, 4vw, 3rem);
align-items: start;
}
.mission-content>p,
.mission-content .logo-concept p {
.mission-content .logo-concept-media-row>p,
.mission-content .logo-concept .logo-concept-media-row p {
color: #4a4a4a;
font-size: 1rem;
line-height: 1.6;
@@ -421,6 +422,95 @@ section {
border-bottom: 2px solid rgba(255, 204, 0, 0.5);
}
.mission-section .logo-concept-media-row {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(240px, 46%);
gap: clamp(1rem, 3vw, 1.85rem);
align-items: start;
}
.mission-section .mission-gif-frame {
width: 100%;
aspect-ratio: 16 / 9;
border-radius: 12px;
overflow: hidden;
border: 1px solid rgba(255, 204, 0, 0.28);
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
background: #1a1a1a;
}
.mission-section .mission-gif-frame img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.mission-section .mission-moment-wrap {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
min-width: 0;
}
.mission-section .mission-visual .caption,
.mission-section .mission-moment-wrap .caption {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.2rem;
margin-top: 0.65rem;
font-size: 0.78rem;
line-height: 1.45;
color: #6a6a6a;
max-width: 16rem;
}
.mission-section .mission-visual .arrow-icon,
.mission-section .mission-moment-wrap .arrow-icon {
font-size: 0.95rem;
line-height: 1;
color: var(--primary);
font-style: normal;
}
.mission-section .highlight-stage-flash {
letter-spacing: 0.06em;
font-weight: 800;
text-shadow:
0 0 10px rgba(255, 210, 64, 0.55),
0 0 22px rgba(255, 200, 0, 0.28);
}
@media (prefers-reduced-motion: no-preference) {
.mission-section .highlight-stage-flash {
animation: mission-stage-flash-pulse 2.8s ease-in-out infinite;
}
}
@keyframes mission-stage-flash-pulse {
0%,
100% {
text-shadow:
0 0 8px rgba(255, 210, 64, 0.45),
0 0 18px rgba(255, 200, 0, 0.2);
}
50% {
text-shadow:
0 0 14px rgba(255, 220, 80, 0.75),
0 0 30px rgba(255, 210, 50, 0.35);
}
}
@media (prefers-reduced-motion: reduce) {
.mission-section .highlight-stage-flash {
animation: none;
}
}
/* 金句：獨立於雙欄之下，全區塊寬度內致中 */
.mission-section>.quote-box {
width: 100%;
@@ -459,25 +549,6 @@ section {
object-fit: contain;
}
.mission-visual .caption {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.2rem;
margin-top: 0.65rem;
font-size: 0.78rem;
line-height: 1.45;
color: #6a6a6a;
max-width: 14rem;
}
.mission-visual .arrow-icon {
font-size: 0.95rem;
line-height: 1;
color: var(--primary);
font-style: normal;
}
@media (max-width: 900px) {
.mission-section .mission-layout {
grid-template-columns: 1fr;
@@ -491,6 +562,10 @@ section {
.mission-visual .logo-wrapper img {
max-width: 260px;
}
.mission-section .logo-concept-media-row {
grid-template-columns: 1fr;
}
}
/* 作品列表表格 */
@@ -1448,15 +1523,3 @@ body.ebook-ssg2-page .ebook-back-link {
text-align: center;
margin: 0 0 2.5rem;
}
/* classic.html — #classic-albums Spotify 引導 */
#classic-albums .classic-stream-lead {
margin: 0 0 1rem;
font-size: 0.95rem;
line-height: 1.65;
color: #444;
}
#classic-albums .classic-stream-lead a {
font-weight: 700;
}
黃色海洋.psd
BIN
View File
Binary file not shown.