修改移动端界面效果、修改左右区域切换逻辑

css/max_width.css

@@ -3,35 +3,32 @@
         flex-direction: column;
     }
 
-    .left-panel, .right-panel {
+    #fullscreen-button {
+        padding-right: 10px;
+        padding-top: 10px;
+    }
+
+    .left-panel {
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .right-panel {
         width: 100%;
         display: none;
+        justify-content: center;
+        align-items: center;
     }
 
-    .chat-container {
-        bottom: 0;
-    }
-
-    footer {
-        padding-bottom: 60px;
-    }
-
-    .mobile-toggle {
-        display: block;
-    }
-
-    .mobile-toggle button {
-        margin: 0 5px;
-        padding: 8px 16px;
-        font-size: 14px;
-        border: none;
-        background-color: #007BFF;
-        color: white;
-        border-radius: 4px;
-        cursor: pointer;
-    }
-
-    .mobile-toggle button:hover {
-        background-color: #0056b3;
-    }
+    .switch_button {
+        position: fixed;
+        left: 50%;
+        right: auto;
+        transform: translateX(-50%);
+        bottom: 120px;
+        z-index: 1;
+      }
+      
 }

index.html

@@ -20,7 +20,7 @@
 
     <div class="main-layout">
         <!-- 左侧内容 -->
-        <div class="left-panel">
+        <div class="left-panel" id="leftPanel">
             <h1 class="logo">DreamLife</h1>
             <div class="intro">
                 <h3>这是我的网站首页，主页代码正在完善中</h3>
@@ -36,7 +36,7 @@
         </div>
 
         <!-- 右侧内容 -->
-        <div class="right-panel">
+        <div class="right-panel" id="rightPanel">
             <div class="tool-card">
                 <div class="datetime">
                     <div id="timeDisplay" class="time">--:--:--</div>
@@ -50,9 +50,8 @@
     </div>
 
     <!-- 移动端切换按钮 -->
-    <div class="mobile-toggle">
-        <button onclick="showLeft()">显示左侧</button>
-        <button onclick="showRight()">显示右侧</button>
+    <div class="switch_button">
+        <button onclick="hideLeftPanel()">显示左侧</button>
     </div>
 
     <!-- DeepSeek 聊天输入 -->
@@ -77,6 +76,7 @@
     <script src="javascape/marked.min.js"></script>
     <script src="javascape/purify.min.js"></script>
     <script src="javascape/full_button.js"></script>
+    <script src="javascape/switch_interface.js"></script>
 
 </body>
 </html>

javascape/switch_interface.js

@@ -0,0 +1,13 @@
+const Panel_left = document.getElementById('leftPanel');
+const Panel_right = document.getElementById('rightPanel');
+
+function hideLeftPanel() {
+    if (Panel_right.style.display === 'none' || Panel_right.style.display === '') {
+        Panel_left.style.display = 'none';
+        Panel_right.style.display = 'flex';
+      } 
+    else {
+        Panel_left.style.display = 'flex';
+        Panel_right.style.display = 'none';
+    }
+}