Hugging Face's logo

Spaces:
Cairo303
/
anycoder-bc1ac3dc
Running

App Files Community
Cairo303 commited on
Commit
1c1692e
·
verified ·
1 Parent(s): 9f69e39

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +552 -19
index.html CHANGED
@@ -1,19 +1,552 @@
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>Underworld Chronicles - Join the Syndicate</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: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
14
+ }
15
+
16
+ :root {
17
+ --neon-red: #ff003c;
18
+ --neon-blue: #00f3ff;
19
+ --neon-purple: #b967ff;
20
+ --neon-green: #39ff14;
21
+ --dark-bg: #0a0a0a;
22
+ --darker-bg: #050505;
23
+ --alley-gray: #1a1a1a;
24
+ }
25
+
26
+ body {
27
+ background: var(--dark-bg);
28
+ color: white;
29
+ overflow-x: hidden;
30
+ min-height: 100vh;
31
+ position: relative;
32
+ }
33
+
34
+ /* Animated background elements */
35
+ .alley-container {
36
+ position: fixed;
37
+ top: 0;
38
+ left: 0;
39
+ width: 100%;
40
+ height: 100%;
41
+ z-index: -1;
42
+ opacity: 0.7;
43
+ }
44
+
45
+ .alley-wall {
46
+ position: absolute;
47
+ height: 100%;
48
+ width: 30%;
49
+ background: linear-gradient(90deg, var(--alley-gray) 0%, transparent 100%);
50
+ }
51
+
52
+ .alley-wall.left {
53
+ left: 0;
54
+ }
55
+
56
+ .alley-wall.right {
57
+ right: 0;
58
+ transform: rotate(180deg);
59
+ }
60
+
61
+ .neon-sign {
62
+ position: absolute;
63
+ top: 20%;
64
+ right: 15%;
65
+ font-size: 1.5rem;
66
+ color: var(--neon-red);
67
+ text-shadow: 0 0 5px var(--neon-red), 0 0 10px var(--neon-red), 0 0 15px var(--neon-red);
68
+ animation: flicker 3s infinite alternate;
69
+ transform: rotate(-5deg);
70
+ }
71
+
72
+ .dripping-effect {
73
+ position: absolute;
74
+ bottom: 0;
75
+ width: 100%;
76
+ height: 20px;
77
+ background: linear-gradient(transparent, rgba(255, 0, 60, 0.1));
78
+ }
79
+
80
+ /* Main content */
81
+ .container {
82
+ max-width: 1200px;
83
+ margin: 0 auto;
84
+ padding: 2rem;
85
+ display: flex;
86
+ flex-direction: column;
87
+ align-items: center;
88
+ min-height: 100vh;
89
+ position: relative;
90
+ z-index: 1;
91
+ }
92
+
93
+ .header {
94
+ text-align: center;
95
+ margin-bottom: 2rem;
96
+ width: 100%;
97
+ }
98
+
99
+ .logo {
100
+ font-size: 4rem;
101
+ font-weight: 900;
102
+ text-transform: uppercase;
103
+ margin-bottom: 1rem;
104
+ background: linear-gradient(45deg, var(--neon-red), var(--neon-purple), var(--neon-blue));
105
+ -webkit-background-clip: text;
106
+ background-clip: text;
107
+ color: transparent;
108
+ text-shadow: 0 0 10px rgba(255, 0, 60, 0.5);
109
+ letter-spacing: 3px;
110
+ animation: glow 2s ease-in-out infinite alternate;
111
+ }
112
+
113
+ .tagline {
114
+ font-size: 1.5rem;
115
+ color: var(--neon-green);
116
+ text-shadow: 0 0 5px var(--neon-green);
117
+ margin-bottom: 0.5rem;
118
+ font-style: italic;
119
+ }
120
+
121
+ .subtitle {
122
+ font-size: 1rem;
123
+ color: #aaa;
124
+ max-width: 600px;
125
+ margin: 0 auto 2rem;
126
+ line-height: 1.5;
127
+ }
128
+
129
+ /* Signup form */
130
+ .signup-container {
131
+ background: rgba(10, 10, 10, 0.8);
132
+ border: 2px solid var(--neon-red);
133
+ border-radius: 10px;
134
+ padding: 2rem;
135
+ width: 100%;
136
+ max-width: 500px;
137
+ box-shadow: 0 0 20px rgba(255, 0, 60, 0.3);
138
+ position: relative;
139
+ overflow: hidden;
140
+ }
141
+
142
+ .signup-container::before {
143
+ content: '';
144
+ position: absolute;
145
+ top: -10px;
146
+ left: -10px;
147
+ right: -10px;
148
+ bottom: -10px;
149
+ background: linear-gradient(45deg, var(--neon-red), var(--neon-purple), var(--neon-blue), var(--neon-green));
150
+ z-index: -1;
151
+ border-radius: 12px;
152
+ opacity: 0.3;
153
+ animation: borderGlow 3s linear infinite;
154
+ }
155
+
156
+ .form-title {
157
+ text-align: center;
158
+ font-size: 1.8rem;
159
+ margin-bottom: 1.5rem;
160
+ color: var(--neon-blue);
161
+ text-shadow: 0 0 5px var(--neon-blue);
162
+ }
163
+
164
+ .form-group {
165
+ margin-bottom: 1.5rem;
166
+ position: relative;
167
+ }
168
+
169
+ .form-label {
170
+ display: block;
171
+ margin-bottom: 0.5rem;
172
+ color: var(--neon-green);
173
+ font-weight: 600;
174
+ }
175
+
176
+ .form-input {
177
+ width: 100%;
178
+ padding: 12px 15px;
179
+ background: rgba(30, 30, 30, 0.8);
180
+ border: 1px solid #333;
181
+ border-radius: 5px;
182
+ color: white;
183
+ font-size: 1rem;
184
+ transition: all 0.3s;
185
+ }
186
+
187
+ .form-input:focus {
188
+ outline: none;
189
+ border-color: var(--neon-blue);
190
+ box-shadow: 0 0 10px rgba(0, 243, 255, 0.5);
191
+ }
192
+
193
+ .select-wrapper {
194
+ position: relative;
195
+ }
196
+
197
+ .select-wrapper::after {
198
+ content: '\f078';
199
+ font-family: 'Font Awesome 6 Free';
200
+ font-weight: 900;
201
+ position: absolute;
202
+ right: 15px;
203
+ top: 50%;
204
+ transform: translateY(-50%);
205
+ color: var(--neon-blue);
206
+ pointer-events: none;
207
+ }
208
+
209
+ .form-select {
210
+ width: 100%;
211
+ padding: 12px 15px;
212
+ background: rgba(30, 30, 30, 0.8);
213
+ border: 1px solid #333;
214
+ border-radius: 5px;
215
+ color: white;
216
+ font-size: 1rem;
217
+ appearance: none;
218
+ cursor: pointer;
219
+ }
220
+
221
+ .form-select:focus {
222
+ outline: none;
223
+ border-color: var(--neon-blue);
224
+ box-shadow: 0 0 10px rgba(0, 243, 255, 0.5);
225
+ }
226
+
227
+ .checkbox-group {
228
+ display: flex;
229
+ align-items: center;
230
+ margin-bottom: 1.5rem;
231
+ }
232
+
233
+ .checkbox-input {
234
+ margin-right: 10px;
235
+ accent-color: var(--neon-red);
236
+ }
237
+
238
+ .checkbox-label {
239
+ color: #ccc;
240
+ font-size: 0.9rem;
241
+ }
242
+
243
+ .checkbox-label a {
244
+ color: var(--neon-blue);
245
+ text-decoration: none;
246
+ }
247
+
248
+ .checkbox-label a:hover {
249
+ text-decoration: underline;
250
+ }
251
+
252
+ .submit-btn {
253
+ width: 100%;
254
+ padding: 15px;
255
+ background: linear-gradient(45deg, var(--neon-red), var(--neon-purple));
256
+ border: none;
257
+ border-radius: 5px;
258
+ color: white;
259
+ font-size: 1.2rem;
260
+ font-weight: 700;
261
+ text-transform: uppercase;
262
+ letter-spacing: 1px;
263
+ cursor: pointer;
264
+ transition: all 0.3s;
265
+ position: relative;
266
+ overflow: hidden;
267
+ }
268
+
269
+ .submit-btn:hover {
270
+ background: linear-gradient(45deg, var(--neon-purple), var(--neon-red));
271
+ box-shadow: 0 0 15px rgba(255, 0, 60, 0.7);
272
+ transform: translateY(-2px);
273
+ }
274
+
275
+ .submit-btn:active {
276
+ transform: translateY(0);
277
+ }
278
+
279
+ .submit-btn::after {
280
+ content: '';
281
+ position: absolute;
282
+ top: -50%;
283
+ left: -50%;
284
+ width: 200%;
285
+ height: 200%;
286
+ background: rgba(255, 255, 255, 0.1);
287
+ transform: rotate(45deg);
288
+ transition: all 0.5s;
289
+ }
290
+
291
+ .submit-btn:hover::after {
292
+ transform: rotate(45deg) translate(10%, 10%);
293
+ }
294
+
295
+ /* Features section */
296
+ .features {
297
+ display: grid;
298
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
299
+ gap: 2rem;
300
+ margin-top: 3rem;
301
+ width: 100%;
302
+ }
303
+
304
+ .feature-card {
305
+ background: rgba(20, 20, 20, 0.8);
306
+ border: 1px solid #333;
307
+ border-radius: 8px;
308
+ padding: 1.5rem;
309
+ text-align: center;
310
+ transition: all 0.3s;
311
+ }
312
+
313
+ .feature-card:hover {
314
+ border-color: var(--neon-purple);
315
+ transform: translateY(-5px);
316
+ box-shadow: 0 5px 15px rgba(185, 103, 255, 0.3);
317
+ }
318
+
319
+ .feature-icon {
320
+ font-size: 2.5rem;
321
+ color: var(--neon-green);
322
+ margin-bottom: 1rem;
323
+ }
324
+
325
+ .feature-title {
326
+ font-size: 1.2rem;
327
+ margin-bottom: 0.5rem;
328
+ color: var(--neon-blue);
329
+ }
330
+
331
+ .feature-desc {
332
+ color: #aaa;
333
+ font-size: 0.9rem;
334
+ line-height: 1.4;
335
+ }
336
+
337
+ /* Footer */
338
+ .footer {
339
+ margin-top: 3rem;
340
+ text-align: center;
341
+ color: #666;
342
+ font-size: 0.9rem;
343
+ width: 100%;
344
+ }
345
+
346
+ .footer a {
347
+ color: var(--neon-blue);
348
+ text-decoration: none;
349
+ }
350
+
351
+ /* Animations */
352
+ @keyframes glow {
353
+ from {
354
+ text-shadow: 0 0 10px rgba(255, 0, 60, 0.5);
355
+ }
356
+ to {
357
+ text-shadow: 0 0 20px rgba(255, 0, 60, 0.8), 0 0 30px rgba(255, 0, 60, 0.6);
358
+ }
359
+ }
360
+
361
+ @keyframes flicker {
362
+ 0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
363
+ opacity: 1;
364
+ }
365
+ 20%, 24%, 55% {
366
+ opacity: 0.7;
367
+ }
368
+ }
369
+
370
+ @keyframes borderGlow {
371
+ 0% {
372
+ filter: hue-rotate(0deg);
373
+ }
374
+ 100% {
375
+ filter: hue-rotate(360deg);
376
+ }
377
+ }
378
+
379
+ /* Responsive */
380
+ @media (max-width: 768px) {
381
+ .logo {
382
+ font-size: 2.5rem;
383
+ }
384
+
385
+ .tagline {
386
+ font-size: 1.2rem;
387
+ }
388
+
389
+ .signup-container {
390
+ padding: 1.5rem;
391
+ }
392
+
393
+ .features {
394
+ grid-template-columns: 1fr;
395
+ }
396
+ }
397
+
398
+ @media (max-width: 480px) {
399
+ .container {
400
+ padding: 1rem;
401
+ }
402
+
403
+ .logo {
404
+ font-size: 2rem;
405
+ }
406
+
407
+ .signup-container {
408
+ padding: 1rem;
409
+ }
410
+ }
411
+ </style>
412
+ </head>
413
+ <body>
414
+ <div class="alley-container">
415
+ <div class="alley-wall left"></div>
416
+ <div class="alley-wall right"></div>
417
+ <div class="neon-sign">BAR<br>& GRILL</div>
418
+ <div class="dripping-effect"></div>
419
+ </div>
420
+
421
+ <div class="container">
422
+ <header class="header">
423
+ <h1 class="logo">Underworld Chronicles</h1>
424
+ <p class="tagline">Join the Syndicate. Rule the Streets.</p>
425
+ <p class="subtitle">Build your criminal empire in this gritty text-based MMORPG. Forge alliances, pull off heists, and become the most feared name in the underworld.</p>
426
+ </header>
427
+
428
+ <div class="signup-container">
429
+ <h2 class="form-title">Create Your Criminal Identity</h2>
430
+ <form id="signup-form">
431
+ <div class="form-group">
432
+ <label class="form-label" for="username">Underworld Alias</label>
433
+ <input type="text" id="username" class="form-input" placeholder="Enter your criminal name" required>
434
+ </div>
435
+
436
+ <div class="form-group">
437
+ <label class="form-label" for="email">Contact (Email)</label>
438
+ <input type="email" id="email" class="form-input" placeholder="Your secure communication channel" required>
439
+ </div>
440
+
441
+ <div class="form-group">
442
+ <label class="form-label" for="password">Secret Code</label>
443
+ <input type="password" id="password" class="form-input" placeholder="Create your access code" required>
444
+ </div>
445
+
446
+ <div class="form-group">
447
+ <label class="form-label" for="confirm-password">Verify Secret Code</label>
448
+ <input type="password" id="confirm-password" class="form-input" placeholder="Confirm your access code" required>
449
+ </div>
450
+
451
+ <div class="form-group">
452
+ <label class="form-label" for="faction">Choose Your Faction</label>
453
+ <div class="select-wrapper">
454
+ <select id="faction" class="form-select" required>
455
+ <option value="">Select your crew</option>
456
+ <option value="syndicate">The Syndicate</option>
457
+ <option value="cartel">Cartel Kings</option>
458
+ <option value="mafia">Mafia Family</option>
459
+ <option value="yakuza">Yakuza Clan</option>
460
+ <option value="freelance">Freelance Operator</option>
461
+ </select>
462
+ </div>
463
+ </div>
464
+
465
+ <div class="form-group">
466
+ <label class="form-label" for="specialty">Criminal Specialty</label>
467
+ <div class="select-wrapper">
468
+ <select id="specialty" class="form-select" required>
469
+ <option value="">Select your expertise</option>
470
+ <option value="heist">Master Heist Planner</option>
471
+ <option value="smuggling">Smuggling Operations</option>
472
+ <option value="enforcement">Enforcement & Protection</option>
473
+ <option value="cybercrime">Cyber Crime</option>
474
+ <option value="drugs">Narcotics Distribution</option>
475
+ </select>
476
+ </div>
477
+ </div>
478
+
479
+ <div class="checkbox-group">
480
+ <input type="checkbox" id="terms" class="checkbox-input" required>
481
+ <label for="terms" class="checkbox-label">
482
+ I accept the <a href="#">Underworld Code</a> and understand the risks involved in criminal enterprise
483
+ </label>
484
+ </div>
485
+
486
+ <button type="submit" class="submit-btn">Join the Underworld</button>
487
+ </form>
488
+ </div>
489
+
490
+ <div class="features">
491
+ <div class="feature-card">
492
+ <div class="feature-icon">
493
+ <i class="fas fa-user-secret"></i>
494
+ </div>
495
+ <h3 class="feature-title">Build Your Empire</h3>
496
+ <p class="feature-desc">Start from the bottom and work your way up to become the city's most powerful crime lord.</p>
497
+ </div>
498
+
499
+ <div class="feature-card">
500
+ <div class="feature-icon">
501
+ <i class="fas fa-fist-raised"></i>
502
+ </div>
503
+ <h3 class="feature-title">Form Alliances & Rivalries</h3>
504
+ <p class="feature-desc">Forge powerful alliances or create bitter rivalries in the dangerous underworld.</p>
505
+ </div>
506
+
507
+ <div class="feature-card">
508
+ <div class="feature-icon">
509
+ <i class="fas fa-money-bill-wave"></i>
510
+ </div>
511
+ <h3 class="feature-title">Execute Lucrative Heists</h3>
512
+ <p class="feature-desc">Plan and execute high-stakes heists to fund your criminal operations.</p>
513
+ </div>
514
+ </div>
515
+
516
+ <footer class="footer">
517
+ <p>Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">anycoder</a> | Enter at your own risk</p>
518
+ </footer>
519
+ </div>
520
+
521
+ <script>
522
+ document.getElementById('signup-form').addEventListener('submit', function(e) {
523
+ e.preventDefault();
524
+
525
+ const password = document.getElementById('password').value;
526
+ const confirmPassword = document.getElementById('confirm-password').value;
527
+
528
+ if (password !== confirmPassword) {
529
+ alert('Secret codes do not match! Verify your access codes.');
530
+ return;
531
+ }
532
+
533
+ // In a real application, this would submit the form to a server
534
+ alert('Welcome to the Underworld! Your criminal identity is being processed. Check your email for further instructions.');
535
+
536
+ // Reset form
537
+ this.reset();
538
+ });
539
+
540
+ // Add some interactive effects
541
+ document.querySelectorAll('.form-input, .form-select').forEach(element => {
542
+ element.addEventListener('focus', function() {
543
+ this.parentElement.classList.add('focused');
544
+ });
545
+
546
+ element.addEventListener('blur', function() {
547
+ this.parentElement.classList.remove('focused');
548
+ });
549
+ });
550
+ </script>
551
+ </body>
552
+ </html>