From 7dc3a51fca65ad69434ef8099f672eb769f4ed52 Mon Sep 17 00:00:00 2001
From: JekkiNoopy <jekkinoopy@gmail.com>
Date: Sat, 11 Apr 2026 22:40:09 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=96=E9=83=A8css=E6=96=B0=E5=A2=9E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 grok.html | 204 +-----------------------------------------------------
 style.css | 203 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 205 insertions(+), 202 deletions(-)
 create mode 100644 style.css

diff --git a/grok.html b/grok.html
index c36585c..bf48181 100644
--- a/grok.html
+++ b/grok.html
@@ -4,209 +4,9 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>水晶男孩 SECHSKIES | 永恆的六顆水晶</title>
-    <style>
-        :root {
-            --yellow: #FFDD00;
-            --dark: #0A0A0A;
-            --accent: #FFD700;
-        }
-        * { margin:0; padding:0; box-sizing:border-box; }
-        body {
-            font-family: 'Segoe UI', system-ui, sans-serif;
-            background: linear-gradient(135deg, #0A0A0A 0%, #1A1A2E 100%);
-            color: #EEE;
-            line-height: 1.6;
-            overflow-x: hidden;
-        }
-        header {
-            height: 100vh;
-            background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.8)), url('https://via.placeholder.com/1920x1080/FFDD00/000000?text=SECHSKIES') center/cover no-repeat;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            text-align: center;
-            position: relative;
-        }
-        .hero {
-            z-index: 2;
-        }
-        .hero h1 {
-            font-size: 4.5rem;
-            color: var(--yellow);
-            text-shadow: 0 0 30px rgba(255,221,0,0.8);
-            margin-bottom: 1rem;
-        }
-        .hero p {
-            font-size: 1.8rem;
-            margin-bottom: 2rem;
-        }
-        .btn {
-            display: inline-block;
-            padding: 14px 40px;
-            background: var(--yellow);
-            color: #000;
-            font-weight: bold;
-            border-radius: 50px;
-            text-decoration: none;
-            transition: all 0.3s;
-        }
-        .btn:hover {
-            transform: scale(1.1);
-            background: #FFEE66;
-        }
+        
+    <link rel="stylesheet" href="style.css">
 
