get real planets position ,time laps s,h,DD,MM,YY

index.html

@@ -108,6 +108,10 @@
                 <div class="text-sm text-purple-300">
                     <span id="dateDisplay"></span>
                 </div>
+                <div class="text-sm text-yellow-400 flex items-center gap-2">
+                    <i data-feather="clock" class="w-4 h-4"></i>
+                    <span id="timeDisplay">Time Lapse: 0D</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>
@@ -159,11 +163,11 @@
         <div class="fixed bottom-4 left-4 glass-effect p-4 rounded-xl">
             <div class="space-y-4">
                 <div class="flex items-center gap-4">
-                    <label class="text-sm text-gray-300">Speed</label>
-                    <input type="range" id="speedSlider" min="0" max="10" value="1" step="0.1" class="w-32">
+                    <label class="text-sm text-gray-300">Time Speed</label>
+                    <input type="range" id="speedSlider" min="0" max="100" value="1" step="0.1" class="w-32">
                     <span id="speedValue" class="speed-indicator font-bold">1.0x</span>
                 </div>
-                <div class="flex items-center gap-4">
+<div class="flex items-center gap-4">
                     <label class="text-sm text-gray-300">Zoom</label>
                     <input type="range" id="zoomSlider" min="0.5" max="3" value="1" step="0.1" class="w-32">
                     <span id="zoomValue" class="text-purple-300 font-bold">1.0x</span>
@@ -178,7 +182,15 @@
                         <span>Reset</span>
                     </button>
                 </div>
-            </div>
+                <div class="time-controls">
+                    <span class="text-xs text-gray-400">Quick jump:</span>
+                    <div class="time-unit" data-time="1">1D</div>
+                    <div class="time-unit" data-time="7">1W</div>
+                    <div class="time-unit" data-time="30">1M</div>
+                    <div class="time-unit" data-time="365">1Y</div>
+                    <div class="time-unit" data-time="3650">10Y</div>
+                </div>
+</div>
         </div>
         
         <!-- Legend -->
@@ -223,7 +235,6 @@
                 </div>
             </div>
         </div>
-        
         <!-- Stats Display -->
         <div class="fixed top-24 right-4 glass-effect p-4 rounded-xl">
             <h3 class="text-sm font-bold mb-2 text-purple-300">Statistics</h3>
@@ -240,9 +251,13 @@
                     <span class="text-gray-400">Years Elapsed:</span>
                     <span id="yearsDisplay">0</span>
                 </div>
+                <div class="flex justify-between gap-4">
+                    <span class="text-gray-400">Current Date:</span>
+                    <span id="currentDateDisplay" class="text-blue-300"></span>
+                </div>
             </div>
         </div>
-    </div>
+</div>
     
     <script src="script.js"></script>
     <script>feather.replace();</script>

script.js

