Hugging Face's logo

Spaces:
cutechicken
/
TankWar3D
Running

App Files Community
1
cutechicken commited on
Commit
576e1ec
•
1 Parent(s): 7baf7e5

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +270 -18
index.html CHANGED
@@ -1,19 +1,271 @@
1
- <!doctype html>
2
  <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
  <html>
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;
10
+ overflow: hidden;
11
+ background: #000;
12
+ font-family: 'Courier New', monospace;
13
+ }
14
+
15
+ #loading {
16
+ position: fixed;
17
+ top: 50%;
18
+ left: 50%;
19
+ transform: translate(-50%, -50%);
20
+ background: rgba(0,0,0,0.8);
21
+ padding: 20px;
22
+ border-radius: 10px;
23
+ z-index: 2000;
24
+ text-align: center;
25
+ }
26
+
27
+ .loading-spinner {
28
+ width: 50px;
29
+ height: 50px;
30
+ border: 5px solid #0f0;
31
+ border-top: 5px solid transparent;
32
+ border-radius: 50%;
33
+ animation: spin 1s linear infinite;
34
+ margin: 0 auto 20px;
35
+ }
36
+
37
+ @keyframes spin {
38
+ 0% { transform: rotate(0deg); }
39
+ 100% { transform: rotate(360deg); }
40
+ }
41
+
42
+ .loading-text {
43
+ color: #0f0;
44
+ font-size: 24px;
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;
74
+ left: 10px;
75
+ color: #0f0;
76
+ background: rgba(0,20,0,0.7);
77
+ padding: 10px;
78
+ font-size: 14px;
79
+ z-index: 1001;
80
+ border: 1px solid #0f0;
81
+ border-radius: 5px;
82
+ user-select: none;
83
+ }
84
+
85
+ #crosshair {
86
+ position: fixed;
87
+ top: 50%;
88
+ left: 50%;
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;
96
+ }
97
+
98
+ #crosshair::before,
99
+ #crosshair::after {
100
+ content: '';
101
+ position: absolute;
102
+ background: rgba(0,255,0,0.7);
103
+ }
104
+
105
+ #crosshair::before {
106
+ top: 50%;
107
+ left: -10px;
108
+ right: -10px;
109
+ height: 2px;
110
+ transform: translateY(-50%);
111
+ }
112
+
113
+ #crosshair::after {
114
+ left: 50%;
115
+ top: -10px;
116
+ bottom: -10px;
117
+ width: 2px;
118
+ transform: translateX(-50%);
119
+ }
120
+
121
+ #healthBar {
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
+
134
+ #health {
135
+ width: 100%;
136
+ height: 100%;
137
+ background: linear-gradient(90deg, #0f0, #00ff00);
138
+ transition: width 0.3s;
139
+ }
140
+
141
+ #ammo {
142
+ position: absolute;
143
+ bottom: 20px;
144
+ right: 20px;
145
+ color: #0f0;
146
+ background: rgba(0,20,0,0.7);
147
+ padding: 10px;
148
+ font-size: 20px;
149
+ z-index: 1001;
150
+ border: 1px solid #0f0;
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
+ {
263
+ "imports": {
264
+ "three": "https://unpkg.com/three@0.157.0/build/three.module.js",
265
+ "three/addons/": "https://unpkg.com/three@0.157.0/examples/jsm/"
266
+ }
267
+ }
268
+ </script>
269
+ <script type="module" src="game.js"></script>
270
+ </body>
271
+ </html>