|
<!doctype html> |
|
<html> |
|
<head> |
|
<meta charset=utf-8> |
|
<meta name="viewport" content="width=device-width,initial-scale=1"/> |
|
<title>Display times in the viewer’s local timezone</title> |
|
|
|
<style> |
|
:root { |
|
--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; |
|
--body-color: #333; |
|
} |
|
|
|
html { |
|
box-sizing: border-box; |
|
} |
|
*, *:before, *:after { |
|
box-sizing: inherit; |
|
} |
|
|
|
html, body { |
|
height: 100%; |
|
} |
|
|
|
body { |
|
font-family: var(--font-family); |
|
text-align: center; |
|
line-height: 1.4; |
|
font-size: 1.5em; |
|
display: grid; |
|
justify-content: center; |
|
align-content: center; |
|
color: var(--body-color); |
|
margin: 1em; |
|
} |
|
|
|
h1, time { |
|
font-weight: 500; |
|
line-height: 1.35; |
|
} |
|
|
|
h1 { |
|
margin: 0.4em 0; |
|
} |
|
|
|
time, #datetime-select { |
|
font-size: 1.5em; |
|
} |
|
|
|
#datetime-select { |
|
font-family: var(--font-family); |
|
color: var(--body-color); |
|
max-width: 90% |
|
} |
|
|
|
#info { |
|
font-size: 0.8em; |
|
max-width: 90%; |
|
margin: 1em auto; |
|
} |
|
|
|
@media (max-width: 480px) { |
|
body { |
|
font-size: 1.1em; |
|
} |
|
} |
|
</style> |
|
|
|
</head> |
|
<body> |
|
<section id="edit"> |
|
<h1>Enter your time:</h1> |
|
<input type="datetime-local" id="datetime-select" /> |
|
<p id="info">This page only works in <a href="https://caniuse.com/#feat=mdn-html_elements_input_input-datetime-local">these browsers</a>.</p> |
|
</section> |
|
<section id="display"> |
|
<time class="timezone yours"></time> |
|
<p><a href="/">Make your own time link!</a></p> |
|
</section> |
|
|
|
<script> |
|
'use strict' |
|
const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone, |
|
locale = (navigator.languages && navigator.languages.length) ? navigator.languages[0] : navigator.language, |
|
input = document.getElementById('datetime-select'), |
|
info = document.getElementById('info'), |
|
editSection = document.getElementById('edit'), |
|
displaySection = document.getElementById('display'), |
|
timeYours = document.querySelector('time.yours'), |
|
tzYours = document.querySelector('span.yours') |
|
|
|
const onLoad = () => { |
|
const time = new URLSearchParams(window.location.search).get('time') |
|
if (time) { |
|
const dateString = parseDate(time) |
|
editSection.style.display = 'none' |
|
timeYours.innerHTML = dateString |
|
document.title = dateString |
|
} else { |
|
displaySection.style.display = 'none' |
|
} |
|
} |
|
|
|
const buildUrl = (date) => |
|
`?time=${(new Date(date).getTime() / 1000).toFixed(0)}` |
|
|
|
const parseDate = (timestamp) => [ |
|
new Date(Number(timestamp) * 1000).toLocaleString(locale, { |
|
weekday: 'long', |
|
year: 'numeric', |
|
month: 'long', |
|
day: 'numeric' |
|
}), |
|
new Date(Number(timestamp) * 1000).toLocaleString(locale, { |
|
hour: 'numeric', |
|
minute: '2-digit', |
|
timeZoneName: 'long' |
|
}) |
|
].join('<br/>') |
|
|
|
input.addEventListener('change', ev => { |
|
const date = new Date(ev.target.value) |
|
history.replaceState({}, "", buildUrl(date)) |
|
info.innerHTML = "Share the current URL of this page, and others will see your chosen time in their time zone!" |
|
}) |
|
|
|
onLoad() |
|
</script> |
|
</body> |
|
</html> |
