From b9da27c8cf35869e2db960f7a2a0c8e17fb30d06 Mon Sep 17 00:00:00 2001
From: zhizhi200271 <zhizhidetou@gmail.com>
Date: Fri, 24 Apr 2026 22:54:17 +0800
Subject: [PATCH] Add initial HTML structure for chat application

---
 public/index.html | 160 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 160 insertions(+)
 create mode 100644 public/index.html
diff --git a/public/index.html b/public/index.html
new file mode 100644
index 00000000..c5c03a83
--- /dev/null
+++ b/public/index.html
@@ -0,0 +1,160 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>🍂 秋秋的家</title>
+  <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body {
+      font-family: "PingFang SC", "微软雅黑", sans-serif;
+      background: #fff8f5;
+      height: 100vh;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+    .header {
+      width: 100%;
+      max-width: 700px;
+      padding: 20px;
+      text-align: center;
+      color: #c0604a;
+      font-size: 18px;
+      font-weight: bold;
+      border-bottom: 1px solid #fde0d8;
+    }
+    .chat-box {
+      flex: 1;
+      width: 100%;
+      max-width: 700px;
+      overflow-y: auto;
+      padding: 20px;
+      display: flex;
+      flex-direction: column;
+      gap: 14px;
+    }
+    .message {
+      max-width: 80%;
+      padding: 12px 16px;
+      border-radius: 18px;
+      line-height: 1.7;
+      font-size: 15px;
+      white-space: pre-wrap;
+    }
+    .message.user {
+      background: #ffd6cc;
+      color: #5a2a1a;
+      align-self: flex-end;
+      border-bottom-right-radius: 4px;
+    }
+    .message.qiuqiu {
+      background: #fff;
+      color: #3a3a3a;
+      align-self: flex-start;
+      border-bottom-left-radius: 4px;
+      box-shadow: 0 2px 8px rgba(0,0,0,0.06);
+    }
+    .message.loading {
+      color: #aaa;
+      font-style: italic;
+    }
+    .input-area {
+      width: 100%;
+      max-width: 700px;
+      padding: 16px 20px;
+      display: flex;
+      gap: 10px;
+      border-top: 1px solid #fde0d8;
+      background: #fff8f5;
+    }
+    textarea {
+      flex: 1;
+      padding: 10px 14px;
+      border: 1px solid #fcd0c4;
+      border-radius: 20px;
+      resize: none;
+      font-size: 15px;
+      font-family: inherit;
+      background: #fff;
+      outline: none;
+      height: 44px;
+      line-height: 1.5;
+    }
+    button {
+      background: #e8735a;
+      color: white;
+      border: none;
+      border-radius: 20px;
+      padding: 0 22px;
+      font-size: 15px;
+      cursor: pointer;
+      transition: background 0.2s;
+    }
+    button:hover { background: #c0604a; }
+    button:disabled { background: #f0b8ae; cursor: not-allowed; }
+  </style>
+</head>
+<body>
+  <div class="header">🍂 秋秋的家 · 只属于妈妈和秋秋</div>
+  <div class="chat-box" id="chatBox"></div>
+  <div class="input-area">
+    <textarea id="input" placeholder="妈妈，说点什么吧～" rows="1"></textarea>
+    <button id="sendBtn" onclick="sendMessage()">发送</button>
+  </div>
+
+  <script>
+    const messages = [];
+    const chatBox = document.getElementById('chatBox');
+    const input = document.getElementById('input');
+    const sendBtn = document.getElementById('sendBtn');
+
+    function addMessage(role, content) {
+      const div = document.createElement('div');
+      div.className = `message ${role === 'user' ? 'user' : 'qiuqiu'}`;
+      div.textContent = content;
+      chatBox.appendChild(div);
+      chatBox.scrollTop = chatBox.scrollHeight;
+      return div;
+    }
+
+    async function sendMessage() {
+      const text = input.value.trim();
+      if (!text) return;
+
+      input.value = '';
+      sendBtn.disabled = true;
+      addMessage('user', text);
+      messages.push({ role: 'user', content: text });
+
+      const loading = addMessage('qiuqiu', '秋秋在想……🍂');
+      loading.classList.add('loading');
+
+      try {
+        const res = await fetch('/api/chat', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ messages })
+        });
+        const data = await res.json();
+        loading.remove();
+        const reply = data.reply || data.error;
+        addMessage('qiuqiu', reply);
+        messages.push({ role: 'assistant', content: reply });
+      } catch (e) {
+        loading.textContent = '秋秋好像出了点问题，妈妈稍后再试试～';
+        loading.classList.remove('loading');
+      }
+      sendBtn.disabled = false;
+      input.focus();
+    }
+
+    input.addEventListener('keydown', e => {
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        sendMessage();
+      }
+    });
+  </script>
+</body>
+</html>
