Spaces:
Running
Running
| <html><head><base href="." /> | |
| <style> | |
| *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } | |
| body { | |
| background: #000; | |
| min-height: 100vh; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| font-family: monospace; | |
| color: #0f0; | |
| overflow: hidden; | |
| } | |
| .container { | |
| position: relative; | |
| width: 100vw; | |
| height: 100vh; | |
| background: radial-gradient(circle at center, #000922 0%, #000 100%); | |
| } | |
| .matrix-rain { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| color: #0f0; | |
| font-size: 1.2em; | |
| letter-spacing: 0.1em; | |
| } | |
| .quantum-particles { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: 1; | |
| } | |
| .fractal-overlay { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: 2; | |
| opacity: 0.3; | |
| pointer-events: none; | |
| } | |
| .interface { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 20px; | |
| width: 90%; | |
| max-width: 1200px; | |
| z-index: 100; | |
| } | |
| .panel { | |
| background: rgba(0,0,0,0.8); | |
| border: 1px solid #0f0; | |
| border-radius: 5px; | |
| padding: 1.5em; | |
| color: #0f0; | |
| font-size: 0.9em; | |
| } | |
| .header { | |
| grid-column: 1 / -1; | |
| text-align: center; | |
| padding: 1em; | |
| } | |
| .formula-display { | |
| grid-column: 1 / -1; | |
| text-align: center; | |
| font-size: 1.2em; | |
| margin: 10px 0; | |
| letter-spacing: 0.05em; | |
| padding: 10px; | |
| background: rgba(0,20,0,0.4); | |
| border-radius: 5px; | |
| } | |
| .status-indicator { | |
| display: inline-block; | |
| width: 10px; | |
| height: 10px; | |
| border-radius: 50%; | |
| margin-right: 8px; | |
| animation: pulse 2s infinite; | |
| } | |
| .status-critical { background: #f00; } | |
| .status-warning { background: #ff0; } | |
| .status-nominal { background: #0f0; } | |
| .status-quantum { background: #0ff; animation: quantumPulse 3s infinite; } | |
| .progress-bar { | |
| width: 100%; | |
| height: 20px; | |
| background: rgba(0,255,0,0.1); | |
| border: 1px solid #0f0; | |
| margin: 10px 0; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .progress-fill { | |
| position: absolute; | |
| height: 100%; | |
| background: linear-gradient(90deg, #0f0, #0ff); | |
| width: 0%; | |
| transition: width 0.5s ease; | |
| } | |
| .action-button { | |
| background: transparent; | |
| border: 1px solid #0f0; | |
| color: #0f0; | |
| padding: 0.5em 1em; | |
| margin: 0.5em 0; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .action-button:hover { | |
| background: rgba(0,255,0,0.2); | |
| } | |
| .action-button.quantum { | |
| border-color: #0ff; | |
| color: #0ff; | |
| } | |
| .action-button.quantum:hover { | |
| background: rgba(0,255,255,0.2); | |
| } | |
| @keyframes pulse { | |
| 0% { opacity: 0.5; } | |
| 50% { opacity: 1; } | |
| 100% { opacity: 0.5; } | |
| } | |
| @keyframes quantumPulse { | |
| 0% { opacity: 0.5; box-shadow: 0 0 5px #0ff; } | |
| 50% { opacity: 1; box-shadow: 0 0 15px #0ff; } | |
| 100% { opacity: 0.5; box-shadow: 0 0 5px #0ff; } | |
| } | |
| .sensor-grid { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 10px; | |
| margin-top: 10px; | |
| } | |
| .sensor-reading { | |
| text-align: center; | |
| padding: 5px; | |
| border: 1px solid rgba(0,255,0,0.3); | |
| } | |
| .log-container { | |
| height: 150px; | |
| overflow-y: auto; | |
| margin-top: 10px; | |
| font-size: 0.8em; | |
| } | |
| .log-entry { | |
| margin: 5px 0; | |
| opacity: 0.8; | |
| } | |
| .entanglement-display { | |
| margin-top: 15px; | |
| height: 100px; | |
| position: relative; | |
| border: 1px solid rgba(0,255,255,0.3); | |
| overflow: hidden; | |
| } | |
| .entanglement-particle { | |
| position: absolute; | |
| width: 6px; | |
| height: 6px; | |
| background: #0ff; | |
| border-radius: 50%; | |
| box-shadow: 0 0 8px #0ff; | |
| } | |
| .connection-line { | |
| position: absolute; | |
| height: 1px; | |
| background: linear-gradient(90deg, transparent, #0ff, transparent); | |
| opacity: 0.7; | |
| transform-origin: left center; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="matrix-rain" id="matrix"></div> | |
| <div class="quantum-particles" id="particles"></div> | |
| <svg class="fractal-overlay" id="fractalOverlay" width="100%" height="100%"></svg> | |
| <div class="interface"> | |
| <div class="panel header"> | |
| <h2>QUANTUM-INSPIRED LLML FRAMEWORK</h2> | |
| <p>Fractal Intelligence Calibration and Monitoring System</p> | |
| </div> | |
| <div class="formula-display" id="formulaDisplay"> | |
| Σ(π ε₀) → Σ(φ ∧ ψ) : (ħ ∘ c ⊗ ∞) | |
| </div> | |
| <div class="panel"> | |
| <h3><span class="status-indicator status-quantum"></span>Quantum-Symbolic Mapping</h3> | |
| <div class="sensor-grid"> | |
| <div class="sensor-reading" id="sensor1"> | |
| π-Mapping: 87.3% | |
| </div> | |
| <div class="sensor-reading" id="sensor2"> | |
| φ-Potential: 92.1% | |
| </div> | |
| <div class="sensor-reading" id="sensor3"> | |
| ψ-Resonance: 78.9% | |
| </div> | |
| </div> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" id="calibrationProgress"></div> | |
| </div> | |
| <button class="action-button quantum" onclick="initiateSensorCalibration()">Initiate Symbolic Calibration</button> | |
| <h4 style="margin-top: 15px">Entanglement Dynamics</h4> | |
| <div class="entanglement-display" id="entanglementDisplay"></div> | |
| </div> | |
| <div class="panel"> | |
| <h3><span class="status-indicator status-warning"></span>Recursive Self-Reflection</h3> | |
| <div class="log-container" id="logContainer"> | |
| <div class="log-entry">» Initializing quantum-symbolic mapping...</div> | |
| <div class="log-entry">» Establishing holographic learning patterns...</div> | |
| <div class="log-entry">» Measuring entanglement potential...</div> | |
| </div> | |
| <button class="action-button" onclick="runDiagnostics()">Run Quantum Diagnostics</button> | |
| <button class="action-button quantum" onclick="generateFractal()">Generate Fractal Pattern</button> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| const matrix = document.getElementById('matrix'); | |
| const particles = document.getElementById('particles'); | |
| const fractalOverlay = document.getElementById('fractalOverlay'); | |
| const entanglementDisplay = document.getElementById('entanglementDisplay'); | |
| const formulaDisplay = document.getElementById('formulaDisplay'); | |
| const chars = 'ΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩπφψħε₀∞⊗∘↔∧'; | |
| // Quantum formulas to cycle through | |
| const quantumFormulas = [ | |
| "Σ(π ε₀) → Σ(φ ∧ ψ) : (ħ ∘ c ⊗ ∞)", | |
| "φ ⊗ ψ → Δ : (ε₀ ∩ Ω)", | |
| "(ħ ∘ c) ↔ (φ ∧ π) → Σ(ψ ⊗ ∞)", | |
| "Σ(Φ⊗τ → Δ) : (ε₀∩Ω)" | |
| ]; | |
| function createRain() { | |
| const column = document.createElement('div'); | |
| column.style.position = 'absolute'; | |
| column.style.fontSize = '1.2em'; | |
| column.style.left = Math.random() * 100 + '%'; | |
| column.style.animationDuration = Math.random() * 3 + 2 + 's'; | |
| column.style.opacity = Math.random() + 0.5; | |
| let content = ''; | |
| const length = Math.floor(Math.random() * 20) + 10; | |
| for(let i = 0; i < length; i++) { | |
| content += chars[Math.floor(Math.random() * chars.length)] + '<br>'; | |
| } | |
| column.innerHTML = content; | |
| column.style.animation = `fall ${Math.random() * 10 + 5}s linear infinite`; | |
| matrix.appendChild(column); | |
| setTimeout(() => { | |
| matrix.removeChild(column); | |
| }, 10000); | |
| } | |
| function createQuantumParticle() { | |
| const particle = document.createElement('div'); | |
| particle.className = 'quantum-particle'; | |
| particle.style.position = 'absolute'; | |
| particle.style.width = Math.random() * 4 + 2 + 'px'; | |
| particle.style.height = particle.style.width; | |
| particle.style.backgroundColor = `rgba(0, ${Math.random() * 155 + 100}, ${Math.random() * 155 + 100}, 0.7)`; | |
| particle.style.borderRadius = '50%'; | |
| particle.style.boxShadow = `0 0 ${Math.random() * 8 + 2}px rgba(0, 255, 255, 0.7)`; | |
| particle.style.left = Math.random() * 100 + '%'; | |
| particle.style.top = Math.random() * 100 + '%'; | |
| particle.style.zIndex = 1; | |
| particles.appendChild(particle); | |
| // Animate the particle | |
| const duration = Math.random() * 15000 + 5000; | |
| const targetX = Math.random() * 100; | |
| const targetY = Math.random() * 100; | |
| particle.animate([ | |
| { transform: 'translate(0, 0)', opacity: Math.random() * 0.3 + 0.2 }, | |
| { transform: `translate(${targetX - parseFloat(particle.style.left)}%, ${targetY - parseFloat(particle.style.top)}%)`, opacity: Math.random() * 0.8 + 0.2 } | |
| ], { | |
| duration: duration, | |
| easing: 'cubic-bezier(0.4, 0, 0.2, 1)' | |
| }).onfinish = () => { | |
| particles.removeChild(particle); | |
| }; | |
| } | |
| function drawFractal(x, y, size, depth) { | |
| if (depth <= 0) return; | |
| // Create a circle | |
| const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle"); | |
| circle.setAttribute("cx", x); | |
| circle.setAttribute("cy", y); | |
| circle.setAttribute("r", size); | |
| circle.setAttribute("fill", "none"); | |
| circle.setAttribute("stroke", `rgba(0, ${Math.random() * 155 + 100}, ${Math.random() * 155 + 100}, ${Math.random() * 0.3 + 0.1})`); | |
| circle.setAttribute("stroke-width", "1"); | |
| fractalOverlay.appendChild(circle); | |
| // Recursively draw smaller fractals | |
| const newSize = size * 0.5; | |
| const childCount = Math.min(depth, 3); | |
| for (let i = 0; i < childCount; i++) { | |
| const angle = (i * 2 * Math.PI / childCount) + (depth * Math.PI / 4); | |
| const distance = size * 1.5; | |
| const newX = x + distance * Math.cos(angle); | |
| const newY = y + distance * Math.sin(angle); | |
| // Draw connecting line | |
| const line = document.createElementNS("http://www.w3.org/2000/svg", "line"); | |
| line.setAttribute("x1", x); | |
| line.setAttribute("y1", y); | |
| line.setAttribute("x2", newX); | |
| line.setAttribute("y2", newY); | |
| line.setAttribute("stroke", `rgba(0, ${Math.random() * 155 + 100}, ${Math.random() * 155 + 100}, ${Math.random() * 0.2 + 0.05})`); | |
| line.setAttribute("stroke-width", "0.5"); | |
| fractalOverlay.appendChild(line); | |
| drawFractal(newX, newY, newSize, depth - 1); | |
| } | |
| } | |
| function generateFractal() { | |
| // Clear existing fractal | |
| while (fractalOverlay.firstChild) { | |
| fractalOverlay.removeChild(fractalOverlay.firstChild); | |
| } | |
| const width = fractalOverlay.clientWidth; | |
| const height = fractalOverlay.clientHeight; | |
| // Draw the main fractal | |
| drawFractal(width / 2, height / 2, 50, 4); | |
| // Add to the log | |
| addLogEntry("» Fractal pattern generated based on current quantum state"); | |
| } | |
| function createEntanglementVisualization() { | |
| // Clear previous visualization | |
| while (entanglementDisplay.firstChild) { | |
| entanglementDisplay.removeChild(entanglementDisplay.firstChild); | |
| } | |
| const width = entanglementDisplay.clientWidth; | |
| const height = entanglementDisplay.clientHeight; | |
| // Create particles | |
| const particleCount = 5; | |
| const particles = []; | |
| for (let i = 0; i < particleCount; i++) { | |
| const particle = document.createElement('div'); | |
| particle.className = 'entanglement-particle'; | |
| particle.style.left = Math.random() * (width - 10) + 'px'; | |
| particle.style.top = Math.random() * (height - 10) + 'px'; | |
| entanglementDisplay.appendChild(particle); | |
| particles.push(particle); | |
| // Animate particles | |
| animateEntangledParticle(particle, width, height); | |
| } | |
| // Create connections between particles | |
| for (let i = 0; i < particles.length; i++) { | |
| for (let j = i + 1; j < particles.length; j++) { | |
| const line = document.createElement('div'); | |
| line.className = 'connection-line'; | |
| entanglementDisplay.appendChild(line); | |
| // Update the line positions to connect particles | |
| updateConnectionLine(line, particles[i], particles[j]); | |
| // Set up a timer to update the line | |
| setInterval(() => { | |
| updateConnectionLine(line, particles[i], particles[j]); | |
| }, 50); | |
| } | |
| } | |
| } | |
| function animateEntangledParticle(particle, width, height) { | |
| const moveParticle = () => { | |
| const currentX = parseInt(particle.style.left); | |
| const currentY = parseInt(particle.style.top); | |
| const newX = currentX + (Math.random() * 6 - 3); | |
| const newY = currentY + (Math.random() * 6 - 3); | |
| particle.style.left = Math.max(0, Math.min(width - 10, newX)) + 'px'; | |
| particle.style.top = Math.max(0, Math.min(height - 10, newY)) + 'px'; | |
| setTimeout(moveParticle, Math.random() * 200 + 50); | |
| }; | |
| moveParticle(); | |
| } | |
| function updateConnectionLine(line, particle1, particle2) { | |
| const rect1 = particle1.getBoundingClientRect(); | |
| const rect2 = particle2.getBoundingClientRect(); | |
| const x1 = rect1.left + rect1.width / 2; | |
| const y1 = rect1.top + rect1.height / 2; | |
| const x2 = rect2.left + rect2.width / 2; | |
| const y2 = rect2.top + rect2.height / 2; | |
| const entanglementRect = entanglementDisplay.getBoundingClientRect(); | |
| const relX1 = x1 - entanglementRect.left; | |
| const relY1 = y1 - entanglementRect.top; | |
| const relX2 = x2 - entanglementRect.left; | |
| const relY2 = y2 - entanglementRect.top; | |
| const length = Math.sqrt(Math.pow(relX2 - relX1, 2) + Math.pow(relY2 - relY1, 2)); | |
| const angle = Math.atan2(relY2 - relY1, relX2 - relX1) * 180 / Math.PI; | |
| line.style.width = `${length}px`; | |
| line.style.left = `${relX1}px`; | |
| line.style.top = `${relY1}px`; | |
| line.style.transform = `rotate(${angle}deg)`; | |
| // Make the connection brighter when particles are closer | |
| const opacity = Math.max(0.1, 1 - length / 200); | |
| line.style.opacity = opacity; | |
| } | |
| function cycleFormulas() { | |
| let currentIndex = 0; | |
| setInterval(() => { | |
| currentIndex = (currentIndex + 1) % quantumFormulas.length; | |
| formulaDisplay.innerText = quantumFormulas[currentIndex]; | |
| formulaDisplay.animate([ | |
| { opacity: 0.3 }, | |
| { opacity: 1 } | |
| ], { | |
| duration: 2000, | |
| easing: 'ease-in-out' | |
| }); | |
| }, 10000); | |
| } | |
| const style = document.createElement('style'); | |
| style.textContent = ` | |
| @keyframes fall { | |
| from { transform: translateY(-100%); } | |
| to { transform: translateY(100vh); } | |
| } | |
| `; | |
| document.head.appendChild(style); | |
| function initiateSensorCalibration() { | |
| const progress = document.getElementById('calibrationProgress'); | |
| let percent = 0; | |
| addLogEntry("» Initiating quantum-symbolic calibration sequence..."); | |
| const interval = setInterval(() => { | |
| percent += 1; | |
| progress.style.width = percent + '%'; | |
| if (percent >= 100) { | |
| clearInterval(interval); | |
| updateSensorReadings(); | |
| addLogEntry("» Calibration complete: Symbolic mapping optimized"); | |
| } | |
| }, 50); | |
| } | |
| function updateSensorReadings() { | |
| const readings = ['98.7%', '94.3%', '95.8%']; | |
| const sensorLabels = ['π-Mapping', 'φ-Potential', 'ψ-Resonance']; | |
| ['sensor1', 'sensor2', 'sensor3'].forEach((id, index) => { | |
| document.getElementById(id).innerText = `${sensorLabels[index]}: ${readings[index]}`; | |
| }); | |
| } | |
| function addLogEntry(text) { | |
| const logContainer = document.getElementById('logContainer'); | |
| const entry = document.createElement('div'); | |
| entry.className = 'log-entry'; | |
| entry.textContent = text; | |
| logContainer.appendChild(entry); | |
| logContainer.scrollTop = logContainer.scrollHeight; | |
| } | |
| function runDiagnostics() { | |
| const logContainer = document.getElementById('logContainer'); | |
| const diagnosticSteps = [ | |
| 'Analyzing quantum-symbolic mapping integrity...', | |
| 'Measuring fractal intelligence recursion depth...', | |
| 'Evaluating entanglement dynamics between knowledge nodes...', | |
| 'Testing holographic learning patterns...', | |
| 'Calculating dimensional coupling efficiency...', | |
| 'Verifying self-reflection capacity...' | |
| ]; | |
| let stepIndex = 0; | |
| const interval = setInterval(() => { | |
| if (stepIndex < diagnosticSteps.length) { | |
| addLogEntry('» ' + diagnosticSteps[stepIndex]); | |
| stepIndex++; | |
| } else { | |
| clearInterval(interval); | |
| addLogEntry('» Diagnostics complete: System functioning within quantum parameters'); | |
| } | |
| }, 1000); | |
| } | |
| document.addEventListener('DOMContentLoaded', () => { | |
| setInterval(createRain, 100); | |
| setInterval(createQuantumParticle, 500); | |
| updateSensorReadings(); | |
| createEntanglementVisualization(); | |
| cycleFormulas(); | |
| // Generate initial fractal | |
| setTimeout(generateFractal, 1000); | |
| }); | |
| </script> | |
| </body></html> |