Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>QTerm-4730 :: Quantum Linux Terminal</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=Major+Mono+Display&family=Share+Tech+Mono&display=swap'); | |
| body { | |
| font-family: 'Share Tech Mono', monospace; | |
| background-color: #0a0a12; | |
| color: #0af; | |
| overflow: hidden; | |
| } | |
| .terminal { | |
| background: rgba(5, 5, 20, 0.8); | |
| border: 1px solid rgba(0, 170, 255, 0.3); | |
| box-shadow: 0 0 30px rgba(0, 170, 255, 0.2); | |
| position: relative; | |
| } | |
| .terminal::before { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: | |
| linear-gradient(90deg, rgba(0, 170, 255, 0.1) 1px, transparent 1px), | |
| linear-gradient(rgba(0, 170, 255, 0.1) 1px, transparent 1px); | |
| background-size: 10px 10px; | |
| pointer-events: none; | |
| opacity: 0.3; | |
| } | |
| .glitch { | |
| position: relative; | |
| } | |
| .glitch::before, .glitch::after { | |
| content: attr(data-text); | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .glitch::before { | |
| color: #f0f; | |
| z-index: -1; | |
| animation: glitch-effect 3s infinite; | |
| } | |
| .glitch::after { | |
| color: #0f0; | |
| z-index: -2; | |
| animation: glitch-effect 2s infinite reverse; | |
| } | |
| @keyframes glitch-effect { | |
| 0% { transform: translate(0); } | |
| 20% { transform: translate(-3px, 3px); } | |
| 40% { transform: translate(-3px, -3px); } | |
| 60% { transform: translate(3px, 3px); } | |
| 80% { transform: translate(3px, -3px); } | |
| 100% { transform: translate(0); } | |
| } | |
| .scanline { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 100%; | |
| background: linear-gradient( | |
| to bottom, | |
| transparent 0%, | |
| rgba(0, 170, 255, 0.05) 50%, | |
| transparent 100% | |
| ); | |
| background-size: 100% 8px; | |
| pointer-events: none; | |
| animation: scanline 8s linear infinite; | |
| } | |
| @keyframes scanline { | |
| 0% { transform: translateY(-100%); } | |
| 100% { transform: translateY(100%); } | |
| } | |
| .quantum-pulse { | |
| animation: quantum-pulse 4s infinite alternate; | |
| } | |
| @keyframes quantum-pulse { | |
| 0% { box-shadow: 0 0 5px rgba(0, 170, 255, 0.5); } | |
| 100% { box-shadow: 0 0 20px rgba(0, 170, 255, 0.8); } | |
| } | |
| .cursor { | |
| animation: blink 1s infinite; | |
| } | |
| @keyframes blink { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0; } | |
| } | |
| .command-output { | |
| border-left: 2px solid rgba(0, 170, 255, 0.5); | |
| padding-left: 10px; | |
| margin: 10px 0; | |
| } | |
| .quantum-particle { | |
| position: absolute; | |
| width: 3px; | |
| height: 3px; | |
| background-color: rgba(0, 170, 255, 0.7); | |
| border-radius: 50%; | |
| pointer-events: none; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen flex items-center justify-center p-4"> | |
| <div class="terminal w-full max-w-4xl h-96 md:h-[32rem] rounded-lg overflow-hidden flex flex-col quantum-pulse"> | |
| <!-- Header --> | |
| <div class="bg-black bg-opacity-50 p-2 flex items-center justify-between border-b border-blue-400 border-opacity-30"> | |
| <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 md:text-sm font-mono text-blue-300 glitch" data-text="QTerm-4730 :: Quantum Linux Terminal"> | |
| QTerm-4730 :: Quantum Linux Terminal | |
| </div> | |
| <div class="text-xs md:text-sm font-mono text-blue-300"> | |
| <span id="quantum-date">4730.12.31</span> <span id="quantum-time">23:59:59</span> | |
| </div> | |
| </div> | |
| <!-- Terminal Content --> | |
| <div class="flex-1 overflow-y-auto p-4 relative" id="terminal-content"> | |
| <div class="scanline"></div> | |
| <!-- Initial output --> | |
| <div class="command-output"> | |
| <p class="text-green-400">QTerm-4730 v12.7.9 (quantum-kernel 47.30.1-xQ)</p> | |
| <p class="text-blue-300">Quantum Entanglement Protocol: <span class="text-green-400">ACTIVE</span></p> | |
| <p class="text-blue-300">Superposition Layer: <span class="text-green-400">STABLE</span></p> | |
| <p class="text-blue-300">Temporal Sync: <span class="text-yellow-400">±0.0007s</span></p> | |
| <br> | |
| <p class="text-purple-400">Last login: 4730-12-31 23:59:47 from quantum-entanglement-node-47</p> | |
| <p class="text-purple-400">Warning: Temporal anomalies detected in sector 47</p> | |
| </div> | |
| <!-- Command prompt --> | |
| <div class="flex items-center mt-4" id="command-prompt"> | |
| <span class="text-green-400 mr-2">user@quantum-node:~$</span> | |
| <input type="text" class="bg-transparent border-none outline-none flex-1 text-blue-300 font-mono" | |
| id="command-input" autocomplete="off" spellcheck="false" autofocus> | |
| <span class="cursor ml-1">|</span> | |
| </div> | |
| <!-- Command output will be inserted here --> | |
| <div id="command-output"></div> | |
| </div> | |
| <!-- Footer --> | |
| <div class="bg-black bg-opacity-50 p-2 text-xs text-blue-300 border-t border-blue-400 border-opacity-30 flex justify-between"> | |
| <div> | |
| <span class="text-purple-400">STATUS:</span> | |
| <span class="text-green-400">QUANTUM_READY</span> | | |
| <span class="text-purple-400">NODES:</span> | |
| <span class="text-yellow-400">47/∞</span> | |
| </div> | |
| <div> | |
| <span class="text-purple-400">Q-BITS:</span> | |
| <span class="text-green-400">1.6e+47</span> | | |
| <span class="text-purple-400">ENTANGLEMENT:</span> | |
| <span class="text-yellow-400">98.7%</span> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Create quantum particles | |
| function createQuantumParticles() { | |
| const terminal = document.querySelector('.terminal'); | |
| const particleCount = 30; | |
| for (let i = 0; i < particleCount; i++) { | |
| const particle = document.createElement('div'); | |
| particle.classList.add('quantum-particle'); | |
| // Random position | |
| const x = Math.random() * 100; | |
| const y = Math.random() * 100; | |
| particle.style.left = `${x}%`; | |
| particle.style.top = `${y}%`; | |
| // Random animation | |
| const duration = 5 + Math.random() * 10; | |
| const delay = Math.random() * 5; | |
| particle.style.animation = `quantumFloat ${duration}s ease-in-out ${delay}s infinite`; | |
| // Add to terminal | |
| terminal.appendChild(particle); | |
| } | |
| } | |
| // Add quantum float animation | |
| const style = document.createElement('style'); | |
| style.innerHTML = ` | |
| @keyframes quantumFloat { | |
| 0% { transform: translate(0, 0); opacity: 0; } | |
| 10% { opacity: 0.7; } | |
| 50% { transform: translate(${Math.random() * 100 - 50}px, ${Math.random() * 100 - 50}px); } | |
| 100% { transform: translate(0, 0); opacity: 0; } | |
| } | |
| `; | |
| document.head.appendChild(style); | |
| // Update quantum date and time | |
| function updateQuantumDateTime() { | |
| const now = new Date(); | |
| const dateElement = document.getElementById('quantum-date'); | |
| const timeElement = document.getElementById('quantum-time'); | |
| // Future date format: 4730.12.31 | |
| dateElement.textContent = `4730.${String(now.getMonth() + 1).padStart(2, '0')}.${String(now.getDate()).padStart(2, '0')}`; | |
| // Time with milliseconds | |
| timeElement.textContent = `${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')}`; | |
| // Random glitch effect | |
| if (Math.random() < 0.1) { | |
| dateElement.classList.add('glitch'); | |
| timeElement.classList.add('glitch'); | |
| setTimeout(() => { | |
| dateElement.classList.remove('glitch'); | |
| timeElement.classList.remove('glitch'); | |
| }, 500); | |
| } | |
| } | |
| // Command processor | |
| function processCommand(command) { | |
| const outputDiv = document.getElementById('command-output'); | |
| const promptDiv = document.createElement('div'); | |
| promptDiv.className = 'flex items-center mt-4'; | |
| promptDiv.innerHTML = ` | |
| <span class="text-green-400 mr-2">user@quantum-node:~$</span> | |
| <span class="text-blue-300">${command}</span> | |
| `; | |
| outputDiv.appendChild(promptDiv); | |
| // Create response div | |
| const responseDiv = document.createElement('div'); | |
| responseDiv.className = 'command-output'; | |
| // Process commands | |
| command = command.trim().toLowerCase(); | |
| if (command === 'help' || command === '?') { | |
| responseDiv.innerHTML = ` | |
| <p class="text-yellow-400">Available commands:</p> | |
| <p>help - Display this help message</p> | |
| <p>status - Show quantum system status</p> | |
| <p>entangle - Initiate quantum entanglement</p> | |
| <p>superpose - Enter superposition state</p> | |
| <p>temporal - Check temporal stability</p> | |
| <p>nodes - List connected quantum nodes</p> | |
| <p>clear - Clear terminal</p> | |
| `; | |
| } | |
| else if (command === 'status') { | |
| responseDiv.innerHTML = ` | |
| <p class="text-yellow-400">Quantum System Status:</p> | |
| <p>Core Temperature: <span class="text-green-400">${(Math.random() * 0.5 + 2.7).toFixed(2)}K</span></p> | |
| <p>Q-Bit Stability: <span class="text-green-400">${(Math.random() * 5 + 95).toFixed(1)}%</span></p> | |
| <p>Entanglement Rate: <span class="text-green-400">${(Math.random() * 20 + 80).toFixed(1)}%</span></p> | |
| <p>Temporal Variance: <span class="text-yellow-400">±${(Math.random() * 0.001).toFixed(4)}s</span></p> | |
| `; | |
| } | |
| else if (command === 'entangle') { | |
| responseDiv.innerHTML = ` | |
| <p class="text-purple-400">Initiating quantum entanglement protocol...</p> | |
| <p>Establishing connection with parallel universes...</p> | |
| <p class="text-green-400">Entanglement successful! Connected to ${Math.floor(Math.random() * 47) + 1} alternate realities.</p> | |
| `; | |
| } | |
| else if (command === 'superpose') { | |
| responseDiv.innerHTML = ` | |
| <p class="text-purple-400">Entering quantum superposition state...</p> | |
| <p>Collapsing wavefunction in 3... 2... 1...</p> | |
| <p class="text-green-400">Superposition achieved! You are now in ${Math.floor(Math.random() * 10) + 2} states simultaneously.</p> | |
| `; | |
| } | |
| else if (command === 'temporal') { | |
| responseDiv.innerHTML = ` | |
| <p class="text-yellow-400">Temporal Stability Report:</p> | |
| <p>Local Timeline Integrity: <span class="text-green-400">${(Math.random() * 10 + 90).toFixed(1)}%</span></p> | |
| <p>Chroniton Particles: <span class="text-yellow-400">${(Math.random() * 1000).toFixed(0)}/cm³</span></p> | |
| <p>Temporal Anomalies: <span class="text-red-400">${Math.floor(Math.random() * 5)} detected</span></p> | |
| <p>Recommendation: ${Math.random() > 0.5 ? "No action required" : "Initiate temporal recalibration"}</p> | |
| `; | |
| } | |
| else if (command === 'nodes') { | |
| const nodeCount = Math.floor(Math.random() * 10) + 5; | |
| let nodesHTML = `<p class="text-yellow-400">Connected Quantum Nodes (${nodeCount}):</p>`; | |
| for (let i = 0; i < nodeCount; i++) { | |
| const status = Math.random() > 0.2 ? "ONLINE" : "OFFLINE"; | |
| const statusClass = status === "ONLINE" ? "text-green-400" : "text-red-400"; | |
| nodesHTML += `<p>quantum-node-${i} <span class="${statusClass}">${status}</span> ${Math.random().toFixed(4)}Q</p>`; | |
| } | |
| responseDiv.innerHTML = nodesHTML; | |
| } | |
| else if (command === 'clear') { | |
| document.getElementById('command-output').innerHTML = ''; | |
| return; | |
| } | |
| else if (command === '') { | |
| // Do nothing for empty command | |
| return; | |
| } | |
| else { | |
| responseDiv.innerHTML = ` | |
| <p class="text-red-400">Command not found: ${command}</p> | |
| <p>Type 'help' for available commands</p> | |
| `; | |
| } | |
| outputDiv.appendChild(responseDiv); | |
| // Random glitch effect | |
| if (Math.random() < 0.3) { | |
| responseDiv.classList.add('glitch'); | |
| setTimeout(() => { | |
| responseDiv.classList.remove('glitch'); | |
| }, 500); | |
| } | |
| // Scroll to bottom | |
| document.getElementById('terminal-content').scrollTop = document.getElementById('terminal-content').scrollHeight; | |
| } | |
| // Initialize | |
| document.addEventListener('DOMContentLoaded', () => { | |
| createQuantumParticles(); | |
| updateQuantumDateTime(); | |
| setInterval(updateQuantumDateTime, 1000); | |
| const commandInput = document.getElementById('command-input'); | |
| commandInput.addEventListener('keydown', (e) => { | |
| if (e.key === 'Enter') { | |
| const command = commandInput.value; | |
| commandInput.value = ''; | |
| processCommand(command); | |
| } | |
| }); | |
| // Focus input when clicking anywhere in terminal | |
| document.getElementById('terminal-content').addEventListener('click', () => { | |
| commandInput.focus(); | |
| }); | |
| }); | |
| </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/glitched-terminal" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |