Upload index.html with huggingface_hub

index.html

@@ -1605,22 +1605,67 @@
     </div>
 
     <script>
+        // Leaflet integration for maps
+        const map = L.map('map').setView([0, 0], 13);
+        
+        // Define a function to initialize the map
+        function initializeMap(lat, lng) {
+            // Remove existing map container if exists
+            const mapDiv = document.getElementById('map');
+            if (mapDiv) {
+                mapDiv.style.display = 'block';
+                mapDiv.innerHTML = '';
+            }
+            
+            const map = L.map('map').setView([lat, lng], 13);
+            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+                attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+            }).addTo(map);
+            
+            L.marker([lat, lng]).addTo(map)
+                .bindPopup('Your location')
+                .openPopup();
+        }
+
         // Splash screen transition
         document.getElementById('startBtn').addEventListener('click', function() {
             const splashScreen = document.getElementById('splashScreen');
             const mainApp = document.getElementById('mainApp');
             
-            splashScreen.style.opacity = '0';
-            splashScreen.style.visibility = 'hidden';
-            
-            setTimeout(() => {
-                mainApp.style.display = 'block';
+            // First get location to initialize map
+            if (navigator.geolocation) {
+                navigator.geolocation.getCurrentPosition(position => {
+                    const { latitude, longitude } = position.coords;
+                    
+                    splashScreen.style.opacity = '0';
+                    splashScreen.style.visibility = 'hidden';
+                    
+                    setTimeout(() => {
+                        mainApp.style.display = 'block';
+                        setTimeout(() => {
+                            mainApp.style.opacity = '1';
+                            initializeMap(latitude, longitude);
+                        }, 50);
+                    }, 800);
+                }, showError);
+            } else {
+                // Handle case where geolocation is not available
+                splashScreen.style.opacity = '0';
+                splashScreen.style.visibility = 'hidden';
+                
                 setTimeout(() => {
-                    mainApp.style.opacity = '1';
-                }, 50);
-            }, 800);
+                    mainApp.style.display = 'block';
+                    setTimeout(() => {
+                        mainApp.style.opacity = '1';
+                    }, 50);
+                }, 800);
+            }
         });
 
+        function showError(error) {
+            alert('Geolocation error: ' + error.message);
+        }
+
         // Navigation between modules
         const navItems = document.querySelectorAll('.nav-item');
         const modules = document.querySelectorAll('.module-container');