@@ -1,3 +1,4 @@
+
 // Solar System Simulation
 class SolarSystem {
     constructor() {
@@ -11,7 +12,9 @@ class SolarSystem {
         this.time = 0;
         this.fps = 60;
         this.lastFrameTime = performance.now();
-        this.daysElapsed = 0;
+        this.startDate = new Date();
+        this.currentDate = new Date();
+        this.timeLapseSpeed = 1; // days per frame
         
         this.planets = [
             {
@@ -19,147 +22,163 @@ class SolarSystem {
                 type: 'Terrestrial',
                 radius: 4,
                 distance: 60,
-                speed: 4.74,
+                orbitalPeriod: 87.97, // days
                 color: '#9CA3AF',
                 info: {
                     diameter: '4,879 km',
                     moons: 0,
-                    orbitalPeriod: '88 days'
-                }
+                    orbitalPeriod: '87.97 days'
+                },
+                eccentricity: 0.2056,
+                inclination: 7.0
             },
             {
                 name: 'Venus',
                 type: 'Terrestrial',
                 radius: 7,
                 distance: 85,
-                speed: 3.5,
+                orbitalPeriod: 224.70,
                 color: '#FEF3C7',
                 info: {
                     diameter: '12,104 km',
                     moons: 0,
-                    orbitalPeriod: '225 days'
-                }
+                    orbitalPeriod: '224.70 days'
+                },
+                eccentricity: 0.0067,
+                inclination: 3.39
             },
             {
                 name: 'Earth',
                 type: 'Terrestrial',
                 radius: 8,
                 distance: 110,
-                speed: 2.98,
+                orbitalPeriod: 365.26,
                 color: '#3B82F6',
                 info: {
                     diameter: '12,742 km',
                     moons: 1,
-                    orbitalPeriod: '365 days'
+                    orbitalPeriod: '365.26 days'
                 },
                 moons: [{
                     radius: 2,
                     distance: 15,
-                    speed: 13,
+                    orbitalPeriod: 27.32, // days
                     color: '#E5E7EB'
-                }]
+                }],
+                eccentricity: 0.0167,
+                inclination: 0.0
             },
             {
                 name: 'Mars',
                 type: 'Terrestrial',
                 radius: 5,
                 distance: 140,
-                speed: 2.41,
+                orbitalPeriod: 686.98,
                 color: '#EF4444',
                 info: {
                     diameter: '6,779 km',
                     moons: 2,
-                    orbitalPeriod: '687 days'
+                    orbitalPeriod: '686.98 days'
                 },
                 moons: [
                     {
                         radius: 1,
                         distance: 10,
-                        speed: 20,
+                        orbitalPeriod: 0.32, // days
                         color: '#F3F4F6'
                     },
                     {
                         radius: 1,
                         distance: 14,
-                        speed: 15,
+                        orbitalPeriod: 1.26, // days
                         color: '#D1D5DB'
                     }
-                ]
+                ],
+                eccentricity: 0.0935,
+                inclination: 1.85
             },
             {
                 name: 'Jupiter',
                 type: 'Gas Giant',
                 radius: 20,
                 distance: 200,
-                speed: 1.31,
+                orbitalPeriod: 4332.59,
                 color: '#FB923C',
                 info: {
                     diameter: '139,820 km',
                     moons: 79,
-                    orbitalPeriod: '12 years'
+                    orbitalPeriod: '11.86 years'
                 },
                 moons: [
                     {
                         radius: 2,
                         distance: 28,
-                        speed: 18,
+                        orbitalPeriod: 1.77, // days
                         color: '#FCD34D'
                     },
                     {
                         radius: 2,
                         distance: 35,
-                        speed: 14,
+                        orbitalPeriod: 3.55, // days
                         color: '#FDE68A'
                     }
-                ]
+                ],
+                eccentricity: 0.0489,
+                inclination: 1.31
             },
             {
                 name: 'Saturn',
                 type: 'Gas Giant',
                 radius: 17,
                 distance: 260,
-                speed: 0.97,
+                orbitalPeriod: 10759.22,
                 color: '#F59E0B',
                 hasRings: true,
                 info: {
                     diameter: '116,460 km',
                     moons: 82,
-                    orbitalPeriod: '29 years'
+                    orbitalPeriod: '29.46 years'
                 },
                 moons: [
                     {
                         radius: 3,
                         distance: 30,
-                        speed: 16,
+                        orbitalPeriod: 2.74, // days
                         color: '#FBBF24'
                     }
-                ]
+                ],
+                eccentricity: 0.0565,
+                inclination: 2.49
             },
             {
                 name: 'Uranus',
                 type: 'Ice Giant',
                 radius: 12,
                 distance: 320,
-                speed: 0.68,
+                orbitalPeriod: 30688.5,
                 color: '#06B6D4',
                 info: {
                     diameter: '50,724 km',
                     moons: 27,
-                    orbitalPeriod: '84 years'
-                }
+                    orbitalPeriod: '84.01 years'
+                },
+                eccentricity: 0.0457,
+                inclination: 0.77
             },
             {
                 name: 'Neptune',
                 type: 'Ice Giant',
                 radius: 11,
                 distance: 370,
-                speed: 0.54,
+                orbitalPeriod: 60182,
                 color: '#1E40AF',
                 info: {
                     diameter: '49,244 km',
                     moons: 14,
-                    orbitalPeriod: '165 years'
-                }
+                    orbitalPeriod: '164.79 years'
+                },
+                eccentricity: 0.0113,
+                inclination: 1.77
             }
         ];
         
