Hugging Face's logo

Spaces:
codenger2005
/
TankWar3D
Running

App Files Community
cutechicken commited on
Commit
9c0f025
·
verified ·
1 Parent(s): 6fd82de

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +33 -112
index.html CHANGED
@@ -3,7 +3,7 @@
3
  <head>
4
  <meta charset="utf-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Combat Helicopter Simulator</title>
7
  <style>
8
  body {
9
  margin: 0;
@@ -45,29 +45,6 @@
45
  text-align: center;
46
  }
47
 
48
- #cockpit-frame {
49
- position: fixed;
50
- top: 0;
51
- left: 0;
52
- width: 100%;
53
- height: 100%;
54
- border: 20px solid #2a2a2a;
55
- box-sizing: border-box;
56
- pointer-events: none;
57
- z-index: 1000;
58
- }
59
-
60
- #cockpit-overlay {
61
- position: fixed;
62
- top: 0;
63
- left: 0;
64
- width: 100%;
65
- height: 100%;
66
- background: linear-gradient(135deg, rgba(0,0,0,0.3) 0%, transparent 50%, rgba(0,0,0,0.3) 100%);
67
- pointer-events: none;
68
- z-index: 999;
69
- }
70
-
71
  #info {
72
  position: absolute;
73
  top: 10px;
@@ -89,7 +66,7 @@
89
  transform: translate(-50%, -50%);
90
  width: 40px;
91
  height: 40px;
92
- border: 2px solid rgba(0,255,0,0.7);
93
  border-radius: 50%;
94
  z-index: 1001;
95
  pointer-events: none;
@@ -99,7 +76,7 @@
99
  #crosshair::after {
100
  content: '';
101
  position: absolute;
102
- background: rgba(0,255,0,0.7);
103
  }
104
 
105
  #crosshair::before {
@@ -122,12 +99,12 @@
122
  position: absolute;
123
  bottom: 20px;
124
  left: 20px;
125
- width: 400px;
126
- height: 30px;
127
  background: rgba(0,20,0,0.7);
128
  border: 2px solid #0f0;
129
  z-index: 1001;
130
- border-radius: 15px;
131
  overflow: hidden;
132
  }
133
 
@@ -151,112 +128,56 @@
151
  border-radius: 5px;
152
  }
153
 
154
- #altitude-indicator,
155
- #speed-indicator,
156
- #compass {
157
- position: fixed;
158
  color: #0f0;
159
  background: rgba(0,20,0,0.7);
160
  padding: 10px;
 
 
161
  border: 1px solid #0f0;
162
  border-radius: 5px;
163
- z-index: 1001;
164
- }
165
-
166
- #altitude-indicator {
167
- left: 20px;
168
- top: 50%;
169
- }
170
-
171
- #speed-indicator {
172
- right: 20px;
173
- top: 50%;
174
  }
175
 
176
- #compass {
177
- top: 20px;
178
- left: 50%;
179
- transform: translateX(-50%);
180
- }
181
-
182
- #radar {
183
- position: fixed;
184
- bottom: 20px;
185
- right: 20px;
186
- width: 200px;
187
- height: 200px;
188
- background: rgba(0,20,0,0.7);
189
- border: 2px solid #0f0;
190
- border-radius: 50%;
191
- z-index: 1001;
192
- overflow: hidden;
193
- }
194
-
195
- .radar-sweep {
196
- position: absolute;
197
- top: 50%;
198
- left: 50%;
199
- width: 50%;
200
- height: 2px;
201
- background: linear-gradient(90deg, #0f0, transparent);
202
- transform-origin: left center;
203
- animation: radar-sweep 4s infinite linear;
204
- }
205
-
206
- .radar-dot {
207
- position: absolute;
208
- width: 4px;
209
- height: 4px;
210
- background: #f00;
211
- border-radius: 50%;
212
- transform: translate(-50%, -50%);
213
- }
214
-
215
- @keyframes radar-sweep {
216
- from { transform: rotate(0deg); }
217
- to { transform: rotate(360deg); }
218
- }
219
-
220
- #stage {
221
  position: absolute;
222
- top: 50%;
223
  left: 50%;
224
- transform: translate(-50%, -50%);
225
  color: #0f0;
226
- background: rgba(0,20,0,0.8);
227
- padding: 20px;
228
- font-size: 32px;
229
  z-index: 1001;
230
- border-radius: 10px;
231
- display: none;
 
232
  }
233
  </style>
234
  </head>
235
  <body>
236
  <div id="loading">
237
  <div class="loading-spinner"></div>
238
- <div class="loading-text">Loading game assets...</div>
239
  </div>
240
- <div id="cockpit-frame"></div>
241
- <div id="cockpit-overlay"></div>
242
  <div id="info">
243
  Click to start<br>
244
- WASD - Move Helicopter<br>
245
- Mouse - Aim<br>
246
- Left Click - Shoot<br>
247
- R - Reload
 
 
248
  </div>
 
 
249
  <div id="crosshair"></div>
250
  <div id="healthBar"><div id="health"></div></div>
251
- <div id="ammo">Ammo: 30/30</div>
252
- <div id="stage">Stage 1</div>
253
- <div id="altitude-indicator">ALT: <span>50</span>m</div>
254
- <div id="speed-indicator">SPD: <span>0</span>km/h</div>
255
- <div id="compass">HDG: <span>0</span>°</div>
256
- <div id="radar">
257
- <div class="radar-sweep"></div>
258
- <div class="radar-targets"></div>
259
- </div>
260
 
261
  <script type="importmap">
262
  {
 
3
  <head>
4
  <meta charset="utf-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Tank Combat Simulator</title>
7
  <style>
8
  body {
9
  margin: 0;
 
45
  text-align: center;
46
  }
47
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
48
  #info {
49
  position: absolute;
50
  top: 10px;
 
66
  transform: translate(-50%, -50%);
67
  width: 40px;
68
  height: 40px;
69
+ border: 2px solid rgba(255,0,0,0.7);
70
  border-radius: 50%;
71
  z-index: 1001;
72
  pointer-events: none;
 
76
  #crosshair::after {
77
  content: '';
78
  position: absolute;
79
+ background: rgba(255,0,0,0.7);
80
  }
81
 
82
  #crosshair::before {
 
99
  position: absolute;
100
  bottom: 20px;
101
  left: 20px;
102
+ width: 200px;
103
+ height: 20px;
104
  background: rgba(0,20,0,0.7);
105
  border: 2px solid #0f0;
106
  z-index: 1001;
107
+ border-radius: 10px;
108
  overflow: hidden;
109
  }
110
 
 
128
  border-radius: 5px;
129
  }
130
 
131
+ #turretInfo {
132
+ position: absolute;
133
+ top: 50px;
134
+ right: 20px;
135
  color: #0f0;
136
  background: rgba(0,20,0,0.7);
137
  padding: 10px;
138
+ font-size: 16px;
139
+ z-index: 1001;
140
  border: 1px solid #0f0;
141
  border-radius: 5px;
 
 
 
 
 
 
 
 
 
 
 
142
  }
143
 
144
+ #controls {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
145
  position: absolute;
146
+ top: 10px;
147
  left: 50%;
148
+ transform: translateX(-50%);
149
  color: #0f0;
150
+ background: rgba(0,20,0,0.7);
151
+ padding: 10px;
152
+ font-size: 14px;
153
  z-index: 1001;
154
+ border: 1px solid #0f0;
155
+ border-radius: 5px;
156
+ text-align: center;
157
  }
158
  </style>
159
  </head>
160
  <body>
161
  <div id="loading">
162
  <div class="loading-spinner"></div>
163
+ <div class="loading-text">Loading tank assets...</div>
164
  </div>
165
+
 
166
  <div id="info">
167
  Click to start<br>
168
+ W - Forward<br>
169
+ S - Backward<br>
170
+ A - Rotate Left<br>
171
+ D - Rotate Right<br>
172
+ Mouse - Aim Turret<br>
173
+ Left Click - Fire
174
  </div>
175
+
176
+ <div id="controls">Tank Combat Simulator</div>
177
  <div id="crosshair"></div>
178
  <div id="healthBar"><div id="health"></div></div>
179
+ <div id="ammo">Ammo: 10/10</div>
180
+ <div id="turretInfo">Turret Angle: 0°</div>
 
 
 
 
 
 
 
181
 
182
  <script type="importmap">
183
  {