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/README.md b/README.md index 7ac5a71..e05480d 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 分支 diff --git a/index.html b/index.html index 756d0f2..fb18f0c 100644 --- a/index.html +++ b/index.html @@ -1,33 +1,82 @@ + + W4 練習 Chatbot + + +
-

🤖 練習用 Chatbot

- -

W4 Git Branch 練習

+
+
🤖
+
+

練習用 Chatbot

+

第十組

+
+
+
-
- 嗨！我是練習用的 Chatbot，今天我們要學 Git Branch 🌿 +
+
🤖
+
+ 嗨！我是練習用的 Chatbot，今天我們要學 Git Branch 🌿 + 剛才 +
+
+ + + +
+
- - - + +
- + + \ No newline at end of file diff --git a/style.css b/style.css index e420ff3..d874639 100644 --- a/style.css +++ b/style.css @@ -1,104 +1,366 @@ /* ============================ - 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: #f0f4f8; + 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: white; + background: #58f8eb; /* 解決衝突：採用藍綠色 */ 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; + display: flex; + flex-direction: column; + transition: var(--transition); } +/* ===== Header ===== */ header { - /* 練習：把標題列顏色從藍色改成其他顏色 */ - background: #4f8ef7; + background: var(--header-bg); color: white; - padding: 20px 24px; + padding: 18px 20px; + display: flex; + align-items: center; + justify-content: space-between; +} + +.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; } -header h1 { font-size: 20px; } -header .subtitle { font-size: 13px; opacity: 0.85; margin-top: 4px; } +@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: #f0f4f8; - color: #333; - 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: #4caf87; - color: white; - 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 #eee; + 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 #ddd; - 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: var(--input-bg); + color: var(--bot-text); + transition: var(--transition); } .input-area input:focus { - border-color: #4f8ef7; + border-color: var(--input-focus); + box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15); } -.input-area button { - /* 練習：把按鈕顏色改成你喜歡的顏色 - conflict-a 分支：改成 #4f8ef7（藍色） - conflict-b 分支：改成 #e84393（粉色） */ - background: #4f8ef7; +#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 { - opacity: 0.85; +#send-btn:hover { + transform: scale(1.08); + box-shadow: 0 4px 14px rgba(102, 126, 234, 0.4); +} + +#send-btn:active { + 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); +} + +/* =========================== + 深色模式 + =========================== */ +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 #chat-box::-webkit-scrollbar-thumb { + background: #555; +} + +body.dark .msg-avatar { + background: #333358; +} + +body.dark .dark-toggle { + background: rgba(255, 255, 255, 0.08); +} + +body.dark .qr-btn.clear-btn { + color: #fc8181; }