Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>SYSTEM LOCKED</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/qrcode@1.5.1/build/qrcode.min.js"></script> | |
| <style> | |
| @font-face { | |
| font-family: 'Matrix'; | |
| src: url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap'); | |
| } | |
| body { | |
| background-color: #000; | |
| color: #00FF00; | |
| font-family: 'Courier New', monospace; | |
| cursor: none; | |
| overflow: hidden; | |
| touch-action: manipulation; | |
| } | |
| .matrix-rain { | |
| position: absolute; | |
| color: rgba(0, 255, 0, 0.1); | |
| writing-mode: vertical-rl; | |
| text-orientation: mixed; | |
| user-select: none; | |
| pointer-events: none; | |
| } | |
| .glitch-effect { | |
| text-shadow: 0 0 2px #00FF00, 0 0 5px #00FF00; | |
| animation: glitch 2s infinite linear alternate; | |
| } | |
| .cursor-blink { | |
| animation: blink 1s step-end infinite; | |
| } | |
| @keyframes blink { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0; } | |
| } | |
| @keyframes glitch { | |
| 0% { text-shadow: 0 0 2px #00FF00; } | |
| 25% { text-shadow: 2px 0 2px #FF00FF; } | |
| 50% { text-shadow: -2px 0 2px #00FFFF; } | |
| 75% { text-shadow: 0 2px 2px #FFFF00; } | |
| 100% { text-shadow: 0 -2px 2px #FFFFFF; } | |
| } | |
| .progress-gradient { | |
| background: linear-gradient(90deg, #003300, #00FF00, #003300); | |
| background-size: 200% 100%; | |
| animation: gradient 3s infinite linear; | |
| } | |
| @keyframes gradient { | |
| 0% { background-position: 0% 50%; } | |
| 100% { background-position: 100% 50%; } | |
| } | |
| .terminal-line { | |
| border-left: 2px solid #00FF00; | |
| padding-left: 10px; | |
| margin: 5px 0; | |
| } | |
| </style> | |
| </head> | |
| <body class="relative w-full h-screen flex items-center justify-center" id="main"> | |
| <!-- Matrix rain effect --> | |
| <div id="matrixRain" class="absolute inset-0 w-full h-full z-0"></div> | |
| <!-- Main console --> | |
| <div class="relative z-10 p-6 border border-green-500 bg-black bg-opacity-80 max-w-xl w-full mx-4 text-green-500 glow" id="console"> | |
| <div class="text-center mb-6"> | |
| ╔════════════════════════════════════════════╗ | |
| </div> | |
| <div class="text-center mb-2"> | |
| ║ >> ACCESS DENIED. SYSTEM UNDER CONSTRUCTION ║ | |
| </div> | |
| <div class="text-center mb-6"> | |
| ║ ║ | |
| </div> | |
| <div class="flex items-center mb-2 px-6"> | |
| <span class="w-8">║</span> | |
| <div class="flex-1 h-4 bg-gray-900 mx-2"> | |
| <div class="h-full progress-gradient w-full" style="width: 87%;"></div> | |
| </div> | |
| <span id="percentage" class="w-12">87%</span> | |
| <span class="w-8">║</span> | |
| </div> | |
| <div class="text-center mb-6"> | |
| ║ ║ | |
| </div> | |
| <div class="text-center mb-2 terminal-line"> | |
| ║ COMING SOON<span class="cursor-blink">_</span> ║ | |
| </div> | |
| <div class="text-center mb-6"> | |
| ║ ║ | |
| </div> | |
| <div class="terminal-line pl-8 mb-2"> | |
| ║ // SYSADMIN MESSAGE: ║ | |
| </div> | |
| <div class="terminal-line pl-8 mb-2"> | |
| ║ // We're building something next-level ║ | |
| </div> | |
| <div class="terminal-line pl-8 mb-6"> | |
| ║ // [BOTS][AI][P2E] ║ | |
| </div> | |
| <div class="text-center"> | |
| ╚════════════════════════════════════════════╝ | |
| </div> | |
| <div id="hiddenMessage" class="text-center mt-6 opacity-0 transition-opacity duration-300 text-blue-400"> | |
| >_ Initiating cyber-protocol... authentication required | |
| </div> | |
| <div id="hackMessage" class="hidden absolute inset-0 bg-black bg-opacity-90 flex items-center justify-center text-red-500 font-bold text-xl p-4"></div> | |
| <div id="qrCode" class="hidden absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white p-4"> | |
| <canvas id="qrCanvas"></canvas> | |
| <div class="text-black text-center mt-2 font-mono">TG: @cyber_dev</div> | |
| </div> | |
| </div> | |
| <!-- Hex flashes --> | |
| <div id="hexFlashes" class="absolute inset-0 pointer-events-none"></div> | |
| <script> | |
| // Matrix rain effect | |
| function createMatrixRain() { | |
| const container = document.getElementById('matrixRain'); | |
| const chars = "01"; | |
| const width = window.innerWidth; | |
| const columns = Math.floor(width / 20); | |
| for (let i = 0; i < columns; i++) { | |
| const col = document.createElement('div'); | |
| col.className = 'matrix-rain'; | |
| col.style.left = `${(i * 100 / columns)}%`; | |
| col.style.animationDelay = `${Math.random() * 2}s`; | |
| col.style.animationDuration = `${5 + Math.random() * 10}s`; | |
| let content = ''; | |
| const rows = 30 + Math.floor(Math.random() * 30); | |
| for (let j = 0; j < rows; j++) { | |
| content += chars.charAt(Math.floor(Math.random() * chars.length)); | |
| } | |
| col.textContent = content; | |
| container.appendChild(col); | |
| } | |
| } | |
| // Animation progress bar percentage | |
| function animateProgress() { | |
| let percent = 87; | |
| const element = document.getElementById('percentage'); | |
| setInterval(() => { | |
| percent = (percent + 1) % 101; | |
| if (percent === 0) percent = 87; | |
| element.textContent = `${percent}%`; | |
| const bar = document.querySelector('.progress-gradient'); | |
| if (bar) { | |
| bar.style.width = `${percent}%`; | |
| } | |
| }, 100); | |
| } | |
| // Random hex flashes | |
| function createHexFlashes() { | |
| const container = document.getElementById('hexFlashes'); | |
| function createFlash() { | |
| const flash = document.createElement('div'); | |
| flash.className = 'absolute text-xs opacity-0'; | |
| flash.textContent = `0x${Math.floor(Math.random() * 0xFFFFFFFF).toString(16).toUpperCase()}`; | |
| flash.style.left = `${10 + Math.random() * 80}%`; | |
| flash.style.top = `${10 + Math.random() * 80}%`; | |
| // Animation | |
| flash.animate([ | |
| { opacity: 0, transform: 'scale(1)' }, | |
| { opacity: 0.7, transform: 'scale(1.5)' }, | |
| { opacity: 0, transform: 'scale(1)' } | |
| ], { | |
| duration: 1000 + Math.random() * 2000, | |
| iterations: 1 | |
| }); | |
| container.appendChild(flash); | |
| setTimeout(() => flash.remove(), 3000); | |
| } | |
| setInterval(createFlash, 500); | |
| } | |
| // Hover effects | |
| function setupHoverEffects() { | |
| const consoleElement = document.getElementById('console'); | |
| const hiddenMessage = document.getElementById('hiddenMessage'); | |
| consoleElement.addEventListener('mouseenter', () => { | |
| hiddenMessage.style.opacity = '1'; | |
| // Speed up matrix rain | |
| const columns = document.querySelectorAll('.matrix-rain'); | |
| columns.forEach(col => { | |
| col.style.animationDuration = '2s'; | |
| }); | |
| }); | |
| consoleElement.addEventListener('mouseleave', () => { | |
| hiddenMessage.style.opacity = '0'; | |
| // Reset matrix speed | |
| const columns = document.querySelectorAll('.matrix-rain'); | |
| columns.forEach(col => { | |
| col.style.animationDuration = `${5 + Math.random() * 10}s`; | |
| }); | |
| }); | |
| } | |
| // Click hack effect | |
| function setupClickEffect() { | |
| const consoleElement = document.getElementById('console'); | |
| const hackMessage = document.getElementById('hackMessage'); | |
| consoleElement.addEventListener('click', () => { | |
| // Show hack message | |
| hackMessage.classList.remove('hidden'); | |
| hackMessage.innerHTML = ` | |
| <div class="text-center"> | |
| <div class="terminal-line">>_ ACCESS DENIED [ERROR 0x1F]</div> | |
| <div class="terminal-line">>_ Initiating countermeasures...</div> | |
| <div class="terminal-line">>_ Trace route activated</div> | |
| </div> | |
| `; | |
| // Mobile vibration | |
| if ('vibrate' in navigator) { | |
| navigator.vibrate([200, 100, 200]); | |
| } | |
| // Hide after delay | |
| setTimeout(() => { | |
| hackMessage.classList.add('hidden'); | |
| }, 2000); | |
| }); | |
| } | |
| // Easter egg: Alt+0101 | |
| function setupEasterEgg() { | |
| const sequence = ['Alt', '0', '1', '0', '1']; | |
| let sequenceIndex = 0; | |
| document.addEventListener('keydown', (e) => { | |
| const key = (e.key === 'Alt') ? 'Alt' : e.key; | |
| if (key === sequence[sequenceIndex]) { | |
| sequenceIndex++; | |
| if (sequenceIndex === sequence.length) { | |
| sequenceIndex = 0; | |
| showQrCode(); | |
| } | |
| } else { | |
| sequenceIndex = 0; | |
| } | |
| }); | |
| } | |
| // Show QR code | |
| function showQrCode() { | |
| const qrCode = document.getElementById('qrCode'); | |
| const qrCanvas = document.getElementById('qrCanvas'); | |
| QRCode.toCanvas(qrCanvas, 'https://t.me/cyber_dev', { | |
| width: 200, | |
| color: { | |
| dark: '#000', | |
| light: '#fff' | |
| } | |
| }, (error) => { | |
| if (error) console.error(error); | |
| }); | |
| qrCode.classList.remove('hidden'); | |
| setTimeout(() => { | |
| qrCode.classList.add('hidden'); | |
| }, 5000); | |
| } | |
| // Initialize all effects | |
| window.addEventListener('DOMContentLoaded', () => { | |
| createMatrixRain(); | |
| animateProgress(); | |
| createHexFlashes(); | |
| setupHoverEffects(); | |
| setupClickEffect(); | |
| setupEasterEgg(); | |
| }); | |
| </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=imbytegroup/zaglush" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body> | |
| </html> |