2024-12-08 06:53 CST

1 files changed, 105 insertions, 0 deletions

diff --git a/served/bits/time.html b/served/bits/time.html
new file mode 100755
index 0000000..dc0ea0f
--- /dev/null
+++ b/served/bits/time.html
@@ -0,0 +1,105 @@
+---
+Template post
+Title  
+---
+
+<style>
+	@font-face {
+		font-family: 'Dosis';
+		font-weight: 200;
+		src: url('/Dosis-ExtraLight.otf');
+	}
+
+	#counter {
+		margin: 96px auto;
+		width: 15rem;
+
+		font-weight: normal;
+		font-family: 'Dosis', sans-serif;
+	}
+
+	#days {
+		width: min-content;
+		font-weight: 200;
+		font-size: 5rem;
+		font-family: inherit;
+	}
+
+	#time {
+		width: min-content;
+		font-weight: 200;
+		font-size: 4rem;
+		font-family: inherit;
+	}
+
+	#dates {
+		display: none !important;
+	}
+</style>
+
+<!-- Dosis: https://github.com/impallari/Dosis -->
+
+<section id="counter">
+	<h1 id="days"></h1>
+	<h2 id="time"><span id="hours"></span>:<span id="minutes"></span>:<span id="seconds"></span></h2>
+</section>
+
+<script>
+	const BIRTH = Date.parse("2001-04-13T02:56:00-05:00");
+	const SEC_DAY = 60 * 60 * 24;
+
+	function calculate() {
+		let now = Date.now();
+		let lif = Math.floor((now - BIRTH) / 1000);
+
+		let day = Math.floor(lif / SEC_DAY);
+		let sub_day = lif % (60 * 60 * 24);
+		let hou = Math.floor(sub_day / (60 * 60));
+		let min = Math.floor( (sub_day % (60 * 60)) / 60 );
+		let sec = sub_day % 60;
+
+		return {
+			days: day,
+			hours: hou,
+			minutes: min,
+			seconds: sec
+		}
+	}
+
+	let days_reposition = 0;
+	function display() {
+		let time = calculate();
+
+		let day = document.getElementById('days');
+		let hour = document.getElementById('hours');
+		let minute = document.getElementById('minutes');
+		let second = document.getElementById('seconds');
+
+		day.innerText = time.days;
+		hour.innerText = human(time.hours);
+		minute.innerText = human(time.minutes);
+		second.innerText = human(time.seconds);
+
+		if (days_reposition % 60 == 0) {
+			let time_width = document.getElementById('time').clientWidth;
+			let days = document.getElementById('days');
+
+			// Perfect half looks weird? Cheat left
+			let pad = (time_width - days.clientWidth) / 2.5;
+			days.style.paddingLeft = `${pad}px`;
+		}
+
+		days_reposition++;
+	}
+
+	function human(n) {
+		if (n < 10) {
+			return '0' + n;
+		} else {
+			return n;
+		}
+	}
+
+	setInterval(display, 1000);
+	display();
+</script>
\ No newline at end of file