Hugging Face's logo

Spaces:
MoneyPack
/
anycoder-0febd4f4
Running

App Files Community
MoneyPack commited on
Commit
c09a8c4
·
verified ·
1 Parent(s): 2f3bb76

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +698 -19
index.html CHANGED
@@ -1,19 +1,698 @@
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 lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>HELLOWORLDS 2 - Strategic Command Interface</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="preconnect" href="https://fonts.googleapis.com">
9
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
+ <link href="https://fonts.googleapis.com/css2?family=Black+Ops+One&family=Rajdhani:wght@400;600;700&family=Share+Tech+Mono&display=swap" rel="stylesheet">
11
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
12
+
13
+ <script>
14
+ tailwind.config = {
15
+ theme: {
16
+ extend: {
17
+ colors: {
18
+ 'helldiver-yellow': '#FFE600',
19
+ 'helldiver-dark': '#1a1a1a',
20
+ 'helldiver-darker': '#0f0f0f',
21
+ 'helldiver-red': '#e63946',
22
+ 'helldiver-blue': '#4cc9f0',
23
+ 'helldiver-green': '#2ecc71',
24
+ },
25
+ fontFamily: {
26
+ 'display': ['"Black Ops One"', 'cursive'],
27
+ 'ui': ['"Rajdhani"', 'sans-serif'],
28
+ 'mono': ['"Share Tech Mono"', 'monospace'],
29
+ },
30
+ animation: {
31
+ 'spin-slow': 'spin 12s linear infinite',
32
+ 'pulse-fast': 'pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite',
33
+ 'scanline': 'scanline 8s linear infinite',
34
+ 'glitch': 'glitch 1s linear infinite',
35
+ 'float': 'float 6s ease-in-out infinite',
36
+ 'loader': 'loader 1s linear infinite',
37
+ },
38
+ keyframes: {
39
+ scanline: {
40
+ '0%': { transform: 'translateY(-100%)' },
41
+ '100%': { transform: 'translateY(100%)' }
42
+ },
43
+ glitch: {
44
+ '2%, 64%': { transform: 'translate(2px,0) skew(0deg)' },
45
+ '4%, 60%': { transform: 'translate(-2px,0) skew(0deg)' },
46
+ '62%': { transform: 'translate(0,0) skew(5deg)' }
47
+ },
48
+ float: {
49
+ '0%, 100%': { transform: 'translateY(0)' },
50
+ '50%': { transform: 'translateY(-20px)' }
51
+ },
52
+ loader: {
53
+ '0%': { width: '0%' },
54
+ '100%': { width: '100%' }
55
+ }
56
+ }
57
+ }
58
+ }
59
+ }
60
+ </script>
61
+
62
+ <style>
63
+ :root {
64
+ --neon-yellow: #FFE600;
65
+ --neon-blue: #4cc9f0;
66
+ --neon-red: #e63946;
67
+ --bg-dark: #0a0a0a;
68
+ }
69
+
70
+ body {
71
+ background-color: var(--bg-dark);
72
+ color: white;
73
+ font-family: 'Rajdhani', sans-serif;
74
+ overflow-x: hidden;
75
+ }
76
+
77
+ /* Custom Scrollbar */
78
+ ::-webkit-scrollbar {
79
+ width: 6px;
80
+ }
81
+ ::-webkit-scrollbar-track {
82
+ background: #1a1a1a;
83
+ }
84
+ ::-webkit-scrollbar-thumb {
85
+ background: var(--helldiver-yellow);
86
+ border-radius: 3px;
87
+ }
88
+
89
+ /* Scanline Overlay */
90
+ .scanlines {
91
+ position: fixed;
92
+ top: 0;
93
+ left: 0;
94
+ width: 100%;
95
+ height: 100%;
96
+ background: linear-gradient(
97
+ to bottom,
98
+ rgba(255,255,255,0),
99
+ rgba(255,255,255,0) 50%,
100
+ rgba(0,0,0,0.1) 50%,
101
+ rgba(0,0,0,0.1)
102
+ );
103
+ background-size: 100% 4px;
104
+ pointer-events: none;
105
+ z-index: 50;
106
+ opacity: 0.6;
107
+ }
108
+
109
+ .scanline-bar {
110
+ width: 100%;
111
+ height: 5px;
112
+ background: rgba(255, 230, 0, 0.1);
113
+ position: absolute;
114
+ z-index: 51;
115
+ animation: scanline 6s linear infinite;
116
+ opacity: 0.3;
117
+ }
118
+
119
+ /* Tactical Borders */
120
+ .tactical-border {
121
+ position: relative;
122
+ border: 1px solid rgba(255, 230, 0, 0.3);
123
+ background: rgba(20, 20, 20, 0.8);
124
+ backdrop-filter: blur(4px);
125
+ }
126
+
127
+ .tactical-border::before, .tactical-border::after {
128
+ content: '';
129
+ position: absolute;
130
+ width: 10px;
131
+ height: 10px;
132
+ border: 2px solid var(--neon-yellow);
133
+ transition: all 0.3s ease;
134
+ }
135
+ .tactical-border::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
136
+ .tactical-border::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
137
+
138
+ .tactical-border:hover::before, .tactical-border:hover::after {
139
+ width: 100%;
140
+ height: 100%;
141
+ opacity: 0.5;
142
+ }
143
+
144
+ /* CRT Flicker */
145
+ .crt-flicker {
146
+ animation: flicker 0.15s infinite;
147
+ }
148
+ @keyframes flicker {
149
+ 0% { opacity: 0.97; }
150
+ 100% { opacity: 1; }
151
+ }
152
+
153
+ /* Weapon Card Hover */
154
+ .weapon-card {
155
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
156
+ clip-path: polygon(
157
+ 0 0,
158
+ 100% 0,
159
+ 100% calc(100% - 20px),
160
+ calc(100% - 20px) 100%,
161
+ 0 100%
162
+ );
163
+ }
164
+ .weapon-card:hover {
165
+ transform: translateY(-5px);
166
+ box-shadow: 0 10px 30px -10px rgba(255, 230, 0, 0.2);
167
+ border-color: var(--neon-yellow);
168
+ }
169
+
170
+ /* Hexagon Pattern Background */
171
+ .hex-bg {
172
+ background-color: #111;
173
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%23222222' fill-opacity='0.4' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-7.5L27.99 34H28v2.31h-.01L17 42.65V49h-2zM31 17.9v12.7l-10.99 6.34L9 30.6V17.9l11-6.35 11 6.35z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
174
+ }
175
+
176
+ /* Stratagem Input Grid */
177
+ .d-pad-btn {
178
+ width: 50px;
179
+ height: 50px;
180
+ background: #1a1a1a;
181
+ border: 1px solid #444;
182
+ color: white;
183
+ display: flex;
184
+ align-items: center;
185
+ justify-content: center;
186
+ cursor: pointer;
187
+ transition: all 0.1s;
188
+ font-family: 'Share Tech Mono', monospace;
189
+ font-weight: bold;
190
+ font-size: 1.2rem;
191
+ }
192
+ .d-pad-btn:active, .d-pad-btn.active {
193
+ background: var(--neon-yellow);
194
+ color: black;
195
+ transform: scale(0.95);
196
+ box-shadow: 0 0 15px var(--neon-yellow);
197
+ }
198
+ .d-pad-btn.wrong {
199
+ background: var(--neon-red);
200
+ color: white;
201
+ animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
202
+ }
203
+
204
+ @keyframes shake {
205
+ 10%, 90% { transform: translate3d(-1px, 0, 0); }
206
+ 20%, 80% { transform: translate3d(2px, 0, 0); }
207
+ 30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
208
+ 40%, 60% { transform: translate3d(4px, 0, 0); }
209
+ }
210
+
211
+ .stat-bar-fill {
212
+ transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
213
+ }
214
+ </style>
215
+ </head>
216
+ <body class="hex-bg min-h-screen flex flex-col selection:bg-helldiver-yellow selection:text-black">
217
+
218
+ <!-- Scanlines Overlay -->
219
+ <div class="scanlines"></div>
220
+ <div class="scanline-bar"></div>
221
+
222
+ <!-- Header -->
223
+ <header class="sticky top-0 z-40 bg-black/90 border-b border-helldiver-yellow/30 backdrop-blur-md">
224
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
225
+ <div class="flex items-center gap-3">
226
+ <div class="w-10 h-10 bg-helldiver-yellow flex items-center justify-center transform rotate-45 border-2 border-black">
227
+ <i class="fas fa-crosshairs text-black -rotate-45 text-xl"></i>
228
+ </div>
229
+ <div>
230
+ <h1 class="font-display text-2xl md:text-3xl text-white tracking-wider leading-none">HELLOWORLDS <span class="text-helldiver-yellow">2</span></h1>
231
+ <p class="text-xs text-gray-400 font-mono tracking-widest uppercase">Tactical Interface v2.4.1</p>
232
+ </div>
233
+ </div>
234
+
235
+ <div class="flex items-center gap-4">
236
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="hidden md:block text-xs font-mono text-gray-500 hover:text-helldiver-yellow transition-colors border border-gray-800 px-2 py-1 rounded">
237
+ <span class="text-helldiver-yellow">></span> Built with anycoder
238
+ </a>
239
+ <button id="sfx-toggle" class="text-gray-400 hover:text-white transition-colors">
240
+ <i class="fas fa-volume-up text-xl"></i>
241
+ </button>
242
+ </div>
243
+ </div>
244
+ </header>
245
+
246
+ <!-- Main Content -->
247
+ <main class="flex-grow container mx-auto px-4 py-8 relative z-10">
248
+
249
+ <!-- Hero Section -->
250
+ <section class="mb-12 relative overflow-hidden tactical-border p-8 bg-gradient-to-r from-helldiver-darker to-transparent">
251
+ <div class="absolute top-0 right-0 p-4 opacity-20">
252
+ <i class="fas fa-globe-americas text-9xl animate-spin-slow text-helldiver-yellow"></i>
253
+ </div>
254
+ <div class="relative z-10 max-w-2xl">
255
+ <div class="inline-block bg-helldiver-yellow text-black font-bold px-2 py-0.5 text-xs font-mono mb-2 animate-pulse">PRIORITY ALERT</div>
256
+ <h2 class="font-display text-4xl md:text-6xl text-white mb-4 leading-tight">LIBERTY IS <span class="text-helldiver-yellow text-stroke">NON-NEGOTIABLE</span></h2>
257
+ <p class="text-gray-300 font-mono text-lg mb-6 border-l-2 border-helldiver-yellow pl-4">
258
+ Access classified loadout data, stratagem codes, and enemy weakpoints.
259
+ <br>Enhance your combat readiness to secure freedom for Super Earth.
260
+ </p>
261
+ <div class="flex flex-wrap gap-4">
262
+ <button onclick="scrollToSection('armory')" class="bg-helldiver-yellow text-black font-bold font-ui px-8 py-3 hover:bg-white transition-colors clip-path-slant">
263
+ ACCESS ARMORY
264
+ </button>
265
+ <button onclick="scrollToSection('stratagems')" class="border border-white/30 text-white font-mono px-8 py-3 hover:border-helldiver-yellow hover:text-helldiver-yellow transition-colors">
266
+ > STRATAGEMS
267
+ </button>
268
+ </div>
269
+ </div>
270
+ </section>
271
+
272
+ <!-- Armory Simulator -->
273
+ <section id="armory" class="mb-16">
274
+ <div class="flex items-end justify-between mb-6 border-b border-gray-800 pb-2">
275
+ <h2 class="font-display text-3xl text-white"><i class="fas fa-cube text-helldiver-yellow mr-2"></i> LOADOUT SIMULATOR</h2>
276
+ <span class="text-helldiver-yellow font-mono text-sm">SIMULATION_ENV: ACTIVE</span>
277
+ </div>
278
+
279
+ <div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
280
+ <!-- Left: Weapon Selection -->
281
+ <div class="lg:col-span-4 flex flex-col gap-4">
282
+ <div class="tactical-border p-4">
283
+ <h3 class="text-helldiver-yellow font-mono text-sm mb-3 border-b border-gray-700 pb-2">PRIMARY WEAPONS</h3>
284
+ <div class="space-y-2 max-h-64 overflow-y-auto pr-2" id="weapon-list">
285
+ <!-- Populated by JS -->
286
+ </div>
287
+ </div>
288
+
289
+ <div class="tactical-border p-4">
290
+ <h3 class="text-helldiver-yellow font-mono text-sm mb-3 border-b border-gray-700 pb-2">BOOSTERS / MODS</h3>
291
+ <div class="grid grid-cols-2 gap-2">
292
+ <button class="mod-btn border border-gray-700 p-2 text-xs font-mono text-center hover:border-helldiver-yellow hover:text-helldiver-yellow transition-colors" data-type="range">+ RANGE</button>
293
+ <button class="mod-btn border border-gray-700 p-2 text-xs font-mono text-center hover:border-helldiver-yellow hover:text-helldiver-yellow transition-colors" data-type="recoil">- RECOIL</button>
294
+ <button class="mod-btn border border-gray-700 p-2 text-xs font-mono text-center hover:border-helldiver-yellow hover:text-helldiver-yellow transition-colors" data-type="mag">+ MAG</button>
295
+ <button class="mod-btn border border-gray-700 p-2 text-xs font-mono text-center hover:border-helldiver-yellow hover:text-helldiver-yellow transition-colors" data-type="speed">+ RATE</button>
296
+ </div>
297
+ </div>
298
+ </div>
299
+
300
+ <!-- Center: Visualizer -->
301
+ <div class="lg:col-span-4 relative tactical-border bg-black/50 flex flex-col items-center justify-center p-6 min-h-[400px]">
302
+ <div class="absolute inset-0 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-helldiver-yellow/5 to-transparent pointer-events-none"></div>
303
+ <div class="w-full text-center mb-4">
304
+ <h3 id="active-weapon-name" class="font-display text-3xl text-white tracking-widest">AR-23 LIBERATOR</h3>
305
+ <p id="active-weapon-desc" class="text-gray-400 font-mono text-sm mt-1">Standard-issue assault rifle. Reliable and versatile.</p>
306
+ </div>
307
+
308
+ <div class="relative w-48 h-48 mb-6 group">
309
+ <div class="absolute inset-0 border-2 border-helldiver-yellow/20 rounded-full animate-spin-slow border-dashed"></div>
310
+ <div class="absolute inset-2 border border-helldiver-yellow/40 rounded-full"></div>
311
+ <!-- Dynamic SVG Icon based on weapon type -->
312
+ <div class="absolute inset-0 flex items-center justify-center text-helldiver-yellow text-6xl" id="weapon-icon-container">
313
+ <i class="fas fa-crosshairs"></i>
314
+ </div>
315
+ </div>
316
+
317
+ <div class="w-full space-y-4 mt-4">
318
+ <div class="flex justify-between text-xs font-mono text-gray-400">
319
+ <span>DAMAGE</span>
320
+ <span id="stat-damage-val">55</span>
321
+ </div>
322
+ <div class="h-2 bg-gray-800 w-full">
323
+ <div id="stat-damage-bar" class="h-full bg-helldiver-yellow stat-bar-fill" style="width: 55%"></div>
324
+ </div>
325
+
326
+ <div class="flex justify-between text-xs font-mono text-gray-400">
327
+ <span>FIRE RATE</span>
328
+ <span id="stat-rate-val">60</span>
329
+ </div>
330
+ <div class="h-2 bg-gray-800 w-full">
331
+ <div id="stat-rate-bar" class="h-full bg-helldiver-yellow stat-bar-fill" style="width: 60%"></div>
332
+ </div>
333
+
334
+ <div class="flex justify-between text-xs font-mono text-gray-400">
335
+ <span>RECOIL</span>
336
+ <span id="stat-recoil-val">40</span>
337
+ </div>
338
+ <div class="h-2 bg-gray-800 w-full">
339
+ <div id="stat-recoil-bar" class="h-full bg-helldiver-yellow stat-bar-fill" style="width: 40%"></div>
340
+ </div>
341
+ </div>
342
+ </div>
343
+
344
+ <!-- Right: Perks & Grenades -->
345
+ <div class="lg:col-span-4 flex flex-col gap-4">
346
+ <div class="tactical-border p-4 flex-grow">
347
+ <h3 class="text-helldiver-yellow font-mono text-sm mb-3 border-b border-gray-700 pb-2">AMMO TYPE</h3>
348
+ <div class="space-y-2">
349
+ <div class="ammo-option cursor-pointer border border-gray-700 p-3 flex justify-between items-center hover:bg-white/5 transition-colors" onclick="setAmmo('standard')">
350
+ <div>
351
+ <div class="font-bold text-white text-sm">STANDARD</div>
352
+ <div class="text-xs text-gray-500 font-mono">Balanced Performance</div>
353
+ </div>
354
+ <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
355
+ </div>
356
+ <div class="ammo-option cursor-pointer border border-gray-700 p-3 flex justify-between items-center hover:bg-white/5 transition-colors" onclick="setAmmo('ap')">
357
+ <div>
358
+ <div class="font-bold text-white text-sm">ARMOR PIERCING</div>
359
+ <div class="text-xs text-gray-500 font-mono">-10% Recoil, +Armor Dmg</div>
360
+ </div>
361
+ <div class="w-3 h-3 rounded-full bg-red-500"></div>
362
+ </div>
363
+ <div class="ammo-option cursor-pointer border border-gray-700 p-3 flex justify-between items-center hover:bg-white/5 transition-colors" onclick="setAmmo('incendiary')">
364
+ <div>
365
+ <div class="font-bold text-white text-sm">INCENDIARY</div>
366
+ <div class="text-xs text-gray-500 font-mono">Fire DOT, -Accuracy</div>
367
+ </div>
368
+ <div class="w-3 h-3 rounded-full bg-orange-500"></div>
369
+ </div>
370
+ </div>
371
+
372
+ <div class="mt-6">
373
+ <h3 class="text-helldiver-yellow font-mono text-sm mb-3 border-b border-gray-700 pb-2">UTILITY</h3>
374
+ <div class="grid grid-cols-3 gap-2">
375
+ <button class="bg-gray-800 p-2 hover:bg-helldiver-yellow hover:text-black transition-colors text-xs font-mono">STIM</button>
376
+ <button class="bg-gray-800 p-2 hover:bg-helldiver-yellow hover:text-black transition-colors text-xs font-mono">GRENADE</button>
377
+ <button class="bg-gray-800 p-2 hover:bg-helldiver-yellow hover:text-black transition-colors text-xs font-mono">SHIELD</button>
378
+ </div>
379
+ </div>
380
+ </div>
381
+ </div>
382
+ </div>
383
+ </section>
384
+
385
+ <!-- Stratagem Input Trainer -->
386
+ <section id="stratagems" class="mb-16">
387
+ <div class="flex items-end justify-between mb-6 border-b border-gray-800 pb-2">
388
+ <h2 class="font-display text-3xl text-white"><i class="fas fa-gamepad text-helldiver-yellow mr-2"></i> STRATAGEM INPUT</h2>
389
+ <span class="text-helldiver-yellow font-mono text-sm">USE ARROW KEYS OR BUTTONS</span>
390
+ </div>
391
+
392
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
393
+ <!-- Input Device -->
394
+ <div class="tactical-border p-8 flex flex-col items-center justify-center bg-black/40">
395
+ <div class="text-gray-400 font-mono mb-6 text-center">
396
+ INPUT CODE SEQUENCE<br>
397
+ <span id="current-sequence-display" class="text-2xl text-white tracking-[0.5em] h-8 block mt-2">_ _ _ _ _ _</span>
398
+ </div>
399
+
400
+ <div class="grid grid-cols-3 gap-2 bg-gray-900 p-4 rounded-lg border border-gray-700 relative">
401
+ <!-- Decorative Screws -->
402
+ <div class="absolute top-2 left-2 w-2 h-2 rounded-full bg-gray-600"></div>
403
+ <div class="absolute top-2 right-2 w-2 h-2 rounded-full bg-gray-600"></div>
404
+ <div class="absolute bottom-2 left-2 w-2 h-2 rounded-full bg-gray-600"></div>
405
+ <div class="absolute bottom-2 right-2 w-2 h-2 rounded-full bg-gray-600"></div>
406
+
407
+ <div></div>
408
+ <button class="d-pad-btn" data-key="up">▲</button>
409
+ <div></div>
410
+
411
+ <button class="d-pad-btn" data-key="left">◀</button>
412
+ <button class="d-pad-btn bg-red-900/50 border-red-500/50 hover:bg-red-500" id="cancel-btn" onclick="resetStratagem()">✕</button>
413
+ <button class="d-pad-btn" data-key="right">▶</button>
414
+
415
+ <div></div>
416
+ <button class="d-pad-btn" data-key="down">▼</button>
417
+ <div></div>
418
+ </div>
419
+
420
+ <div class="mt-6 text-center">
421
+ <div id="stratagem-feedback" class="h-6 font-bold font-mono text-helldiver-yellow">READY</div>
422
+ </div>
423
+ </div>
424
+
425
+ <!-- Stratagem Database -->
426
+ <div class="tactical-border p-0 overflow-hidden flex flex-col">
427
+ <div class="bg-gray-900 p-3 border-b border-gray-800 flex gap-2">
428
+ <input type="text" placeholder="SEARCH DATABASE..." class="bg-black text-white font-mono px-3 py-1 border border-gray-700 focus:border-helldiver-yellow outline-none w-full text-sm">
429
+ <button class="bg-helldiver-yellow text-black px-3 py-1 font-bold"><i class="fas fa-search"></i></button>
430
+ </div>
431
+ <div class="overflow-y-auto max-h-[350px] p-2 space-y-2" id="stratagem-list">
432
+ <!-- Populated by JS -->
433
+ </div>
434
+ </div>
435
+ </div>
436
+ </section>
437
+
438
+ <!-- Enemies Codex -->
439
+ <section id="codex" class="mb-16">
440
+ <div class="flex items-end justify-between mb-6 border-b border-gray-800 pb-2">
441
+ <h2 class="font-display text-3xl text-white"><i class="fas fa-book-skull text-helldiver-yellow mr-2"></i> ENEMY CODEX</h2>
442
+ <div class="flex gap-2">
443
+ <button onclick="filterEnemies('all')" class="px-3 py-1 text-xs font-mono border border-helldiver-yellow bg-helldiver-yellow text-black">ALL</button>
444
+ <button onclick="filterEnemies('bugs')" class="px-3 py-1 text-xs font-mono border border-gray-700 hover:border-helldiver-yellow">BUGS</button>
445
+ <button onclick="filterEnemies('bots')" class="px-3 py-1 text-xs font-mono border border-gray-700 hover:border-helldiver-yellow">BOTS</button>
446
+ </div>
447
+ </div>
448
+
449
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4" id="enemy-grid">
450
+ <!-- Populated by JS -->
451
+ </div>
452
+ </section>
453
+
454
+ </main>
455
+
456
+ <footer class="bg-black border-t border-helldiver-yellow/30 py-8 mt-auto">
457
+ <div class="container mx-auto px-4 text-center">
458
+ <h2 class="font-display text-4xl text-white mb-2">FOR SUPER EARTH</h2>
459
+ <p class="text-gray-500 font-mono text-sm max-w-xl mx-auto mb-4">
460
+ This application is a fan-made tribute to Helldivers 2. All game assets and concepts belong to Arrowhead Game Studios.
461
+ <br>Built with <span class="text-helldiver-yellow">HTML, CSS, and JS</span>.
462
+ </p>
463
+ <div class="flex justify-center gap-4">
464
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="text-xs text-gray-600 hover:text-white transition-colors">
465
+ <span class="text-helldiver-yellow">>></span> Built with anycoder
466
+ </a>
467
+ </div>
468
+ <div class="mt-8 text-xs text-gray-700 font-mono">
469
+ SYSTEM STATUS: OPTIMAL // UPLINK: SECURE // DEMOCRACY: MANAGED
470
+ </div>
471
+ </div>
472
+ </footer>
473
+
474
+ <script>
475
+ // --- Data ---
476
+ const weapons = [
477
+ { id: 'liberator', name: 'AR-23 LIBERATOR', type: 'Assault Rifle', icon: 'fa-crosshairs', desc: 'The staple of the Helldiver arsenal. Reliable, balanced, and deadly.', stats: { dmg: 60, rate: 70, recoil: 40 } },
478
+ { id: 'breaker', name: 'SG-225 BREAKER', type: 'Shotgun', icon: 'fa-bullseye', desc: 'Shreds through light armor. Be careful of the reload time.', stats: { dmg: 90, rate: 30, recoil: 80 } },
479
+ { id: 'sickle', name: 'LAS-5 SICKLE', type: 'Energy Weapon', icon: 'fa-bolt', desc: 'Infinite ammo laser rifle. Overheats if fired continuously.', stats: { dmg: 50, rate: 80, recoil: 10 } },
480
+ { id: 'scorcher', name: 'PLAS-1 SCORCHER', type: 'Plasma Rifle', icon: 'fa-meteor', desc: 'Fires bolts of superheated plasma. Explodes on impact.', stats: { dmg: 95, rate: 20, recoil: 60 } },
481
+ { id: 'slugger', name: 'SG-8S SLUGGER', type: 'Slug Shotgun', icon: 'fa-angle-double-right', desc: 'Fires a single heavy slug. High penetration.', stats: { dmg: 80, rate: 40, recoil: 75 } },
482
+ { id: 'diligence', name: 'R-63 DILIGENCE', type: 'Marksman Rifle', icon: 'fa-binoculars', desc: 'Semi-automatic rifle with high accuracy at range.', stats: { dmg: 75, rate: 50, recoil: 45 } }
483
+ ];
484
+
485
+ const stratagems = [
486
+ { name: 'RESUPPLY', code: ['down', 'down', 'up', 'right'], icon: 'fa-box-open' },
487
+ { name: 'EAGLE 500KG', code: ['up', 'right', 'down', 'down', 'down'], icon: 'fa-bomb' },
488
+ { name: 'ORBITAL HE', code: ['right', 'right', 'right'], icon: 'fa-satellite' },
489
+ { name: 'JUMP PACK', code: ['down', 'up', 'up', 'down', 'up'], icon: 'fa-rocket' },
490
+ { name: 'SHIELD GEN', code: ['down', 'up', 'left', 'right', 'left', 'right'], icon: 'fa-shield-alt' },
491
+ { name: 'MECH SUIT', code: ['down', 'up', 'left', 'down', 'up', 'right', 'down', 'up'], icon: 'fa-robot' },
492
+ { name: 'TURRET', code: ['down', 'up', 'right', 'right', 'up'], icon: 'fa-crosshairs' },
493
+ { name: 'REINFORCE', code: ['up', 'down', 'right', 'left', 'up'], icon: 'fa-user-plus' },
494
+ { name: 'SEAF ARTILLERY', code: ['right', 'up', 'up', 'down'], icon: 'fa-ship' }
495
+ ];
496
+
497
+ const enemies = [
498
+ { name: 'SCOUT STRIDER', faction: 'bots', threat: 2, weak: 'Rear Engine', icon: 'fa-robot', color: 'text-blue-400' },
499
+ { name: 'BILE TITAN', faction: 'bugs', threat: 5, weak: 'Mouth', icon: 'fa-bug', color: 'text-green-500' },
500
+ { name: 'DEVASTATOR', faction: 'bots', threat: 4, weak: 'Head / Arms', icon: 'fa-robot', color: 'text-blue-400' },
501
+ { name: 'HUNTER', faction: 'bugs', threat: 3, weak: 'Head', icon: 'fa-spider', color: 'text-green-500' },
502
+ { name: 'HULK', faction: 'bots', threat: 4, weak: 'Rear Vents', icon: 'fa-robot', color: 'text-blue-400' },
503
+ { name: 'CHARGER', faction: 'bugs', threat: 3, weak: 'Rear Legs', icon: 'fa-horse-head', color: 'text-green-500' },
504
+ { name: 'BROOD COMMANDER', faction: 'bugs', threat: 2, weak: 'Head', icon: 'fa-crown', color: 'text-green-500' },
505
+ { name: 'COMMISSAR', faction: 'bots', threat: 3, weak: 'Head', icon: 'fa-user-secret', color: 'text-blue-400' }
506
+ ];
507
+
508
+ // --- State ---
509
+ let activeWeapon = weapons[0];
510
+ let currentStratagemInput = [];
511
+ let activeStratagemTarget = null;
512
+ let sfxEnabled = true;
513
+
514
+ // --- Audio Context (Simple Beeps) ---
515
+ const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
516
+ function playTone(freq, type, duration) {
517
+ if (!sfxEnabled) return;
518
+ if (audioCtx.state === 'suspended') audioCtx.resume();
519
+ const osc = audioCtx.createOscillator();
520
+ const gain = audioCtx.createGain();
521
+ osc.type = type;
522
+ osc.frequency.setValueAtTime(freq, audioCtx.currentTime);
523
+ gain.gain.setValueAtTime(0.1, audioCtx.currentTime);
524
+ gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + duration);
525
+ osc.connect(gain);
526
+ gain.connect(audioCtx.destination);
527
+ osc.start();
528
+ osc.stop(audioCtx.currentTime + duration);
529
+ }
530
+
531
+ // --- Armory Logic ---
532
+ function initArmory() {
533
+ const list = document.getElementById('weapon-list');
534
+ weapons.forEach(w => {
535
+ const btn = document.createElement('div');
536
+ btn.className = `weapon-card p-3 bg-gray-900 border border-gray-700 cursor-pointer flex items-center gap-3 hover:bg-gray-800 transition-all ${w.id === activeWeapon.id ? 'border-helldiver-yellow bg-gray-800' : ''}`;
537
+ btn.innerHTML = `
538
+ <div class="w-8 h-8 bg-black flex items-center justify-center border border-gray-600">
539
+ <i class="fas ${w.icon} text-gray-300"></i>
540
+ </div>
541
+ <div>
542
+ <div class="font-bold text-sm text-white font-mono leading-none">${w.name}</div>
543
+ <div class="text-xs text-gray-500 font-mono">${w.type}</div>
544
+ </div>
545
+ `;
546
+ btn.onclick = () => selectWeapon(w);
547
+ list.appendChild(btn);
548
+ });
549
+
550
+ // Mod buttons
551
+ document.querySelectorAll('.mod-btn').forEach(btn => {
552
+ btn.onclick = (e) => {
553
+ e.target.classList.toggle('bg-helldiver-yellow');
554
+ e.target.classList.toggle('text-black');
555
+ playTone(800, 'square', 0.1);
556
+ // Simulate stat update logic
557
+ updateStatsDisplay(activeWeapon);
558
+ };
559
+ });
560
+ }
561
+
562
+ function selectWeapon(w) {
563
+ activeWeapon = w;
564
+ playTone(600, 'sine', 0.1);
565
+
566
+ // Update UI list active state
567
+ const list = document.getElementById('weapon-list');
568
+ Array.from(list.children).forEach((child, idx) => {
569
+ if (weapons[idx].id === w.id) {
570
+ child.classList.add('border-helldiver-yellow', 'bg-gray-800');
571
+ } else {
572
+ child.classList.remove('border-helldiver-yellow', 'bg-gray-800');
573
+ }
574
+ });
575
+
576
+ // Update Details
577
+ document.getElementById('active-weapon-name').innerText = w.name;
578
+ document.getElementById('active-weapon-desc').innerText = w.desc;
579
+
580
+ // Update Icon
581
+ const iconContainer = document.getElementById('weapon-icon-container');
582
+ iconContainer.innerHTML = `<i class="fas ${w.icon}"></i>`;
583
+
584
+ updateStatsDisplay(w);
585
+ }
586
+
587
+ function updateStatsDisplay(w) {
588
+ // Simulate mod adjustments
589
+ let dmgMod = 0, rateMod = 0, recoilMod = 0;
590
+ document.querySelectorAll('.mod-btn').forEach(btn => {
591
+ if (btn.classList.contains('bg-helldiver-yellow')) {
592
+ if (btn.dataset.type === 'range') dmgMod += 10;
593
+ if (btn.dataset.type === 'speed') rateMod += 15;
594
+ if (btn.dataset.type === 'recoil') recoilMod -= 20;
595
+ if (btn.dataset.type === 'mag') recoilMod += 5; // just for logic
596
+ }
597
+ });
598
+
599
+ const finalDmg = Math.min(100, w.stats.dmg + dmgMod);
600
+ const finalRate = Math.min(100, w.stats.rate + rateMod);
601
+ const finalRecoil = Math.max(0, Math.min(100, w.stats.recoil + recoilMod));
602
+
603
+ animateValue('stat-damage-val', parseInt(document.getElementById('stat-damage-val').innerText), finalDmg, 500);
604
+ animateValue('stat-rate-val', parseInt(document.getElementById('stat-rate-val').innerText), finalRate, 500);
605
+ animateValue('stat-recoil-val', parseInt(document.getElementById('stat-recoil-val').innerText), finalRecoil, 500);
606
+
607
+ document.getElementById('stat-damage-bar').style.width = `${finalDmg}%`;
608
+ document.getElementById('stat-rate-bar').style.width = `${finalRate}%`;
609
+ document.getElementById('stat-recoil-bar').style.width = `${finalRecoil}%`;
610
+ }
611
+
612
+ function setAmmo(type) {
613
+ playTone(400, 'triangle', 0.2);
614
+ document.querySelectorAll('.ammo-option').forEach(el => {
615
+ el.classList.remove('border-helldiver-yellow', 'bg-white/10');
616
+ el.classList.add('border-gray-700');
617
+ });
618
+ // Find clicked element (rough approximation for this demo)
619
+ event.currentTarget.classList.remove('border-gray-700');
620
+ event.currentTarget.classList.add('border-helldiver-yellow', 'bg-white/10');
621
+ }
622
+
623
+ function animateValue(id, start, end, duration) {
624
+ if (start === end) return;
625
+ const range = end - start;
626
+ let current = start;
627
+ const increment = end > start ? 1 : -1;
628
+ const stepTime = Math.abs(Math.floor(duration / range));
629
+ const obj = document.getElementById(id);
630
+ const timer = setInterval(function() {
631
+ current += increment;
632
+ obj.innerHTML = current;
633
+ if (current == end) {
634
+ clearInterval(timer);
635
+ }
636
+ }, Math.max(stepTime, 10)); // min 10ms
637
+ }
638
+
639
+ // --- Stratagem Logic ---
640
+ function initStratagems() {
641
+ const list = document.getElementById('stratagem-list');
642
+ stratagems.forEach(s => {
643
+ const row = document.createElement('div');
644
+ row.className = 'flex items-center gap-3 p-2 hover:bg-white/5 cursor-pointer border-b border-gray-800';
645
+
646
+ // Generate arrow icons
647
+ const arrows = s.code.map(dir => {
648
+ let arrow = '';
649
+ if(dir === 'up') arrow = '↑';
650
+ if(dir === 'down') arrow = '↓';
651
+ if(dir === 'left') arrow = '←';
652
+ if(dir === 'right') arrow = '→';
653
+ return `<span class="text-helldiver-yellow font-bold text-xs">${arrow}</span>`;
654
+ }).join(' ');
655
+
656
+ row.innerHTML = `
657
+ <div class="w-8 h-8 bg-gray-800 flex items-center justify-center text-helldiver-yellow text-xs"><i class="fas ${s.icon}"></i></div>
658
+ <div class="flex-grow">
659
+ <div class="text-xs font-bold text-white font-mono">${s.name}</div>
660
+ <div class="flex gap-1 mt-0.5">${arrows}</div>
661
+ </div>
662
+ <button class="text-xs border border-gray-600 px-2 py-1 hover:bg-helldiver-yellow hover:text-black font-mono transition-colors" onclick="setTargetStratagem('${s.name}')">TRAIN</button>
663
+ `;
664
+ list.appendChild(row);
665
+ });
666
+
667
+ // D-Pad Listeners
668
+ document.querySelectorAll('.d-pad-btn[data-key]').forEach(btn => {
669
+ btn.addEventListener('click', () => handleInput(btn.dataset.key));
670
+ });
671
+
672
+ // Keyboard Listeners
673
+ document.addEventListener('keydown', (e) => {
674
+ const keyMap = {
675
+ 'ArrowUp': 'up', 'w': 'up',
676
+ 'ArrowDown': 'down', 's': 'down',
677
+ 'ArrowLeft': 'left', 'a': 'left',
678
+ 'ArrowRight': 'right', 'd': 'right'
679
+ };
680
+ if (keyMap[e.key]) {
681
+ e.preventDefault(); // Stop scrolling
682
+ handleInput(keyMap[e.key]);
683
+ // Visual feedback
684
+ const btn = document.querySelector(`.d-pad-btn[data-key="${keyMap[e.key]}"]`);
685
+ if(btn) {
686
+ btn.classList.add('active');
687
+ setTimeout(() => btn.classList.remove('active'), 100);
688
+ }
689
+ }
690
+ });
691
+ }
692
+
693
+ function setTargetStratagem(name) {
694
+ activeStratagemTarget = stratagems.find(s => s.name === name);
695
+ resetStratagem();
696
+ playTone(800, 'sine', 0.3);
697
+ document.getElementById('stratagem-feedback').innerText = `SEQUENCE: ${name}`;
698
+ document.getElementById('stratagem-feedback').className = 'h-6 font-bold font-mono