Hugging Face's logo

Spaces:
Cairo303
/
anycoder-bc1ac3dc
Running

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

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +1193 -537
index.html CHANGED
@@ -1,552 +1,1208 @@
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>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
+
4
  <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Underworld Chronicles - Join the Syndicate</title>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ /* Underworld Crime UI Framework */
11
+ /* Colors & Base */
12
+ :root {
13
+ --deep-purple: #2d1b69;
14
+ --royal-purple: #4a2c8d;
15
+ --luxury-purple: #6b3fa0;
16
+ --gold: #d4af37;
17
+ --light-gold: #f4e4a6;
18
+ --dark-gold: #b8941f;
19
+ --platinum: #e5e4e2;
20
+ --charcoal: #1a1a1a;
21
+ --success: #2ecc71;
22
+ --warning: #f39c12;
23
+ --error: #e74c3c;
24
+ }
25
+
26
+ * {
27
+ margin: 0;
28
+ padding: 0;
29
+ box-sizing: border-box;
30
+ }
31
+
32
+ body {
33
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
34
+ background: linear-gradient(135deg, var(--charcoal) 0%, var(--deep-purple) 100%);
35
+ color: var(--platinum);
36
+ line-height: 1.6;
37
+ min-height: 100vh;
38
+ overflow-x: hidden;
39
+ }
40
+
41
+ /* Layout helpers */
42
+ .uc-container {
43
+ max-width: 1400px;
44
+ margin: 0 auto;
45
+ padding: 0 2rem;
46
+ }
47
+
48
+ .uc-section {
49
+ padding: 4rem 0;
50
+ }
51
+
52
+ /* -----------------------------------------------------------
53
+ HEADER / NAV
54
+ ----------------------------------------------------------- */
55
+ .uc-header {
56
+ background: rgba(45, 27, 105, 0.95);
57
+ border-bottom: 3px solid var(--gold);
58
+ padding: 1rem 0;
59
+ position: fixed;
60
+ width: 100%;
61
+ top: 0;
62
+ z-index: 1000;
63
+ backdrop-filter: blur(10px);
64
+ box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
65
+ }
66
+
67
+ .uc-nav {
68
+ display: flex;
69
+ justify-content: space-between;
70
+ align-items: center;
71
+ }
72
+
73
+ .uc-logo {
74
+ font-size: 2.3rem;
75
+ font-weight: bold;
76
+ background: linear-gradient(45deg, var(--gold), var(--light-gold));
77
+ -webkit-background-clip: text;
78
+ -webkit-text-fill-color: transparent;
79
+ text-shadow: 0 0 15px rgba(212, 175, 55, 0.5);
80
+ font-family: 'Impact', fantasy;
81
+ letter-spacing: 2px;
82
+ }
83
+
84
+ .uc-logo span {
85
+ -webkit-text-fill-color: var(--luxury-purple);
86
+ }
87
+
88
+ .uc-nav-menu {
89
+ list-style: none;
90
+ display: flex;
91
+ gap: 2rem;
92
+ }
93
+
94
+ .uc-nav-menu a {
95
+ color: var(--platinum);
96
+ text-decoration: none;
97
+ font-weight: 600;
98
+ text-transform: uppercase;
99
+ font-size: 0.9rem;
100
+ letter-spacing: 1px;
101
+ position: relative;
102
+ transition: all 0.3s ease;
103
+ }
104
+
105
+ .uc-nav-menu a:after {
106
+ content: '';
107
+ position: absolute;
108
+ width: 0;
109
+ height: 2px;
110
+ background: var(--gold);
111
+ bottom: -5px;
112
+ left: 0;
113
+ transition: width 0.3s ease;
114
+ }
115
+
116
+ .uc-nav-menu a:hover {
117
+ color: var(--gold);
118
+ }
119
+
120
+ .uc-nav-menu a:hover:after {
121
+ width: 100%;
122
+ }
123
+
124
+ .uc-nav-auth {
125
+ display: flex;
126
+ gap: 1rem;
127
+ }
128
+
129
+ /* Buttons */
130
+ .uc-btn {
131
+ padding: 0.7rem 1.8rem;
132
+ border-radius: 30px;
133
+ border: 2px solid var(--gold);
134
+ cursor: pointer;
135
+ font-size: 0.8rem;
136
+ text-transform: uppercase;
137
+ font-weight: 700;
138
+ letter-spacing: 1px;
139
+ transition: all 0.3s ease;
140
+ display: inline-flex;
141
+ align-items: center;
142
+ justify-content: center;
143
+ gap: 0.5rem;
144
+ }
145
+
146
+ .uc-btn-login {
147
+ background: transparent;
148
+ color: var(--gold);
149
+ }
150
+
151
+ .uc-btn-primary {
152
+ background: linear-gradient(45deg, var(--gold), var(--light-gold));
153
+ color: var(--charcoal);
154
+ }
155
+
156
+ .uc-btn-outline {
157
+ background: transparent;
158
+ color: var(--gold);
159
+ border: 2px solid var(--gold);
160
+ }
161
+
162
+ .uc-btn-block {
163
+ width: 100%;
164
+ }
165
+
166
+ .uc-btn:hover {
167
+ transform: translateY(-3px);
168
+ box-shadow: 0 0 15px rgba(212, 175, 55, 0.5);
169
+ }
170
+
171
+ /* -----------------------------------------------------------
172
+ HERO (Landing)
173
+ ----------------------------------------------------------- */
174
+ .uc-hero {
175
+ margin-top: 100px;
176
+ padding: 7rem 2rem 5rem;
177
+ text-align: center;
178
+ background: linear-gradient(rgba(45, 27, 105, 0.88), rgba(45, 27, 105, 0.94)), url('https://images.unsplash.com/photo-1604147491738-5e5baa3cf622?auto=format&fit=crop&w=1600&q=80');
179
+ background-size: cover;
180
+ background-position: center;
181
+ position: relative;
182
+ }
183
+
184
+ .uc-hero-title {
185
+ font-size: 4rem;
186
+ margin-bottom: 1rem;
187
+ font-family: 'Impact', fantasy;
188
+ background: linear-gradient(45deg, var(--gold), var(--light-gold));
189
+ -webkit-background-clip: text;
190
+ -webkit-text-fill-color: transparent;
191
+ text-shadow: 0 0 25px rgba(212, 175, 55, 0.7);
192
+ letter-spacing: 3px;
193
+ }
194
+
195
+ .uc-hero-subtitle {
196
+ font-size: 1.3rem;
197
+ max-width: 750px;
198
+ margin: 0 auto 2.5rem;
199
+ color: var(--platinum);
200
+ text-shadow: 0 2px 5px rgba(0, 0, 0, 0.7);
201
+ }
202
+
203
+ /* -----------------------------------------------------------
204
+ SECTION TITLES
205
+ ----------------------------------------------------------- */
206
+ .uc-section-title {
207
+ text-align: center;
208
+ font-size: 3rem;
209
+ margin-bottom: 3rem;
210
+ background: linear-gradient(45deg, var(--gold), var(--light-gold));
211
+ -webkit-background-clip: text;
212
+ -webkit-text-fill-color: transparent;
213
+ text-shadow: 0 0 15px rgba(212, 175, 55, 0.5);
214
+ font-family: 'Impact', fantasy;
215
+ letter-spacing: 2px;
216
+ position: relative;
217
+ }
218
+
219
+ .uc-section-title:after {
220
+ content: '';
221
+ position: absolute;
222
+ width: 150px;
223
+ height: 3px;
224
+ background: var(--gold);
225
+ bottom: -15px;
226
+ left: 50%;
227
+ transform: translateX(-50%);
228
+ }
229
+
230
+ /* -----------------------------------------------------------
231
+ CARDS / MOLDS
232
+ ----------------------------------------------------------- */
233
+ .uc-card {
234
+ background: linear-gradient(145deg, var(--royal-purple), var(--deep-purple)));
235
+ border-radius: 15px;
236
+ border: 2px solid var(--gold);
237
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
238
+ overflow: hidden;
239
+ position: relative;
240
+ transition: all 0.3s ease;
241
+ }
242
+
243
+ .uc-card:hover {
244
+ transform: translateY(-8px);
245
+ box-shadow: 0 15px 30px rgba(212, 175, 55, 0.3);
246
+ }
247
+
248
+ .uc-card-header {
249
+ background: linear-gradient(45deg, var(--gold), var(--dark-gold)));
250
+ padding: 1.2rem 1.5rem;
251
+ color: var(--charcoal);
252
+ font-weight: bold;
253
+ text-transform: uppercase;
254
+ letter-spacing: 1px;
255
+ display: flex;
256
+ justify-content: space-between;
257
+ align-items: center;
258
+ }
259
+
260
+ .uc-card-body {
261
+ padding: 1.8rem;
262
+ }
263
+
264
+ /* Feature icon card */
265
+ .uc-feature-icon {
266
+ font-size: 2.5rem;
267
+ color: var(--gold);
268
+ margin-bottom: 1rem;
269
+ }
270
+
271
+ /* Game card (image + text) */
272
+ .uc-game-card img {
273
+ width: 100%;
274
+ height: 220px;
275
+ object-fit: cover;
276
+ border-bottom: 2px solid var(--gold);
277
+ }
278
+
279
+ /* Simple stats boxes */
280
+ .uc-stat-grid {
281
+ display: grid;
282
+ grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)));
283
+ gap: 1.2rem;
284
+ }
285
+
286
+ .uc-stat-box {
287
+ background: rgba(0, 0, 0, 0.25);
288
+ border-radius: 10px;
289
+ border: 1px solid rgba(212, 175, 55, 0.25);
290
+ padding: 1rem;
291
+ text-align: center;
292
+ }
293
+
294
+ .uc-stat-value {
295
+ font-size: 1.7rem;
296
+ font-weight: bold;
297
+ color: var(--gold);
298
+ }
299
+
300
+ .uc-stat-label {
301
+ font-size: 0.8rem;
302
+ text-transform: uppercase;
303
+ letter-spacing: 1px;
304
+ }
305
+
306
+ /* -----------------------------------------------------------
307
+ FORMS (Login / Register)
308
+ ----------------------------------------------------------- */
309
+ .uc-auth-page {
310
+ min-height: 100vh;
311
+ display: flex;
312
+ align-items: center;
313
+ justify-content: center;
314
+ padding-top: 120px;
315
+ padding-bottom: 3rem;
316
+ }
317
+
318
+ .uc-auth-card {
319
+ max-width: 420px;
320
+ width: 100%;
321
+ margin: 0 1rem;
322
+ }
323
+
324
+ .uc-auth-logo {
325
+ text-align: center;
326
+ font-size: 2.4rem;
327
+ font-family: 'Impact', fantasy;
328
+ background: linear-gradient(45deg, var(--gold), var(--light-gold)));
329
+ -webkit-background-clip: text;
330
+ -webkit-text-fill-color: transparent;
331
+ text-shadow: 0 0 15px rgba(212, 175, 55, 0.6);
332
+ margin-bottom: 0.5rem;
333
+ }
334
+
335
+ .uc-auth-subtitle {
336
+ text-align: center;
337
+ font-size: 0.95rem;
338
+ opacity: 0.8;
339
+ margin-bottom: 1.2rem;
340
+ }
341
+
342
+ /* form basics */
343
+ .uc-form-group {
344
+ margin-bottom: 1.3rem;
345
+ }
346
+
347
+ .uc-form-label {
348
+ display: block;
349
+ margin-bottom: 0.4rem;
350
+ font-weight: 500;
351
+ }
352
+
353
+ .uc-input {
354
+ width: 100%;
355
+ padding: 0.8rem 1rem;
356
+ border-radius: 8px;
357
+ border: 1px solid rgba(212, 175, 55, 0.35);
358
+ background: rgba(0, 0, 0, 0.35);
359
+ color: var(--platinum);
360
+ font-size: 0.95rem;
361
+ transition: 0.3s;
362
+ }
363
+
364
+ .uc-input:focus {
365
+ outline: none;
366
+ border-color: var(--gold);
367
+ box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.3);
368
+ }
369
+
370
+ /* small helper text */
371
+ .uc-form-text {
372
+ font-size: 0.8rem;
373
+ opacity: 0.75;
374
+ margin-top: 0.25rem;
375
+ }
376
+
377
+ /* check / radio */
378
+ .uc-check {
379
+ display: flex;
380
+ align-items: center;
381
+ gap: 0.5rem;
382
+ font-size: 0.85rem;
383
+ }
384
+
385
+ .uc-check input {
386
+ accent-color: var(--gold);
387
+ }
388
+
389
+ /* -----------------------------------------------------------
390
+ DASHBOARD LAYOUT
391
+ ----------------------------------------------------------- */
392
+ .uc-app-layout {
393
+ display: grid;
394
+ grid-template-columns: 260px 1fr;
395
+ min-height: 100vh;
396
+ margin-top: 80px;
397
+ }
398
+
399
+ /* Sidebar */
400
+ .uc-sidebar {
401
+ background: linear-gradient(135deg, var(--deep-purple), var(--charcoal)));
402
+ border-right: 3px solid var(--gold);
403
+ padding: 1.5rem 1rem;
404
+ position: sticky;
405
+ top: 80px;
406
+ height: calc(100vh - 80px);
407
+ }
408
+
409
+ .uc-sidebar-title {
410
+ font-size: 0.9rem;
411
+ color: var(--gold);
412
+ text-transform: uppercase;
413
+ letter-spacing: 1px;
414
+ margin-bottom: 0.8rem;
415
+ }
416
+
417
+ .uc-sidebar-nav {
418
+ list-style: none;
419
+ }
420
+
421
+ .uc-sidebar-nav li {
422
+ margin-bottom: 0.1rem;
423
+ }
424
+
425
+ .uc-sidebar-link {
426
+ display: flex;
427
+ align-items: center;
428
+ gap: 0.6rem;
429
+ padding: 0.7rem 0.9rem;
430
+ border-radius: 8px;
431
+ color: var(--platinum);
432
+ text-decoration: none;
433
+ font-size: 0.9rem;
434
+ transition: 0.3s;
435
+ }
436
+
437
+ .uc-sidebar-link i {
438
+ width: 18px;
439
+ text-align: center;
440
+ }
441
+
442
+ .uc-sidebar-link:hover,
443
+ .uc-sidebar-link.active {
444
+ background: rgba(212, 175, 55, 0.12);
445
+ color: var(--gold);
446
+ }
447
+
448
+ /* Main content area */
449
+ .uc-app-main {
450
+ padding: 2rem;
451
+ }
452
+
453
+ .uc-app-main-header {
454
+ display: flex;
455
+ justify-content: space-between;
456
+ align-items: center;
457
+ margin-bottom: 1.5rem;
458
+ }
459
+
460
+ .uc-page-title {
461
+ font-size: 1.7rem;
462
+ color: var(--light-gold);
463
+ }
464
+
465
+ /* grid layouts */
466
+ .uc-grid-2 {
467
+ display: grid;
468
+ grid-template-columns: 2fr 1.2fr;
469
+ gap: 2rem;
470
+ }
471
+
472
+ .uc-grid-3 {
473
+ display: grid;
474
+ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)));
475
+ gap: 1.5rem;
476
+ }
477
+
478
+ /* Tables */
479
+ .uc-table {
480
+ width: 100%;
481
+ border-collapse: collapse;
482
+ font-size: 0.9rem;
483
+ }
484
+
485
+ .uc-table th,
486
+ .uc-table td {
487
+ padding: 0.8rem 0.7rem;
488
+ border-bottom: 1px solid rgba(212, 175, 55, 0.2);
489
+ }
490
+
491
+ .uc-table th {
492
+ text-align: left;
493
+ background: rgba(212, 175, 55, 0.12);
494
+ color: var(--gold);
495
+ text-transform: uppercase;
496
+ font-size: 0.75rem;
497
+ letter-spacing: 1px;
498
+ }
499
+
500
+ /* Badges / pills */
501
+ .uc-badge {
502
+ display: inline-block;
503
+ padding: 0.2rem 0.6rem;
504
+ border-radius: 999px;
505
+ font-size: 0.7rem;
506
+ text-transform: uppercase;
507
+ letter-spacing: 1px;
508
+ }
509
+
510
+ .uc-badge-live {
511
+ background: rgba(46, 204, 113, 0.15);
512
+ border: 1px solid var(--success);
513
+ color: var(--success);
514
+ }
515
+
516
+ .uc-badge-upcoming {
517
+ background: rgba(243, 156, 18, 0.15);
518
+ border: 1px solid var(--warning);
519
+ color: var(--warning);
520
+ }
521
+
522
+ /* -----------------------------------------------------------
523
+ FOOTER
524
+ ----------------------------------------------------------- */
525
+ .uc-footer {
526
+ margin-top: 4rem;
527
+ padding: 2rem 1rem;
528
+ text-align: center;
529
+ border-top: 2px solid rgba(212, 175, 55, 0.3);
530
+ background: rgba(0, 0, 0, 0.25);
531
+ font-size: 0.9rem;
532
+ }
533
+
534
+ /* -----------------------------------------------------------
535
+ RESPONSIVE
536
+ ----------------------------------------------------------- */
537
+ @media (max-width: 992px) {
538
+ .uc-app-layout {
539
+ grid-template-columns: 1fr;
540
+ }
541
+
542
+ .uc-sidebar {
543
+ position: relative;
544
+ top: 0;
545
+ height: auto;
546
+ display: flex;
547
+ overflow-x: auto;
548
+ }
549
+
550
+ .uc-sidebar-nav {
551
+ display: flex;
552
+ gap: 0.5rem;
553
+ }
554
+
555
+ .uc-sidebar-link {
556
+ white-space: nowrap;
557
+ }
558
+ }
559
+
560
+ @media (max-width: 768px) {
561
+ .uc-nav-menu {
562
+ display: none;
563
+ /* you can later replace w/ mobile nav JS */
564
+ }
565
+
566
+ .uc-hero-title {
567
+ font-size: 3rem;
568
+ }
569
+
570
+ .uc-hero-subtitle {
571
+ font-size: 1.05rem;
572
+ }
573
+ }
574
+
575
+ /* Enhanced UI Components */
576
+ .uc-neon-glow {
577
+ text-shadow: 0 0 10px currentColor, 0 0 20px currentColor, 0 0 30px currentColor;
578
+ }
579
+
580
+ .uc-gradient-border {
581
+ position: relative;
582
+ background: linear-gradient(45deg, var(--deep-purple), var(--charcoal)));
583
+ border-radius: 15px;
584
+ padding: 3px;
585
+ }
586
+
587
+ .uc-gradient-border::before {
588
+ content: '';
589
+ position: absolute;
590
+ inset: -3px;
591
+ border-radius: 18px;
592
+ background: linear-gradient(45deg, var(--gold), var(--light-gold)));
593
+ z-index: -1;
594
+ opacity: 0.7;
595
+ }
596
+
597
+ /* Enhanced animations */
598
+ @keyframes pulse {
599
+ 0% {
600
+ box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.4);
601
+ }
602
+
603
+ 70% {
604
+ box-shadow: 0 0 0 10px rgba(212, 175, 55, 0);
605
+ }
606
+
607
+ 100% {
608
+ box-shadow: 0 0 0 0 rgba(212, 175, 55, 0);
609
+ }
610
+ }
611
+
612
+ .uc-pulse {
613
+ animation: pulse 2s infinite;
614
+ }
615
+
616
+ /* Modern CSS enhancements */
617
+ .uc-glass {
618
+ background: rgba(255, 255, 255, 0.1);
619
+ backdrop-filter: blur(10px);
620
+ border: 1px solid rgba(255, 255, 255, 0.2);
621
+ }
622
+
623
+ .uc-shimmer {
624
+ background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
625
+ background-size: 200% 100%;
626
+ animation: shimmer 2s infinite;
627
+ }
628
+
629
+ @keyframes shimmer {
630
+ 0% {
631
+ background-position: -200% 0;
632
+ }
633
+
634
+ 100% {
635
+ background-position: 200% 0;
636
+ }
637
+ }
638
+
639
+ /* Custom scrollbar */
640
+ ::-webkit-scrollbar {
641
+ width: 8px;
642
+ }
643
+
644
+ ::-webkit-scrollbar-track {
645
+ background: var(--deep-purple);
646
+ }
647
+
648
+ ::-webkit-scrollbar-thumb {
649
+ background: var(--gold);
650
+ border-radius: 4px;
651
+ }
652
+
653
+ /* Original game styling with new framework */
654
+ .alley-container {
655
+ position: fixed;
656
+ top: 0;
657
+ left: 0;
658
+ width: 100%;
659
+ height: 100%;
660
+ z-index: -1;
661
+ opacity: 0.7;
662
+ }
663
+
664
+ .alley-wall {
665
+ position: absolute;
666
+ height: 100%;
667
+ width: 30%;
668
+ background: linear-gradient(90deg, var(--charcoal) 0%, transparent 100%);
669
+ }
670
+
671
+ .alley-wall.left {
672
+ left: 0;
673
+ }
674
+
675
+ .alley-wall.right {
676
+ right: 0;
677
+ transform: rotate(180deg);
678
+ }
679
+
680
+ .neon-sign {
681
+ position: absolute;
682
+ top: 20%;
683
+ right: 15%;
684
+ font-size: 1.5rem;
685
+ color: var(--gold);
686
+ text-shadow: 0 0 5px var(--gold), 0 0 10px var(--gold), 0 0 15px var(--gold);
687
+ animation: flicker 3s infinite alternate;
688
+ transform: rotate(-5deg);
689
+ }
690
+
691
+ .dripping-effect {
692
+ position: absolute;
693
+ bottom: 0;
694
+ width: 100%;
695
+ height: 20px;
696
+ background: linear-gradient(transparent, rgba(212, 175, 55, 0.1);
697
+ }
698
+
699
+ /* Main content */
700
+ .container {
701
+ max-width: 1200px;
702
+ margin: 0 auto;
703
+ padding: 2rem;
704
+ display: flex;
705
+ flex-direction: column;
706
+ align-items: center;
707
+ min-height: 100vh;
708
+ position: relative;
709
+ z-index: 1;
710
+ }
711
+
712
+ .header {
713
+ text-align: center;
714
+ margin-bottom: 2rem;
715
+ width: 100%;
716
+ }
717
+
718
+ .logo {
719
+ font-size: 4rem;
720
+ font-weight: 900;
721
+ text-transform: uppercase;
722
+ margin-bottom: 1rem;
723
+ background: linear-gradient(45deg, var(--gold), var(--light-gold)));
724
+ -webkit-background-clip: text;
725
+ background-clip: text;
726
+ color: transparent;
727
+ text-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
728
+ letter-spacing: 3px;
729
+ animation: glow 2s ease-in-out infinite alternate;
730
+ }
731
+
732
+ .tagline {
733
+ font-size: 1.5rem;
734
+ color: var(--light-gold);
735
+ text-shadow: 0 0 5px var(--light-gold);
736
+ margin-bottom: 0.5rem;
737
+ font-style: italic;
738
+ }
739
+
740
+ .subtitle {
741
+ font-size: 1rem;
742
+ color: #aaa;
743
+ max-width: 600px;
744
+ margin: 0 auto 2rem;
745
+ line-height: 1.5;
746
+ }
747
+
748
+ /* Signup form */
749
+ .signup-container {
750
+ background: rgba(10, 10, 10, 0.8);
751
+ border: 2px solid var(--gold);
752
+ border-radius: 10px;
753
+ padding: 2rem;
754
+ width: 100%;
755
+ max-width: 500px;
756
+ box-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
757
+ position: relative;
758
+ overflow: hidden;
759
+ }
760
+
761
+ .signup-container::before {
762
+ content: '';
763
+ position: absolute;
764
+ top: -10px;
765
+ left: -10px;
766
+ right: -10px;
767
+ bottom: -10px;
768
+ background: linear-gradient(45deg, var(--gold), var(--light-gold)));
769
+ z-index: -1;
770
+ border-radius: 12px;
771
+ opacity: 0.3;
772
+ animation: borderGlow 3s linear infinite;
773
+ }
774
+
775
+ .form-title {
776
+ text-align: center;
777
+ font-size: 1.8rem;
778
+ margin-bottom: 1.5rem;
779
+ color: var(--light-gold);
780
+ text-shadow: 0 0 5px var(--light-gold);
781
+ }
782
+
783
+ .form-group {
784
+ margin-bottom: 1.5rem;
785
+ position: relative;
786
+ }
787
+
788
+ .form-label {
789
+ display: block;
790
+ margin-bottom: 0.5rem;
791
+ color: var(--light-gold);
792
+ font-weight: 600;
793
+ }
794
+
795
+ .form-input {
796
+ width: 100%;
797
+ padding: 12px 15px;
798
+ background: rgba(30, 30, 30, 0.8);
799
+ border: 1px solid rgba(212, 175, 55, 0.35);
800
+ border-radius: 5px;
801
+ color: white;
802
+ font-size: 1rem;
803
+ transition: all 0.3s;
804
+ }
805
+
806
+ .form-input:focus {
807
+ outline: none;
808
+ border-color: var(--gold);
809
+ box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
810
+ }
811
+
812
+ .select-wrapper {
813
+ position: relative;
814
+ }
815
+
816
+ .select-wrapper::after {
817
+ content: '\f078';
818
+ font-family: 'Font Awesome 6 Free';
819
+ font-weight: 900;
820
+ position: absolute;
821
+ right: 15px;
822
+ top: 50%;
823
+ transform: translateY(-50%);
824
+ color: var(--gold);
825
+ pointer-events: none;
826
+ }
827
+
828
+ .form-select {
829
+ width: 100%;
830
+ padding: 12px 15px;
831
+ background: rgba(30, 30, 30, 0.8);
832
+ border: 1px solid rgba(212, 175, 55, 0.35);
833
+ border-radius: 5px;
834
+ color: white;
835
+ font-size: 1rem;
836
+ appearance: none;
837
+ cursor: pointer;
838
+ }
839
+
840
+ .form-select:focus {
841
+ outline: none;
842
+ border-color: var(--gold);
843
+ box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
844
+ }
845
+
846
+ .checkbox-group {
847
+ display: flex;
848
+ align-items: center;
849
+ margin-bottom: 1.5rem;
850
+ }
851
+
852
+ .checkbox-input {
853
+ margin-right: 10px;
854
+ accent-color: var(--gold);
855
+ }
856
+
857
+ .checkbox-label {
858
+ color: #ccc;
859
+ font-size: 0.9rem;
860
+ }
861
+
862
+ .checkbox-label a {
863
+ color: var(--light-gold);
864
+ text-decoration: none;
865
+ }
866
+
867
+ .checkbox-label a:hover {
868
+ text-decoration: underline;
869
+ }
870
+
871
+ .submit-btn {
872
+ width: 100%;
873
+ padding: 15px;
874
+ background: linear-gradient(45deg, var(--gold), var(--dark-gold)));
875
+ border: none;
876
+ border-radius: 5px;
877
+ color: white;
878
+ font-size: 1.2rem;
879
+ font-weight: 700;
880
+ text-transform: uppercase;
881
+ letter-spacing: 1px;
882
+ cursor: pointer;
883
+ transition: all 0.3s;
884
+ position: relative;
885
+ overflow: hidden;
886
+ }
887
+
888
+ .submit-btn:hover {
889
+ background: linear-gradient(45deg, var(--dark-gold), var(--gold)));
890
+ box-shadow: 0 0 15px rgba(212, 175, 55, 0.7);
891
+ transform: translateY(-2px);
892
+ }
893
+
894
+ .submit-btn:active {
895
+ transform: translateY(0);
896
+ }
897
+
898
+ .submit-btn::after {
899
+ content: '';
900
+ position: absolute;
901
+ top: -50%;
902
+ left: -50%;
903
+ width: 200%;
904
+ height: 200%;
905
+ background: rgba(255, 255, 255, 0.1);
906
+ transform: rotate(45deg);
907
+ transition: all 0.5s;
908
+ }
909
+
910
+ .submit-btn:hover::after {
911
+ transform: rotate(45deg) translate(10%, 10%);
912
+ }
913
+
914
+ /* Features section */
915
+ .features {
916
+ display: grid;
917
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)));
918
+ gap: 2rem;
919
+ margin-top: 3rem;
920
+ width: 100%;
921
+ }
922
+
923
+ .feature-card {
924
+ background: rgba(20, 20, 20, 0.8);
925
+ border: 1px solid rgba(212, 175, 55, 0.35);
926
+ border-radius: 8px;
927
+ padding: 1.5rem;
928
+ text-align: center;
929
+ transition: all 0.3s;
930
+ }
931
+
932
+ .feature-card:hover {
933
+ border-color: var(--gold);
934
+ transform: translateY(-5px);
935
+ box-shadow: 0 5px 15px rgba(212, 175, 55, 0.3);
936
+ }
937
+
938
+ .feature-icon {
939
+ font-size: 2.5rem;
940
+ color: var(--light-gold);
941
+ margin-bottom: 1rem;
942
+ }
943
+
944
+ .feature-title {
945
+ font-size: 1.2rem;
946
+ margin-bottom: 0.5rem;
947
+ color: var(--light-gold);
948
+ }
949
+
950
+ .feature-desc {
951
+ color: #aaa;
952
+ font-size: 0.9rem;
953
+ line-height: 1.4;
954
+ }
955
+
956
+ /* Animations */
957
+ @keyframes glow {
958
+ from {
959
+ text-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
960
+ }
961
+
962
+ to {
963
+ text-shadow: 0 0 20px rgba(212, 175, 55, 0.8), 0 0 30px rgba(212, 175, 55, 0.6);
964
+ }
965
+ }
966
+
967
+ @keyframes flicker {
968
+
969
+ 0%,
970
+ 19%,
971
+ 21%,
972
+ 23%,
973
+ 25%,
974
+ 54%,
975
+ 56%,
976
+ 100% {
977
+ opacity: 1;
978
+ }
979
+
980
+ 20%,
981
+ 24%,
982
+ 55% {
983
+ opacity: 0.7;
984
+ }
985
+ }
986
+
987
+ @keyframes borderGlow {
988
+ 0% {
989
+ filter: hue-rotate(0deg);
990
+ }
991
+
992
+ 100% {
993
+ filter: hue-rotate(360deg);
994
+ }
995
+ }
996
+
997
+ /* Responsive */
998
+ @media (max-width: 768px) {
999
+ .logo {
1000
+ font-size: 2.5rem;
1001
+ }
1002
+
1003
+ .tagline {
1004
+ font-size: 1.2rem;
1005
+ }
1006
+
1007
+ .signup-container {
1008
+ padding: 1.5rem;
1009
+ }
1010
+
1011
+ .features {
1012
+ grid-template-columns: 1fr;
1013
+ }
1014
+ }
1015
+
1016
+ @media (max-width: 480px) {
1017
+ .container {
1018
+ padding: 1rem;
1019
+ }
1020
+
1021
+ .logo {
1022
+ font-size: 2rem;
1023
+ }
1024
+
1025
+ .signup-container {
1026
+ padding: 1rem;
1027
+ }
1028
+ }
1029
+ </style>
1030
  </head>
1031
+
1032
  <body>
1033
+ <header class="uc-header">
1034
+ <div class="uc-container">
1035
+ <nav class="uc-nav">
1036
+ <div class="uc-logo">UNDERWORLD<span>CHRONICLES</span></div>
1037
+ <ul class="uc-nav-menu">
1038
+ <li><a href="#">Home</a></li>
1039
+ <li><a href="#">Gameplay</a></li>
1040
+ <li><a href="#">Factions</a></li>
1041
+ <li><a href="#">Leaderboards</a></li>
1042
+ <li><a href="#">Support</a></li>
1043
+ </ul>
1044
+ <div class="uc-nav-auth">
1045
+ <button class="uc-btn uc-btn-login"><i class="fas fa-sign-in-alt"></i> Login</button>
1046
+ <button class="uc-btn uc-btn-primary"><i class="fas fa-user-plus"></i> Join</button>
1047
+ </div>
1048
+ </nav>
1049
  </div>
1050
+ </header>
1051
+
1052
+ <section class="uc-hero">
1053
+ <div class="uc-container">
1054
+ <h1 class="uc-hero-title">UNDERWORLD CHRONICLES</h1>
1055
+ <p class="uc-hero-subtitle">Join the Syndicate. Rule the Streets. Build your criminal empire in this gritty text-based
1056
+ MMORPG.</p>
1057
+ <button class="uc-btn uc-btn-primary uc-pulse"><i class="fas fa-skull"></i> Start Your Reign</button>
1058
+ </div>
1059
+ </section>
1060
+
1061
+ <div class="alley-container">
1062
+ <div class="alley-wall left"></div>
1063
+ <div class="alley-wall right"></div>
1064
+ <div class="neon-sign">BAR<br>& GRILL</div>
1065
+ <div class="dripping-effect"></div>
1066
+ </div>
1067
+
1068
+ <div class="container">
1069
+ <header class="header">
1070
+ <h1 class="logo">Underworld Chronicles</h1>
1071
+ <p class="tagline">Join the Syndicate. Rule the Streets.</p>
1072
+ <p class="subtitle">Build your criminal empire in this gritty text-based MMORPG. Forge alliances, pull off heists,
1073
+ and become the most feared name in the underworld.</p>
1074
+ </header>
1075
+
1076
+ <div class="signup-container">
1077
+ <h2 class="form-title">Create Your Criminal Identity</h2>
1078
+ <form id="signup-form">
1079
+ <div class="form-group">
1080
+ <label class="form-label" for="username">Underworld Alias</label>
1081
+ <input type="text" id="username" class="form-input" placeholder="Enter your criminal name" required>
1082
+ </div>
1083
+
1084
+ <div class="form-group">
1085
+ <label class="form-label" for="email">Contact (Email)</label>
1086
+ <input type="email" id="email" class="form-input" placeholder="Your secure communication channel" required>
1087
+ </div>
1088
+
1089
+ <div class="form-group">
1090
+ <label class="form-label" for="password">Secret Code</label>
1091
+ <input type="password" id="password" class="form-input" placeholder="Create your access code" required>
1092
+ </div>
1093
+
1094
+ <div class="form-group">
1095
+ <label class="form-label" for="confirm-password">Verify Secret Code</label>
1096
+ <input type="password" id="confirm-password" class="form-input" placeholder="Confirm your access code" required>
1097
+ </div>
1098
+
1099
+ <div class="form-group">
1100
+ <label class="form-label" for="faction">Choose Your Faction</label>
1101
+ <div class="select-wrapper">
1102
+ <select id="faction" class="form-select" required>
1103
+ <option value="">Select your crew</option>
1104
+ <option value="syndicate">The Syndicate</option>
1105
+ <option value="cartel">Cartel Kings</option>
1106
+ <option value="mafia">Mafia Family</option>
1107
+ <option value="yakuza">Yakuza Clan</option>
1108
+ <option value="freelance">Freelance Operator</option>
1109
+ </select>
1110
+ </div>
1111
+ </div>
1112
+
1113
+ <div class="form-group">
1114
+ <label class="form-label" for="specialty">Criminal Specialty</label>
1115
+ <div class="select-wrapper">
1116
+ <select id="specialty" class="form-select" required>
1117
+ <option value="">Select your expertise</option>
1118
+ <option value="heist">Master Heist Planner</option>
1119
+ <option value="smuggling">Smuggling Operations</option>
1120
+ <option value="enforcement">Enforcement & Protection</option>
1121
+ <option value="cybercrime">Cyber Crime</option>
1122
+ <option value="drugs">Narcotics Distribution</option>
1123
+ </select>
1124
+ </div>
1125
+ </div>
1126
 
1127
+ <div class="checkbox-group">
1128
+ <input type="checkbox" id="terms" class="checkbox-input" required>
1129
+ <label for="terms" class="checkbox-label">
1130
+ I accept the <a href="#">Underworld Code</a> and understand the risks involved in criminal enterprise
1131
+ </label>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1132
  </div>
1133
 
1134
+ <button type="submit" class="submit-btn">Join the Underworld</button>
1135
+ </form>
1136
+ </div>
1137
+
1138
+ <div class="features">
1139
+ <div class="feature-card">
1140
+ <div class="feature-icon">
1141
+ <i class="fas fa-user-secret"></i>
1142
+ </div>
1143
+ <h3 class="feature-title">Build Your Empire</h3>
1144
+ <p class="feature-desc">Start from the bottom and work your way up to become the city's most powerful crime
1145
+ lord.</p>
1146
+ </div>
1147
+
1148
+ <div class="feature-card">
1149
+ <div class="feature-icon">
1150
+ <i class="fas fa-fist-raised"></i>
 
 
 
 
 
 
 
1151
  </div>
1152
+ <h3 class="feature-title">Form Alliances & Rivalries</h3>
1153
+ <p class="feature-desc">Forge powerful alliances or create bitter rivalries in the dangerous underworld.</p>
1154
+ </div>
1155
 
1156
+ <div class="feature-card">
1157
+ <div class="feature-icon">
1158
+ <i class="fas fa-money-bill-wave"></i>
1159
+ </div>
1160
+ <h3 class="feature-title">Execute Lucrative Heists</h3>
1161
+ <p class="feature-desc">Plan and execute high-stakes heists to fund your criminal operations.</p>
1162
+ </div>
1163
  </div>
1164
 
1165
+ <footer class="footer">
1166
+ <p>Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">anycoder</a> | Enter at
1167
+ your own risk</p>
1168
+ </footer>
1169
+ </div>
1170
+
1171
+ <script>
1172
+ document.getElementById('signup-form').addEventListener('submit', function (e) {
1173
+ e.preventDefault();
1174
+
1175
+ const password = document.getElementById('password').value;
1176
+ const confirmPassword = document.getElementById('confirm-password').value;
1177
+
1178
+ if (password !== confirmPassword) {
1179
+ alert('Secret codes do not match! Verify your access codes.');
1180
+ return;
1181
+ }
1182
+
1183
+ // In a real application, this would submit the form to a server
1184
+ alert('Welcome to the Underworld! Your criminal identity is being processed. Check your email for further instructions.');
1185
+
1186
+ // Reset form
1187
+ this.reset();
1188
+ });
1189
+
1190
+ // Add some interactive effects
1191
+ document.querySelectorAll('.form-input, .form-select').forEach(element => {
1192
+ element.addEventListener('focus', function () {
1193
+ this.parentElement.classList.add('focused');
1194
+ });
1195
+
1196
+ element.addEventListener('blur', function () {
1197
+ this.parentElement.classList.remove('focused');
1198
+ });
1199
+ });
1200
+
1201
+ // Mobile menu toggle (placeholder functionality)
1202
+ document.querySelector('.uc-btn-login').addEventListener('click', function () {
1203
+ alert('Login functionality would go here');
1204
+ });
1205
+ </script>
1206
  </body>
1207
+
1208
  </html>