|
69 | 69 | .catch(err => console.error("SW registration failed", err)); |
70 | 70 | } |
71 | 71 | </script> |
| 72 | + |
| 73 | + |
| 74 | + <script> |
| 75 | + // Update Live Time |
| 76 | + function updateLiveTime() { |
| 77 | + const now = new Date(); |
| 78 | + let hours = now.getHours(); |
| 79 | + const minutes = now.getMinutes().toString().padStart(2, '0'); |
| 80 | + const seconds = now.getSeconds().toString().padStart(2, '0'); |
| 81 | + const ampm = hours >= 12 ? 'PM' : 'AM'; |
| 82 | + hours = hours % 12 || 12; |
| 83 | + const timeString = `${hours}:${minutes}:${seconds} ${ampm}`; |
| 84 | + |
| 85 | + const offset = now.getTimezoneOffset(); |
| 86 | + const offsetHours = Math.floor(Math.abs(offset) / 60); |
| 87 | + const offsetMinutes = Math.abs(offset) % 60; |
| 88 | + const offsetSign = offset > 0 ? '-' : '+'; |
| 89 | + const offsetString = `GMT${offsetSign}${offsetHours.toString().padStart(2, '0')}:${offsetMinutes.toString().padStart(2, '0')}`; |
| 90 | + |
| 91 | + document.getElementById('live-time').textContent = `⏰ Time: ${timeString} ${offsetString}`; |
| 92 | + } |
| 93 | + |
| 94 | + // Fetch and Display User Location using OpenStreetMap API |
| 95 | + function fetchUserLocation() { |
| 96 | + if (!navigator.geolocation) { |
| 97 | + document.getElementById('user-location').textContent = '📍 Location not supported'; |
| 98 | + return; |
| 99 | + } |
| 100 | + |
| 101 | + navigator.geolocation.getCurrentPosition(position => { |
| 102 | + const { latitude, longitude } = position.coords; |
| 103 | + // Using OpenStreetMap's Nominatim API for reverse geocoding: |
| 104 | + fetch(`https://nominatim.openstreetmap.org/reverse?format=jsonv2&lat=${latitude}&lon=${longitude}`) |
| 105 | + .then(response => response.json()) |
| 106 | + .then(data => { |
| 107 | + const city = data.address.city || data.address.town || data.address.village || "Unknown City"; |
| 108 | + const country = data.address.country || "Unknown Country"; |
| 109 | + document.getElementById('user-location').textContent = `📍 Location: ${city}, ${country}`; |
| 110 | + }) |
| 111 | + .catch(() => { |
| 112 | + document.getElementById('user-location').textContent = '📍 Location unavailable'; |
| 113 | + }); |
| 114 | + }, () => { |
| 115 | + document.getElementById('user-location').textContent = '📍 Location permission denied'; |
| 116 | + }); |
| 117 | + } |
| 118 | + |
| 119 | + // Initialize functions on load |
| 120 | + window.onload = () => { |
| 121 | + updateLiveTime(); |
| 122 | + setInterval(updateLiveTime, 1000); // Update every second |
| 123 | + fetchUserLocation(); |
| 124 | + }; |
| 125 | + </script> |
| 126 | + |
72 | 127 | </div> |
73 | 128 | </body> |
74 | 129 | </html> |
|
0 commit comments