i needs latitude longitude input, it does not generate output right now

index.html

@@ -46,6 +46,14 @@
                                 <input type="text" id="mapName" class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-primary-500">
                             </div>
                             <div>
+                                <label class="block text-gray-700 dark:text-gray-300 mb-2">Latitude</label>
+                                <input type="number" id="latitude" min="-90" max="90" step="0.0001" value="0" class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-primary-500">
+                            </div>
+                            <div>
+                                <label class="block text-gray-700 dark:text-gray-300 mb-2">Longitude</label>
+                                <input type="number" id="longitude" min="-180" max="180" step="0.0001" value="0" class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-primary-500">
+                            </div>
+<div>
                                 <label class="block text-gray-700 dark:text-gray-300 mb-2">Star Density</label>
                                 <select id="starDensity" class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-primary-500">
                                     <option value="low">Low (100 stars)</option>

script.js

@@ -3,11 +3,14 @@ document.addEventListener('DOMContentLoaded', function() {
     const previewButton = document.getElementById('previewButton');
     const starMapContainer = document.getElementById('starMapContainer');
     const mapNameInput = document.getElementById('mapName');
+    const latitudeInput = document.getElementById('latitude');
+    const longitudeInput = document.getElementById('longitude');
     const starDensitySelect = document.getElementById('starDensity');
     const constellationStyleSelect = document.getElementById('constellationStyle');
-
-    previewButton.addEventListener('click', function() {
+previewButton.addEventListener('click', function() {
         const mapName = mapNameInput.value || 'Unnamed Star Map';
+        const latitude = parseFloat(latitudeInput.value) || 0;
+        const longitude = parseFloat(longitudeInput.value) || 0;
 // Clear previous content
         starMapContainer.innerHTML = '';
         
@@ -24,14 +27,62 @@ document.addEventListener('DOMContentLoaded', function() {
             feather.replace();
         }, 1500);
     });
-    function generateStarMap() {
+    async function generateStarMap() {
         const containerWidth = starMapContainer.offsetWidth;
         const containerHeight = starMapContainer.offsetHeight;
         const mapName = mapNameInput.value || 'Unnamed Star Map';
+        const latitude = parseFloat(latitudeInput.value) || 0;
+        const longitude = parseFloat(longitudeInput.value) || 0;
         const starDensity = starDensitySelect.value;
         const constellationStyle = constellationStyleSelect.value;
 
-        // Real constellations data
+        // Clear previous content
+        starMapContainer.innerHTML = '';
+
+        // Add loading state
+        const loadingText = document.createElement('div');
+        loadingText.className = 'absolute inset-0 flex items-center justify-center text-white';
+        loadingText.textContent = 'Loading celestial data...';
+        starMapContainer.appendChild(loadingText);
+
+        try {
+            // Fetch real star data from NASA's exoplanet archive API
+            const response = await fetch(`https://exoplanetarchive.ipac.caltech.edu/cgi-bin/nstedAPI/nph-nstedAPI?table=exoplanets&select=ra,dec&format=json`);
+            const stars = await response.json();
+
+            // Filter stars visible from given coordinates
+            const visibleStars = stars.filter(star => {
+                // Simple visibility calculation based on celestial coordinates
+                const starLat = star.dec;
+                const starLng = star.ra;
+                return Math.abs(starLat - latitude) < 45 && 
+                       Math.abs(starLng - longitude) < 45;
+            });
+
+            // Generate stars
+            visibleStars.forEach(star => {
+                const starElement = document.createElement('div');
+                starElement.className = 'star';
+                
+                // Convert celestial coordinates to container coordinates
+                const x = ((star.ra - longitude + 180) % 360) / 360 * containerWidth;
+                const y = ((star.dec - latitude + 90) % 180) / 180 * containerHeight;
+                
+                // Size based on magnitude (simplified)
+                const size = 1 + Math.random() * 3;
+                
+                starElement.style.width = `${size}px`;
+                starElement.style.height = `${size}px`;
+                starElement.style.left = `${x}px`;
+                starElement.style.top = `${y}px`;
+                starElement.style.animationDelay = `${Math.random() * 2}s`;
+                
+                starMapContainer.appendChild(starElement);
+            });
+
+            // Remove loading text
+            starMapContainer.removeChild(loadingText);
+// Real constellations data
         const constellations = [
             { name: "Orion", stars: [[0.3,0.2],[0.35,0.25],[0.4,0.3],[0.45,0.35],[0.5,0.4]] },
             { name: "Ursa Major", stars: [[0.6,0.1],[0.65,0.15],[0.7,0.2],[0.75,0.25],[0.8,0.3]] },
@@ -45,49 +96,64 @@ document.addEventListener('DOMContentLoaded', function() {
             case 'high': starCount = 300; break;
             default: starCount = 150;
         }
-
-        // Generate background stars first
-        for (let i = 0; i < starCount; i++) {
-const star = document.createElement('div');
-            star.className = 'star';
-            
-            // Random position
-            const left = Math.random() * containerWidth;
-            const top = Math.random() * containerHeight;
-            
-            // Random size
-            const size = Math.random() * 3 + 1;
-            
-            star.style.width = `${size}px`;
-            star.style.height = `${size}px`;
-            star.style.left = `${left}px`;
-            star.style.top = `${top}px`;
-            
-            // Random animation delay
-            star.style.animationDelay = `${Math.random() * 2}s`;
-            
-            starMapContainer.appendChild(star);
-        }
-        // Generate constellation stars (brighter and larger)
-        constellations.forEach(constellation => {
-            constellation.stars.forEach(starPos => {
+            // Add some random stars for density
+            const extraStars = starDensity === 'low' ? 50 : starDensity === 'high' ? 200 : 100;
+            for (let i = 0; i < extraStars; i++) {
                 const star = document.createElement('div');
-                star.className = 'constellation-star';
+                star.className = 'star';
                 
-                const left = starPos[0] * containerWidth;
-                const top = starPos[1] * containerHeight;
+                const left = Math.random() * containerWidth;
+                const top = Math.random() * containerHeight;
+                const size = Math.random() * 2 + 0.5;
                 
-                star.style.width = '4px';
-                star.style.height = '4px';
+                star.style.width = `${size}px`;
+                star.style.height = `${size}px`;
                 star.style.left = `${left}px`;
                 star.style.top = `${top}px`;
-                star.style.boxShadow = '0 0 15px 3px rgba(255, 255, 255, 0.8)';
+                star.style.animationDelay = `${Math.random() * 2}s`;
                 
                 starMapContainer.appendChild(star);
-            });
-        });
-
-        // Draw constellation lines
+            }
+            // Add constellation lines (simplified)
+            if (constellationStyle !== 'minimal') {
+                // Draw some lines between nearby stars
+                for (let i = 0; i < visibleStars.length; i++) {
+                    for (let j = i + 1; j < Math.min(i + 5, visibleStars.length); j++) {
+                        const star1 = visibleStars[i];
+                        const star2 = visibleStars[j];
+                        
+                        const x1 = ((star1.ra - longitude + 180) % 360) / 360 * containerWidth;
+                        const y1 = ((star1.dec - latitude + 90) % 180) / 180 * containerHeight;
+                        const x2 = ((star2.ra - longitude + 180) % 360) / 360 * containerWidth;
+                        const y2 = ((star2.dec - latitude + 90) % 180) / 180 * containerHeight;
+                        
+                        const distance = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
+                        if (distance < 100) { // Only connect nearby stars
+                            const line = document.createElement('div');
+                            line.className = 'constellation-line';
+                            
+                            const length = distance;
+                            const angle = Math.atan2(y2 - y1, x2 - x1) * 180 / Math.PI;
+                            
+                            line.style.width = `${length}px`;
+                            line.style.left = `${x1}px`;
+                            line.style.top = `${y1}px`;
+                            line.style.transform = `rotate(${angle}deg)`;
+                            
+                            if (constellationStyle === 'classic') {
+                                line.style.background = 'rgba(255, 255, 255, 0.5)';
+                                line.style.height = '2px';
+                            } else { // modern
+                                line.style.background = 'linear-gradient(90deg, rgba(99,102,241,0.5) 0%, rgba(16,185,129,0.5) 100%)';
+                                line.style.height = '1.5px';
+                            }
+                            
+                            starMapContainer.appendChild(line);
+                        }
+                    }
+                }
+            }
+// Draw constellation lines
         constellations.forEach(constellation => {
             const stars = constellation.stars;
             for (let i = 0; i < stars.length - 1; i++) {

style.css

@@ -14,8 +14,13 @@ body {
     border-radius: 50%;
     box-shadow: 0 0 5px 1px rgba(255, 255, 255, 0.5);
     animation: twinkle 3s infinite alternate;
+    pointer-events: none;
 }
 
+#starMapContainer {
+    position: relative;
+    background: radial-gradient(ellipse at center, #1a202c 0%, #000000 100%);
+}
 .constellation-star {
     position: absolute;
     background-color: white;