QuaSta

Running

File size: 23,302 Bytes

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