Spaces:

kolaslab
/

Quantum

Running

App Files Files Community

kolaslab commited on about 17 hours ago

Commit

b8d7566

verified ·

1 Parent(s): 122054e

Update index.html

Browse files

Files changed (1) hide show

index.html +209 -19

index.html CHANGED Viewed

@@ -1,19 +1,209 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</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>