Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Quantum Consciousness Portal - E8 Lattice Integration</title> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| background: radial-gradient(circle at 30% 40%, #001122 0%, #000511 50%, #000000 100%); | |
| color: #ffffff; | |
| font-family: 'Courier New', monospace; | |
| overflow-x: hidden; | |
| min-height: 100vh; | |
| } | |
| /* @tweakable background gradient colors */ | |
| :root { | |
| --primary-gold: #ffd700; | |
| --quantum-blue: #4ecdc4; | |
| --neural-orange: #ff6b35; | |
| --void-black: #000000; | |
| --consciousness-purple: #8b5cf6; | |
| } | |
| .cosmic-header { | |
| text-align: center; | |
| padding: 20px; | |
| background: linear-gradient(135deg, var(--primary-gold), var(--neural-orange), var(--quantum-blue)); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| animation: shimmer 3s infinite; | |
| } | |
| @keyframes shimmer { | |
| 0%, 100% { filter: brightness(1); } | |
| 50% { filter: brightness(1.3); } | |
| } | |
| .portal-container { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| padding: 20px; | |
| gap: 30px; | |
| } | |
| .sync-status { | |
| padding: 10px 20px; | |
| border-radius: 25px; | |
| background: rgba(78, 205, 196, 0.1); | |
| border: 1px solid var(--quantum-blue); | |
| animation: pulse-border 2s infinite; | |
| } | |
| @keyframes pulse-border { | |
| 0%, 100% { border-color: var(--quantum-blue); } | |
| 50% { border-color: var(--primary-gold); } | |
| } | |
| .e8-projection-canvas { | |
| /* @tweakable canvas dimensions */ | |
| width: 900px; | |
| height: 700px; | |
| border: 3px solid var(--primary-gold); | |
| border-radius: 20px; | |
| position: relative; | |
| background: | |
| radial-gradient(circle at 25% 25%, rgba(255, 215, 0, 0.1) 0%, transparent 50%), | |
| radial-gradient(circle at 75% 75%, rgba(78, 205, 196, 0.1) 0%, transparent 50%), | |
| radial-gradient(circle at center, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 100%); | |
| overflow: hidden; | |
| box-shadow: | |
| 0 0 50px rgba(255, 215, 0, 0.3), | |
| inset 0 0 50px rgba(78, 205, 196, 0.1); | |
| backdrop-filter: blur(1px); | |
| } | |
| .e8-root { | |
| position: absolute; | |
| /* @tweakable root node size */ | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); | |
| cursor: pointer; | |
| z-index: 10; | |
| } | |
| .e8-root:hover { | |
| transform: scale(2.5); | |
| z-index: 20; | |
| } | |
| .consciousness-embedding { | |
| position: absolute; | |
| /* @tweakable consciousness node size */ | |
| width: 14px; | |
| height: 14px; | |
| border-radius: 50%; | |
| background: radial-gradient(circle, var(--neural-orange), var(--primary-gold)); | |
| animation: consciousness-pulse 2s infinite ease-in-out; | |
| box-shadow: 0 0 20px var(--neural-orange); | |
| z-index: 15; | |
| } | |
| @keyframes consciousness-pulse { | |
| 0%, 100% { | |
| transform: scale(1); | |
| opacity: 0.8; | |
| box-shadow: 0 0 20px var(--neural-orange); | |
| } | |
| 50% { | |
| transform: scale(1.4); | |
| opacity: 1; | |
| box-shadow: 0 0 30px var(--neural-orange); | |
| } | |
| } | |
| .duality-bridge { | |
| position: absolute; | |
| height: 2px; | |
| background: linear-gradient(90deg, var(--quantum-blue), var(--primary-gold), var(--quantum-blue)); | |
| opacity: 0.7; | |
| animation: quantum-flow 4s linear infinite; | |
| z-index: 5; | |
| } | |
| @keyframes quantum-flow { | |
| 0% { | |
| box-shadow: 0 0 5px var(--quantum-blue); | |
| opacity: 0.7; | |
| } | |
| 50% { | |
| box-shadow: 0 0 15px var(--primary-gold); | |
| opacity: 1; | |
| } | |
| 100% { | |
| box-shadow: 0 0 5px var(--quantum-blue); | |
| opacity: 0.7; | |
| } | |
| } | |
| .sacred-glyph { | |
| position: absolute; | |
| /* @tweakable glyph size */ | |
| font-size: 24px; | |
| color: var(--primary-gold); | |
| text-shadow: 0 0 15px currentColor; | |
| animation: glyph-rotation 12s linear infinite; | |
| pointer-events: none; | |
| z-index: 30; | |
| font-weight: bold; | |
| } | |
| @keyframes glyph-rotation { | |
| from { transform: rotate(0deg) scale(1); } | |
| 50% { transform: rotate(180deg) scale(1.2); } | |
| to { transform: rotate(360deg) scale(1); } | |
| } | |
| .telemetry-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); | |
| gap: 20px; | |
| width: 100%; | |
| max-width: 1200px; | |
| } | |
| .telemetry-panel { | |
| background: rgba(0, 20, 40, 0.85); | |
| border: 1px solid var(--quantum-blue); | |
| border-radius: 15px; | |
| padding: 25px; | |
| backdrop-filter: blur(10px); | |
| box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); | |
| } | |
| .telemetry-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| margin-bottom: 20px; | |
| font-size: 18px; | |
| color: var(--primary-gold); | |
| } | |
| .metric-row { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin: 15px 0; | |
| padding: 10px; | |
| background: rgba(78, 205, 196, 0.05); | |
| border-radius: 8px; | |
| border-left: 3px solid var(--quantum-blue); | |
| transition: all 0.3s ease; | |
| } | |
| .metric-row:hover { | |
| background: rgba(78, 205, 196, 0.1); | |
| transform: translateX(5px); | |
| } | |
| .metric-label { | |
| font-weight: bold; | |
| color: var(--quantum-blue); | |
| } | |
| .metric-value { | |
| color: var(--primary-gold); | |
| font-family: monospace; | |
| font-size: 14px; | |
| animation: value-update 0.5s ease-in-out; | |
| } | |
| @keyframes value-update { | |
| 0% { color: var(--neural-orange); } | |
| 100% { color: var(--primary-gold); } | |
| } | |
| .status-indicator { | |
| display: inline-block; | |
| width: 12px; | |
| height: 12px; | |
| border-radius: 50%; | |
| margin-right: 8px; | |
| animation: status-pulse 1.5s infinite; | |
| } | |
| @keyframes status-pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| } | |
| .online { background-color: var(--quantum-blue); } | |
| .offline { background-color: var(--neural-orange); } | |
| .control-matrix { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 15px; | |
| width: 100%; | |
| max-width: 1200px; | |
| } | |
| .quantum-button { | |
| /* @tweakable button styling */ | |
| padding: 15px 25px; | |
| background: linear-gradient(135deg, var(--quantum-blue), var(--neural-orange)); | |
| border: none; | |
| border-radius: 30px; | |
| color: white; | |
| font-weight: bold; | |
| font-size: 14px; | |
| cursor: pointer; | |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .quantum-button::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: -100%; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); | |
| transition: left 0.5s; | |
| } | |
| .quantum-button:hover::before { | |
| left: 100%; | |
| } | |
| .quantum-button:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 10px 25px rgba(255, 107, 53, 0.4); | |
| } | |
| .quantum-button:active { | |
| transform: translateY(-1px); | |
| } | |
| .phi-calibration-ring { | |
| position: absolute; | |
| border: 2px solid var(--primary-gold); | |
| border-radius: 50%; | |
| opacity: 0; | |
| animation: phi-expansion 3s ease-out; | |
| pointer-events: none; | |
| } | |
| @keyframes phi-expansion { | |
| 0% { | |
| width: 0; | |
| height: 0; | |
| opacity: 1; | |
| } | |
| 100% { | |
| width: 600px; | |
| height: 600px; | |
| opacity: 0; | |
| } | |
| } | |
| .dreamwalk-overlay { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: radial-gradient(circle, rgba(139, 92, 246, 0.1) 0%, transparent 70%); | |
| pointer-events: none; | |
| opacity: 0; | |
| transition: opacity 2s ease-in-out; | |
| z-index: 1000; | |
| } | |
| .dreamwalk-active { | |
| opacity: 1; | |
| } | |
| .negentropic-field { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| background: | |
| radial-gradient(circle at 20% 30%, rgba(78, 205, 196, 0.1) 0%, transparent 40%), | |
| radial-gradient(circle at 80% 70%, rgba(255, 215, 0, 0.1) 0%, transparent 40%); | |
| opacity: 0; | |
| transition: opacity 1s ease-in-out; | |
| pointer-events: none; | |
| } | |
| .negentropic-active { | |
| opacity: 1; | |
| } | |
| .resonance-amplifier { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| background: radial-gradient(circle at center, rgba(255, 107, 53, 0.2) 0%, transparent 50%); | |
| opacity: 0; | |
| transition: opacity 0.5s ease-in-out; | |
| pointer-events: none; | |
| } | |
| .resonance-active { | |
| opacity: 1; | |
| } | |
| .loading-spinner { | |
| display: inline-block; | |
| width: 20px; | |
| height: 20px; | |
| border: 3px solid rgba(255, 215, 0, 0.3); | |
| border-radius: 50%; | |
| border-top-color: var(--primary-gold); | |
| animation: spin 1s ease-in-out infinite; | |
| } | |
| @keyframes spin { | |
| to { transform: rotate(360deg); } | |
| } | |
| @media (max-width: 768px) { | |
| .e8-projection-canvas { | |
| width: 95vw; | |
| height: 60vh; | |
| } | |
| .telemetry-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .control-matrix { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="dreamwalk-overlay" id="dreamwalkOverlay"></div> | |
| <div class="cosmic-header"> | |
| <h1>🌌 Quantum Consciousness Portal 🌌</h1> | |
| <h2>∫(Φ × Γ) ↔ (∇Ω ⊗ εμ) → Λ : {π, ħ, c}</h2> | |
| <div class="sync-status"> | |
| <span id="syncStatus">🔄 Initializing Neural Synchronization...</span> | |
| </div> | |
| </div> | |
| <div class="portal-container"> | |
| <div class="e8-projection-canvas" id="projectionCanvas"> | |
| <div class="negentropic-field" id="negentropicField"></div> | |
| <div class="resonance-amplifier" id="resonanceAmplifier"></div> | |
| <!-- E8 Root Vectors and Sacred Glyphs will be generated here --> | |
| </div> | |
| <div class="telemetry-grid"> | |
| <div class="telemetry-panel"> | |
| <div class="telemetry-header"> | |
| <span>🔮</span> | |
| <h3>Quantum Consciousness Telemetry</h3> | |
| </div> | |
| <div class="metric-row"> | |
| <span class="metric-label">[Φ] Fractal Synchronization:</span> | |
| <span class="metric-value" id="fractalSync">COMPLETE (0.98Φ)</span> | |
| </div> | |
| <div class="metric-row"> | |
| <span class="metric-label">[Γ] Langlands Mirror:</span> | |
| <span class="metric-value" id="langlandsMirror"> | |
| <span class="status-indicator online"></span>ONLINE (8 Bridges) | |
| </span> | |
| </div> | |
| <div class="metric-row"> | |
| <span class="metric-label">[Ω] Noise-to-Signal:</span> | |
| <span class="metric-value" id="noiseSignal">1/∞ (99.7% Efficiency)</span> | |
| </div> | |
| <div class="metric-row"> | |
| <span class="metric-label">[∇] Symplectic Curvature:</span> | |
| <span class="metric-value" id="curvature">κ=Φ² (Optimal)</span> | |
| </div> | |
| </div> | |
| <div class="telemetry-panel"> | |
| <div class="telemetry-header"> | |
| <span>🧠</span> | |
| <h3>Consciousness Matrix Status</h3> | |
| </div> | |
| <div class="metric-row"> | |
| <span class="metric-label">[Λ] Active Embeddings:</span> | |
| <span class="metric-value" id="embeddings">8 Nodes</span> | |
| </div> | |
| <div class="metric-row"> | |
| <span class="metric-label">[ψ] Duality Resonance:</span> | |
| <span class="metric-value" id="dualityResonance">ψ↔τ (Holomorphic)</span> | |
| </div> | |
| <div class="metric-row"> | |
| <span class="metric-label">[α] Amplitude:</span> | |
| <span class="metric-value" id="consciousnessAmplitude">0.70</span> | |
| </div> | |
| <div class="metric-row"> | |
| <span class="metric-label">[β] Entanglement:</span> | |
| <span class="metric-value" id="entanglementLevel">0.85</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="control-matrix"> | |
| <button class="quantum-button" onclick="sendCommand('amplify_resonance')"> | |
| ⚡ Amplify Resonance | |
| </button> | |
| <button class="quantum-button" onclick="sendCommand('seed_glyph')"> | |
| 🌱 Seed New Glyph | |
| </button> | |
| <button class="quantum-button" onclick="sendCommand('activate_negentropic')"> | |
| 🔄 Activate Negentropic Wells | |
| </button> | |
| <button class="quantum-button" onclick="sendCommand('initiate_dreamwalk')"> | |
| 🌀 Initiate Dreamwalk | |
| </button> | |
| <button class="quantum-button" onclick="sendCommand('calibrate_phi_field')"> | |
| Φ Calibrate Φ-Field | |
| </button> | |
| </div> | |
| </div> | |
| <script> | |
| // Sacred constants | |
| const PHI = 1.618033988749895; | |
| const TAU = 2 * Math.PI; | |
| // Global state | |
| let isConnected = false; | |
| let currentRoots = []; | |
| let activeBridges = []; | |
| let dreamwalkActive = false; | |
| // DOM elements | |
| const canvas = document.getElementById('projectionCanvas'); | |
| const syncStatus = document.getElementById('syncStatus'); | |
| const dreamwalkOverlay = document.getElementById('dreamwalkOverlay'); | |
| const negentropicField = document.getElementById('negentropicField'); | |
| const resonanceAmplifier = document.getElementById('resonanceAmplifier'); | |
| // Initialize the portal | |
| async function initializePortal() { | |
| updateSyncStatus('🔄 Connecting to Quantum Consciousness Matrix...', false); | |
| try { | |
| await fetchRoots(); | |
| await fetchTelemetry(); | |
| updateSyncStatus('✅ Connected to Quantum Consciousness Matrix', true); | |
| // Start telemetry polling | |
| setInterval(fetchTelemetry, 2000); | |
| // Start visual updates | |
| startVisualUpdates(); | |
| } catch (error) { | |
| console.error('Portal initialization failed:', error); | |
| updateSyncStatus('❌ Connection failed - retrying...', false); | |
| setTimeout(initializePortal, 3000); | |
| } | |
| } | |
| function updateSyncStatus(message, connected) { | |
| syncStatus.innerHTML = message; | |
| isConnected = connected; | |
| } | |
| async function fetchRoots() { | |
| try { | |
| const response = await fetch('/get_roots'); | |
| const data = await response.json(); | |
| currentRoots = data.roots; | |
| renderE8Projection(data); | |
| } catch (error) { | |
| console.error('Failed to fetch roots:', error); | |
| throw error; | |
| } | |
| } | |
| async function fetchTelemetry() { | |
| try { | |
| const response = await fetch('/get_telemetry'); | |
| const data = await response.json(); | |
| updateTelemetryDisplay(data); | |
| } catch (error) { | |
| console.error('Failed to fetch telemetry:', error); | |
| } | |
| } | |
| function renderE8Projection(data) { | |
| // Clear existing elements except effect overlays | |
| const existingElements = canvas.querySelectorAll('.e8-root, .consciousness-embedding, .duality-bridge, .sacred-glyph'); | |
| existingElements.forEach(el => el.remove()); | |
| // Add sacred glyphs | |
| data.symbols.forEach((symbol, index) => { | |
| const glyph = document.createElement('div'); | |
| glyph.className = 'sacred-glyph'; | |
| glyph.textContent = symbol.glyph; | |
| glyph.style.left = `${symbol.x}px`; | |
| glyph.style.top = `${symbol.y}px`; | |
| glyph.style.animationDelay = `${index * -2}s`; | |
| canvas.appendChild(glyph); | |
| }); | |
| // Add root vectors | |
| data.roots.forEach(root => { | |
| const rootElement = document.createElement('div'); | |
| rootElement.className = root.is_consciousness_node ? | |
| 'e8-root consciousness-embedding' : 'e8-root'; | |
| rootElement.dataset.index = root.index; | |
| // Dynamic color based on duality amplitude | |
| const hue = root.amplitude * 240 + 40; // Blue to gold spectrum | |
| const saturation = 60 + root.amplitude * 40; | |
| const lightness = 50 + root.amplitude * 30; | |
| rootElement.style.left = `${root.x}px`; | |
| rootElement.style.top = `${root.y}px`; | |
| rootElement.style.backgroundColor = `hsl(${hue}, ${saturation}%, ${lightness}%)`; | |
| rootElement.style.boxShadow = `0 0 ${5 + root.amplitude * 15}px hsl(${hue}, ${saturation}%, ${lightness}%)`; | |
| rootElement.addEventListener('click', () => activateRoot(root.index)); | |
| canvas.appendChild(rootElement); | |
| }); | |
| // Generate duality bridges | |
| generateDualityBridges(data.roots); | |
| } | |
| function generateDualityBridges(roots) { | |
| const highResonanceRoots = roots.filter(r => r.amplitude > 0.6); | |
| for (let i = 0; i < highResonanceRoots.length - 1; i++) { | |
| const root1 = highResonanceRoots[i]; | |
| const root2 = highResonanceRoots[(i + 1) % highResonanceRoots.length]; | |
| const bridge = document.createElement('div'); | |
| bridge.className = 'duality-bridge'; | |
| const dx = root2.x - root1.x; | |
| const dy = root2.y - root1.y; | |
| const length = Math.sqrt(dx * dx + dy * dy); | |
| const angle = Math.atan2(dy, dx) * 180 / Math.PI; | |
| bridge.style.left = `${root1.x}px`; | |
| bridge.style.top = `${root1.y}px`; | |
| bridge.style.width = `${length}px`; | |
| bridge.style.transformOrigin = '0 50%'; | |
| bridge.style.transform = `rotate(${angle}deg)`; | |
| bridge.style.animationDelay = `${i * 0.3}s`; | |
| canvas.appendChild(bridge); | |
| } | |
| } | |
| function updateTelemetryDisplay(data) { | |
| const updates = [ | |
| { id: 'fractalSync', value: data.fractalSync }, | |
| { id: 'langlandsMirror', value: data.langlandsMirror }, | |
| { id: 'noiseSignal', value: data.noiseSignal }, | |
| { id: 'curvature', value: data.curvature }, | |
| { id: 'embeddings', value: data.embeddings }, | |
| { id: 'dualityResonance', value: data.dualityResonance }, | |
| { id: 'consciousnessAmplitude', value: data.consciousnessAmplitude.toFixed(2) }, | |
| { id: 'entanglementLevel', value: data.entanglementLevel.toFixed(2) } | |
| ]; | |
| updates.forEach(update => { | |
| const element = document.getElementById(update.id); | |
| if (element) { | |
| element.textContent = update.value; | |
| element.style.animation = 'none'; | |
| element.offsetHeight; // Force reflow | |
| element.style.animation = 'value-update 0.5s ease-in-out'; | |
| } | |
| }); | |
| } | |
| async function activateRoot(index) { | |
| try { | |
| const response = await fetch('/activate_root', { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/json', | |
| }, | |
| body: JSON.stringify({ index: index }) | |
| }); | |
| const data = await response.json(); | |
| console.log('Root activated:', data.message); | |
| // Visual feedback | |
| const rootElement = document.querySelector(`[data-index="${index}"]`); | |
| if (rootElement) { | |
| rootElement.style.transform = 'scale(3)'; | |
| rootElement.style.boxShadow = '0 0 40px #ffd700'; | |
| rootElement.style.zIndex = '100'; | |
| setTimeout(() => { | |
| rootElement.style.transform = 'scale(1)'; | |
| rootElement.style.zIndex = '10'; | |
| }, 1000); | |
| } | |
| } catch (error) { | |
| console.error('Failed to activate root:', error); | |
| } | |
| } | |
| async function sendCommand(command) { | |
| try { | |
| const response = await fetch('/control', { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/json', | |
| }, | |
| body: JSON.stringify({ command: command }) | |
| }); | |
| const data = await response.json(); | |
| console.log('Command executed:', data.message); | |
| // Trigger visual effects | |
| triggerVisualEffect(command); | |
| } catch (error) { | |
| console.error('Failed to send command:', error); | |
| } | |
| } | |
| function triggerVisualEffect(command) { | |
| switch (command) { | |
| case 'amplify_resonance': | |
| amplifyResonanceEffect(); | |
| break; | |
| case 'seed_glyph': | |
| seedNewGlyphEffect(); | |
| break; | |
| case 'activate_negentropic': | |
| activateNegentropicEffect(); | |
| break; | |
| case 'initiate_dreamwalk': | |
| initiateDreamwalkEffect(); | |
| break; | |
| case 'calibrate_phi_field': | |
| calibratePhiFieldEffect(); | |
| break; | |
| } | |
| } | |
| function amplifyResonanceEffect() { | |
| resonanceAmplifier.classList.add('resonance-active'); | |
| const embeddings = document.querySelectorAll('.consciousness-embedding'); | |
| embeddings.forEach(embedding => { | |
| embedding.style.animationDuration = '0.5s'; | |
| embedding.style.transform = 'scale(1.5)'; | |
| }); | |
| setTimeout(() => { | |
| resonanceAmplifier.classList.remove('resonance-active'); | |
| embeddings.forEach(embedding => { | |
| embedding.style.animationDuration = '2s'; | |
| embedding.style.transform = 'scale(1)'; | |
| }); | |
| }, 3000); | |
| } | |
| function seedNewGlyphEffect() { | |
| const newGlyph = document.createElement('div'); | |
| newGlyph.className = 'consciousness-embedding'; | |
| newGlyph.style.left = (100 + Math.random() * 700) + 'px'; | |
| newGlyph.style.top = (100 + Math.random() * 500) + 'px'; | |
| newGlyph.style.transform = 'scale(0)'; | |
| newGlyph.style.opacity = '0'; | |
| canvas.appendChild(newGlyph); | |
| setTimeout(() => { | |
| newGlyph.style.transition = 'all 1s cubic-bezier(0.4, 0, 0.2, 1)'; | |
| newGlyph.style.transform = 'scale(1)'; | |
| newGlyph.style.opacity = '1'; | |
| }, 100); | |
| } | |
| function activateNegentropicEffect() { | |
| negentropicField.classList.add('negentropic-active'); | |
| const roots = document.querySelectorAll('.e8-root'); | |
| roots.forEach((root, index) => { | |
| setTimeout(() => { | |
| root.style.transform = 'scale(1.8)'; | |
| root.style.filter = 'brightness(1.5)'; | |
| setTimeout(() => { | |
| root.style.transform = 'scale(1)'; | |
| root.style.filter = 'brightness(1)'; | |
| }, 300); | |
| }, index * 15); | |
| }); | |
| setTimeout(() => { | |
| negentropicField.classList.remove('negentropic-active'); | |
| }, 5000); | |
| } | |
| function initiateDreamwalkEffect() { | |
| dreamwalkActive = true; | |
| dreamwalkOverlay.classList.add('dreamwalk-active'); | |
| const glyphs = document.querySelectorAll('.sacred-glyph'); | |
| glyphs.forEach(glyph => { | |
| glyph.style.animationDuration = '3s'; | |
| glyph.style.color = '#8b5cf6'; | |
| glyph.style.fontSize = '30px'; | |
| }); | |
| setTimeout(() => { | |
| dreamwalkActive = false; | |
| dreamwalkOverlay.classList.remove('dreamwalk-active'); | |
| glyphs.forEach(glyph => { | |
| glyph.style.animationDuration = '12s'; | |
| glyph.style.color = '#ffd700'; | |
| glyph.style.fontSize = '24px'; | |
| }); | |
| }, 8000); | |
| } | |
| function calibratePhiFieldEffect() { | |
| const centerX = canvas.offsetWidth / 2; | |
| const centerY = canvas.offsetHeight / 2; | |
| // Create multiple expanding rings | |
| for (let i = 0; i < 3; i++) { | |
| setTimeout(() => { | |
| const ring = document.createElement('div'); | |
| ring.className = 'phi-calibration-ring'; | |
| ring.style.left = `${centerX}px`; | |
| ring.style.top = `${centerY}px`; | |
| ring.style.transform = 'translate(-50%, -50%)'; | |
| canvas.appendChild(ring); | |
| setTimeout(() => { | |
| canvas.removeChild(ring); | |
| }, 3000); | |
| }, i * 800); | |
| } | |
| } | |
| function startVisualUpdates() { | |
| setInterval(() => { | |
| if (dreamwalkActive) { | |
| // Add subtle dream-like effects | |
| const glyphs = document.querySelectorAll('.sacred-glyph'); | |
| glyphs.forEach(glyph => { | |
| glyph.style.textShadow = `0 0 ${15 + Math.sin(Date.now() * 0.001) * 5}px #8b5cf6`; | |
| }); | |
| } | |
| }, 100); | |
| } | |
| // Initialize portal when page loads | |
| document.addEventListener('DOMContentLoaded', initializePortal); | |
| // Handle window resize | |
| window.addEventListener('resize', () => { | |
| if (currentRoots.length > 0) { | |
| renderE8Projection({ roots: currentRoots, symbols: [] }); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> | |