Download index.html from lonestar108/src-algorithm-visualizer: direct link, hf CLI and curl.
- Browser
- Download file 29.7 kB
-
https://huggingface.co/spaces/lonestar108/src-algorithm-visualizer/resolve/main/index.html
- Command line
-
hf download hf://spaces/lonestar108/src-algorithm-visualizer/index.html
-
curl -L -o index.html https://huggingface.co/spaces/lonestar108/src-algorithm-visualizer/resolve/main/index.html
29.7 kB
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Quantum Entropy Minimizer</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script> | |
| <style> | |
| body { | |
| background: linear-gradient(135deg, #0f172a, #1e293b); | |
| color: #f1f5f9; | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| } | |
| .hilbert-space { | |
| background: rgba(15, 23, 42, 0.7); | |
| border: 1px solid #334155; | |
| box-shadow: 0 0 20px rgba(99, 102, 241, 0.2); | |
| } | |
| .prime-state { | |
| transition: all 0.5s ease; | |
| } | |
| .active-state { | |
| box-shadow: 0 0 15px #818cf8; | |
| transform: scale(1.1); | |
| } | |
| .resonance-path { | |
| stroke-dasharray: 1000; | |
| stroke-dashoffset: 1000; | |
| } | |
| .entropy-graph { | |
| background: rgba(30, 41, 59, 0.8); | |
| } | |
| .control-panel { | |
| background: rgba(15, 23, 42, 0.9); | |
| backdrop-filter: blur(10px); | |
| } | |
| .algorithm-step { | |
| transition: all 0.3s ease; | |
| } | |
| .current-step { | |
| background: rgba(99, 102, 241, 0.2); | |
| border-left: 3px solid #818cf8; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen"> | |
| <!-- Header --> | |
| <header class="py-6 px-4 sm:px-6 lg:px-8 border-b border-slate-700"> | |
| <div class="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center"> | |
| <div> | |
| <h1 class="text-3xl font-bold text-indigo-300">Quantum Entropy Minimizer</h1> | |
| <p class="text-slate-400 mt-1">NP-Complete Problem Solver</p> | |
| </div> | |
| <div class="mt-4 md:mt-0 flex items-center space-x-4"> | |
| <div class="bg-indigo-900/30 px-4 py-2 rounded-lg"> | |
| <span class="text-indigo-300 font-mono">P = NP</span> | |
| </div> | |
| <div class="text-sm text-slate-400"> | |
| Sebastian Schepis, 2025 | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="max-w-7xl mx-auto py-8 px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> | |
| <!-- Visualization Panel --> | |
| <div class="lg:col-span-2"> | |
| <div class="hilbert-space rounded-xl p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-xl font-semibold text-indigo-200">Quantum State Space</h2> | |
| <div class="flex space-x-2"> | |
| <button id="resetBtn" class="px-3 py-1 bg-slate-700 hover:bg-slate-600 rounded-lg text-sm transition-colors"> | |
| Reset | |
| </button> | |
| <button id="startBtn" class="px-3 py-1 bg-indigo-600 hover:bg-indigo-500 rounded-lg text-sm transition-colors"> | |
| Start Simulation | |
| </button> | |
| <button id="stepBtn" class="px-3 py-1 bg-emerald-600 hover:bg-emerald-500 rounded-lg text-sm transition-colors"> | |
| Step Forward | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Quantum State Visualization --> | |
| <div class="relative h-96 rounded-lg border border-slate-600 bg-slate-900/50 overflow-hidden"> | |
| <div id="quantumCanvas" class="w-full h-full relative"> | |
| <!-- Quantum states will be dynamically added here --> | |
| </div> | |
| <!-- Energy field background --> | |
| <div class="absolute inset-0 opacity-20 pointer-events-none"> | |
| <div class="quantum-field"></div> | |
| </div> | |
| <!-- Connection lines --> | |
| <svg class="absolute top-0 left-0 w-full h-full pointer-events-none"> | |
| <defs> | |
| <linearGradient id="quantumGradient" x1="0%" y1="0%" x2="100%" y2="100%"> | |
| <stop offset="0%" stop-color="#818cf8" /> | |
| <stop offset="100%" stop-color="#4ade80" /> | |
| </linearGradient> | |
| </defs> | |
| </svg> | |
| </div> | |
| <!-- System Status --> | |
| <div class="mt-6 grid grid-cols-1 md:grid-cols-4 gap-4"> | |
| <div class="bg-slate-800/50 p-4 rounded-lg"> | |
| <div class="text-sm text-slate-400">Quantum State</div> | |
| <div id="currentState" class="text-lg font-mono text-indigo-300">|Ψ₀⟩</div> | |
| </div> | |
| <div class="bg-slate-800/50 p-4 rounded-lg"> | |
| <div class="text-sm text-slate-400">Entropy</div> | |
| <div id="entropyValue" class="text-lg font-mono text-green-300">S₀</div> | |
| </div> | |
| <div class="bg-slate-800/50 p-4 rounded-lg"> | |
| <div class="text-sm text-slate-400">Energy Level</div> | |
| <div id="energyValue" class="text-lg font-mono text-yellow-300">E₀</div> | |
| </div> | |
| <div class="bg-slate-800/50 p-4 rounded-lg"> | |
| <div class="text-sm text-slate-400">Iteration</div> | |
| <div id="timeStep" class="text-lg font-mono text-cyan-300">t = 0</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Entropy Graph --> | |
| <div class="hilbert-space rounded-xl p-6 mt-8"> | |
| <h2 class="text-xl font-semibold text-indigo-200 mb-4">Convergence Metrics</h2> | |
| <div class="entropy-graph rounded-lg p-4 h-64"> | |
| <canvas id="metricsChart" width="800" height="200"></canvas> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Control Panel --> | |
| <div class="control-panel rounded-xl p-6 h-fit"> | |
| <h2 class="text-xl font-semibold text-indigo-200 mb-4">Algorithm Steps</h2> | |
| <div class="space-y-4"> | |
| <div class="algorithm-step p-4 rounded-lg current-step" data-step="0"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 h-6 w-6 rounded-full bg-indigo-500 flex items-center justify-center text-xs font-bold">1</div> | |
| <div class="ml-3"> | |
| <h3 class="font-medium text-white">Quantum State Initialization</h3> | |
| <p class="mt-1 text-sm text-slate-400">Initialize quantum system with superposition of all possible solutions</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="algorithm-step p-4 rounded-lg" data-step="1"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 h-6 w-6 rounded-full bg-slate-700 flex items-center justify-center text-xs font-bold">2</div> | |
| <div class="ml-3"> | |
| <h3 class="font-medium text-white">Problem Encoding</h3> | |
| <p class="mt-1 text-sm text-slate-400">Map NP-complete problem constraints to quantum operators</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="algorithm-step p-4 rounded-lg" data-step="2"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 h-6 w-6 rounded-full bg-slate-700 flex items-center justify-center text-xs font-bold">3</div> | |
| <div class="ml-3"> | |
| <h3 class="font-medium text-white">Energy Landscape</h3> | |
| <p class="mt-1 text-sm text-slate-400">Define energy function that minimizes for valid solutions</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="algorithm-step p-4 rounded-lg" data-step="3"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 h-6 w-6 rounded-full bg-slate-700 flex items-center justify-center text-xs font-bold">4</div> | |
| <div class="ml-3"> | |
| <h3 class="font-medium text-white">Quantum Evolution</h3> | |
| <p class="mt-1 text-sm text-slate-400">Apply quantum gates and entanglement operations</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="algorithm-step p-4 rounded-lg" data-step="4"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 h-6 w-6 rounded-full bg-slate-700 flex items-center justify-center text-xs font-bold">5</div> | |
| <div class="ml-3"> | |
| <h3 class="font-medium text-white">Entropy Collapse</h3> | |
| <p class="mt-1 text-sm text-slate-400">System entropy decreases as solution emerges</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="algorithm-step p-4 rounded-lg" data-step="5"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 h-6 w-6 rounded-full bg-slate-700 flex items-center justify-center text-xs font-bold">6</div> | |
| <div class="ml-3"> | |
| <h3 class="font-medium text-white">Solution Extraction</h3> | |
| <p class="mt-1 text-sm text-slate-400">Measure collapsed state to obtain optimal solution</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Parameters --> | |
| <div class="mt-8"> | |
| <h3 class="font-medium text-white mb-3">Quantum Parameters</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm text-slate-400 mb-1">Qubits (n)</label> | |
| <input type="range" min="3" max="12" value="6" id="qubitCount" class="w-full"> | |
| <div class="text-right text-sm text-slate-400" id="qubitCountValue">6</div> | |
| </div> | |
| <div> | |
| <label class="block text-sm text-slate-400 mb-1">Problem Complexity</label> | |
| <input type="range" min="1" max="10" value="5" id="complexity" class="w-full"> | |
| <div class="text-right text-sm text-slate-400" id="complexityValue">5</div> | |
| </div> | |
| <div> | |
| <label class="block text-sm text-slate-400 mb-1">Entropy Decay (γ)</label> | |
| <input type="range" min="0.1" max="2" step="0.1" value="0.8" id="entropyDecay" class="w-full"> | |
| <div class="text-right text-sm text-slate-400" id="entropyDecayValue">0.8</div> | |
| </div> | |
| <div> | |
| <label class="block text-sm text-slate-400 mb-1">Quantum Coherence</label> | |
| <input type="range" min="0.1" max="1" step="0.1" value="0.7" id="coherence" class="w-full"> | |
| <div class="text-right text-sm text-slate-400" id="coherenceValue">0.7</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Explanation Section --> | |
| <div class="mt-12 hilbert-space rounded-xl p-8"> | |
| <h2 class="text-2xl font-bold text-indigo-200 mb-6">Quantum Entropy Minimization</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <div> | |
| <h3 class="text-lg font-semibold text-white mb-3">Quantum Computing Approach</h3> | |
| <p class="text-slate-300 mb-4"> | |
| Our quantum entropy minimization algorithm leverages superposition and entanglement to explore | |
| solution spaces exponentially faster than classical approaches. By encoding NP-complete problems | |
| as quantum states, we can efficiently navigate the solution landscape. | |
| </p> | |
| <p class="text-slate-300"> | |
| The system evolves through quantum gates that progressively reduce entropy while preserving | |
| valid solution amplitudes, ultimately collapsing to the optimal configuration. | |
| </p> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold text-white mb-3">Algorithm Advantages</h3> | |
| <ul class="space-y-2 text-slate-300"> | |
| <li class="flex items-start"> | |
| <i data-feather="zap" class="text-yellow-400 mt-1 mr-2 flex-shrink-0"></i> | |
| <span>Exponential speedup over classical computation</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-feather="activity" class="text-green-400 mt-1 mr-2 flex-shrink-0"></i> | |
| <span>Natural avoidance of local minima through quantum tunneling</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-feather="trending-down" class="text-blue-400 mt-1 mr-2 flex-shrink-0"></i> | |
| <span>Guaranteed entropy reduction in polynomial time</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-feather="cpu" class="text-purple-400 mt-1 mr-2 flex-shrink-0"></i> | |
| <span>Scalable to large-scale optimization problems</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <script> | |
| // Initialize Feather Icons | |
| feather.replace(); | |
| // DOM Elements | |
| const quantumCanvas = document.getElementById('quantumCanvas'); | |
| const metricsChart = document.getElementById('metricsChart').getContext('2d'); | |
| const currentStateEl = document.getElementById('currentState'); | |
| const entropyValueEl = document.getElementById('entropyValue'); | |
| const energyValueEl = document.getElementById('energyValue'); | |
| const timeStepEl = document.getElementById('timeStep'); | |
| const startBtn = document.getElementById('startBtn'); | |
| const resetBtn = document.getElementById('resetBtn'); | |
| const stepBtn = document.getElementById('stepBtn'); | |
| const qubitCount = document.getElementById('qubitCount'); | |
| const complexity = document.getElementById('complexity'); | |
| const entropyDecay = document.getElementById('entropyDecay'); | |
| const coherence = document.getElementById('coherence'); | |
| const qubitCountValue = document.getElementById('qubitCountValue'); | |
| const complexityValue = document.getElementById('complexityValue'); | |
| const entropyDecayValue = document.getElementById('entropyDecayValue'); | |
| const coherenceValue = document.getElementById('coherenceValue'); | |
| const algorithmSteps = document.querySelectorAll('.algorithm-step'); | |
| // Simulation state | |
| let simulationRunning = false; | |
| let currentTime = 0; | |
| let entropyData = []; | |
| let energyData = []; | |
| let currentState = '|Ψ₀⟩'; | |
| let quantumStates = []; | |
| let animationTimeline = null; | |
| let stepMode = false; | |
| // Update parameter displays | |
| qubitCount.addEventListener('input', () => { | |
| qubitCountValue.textContent = qubitCount.value; | |
| initVisualization(); | |
| }); | |
| complexity.addEventListener('input', () => { | |
| complexityValue.textContent = complexity.value; | |
| }); | |
| entropyDecay.addEventListener('input', () => { | |
| entropyDecayValue.textContent = entropyDecay.value; | |
| }); | |
| coherence.addEventListener('input', () => { | |
| coherenceValue.textContent = coherence.value; | |
| }); | |
| // Initialize visualization | |
| function initVisualization() { | |
| quantumCanvas.innerHTML = ''; | |
| quantumStates = []; | |
| const n = parseInt(qubitCount.value); | |
| const positions = generateQuantumPositions(n); | |
| for (let i = 0; i < n; i++) { | |
| const state = document.createElement('div'); | |
| state.className = 'quantum-state absolute w-20 h-20 rounded-lg flex items-center justify-center text-white font-bold border-2 border-indigo-400 bg-gradient-to-br from-indigo-500 to-purple-600'; | |
| state.style.left = `${positions[i].x}%`; | |
| state.style.top = `${positions[i].y}%`; | |
| state.style.transform = 'rotate(45deg)'; | |
| state.innerHTML = `<div class="transform -rotate-45">|q<sub>${i}</sub>⟩</div>`; | |
| state.dataset.index = i; | |
| quantumCanvas.appendChild(state); | |
| quantumStates.push(state); | |
| } | |
| // Reset state displays | |
| currentStateEl.textContent = '|Ψ₀⟩'; | |
| entropyValueEl.textContent = 'S₀'; | |
| energyValueEl.textContent = 'E₀'; | |
| timeStepEl.textContent = 't = 0'; | |
| entropyData = [{time: 0, entropy: 100}]; | |
| energyData = [{time: 0, energy: 85}]; | |
| drawMetricsChart(); | |
| } | |
| // Generate positions for quantum states in a circular pattern | |
| function generateQuantumPositions(n) { | |
| const positions = []; | |
| const centerX = 50; | |
| const centerY = 50; | |
| const radius = 35; | |
| for (let i = 0; i < n; i++) { | |
| const angle = (i / n) * 2 * Math.PI; | |
| positions.push({ | |
| x: centerX + radius * Math.cos(angle), | |
| y: centerY + radius * Math.sin(angle) | |
| }); | |
| } | |
| return positions; | |
| } | |
| // Draw metrics convergence chart | |
| function drawMetricsChart() { | |
| metricsChart.clearRect(0, 0, metricsChart.canvas.width, metricsChart.canvas.height); | |
| if (entropyData.length === 0) return; | |
| // Draw grid | |
| metricsChart.strokeStyle = '#334155'; | |
| metricsChart.lineWidth = 1; | |
| // Vertical grid lines | |
| for (let i = 0; i <= 10; i++) { | |
| const x = (i / 10) * metricsChart.canvas.width; | |
| metricsChart.beginPath(); | |
| metricsChart.moveTo(x, 0); | |
| metricsChart.lineTo(x, metricsChart.canvas.height); | |
| metricsChart.stroke(); | |
| } | |
| // Horizontal grid lines | |
| for (let i = 0; i <= 5; i++) { | |
| const y = (i / 5) * metricsChart.canvas.height; | |
| metricsChart.beginPath(); | |
| metricsChart.moveTo(0, y); | |
| metricsChart.lineTo(metricsChart.canvas.width, y); | |
| metricsChart.stroke(); | |
| } | |
| // Draw entropy curve | |
| metricsChart.strokeStyle = '#4ade80'; | |
| metricsChart.lineWidth = 3; | |
| metricsChart.beginPath(); | |
| for (let i = 0; i < entropyData.length; i++) { | |
| const x = (entropyData[i].time / 100) * metricsChart.canvas.width; | |
| const y = metricsChart.canvas.height - (entropyData[i].entropy / 100) * metricsChart.canvas.height; | |
| if (i === 0) { | |
| metricsChart.moveTo(x, y); | |
| } else { | |
| metricsChart.lineTo(x, y); | |
| } | |
| } | |
| metricsChart.stroke(); | |
| // Draw energy curve | |
| metricsChart.strokeStyle = '#f59e0b'; | |
| metricsChart.lineWidth = 3; | |
| metricsChart.beginPath(); | |
| for (let i = 0; i < energyData.length; i++) { | |
| const x = (energyData[i].time / 100) * metricsChart.canvas.width; | |
| const y = metricsChart.canvas.height - (energyData[i].energy / 100) * metricsChart.canvas.height; | |
| if (i === 0) { | |
| metricsChart.moveTo(x, y); | |
| } else { | |
| metricsChart.lineTo(x, y); | |
| } | |
| } | |
| metricsChart.stroke(); | |
| } | |
| // Animate the simulation | |
| function animateSimulation() { | |
| if (!simulationRunning && !stepMode) return; | |
| currentTime++; | |
| timeStepEl.textContent = `t = ${currentTime}`; | |
| // Update metrics | |
| const newEntropy = Math.max(0, 100 - currentTime * 4); | |
| const newEnergy = Math.max(5, 85 - currentTime * 3.2); | |
| entropyValueEl.textContent = `S = ${newEntropy.toFixed(1)}`; | |
| energyValueEl.textContent = `E = ${newEnergy.toFixed(1)}`; | |
| entropyData.push({time: currentTime, entropy: newEntropy}); | |
| energyData.push({time: currentTime, energy: newEnergy}); | |
| drawMetricsChart(); | |
| // Animate quantum states with quantum effects | |
| quantumStates.forEach((state, index) => { | |
| const phase = (currentTime + index) % 6; | |
| // Quantum oscillation effect | |
| anime({ | |
| targets: state, | |
| scale: [1, 1.15, 1], | |
| rotate: [45, 50, 45], | |
| backgroundColor: [ | |
| state.style.backgroundColor, | |
| `rgba(139, 92, 246, 0.9)`, | |
| state.style.backgroundColor | |
| ], | |
| duration: 1200, | |
| easing: 'easeInOutQuad' | |
| }); | |
| // Add quantum glow effect | |
| state.classList.add('active-state'); | |
| setTimeout(() => { | |
| state.classList.remove('active-state'); | |
| }, 800); | |
| }); | |
| // Add entanglement lines between states | |
| updateEntanglementLines(); | |
| // Update current state | |
| if (currentTime < 8) { | |
| currentStateEl.textContent = '|Ψ(t)⟩'; | |
| } else if (currentTime < 18) { | |
| currentStateEl.textContent = '|Ψ*⟩'; | |
| algorithmSteps.forEach(step => step.classList.remove('current-step')); | |
| algorithmSteps[5].classList.add('current-step'); | |
| } | |
| // Update algorithm steps | |
| if (currentTime >= 3 && currentTime < 8) { | |
| algorithmSteps.forEach(step => step.classList.remove('current-step')); | |
| algorithmSteps[3].classList.add('current-step'); | |
| } else if (currentTime >= 8 && currentTime < 15) { | |
| algorithmSteps.forEach(step => step.classList.remove('current-step')); | |
| algorithmSteps[4].classList.add('current-step'); | |
| } | |
| // Continue animation or stop | |
| if (currentTime < 25 && !stepMode) { | |
| setTimeout(animateSimulation, 700); | |
| } else { | |
| if (!stepMode) { | |
| simulationRunning = false; | |
| startBtn.textContent = 'Restart Simulation'; | |
| } else { | |
| stepMode = false; | |
| } | |
| } | |
| } | |
| // Update quantum entanglement visualization | |
| function updateEntanglementLines() { | |
| // Clear existing lines | |
| const existingLines = quantumCanvas.querySelectorAll('.entanglement-line'); | |
| existingLines.forEach(line => line.remove()); | |
| // Create new entanglement lines between adjacent states | |
| for (let i = 0; i < quantumStates.length - 1; i++) { | |
| const line = document.createElement('div'); | |
| line.className = 'entanglement-line absolute h-0.5 bg-gradient-to-r from-indigo-400 to-purple-400 opacity-60'; | |
| const rect1 = quantumStates[i].getBoundingClientRect(); | |
| const rect2 = quantumStates[i + 1].getBoundingClientRect(); | |
| const containerRect = quantumCanvas.getBoundingClientRect(); | |
| const x1 = rect1.left + rect1.width/2 - containerRect.left; | |
| const y1 = rect1.top + rect1.height/2 - containerRect.top; | |
| const x2 = rect2.left + rect2.width/2 - containerRect.left; | |
| const y2 = rect2.top + rect2.height/2 - containerRect.top; | |
| const length = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)); | |
| const angle = Math.atan2(y2 - y1, x2 - x1) * 180 / Math.PI; | |
| line.style.width = `${length}px`; | |
| line.style.left = `${x1}px`; | |
| line.style.top = `${y1}px`; | |
| line.style.transform = `rotate(${angle}deg)`; | |
| line.style.transformOrigin = '0 0'; | |
| quantumCanvas.appendChild(line); | |
| } | |
| } | |
| // Event Listeners | |
| startBtn.addEventListener('click', () => { | |
| if (!simulationRunning) { | |
| simulationRunning = true; | |
| stepMode = false; | |
| startBtn.textContent = 'Running...'; | |
| animateSimulation(); | |
| } | |
| }); | |
| stepBtn.addEventListener('click', () => { | |
| stepMode = true; | |
| animateSimulation(); | |
| }); | |
| resetBtn.addEventListener('click', () => { | |
| simulationRunning = false; | |
| stepMode = false; | |
| currentTime = 0; | |
| startBtn.textContent = 'Start Simulation'; | |
| initVisualization(); | |
| // Reset algorithm steps | |
| algorithmSteps.forEach(step => step.classList.remove('current-step')); | |
| algorithmSteps[0].classList.add('current-step'); | |
| }); | |
| // Initialize on load | |
| window.addEventListener('load', () => { | |
| initVisualization(); | |
| // Animate quantum state appearance | |
| anime({ | |
| targets: '.quantum-state', | |
| scale: [0, 1], | |
| opacity: [0, 1], | |
| rotate: [0, 45], | |
| delay: anime.stagger(150), | |
| duration: 1200, | |
| easing: 'easeOutElastic' | |
| }); | |
| }); | |
| </script> | |
| <style> | |
| .quantum-field { | |
| background: radial-gradient(circle at 50% 50%, rgba(129, 140, 248, 0.1) 0%, transparent 50%), | |
| radial-gradient(circle at 20% 80%, rgba(74, 222, 128, 0.05) 0%, transparent 50%), | |
| radial-gradient(circle at 80% 20%, rgba(245, 158, 11, 0.05) 0%, transparent 50%); | |
| width: 100%; | |
| height: 100%; | |
| animation: fieldPulse 8s ease-in-out infinite; | |
| } | |
| @keyframes fieldPulse { | |
| 0%, 100% { opacity: 0.3; } | |
| 50% { opacity: 0.6; } | |
| } | |
| .entanglement-line { | |
| animation: entanglementPulse 2s ease-in-out infinite; | |
| } | |
| @keyframes entanglementPulse { | |
| 0%, 100% { opacity: 0.3; } | |
| 50% { opacity: 0.8; } | |
| } | |
| .quantum-state { | |
| transition: all 0.5s ease; | |
| box-shadow: 0 0 20px rgba(129, 140, 248, 0.3); | |
| } | |
| .quantum-state.active-state { | |
| box-shadow: 0 0 30px rgba(139, 92, 246, 0.8); | |
| animation: quantumGlow 1s ease-in-out; | |
| } | |
| @keyframes quantumGlow { | |
| 0%, 100% { box-shadow: 0 0 20px rgba(129, 140, 248, 0.3); } | |
| 50% { box-shadow: 0 0 40px rgba(139, 92, 246, 0.8); } | |
| } | |
| </style> | |
| </body> | |
| </html> | |