|
|
<!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> |
