112 lines
2.7 KiB
HTML
112 lines
2.7 KiB
HTML
<!DOCTYPE HTML>
|
|
<html lang="en">
|
|
<head>
|
|
<title>time</title>
|
|
<meta charset="UTF-8">
|
|
<script>
|
|
|
|
const darkColor = "#000000";
|
|
const lightColor = "#ffffff";
|
|
const fontSizeFallbackPx = 300;
|
|
const intervalMillisec = 200;
|
|
const bigFontSizeFactor = 1.2;
|
|
|
|
let light = false;
|
|
let help = false;
|
|
let fontSizePx = fontSizeFallbackPx;
|
|
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;
|
|
|
|
function load() {
|
|
setTime();
|
|
setSize();
|
|
setColors();
|
|
setInterval(setTime, intervalMillisec);
|
|
}
|
|
|
|
function setTime() {
|
|
let str = getStrings[getStrInd]();
|
|
document.getElementById("time").innerHTML = str;
|
|
document.title = str;
|
|
}
|
|
|
|
function setSize() {
|
|
document.getElementById("time").style.fontSize = fontSizePx + "px";
|
|
}
|
|
|
|
function setColors() {
|
|
const txt = light ? darkColor : lightColor;
|
|
const back = light ? lightColor : darkColor;
|
|
document.body.style.background = back;
|
|
document.body.style.color = txt;
|
|
document.getElementById("time").style.color = txt;
|
|
}
|
|
|
|
document.addEventListener("keypress", keyPress);
|
|
|
|
function keyPress(event) {
|
|
switch (event.key) {
|
|
case " ":
|
|
getStrInd = ((getStrInd + 1) % getStrings.length);
|
|
break;
|
|
case "c":
|
|
light = !light;
|
|
setColors();
|
|
break;
|
|
case "+":
|
|
fontSizePx *= bigFontSizeFactor;
|
|
setSize();
|
|
break;
|
|
case "-":
|
|
fontSizePx /= bigFontSizeFactor;
|
|
setSize();
|
|
break;
|
|
case "0":
|
|
fontSizePx = fontSizeFallbackPx;
|
|
setSize();
|
|
break;
|
|
case "h":
|
|
toggleHelp();
|
|
break;
|
|
}
|
|
}
|
|
|
|
function toggleHelp() {
|
|
help = !help;
|
|
let elements = document.getElementsByClassName("help");
|
|
for (let element of elements) {
|
|
element.style.display = help ? "block" : "none";
|
|
}
|
|
}
|
|
|
|
</script>
|
|
<style>
|
|
body {
|
|
font-family: monospace;
|
|
text-align: center;
|
|
}
|
|
.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 class="help" style="display:none"><b>Space</b> sweeps through clock-displays | <b>c</b> toggles the colors | <b>+</b> increases size | <b>-</b> decreases size | <b>0</b> resets font size</span>
|
|
<span id="time"></span>
|
|
<span class="help" style="display:none"><a href="https://github.com/benstadlbauer/time">Repository on GitHub</a></span>
|
|
</div>
|
|
</body>
|
|
</html>
|