Skip to content

Commit 50ae17c

Browse files
iamapig120iamapig120
committed
style: 优化HTML结构和CSS样式，增强可读性和维护性
1 parent 4bab230 commit 50ae17c

1 file changed

Lines changed: 149 additions & 73 deletions

File tree

‎public/index.html‎

Lines changed: 149 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html lang="zh-hans">
33
<head>
44
<meta charset="UTF-8" />
@@ -29,9 +29,15 @@
2929
--borderRadiusMedium: 8px;
3030
--borderRadiusSmall: 4px;
3131
--borderRadiusLarge: 12px;
32-
--shadow2: 0 1.6px 3.6px 0 rgba(0,0,0,0.132), 0 0.3px 0.9px 0 rgba(0,0,0,0.108);
33-
--shadow4: 0 3.2px 7.2px 0 rgba(0,0,0,0.132), 0 0.6px 1.8px 0 rgba(0,0,0,0.108);
34-
--shadow8: 0 6.4px 14.4px 0 rgba(0,0,0,0.132), 0 1.2px 3.6px 0 rgba(0,0,0,0.108);
32+
--shadow2:
33+
0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132),
34+
0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108);
35+
--shadow4:
36+
0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132),
37+
0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108);
38+
--shadow8:
39+
0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132),
40+
0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108);
3541
--fontSizeBase300: 14px;
3642
--fontSizeBase400: 16px;
3743
--fontSizeBase500: 20px;
@@ -57,7 +63,18 @@
5763
}
5864

5965
body {
60-
font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
66+
font-family:
67+
'Segoe UI',
68+
-apple-system,
69+
BlinkMacSystemFont,
70+
'Roboto',
71+
'Oxygen',
72+
'Ubuntu',
73+
'Cantarell',
74+
'Fira Sans',
75+
'Droid Sans',
76+
'Helvetica Neue',
77+
sans-serif;
6178
background: var(--colorNeutralBackground2);
6279
min-height: 100vh;
6380
padding: var(--spacingHorizontalXL);
@@ -88,8 +105,10 @@
88105
margin-bottom: var(--spacingVerticalS);
89106
}
90107

