AtHeartEngineer/personal_timezone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added UTC and timezone display

Browse Source
This commit is contained in:
AtHeartEngineer
2025-08-26 20:56:14 -04:00
parent 833070d49f
commit 6194e5f493
1 changed files with 65 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
index.html
View File

@@ -39,6 +39,8 @@
<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>
@@ -48,6 +50,8 @@
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.';
@@ -62,15 +66,71 @@
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();
// Calculate 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 = personalTime.toLocaleTimeString('en-US', {
// 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();