shiyue/DFJ
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

原型设计完成

Browse Source
This commit is contained in:
史悦
2025-09-11 13:34:29 +08:00
parent adbd205b7e
commit 29b7844909
2 changed files with 242 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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);
backdrop-filter: blur(10px);
background: rgba(26, 29, 41, 0.95);
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);
border: 1px solid var(--border-primary);
background: rgba(64, 224, 208, 0.1);
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);
transition: background-color 0.2s;
background: rgba(15, 52, 96, 0.8);
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;
border-radius: 8px;
border: 1px solid var(--border-primary);
background: var(--bg-tertiary);
color: var(--text-primary);
min-height: var(--touch-target-min);
border: none;
border-radius: 12px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
min-width: 44px;
min-height: 44px;
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::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;
gap: 10px;
align-items: center;
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;
border-color: var(--success-color) !important;
box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
transform: scale(1.05);
background: linear-gradient(135deg, var(--secondary-color), var(--secondary-light)) !important;
color: #1a1a2e !important;
border-color: var(--secondary-color) !important;
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;
}
.btn {
padding: 10px;
padding: 12px;
background: rgba(15, 52, 96, 0.4);
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);
color: var(--text-disabled);
border-color: var(--border-primary);
opacity: 0.6;
cursor: not-allowed;
.confirmation-group {
display: flex;
justify-content: space-around;
gap: 10px;
}
.btn:active:not(:disabled) { transform: scale(0.95); }
.plane-btn.placed { background-color: var(--primary-color); border-color: var(--primary-light); }
.plane-btn.selected { background-color: var(--success-color); border-color: var(--success-color); }
.confirmation-group .btn-primary { background-color: var(--primary-color); }
.confirmation-group .btn-danger { background-color: var(--danger-color); }
.confirmation-group .btn {
flex: 1;
max-width: 120px;
}
</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" id="deleteBtn">🗑️</button>
<button class="btn btn-secondary" id="moveUpBtn">↑</button>
<button class="btn btn-danger" id="deleteBtn">🗑️</button>
<button class="btn" id="moveLeftBtn">←</button>
<button class="btn" id="rotateBtn">↻</button>
<button class="btn" id="moveRightBtn">→</button>
<button class="btn btn-secondary" id="moveLeftBtn">←</button>
<button class="btn btn-secondary" id="rotateBtn">↻</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>

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

@@ -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;
color: white;
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: var(--success-color) !important;
color: white;
box-shadow: 0 0 12px rgba(16, 185, 129, 0.5);
background: linear-gradient(135deg, var(--secondary-color), var(--secondary-light)) !important;
color: #1a1a2e !important;
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;
}