From 8942173b558f587b424b7809cd4e838b590a900e Mon Sep 17 00:00:00 2001 From: JekkiNoopy Date: Wed, 6 May 2026 22:01:03 +0800 Subject: [PATCH] =?UTF-8?q?feat:=E8=AA=BF=E6=95=B4=E5=85=A7=E5=AE=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- concert.css | 4 ++ concert.html | 10 ++--- index.css | 85 ++++++++++++++++++++++++++++++++++++++++ index.html | 58 ++++++++++++++++++++++------ style.css | 107 ++++++++++++++++++++++++++++++++++++++------------- 5 files changed, 222 insertions(+), 42 deletions(-) create mode 100644 index.css diff --git a/concert.css b/concert.css index de1ec45..decc749 100644 --- a/concert.css +++ b/concert.css @@ -1,3 +1,7 @@ +body { + background-color: var(--); +} + .concert-archive-header { text-align: center; padding: 100px 20px 80px; diff --git a/concert.html b/concert.html index 2a99ffe..22f3a87 100644 --- a/concert.html +++ b/concert.html @@ -3,7 +3,7 @@ SECHSKIES Concert Archive - + @@ -11,7 +11,7 @@
-

20th ANNIVERSARY TOUR

+

巡迴演唱會列表

SECHSKIES CONCERT ARCHIVE
@@ -24,7 +24,7 @@
- 2016 SECHSKIES [YELLOW NOTE] + 2016  |   YELLOW NOTE
@@ -152,7 +152,7 @@
- 20TH ANNIVERSARY CONCERT + 2017-2018  |  20TH ANNIVERSARY
首爾：高尺天空巨蛋 @@ -332,7 +332,7 @@
- 2018 CONCERT [NOW・HERE・AGAIN] + 2018  |  NOW・HERE・AGAIN
首爾：首爾奧林匹克體操競技場 diff --git a/index.css b/index.css new file mode 100644 index 0000000..e1d9943 --- /dev/null +++ b/index.css @@ -0,0 +1,85 @@ +.story-timeline { + position: relative; + max-width: 1000px; + margin: 50px auto; + padding: 20px 0; +} + +/* 中央貫穿軸線 */ +.story-timeline::after { + content: ''; + position: absolute; + width: 6px; + background-color: var(--primary); + top: 0; + bottom: 0; + left: 50%; + margin-left: -3px; + border-radius: 10px; +} + +.timeline-box { + content: ''; + padding: 10px 40px; + position: relative; + width: 50%; + box-sizing: border-box; +} + + +/* 圓形節點 */ +.timeline-box::after { + content: '\f3a5'; + /* 可換成圖示或圖片中的圓圈 */ + font-family: "Font Awesome 6 Free" !important; + position: absolute; + width: 10px; + height: 10px; + right: -20px; + top: 15px; + z-index: 1; + display: flex; + justify-content: center; + align-items: center; + color: #FFD700; + text-shadow: 0 0 8px rgba(255, 215, 0, 0.5); + display: inline-block; + vertical-align: middle; +} + + + +/* 左右交錯控制 */ +.left { + left: 0; + text-align: right; +} + +.right { + left: 50%; + text-align: left; +} + + +/* 日期標籤（膠囊型） */ +.date-tag { + display: inline-block; + padding: 8px 20px; + background: var(--accent); + /* #FFD700 */ + color: var(--text); + border-radius: 50px; + font-weight: bold; + margin-bottom: 10px; +} + +.content h3 { + color: var(--primary); + /* #FFDD00 */ + margin: 10px 0; +} + +.content p { + color: var(--text-muted); + line-height: 1.6; +} \ No newline at end of file diff --git a/index.html b/index.html index 18bd699..69c879c 100644 --- a/index.html +++ b/index.html @@ -6,6 +6,8 @@ SECHSKIES - 水晶男孩傳奇介紹 + + @@ -22,6 +24,7 @@ 故事背景 歷年作品 現在故事線 + 演唱會紀錄 @@ -29,14 +32,11 @@
-

故事背景

-

- SECHSKIES（水晶男孩） 於 1997 年 4 月 15 日出道，是韓國第一代頂尖男子團體。隊名在德語中意為「六顆水晶」，代表六位成員。 -

-

- 他們在 90 年代末與 H.O.T 並稱為 K-POP 的兩大山脈。然而，在事業巔峰期的 2000 年 5 月，團體突然宣佈解散，成為當時韓國演藝界最震撼的消息。解散後的 16 - 年間，成員各自在不同領域發展，但「小黃（粉絲暱稱）」們從未忘記那片黃色氣球海。 -

+

故事背景

+
+

1997 年 4 月 15 日，SECHSKIES（水晶男孩）正式出道，作為韓國第一代男子團體的巔峰，他們的團名在德語中意為「六顆水晶」。 +

+
@@ -54,9 +54,9 @@
- +
-

歷年作品 (精選)

+

歷年作品 (精選)

@@ -105,7 +105,7 @@
-

現在的故事線

+

現在的故事線

2016年：傳奇回歸 @@ -121,7 +121,43 @@
+
+ +
+
1997 - 2000
+
+

傳奇的誕生：出道與巔峰

+

1997年4月15日以《學園別曲》出道，分為黑、白水晶兩隊，與H.O.T並稱為90年代後期兩大山脈。

+
+
+ +
+
2000 - 2016
+
+

遺憾的句點：宣告解散

+

2000年5月20日正式解散，成員各自發展，水晶暫時進入休眠期。

+
+
+ + +
+
2016年 4月
+
+

重逢的感動：六六歌合體

+

透過《無限挑戰》「六六歌2」跨越16年再次重聚，引起全韓黃色氣球海再現。

+
+
+ + +
+
2019 - TODAY
+
+

體制調整與穩定

+

調整為四人組合（殷志源、李宰鎮、金在德、張水院），繼續以經典魅力活躍於樂壇與綜藝。

+
+
+

SECHSKIES Fanpage © 2026 - 黃色氣球永遠飄揚

diff --git a/style.css b/style.css index 1374db7..e44ab90 100644 --- a/style.css +++ b/style.css @@ -1,14 +1,26 @@ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&display=swap'); :root { - --yellow: #FFD700; + --primary: #ffcc00; /* 應援黃色 */ - --dark-yellow: #4e492b; + --light-yellow: #fceea7; + /* --dark-yellow: #4e492b; */ --black: #1a1a1a; - --gray: #f4f4f4; - --text-color: #333; - --dark: #777; - --accent: #FFD700; + --deep-black: #0a0a0a; + /* 更純粹的底黑 */ + /* --gray: #f4f4f4; */ + /* --text-color: #333; */ + /* --dark: #777; */ + /* --accent: #FFD700; */ + --card-bg: #1a1a1a; + /* 卡片專用深灰 */ + --bg-alt: #fcfaf2; + /* 今天的米白背景 */ + --text-main: #333; + /* 主要文字 */ + --text-muted: #888; + /* 輔助文字 */ + } /* 1. 先處理 body 和全域，確保沒人亂給外距 */ @@ -18,16 +30,23 @@ box-sizing: border-box; } -html { - background: #0A0A0A; - min-height: 100%; + +html, +body { + background-color: var(--deep-black); + color: #eeeeee; } +/* html { + min-height: 100%; +} */ + body { font-family: 'Noto Sans TC', system-ui, sans-serif; color: var(--text-color); line-height: 1.6; overflow-x: hidden; + width: 80%; } header { @@ -57,23 +76,26 @@ header { /* 導覽列 */ nav { background-color: var(--black); - padding: 0.5rem; - position: sticky; + padding: 0.8rem; + /* position: sticky; top: 0; z-index: 1000; + margin: 0; */ display: flex; justify-content: center; - margin: 0; } nav a { color: var(--yellow); text-decoration: none; - margin: 0 20px; + /* margin: 0 20px; font-weight: bold; - transition: 0.3s; + transition: 0.3s; */ + font-size: 0.95rem; + letter-spacing: 1px; } + nav a:hover { color: white; } @@ -132,6 +154,33 @@ nav a:hover { padding: 40px 20px; } +section { + background-color: var(--bg-white); +} + +.section-title { + color: var(--yellow); + text-align: center; + font-size: 2rem; + letter-spacing: 6px; + margin-bottom: 50px; + text-transform: uppercase; + /* + padding-left: 15px; + color: var(--black); */ +} + +.section-title::after { + content: ""; + display: block; + width: 50px; + height: 3px; + background: var(--yellow); + margin: 15px auto 0; +} + + + .story-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); @@ -141,14 +190,18 @@ nav a:hover { } .card { - /* background: rgba(0, 0, 0, 0.85); */ - border-radius: 20px; + background: var(--card-bg); + border: 1px solid #333; + /* 極細的邊框取代厚重的陰影 */ + border-radius: 8px; padding: 30px; - transition: transform 0.4s, box-shadow 0.4s; + transition: 0.4s; } .card:hover { transform: translateY(-15px); + border-color: var(--yellow); + /* 移上去才亮黃色 */ box-shadow: 0 5px 5px rgba(255, 221, 0, 0.2); } @@ -159,26 +212,28 @@ nav a:hover { section { margin-bottom: 60px; - background: rgba(255, 255, 255, 0.95); - padding: 30px; - border-radius: 15px; + background: transparent; + /* 移除白底或黑底 */ + box-shadow: none; + /* 移除陰影 */ + padding: 60px 0; + /* 增加上下留白，讓呼吸感出來 */ + border-radius: 0; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05); position: relative; z-index: 10; } -h2 { - border-left: 5px solid var(--yellow); - padding-left: 15px; - color: var(--black); - margin-bottom: 25px; -} /* 作品列表表格 */ table { width: 100%; border-collapse: collapse; margin-top: 20px; + border-radius: 10px; + overflow: hidden; + /* 確保邊框圓角生效 */ + } table th {