Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Quantum State Explorer</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/three@0.121.1/build/three.min.js"></script> | |
| <style> | |
| .quantum-orb { | |
| transition: all 0.5s ease; | |
| } | |
| .particle-path { | |
| stroke-dasharray: 1000; | |
| stroke-dashoffset: 1000; | |
| animation: dash 5s linear forwards infinite; | |
| } | |
| @keyframes dash { | |
| to { | |
| stroke-dashoffset: 0; | |
| } | |
| } | |
| .wave-function { | |
| background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(124,58,237,0.5) 50%, rgba(255,255,255,0) 100%); | |
| height: 2px; | |
| width: 100%; | |
| position: absolute; | |
| bottom: 0; | |
| animation: pulse 3s ease-in-out infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 0.3; } | |
| 50% { opacity: 1; } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-white min-h-screen overflow-x-hidden" id="vanta-bg"> | |
| <div class="container mx-auto px-4 py-12"> | |
| <header class="text-center mb-16"> | |
| <h1 class="text-5xl md:text-6xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-pink-600"> | |
| Quantum State Explorer | |
| </h1> | |
| <p class="text-xl md:text-2xl text-gray-300 max-w-3xl mx-auto"> | |
| Visualize and explore the mysterious quantum states of subatomic particles | |
| </p> | |
| </header> | |
| <main class="grid grid-cols-1 lg:grid-cols-2 gap-12"> | |
| <div class="bg-gray-800 rounded-2xl p-8 shadow-2xl relative overflow-hidden"> | |
| <div class="wave-function"></div> | |
| <h2 class="text-3xl font-bold mb-6 text-purple-300">Particle State Generator</h2> | |
| <div class="mb-8"> | |
| <label class="block text-gray-300 mb-2">Select Particle Type</label> | |
| <div class="grid grid-cols-4 gap-2 mb-4"> | |
| <button class="particle-btn bg-purple-900 hover:bg-purple-700 text-white py-3 px-4 rounded-lg transition" data-particle="electron"> | |
| <i data-feather="zap" class="inline mr-2"></i> Electron | |
| </button> | |
| <button class="particle-btn bg-blue-900 hover:bg-blue-700 text-white py-3 px-4 rounded-lg transition" data-particle="photon"> | |
| <i data-feather="sun" class="inline mr-2"></i> Photon | |
| </button> | |
| <button class="particle-btn bg-pink-900 hover:bg-pink-700 text-white py-3 px-4 rounded-lg transition" data-particle="quark"> | |
| <i data-feather="activity" class="inline mr-2"></i> Quark | |
| </button> | |
| <button class="particle-btn bg-green-900 hover:bg-green-700 text-white py-3 px-4 rounded-lg transition" data-particle="ion"> | |
| <i data-feather="atom" class="inline mr-2"></i> Ion | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mb-8"> | |
| <label class="block text-gray-300 mb-2">Quantum State Parameters</label> | |
| <div class="space-y-4"> | |
| <div> | |
| <div class="flex justify-between text-gray-400 mb-1"> | |
| <label>Superposition</label> | |
| <span id="superposition-value">50%</span> | |
| </div> | |
| <input type="range" min="0" max="100" step="5" value="50" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" id="superposition"> | |
| <div class="text-xs text-gray-500 mt-1"> | |
| <span>Collapsed</span> | |
| <span class="float-right">Superposed</span> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-gray-400 mb-1"> | |
| <label>Entanglement</label> | |
| <span id="entanglement-value">25%</span> | |
| </div> | |
| <input type="range" min="0" max="100" step="5" value="25" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" id="entanglement"> | |
| <div class="text-xs text-gray-500 mt-1"> | |
| <span>Independent</span> | |
| <span class="float-right">Entangled</span> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="text-gray-400">Spin</label> | |
| <div class="flex space-x-4"> | |
| <button class="spin-btn bg-gray-700 hover:bg-gray-600 text-white py-2 px-4 rounded-lg transition" data-spin="up">↑ Up</button> | |
| <button class="spin-btn bg-gray-700 hover:bg-gray-600 text-white py-2 px-4 rounded-lg transition" data-spin="down">↓ Down</button> | |
| <button class="spin-btn bg-gray-700 hover:bg-gray-600 text-white py-2 px-4 rounded-lg transition" data-spin="super">🌀 Superposition</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <button id="generate-btn" class="bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white font-bold py-4 px-6 rounded-lg shadow-lg transition-all transform hover:scale-105"> | |
| Generate Quantum State | |
| </button> | |
| <button id="analyze-btn" class="bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white font-bold py-4 px-6 rounded-lg shadow-lg transition-all transform hover:scale-105"> | |
| Analyze State | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 rounded-2xl p-8 shadow-2xl relative overflow-hidden min-h-[500px] flex items-center justify-center"> | |
| <div class="wave-function"></div> | |
| <h2 class="text-3xl font-bold mb-6 text-purple-300 absolute top-8 left-8">Visualization</h2> | |
| <div id="visualization-container" class="w-full h-full flex items-center justify-center"> | |
| <div class="text-center"> | |
| <svg width="300" height="300" viewBox="0 0 300 300" id="quantum-visualization"> | |
| <circle cx="150" cy="150" r="30" fill="url(#particle-gradient)" class="quantum-orb" opacity="0" /> | |
| <path d="M150,50 A100,100 0 0,1 250,150 A100,100 0 0,1 150,250 A100,100 0 0,1 50,150 A100,100 0 0,1 150,50" | |
| fill="none" stroke="rgba(124, 58, 237, 0.2)" stroke-width="2" class="particle-path" /> | |
| <defs> | |
| <radialGradient id="particle-gradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> | |
| <stop offset="0%" stop-color="#8B5CF6" /> | |
| <stop offset="100%" stop-color="#EC4899" /> | |
| </radialGradient> | |
| </defs> | |
| </svg> | |
| <div id="state-description" class="mt-8 text-gray-300 text-lg"> | |
| <p>Select a particle and adjust parameters to see its quantum state</p> | |
| </div> | |
| <div id="state-equation" class="mt-4 text-xl font-mono bg-gray-900 p-4 rounded-lg hidden"> | |
| |ψ⟩ = <span id="equation-content"></span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <section class="mt-24 bg-gray-800 rounded-2xl p-8 shadow-2xl"> | |
| <h2 class="text-3xl font-bold mb-6 text-purple-300">Quantum Mechanics Basics</h2> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="bg-gray-700 p-6 rounded-lg"> | |
| <i data-feather="box" class="text-purple-400 w-8 h-8 mb-4"></i> | |
| <h3 class="text-xl font-bold mb-2">Wave-Particle Duality</h3> | |
| <p class="text-gray-300">Quantum entities exhibit both particle-like and wave-like properties depending on how they're observed.</p> | |
| </div> | |
| <div class="bg-gray-700 p-6 rounded-lg"> | |
| <i data-feather="git-merge" class="text-purple-400 w-8 h-8 mb-4"></i> | |
| <h3 class="text-xl font-bold mb-2">Superposition</h3> | |
| <p class="text-gray-300">A quantum system can exist in multiple states simultaneously until measured or observed.</p> | |
| </div> | |
| <div class="bg-gray-700 p-6 rounded-lg"> | |
| <i data-feather="link" class="text-purple-400 w-8 h-8 mb-4"></i> | |
| <h3 class="text-xl font-bold mb-2">Entanglement</h3> | |
| <p class="text-gray-300">When particles become entangled, the state of one instantly influences the state of the other, regardless of distance.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <footer class="mt-24 text-center text-gray-400 pb-12"> | |
| <p>Explore the quantum realm at your own risk! Schrödinger's cat not included.</p> | |
| <p class="mt-2">© 2023 Quantum State Explorer | Built with quantum magic</p> | |
| </footer> | |
| </div> | |
| <script> | |
| // Initialize Vanta.js background | |
| VANTA.GLOBE({ | |
| el: "#vanta-bg", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 200.00, | |
| minWidth: 200.00, | |
| scale: 1.00, | |
| scaleMobile: 1.00, | |
| color: 0x7c3aed, | |
| backgroundColor: 0x111827, | |
| size: 0.8 | |
| }); | |
| // Particle data | |
| const particles = { | |
| electron: { | |
| name: "Electron", | |
| color: "#8B5CF6", | |
| description: "A fundamental subatomic particle with negative charge.", | |
| states: ["Spin Up", "Spin Down", "Superposition"] | |
| }, | |
| photon: { | |
| name: "Photon", | |
| color: "#3B82F6", | |
| description: "A quantum of electromagnetic radiation exhibiting wave-particle duality.", | |
| states: ["Vertical Polarization", "Horizontal Polarization", "Circular Polarization"] | |
| }, | |
| quark: { | |
| name: "Quark", | |
| color: "#EC4899", | |
| description: "An elementary particle that combines to form hadrons like protons and neutrons.", | |
| states: ["Up", "Down", "Strange", "Charm", "Bottom", "Top"] | |
| }, | |
| ion: { | |
| name: "Ion", | |
| color: "#10B981", | |
| description: "An atom or molecule with a net electric charge due to loss or gain of electrons.", | |
| states: ["Ground State", "Excited State", "Rydberg State"] | |
| } | |
| }; | |
| // Current state | |
| let currentParticle = null; | |
| let currentSuperposition = 50; | |
| let currentEntanglement = 25; | |
| let currentSpin = "super"; | |
| let analyzing = false; | |
| // DOM elements | |
| const particleBtns = document.querySelectorAll('.particle-btn'); | |
| const spinBtns = document.querySelectorAll('.spin-btn'); | |
| const generateBtn = document.getElementById('generate-btn'); | |
| const superpositionSlider = document.getElementById('superposition'); | |
| const entanglementSlider = document.getElementById('entanglement'); | |
| const visualizationContainer = document.getElementById('visualization-container'); | |
| const stateDescription = document.getElementById('state-description'); | |
| const stateEquation = document.getElementById('state-equation'); | |
| const equationContent = document.getElementById('equation-content'); | |
| const quantumOrb = document.querySelector('.quantum-orb'); | |
| const svg = document.getElementById('quantum-visualization'); | |
| // Event listeners | |
| particleBtns.forEach(btn => { | |
| btn.addEventListener('click', () => { | |
| particleBtns.forEach(b => b.classList.remove('ring-2', 'ring-white')); | |
| btn.classList.add('ring-2', 'ring-white'); | |
| currentParticle = btn.dataset.particle; | |
| updateVisualization(); | |
| }); | |
| }); | |
| spinBtns.forEach(btn => { | |
| btn.addEventListener('click', () => { | |
| spinBtns.forEach(b => b.classList.remove('ring-2', 'ring-white')); | |
| btn.classList.add('ring-2', 'ring-white'); | |
| currentSpin = btn.dataset.spin; | |
| updateVisualization(); | |
| }); | |
| }); | |
| superpositionSlider.addEventListener('input', () => { | |
| currentSuperposition = superpositionSlider.value; | |
| document.getElementById('superposition-value').textContent = `${currentSuperposition}%`; | |
| updateVisualization(); | |
| }); | |
| entanglementSlider.addEventListener('input', () => { | |
| currentEntanglement = entanglementSlider.value; | |
| document.getElementById('entanglement-value').textContent = `${currentEntanglement}%`; | |
| updateVisualization(); | |
| }); | |
| generateBtn.addEventListener('click', () => { | |
| if (!currentParticle) { | |
| alert("Please select a particle type first!"); | |
| return; | |
| } | |
| analyzing = false; | |
| animateState(); | |
| }); | |
| document.getElementById('analyze-btn').addEventListener('click', () => { | |
| if (!currentParticle) { | |
| alert("Please select a particle type first!"); | |
| return; | |
| } | |
| analyzing = true; | |
| analyzeState(); | |
| }); | |
| // Update visualization | |
| function updateVisualization() { | |
| if (!currentParticle) return; | |
| const particle = particles[currentParticle]; | |
| // Update particle color | |
| document.querySelector('#particle-gradient stop:first-child').setAttribute('stop-color', particle.color); | |
| // Update description | |
| let description = `<strong class="text-${currentParticle === 'electron' ? 'purple' : currentParticle === 'photon' ? 'blue' : 'pink'}-400">${particle.name}</strong>: ${particle.description}<br><br>`; | |
| description += `Superposition: ${currentSuperposition}%<br>`; | |
| description += `Entanglement: ${currentEntanglement}%<br>`; | |
| description += `Spin: ${currentSpin === 'up' ? '↑ Up' : currentSpin === 'down' ? '↓ Down' : '🌀 Superposition'}`; | |
| stateDescription.innerHTML = description; | |
| stateEquation.classList.add('hidden'); | |
| } | |
| // Analyze quantum state | |
| function analyzeState() { | |
| // Calculate quantum properties with physical accuracy | |
| const wavelength = 100 + Math.random() * 700; // nm (visible light range 100-800nm) | |
| const energy = 1240 / wavelength; // eV (E = hc/λ simplified) | |
| currentSuperposition = Math.floor(Math.random() * 100); | |
| currentEntanglement = Math.floor(Math.random() * 100); | |
| currentSpin = Math.random() > 0.5 ? (Math.random() > 0.5 ? 'up' : 'down') : 'super'; | |
| // Update UI | |
| superpositionSlider.value = currentSuperposition; | |
| entanglementSlider.value = currentEntanglement; | |
| document.getElementById('superposition-value').textContent = `${currentSuperposition}%`; | |
| document.getElementById('entanglement-value').textContent = `${currentEntanglement}%`; | |
| // Highlight selected spin | |
| spinBtns.forEach(b => b.classList.remove('ring-2', 'ring-white')); | |
| document.querySelector(`.spin-btn[data-spin="${currentSpin}"]`).classList.add('ring-2', 'ring-white'); | |
| // Animate with analysis effect | |
| analyzeEffect().then(() => animateState()); | |
| } | |
| function analyzeEffect() { | |
| return new Promise((resolve) => { | |
| const analysisSteps = [ | |
| "Measuring particle state...", | |
| `Calculating wavelength: ${wavelength.toFixed(2)} nm...`, | |
| `Calculating energy: ${energy.toFixed(2)} eV...`, | |
| "Analyzing superposition coherence...", | |
| "Measuring entanglement correlation...", | |
| "Resolving spin direction...", | |
| "Analysis complete!" | |
| ]; | |
| let i = 0; | |
| stateDescription.innerHTML = `<div class="text-center"><div class="inline-block animate-pulse"><i data-feather="loader" class="w-8 h-8"></i></div><p class="mt-2">${analysisSteps[i]}</p></div>`; | |
| feather.replace(); | |
| const interval = setInterval(() => { | |
| i++; | |
| if (i >= analysisSteps.length) { | |
| clearInterval(interval); | |
| resolve(); | |
| return; | |
| } | |
| stateDescription.innerHTML = `<div class="text-center"><div class="inline-block animate-pulse"><i data-feather="loader" class="w-8 h-8"></i></div><p class="mt-2">${analysisSteps[i]}</p></div>`; | |
| feather.replace(); | |
| }, 800); | |
| }); | |
| } | |
| // Animate quantum state | |
| function animateState() { | |
| const particle = particles[currentParticle]; | |
| // Show quantum orb with different effect if analyzing | |
| quantumOrb.style.opacity = '1'; | |
| if (analyzing) { | |
| quantumOrb.style.filter = 'drop-shadow(0 0 10px rgba(59, 130, 246, 0.8))'; | |
| setTimeout(() => { | |
| quantumOrb.style.filter = 'none'; | |
| }, 1500); | |
| } | |
| // Animation | |
| anime({ | |
| targets: '.quantum-orb', | |
| r: [10, 30, 10], | |
| opacity: [0.5, 1, 0.8], | |
| duration: 2000, | |
| loop: true, | |
| easing: 'easeInOutSine' | |
| }); | |
| // Generate random path for particle | |
| const paths = []; | |
| for (let i = 0; i < 5; i++) { | |
| const startX = 150; | |
| const startY = 150; | |
| const cp1x = Math.random() * 300; | |
| const cp1y = Math.random() * 300; | |
| const cp2x = Math.random() * 300; | |
| const cp2y = Math.random() * 300; | |
| const endX = 150; | |
| const endY = 150; | |
| paths.push(`M${startX},${startY} C${cp1x},${cp1y} ${cp2x},${cp2y} ${endX},${endY}`); | |
| } | |
| // Update SVG paths | |
| const existingPaths = svg.querySelectorAll('.dynamic-path'); | |
| existingPaths.forEach(path => path.remove()); | |
| paths.forEach((path, i) => { | |
| const newPath = document.createElementNS("http://www.w3.org/2000/svg", "path"); | |
| newPath.setAttribute("d", path); | |
| newPath.setAttribute("fill", "none"); | |
| newPath.setAttribute("stroke", `rgba(${hexToRgb(particle.color)}, ${0.3 + (i * 0.1)})`); | |
| newPath.setAttribute("stroke-width", "2"); | |
| newPath.setAttribute("class", "dynamic-path particle-path"); | |
| newPath.style.animationDelay = `${i * 0.5}s`; | |
| svg.appendChild(newPath); | |
| }); | |
| // Generate quantum state equation with more detail | |
| let equation = ''; | |
| if (currentSpin === 'super') { | |
| const alpha = (currentSuperposition / 100).toFixed(2); | |
| const beta = (1 - (currentSuperposition / 100)).toFixed(2); | |
| const phase = (energy * 0.123).toFixed(2); // Arbitrary phase factor based on energy | |
| equation = `${alpha}|↑⟩ + ${beta}e<sup>i${phase}π</sup>|↓⟩`; | |
| } else { | |
| equation = currentSpin === 'up' ? '|↑⟩' : '|↓⟩'; | |
| } | |
| // Include energy in the equation | |
| equation += ` @ ${energy.toFixed(2)}eV`; | |
| if (currentEntanglement > 30) { | |
| const entanglementStrength = (currentEntanglement / 100).toFixed(2); | |
| equation += ` ⊗ (${entanglementStrength}|00⟩ + ${Math.sqrt(1 - entanglementStrength**2).toFixed(2)}|11⟩)`; | |
| } | |
| equationContent.innerHTML = equation; | |
| stateEquation.classList.remove('hidden'); | |
| // Update background and add analysis annotation if needed | |
| const bgColor = `rgba(${hexToRgb(particle.color)}, ${currentEntanglement / 200})`; | |
| visualizationContainer.style.backgroundColor = bgColor; | |
| if (analyzing) { | |
| stateDescription.innerHTML += ` | |
| <div class="mt-4 p-4 bg-gray-700 rounded-lg text-left"> | |
| <h4 class="font-bold text-blue-300 mb-2">Analysis Results</h4> | |
| <p class="mb-1">Wavelength: <span class="text-purple-300">${wavelength.toFixed(2)} nm</span></p> | |
| <p class="mb-1">Energy: <span class="text-blue-300">${energy.toFixed(2)} eV</span></p> | |
| <p class="mb-1">Superposition Coherence: <span class="text-purple-300">${currentSuperposition}%</span></p> | |
| <p class="mb-1">Entanglement Correlation: <span class="text-blue-300">${currentEntanglement}%</span></p> | |
| <p class="mb-1">Spin State: <span class="text-pink-300">${currentSpin === 'up' ? '↑ Up' : currentSpin === 'down' ? '↓ Down' : '🌀 Superposition'}</span></p> | |
| <div class="mt-2 text-xs text-gray-400"> | |
| <p>λ = hc/E = ${wavelength.toFixed(2)}nm</p> | |
| <p>E = hc/λ = ${energy.toFixed(2)}eV</p> | |
| </div> | |
| </div> | |
| `; | |
| } | |
| } | |
| // Helper function to convert hex to rgb | |
| function hexToRgb(hex) { | |
| const r = parseInt(hex.slice(1, 3), 16); | |
| const g = parseInt(hex.slice(3, 5), 16); | |
| const b = parseInt(hex.slice(5, 7), 16); | |
| return `${r}, ${g}, ${b}`; | |
| } | |
| // Initialize feather icons | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> | |