-        section {
-            padding: 100px 8%;
-        }
-        h2 {
-            font-size: 3rem;
-            color: var(--yellow);
-            text-align: center;
-            margin-bottom: 60px;
-            position: relative;
-        }
-        h2:after {
-            content: '';
-            width: 80px;
-            height: 4px;
-            background: var(--yellow);
-            position: absolute;
-            bottom: -15px;
-            left: 50%;
-            transform: translateX(-50%);
-        }
-
-        /* 故事背景 */
-        #story {
-            background: #111;
-        }
-        .story-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-            gap: 40px;
-            max-width: 1200px;
-            margin: 0 auto;
-        }
-        .card {
-            background: rgba(255,255,255,0.05);
-            border-radius: 20px;
-            padding: 30px;
-            transition: transform 0.4s, box-shadow 0.4s;
-        }
-        .card:hover {
-            transform: translateY(-15px);
-            box-shadow: 0 20px 40px rgba(255,221,0,0.2);
-        }
-        .card h3 {
-            color: var(--yellow);
-            margin-bottom: 15px;
-        }
-
-        /* 成員介紹 */
-        #members {
-            background: linear-gradient(#1A1A2E, #0A0A0A);
-        }
-        .members-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-            gap: 30px;
-            max-width: 1200px;
-            margin: 0 auto;
-        }
-        .member {
-            text-align: center;
-        }
-        .member img {
-            width: 100%;
-            border-radius: 20px;
-            border: 4px solid var(--yellow);
-            transition: all 0.4s;
-        }
-        .member:hover img {
-            border-color: #FFEE66;
-            transform: scale(1.05);
-        }
-        .member h3 {
-            margin-top: 15px;
-            color: var(--yellow);
-        }
-
-        /* 歷年作品時間軸 */
-        #discography {
-            background: #111;
-        }
-        .timeline {
-            max-width: 1000px;
-            margin: 0 auto;
-            position: relative;
-        }
-        .timeline:before {
-            content: '';
-            position: absolute;
-            left: 50%;
-            top: 0;
-            bottom: 0;
-            width: 6px;
-            background: var(--yellow);
-            opacity: 0.3;
-        }
-        .timeline-item {
-            margin: 60px 0;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            position: relative;
-        }
-        .timeline-item:nth-child(odd) { flex-direction: row-reverse; }
-        .timeline-content {
-            width: 45%;
-            background: rgba(255,221,0,0.1);
-            padding: 25px;
-            border-radius: 15px;
-            border: 2px solid var(--yellow);
-        }
-        .timeline-year {
-            width: 80px;
-            height: 80px;
-            background: var(--yellow);
-            color: #000;
-            font-weight: bold;
-            font-size: 1.5rem;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            border-radius: 50%;
-            flex-shrink: 0;
-            box-shadow: 0 0 20px rgba(255,221,0,0.6);
-        }
-
-        /* 現在的故事線 */
-        #now {
-            background: linear-gradient(to bottom, #1A1A2E, #0A0A0A);
-            text-align: center;
-        }
-        .now-content {
-            max-width: 800px;
-            margin: 0 auto;
-            font-size: 1.2rem;
-        }
-
-        footer {
-            background: #000;
-            text-align: center;
-            padding: 60px 20px;
-            color: #888;
-        }
-
-        /* 粒子背景效果 */
-        #particles {
-            position: absolute;
-            top: 0; left: 0;
-            width: 100%; height: 100%;
-            z-index: 1;
-            pointer-events: none;
-        }
-    </style>
 </head>
 <body>
 
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..fffeaec
--- /dev/null
+++ b/style.css
@@ -0,0 +1,203 @@
+        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&display=swap');
+        :root {
+            --yellow: #FFDD00;
+            --dark: #777;
+            --accent: #FFD700;
+        }
+        * { margin:0; padding:0; box-sizing:border-box; }
+        body {
+            font-family: 'Noto Sans TC', system-ui, sans-serif;
+            background: linear-gradient(135deg, #0A0A0A 0%, #1A1A2E 100%);
+            color: #EEE;
+            line-height: 1.6;
+            overflow-x: hidden;
+        }
+        header {
+            height: 100vh;
+            background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.8)), url('https://via.placeholder.com/1920x1080/FFDD00/000000?text=SECHSKIES') center/cover no-repeat;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            text-align: center;
+            position: relative;
+        }
+        .hero {
+            z-index: 2;
+        }
+        .hero h1 {
+            font-size: 2.5rem;
+            line-height: 1.2;
+            color: var(--yellow);
+            text-shadow: 0 0 30px rgba(255,221,0,0.8);
+            margin-bottom: 0.5rem;
+        }
+        .hero p {
+            font-size: 1.2rem;
+            margin-bottom: 2rem;
+        }
+        .btn {
+            display: inline-block;
+            padding: 10px 30px;
+            background: var(--yellow);
+            color: #000;
+            font-weight: bold;
+            border-radius: 50px;
+            text-decoration: none;
+            transition: all 0.3s;
+        }
+        .btn:hover {
+            transform: scale(1.1);
+            background: #FFEE66;
+        }
+
+        section {
+            padding: 100px 8%;
+        }
+        h2 {
+            font-size: 3rem;
+            color: var(--yellow);
+            text-align: center;
+            margin-bottom: 60px;
+            position: relative;
+        }
+        h2:after {
+            content: '';
+            width: 80px;
+            height: 4px;
+            background: var(--yellow);
+            position: absolute;
+            bottom: -15px;
+            left: 50%;
+            transform: translateX(-50%);
+        }
+
+        /* 故事背景 */
+        #story {
+            background: #111;
+        }
+        .story-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 40px;
+            max-width: 1200px;
+            margin: 0 auto;
+        }
+        .card {
+            background: rgba(255,255,255,0.05);
+            border-radius: 20px;
+            padding: 30px;
+            transition: transform 0.4s, box-shadow 0.4s;
+        }
+        .card:hover {
+            transform: translateY(-15px);
+            box-shadow: 0 20px 40px rgba(255,221,0,0.2);
+        }
+        .card h3 {
+            color: var(--yellow);
+            margin-bottom: 15px;
+        }
+
+        /* 成員介紹 */
+        #members {
+            background: linear-gradient(#1A1A2E, #0A0A0A);
+        }
+        .members-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+            gap: 30px;
+            max-width: 1200px;
+            margin: 0 auto;
+        }
+        .member {
+            text-align: center;
+        }
+        .member img {
+            width: 100%;
+            border-radius: 20px;
+            border: 4px solid var(--yellow);
+            transition: all 0.4s;
+        }
+        .member:hover img {
+            border-color: #FFEE66;
+            transform: scale(1.05);
+        }
+        .member h3 {
+            margin-top: 15px;
+            color: var(--yellow);
+        }
+
+        /* 歷年作品時間軸 */
+        #discography {
+            background: #111;
+        }
+        .timeline {
+            max-width: 1000px;
+            margin: 0 auto;
+            position: relative;
+        }
+        .timeline:before {
+            content: '';
+            position: absolute;
+            left: 50%;
+            top: 0;
+            bottom: 0;
+            width: 6px;
+            background: var(--yellow);
+            opacity: 0.3;
+        }
+        .timeline-item {
+            margin: 60px 0;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            position: relative;
+        }
+        .timeline-item:nth-child(odd) { flex-direction: row-reverse; }
+        .timeline-content {
+            width: 45%;
+            background: rgba(255,221,0,0.1);
+            padding: 25px;
+            border-radius: 15px;
+            border: 2px solid var(--yellow);
+        }
+        .timeline-year {
+            width: 80px;
+            height: 80px;
+            background: var(--yellow);
+            color: #000;
+            font-weight: bold;
+            font-size: 1.5rem;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 50%;
+            flex-shrink: 0;
+            box-shadow: 0 0 20px rgba(255,221,0,0.6);
+        }
+
+        /* 現在的故事線 */
+        #now {
+            background: linear-gradient(to bottom, #1A1A2E, #0A0A0A);
+            text-align: center;
+        }
+        .now-content {
+            max-width: 800px;
+            margin: 0 auto;
+            font-size: 1.2rem;
+        }
+
+        footer {
+            background: #000;
+            text-align: center;
+            padding: 60px 20px;
+            color: #888;
+        }
+
+        /* 粒子背景效果 */
+        #particles {
+            position: absolute;
+            top: 0; left: 0;
+            width: 100%; height: 100%;
+            z-index: 1;
+            pointer-events: none;
+        }
\ No newline at end of file