Spaces:

ProjectGenesis
/

sticky-jackpot-counter

Running

App Files Files Community

ProjectGenesis commited on Jun 27, 2025

Commit

fc01866

verified ·

1 Parent(s): 544efb3

make the Jackpot Counter section smaller - Follow Up Deployment

Browse files

Files changed (1) hide show

index.html +115 -189

index.html CHANGED Viewed

@@ -3,228 +3,154 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Sticky Jackpot Counter</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
-        @keyframes pulse {
-            0%, 100% { box-shadow: 0 0 15px rgba(255, 215, 0, 0.7); }
-            50% { box-shadow: 0 0 25px rgba(255, 215, 0, 0.9), 0 0 35px rgba(255, 215, 0, 0.6); }
-        }
-        @keyframes float {
-            0%, 100% { transform: translateY(0); }
-            50% { transform: translateY(-5px); }
-        }
-        @keyframes coinSpin {
-            0% { transform: rotateY(0deg); }
-            100% { transform: rotateY(360deg); }
         }
         .jackpot-container {
-            animation: float 3s ease-in-out infinite;
         }
-        .jackpot-value {
-            text-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
         }
         .coin {
-            animation: coinSpin 4s linear infinite;
         }
-        .digit-change {
-            animation: digitBounce 0.5s ease-out;
         }
-        @keyframes digitBounce {
-            0%, 100% { transform: scale(1); }
-            50% { transform: scale(1.2); }
         }
