File size: 6,386 Bytes
544efb3 fc01866 544efb3 fc01866 544efb3 fc01866 544efb3 fc01866 544efb3 fc01866 544efb3 fc01866 544efb3 fc01866 544efb3 fc01866 544efb3 fc01866 544efb3 fc01866 544efb3 fc01866 544efb3 fc01866 544efb3 fc01866 544efb3 fc01866 544efb3 fc01866 544efb3 fc01866 544efb3 fc01866 544efb3 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 | <!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">
<!-- Jackpot counter at the top -->
<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>
// Initialize jackpot value
let jackpot = 58905.72; // Value remains the same, just the display symbol changed
let counterElement = document.getElementById('jackpot-counter');
let lastDisplayedValue = jackpot;
// Format currency
function formatCurrency(value) {
return new Intl.NumberFormat('en-US', {
minimumFractionDigits: 2,
maximumFractionDigits: 2
}).format(value);
}
// Create sparkle effect
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);
}
// Update the jackpot value
function updateJackpot() {
// Add random amount to jackpot (slower increments)
const increment = Math.random() * 0.5 + 0.05;
jackpot += increment;
// Smoother transition for values
const displaySpeed = 4; // Higher value makes the transition smoother and slower
lastDisplayedValue += (jackpot - lastDisplayedValue) / displaySpeed;
// Format and display the value
counterElement.textContent = formatCurrency(lastDisplayedValue);
// Occasionally create a sparkle effect
if (Math.random() > 0.7) {
createSparkle();
}
}
// Update jackpot less frequently for slower animation
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> |