Jonas_Jones/whattimeisit.jonasjones.dev
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

added intial file

Browse source
This commit is contained in:
Jonas_Jones 2025-08-21 17:29:30 +02:00
parent da39c6dd10
commit 75b7c5027d
1 changed files with 94 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

94
index.html Normal file
View file

@ -0,0 +1,94 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>World Clock</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
background: #f4f4f4;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
}
.clock {
background: white;
padding: 20px 40px;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
text-align: center;
font-size: 2em;
position: relative;
}
.offset {
font-size: 0.6em;
color: lightgray;
position: absolute;
top: 50px;
left: 40px;
}
.label {
font-size: 0.7em;
color: #666;
display: block;
margin-bottom: 5px;
}
.spacer {
height: 20px;
display: block;
}
</style>
</head>
<body>
<div class="container">
<div class="clock">
<span class="label">Frankfurt</span>
<span class="offset">-6h</span>
<span class="spacer"></span>
<span id="frankfurt-time"></span>
</div>
<div class="clock">
<span class="label">Shanghai</span>
<span class="offset">+6h</span>
<span class="spacer"></span>
<span id="shanghai-time"></span>
</div>
</div>
<script>
function updateClocks() {
const now = new Date();
const frankfurt = new Intl.DateTimeFormat("en-GB", {
timeZone: "Europe/Berlin",
hour: "2-digit",
minute: "2-digit",
second: "2-digit",
hour12: false
}).format(now);
const shanghai = new Intl.DateTimeFormat("en-GB", {
timeZone: "Asia/Shanghai",
hour: "2-digit",
minute: "2-digit",
second: "2-digit",
hour12: false
}).format(now);
document.getElementById("frankfurt-time").textContent = frankfurt;
document.getElementById("shanghai-time").textContent = shanghai;
}
setInterval(updateClocks, 1000);
updateClocks();
</script>
</body>
</html>