live location

index.html

@@ -108,8 +108,12 @@
                 <div class="text-sm text-purple-300">
                     <span id="dateDisplay"></span>
                 </div>
+                <div class="text-sm text-green-400 flex items-center gap-2">
+                    <i data-feather="map-pin" class="w-4 h-4"></i>
+                    <span id="locationDisplay">Loading location...</span>
+                </div>
             </div>
-            <div class="flex gap-4">
+<div class="flex gap-4">
                 <button id="fullscreenBtn" class="control-button glass-effect px-4 py-2 rounded-lg flex items-center gap-2">
                     <i data-feather="maximize" class="w-4 h-4"></i>
                     <span class="hidden sm:inline">Fullscreen</span>

script.js

@@ -165,7 +165,6 @@ class SolarSystem {
         
         this.init();
     }
-    
     init() {
         this.resize();
         window.addEventListener('resize', () => this.resize());
@@ -173,10 +172,11 @@ class SolarSystem {
         this.createStars();
         this.animate();
         this.updateDate();
+        this.updateLocation();
         setInterval(() => this.updateDate(), 1000);
+        setInterval(() => this.updateLocation(), 30000); // Update location every 30 seconds
     }
-    
-    resize() {
+resize() {
         this.canvas.width = window.innerWidth;
         this.canvas.height = window.innerHeight;
         this.centerX = this.canvas.width / 2;
@@ -242,14 +242,18 @@ class SolarSystem {
                 document.exitFullscreen();
             }
         });
-        
         // Info button
         document.getElementById('infoBtn').addEventListener('click', () => {
             const planetInfo = document.getElementById('planetInfo');
             planetInfo.classList.toggle('hidden');
         });
         
-        // Close info panel
+        // Location refresh on click
+        document.getElementById('locationDisplay').addEventListener('click', () => {
+            document.getElementById('locationDisplay').textContent = 'Updating...';
+            this.updateLocation();
+        });
+// Close info panel
         document.getElementById('closeInfo').addEventListener('click', () => {
             document.getElementById('planetInfo').classList.add('hidden');
         });
@@ -284,7 +288,6 @@ class SolarSystem {
         document.getElementById('planetDiameter').textContent = planet.info.diameter;
         document.getElementById('planetMoons').textContent = planet.info.moons || 'None';
     }
-    
     updateDate() {
         const now = new Date();
         document.getElementById('dateDisplay').textContent = now.toLocaleDateString('en-US', { 
@@ -294,7 +297,48 @@ class SolarSystem {
             day: 'numeric' 
         });
     }
-    drawSun() {
+    
+    async updateLocation() {
+        const locationDisplay = document.getElementById('locationDisplay');
+        
+        if (!navigator.geolocation) {
+            locationDisplay.textContent = 'Location not supported';
+            return;
+        }
+        
+        navigator.geolocation.getCurrentPosition(
+            async (position) => {
+                const { latitude, longitude } = position.coords;
+                
+                try {
+                    // Using Nominatim reverse geocoding API
+                    const response = await fetch(
+                        `https://nominatim.openstreetmap.org/reverse?format=json&lat=${latitude}&lon=${longitude}&zoom=10`,
+                        {
+                            headers: {
+                                'User-Agent': 'CosmicExplorer/1.0'
+                            }
+                        }
+                    );
+                    
+                    if (!response.ok) throw new Error('Location fetch failed');
+                    
+                    const data = await response.json();
+                    const city = data.address?.city || data.address?.town || data.address?.village || 'Unknown';
+                    const country = data.address?.country || '';
+                    
+                    locationDisplay.textContent = country ? `${city}, ${country}` : city;
+                } catch (error) {
+                    // Fallback to coordinates
+                    locationDisplay.textContent = `${latitude.toFixed(2)}°, ${longitude.toFixed(2)}°`;
+                }
+            },
+            (error) => {
+                locationDisplay.textContent = 'Location denied';
+            }
+        );
+    }
+drawSun() {
         // Simplified sun for performance
         this.ctx.fillStyle = '#FBBF24';
         this.ctx.beginPath();

style.css

@@ -26,7 +26,15 @@
     background: linear-gradient(135deg, #9333ea, #ec4899);
     border-radius: 4px;
 }
-
 ::-webkit-scrollbar-thumb:hover {
     background: linear-gradient(135deg, #a855f7, #f472b6);
-}
+}
+
+#locationDisplay {
+    cursor: pointer;
+    transition: opacity 0.3s ease;
+}
+
+#locationDisplay:hover {
+    opacity: 0.8;
+}