统一样式

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) {
+            handleGameModeSelection('quickStart');
-                navigator.vibrate(15);
-            }
-            // 这里可以添加跳转到AI对战页面的逻辑
         });
 
         document.getElementById('onlineMatch').addEventListener('click', () => {
             console.log('自动匹配 - 在线匹配对战');
-            if ('vibrate' in navigator) {
+            handleGameModeSelection('onlineMatch');
-                navigator.vibrate(15);
-            }
-            // 这里可以添加跳转到匹配页面的逻辑
         });
 
         document.getElementById('createRoom').addEventListener('click', () => {
             console.log('创建房间');
-            if ('vibrate' in navigator) {
+            handleGameModeSelection('createRoom');
-                navigator.vibrate(10);
-            }
-            // 这里可以添加跳转到创建房间页面的逻辑
         });
 
         document.getElementById('joinGame').addEventListener('click', () => {
             console.log('加入游戏');
-            if ('vibrate' in navigator) {
+            handleGameModeSelection('joinGame');
-                navigator.vibrate(10);
-            }
-            // 这里可以添加跳转到加入游戏页面的逻辑
         });
 
         // 设置按钮点击事件

01_文档/原型设计/02_房间等待[房主].html

@@ -4,6 +4,13 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
     <title>房间等待 - 打飞机对战</title>
+    
+    <!-- 引入通用样式 -->
+    <link rel="stylesheet" href="common-styles.css">
+    
+    <!-- 引入导航功能 -->
+    <script src="navigation.js"></script>
+    
     <style>
         /* 基础CSS变量 */
         :root {
@@ -434,7 +441,12 @@
             console.log('返回上一页');
             // 添加触觉反馈
             vibrate();
-            // 实际项目中这里应该调用路由返回或页面跳转
+            // 使用导航功能返回入口页面
+            if (typeof navigateTo === 'function') {
+                navigateTo('entry');
+            } else {
+                window.location.href = '01_入口页面.html';
+            }
         }
 
 
@@ -456,8 +468,15 @@
             vibrate();
             
             // 检查是否所有玩家都准备
-            alert('游戏即将开始...');
+            showToast('游戏即将开始...');
-            // 实际项目中这里应该跳转到游戏页面
+            // 跳转到准备页面
+            setTimeout(() => {
+                if (typeof navigateTo === 'function') {
+                    navigateTo('preparation');
+                } else {
+                    window.location.href = '04_准备页面.html';
+                }
+            }, 1000);
         }
 
         // 分享房间码

01_文档/原型设计/03_加入房间列表.html

@@ -4,77 +4,12 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
     <title>加入房间 - 打飞机对战</title>
+    
+    <!-- 引入通用样式 -->
+    <link rel="stylesheet" href="common-styles.css">
+    
     <style>
-        /* 基础CSS变量 */
+        /* 加入房间列表页面特定样式 */
-        :root {
-            /* 主色调 - 深空科技蓝 */
-            --primary-color: #6366f1;
-            --primary-light: #8b5cf6;
-            --primary-dark: #4f46e5;
-            
-            /* 辅助色 - 科技青色 */
-            --secondary-color: #40e0d0;
-            --secondary-light: #26d0ce;
-            
-            /* 强调色 - 橙色 */
-            --accent-color: #f59e0b;
-            --accent-light: #fbbf24;
-            
-            /* 危险色 - 红色 */
-            --danger-color: #ff4757;
-            --danger-light: #ff6b6b;
-            
-            /* 成功色 - 绿色 */
-            --success-color: #4ade80;
-            --success-light: #6ee7b7;
-            
-            /* 背景色系 - 深色渐变 */
-            --bg-primary: #0f1419;
-            --bg-secondary: #1a1d29;
-            --bg-tertiary: #252837;
-            --bg-elevated: #2d3142;
-            
-            /* 渐变背景 */
-            --gradient-bg: linear-gradient(135deg, #0f0f1a 0%, #1a1a2e 30%, #16213e 70%, #0f3460 100%);
-            
-            /* 边框色系 */
-            --border-primary: #3d4159;
-            --border-secondary: #4a5073;
-            --border-highlight: #6366f1;
-            --border-accent: rgba(64, 224, 208, 0.3);
-            
-            /* 文字色系 */
-            --text-primary: #ffffff;
-            --text-secondary: #b4b7c9;
-            --text-tertiary: #9ca3af;
-            --text-disabled: #6b7280;
-            
-            /* 触摸目标尺寸 */
-            --touch-target-min: 44px;
-            --safe-area-padding: 20px;
-        }
-
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-            -webkit-tap-highlight-color: transparent;
-            -webkit-touch-callout: none;
-        }
-
-        body {
-            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Microsoft YaHei UI", sans-serif;
-            background: var(--gradient-bg);
-            color: var(--text-primary);
-            min-height: 100vh;
-            display: flex;
-            flex-direction: column;
-            overflow-x: hidden;
-            touch-action: manipulation;
-            -webkit-user-select: none;
-            user-select: none;
-        }
-
         .safe-area {
             padding-left: env(safe-area-inset-left);
             padding-right: env(safe-area-inset-right);
@@ -82,51 +17,6 @@
             padding-bottom: env(safe-area-inset-bottom);
         }
 
