统一样式

01_文档/原型设计/01_入口页面.html

@@ -8,6 +8,32 @@
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
     
+    <!-- 引入统一样式文件 -->
+    <link rel="stylesheet" href="common-styles.css">
+    
+    <style>
+        /* 页面特有的样式补充 */
+        .main-content {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            padding: var(--safe-area-padding);
+            justify-content: center;
+            align-items: center;
+            text-align: center;
+            position: relative;
+        }
+
+        .game-modes {
+            width: 100%;
+            max-width: 350px;
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+        }
+    </style>
+    
+    <!-- 保留原有的所有样式定义 -->
     <style>
         /* 设计变量 */
         :root {
@@ -687,6 +713,9 @@
         </main>
     </div>
 
+    <!-- 引入导航功能 -->
+    <script src="navigation.js"></script>
+
     <script>
         // 创建动态星空背景
         function createStarField() {
@@ -716,37 +745,25 @@
             });
         }
 
-        // 游戏模式按钮点击事件
+        // 游戏模式按钮点击事件 - 使用导航功能
         document.getElementById('quickStart').addEventListener('click', () => {
             console.log('快速开始 - 和AI对战');
-            if ('vibrate' in navigator) {
-                navigator.vibrate(15);
-            }
-            // 这里可以添加跳转到AI对战页面的逻辑
+            handleGameModeSelection('quickStart');
         });
 
         document.getElementById('onlineMatch').addEventListener('click', () => {
             console.log('自动匹配 - 在线匹配对战');
-            if ('vibrate' in navigator) {
-                navigator.vibrate(15);
-            }
-            // 这里可以添加跳转到匹配页面的逻辑
+            handleGameModeSelection('onlineMatch');
         });
 
         document.getElementById('createRoom').addEventListener('click', () => {
             console.log('创建房间');
-            if ('vibrate' in navigator) {
-                navigator.vibrate(10);
-            }
-            // 这里可以添加跳转到创建房间页面的逻辑
+            handleGameModeSelection('createRoom');
         });
 
         document.getElementById('joinGame').addEventListener('click', () => {
             console.log('加入游戏');
-            if ('vibrate' in navigator) {
-                navigator.vibrate(10);
-            }
-            // 这里可以添加跳转到加入游戏页面的逻辑
+            handleGameModeSelection('joinGame');
         });
 
         // 设置按钮点击事件