add ion particle as an option and make the slide for superposition and entanglement more specific

index.html

@@ -54,7 +54,7 @@
                 
                 <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">
+                    <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>
@@ -64,21 +64,38 @@
                         <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>
 
                 <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 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>
-                            <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 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>
+<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>
@@ -184,8 +201,14 @@
                 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;
@@ -224,18 +247,18 @@
                 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', () => {
+generateBtn.addEventListener('click', () => {
             if (!currentParticle) {
                 alert("Please select a particle type first!");
                 return;