-        .app-container {
-            flex: 1;
-            display: flex;
-            flex-direction: column;
-            padding: var(--safe-area-padding);
-            max-width: 400px;
-            margin: 0 auto;
-            width: 100%;
-        }
-
-        /* 头部导航 */
-        .header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 16px 0;
-            margin-bottom: 20px;
-        }
-
-        .back-btn {
-            width: 40px;
-            height: 40px;
-            border: none;
-            background: rgba(99, 102, 241, 0.15);
-            border-radius: 12px;
-            color: var(--primary-color);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            font-size: 18px;
-        }
-
-        .back-btn:active {
-            transform: scale(0.95);
-            background: rgba(99, 102, 241, 0.25);
-        }
-
-        .page-title {
-            font-size: 20px;
-            font-weight: 600;
-            color: var(--text-primary);
-        }
-
         .placeholder {
             width: 40px;
         }
@@ -478,6 +368,9 @@
         </section>
     </div>
 
+    <!-- 引入导航功能 -->
+    <script src="navigation.js"></script>
+
     <script>
         // 房间数据模拟
         const mockRooms = [
@@ -506,8 +399,17 @@
         // 返回上一页
         function goBack() {
             console.log('返回上一页');
-            vibrate();
+            if (typeof window.vibrate === 'function') {
-            // 实际项目中这里应该调用路由返回
+                window.vibrate();
+            } else {
+                vibrate();
+            }
+            // 使用导航功能返回入口页面
+            if (typeof navigateTo === 'function') {
+                navigateTo('entry');
+            } else {
+                window.location.href = '01_入口页面.html';
+            }
         }
 
         // 搜索房间
@@ -525,7 +427,11 @@
             }
             
             console.log('搜索房间:', roomNumber);
-            vibrate();
+            if (typeof window.vibrate === 'function') {
+                window.vibrate();
+            } else {
+                vibrate();
+            }
             showLoading();
             
             // 模拟搜索延迟
@@ -543,16 +449,23 @@
         // 加入房间
         function joinRoom(roomId) {
             console.log('加入房间:', roomId);
-            vibrate();
+            if (typeof window.vibrate === 'function') {
-            
+                window.vibrate();
-            if (confirm('确定要加入房间 ' + roomId + ' 吗？')) {
+            } else {
-                showToast('正在加入房间...');
+                vibrate();
-                // 实际项目中这里应该调用加入房间的API
-                setTimeout(() => {
-                    showToast('加入成功！');
-                    // 跳转到房间等待页面
-                }, 1500);
             }
+            
+            showToast('正在加入房间...');
+            // 实际项目中这里应该调用加入房间的API
+            setTimeout(() => {
+                showToast('加入成功！');
+                // 跳转到房间等待页面
+                if (typeof navigateTo === 'function') {
+                    navigateTo('roomWaiting');
+                } else {
+                    window.location.href = '02_房间等待[房主].html';
+                }
+            }, 1500);
         }
 
         // 观战房间

01_文档/原型设计/04_准备页面.html

@@ -8,7 +8,14 @@
     <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">
+    
+    <!-- 引入导航功能 -->
+    <script src="navigation.js"></script>
+    
     <style>
+        /* 页面特定样式 - 覆盖通用样式中的部分设置 */
         :root {
             --primary-color: #6366f1;
             --primary-light: #8b5cf6;
@@ -495,12 +502,19 @@
 
             completePlacement() {
                 if(this.planes.every(p => p.isPlaced)) {
-                    this.updateStatus("准备就绪，等待对手...");
+                    this.updateStatus("准备就绪，正在进入对战...");
                     localStorage.setItem('playerPlanes', JSON.stringify(this.planes));
-                    // 禁用所有按钮
+                    
-                    Object.values(this.dom).flat().forEach(el => {
+                    // 延迟1秒后跳转到对战页面
-                        if(el.tagName === 'BUTTON') el.disabled = true;
+                    setTimeout(() => {
-                    });
+                        if (typeof window.completePlacementAndNavigate === 'function') {
+                            window.completePlacementAndNavigate();
+                        } else if (typeof navigateTo === 'function') {
+                            navigateTo('battle');
+                        } else {
+                            window.location.href = '05_对战页面.html';
+                        }
+                    }, 1000);
                 } else {
                     this.updateStatus("请先放置所有飞机。");
                 }

01_文档/原型设计/05_对战页面.html

@@ -8,73 +8,13 @@
     <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>
+        /* 页面特定CSS变量 */
         :root {
-            /* 色彩系统 */
-            --primary-color: #6366f1;
-            --primary-light: #8b5cf6;
-            --primary-dark: #4f46e5;
-            --secondary-color: #40e0d0;
-            --secondary-light: #26d0ce;
-            --accent-color: #f59e0b;
-            --accent-light: #fbbf24;
-            --danger-color: #ff4757;
-            --danger-light: #ff6b6b;
-            --success-color: #10b981;
-            
-            /* 背景色系 */
-            --bg-primary: #0f1419;
-            --bg-secondary: #1a1d29;
-            --bg-tertiary: #252837;
-            --bg-elevated: #2d3142;
-            --gradient-bg: linear-gradient(135deg, #0f0f1a 0%, #1a1a2e 30%, #16213e 70%, #0f3460 100%);
-            
-            /* 边框色系 */
-            --border-primary: #3d4159;
-            --border-secondary: #4a5073;
-            --border-highlight: #6366f1;
-            --border-accent: rgba(64, 224, 208, 0.3);
-            
-            /* 文字色系 */
-            --text-primary: #ffffff;
-            --text-secondary: #b4b7c9;
-            --text-tertiary: #9ca3af;
-            --text-disabled: #6b7280;
-            
-            /* 移动端适配 */
             --cell-size: min(8.5vw, 36px);
-            --safe-area-padding: 16px;
-            --touch-target-min: 44px;
-        }
-
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-            -webkit-user-select: none;
-            -webkit-touch-callout: none;
-            -webkit-tap-highlight-color: transparent;
-        }
-
-        html, body {
-            height: 100%;
-            overflow: hidden;
-            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Microsoft YaHei UI", sans-serif;
-        }
-
-        body {
-            background: var(--gradient-bg);
-            color: var(--text-primary);
-            -webkit-font-smoothing: antialiased;
-            touch-action: manipulation;
-            padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
-        }
-
-        .app-container {
-            display: flex;
-            flex-direction: column;
-            height: 100%;
-            position: relative;
         }
 
         /* 顶部状态栏 */
@@ -380,73 +320,7 @@
             gap: 4px;
         }
 
-        /* 按钮样式 */
+        /* 页面特定按钮样式覆盖 */
-        .btn {
-            min-height: var(--touch-target-min);
-            border: none;
-            border-radius: 8px;
-            font-size: 14px;
-            font-weight: 600;
-            cursor: pointer;
-            padding: 10px 16px;
-            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 6px;
-            user-select: none;
-            position: relative;
-            overflow: hidden;
-        }
-
-        .btn-primary {
-            background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
-            color: #ffffff;
-            box-shadow: 0 4px 16px rgba(99, 102, 241, 0.3);
-        }
-
-        .btn-primary:active {
-            transform: translateY(1px);
-            box-shadow: 0 2px 8px rgba(99, 102, 241, 0.4);
-        }
-
-        .btn-success {
-            background: linear-gradient(135deg, var(--secondary-color), var(--secondary-light));
-            color: #1a1a2e;
-            box-shadow: 0 4px 16px rgba(64, 224, 208, 0.3);
-        }
-
-        .btn-danger {
-            background: linear-gradient(135deg, var(--danger-color), var(--danger-light));
-            color: white;
-            box-shadow: 0 4px 16px rgba(255, 71, 87, 0.3);
-        }
-
-        .btn-secondary {
-            background: rgba(99, 102, 241, 0.15);
-            color: var(--primary-color);
-            border: 1px solid var(--primary-color);
-            backdrop-filter: blur(10px);
-        }
-
-        .btn-secondary:active {
-            background: rgba(99, 102, 241, 0.25);
-            transform: translateY(1px);
-        }
-
-        .btn:disabled {
-            background: var(--bg-tertiary) !important;
-            color: var(--text-disabled) !important;
-            border: 1px solid var(--border-primary) !important;
-            opacity: 0.6;
-            cursor: not-allowed;
-            box-shadow: none !important;
-        }
-
-        .btn:disabled:active {
-            transform: none !important;
-        }
-
         .plane-btn.placed {
             background: var(--primary-color) !important;
             color: white;

01_文档/原型设计/common-styles.css

@@ -0,0 +1,755 @@
+/* 打飞机对战小程序 - 统一样式表 */
+/* 从所有原型页面提取的通用样式 */
+
+/* ========== CSS变量定义 ========== */
+:root {
+    /* 主色调 - 深空科技蓝 */
+    --primary-color: #6366f1;
+    --primary-light: #8b5cf6;
+    --primary-dark: #4f46e5;
+    
+    /* 辅助色 - 科技青色 */
+    --secondary-color: #40e0d0;
+    --secondary-light: #26d0ce;
+    
+    /* 强调色 - 橙色 */
+    --accent-color: #f59e0b;
+    --accent-light: #fbbf24;
+    
+    /* 危险色 - 红色 */
+    --danger-color: #ff4757;
+    --danger-light: #ff6b6b;
+    
+    /* 成功色 - 绿色 */
+    --success-color: #10b981;
+    --success-light: #4ade80;
+    
+    /* 背景色系 - 深色渐变 */
+    --bg-primary: #0f1419;
+    --bg-secondary: #1a1d29;
+    --bg-tertiary: #252837;
+    --bg-elevated: #2d3142;
+    
+    /* 渐变背景 */
+    --gradient-bg: linear-gradient(135deg, #0f0f1a 0%, #1a1a2e 30%, #16213e 70%, #0f3460 100%);
+    
+    /* 边框色系 */
+    --border-primary: #3d4159;
+    --border-secondary: #4a5073;
+    --border-highlight: #6366f1;
+    --border-accent: rgba(64, 224, 208, 0.3);
+    
+    /* 文字色系 */
+    --text-primary: #ffffff;
+    --text-secondary: #b4b7c9;
+    --text-tertiary: #9ca3af;
+    --text-disabled: #6b7280;
+    
+    /* 移动端触摸区域尺寸 */
+    --touch-target-min: 44px;
+    --safe-area-padding: 20px;
+    --cell-size: min(8.5vw, 38px);
+}
+
+/* ========== 基础重置样式 ========== */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    -webkit-user-select: none;
+    -webkit-touch-callout: none;
+    -webkit-tap-highlight-color: transparent;
+}
+
+html, body {
+    height: 100%;
+    overflow-x: hidden;
+    -webkit-text-size-adjust: 100%;
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Microsoft YaHei UI", sans-serif;
+    background: var(--gradient-bg);
+    color: var(--text-primary);
+    line-height: 1.6;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    touch-action: manipulation;
+    user-select: none;
+}
+
+/* ========== 安全区域适配 ========== */
+.safe-area {
+    padding-left: env(safe-area-inset-left);
+    padding-right: env(safe-area-inset-right);
+    padding-top: env(safe-area-inset-top);
+    padding-bottom: env(safe-area-inset-bottom);
+}
+
+/* ========== 动态星空背景 ========== */
+.star-field {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 0;
+    overflow: hidden;
+}
+
+.star {
+    position: absolute;
+    background: rgba(64, 224, 208, 0.8);
+    border-radius: 50%;
+    animation: twinkle 3s infinite;
+}
+
+@keyframes twinkle {
+    0%, 100% { opacity: 0.3; transform: scale(1); }
+    50% { opacity: 1; transform: scale(1.2); }
+}
+
+/* ========== 主容器布局 ========== */
+.app-container {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+    position: relative;
+    z-index: 1;
+}
+
+/* ========== 顶部导航栏 ========== */
+.user-header, .status-header, .header {
+    background: rgba(26, 29, 41, 0.95);
+    backdrop-filter: blur(20px);
+    padding: 15px var(--safe-area-padding);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid var(--border-primary);
+    position: sticky;
+    top: 0;
+    z-index: 100;
+}
+
+.top-nav {
+    padding: 12px var(--safe-area-padding);
+    border-bottom: 1px solid var(--border-primary);
+    text-align: center;
+    font-weight: 600;
+    background: rgba(15, 20, 25, 0.8);
+    backdrop-filter: blur(10px);
+}
+
+/* ========== 用户信息组件 ========== */
+.user-info {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.user-avatar, .player-avatar {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 18px;
+    font-weight: 600;
+    color: white;
+    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
+}
+
+.user-details h3 {
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--text-primary);
+    margin-bottom: 2px;
+}
+
+.user-level {
+    font-size: 12px;
+    color: var(--text-secondary);
+    display: flex;
+    align-items: center;
+    gap: 4px;
+}
+
+.level-badge {
+    background: linear-gradient(135deg, var(--accent-color) 0%, var(--accent-light) 100%);
+    color: white;
+    padding: 2px 8px;
+    border-radius: 12px;
+    font-size: 10px;
+    font-weight: 600;
+}
+
+/* ========== 通用按钮样式 ========== */
+.btn {
+    min-height: var(--touch-target-min);
+    border: none;
+    border-radius: 12px;
+    font-size: 16px;
+    font-weight: 600;
+    cursor: pointer;
+    padding: 14px 24px;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+    position: relative;
+    overflow: hidden;
+}
+
+/* 主要按钮样式 */
+.btn-primary {
+    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
+    color: #ffffff;
+    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.3);
+}
+
+.btn-primary::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 0;
+    height: 0;
+    background: rgba(255, 255, 255, 0.3);
+    border-radius: 50%;
+    transform: translate(-50%, -50%);
+    transition: width 0.3s, height 0.3s;
+}
+
+.btn-primary:hover, .btn-primary:focus {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.4);
+}
+
+.btn-primary:active {
+    transform: translateY(0);
+    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.4);
+}
+
+.btn-primary:active::before {
+    width: 100%;
+    height: 100%;
+}
+
+/* 成功按钮样式 */
+.btn-success {
+    background: linear-gradient(135deg, var(--secondary-color), var(--secondary-light));
+    color: #1a1a2e;
+    box-shadow: 0 4px 16px rgba(64, 224, 208, 0.3);
+}
+
+.btn-success::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 0;
+    height: 0;
+    background: rgba(255, 255, 255, 0.3);
+    border-radius: 50%;
+    transform: translate(-50%, -50%);
+    transition: width 0.3s, height 0.3s;
+}
+
+.btn-success:hover, .btn-success:focus {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 25px rgba(64, 224, 208, 0.4);
+}
+
+.btn-success:active {
+    transform: translateY(0);
+    box-shadow: 0 2px 8px rgba(64, 224, 208, 0.4);
+}
+
+.btn-success:active::before {
+    width: 100%;
+    height: 100%;
+}
+
+/* 次要按钮样式 */
+.btn-secondary {
+    background: rgba(99, 102, 241, 0.15);
+    color: var(--primary-color);
+    border: 1px solid var(--primary-color);
+    backdrop-filter: blur(10px);
+}
+
+.btn-secondary::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 0;
+    height: 0;
+    background: rgba(99, 102, 241, 0.2);
+    border-radius: 50%;
+    transform: translate(-50%, -50%);
+    transition: width 0.3s, height 0.3s;
+}
+
+.btn-secondary:hover, .btn-secondary:focus {
+    background: rgba(99, 102, 241, 0.25);
+    transform: translateY(-1px);
+}
+
+.btn-secondary:active {
+    transform: translateY(0);
+}
+
+.btn-secondary:active::before {
+    width: 100%;
+    height: 100%;
+}
+
+/* 危险按钮样式 */
+.btn-danger {
+    background: linear-gradient(135deg, var(--danger-color), var(--danger-light));
+    color: white;
+    box-shadow: 0 4px 16px rgba(255, 71, 87, 0.3);
+}
+
+/* 按钮禁用状态 */
+.btn:disabled {
+    background: var(--bg-tertiary) !important;
+    color: var(--text-disabled) !important;
+    border: 1px solid var(--border-primary) !important;
+    opacity: 0.6;
+    cursor: not-allowed;
+    box-shadow: none !important;
+}
+
+.btn:disabled:active {
+    transform: none !important;
+}
+
+/* 按钮图标和副标题 */
+.button-icon {
+    font-size: 18px;
+}
+
+.button-subtitle {
+    font-size: 12px;
+    opacity: 0.8;
+    font-weight: 400;
+}
+
+/* ========== 设置和操作按钮 ========== */
+.settings-btn, .back-btn, .share-btn {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    border: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    font-size: 20px;
+}
+
+.settings-btn {
+    background: rgba(99, 102, 241, 0.15);
+    border: 1px solid var(--primary-color);
+    color: var(--primary-color);
+}
+
+.back-btn {
+    background: rgba(99, 102, 241, 0.15);
+    border-radius: 12px;
+    color: var(--primary-color);
+    font-size: 18px;
+}
+
+.share-btn {
+    background: rgba(64, 224, 208, 0.15);
+    border-radius: 12px;
+    color: var(--secondary-color);
+    font-size: 16px;
+}
+
+.settings-btn:hover, .back-btn:active, .share-btn:active {
+    transform: scale(1.05);
+}
+
+.settings-btn:active, .back-btn:active, .share-btn:active {
+    transform: scale(0.95);
+}
+
+/* ========== 卡片样式 ========== */
+.title-card, .rules-card {
+    width: 100%;
+    max-width: 400px;
+    background: rgba(22, 33, 62, 0.8);
+    border: 1px solid rgba(64, 224, 208, 0.3);
+    border-radius: 16px;
+    padding: 30px 20px;
+    backdrop-filter: blur(10px);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+    margin-bottom: 30px;
+    position: relative;
+    overflow: hidden;
+}
+
+.title-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 3px;
+    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color), var(--accent-color));
+    animation: shimmer 3s ease-in-out infinite;
+}
+
+@keyframes shimmer {
+    0%, 100% { transform: translateX(-100%); }
+    50% { transform: translateX(100%); }
+}
+
+/* 游戏标题 */
+.game-title {
+    font-size: 28px;
+    font-weight: 700;
+    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 50%, var(--secondary-color) 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    margin-bottom: 10px;
+    position: relative;
+}
+
+.game-subtitle {
+    font-size: 14px;
+    color: var(--text-secondary);
+    margin-bottom: 20px;
+}
+
+/* ========== 飞机装饰 ========== */
+.plane-decoration {
+    position: absolute;
+    opacity: 0.1;
+    font-size: 60px;
+    color: var(--primary-color);
+}
+
+.plane-decoration.top-left {
+    top: 10px;
+    left: 10px;
+    transform: rotate(-45deg);
+}
+
+.plane-decoration.top-right {
+    top: 10px;
+    right: 10px;
+    transform: rotate(45deg);
+}
+
+.plane-decoration.bottom-left {
+    bottom: 10px;
+    left: 10px;
+    transform: rotate(135deg);
+}
+
+.plane-decoration.bottom-right {
+    bottom: 10px;
+    right: 10px;
+    transform: rotate(-135deg);
+}
+
+/* ========== 游戏规则样式 ========== */
+.rules-header {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 20px;
+}
+
+.rules-icon {
+    width: 24px;
+    height: 24px;
+    background: linear-gradient(135deg, var(--secondary-color) 0%, var(--secondary-light) 100%);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+    color: #1a1a2e;
+    font-weight: 600;
+}
+
+.rules-title {
+    font-size: 18px;
+    font-weight: 600;
+    color: var(--text-primary);
+}
+
+.rules-content {
+    text-align: left;
+}
+
+.rule-item {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    margin-bottom: 12px;
+    color: var(--text-secondary);
+    font-size: 14px;
+    line-height: 1.5;
+}
+
+.rule-item:last-child {
+    margin-bottom: 0;
+}
+
+.rule-number {
+    min-width: 20px;
+    height: 20px;
+    background: rgba(99, 102, 241, 0.2);
+    border: 1px solid var(--primary-color);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 11px;
+    font-weight: 600;
+    color: var(--primary-color);
+    margin-top: 2px;
+}
+
+/* ========== 游戏棋盘样式 ========== */
+.board-wrapper {
+    position: relative;
+}
+
+.game-board {
+    display: grid;
+    grid-template-columns: repeat(10, var(--cell-size));
+    grid-template-rows: repeat(10, var(--cell-size));
+    gap: 1px;
+    background: var(--border-primary);
+    border: 1px solid var(--border-primary);
+}
+
+.board-cell {
+    background: var(--bg-secondary);
+    transition: background-color 0.2s;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 10px;
+    color: rgba(255, 255, 255, 0.4);
+    position: relative;
+    cursor: pointer;
+    user-select: none;
+    font-weight: 600;
+}
+
+.board-cell:active {
+    background-color: var(--border-highlight);
+    transform: scale(0.95);
+    border-color: var(--secondary-color);
+}
+
+/* 棋盘飞机状态 */
+.board-cell.plane-part { background-color: var(--primary-color); }
+.board-cell.plane-head { background-color: var(--accent-color); }
+.board-cell.plane-body { background-color: var(--primary-light); }
+.board-cell.plane-wing { background-color: var(--primary-light); }
+.board-cell.plane-tail { background-color: var(--primary-color); }
+.board-cell.selected { box-shadow: inset 0 0 0 2px var(--success-color); z-index: 1; }
+
+/* 坐标轴标识 */
+.col-label, .row-label {
+    position: absolute;
+    font-size: 10px;
+    color: var(--text-tertiary);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 600;
+}
+
+.col-label {
+    top: -20px;
+    height: 15px;
+    width: var(--cell-size);
+}
+
+.row-label {
+    left: -20px;
+    width: 15px;
+    height: var(--cell-size);
+}
+
+/* ========== 输入框样式 ========== */
+.search-input {
+    flex: 1;
+    height: var(--touch-target-min);
+    padding: 0 16px;
+    background: rgba(22, 33, 62, 0.8);
+    border: 1px solid rgba(64, 224, 208, 0.3);
+    border-radius: 12px;
+    color: var(--text-primary);
+    font-size: 16px;
+    backdrop-filter: blur(10px);
+    transition: all 0.3s ease;
+}
+
+.search-input:focus {
+    outline: none;
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
+}
+
+.search-input::placeholder {
+    color: var(--text-tertiary);
+}
+
+/* ========== 状态徽章 ========== */
+.status-badge {
+    padding: 6px 12px;
+    border-radius: 8px;
+    font-size: 12px;
+    font-weight: 600;
+}
+
+.status-ready {
+    background: rgba(64, 224, 208, 0.2);
+    color: var(--secondary-color);
+}
+
+.status-waiting {
+    background: rgba(156, 163, 175, 0.2);
+    color: var(--text-tertiary);
+}
+
+/* ========== 网络状态和指示器 ========== */
+.network-status {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    color: var(--text-tertiary);
+}
+
+.connection-dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: var(--secondary-color);
+    animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+    0%, 100% { opacity: 1; transform: scale(1); }
+    50% { opacity: 0.4; transform: scale(1.3); }
+}
+
+.turn-indicator {
+    padding: 6px 16px;
+    border-radius: 16px;
+    font-size: 14px;
+    font-weight: 600;
+    backdrop-filter: blur(10px);
+    transition: all 0.3s ease;
+}
+
+.turn-indicator.my-turn {
+    background: linear-gradient(135deg, var(--secondary-color) 0%, var(--secondary-light) 100%);
+    color: #1a1a2e;
+    box-shadow: 0 4px 20px rgba(64, 224, 208, 0.4);
+}
+
+.turn-indicator.opponent-turn {
+    background: linear-gradient(135deg, rgba(255, 71, 87, 0.9) 0%, rgba(255, 56, 56, 0.9) 100%);
+    color: white;
+    border: 1px solid rgba(255, 71, 87, 0.6);
+    box-shadow: 0 4px 20px rgba(255, 71, 87, 0.3);
+}
+
+/* ========== 响应式设计 ========== */
+@media (max-width: 375px) {
+    :root {
+        --cell-size: min(8vw, 32px);
+    }
+    
+    .user-header {
+        padding: 12px var(--safe-area-padding);
+    }
+
+    .user-avatar, .player-avatar {
+        width: 36px;
+        height: 36px;
+        font-size: 16px;
+    }
+
+    .game-title {
+        font-size: 24px;
+    }
+
+    .btn {
+        font-size: 16px;
+        min-height: 42px;
+        padding: 14px 24px;
+    }
+}
+
+@media (max-height: 640px) {
+    .main-content {
+        padding-top: 15px;
+        padding-bottom: 15px;
+    }
+
+    .title-card, .rules-card {
+        margin-bottom: 20px;
+        padding: 20px;
+    }
+
+    .game-title {
+        margin-bottom: 8px;
+    }
+}
+
+/* ========== 辅助功能支持 ========== */
+@media (prefers-contrast: high) {
+    :root {
+        --text-primary: #ffffff;
+        --text-secondary: #e5e5e5;
+        --border-primary: #ffffff;
+        --bg-secondary: #000000;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    *, *::before, *::after {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+    body {
+        background: var(--bg-primary);
+        color: var(--text-primary);
+    }
+}
+
+/* ========== 触觉反馈动画 ========== */
+.haptic-feedback {
+    animation: hapticVibrate 0.1s ease-out;
+}
+
+@keyframes hapticVibrate {
+    0%, 100% { transform: translateX(0); }
+    25% { transform: translateX(-1px); }
+    75% { transform: translateX(1px); }
+}

01_文档/原型设计/navigation.js

@@ -0,0 +1,67 @@
+/* 打飞机对战小程序 - 页面导航功能 */
+
+// 页面路径映射
+const routes = {
+    'entry': '01_入口页面.html',
+    'preparation': '04_准备页面.html', 
+    'battle': '05_对战页面.html',
+    'roomWaiting': '02_房间等待[房主].html',
+    'joinRoom': '03_加入房间列表.html'
+};
+
+// 简单的触觉反馈
+function vibrate() {
+    if ('vibrate' in navigator) {
+        navigator.vibrate(10);
+    }
+}
+
+// 主要导航函数
+function navigateTo(routeKey) {
+    vibrate();
+    
+    const pagePath = routes[routeKey];
+    if (!pagePath) {
+        console.error('未找到路由:', routeKey);
+        return;
+    }
+    
+    console.log('导航到:', pagePath);
+    window.location.href = pagePath;
+}
+
+// 游戏模式选择处理
+function handleGameModeSelection(mode) {
+    vibrate();
+    
+    switch(mode) {
+        case 'quickStart':
+        case 'onlineMatch':
+            console.log(`${mode} - 进入准备页面`);
+            navigateTo('preparation');
+            break;
+        case 'createRoom':
+            console.log('createRoom - 进入房间等待页面');
+            navigateTo('roomWaiting');
+            break;
+        case 'joinGame':
+            console.log('joinGame - 进入房间列表页面');
+            navigateTo('joinRoom');
+            break;
+        default:
+            console.warn('未知的游戏模式:', mode);
+    }
+}
+
+// 从准备页面完成后跳转到对战页面
+function completePlacementAndNavigate() {
+    vibrate();
+    console.log('准备完成，进入对战页面');
+    navigateTo('battle');
+}
+
+// 全局导出，确保函数可用
+window.navigateTo = navigateTo;
+window.handleGameModeSelection = handleGameModeSelection;
+window.completePlacementAndNavigate = completePlacementAndNavigate;
+window.vibrate = vibrate;