Komosa/stoper.html

## stoper.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Stoper to keep your standup under control (at least it duration)</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
	body {
		text-align: center;
		align-items: center;
		justify-content: center;
	}
</style>

<script defer>
	function fmtTime(seconds) {
		if (seconds < 10) return "0" + seconds;
		if (seconds < 60) return seconds;
		return fmtTime(seconds / 60 | 0) + ":" + fmtTime(seconds % 60);
	}
	function diffTime(from, to) {
		return (from - to) / 1000 | 0;
	}
	function showDuration(from, to, maybeRed=0) {
		var dur = diffTime(from, to);
		return dur < 135 || !maybeRed ? fmtTime(dur)
			: "<font color=red>" + fmtTime(dur) + "</font>";
	}

	var totalStart = 0;
	var currStart = 0;
	var stopped = 0;

	setInterval(function() {
		if (totalStart == 0 || stopped) {
			return;
		}

		var now = Date.now();
		document.getElementById("curr") .innerHTML = showDuration(now, currStart, true);

		if (totalStart != currStart) {
			document.getElementById("total").innerHTML = showDuration(now, totalStart);
		}
	}, 1000);

	document.addEventListener('keydown', function(event) {
		if (event.keyCode != 32 && event.keyCode != 81) {
			return;
		}

		var prev = currStart;
		currStart = Date.now();
		if (totalStart == 0) {
			totalStart = currStart;
		} else {
			document.getElementById("log").innerHTML +=
				(prev != totalStart ? " + " : "")
				+ showDuration(currStart, prev);
		}

		if (event.keyCode == 81) {
			stopped = true;
			return;
		}
	});
</script>

</head>
<body>
	current:
	<h1><p id=curr></p></h1>
	<h5>total:
	<p id=total></p></h5>
	<h6>log:<p id=log></p></h6>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Stoper to keep your standup under control (at least it duration)</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<style>
	body {
	text-align: center;
	align-items: center;
	justify-content: center;
	}
	</style>

	<script defer>
	function fmtTime(seconds) {
	if (seconds < 10) return "0" + seconds;
	if (seconds < 60) return seconds;
	return fmtTime(seconds / 60 \| 0) + ":" + fmtTime(seconds % 60);
	}
	function diffTime(from, to) {
	return (from - to) / 1000 \| 0;
	}
	function showDuration(from, to, maybeRed=0) {
	var dur = diffTime(from, to);
	return dur < 135 \|\| !maybeRed ? fmtTime(dur)
	: "<font color=red>" + fmtTime(dur) + "</font>";
	}

	var totalStart = 0;
	var currStart = 0;
	var stopped = 0;

	setInterval(function() {
	if (totalStart == 0 \|\| stopped) {
	return;
	}

	var now = Date.now();
	document.getElementById("curr") .innerHTML = showDuration(now, currStart, true);

	if (totalStart != currStart) {
	document.getElementById("total").innerHTML = showDuration(now, totalStart);
	}
	}, 1000);

	document.addEventListener('keydown', function(event) {
	if (event.keyCode != 32 && event.keyCode != 81) {
	return;
	}

	var prev = currStart;
	currStart = Date.now();
	if (totalStart == 0) {
	totalStart = currStart;
	} else {
	document.getElementById("log").innerHTML +=
	(prev != totalStart ? " + " : "")
	+ showDuration(currStart, prev);
	}

	if (event.keyCode == 81) {
	stopped = true;
	return;
	}
	});
	</script>

	</head>
	<body>
	current:
	<h1><p id=curr></p></h1>
	<h5>total:
	<p id=total></p></h5>
	<h6>log:<p id=log></p></h6>
	</body>
	</html>