| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>CyberDoor Access</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"> |
| <script src="https://cdn.jsdelivr.net/npm/qrcode-generator@1.4.4/qrcode.min.js"></script> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Rajdhani:wght@300;500;700&display=swap'); |
| |
| body { |
| font-family: 'Rajdhani', sans-serif; |
| background-color: #0a0a1a; |
| color: #00fffc; |
| overflow: hidden; |
| } |
| |
| .cyber-font { |
| font-family: 'Orbitron', sans-serif; |
| } |
| |
| .cyber-border { |
| border: 2px solid #00fffc; |
| box-shadow: 0 0 15px #00fffc, inset 0 0 15px #00fffc; |
| } |
| |
| .cyber-glow { |
| text-shadow: 0 0 10px #00fffc, 0 0 20px #00fffc; |
| } |
| |
| .cyber-bg { |
| background: rgba(0, 10, 20, 0.85); |
| } |
| |
| .scanline { |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background: linear-gradient( |
| to bottom, |
| transparent 0%, |
| rgba(0, 255, 252, 0.1) 50%, |
| transparent 100% |
| ); |
| background-size: 100% 8px; |
| pointer-events: none; |
| animation: scan 8s linear infinite; |
| } |
| |
| @keyframes scan { |
| 0% { transform: translateY(-100%); } |
| 100% { transform: translateY(100%); } |
| } |
| |
| .grid-overlay { |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background-image: |
| linear-gradient(rgba(0, 255, 252, 0.05) 1px, transparent 1px), |
| linear-gradient(90deg, rgba(0, 255, 252, 0.05) 1px, transparent 1px); |
| background-size: 20px 20px; |
| pointer-events: none; |
| } |
| |
| .pulse { |
| animation: pulse 2s infinite; |
| } |
| |
| @keyframes pulse { |
| 0% { box-shadow: 0 0 0 0 rgba(0, 255, 252, 0.7); } |
| 70% { box-shadow: 0 0 0 10px rgba(0, 255, 252, 0); } |
| 100% { box-shadow: 0 0 0 0 rgba(0, 255, 252, 0); } |
| } |
| |
| .flicker { |
| animation: flicker 0.5s infinite alternate; |
| } |
| |
| @keyframes flicker { |
| 0% { opacity: 0.9; } |
| 100% { opacity: 1; } |
| } |
| </style> |
| </head> |
| <body class="min-h-screen flex flex-col items-center justify-center relative overflow-hidden"> |
| <div class="grid-overlay"></div> |
| <div class="scanline"></div> |
| |
| <div class="cyber-bg cyber-border rounded-lg p-8 max-w-md w-full relative z-10"> |
| <div class="flex justify-between items-center mb-6"> |
| <h1 class="cyber-font cyber-glow text-3xl font-bold">CYBERDOOR</h1> |
| <div class="flex items-center"> |
| <div class="w-3 h-3 bg-red-500 rounded-full mr-2 pulse"></div> |
| <span class="text-xs">LIVE</span> |
| </div> |
| </div> |
| |
| <div class="text-center mb-6"> |
| <p class="text-sm mb-1">TEMPORARY ACCESS CODE</p> |
| <p class="cyber-font text-xs mb-4">VALID FOR <span id="countdown">60</span> SECONDS</p> |
| </div> |
| |
| <div class="flex justify-center mb-6"> |
| <div id="qrcode" class="p-4 bg-white rounded cyber-border flicker"></div> |
| </div> |
| |
| <div class="text-center"> |
| <p class="text-xs mb-2">SCAN TO ENTER SECURE ZONE</p> |
| <div class="flex justify-center"> |
| <div class="w-16 h-1 bg-cyan-400"></div> |
| </div> |
| </div> |
| |
| <div class="mt-6 flex justify-between items-center text-xs"> |
| <div> |
| <i class="fas fa-shield-alt mr-1"></i> |
| <span>SECURITY LEVEL: MAX</span> |
| </div> |
| <div> |
| <i class="fas fa-user-clock mr-1"></i> |
| <span id="current-time">--:--:--</span> |
| </div> |
| </div> |
| </div> |
| |
| <div class="absolute bottom-4 left-0 right-0 text-center text-xs opacity-70"> |
| <p>NEUROCORP SECURITY SYSTEMS v4.2.7</p> |
| </div> |
| |
| <script> |
| |
| function generateToken() { |
| const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'; |
| let token = ''; |
| for (let i = 0; i < 16; i++) { |
| token += chars.charAt(Math.floor(Math.random() * chars.length)); |
| } |
| return 'CYBERDOOR-' + token; |
| } |
| |
| |
| function generateQRCode() { |
| const token = generateToken(); |
| const typeNumber = 4; |
| const errorCorrectionLevel = 'M'; |
| const qr = qrcode(typeNumber, errorCorrectionLevel); |
| qr.addData(token); |
| qr.make(); |
| |
| document.getElementById('qrcode').innerHTML = qr.createImgTag(4); |
| const img = document.querySelector('#qrcode img'); |
| img.style.width = '100%'; |
| img.style.height = '100%'; |
| |
| return token; |
| } |
| |
| |
| function startCountdown() { |
| let seconds = 60; |
| const countdownElement = document.getElementById('countdown'); |
| |
| const timer = setInterval(() => { |
| seconds--; |
| countdownElement.textContent = seconds; |
| |
| if (seconds <= 0) { |
| clearInterval(timer); |
| generateQRCode(); |
| startCountdown(); |
| } |
| }, 1000); |
| } |
| |
| |
| function updateClock() { |
| const now = new Date(); |
| const timeString = now.toLocaleTimeString(); |
| document.getElementById('current-time').textContent = timeString; |
| } |
| |
| |
| document.addEventListener('DOMContentLoaded', () => { |
| generateQRCode(); |
| startCountdown(); |
| updateClock(); |
| setInterval(updateClock, 1000); |
| |
| |
| setInterval(() => { |
| if (Math.random() > 0.9) { |
| document.querySelector('.cyber-border').classList.add('flicker'); |
| setTimeout(() => { |
| document.querySelector('.cyber-border').classList.remove('flicker'); |
| }, 200); |
| } |
| }, 3000); |
| }); |
| </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=jsio/test" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body> |
| </html> |
