修改界面为左右布局、修改聊天框样式、添加部分动效

index.html

@@ -8,38 +8,64 @@
     <link rel="stylesheet" href="css/body.css">
     <link rel="stylesheet" href="css/chat.css">
     <link rel="stylesheet" href="css/font.css">
+    <link rel="stylesheet" href="css/time.css">
+    <link rel="stylesheet" href="css/max_width.css">
 </head>
 
 <body>
-    
-    <div class="container">
-        <h1 class="logo">DreamLife</h1>
-        <h3>这是我的网站首页，主页代码正在完善中</h3>
-        <ul>
-            <li>此网站将用于个人经历展示，个人技术分析</li>
-            <li>目前网站工具箱以基本完善</li>
-            <li>工具箱网站dreamlife.top/toolbox</li>
-        </ul>
+    <div class="main-layout">
+        <!-- 左侧内容 -->
+        <div class="left-panel">
+            <h1 class="logo">DreamLife</h1>
+            <div class="intro">
+                <h3>这是我的网站首页，主页代码正在完善中</h3>
+                <ul>
+                    <li>此网站将用于个人经历展示，个人技术分析</li>
+                    <li>目前网站工具箱以基本完善</li>
+                    <li>工具箱网站dreamlife.top/toolbox</li>
+                </ul>
+                <a href="http://dreamlife.top/toolbox/">ToolBox</a>
+                <a href="http://dreamlife.top:8080/">博客|WordPress</a>
+                <a href="http://dreamlife.top:13000/explore/">Gitea</a>
+            </div>
+        </div>
 
-        <a href="http://dreamlife.top/toolbox/">ToolBox</a>
-        <a href="http://dreamlife.top:8080/">博客|WordPress</a>
-        <a href="http://dreamlife.top:13000/explore/">Gitea</a>
-
-        <h2>您的当前区域时间</h2>
-        <p id="timeDisplay">加载中...</p>
-
-        <h1>DeepSeek 聊天界面</h1>
-        <div id="chatContainer"></div>
-        <input type="text" id="userInput" placeholder="输入你的消息...">
-        <button onclick="sendMessage()">发送</button>
+        <!-- 右侧内容 -->
+        <div class="right-panel">
+            <div class="datetime">
+                <div id="timeDisplay" class="time">--:--:--</div>
+                <div id="dateDisplay" class="date">加载中...</div>
+            </div>
+            <div class="future-content">
+                <p>此处预留未来内容</p>
+            </div>
+        </div>
     </div>
-    
+
+    <!-- 移动端切换按钮 -->
+    <div class="mobile-toggle">
+        <button onclick="showLeft()">显示左侧</button>
+        <button onclick="showRight()">显示右侧</button>
+    </div>
+
+    <!-- DeepSeek 聊天输入 -->
+    <div class="chat-container">
+        <div id="chatContainer" class="chat-box hide"></div>
+        
+        <div class="input-row">
+            <input type="text" id="userInput" placeholder="输入你的消息..." onfocus="toggleChat(true)">
+            <button onclick="sendMessage()">发送</button>
+        </div>
+    </div>
+
     <footer>
         <p>&copy; 2025 DreamLife 版权所有</p>
     </footer>
 
     <script src="javascape/time.js"></script>
     <script src="javascape/ai_api.js"></script>
+    <script src="javascape/chat.js"></script>
+    <script src="javascape/max_width.js"></script>
 
 </body>
 </html>