Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>⚡ NEXUSCOCKPIT ⚡ | OFFENSIVE SECURITY INTELLIGENCE</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> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| 'terminal-black': '#0a0a0a', | |
| 'terminal-green': '#00ff00', | |
| 'terminal-blue': '#0080ff', | |
| 'terminal-purple': '#8000ff', | |
| 'terminal-red': '#ff0000', | |
| 'terminal-yellow': '#ffff00', | |
| 'terminal-gray': '#808080', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Share+Tech+Mono&display=swap'); | |
| body { | |
| font-family: 'Share Tech Mono', monospace; | |
| background: #000; | |
| color: #00ff00; | |
| overflow-x: hidden; | |
| cursor: none; | |
| } | |
| .cursor-glow { | |
| position: fixed; | |
| width: 20px; | |
| height: 20px; | |
| border: 2px solid #00ffff; | |
| border-radius: 50%; | |
| pointer-events: none; | |
| z-index: 9999; | |
| box-shadow: 0 0 20px #00ffff, 0 0 40px #00ffff, 0 0 60px #00ffff; | |
| animation: cursorPulse 1.5s ease-in-out infinite; | |
| } | |
| @keyframes cursorPulse { | |
| 0%, 100% { transform: scale(1); opacity: 1; } | |
| 50% { transform: scale(1.2); opacity: 0.8; } | |
| } | |
| .neural-dots { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: 0; | |
| pointer-events: none; | |
| } | |
| .neural-dot { | |
| position: absolute; | |
| width: 2px; | |
| height: 2px; | |
| background: radial-gradient(circle, #00ff00, #0080ff); | |
| border-radius: 50%; | |
| animation: float 6s ease-in-out infinite; | |
| box-shadow: 0 0 10px #00ff00; | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0px) rotate(0deg); opacity: 0; } | |
| 50% { transform: translateY(-100px) rotate(180deg); opacity: 1; } | |
| } | |
| .hologram-effect { | |
| background: linear-gradient(45deg, #ff0080, #00ff00, #0080ff, #ff0080); | |
| background-size: 400% 400%; | |
| animation: gradientShift 3s ease infinite; | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| text-shadow: 0 0 30px rgba(0, 255, 255, 0.5); | |
| } | |
| @keyframes gradientShift { | |
| 0% { background-position: 0% 50%; } | |
| 50% { background-position: 100% 50%; } | |
| 100% { background-position: 0% 50%; } | |
| } | |
| .cyber-grid { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: | |
| linear-gradient(rgba(0, 255, 255, 0.03) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(0, 255, 255, 0.03) 1px, transparent 1px); | |
| background-size: 50px 50px; | |
| animation: gridMove 20s linear infinite; | |
| z-index: 1; | |
| } | |
| @keyframes gridMove { | |
| 0% { transform: translate(0, 0); } | |
| 100% { transform: translate(50px, 50px); } | |
| } | |
| .laser-beam { | |
| position: absolute; | |
| width: 2px; | |
| height: 100%; | |
| background: linear-gradient(to bottom, transparent, #00ffff, transparent); | |
| animation: laserSweep 4s ease-in-out infinite; | |
| opacity: 0.6; | |
| } | |
| @keyframes laserSweep { | |
| 0%, 100% { transform: translateX(-100px) rotate(45deg); opacity: 0; } | |
| 50% { transform: translateX(calc(100vw + 100px)) rotate(45deg); opacity: 1; } | |
| } | |
| .quantum-glow { | |
| box-shadow: | |
| 0 0 5px #00ffff, | |
| 0 0 10px #00ffff, | |
| 0 0 15px #00ffff, | |
| 0 0 20px #ff0080, | |
| 0 0 35px #ff0080, | |
| 0 0 40px #ff0080, | |
| 0 0 50px #ff0080, | |
| 0 0 75px #ff0080; | |
| animation: quantumPulse 2s ease-in-out infinite; | |
| } | |
| @keyframes quantumPulse { | |
| 0%, 100% { | |
| box-shadow: | |
| 0 0 5px #00ffff, | |
| 0 0 10px #00ffff, | |
| 0 0 15px #00ffff, | |
| 0 0 20px #ff0080, | |
| 0 0 35px #ff0080, | |
| 0 0 40px #ff0080, | |
| 0 0 50px #ff0080, | |
| 0 0 75px #ff0080; | |
| } | |
| 50% { | |
| box-shadow: | |
| 0 0 2px #00ffff, | |
| 0 0 5px #00ffff, | |
| 0 0 10px #00ffff, | |
| 0 0 15px #ff0080, | |
| 0 0 20px #ff0080, | |
| 0 0 25px #ff0080, | |
| 0 0 30px #ff0080, | |
| 0 0 50px #ff0080; | |
| } | |
| } | |
| .glitch-ultimate { | |
| position: relative; | |
| font-family: 'Orbitron', monospace; | |
| font-weight: 900; | |
| font-size: 3rem; | |
| text-transform: uppercase; | |
| background: linear-gradient(45deg, #ff0080, #00ff00, #0080ff, #ff0080); | |
| background-size: 400% 400%; | |
| animation: glitchColor 2s ease-in-out infinite, glitchSkew 0.3s infinite; | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| text-shadow: | |
| 0.05em 0 0 #ff0080, | |
| -0.05em -0.025em 0 #00ffff, | |
| 0.025em 0.05em 0 #ffff00, | |
| 0 0 30px #ff0080, | |
| 0 0 60px #00ffff; | |
| } | |
| @keyframes glitchColor { | |
| 0%, 100% { filter: hue-rotate(0deg); } | |
| 25% { filter: hue-rotate(90deg); } | |
| 50% { filter: hue-rotate(180deg); } | |
| 75% { filter: hue-rotate(270deg); } | |
| } | |
| @keyframes glitchSkew { | |
| 0% { transform: translate(0); } | |
| 20% { transform: translate(-2px, 2px); filter: hue-rotate(10deg); } | |
| 40% { transform: translate(-2px, -2px); filter: hue-rotate(20deg); } | |
| 60% { transform: translate(2px, 2px); filter: hue-rotate(30deg); } | |
| 80% { transform: translate(2px, -2px); filter: hue-rotate(40deg); } | |
| 100% { transform: translate(0); } | |
| } | |
| .neon-border { | |
| border: 1px solid #00ffff; | |
| box-shadow: | |
| 0 0 5px #00ffff, | |
| 0 0 10px #00ffff, | |
| 0 0 20px #00ffff, | |
| inset 0 0 5px #00ffff; | |
| animation: neonFlicker 1.5s ease-in-out infinite; | |
| } | |
| @keyframes neonFlicker { | |
| 0%, 100% { | |
| border-color: #00ffff; | |
| box-shadow: | |
| 0 0 5px #00ffff, | |
| 0 0 10px #00ffff, | |
| 0 0 20px #00ffff, | |
| inset 0 0 5px #00ffff; | |
| } | |
| 50% { | |
| border-color: #ff0080; | |
| box-shadow: | |
| 0 0 5px #ff0080, | |
| 0 0 10px #ff0080, | |
| 0 0 20px #ff0080, | |
| inset 0 0 5px #ff0080; | |
| } | |
| } | |
| .terminal-cursor { | |
| display: inline-block; | |
| width: 15px; | |
| height: 25px; | |
| background: linear-gradient(180deg, #00ffff, #ff0080); | |
| animation: cursorGlow 0.5s infinite; | |
| margin-left: 2px; | |
| border-radius: 2px; | |
| box-shadow: 0 0 20px #00ffff; | |
| } | |
| @keyframes cursorGlow { | |
| 0%, 100% { | |
| opacity: 1; | |
| transform: scaleY(1); | |
| box-shadow: 0 0 20px #00ffff; | |
| } | |
| 50% { | |
| opacity: 0.5; | |
| transform: scaleY(0.8); | |
| box-shadow: 0 0 40px #ff0080; | |
| } | |
| } | |
| .scanline { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(transparent, rgba(0, 255, 255, 0.3), transparent); | |
| animation: scanline 2s linear infinite; | |
| pointer-events: none; | |
| z-index: 10; | |
| mix-blend-mode: screen; | |
| } | |
| @keyframes scanline { | |
| 0% { transform: translateY(-100%); } | |
| 100% { transform: translateY(100vh); } | |
| } | |
| .particle-container { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| overflow: hidden; | |
| pointer-events: none; | |
| } | |
| .particle { | |
| position: absolute; | |
| width: 4px; | |
| height: 4px; | |
| background: radial-gradient(circle, #00ffff, #ff0080); | |
| border-radius: 50%; | |
| animation: particleFloat 8s linear infinite; | |
| box-shadow: 0 0 10px #00ffff; | |
| } | |
| @keyframes particleFloat { | |
| 0% { | |
| transform: translateY(100vh) translateX(0) scale(0); | |
| opacity: 0; | |
| } | |
| 10% { | |
| opacity: 1; | |
| transform: scale(1); | |
| } | |
| 90% { | |
| opacity: 1; | |
| transform: scale(1); | |
| } | |
| 100% { | |
| transform: translateY(-100vh) translateX(100px) scale(0); | |
| opacity: 0; | |
| } | |
| } | |
| .morphing-bg { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: | |
| radial-gradient(ellipse at 20% 50%, rgba(0, 255, 255, 0.1) 0%, transparent 50%), | |
| radial-gradient(ellipse at 80% 20%, rgba(255, 0, 128, 0.1) 0%, transparent 50%), | |
| radial-gradient(ellipse at 40% 80%, rgba(0, 255, 0, 0.1) 0%, transparent 50%); | |
| animation: morphing 10s ease-in-out infinite; | |
| z-index: 0; | |
| } | |
| @keyframes morphing { | |
| 0%, 100% { | |
| transform: rotate(0deg) scale(1); | |
| filter: hue-rotate(0deg); | |
| } | |
| 25% { | |
| transform: rotate(90deg) scale(1.2); | |
| filter: hue-rotate(90deg); | |
| } | |
| 50% { | |
| transform: rotate(180deg) scale(0.8); | |
| filter: hue-rotate(180deg); | |
| } | |
| 75% { | |
| transform: rotate(270deg) scale(1.1); | |
| filter: hue-rotate(270deg); | |
| } | |
| } | |
| .command-input { | |
| background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.1), transparent); | |
| border: 1px solid rgba(0, 255, 255, 0.3); | |
| color: #00ffff; | |
| font-family: 'Share Tech Mono', monospace; | |
| font-size: 16px; | |
| width: 100%; | |
| outline: none; | |
| padding: 5px 10px; | |
| border-radius: 4px; | |
| transition: all 0.3s ease; | |
| box-shadow: 0 0 10px rgba(0, 255, 255, 0.5); | |
| } | |
| .command-input:focus { | |
| box-shadow: 0 0 20px rgba(0, 255, 255, 1); | |
| border-color: #00ffff; | |
| background: linear-gradient(90deg, rgba(0, 255, 255, 0.2), rgba(255, 0, 128, 0.2)); | |
| } | |
| .feature-card { | |
| backdrop-filter: blur(10px); | |
| background: linear-gradient(135deg, rgba(0, 255, 255, 0.1), rgba(255, 0, 128, 0.1)); | |
| border: 1px solid rgba(0, 255, 255, 0.3); | |
| transition: all 0.3s ease; | |
| overflow: hidden; | |
| position: relative; | |
| } | |
| .feature-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: -100%; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent); | |
| transition: left 0.5s; | |
| } | |
| .feature-card:hover::before { | |
| left: 100%; | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-10px) scale(1.05); | |
| box-shadow: 0 20px 40px rgba(0, 255, 255, 0.4); | |
| border-color: #00ffff; | |
| } | |
| .scrollbar::-webkit-scrollbar { | |
| width: 12px; | |
| background: rgba(0, 0, 0, 0.5); | |
| } | |
| .scrollbar::-webkit-scrollbar-thumb { | |
| background: linear-gradient(180deg, #00ffff, #ff0080); | |
| border-radius: 6px; | |
| box-shadow: 0 0 10px #00ffff; | |
| } | |
| .scrollbar::-webkit-scrollbar-track { | |
| background: rgba(0, 255, 255, 0.1); | |
| border-radius: 6px; | |
| } | |
| .matrix-rain { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| pointer-events: none; | |
| z-index: 0; | |
| } | |
| .matrix-char { | |
| position: absolute; | |
| color: #00ff00; | |
| font-family: 'Share Tech Mono', monospace; | |
| font-size: 12px; | |
| animation: matrixFall linear infinite; | |
| opacity: 0.8; | |
| text-shadow: 0 0 5px #00ff00; | |
| } | |
| @keyframes matrixFall { | |
| 0% { | |
| transform: translateY(-100vh); | |
| opacity: 0; | |
| } | |
| 10% { | |
| opacity: 1; | |
| } | |
| 90% { | |
| opacity: 1; | |
| } | |
| 100% { | |
| transform: translateY(100vh); | |
| opacity: 0; | |
| } | |
| } | |
| .audio-visualizer { | |
| position: absolute; | |
| bottom: 20px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| display: flex; | |
| align-items: end; | |
| gap: 2px; | |
| height: 40px; | |
| } | |
| .audio-bar { | |
| width: 4px; | |
| background: linear-gradient(to top, #ff0080, #00ffff); | |
| border-radius: 2px; | |
| animation: audioPulse 0.5s ease-in-out infinite; | |
| } | |
| .audio-bar:nth-child(1) { animation-delay: 0s; height: 20px; } | |
| .audio-bar:nth-child(2) { animation-delay: 0.1s; height: 30px; } | |
| .audio-bar:nth-child(3) { animation-delay: 0.2s; height: 25px; } | |
| .audio-bar:nth-child(4) { animation-delay: 0.3s; height: 35px; } | |
| .audio-bar:nth-child(5) { animation-delay: 0.4s; height: 28px; } | |
| @keyframes audioPulse { | |
| 0%, 100% { transform: scaleY(1); } | |
| 50% { transform: scaleY(1.5); } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Animated Background Elements --> | |
| <div class="cursor-glow"></div> | |
| <div class="morphing-bg"></div> | |
| <div class="cyber-grid"></div> | |
| <div class="neural-dots" id="neuralDots"></div> | |
| <div class="matrix-rain" id="matrixRain"></div> | |
| <div class="particle-container" id="particleContainer"></div> | |
| <div class="laser-beam"></div> | |
| <div class="min-h-screen flex flex-col relative z-10"> | |
| <!-- Header --> | |
| <header class="terminal-header py-4 px-6 flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div> | |
| <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div> | |
| <div class="w-3 h-3 rounded-full bg-green-500 mr-4"></div> | |
| <h1 class="text-2xl font-bold text-terminal-green">Nexus<span class="text-terminal-blue">Cockpit</span></h1> | |
| </div> | |
| <div class="hidden md:flex space-x-6 text-terminal-green"> | |
| <a href="#" class="hover:text-terminal-blue transition">RESEARCH</a> | |
| <a href="#" class="hover:text-terminal-blue transition">INTELLIGENCE</a> | |
| <a href="#" class="hover:text-terminal-blue transition">DEFENSE</a> | |
| <a href="#" class="hover:text-terminal-blue transition">ABOUT</a> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="flex-grow flex flex-col md:flex-row p-4 md:p-8 gap-8"> | |
| <!-- Terminal Section --> | |
| <div class="w-full md:w-2/3"> | |
| <div class="neon-border rounded-lg overflow-hidden quantum-glow"> | |
| <div class="terminal-header p-4 flex items-center bg-gradient-to-r from-black via-blue-900/20 to-purple-900/20"> | |
| <div class="flex space-x-2"> | |
| <div class="w-4 h-4 rounded-full bg-red-500 quantum-glow"></div> | |
| <div class="w-4 h-4 rounded-full bg-yellow-500 quantum-glow"></div> | |
| <div class="w-4 h-4 rounded-full bg-green-500 quantum-glow"></div> | |
| </div> | |
| <div class="ml-4 text-cyan-300 font-bold text-lg"> | |
| [NEXUS-COCKPIT v4.2.0] >> terminal@echolotintel:~$ | |
| </div> | |
| </div> | |
| <div class="terminal-content p-4 bg-black/80 backdrop-blur-sm scrollbar relative overflow-hidden"> | |
| <div class="scanline"></div> | |
| <div class="command-history mb-4"> | |
| <div class="output">> Initializing echolotintel security research protocol...</div> | |
| <div class="output">└ Loading offensive security modules...</div> | |
| <div class="output">> Establishing secure connection to research network...</div> | |
| <div class="output">└ Accessing classified research database...</div> | |
| <div class="output">└ Synchronizing threat intelligence feeds...</div> | |
| <div class="output">> Analyzing threat landscape patterns...</div> | |
| <div class="output">> Generating real-time security intelligence...</div> | |
| <div class="output">> echolotintel.eu research portal ready</div> | |
| <div class="output">> Type 'help' for available commands</div> | |
| </div> | |
| <div class="command-line"> | |
| <div class="prompt">root@echolotintel:~$</div> | |
| <input type="text" class="command-input" placeholder="Type 'help' for available commands..." autofocus> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Features Section --> | |
| <div class="mt-8 grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div class="feature-card p-6 rounded-lg"> | |
| <div class="card-icon text-terminal-blue"> | |
| <i class="fas fa-search"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">🔍 Research</h3> | |
| <p class="text-terminal-gray">Advanced threat analysis and vulnerability research</p> | |
| </div> | |
| <div class="feature-card p-6 rounded-lg"> | |
| <div class="card-icon text-terminal-yellow"> | |
| <i class="fas fa-bolt"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">⚡ Intelligence</h3> | |
| <p class="text-terminal-gray">Real-time cybersecurity intelligence and analysis</p> | |
| </div> | |
| <div class="feature-card p-6 rounded-lg"> | |
| <div class="card-icon text-terminal-purple"> | |
| <i class="fas fa-shield-alt"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">🛡️ Defense</h3> | |
| <p class="text-terminal-gray">Innovative security solutions and countermeasures</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Info Panel --> | |
| <div class="w-full md:w-1/3"> | |
| <div class="neon-border rounded-lg overflow-hidden h-full quantum-glow"> | |
| <div class="terminal-header p-4"> | |
| <h2 class="text-xl font-bold">SECURITY INTELLIGENCE</h2> | |
| </div> | |
| <div class="p-6 bg-terminal-black h-full"> | |
| <div class="mb-6"> | |
| <h3 class="text-terminal-blue text-lg font-bold mb-2">OFFENSIVE SECURITY</h3> | |
| <p class="text-terminal-gray mb-4">Pioneering the future of cybersecurity through innovative offensive research and cutting-edge exploit development</p> | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="text-terminal-purple text-lg font-bold mb-2">CURRENT STATUS</h3> | |
| <div class="flex items-center mb-2"> | |
| <div class="pulse mr-2"></div> | |
| <span>Research Network: <span class="text-terminal-green">ACTIVE</span></span> | |
| </div> | |
| <div class="flex items-center mb-2"> | |
| <div class="pulse mr-2"></div> | |
| <span>Threat Analysis: <span class="text-terminal-green">RUNNING</span></span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="pulse mr-2"></div> | |
| <span>Security Protocols: <span class="text-terminal-green">ENFORCED</span></span> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="text-terminal-yellow text-lg font-bold mb-2">RECENT ACTIVITY</h3> | |
| <ul class="text-terminal-gray text-sm"> | |
| <li class="mb-1">• Vulnerability scan completed</li> | |
| <li class="mb-1">• New threat intelligence received</li> | |
| <li class="mb-1">• Security patch deployed</li> | |
| <li>• Research protocol updated</li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-terminal-red text-lg font-bold mb-2">ALERTS</h3> | |
| <p class="text-terminal-gray">No critical alerts at this time</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="terminal-border border-t p-4 text-center text-terminal-gray text-sm"> | |
| <p>echolotintel.eu | Secure Research Network | <span class="text-terminal-green">v3.7.2</span></p> | |
| </footer> | |
| </div> | |
| <script> | |
| // Enhanced particle system | |
| function createNeuralDots() { | |
| const container = document.getElementById('neuralDots'); | |
| for (let i = 0; i < 50; i++) { | |
| const dot = document.createElement('div'); | |
| dot.className = 'neural-dot'; | |
| dot.style.left = Math.random() * 100 + '%'; | |
| dot.style.animationDelay = Math.random() * 6 + 's'; | |
| dot.style.animationDuration = (Math.random() * 3 + 3) + 's'; | |
| container.appendChild(dot); | |
| } | |
| } | |
| function createParticles() { | |
| const container = document.getElementById('particleContainer'); | |
| setInterval(() => { | |
| const particle = document.createElement('div'); | |
| particle.className = 'particle'; | |
| particle.style.left = Math.random() * 100 + '%'; | |
| particle.style.animationDuration = (Math.random() * 4 + 4) + 's'; | |
| container.appendChild(particle); | |
| setTimeout(() => particle.remove(), 8000); | |
| }, 500); | |
| } | |
| function createMatrixRain() { | |
| const container = document.getElementById('matrixRain'); | |
| const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ'; | |
| setInterval(() => { | |
| const char = document.createElement('div'); | |
| char.className = 'matrix-char'; | |
| char.textContent = chars[Math.floor(Math.random() * chars.length)]; | |
| char.style.left = Math.random() * 100 + '%'; | |
| char.style.animationDuration = (Math.random() * 3 + 2) + 's'; | |
| container.appendChild(char); | |
| setTimeout(() => char.remove(), 5000); | |
| }, 100); | |
| } | |
| // Enhanced terminal with sound effects simulation | |
| function playSound(frequency, duration) { | |
| try { | |
| const audioContext = new (window.AudioContext || window.webkitAudioContext)(); | |
| const oscillator = audioContext.createOscillator(); | |
| const gainNode = audioContext.createGain(); | |
| oscillator.connect(gainNode); | |
| gainNode.connect(audioContext.destination); | |
| oscillator.frequency.value = frequency; | |
| oscillator.type = 'sine'; | |
| gainNode.gain.setValueAtTime(0.1, audioContext.currentTime); | |
| gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + duration); | |
| oscillator.start(audioContext.currentTime); | |
| oscillator.stop(audioContext.currentTime + duration); | |
| } catch (e) {} | |
| } | |
| // Custom cursor movement | |
| document.addEventListener('mousemove', (e) => { | |
| const cursor = document.querySelector('.cursor-glow'); | |
| cursor.style.left = e.clientX - 10 + 'px'; | |
| cursor.style.top = e.clientY - 10 + 'px'; | |
| }); | |
| // Enhanced terminal | |
| document.addEventListener('DOMContentLoaded', function() { | |
| createNeuralDots(); | |
| createParticles(); | |
| createMatrixRain(); | |
| const input = document.querySelector('.command-input'); | |
| const history = document.querySelector('.command-history'); | |
| // Focus on input | |
| input.focus(); | |
| // Enhanced command processing with visual effects | |
| input.addEventListener('keyup', function(e) { | |
| if (e.key === 'Enter') { | |
| const command = input.value.trim(); | |
| if (command) { | |
| playSound(800, 0.1); | |
| // Add command to history with glow effect | |
| const commandLine = document.createElement('div'); | |
| commandLine.className = 'command-line text-cyan-300'; | |
| commandLine.innerHTML = ` | |
| <div class="prompt text-purple-400">╰─➤</div> | |
| <div class="text-green-400">${command}</div> | |
| `; | |
| history.appendChild(commandLine); | |
| // Process command with enhanced responses | |
| let outputLine = document.createElement('div'); | |
| outputLine.className = 'output text-green-400'; | |
| switch(command.toLowerCase()) { | |
| case 'help': | |
| outputLine.innerHTML = ` | |
| <div class="text-cyan-300">> Available commands:</div> | |
| <div class="text-green-400 ml-4">• help - Show this menu</div> | |
| <div class="text-purple-300 ml-4">• clear - Clear terminal</div> | |
| <div class="text-yellow-300 ml-4">• status - System status</div> | |
| <div class="text-red-300 ml-4">• research - Research protocols</div> | |
| <div class="text-blue-300 ml-4">• intelligence - Intel systems</div> | |
| <div class="text-pink-300 ml-4">• defense - Security countermeasures</div> | |
| <div class="text-cyan-300 ml-4">• about - System information</div> | |
| `; | |
| break; | |
| case 'clear': | |
| history.innerHTML = ''; | |
| input.value = ''; | |
| return; | |
| case 'status': | |
| outputLine.innerHTML = ` | |
| <div class="text-green-400">> SYSTEM STATUS: <span class="text-purple-400">OPERATIONAL</span></div> | |
| <div class="text-cyan-300">> Research modules: <span class="text-green-400">ACTIVE [42/42]</span></div> | |
| <div class="text-purple-400">> Threat intelligence: <span class="text-yellow-400">UPDATED [∞]</span></div> | |
| <div class="text-red-400">> Security protocols: <span class="text-green-400">ENFORCED [MAX]</span></div> | |
| `; | |
| break; | |
| case 'research': | |
| outputLine.innerHTML = ` | |
| <div class="text-cyan-300">> [+] Advanced threat analysis protocols initiated</div> | |
| <div class="text-purple-400">> [+] Vulnerability research modules activated</div> | |
| <div class="text-green-400">> [+] Offensive security frameworks loaded</div> | |
| <div class="text-red-300">> [!] Research network synchronized</div> | |
| `; | |
| break; | |
| case 'intelligence': | |
| outputLine.innerHTML = ` | |
| <div class="text-green-400">> [+] Real-time cyber intel systems online</div> | |
| <div class="text-cyan-300">> [+] Threat landscape analysis active</div> | |
| <div class="text-purple-400">> [+] Predictive algorithms engaged</div> | |
| <div class="text-yellow-300">> [+] Intelligence feeds synchronized</div> | |
| `; | |
| break; | |
| case 'defense': | |
| outputLine.innerHTML = ` | |
| <div class="text-red-400">> [+] Security countermeasures deployed</div> | |
| <div class="text-cyan-300">> [+] Intrusion detection systems active</div> | |
| <div class="text-green-400">> [+] Defensive protocols enforced</div> | |
| <div class="text-purple-300">> [+] Honeypot arrays initialized</div> | |
| `; | |
| break; | |
| case 'about': | |
| outputLine.innerHTML = ` | |
| <div class="text-cyan-300">> NEXUSCOCKPIT v4.2.0</div> | |
| <div class="text-purple-400">> Offensive Security Research Platform</div> | |
| <div class="text-green-400">> Pioneering cyber warfare since 2023</div> | |
| <div class="text-red-300">> [∞] Quantum encrypted research network</div> | |
| `; | |
| break; | |
| default: | |
| outputLine.innerHTML = ` | |
| <div class="text-red-400">> [!] Command not found: ${command}</div> | |
| <div class="text-yellow-300">> Type 'help' to see available commands</div> | |
| `; | |
| } | |
| history.appendChild(outputLine); | |
| input.value = ''; | |
| // Add cursor to last line | |
| const lastOutput = document.querySelector('.command-history .output:last-child'); | |
| if (lastOutput) { | |
| lastOutput.innerHTML += '<span class="terminal-cursor"></span>'; | |
| } | |
| history.scrollTop = history.scrollHeight; | |
| } | |
| } | |
| }); | |
| // Animate initial messages | |
| const messages = [ | |
| "> [+] Initializing quantum security protocols...", | |
| "> [+] Loading offensive security modules...", | |
| "> [+] Establishing encrypted research network...", | |
| "> [+] Accessing classified intelligence database...", | |
| "> [+] Synchronizing threat intelligence feeds...", | |
| "> [+] Analyzing threat landscape patterns...", | |
| "> [+] Generating real-time security intelligence...", | |
| "> [✓] NEXUSCOCKPIT v4.2.0 - READY", | |
| "> [?] Type 'help' for available commands" | |
| ]; | |
| let index = 0; | |
| const typeInterval = setInterval(() => { | |
| if (index < messages.length) { | |
| const output = document.createElement('div'); | |
| output.className = 'output text-green-400'; | |
| output.textContent = messages[index]; | |
| history.appendChild(output); | |
| history.scrollTop = history.scrollHeight; | |
| playSound(400 + index * 50, 0.1); | |
| index++; | |
| } else { | |
| clearInterval(typeInterval); | |
| const lastOutput = document.querySelector('.command-history .output:last-child'); | |
| if (lastOutput) { | |
| lastOutput.innerHTML = '<span class="text-green-400">> [?] Type help for available commands</span><span class="terminal-cursor"></span>'; | |
| } | |
| } | |
| }, 200); | |
| }); | |
| </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=schniggie/echolotintel-nexus" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |