修改切换按钮样式并添加基础动效

css/max_width.css

@@ -29,6 +29,17 @@
         transform: translateX(-50%);
         bottom: 120px;
         z-index: 1;
-      }
+    }
 
+    .swbutton {
+        background-color: rgba(200, 200, 200, 0.1);
+        backdrop-filter: blur(8px);
+        -webkit-backdrop-filter: blur(8px);
+        transition: background-color 1s ease, transform 0.5s ease;
+    }
+    
+    .swbutton:hover {
+        background-color: rgba(200, 200, 200, 0.3);
+        transform: scale(1.02);  /* 可选的小缩放效果 */
+    }
 }

index.html

@@ -37,11 +37,9 @@
 
         <!-- 右侧内容 -->
         <div class="right-panel" id="rightPanel">
-            <div class="tool-card">
+            <div class="datetime">
-                <div class="datetime">
+                <div id="timeDisplay" class="time">--:--:--</div>
-                    <div id="timeDisplay" class="time">--:--:--</div>
+                <div id="dateDisplay" class="date">加载中...</div>
-                    <div id="dateDisplay" class="date">加载中...</div>
-                </div>
             </div>
             <div class="future-content">
                 <p>此处预留未来内容</p>
@@ -51,7 +49,7 @@
 
     <!-- 移动端切换按钮 -->
     <div class="switch_button">
-        <button onclick="hideLeftPanel()">显示左侧</button>
+        <button onclick="switchPanel()" class="swbutton">Switch</button>
     </div>
 
     <!-- DeepSeek 聊天输入 -->

javascape/switch_interface.js

@@ -1,11 +1,11 @@
 const Panel_left = document.getElementById('leftPanel');
 const Panel_right = document.getElementById('rightPanel');
 
-function hideLeftPanel() {
+function switchPanel() {
     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';