Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Chrono-Drift Torus – κ-Scaled Time Machine</title> | |
| <link rel="icon" type="image/x-icon" href="http://static.photos/technology/64x64/42"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@4.11.0/dist/tf.min.js"></script> | |
| </head> | |
| <body class="bg-gray-900 text-gray-100 overflow-hidden"> | |
| <div id="torus-container" class="absolute inset-0"></div> | |
| <custom-navbar></custom-navbar> | |
| <!-- PHAROS MODULE --> | |
| <section id="pharos-module" class="fixed bottom-0 left-0 right-0 bg-gray-900/80 backdrop-blur border-t border-indigo-500/30 p-4 z-50"> | |
| <!-- Schumann carrier wave UI --> | |
| <div id="schumann-wave" class="h-0.5 bg-gradient-to-r from-transparent via-indigo-400 to-transparent w-full mb-3 animate-pulse"></div> | |
| <div class="flex items-center justify-between gap-4"> | |
| <!-- κ-coherence meter --> | |
| <div class="flex flex-col gap-1"> | |
| <div class="text-xs text-gray-400">κ-coherence</div> | |
| <div id="kappa-meter" class="w-32 h-2 bg-gray-800 rounded-full overflow-hidden"> | |
| <div id="kappa-fill" class="h-full bg-gradient-to-r from-green-500 to-indigo-500 w-0 transition-all duration-300"></div> | |
| </div> | |
| </div> | |
| <!-- Phonon frequency dial --> | |
| <div class="flex flex-col items-center gap-1"> | |
| <div class="text-xs text-gray-400">phonon THz</div> | |
| <input id="thz-slider" type="range" min="18" max="35" step="0.1" value="32" class="accent-indigo-500"> | |
| <output for="thz-slider" id="thz-label" class="text-xs text-indigo-300">32.0 THz</output> | |
| </div> | |
| <!-- Bone-conduction gesture --> | |
| <button id="scent-gesture" class="px-4 py-2 bg-indigo-600 hover:bg-indigo-500 rounded-lg transition text-sm flex items-center gap-2"> | |
| <i data-feather="smartphone"></i> | |
| <span>Tap to Nose</span> | |
| </button> | |
| <!-- Micro-fluidic status --> | |
| <div id="micro-tank" class="flex flex-col gap-1 text-right"> | |
| <div class="text-xs text-gray-400">MagSafe tank</div> | |
| <div class="text-xs text-green-400">● Earth blend 78%</div> | |
| </div> | |
| </div> | |
| <!-- Hidden WebAudio oscillator (will be attached) --> | |
| <audio id="phonon-osc" preload="none"></audio> | |
| </section> | |
| <!-- TOPOLOGICAL MAP HUD --> | |
| <section id="topological-hud" class="fixed top-4 left-1/2 -translate-x-1/2 pointer-events-none z-40 text-center"> | |
| <div id="timewave-graph" class="inline-block bg-gray-900/70 backdrop-blur border border-indigo-500/30 rounded-xl p-3 shadow-2xl"> | |
| <canvas id="timewave-canvas" width="420" height="160"></canvas> | |
| <div class="text-xs text-indigo-300 mt-2 tracking-widest">N(t) – Timewave Zero</div> | |
| </div> | |
| <div id="eschaton-meter" class="mt-2 h-2 w-64 bg-gray-800 rounded-full overflow-hidden"> | |
| <div id="eschaton-fill" class="h-full bg-gradient-to-r from-green-500 via-yellow-500 to-red-500 w-0 transition-all duration-100"></div> | |
| </div> | |
| <div id="eschaton-label" class="text-xs text-gray-400 mt-1">Distance to Eschaton: <span id="eschaton-value">∞</span></div> | |
| </section> | |
| <main class="fixed top-0 left-0 w-full h-full pointer-events-none"> | |
| <section id="control-hub" class="absolute top-6 left-6 pointer-events-auto bg-gray-800/60 backdrop-blur rounded-2xl p-5 border border-gray-700 shadow-xl max-w-md"> | |
| <h1 class="text-xl font-bold tracking-widest uppercase mb-4 text-indigo-300">κ-Chrono Navigator</h1> | |
| <div class="mb-4"> | |
| <label class="text-xs uppercase tracking-wider text-gray-400">κ–Scale</label> | |
| <input id="kappa-slider" type="range" min="1.0" max="2.0" step="0.01" value="1.273" class="w-full accent-indigo-500"> | |
| <div class="flex justify-between text-xs text-gray-400 mt-1"> | |
| <span>Linear</span> | |
| <span id="kappa-value">1.273</span> | |
| <span>Fractal</span> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="text-xs uppercase tracking-wider text-gray-400">Temporal Target</label> | |
| <div class="relative"> | |
| <input id="year-input" type="number" min="-3000" max="3000" value="1985" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:border-indigo-500 transition"> | |
| <button id="nav-year-btn" class="absolute right-2 top-1/2 -translate-y-1/2 px-3 py-1 bg-indigo-600 hover:bg-indigo-500 rounded-md text-xs transition">Jump</button> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="text-xs uppercase tracking-wider text-gray-400">Voice Command</label> | |
| <div class="flex items-center gap-2"> | |
| <button id="voice-btn" class="flex-1 flex items-center justify-center gap-2 bg-gray-900 border border-gray-700 rounded-lg px-4 py-2 hover:border-indigo-500 transition"> | |
| <i data-feather="mic"></i> | |
| <span id="voice-label">Speak</span> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="text-xs uppercase tracking-wider text-gray-400">Your Memory Anchor</label> | |
| <textarea id="memory-input" rows="2" placeholder="Type a memory to anchor..." class="w-full bg-gray-900 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:border-indigo-500 resize-none"></textarea> | |
| <button id="anchor-btn" class="mt-2 w-full bg-indigo-600 hover:bg-indigo-500 rounded-lg px-4 py-2 transition">Anchor Memory</button> | |
| </div> | |
| <div class="text-xs text-gray-400 flex items-center gap-2"> | |
| <i data-feather="info" class="w-4 h-4"></i> | |
| <span>Scroll wheel to dilate time. Drag torus to rotate.</span> | |
| </div> | |
| </section> | |
| <!-- UV GNOSIS PANEL --> | |
| <section id="uv-gnosis" class="absolute top-1/2 right-6 -translate-y-1/2 pointer-events-auto bg-gray-900/70 backdrop-blur border border-purple-500/40 rounded-2xl p-4 max-w-xs"> | |
| <h2 class="text-sm font-semibold mb-3 tracking-wider text-purple-300">UV Gnosis</h2> | |
| <div id="semantic-qubit" class="text-purple-200 text-xs font-mono break-all leading-relaxed"></div> | |
| <div class="text-xs text-gray-500 mt-2">Semantic Qubit Texture</div> | |
| </section> | |
| <!-- 111 HZ LITHIFICATION --> | |
| <section id="lithification-panel" class="absolute bottom-6 right-6 pointer-events-auto bg-gray-900/70 backdrop-blur border border-orange-500/40 rounded-2xl p-4 max-w-xs"> | |
| <h2 class="text-sm font-semibold mb-3 tracking-wider text-orange-300">Acoustic Lithification</h2> | |
| <div class="flex items-center gap-3"> | |
| <div id="hz-111" class="text-2xl font-mono text-orange-400">111 Hz</div> | |
| <div class="flex-1 h-2 bg-gray-800 rounded-full overflow-hidden"> | |
| <div id="pressure-bar" class="h-full bg-orange-500 w-0 transition-all duration-100"></div> | |
| </div> | |
| </div> | |
| <div id="pressure-label" class="text-xs text-gray-400 mt-2">Density Pressure: <span id="pressure-value">0.0</span></div> | |
| </section> | |
| <section id="quantum-chat" class="absolute bottom-6 left-6 pointer-events-auto bg-gray-800/60 backdrop-blur rounded-2xl p-4 border border-gray-700 w-80"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <h2 class="text-sm font-semibold tracking-wider text-indigo-300">Entangled Chat</h2> | |
| <button id="toggle-entangle" class="text-xs px-3 py-1 rounded-full border border-indigo-500 bg-indigo-600/20 hover:bg-indigo-600/40 transition">Entangle</button> | |
| </div> | |
| <div id="entangled-messages" class="max-h-40 overflow-y-auto space-y-2 mb-3 pr-2"></div> | |
| <div class="flex gap-2"> | |
| <input id="chat-input" type="text" placeholder="Send a message through time..." class="flex-1 bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-indigo-500"> | |
| <button id="chat-send" class="px-3 py-2 bg-indigo-600 hover:bg-indigo-500 rounded-lg transition"><i data-feather="send" class="w-4 h-4"></i></button> | |
| </div> | |
| <div class="mt-3 flex gap-2"> | |
| <button id="hat-man-btn" class="flex-1 px-3 py-2 bg-red-600 hover:bg-red-500 rounded-lg text-xs transition">Invoke Hat-Man</button> | |
| </div> | |
| </section> | |
| <section id="parallax-status" class="absolute top-6 right-6 pointer-events-none text-right"> | |
| <div id="year-label" class="text-4xl font-black text-gray-200">1985</div> | |
| <div id="status" class="text-sm text-gray-400">κ = 1.273 • Chrono-Synced</div> | |
| </section> | |
| </main> | |
| <!-- CONCRESCENCE EVENT --> | |
| <div id="concrescence-veil" class="fixed inset-0 bg-black/0 backdrop-blur-0 hidden place-items-center z-60 pointer-events-auto"> | |
| <div class="text-center"> | |
| <div id="concrescence-core" class="w-96 h-96 rounded-full bg-gradient-to-br from-indigo-500 via-purple-600 to-pink-500 opacity-0 scale-50 blur-2xl"></div> | |
| <div id="concrescence-text" class="mt-8 text-4xl font-black text-white opacity-0">CONCRESCENCE</div> | |
| </div> | |
| </div> | |
| <!-- STATE VECTOR COLLAPSE --> | |
| <div id="collapse-overlay" class="fixed inset-0 bg-white/0 hidden z-70 pointer-events-none"></div> | |
| <!-- REBOOT SEED INPUT --> | |
| <div id="reboot-modal" class="fixed inset-0 bg-black/90 backdrop-blur-xl hidden place-items-center z-80"> | |
| <div class="bg-gray-900 border border-indigo-500 rounded-2xl p-8 max-w-lg text-center shadow-2xl"> | |
| <div class="mx-auto w-20 h-20 rounded-full bg-indigo-500/20 flex items-center justify-center mb-6"> | |
| <i data-feather="refresh-cw" class="text-indigo-400 w-10 h-10"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-4">TIMESCALE HIERARCHY FAILURE</h3> | |
| <p class="text-gray-300 mb-6">You are the κ-scaled loop variable. Anchor the next cosmic iteration:</p> | |
| <input id="reboot-seed" type="text" placeholder="LOVE, JUNG, THE BROKEN GUITAR..." class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 focus:outline-none focus:border-indigo-500 mb-4"> | |
| <button id="reboot-trigger" class="w-full px-6 py-3 bg-indigo-600 hover:bg-indigo-500 rounded-lg transition font-semibold">Seed New Timeline</button> | |
| </div> | |
| </div> | |
| <!-- ORIGINAL PARADOX MODAL --> | |
| <div id="paradox-modal" class="fixed inset-0 bg-black/80 backdrop-blur-md hidden place-items-center z-50"> | |
| <div class="bg-gray-800 border border-red-500 rounded-2xl p-6 max-w-md text-center shadow-2xl"> | |
| <div class="mx-auto w-16 h-16 rounded-full bg-red-500/20 flex items-center justify-center mb-4"><i data-feather="alert-triangle" class="text-red-400 w-8 h-8"></i></div> | |
| <h3 class="text-xl font-bold mb-2">Paradox Firewall Triggered</h3> | |
| <p id="paradox-message" class="text-gray-300 mb-4">Error 418: Temporal Conflict. Your existence is now read-only.</p> | |
| <button id="paradox-close" class="px-6 py-2 bg-red-600 hover:bg-red-500 rounded-lg transition">Understood</button> | |
| </div> | |
| </div> | |
| <script src="components/chrono-nav.js"></script> | |
| <script src="components/hallway-monad.js"></script> | |
| <script src="script.js"></script> | |
| <script>feather.replace();</script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| <hallway-monad></hallway-monad> | |
| </body> | |
| </html> | |