原型设计完成

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

@@ -20,7 +20,7 @@
             --primary-color: #6366f1;
             --primary-light: #8b5cf6;
             --accent-color: #f59e0b;
-            --danger-color: #ef4444;
+            --danger-color: #ff4757;
             --success-color: #10b981;
             --bg-primary: #0f1419;
             --bg-secondary: #1a1d29;
@@ -40,7 +40,7 @@
         html, body { height: 100%; overflow: hidden; -webkit-user-select: none; user-select: none; }
         body {
             font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Microsoft YaHei UI", sans-serif;
-            background: var(--bg-primary);
+            background: linear-gradient(135deg, #0f0f1a 0%, #1a1a2e 30%, #16213e 70%, #0f3460 100%);
             color: var(--text-primary);
             -webkit-font-smoothing: antialiased;
             touch-action: none;
@@ -54,8 +54,8 @@
             border-bottom: 1px solid var(--border-primary);
             text-align: center;
             font-weight: 600;
-            background: rgba(15, 20, 25, 0.8);
+            background: rgba(26, 29, 41, 0.95);
-            backdrop-filter: blur(10px);
+            backdrop-filter: blur(20px);
         }
 
         .main-content {
@@ -73,20 +73,42 @@
             grid-template-columns: repeat(10, var(--cell-size));
             grid-template-rows: repeat(10, var(--cell-size));
             gap: 1px;
-            background: var(--border-primary);
+            background: rgba(64, 224, 208, 0.1);
-            border: 1px solid var(--border-primary);
+            border: 2px solid rgba(64, 224, 208, 0.5);
+            border-radius: 12px;
+            padding: 6px;
+            backdrop-filter: blur(8px);
+            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
         }
         .board-cell {
-            background: var(--bg-secondary);
+            background: rgba(15, 52, 96, 0.8);
-            transition: background-color 0.2s;
+            border: 1px solid rgba(64, 224, 208, 0.15);
+            transition: all 0.2s ease;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 10px;
+            color: rgba(255, 255, 255, 0.4);
+            font-weight: 600;
+            position: relative;
+            cursor: pointer;
+            user-select: none;
+        }
+        .board-cell:active {
+            background: rgba(64, 224, 208, 0.4);
+            transform: scale(0.95);
+            border-color: var(--secondary-color);
         }
-        .board-cell:active { background-color: var(--border-highlight); }
         .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; }
+        .board-cell.selected {
+            box-shadow: inset 0 0 0 2px var(--success-color);
+            z-index: 1;
+            border-color: var(--success-color);
+        }
         
         .col-label, .row-label {
             position: absolute;
@@ -95,17 +117,27 @@
             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);
         }
-        .col-label { top: -20px; height: 15px; width: var(--cell-size); }
-        .row-label { left: -20px; width: 15px; height: var(--cell-size); }
 
         .controls-area {
             display: flex;
             flex-direction: column;
             gap: 12px;
             padding: var(--safe-area-padding);
-            background: var(--bg-secondary);
+            background: rgba(22, 33, 62, 0.8);
             border-top: 1px solid var(--border-primary);
+            backdrop-filter: blur(10px);
         }
         
         .main-controls {
@@ -134,19 +166,113 @@
             height: 44px;
         }
         
+        /* 通用按钮样式 */
         .btn {
-            padding: 10px;
+            min-height: var(--touch-target-min);
-            border-radius: 8px;
+            border: none;
-            border: 1px solid var(--border-primary);
+            border-radius: 12px;
-            background: var(--bg-tertiary);
+            font-size: 16px;
-            color: var(--text-primary);
             font-weight: 600;
             cursor: pointer;
-            transition: all 0.2s;
+            padding: 14px 24px;
-            min-width: 44px;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-            min-height: 44px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 8px;
+            user-select: none;
+            -webkit-tap-highlight-color: transparent;
+            position: relative;
+            overflow: hidden;
         }
         
+        .btn::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:active::before {
+            width: 100%;
+            height: 100%;
+        }
+        
+        /* 主要按钮样式 */
+        .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: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-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: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-secondary {
+            background: rgba(99, 102, 241, 0.15);
+            color: var(--primary-color);
+            border: 1px solid var(--primary-color);
+            backdrop-filter: blur(10px);
+        }
+        
+        .btn-secondary:hover, .btn-secondary:focus {
+            background: rgba(99, 102, 241, 0.25);
+            transform: translateY(-1px);
+        }
+        
+        .btn-secondary:active {
+            transform: translateY(0);
+        }
+        
+        /* 危险按钮样式 */
+        .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:active:not(:disabled) { transform: scale(0.95); }
+        
         .plane-selection {
             display: flex;
             flex-direction: column;
@@ -155,54 +281,82 @@
             margin-right: 20px;
         }
         
-        .confirmation-group {
+        .plane-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;
-            justify-content: space-around;
+            align-items: center;
-            gap: 10px;
+            justify-content: center;
+            gap: 8px;
+            user-select: none;
+            -webkit-tap-highlight-color: transparent;
+            position: relative;
+            overflow: hidden;
+            background: rgba(99, 102, 241, 0.15);
+            color: var(--primary-color);
+            border: 1px solid var(--primary-color);
+            backdrop-filter: blur(10px);
+        }
+        
+        .plane-btn::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;
+        }
+        
+        .plane-btn:active::before {
+            width: 100%;
+            height: 100%;
+        }
+        
+        .plane-btn.placed {
+            background: linear-gradient(135deg, var(--primary-color), var(--primary-light)) !important;
+            color: white !important;
+            border-color: var(--primary-light) !important;
+            box-shadow: 0 4px 16px rgba(99, 102, 241, 0.3);
         }
         
         .plane-btn.selected {
-            background-color: var(--success-color) !important;
+            background: linear-gradient(135deg, var(--secondary-color), var(--secondary-light)) !important;
-            border-color: var(--success-color) !important;
+            color: #1a1a2e !important;
-            box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
+            border-color: var(--secondary-color) !important;
-            transform: scale(1.05);
+            box-shadow: 0 4px 16px rgba(64, 224, 208, 0.3);
         }
-
+        
         .status-display {
             flex-grow: 1;
             text-align: center;
             font-size: 14px;
             color: var(--text-secondary);
             align-self: center;
-        }
+            padding: 12px;
-
+            background: rgba(15, 52, 96, 0.4);
-        .btn {
-            padding: 10px;
             border-radius: 8px;
-            border: 1px solid var(--border-primary);
-            background: var(--bg-tertiary);
-            color: var(--text-primary);
-            font-weight: 600;
-            cursor: pointer;
-            transition: all 0.2s;
-            min-width: 44px;
-            min-height: 44px;
         }
-        .btn:disabled {
+        
-            background: var(--bg-tertiary);
+        .confirmation-group {
-            color: var(--text-disabled);
+            display: flex;
-            border-color: var(--border-primary);
+            justify-content: space-around;
-            opacity: 0.6;
+            gap: 10px;
-            cursor: not-allowed;
         }
-        .btn:active:not(:disabled) { transform: scale(0.95); }
         
-        .plane-btn.placed { background-color: var(--primary-color); border-color: var(--primary-light); }
+        .confirmation-group .btn {
-        .plane-btn.selected { background-color: var(--success-color); border-color: var(--success-color); }
+            flex: 1;
-        
+            max-width: 120px;
-        .confirmation-group .btn-primary { background-color: var(--primary-color); }
+        }
-        .confirmation-group .btn-danger { background-color: var(--danger-color); }
-
     </style>
 </head>
 <body>
@@ -222,15 +376,15 @@
                 <div class="direction-control">
                     <div class="direction-grid">
                         <div></div>
-                        <button class="btn" id="moveUpBtn">↑</button>
+                        <button class="btn btn-secondary" id="moveUpBtn">↑</button>
-                        <button class="btn" id="deleteBtn">🗑️</button>
+                        <button class="btn btn-danger" id="deleteBtn">🗑️</button>
                         
-                        <button class="btn" id="moveLeftBtn">←</button>
+                        <button class="btn btn-secondary" id="moveLeftBtn">←</button>
-                        <button class="btn" id="rotateBtn">↻</button>
+                        <button class="btn btn-secondary" id="rotateBtn">↻</button>
-                        <button class="btn" id="moveRightBtn">→</button>
+                        <button class="btn btn-secondary" id="moveRightBtn">→</button>
                         
                         <div></div>
-                        <button class="btn" id="moveDownBtn">↓</button>
+                        <button class="btn btn-secondary" id="moveDownBtn">↓</button>
                         <div></div>
                     </div>
                 </div>
@@ -243,7 +397,7 @@
             </div>
             
             <div class="confirmation-group">
-                <button class="btn" id="randomBtn">🎲 随机</button>
+                <button class="btn btn-secondary" id="randomBtn">🎲 随机</button>
                 <button class="btn btn-danger" id="resetBtn">🔄 重置</button>
                 <button class="btn btn-primary" id="doneBtn">✓ 完成</button>
             </div>

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

@@ -17,6 +17,10 @@
             --cell-size: min(8.5vw, 36px);
         }
 
+        body {
+            background: linear-gradient(135deg, #0f0f1a 0%, #1a1a2e 30%, #16213e 70%, #0f3460 100%);
+        }
+
         /* 顶部状态栏 */
         .status-header {
             padding: 8px var(--safe-area-padding);
@@ -244,6 +248,9 @@
             backdrop-filter: blur(10px);
             box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
             overflow: hidden;
+            height: 320px;
+            display: flex;
+            flex-direction: column;
         }
 
         /* 页签头部 */
@@ -282,10 +289,13 @@
         /* 页签内容 */
         .tab-content {
             padding: 16px;
+            flex: 1;
+            overflow-y: auto;
         }
 
         .tab-pane {
             display: none;
+            height: 100%;
         }
 
         .tab-pane.active {
@@ -305,6 +315,7 @@
             align-items: flex-start;
             gap: 16px;
             margin-bottom: 16px;
+            flex: 1;
         }
 
         .plane-selection {
@@ -322,19 +333,26 @@
 
         /* 页面特定按钮样式覆盖 */
         .plane-btn.placed {
-            background: var(--primary-color) !important;
+            background: linear-gradient(135deg, var(--primary-color), var(--primary-light)) !important;
-            color: white;
+            color: white !important;
+            border-color: var(--primary-light) !important;
+            box-shadow: 0 4px 16px rgba(99, 102, 241, 0.3);
         }
 
         .plane-btn.selected {
-            background: var(--success-color) !important;
+            background: linear-gradient(135deg, var(--secondary-color), var(--secondary-light)) !important;
-            color: white;
+            color: #1a1a2e !important;
-            box-shadow: 0 0 12px rgba(16, 185, 129, 0.5);
+            border-color: var(--secondary-color) !important;
+            box-shadow: 0 4px 16px rgba(64, 224, 208, 0.3);
         }
 
         /* 攻击控制区域 */
         .attack-controls {
             text-align: center;
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
         }
 
         .attack-target-info {
@@ -350,12 +368,14 @@
             display: flex;
             gap: 12px;
             justify-content: center;
+            margin-top: 16px;
         }
 
         /* 历史记录 */
         .history-container {
-            max-height: 200px;
+            flex: 1;
             overflow-y: auto;
+            margin-bottom: 16px;
         }
 
         .history-item {
@@ -391,7 +411,7 @@
             padding: 12px;
             background: rgba(15, 52, 96, 0.4);
             border-radius: 8px;
-            margin-top: 12px;
+            margin-top: auto;
             color: var(--text-secondary);
             font-size: 14px;
         }