From c76e73a3f01ce33f9b431c76d35078ed6895d3b4 Mon Sep 17 00:00:00 2001
From: t11003 <t11003t11003@gmail.com>
Date: Wed, 18 Mar 2026 07:56:11 +0800
Subject: [PATCH 01/10] =?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 <t11003t11003@gmail.com>
Date: Wed, 18 Mar 2026 07:56:22 +0800
Subject: [PATCH 02/10] =?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 <t11003t11003@gmail.com>
Date: Wed, 18 Mar 2026 08:41:27 +0800
Subject: [PATCH 03/10] =?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 @@
       <h1>🤖 練習用 Chatbot</h1>
       <!-- 練習一：把標題改成你們組的名字 -->
       <p class="subtitle">W4 Git Branch 練習</p>
+      <button class="dark-toggle" onclick="document.body.classList.toggle('dark')">🌙 深色模式</button>
     </header>
 
     <div id="chat-box">
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 0ef4d923a53a7231e42b892a83d7355c4fb0ad7e Mon Sep 17 00:00:00 2001
From: Eric <ericwu0805@gmail.com>
Date: Wed, 18 Mar 2026 09:54:43 +0800
Subject: [PATCH 04/10] =?UTF-8?q?style:=20=E6=9B=B4=E6=8F=9B=E6=97=A5?=
 =?UTF-8?q?=E7=B3=BB=E9=85=8D=E8=89=B2=E9=A2=A8=E6=A0=BC=20=F0=9F=8C=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 style.css | 44 ++++++++++++++++++++++----------------------
 1 file changed, 22 insertions(+), 22 deletions(-)

diff --git a/style.css b/style.css
index e420ff3..1dcec19 100644
--- a/style.css
+++ b/style.css
@@ -1,14 +1,14 @@
 /* ============================
    W4 練習 Chatbot 樣式
-   學生練習：修改顏色、字體大小等
+   日系配色 🌸
    ============================ */
 
 * { box-sizing: border-box; margin: 0; padding: 0; }
 
 body {
   font-family: 'Noto Sans TC', sans-serif;
-  /* 練習：把背景色改成你喜歡的顏色 */
-  background-color: #f0f4f8;
+  /* 日系淡米色背景 */
+  background-color: #faf6f0;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -16,18 +16,18 @@ body {
 }
 
 .container {
-  background: white;
+  background: #fffbf5;
   border-radius: 16px;
-  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
+  box-shadow: 0 4px 20px rgba(139, 109, 82, 0.12);
   width: 480px;
   max-width: 95vw;
   overflow: hidden;
 }
 
 header {
-  /* 練習：把標題列顏色從藍色改成其他顏色 */
-  background: #4f8ef7;
-  color: white;
+  /* 日系櫻花粉 */
+  background: #d4a0a7;
+  color: #fffbf5;
   padding: 20px 24px;
 }
 
@@ -52,16 +52,17 @@ header .subtitle { font-size: 13px; opacity: 0.85; margin-top: 4px; }
 }
 
 .message.bot {
-  background: #f0f4f8;
-  color: #333;
+  /* 日系淡抹茶色 */
+  background: #e8ede4;
+  color: #4a4a4a;
   align-self: flex-start;
   border-bottom-left-radius: 4px;
 }
 
 .message.user {
-  /* 練習：把使用者訊息顏色從綠色改成你喜歡的顏色 */
-  background: #4caf87;
-  color: white;
+  /* 日系藤紫色 */
+  background: #8b7bb5;
+  color: #fffbf5;
   align-self: flex-end;
   border-bottom-right-radius: 4px;
 }
@@ -70,28 +71,27 @@ header .subtitle { font-size: 13px; opacity: 0.85; margin-top: 4px; }
   display: flex;
   padding: 16px;
   gap: 10px;
