166 lines
6.4 KiB
HTML
166 lines
6.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Personal Timezone</title>
|
|
<style>
|
|
body {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 100vh;
|
|
background-color: #121212;
|
|
color: #ffffff;
|
|
font-family: Arial, sans-serif;
|
|
margin: 0;
|
|
}
|
|
.container {
|
|
text-align: center;
|
|
}
|
|
h1 {
|
|
font-size: 2em;
|
|
margin-bottom: 0.5em;
|
|
}
|
|
h2 {
|
|
font-size: 1.5em;
|
|
margin: 0.5em 0;
|
|
}
|
|
.status {
|
|
margin-top: 1em;
|
|
font-size: 1em;
|
|
color: #ff5722;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>Personal Timezone</h1>
|
|
<h2 id="personal-time">Loading...</h2>
|
|
<div id="longitude"></div>
|
|
<div id="offset"></div>
|
|
<div id="utc-time"></div>
|
|
<div id="closest-timezone"></div>
|
|
<div class="status" id="status">Fetching location...</div>
|
|
</div>
|
|
<script>
|
|
(async function () {
|
|
try {
|
|
const statusElement = document.getElementById('status');
|
|
const longitudeElement = document.getElementById('longitude');
|
|
const offsetElement = document.getElementById('offset');
|
|
const personalTimeElement = document.getElementById('personal-time');
|
|
const utcTimeElement = document.getElementById('utc-time');
|
|
const closestTimezoneElement = document.getElementById('closest-timezone');
|
|
|
|
if (!navigator.geolocation) {
|
|
statusElement.textContent = 'Geolocation is not supported by your browser.';
|
|
return;
|
|
}
|
|
|
|
navigator.geolocation.getCurrentPosition(
|
|
(position) => {
|
|
const { longitude } = position.coords;
|
|
const offset = longitude / 15;
|
|
longitudeElement.textContent = `Longitude: ${longitude.toFixed(2)}°`;
|
|
offsetElement.textContent = `Offset: ${offset.toFixed(2)} hours`;
|
|
statusElement.textContent = '';
|
|
|
|
// Timezone data with approximate longitude centers
|
|
const timezones = [
|
|
{ name: 'UTC', offset: 0, longitude: 0 },
|
|
{ name: 'UTC+1', offset: 1, longitude: 15 },
|
|
{ name: 'UTC+2', offset: 2, longitude: 30 },
|
|
{ name: 'UTC+3', offset: 3, longitude: 45 },
|
|
{ name: 'UTC+4', offset: 4, longitude: 60 },
|
|
{ name: 'UTC+5', offset: 5, longitude: 75 },
|
|
{ name: 'UTC+5:30', offset: 5.5, longitude: 82.5 },
|
|
{ name: 'UTC+6', offset: 6, longitude: 90 },
|
|
{ name: 'UTC+7', offset: 7, longitude: 105 },
|
|
{ name: 'UTC+8', offset: 8, longitude: 120 },
|
|
{ name: 'UTC+9', offset: 9, longitude: 135 },
|
|
{ name: 'UTC+9:30', offset: 9.5, longitude: 142.5 },
|
|
{ name: 'UTC+10', offset: 10, longitude: 150 },
|
|
{ name: 'UTC+11', offset: 11, longitude: 165 },
|
|
{ name: 'UTC+12', offset: 12, longitude: 180 },
|
|
{ name: 'UTC-1', offset: -1, longitude: -15 },
|
|
{ name: 'UTC-2', offset: -2, longitude: -30 },
|
|
{ name: 'UTC-3', offset: -3, longitude: -45 },
|
|
{ name: 'UTC-4', offset: -4, longitude: -60 },
|
|
{ name: 'UTC-5', offset: -5, longitude: -75 },
|
|
{ name: 'UTC-6', offset: -6, longitude: -90 },
|
|
{ name: 'UTC-7', offset: -7, longitude: -105 },
|
|
{ name: 'UTC-8', offset: -8, longitude: -120 },
|
|
{ name: 'UTC-9', offset: -9, longitude: -135 },
|
|
{ name: 'UTC-10', offset: -10, longitude: -150 },
|
|
{ name: 'UTC-11', offset: -11, longitude: -165 },
|
|
{ name: 'UTC-12', offset: -12, longitude: -180 }
|
|
];
|
|
|
|
function findClosestTimezone(longitude) {
|
|
let closest = timezones[0];
|
|
let minDistance = Math.abs(longitude - closest.longitude);
|
|
|
|
for (const tz of timezones) {
|
|
const distance = Math.abs(longitude - tz.longitude);
|
|
if (distance < minDistance) {
|
|
minDistance = distance;
|
|
closest = tz;
|
|
}
|
|
}
|
|
return closest;
|
|
}
|
|
|
|
const closestTimezone = findClosestTimezone(longitude);
|
|
closestTimezoneElement.textContent = `Closest timezone: ${closestTimezone.name}`;
|
|
|
|
function updateTime() {
|
|
const now = new Date();
|
|
|
|
// UTC time
|
|
const utcTime = new Date(now.getTime() + now.getTimezoneOffset() * 60000);
|
|
utcTimeElement.textContent = `UTC time: ${utcTime.toLocaleTimeString('en-US', {
|
|
hour12: false,
|
|
timeZone: 'UTC'
|
|
})}`;
|
|
|
|
// Personal time based on longitude offset from UTC
|
|
// Each 15 degrees of longitude represents roughly 1 hour
|
|
const personalTime = new Date(now.getTime() + offset * 3600000);
|
|
personalTimeElement.textContent = `Personal time: ${personalTime.toLocaleTimeString(
|
|
'en-US',
|
|
{ hour12: false, timeZone: 'UTC' }
|
|
)}`;
|
|
}
|
|
|
|
updateTime();
|
|
setInterval(updateTime, 1000);
|
|
},
|
|
(error) => {
|
|
let errorMessage = 'Unable to retrieve your location.';
|
|
switch (error.code) {
|
|
case error.PERMISSION_DENIED:
|
|
errorMessage = 'User denied the request for Geolocation.';
|
|
break;
|
|
case error.POSITION_UNAVAILABLE:
|
|
errorMessage = 'Location information is unavailable.';
|
|
break;
|
|
case error.TIMEOUT:
|
|
errorMessage = 'The request to get user location timed out.';
|
|
break;
|
|
case error.UNKNOWN_ERROR:
|
|
errorMessage = 'An unknown error occurred.';
|
|
break;
|
|
}
|
|
console.error('Geolocation error:', error);
|
|
statusElement.textContent = errorMessage;
|
|
}
|
|
);
|
|
} catch (error) {
|
|
document.getElementById('status').textContent = 'An error occurred: ' + error.message;
|
|
}
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|