Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>DEEPSITE | Portail Quantique</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=Orbitron:wght@400;500;600;700;800;900&family=Rajdhani:wght@300;400;500;600;700&display=swap'); | |
| :root { | |
| --quantum-blue: #00f0ff; | |
| --neon-purple: #a100f0; | |
| --dark-matter: #0a0a1a; | |
| --void-black: #000000; | |
| } | |
| body { | |
| font-family: 'Rajdhani', sans-serif; | |
| background-color: var(--void-black); | |
| color: white; | |
| overflow-x: hidden; | |
| } | |
| .quantum-font { | |
| font-family: 'Orbitron', sans-serif; | |
| letter-spacing: 1px; | |
| } | |
| .cyber-gradient { | |
| background: linear-gradient(135deg, var(--void-black) 0%, var(--dark-matter) 100%); | |
| } | |
| .neon-text { | |
| text-shadow: 0 0 10px rgba(161, 0, 240, 0.7), | |
| 0 0 20px rgba(0, 240, 255, 0.5); | |
| } | |
| .quantum-glow { | |
| box-shadow: 0 0 15px rgba(0, 240, 255, 0.5), | |
| 0 0 30px rgba(161, 0, 240, 0.3); | |
| } | |
| .hacker-terminal { | |
| background: rgba(10, 10, 26, 0.85); | |
| backdrop-filter: blur(12px); | |
| border: 1px solid rgba(0, 240, 255, 0.15); | |
| box-shadow: inset 0 0 20px rgba(0, 240, 255, 0.1); | |
| } | |
| .matrix-fall { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-image: | |
| linear-gradient(rgba(0, 240, 255, 0.05) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(0, 240, 255, 0.05) 1px, transparent 1px); | |
| background-size: 30px 30px; | |
| z-index: -1; | |
| animation: matrixScroll 100s linear infinite; | |
| } | |
| @keyframes matrixScroll { | |
| 0% { background-position: 0 0; } | |
| 100% { background-position: 1000px 1000px; } | |
| } | |
| .quantum-pulse { | |
| animation: quantumPulse 3s infinite alternate; | |
| } | |
| @keyframes quantumPulse { | |
| 0% { opacity: 0.3; } | |
| 100% { opacity: 1; } | |
| } | |
| .cyber-border { | |
| position: relative; | |
| } | |
| .cyber-border::before { | |
| content: ""; | |
| position: absolute; | |
| inset: 0; | |
| border-radius: inherit; | |
| padding: 2px; | |
| background: linear-gradient(135deg, var(--quantum-blue), var(--neon-purple)); | |
| -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); | |
| -webkit-mask-composite: xor; | |
| mask-composite: exclude; | |
| pointer-events: none; | |
| } | |
| .neon-btn { | |
| background: linear-gradient(135deg, var(--quantum-blue) 0%, var(--neon-purple) 100%); | |
| transition: all 0.3s ease; | |
| box-shadow: 0 0 15px rgba(161, 0, 240, 0.5); | |
| } | |
| .neon-btn:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 5px 25px rgba(0, 240, 255, 0.6); | |
| } | |
| .quantum-loader { | |
| width: 60px; | |
| height: 60px; | |
| border: 5px solid transparent; | |
| border-top-color: var(--quantum-blue); | |
| border-bottom-color: var(--neon-purple); | |
| border-radius: 50%; | |
| animation: spin 1.5s linear infinite; | |
| } | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| .holographic-panel { | |
| background: linear-gradient(135deg, rgba(10, 10, 26, 0.7) 0%, rgba(0, 0, 51, 0.7) 100%); | |
| backdrop-filter: blur(15px); | |
| border: 1px solid rgba(0, 240, 255, 0.2); | |
| box-shadow: 0 0 30px rgba(161, 0, 240, 0.3); | |
| } | |
| .binary-rain { | |
| position: absolute; | |
| color: rgba(0, 240, 255, 0.7); | |
| font-family: 'Courier New', monospace; | |
| z-index: -1; | |
| animation: binaryFall linear infinite; | |
| } | |
| @keyframes binaryFall { | |
| 0% { transform: translateY(-100vh); } | |
| 100% { transform: translateY(100vh); } | |
| } | |
| .quantum-grid { | |
| background-image: | |
| radial-gradient(circle at center, rgba(0, 240, 255, 0.05) 0%, transparent 70%), | |
| linear-gradient(rgba(0, 240, 255, 0.03) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(0, 240, 255, 0.03) 1px, transparent 1px); | |
| background-size: 50px 50px; | |
| } | |
| .cyber-input { | |
| background: rgba(0, 0, 0, 0.5); | |
| border: 1px solid rgba(0, 240, 255, 0.3); | |
| color: white; | |
| transition: all 0.3s ease; | |
| } | |
| .cyber-input:focus { | |
| outline: none; | |
| border-color: var(--neon-purple); | |
| box-shadow: 0 0 10px rgba(161, 0, 240, 0.5); | |
| } | |
| .quantum-ripple { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .quantum-ripple:after { | |
| content: ""; | |
| display: block; | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| top: 0; | |
| left: 0; | |
| pointer-events: none; | |
| background-image: radial-gradient(circle, var(--quantum-blue) 10%, transparent 10.01%); | |
| background-repeat: no-repeat; | |
| background-position: 50%; | |
| transform: scale(10, 10); | |
| opacity: 0; | |
| transition: transform .5s, opacity 1s; | |
| } | |
| .quantum-ripple:active:after { | |
| transform: scale(0, 0); | |
| opacity: 0.3; | |
| transition: 0s; | |
| } | |
| </style> | |
| </head> | |
| <body class="quantum-grid"> | |
| <div class="matrix-fall"></div> | |
| <!-- Binary Rain Effect --> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const container = document.body; | |
| const chars = "01"; | |
| for (let i = 0; i < 50; i++) { | |
| const element = document.createElement('div'); | |
| element.className = 'binary-rain'; | |
| element.style.left = Math.random() * 100 + 'vw'; | |
| element.style.animationDuration = (Math.random() * 5 + 5) + 's'; | |
| element.style.animationDelay = (Math.random() * 5) + 's'; | |
| element.style.fontSize = (Math.random() * 10 + 10) + 'px'; | |
| let binaryText = ''; | |
| for (let j = 0; j < 50; j++) { | |
| binaryText += chars.charAt(Math.floor(Math.random() * chars.length)); | |
| } | |
| element.textContent = binaryText; | |
| container.appendChild(element); | |
| } | |
| }); | |
| </script> | |
| <!-- Quantum Terminal --> | |
| <div class="fixed bottom-0 left-0 right-0 h-1/3 hacker-terminal cyber-border z-50"> | |
| <div class="h-full flex flex-col"> | |
| <div class="flex items-center px-4 py-2 border-b border-gray-800"> | |
| <div class="flex space-x-2 mr-4"> | |
| <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-sm text-gray-400 quantum-font">DEEPSITE_TERMINAL://root/quantum_access</div> | |
| </div> | |
| <div class="flex-1 overflow-y-auto p-4 font-mono text-green-400 text-sm"> | |
| <div class="mb-2">> Initializing quantum connection...</div> | |
| <div class="mb-2 text-purple-400">Establishing entanglement with node QX-427...</div> | |
| <div class="mb-2">> Encryption: <span class="text-blue-400">Quantum AES-∞</span></div> | |
| <div class="mb-2">> Bandwidth: <span class="text-yellow-400">∞ Gbps</span></div> | |
| <div class="mb-2 text-purple-400">Tunneling through 12-dimensional space...</div> | |
| <div class="mb-2">> Authentication: <span class="text-green-400">Biometric Quantum Signature</span></div> | |
| <div class="mb-2">> System Status: <span class="text-green-400">READY</span></div> | |
| <div class="mb-2">> Welcome to <span class="text-blue-400 quantum-font">DEEPSITE v9.4.2</span></div> | |
| <div class="mb-2">> Type <span class="text-yellow-400">'help'</span> for command list</div> | |
| <div class="flex items-center"> | |
| <span class="text-green-400 mr-2">root@quantum:~#</span> | |
| <input type="text" class="bg-transparent border-none text-green-400 flex-1 focus:outline-none font-mono" | |
| placeholder="enter quantum command..." id="quantumCommand"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="container mx-auto px-4 pb-1/3"> | |
| <!-- Quantum Header --> | |
| <header class="py-6 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <div class="w-12 h-12 rounded-full bg-gradient-to-br from-blue-400 to-purple-600 flex items-center justify-center mr-3 quantum-glow"> | |
| <i class="fas fa-atom text-white text-xl"></i> | |
| </div> | |
| <h1 class="text-2xl font-bold text-white quantum-font neon-text">DEEPSITE</h1> | |
| </div> | |
| <nav class="hidden md:flex items-center space-x-8"> | |
| <a href="#quantum" class="text-gray-400 hover:text-blue-400 transition quantum-font">QUANTUM</a> | |
| <a href="#network" class="text-gray-400 hover:text-purple-400 transition quantum-font">NETWORK</a> | |
| <a href="#access" class="text-gray-400 hover:text-green-400 transition quantum-font">ACCESS</a> | |
| <a href="#about" class="text-gray-400 hover:text-yellow-400 transition quantum-font">ABOUT</a> | |
| <button class="neon-btn px-6 py-2 rounded-full text-black font-bold quantum-font">LOGIN</button> | |
| </nav> | |
| <button class="md:hidden text-gray-400"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| </header> | |
| <!-- Quantum Hero --> | |
| <section class="min-h-screen flex items-center pt-16"> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"> | |
| <div> | |
| <div class="bg-black bg-opacity-50 border border-blue-400 px-4 py-2 rounded-full inline-flex items-center text-sm mb-6 quantum-glow"> | |
| <span class="bg-blue-400 text-black rounded-full px-3 py-1 text-xs font-bold mr-2 quantum-font">ALPHA</span> | |
| <span class="text-blue-400 quantum-font">QUANTUM_ACCESS_PROTOCOL v9.4.2</span> | |
| </div> | |
| <h1 class="text-4xl md:text-6xl font-bold leading-tight mb-6 quantum-font neon-text"> | |
| <span class="text-blue-400">DEEPSITE</span> QUANTUM PORTAL | |
| </h1> | |
| <p class="text-xl text-gray-400 mb-8 max-w-2xl"> | |
| Access the deepest layers of the quantum web through our proprietary entanglement network. | |
| Zero latency, infinite bandwidth, absolute security. | |
| </p> | |
| <div class="flex flex-wrap gap-4"> | |
| <button class="neon-btn px-8 py-4 rounded-lg text-black font-bold text-lg quantum-font quantum-ripple"> | |
| <i class="fas fa-terminal mr-2"></i> ENTER QUANTUM SPACE | |
| </button> | |
| <button class="bg-black bg-opacity-50 border border-blue-400 border-opacity-30 px-8 py-4 rounded-lg text-white font-bold text-lg quantum-font hover:bg-opacity-70 transition"> | |
| <i class="fas fa-play-circle mr-2"></i> DEMO | |
| </button> | |
| </div> | |
| <div class="mt-12 grid grid-cols-2 md:grid-cols-3 gap-6"> | |
| <div class="flex items-center"> | |
| <div class="w-12 h-12 rounded-full bg-black border border-blue-400 flex items-center justify-center mr-4"> | |
| <i class="fas fa-bolt text-blue-400"></i> | |
| </div> | |
| <div> | |
| <div class="text-2xl font-bold quantum-font">0ms</div> | |
| <div class="text-gray-500 text-sm">LATENCY</div> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-12 h-12 rounded-full bg-black border border-purple-400 flex items-center justify-center mr-4"> | |
| <i class="fas fa-lock text-purple-400"></i> | |
| </div> | |
| <div> | |
| <div class="text-2xl font-bold quantum-font">∞-BIT</div> | |
| <div class="text-gray-500 text-sm">ENCRYPTION</div> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-12 h-12 rounded-full bg-black border border-green-400 flex items-center justify-center mr-4"> | |
| <i class="fas fa-infinity text-green-400"></i> | |
| </div> | |
| <div> | |
| <div class="text-2xl font-bold quantum-font">∞</div> | |
| <div class="text-gray-500 text-sm">BANDWIDTH</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <div class="cyber-border rounded-xl overflow-hidden quantum-glow"> | |
| <div class="holographic-panel p-1"> | |
| <div class="bg-black bg-opacity-90 rounded-lg overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1639762681057-1e71f2a974d1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="Quantum Network" | |
| class="w-full h-auto opacity-90"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="absolute -bottom-10 -left-10 w-40 h-40 rounded-full bg-blue-400 blur-3xl opacity-20"></div> | |
| <div class="absolute -top-10 -right-10 w-40 h-40 rounded-full bg-purple-500 blur-3xl opacity-20"></div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Quantum Nodes --> | |
| <section id="network" class="py-20"> | |
| <div class="text-center mb-20"> | |
| <h2 class="text-3xl md:text-5xl font-bold mb-6 quantum-font neon-text"> | |
| <span class="text-blue-400">QUANTUM</span> NODES NETWORK | |
| </h2> | |
| <p class="text-xl text-gray-400 max-w-3xl mx-auto"> | |
| Our global network of quantum entanglement nodes ensures instant access from anywhere in the universe | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto"> | |
| <div class="holographic-panel rounded-xl p-8 cyber-border"> | |
| <div class="w-16 h-16 rounded-full bg-black border border-blue-400 flex items-center justify-center mb-6"> | |
| <i class="fas fa-satellite-dish text-blue-400 text-2xl"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-4 quantum-font">EARTH ORBIT</h3> | |
| <p class="text-gray-400 mb-4"> | |
| Quantum satellites in geostationary orbit providing 100% planetary coverage | |
| </p> | |
| <div class="flex items-center text-blue-400 quantum-font"> | |
| <span>STATUS: ONLINE</span> | |
| <div class="w-3 h-3 rounded-full bg-green-500 ml-2"></div> | |
| </div> | |
| </div> | |
| <div class="holographic-panel rounded-xl p-8 cyber-border"> | |
| <div class="w-16 h-16 rounded-full bg-black border border-purple-400 flex items-center justify-center mb-6"> | |
| <i class="fas fa-moon text-purple-400 text-2xl"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-4 quantum-font">LUNAR BASE</h3> | |
| <p class="text-gray-400 mb-4"> | |
| Permanent quantum relay station on the Moon's far side | |
| </p> | |
| <div class="flex items-center text-blue-400 quantum-font"> | |
| <span>STATUS: ONLINE</span> | |
| <div class="w-3 h-3 rounded-full bg-green-500 ml-2"></div> | |
| </div> | |
| </div> | |
| <div class="holographic-panel rounded-xl p-8 cyber-border"> | |
| <div class="w-16 h-16 rounded-full bg-black border border-green-400 flex items-center justify-center mb-6"> | |
| <i class="fas fa-globe-americas text-green-400 text-2xl"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-4 quantum-font">UNDERSEA</h3> | |
| <p class="text-gray-400 mb-4"> | |
| Deep-sea quantum repeaters in Mariana Trench for submarine access | |
| </p> | |
| <div class="flex items-center text-blue-400 quantum-font"> | |
| <span>STATUS: ONLINE</span> | |
| <div class="w-3 h-3 rounded-full bg-green-500 ml-2"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Quantum Access --> | |
| <section id="access" class="py-20 bg-black bg-opacity-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"> | |
| <div class="relative"> | |
| <div class="cyber-border rounded-xl overflow-hidden quantum-glow"> | |
| <div class="holographic-panel p-1"> | |
| <div class="bg-black bg-opacity-90 rounded-lg overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1620712943543-bcc4688e7485?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="Quantum Access" | |
| class="w-full h-auto opacity-90"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="absolute -bottom-10 -left-10 w-40 h-40 rounded-full bg-purple-500 blur-3xl opacity-20"></div> | |
| </div> | |
| <div> | |
| <h2 class="text-3xl md:text-5xl font-bold mb-6 quantum-font neon-text"> | |
| <span class="text-purple-400">QUANTUM</span> ACCESS | |
| </h2> | |
| <p class="text-xl text-gray-400 mb-8"> | |
| Gain instant access to the deepest layers of the quantum web through our proprietary entanglement protocol | |
| </p> | |
| <div class="space-y-6"> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-400 bg-opacity-20 text-blue-400"> | |
| <i class="fas fa-fingerprint"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-lg font-bold text-white mb-2 quantum-font">BIOMETRIC ENTANGLEMENT</h4> | |
| <p class="text-gray-400">Your quantum signature is unique across all dimensions</p> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-400 bg-opacity-20 text-purple-400"> | |
| <i class="fas fa-atom"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-lg font-bold text-white mb-2 quantum-font">12D TUNNELING</h4> | |
| <p class="text-gray-400">Data travels through folded space-time dimensions</p> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-green-400 bg-opacity-20 text-green-400"> | |
| <i class="fas fa-shield-alt"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-lg font-bold text-white mb-2 quantum-font">QUANTUM ENCRYPTION</h4> | |
| <p class="text-gray-400">Information exists in superposition until observed by authorized parties</p> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="neon-btn px-8 py-4 rounded-lg text-black font-bold text-lg mt-8 quantum-font quantum-ripple"> | |
| <i class="fas fa-key mr-2"></i> REQUEST ACCESS | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Quantum Terminal --> | |
| <section class="py-20"> | |
| <div class="text-center mb-20"> | |
| <h2 class="text-3xl md:text-5xl font-bold mb-6 quantum-font neon-text"> | |
| <span class="text-blue-400">QUANTUM</span> TERMINAL | |
| </h2> | |
| <p class="text-xl text-gray-400 max-w-3xl mx-auto"> | |
| Direct interface to the quantum network through our proprietary command language | |
| </p> | |
| </div> | |
| <div class="max-w-5xl mx-auto cyber-border rounded-xl overflow-hidden quantum-glow"> | |
| <div class="holographic-panel"> | |
| <div class="p-1"> | |
| <div class="bg-black bg-opacity-90 rounded-lg overflow-hidden"> | |
| <div class="p-6 font-mono text-sm"> | |
| <div class="text-green-400 mb-4">> Initializing quantum terminal session...</div> | |
| <div class="text-blue-400 mb-4">Establishing connection with primary quantum node...</div> | |
| <div class="text-green-400 mb-4">> Authentication: Quantum Biometric Signature [VALID]</div> | |
| <div class="text-purple-400 mb-4">Entanglement established across 12 dimensions</div> | |
| <div class="text-green-400 mb-4">> Welcome to DEEPSITE Quantum Terminal v9.4.2</div> | |
| <div class="text-yellow-400 mb-6">Type 'help' for available commands</div> | |
| <div class="flex items-center mb-2"> | |
| <span class="text-green-400 mr-2">root@quantum:~#</span> | |
| <span class="text-white">connect earth_orbit --protocol=quantum</span> | |
| </div> | |
| <div class="text-blue-400 mb-4">Connecting to Earth Orbit Quantum Node...</div> | |
| <div class="text-green-400 mb-4">> Connection established: Bandwidth ∞ Gbps | Latency 0ms</div> | |
| <div class="flex items-center mb-2"> | |
| <span class="text-green-400 mr-2">root@quantum:~#</span> | |
| <span class="text-white">encrypt --level=quantum --key=biometric</span> | |
| </div> | |
| <div class="text-blue-400 mb-4">Initializing quantum encryption protocol...</div> | |
| <div class="text-green-400 mb-4">> Encryption: Quantum AES-∞ | Secure for ∞ years</div> | |
| <div class="flex items-center"> | |
| <span class="text-green-400 mr-2">root@quantum:~#</span> | |
| <input type="text" class="bg-transparent border-none text-white flex-1 focus:outline-none font-mono" | |
| placeholder="enter quantum command..."> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| <!-- Quantum Loader --> | |
| <div id="quantumLoader" class="fixed inset-0 bg-black bg-opacity-90 flex items-center justify-center z-50 hidden"> | |
| <div class="text-center"> | |
| <div class="quantum-loader mx-auto mb-6"></div> | |
| <div class="text-blue-400 text-xl quantum-font mb-2">INITIALIZING QUANTUM CONNECTION</div> | |
| <div class="text-gray-400 quantum-font">Establishing entanglement across 12 dimensions...</div> | |
| </div> | |
| </div> | |
| <script> | |
| // Quantum Terminal Input | |
| document.getElementById('quantumCommand').addEventListener('keypress', function(e) { | |
| if (e.key === 'Enter') { | |
| const command = this.value; | |
| this.value = ''; | |
| // Add command to terminal | |
| const terminal = this.parentElement.parentElement; | |
| const newLine = document.createElement('div'); | |
| newLine.className = 'flex items-center mb-2'; | |
| newLine.innerHTML = ` | |
| <span class="text-green-400 mr-2">root@quantum:~#</span> | |
| <span class="text-white">${command}</span> | |
| `; | |
| terminal.insertBefore(newLine, this.parentElement); | |
| // Add response based on command | |
| const response = document.createElement('div'); | |
| response.className = 'text-blue-400 mb-4'; | |
| if (command === 'help') { | |
| response.innerHTML = ` | |
| Available commands:<br> | |
| - connect [node] --protocol=quantum<br> | |
| - encrypt --level=quantum<br> | |
| - decrypt --key=biometric<br> | |
| - scan --dimensions=12<br> | |
| - exit | |
| `; | |
| } else if (command.startsWith('connect')) { | |
| response.textContent = `Connecting to quantum node... | Bandwidth ∞ Gbps | Latency 0ms`; | |
| } else if (command === 'clear') { | |
| terminal.innerHTML = ` | |
| <div class="text-green-400 mb-2">> Terminal cleared</div> | |
| <div class="flex items-center"> | |
| <span class="text-green-400 mr-2">root@quantum:~#</span> | |
| <input type="text" class="bg-transparent border-none text-green-400 flex-1 focus:outline-none font-mono" | |
| placeholder="enter quantum command..." id="quantumCommand"> | |
| </div> | |
| `; | |
| } else { | |
| response.textContent = `Command not recognized. Type 'help' for available commands.`; | |
| } | |
| terminal.insertBefore(response, this.parentElement); | |
| terminal.scrollTop = terminal.scrollHeight; | |
| } | |
| }); | |
| // Quantum Loader | |
| document.querySelectorAll('.neon-btn').forEach(btn => { | |
| btn.addEventListener('click', function() { | |
| document.getElementById('quantumLoader').classList.remove('hidden'); | |
| setTimeout(() => { | |
| document.getElementById('quantumLoader').classList.add('hidden'); | |
| }, 3000); | |
| }); | |
| }); | |
| // Quantum Ripple Effect | |
| document.querySelectorAll('.quantum-ripple').forEach(btn => { | |
| btn.addEventListener('click', function(e) { | |
| const x = e.clientX - e.target.getBoundingClientRect().left; | |
| const y = e.clientY - e.target.getBoundingClientRect().top; | |
| const ripple = document.createElement('span'); | |
| ripple.className = 'quantum-ripple-effect'; | |
| ripple.style.left = `${x}px`; | |
| ripple.style.top = `${y}px`; | |
| this.appendChild(ripple); | |
| setTimeout(() => { | |
| ripple.remove(); | |
| }, 1000); | |
| }); | |
| }); | |
| </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=docto41/deepsite-quantum" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |