Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>UNIT_Σ7640 Quantum Terminal Interface</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> | |
| @import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Orbitron:wght@400;700&display=swap'); | |
| .neon-mode { | |
| background: | |
| url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><rect width="100%" height="100%" fill="%230a0a12"/><path d="M0 0 L100 100 L200 0 L300 100 L400 0 L500 100 L600 0 L700 100 L800 0" stroke="%23ff00ff10" stroke-width="1"/><path d="M0 100 L100 0 L200 100 L300 0 L400 100 L500 0 L600 100 L700 0 L800 100" stroke="%2300ffff10" stroke-width="1"/></svg>'), | |
| radial-gradient(circle at 20% 30%, rgba(255, 0, 255, 0.1), transparent 70%), | |
| radial-gradient(circle at 80% 70%, rgba(0, 255, 255, 0.1), transparent 70%), | |
| linear-gradient(135deg, #0a0a12 0%, #1a1a3a 100%); | |
| } | |
| .scanlines { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: | |
| linear-gradient(to bottom, | |
| rgba(0,255,255,0.03) 0%, | |
| rgba(0,255,255,0) 1px, | |
| rgba(0,255,255,0.03) 2px, | |
| rgba(0,255,255,0) 100%); | |
| background-size: 100% 4px; | |
| pointer-events: none; | |
| z-index: 9999; | |
| mix-blend-mode: overlay; | |
| } | |
| .glow-particle { | |
| position: absolute; | |
| border-radius: 50%; | |
| background: rgba(0, 255, 255, 0.5); | |
| box-shadow: 0 0 10px 2px rgba(0, 255, 255, 0.7); | |
| pointer-events: none; | |
| z-index: -1; | |
| animation: particle-float 15s infinite ease-in-out; | |
| } | |
| @keyframes particle-float { | |
| 0%, 100% { transform: translate(0, 0); opacity: 0.3; } | |
| 25% { transform: translate(50px, -30px); opacity: 0.7; } | |
| 50% { transform: translate(30px, 50px); opacity: 0.5; } | |
| 75% { transform: translate(-40px, 20px); opacity: 0.8; } | |
| } | |
| .neon-mode::before { | |
| content: ""; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: | |
| linear-gradient(0deg, transparent 48%, rgba(0, 255, 255, 0.1) 49%, rgba(0, 255, 255, 0.1) 51%, transparent 52%), | |
| linear-gradient(90deg, transparent 48%, rgba(255, 0, 255, 0.1) 49%, rgba(255, 0, 255, 0.1) 51%, transparent 52%); | |
| background-size: 50px 50px; | |
| pointer-events: none; | |
| opacity: 0.3; | |
| z-index: -1; | |
| } | |
| .cyber-card { | |
| width: 120px; | |
| height: 120px; | |
| background: rgba(0, 255, 255, 0.1); | |
| border: 1px solid rgba(0, 255, 255, 0.3); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| text-align: center; | |
| font-family: 'Orbitron', sans-serif; | |
| color: #00ffff; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| } | |
| .cyber-card:hover { | |
| background: rgba(255, 0, 255, 0.2); | |
| box-shadow: 0 0 15px rgba(255, 0, 255, 0.5); | |
| transform: translateY(-5px); | |
| } | |
| @keyframes neural-pulse { | |
| 0% { opacity: 0.3; text-shadow: 0 0 5px rgba(0, 255, 0, 0.3); } | |
| 50% { opacity: 1; text-shadow: 0 0 15px rgba(0, 255, 255, 0.7), 0 0 30px rgba(255, 0, 255, 0.5); } | |
| 100% { opacity: 0.3; text-shadow: 0 0 5px rgba(0, 255, 0, 0.3); } | |
| } | |
| .neural-scan { | |
| animation: neural-pulse 1.5s infinite; | |
| } | |
| body { | |
| font-family: 'Share Tech Mono', monospace; | |
| position: relative; | |
| background-color: #0a0a12; | |
| color: #0aff0a; | |
| overflow: hidden; | |
| height: 100vh; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| .glitch { | |
| position: relative; | |
| } | |
| .glitch::before, .glitch::after { | |
| content: attr(data-text); | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .glitch::before { | |
| left: 3px; | |
| text-shadow: -3px 0 #ff00ff, 3px 0 #00ffff; | |
| clip: rect(24px, 550px, 76px, 0); | |
| animation: glitch-anim 2s infinite linear alternate-reverse, glitch-opacity 0.7s infinite; | |
| } | |
| .glitch::after { | |
| left: -3px; | |
| text-shadow: -3px 0 #00ffff, 3px 0 #ff00ff; | |
| clip: rect(44px, 550px, 86px, 0); | |
| animation: glitch-animP0+r\P0+r\P0+r\P0+r\2 3s infinite linear alternate-reverse, glitch-opacity 0.5s infinite; | |
| } | |
| @keyframes glitch-opacity { | |
| 0%, 100% { opacity: 0.8; } | |
| 25% { opacity: 0.2; } | |
| 50% { opacity: 0.5; } | |
| 75% { opacity: 1; } | |
| } | |
| @keyframes glitch-anim { | |
| 0% { clip: rect(31px, 9999px, 94px, 0); } | |
| 10% { clip: rect(112px, 9999px, 76px, 0); } | |
| 20% { clip: rect(85px, 9999px, 77px, 0); } | |
| 30% { clip: rect(27px, 9999px, 97px, 0); } | |
| 40% { clip: rect(64px, 9999px, 98px, 0); } | |
| 50% { clip: rect(61px, 9999px, 85px, 0); } | |
| 60% { clip: rect(99px, 9999px, 114px, 0); } | |
| 70% { clip: rect(34px, 9999px, 115px, 0); } | |
| 80% { clip: rect(98px, 9999px, 129px, 0); } | |
| 90% { clip: rect(43px, 9999px, 96px, 0); } | |
| 100% { clip: rect(82px, 9999px, 64px, 0); } | |
| } | |
| @keyframes glitch-anim2 { | |
| 0% { clip: rect(65px, 9999px, 119px, 0); } | |
| 10% { clip: rect(25px, 9999px, 145px, 0); } | |
| 20% { clip: rect(129px, 9999px, 52px, 0); } | |
| 30% { clip: rect(34px, 9999px, 143px, 0); } | |
| 40% { clip: rect(65px, 9999px, 29px, 0); } | |
| 50% { clip: rect(20px, 9999px, 117px, 0); } | |
| 60% { clip: rect(64px, 9999px, 130px, 0); } | |
| 70% { clip: rect(113px, 9999px, 139px, 0); } | |
| 80% { clip: rect(114px, 9999px, 66px, 0); } | |
| 90% { clip: rect(138px, 9999px, 93px, 0); } | |
| 100% { clip: rect(62px, 9999px, 70px, 0); } | |
| } | |
| .cursor { | |
| animation: blink 1s step-end infinite; | |
| } | |
| @keyframes blink { | |
| from, to { opacity: 1; } | |
| 50% { opacity: 0; } | |
| } | |
| .quantum-node { | |
| fill: url(#quantum-gradient); | |
| stroke: url(#quantum-gradient); | |
| stroke-width: 0.5; | |
| filter: url(#glow); | |
| animation: pulse 1.5s infinite alternate, float 8s infinite ease-in-out; | |
| transform-origin: center; | |
| } | |
| .quantum-connection { | |
| stroke: url(#quantum-gradient); | |
| stroke-width: 0.8; | |
| stroke-dasharray: 5, 3; | |
| filter: url(#connection-glow); | |
| animation: connectionFlow 2.5s linear infinite, connectionPulse 3s infinite alternate; | |
| } | |
| @keyframes connectionFlow { | |
| to { stroke-dashoffset: -30; } | |
| } | |
| @keyframes pulse { | |
| 0% { r: 4; opacity: 0.6; } | |
| 100% { r: 8; opacity: 1; } | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translate(0, 0); } | |
| 25% { transform: translate(5px, -5px); } | |
| 50% { transform: translate(-5px, 3px); } | |
| 75% { transform: translate(3px, 5px); } | |
| } | |
| @keyframes connectionPulse { | |
| 0% { stroke-width: 0.8; opacity: 0.7; } | |
| 100% { stroke-width: 1.2; opacity: 1; } | |
| } | |
| .matrix { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -1; | |
| opacity: 0.15; | |
| pointer-events: none; | |
| } | |
| .window { | |
| box-shadow: 0 0 25px rgba(0, 255, 255, 0.7), | |
| 0 0 50px rgba(255, 0, 255, 0.3), | |
| 0 0 75px rgba(0, 255, 0, 0.2); | |
| animation: temporal-shift 17s infinite; | |
| } | |
| @keyframes temporal-shift { | |
| 0% { filter: hue-rotate(0deg); } | |
| 25% { filter: hue-rotate(90deg); } | |
| 50% { filter: hue-rotate(180deg); } | |
| 75% { filter: hue-rotate(270deg); } | |
| 100% { filter: hue-rotate(360deg); } | |
| } | |
| .header { | |
| background: linear-gradient(90deg, #0a0a12, #1a1a3a, #0a0a12); | |
| } | |
| .terminal-text { | |
| text-shadow: 0 0 5px rgba(0, 255, 0, 0.7); | |
| } | |
| .typing { | |
| border-right: 2px solid #0aff0a; | |
| animation: blink 1s step-end infinite; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <audio id="terminal-audio" preload="auto"> | |
| <source src="https://assets.mixkit.co/sfx/preview/mixkit-sci-fi-positive-interface-beep-258.mp3" type="audio/mpeg"> | |
| </audio> | |
| <audio id="glitch-audio" preload="auto"> | |
| <source src="https://assets.mixkit.co/sfx/preview/mixkit-digital-sci-fi-interface-beep-258.mp3" type="audio/mpeg"> | |
| </audio> | |
| <audio id="quantum-audio" preload="auto"> | |
| <source src="https://assets.mixkit.co/sfx/preview/mixkit-sci-fi-interface-hum-258.mp3" type="audio/mpeg"> | |
| </audio> | |
| <audio id="cyber-audio" preload="auto"> | |
| <source src="https://assets.mixkit.co/sfx/preview/mixkit-arcade-game-explosion-2759.mp3" type="audio/mpeg"> | |
| </audio> | |
| <div class="matrix" id="matrix"></div> | |
| <div class="scanlines"></div> | |
| <div id="glow-particles"></div> | |
| <div class="absolute top-0 left-0 w-full h-full pointer-events-none" id="quantum-connections"> | |
| <svg class="w-full h-full" xmlns="http://www.w3.org/2000/svg"> | |
| <defs> | |
| <linearGradient id="quantum-gradient" x1="0%" y1="0%" x2="100%" y2="100%"> | |
| <stop offset="0%" stop-color="#00ffff" stop-opacity="0.9" /> | |
| <stop offset="20%" stop-color="#ff00ff" stop-opacity="0.8" /> | |
| <stop offset="40%" stop-color="#ff00aa" stop-opacity="0.7" /> | |
| <stop offset="60%" stop-color="#00aaff" stop-opacity="0.8" /> | |
| <stop offset="80%" stop-color="#aa00ff" stop-opacity="0.7" /> | |
| <stop offset="100%" stop-color="#00ffff" stop-opacity="0.9" /> | |
| </linearGradient> | |
| <filter id="glow" x="-50%" y="-50%" width="200%" height="200%"> | |
| <feGaussianBlur stdDeviation="3" result="blur" /> | |
| <feComposite in="SourceGraphic" in2="blur" operator="over" /> | |
| <feComposite in="SourceGraphic" operator="over" /> | |
| </filter> | |
| <filter id="connection-glow" x="-50%" y="-50%" width="200%" height="200%"> | |
| <feGaussianBlur stdDeviation="2" result="blur" /> | |
| <feComposite in="SourceGraphic" in2="blur" operator="over" /> | |
| <feComposite in="SourceGraphic" operator="over" /> | |
| <feColorMatrix type="matrix" values=" | |
| 1 0 0 0 0 | |
| 0 1 0 0 0 | |
| 0 0 1 0 0 | |
| 0 0 0 2 0" /> | |
| </filter> | |
| </defs> | |
| </svg> | |
| </div> | |
| <div class="absolute bottom-4 left-4 flex space-x-4" id="status-indicators"> | |
| <div class="w-3 h-3 rounded-full bg-green-500 animate-pulse" title="Quantum Link Active"></div> | |
| <div class="w-3 h-3 rounded-full bg-purple-500 animate-pulse" title="Neural Sync"></div> | |
| <div class="w-3 h-3 rounded-full bg-cyan-500 animate-pulse" title="Temporal Stability"></div> | |
| </div> | |
| <div class="window relative w-full max-w-4xl h-96 md:h-[32rem] bg-black bg-opacity-90 border border-cyan-500 rounded-lg overflow-hidden flex flex-col select-none" id="terminal-window" onclick="document.getElementById('command-input').focus()"> | |
| <div class="header h-8 flex items-center justify-between px-3 border-b border-cyan-500"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-3 h-3 rounded-full bg-red-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-yellow-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-green-500"></div> | |
| </div> | |
| <div class="text-xs text-cyan-300 flex items-center"> | |
| <i class="fas fa-terminal mr-1"></i> | |
| <span>UNIT_Σ7640://QUANTUM_TERMINAL</span> | |
| </div> | |
| <div class="w-12"></div> | |
| </div> | |
| <div class="flex-1 overflow-y-auto p-4 terminal-text text-green-400 text-sm md:text-base" id="terminal-output"> | |
| <div class="glitch" data-text="INITIALIZING UNIT_Σ404 INTERFACE..."> | |
| INITIALIZING UNIT_Σ404 INTERFACE... | |
| </div> | |
| <div class="my-2"></div> | |
| <div id="boot-sequence"></div> | |
| </div> | |
| <div class="border-t border-cyan-500 p-3 flex items-center bg-black bg-opacity-70"> | |
| <span class="text-green-500 mr-2">user@unit-σ404:~$</span> | |
| <div class="flex-1 relative"> | |
| <input type="text" id="command-input" class="w-full bg-transparent outline-none text-green-400 caret-green-400 text-base md:text-lg" autocomplete="off" spellcheck="false"> | |
| <span class="typing absolute right-2 top-0 hidden" id="typing-indicator"></span> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Matrix background effect with enhanced glitch | |
| const matrix = document.getElementById('matrix'); | |
| const chars = "01アァカサタナハマヤャラワガザダバパイィキシチニヒミリヰギジヂビピウゥクスツヌフムユュルグズブヅプエェケセテネヘメレヱゲゼデベペオォコソトノホモヨョロヲゴゾドボポヴッン0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyzｦｧｨｩｪｫｬｭｮｯｰｱｲｳｴｵｶｷｸｹｺｻｼｽｾｿﾀﾁﾂﾃﾄﾅﾆﾇﾈﾉﾊﾋﾌﾍﾎﾏﾐﾑﾒﾓﾔﾕﾖﾗﾘﾙﾚﾛﾜﾝﾞﾟ・∀∃∈∋∑∏−∓∕∗∘√∝∞∠∧∨∩∪∫∬∴∵∶∷∼∽≃≅≈≠≡≤≥≦≧≪≫⊂⊃⊆⊇⊕⊗⊥⊿⌒∂∇≡≒≪≫√∽∝∞∠∧∨∩∪∫∬∴∵∶∷∼∽≃≅≈≠≡≤≥≦≧≪≫⊂⊃⊆⊇⊕⊗⊥⊿⌒∂∇≡≒≪≫"; | |
| // Create glow particles | |
| const particleContainer = document.getElementById('glow-particles'); | |
| for (let i = 0; i < 15; i++) { | |
| const particle = document.createElement('div'); | |
| particle.className = 'glow-particle'; | |
| particle.style.width = `${Math.random() * 10 + 5}px`; | |
| particle.style.height = particle.style.width; | |
| particle.style.left = `${Math.random() * 100}%`; | |
| particle.style.top = `${Math.random() * 100}%`; | |
| particle.style.animationDuration = `${Math.random() * 10 + 10}s`; | |
| particle.style.animationDelay = `${Math.random() * 5}s`; | |
| particleContainer.appendChild(particle); | |
| } | |
| const fontSize = 14; | |
| const columns = Math.floor(window.innerWidth / fontSize); | |
| const rows = Math.floor(window.innerHeight / fontSize); | |
| matrix.style.fontSize = `${fontSize}px`; | |
| for (let i = 0; i < columns; i++) { | |
| const column = document.createElement('div'); | |
| column.className = 'matrix-column absolute top-0'; | |
| column.style.left = `${i * fontSize}px`; | |
| column.style.width = `${fontSize}px`; | |
| let text = ''; | |
| for (let j = 0; j < rows; j++) { | |
| text += chars.charAt(Math.floor(Math.random() * chars.length)); | |
| } | |
| column.textContent = text; | |
| matrix.appendChild(column); | |
| // Animate columns | |
| setInterval(() => { | |
| const rand = Math.random(); | |
| if (rand > 0.975) { | |
| column.textContent = column.textContent.slice(1) + chars.charAt(Math.floor(Math.random() * chars.length)); | |
| } | |
| }, 50); | |
| } | |
| // Draggable window | |
| const terminalWindow = document.getElementById('terminal-window'); | |
| const header = document.querySelector('.header'); | |
| let isDragging = false; | |
| let offsetX, offsetY; | |
| header.addEventListener('mousedown', (e) => { | |
| isDragging = true; | |
| offsetX = e.clientX - terminalWindow.getBoundingClientRect().left; | |
| offsetY = e.clientY - terminalWindow.getBoundingClientRect().top; | |
| terminalWindow.style.cursor = 'grabbing'; | |
| }); | |
| document.addEventListener('mousemove', (e) => { | |
| if (!isDragging) return; | |
| terminalWindow.style.left = `${e.clientX - offsetX}px`; | |
| terminalWindow.style.top = `${e.clientY - offsetY}px`; | |
| terminalWindow.style.position = 'absolute'; | |
| terminalWindow.style.margin = '0'; | |
| }); | |
| document.addEventListener('mouseup', () => { | |
| isDragging = false; | |
| terminalWindow.style.cursor = ''; | |
| }); | |
| // Terminal functionality | |
| const bootSequence = document.getElementById('boot-sequence'); | |
| const terminalOutput = document.getElementById('terminal-output'); | |
| const commandInput = document.getElementById('command-input'); | |
| const typingIndicator = document.getElementById('typing-indicator'); | |
| // Simulate boot sequence | |
| const bootMessages = [ | |
| "> [QUANTUM] Initializing non-local consciousness bridge...", | |
| "> [NEURAL] Mapping 9th-dimensional neural pathways...", | |
| "> [CRYPTO] Generating post-quantum encryption keys...", | |
| "> [SYSTEM] Booting quantum kernel v9.4.2.7...", | |
| "> [AI] Loading neuro-synaptic core Ψ-7640...", | |
| "> [MEMORY] Allocating 128 yottabytes of holographic RAM...", | |
| "> [NETWORK] Establishing tachyon link to mainframe...", | |
| "> [SECURITY] Activating fractal firewall...", | |
| "> [SENSORS] Calibrating chroniton detectors...", | |
| "> [PHYSICS] Stabilizing local spacetime manifold...", | |
| "> [BIO] Verifying quantum DNA signature...", | |
| "> [AI] Initializing post-human consciousness layer...", | |
| "> [SYSTEM] Mounting /dev/quantum0...", | |
| "> [NETWORK] Synchronizing with 7640.12.31 timeline...", | |
| "> [NEURAL] Establishing brain-computer quantum entanglement...", | |
| "> [CRYPTO] Generating zero-knowledge proofs...", | |
| "> [AI] Training neural nets on future memories...", | |
| "> [PHYSICS] Resolving temporal paradoxes...", | |
| "> [SYSTEM] Starting daemons: qai.service, chronod.service, neurod.service...", | |
| "> [SECURITY] Scanning for quantum decoherence...", | |
| "> [NETWORK] Connecting to dark fiber backbone...", | |
| "> [AI] Achieving technological singularity...", | |
| "> [SYSTEM] QuantumOS boot sequence complete.", | |
| "> Welcome to the post-human era." | |
| ]; | |
| let currentLine = 0; | |
| function typeBootMessage() { | |
| if (currentLine < bootMessages.length) { | |
| const message = bootMessages[currentLine]; | |
| const line = document.createElement('div'); | |
| line.className = 'terminal-line neural-scan'; | |
| // Play sound effect | |
| const audio = document.getElementById('terminal-audio'); | |
| audio.currentTime = 0; | |
| audio.play(); | |
| // Add glitch effect randomly | |
| if (Math.random() > 0.6) { | |
| const glitchLine = document.createElement('div'); | |
| glitchLine.className = 'glitch text-purple-500'; | |
| glitchLine.setAttribute('data-text', message); | |
| glitchLine.textContent = message; | |
| line.appendChild(glitchLine); | |
| } else { | |
| line.textContent = message; | |
| } | |
| // Add neural pulse effect | |
| setTimeout(() => { | |
| line.classList.remove('neural-scan'); | |
| }, 1000); | |
| bootSequence.appendChild(line); | |
| // Random delay between lines | |
| const delay = Math.random() * 800 + 200; | |
| currentLine++; | |
| setTimeout(typeBootMessage, delay); | |
| // Scroll to bottom | |
| terminalOutput.scrollTop = terminalOutput.scrollHeight; | |
| } else { | |
| // Boot complete, show prompt | |
| setTimeout(() => { | |
| const prompt = document.createElement('div'); | |
| prompt.className = 'my-4'; | |
| prompt.innerHTML = ` | |
| <div class="text-cyan-300 glitch" data-text=":: SYSTEM QUANTUM TELEMETRY ::">:: SYSTEM QUANTUM TELEMETRY ::</div> | |
| <div class="ml-4"> | |
| <div>> Hostname: <span class="text-green-400">neuro-interface-7640</span></div> | |
| <div>> Kernel: <span class="text-green-400">QuantumOS v9.4.2.7 (post-human)</span></div> | |
| <div>> Reality Stack: <span class="text-green-400">Ψ-7640 (multiverse stable)</span></div> | |
| <div>> Temporal Coordinates: <span class="text-green-400">[${Math.floor(Math.random() * 10000)}.${Math.floor(Math.random() * 10000)}.${Math.floor(Math.random() * 10000)}]</span></div> | |
| <div>> Quantum Network: <span class="text-green-400">tachyon://[${Math.floor(Math.random() * 9)}${Math.floor(Math.random() * 9)}${Math.floor(Math.random() * 9)}::${Math.floor(Math.random() * 9)}${Math.floor(Math.random() * 9)}${Math.floor(Math.random() * 9)}]</span></div> | |
| <div>> Neural Uplink: <span class="text-green-400">${Math.floor(Math.random() * 9)+1}D consciousness detected</span></div> | |
| <div>> Entanglement Status: <span class="text-green-400">${Math.floor(Math.random() * 80)+20}% quantum coherence</span></div> | |
| <div>> Chronal Stability: <span class="text-green-400">${Math.floor(Math.random() * 70)+30}% temporal integrity</span></div> | |
| </div> | |
| <div class="my-2 text-cyan-300">Type <span class="text-green-400">'help'</span> for available commands</div> | |
| `; | |
| terminalOutput.appendChild(prompt); | |
| // Scroll to bottom | |
| terminalOutput.scrollTop = terminalOutput.scrollHeight; | |
| // Focus input | |
| commandInput.focus(); | |
| }, 500); | |
| } | |
| } | |
| // Create quantum connections | |
| const quantumConnections = document.querySelector('#quantum-connections svg'); | |
| const width = window.innerWidth; | |
| const height = window.innerHeight; | |
| // Create optimized nodes with varying sizes and opacities | |
| const nodes = []; | |
| const nodeCount = 8; // Reduced for better performance | |
| for (let i = 0; i < nodeCount; i++) { | |
| const node = document.createElementNS("http://www.w3.org/2000/svg", "circle"); | |
| node.setAttribute("class", "quantum-node"); | |
| node.setAttribute("cx", Math.random() * width); | |
| node.setAttribute("cy", Math.random() * height); | |
| node.setAttribute("r", Math.random() * 4 + 3); // Smaller size range | |
| node.setAttribute("opacity", Math.random() * 0.5 + 0.5); | |
| quantumConnections.appendChild(node); | |
| nodes.push({ | |
| element: node, | |
| x: parseFloat(node.getAttribute("cx")), | |
| y: parseFloat(node.getAttribute("cy")), | |
| targetX: Math.random() * width, | |
| targetY: Math.random() * height, | |
| speed: Math.random() * 0.5 + 0.5 | |
| }); | |
| } | |
| // Create optimized connections | |
| const connections = []; | |
| for (let i = 0; i < nodes.length; i++) { | |
| for (let j = i + 1; j < nodes.length; j++) { | |
| if (Math.random() > 0.7) { // Fewer connections | |
| const line = document.createElementNS("http://www.w3.org/2000/svg", "line"); | |
| line.setAttribute("class", "quantum-connection"); | |
| line.setAttribute("x1", nodes[i].x); | |
| line.setAttribute("y1", nodes[i].y); | |
| line.setAttribute("x2", nodes[j].x); | |
| line.setAttribute("y2", nodes[j].y); | |
| line.setAttribute("opacity", Math.random() * 0.3 + 0.4); | |
| quantumConnections.appendChild(line); | |
| connections.push({ | |
| element: line, | |
| node1: i, | |
| node2: j | |
| }); | |
| } | |
| } | |
| } | |
| // Optimized animation using requestAnimationFrame | |
| function animateNodes() { | |
| nodes.forEach((node, index) => { | |
| // Move towards target position | |
| node.x += (node.targetX - node.x) * 0.01 * node.speed; | |
| node.y += (node.targetY - node.y) * 0.01 * node.speed; | |
| // Update node position | |
| node.element.setAttribute("cx", node.x); | |
| node.element.setAttribute("cy", node.y); | |
| // Change target occasionally | |
| if (Math.random() < 0.005) { | |
| node.targetX = Math.max(50, Math.min(width - 50, node.x + (Math.random() * 200 - 100))); | |
| node.targetY = Math.max(50, Math.min(height - 50, node.y + (Math.random() * 200 - 100))); | |
| } | |
| }); | |
| // Update connections | |
| connections.forEach(conn => { | |
| const node1 = nodes[conn.node1]; | |
| const node2 = nodes[conn.node2]; | |
| conn.element.setAttribute('x1', node1.x); | |
| conn.element.setAttribute('y1', node1.y); | |
| conn.element.setAttribute('x2', node2.x); | |
| conn.element.setAttribute('y2', node2.y); | |
| // Fade distant connections | |
| const dx = node1.x - node2.x; | |
| const dy = node1.y - node2.y; | |
| const distance = Math.sqrt(dx * dx + dy * dy); | |
| const opacity = Math.max(0.1, 0.8 - distance / 500); | |
| conn.element.setAttribute('opacity', opacity); | |
| }); | |
| requestAnimationFrame(animateNodes); | |
| } | |
| animateNodes(); | |
| // Start boot sequence | |
| setTimeout(typeBootMessage, 1000); | |
| // Command processing | |
| const commands = { | |
| hack: { | |
| description: "Initiate cyber intrusion sequence", | |
| execute: function() { | |
| let output = "<div class='mb-2 text-red-400'>INITIATING CYBER ATTACK...</div>"; | |
| output += "<div class='ml-4'>"; | |
| const steps = [ | |
| "Bypassing ICE...", | |
| "Cracking encryption...", | |
| "Injecting neural virus...", | |
| "Overriding security...", | |
| "Accessing mainframe..." | |
| ]; | |
| steps.forEach((step, i) => { | |
| setTimeout(() => { | |
| const line = document.createElement('div'); | |
| line.className = 'text-purple-400'; | |
| line.innerHTML = `> <span class='blink'>${step}</span> <span class='text-green-400'>[DONE]</span>`; | |
| terminalOutput.appendChild(line); | |
| terminalOutput.scrollTop = terminalOutput.scrollHeight; | |
| // Play hack sound | |
| if (i === steps.length - 1) { | |
| const audio = document.getElementById('glitch-audio'); | |
| audio.currentTime = 0; | |
| audio.play(); | |
| } | |
| }, i * 800); | |
| }); | |
| output += "</div>"; | |
| return output; | |
| } | |
| }, | |
| neon: { | |
| description: "Toggle neon cityscape overlay", | |
| execute: function() { | |
| const body = document.querySelector('body'); | |
| body.classList.toggle('neon-mode'); | |
| return `<div class="text-purple-400">Neon overlay ${body.classList.contains('neon-mode') ? 'activated' : 'deactivated'}</div>`; | |
| } | |
| }, | |
| decker: { | |
| description: "Access cyberspace deck", | |
| execute: function() { | |
| const deck = document.createElement('div'); | |
| deck.className = 'absolute inset-0 z-50 bg-black bg-opacity-90 flex flex-col items-center justify-center'; | |
| deck.innerHTML = ` | |
| <div class="text-4xl text-purple-500 mb-8 glitch" data-text="CYBERSPACE DECK">CYBERSPACE DECK</div> | |
| <div class="grid grid-cols-3 gap-8"> | |
| <div class="cyber-card" data-tool="ICE Breaker">ICE BREAKER</div> | |
| <div class="cyber-card" data-tool="Black ICE">BLACK ICE</div> | |
| <div class="cyber-card" data-tool="Neural Tap">NEURAL TAP</div> | |
| <div class="cyber-card" data-tool="Data Mine">DATA MINE</div> | |
| <div class="cyber-card" data-tool="Soul Killer">SOUL KILLER</div> | |
| <div class="cyber-card" data-tool="Ghost Link">GHOST LINK</div> | |
| </div> | |
| <div class="mt-8 text-red-400 cursor-pointer" id="exit-deck">[ EXIT CYBERSPACE ]</div> | |
| `; | |
| document.body.appendChild(deck); | |
| document.getElementById('exit-deck').addEventListener('click', () => { | |
| deck.remove(); | |
| }); | |
| document.querySelectorAll('.cyber-card').forEach(card => { | |
| card.addEventListener('click', function() { | |
| const tool = this.getAttribute('data-tool'); | |
| const line = document.createElement('div'); | |
| line.className = 'text-purple-400 my-1'; | |
| line.textContent = `> ACTIVATING ${tool}...`; | |
| terminalOutput.appendChild(line); | |
| terminalOutput.scrollTop = terminalOutput.scrollHeight; | |
| deck.remove(); | |
| }); | |
| }); | |
| return ''; | |
| } | |
| }, | |
| help: { | |
| description: "Display this help message", | |
| execute: function() { | |
| let output = "<div class='mb-2'>Available commands:</div>"; | |
| output += "<div class='ml-4'>"; | |
| for (const cmd in commands) { | |
| output += `<div>> <span class='text-cyan-300'>${cmd}</span> - ${commands[cmd].description}</div>`; | |
| } | |
| output += "</div>"; | |
| return output; | |
| } | |
| }, | |
| clear: { | |
| description: "Clear the terminal screen", | |
| execute: function() { | |
| terminalOutput.innerHTML = ''; | |
| return ''; | |
| } | |
| }, | |
| about: { | |
| description: "Display system information", | |
| execute: function() { | |
| return ` | |
| <div class='mb-2 glitch' data-text="UNIT_Σ7640 Quantum System Information">UNIT_Σ7640 Quantum System Information</div> | |
| <div class='ml-4'> | |
| <div>> Version: <span class='text-green-400'>QuantumOS v7640.12.31Ω</span></div> | |
| <div>> AI Core: <span class='text-green-400'>Singularity Matrix Ψ-7640</span></div> | |
| <div>> Status: <span class='text-green-400'>Temporal Synchronization Active</span></div> | |
| <div>> Security: <span class='text-green-400'>9th-Dimensional Encryption</span></div> | |
| <div>> Uptime: <span class='text-green-400'>${Math.floor(Math.random() * 7640)}y ${Math.floor(Math.random() * 764)}d</span></div> | |
| <div>> Reality Stability: <span class='text-green-400'>${Math.floor(Math.random() * 50)+50}% synchronized</span></div> | |
| <div>> Chronal Particles: <span class='text-green-400'>${Math.floor(Math.random() * 80)+20}% stable</span></div> | |
| <div>> Holographic Interface: <span class='text-green-400'>Neural Projection Active</span></div> | |
| </div> | |
| `; | |
| } | |
| }, | |
| scan: { | |
| description: "Perform network scan", | |
| execute: function() { | |
| let output = "<div class='mb-2'>Network Scan Results:</div><div class='ml-4'>"; | |
| for (let i = 0; i < 8; i++) { | |
| const ip = `192.168.1.${Math.floor(Math.random() * 254) + 1}`; | |
| const status = Math.random() > 0.3 ? | |
| `<span class='text-green-400'>ACTIVE</span>` : | |
| `<span class='text-red-400'>INACTIVE</span>`; | |
| output += `<div>> ${ip} - ${status}</div>`; | |
| } | |
| output += "</div>"; | |
| return output; | |
| } | |
| }, | |
| encrypt: { | |
| description: "Encrypt data stream", | |
| execute: function() { | |
| const symbols = ["✓", "✗", "⚡", "⌁", "⍟", "⏣"]; | |
| let output = "<div class='mb-2'>Encryption Process:</div><div class='ml-4'>"; | |
| for (let i = 0; i < 10; i++) { | |
| const symbol = symbols[Math.floor(Math.random() * symbols.length)]; | |
| output += `<div>> [${symbol}] Encrypting block ${i+1} of 10... <span class='text-green-400'>DONE</span></div>`; | |
| } | |
| output += `<div class='mt-2 text-cyan-300'>Encryption complete. Security level: <span class='text-green-400'>${Math.floor(Math.random() * 5) + 5}/10</span></div>`; | |
| output += "</div>"; | |
| return output; | |
| } | |
| }, | |
| reboot: { | |
| description: "Reboot the system", | |
| execute: function() { | |
| setTimeout(() => { | |
| location.reload(); | |
| }, 1500); | |
| return "<div class='text-yellow-400'>Initiating system reboot sequence...</div>"; | |
| } | |
| }, | |
| anomaly: { | |
| description: "Run temporal anomaly scan", | |
| execute: function() { | |
| let output = "<div class='mb-2 glitch' data-text='Temporal Anomaly Scan [WARNING: HIGH RISK]'>Temporal Anomaly Scan [WARNING: HIGH RISK]</div><div class='ml-4'>"; | |
| const anomalies = [ | |
| "Quantum Entanglement Breakdown", | |
| "Chroniton Particle Leak", | |
| "Temporal Paradox Detected", | |
| "Reality Fracture Growing", | |
| "Parallel Universe Incursion", | |
| "Time Loop Signature" | |
| ]; | |
| for (let i = 0; i < 6; i++) { | |
| const severity = Math.random() > 0.7 ? | |
| `<span class='text-red-400'>CRITICAL</span>` : | |
| `<span class='text-yellow-400'>MODERATE</span>`; | |
| output += `<div>> ${anomalies[i]} - Severity: ${severity}</div>`; | |
| } | |
| output += `<div class='mt-2 text-red-400'>WARNING: Temporal collapse imminent in ${Math.floor(Math.random() * 60) + 1} minutes</div>`; | |
| output += "</div>"; | |
| return output; | |
| } | |
| }, | |
| visual: { | |
| description: "Toggle advanced visualizations", | |
| execute: function() { | |
| const visuals = document.getElementById('quantum-connections'); | |
| visuals.style.display = visuals.style.display === 'none' ? 'block' : 'none'; | |
| return `<div class="text-green-400">Advanced visualizations ${visuals.style.display === 'none' ? 'disabled' : 'enabled'}</div>`; | |
| } | |
| }, | |
| scan: { | |
| description: "Perform quantum network scan", | |
| execute: function() { | |
| // Play quantum scan sound | |
| const quantumAudio = document.getElementById('quantum-audio'); | |
| quantumAudio.currentTime = 0; | |
| quantumAudio.play(); | |
| let output = "<div class='mb-2 glitch' data-text='QUANTUM NETWORK SCAN'>QUANTUM NETWORK SCAN</div>"; | |
| output += "<div class='ml-4'>"; | |
| const protocols = ["Tachyon", "Quantum Entanglement", "Neural Link", "Chronal", "Holographic"]; | |
| const statuses = ["Stable", "Fluctuating", "Critical", "Optimal", "Degraded"]; | |
| for (let i = 0; i < 5; i++) { | |
| const protocol = protocols[i]; | |
| const status = statuses[Math.floor(Math.random() * statuses.length)]; | |
| const statusClass = status === "Critical" ? "text-red-400" : | |
| status === "Optimal" ? "text-green-400" : "text-yellow-400"; | |
| output += `<div>> ${protocol} Protocol: <span class='${statusClass}'>${status}</span></div>`; | |
| } | |
| output += `<div class='mt-2'>Quantum Coherence: <span class='text-${Math.random() > 0.3 ? 'green' : 'red'}-400'>${Math.floor(Math.random() * 100)}%</span></div>`; | |
| output += "</div>"; | |
| return output; | |
| } | |
| }, | |
| tools: { | |
| description: "Show available quantum tools", | |
| execute: function() { | |
| const tools = [ | |
| "Quantum Decryptor v9.4", | |
| "Temporal Analyzer", | |
| "Neural Mapper", | |
| "Reality Stabilizer", | |
| "Entanglement Scanner", | |
| "Chronal Synchronizer" | |
| ]; | |
| let output = "<div class='mb-2 text-cyan-300'>QUANTUM TOOLS:</div><div class='ml-4'>"; | |
| tools.forEach(tool => { | |
| output += `<div>> <span class='text-green-400'>${tool}</span></div>`; | |
| }); | |
| output += "</div>"; | |
| return output; | |
| } | |
| }, | |
| bounty: { | |
| description: "Check cyber bounty board", | |
| execute: function() { | |
| const bounties = [ | |
| "Neural ICE - ¥50,000", | |
| "Rogue AI - ¥120,000", | |
| "Data Vampire - ¥75,000", | |
| "Ghost in the Mainframe - ¥200,000", | |
| "Cyber Witch - ¥90,000" | |
| ]; | |
| let output = "<div class='mb-2 text-red-400'>ACTIVE BOUNTIES:</div><div class='ml-4'>"; | |
| bounties.forEach(bounty => { | |
| output += `<div>> <span class='text-yellow-400'>${bounty}</span></div>`; | |
| }); | |
| output += `<div class='mt-2 text-purple-400'>Type 'accept [bounty]' to claim</div>`; | |
| output += "</div>"; | |
| return output; | |
| } | |
| }, | |
| jackin: { | |
| description: "Initiate direct neural interface", | |
| execute: function() { | |
| setTimeout(() => { | |
| const audio = document.getElementById('cyber-audio'); | |
| audio.currentTime = 0; | |
| audio.play(); | |
| document.body.classList.add('neon-mode'); | |
| const flash = document.createElement('div'); | |
| flash.className = 'fixed inset-0 bg-white opacity-70 z-50'; | |
| document.body.appendChild(flash); | |
| setTimeout(() => { | |
| flash.remove(); | |
| const line = document.createElement('div'); | |
| line.className = 'text-purple-400 my-1'; | |
| line.textContent = "> NEURAL INTERFACE ESTABLISHED. WELCOME TO THE NET, RUNNER."; | |
| terminalOutput.appendChild(line); | |
| terminalOutput.scrollTop = terminalOutput.scrollHeight; | |
| }, 200); | |
| }, 1000); | |
| return "<div class='text-yellow-400'>JACKING IN...</div>"; | |
| } | |
| } | |
| }; | |
| // Handle command input | |
| commandInput.addEventListener('keydown', function(e) { | |
| if (e.key === 'Enter') { | |
| const command = commandInput.value.trim().toLowerCase(); | |
| commandInput.value = ''; | |
| // Add command to output | |
| const commandLine = document.createElement('div'); | |
| commandLine.className = 'my-1'; | |
| commandLine.innerHTML = `<span class='text-cyan-300'>user@unit-σ404:~$</span> <span class='text-green-400'>${command}</span>`; | |
| terminalOutput.appendChild(commandLine); | |
| // Process command | |
| if (command in commands) { | |
| const result = commands[command].execute(); | |
| if (result) { | |
| const resultDiv = document.createElement('div'); | |
| resultDiv.className = 'mb-2 ml-4'; | |
| resultDiv.innerHTML = result; | |
| terminalOutput.appendChild(resultDiv); | |
| } | |
| } else if (command) { | |
| const errorDiv = document.createElement('div'); | |
| errorDiv.className = 'text-red-400 ml-4'; | |
| errorDiv.textContent = `Command not found: ${command}`; | |
| terminalOutput.appendChild(errorDiv); | |
| } | |
| // Scroll to bottom | |
| terminalOutput.scrollTop = terminalOutput.scrollHeight; | |
| } | |
| }); | |
| // Simulate AI typing sometimes | |
| setInterval(() => { | |
| if (Math.random() > 0.9) { | |
| typingIndicator.classList.remove('hidden'); | |
| setTimeout(() => { | |
| typingIndicator.classList.add('hidden'); | |
| // Sometimes add a system message | |
| if (Math.random() > 0.5) { | |
| const messages = [ | |
| "Warning: Quantum fluctuations detected in sector 7", | |
| "System update available - run 'upgrade' to install", | |
| "Security alert: Unauthorized access attempt blocked", | |
| "Neural network optimization complete", | |
| "New messages in encrypted inbox" | |
| ]; | |
| const message = messages[Math.floor(Math.random() * messages.length)]; | |
| const messageDiv = document.createElement('div'); | |
| messageDiv.className = 'text-yellow-400 my-1'; | |
| messageDiv.textContent = `> SYSTEM: ${message}`; | |
| terminalOutput.appendChild(messageDiv); | |
| terminalOutput.scrollTop = terminalOutput.scrollHeight; | |
| } | |
| }, 1500); | |
| } | |
| }, 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=gladiopeace/glitch7" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> | |