180 lines
5 KiB
HTML
180 lines
5 KiB
HTML
<!DOCTYPE HTML>
|
|
<html lang="en">
|
|
<head>
|
|
<title>time</title>
|
|
<meta charset="UTF-8">
|
|
<script>
|
|
|
|
const fontSizeFallbackPx = 300;
|
|
const intervalMillisec = 200;
|
|
const fontSizeFactor = 1.2;
|
|
const rgbSedecimalRe = /[\da-fA-F]{6}/
|
|
|
|
let schemes = {
|
|
index: 0,
|
|
colors: [
|
|
{text: "#ffffff", background: "#000000"},
|
|
{text: "#a0a0a0", background: "#101010"},
|
|
{text: "#ff0000", background: "#000000"},
|
|
{text: "#000000", background: "#ffffff"},
|
|
{text: "#101010", background: "#a0a0a0"},
|
|
{text: "#000000", background: "#ff0000"},
|
|
],
|
|
};
|
|
|
|
let color = schemes.colors[schemes.index];
|
|
let help = false;
|
|
let settings = 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;
|
|
let darkColorInput;
|
|
let lightColorInput;
|
|
|
|
function load() {
|
|
document.addEventListener("keydown", handleHotKey);
|
|
let inputs = document.getElementsByTagName("input")
|
|
for (let input of inputs) {
|
|
if (input.type == "color") {
|
|
input.addEventListener("input", e => writeColor(e));
|
|
input.addEventListener("change", e => writeColor(e));
|
|
}
|
|
}
|
|
|
|
setTime();
|
|
setSize();
|
|
setColors();
|
|
setColorsToInput();
|
|
setInterval(setTime, intervalMillisec);
|
|
}
|
|
|
|
function setTime() {
|
|
let str = getStrings[getStrInd]();
|
|
document.getElementById("time").innerHTML = str;
|
|
document.getElementById("time-preview").innerHTML = str;
|
|
document.title = str;
|
|
}
|
|
|
|
function setSize() {
|
|
document.getElementById("time").style.fontSize = fontSizePx + "px";
|
|
}
|
|
|
|
function setColors() {
|
|
document.body.style.background = color.background;
|
|
document.body.style.color = color.text;
|
|
document.getElementById("time").style.color = color.text;
|
|
}
|
|
|
|
function handleHotKey(event) {
|
|
if (event.repeat && !(event.key==="+" || event.key==="-")) return;
|
|
switch (event.key) {
|
|
case " ":
|
|
getStrInd = ((getStrInd + 1) % getStrings.length);
|
|
setTime();
|
|
break;
|
|
case "c":
|
|
schemes.index = ((schemes.index + 1) % schemes.colors.length + schemes.colors.length) % schemes.colors.length;
|
|
color = schemes.colors[schemes.index];
|
|
setColors();
|
|
setColorsToInput();
|
|
break;
|
|
case "C":
|
|
schemes.index = ((schemes.index - 1) % schemes.colors.length + schemes.colors.length) % schemes.colors.length;
|
|
color = schemes.colors[schemes.index];
|
|
setColors();
|
|
setColorsToInput();
|
|
break;
|
|
case "+":
|
|
fontSizePx *= fontSizeFactor;
|
|
setSize();
|
|
break;
|
|
case "-":
|
|
fontSizePx /= fontSizeFactor;
|
|
setSize();
|
|
break;
|
|
case "0":
|
|
fontSizePx = fontSizeFallbackPx;
|
|
setSize();
|
|
break;
|
|
case "h":
|
|
toggleHelp();
|
|
break;
|
|
case "s":
|
|
toggleSettings();
|
|
break;
|
|
}
|
|
}
|
|
|
|
function toggleHelp() {
|
|
help = !help;
|
|
let elements = document.getElementsByClassName("help");
|
|
for (let element of elements) {
|
|
element.style.display = help ? "block" : "none";
|
|
}
|
|
}
|
|
|
|
function toggleSettings() {
|
|
settings = !settings;
|
|
document.getElementById("time-container").style.display = settings ? "none" : "block";
|
|
document.getElementById("settings-container").style.display = settings ? "block" : "none";
|
|
}
|
|
|
|
function setColorsToInput() {
|
|
document.getElementById("text-color").value = color.text;
|
|
document.getElementById("background-color").value = color.background;
|
|
}
|
|
|
|
function writeColor(event) {
|
|
color[event.target.id.split("-")[0]] = event.target.value;
|
|
setColors();
|
|
}
|
|
|
|
function saveColorsToSchemes() {
|
|
alert("sorry, not supported yet ;)");
|
|
}
|
|
</script>
|
|
<style>
|
|
body {
|
|
font-family: monospace;
|
|
}
|
|
input {
|
|
font-family: monospace;
|
|
font-weight: 600;
|
|
}
|
|
#time-container {
|
|
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" id="time-container">
|
|
<span class="help" style="display:none"><b>Space</b> sweeps through clock-displays | <b>c</b>, <b>shift-c</b> sweeps through the color-schemes | <b>+</b> increases size | <b>-</b> decreases size | <b>0</b> resets font size | <b>s</b> settings</span>
|
|
<span id="time"></span>
|
|
<span class="help" style="display:none"><a href="https://benjamin.stadlbauer.wien/git/Benjamin/time">Repository on Forgejo</a></span>
|
|
</div>
|
|
<div class="container" id="settings-container" style="display: none;">
|
|
<label for="text-color">Text color</label> <input type="color" id="text-color">
|
|
<label for="background-color" style="margin-top: 3px">Background color</label> <input type="color" id="background-color" style="margin-top: 3px">
|
|
<button onclick="saveColorsToSchemes();" style="margin-top: 3px" disabled>Save to schemes</button>
|
|
<p>
|
|
<span id="time-preview"></span>
|
|
</p>
|
|
</div>
|
|
</body>
|
|
</html>
|