feat 加入黃色氣球海gif
This commit is contained in:
+1
-1
@@ -14,7 +14,7 @@
|
|||||||
### 目的
|
### 目的
|
||||||
|
|
||||||
- 年表區塊（「啟動新篇章」「輝煌全盛期」）每一資料列：**點列上非連結區域**時，於新分頁開對應 **Spotify 專輯**。
|
- 年表區塊（「啟動新篇章」「輝煌全盛期」）每一資料列：**點列上非連結區域**時，於新分頁開對應 **Spotify 專輯**。
|
||||||
- 列內既有 `<a>`（本站 `lyrics.html`、`concert.html`、`classic.html`）維持原行為。
|
- 列內既有 `<a>`（本站 `lyrics.html`、`concert.html`、`archive.html#classic`）維持原行為。
|
||||||
|
|
||||||
### 標記與無障礙
|
### 標記與無障礙
|
||||||
|
|
||||||
|
|||||||
+7
-7
@@ -83,7 +83,7 @@
|
|||||||
<section id="classic" class="archive-block">
|
<section id="classic" class="archive-block">
|
||||||
<h2 class="section-title">輝煌全盛期</h2>
|
<h2 class="section-title">輝煌全盛期</h2>
|
||||||
<p>主打的記憶點、b-side 的伏筆、舞步與應援口號——想一次收進收藏庫，往這張整理頁走。</p>
|
<p>主打的記憶點、b-side 的伏筆、舞步與應援口號——想一次收進收藏庫，往這張整理頁走。</p>
|
||||||
<p><a href="classic.html#classic-albums">打開輝煌全盛期整理</a></p>
|
<p><a href="#classic">於此區瀏覽輝煌全盛期年表</a></p>
|
||||||
<table class="archive-discography">
|
<table class="archive-discography">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
@@ -97,22 +97,22 @@
|
|||||||
data-spotify-url="https://open.spotify.com/album/18P1aqSLQA9WdNljjEhv9q"
|
data-spotify-url="https://open.spotify.com/album/18P1aqSLQA9WdNljjEhv9q"
|
||||||
aria-label="在 Spotify 開啟：School Byeolgok（學園別曲）">
|
aria-label="在 Spotify 開啟：School Byeolgok（學園別曲）">
|
||||||
<td>1997</td>
|
<td>1997</td>
|
||||||
<td><a href="classic.html#classic-albums">學園別曲</a></td>
|
<td><a href="#classic">學園別曲</a></td>
|
||||||
<td><a href="classic.html#classic-albums">學園別曲 / 男兒之路 (Pom Saeng Pom Sa)</a></td>
|
<td><a href="#classic">學園別曲 / 男兒之路 (Pom Saeng Pom Sa)</a></td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr class="archive-row-spotify" tabindex="0"
|
<tr class="archive-row-spotify" tabindex="0"
|
||||||
data-spotify-url="https://open.spotify.com/album/08TW1bmGzSg172Db8C2Bde"
|
data-spotify-url="https://open.spotify.com/album/08TW1bmGzSg172Db8C2Bde"
|
||||||
aria-label="在 Spotify 開啟：Road Fighter">
|
aria-label="在 Spotify 開啟：Road Fighter">
|
||||||
<td>1998</td>
|
<td>1998</td>
|
||||||
<td><a href="classic.html#classic-albums">Road Fighter</a></td>
|
<td><a href="#classic">Road Fighter</a></td>
|
||||||
<td><a href="classic.html#classic-albums">Road Fighter / Couple</a></td>
|
<td><a href="#classic">Road Fighter / Couple</a></td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr class="archive-row-spotify" tabindex="0"
|
<tr class="archive-row-spotify" tabindex="0"
|
||||||
data-spotify-url="https://open.spotify.com/album/3XWtqLXDZycu7Q0BGofhiq"
|
data-spotify-url="https://open.spotify.com/album/3XWtqLXDZycu7Q0BGofhiq"
|
||||||
aria-label="在 Spotify 開啟：Com' Back">
|
aria-label="在 Spotify 開啟：Com' Back">
|
||||||
<td>1999</td>
|
<td>1999</td>
|
||||||
<td><a href="classic.html#classic-albums">Com'Back</a></td>
|
<td><a href="#classic">Com'Back</a></td>
|
||||||
<td><a href="classic.html#classic-albums">Com'Back</a></td>
|
<td><a href="#classic">Com'Back</a></td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|||||||
-127
@@ -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 © 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>
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 127 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 606 KiB |
+24
-10
@@ -45,6 +45,16 @@
|
|||||||
<section id="mission" class="mission-section">
|
<section id="mission" class="mission-section">
|
||||||
<h2 class="section-title">成立的初衷</h2>
|
<h2 class="section-title">成立的初衷</h2>
|
||||||
<div class="mission-layout">
|
<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">
|
<div class="mission-content">
|
||||||
<p>
|
<p>
|
||||||
本站是以 <span class="highlight">SECHSKIES 水晶男孩</span> 為核心的數位推廣部，旨在透過 <span
|
本站是以 <span class="highlight">SECHSKIES 水晶男孩</span> 為核心的數位推廣部，旨在透過 <span
|
||||||
@@ -57,27 +67,31 @@
|
|||||||
|
|
||||||
<div class="logo-concept">
|
<div class="logo-concept">
|
||||||
<h3>LOGO 設計理念</h3>
|
<h3>LOGO 設計理念</h3>
|
||||||
|
<div class="logo-concept-media-row">
|
||||||
<p>
|
<p>
|
||||||
<span class="highlight">「晶」</span>字發想來自<span class="highlight">六角形的水晶</span>，為了強調水晶男孩<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">數字
|
||||||
class="highlight">密不可分的關係</span>。色彩配置發想來自回歸舞台成員脫下眼罩的剎那，整個場地從一片漆黑瞬間發亮，映入眼簾的是一片<span
|
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>。以此片段為契機，設計成<span
|
||||||
class="highlight">黑色系與黃色系</span>的色彩搭配，來記錄那瞬間的感動。
|
class="highlight">黑色系與黃色系</span>的色彩搭配，來記錄那瞬間的感動。
|
||||||
</p>
|
</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>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mission-visual">
|
|
||||||
<div class="logo-wrapper">
|
|
||||||
<img src="./img/logo.png" alt="SECHSKIES Logo Concept">
|
|
||||||
<span class="caption">
|
<span class="caption">
|
||||||
<span class="arrow-icon" aria-hidden="true">↓</span>
|
<span class="arrow-icon" aria-hidden="true">↓</span>
|
||||||
設計語彙：六角、黃海與初心
|
回歸演唱會的動人瞬間-黃色氣球海
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="quote-box">
|
<div class="quote-box">
|
||||||
「我們要用這座<span class="highlight">藝廊般的網站</span>證明：追星的孩子不僅不會變壞，更會因為那份<span
|
「我們要用這座<span class="highlight">藝廊般的網站</span>證明：追星的孩子不僅不會變壞，更會因為那份<span
|
||||||
|
|||||||
@@ -19,7 +19,6 @@
|
|||||||
<li><a href="jiwon.html#stage">隊長的氣場</a></li>
|
<li><a href="jiwon.html#stage">隊長的氣場</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
<li><a href="classic.html#classic-albums">輝煌全盛期典藏</a></li>
|
|
||||||
<li><a href="concert.html">現場的震撼</a>
|
<li><a href="concert.html">現場的震撼</a>
|
||||||
<ul class="portal-submenu">
|
<ul class="portal-submenu">
|
||||||
<li><a href="concert.html#stage-now">永恆的重逢</a></li>
|
<li><a href="concert.html#stage-now">永恆的重逢</a></li>
|
||||||
|
|||||||
@@ -390,13 +390,14 @@ section {
|
|||||||
|
|
||||||
.mission-section .mission-layout {
|
.mission-section .mission-layout {
|
||||||
display: grid;
|
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);
|
gap: clamp(1.5rem, 4vw, 3rem);
|
||||||
align-items: start;
|
align-items: start;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mission-content>p,
|
.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;
|
color: #4a4a4a;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
@@ -421,6 +422,95 @@ section {
|
|||||||
border-bottom: 2px solid rgba(255, 204, 0, 0.5);
|
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 {
|
.mission-section>.quote-box {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@@ -459,25 +549,6 @@ section {
|
|||||||
object-fit: contain;
|
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) {
|
@media (max-width: 900px) {
|
||||||
.mission-section .mission-layout {
|
.mission-section .mission-layout {
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
@@ -491,6 +562,10 @@ section {
|
|||||||
.mission-visual .logo-wrapper img {
|
.mission-visual .logo-wrapper img {
|
||||||
max-width: 260px;
|
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;
|
text-align: center;
|
||||||
margin: 0 0 2.5rem;
|
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;
|
|
||||||
}
|
|
||||||
|
|||||||
Reference in New Issue
Block a user