From c76e73a3f01ce33f9b431c76d35078ed6895d3b4 Mon Sep 17 00:00:00 2001 From: t11003 Date: Wed, 18 Mar 2026 07:56:11 +0800 Subject: [PATCH 1/5] =?UTF-8?q?style:=20=E6=8C=89=E9=88=95=E6=94=B9?= =?UTF-8?q?=E7=82=BA=E6=B7=B1=E8=97=8D=E8=89=B2=20#1a73e8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- style.css | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/style.css b/style.css index e420ff3..60a5e59 100644 --- a/style.css +++ b/style.css @@ -87,10 +87,7 @@ header .subtitle { font-size: 13px; opacity: 0.85; margin-top: 4px; } } .input-area button { - /* 練習：把按鈕顏色改成你喜歡的顏色 - conflict-a 分支：改成 #4f8ef7（藍色） - conflict-b 分支：改成 #e84393（粉色） */ - background: #4f8ef7; + background: #1a73e8; /* conflict-a：深藍色 */ color: white; border: none; padding: 10px 20px; From 7fae6a3a97b78407289f5631fef847cd979b5344 Mon Sep 17 00:00:00 2001 From: t11003 Date: Wed, 18 Mar 2026 07:56:22 +0800 Subject: [PATCH 2/5] =?UTF-8?q?style:=20=E6=8C=89=E9=88=95=E6=94=B9?= =?UTF-8?q?=E7=82=BA=E7=B2=89=E8=89=B2=20#e84393?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- style.css | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/style.css b/style.css index e420ff3..01f3e64 100644 --- a/style.css +++ b/style.css @@ -87,10 +87,7 @@ header .subtitle { font-size: 13px; opacity: 0.85; margin-top: 4px; } } .input-area button { - /* 練習：把按鈕顏色改成你喜歡的顏色 - conflict-a 分支：改成 #4f8ef7（藍色） - conflict-b 分支：改成 #e84393（粉色） */ - background: #4f8ef7; + background: #e84393; /* conflict-b：粉色 */ color: white; border: none; padding: 10px 20px; From 1fc8eeb34f55be09498dcb20e722793a7e32f922 Mon Sep 17 00:00:00 2001 From: t11003 Date: Wed, 18 Mar 2026 08:41:27 +0800 Subject: [PATCH 3/5] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E6=B7=B1?= =?UTF-8?q?=E8=89=B2=E6=A8=A1=E5=BC=8F=E5=88=87=E6=8F=9B=E6=8C=89=E9=88=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 1 + style.css | 19 +++++++++++++++++++ 2 files changed, 20 insertions(+) diff --git a/index.html b/index.html index 756d0f2..dcda068 100644 --- a/index.html +++ b/index.html @@ -12,6 +12,7 @@

🤖 練習用 Chatbot

W4 Git Branch 練習

+
diff --git a/style.css b/style.css index e420ff3..b06e61c 100644 --- a/style.css +++ b/style.css @@ -102,3 +102,22 @@ header .subtitle { font-size: 13px; opacity: 0.85; margin-top: 4px; } .input-area button:hover { opacity: 0.85; } + +/* ===== feature/dark-mode 新增 ===== */ +.dark-toggle { + margin-top: 8px; + background: rgba(255,255,255,0.2); + border: none; + color: white; + padding: 4px 12px; + border-radius: 6px; + cursor: pointer; + font-size: 12px; +} + +body.dark { background-color: #1e1e2e; } +body.dark .container { background: #313244; color: #cdd6f4; } +body.dark header { background: #1e1e2e; } +body.dark .message.bot { background: #45475a; color: #cdd6f4; } +body.dark .input-area { border-top-color: #45475a; } +body.dark .input-area input { background: #45475a; color: #cdd6f4; border-color: #585b70; } From 2c06c1102b9321e946b1ca0c174a2f4bc39b642e Mon Sep 17 00:00:00 2001 From: wanrong Date: Wed, 18 Mar 2026 09:52:27 +0800 Subject: [PATCH 4/5] style: update general styling and layout properties --- style.css | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/style.css b/style.css index e420ff3..367db00 100644 --- a/style.css +++ b/style.css @@ -8,7 +8,7 @@ body { font-family: 'Noto Sans TC', sans-serif; /* 練習：把背景色改成你喜歡的顏色 */ - background-color: #f0f4f8; + background-color: #f5f4f0; display: flex; justify-content: center; align-items: center; @@ -26,7 +26,7 @@ body { header { /* 練習：把標題列顏色從藍色改成其他顏色 */ - background: #4f8ef7; + background: #6c8065; color: white; padding: 20px 24px; } @@ -52,15 +52,15 @@ header .subtitle { font-size: 13px; opacity: 0.85; margin-top: 4px; } } .message.bot { - background: #f0f4f8; - color: #333; + background: #ecebe6; + color: #4a423e; align-self: flex-start; border-bottom-left-radius: 4px; } .message.user { /* 練習：把使用者訊息顏色從綠色改成你喜歡的顏色 */ - background: #4caf87; + background: #c9a099; color: white; align-self: flex-end; border-bottom-right-radius: 4px; @@ -83,14 +83,14 @@ header .subtitle { font-size: 13px; opacity: 0.85; margin-top: 4px; } } .input-area input:focus { - border-color: #4f8ef7; + border-color: #6c8065; } .input-area button { /* 練習：把按鈕顏色改成你喜歡的顏色 conflict-a 分支：改成 #4f8ef7（藍色） conflict-b 分支：改成 #e84393（粉色） */ - background: #4f8ef7; + background: #6c8065; color: white; border: none; padding: 10px 20px; From bc20dc2ff4b7fdb3fe4024d7c370591f85170b75 Mon Sep 17 00:00:00 2001 From: wanrong Date: Wed, 18 Mar 2026 10:45:57 +0800 Subject: [PATCH 5/5] feat: Enhance chat interface styling with updated layout, visual effects, and expanded dark mode support. --- style.css | 111 ++++++++++++++++++++++++++++++++++++------------------ 1 file changed, 74 insertions(+), 37 deletions(-) diff --git a/style.css b/style.css index 3e7d31b..4650652 100644 --- a/style.css +++ b/style.css @@ -17,10 +17,14 @@ body { .container { background: white; - border-radius: 16px; - box-shadow: 0 4px 20px rgba(0,0,0,0.1); - width: 480px; + border-radius: 24px; + box-shadow: 0 10px 40px rgba(0,0,0,0.08); + width: 420px; max-width: 95vw; + height: 85vh; + max-height: 800px; + display: flex; + flex-direction: column; overflow: hidden; } @@ -28,34 +32,46 @@ header { /* 練習：把標題列顏色從藍色改成其他顏色 */ background: #6c8065; color: white; - padding: 20px 24px; + padding: 24px 24px 20px; + display: flex; + flex-direction: column; + align-items: center; + box-shadow: 0 2px 10px rgba(0,0,0,0.05); + z-index: 10; } -header h1 { font-size: 20px; } -header .subtitle { font-size: 13px; opacity: 0.85; margin-top: 4px; } +header h1 { font-size: 20px; font-weight: 600; letter-spacing: 0.5px; } +header .subtitle { font-size: 13px; opacity: 0.9; margin-top: 6px; } #chat-box { - height: 360px; + flex: 1; overflow-y: auto; - padding: 20px; + padding: 24px 20px; display: flex; flex-direction: column; - gap: 12px; + gap: 16px; + background-color: #faf9f6; +} + +@keyframes slideUp { + from { opacity: 0; transform: translateY(10px); } + to { opacity: 1; transform: translateY(0); } } .message { - max-width: 75%; - padding: 10px 14px; - border-radius: 12px; - font-size: 14px; + max-width: 78%; + padding: 12px 16px; + font-size: 15px; line-height: 1.5; + box-shadow: 0 2px 5px rgba(0,0,0,0.04); + animation: slideUp 0.3s ease-out forwards; } .message.bot { background: #ecebe6; color: #4a423e; align-self: flex-start; - border-bottom-left-radius: 4px; + border-radius: 20px 20px 20px 4px; } .message.user { @@ -63,61 +79,82 @@ header .subtitle { font-size: 13px; opacity: 0.85; margin-top: 4px; } background: #c9a099; color: white; align-self: flex-end; - border-bottom-right-radius: 4px; + border-radius: 20px 20px 4px 20px; } .input-area { display: flex; - padding: 16px; - gap: 10px; - border-top: 1px solid #eee; + padding: 16px 20px; + gap: 12px; + background: white; + border-top: 1px solid rgba(0,0,0,0.05); + z-index: 10; } .input-area input { flex: 1; - padding: 10px 14px; - border: 1px solid #ddd; - border-radius: 8px; - font-size: 14px; + padding: 12px 20px; + border: 1px solid transparent; + background: #ebeae6; + border-radius: 24px; + font-size: 15px; outline: none; + transition: all 0.2s ease; } .input-area input:focus { + background: white; border-color: #6c8065; + box-shadow: 0 0 0 3px rgba(108, 128, 101, 0.15); } .input-area button { - /* 練習：把按鈕顏色改成你喜歡的顏色 - conflict-a 分支：改成 #4f8ef7（藍色） - conflict-b 分支：改成 #e84393（粉色） */ + /* 練習：把按鈕顏色改成你喜歡的顏色 */ background: #6c8065; color: white; border: none; - padding: 10px 20px; - border-radius: 8px; + padding: 12px 24px; + border-radius: 24px; cursor: pointer; - font-size: 14px; + font-size: 15px; + font-weight: 600; + transition: all 0.2s ease; + box-shadow: 0 2px 8px rgba(108, 128, 101, 0.2); } .input-area button:hover { - opacity: 0.85; + transform: translateY(-1px); + box-shadow: 0 4px 12px rgba(108, 128, 101, 0.3); +} + +.input-area button:active { + transform: translateY(1px); + box-shadow: 0 1px 4px rgba(108, 128, 101, 0.2); } /* ===== feature/dark-mode 新增 ===== */ .dark-toggle { - margin-top: 8px; + margin-top: 12px; background: rgba(255,255,255,0.2); border: none; color: white; - padding: 4px 12px; - border-radius: 6px; + padding: 6px 14px; + border-radius: 12px; cursor: pointer; font-size: 12px; + transition: background 0.2s; +} + +.dark-toggle:hover { + background: rgba(255,255,255,0.3); } body.dark { background-color: #1e1e2e; } -body.dark .container { background: #313244; color: #cdd6f4; } -body.dark header { background: #1e1e2e; } -body.dark .message.bot { background: #45475a; color: #cdd6f4; } -body.dark .input-area { border-top-color: #45475a; } -body.dark .input-area input { background: #45475a; color: #cdd6f4; border-color: #585b70; } +body.dark .container { background: #2a2b3c; box-shadow: 0 10px 40px rgba(0,0,0,0.3); } +body.dark header { background: #1e1e2e; box-shadow: 0 2px 10px rgba(0,0,0,0.2); } +body.dark #chat-box { background-color: #181825; } +body.dark .message.bot { background: #313244; color: #cdd6f4; } +body.dark .message.user { color: white; } +body.dark .input-area { background: #2a2b3c; border-top-color: rgba(255,255,255,0.05); } +body.dark .input-area input { background: #181825; color: #cdd6f4; border-color: transparent; } +body.dark .input-area input:focus { background: #313244; border-color: #6c8065; box-shadow: 0 0 0 3px rgba(108, 128, 101, 0.3); }