| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Jackpot Counter</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| fontFamily: { |
| poppins: ['Poppins', 'sans-serif'], |
| orbitron: ['Orbitron', 'sans-serif'], |
| }, |
| animation: { |
| 'blink': 'blink 1s infinite', |
| 'pulse-gold': 'pulse-gold 2s infinite', |
| 'spin-slow': 'spin 3s linear infinite', |
| }, |
| keyframes: { |
| blink: { |
| '0%, 100%': { opacity: '1' }, |
| '50%': { opacity: '0.4' }, |
| }, |
| 'pulse-gold': { |
| '0%, 100%': { boxShadow: '0 0 0 0 rgba(245, 158, 11, 0.7)' }, |
| '70%': { boxShadow: '0 0 0 10px rgba(245, 158, 11, 0)' }, |
| } |
| } |
| } |
| } |
| } |
| </script> |
| <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@700&family=Poppins:wght@600;700&display=swap" rel="stylesheet"> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| body { |
| font-family: 'Poppins', sans-serif; |
| background-color: #0a0e17; |
| } |
| |
| .jackpot-container { |
| position: fixed; |
| top: 0; |
| left: 0; |
| right: 0; |
| z-index: 100; |
| } |
| |
| .jackpot-inner { |
| background: linear-gradient(90deg, #140e13 0%, #2d1e30 50%, #140e13 100%); |
| box-shadow: 0 0 30px rgba(175, 0, 100, 0.8); |
| border-bottom: 3px solid; |
| border-image: linear-gradient(90deg, #f59e0b, #f8d52e, #f59e0b) 1; |
| } |
| |
| .coin { |
| background: radial-gradient(circle at 30% 30%, #f8d52e, #b8860b); |
| border: 2px solid #f8d52e; |
| box-shadow: 0 0 10px rgba(184, 134, 11, 0.7); |
| } |
| |
| @keyframes blink { |
| 0%, 100% { opacity: 1; } |
| 50% { opacity: 0.5; } |
| } |
| |
| .winning-tick { |
| position: absolute; |
| background: linear-gradient(90deg, rgba(245,158,11,0), rgba(245,158,11,0.8), rgba(245,158,11,0)); |
| animation: winning-tick 0.5s ease-out; |
| } |
| |
| @keyframes winning-tick { |
| 0% { transform: translateX(-100%); width: 10px; opacity: 0; } |
| 10% { opacity: 1; } |
| 90% { opacity: 1; } |
| 100% { transform: translateX(100%); width: 100px; opacity: 0; } |
| } |
| |
| .gold-text { |
| color: #ffdc73; |
| text-shadow: 0 0 10px rgba(255, 215, 0, 0.8); |
| } |
| </style> |
| </head> |
| <body class="min-h-screen bg-gray-900 text-white flex items-center justify-center"> |
| |
| <div class="jackpot-container"> |
| <div class="jackpot-inner px-4 py-2"> |
| <div class="max-w-6xl mx-auto flex flex-col items-center justify-center"> |
| <div class="text-gray-400 font-bold text-sm mb-1"> |
| GRAND JACKPOT |
| </div> |
| |
| <div class="font-orbitron text-xl font-bold tracking-wider gold-text"> |
| SC <span id="jackpot-counter">58,905.72</span> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| |
| let jackpot = 58905.72; |
| let counterElement = document.getElementById('jackpot-counter'); |
| let lastDisplayedValue = jackpot; |
| |
| |
| function formatCurrency(value) { |
| return new Intl.NumberFormat('en-US', { |
| minimumFractionDigits: 2, |
| maximumFractionDigits: 2 |
| }).format(value); |
| } |
| |
| |
| function createSparkle() { |
| const jackpotText = document.querySelector('.gold-text').parentElement; |
| const sparkle = document.createElement('div'); |
| sparkle.className = 'winning-tick'; |
| sparkle.style.height = '2px'; |
| sparkle.style.top = Math.random() * 30 + 'px'; |
| jackpotText.appendChild(sparkle); |
| |
| setTimeout(() => { |
| sparkle.remove(); |
| }, 500); |
| } |
| |
| |
| function updateJackpot() { |
| |
| const increment = Math.random() * 0.5 + 0.05; |
| jackpot += increment; |
| |
| |
| const displaySpeed = 4; |
| lastDisplayedValue += (jackpot - lastDisplayedValue) / displaySpeed; |
| |
| |
| counterElement.textContent = formatCurrency(lastDisplayedValue); |
| |
| |
| if (Math.random() > 0.7) { |
| createSparkle(); |
| } |
| |
| } |
| |
| |
| setInterval(updateJackpot, 150); |
| </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=ProjectGenesis/sticky-jackpot-counter" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