-        .progress-bar {
-            height: 4px;
-            background: linear-gradient(90deg, #fbbf24, #f59e0b, #ef4444);
         }
     </style>
 </head>
-<body class="bg-gray-900 min-h-screen">
-    <!-- Sticky Jackpot Counter -->
-    <div class="fixed top-0 left-0 right-0 z-50 flex justify-center pt-4">
-        <div class="jackpot-container bg-gradient-to-br from-gray-800 to-gray-900 rounded-xl border-2 border-yellow-500 p-4 shadow-lg w-full max-w-2xl mx-4" style="animation: pulse 2s infinite;">
-            <div class="flex flex-col items-center">
-                <div class="flex items-center mb-2">
-                    <div class="coin w-8 h-8 mr-2 bg-yellow-400 rounded-full flex items-center justify-center text-yellow-800 font-bold text-sm" style="transform-style: preserve-3d;">
-                        <i class="fas fa-coins"></i>
-                    </div>
-                    <h2 class="text-yellow-400 font-bold text-xl uppercase tracking-wider">Progressive Jackpot</h2>
-                </div>
-                <div class="flex items-end">
-                    <span class="text-yellow-100 text-lg mr-1">$</span>
-                    <div id="jackpotValue" class="jackpot-value text-4xl md:text-5xl font-extrabold text-yellow-300 flex">
-                        <!-- Digits will be inserted here by JavaScript -->
-                    </div>
-                </div>
-                <div class="w-full mt-3 bg-gray-700 rounded-full overflow-hidden">
-                    <div class="progress-bar h-2 rounded-full" style="width: 0%"></div>
                 </div>
-                <div class="flex justify-between w-full mt-1 text-xs text-gray-400">
-                    <span>Next bonus in: <span id="countdown" class="text-yellow-300">00:00</span></span>
-                    <span>Last winner: <span class="text-yellow-300">$12,450</span></span>
-                </div>
-            </div>
-        </div>
-    </div>
-    <!-- Sample content to demonstrate sticky behavior -->
-    <div class="pt-32 px-4 pb-20">
-        <div class="max-w-4xl mx-auto space-y-8 text-gray-300">
-            <h1 class="text-4xl font-bold text-center text-yellow-400 mb-8">Welcome to Our Casino</h1>
-            <div class="bg-gray-800 p-6 rounded-xl shadow-lg">
-                <h2 class="text-2xl font-semibold text-yellow-300 mb-4">Featured Games</h2>
-                <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
-                    <div class="bg-gray-700 rounded-lg overflow-hidden hover:transform hover:scale-105 transition-transform">
-                        <img src="https://via.placeholder.com/300x200/1f2937/cccccc?text=Slot+Machine" alt="Slot Machine" class="w-full h-32 object-cover">
-                        <div class="p-3">
-                            <h3 class="font-medium">Mega Fortune</h3>
-                            <p class="text-xs text-gray-400">Progressive Jackpot</p>
-                        </div>
-                    </div>
-                    <div class="bg-gray-700 rounded-lg overflow-hidden hover:transform hover:scale-105 transition-transform">
-                        <img src="https://via.placeholder.com/300x200/1f2937/cccccc?text=Roulette" alt="Roulette" class="w-full h-32 object-cover">
-                        <div class="p-3">
-                            <h3 class="font-medium">European Roulette</h3>
-                            <p class="text-xs text-gray-400">Live Dealer</p>
-                        </div>
-                    </div>
-                    <div class="bg-gray-700 rounded-lg overflow-hidden hover:transform hover:scale-105 transition-transform">
-                        <img src="https://via.placeholder.com/300x200/1f2937/cccccc?text=Blackjack" alt="Blackjack" class="w-full h-32 object-cover">
-                        <div class="p-3">
-                            <h3 class="font-medium">VIP Blackjack</h3>
-                            <p class="text-xs text-gray-400">High Stakes</p>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="bg-gray-800 p-6 rounded-xl shadow-lg">
-                <h2 class="text-2xl font-semibold text-yellow-300 mb-4">Current Promotions</h2>
-                <div class="space-y-4">
-                    <div class="flex items-start">
-                        <div class="bg-yellow-500 text-yellow-900 rounded-full w-6 h-6 flex items-center justify-center flex-shrink-0 mt-1 mr-3">
-                            <i class="fas fa-gift text-xs"></i>
-                        </div>
-                        <div>
-                            <h3 class="font-medium">Welcome Bonus</h3>
-                            <p class="text-sm text-gray-400">Get 100% match bonus up to $500 on your first deposit!</p>
-                        </div>
-                    </div>
-                    <div class="flex items-start">
-                        <div class="bg-yellow-500 text-yellow-900 rounded-full w-6 h-6 flex items-center justify-center flex-shrink-0 mt-1 mr-3">
-                            <i class="fas fa-coins text-xs"></i>
-                        </div>
-                        <div>
-                            <h3 class="font-medium">Weekly Cashback</h3>
-                            <p class="text-sm text-gray-400">Get up to 15% cashback on your losses every week.</p>
-                        </div>
-                    </div>
                 </div>
             </div>
         </div>
     </div>
     <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            // Initial jackpot value
-            let jackpot = 59802.80;
-            const jackpotElement = document.getElementById('jackpotValue');
-            const progressBar = document.querySelector('.progress-bar');
-            const countdownElement = document.getElementById('countdown');
-            // Format number with commas
-            function formatNumber(num) {
-                return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
-            }
-            // Display the initial jackpot value
-            updateJackpotDisplay(jackpot);
-            // Function to update jackpot display with animation
-            function updateJackpotDisplay(value) {
-                const formattedValue = formatNumber(value.toFixed(2));
-                const parts = formattedValue.split('.');
-                jackpotElement.innerHTML = '';
-                // Add each digit with animation
-                parts[0].split('').forEach((char, index) => {
-                    const digitSpan = document.createElement('span');
-                    digitSpan.className = 'digit';
-                    if (char === ',') {
-                        digitSpan.textContent = char;
-                    } else {
-                        digitSpan.textContent = char;
-                        digitSpan.classList.add('digit-change');
-                        setTimeout(() => {
-                            digitSpan.classList.remove('digit-change');
-                        }, 500);
-                    }
-                    jackpotElement.appendChild(digitSpan);
-                });
-                // Add decimal part if exists
-                if (parts[1]) {
-                    const decimalSpan = document.createElement('span');
-                    decimalSpan.textContent = '.' + parts[1];
-                    jackpotElement.appendChild(decimalSpan);
-                }
-            }
-            // Simulate jackpot increasing
-            setInterval(() => {
-                // Random increment between 0.10 and 5.00
-                const increment = Math.random() * 4.9 + 0.1;
-                jackpot += increment;
-                updateJackpotDisplay(jackpot);
-                // Update progress bar (0-100% in 5 minutes)
-                const progress = (Date.now() % 300000) / 300000 * 100;
-                progressBar.style.width = `${progress}%`;
-            }, 1000);
-            // Countdown timer (resets every 5 minutes)
-            function updateCountdown() {
-                const now = new Date();
-                const minutes = 4 - (now.getMinutes() % 5);
-                const seconds = 59 - now.getSeconds();
-                countdownElement.textContent =
-                    `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
             }
-            setInterval(updateCountdown, 1000);
-            updateCountdown();
-            // Occasionally add a bigger jump to the jackpot
-            setInterval(() => {
-                if (Math.random() > 0.7) {
-                    jackpot += Math.random() * 50 + 10;
-                    updateJackpotDisplay(jackpot);
-                    // Flash animation
-                    const container = document.querySelector('.jackpot-container');
-                    container.classList.add('bg-yellow-500', 'bg-opacity-30');
-                    setTimeout(() => {
-                        container.classList.remove('bg-yellow-500', 'bg-opacity-30');
-                    }, 500);
-                }
-            }, 10000);
-        });
     </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>

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