Add current version

2020-12-13 17:46:16 +01:00 · 2020-12-13 17:46:16 +01:00 · a4a90bf61b
commit a4a90bf61b
1 changed files with 106 additions and 0 deletions
--- a/time.html
+++ b/time.html
@ -0,0 +1,106 @@
+<!DOCTYPE HTML>
+<html lang="en">
+	<head>
+	<meta charset="UTF-8">
+	<script>
+		let light = false;
+		let darkColor = "#000000";
+		let lightColor = "#ffffff";
+		const fontSizeFallback = 300;
+		let fontSizePx = 300;
+		let getStrings = [
+			function(){return (new Date()).toTimeString().split(" ")[0];},
+			function(){const a = (new Date()).toTimeString().split(" ")[0].split(":"); return a[0] + ":" + a[1];},
+			function(){const a = (new Date()).toTimeString().split(" ")[0].split(":"); return a[0];},
+			function(){const a = (new Date()).toTimeString().split(" ")[0].split(":"); return a[1];},
+			function(){const a = (new Date()).toTimeString().split(" ")[0].split(":"); return a[2];},
+		];
+		let getStrInd = 0;
+
+		document.addEventListener("keypress", keyPress);
+
+		function load() {
+			setLight();
+			setTime();
+			setSize();
+			setInterval(setTime, 200);
+		}
+
+		function keyPress(event) {
+			switch (event.key) {
+				case " ":
+					getStrInd = ((getStrInd + 1) % getStrings.length);
+					break;
+				case "c":
+					reverseColors();
+					break;
+				case "+":
+					fontSizePx *= 1.2;
+					setSize();
+					break;
+				case "-":
+					fontSizePx /= 1.2;
+					setSize();
+					break;
+				case "0":
+					fontSizePx = fontSizeFallback;
+					setSize();
+					break;
+				case "*":
+					fontSizePx *= 1.05;
+					setSize();
+					break;
+				case "_":
+					fontSizePx /= 1.05;
+					setSize();
+					break;
+
+			}
+		}
+
+
+		function setTime() {
+			document.getElementById("time").innerHTML = getStrings[getStrInd]();
+		}
+
+		function setSize() {
+			document.getElementById("time").style.fontSize = fontSizePx + "px";
+		}
+
+		function reverseColors() {
+			if (light) { setDark(); } else { setLight(); }
+		}
+
+		function setDark() {
+			document.body.style.background = darkColor;
+			document.getElementById("time").style.color = lightColor;
+			light = false;
+		}
+
+		function setLight() {
+			document.body.style.background = lightColor;
+			document.getElementById("time").style.color = darkColor;
+			light = true;
+		}
+	</script>
+	<style>
+		#time {
+			font-size: 16.0vw;
+			font-family: "Monoid";
+		}
+		.container {
+			position: absolute;
+			top: 50%;
+			left: 50%;
+			-moz-transform: translateX(-50%) translateY(-50%);
+			-webkit-transform: translateX(-50%) translateY(-50%);
+			transform: translateX(-50%) translateY(-50%);
+		}
+	</style>
+	</head>
+	<body onload="load();">
+		<div class="container">
+			<span id="time"></span>
+		</div>
+	</body>
+</html>