QuaSta

Running

App Files Files Community

67oi678y commited on Oct 18, 2025

Commit

5978da9

verified ·

1 Parent(s): 4506dfb

make a website where I can find the quantum state of a particle

Browse files

Files changed (2) hide show

README.md +8 -5
index.html +345 -18

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Quantum State Explorer
-emoji: ⚡
-colorFrom: red
-colorTo: purple
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: Quantum State Explorer 🌀
+colorFrom: green
+colorTo: green
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).

index.html CHANGED Viewed

@@ -1,19 +1,346 @@
-<!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 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-3 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>
+                    </div>
+                </div>
+                <div class="mb-8">
+                    <label class="block text-gray-300 mb-2">Quantum State Parameters</label>
+                    <div class="space-y-4">
+                        <div>
+                            <label class="text-gray-400">Superposition</label>
+                            <input type="range" min="0" max="100" value="50" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" id="superposition">
+                        </div>
+                        <div>
+                            <label class="text-gray-400">Entanglement</label>
+                            <input type="range" min="0" max="100" value="25" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" id="entanglement">
+                        </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>
+                <button id="generate-btn" class="w-full 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>
+            </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"]
+            }
+        };
+        // Current state
+        let currentParticle = null;
+        let currentSuperposition = 50;
+        let currentEntanglement = 25;
+        let currentSpin = "super";
+        // 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;
+            updateVisualization();
+        });
+        entanglementSlider.addEventListener('input', () => {
+            currentEntanglement = entanglementSlider.value;
+            updateVisualization();
+        });
+        generateBtn.addEventListener('click', () => {
+            if (!currentParticle) {
+                alert("Please select a particle type first!");
+                return;
+            }
+            animateState();
+        });
+        // 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');
+        }
+        // Animate quantum state
+        function animateState() {
+            const particle = particles[currentParticle];
+            // Show quantum orb
+            quantumOrb.style.opacity = '1';
+            // 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
+            let equation = '';
+            if (currentSpin === 'super') {
+                const alpha = (currentSuperposition / 100).toFixed(2);
+                const beta = (1 - (currentSuperposition / 100)).toFixed(2);
+                equation = `${alpha}|↑⟩ + ${beta}|↓⟩`;
+            } else {
+                equation = currentSpin === 'up' ? '|↑⟩' : '|↓⟩';
+            }
+            if (currentEntanglement > 30) {
+                equation += ` ⊗ |Φ⁺⟩`;
+            }
+            equationContent.textContent = equation;
+            stateEquation.classList.remove('hidden');
+            // Update background color based on entanglement
+            const bgColor = `rgba(${hexToRgb(particle.color)}, ${currentEntanglement / 200})`;
+            visualizationContainer.style.backgroundColor = bgColor;
+        }
+        // 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>