<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Orario e Coordinate GPS</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin-top: 50px;
        }
        #info {
            font-size: 24px;
            font-weight: bold;
            margin-top: 20px;
            display: block;
        }
    </style>
</head>
<body>
    <h1>Orario e Coordinate GPS</h1>
    <label id="info">--:--:-- | Lat: --, Lon: --</label>
    
    <script>
        function updateTimeAndLocation() {
            let now = new Date();
            let hours = now.getHours().toString().padStart(2, '0');
            let minutes = now.getMinutes().toString().padStart(2, '0');
            let seconds = now.getSeconds().toString().padStart(2, '0');
            let timeString = `${hours}:${minutes}:${seconds}`;
            
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(position => {
                    let lat = position.coords.latitude.toFixed(6);
                    let lon = position.coords.longitude.toFixed(6);
                    document.getElementById("info").textContent = `${timeString} | Lat: ${lat}, Lon: ${lon}`;
                }, () => {
                    document.getElementById("info").textContent = `${timeString} | Posizione non disponibile`;
                });
            } else {
                document.getElementById("info").textContent = `${timeString} | Geolocalizzazione non supportata`;
            }
        }
        
        updateTimeAndLocation(); // Aggiorna subito
        setInterval(updateTimeAndLocation, 5000); // Aggiorna ogni 10 secondi
    </script>
</body>
</html>
