Add 1 files

index.html

@@ -329,7 +329,7 @@
                     </h2>
                     <div class="space-time h-64 rounded-lg relative" id="gravityCanvas">
                         <div class="gravity-well w-20 h-20 absolute" id="centralMass" style="bottom: 50%; left: 50%; transform: translate(-50%, 50%);"></div>
-                        <div class="particle w-3 h-3 absolute" id="orbitingObject" style="bottom: 30%; left: 50%;"></div>
+                        <div class="particle w-3 h-3 absolute" id="orbitingObject" style="bottom: 30%; left: 50%; transform: translate(-50%, 50%);"></div>
                         <div class="absolute bottom-4 left-0 right-0 flex justify-center">
                             <button id="startOrbit" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-lg text-sm">
                                 <i class="fas fa-play mr-1"></i> Start Orbit
@@ -494,32 +494,54 @@
             const speed = parseInt(document.getElementById('orbitSpeed').value);
             const centralMass = document.getElementById('centralMass');
             
+            // Update central mass size
             centralMass.style.width = `${massSize}px`;
             centralMass.style.height = `${massSize}px`;
             
+            // Reset position
             orbitingObject.style.transition = 'none';
+            orbitingObject.style.left = '50%';
+            orbitingObject.style.bottom = '30%';
             orbitingObject.style.transform = 'translate(-50%, 50%)';
             
+            // Orbit parameters
+            const orbitRadius = 80; // pixels
+            const centerX = 50; // percentage
+            const centerY = 30; // percentage
             let angle = 0;
-            const radius = 80;
-            const centerX = 50;
-            const centerY = 50;
             
+            // Start animation
             function animateOrbit() {
                 angle += 0.02 * speed;
-                const x = centerX + radius * Math.cos(angle);
-                const y = centerY + radius * Math.sin(angle);
+                const x = centerX + orbitRadius * Math.cos(angle);
+                const y = centerY + orbitRadius * Math.sin(angle);
                 
                 orbitingObject.style.left = `${x}%`;
                 orbitingObject.style.bottom = `${y}%`;
                 
-                requestAnimationFrame(animateOrbit);
+                // Continue animation
+                animationId = requestAnimationFrame(animateOrbit);
             }
             
-            animateOrbit();
+            // Start the animation
+            let animationId = requestAnimationFrame(animateOrbit);
             
+            // Update button state
             this.disabled = true;
             this.innerHTML = '<i class="fas fa-sync-alt mr-1"></i> Orbiting';
+            
+            // Allow restart by clicking again (though it will create multiple animations)
+            setTimeout(() => {
+                this.disabled = false;
+                this.innerHTML = '<i class="fas fa-redo mr-1"></i> Restart';
+            }, 2000);
+        });
+        
+        // Update mass size display
+        document.getElementById('massSize').addEventListener('input', function() {
+            const size = this.value;
+            document.getElementById('centralMass').style.width = `${size}px`;
+            document.getElementById('centralMass').style.height = `${size}px`;
         });
         
         // Time Dilation Calculator
@@ -552,13 +574,6 @@
             document.getElementById('observerTime').textContent = `${observerTime} sec`;
             document.getElementById('dilationResult').classList.remove('hidden');
         });
-        
-        // Update mass size display
-        document.getElementById('massSize').addEventListener('input', function() {
-            const size = this.value;
-            document.getElementById('centralMass').style.width = `${size}px`;
-            document.getElementById('centralMass').style.height = `${size}px`;
-        });
     </script>
-
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=smjain/gr" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
 </html>