91-
.header p {
108+
.header p, .header a {
92109
font-size: var(--fontSizeBase400);
110+
color: var(--colorNeutralBackground1);
111+
text-decoration-color: var(--colorNeutralBackground1);
93112
opacity: 0.95;
94113
}
95114

@@ -739,27 +758,30 @@
739758
<div class="header">
740759
<h1>SimGEKI WebControl</h1>
741760
<p>设备固件管理与配置工具</p>
761+
<a href="https://sim.bysb.net/"><p>-点此了解SimDevices和SimGEKI-</p></a>
742762
</div>
743763

744764
<div class="tab-container">
745765
<div class="tab-nav">
746-
<button class="tab-button active" data-tab="config">⚙️ 设备配置</button>
747-
<button class="tab-button" data-tab="inputtest">
748-
🎮 IO4测试
766+
<button class="tab-button active" data-tab="config">
767+
⚙️ 设备配置
749768
</button>
769+
<button class="tab-button" data-tab="inputtest">🎮 IO4测试</button>
750770
<button class="tab-button" data-tab="cardreader">
751771
💳 读卡器测试
752772
</button>
753-
<button class="tab-button" data-tab="firmware">
754-
🔧 固件刷入
755-
</button>
773+
<button class="tab-button" data-tab="firmware">🔧 固件刷入</button>
756774
</div>
757775

758776
<div class="tab-content" id="inputtest-tab">
759777
<div class="section">
760778
<h3>🔗 设备连接</h3>
761779
<div class="button-group">
762-
<input type="button" value="连接设备" id="ConnectInputTestDevice" />
780+
<input
781+
type="button"
782+
value="连接设备"
783+
id="ConnectInputTestDevice"
784+
/>
763785
</div>
764786
<ul id="InputTestConnectedList" class="connected-list"></ul>
765787
<div id="InputTestConnectionStatus" class="status"></div>
@@ -772,7 +794,7 @@ <h3>🎮 按键测试</h3>
772794
<input type="button" value="停止测试" id="StopInputTestBtn" />
773795
</div>
774796
<div id="InputTestStatus" class="status"></div>
775-
797+
776798
<div class="arcade-panel" id="ArcadePanel">
777799
<div class="panel-row test-service-row">
778800
<div class="panel-spacer-large"></div>
@@ -801,12 +823,16 @@ <h3>🎮 按键测试</h3>
801823
<div class="coin-row">
802824
<span class="coin-label">投币器1:</span>
803825
<span class="coin-status" id="Coin1Condition">-</span>
804-
<span class="coin-count">计数: <span id="Coin1Count">0</span></span>
826+
<span class="coin-count"
827+
>计数: <span id="Coin1Count">0</span></span
828+
>
805829
</div>
806830
<div class="coin-row">
807831
<span class="coin-label">投币器2:</span>
808832
<span class="coin-status" id="Coin2Condition">-</span>
809-
<span class="coin-count">计数: <span id="Coin2Count">0</span></span>
833+
<span class="coin-count"
834+
>计数: <span id="Coin2Count">0</span></span
835+
>
810836
</div>
811837
</div>
812838
</div>
@@ -868,8 +894,15 @@ <h3>🔗 设备连接</h3>
868894
<input type="button" value="断开连接" id="DisconnectCardReader" />
869895
</div>
870896
<div id="CardReaderConnectionStatus" class="status"></div>
871-
<p style="margin-top: var(--spacingVerticalS); font-size: var(--fontSizeBase300); color: var(--colorNeutralForeground2);">
872-
💡 提示: 读卡器使用 USB CDC 串口接口 (VID: 0x0CA3, PID: 0x0021)。需要 Chrome/Edge 浏览器支持 WebSerial API。
897+
<p
898+
style="
899+
margin-top: var(--spacingVerticalS);
900+
font-size: var(--fontSizeBase300);
901+
color: var(--colorNeutralForeground2);
902+
"
903+
>
904+
💡 提示: 读卡器使用 USB CDC 串口接口 (VID: 0x0CA3, PID:
905+
0x0021)。需要 Chrome/Edge 浏览器支持 WebSerial API。
873906
</p>
874907
</div>
875908

@@ -904,48 +937,95 @@ <h3>💳 卡片操作</h3>
904937
<input type="button" value="单次检测" id="DetectCard" />
905938
</div>
906939
<div id="CardReaderOperationStatus" class="status"></div>
907-
908-
<div style="
909-
background: #1b1b19;
910-
border-radius: var(--borderRadiusMedium);
911-
padding: var(--spacingHorizontalL);
912-
margin: var(--spacingVerticalL) 0;
913-
color: var(--colorNeutralBackground1);
914-
border: 1px solid #3d3d3d;
915-
">
916-
<div style="display: flex; gap: var(--spacingHorizontalL); flex-wrap: wrap;">
917-
<div style="flex: 1; min-width: 150px;">
918-
<div style="color: #c4c4c4; font-size: var(--fontSizeBase300); margin-bottom: var(--spacingVerticalXS);">轮询状态</div>
919-
<div id="CardPollingStatus" style="
920-
background: #2d2d2b;
921-
padding: var(--spacingVerticalS) var(--spacingHorizontalM);
922-
border-radius: var(--borderRadiusSmall);
923-
font-family: 'Consolas', monospace;
924-
font-size: var(--fontSizeBase400);
925-
border: 1px solid #4d4d4d;
926-
">-</div>
940+
941+
<div
942+
style="
943+
background: #1b1b19;
944+
border-radius: var(--borderRadiusMedium);
945+
padding: var(--spacingHorizontalL);
946+
margin: var(--spacingVerticalL) 0;
947+
color: var(--colorNeutralBackground1);
948+
border: 1px solid #3d3d3d;
949+
"
950+
>
951+
<div
952+
style="
953+
display: flex;
954+
gap: var(--spacingHorizontalL);
955+
flex-wrap: wrap;
956+
"
957+
>
958+
<div style="flex: 1; min-width: 150px">
959+
<div
960+
style="
961+
color: #c4c4c4;
962+
font-size: var(--fontSizeBase300);
963+
margin-bottom: var(--spacingVerticalXS);
964+
"
965+
>
966+
轮询状态
967+
</div>
968+
<div
969+
id="CardPollingStatus"
970+
style="
971+
background: #2d2d2b;
972+
padding: var(--spacingVerticalS) var(--spacingHorizontalM);
973+
border-radius: var(--borderRadiusSmall);
974+
font-family: 'Consolas', monospace;
975+
font-size: var(--fontSizeBase400);
976+
border: 1px solid #4d4d4d;
977+
"
978+
>
979+
-
980+
</div>
927981
</div>
928-
<div style="flex: 1; min-width: 150px;">
929-
<div style="color: #c4c4c4; font-size: var(--fontSizeBase300); margin-bottom: var(--spacingVerticalXS);">卡片类型</div>
930-
<div id="CardType" style="
931-
background: #2d2d2b;
932-
padding: var(--spacingVerticalS) var(--spacingHorizontalM);
933-
border-radius: var(--borderRadiusSmall);
934-
font-family: 'Consolas', monospace;
935-
font-size: var(--fontSizeBase400);
936-
border: 1px solid #4d4d4d;
937-
">-</div>
982+
<div style="flex: 1; min-width: 150px">
983+
<div
984+
style="
985+
color: #c4c4c4;
986+
font-size: var(--fontSizeBase300);
987+
margin-bottom: var(--spacingVerticalXS);
988+
"
989+
>
990+
卡片类型
991+
</div>
992+
<div
993+
id="CardType"
994+
style="
995+
background: #2d2d2b;
996+
padding: var(--spacingVerticalS) var(--spacingHorizontalM);
997+
border-radius: var(--borderRadiusSmall);
998+
font-family: 'Consolas', monospace;
999+
font-size: var(--fontSizeBase400);
1000+
border: 1px solid #4d4d4d;
1001+
"
1002+
>
1003+
-
1004+
</div>
9381005
</div>
939-
<div style="flex: 1; min-width: 200px;">
940-
<div style="color: #c4c4c4; font-size: var(--fontSizeBase300); margin-bottom: var(--spacingVerticalXS);">卡片 UID / IDm</div>
941-
<div id="CardUID" style="
942-
background: #2d2d2b;
943-
padding: var(--spacingVerticalS) var(--spacingHorizontalM);
944-
border-radius: var(--borderRadiusSmall);
945-
font-family: 'Consolas', monospace;
946-
font-size: var(--fontSizeBase400);
947-
border: 1px solid #4d4d4d;
948-
">-</div>
1006+
<div style="flex: 1; min-width: 200px">
1007+
<div
1008+
style="
1009+
color: #c4c4c4;
1010+
font-size: var(--fontSizeBase300);
1011+
margin-bottom: var(--spacingVerticalXS);
1012+
"
1013+
>
1014+
卡片 UID / IDm
1015+
</div>
1016+
<div
1017+
id="CardUID"
1018+
style="
1019+
background: #2d2d2b;
1020+
padding: var(--spacingVerticalS) var(--spacingHorizontalM);
1021+
border-radius: var(--borderRadiusSmall);
1022+
font-family: 'Consolas', monospace;
1023+
font-size: var(--fontSizeBase400);
1024+
border: 1px solid #4d4d4d;
1025+
"
1026+
>
1027+
-
1028+
</div>
9491029
</div>
9501030
</div>
9511031
</div>
@@ -1077,20 +1157,20 @@ <h3>🔗 设备连接</h3>
10771157
<div class="section">
10781158
<h3>🕹️ 摇杆配置</h3>
10791159
<div class="button-group">
1080-
<input type="button" value="校准摇杆" id="ResetLeverBtn" />
1081-
<input
1082-
type="button"
1083-
value="读取摇杆信息"
1084-
id="ReadLeverInfoBtn"
1085-
/>
1160+
<input type="button" value="校准摇杆" id="ResetLeverBtn" />
1161+
<input type="button" value="读取摇杆信息" id="ReadLeverInfoBtn" />
10861162
</div>
10871163
<div id="ConfigOperationStatus" class="status"></div>
10881164
</div>
10891165

10901166
<div class="section">
10911167
<h3>🎮 输入模式</h3>
10921168
<div class="button-group">
1093-
<input type="button" value="读取当前输入模式" id="ReadInputModeBtn" />
1169+
<input
1170+
type="button"
1171+
value="读取当前输入模式"
1172+
id="ReadInputModeBtn"
1173+
/>
10941174
</div>
10951175
<div class="button-group">
10961176
<select id="InputModeSelect">
@@ -1106,20 +1186,16 @@ <h3>🎮 输入模式</h3>
11061186
<div class="section">
11071187
<h3>🧪 调试</h3>
11081188
<div class="button-group">
1109-
<input
1110-
type="button"
1111-
value="开启摇杆监控"
1112-
id="ToggleMonitorBtn"
1113-
/>
1114-
<input type="button" value="灯光测试" id="LightTestBtn" />
1189+
<input type="button" value="开启摇杆监控" id="ToggleMonitorBtn" />
1190+
<input type="button" value="灯光测试" id="LightTestBtn" />
11151191
</div>
11161192
</div>
11171193

11181194
<div class="section">
11191195
<h3>💾 保存或放弃</h3>
11201196
<div class="button-group">
1121-
<input type="button" value="保存配置" id="SaveConfigBtn" />
1122-
<input type="button" value="放弃配置" id="CancelConfigBtn" />
1197+
<input type="button" value="保存配置" id="SaveConfigBtn" />
1198+
<input type="button" value="放弃配置" id="CancelConfigBtn" />
11231199
</div>
11241200
</div>
11251201

0 commit comments

Comments
 (0)