Hugging Face's logo

Spaces:
hunnid13
/
anycoder-abde6479
Running

App Files Community
hunnid13 commited on
Commit
54eccf3
·
verified ·
1 Parent(s): 6a51eb2

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +1154 -19
index.html CHANGED
@@ -1,19 +1,1154 @@
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>RetroPlay Giveaways - Win Amazing Games</title>
7
+ <link rel="preconnect" href="https://fonts.googleapis.com">
8
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Press+Start+2P&display=swap" rel="stylesheet">
10
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
11
+
12
+ <style>
13
+ :root {
14
+ --primary: #6366f1;
15
+ --primary-dark: #4f46e5;
16
+ --secondary: #ec4899;
17
+ --accent: #10b981;
18
+ --dark: #0f172a;
19
+ --darker: #020617;
20
+ --card-bg: rgba(30, 41, 59, 0.7);
21
+ --text-primary: #f8fafc;
22
+ --text-secondary: #94a3b8;
23
+ --border: rgba(148, 163, 184, 0.1);
24
+ --glow: 0 0 20px rgba(99, 102, 241, 0.5);
25
+ }
26
+
27
+ * {
28
+ margin: 0;
29
+ padding: 0;
30
+ box-sizing: border-box;
31
+ }
32
+
33
+ body {
34
+ font-family: 'Inter', sans-serif;
35
+ background: linear-gradient(135deg, var(--darker) 0%, var(--dark) 100%);
36
+ color: var(--text-primary);
37
+ min-height: 100vh;
38
+ overflow-x: hidden;
39
+ }
40
+
41
+ /* Animated Background */
42
+ .bg-animation {
43
+ position: fixed;
44
+ top: 0;
45
+ left: 0;
46
+ width: 100%;
47
+ height: 100%;
48
+ z-index: -1;
49
+ overflow: hidden;
50
+ }
51
+
52
+ .bg-animation::before {
53
+ content: '';
54
+ position: absolute;
55
+ top: -50%;
56
+ left: -50%;
57
+ width: 200%;
58
+ height: 200%;
59
+ background: radial-gradient(circle, rgba(99, 102, 241, 0.1) 0%, transparent 70%);
60
+ animation: rotate 20s linear infinite;
61
+ }
62
+
63
+ @keyframes rotate {
64
+ 0% { transform: rotate(0deg); }
65
+ 100% { transform: rotate(360deg); }
66
+ }
67
+
68
+ /* Header */
69
+ header {
70
+ background: rgba(15, 23, 42, 0.8);
71
+ backdrop-filter: blur(12px);
72
+ border-bottom: 1px solid var(--border);
73
+ position: sticky;
74
+ top: 0;
75
+ z-index: 1000;
76
+ padding: 1rem 0;
77
+ }
78
+
79
+ .container {
80
+ max-width: 1400px;
81
+ margin: 0 auto;
82
+ padding: 0 2rem;
83
+ }
84
+
85
+ nav {
86
+ display: flex;
87
+ justify-content: space-between;
88
+ align-items: center;
89
+ flex-wrap: wrap;
90
+ gap: 1rem;
91
+ }
92
+
93
+ .logo {
94
+ display: flex;
95
+ align-items: center;
96
+ gap: 0.75rem;
97
+ text-decoration: none;
98
+ color: var(--text-primary);
99
+ }
100
+
101
+ .logo-icon {
102
+ width: 40px;
103
+ height: 40px;
104
+ background: linear-gradient(135deg, var(--primary), var(--secondary));
105
+ border-radius: 12px;
106
+ display: flex;
107
+ align-items: center;
108
+ justify-content: center;
109
+ font-size: 1.25rem;
110
+ box-shadow: var(--glow);
111
+ }
112
+
113
+ .logo-text {
114
+ font-family: 'Press Start 2P', cursive;
115
+ font-size: 0.875rem;
116
+ line-height: 1.2;
117
+ background: linear-gradient(to right, var(--text-primary), var(--primary));
118
+ -webkit-background-clip: text;
119
+ -webkit-text-fill-color: transparent;
120
+ }
121
+
122
+ .nav-links {
123
+ display: flex;
124
+ gap: 2rem;
125
+ list-style: none;
126
+ align-items: center;
127
+ }
128
+
129
+ .nav-links a {
130
+ color: var(--text-secondary);
131
+ text-decoration: none;
132
+ font-weight: 500;
133
+ transition: all 0.3s;
134
+ position: relative;
135
+ }
136
+
137
+ .nav-links a:hover {
138
+ color: var(--text-primary);
139
+ }
140
+
141
+ .nav-links a::after {
142
+ content: '';
143
+ position: absolute;
144
+ bottom: -5px;
145
+ left: 0;
146
+ width: 0;
147
+ height: 2px;
148
+ background: linear-gradient(90deg, var(--primary), var(--secondary));
149
+ transition: width 0.3s;
150
+ }
151
+
152
+ .nav-links a:hover::after {
153
+ width: 100%;
154
+ }
155
+
156
+ .built-with {
157
+ background: rgba(99, 102, 241, 0.1);
158
+ border: 1px solid rgba(99, 102, 241, 0.3);
159
+ padding: 0.5rem 1rem;
160
+ border-radius: 9999px;
161
+ font-size: 0.75rem;
162
+ color: var(--primary);
163
+ text-decoration: none;
164
+ transition: all 0.3s;
165
+ display: flex;
166
+ align-items: center;
167
+ gap: 0.5rem;
168
+ }
169
+
170
+ .built-with:hover {
171
+ background: rgba(99, 102, 241, 0.2);
172
+ transform: translateY(-2px);
173
+ box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
174
+ }
175
+
176
+ .user-actions {
177
+ display: flex;
178
+ gap: 1rem;
179
+ align-items: center;
180
+ }
181
+
182
+ .btn {
183
+ padding: 0.75rem 1.5rem;
184
+ border: none;
185
+ border-radius: 8px;
186
+ font-weight: 600;
187
+ cursor: pointer;
188
+ transition: all 0.3s;
189
+ text-decoration: none;
190
+ display: inline-flex;
191
+ align-items: center;
192
+ gap: 0.5rem;
193
+ font-size: 0.875rem;
194
+ }
195
+
196
+ .btn-primary {
197
+ background: linear-gradient(135deg, var(--primary), var(--primary-dark));
198
+ color: white;
199
+ box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
200
+ }
201
+
202
+ .btn-primary:hover {
203
+ transform: translateY(-2px);
204
+ box-shadow: 0 6px 20px rgba(99, 102, 241, 0.6);
205
+ }
206
+
207
+ .btn-outline {
208
+ background: transparent;
209
+ border: 1px solid var(--border);
210
+ color: var(--text-primary);
211
+ }
212
+
213
+ .btn-outline:hover {
214
+ border-color: var(--primary);
215
+ background: rgba(99, 102, 241, 0.1);
216
+ }
217
+
218
+ /* Hero Section */
219
+ .hero {
220
+ padding: 4rem 0;
221
+ text-align: center;
222
+ position: relative;
223
+ }
224
+
225
+ .hero-badge {
226
+ display: inline-flex;
227
+ align-items: center;
228
+ gap: 0.5rem;
229
+ background: rgba(16, 185, 129, 0.1);
230
+ border: 1px solid rgba(16, 185, 129, 0.3);
231
+ color: var(--accent);
232
+ padding: 0.5rem 1rem;
233
+ border-radius: 9999px;
234
+ font-size: 0.875rem;
235
+ margin-bottom: 1.5rem;
236
+ animation: pulse 2s infinite;
237
+ }
238
+
239
+ @keyframes pulse {
240
+ 0%, 100% { opacity: 1; }
241
+ 50% { opacity: 0.7; }
242
+ }
243
+
244
+ .hero h1 {
245
+ font-size: clamp(2rem, 5vw, 3.5rem);
246
+ font-weight: 700;
247
+ margin-bottom: 1rem;
248
+ line-height: 1.2;
249
+ }
250
+
251
+ .hero h1 span {
252
+ background: linear-gradient(135deg, var(--primary), var(--secondary));
253
+ -webkit-background-clip: text;
254
+ -webkit-text-fill-color: transparent;
255
+ }
256
+
257
+ .hero p {
258
+ color: var(--text-secondary);
259
+ font-size: 1.25rem;
260
+ max-width: 600px;
261
+ margin: 0 auto 2rem;
262
+ }
263
+
264
+ .stats {
265
+ display: flex;
266
+ justify-content: center;
267
+ gap: 3rem;
268
+ margin-top: 3rem;
269
+ flex-wrap: wrap;
270
+ }
271
+
272
+ .stat-item {
273
+ text-align: center;
274
+ }
275
+
276
+ .stat-value {
277
+ font-family: 'Press Start 2P', cursive;
278
+ font-size: 1.5rem;
279
+ color: var(--primary);
280
+ margin-bottom: 0.5rem;
281
+ }
282
+
283
+ .stat-label {
284
+ color: var(--text-secondary);
285
+ font-size: 0.875rem;
286
+ text-transform: uppercase;
287
+ letter-spacing: 0.05em;
288
+ }
289
+
290
+ /* Filters */
291
+ .filters {
292
+ padding: 2rem 0;
293
+ display: flex;
294
+ gap: 1rem;
295
+ flex-wrap: wrap;
296
+ justify-content: center;
297
+ }
298
+
299
+ .filter-btn {
300
+ padding: 0.625rem 1.25rem;
301
+ border-radius: 9999px;
302
+ border: 1px solid var(--border);
303
+ background: rgba(30, 41, 59, 0.5);
304
+ color: var(--text-secondary);
305
+ cursor: pointer;
306
+ transition: all 0.3s;
307
+ font-size: 0.875rem;
308
+ font-weight: 500;
309
+ }
310
+
311
+ .filter-btn:hover, .filter-btn.active {
312
+ background: var(--primary);
313
+ color: white;
314
+ border-color: var(--primary);
315
+ }
316
+
317
+ /* Giveaways Grid */
318
+ .giveaways-section {
319
+ padding: 2rem 0 4rem;
320
+ }
321
+
322
+ .section-header {
323
+ display: flex;
324
+ justify-content: space-between;
325
+ align-items: center;
326
+ margin-bottom: 2rem;
327
+ flex-wrap: wrap;
328
+ gap: 1rem;
329
+ }
330
+
331
+ .section-title {
332
+ font-size: 1.5rem;
333
+ font-weight: 700;
334
+ display: flex;
335
+ align-items: center;
336
+ gap: 0.75rem;
337
+ }
338
+
339
+ .giveaways-grid {
340
+ display: grid;
341
+ grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
342
+ gap: 1.5rem;
343
+ }
344
+
345
+ .giveaway-card {
346
+ background: var(--card-bg);
347
+ border: 1px solid var(--border);
348
+ border-radius: 16px;
349
+ overflow: hidden;
350
+ transition: all 0.3s;
351
+ position: relative;
352
+ backdrop-filter: blur(10px);
353
+ }
354
+
355
+ .giveaway-card:hover {
356
+ transform: translateY(-5px);
357
+ border-color: rgba(99, 102, 241, 0.3);
358
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
359
+ }
360
+
361
+ .card-image {
362
+ position: relative;
363
+ height: 200px;
364
+ overflow: hidden;
365
+ }
366
+
367
+ .card-image img {
368
+ width: 100%;
369
+ height: 100%;
370
+ object-fit: cover;
371
+ transition: transform 0.3s;
372
+ }
373
+
374
+ .giveaway-card:hover .card-image img {
375
+ transform: scale(1.05);
376
+ }
377
+
378
+ .platform-badge {
379
+ position: absolute;
380
+ top: 1rem;
381
+ right: 1rem;
382
+ background: rgba(0, 0, 0, 0.8);
383
+ backdrop-filter: blur(10px);
384
+ padding: 0.5rem;
385
+ border-radius: 8px;
386
+ font-size: 1.25rem;
387
+ }
388
+
389
+ .countdown {
390
+ position: absolute;
391
+ bottom: 0;
392
+ left: 0;
393
+ right: 0;
394
+ background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
395
+ padding: 1rem;
396
+ display: flex;
397
+ gap: 1rem;
398
+ justify-content: center;
399
+ }
400
+
401
+ .countdown-item {
402
+ text-align: center;
403
+ }
404
+
405
+ .countdown-value {
406
+ font-family: 'Press Start 2P', cursive;
407
+ font-size: 0.75rem;
408
+ color: var(--secondary);
409
+ display: block;
410
+ }
411
+
412
+ .countdown-label {
413
+ font-size: 0.625rem;
414
+ color: var(--text-secondary);
415
+ text-transform: uppercase;
416
+ }
417
+
418
+ .card-content {
419
+ padding: 1.5rem;
420
+ }
421
+
422
+ .card-header {
423
+ display: flex;
424
+ justify-content: space-between;
425
+ align-items: start;
426
+ margin-bottom: 0.75rem;
427
+ }
428
+
429
+ .card-title {
430
+ font-size: 1.125rem;
431
+ font-weight: 700;
432
+ margin-bottom: 0.25rem;
433
+ }
434
+
435
+ .card-value {
436
+ color: var(--accent);
437
+ font-weight: 600;
438
+ font-size: 0.875rem;
439
+ }
440
+
441
+ .entries-info {
442
+ display: flex;
443
+ justify-content: space-between;
444
+ align-items: center;
445
+ margin: 1rem 0;
446
+ font-size: 0.875rem;
447
+ color: var(--text-secondary);
448
+ }
449
+
450
+ .progress-bar {
451
+ width: 100%;
452
+ height: 6px;
453
+ background: rgba(255, 255, 255, 0.1);
454
+ border-radius: 3px;
455
+ overflow: hidden;
456
+ margin-bottom: 1rem;
457
+ }
458
+
459
+ .progress-fill {
460
+ height: 100%;
461
+ background: linear-gradient(90deg, var(--primary), var(--secondary));
462
+ border-radius: 3px;
463
+ transition: width 0.5s ease;
464
+ position: relative;
465
+ overflow: hidden;
466
+ }
467
+
468
+ .progress-fill::after {
469
+ content: '';
470
+ position: absolute;
471
+ top: 0;
472
+ left: 0;
473
+ right: 0;
474
+ bottom: 0;
475
+ background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
476
+ animation: shimmer 2s infinite;
477
+ }
478
+
479
+ @keyframes shimmer {
480
+ 0% { transform: translateX(-100%); }
481
+ 100% { transform: translateX(100%); }
482
+ }
483
+
484
+ .enter-btn {
485
+ width: 100%;
486
+ padding: 0.875rem;
487
+ border-radius: 8px;
488
+ border: none;
489
+ background: linear-gradient(135deg, var(--primary), var(--primary-dark));
490
+ color: white;
491
+ font-weight: 600;
492
+ cursor: pointer;
493
+ transition: all 0.3s;
494
+ display: flex;
495
+ align-items: center;
496
+ justify-content: center;
497
+ gap: 0.5rem;
498
+ }
499
+
500
+ .enter-btn:hover {
501
+ transform: scale(1.02);
502
+ box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
503
+ }
504
+
505
+ .enter-btn.entered {
506
+ background: var(--accent);
507
+ cursor: default;
508
+ }
509
+
510
+ /* Winners Section */
511
+ .winners-section {
512
+ padding: 4rem 0;
513
+ background: linear-gradient(to bottom, transparent, rgba(99, 102, 241, 0.05));
514
+ }
515
+
516
+ .winners-grid {
517
+ display: grid;
518
+ grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
519
+ gap: 1.5rem;
520
+ margin-top: 2rem;
521
+ }
522
+
523
+ .winner-card {
524
+ background: var(--card-bg);
525
+ border: 1px solid var(--border);
526
+ border-radius: 12px;
527
+ padding: 1.5rem;
528
+ display: flex;
529
+ align-items: center;
530
+ gap: 1rem;
531
+ transition: all 0.3s;
532
+ }
533
+
534
+ .winner-card:hover {
535
+ border-color: var(--accent);
536
+ transform: translateX(5px);
537
+ }
538
+
539
+ .winner-avatar {
540
+ width: 50px;
541
+ height: 50px;
542
+ border-radius: 50%;
543
+ background: linear-gradient(135deg, var(--accent), var(--primary));
544
+ display: flex;
545
+ align-items: center;
546
+ justify-content: center;
547
+ font-weight: 700;
548
+ font-size: 1.25rem;
549
+ flex-shrink: 0;
550
+ }
551
+
552
+ .winner-info h4 {
553
+ font-weight: 600;
554
+ margin-bottom: 0.25rem;
555
+ }
556
+
557
+ .winner-info p {
558
+ font-size: 0.875rem;
559
+ color: var(--text-secondary);
560
+ }
561
+
562
+ .winner-prize {
563
+ margin-left: auto;
564
+ color: var(--accent);
565
+ font-weight: 600;
566
+ font-size: 0.875rem;
567
+ }
568
+
569
+ /* Footer */
570
+ footer {
571
+ background: var(--darker);
572
+ border-top: 1px solid var(--border);
573
+ padding: 3rem 0 2rem;
574
+ margin-top: 4rem;
575
+ }
576
+
577
+ .footer-content {
578
+ display: grid;
579
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
580
+ gap: 3rem;
581
+ margin-bottom: 3rem;
582
+ }
583
+
584
+ .footer-section h3 {
585
+ font-family: 'Press Start 2P', cursive;
586
+ font-size: 0.875rem;
587
+ margin-bottom: 1rem;
588
+ color: var(--text-primary);
589
+ }
590
+
591
+ .footer-section p {
592
+ color: var(--text-secondary);
593
+ line-height: 1.6;
594
+ font-size: 0.875rem;
595
+ }
596
+
597
+ .social-links {
598
+ display: flex;
599
+ gap: 1rem;
600
+ margin-top: 1rem;
601
+ }
602
+
603
+ .social-links a {
604
+ width: 40px;
605
+ height: 40px;
606
+ border-radius: 8px;
607
+ background: rgba(255, 255, 255, 0.05);
608
+ display: flex;
609
+ align-items: center;
610
+ justify-content: center;
611
+ color: var(--text-secondary);
612
+ transition: all 0.3s;
613
+ text-decoration: none;
614
+ }
615
+
616
+ .social-links a:hover {
617
+ background: var(--primary);
618
+ color: white;
619
+ transform: translateY(-3px);
620
+ }
621
+
622
+ .footer-bottom {
623
+ text-align: center;
624
+ padding-top: 2rem;
625
+ border-top: 1px solid var(--border);
626
+ color: var(--text-secondary);
627
+ font-size: 0.875rem;
628
+ }
629
+
630
+ /* Modal */
631
+ .modal {
632
+ display: none;
633
+ position: fixed;
634
+ top: 0;
635
+ left: 0;
636
+ width: 100%;
637
+ height: 100%;
638
+ background: rgba(0, 0, 0, 0.8);
639
+ backdrop-filter: blur(5px);
640
+ z-index: 2000;
641
+ align-items: center;
642
+ justify-content: center;
643
+ padding: 1rem;
644
+ }
645
+
646
+ .modal.active {
647
+ display: flex;
648
+ }
649
+
650
+ .modal-content {
651
+ background: var(--card-bg);
652
+ border: 1px solid var(--border);
653
+ border-radius: 16px;
654
+ padding: 2rem;
655
+ max-width: 500px;
656
+ width: 100%;
657
+ text-align: center;
658
+ animation: slideUp 0.3s ease;
659
+ }
660
+
661
+ @keyframes slideUp {
662
+ from {
663
+ opacity: 0;
664
+ transform: translateY(20px);
665
+ }
666
+ to {
667
+ opacity: 1;
668
+ transform: translateY(0);
669
+ }
670
+ }
671
+
672
+ .modal-icon {
673
+ width: 80px;
674
+ height: 80px;
675
+ background: linear-gradient(135deg, var(--accent), var(--primary));
676
+ border-radius: 50%;
677
+ display: flex;
678
+ align-items: center;
679
+ justify-content: center;
680
+ margin: 0 auto 1.5rem;
681
+ font-size: 2rem;
682
+ }
683
+
684
+ .modal h2 {
685
+ margin-bottom: 1rem;
686
+ }
687
+
688
+ .modal p {
689
+ color: var(--text-secondary);
690
+ margin-bottom: 1.5rem;
691
+ }
692
+
693
+ /* Responsive */
694
+ @media (max-width: 768px) {
695
+ .nav-links {
696
+ display: none;
697
+ }
698
+
699
+ .stats {
700
+ gap: 2rem;
701
+ }
702
+
703
+ .giveaways-grid {
704
+ grid-template-columns: 1fr;
705
+ }
706
+
707
+ .hero h1 {
708
+ font-size: 1.75rem;
709
+ }
710
+ }
711
+
712
+ /* Loading Animation */
713
+ .skeleton {
714
+ background: linear-gradient(90deg, rgba(255,255,255,0.05) 25%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.05) 75%);
715
+ background-size: 200% 100%;
716
+ animation: loading 1.5s infinite;
717
+ border-radius: 4px;
718
+ }
719
+
720
+ @keyframes loading {
721
+ 0% { background-position: 200% 0; }
722
+ 100% { background-position: -200% 0; }
723
+ }
724
+ </style>
725
+ </head>
726
+ <body>
727
+ <div class="bg-animation"></div>
728
+
729
+ <!-- Header -->
730
+ <header>
731
+ <div class="container">
732
+ <nav>
733
+ <a href="#" class="logo">
734
+ <div class="logo-icon">
735
+ <i class="fas fa-gamepad"></i>
736
+ </div>
737
+ <div class="logo-text">RETRO<br>PLAY</div>
738
+ </a>
739
+
740
+ <ul class="nav-links">
741
+ <li><a href="#active">Active Giveaways</a></li>
742
+ <li><a href="#winners">Winners</a></li>
743
+ <li><a href="#history">History</a></li>
744
+ <li><a href="#support">Support</a></li>
745
+ </ul>
746
+
747
+ <div class="user-actions">
748
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="built-with">
749
+ <i class="fas fa-code"></i>
750
+ Built with anycoder
751
+ </a>
752
+ <button class="btn btn-outline">
753
+ <i class="fas fa-user"></i>
754
+ Login
755
+ </button>
756
+ <button class="btn btn-primary">
757
+ <i class="fas fa-plus"></i>
758
+ Create
759
+ </button>
760
+ </div>
761
+ </nav>
762
+ </div>
763
+ </header>
764
+
765
+ <!-- Hero Section -->
766
+ <section class="hero">
767
+ <div class="container">
768
+ <div class="hero-badge">
769
+ <i class="fas fa-fire"></i>
770
+ <span>Live Giveaways Available</span>
771
+ </div>
772
+ <h1>Win Premium <span>Games & Keys</span></h1>
773
+ <p>Join thousands of gamers winning Steam keys, in-game items, and exclusive gaming gear every day. Free to enter!</p>
774
+
775
+ <div class="stats">
776
+ <div class="stat-item">
777
+ <div class="stat-value" id="activeGiveaways">12</div>
778
+ <div class="stat-label">Active Giveaways</div>
779
+ </div>
780
+ <div class="stat-item">
781
+ <div class="stat-value" id="totalWinners">2.4K</div>
782
+ <div class="stat-label">Total Winners</div>
783
+ </div>
784
+ <div class="stat-item">
785
+ <div class="stat-value" id="keysGiven">15K+</div>
786
+ <div class="stat-label">Keys Given</div>
787
+ </div>
788
+ </div>
789
+ </div>
790
+ </section>
791
+
792
+ <!-- Filters -->
793
+ <div class="container">
794
+ <div class="filters">
795
+ <button class="filter-btn active" data-filter="all">All Giveaways</button>
796
+ <button class="filter-btn" data-filter="steam">Steam Keys</button>
797
+ <button class="filter-btn" data-filter="game">Full Games</button>
798
+ <button class="filter-btn" data-filter="dlc">DLC & Items</button>
799
+ <button class="filter-btn" data-filter="ending">Ending Soon</button>
800
+ </div>
801
+ </div>
802
+
803
+ <!-- Giveaways Grid -->
804
+ <section class="giveaways-section" id="active">
805
+ <div class="container">
806
+ <div class="section-header">
807
+ <h2 class="section-title">
808
+ <i class="fas fa-gift" style="color: var(--secondary);"></i>
809
+ Active Giveaways
810
+ </h2>
811
+ <div style="display: flex; gap: 0.5rem; align-items: center; color: var(--text-secondary); font-size: 0.875rem;">
812
+ <i class="fas fa-sort"></i>
813
+ Sort by: <select style="background: transparent; border: 1px solid var(--border); color: var(--text-primary); padding: 0.25rem 0.5rem; border-radius: 4px;">
814
+ <option>Newest First</option>
815
+ <option>Ending Soon</option>
816
+ <option>Most Entries</option>
817
+ <option>Value: High to Low</option>
818
+ </select>
819
+ </div>
820
+ </div>
821
+
822
+ <div class="giveaways-grid" id="giveawaysGrid">
823
+ <!-- Cards will be populated by JavaScript -->
824
+ </div>
825
+ </div>
826
+ </section>
827
+
828
+ <!-- Winners Section -->
829
+ <section class="winners-section" id="winners">
830
+ <div class="container">
831
+ <div class="section-header">
832
+ <h2 class="section-title">
833
+ <i class="fas fa-trophy" style="color: gold;"></i>
834
+ Recent Winners
835
+ </h2>
836
+ <a href="#" style="color: var(--primary); text-decoration: none; font-weight: 600; font-size: 0.875rem;">
837
+ View All <i class="fas fa-arrow-right"></i>
838
+ </a>
839
+ </div>
840
+
841
+ <div class="winners-grid" id="winnersGrid">
842
+ <!-- Winners populated by JavaScript -->
843
+ </div>
844
+ </div>
845
+ </section>
846
+
847
+ <!-- Footer -->
848
+ <footer>
849
+ <div class="container">
850
+ <div class="footer-content">
851
+ <div class="footer-section">
852
+ <h3>About RetroPlay</h3>
853
+ <p>The ultimate gaming community platform where players can win free games, trade items, and connect with fellow gamers worldwide.</p>
854
+ <div class="social-links">
855
+ <a href="#"><i class="fab fa-discord"></i></a>
856
+ <a href="#"><i class="fab fa-twitter"></i></a>
857
+ <a href="#"><i class="fab fa-steam"></i></a>
858
+ <a href="#"><i class="fab fa-youtube"></i></a>
859
+ </div>
860
+ </div>
861
+ <div class="footer-section">
862
+ <h3>Quick Links</h3>
863
+ <p style="line-height: 2;">
864
+ <a href="#" style="color: var(--text-secondary); text-decoration: none; display: block;">How to Enter</a>
865
+ <a href="#" style="color: var(--text-secondary); text-decoration: none; display: block;">Winner FAQs</a>
866
+ <a href="#" style="color: var(--text-secondary); text-decoration: none; display: block;">Terms of Service</a>
867
+ <a href="#" style="color: var(--text-secondary); text-decoration: none; display: block;">Privacy Policy</a>
868
+ </p>
869
+ </div>
870
+ <div class="footer-section">
871
+ <h3>Newsletter</h3>
872
+ <p>Get notified about new giveaways and exclusive drops.</p>
873
+ <div style="display: flex; gap: 0.5rem; margin-top: 1rem;">
874
+ <input type="email" placeholder="Enter email..." style="flex: 1; padding: 0.75rem; background: rgba(255,255,255,0.05); border: 1px solid var(--border); border-radius: 8px; color: var(--text-primary);">
875
+ <button class="btn btn-primary"><i class="fas fa-paper-plane"></i></button>
876
+ </div>
877
+ </div>
878
+ </div>
879
+ <div class="footer-bottom">
880
+ <p>&copy; 2024 RetroPlay Giveaways. All rights reserved. Not affiliated with Steam or Valve Corporation.</p>
881
+ </div>
882
+ </div>
883
+ </footer>
884
+
885
+ <!-- Success Modal -->
886
+ <div class="modal" id="successModal">
887
+ <div class="modal-content">
888
+ <div class="modal-icon">
889
+ <i class="fas fa-check"></i>
890
+ </div>
891
+ <h2>Entry Submitted!</h2>
892
+ <p>You have successfully entered the giveaway. Good luck! Winner will be announced when the timer ends.</p>
893
+ <button class="btn btn-primary" onclick="closeModal()" style="width: 100%;">
894
+ Awesome!
895
+ </button>
896
+ </div>
897
+ </div>
898
+
899
+ <script>
900
+ // Giveaway Data
901
+ const giveaways = [
902
+ {
903
+ id: 1,
904
+ title: "Cyberpunk 2077: Ultimate Edition",
905
+ platform: "steam",
906
+ platformIcon: "fab fa-steam",
907
+ image: "https://images.unsplash.com/photo-1542751371-adc38448a05e?w=800&h=400&fit=crop",
908
+ value: "$59.99",
909
+ entries: 1247,
910
+ maxEntries: 5000,
911
+ endTime: new Date(Date.now() + 86400000 * 2).getTime(), // 2 days
912
+ type: "game"
913
+ },
914
+ {
915
+ id: 2,
916
+ title: "Baldur's Gate 3 Digital Deluxe",
917
+ platform: "steam",
918
+ platformIcon: "fab fa-steam",
919
+ image: "https://images.unsplash.com/photo-1511512578047-dfb367046420?w=800&h=400&fit=crop",
920
+ value: "$69.99",
921
+ entries: 3421,
922
+ maxEntries: 10000,
923
+ endTime: new Date(Date.now() + 86400000 * 5).getTime(), // 5 days
924
+ type: "game"
925
+ },
926
+ {
927
+ id: 3,
928
+ title: "Counter-Strike 2 Prime Status",
929
+ platform: "steam",
930
+ platformIcon: "fab fa-steam",
931
+ image: "https://images.unsplash.com/photo-1538481199705-c710c4e965fc?w=800&h=400&fit=crop",
932
+ value: "$14.99",
933
+ entries: 892,
934
+ maxEntries: 2000,
935
+ endTime: new Date(Date.now() + 3600000 * 12).getTime(), // 12 hours
936
+ type: "game"
937
+ },
938
+ {
939
+ id: 4,
940
+ title: "Elden Ring Shadow of the Erdtree",
941
+ platform: "steam",
942
+ platformIcon: "fab fa-steam",
943
+ image: "https://images.unsplash.com/photo-1552820728-8b83bb6b2b0a?w=800&h=400&fit=crop",
944
+ value: "$39.99",
945
+ entries: 2156,
946
+ maxEntries: 3000,
947
+ endTime: new Date(Date.now() + 86400000 * 1).getTime(), // 1 day
948
+ type: "dlc"
949
+ },
950
+ {
951
+ id: 5,
952
+ title: "Discord Nitro (1 Year)",
953
+ platform: "discord",
954
+ platformIcon: "fab fa-discord",
955
+ image: "https://images.unsplash.com/photo-1614680376593-902f74cf0d41?w=800&h=400&fit=crop",
956
+ value: "$99.99",
957
+ entries: 5678,
958
+ maxEntries: 8000,
959
+ endTime: new Date(Date.now() + 86400000 * 3).getTime(), // 3 days
960
+ type: "game"
961
+ },
962
+ {
963
+ id: 6,
964
+ title: "Valorant 10,000 VP",
965
+ platform: "windows",
966
+ platformIcon: "fab fa-windows",
967
+ image: "https://images.unsplash.com/photo-1542751110-97427bbecf20?w=800&h=400&fit=crop",
968
+ value: "$99.99",
969
+ entries: 445,
970
+ maxEntries: 1500,
971
+ endTime: new Date(Date.now() + 86400000 * 7).getTime(), // 7 days
972
+ type: "game"
973
+ }
974
+ ];
975
+
976
+ const winners = [
977
+ { name: "Alex_M", prize: "Cyberpunk 2077", date: "2 hours ago", avatar: "A" },
978
+ { name: "GameMaster99", prize: "Steam $50 Gift Card", date: "5 hours ago", avatar: "G" },
979
+ { name: "RetroFan_X", prize: "Elden Ring", date: "1 day ago", avatar: "R" },
980
+ { name: "PixelHunter", prize: "Discord Nitro", date: "1 day ago", avatar: "P" },
981
+ { name: "NightOwl", prize: "CS2 Prime", date: "2 days ago", avatar: "N" },
982
+ { name: "SpeedRun", prize: "BG3 Deluxe", date: "2 days ago", avatar: "S" }
983
+ ];
984
+
985
+ // Render Giveaways
986
+ function renderGiveaways(filter = 'all') {
987
+ const grid = document.getElementById('giveawaysGrid');
988
+ grid.innerHTML = '';
989
+
990
+ const filtered = filter === 'all' ? giveaways : giveaways.filter(g => g.type === filter || (filter === 'ending' && g.endTime - Date.now() < 86400000));
991
+
992
+ filtered.forEach(giveaway => {
993
+ const progress = (giveaway.entries / giveaway.maxEntries) * 100;
994
+ const card = document.createElement('div');
995
+ card.className = 'giveaway-card';
996
+ card.innerHTML = `
997
+ <div class="card-image">
998
+ <img src="${giveaway.image}" alt="${giveaway.title}">
999
+ <div class="platform-badge">
1000
+ <i class="${giveaway.platformIcon}"></i>
1001
+ </div>
1002
+ <div class="countdown" data-end="${giveaway.endTime}">
1003
+ <div class="countdown-item">
1004
+ <span class="countdown-value" id="days-${giveaway.id}">00</span>
1005
+ <span class="countdown-label">Days</span>
1006
+ </div>
1007
+ <div class="countdown-item">
1008
+ <span class="countdown-value" id="hours-${giveaway.id}">00</span>
1009
+ <span class="countdown-label">Hrs</span>
1010
+ </div>
1011
+ <div class="countdown-item">
1012
+ <span class="countdown-value" id="mins-${giveaway.id}">00</span>
1013
+ <span class="countdown-label">Mins</span>
1014
+ </div>
1015
+ <div class="countdown-item">
1016
+ <span class="countdown-value" id="secs-${giveaway.id}">00</span>
1017
+ <span class="countdown-label">Secs</span>
1018
+ </div>
1019
+ </div>
1020
+ </div>
1021
+ <div class="card-content">
1022
+ <div class="card-header">
1023
+ <div>
1024
+ <div class="card-title">${giveaway.title}</div>
1025
+ <div class="card-value">${giveaway.value} Value</div>
1026
+ </div>
1027
+ </div>
1028
+ <div class="entries-info">
1029
+ <span><i class="fas fa-users"></i> ${giveaway.entries.toLocaleString()} entries</span>
1030
+ <span>${Math.round(progress)}% full</span>
1031
+ </div>
1032
+ <div class="progress-bar">
1033
+ <div class="progress-fill" style="width: ${progress}%"></div>
1034
+ </div>
1035
+ <button class="enter-btn" onclick="enterGiveaway(${giveaway.id}, this)">
1036
+ <i class="fas fa-ticket-alt"></i>
1037
+ Enter Giveaway
1038
+ </button>
1039
+ </div>
1040
+ `;
1041
+ grid.appendChild(card);
1042
+ });
1043
+
1044
+ startCountdowns();
1045
+ }
1046
+
1047
+ // Render Winners
1048
+ function renderWinners() {
1049
+ const grid = document.getElementById('winnersGrid');
1050
+ winners.forEach(winner => {
1051
+ const card = document.createElement('div');
1052
+ card.className = 'winner-card';
1053
+ card.innerHTML = `
1054
+ <div class="winner-avatar">${winner.avatar}</div>
1055
+ <div class="winner-info">
1056
+ <h4>${winner.name}</h4>
1057
+ <p>Won ${winner.prize}</p>
1058
+ <small style="color: var(--text-secondary);">${winner.date}</small>
1059
+ </div>
1060
+ <div class="winner-prize">
1061
+ <i class="fas fa-check-circle"></i>
1062
+ </div>
1063
+ `;
1064
+ grid.appendChild(card);
1065
+ });
1066
+ }
1067
+
1068
+ // Countdown Timer
1069
+ function startCountdowns() {
1070
+ const countdowns = document.querySelectorAll('.countdown');
1071
+ countdowns.forEach(countdown => {
1072
+ const endTime = parseInt(countdown.getAttribute('data-end'));
1073
+ const id = countdown.querySelector('.countdown-value').id.split('-')[1];
1074
+
1075
+ const interval = setInterval(() => {
1076
+ const now = Date.now();
1077
+ const diff = endTime - now;
1078
+
1079
+ if (diff <= 0) {
1080
+ clearInterval(interval);
1081
+ return;
1082
+ }
1083
+
1084
+ const days = Math.floor(diff / (1000 * 60 * 60 * 24));
1085
+ const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
1086
+ const mins = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
1087
+ const secs = Math.floor((diff % (1000 * 60)) / 1000);
1088
+
1089
+ document.getElementById(`days-${id}`).textContent = String(days).padStart(2, '0');
1090
+ document.getElementById(`hours-${id}`).textContent = String(hours).padStart(2, '0');
1091
+ document.getElementById(`mins-${id}`).textContent = String(mins).padStart(2, '0');
1092
+ document.getElementById(`secs-${id}`).textContent = String(secs).padStart(2, '0');
1093
+ }, 1000);
1094
+ });
1095
+ }
1096
+
1097
+ // Enter Giveaway
1098
+ function enterGiveaway(id, btn) {
1099
+ if (btn.classList.contains('entered')) return;
1100
+
1101
+ // Simulate API call
1102
+ btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Processing...';
1103
+
1104
+ setTimeout(() => {
1105
+ btn.classList.add('entered');
1106
+ btn.innerHTML = '<i class="fas fa-check"></i> Entered';
1107
+ document.getElementById('successModal').classList.add('active');
1108
+
1109
+ // Update stats
1110
+ const giveaway = giveaways.find(g => g.id === id);
1111
+ if (giveaway) {
1112
+ giveaway.entries++;
1113
+ renderGiveaways(document.querySelector('.filter-btn.active').dataset.filter);
1114
+ }
1115
+ }, 1000);
1116
+ }
1117
+
1118
+ function closeModal() {
1119
+ document.getElementById('successModal').classList.remove('active');
1120
+ }
1121
+
1122
+ // Filter Buttons
1123
+ document.querySelectorAll('.filter-btn').forEach(btn => {
1124
+ btn.addEventListener('click', function() {
1125
+ document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
1126
+ this.classList.add('active');
1127
+ renderGiveaways(this.dataset.filter);
1128
+ });
1129
+ });
1130
+
1131
+ // Close modal on outside click
1132
+ document.getElementById('successModal').addEventListener('click', function(e) {
1133
+ if (e.target === this) closeModal();
1134
+ });
1135
+
1136
+ // Initialize
1137
+ renderGiveaways();
1138
+ renderWinners();
1139
+
1140
+ // Animate stats on load
1141
+ window.addEventListener('load', () => {
1142
+ const stats = document.querySelectorAll('.stat-value');
1143
+ stats.forEach((stat, index) => {
1144
+ setTimeout(() => {
1145
+ stat.style.transform = 'scale(1.1)';
1146
+ setTimeout(() => {
1147
+ stat.style.transform = 'scale(1)';
1148
+ }, 200);
1149
+ }, index * 100);
1150
+ });
1151
+ });
1152
+ </script>
1153
+ </body>
1154
+ </html>