Spaces:
Running
Running
| <h | |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ψShell UI — Cosmic Command 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=Space+Grotesk:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Space Grotesk', sans-serif; | |
| background: radial-gradient(circle at center, #0f172a 0%, #020617 100%); | |
| color: #e2e8f0; | |
| min-height: 100vh; | |
| overflow-x: hidden; | |
| } | |
| .universe-card { | |
| background: linear-gradient(135deg, rgba(49, 46, 129, 0.8) 0%, rgba(15, 23, 42, 0.9) 100%); | |
| box-shadow: 0 10px 25px -5px rgba(99, 102, 241, 0.2); | |
| transition: all 0.3s ease; | |
| } | |
| .universe-card:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 20px 25px -5px rgba(99, 102, 241, 0.3); | |
| } | |
| .quantum-panel { | |
| background: linear-gradient(135deg, rgba(6, 182, 212, 0.2) 0%, rgba(15, 23, 42, 0.9) 100%); | |
| } | |
| .akashic-text { | |
| background: linear-gradient(90deg, #e2e8f0, #94a3b8); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .psi-log-entry { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.6; } | |
| } | |
| .entanglement-line { | |
| position: relative; | |
| } | |
| .entanglement-line::after { | |
| content: ""; | |
| position: absolute; | |
| left: 0; | |
| bottom: -5px; | |
| width: 100%; | |
| height: 1px; | |
| background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.7), transparent); | |
| } | |
| .glow { | |
| text-shadow: 0 0 8px rgba(167, 139, 250, 0.6); | |
| } | |
| .terminal-input { | |
| caret-color: #a78bfa; | |
| } | |
| .terminal-input:focus { | |
| box-shadow: 0 0 0 2px rgba(167, 139, 250, 0.5); | |
| } | |
| </style> | |
| </head> | |
| <body class="antialiased"> | |
| <div class="container mx-auto px-4 py-6 max-w-7xl"> | |
| <!-- Header --> | |
| <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6 p-4 rounded-xl bg-gradient-to-r from-indigo-900/30 to-purple-900/20 border border-indigo-900/50"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="text-2xl"> | |
| <i class="fas fa-atom text-purple-400"></i> | |
| </div> | |
| <h1 class="text-2xl font-bold bg-gradient-to-r from-purple-400 to-indigo-300 bg-clip-text text-transparent"> | |
| ψShell <span class="text-sm font-normal text-gray-300">[Connected as: grok@ψ.kernel]</span> | |
| </h1> | |
| </div> | |
| <div class="mt-3 md:mt-0 flex items-center space-x-2"> | |
| <div class="px-3 py-1 rounded-full bg-green-900/50 text-green-300 text-sm flex items-center"> | |
| <div class="w-2 h-2 rounded-full bg-green-400 mr-2"></div> | |
| <span>Quantum Link Active</span> | |
| </div> | |
| <button class="px-3 py-1 rounded-full bg-indigo-900/50 text-indigo-200 hover:bg-indigo-800/70 transition-colors"> | |
| <i class="fas fa-crystal-ball mr-1"></i> Status | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Main Grid --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-4"> | |
| <!-- Left Column --> | |
| <div class="space-y-4"> | |
| <!-- Universes Panel --> | |
| <div class="bg-gray-900/50 rounded-xl border border-gray-800 overflow-hidden"> | |
| <div class="p-4 bg-gradient-to-r from-gray-800 to-gray-900 border-b border-gray-800 flex justify-between items-center"> | |
| <h2 class="font-semibold text-purple-300"> | |
| <i class="fas fa-globe-americas mr-2"></i> Universes | |
| </h2> | |
| <button id="spawnUniverseBtn" class="px-3 py-1 rounded-full bg-purple-900/50 text-purple-200 hover:bg-purple-800/70 text-sm transition-colors"> | |
| <i class="fas fa-plus mr-1"></i> Spawn New | |
| </button> | |
| </div> | |
| <div class="p-4 space-y-3"> | |
| <div class="universe-card p-4 rounded-xl cursor-pointer"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="font-bold text-lg text-white">UNV-a1b2</h3> | |
| <p class="text-xs text-gray-400 mt-1">Born at: ψ-time 7.83Hz</p> | |
| </div> | |
| <span class="px-2 py-1 rounded-full text-xs bg-green-900/50 text-green-300">● Active</span> | |
| </div> | |
| <div class="mt-3 flex space-x-2"> | |
| <span class="px-2 py-1 rounded-full text-xs bg-indigo-900/50 text-indigo-300">Entangled</span> | |
| <span class="px-2 py-1 rounded-full text-xs bg-purple-900/50 text-purple-300">3 Branches</span> | |
| </div> | |
| </div> | |
| <div class="universe-card p-4 rounded-xl cursor-pointer"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="font-bold text-lg text-white">UNV-c3e4</h3> | |
| <p class="text-xs text-gray-400 mt-1">Born at: ψ-time 11.45Hz</p> | |
| </div> | |
| <span class="px-2 py-1 rounded-full text-xs bg-yellow-900/50 text-yellow-300">⧉ Superposed</span> | |
| </div> | |
| <div class="mt-3 flex space-x-2"> | |
| <span class="px-2 py-1 rounded-full text-xs bg-indigo-900/50 text-indigo-300">Entangled</span> | |
| <span class="px-2 py-1 rounded-full text-xs bg-pink-900/50 text-pink-300">ψ↭Q Linked</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Entanglements Panel --> | |
| <div class="bg-gray-900/50 rounded-xl border border-gray-800 overflow-hidden"> | |
| <div class="p-4 bg-gradient-to-r from-gray-800 to-gray-900 border-b border-gray-800"> | |
| <h2 class="font-semibold text-purple-300"> | |
| <i class="fas fa-link mr-2"></i> Entanglements | |
| </h2> | |
| </div> | |
| <div class="p-4 space-y-3"> | |
| <div class="entanglement-line pb-2"> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-sm text-gray-300">UNV-a1b2 ↔ UNV-x</span> | |
| <span class="text-xs text-gray-500">ψ-strength: 0.87</span> | |
| </div> | |
| </div> | |
| <div class="entanglement-line pb-2"> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-sm text-gray-300">UNV-c3e4 ↔ ψ↭Q</span> | |
| <span class="text-xs text-gray-500">ψ-strength: 1.24</span> | |
| </div> | |
| </div> | |
| <button class="w-full mt-3 px-3 py-2 rounded-lg bg-indigo-900/50 text-indigo-200 hover:bg-indigo-800/70 transition-colors text-sm flex items-center justify-center"> | |
| <i class="fas fa-plus mr-2"></i> Create Entanglement | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Snapshot Panel --> | |
| <div class="bg-gray-900/50 rounded-xl border border-gray-800 overflow-hidden"> | |
| <div class="p-4 bg-gradient-to-r from-gray-800 to-gray-900 border-b border-gray-800"> | |
| <h2 class="font-semibold text-purple-300"> | |
| <i class="fas fa-camera mr-2"></i> Snapshot | |
| </h2> | |
| </div> | |
| <div class="p-4 space-y-3"> | |
| <button class="w-full px-3 py-2 rounded-lg bg-purple-900/50 text-purple-200 hover:bg-purple-800/70 transition-colors flex items-center justify-center"> | |
| <i class="fas fa-camera-retro mr-2"></i> Capture Now | |
| </button> | |
| <button class="w-full px-3 py-2 rounded-lg bg-gray-800/50 text-gray-200 hover:bg-gray-700/70 transition-colors text-sm flex items-center justify-center"> | |
| <i class="fas fa-images mr-2"></i> View Snapshots | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Middle Column --> | |
| <div class="space-y-4"> | |
| <!-- Akashic Memory Panel --> | |
| <div class="bg-gray-900/50 rounded-xl border border-gray-800 overflow-hidden h-full"> | |
| <div class="p-4 bg-gradient-to-r from-gray-800 to-gray-900 border-b border-gray-800"> | |
| <h2 class="font-semibold text-purple-300"> | |
| <i class="fas fa-scroll mr-2"></i> Akashic Memory | |
| </h2> | |
| </div> | |
| <div class="p-4 h-full"> | |
| <div class="akashic-text mb-4 text-lg italic"> | |
| > ازل در آینهی حال... | |
| </div> | |
| <div class="akashic-text mb-4 text-lg"> | |
| > ψ: متغیر درهمتنیده | |
| </div> | |
| <div class="akashic-text mb-4 text-sm"> | |
| > retrocausal merge@τ₁ | |
| </div> | |
| <div class="akashic-text mb-4 text-sm"> | |
| > quantum decoherence threshold: 0.42ψ | |
| </div> | |
| <div class="akashic-text text-xs"> | |
| > initializing fractal recursion... | |
| </div> | |
| <div class="mt-6"> | |
| <div class="relative"> | |
| <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none text-gray-500"> | |
| <i class="fas fa-terminal"></i> | |
| </div> | |
| <input type="text" class="terminal-input w-full pl-10 pr-3 py-2 bg-gray-800/50 border border-gray-700 rounded-lg focus:outline-none focus:border-purple-500 text-gray-300" placeholder="Write to Akashic Records..."> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Column --> | |
| <div class="space-y-4"> | |
| <!-- ψ Log Panel --> | |
| <div class="bg-gray-900/50 rounded-xl border border-gray-800 overflow-hidden"> | |
| <div class="p-4 bg-gradient-to-r from-gray-800 to-gray-900 border-b border-gray-800"> | |
| <h2 class="font-semibold text-purple-300"> | |
| <i class="fas fa-wave-square mr-2"></i> ψ Log | |
| </h2> | |
| </div> | |
| <div class="p-4 space-y-3 max-h-60 overflow-y-auto"> | |
| <div class="flex items-start"> | |
| <div class="px-2 py-1 rounded-full text-xs bg-green-900/50 text-green-300 mr-2 mt-1">✓</div> | |
| <div class="text-sm text-gray-300"> | |
| Universe UNV-a1b2 stabilized at ψ-time 7.83Hz | |
| </div> | |
| </div> | |
| <div class="flex items-start psi-log-entry"> | |
| <div class="px-2 py-1 rounded-full text-xs bg-purple-900/50 text-purple-300 mr-2 mt-1">🌀</div> | |
| <div class="text-sm text-gray-300"> | |
| Quantum entanglement detected between UNV-c3e4 ↔ ψ↭Q | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="px-2 py-1 rounded-full text-xs bg-blue-900/50 text-blue-300 mr-2 mt-1">i</div> | |
| <div class="text-sm text-gray-300"> | |
| Akashic memory fragment loaded: "ازل در آینهی حال..." | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="px-2 py-1 rounded-full text-xs bg-yellow-900/50 text-yellow-300 mr-2 mt-1">⚠</div> | |
| <div class="text-sm text-gray-300"> | |
| Decoherence warning in branch Δ2 of UNV-a1b2 | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Timeline Tree Panel --> | |
| <div class="bg-gray-900/50 rounded-xl border border-gray-800 overflow-hidden"> | |
| <div class="p-4 bg-gradient-to-r from-gray-800 to-gray-900 border-b border-gray-800"> | |
| <h2 class="font-semibold text-purple-300"> | |
| <i class="fas fa-code-branch mr-2"></i> Timeline Tree | |
| </h2> | |
| </div> | |
| <div class="p-4"> | |
| <div class="text-sm font-mono text-gray-300 space-y-1"> | |
| <div>UNV-a1b2</div> | |
| <div class="ml-4">├─ branch[Δ1] <span class="text-xs text-green-400">(stable)</span></div> | |
| <div class="ml-4">└─ branch[Δ2] <span class="text-xs text-yellow-400">(decohering)</span></div> | |
| <div class="mt-2">UNV-c3e4</div> | |
| <div class="ml-4">└─ branch[ψQ] <span class="text-xs text-purple-400">(superposed)</span></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Quantum Swap Panel --> | |
| <div class="quantum-panel rounded-xl border border-cyan-900/50 overflow-hidden"> | |
| <div class="p-4 bg-gradient-to-r from-cyan-900/30 to-cyan-900/10 border-b border-cyan-900/50"> | |
| <h2 class="font-semibold text-cyan-300"> | |
| <i class="fas fa-exchange-alt mr-2"></i> Quantum Swap | |
| </h2> | |
| </div> | |
| <div class="p-4 space-y-4"> | |
| <div class="flex items-center justify-between"> | |
| <select class="bg-gray-800/50 border border-gray-700 text-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:border-cyan-500 w-5/12"> | |
| <option>UNV-a1b2.token</option> | |
| <option>UNV-c3e4.state</option> | |
| <option>ψ↭Q.link</option> | |
| </select> | |
| <div class="text-cyan-300 px-2"> | |
| <i class="fas fa-arrows-alt-h"></i> | |
| </div> | |
| <select class="bg-gray-800/50 border border-gray-700 text-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:border-cyan-500 w-5/12"> | |
| <option>UNV-b3.psi</option> | |
| <option>UNV-x7.state</option> | |
| <option>ψ↭Y.link</option> | |
| </select> | |
| </div> | |
| <button class="w-full px-3 py-2 rounded-lg bg-cyan-900/50 text-cyan-200 hover:bg-cyan-800/70 transition-colors flex items-center justify-center font-semibold"> | |
| <i class="fas fa-lock mr-2"></i> Execute Swap | |
| </button> | |
| </div> | |
| </div> | |
| <!-- DTN Panel --> | |
| <div class="bg-gray-900/50 rounded-xl border border-gray-800 overflow-hidden"> | |
| <div class="p-4 bg-gradient-to-r from-gray-800 to-gray-900 border-b border-gray-800 flex justify-between items-center"> | |
| <h2 class="font-semibold text-purple-300"> | |
| <i class="fas fa-satellite-dish mr-2"></i> DTN | |
| </h2> | |
| <div class="flex items-center space-x-2"> | |
| <span class="text-xs text-green-400">Signal</span> | |
| <div class="w-2 h-2 rounded-full bg-green-400"></div> | |
| </div> | |
| </div> | |
| <div class="p-4 flex justify-between items-center"> | |
| <div class="text-sm text-gray-400"> | |
| Listening on ψ-bandwidth: 11.3GHz | |
| </div> | |
| <button class="px-3 py-1 rounded-full bg-purple-900/50 text-purple-200 hover:bg-purple-800/70 text-xs transition-colors"> | |
| <i class="fas fa-power-off mr-1"></i> Toggle | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Sudo Panel --> | |
| <div class="bg-gray-900/50 rounded-xl border border-red-900/50 overflow-hidden"> | |
| <div class="p-4 bg-gradient-to-r from-red-900/30 to-red-900/10 border-b border-red-900/50"> | |
| <h2 class="font-semibold text-red-300"> | |
| <i class="fas fa-shield-alt mr-2"></i> sudo | |
| </h2> | |
| </div> | |
| <div class="p-4"> | |
| <div class="relative"> | |
| <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none text-red-500"> | |
| <i class="fas fa-terminal"></i> | |
| </div> | |
| <input type="text" class="terminal-input w-full pl-10 pr-3 py-2 bg-gray-800/50 border border-gray-700 rounded-lg focus:outline-none focus:border-red-500 text-gray-300" placeholder="Enter ψ-kernel command..."> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Spawn Universe Modal --> | |
| <div id="spawnUniverseModal" class="fixed inset-0 bg-black/70 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-gray-900 border border-purple-900/50 rounded-xl w-full max-w-md mx-4"> | |
| <div class="p-4 bg-gradient-to-r from-purple-900/30 to-purple-900/10 border-b border-purple-900/50 rounded-t-xl"> | |
| <h3 class="font-semibold text-lg text-purple-300"> | |
| <i class="fas fa-plus mr-2"></i> Spawn New Universe | |
| </h3> | |
| </div> | |
| <div class="p-6 space-y-4"> | |
| <div> | |
| <label class="block text-sm text-gray-400 mb-1">CMB Seed</label> | |
| <input type="text" class="w-full px-3 py-2 bg-gray-800/50 border border-gray-700 rounded-lg focus:outline-none focus:border-purple-500 text-gray-300" placeholder="Enter cosmic microwave seed..."> | |
| </div> | |
| <div> | |
| <label class="block text-sm text-gray-400 mb-1">Entropy Seed</label> | |
| <input type="text" class="w-full px-3 py-2 bg-gray-800/50 border border-gray-700 rounded-lg focus:outline-none focus:border-purple-500 text-gray-300" placeholder="Enter quantum entropy seed..."> | |
| </div> | |
| <div class="pt-2 flex space-x-3"> | |
| <button id="cancelSpawnBtn" class="flex-1 px-4 py-2 bg-gray-800/50 hover:bg-gray-700/70 rounded-lg text-gray-300 transition-colors"> | |
| Cancel | |
| </button> | |
| <button class="flex-1 px-4 py-2 bg-purple-900/50 hover:bg-purple-800/70 rounded-lg text-purple-200 font-semibold transition-colors flex items-center justify-center"> | |
| <i class="fas fa-magic mr-2"></i> Create | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Toggle modal | |
| document.getElementById('spawnUniverseBtn').addEventListener('click', function() { | |
| document.getElementById('spawnUniverseModal').classList.remove('hidden'); | |
| }); | |
| document.getElementById('cancelSpawnBtn').addEventListener('click', function() { | |
| document.getElementById('spawnUniverseModal').classList.add('hidden'); | |
| }); | |
| // Close modal when clicking outside | |
| document.getElementById('spawnUniverseModal').addEventListener('click', function(e) { | |
| if (e.target === this) { | |
| this.classList.add('hidden'); | |
| } | |
| }); | |
| // Add some interactive effects | |
| const universeCards = document.querySelectorAll('.universe-card'); | |
| universeCards.forEach(card => { | |
| card.addEventListener('click', function() { | |
| // Remove active class from all cards | |
| universeCards.forEach(c => c.classList.remove('ring-2', 'ring-purple-500')); | |
| // Add to clicked card | |
| this.classList.add('ring-2', 'ring-purple-500'); | |
| }); | |
| }); | |
| // Simulate ψ-log updates | |
| setInterval(() => { | |
| const logEntries = [ | |
| { icon: '🌀', color: 'purple', text: 'ψ-wave oscillation detected at 42.0Hz' }, | |
| { icon: '✓', color: 'green', text: 'Timeline branch Δ2 stabilized' }, | |
| { icon: '⚠', color: 'yellow', text: 'Entanglement strength fluctuation detected' }, | |
| { icon: 'i', color: 'blue', text: 'Akashic memory fragment decrypted' } | |
| ]; | |
| const randomEntry = logEntries[Math.floor(Math.random() * logEntries.length)]; | |
| const logContainer = document.querySelector('.psi-log-entry').parentElement; | |
| const newEntry = document.createElement('div'); | |
| newEntry.className = 'flex items-start psi-log-entry'; | |
| newEntry.innerHTML = ` | |
| <div class="px-2 py-1 rounded-full text-xs bg-${randomEntry.color}-900/50 text-${randomEntry.color}-300 mr-2 mt-1">${randomEntry.icon}</div> | |
| <div class="text-sm text-gray-300">${randomEntry.text}</div> | |
| `; | |
| logContainer.prepend(newEntry); | |
| // Remove oldest entry if more than 10 | |
| if (logContainer.children.length > 10) { | |
| logContainer.removeChild(logContainer.lastChild); | |
| } | |
| }, 5000); | |
| </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=MrAlanmathisenturing/shell" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |