Hugging Face's logo

Spaces:
Clubhuts
/
ddd
Running

App Files Community
1

Delete index.html

#1
by Lambda38834 - opened
base: refs/heads/main
←
from: refs/pr/1
Discussion Files changed
+0
-813
Files changed (1) hide show
  1. index.html +0 -813
index.html DELETED
@@ -1,813 +0,0 @@
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>Hutsakeee Giveaway Dashboard (Nederlands)</title>
7
- <script src="https://cdn.tailwindcss.com"></script>
8
- <link href="https://fonts.googleapis.com/css2?family=Bungee&family=Press+Start+2P&display=swap" rel="stylesheet">
9
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
- <style>
11
- :root {
12
- --fortnite-purple: #8a2be2;
13
- --fortnite-blue: #00bfff;
14
- --fortnite-yellow: #ffd700;
15
- --fortnite-pink: #ff69b4;
16
- --fortnite-dark: #1a1a2e;
17
- }
18
-
19
- body {
20
- font-family: 'Bungee', cursive;
21
- background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
22
- color: white;
23
- min-height: 100vh;
24
- overflow-x: hidden;
25
- }
26
-
27
- .fortnite-text {
28
- font-family: 'Bungee', cursive;
29
- text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
30
- }
31
-
32
- .glow-border {
33
- border: 2px solid var(--fortnite-blue);
34
- box-shadow: 0 0 15px var(--fortnite-blue), inset 0 0 10px var(--fortnite-blue);
35
- }
36
-
37
- .glow-border-purple {
38
- border: 2px solid var(--fortnite-purple);
39
- box-shadow: 0 0 15px var(--fortnite-purple), inset 0 0 10px var(--fortnite-purple);
40
- }
41
-
42
- .glow-border-pink {
43
- border: 2px solid var(--fortnite-pink);
44
- box-shadow: 0 0 15px var(--fortnite-pink), inset 0 0 10px var(--fortnite-pink);
45
- }
46
-
47
- .glow-border-yellow {
48
- border: 2px solid var(--fortnite-yellow);
49
- box-shadow: 0 0 15px var(--fortnite-yellow), inset 0 0 10px var(--fortnite-yellow);
50
- }
51
-
52
- .fortnite-btn {
53
- transition: all 0.3s ease;
54
- transform: skew(-15deg);
55
- border: none;
56
- outline: none;
57
- font-weight: bold;
58
- letter-spacing: 1px;
59
- }
60
-
61
- .fortnite-btn:hover {
62
- transform: skew(-15deg) scale(1.05);
63
- filter: brightness(1.2);
64
- }
65
-
66
- .fortnite-btn-blue {
67
- background: var(--fortnite-blue);
68
- color: white;
69
- box-shadow: 0 0 15px var(--fortnite-blue);
70
- }
71
-
72
- .fortnite-btn-purple {
73
- background: var(--fortnite-purple);
74
- color: white;
75
- box-shadow: 0 0 15px var(--fortnite-purple);
76
- }
77
-
78
- .fortnite-btn-pink {
79
- background: var(--fortnite-pink);
80
- color: white;
81
- box-shadow: 0 0 15px var(--fortnite-pink);
82
- }
83
-
84
- .fortnite-btn-yellow {
85
- background: var(--fortnite-yellow);
86
- color: black;
87
- box-shadow: 0 0 15px var(--fortnite-yellow);
88
- }
89
-
90
- .avatar-card {
91
- transition: all 0.3s ease;
92
- background: rgba(26, 26, 46, 0.7);
93
- border-radius: 10px;
94
- overflow: hidden;
95
- }
96
-
97
- .avatar-card:hover {
98
- transform: translateY(-5px);
99
- box-shadow: 0 10px 20px rgba(0, 191, 255, 0.3);
100
- }
101
-
102
- .scrollbar-hide {
103
- scrollbar-width: none; /* Firefox */
104
- -ms-overflow-style: none; /* IE and Edge */
105
- }
106
-
107
- .scrollbar-hide::-webkit-scrollbar {
108
- display: none; /* Chrome, Safari and Opera */
109
- }
110
-
111
- .chat-message {
112
- animation: popIn 0.3s ease-out;
113
- }
114
-
115
- .winner-card {
116
- animation: winnerGlow 2s infinite alternate;
117
- }
118
-
119
- @keyframes popIn {
120
- 0% {
121
- opacity: 0;
122
- transform: scale(0.8);
123
- }
124
- 100% {
125
- opacity: 1;
126
- transform: scale(1);
127
- }
128
- }
129
-
130
- @keyframes winnerGlow {
131
- 0% {
132
- box-shadow: 0 0 10px var(--fortnite-yellow);
133
- }
134
- 100% {
135
- box-shadow: 0 0 30px var(--fortnite-yellow);
136
- }
137
- }
138
-
139
- .countdown {
140
- font-family: 'Press Start 2P', cursive;
141
- }
142
-
143
- .active-glow {
144
- animation: activePulse 1.5s infinite alternate;
145
- }
146
-
147
- @keyframes activePulse {
148
- 0% {
149
- box-shadow: 0 0 10px #00ff00;
150
- }
151
- 100% {
152
- box-shadow: 0 0 20px #00ff00;
153
- }
154
- }
155
-
156
- .inactive-glow {
157
- animation: inactivePulse 1.5s infinite alternate;
158
- }
159
-
160
- @keyframes inactivePulse {
161
- 0% {
162
- box-shadow: 0 0 10px #ff0000;
163
- }
164
- 100% {
165
- box-shadow: 0 0 20px #ff0000;
166
- }
167
- }
168
-
169
- /* Responsive adjustments */
170
- @media (max-width: 768px) {
171
- .main-columns {
172
- flex-direction: column;
173
- }
174
-
175
- .column {
176
- width: 100% !important;
177
- margin-bottom: 20px;
178
- }
179
-
180
- .info-cards {
181
- flex-wrap: wrap;
182
- }
183
-
184
- .info-card {
185
- width: 48% !important;
186
- margin-bottom: 10px;
187
- }
188
-
189
- .participants-grid {
190
- grid-template-columns: repeat(2, 1fr) !important;
191
- }
192
- }
193
-
194
- @media (max-width: 480px) {
195
- .top-bar {
196
- flex-direction: column;
197
- height: auto !important;
198
- padding: 10px !important;
199
- }
200
-
201
- .top-bar-left, .top-bar-right {
202
- width: 100% !important;
203
- justify-content: center !important;
204
- margin-bottom: 10px;
205
- }
206
-
207
- .info-card {
208
- width: 100% !important;
209
- }
210
-
211
- .participants-grid {
212
- grid-template-columns: 1fr !important;
213
- }
214
- }
215
- </style>
216
- </head>
217
- <body class="p-4">
218
- <!-- Top Bar -->
219
- <div class="flex justify-between items-center p-4 mb-6 glow-border rounded-lg bg-gray-900 top-bar">
220
- <div class="flex items-center top-bar-left">
221
- <i class="fas fa-trophy text-3xl mr-3 text-yellow-400"></i>
222
- <h1 class="text-2xl fortnite-text text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-blue-400">
223
- Hutsakeee Giveaway Dashboard (Nederlands)
224
- </h1>
225
- </div>
226
- <div class="flex items-center space-x-4 top-bar-right">
227
- <div class="flex items-center fortnite-btn fortnite-btn-yellow px-4 py-2 rounded">
228
- <i class="fas fa-coins mr-2"></i>
229
- <span>V-Bucks: 25,000</span>
230
- </div>
231
- <div class="flex items-center fortnite-btn px-4 py-2 rounded inactive-glow">
232
- <i class="fas fa-circle mr-2 text-red-400"></i>
233
- <span>Status: INACTIEF</span>
234
- </div>
235
- <button id="stopGiveawayBtn" class="fortnite-btn fortnite-btn-blue px-4 py-2 rounded">
236
- <i class="fas fa-play mr-2"></i>
237
- Start
238
- </button>
239
- <button id="logoutBtn" class="fortnite-btn fortnite-btn-pink px-4 py-2 rounded">
240
- <i class="fas fa-sign-out-alt mr-2"></i>
241
- Logout
242
- </button>
243
- </div>
244
- </div>
245
-
246
- <!-- Info Row -->
247
- <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6 info-cards">
248
- <div class="bg-gray-800 p-4 rounded-lg glow-border-purple info-card">
249
- <div class="flex items-center">
250
- <i class="fas fa-users text-2xl mr-3 text-purple-400"></i>
251
- <div>
252
- <h3 class="text-sm text-gray-300">Actieve Deelnemers</h3>
253
- <p class="text-2xl font-bold text-white">1,248</p>
254
- </div>
255
- </div>
256
- </div>
257
- <div class="bg-gray-800 p-4 rounded-lg glow-border-blue info-card">
258
- <div class="flex items-center">
259
- <i class="fas fa-trophy text-2xl mr-3 text-blue-400"></i>
260
- <div>
261
- <h3 class="text-sm text-gray-300">Totaal Winnaars</h3>
262
- <p class="text-2xl font-bold text-white">42</p>
263
- </div>
264
- </div>
265
- </div>
266
- <div class="bg-gray-800 p-4 rounded-lg glow-border-yellow info-card">
267
- <div class="flex items-center">
268
- <i class="fas fa-coins text-2xl mr-3 text-yellow-400"></i>
269
- <div>
270
- <h3 class="text-sm text-gray-300">V-Bucks Uitgedeeld</h3>
271
- <p class="text-2xl font-bold text-white">210,000</p>
272
- </div>
273
- </div>
274
- </div>
275
- <div class="bg-gray-800 p-4 rounded-lg glow-border-pink info-card">
276
- <div class="flex items-center">
277
- <i class="fas fa-clock text-2xl mr-3 text-pink-400"></i>
278
- <div>
279
- <h3 class="text-sm text-gray-300">Resterende Tijd</h3>
280
- <p class="text-xl countdown text-white">01:23:45</p>
281
- </div>
282
- </div>
283
- </div>
284
- </div>
285
-
286
- <!-- Main Area -->
287
- <div class="flex flex-col md:flex-row gap-6 mb-6 main-columns">
288
- <!-- Left Column - Analytics -->
289
- <div class="w-full md:w-1/3 bg-gray-800 p-4 rounded-lg glow-border-purple column">
290
- <h2 class="text-xl mb-4 fortnite-text text-purple-400 flex items-center">
291
- <i class="fas fa-chart-line mr-2"></i> Statistieken
292
- </h2>
293
- <div class="flex justify-around mb-4">
294
- <button class="fortnite-btn fortnite-btn-purple px-3 py-1 rounded text-xs">24H</button>
295
- <button class="fortnite-btn bg-gray-700 px-3 py-1 rounded text-xs">7D</button>
296
- <button class="fortnite-btn bg-gray-700 px-3 py-1 rounded text-xs">30D</button>
297
- </div>
298
- <div class="h-64 bg-gray-900 rounded p-2 relative">
299
- <!-- Detailed analytics chart -->
300
- <div class="absolute inset-0 flex flex-col">
301
- <div class="flex-1 grid grid-cols-7 gap-1 items-end">
302
- <!-- Hourly participation data -->
303
- <div class="h-3/4 bg-gradient-to-t from-purple-500 to-purple-300 rounded-t" title="12AM: 142 entries"></div>
304
- <div class="h-1/2 bg-gradient-to-t from-blue-500 to-blue-300 rounded-t" title="3AM: 85 entries"></div>
305
- <div class="h-2/5 bg-gradient-to-t from-yellow-500 to-yellow-300 rounded-t" title="6AM: 62 entries"></div>
306
- <div class="h-3/5 bg-gradient-to-t from-pink-500 to-pink-300 rounded-t" title="9AM: 98 entries"></div>
307
- <div class="h-full bg-gradient-to-t from-purple-500 to-purple-300 rounded-t" title="12PM: 210 entries"></div>
308
- <div class="h-4/5 bg-gradient-to-t from-blue-500 to-blue-300 rounded-t" title="3PM: 185 entries"></div>
309
- <div class="h-5/6 bg-gradient-to-t from-yellow-500 to-yellow-300 rounded-t" title="6PM: 198 entries"></div>
310
- </div>
311
- <div class="h-8 flex justify-between text-xs text-gray-400 px-1">
312
- <span>12AM</span>
313
- <span>6AM</span>
314
- <span>12PM</span>
315
- <span>6PM</span>
316
- </div>
317
- </div>
318
- <div class="absolute top-2 left-2 text-xs text-gray-300">
319
- Deelname laatste 24 uur
320
- </div>
321
- </div>
322
- <div class="mt-4 grid grid-cols-3 gap-2">
323
- <div class="bg-gray-900 p-2 rounded text-center">
324
- <p class="text-xs text-gray-400">Piek Uur</p>
325
- <p class="text-sm font-bold">12PM UTC</p>
326
- <p class="text-xs text-gray-500">210 entries</p>
327
- </div>
328
- <div class="bg-gray-900 p-2 rounded text-center">
329
- <p class="text-xs text-gray-400">Gem/Uur</p>
330
- <p class="text-sm font-bold">142</p>
331
- <p class="text-xs text-gray-500">±32</p>
332
- </div>
333
- <div class="bg-gray-900 p-2 rounded text-center">
334
- <p class="text-xs text-gray-400">Unieke Gebruikers</p>
335
- <p class="text-sm font-bold">892</p>
336
- <p class="text-xs text-gray-500">24h period</p>
337
- </div>
338
- </div>
339
- </div>
340
-
341
- <!-- Middle Column - Live Chat -->
342
- <div class="w-full md:w-1/3 bg-gray-800 p-4 rounded-lg glow-border-blue column">
343
- <h2 class="text-xl mb-2 fortnite-text text-blue-400 flex items-center">
344
- <i class="fas fa-comment-alt mr-2"></i> Live YouTube Chat
345
- </h2>
346
- <div class="flex justify-between mb-2 text-sm">
347
- <div class="fortnite-btn bg-gray-700 px-3 py-1 rounded">
348
- <i class="fas fa-comment mr-1"></i> Total Messages: <span id="totalMessages">0</span>
349
- </div>
350
- <div class="fortnite-btn bg-gray-700 px-3 py-1 rounded">
351
- <i class="fas fa-user-plus mr-1"></i> !join Commands: <span id="totalJoins">0</span>
352
- </div>
353
- </div>
354
- <div class="h-96 bg-gray-900 rounded p-2 overflow-y-auto scrollbar-hide">
355
- <div class="space-y-2 chat-container">
356
- <!-- Chat messages will be added here dynamically -->
357
- <div class="chat-message bg-gray-800 p-2 rounded flex items-start">
358
- <img src="https://i.pravatar.cc/40?img=1" class="w-8 h-8 rounded-full mr-2" alt="User avatar">
359
- <div>
360
- <p class="font-bold text-blue-300">NinjaPlayer99</p>
361
- <p>!join NinjaSlayer123</p>
362
- </div>
363
- </div>
364
- <div class="chat-message bg-gray-800 p-2 rounded flex items-start">
365
- <img src="https://i.pravatar.cc/40?img=2" class="w-8 h-8 rounded-full mr-2" alt="User avatar">
366
- <div>
367
- <p class="font-bold text-purple-300">SkullTrooper</p>
368
- <p>!join SkullCrusher99</p>
369
- </div>
370
- </div>
371
- <div class="chat-message bg-gray-800 p-2 rounded flex items-start">
372
- <img src="https://i.pravatar.cc/40?img=3" class="w-8 h-8 rounded-full mr-2" alt="User avatar">
373
- <div>
374
- <p class="font-bold text-yellow-300">V-BucksKing</p>
375
- <p>!join V-BucksCollector</p>
376
- </div>
377
- </div>
378
- <div class="chat-message bg-gray-800 p-2 rounded flex items-start">
379
- <img src="https://i.pravatar.cc/40?img=4" class="w-8 h-8 rounded-full mr-2" alt="User avatar">
380
- <div>
381
- <p class="font-bold text-pink-300">PinkGhoul</p>
382
- <p>!join PinkDestroyer</p>
383
- </div>
384
- </div>
385
- <div class="chat-message bg-gray-800 p-2 rounded flex items-start">
386
- <img src="https://i.pravatar.cc/40?img=5" class="w-8 h-8 rounded-full mr-2" alt="User avatar">
387
- <div>
388
- <p class="font-bold text-green-300">BuilderPro</p>
389
- <p>!join MasterBuilder</p>
390
- </div>
391
- </div>
392
- </div>
393
- </div>
394
- </div>
395
-
396
- <!-- Right Column - Recent Winners -->
397
- <div class="w-full md:w-1/3 bg-gray-800 p-4 rounded-lg glow-border-yellow column">
398
- <h2 class="text-xl mb-4 fortnite-text text-yellow-400 flex items-center">
399
- <i class="fas fa-crown mr-2"></i> Recente Winnaars
400
- </h2>
401
- <div class="space-y-4 overflow-y-auto h-[calc(100%-3.5rem)] scrollbar-hide">
402
- <div class="winner-card bg-gray-900 p-4 rounded-lg border-2 border-yellow-400">
403
- <div class="flex items-center">
404
- <img src="https://i.pravatar.cc/60?img=10" class="w-12 h-12 rounded-full mr-3" alt="Winner avatar">
405
- <div>
406
- <p class="font-bold text-xl text-yellow-300">VictoryRoyale</p>
407
- <p class="text-sm text-gray-300">Won 5,000 V-Bucks</p>
408
- </div>
409
- <div class="ml-auto flex items-center">
410
- <i class="fas fa-coins text-yellow-400 text-2xl mr-1"></i>
411
- <span class="font-bold">5K</span>
412
- </div>
413
- </div>
414
- </div>
415
- <div class="winner-card bg-gray-900 p-4 rounded-lg border-2 border-yellow-400">
416
- <div class="flex items-center">
417
- <img src="https://i.pravatar.cc/60?img=11" class="w-12 h-12 rounded-full mr-3" alt="Winner avatar">
418
- <div>
419
- <p class="font-bold text-xl text-yellow-300">NoobSlayer</p>
420
- <p class="text-sm text-gray-300">Won 2,500 V-Bucks</p>
421
- </div>
422
- <div class="ml-auto flex items-center">
423
- <i class="fas fa-coins text-yellow-400 text-2xl mr-1"></i>
424
- <span class="font-bold">2.5K</span>
425
- </div>
426
- </div>
427
- </div>
428
- <div class="winner-card bg-gray-900 p-4 rounded-lg border-2 border-yellow-400">
429
- <div class="flex items-center">
430
- <img src="https://i.pravatar.cc/60?img=12" class="w-12 h-12 rounded-full mr-3" alt="Winner avatar">
431
- <div>
432
- <p class="font-bold text-xl text-yellow-300">GhostBoss</p>
433
- <p class="text-sm text-gray-300">Won 1,000 V-Bucks</p>
434
- </div>
435
- <div class="ml-auto flex items-center">
436
- <i class="fas fa-coins text-yellow-400 text-2xl mr-1"></i>
437
- <span class="font-bold">1K</span>
438
- </div>
439
- </div>
440
- </div>
441
- <div class="winner-card bg-gray-900 p-4 rounded-lg border-2 border-yellow-400">
442
- <div class="flex items-center">
443
- <img src="https://i.pravatar.cc/60?img=13" class="w-12 h-12 rounded-full mr-3" alt="Winner avatar">
444
- <div>
445
- <p class="font-bold text-xl text-yellow-300">ShadowNinja</p>
446
- <p class="text-sm text-gray-300">Won 7,500 V-Bucks</p>
447
- </div>
448
- <div class="ml-auto flex items-center">
449
- <i class="fas fa-coins text-yellow-400 text-2xl mr-1"></i>
450
- <span class="font-bold">7.5K</span>
451
- </div>
452
- </div>
453
- </div>
454
- </div>
455
- <button id="drawWinnerBtn" class="fortnite-btn fortnite-btn-yellow w-full mt-4 py-2 rounded-lg">
456
- <i class="fas fa-random mr-2"></i> Nieuwe Winnaar Kiezen
457
- </button>
458
- </div>
459
- </div>
460
-
461
- <!-- Bottom Section - Current Participants -->
462
- <div class="bg-gray-800 p-4 rounded-lg glow-border-pink">
463
- <h2 class="text-xl mb-4 fortnite-text text-pink-400 flex items-center">
464
- <i class="fas fa-users mr-2"></i> Current Participants (1,248)
465
- </h2>
466
- <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4 participants-grid">
467
- <!-- Participant cards will be added here dynamically -->
468
- <div class="avatar-card p-3 text-center">
469
- <img src="https://i.pravatar.cc/80?img=6" class="w-16 h-16 rounded-full mx-auto mb-2 border-2 border-blue-400" alt="Participant avatar">
470
- <p class="font-bold text-blue-300">NinjaPlayer99</p>
471
- <p class="text-xs text-yellow-300">500 V-Bucks</p>
472
- </div>
473
- <div class="avatar-card p-3 text-center">
474
- <img src="https://i.pravatar.cc/80?img=7" class="w-16 h-16 rounded-full mx-auto mb-2 border-2 border-purple-400" alt="Participant avatar">
475
- <p class="font-bold text-purple-300">SkullTrooper</p>
476
- <p class="text-xs text-yellow-300">500 V-Bucks</p>
477
- </div>
478
- <div class="avatar-card p-3 text-center">
479
- <img src="https://i.pravatar.cc/80?img=8" class="w-16 h-16 rounded-full mx-auto mb-2 border-2 border-yellow-400" alt="Participant avatar">
480
- <p class="font-bold text-yellow-300">V-BucksKing</p>
481
- <p class="text-xs text-yellow-300">500 V-Bucks</p>
482
- </div>
483
- <div class="avatar-card p-3 text-center">
484
- <img src="https://i.pravatar.cc/80?img=9" class="w-16 h-16 rounded-full mx-auto mb-2 border-2 border-pink-400" alt="Participant avatar">
485
- <p class="font-bold text-pink-300">PinkGhoul</p>
486
- <p class="text-xs text-yellow-300">500 V-Bucks</p>
487
- </div>
488
- <div class="avatar-card p-3 text-center">
489
- <img src="https://i.pravatar.cc/80?img=14" class="w-16 h-16 rounded-full mx-auto mb-2 border-2 border-green-400" alt="Participant avatar">
490
- <p class="font-bold text-green-300">BuilderPro</p>
491
- <p class="text-xs text-yellow-300">500 V-Bucks</p>
492
- </div>
493
- <div class="avatar-card p-3 text-center">
494
- <img src="https://i.pravatar.cc/80?img=15" class="w-16 h-16 rounded-full mx-auto mb-2 border-2 border-red-400" alt="Participant avatar">
495
- <p class="font-bold text-red-300">RustLord</p>
496
- <p class="text-xs text-yellow-300">500 V-Bucks</p>
497
- </div>
498
- <div class="avatar-card p-3 text-center">
499
- <img src="https://i.pravatar.cc/80?img=16" class="w-16 h-16 rounded-full mx-auto mb-2 border-2 border-blue-400" alt="Participant avatar">
500
- <p class="font-bold text-blue-300">NoScopePro</p>
501
- <p class="text-xs text-yellow-300">500 V-Bucks</p>
502
- </div>
503
- <div class="avatar-card p-3 text-center">
504
- <img src="https://i.pravatar.cc/80?img=17" class="w-16 h-16 rounded-full mx-auto mb-2 border-2 border-purple-400" alt="Participant avatar">
505
- <p class="font-bold text-purple-300">GhostBoss</p>
506
- <p class="text-xs text-yellow-300">500 V-Bucks</p>
507
- </div>
508
- <div class="avatar-card p-3 text-center">
509
- <img src="https://i.pravatar.cc/80?img=18" class="w-16 h-16 rounded-full mx-auto mb-2 border-2 border-yellow-400" alt="Participant avatar">
510
- <p class="font-bold text-yellow-300">GoldenGunner</p>
511
- <p class="text-xs text-yellow-300">500 V-Bucks</p>
512
- </div>
513
- <div class="avatar-card p-3 text-center">
514
- <img src="https://i.pravatar.cc/80?img=19" class="w-16 h-16 rounded-full mx-auto mb-2 border-2 border-pink-400" alt="Participant avatar">
515
- <p class="font-bold text-pink-300">PinkSlayer</p>
516
- <p class="text-xs text-yellow-300">500 V-Bucks</p>
517
- </div>
518
- <div class="avatar-card p-3 text-center">
519
- <img src="https://i.pravatar.cc/80?img=20" class="w-16 h-16 rounded-full mx-auto mb-2 border-2 border-green-400" alt="Participant avatar">
520
- <p class="font-bold text-green-300">BuilderMaster</p>
521
- <p class="text-xs text-yellow-300">500 V-Bucks</p>
522
- </div>
523
- <div class="avatar-card p-3 text-center">
524
- <img src="https://i.pravatar.cc/80?img=21" class="w-16 h-16 rounded-full mx-auto mb-2 border-2 border-red-400" alt="Participant avatar">
525
- <p class="font-bold text-red-300">RustKing</p>
526
- <p class="text-xs text-yellow-300">500 V-Bucks</p>
527
- </div>
528
- </div>
529
- <div class="mt-4 flex justify-center">
530
- <button class="fortnite-btn fortnite-btn-pink px-6 py-2 rounded-lg">
531
- <i class="fas fa-sync-alt mr-2"></i> Meer Laden
532
- </button>
533
- </div>
534
- </div>
535
-
536
- <!-- Popup Container -->
537
- <div id="popupContainer" class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50 hidden">
538
- <div class="bg-gray-800 p-6 rounded-lg glow-border-purple max-w-md w-full">
539
- <h3 id="popupTitle" class="text-xl font-bold mb-4"></h3>
540
- <p id="popupMessage" class="mb-4"></p>
541
- <div id="popupContent"></div>
542
- <div class="flex justify-end space-x-3">
543
- <button id="popupCancel" class="fortnite-btn bg-gray-700 px-4 py-2 rounded">
544
- Cancel
545
- </button>
546
- <button id="popupConfirm" class="fortnite-btn fortnite-btn-purple px-4 py-2 rounded">
547
- Confirm
548
- </button>
549
- </div>
550
- </div>
551
- </div>
552
-
553
- <!-- Giveaway Config Template (hidden) -->
554
- <div id="giveawayConfigTemplate" class="hidden">
555
- <div class="space-y-4">
556
- <div class="flex items-center">
557
- <span class="text-sm font-medium text-gray-300 mr-2">V-Bucks:</span>
558
- <input type="number" id="vbucksAmount" class="flex-1 bg-gray-700 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500" value="500" min="100" step="100">
559
- </div>
560
- <div class="flex items-center">
561
- <span class="text-sm font-medium text-gray-300 mr-2">Duration (min):</span>
562
- <input type="number" id="giveawayDuration" class="flex-1 bg-gray-700 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500" value="30" min="1" max="1440">
563
- </div>
564
- </div>
565
- </div>
566
-
567
- <script>
568
- // Popup functions
569
- function showPopup(title, message, confirmCallback) {
570
- document.getElementById('popupTitle').textContent = title;
571
- document.getElementById('popupMessage').textContent = message;
572
- const popup = document.getElementById('popupContainer');
573
- popup.classList.remove('hidden');
574
-
575
- document.getElementById('popupConfirm').onclick = function() {
576
- confirmCallback();
577
- popup.classList.add('hidden');
578
- };
579
-
580
- document.getElementById('popupCancel').onclick = function() {
581
- popup.classList.add('hidden');
582
- };
583
- }
584
-
585
- // Chat statistics
586
- let totalMessages = 0;
587
- let totalJoins = 0;
588
-
589
- // Update stats display
590
- function updateStatsDisplay() {
591
- document.getElementById('totalMessages').textContent = totalMessages;
592
- document.getElementById('totalJoins').textContent = totalJoins;
593
- }
594
-
595
- // Simulate chat messages
596
- function addChatMessage() {
597
- totalMessages++;
598
- const users = [
599
- {name: "DarkKnight", color: "text-indigo-300"},
600
- {name: "LootLlama", color: "text-green-300"},
601
- {name: "SkyDancer", color: "text-red-300"},
602
- {name: "BushCamper", color: "text-teal-300"},
603
- {name: "HeadshotPro", color: "text-orange-300"}
604
- ];
605
-
606
- const fortniteNames = [
607
- "NinjaSlayer123", "SkullCrusher99", "V-BucksCollector",
608
- "PinkDestroyer", "MasterBuilder", "RustLordPro",
609
- "DarkKnightFT", "LootLlamaKing", "SkyDancerPro",
610
- "BushCamperFT", "HeadshotMaster"
611
- ];
612
- const messages = fortniteNames.map(name => `!join ${name}`);
613
-
614
- const randomUser = users[Math.floor(Math.random() * users.length)];
615
- const randomMessage = messages[Math.floor(Math.random() * messages.length)];
616
- if (randomMessage.startsWith('!join')) {
617
- totalJoins++;
618
- }
619
- const randomAvatar = Math.floor(Math.random() * 70) + 1;
620
-
621
- const chatContainer = document.querySelector('.chat-container');
622
- const newMessage = document.createElement('div');
623
- newMessage.className = 'chat-message bg-gray-800 p-2 rounded flex items-start';
624
- newMessage.innerHTML = `
625
- <img src="https://i.pravatar.cc/40?img=${randomAvatar}" class="w-8 h-8 rounded-full mr-2" alt="User avatar">
626
- <div>
627
- <p class="font-bold ${randomUser.color}">${randomUser.name}</p>
628
- <p>${randomMessage}</p>
629
- </div>
630
- `;
631
-
632
- chatContainer.prepend(newMessage);
633
- updateStatsDisplay();
634
-
635
- // Limit to 50 messages
636
- if (chatContainer.children.length > 50) {
637
- chatContainer.removeChild(chatContainer.lastChild);
638
- }
639
- }
640
-
641
- // Simulate countdown
642
- function updateCountdown() {
643
- const countdownElement = document.querySelector('.countdown');
644
- let time = countdownElement.textContent.split(':');
645
- let hours = parseInt(time[0]);
646
- let minutes = parseInt(time[1]);
647
- let seconds = parseInt(time[2]);
648
-
649
- seconds--;
650
-
651
- if (seconds < 0) {
652
- seconds = 59;
653
- minutes--;
654
-
655
- if (minutes < 0) {
656
- minutes = 59;
657
- hours--;
658
-
659
- if (hours < 0) {
660
- hours = 0;
661
- minutes = 0;
662
- seconds = 0;
663
- }
664
- }
665
- }
666
-
667
- countdownElement.textContent =
668
- `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
669
- }
670
-
671
- // Initialize stats display
672
- updateStatsDisplay();
673
-
674
- // Add initial chat messages
675
- for (let i = 0; i < 15; i++) {
676
- setTimeout(addChatMessage, i * 300);
677
- }
678
-
679
- // Set intervals
680
- setInterval(addChatMessage, 3000);
681
- setInterval(updateCountdown, 1000);
682
-
683
- // Button event handlers
684
- document.getElementById('stopGiveawayBtn').addEventListener('click', function() {
685
- const statusElement = document.querySelector('.top-bar-right .fortnite-btn:nth-child(2)');
686
- const isActive = statusElement.classList.contains('active-glow');
687
-
688
- if (isActive) {
689
- showPopup(
690
- "Stop Giveaway",
691
- "Are you sure you want to stop the current giveaway?",
692
- function() {
693
- statusElement.classList.remove('active-glow');
694
- statusElement.classList.add('inactive-glow');
695
- statusElement.innerHTML = '<i class="fas fa-circle mr-2 text-red-400"></i><span>Status: INACTIVE</span>';
696
- document.getElementById('stopGiveawayBtn').innerHTML = '<i class="fas fa-play mr-2"></i> Start';
697
- }
698
- );
699
- } else {
700
- // Show giveaway configuration popup
701
- const configTemplate = document.getElementById('giveawayConfigTemplate').cloneNode(true);
702
- configTemplate.classList.remove('hidden');
703
- document.getElementById('popupContent').appendChild(configTemplate);
704
-
705
- showPopup(
706
- "Giveaway Starten",
707
- "Stel V-Bucks bedrag en duur in:",
708
- function() {
709
- const vbucks = document.getElementById('vbucksAmount').value;
710
- const duration = document.getElementById('giveawayDuration').value;
711
-
712
- if (!vbucks || !duration) {
713
- alert("Please enter valid values!");
714
- return;
715
- }
716
-
717
- // Update UI directly
718
- statusElement.classList.remove('inactive-glow');
719
- statusElement.classList.add('active-glow');
720
- statusElement.innerHTML = '<i class="fas fa-circle mr-2 text-green-400"></i><span>Status: ACTIVE</span>';
721
- document.getElementById('stopGiveawayBtn').innerHTML = '<i class="fas fa-stop mr-2"></i> Stop';
722
-
723
- // Update countdown with the entered duration
724
- const hours = Math.floor(duration / 60);
725
- const minutes = duration % 60;
726
- document.querySelector('.countdown').textContent =
727
- `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:00`;
728
-
729
- // Update V-Bucks display
730
- document.querySelector('.fortnite-btn-yellow span').textContent = `V-Bucks: ${vbucks}`;
731
- }
732
- );
733
- }
734
- });
735
-
736
- document.getElementById('logoutBtn').addEventListener('click', function() {
737
- showPopup(
738
- "Uitloggen",
739
- "Weet je zeker dat je wilt uitloggen van het dashboard?",
740
- function() {
741
- // In a real app, this would redirect to logout
742
- alert("Je bent succesvol uitgelogd!");
743
- // window.location.href = "/logout";
744
- }
745
- );
746
- });
747
-
748
- document.getElementById('drawWinnerBtn').addEventListener('click', function() {
749
- const participants = [
750
- "NinjaPlayer99", "SkullTrooper", "V-BucksKing",
751
- "PinkGhoul", "BuilderPro", "RustLord",
752
- "DarkKnight", "LootLlama", "SkyDancer",
753
- "BushCamper", "HeadshotPro"
754
- ];
755
-
756
- showPopup(
757
- "Winnaar Kiezen",
758
- "Het systeem kiest willekeurig iemand die heeft deelgenomen aan de giveaway.",
759
- function() {
760
- const winner = participants[Math.floor(Math.random() * participants.length)];
761
- const vBucks = [1000, 2500, 5000, 7500, 10000][Math.floor(Math.random() * 5)];
762
-
763
- // Add to winners list immediately
764
- const winnersContainer = document.querySelector('.column:nth-child(3) .space-y-4');
765
- const newWinner = document.createElement('div');
766
- newWinner.className = 'winner-card bg-gray-900 p-4 rounded-lg border-2 border-yellow-400';
767
- newWinner.innerHTML = `
768
- <div class="flex items-center">
769
- <img src="https://i.pravatar.cc/60?img=${Math.floor(Math.random() * 70) + 1}" class="w-12 h-12 rounded-full mr-3" alt="Winner avatar">
770
- <div>
771
- <p class="font-bold text-xl text-yellow-300">${winner}</p>
772
- <p class="text-sm text-gray-300">Won ${vBucks} V-Bucks</p>
773
- </div>
774
- <div class="ml-auto flex items-center">
775
- <i class="fas fa-coins text-yellow-400 text-2xl mr-1"></i>
776
- <span class="font-bold">${vBucks >= 1000 ? vBucks/1000 + 'K' : vBucks}</span>
777
- </div>
778
- </div>
779
- `;
780
- winnersContainer.prepend(newWinner);
781
-
782
- // Keep only 4 winners visible
783
- if (winnersContainer.children.length > 4) {
784
- winnersContainer.removeChild(winnersContainer.lastChild);
785
- }
786
-
787
- // Show winner announcement
788
- showPopup(
789
- "Winnaar Gekozen!",
790
- `Gefeliciteerd aan ${winner} voor het winnen van ${vBucks} V-Bucks!`,
791
- function() {}
792
- );
793
- }
794
- );
795
- });
796
-
797
- // Add glow effect to buttons on hover
798
- document.querySelectorAll('.fortnite-btn').forEach(button => {
799
- button.addEventListener('mouseenter', function() {
800
- this.style.boxShadow = '0 0 20px ' + getComputedStyle(this).backgroundColor;
801
- });
802
-
803
- button.addEventListener('mouseleave', function() {
804
- const btnClass = Array.from(this.classList).find(cls => cls.includes('fortnite-btn-'));
805
- if (btnClass) {
806
- const color = btnClass.split('-').pop();
807
- this.style.boxShadow = '0 0 15px ' + getComputedStyle(document.documentElement).getPropertyValue('--fortnite-' + color);
808
- }
809
- });
810
- });
811
- </script>
812
- <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Clubhuts/ddd" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
813
- </html>