Created
February 26, 2026 21:25
-
-
Save manics/3eda72a528fadbfaf2a1aa7231f91815 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Minimalist Speedometer</title> | |
| <style> | |
| body { font-family: sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; background: #121212; color: white; } | |
| #speed { font-size: 5rem; font-weight: bold; color: #00ff88; } | |
| .unit { font-size: 1.5rem; color: #888; } | |
| #status { margin-top: 20px; font-size: 0.9rem; color: #ff4444; } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="speed">0</div> | |
| <div class="unit">KM/H</div> | |
| <div id="status">Waiting for GPS...</div> | |
| <script> | |
| const speedDisplay = document.getElementById('speed'); | |
| const statusDisplay = document.getElementById('status'); | |
| // Check if the browser supports Geolocation | |
| if ("geolocation" in navigator) { | |
| // watchPosition triggers every time the GPS coordinates change | |
| navigator.geolocation.watchPosition( | |
| (position) => { | |
| statusDisplay.innerText = "Signal Active"; | |
| statusDisplay.style.color = "#00ff88"; | |
| // Speed is returned in meters per second (m/s) | |
| // We convert it to Kilometers per Hour (km/h) | |
| let speedMS = position.coords.speed; | |
| if (speedMS !== null && speedMS > 0) { | |
| let speedKMH = (speedMS * 3.6).toFixed(1); | |
| speedDisplay.innerText = speedKMH; | |
| } else { | |
| speedDisplay.innerText = "0"; | |
| } | |
| }, | |
| (error) => { | |
| statusDisplay.innerText = "Error: " + error.message; | |
| }, | |
| { | |
| enableHighAccuracy: true, // Forces the phone to use GPS, not just Wi-Fi | |
| timeout: 5000, | |
| maximumAge: 0 | |
| } | |
| ); | |
| } else { | |
| statusDisplay.innerText = "Geolocation not supported by this browser."; | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment