Hugging Face's logo

Spaces:
Gannnaja
/
anycoder-94243c0e
Running

App Files Community
Gannnaja commited on
Commit
ca18fa8
·
verified ·
1 Parent(s): dad415f

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +516 -19
index.html CHANGED
@@ -1,19 +1,516 @@
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>Android FPS RPG Adventure - Retro Edition</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <style>
9
+ * {
10
+ margin: 0;
11
+ padding: 0;
12
+ box-sizing: border-box;
13
+ font-family: 'Courier New', monospace;
14
+ }
15
+
16
+ :root {
17
+ --primary-color: #8a2be2;
18
+ --secondary-color: #00ff00;
19
+ --accent-color: #ff4500;
20
+ --dark-bg: #0a0a0a;
21
+ --darker-bg: #050505;
22
+ --neon-glow: 0 0 10px var(--secondary-color), 0 0 20px var(--secondary-color);
23
+ }
24
+
25
+ body {
26
+ background: linear-gradient(135deg, var(--dark-bg) 0%, var(--darker-bg) 100%);
27
+ color: var(--secondary-color);
28
+ overflow-x: hidden;
29
+ min-height: 100vh;
30
+ }
31
+
32
+ .header {
33
+ display: flex;
34
+ justify-content: space-between;
35
+ align-items: center;
36
+ padding: 1.5rem 2rem;
37
+ border-bottom: 2px solid var(--primary-color);
38
+ box-shadow: var(--neon-glow);
39
+ position: relative;
40
+ }
41
+
42
+ .logo {
43
+ font-size: 2rem;
44
+ font-weight: bold;
45
+ text-shadow: var(--neon-glow);
46
+ letter-spacing: 2px;
47
+ }
48
+
49
+ .built-with {
50
+ color: var(--accent-color);
51
+ text-decoration: none;
52
+ font-size: 0.9rem;
53
+ padding: 0.5rem 1rem;
54
+ border: 1px solid var(--accent-color);
55
+ border-radius: 4px;
56
+ transition: all 0.3s ease;
57
+ }
58
+
59
+ .built-with:hover {
60
+ background-color: var(--accent-color);
61
+ color: var(--dark-bg);
62
+ box-shadow: 0 0 15px var(--accent-color);
63
+ }
64
+
65
+ .container {
66
+ max-width: 1200px;
67
+ margin: 0 auto;
68
+ padding: 2rem;
69
+ }
70
+
71
+ .game-header {
72
+ text-align: center;
73
+ margin-bottom: 3rem;
74
+ }
75
+
76
+ .game-title {
77
+ font-size: 3.5rem;
78
+ margin-bottom: 1rem;
79
+ text-shadow: var(--neon-glow);
80
+ letter-spacing: 4px;
81
+ animation: pulse 2s infinite;
82
+ }
83
+
84
+ @keyframes pulse {
85
+ 0%, 100% { opacity: 1; }
86
+ 50% { opacity: 0.7; }
87
+ }
88
+
89
+ .game-subtitle {
90
+ font-size: 1.5rem;
91
+ color: var(--primary-color);
92
+ margin-bottom: 2rem;
93
+ }
94
+
95
+ .game-content {
96
+ display: grid;
97
+ grid-template-columns: 1fr 1fr;
98
+ gap: 2rem;
99
+ margin-bottom: 3rem;
100
+ }
101
+
102
+ @media (max-width: 768px) {
103
+ .game-content {
104
+ grid-template-columns: 1fr;
105
+ }
106
+ }
107
+
108
+ .game-screen {
109
+ background: rgba(10, 10, 10, 0.8);
110
+ border: 2px solid var(--primary-color);
111
+ border-radius: 8px;
112
+ padding: 1.5rem;
113
+ box-shadow: var(--neon-glow);
114
+ position: relative;
115
+ overflow: hidden;
116
+ min-height: 400px;
117
+ display: flex;
118
+ flex-direction: column;
119
+ justify-content: center;
120
+ align-items: center;
121
+ }
122
+
123
+ .screen-title {
124
+ font-size: 1.8rem;
125
+ margin-bottom: 1.5rem;
126
+ text-align: center;
127
+ color: var(--accent-color);
128
+ }
129
+
130
+ .character-container {
131
+ display: flex;
132
+ justify-content: center;
133
+ margin: 1.5rem 0;
134
+ }
135
+
136
+ .character {
137
+ width: 120px;
138
+ height: 180px;
139
+ background: linear-gradient(45deg, #333, #555);
140
+ border: 2px solid var(--secondary-color);
141
+ border-radius: 8px;
142
+ position: relative;
143
+ box-shadow: var(--neon-glow);
144
+ }
145
+
146
+ .character::before {
147
+ content: '';
148
+ position: absolute;
149
+ top: 30px;
150
+ left: 50%;
151
+ transform: translateX(-50%);
152
+ width: 50px;
153
+ height: 50px;
154
+ background: #444;
155
+ border-radius: 50%;
156
+ border: 2px solid var(--secondary-color);
157
+ }
158
+
159
+ .character::after {
160
+ content: '';
161
+ position: absolute;
162
+ bottom: 30px;
163
+ left: 50%;
164
+ transform: translateX(-50%);
165
+ width: 80px;
166
+ height: 60px;
167
+ background: #444;
168
+ border-radius: 8px;
169
+ }
170
+
171
+ .stats-container {
172
+ display: grid;
173
+ grid-template-columns: 1fr 1fr;
174
+ gap: 1rem;
175
+ margin-top: 1.5rem;
176
+ }
177
+
178
+ .stat {
179
+ background: rgba(0, 0, 0, 0.6);
180
+ border: 1px solid var(--primary-color);
181
+ border-radius: 4px;
182
+ padding: 0.8rem;
183
+ text-align: center;
184
+ }
185
+
186
+ .stat-value {
187
+ font-size: 1.5rem;
188
+ color: var(--accent-color);
189
+ }
190
+
191
+ .controls {
192
+ display: grid;
193
+ grid-template-columns: repeat(3, 1fr);
194
+ gap: 1rem;
195
+ margin-top: 2rem;
196
+ }
197
+
198
+ .control-btn {
199
+ background: rgba(0, 0, 0, 0.7);
200
+ border: 1px solid var(--secondary-color);
201
+ color: var(--secondary-color);
202
+ padding: 0.8rem;
203
+ border-radius: 4px;
204
+ cursor: pointer;
205
+ transition: all 0.3s ease;
206
+ text-align: center;
207
+ font-size: 1.1rem;
208
+ }
209
+
210
+ .control-btn:hover {
211
+ background: var(--secondary-color);
212
+ color: var(--dark-bg);
213
+ box-shadow: var(--neon-glow);
214
+ }
215
+
216
+ .inventory {
217
+ display: grid;
218
+ grid-template-columns: repeat(4, 1fr);
219
+ gap: 0.8rem;
220
+ margin-top: 1.5rem;
221
+ }
222
+
223
+ .inventory-item {
224
+ background: rgba(0, 0, 0, 0.6);
225
+ border: 1px solid var(--primary-color);
226
+ border-radius: 4px;
227
+ height: 60px;
228
+ display: flex;
229
+ justify-content: center;
230
+ align-items: center;
231
+ font-size: 1.5rem;
232
+ transition: all 0.3s ease;
233
+ }
234
+
235
+ .inventory-item:hover {
236
+ border-color: var(--accent-color);
237
+ box-shadow: 0 0 10px var(--accent-color);
238
+ }
239
+
240
+ .game-info {
241
+ display: grid;
242
+ grid-template-columns: repeat(2, 1fr);
243
+ gap: 2rem;
244
+ margin-top: 3rem;
245
+ }
246
+
247
+ .info-card {
248
+ background: rgba(10, 10, 10, 0.8);
249
+ border: 2px solid var(--primary-color);
250
+ border-radius: 8px;
251
+ padding: 1.5rem;
252
+ box-shadow: var(--neon-glow);
253
+ }
254
+
255
+ .info-title {
256
+ font-size: 1.5rem;
257
+ margin-bottom: 1rem;
258
+ color: var(--accent-color);
259
+ text-align: center;
260
+ }
261
+
262
+ .features-list {
263
+ list-style-type: none;
264
+ }
265
+
266
+ .features-list li {
267
+ padding: 0.5rem 0;
268
+ border-bottom: 1px dotted var(--primary-color);
269
+ }
270
+
271
+ .features-list li:before {
272
+ content: '▶';
273
+ color: var(--secondary-color);
274
+ margin-right: 0.5rem;
275
+ }
276
+
277
+ .download-section {
278
+ text-align: center;
279
+ margin-top: 3rem;
280
+ padding: 2rem;
281
+ background: rgba(0, 0, 0, 0.6);
282
+ border-radius: 8px;
283
+ border: 2px solid var(--accent-color);
284
+ }
285
+
286
+ .download-btn {
287
+ display: inline-block;
288
+ background: var(--accent-color);
289
+ color: var(--dark-bg);
290
+ padding: 1rem 2rem;
291
+ font-size: 1.5rem;
292
+ font-weight: bold;
293
+ text-decoration: none;
294
+ border-radius: 8px;
295
+ margin-top: 1.5rem;
296
+ transition: all 0.3s ease;
297
+ box-shadow: 0 0 15px var(--accent-color);
298
+ }
299
+
300
+ .download-btn:hover {
301
+ transform: scale(1.05);
302
+ box-shadow: 0 0 25px var(--accent-color);
303
+ }
304
+
305
+ .footer {
306
+ text-align: center;
307
+ padding: 2rem;
308
+ margin-top: 3rem;
309
+ border-top: 1px solid var(--primary-color);
310
+ color: var(--primary-color);
311
+ }
312
+
313
+ .scanlines {
314
+ position: fixed;
315
+ top: 0;
316
+ left: 0;
317
+ width: 100%;
318
+ height: 100%;
319
+ pointer-events: none;
320
+ z-index: 100;
321
+ background: linear-gradient(
322
+ to bottom,
323
+ rgba(255, 255, 255, 0) 0%,
324
+ rgba(255, 255, 255, 0.03) 50%,
325
+ rgba(255, 255, 255, 0) 100%
326
+ );
327
+ background-size: 100% 4px;
328
+ opacity: 0.2;
329
+ }
330
+
331
+ .pixel-grid {
332
+ position: fixed;
333
+ top: 0;
334
+ left: 0;
335
+ width: 100%;
336
+ height: 100%;
337
+ background-image:
338
+ linear-gradient(rgba(18, 16, 16, 0.1) 1px, transparent 1px),
339
+ linear-gradient(90deg, rgba(18, 16, 16, 0.1) 1px, transparent 1px);
340
+ background-size: 20px 20px;
341
+ pointer-events: none;
342
+ z-index: 99;
343
+ }
344
+ </style>
345
+ </head>
346
+ <body>
347
+ <div class="scanlines"></div>
348
+ <div class="pixel-grid"></div>
349
+
350
+ <header class="header">
351
+ <div class="logo">RETRO FPS RPG</div>
352
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="built-with">Built with anycoder</a>
353
+ </header>
354
+
355
+ <div class="container">
356
+ <div class="game-header">
357
+ <h1 class="game-title">ANDROID FPS RPG ADVENTURE</h1>
358
+ <p class="game-subtitle">Experience the ultimate 3D retro gaming adventure on your Android device!</p>
359
+ </div>
360
+
361
+ <div class="game-content">
362
+ <div class="game-screen">
363
+ <h2 class="screen-title">CHARACTER CUSTOMIZATION</h2>
364
+ <div class="character-container">
365
+ <div class="character"></div>
366
+ </div>
367
+ <div class="stats-container">
368
+ <div class="stat">
369
+ <div>HEALTH</div>
370
+ <div class="stat-value">100/100</div>
371
+ </div>
372
+ <div class="stat">
373
+ <div>ARMOR</div>
374
+ <div class="stat-value">75/100</div>
375
+ </div>
376
+ <div class="stat">
377
+ <div>AMMO</div>
378
+ <div class="stat-value">30/30</div>
379
+ </div>
380
+ <div class="stat">
381
+ <div>LEVEL</div>
382
+ <div class="stat-value">5</div>
383
+ </div>
384
+ </div>
385
+ </div>
386
+
387
+ <div class="game-screen">
388
+ <h2 class="screen-title">GAME CONTROLS</h2>
389
+ <div class="controls">
390
+ <div class="control-btn">MOVE</div>
391
+ <div class="control-btn">AIM</div>
392
+ <div class="control-btn">SHOOT</div>
393
+ <div class="control-btn">JUMP</div>
394
+ <div class="control-btn">RELOAD</div>
395
+ <div class="control-btn">INVENTORY</div>
396
+ <div class="control-btn">SKILLS</div>
397
+ <div class="control-btn">MAP</div>
398
+ <div class="control-btn">PAUSE</div>
399
+ </div>
400
+
401
+ <h2 class="screen-title" style="margin-top: 2rem;">INVENTORY</h2>
402
+ <div class="inventory">
403
+ <div class="inventory-item"><i class="fas fa-gun"></i></div>
404
+ <div class="inventory-item"><i class="fas fa-syringe"></i></div>
405
+ <div class="inventory-item"><i class="fas fa-key"></i></div>
406
+ <div class="inventory-item"><i class="fas fa-shield-alt"></i></div>
407
+ <div class="inventory-item"><i class="fas fa-bolt"></i></div>
408
+ <div class="inventory-item"><i class="fas fa-bomb"></i></div>
409
+ <div class="inventory-item"><i class="fas fa-radio"></i></div>
410
+ <div class="inventory-item"><i class="fas fa-map"></i></div>
411
+ </div>
412
+ </div>
413
+ </div>
414
+
415
+ <div class="game-info">
416
+ <div class="info-card">
417
+ <h3 class="info-title">GAME FEATURES</h3>
418
+ <ul class="features-list">
419
+ <li>Retro 3D Graphics with Pixel Art Style</li>
420
+ <li>Immersive FPS Combat System</li>
421
+ <li>Deep RPG Character Progression</li>
422
+ <li>Open World Exploration</li>
423
+ <li>Multiple Weapon Types</li>
424
+ <li>Skill Trees and Abilities</li>
425
+ <li>Quest System with NPC Interactions</li>
426
+ <li>Dynamic Day/Night Cycle</li>
427
+ </ul>
428
+ </div>
429
+
430
+ <div class="info-card">
431
+ <h3 class="info-title">SYSTEM REQUIREMENTS</h3>
432
+ <ul class="features-list">
433
+ <li>Android 8.0 or Higher</li>
434
+ <li>2GB RAM Minimum</li>
435
+ <li>500MB Storage Space</li>
436
+ <li>OpenGL ES 3.0 Support</li>
437
+ <li>Multi-touch Screen</li>
438
+ <li>Gyroscope (Optional)</li>
439
+ </ul>
440
+ </div>
441
+ </div>
442
+
443
+ <div class="download-section">
444
+ <h2 class="info-title">DOWNLOAD NOW!</h2>
445
+ <p>Get ready for the ultimate retro FPS RPG adventure on your Android device</p>
446
+ <a href="#" class="download-btn">DOWNLOAD FOR ANDROID</a>
447
+ <p style="margin-top: 1rem; font-size: 0.9rem;">Available on Google Play Store</p>
448
+ </div>
449
+ </div>
450
+
451
+ <footer class="footer">
452
+ <p>© 2023 Retro FPS RPG Adventure. All rights reserved.</p>
453
+ <p>This is a demo application created for demonstration purposes.</p>
454
+ </footer>
455
+
456
+ <script>
457
+ // Add interactive elements
458
+ document.addEventListener('DOMContentLoaded', function() {
459
+ // Control buttons animation
460
+ const controlButtons = document.querySelectorAll('.control-btn');
461
+ controlButtons.forEach(button => {
462
+ button.addEventListener('click', function() {
463
+ this.style.transform = 'scale(0.95)';
464
+ setTimeout(() => {
465
+ this.style.transform = 'scale(1)';
466
+ }, 150);
467
+ });
468
+ });
469
+
470
+ // Inventory items animation
471
+ const inventoryItems = document.querySelectorAll('.inventory-item');
472
+ inventoryItems.forEach(item => {
473
+ item.addEventListener('click', function() {
474
+ this.style.backgroundColor = 'rgba(138, 43, 226, 0.3)';
475
+ setTimeout(() => {
476
+ this.style.backgroundColor = 'rgba(0, 0, 0, 0.6)';
477
+ this.style.boxShadow = '0 0 15px var(--accent-color)';
478
+ setTimeout(() => {
479
+ this.style.boxShadow = 'none';
480
+ }, 500);
481
+ }, 300);
482
+ });
483
+ });
484
+
485
+ // Health bar animation
486
+ let health = 100;
487
+ const healthElement = document.querySelector('.stat-value');
488
+
489
+ function decreaseHealth() {
490
+ if (health > 0) {
491
+ health -= 10;
492
+ healthElement.textContent = `${health}/100`;
493
+
494
+ // Visual feedback
495
+ if (health <= 30) {
496
+ healthElement.style.color = 'red';
497
+ } else if (health <= 70) {
498
+ healthElement.style.color = 'yellow';
499
+ }
500
+
501
+ setTimeout(() => {
502
+ if (health < 100) {
503
+ health += 10;
504
+ healthElement.textContent = `${health}/100`;
505
+ if (health > 30) healthElement.style.color = 'var(--accent-color)';
506
+ }
507
+ }, 2000);
508
+ }
509
+ }
510
+
511
+ // Simulate taking damage every 10 seconds
512
+ setInterval(decreaseHealth, 10000);
513
+ });
514
+ </script>
515
+ </body>
516
+ </html>