index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Quantum Simulator</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Arial', sans-serif;
        }

        body {
            background: #000;
            color: #fff;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 2rem;
        }

        .controls {
            margin: 2rem 0;
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
            justify-content: center;
        }

        button {
            padding: 0.5rem 1rem;
            background: #333;
            color: #fff;
            border: 1px solid #666;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s;
        }

        button:hover {
            background: #444;
        }

        #quantumCanvas {
            border: 1px solid #333;
            background: rgba(0, 0, 0, 0.8);
        }

        .particles {
            position: relative;
            width: 800px;
            height: 400px;
        }

        .particle {
            position: absolute;
            width: 4px;
            height: 4px;
            background: #fff;
            border-radius: 50%;
            filter: blur(1px);
        }

        .info-panel {
            margin-top: 2rem;
            padding: 1rem;
            background: rgba(51, 51, 51, 0.5);
            border-radius: 8px;
            font-size: 0.9rem;
        }

        .quantum-stats {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1rem;
            margin-top: 1rem;
        }
    </style>
</head>
<body>
    <h1>Quantum Particle Simulator</h1>
    
    <div class="controls">
        <button onclick="toggleSimulation()">Start/Stop</button>
        <button onclick="addParticle()">Add Particle</button>
        <button onclick="changeEntanglement()">Toggle Entanglement</button>
    </div>

    <canvas id="quantumCanvas" width="800" height="400"></canvas>

    <div class="info-panel">
        <div class="quantum-stats">
            <div>Particles: <span id="particleCount">0</span></div>
            <div>Entangled Pairs: <span id="entangledCount">0</span></div>
        </div>
    </div>

    <script>
        const canvas = document.getElementById('quantumCanvas');
        const ctx = canvas.getContext('2d');
        let particles = [];
        let isRunning = false;
        let entanglementEnabled = false;

        class QuantumParticle {
            constructor(x, y) {
                this.x = x;
                this.y = y;
                this.vx = (Math.random() - 0.5) * 4;
                this.vy = (Math.random() - 0.5) * 4;
                this.phase = Math.random() * Math.PI * 2;
                this.entangled = null;
                this.color = `hsl(${Math.random() * 360}, 100%, 70%)`;
            }

            update() {
                this.x += this.vx;
                this.y += this.vy;
                this.phase += 0.1;

                if (this.x < 0 || this.x > canvas.width) this.vx *= -1;
                if (this.y < 0 || this.y > canvas.height) this.vy *= -1;

                if (this.entangled) {
                    const dx = this.entangled.x - this.x;
                    const dy = this.entangled.y - this.y;
                    const dist = Math.sqrt(dx * dx + dy * dy);
                    if (dist > 100) {
                        this.vx += dx * 0.001;
                        this.vy += dy * 0.001;
                    }
                }
            }

            draw() {
                ctx.beginPath();
                ctx.arc(this.x, this.y, 4 + Math.sin(this.phase) * 2, 0, Math.PI * 2);
                ctx.fillStyle = this.color;
                ctx.fill();

                if (this.entangled) {
                    ctx.beginPath();
                    ctx.moveTo(this.x, this.y);
                    ctx.lineTo(this.entangled.x, this.entangled.y);
                    ctx.strokeStyle = 'rgba(255, 255, 255, 0.2)';
                    ctx.stroke();
                }
            }
        }

        function addParticle() {
            const particle = new QuantumParticle(
                Math.random() * canvas.width,
                Math.random() * canvas.height
            );
            particles.push(particle);
            updateStats();
        }

        function changeEntanglement() {
            entanglementEnabled = !entanglementEnabled;
            if (entanglementEnabled) {
                for (let i = 0; i < particles.length; i += 2) {
                    if (i + 1 < particles.length) {
                        particles[i].entangled = particles[i + 1];
                        particles[i + 1].entangled = particles[i];
                    }
                }
            } else {
                particles.forEach(p => p.entangled = null);
            }
            updateStats();
        }

        function updateStats() {
            document.getElementById('particleCount').textContent = particles.length;
            document.getElementById('entangledCount').textContent = 
                particles.filter(p => p.entangled).length / 2;
        }

        function animate() {
            if (!isRunning) return;
            
            ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
            ctx.fillRect(0, 0, canvas.width, canvas.height);

            particles.forEach(particle => {
                particle.update();
                particle.draw();
            });

            requestAnimationFrame(animate);
        }

        function toggleSimulation() {
            isRunning = !isRunning;
            if (isRunning) animate();
        }

        // Initialize with some particles
        for (let i = 0; i < 10; i++) {
            addParticle();
        }
    </script>
</body>
</html>