-  border-top: 1px solid #eee;
+  border-top: 1px solid #e8ddd0;
 }
 
 .input-area input {
   flex: 1;
   padding: 10px 14px;
-  border: 1px solid #ddd;
+  border: 1px solid #ddd3c7;
   border-radius: 8px;
   font-size: 14px;
   outline: none;
+  background: #fffbf5;
 }
 
 .input-area input:focus {
-  border-color: #4f8ef7;
+  border-color: #d4a0a7;
 }
 
 .input-area button {
-  /* 練習：把按鈕顏色改成你喜歡的顏色
-     conflict-a 分支：改成 #4f8ef7（藍色）
-     conflict-b 分支：改成 #e84393（粉色）  */
-  background: #4f8ef7;
-  color: white;
+  /* 日系櫻花粉按鈕 */
+  background: #d4a0a7;
+  color: #fffbf5;
   border: none;
   padding: 10px 20px;
   border-radius: 8px;
@@ -100,5 +100,5 @@ header .subtitle { font-size: 13px; opacity: 0.85; margin-top: 4px; }
 }
 
 .input-area button:hover {
-  opacity: 0.85;
+  background: #c48e96;
 }

From 9d0cfdd70c9c8338c8df294f1927ee5f25612676 Mon Sep 17 00:00:00 2001
From: Eric <ericwu0805@gmail.com>
Date: Wed, 18 Mar 2026 10:43:20 +0800
Subject: [PATCH 05/10] feat: Apply a Japanese-style color palette to the
 chatbot UI elements.

---
 index.html |  88 ++++++++++----
 style.css  | 328 +++++++++++++++++++++++++++++++++++++++++++----------
 2 files changed, 333 insertions(+), 83 deletions(-)

diff --git a/index.html b/index.html
index dcda068..5bd6ac1 100644
--- a/index.html
+++ b/index.html
@@ -2,33 +2,55 @@
 <html lang="zh-Hant">
 <head>
   <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>W4 練習 Chatbot</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Noto+Sans+TC:wght@400;500;700&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="style.css">
 </head>
 <body>
 
   <div class="container">
     <header>
-      <h1>🤖 練習用 Chatbot</h1>
-      <!-- 練習一：把標題改成你們組的名字 -->
-      <p class="subtitle">W4 Git Branch 練習</p>
-      <button class="dark-toggle" onclick="document.body.classList.toggle('dark')">🌙 深色模式</button>
+      <div class="header-left">
+        <div class="avatar">🤖</div>
+        <div class="header-info">
+          <h1>練習用 Chatbot</h1>
+          <p class="subtitle"><span class="status-dot"></span>W4 Git Branch 練習</p>
+        </div>
+      </div>
+      <button class="dark-toggle" onclick="document.body.classList.toggle('dark')" title="切換深色模式">
+        <span class="toggle-icon">🌙</span>
+      </button>
     </header>
 
     <div id="chat-box">
-      <div class="message bot">
-        嗨！我是練習用的 Chatbot，今天我們要學 Git Branch 🌿
+      <div class="message bot fade-in">
+        <div class="msg-avatar">🤖</div>
+        <div class="msg-bubble">
+          嗨！我是練習用的 Chatbot，今天我們要學 Git Branch 🌿
+          <span class="msg-time">剛才</span>
+        </div>
       </div>
     </div>
 
     <div class="input-area">
-      <input id="user-input" type="text" placeholder="輸入訊息...">
-      <!-- 練習二：把按鈕文字改成你喜歡的文字 -->
-      <button onclick="sendMessage()">送出</button>
+      <input id="user-input" type="text" placeholder="輸入訊息..." autocomplete="off">
+      <button id="send-btn" onclick="sendMessage()">
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <line x1="22" y1="2" x2="11" y2="13"></line>
+          <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
+        </svg>
+      </button>
     </div>
   </div>
 
   <script>
+    function getTimeStr() {
+      const now = new Date();
+      return now.getHours().toString().padStart(2, '0') + ':' + now.getMinutes().toString().padStart(2, '0');
+    }
+
     function sendMessage() {
       const input = document.getElementById('user-input');
       const chatBox = document.getElementById('chat-box');
@@ -36,23 +58,49 @@ <h1>🤖 練習用 Chatbot</h1>
 
       if (!text) return;
 
-      // 顯示使用者訊息
+      // 使用者訊息
       const userDiv = document.createElement('div');
-      userDiv.className = 'message user';
-      userDiv.textContent = text;
+      userDiv.className = 'message user fade-in';
+      userDiv.innerHTML = `
+        <div class="msg-bubble">
+          ${text}
+          <span class="msg-time">${getTimeStr()}</span>
+        </div>
+      `;
       chatBox.appendChild(userDiv);
-
-      // 模擬 bot 回覆
-      const botDiv = document.createElement('div');
-      botDiv.className = 'message bot';
-      botDiv.textContent = `你說了「${text}」，我收到了！`;
-      chatBox.appendChild(botDiv);
-
       input.value = '';
       chatBox.scrollTop = chatBox.scrollHeight;
+
+      // 打字動畫
+      const typingDiv = document.createElement('div');
+      typingDiv.className = 'message bot fade-in';
+      typingDiv.innerHTML = `
+        <div class="msg-avatar">🤖</div>
+        <div class="msg-bubble typing">
+          <span class="dot"></span><span class="dot"></span><span class="dot"></span>
+        </div>
+      `;
+      chatBox.appendChild(typingDiv);
+      chatBox.scrollTop = chatBox.scrollHeight;
+
+      // 延遲顯示回覆
+      setTimeout(() => {
+        typingDiv.remove();
+        const botDiv = document.createElement('div');
+        botDiv.className = 'message bot fade-in';
+        botDiv.innerHTML = `
+          <div class="msg-avatar">🤖</div>
+          <div class="msg-bubble">
+            你說了「${text}」，我收到了！
+            <span class="msg-time">${getTimeStr()}</span>
+          </div>
+        `;
+        chatBox.appendChild(botDiv);
+        chatBox.scrollTop = chatBox.scrollHeight;
+      }, 800);
     }
 
-    // 按 Enter 也能送出
+    // Enter 送出
     document.getElementById('user-input').addEventListener('keypress', function(e) {
       if (e.key === 'Enter') sendMessage();
     });
diff --git a/style.css b/style.css
index 44705da..33eb003 100644
--- a/style.css
+++ b/style.css
@@ -1,122 +1,324 @@
 /* ============================
-   W4 練習 Chatbot 樣式
-   日系配色 🌸
+   W4 練習 Chatbot — 現代聊天室風格
    ============================ */
 
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Noto+Sans+TC:wght@400;500;700&display=swap');
+
+:root {
+  --bg: #f0f2f5;
+  --container-bg: #ffffff;
+  --header-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  --user-bubble: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  --bot-bubble: #f0f2f5;
+  --bot-text: #1a1a2e;
+  --input-bg: #f0f2f5;
+  --input-border: #e0e0e0;
+  --input-focus: #667eea;
+  --send-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  --time-color: rgba(0,0,0,0.35);
+  --time-user: rgba(255,255,255,0.6);
+  --shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
+  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
 * { box-sizing: border-box; margin: 0; padding: 0; }
 
 body {
-  font-family: 'Noto Sans TC', sans-serif;
-  /* 日系淡米色背景 */
-  background-color: #faf6f0;
+  font-family: 'Inter', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, sans-serif;
+  background-color: var(--bg);
   display: flex;
   justify-content: center;
   align-items: center;
   min-height: 100vh;
+  transition: var(--transition);
 }
 
+/* ===== 容器 ===== */
 .container {
-  background: #fffbf5;
-  border-radius: 16px;
-  box-shadow: 0 4px 20px rgba(139, 109, 82, 0.12);
-  width: 480px;
+  background: var(--container-bg);
+  border-radius: 20px;
+  box-shadow: var(--shadow);
+  width: 440px;
   max-width: 95vw;
   overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  transition: var(--transition);
 }
 
+/* ===== Header ===== */
 header {
-  /* 日系櫻花粉 */
-  background: #d4a0a7;
-  color: #fffbf5;
-  padding: 20px 24px;
+  background: var(--header-bg);
+  color: white;
+  padding: 18px 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
 }
 
-header h1 { font-size: 20px; }
-header .subtitle { font-size: 13px; opacity: 0.85; margin-top: 4px; }
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
 
+.avatar {
+  width: 42px;
+  height: 42px;
+  background: rgba(255,255,255,0.2);
+  backdrop-filter: blur(8px);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 22px;
+}
+
+.header-info h1 {
+  font-size: 16px;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+}
+
+.subtitle {
+  font-size: 12px;
+  opacity: 0.85;
+  margin-top: 2px;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.status-dot {
+  width: 7px;
+  height: 7px;
+  background: #4ade80;
+  border-radius: 50%;
+  display: inline-block;
+  animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
+}
+
+.dark-toggle {
+  width: 36px;
+  height: 36px;
+  background: rgba(255, 255, 255, 0.15);
+  backdrop-filter: blur(8px);
+  border: none;
+  border-radius: 50%;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: var(--transition);
+}
+
+.dark-toggle:hover {
+  background: rgba(255, 255, 255, 0.3);
+  transform: rotate(20deg);
+}
+
+.toggle-icon { font-size: 16px; }
+
+/* ===== Chat Box ===== */
 #chat-box {
-  height: 360px;
+  height: 420px;
   overflow-y: auto;
-  padding: 20px;
+  padding: 20px 16px;
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 16px;
+  scroll-behavior: smooth;
+  background: var(--container-bg);
+  transition: var(--transition);
 }
 
+#chat-box::-webkit-scrollbar {
+  width: 4px;
+}
+#chat-box::-webkit-scrollbar-thumb {
+  background: #ccc;
+  border-radius: 4px;
+}
+
+/* ===== 訊息 ===== */
 .message {
-  max-width: 75%;
+  display: flex;
+  align-items: flex-end;
+  gap: 8px;
+}
+
+.message.user {
+  flex-direction: row-reverse;
+}
+
+.msg-avatar {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: var(--bot-bubble);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  flex-shrink: 0;
+}
+
+.msg-bubble {
+  max-width: 72%;
   padding: 10px 14px;
-  border-radius: 12px;
+  border-radius: 18px;
   font-size: 14px;
-  line-height: 1.5;
+  line-height: 1.6;
+  position: relative;
+  word-break: break-word;
 }
 
-.message.bot {
-  /* 日系淡抹茶色 */
-  background: #e8ede4;
-  color: #4a4a4a;
-  align-self: flex-start;
-  border-bottom-left-radius: 4px;
+.message.bot .msg-bubble {
+  background: var(--bot-bubble);
+  color: var(--bot-text);
+  border-bottom-left-radius: 6px;
 }
 
-.message.user {
-  /* 日系藤紫色 */
-  background: #8b7bb5;
-  color: #fffbf5;
-  align-self: flex-end;
-  border-bottom-right-radius: 4px;
+.message.user .msg-bubble {
+  background: var(--user-bubble);
+  color: #fff;
+  border-bottom-right-radius: 6px;
+}
+
+.msg-time {
+  display: block;
+  font-size: 10px;
+  margin-top: 4px;
+  text-align: right;
+}
+
+.message.bot .msg-time { color: var(--time-color); }
+.message.user .msg-time { color: var(--time-user); }
+
+/* ===== 打字動畫 ===== */
+.typing {
+  display: flex;
+  gap: 4px;
+  padding: 12px 18px;
+  align-items: center;
+}
+
+.typing .dot {
+  width: 8px;
+  height: 8px;
+  background: #aaa;
+  border-radius: 50%;
+  animation: bounce 1.4s infinite ease-in-out;
+}
+
+.typing .dot:nth-child(2) { animation-delay: 0.2s; }
+.typing .dot:nth-child(3) { animation-delay: 0.4s; }
+
+@keyframes bounce {
+  0%, 80%, 100% { transform: translateY(0); }
+  40% { transform: translateY(-8px); }
 }
 
+/* ===== 入場動畫 ===== */
+.fade-in {
+  animation: fadeSlideIn 0.35s ease-out;
+}
+
+@keyframes fadeSlideIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* ===== 輸入區 ===== */
 .input-area {
   display: flex;
-  padding: 16px;
+  padding: 14px 16px;
   gap: 10px;
-  border-top: 1px solid #e8ddd0;
+  border-top: 1px solid var(--input-border);
+  background: var(--container-bg);
+  transition: var(--transition);
 }
 
 .input-area input {
   flex: 1;
-  padding: 10px 14px;
-  border: 1px solid #ddd3c7;
-  border-radius: 8px;
+  padding: 12px 16px;
+  border: 1.5px solid var(--input-border);
+  border-radius: 24px;
   font-size: 14px;
+  font-family: inherit;
   outline: none;
-  background: #fffbf5;
+  background: var(--input-bg);
+  color: var(--bot-text);
+  transition: var(--transition);
 }
 
 .input-area input:focus {
-  border-color: #d4a0a7;
+  border-color: var(--input-focus);
+  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
 }
 
-.input-area button {
-  background: #e84393;  /* 解決衝突：採用粉色 */
+#send-btn {
+  width: 44px;
+  height: 44px;
+  background: var(--send-bg);
   color: white;
   border: none;
-  padding: 10px 20px;
-  border-radius: 8px;
+  border-radius: 50%;
   cursor: pointer;
-  font-size: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: var(--transition);
 }
 
-.input-area button:hover {
-  background: #c48e96;
+#send-btn:hover {
+  transform: scale(1.08);
+  box-shadow: 0 4px 14px rgba(102, 126, 234, 0.4);
 }
 
-/* ===== 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;
+#send-btn:active {
+  transform: scale(0.95);
+}
+
+/* ===========================
+   深色模式
+   =========================== */
+body.dark {
+  --bg: #0f0f1a;
+  --container-bg: #1a1a2e;
+  --header-bg: linear-gradient(135deg, #4a3f8a 0%, #2d2248 100%);
+  --user-bubble: linear-gradient(135deg, #5b4fa0 0%, #3d2f6e 100%);
+  --bot-bubble: #262640;
+  --bot-text: #e0e0f0;
+  --input-bg: #262640;
+  --input-border: #3a3a5c;
+  --input-focus: #7c6fd4;
+  --send-bg: linear-gradient(135deg, #5b4fa0 0%, #3d2f6e 100%);
+  --time-color: rgba(255,255,255,0.3);
+  --time-user: rgba(255,255,255,0.5);
+  --shadow: 0 8px 32px rgba(0, 0, 0, 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 #chat-box::-webkit-scrollbar-thumb {
+  background: #555;
+}
+
+body.dark .msg-avatar {
+  background: #333358;
+}
+
+body.dark .dark-toggle {
+  background: rgba(255, 255, 255, 0.08);
+}

From e776272872a3a5c2a291f832221c3935944a293c Mon Sep 17 00:00:00 2001
From: eason92k <leeeason92k@gmail.com>
Date: Wed, 18 Mar 2026 10:55:22 +0800
Subject: [PATCH 06/10] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=A8=99=E9=A1=8C?=
 =?UTF-8?q?=E7=82=BA=E7=AC=AC=E5=8D=81=E7=B5=84=20=E4=B8=A6=E8=AA=BF?=
 =?UTF-8?q?=E6=95=B4=E6=A0=BC=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .vscode/settings.json | 3 +++
 index.html            | 9 ++++++---
 2 files changed, 9 insertions(+), 3 deletions(-)
 create mode 100644 .vscode/settings.json

diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..6f3a291
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index dcda068..30edced 100644
--- a/index.html
+++ b/index.html
@@ -1,17 +1,19 @@
 <!DOCTYPE html>
 <html lang="zh-Hant">
+
 <head>
   <meta charset="UTF-8">
   <title>W4 練習 Chatbot</title>
   <link rel="stylesheet" href="style.css">
 </head>
+
 <body>
 
   <div class="container">
     <header>
       <h1>🤖 練習用 Chatbot</h1>
       <!-- 練習一：把標題改成你們組的名字 -->
-      <p class="subtitle">W4 Git Branch 練習</p>
+      <p class="subtitle">第十組</p>
       <button class="dark-toggle" onclick="document.body.classList.toggle('dark')">🌙 深色模式</button>
     </header>
 
@@ -53,10 +55,11 @@ <h1>🤖 練習用 Chatbot</h1>
     }
 
     // 按 Enter 也能送出
-    document.getElementById('user-input').addEventListener('keypress', function(e) {
+    document.getElementById('user-input').addEventListener('keypress', function (e) {
       if (e.key === 'Enter') sendMessage();
     });
   </script>
 
 </body>
-</html>
+
+</html>
\ No newline at end of file

From 66490193c453353b1e42bad62eadc914620d2f96 Mon Sep 17 00:00:00 2001
From: Eason92k <148435996+Eason92k@users.noreply.github.com>
Date: Wed, 18 Mar 2026 11:13:38 +0800
Subject: [PATCH 07/10] Update README.md

---
 README.md | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 7ac5a71..4be14d5 100644
--- a/README.md
+++ b/README.md
@@ -37,7 +37,14 @@ git checkout main
 ```
 
 **思考：dark-mode 分支修改了哪些檔案的哪些地方？**
-
+1.index.html:
+  在 header 區塊中新增了一個按鈕，點擊時會觸發 body 的 dark class 切換
+2.style.css:
+  按鈕樣式 (.dark-toggle)：設定了切換按鈕的外觀（透明背景、白色文字、圓角等）。
+  深色色彩定義 (body.dark)：
+    將背景改為深灰色 (#1e1e2e)。
+    調整對話框容器 (.container) 和標題列 (header) 的底色。
+    修改 Bot 訊息與輸入框的顏色，使其在深色背景下易於閱讀。
 ---
 
 ## 練習二：Merge feature 分支

From abe8ea431d42b0bcd97ed559e95b021f27b4a811 Mon Sep 17 00:00:00 2001
From: cupid00772 <cupid00772@gmail.com>
Date: Wed, 18 Mar 2026 11:13:46 +0800
Subject: [PATCH 08/10] Update style.css

---
 style.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/style.css b/style.css
index 44705da..8e9e542 100644
--- a/style.css
+++ b/style.css
@@ -16,7 +16,7 @@ body {
 }
 
 .container {
-  background: #fffbf5;
+  background: #58f8eb; /* 解決衝突：採用藍綠色 */
   border-radius: 16px;
   box-shadow: 0 4px 20px rgba(139, 109, 82, 0.12);
   width: 480px;

From 96f7fd1389b428a474c1b640367918b4f6f1e4de Mon Sep 17 00:00:00 2001
From: Eason92k <148435996+Eason92k@users.noreply.github.com>
Date: Wed, 18 Mar 2026 11:14:18 +0800
Subject: [PATCH 09/10] Update README.md

---
 README.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index 4be14d5..e05480d 100644
--- a/README.md
+++ b/README.md
@@ -37,14 +37,14 @@ git checkout main
 ```
 
 **思考：dark-mode 分支修改了哪些檔案的哪些地方？**
-1.index.html:
-  在 header 區塊中新增了一個按鈕，點擊時會觸發 body 的 dark class 切換
-2.style.css:
+**1.index.html:
+  在 header 區塊中新增了一個按鈕，點擊時會觸發 body 的 dark class 切換**
+**2.style.css:
   按鈕樣式 (.dark-toggle)：設定了切換按鈕的外觀（透明背景、白色文字、圓角等）。
   深色色彩定義 (body.dark)：
     將背景改為深灰色 (#1e1e2e)。
     調整對話框容器 (.container) 和標題列 (header) 的底色。
-    修改 Bot 訊息與輸入框的顏色，使其在深色背景下易於閱讀。
+    修改 Bot 訊息與輸入框的顏色，使其在深色背景下易於閱讀。**
 ---
 
 ## 練習二：Merge feature 分支

From f73917c1e817f6c86704d83fc04015c3f74701ec Mon Sep 17 00:00:00 2001
From: cupid00772 <cupid00772@gmail.com>
Date: Wed, 25 Mar 2026 11:15:03 +0800
Subject: [PATCH 10/10] feat: implement quick replies and clear chat

---
 index.html | 24 ++++++++++++++++++++++++
 style.css  | 42 ++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 66 insertions(+)

diff --git a/index.html b/index.html
index 230d791..fb18f0c 100644
--- a/index.html
+++ b/index.html
@@ -36,6 +36,12 @@ <h1>練習用 Chatbot</h1>
       </div>
     </div>
 
+    <div class="quick-replies">
+      <button class="qr-btn" onclick="sendQuickReply('我想學 Git')">我想學 Git</button>
+      <button class="qr-btn" onclick="sendQuickReply('你是誰？')">你是誰？</button>
+      <button class="qr-btn clear-btn" onclick="clearChat()">清除對話</button>
+    </div>
+
     <div class="input-area">
       <input id="user-input" type="text" placeholder="輸入訊息..." autocomplete="off">
       <button id="send-btn" onclick="sendMessage()">
@@ -48,6 +54,24 @@ <h1>練習用 Chatbot</h1>
   </div>
 
   <script>
+    function sendQuickReply(text) {
+      document.getElementById('user-input').value = text;
+      sendMessage();
+    }
+
+    function clearChat() {
+      const chatBox = document.getElementById('chat-box');
+      chatBox.innerHTML = `
+        <div class="message bot fade-in">
+          <div class="msg-avatar">🤖</div>
+          <div class="msg-bubble">
+            對話紀錄已清除！有什麼我可以幫忙的嗎？
+            <span class="msg-time">${getTimeStr()}</span>
+          </div>
+        </div>
+      `;
+    }
+
     function getTimeStr() {
       const now = new Date();
       return now.getHours().toString().padStart(2, '0') + ':' + now.getMinutes().toString().padStart(2, '0');
diff --git a/style.css b/style.css
index 0b3241a..d874639 100644
--- a/style.css
+++ b/style.css
@@ -292,6 +292,44 @@ header {
   transform: scale(0.95);
 }
 
+/* ===== 快速回覆 ===== */
+.quick-replies {
+  display: flex;
+  gap: 8px;
+  padding: 0 16px 10px;
+  overflow-x: auto;
+}
+
+.quick-replies::-webkit-scrollbar {
+  display: none;
+}
+
+.qr-btn {
+  background: var(--input-bg);
+  border: 1px solid var(--input-border);
+  border-radius: 16px;
+  padding: 6px 12px;
+  font-size: 13px;
+  color: var(--bot-text);
+  cursor: pointer;
+  white-space: nowrap;
+  transition: var(--transition);
+}
+
+.qr-btn:hover {
+  background: rgba(102, 126, 234, 0.1);
+  border-color: var(--input-focus);
+}
+
+.qr-btn.clear-btn {
+  color: #e53e3e;
+  border-color: #fc8181;
+}
+
+.qr-btn.clear-btn:hover {
+  background: rgba(229, 62, 62, 0.1);
+}
+
 /* ===========================
    深色模式
    =========================== */
@@ -322,3 +360,7 @@ body.dark .msg-avatar {
 body.dark .dark-toggle {
   background: rgba(255, 255, 255, 0.08);
 }
+
+body.dark .qr-btn.clear-btn {
+  color: #fc8181;
+}