Komosa · September 19, 2017 07:38
diff --git a/stoper.html b/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>