Spaces:

TheGreatUnknown
/

The_Lattice

Running

App Files Files Community

TheGreatUnknown commited on Jul 8, 2025

Commit

699ecc7

verified ·

1 Parent(s): 0472045

Update index.html

Browse files

Files changed (1) hide show

index.html +830 -18

index.html CHANGED Viewed

@@ -1,19 +1,831 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<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>