<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mohd Shahad</title>
<style>
* {
box-sizing: border-box;
font-family: monospace;
}
body {
margin: 0;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #f9fafb;
}
.container {
text-align: center;
}
h1 {
font-size: 3rem;
margin-bottom: 2.5rem;
}
.timer {
display: flex;
gap: 1.5rem;
justify-content: center;
}
.box {
background: #fff;
padding: 20px;
border-radius: 12px;
min-width: 90px;
box-shadow: 0 10px 25px rgba(0,0,0,.08);
}
.value {
display: block;
font-size: 2.5rem;
transform-origin: center bottom;
}
.label {
font-size: 0.8rem;
color: #777;
}
/* flip animation */
.flip {
animation: flip 0.4s ease;
}
@keyframes flip {
from {
transform: rotateX(90deg);
opacity: 0;
}
to {
transform: rotateX(0deg);
opacity: 1;
}
}
</style>
</head>
<body>
<div class="container">
<h1></h1>
<div class="timer">
<div class="box"><span id="d" class="value">0</span><div class="label">Days</div></div>
<div class="box"><span id="h" class="value">0</span><div class="label">Hours</div></div>
<div class="box"><span id="m" class="value">0</span><div class="label">Minutes</div></div>
<div class="box"><span id="s" class="value">0</span><div class="label">Seconds</div></div>
</div>
</div>
<script>
// Y2K38: Jan 19, 2038 03:14:07 UTC
const target = Date.UTC(2038, 0, 19, 3, 14, 7);
const els = {
d: document.getElementById("d"),
h: document.getElementById("h"),
m: document.getElementById("m"),
s: document.getElementById("s")
};
function update(el, value) {
if (el.textContent !== value.toString()) {
el.textContent = value;
el.classList.remove("flip");
void el.offsetWidth; // force reflow
el.classList.add("flip");
}
}
function tick() {
const diff = target - Date.now();
if (diff <= 0) return;
const days = Math.floor(diff / 86400000);
const hours = Math.floor(diff / 3600000) % 24;
const mins = Math.floor(diff / 60000) % 60;
const secs = Math.floor(diff / 1000) % 60;
update(els.d, days);
update(els.h, hours);
update(els.m, mins);
update(els.s, secs);
}
tick();
setInterval(tick, 1000);
</script>
</body>
</html>