@@ -173,8 +192,9 @@ class SolarSystem {
         this.animate();
         this.updateDate();
         this.updateLocation();
+        this.updateTimeDisplay();
         setInterval(() => this.updateDate(), 1000);
-        setInterval(() => this.updateLocation(), 30000); // Update location every 30 seconds
+        setInterval(() => this.updateLocation(), 30000);
     }
 resize() {
         this.canvas.width = window.innerWidth;
@@ -202,10 +222,10 @@ resize() {
         const speedSlider = document.getElementById('speedSlider');
         speedSlider.addEventListener('input', (e) => {
             this.speed = parseFloat(e.target.value);
+            this.timeLapseSpeed = this.speed * 0.1; // Convert to days per frame
             document.getElementById('speedValue').textContent = this.speed.toFixed(1) + 'x';
         });
-        
-        // Zoom control
+// Zoom control
         const zoomSlider = document.getElementById('zoomSlider');
         zoomSlider.addEventListener('input', (e) => {
             this.zoom = parseFloat(e.target.value);
@@ -221,20 +241,20 @@ resize() {
                 '<i data-feather="pause" class="w-4 h-4"></i><span>Pause</span>';
             feather.replace();
         });
-        
         // Reset button
         document.getElementById('resetBtn').addEventListener('click', () => {
             this.time = 0;
-            this.daysElapsed = 0;
+            this.currentDate = new Date();
             this.zoom = 1;
             this.speed = 1;
+            this.timeLapseSpeed = 0.1;
             document.getElementById('zoomSlider').value = 1;
             document.getElementById('speedSlider').value = 1;
             document.getElementById('zoomValue').textContent = '1.0x';
             document.getElementById('speedValue').textContent = '1.0x';
+            this.updateTimeDisplay();
         });
-        
-        // Fullscreen button
+// Fullscreen button
         document.getElementById('fullscreenBtn').addEventListener('click', () => {
             if (!document.fullscreenElement) {
                 document.documentElement.requestFullscreen();
@@ -253,12 +273,21 @@ resize() {
             document.getElementById('locationDisplay').textContent = 'Updating...';
             this.updateLocation();
         });
-// Close info panel
+        // Close info panel
         document.getElementById('closeInfo').addEventListener('click', () => {
             document.getElementById('planetInfo').classList.add('hidden');
         });
         
-        // Canvas click for planet info
+        // Time jump controls
+        document.querySelectorAll('.time-unit').forEach(unit => {
+            unit.addEventListener('click', (e) => {
+                const jumpDays = parseInt(e.target.dataset.time);
+                this.time += jumpDays / this.timeLapseSpeed;
+                this.updateTimeDisplay();
+                this.updateDate();
+            });
+        });
+// Canvas click for planet info
         this.canvas.addEventListener('click', (e) => {
             const rect = this.canvas.getBoundingClientRect();
             const x = e.clientX - rect.left - this.centerX;
@@ -277,7 +306,6 @@ resize() {
             }
         });
     }
-    
     showPlanetInfo(planet) {
         const info = document.getElementById('planetInfo');
         info.classList.remove('hidden');
@@ -288,17 +316,77 @@ resize() {
         document.getElementById('planetDiameter').textContent = planet.info.diameter;
         document.getElementById('planetMoons').textContent = planet.info.moons || 'None';
     }
+    
+    updateTimeDisplay() {
+        const timeDisplay = document.getElementById('timeDisplay');
+        if (timeDisplay) {
+            const days = Math.floor(this.timeLapseSpeed * this.time);
+            const years = Math.floor(days / 365.26);
+            const remainingDays = days % 365.26;
+            const months = Math.floor(remainingDays / 30.44);
+            const remainingDays2 = Math.floor(remainingDays % 30.44);
+            
+            let timeString = '';
+            if (years > 0) timeString += `${years}Y `;
+            if (months > 0) timeString += `${months}M `;
+            if (remainingDays2 > 0 || timeString === '') timeString += `${remainingDays2}D`;
+            
+            timeDisplay.textContent = `Time Lapse: ${timeString}`;
+        }
+    }
+    
+    calculatePlanetPosition(planet, elapsedTime) {
+        const meanAnomaly = (2 * Math.PI * elapsedTime) / planet.orbitalPeriod;
+        const eccentricity = planet.eccentricity || 0;
+        
+        // Solve Kepler's equation (simplified)
+        let E = meanAnomaly;
+        for (let i = 0; i < 5; i++) {
+            E = meanAnomaly + eccentricity * Math.sin(E);
+        }
+        
+        // True anomaly
+        const trueAnomaly = 2 * Math.atan2(
+            Math.sqrt(1 + eccentricity) * Math.sin(E / 2),
+            Math.sqrt(1 - eccentricity) * Math.cos(E / 2)
+        );
+        
+        // Distance from sun
+        const r = planet.distance * (1 - eccentricity * Math.cos(E));
+        
+        // Position
+        const x = r * Math.cos(trueAnomaly);
+        const y = r * Math.sin(trueAnomaly);
+        
+        // Apply inclination
+        const inclination = (planet.inclination || 0) * Math.PI / 180;
+        const yInclined = y * Math.cos(inclination);
+        
+        return { x, y: yInclined, r };
+    }
     updateDate() {
         const now = new Date();
         document.getElementById('dateDisplay').textContent = now.toLocaleDateString('en-US', { 
             weekday: 'long', 
             year: 'numeric', 
             month: 'long', 
-            day: 'numeric' 
+            day: 'numeric',
+            hour: '2-digit',
+            minute: '2-digit',
+            second: '2-digit'
         });
+        
+        // Update current date display
+        const currentDateDisplay = document.getElementById('currentDateDisplay');
+        if (currentDateDisplay) {
+            currentDateDisplay.textContent = this.currentDate.toLocaleDateString('en-US', {
+                month: 'short',
+                day: 'numeric',
+                year: 'numeric'
+            });
+        }
     }
-    
-    async updateLocation() {
+async updateLocation() {
         const locationDisplay = document.getElementById('locationDisplay');
         
         if (!navigator.geolocation) {
@@ -352,15 +440,16 @@ drawSun() {
         this.ctx.fill();
     }
 drawPlanet(planet) {
-        const angle = this.time * planet.speed * this.speed * 0.01;
-        const x = this.centerX + Math.cos(angle) * planet.distance * this.zoom;
-        const y = this.centerY + Math.sin(angle) * planet.distance * this.zoom;
+        const elapsedTime = this.timeLapseSpeed * this.time;
+        const position = this.calculatePlanetPosition(planet, elapsedTime);
+        const x = this.centerX + position.x * this.zoom;
+        const y = this.centerY + position.y * this.zoom;
         
-        // Draw orbit (simplified, no dash for performance)
+        // Draw orbit
         this.ctx.strokeStyle = 'rgba(147, 51, 234, 0.2)';
         this.ctx.lineWidth = 1;
         this.ctx.beginPath();
-        this.ctx.arc(this.centerX, this.centerY, planet.distance * this.zoom, 0, Math.PI * 2);
+        this.ctx.ellipse(this.centerX, this.centerY, planet.distance * this.zoom, planet.distance * this.zoom, 0, 0, Math.PI * 2);
         this.ctx.stroke();
         
         // Draw rings for Saturn
@@ -372,7 +461,7 @@ drawPlanet(planet) {
             this.ctx.stroke();
         }
         
-        // Draw planet (simplified without gradient for performance)
+        // Draw planet
         this.ctx.fillStyle = planet.color;
         this.ctx.beginPath();
         this.ctx.arc(x, y, planet.radius * this.zoom, 0, Math.PI * 2);
@@ -381,7 +470,8 @@ drawPlanet(planet) {
         // Draw moons
         if (planet.moons) {
             planet.moons.forEach(moon => {
-                const moonAngle = this.time * moon.speed * this.speed * 0.01;
+                const moonElapsedTime = this.timeLapseSpeed * this.time;
+                const moonAngle = (2 * Math.PI * moonElapsedTime) / moon.orbitalPeriod;
                 const moonX = x + Math.cos(moonAngle) * moon.distance * this.zoom;
                 const moonY = y + Math.sin(moonAngle) * moon.distance * this.zoom;
                 
@@ -392,13 +482,15 @@ drawPlanet(planet) {
             });
         }
         
-        // Draw planet name (only if zoom is sufficient)
+        // Draw planet name
         if (this.zoom > 0.8) {
             this.ctx.fillStyle = 'rgba(255, 255, 255, 0.7)';
             this.ctx.font = `${Math.max(10, 10 * this.zoom)}px Arial`;
             this.ctx.textAlign = 'center';
             this.ctx.fillText(planet.name, x, y - planet.radius * this.zoom - 5);
         }
+        
+        return { x, y, position };
     }
 adjustBrightness(color, amount) {
         const num = parseInt(color.replace('#', ''), 16);
@@ -417,14 +509,13 @@ adjustBrightness(color, amount) {
         
         // Draw planets
         this.planets.forEach(planet => this.drawPlanet(planet));
-        
         // Update time
         if (!this.isPaused) {
             this.time++;
-            this.daysElapsed += this.speed * 0.1;
+            this.currentDate = new Date(this.startDate.getTime() + this.timeLapseSpeed * this.time * 24 * 60 * 60 * 1000);
+            this.updateTimeDisplay();
         }
-        
-        // Update stats less frequently
+// Update stats less frequently
         if (this.time % 10 === 0) {
             this.updateStats();
         }
@@ -439,8 +530,9 @@ adjustBrightness(color, amount) {
     }
     updateStats() {
         document.getElementById('fpsDisplay').textContent = this.fps;
-        document.getElementById('daysDisplay').textContent = Math.floor(this.daysElapsed);
-        document.getElementById('yearsDisplay').textContent = (this.daysElapsed / 365).toFixed(2);
+        const totalDays = Math.floor(this.timeLapseSpeed * this.time);
+        document.getElementById('daysDisplay').textContent = totalDays;
+        document.getElementById('yearsDisplay').textContent = (totalDays / 365.26).toFixed(2);
     }
 }
 // Initialize the solar system

style.css

@@ -29,12 +29,35 @@
 ::-webkit-scrollbar-thumb:hover {
     background: linear-gradient(135deg, #a855f7, #f472b6);
 }
-
-#locationDisplay {
+#locationDisplay, #timeDisplay {
     cursor: pointer;
     transition: opacity 0.3s ease;
 }
 
-#locationDisplay:hover {
+#locationDisplay:hover, #timeDisplay:hover {
     opacity: 0.8;
 }
+
+.time-controls {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+}
+
+.time-unit {
+    padding: 4px 8px;
+    background: rgba(147, 51, 234, 0.2);
+    border-radius: 4px;
+    font-size: 12px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.time-unit:hover {
+    background: rgba(147, 51, 234, 0.4);
+    transform: scale(1.05);
+}
+
+.time-unit.active {
+    background: rgba(147, 51, 234, 0.6);
+}