| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Maintenance Mode</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="preconnect" href="https://fonts.googleapis.com"> |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&display=swap" rel="stylesheet"> |
| <style> |
| body { |
| font-family: 'Inter', sans-serif; |
| } |
| |
| .tabular-nums { |
| font-variant-numeric: tabular-nums; |
| } |
| |
| |
| @keyframes subtle-pulse { |
| 0%, 100% { |
| box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.1); |
| border-color: rgba(255, 255, 255, 0.2); |
| } |
| 50% { |
| box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.15); |
| border-color: rgba(255, 255, 255, 0.4); |
| } |
| } |
| |
| .balance-pulse { |
| animation: subtle-pulse 3s ease-in-out infinite; |
| } |
| |
| |
| @keyframes micro-flicker { |
| 0%, 100% { opacity: 1; } |
| 50% { opacity: 0.98; } |
| 75% { opacity: 1; } |
| 90% { opacity: 0.99; } |
| } |
| |
| .number-flicker { |
| animation: micro-flicker 0.1s infinite; |
| } |
| |
| |
| @keyframes border-pulse { |
| 0%, 100% { |
| box-shadow: 0 0 5px rgba(239, 68, 68, 0.5), |
| 0 0 10px rgba(239, 68, 68, 0.3), |
| 0 0 20px rgba(239, 68, 68, 0.2), |
| inset 0 0 5px rgba(239, 68, 68, 0.1); |
| border-color: rgba(239, 68, 68, 0.6); |
| } |
| 50% { |
| box-shadow: 0 0 10px rgba(239, 68, 68, 0.8), |
| 0 0 20px rgba(239, 68, 68, 0.5), |
| 0 0 40px rgba(239, 68, 68, 0.3), |
| inset 0 0 10px rgba(239, 68, 68, 0.2); |
| border-color: rgba(239, 68, 68, 1); |
| } |
| } |
| |
| |
| @keyframes green-pulse { |
| 0%, 100% { |
| box-shadow: 0 0 5px rgba(34, 197, 94, 0.5), |
| 0 0 10px rgba(34, 197, 94, 0.3), |
| 0 0 20px rgba(34, 197, 94, 0.2), |
| inset 0 0 5px rgba(34, 197, 94, 0.1); |
| border-color: rgba(34, 197, 94, 0.6); |
| } |
| 50% { |
| box-shadow: 0 0 10px rgba(34, 197, 94, 0.8), |
| 0 0 20px rgba(34, 197, 94, 0.5), |
| 0 0 40px rgba(34, 197, 94, 0.3), |
| inset 0 0 10px rgba(34, 197, 94, 0.2); |
| border-color: rgba(34, 197, 94, 1); |
| } |
| } |
| |
| .glow-border { |
| border: 2px solid rgba(239, 68, 68, 0.6); |
| border-radius: 16px; |
| padding: 1.5rem 2.5rem; |
| animation: border-pulse 2s ease-in-out infinite; |
| } |
| |
| .glow-border-green { |
| border: 2px solid rgba(34, 197, 94, 0.6); |
| border-radius: 16px; |
| padding: 1.5rem 2.5rem; |
| animation: green-pulse 2s ease-in-out infinite; |
| } |
| |
| .balance-zero { |
| color: rgb(239, 68, 68) !important; |
| text-shadow: 0 0 10px rgba(239, 68, 68, 0.5); |
| } |
| |
| |
| .bg-blur-layer { |
| filter: blur(20px) brightness(0.4); |
| transform: scale(1.1); |
| } |
| </style> |
| </head> |
| <body class="h-screen w-full overflow-hidden bg-black relative"> |
|
|
| |
| <div class="absolute inset-0 z-0"> |
| |
| <div class="absolute inset-0 bg-cover bg-center bg-no-repeat bg-blur-layer" |
| style="background-image: url('http://static.photos/gaming/1920x1080/777');"> |
| </div> |
| |
| <div class="absolute inset-0 bg-black/60 backdrop-blur-sm"></div> |
| </div> |
|
|
| |
| <div class="relative z-10 h-full w-full flex flex-col items-center justify-center px-4"> |
| |
| |
| <h1 id="maintenance-heading" class="text-5xl md:text-7xl font-bold text-white tracking-tight text-center mb-12 drop-shadow-lg glow-border"> |
| Temporary Withdrawal Maintenance |
| </h1> |
|
|
| |
| <div class="balance-pulse bg-black/20 backdrop-blur-md border border-white/20 rounded-2xl px-12 py-8 flex flex-col items-center min-w-[320px] shadow-2xl"> |
| <span class="text-gray-400 text-sm uppercase tracking-[0.2em] font-semibold mb-2">WINNING Balance</span> |
| <div class="flex items-baseline gap-1"> |
| <span class="text-3xl md:text-4xl font-bold text-white/90">$</span> |
| <span id="balance-display" class="text-5xl md:text-6xl font-bold text-white tabular-nums number-flicker tracking-tight"> |
| 5,359.00 |
| </span> |
| </div> |
| |
| <div class="mt-4 flex items-center gap-2"> |
| <div class="w-2 h-2 rounded-full bg-red-500 animate-pulse"></div> |
| <span class="text-xs text-gray-500 uppercase tracking-wider">Processing</span> |
| </div> |
| </div> |
|
|
| |
| <p class="mt-12 text-gray-500 text-sm tracking-wide animate-pulse"> |
| Please wait while we complete system updates |
| </p> |
| </div> |
|
|
| <script> |
| const balanceDisplay = document.getElementById('balance-display'); |
| const maintenanceHeading = document.getElementById('maintenance-heading'); |
| const START_BALANCE = 5359.00; |
| const DURATION = 35000; |
| const PAUSE_DURATION = 20000; |
| |
| let startTime = null; |
| let isPaused = false; |
| let pauseStartTime = null; |
| let wasZero = false; |
| |
| function formatCurrency(value) { |
| return value.toLocaleString('en-US', { |
| minimumFractionDigits: 2, |
| maximumFractionDigits: 2 |
| }); |
| } |
| |
| function setMaintenanceMode() { |
| |
| balanceDisplay.classList.add('balance-zero'); |
| maintenanceHeading.textContent = 'Maintenance Complete'; |
| maintenanceHeading.classList.remove('glow-border'); |
| maintenanceHeading.classList.add('glow-border-green'); |
| } |
| |
| function setCountdownMode() { |
| |
| balanceDisplay.classList.remove('balance-zero'); |
| maintenanceHeading.textContent = 'Temporary Withdrawal Maintenance'; |
| maintenanceHeading.classList.remove('glow-border-green'); |
| maintenanceHeading.classList.add('glow-border'); |
| } |
| |
| function animate(currentTime) { |
| if (!startTime) { |
| startTime = currentTime; |
| } |
| |
| if (isPaused) { |
| |
| if (currentTime - pauseStartTime >= PAUSE_DURATION) { |
| isPaused = false; |
| wasZero = false; |
| startTime = currentTime; |
| balanceDisplay.textContent = formatCurrency(START_BALANCE); |
| setCountdownMode(); |
| } |
| requestAnimationFrame(animate); |
| return; |
| } |
| |
| const elapsed = currentTime - startTime; |
| const progress = elapsed / DURATION; |
| |
| if (progress >= 1) { |
| |
| if (!wasZero) { |
| balanceDisplay.textContent = formatCurrency(0); |
| setMaintenanceMode(); |
| wasZero = true; |
| } |
| isPaused = true; |
| pauseStartTime = currentTime; |
| } else { |
| |
| const currentBalance = START_BALANCE * (1 - progress); |
| balanceDisplay.textContent = formatCurrency(currentBalance); |
| |
| |
| if (Math.random() > 0.9) { |
| balanceDisplay.style.opacity = '0.98'; |
| setTimeout(() => { |
| balanceDisplay.style.opacity = '1'; |
| }, 50); |
| } |
| } |
| |
| requestAnimationFrame(animate); |
| } |
| |
| |
| requestAnimationFrame(animate); |
| |
| |
| setInterval(() => { |
| if (!isPaused && !wasZero && Math.random() > 0.7) { |
| balanceDisplay.style.textShadow = '0 0 10px rgba(255,255,255,0.5)'; |
| setTimeout(() => { |
| balanceDisplay.style.textShadow = 'none'; |
| }, 100); |
| } |
| }, 2000); |
| </script> |
| <script src="https://deepsite.hf.co/deepsite-badge.js"></script> |
| </body> |
| </html> |
