Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Hutsakeee Giveaway Dashboard (Nederlands)</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Bungee&family=Press+Start+2P&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| :root { | |
| --fortnite-purple: #8a2be2; | |
| --fortnite-blue: #00bfff; | |
| --fortnite-yellow: #ffd700; | |
| --fortnite-pink: #ff69b4; | |
| --fortnite-dark: #1a1a2e; | |
| } | |
| body { | |
| font-family: 'Bungee', cursive; | |
| background: linear-gradient(135deg, #0f0c29, #302b63, #24243e); | |
| color: white; | |
| min-height: 100vh; | |
| overflow-x: hidden; | |
| } | |
| .fortnite-text { | |
| font-family: 'Bungee', cursive; | |
| text-shadow: 0 0 10px rgba(255, 255, 255, 0.5); | |
| } | |
| .glow-border { | |
| border: 2px solid var(--fortnite-blue); | |
| box-shadow: 0 0 15px var(--fortnite-blue), inset 0 0 10px var(--fortnite-blue); | |
| } | |
| .glow-border-purple { | |
| border: 2px solid var(--fortnite-purple); | |
| box-shadow: 0 0 15px var(--fortnite-purple), inset 0 0 10px var(--fortnite-purple); | |
| } | |
| .glow-border-pink { | |
| border: 2px solid var(--fortnite-pink); | |
| box-shadow: 0 0 15px var(--fortnite-pink), inset 0 0 10px var(--fortnite-pink); | |
| } | |
| .glow-border-yellow { | |
| border: 2px solid var(--fortnite-yellow); | |
| box-shadow: 0 0 15px var(--fortnite-yellow), inset 0 0 10px var(--fortnite-yellow); | |
| } | |
| .fortnite-btn { | |
| transition: all 0.3s ease; | |
| transform: skew(-15deg); | |
| border: none; | |
| outline: none; | |
| font-weight: bold; | |
| letter-spacing: 1px; | |
| } | |
| .fortnite-btn:hover { | |
| transform: skew(-15deg) scale(1.05); | |
| filter: brightness(1.2); | |
| } | |
| .fortnite-btn-blue { | |
| background: var(--fortnite-blue); | |
| color: white; | |
| box-shadow: 0 0 15px var(--fortnite-blue); | |
| } | |
| .fortnite-btn-purple { | |
| background: var(--fortnite-purple); | |
| color: white; | |
| box-shadow: 0 0 15px var(--fortnite-purple); | |
| } | |
| .fortnite-btn-pink { | |
| background: var(--fortnite-pink); | |
| color: white; | |
| box-shadow: 0 0 15px var(--fortnite-pink); | |
| } | |
| .fortnite-btn-yellow { | |
| background: var(--fortnite-yellow); | |
| color: black; | |
| box-shadow: 0 0 15px var(--fortnite-yellow); | |
| } | |
| .avatar-card { | |
| transition: all 0.3s ease; | |
| background: rgba(26, 26, 46, 0.7); | |
| border-radius: 10px; | |
| overflow: hidden; | |
| } | |
| .avatar-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0, 191, 255, 0.3); | |
| } | |
| .scrollbar-hide { | |
| scrollbar-width: none; /* Firefox */ | |
| -ms-overflow-style: none; /* IE and Edge */ | |
| } | |
| .scrollbar-hide::-webkit-scrollbar { | |
| display: none; /* Chrome, Safari and Opera */ | |
| } | |
| .chat-message { | |
| animation: popIn 0.3s ease-out; | |
| } | |
| .winner-card { | |
| animation: winnerGlow 2s infinite alternate; | |
| } | |
| @keyframes popIn { | |
| 0% { | |
| opacity: 0; | |
| transform: scale(0.8); | |
| } | |
| 100% { | |
| opacity: 1; | |
| transform: scale(1); | |
| } | |
| } | |
| @keyframes winnerGlow { | |
| 0% { | |
| box-shadow: 0 0 10px var(--fortnite-yellow); | |
| } | |
| 100% { | |
| box-shadow: 0 0 30px var(--fortnite-yellow); | |
| } | |
| } | |
| .countdown { | |
| font-family: 'Press Start 2P', cursive; | |
| } | |
| .active-glow { | |
| animation: activePulse 1.5s infinite alternate; | |
| } | |
| @keyframes activePulse { | |
| 0% { | |
| box-shadow: 0 0 10px #00ff00; | |
| } | |
| 100% { | |
| box-shadow: 0 0 20px #00ff00; | |
| } | |
| } | |
| .inactive-glow { | |
| animation: inactivePulse 1.5s infinite alternate; | |
| } | |
| @keyframes inactivePulse { | |
| 0% { | |
| box-shadow: 0 0 10px #ff0000; | |
| } | |
| 100% { | |
| box-shadow: 0 0 20px #ff0000; | |
| } | |
| } | |
| /* Responsive adjustments */ | |
| @media (max-width: 768px) { | |
| .main-columns { | |
| flex-direction: column; | |
| } | |
| .column { | |
| width: 100% ; | |
| margin-bottom: 20px; | |
| } | |
| .info-cards { | |
| flex-wrap: wrap; | |
| } | |
| .info-card { | |
| width: 48% ; | |
| margin-bottom: 10px; | |
| } | |
| .participants-grid { | |
| grid-template-columns: repeat(2, 1fr) ; | |
| } | |
| } | |
| @media (max-width: 480px) { | |
| .top-bar { | |
| flex-direction: column; | |
| height: auto ; | |
| padding: 10px ; | |
| } | |
| .top-bar-left, .top-bar-right { | |
| width: 100% ; | |
| justify-content: center ; | |
| margin-bottom: 10px; | |
| } | |
| .info-card { | |
| width: 100% ; | |
| } | |
| .participants-grid { | |
| grid-template-columns: 1fr ; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="p-4"> | |
| <!-- Top Bar --> | |
| <div class="flex justify-between items-center p-4 mb-6 glow-border rounded-lg bg-gray-900 top-bar"> | |
| <div class="flex items-center top-bar-left"> | |
| <i class="fas fa-trophy text-3xl mr-3 text-yellow-400"></i> | |
| <h1 class="text-2xl fortnite-text text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-blue-400"> | |
| Hutsakeee Giveaway Dashboard (Nederlands) | |
| </h1> | |
| </div> | |
| <div class="flex items-center space-x-4 top-bar-right"> | |
| <div class="flex items-center fortnite-btn fortnite-btn-yellow px-4 py-2 rounded"> | |
| <i class="fas fa-coins mr-2"></i> | |
| <span>V-Bucks: 25,000</span> | |
| </div> | |
| <div class="flex items-center fortnite-btn px-4 py-2 rounded inactive-glow"> | |
| <i class="fas fa-circle mr-2 text-red-400"></i> | |
| <span>Status: INACTIEF</span> | |
| </div> | |
| <button id="stopGiveawayBtn" class="fortnite-btn fortnite-btn-blue px-4 py-2 rounded"> | |
| <i class="fas fa-play mr-2"></i> | |
| Start | |
| </button> | |
| <button id="logoutBtn" class="fortnite-btn fortnite-btn-pink px-4 py-2 rounded"> | |
| <i class="fas fa-sign-out-alt mr-2"></i> | |
| Logout | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Info Row --> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6 info-cards"> | |
| <div class="bg-gray-800 p-4 rounded-lg glow-border-purple info-card"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-users text-2xl mr-3 text-purple-400"></i> | |
| <div> | |
| <h3 class="text-sm text-gray-300">Actieve Deelnemers</h3> | |
| <p class="text-2xl font-bold text-white">1,248</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 p-4 rounded-lg glow-border-blue info-card"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-trophy text-2xl mr-3 text-blue-400"></i> | |
| <div> | |
| <h3 class="text-sm text-gray-300">Totaal Winnaars</h3> | |
| <p class="text-2xl font-bold text-white">42</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 p-4 rounded-lg glow-border-yellow info-card"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-coins text-2xl mr-3 text-yellow-400"></i> | |
| <div> | |
| <h3 class="text-sm text-gray-300">V-Bucks Uitgedeeld</h3> | |
| <p class="text-2xl font-bold text-white">210,000</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 p-4 rounded-lg glow-border-pink info-card"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-clock text-2xl mr-3 text-pink-400"></i> | |
| <div> | |
| <h3 class="text-sm text-gray-300">Resterende Tijd</h3> | |
| <p class="text-xl countdown text-white">01:23:45</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Area --> | |
| <div class="flex flex-col md:flex-row gap-6 mb-6 main-columns"> | |
| <!-- Left Column - Analytics --> | |
| <div class="w-full md:w-1/3 bg-gray-800 p-4 rounded-lg glow-border-purple column"> | |
| <h2 class="text-xl mb-4 fortnite-text text-purple-400 flex items-center"> | |
| <i class="fas fa-chart-line mr-2"></i> Statistieken | |
| </h2> | |
| <div class="flex justify-around mb-4"> | |
| <button class="fortnite-btn fortnite-btn-purple px-3 py-1 rounded text-xs">24H</button> | |
| <button class="fortnite-btn bg-gray-700 px-3 py-1 rounded text-xs">7D</button> | |
| <button class="fortnite-btn bg-gray-700 px-3 py-1 rounded text-xs">30D</button> | |
| </div> | |
| <div class="h-64 bg-gray-900 rounded p-2 relative"> | |
| <!-- Detailed analytics chart --> | |
| <div class="absolute inset-0 flex flex-col"> | |
| <div class="flex-1 grid grid-cols-7 gap-1 items-end"> | |
| <!-- Hourly participation data --> | |
| <div class="h-3/4 bg-gradient-to-t from-purple-500 to-purple-300 rounded-t" title="12AM: 142 entries"></div> | |
| <div class="h-1/2 bg-gradient-to-t from-blue-500 to-blue-300 rounded-t" title="3AM: 85 entries"></div> | |
| <div class="h-2/5 bg-gradient-to-t from-yellow-500 to-yellow-300 rounded-t" title="6AM: 62 entries"></div> | |
| <div class="h-3/5 bg-gradient-to-t from-pink-500 to-pink-300 rounded-t" title="9AM: 98 entries"></div> | |
| <div class="h-full bg-gradient-to-t from-purple-500 to-purple-300 rounded-t" title="12PM: 210 entries"></div> | |
| <div class="h-4/5 bg-gradient-to-t from-blue-500 to-blue-300 rounded-t" title="3PM: 185 entries"></div> | |
| <div class="h-5/6 bg-gradient-to-t from-yellow-500 to-yellow-300 rounded-t" title="6PM: 198 entries"></div> | |
| </div> | |
| <div class="h-8 flex justify-between text-xs text-gray-400 px-1"> | |
| <span>12AM</span> | |
| <span>6AM</span> | |
| <span>12PM</span> | |
| <span>6PM</span> | |
| </div> | |
| </div> | |
| <div class="absolute top-2 left-2 text-xs text-gray-300"> | |
| Deelname laatste 24 uur | |
| </div> | |
| </div> | |
| <div class="mt-4 grid grid-cols-3 gap-2"> | |
| <div class="bg-gray-900 p-2 rounded text-center"> | |
| <p class="text-xs text-gray-400">Piek Uur</p> | |
| <p class="text-sm font-bold">12PM UTC</p> | |
| <p class="text-xs text-gray-500">210 entries</p> | |
| </div> | |
| <div class="bg-gray-900 p-2 rounded text-center"> | |
| <p class="text-xs text-gray-400">Gem/Uur</p> | |
| <p class="text-sm font-bold">142</p> | |
| <p class="text-xs text-gray-500">±32</p> | |
| </div> | |
| <div class="bg-gray-900 p-2 rounded text-center"> | |
| <p class="text-xs text-gray-400">Unieke Gebruikers</p> | |
| <p class="text-sm font-bold">892</p> | |
| <p class="text-xs text-gray-500">24h period</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Middle Column - Live Chat --> | |
| <div class="w-full md:w-1/3 bg-gray-800 p-4 rounded-lg glow-border-blue column"> | |
| <h2 class="text-xl mb-2 fortnite-text text-blue-400 flex items-center"> | |
| <i class="fas fa-comment-alt mr-2"></i> Live YouTube Chat | |
| </h2> | |
| <div class="flex justify-between mb-2 text-sm"> | |
| <div class="fortnite-btn bg-gray-700 px-3 py-1 rounded"> | |
| <i class="fas fa-comment mr-1"></i> Total Messages: <span id="totalMessages">0</span> | |
| </div> | |
| <div class="fortnite-btn bg-gray-700 px-3 py-1 rounded"> | |
| <i class="fas fa-user-plus mr-1"></i> !join Commands: <span id="totalJoins">0</span> | |
| </div> | |
| </div> | |
| <div class="h-96 bg-gray-900 rounded p-2 overflow-y-auto scrollbar-hide"> | |
| <div class="space-y-2 chat-container"> | |
| <!-- Chat messages will be added here dynamically --> | |
| <div class="chat-message bg-gray-800 p-2 rounded flex items-start"> | |
| <img src="https://i.pravatar.cc/40?img=1" class="w-8 h-8 rounded-full mr-2" alt="User avatar"> | |
| <div> | |
| <p class="font-bold text-blue-300">NinjaPlayer99</p> | |
| <p>!join NinjaSlayer123</p> | |
| </div> | |
| </div> | |
| <div class="chat-message bg-gray-800 p-2 rounded flex items-start"> | |
| <img src="https://i.pravatar.cc/40?img=2" class="w-8 h-8 rounded-full mr-2" alt="User avatar"> | |
| <div> | |
| <p class="font-bold text-purple-300">SkullTrooper</p> | |
| <p>!join SkullCrusher99</p> | |
| </div> | |
| </div> | |
| <div class="chat-message bg-gray-800 p-2 rounded flex items-start"> | |
| <img src="https://i.pravatar.cc/40?img=3" class="w-8 h-8 rounded-full mr-2" alt="User avatar"> | |
| <div> | |
| <p class="font-bold text-yellow-300">V-BucksKing</p> | |
| <p>!join V-BucksCollector</p> | |
| </div> | |
| </div> | |
| <div class="chat-message bg-gray-800 p-2 rounded flex items-start"> | |
| <img src="https://i.pravatar.cc/40?img=4" class="w-8 h-8 rounded-full mr-2" alt="User avatar"> | |
| <div> | |
| <p class="font-bold text-pink-300">PinkGhoul</p> | |
| <p>!join PinkDestroyer</p> | |
| </div> | |
| </div> | |
| <div class="chat-message bg-gray-800 p-2 rounded flex items-start"> | |
| <img src="https://i.pravatar.cc/40?img=5" class="w-8 h-8 rounded-full mr-2" alt="User avatar"> | |
| <div> | |
| <p class="font-bold text-green-300">BuilderPro</p> | |
| <p>!join MasterBuilder</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Column - Recent Winners --> | |
| <div class="w-full md:w-1/3 bg-gray-800 p-4 rounded-lg glow-border-yellow column"> | |
| <h2 class="text-xl mb-4 fortnite-text text-yellow-400 flex items-center"> | |
| <i class="fas fa-crown mr-2"></i> Recente Winnaars | |
| </h2> | |
| <div class="space-y-4 overflow-y-auto h-[calc(100%-3.5rem)] scrollbar-hide"> | |
| <div class="winner-card bg-gray-900 p-4 rounded-lg border-2 border-yellow-400"> | |
| <div class="flex items-center"> | |
| <img src="https://i.pravatar.cc/60?img=10" class="w-12 h-12 rounded-full mr-3" alt="Winner avatar"> | |
| <div> | |
| <p class="font-bold text-xl text-yellow-300">VictoryRoyale</p> | |
| <p class="text-sm text-gray-300">Won 5,000 V-Bucks</p> | |
| </div> | |
| <div class="ml-auto flex items-center"> | |
| <i class="fas fa-coins text-yellow-400 text-2xl mr-1"></i> | |
| <span class="font-bold">5K</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="winner-card bg-gray-900 p-4 rounded-lg border-2 border-yellow-400"> | |
| <div class="flex items-center"> | |
| <img src="https://i.pravatar.cc/60?img=11" class="w-12 h-12 rounded-full mr-3" alt="Winner avatar"> | |
| <div> | |
| <p class="font-bold text-xl text-yellow-300">NoobSlayer</p> | |
| <p class="text-sm text-gray-300">Won 2,500 V-Bucks</p> | |
| </div> | |
| <div class="ml-auto flex items-center"> | |
| <i class="fas fa-coins text-yellow-400 text-2xl mr-1"></i> | |
| <span class="font-bold">2.5K</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="winner-card bg-gray-900 p-4 rounded-lg border-2 border-yellow-400"> | |
| <div class="flex items-center"> | |
| <img src="https://i.pravatar.cc/60?img=12" class="w-12 h-12 rounded-full mr-3" alt="Winner avatar"> | |
| <div> | |
| <p class="font-bold text-xl text-yellow-300">GhostBoss</p> | |
| <p class="text-sm text-gray-300">Won 1,000 V-Bucks</p> | |
| </div> | |
| <div class="ml-auto flex items-center"> | |
| <i class="fas fa-coins text-yellow-400 text-2xl mr-1"></i> | |
| <span class="font-bold">1K</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="winner-card bg-gray-900 p-4 rounded-lg border-2 border-yellow-400"> | |
| <div class="flex items-center"> | |
| <img src="https://i.pravatar.cc/60?img=13" class="w-12 h-12 rounded-full mr-3" alt="Winner avatar"> | |
| <div> | |
| <p class="font-bold text-xl text-yellow-300">ShadowNinja</p> | |
| <p class="text-sm text-gray-300">Won 7,500 V-Bucks</p> | |
| </div> | |
| <div class="ml-auto flex items-center"> | |
| <i class="fas fa-coins text-yellow-400 text-2xl mr-1"></i> | |
| <span class="font-bold">7.5K</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <button id="drawWinnerBtn" class="fortnite-btn fortnite-btn-yellow w-full mt-4 py-2 rounded-lg"> | |
| <i class="fas fa-random mr-2"></i> Nieuwe Winnaar Kiezen | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Bottom Section - Current Participants --> | |
| <div class="bg-gray-800 p-4 rounded-lg glow-border-pink"> | |
| <h2 class="text-xl mb-4 fortnite-text text-pink-400 flex items-center"> | |
| <i class="fas fa-users mr-2"></i> Current Participants (1,248) | |
| </h2> | |
| <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4 participants-grid"> | |
| <!-- Participant cards will be added here dynamically --> | |
| <div class="avatar-card p-3 text-center"> | |
| <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"> | |
| <p class="font-bold text-blue-300">NinjaPlayer99</p> | |
| <p class="text-xs text-yellow-300">500 V-Bucks</p> | |
| </div> | |
| <div class="avatar-card p-3 text-center"> | |
| <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"> | |
| <p class="font-bold text-purple-300">SkullTrooper</p> | |
| <p class="text-xs text-yellow-300">500 V-Bucks</p> | |
| </div> | |
| <div class="avatar-card p-3 text-center"> | |
| <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"> | |
| <p class="font-bold text-yellow-300">V-BucksKing</p> | |
| <p class="text-xs text-yellow-300">500 V-Bucks</p> | |
| </div> | |
| <div class="avatar-card p-3 text-center"> | |
| <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"> | |
| <p class="font-bold text-pink-300">PinkGhoul</p> | |
| <p class="text-xs text-yellow-300">500 V-Bucks</p> | |
| </div> | |
| <div class="avatar-card p-3 text-center"> | |
| <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"> | |
| <p class="font-bold text-green-300">BuilderPro</p> | |
| <p class="text-xs text-yellow-300">500 V-Bucks</p> | |
| </div> | |
| <div class="avatar-card p-3 text-center"> | |
| <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"> | |
| <p class="font-bold text-red-300">RustLord</p> | |
| <p class="text-xs text-yellow-300">500 V-Bucks</p> | |
| </div> | |
| <div class="avatar-card p-3 text-center"> | |
| <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"> | |
| <p class="font-bold text-blue-300">NoScopePro</p> | |
| <p class="text-xs text-yellow-300">500 V-Bucks</p> | |
| </div> | |
| <div class="avatar-card p-3 text-center"> | |
| <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"> | |
| <p class="font-bold text-purple-300">GhostBoss</p> | |
| <p class="text-xs text-yellow-300">500 V-Bucks</p> | |
| </div> | |
| <div class="avatar-card p-3 text-center"> | |
| <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"> | |
| <p class="font-bold text-yellow-300">GoldenGunner</p> | |
| <p class="text-xs text-yellow-300">500 V-Bucks</p> | |
| </div> | |
| <div class="avatar-card p-3 text-center"> | |
| <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"> | |
| <p class="font-bold text-pink-300">PinkSlayer</p> | |
| <p class="text-xs text-yellow-300">500 V-Bucks</p> | |
| </div> | |
| <div class="avatar-card p-3 text-center"> | |
| <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"> | |
| <p class="font-bold text-green-300">BuilderMaster</p> | |
| <p class="text-xs text-yellow-300">500 V-Bucks</p> | |
| </div> | |
| <div class="avatar-card p-3 text-center"> | |
| <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"> | |
| <p class="font-bold text-red-300">RustKing</p> | |
| <p class="text-xs text-yellow-300">500 V-Bucks</p> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex justify-center"> | |
| <button class="fortnite-btn fortnite-btn-pink px-6 py-2 rounded-lg"> | |
| <i class="fas fa-sync-alt mr-2"></i> Meer Laden | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Popup Container --> | |
| <div id="popupContainer" class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-gray-800 p-6 rounded-lg glow-border-purple max-w-md w-full"> | |
| <h3 id="popupTitle" class="text-xl font-bold mb-4"></h3> | |
| <p id="popupMessage" class="mb-4"></p> | |
| <div id="popupContent"></div> | |
| <div class="flex justify-end space-x-3"> | |
| <button id="popupCancel" class="fortnite-btn bg-gray-700 px-4 py-2 rounded"> | |
| Cancel | |
| </button> | |
| <button id="popupConfirm" class="fortnite-btn fortnite-btn-purple px-4 py-2 rounded"> | |
| Confirm | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Giveaway Config Template (hidden) --> | |
| <div id="giveawayConfigTemplate" class="hidden"> | |
| <div class="space-y-4"> | |
| <div class="flex items-center"> | |
| <span class="text-sm font-medium text-gray-300 mr-2">V-Bucks:</span> | |
| <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"> | |
| </div> | |
| <div class="flex items-center"> | |
| <span class="text-sm font-medium text-gray-300 mr-2">Duration (min):</span> | |
| <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"> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Popup functions | |
| function showPopup(title, message, confirmCallback) { | |
| document.getElementById('popupTitle').textContent = title; | |
| document.getElementById('popupMessage').textContent = message; | |
| const popup = document.getElementById('popupContainer'); | |
| popup.classList.remove('hidden'); | |
| document.getElementById('popupConfirm').onclick = function() { | |
| confirmCallback(); | |
| popup.classList.add('hidden'); | |
| }; | |
| document.getElementById('popupCancel').onclick = function() { | |
| popup.classList.add('hidden'); | |
| }; | |
| } | |
| // Chat statistics | |
| let totalMessages = 0; | |
| let totalJoins = 0; | |
| // Update stats display | |
| function updateStatsDisplay() { | |
| document.getElementById('totalMessages').textContent = totalMessages; | |
| document.getElementById('totalJoins').textContent = totalJoins; | |
| } | |
| // Simulate chat messages | |
| function addChatMessage() { | |
| totalMessages++; | |
| const users = [ | |
| {name: "DarkKnight", color: "text-indigo-300"}, | |
| {name: "LootLlama", color: "text-green-300"}, | |
| {name: "SkyDancer", color: "text-red-300"}, | |
| {name: "BushCamper", color: "text-teal-300"}, | |
| {name: "HeadshotPro", color: "text-orange-300"} | |
| ]; | |
| const fortniteNames = [ | |
| "NinjaSlayer123", "SkullCrusher99", "V-BucksCollector", | |
| "PinkDestroyer", "MasterBuilder", "RustLordPro", | |
| "DarkKnightFT", "LootLlamaKing", "SkyDancerPro", | |
| "BushCamperFT", "HeadshotMaster" | |
| ]; | |
| const messages = fortniteNames.map(name => `!join ${name}`); | |
| const randomUser = users[Math.floor(Math.random() * users.length)]; | |
| const randomMessage = messages[Math.floor(Math.random() * messages.length)]; | |
| if (randomMessage.startsWith('!join')) { | |
| totalJoins++; | |
| } | |
| const randomAvatar = Math.floor(Math.random() * 70) + 1; | |
| const chatContainer = document.querySelector('.chat-container'); | |
| const newMessage = document.createElement('div'); | |
| newMessage.className = 'chat-message bg-gray-800 p-2 rounded flex items-start'; | |
| newMessage.innerHTML = ` | |
| <img src="https://i.pravatar.cc/40?img=${randomAvatar}" class="w-8 h-8 rounded-full mr-2" alt="User avatar"> | |
| <div> | |
| <p class="font-bold ${randomUser.color}">${randomUser.name}</p> | |
| <p>${randomMessage}</p> | |
| </div> | |
| `; | |
| chatContainer.prepend(newMessage); | |
| updateStatsDisplay(); | |
| // Limit to 50 messages | |
| if (chatContainer.children.length > 50) { | |
| chatContainer.removeChild(chatContainer.lastChild); | |
| } | |
| } | |
| // Simulate countdown | |
| function updateCountdown() { | |
| const countdownElement = document.querySelector('.countdown'); | |
| let time = countdownElement.textContent.split(':'); | |
| let hours = parseInt(time[0]); | |
| let minutes = parseInt(time[1]); | |
| let seconds = parseInt(time[2]); | |
| seconds--; | |
| if (seconds < 0) { | |
| seconds = 59; | |
| minutes--; | |
| if (minutes < 0) { | |
| minutes = 59; | |
| hours--; | |
| if (hours < 0) { | |
| hours = 0; | |
| minutes = 0; | |
| seconds = 0; | |
| } | |
| } | |
| } | |
| countdownElement.textContent = | |
| `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`; | |
| } | |
| // Initialize stats display | |
| updateStatsDisplay(); | |
| // Add initial chat messages | |
| for (let i = 0; i < 15; i++) { | |
| setTimeout(addChatMessage, i * 300); | |
| } | |
| // Set intervals | |
| setInterval(addChatMessage, 3000); | |
| setInterval(updateCountdown, 1000); | |
| // Button event handlers | |
| document.getElementById('stopGiveawayBtn').addEventListener('click', function() { | |
| const statusElement = document.querySelector('.top-bar-right .fortnite-btn:nth-child(2)'); | |
| const isActive = statusElement.classList.contains('active-glow'); | |
| if (isActive) { | |
| showPopup( | |
| "Stop Giveaway", | |
| "Are you sure you want to stop the current giveaway?", | |
| function() { | |
| statusElement.classList.remove('active-glow'); | |
| statusElement.classList.add('inactive-glow'); | |
| statusElement.innerHTML = '<i class="fas fa-circle mr-2 text-red-400"></i><span>Status: INACTIVE</span>'; | |
| document.getElementById('stopGiveawayBtn').innerHTML = '<i class="fas fa-play mr-2"></i> Start'; | |
| } | |
| ); | |
| } else { | |
| // Show giveaway configuration popup | |
| const configTemplate = document.getElementById('giveawayConfigTemplate').cloneNode(true); | |
| configTemplate.classList.remove('hidden'); | |
| document.getElementById('popupContent').appendChild(configTemplate); | |
| showPopup( | |
| "Giveaway Starten", | |
| "Stel V-Bucks bedrag en duur in:", | |
| function() { | |
| const vbucks = document.getElementById('vbucksAmount').value; | |
| const duration = document.getElementById('giveawayDuration').value; | |
| if (!vbucks || !duration) { | |
| alert("Please enter valid values!"); | |
| return; | |
| } | |
| // Update UI directly | |
| statusElement.classList.remove('inactive-glow'); | |
| statusElement.classList.add('active-glow'); | |
| statusElement.innerHTML = '<i class="fas fa-circle mr-2 text-green-400"></i><span>Status: ACTIVE</span>'; | |
| document.getElementById('stopGiveawayBtn').innerHTML = '<i class="fas fa-stop mr-2"></i> Stop'; | |
| // Update countdown with the entered duration | |
| const hours = Math.floor(duration / 60); | |
| const minutes = duration % 60; | |
| document.querySelector('.countdown').textContent = | |
| `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:00`; | |
| // Update V-Bucks display | |
| document.querySelector('.fortnite-btn-yellow span').textContent = `V-Bucks: ${vbucks}`; | |
| } | |
| ); | |
| } | |
| }); | |
| document.getElementById('logoutBtn').addEventListener('click', function() { | |
| showPopup( | |
| "Uitloggen", | |
| "Weet je zeker dat je wilt uitloggen van het dashboard?", | |
| function() { | |
| // In a real app, this would redirect to logout | |
| alert("Je bent succesvol uitgelogd!"); | |
| // window.location.href = "/logout"; | |
| } | |
| ); | |
| }); | |
| document.getElementById('drawWinnerBtn').addEventListener('click', function() { | |
| const participants = [ | |
| "NinjaPlayer99", "SkullTrooper", "V-BucksKing", | |
| "PinkGhoul", "BuilderPro", "RustLord", | |
| "DarkKnight", "LootLlama", "SkyDancer", | |
| "BushCamper", "HeadshotPro" | |
| ]; | |
| showPopup( | |
| "Winnaar Kiezen", | |
| "Het systeem kiest willekeurig iemand die heeft deelgenomen aan de giveaway.", | |
| function() { | |
| const winner = participants[Math.floor(Math.random() * participants.length)]; | |
| const vBucks = [1000, 2500, 5000, 7500, 10000][Math.floor(Math.random() * 5)]; | |
| // Add to winners list immediately | |
| const winnersContainer = document.querySelector('.column:nth-child(3) .space-y-4'); | |
| const newWinner = document.createElement('div'); | |
| newWinner.className = 'winner-card bg-gray-900 p-4 rounded-lg border-2 border-yellow-400'; | |
| newWinner.innerHTML = ` | |
| <div class="flex items-center"> | |
| <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"> | |
| <div> | |
| <p class="font-bold text-xl text-yellow-300">${winner}</p> | |
| <p class="text-sm text-gray-300">Won ${vBucks} V-Bucks</p> | |
| </div> | |
| <div class="ml-auto flex items-center"> | |
| <i class="fas fa-coins text-yellow-400 text-2xl mr-1"></i> | |
| <span class="font-bold">${vBucks >= 1000 ? vBucks/1000 + 'K' : vBucks}</span> | |
| </div> | |
| </div> | |
| `; | |
| winnersContainer.prepend(newWinner); | |
| // Keep only 4 winners visible | |
| if (winnersContainer.children.length > 4) { | |
| winnersContainer.removeChild(winnersContainer.lastChild); | |
| } | |
| // Show winner announcement | |
| showPopup( | |
| "Winnaar Gekozen!", | |
| `Gefeliciteerd aan ${winner} voor het winnen van ${vBucks} V-Bucks!`, | |
| function() {} | |
| ); | |
| } | |
| ); | |
| }); | |
| // Add glow effect to buttons on hover | |
| document.querySelectorAll('.fortnite-btn').forEach(button => { | |
| button.addEventListener('mouseenter', function() { | |
| this.style.boxShadow = '0 0 20px ' + getComputedStyle(this).backgroundColor; | |
| }); | |
| button.addEventListener('mouseleave', function() { | |
| const btnClass = Array.from(this.classList).find(cls => cls.includes('fortnite-btn-')); | |
| if (btnClass) { | |
| const color = btnClass.split('-').pop(); | |
| this.style.boxShadow = '0 0 15px ' + getComputedStyle(document.documentElement).getPropertyValue('--fortnite-' + color); | |
| } | |
| }); | |
| }); | |
| </script> | |
| <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> | |
| </html> |