timer.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Big Clock: Timer</title>
	<meta name="description" content="A timer, but BIG!">
	<meta name="keywords" content="clock, timer, big">
	<meta name="author" content="virtualgeoff">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="color-scheme" content="light dark">
	<link rel="icon" href="data:,">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<style>

		html, body {height:100%; margin:0; padding:0;}
		body {height:calc(100% + 31020px); font-size:1em; font-family:'Courier', monospace;}

		h1 {}
		p {}
		small {font-size:0.667em;}
		button {width:5em; padding:0.5em; font-size:1em; cursor:pointer;}

		table {border:1px solid rgba(128,128,128,0.2); border-collapse:collapse;}
		th {padding:0.1em 1em; text-align:center; border:1px solid rgba(128,128,128,0.2);}
		td {padding:0.1em 1em; text-align:right;  border:1px solid rgba(128,128,128,0.2);}

		a {text-decoration:none; opacity:60%}
		a:hover {text-decoration:underline; opacity:100%}

		/* nav */
		#nav {position:fixed; left:0.5em; top:0; margin:0.6em; z-index:99;}
		#nav.shifted {top:5.0em;}
		#nav ul {display:none; width:auto; margin:0; padding:0.5em 1em 0.5em 0.3em; list-style:none; border:1px solid #000;}
		#nav:hover ul {display:block;}
		#nav li {margin:0; padding:0; white-space:nowrap;}
		#nav li a {display:block; margin:0; padding:0.3em;}
		#nav > a {font-size:1.5em;}

		/* main layout */
		#main {position:fixed; left:0; top:0; width:100%; height:100%;}
		#date, #time, #buttons {margin:0; padding:0; font-size:4em; font-weight:normal; text-align:center;}
		#date {padding-top:2em; line-height:0.75; opacity:0.3;}
		#time {margin-top:1em; font-size:10em; line-height:0.75;}
		#buttons {margin-top:2em; font-size:1.5em; line-height:0.9;}
		#setTimer {margin:1em 0 0 0; font-size:1.5em; text-align:center;}

		#setTimerText {}
		#setTimerForm {display:none; margin-top:-0.3em;}
		#setTimerForm input {margin-right:2px; width:2em; font-size:1em;} /* width for firefox */
		#setTimerForm input[name="dd"] {width:2.5em;}
		#setTimerForm input[type="submit"] {width:3em; font-size:1em;}

		/* colors */
		body {color:#111; background:#fff;}
		a {color:#111;}
		a:visited {color:#111;}
		#nav ul {background:#fff; border-color:#111;}

		body.Light {color:#111; background:#fff;}
		body.Light a {color:#111;}
		body.Light a:visited {color:#111;}
		body.Light #nav ul {background:#fff; border-color:#111;}

		body.Dark {color:#eee; background:#000;}
		body.Dark a {color:#ddd;}
		body.Dark a:visited {color:#ddd;}
		body.Dark #nav ul {background:#000; border-color:#ddd;}

		@media all and (prefers-color-scheme: dark) {
			body {color:#eee; background:#000;}
			a {color:#ddd;}
			a:visited {color:#ddd;}
			#nav ul {background:#000; border-color:#ddd;}
		}

		@media all and (max-width:500px) {
			/* increase button size on small screens */
			button {font-size:2em;}
		}

	</style>
	<script>

		/* jshint esversion: 5 */

		var date, time, buttons, setTimer;
		var showHundredths = true; // timer always shows hundredths
		var colors = {dynamic:false};
		var iPad = false;

		// Date.now shim
		if (!Date.now) {
			Date.now = function() { return new Date().getTime(); };
		}

		function checkIPad() {
			// check device
			if (navigator.userAgent.match(/iPad/i) || ((navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1) && !window.MSStream)) {
				iPad = true;
			}
		}

		function toggleNav(e) {
			var navlist = document.getElementById('navlist');
			navlist.style.display = (navlist.style.display === 'block') ? 'none' : 'block';
			return false;
		}

		function checkFullscreenAvailable() {
			// check if fullscreen is available, and if so, add a link
			// note: iPhone does not support fullscreen
			var dE = document.documentElement;
			if (dE.requestFullscreen || dE.webkitRequestFullScreen) {
				document.getElementById('navlist').innerHTML += '<li><a href="#" title="Make full screen" onclick="return toggleFullscreen();">Fullscreen</a></li>';
			}
		}

		function checkFullscreen() {
			// check if currently in fullscreen mode
			if ((window.innerWidth === screen.width) && (window.innerHeight === screen.height) ||
			  (window.innerWidth === screen.height) && (window.innerHeight === screen.width)) {
				// add class to #nav to move it away from big x
				if (iPad) { document.getElementById('nav').className = 'shifted'; }
			} else {
				if (iPad) { document.getElementById('nav').className = ''; }
			}
		}

		function toggleFullscreen(e) {
			// toggle fullscreen mode
			var d = document, dE = d.documentElement;

			if (d.fullscreenElement || d.webkitFullscreenElement) {
				if (d.exitFullscreen) {
					d.exitFullscreen();
				} else if (d.webkitCancelFullScreen) {
					d.webkitCancelFullScreen();
				}
			} else {
				if (dE.requestFullscreen) {
					dE.requestFullscreen();
				} else if (dE.webkitRequestFullScreen) {
					dE.webkitRequestFullScreen();
				}
			}
			return false;
		}

		function storageAvailable(type) {
			// check for Storage API
			try {
				var storage = window[type],
					x = '__storage_test__';
				storage.setItem(x, x);
				storage.removeItem(x);
				return true;
			} catch(e) {
				return e instanceof DOMException && (
					e.code === 22 || e.code === 1014 ||
					e.name === 'QuotaExceededError' ||
					e.name === 'NS_ERROR_DOM_QUOTA_REACHED'
				) && storage.length !== 0;
			}
		}

		function getOptions() {
			// load options from localStorage on page load, and set colors, font, ...
			if (!storageAvailable('localStorage')) { return; }

			var colorScheme = localStorage.getItem('colorScheme');
			var fontFamily  = localStorage.getItem('fontFamily');
			var timerData  = localStorage.getItem('timerData');

			if (colorScheme) {
				document.body.className = colorScheme;
				if (colorScheme === 'Dynamic') {
					colors.dynamic = true;
				} else if (colorScheme === 'Custom') {
					colors.text = localStorage.getItem('colorText') || '#000000';
					colors.bg   = localStorage.getItem('colorBG')   || '#ff7700';
					changeColors();
				}
			}
			if (fontFamily) {
				document.body.style.fontFamily = fontFamily;
			}
			if (timerData) {
				Timer.setData(timerData);
			}
		}

		function setDynamicColors(now) {
			// set colors based on the current local time
			colors.h = (now.getHours() + now.getMinutes()/60) * 15; // 0-360°
			colors.s = now.getMinutes() + 40; // 40-100%
			colors.l = (now.getSeconds() + now.getMilliseconds()/1000) + 20; // 20-80%;
			colors.bg = 'hsl(' + colors.h + ', ' + colors.s + '%, '+ colors.l + '%)';
			colors.text = (colors.l > 50) ? '#111' : '#ddd';
			changeColors();
		}

		function changeColors() {
			// change text, link, and background colors
			document.body.style.backgroundColor = colors.bg;
			document.body.style.color = colors.text;
			document.getElementById('navlist').style.backgroundColor = colors.bg;
			document.getElementById('navlist').style.borderColor = colors.text;

			for (var i=0; i<document.links.length; i++) {
				document.links[i].style.color = colors.text;
			}
		}

		function resize() {
			// size and postion the text
			// could use vw units and display:flex, but want to stick to CSS 2.1
			var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
				h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight,
				vw = w/100,
				fs = 19,	// font size
				lh = 0.75,	// line height
				mh;			// margin height

			// set font size and reduce if too wide
			time.style.fontSize = fs * vw + 'px'; // = 19vw
			while ((time.scrollWidth > time.clientWidth) && (fs > 9)) {
				fs--;
				time.style.fontSize = fs * vw + 'px';
				console.log('font size: ' + fs + 'vw, ' + (fs * vw) + 'px');
			}
			date.style.fontSize = 5 * vw + 'px';
			buttons.style.fontSize = 2.5 * vw + 'px';
			setTimer.style.fontSize = 2.5 * vw + 'px';

			// calculate margins to space evenly
			mh = (h - ((fs + 15) * lh * vw)) / 5; // 15 = 3 lines * 5vw
			date.style.paddingTop = mh + 'px';
			time.style.marginTop = mh + 'px';
			buttons.style.marginTop = mh + 'px';
			setTimer.style.marginTop = mh + 'px';

			// finally, check if fullscreen
			checkFullscreen();
		}

		function showTimerForm() {
			document.getElementById('setTimerForm').style.display = 'block';
			document.getElementById('setTimerText').style.display = 'none';
			return false;
		}
		function hideTimerForm() {
			document.getElementById('setTimerForm').style.display = 'none';
			document.getElementById('setTimerText').style.display = 'block';
			return false;
		}

		var Timer = (function() {
			// timer data and methods
			var isRunning = false,
				endTime = null,
				duration = 300000, // = 5 minutes
				timeRemaining = duration;

			var timeStr, years, days, hours, minutes, seconds, hundredths, milliseconds, textLength;

			function setData(data) {
				// set timer data (on page load)
				// this would be easier with JSON, but IE7
				var arr = data.split(',');
				//console.log(arr);
				isRunning     = (arr[0] == 'true') ? true : false;
				endTime       = parseInt(arr[1]) || null;
				duration      = parseInt(arr[2]) || null;
				timeRemaining = parseInt(arr[3]) || null;
				if (isRunning) { document.getElementById('start').innerText = 'Stop'; }
				update();
				if (colors.dynamic && !isRunning) { setDynamicColors(new Date(timeRemaining)); } // to make up not updating colors in update
			}

			function saveData() {
				// save timer data to localStorage
				if (storageAvailable('localStorage')) {
					localStorage.setItem('timerData', [isRunning, endTime, duration, timeRemaining]);
				}
			}

			function setDuration(form) {
				// set duration via form
				if (!isRunning) {
					duration = (parseInt(form.dd.value * 86400) + parseInt(form.hh.value * 3600) + parseInt(form.mm.value * 60) + parseInt(form.ss.value)) * 1000;
					timeRemaining = duration;
					update();
				}
			}

			function setDurationScroll() {
				// set duration via page scroll
				var n = parseInt(document.documentElement.scrollTop / 20);
				if (n < 1) n = 1;
				var d = 1;

				if (!isRunning) {
					if (n <= 60) {
						d = n; // 0-60s
					} else if (n <= 114) {
						d = (n-60) * 10 + 60; // 1-10m in 10s steps
					} else if (n <= 164) {
						d = (n-114) * 60 + 600; // 10-60m in 1m steps
					} else if (n <= 230) {
						d = (n-164) * 600 + 3600; // 1-12h in 10m steps
					} else if (n <= 254) {
						d = (n-230) * 1800 + 43200; // 12-24h in 30m steps
					} else if (n <= 566) {
						d = (n-254) * 3600 + 86400; // 1-14d in 1h steps
					} else {
						d = (n-566) * 86400 + 1209600; // 14-999d in 1d steps
					}
					duration = d * 1000;
					timeRemaining = duration;
					update();
				}
			}

			function start() {
				// start/stop timer
				if (isRunning) {
					isRunning = false;
					endTime = null;
					document.getElementById('start').innerText = 'Start';
				} else {
					isRunning = true;
					endTime = Date.now() + timeRemaining;
					document.getElementById('start').innerText = 'Stop';
				}
				update();
				saveData();
			}

			function reset() {
				// reset timer
				timeRemaining = duration;
				endTime = (isRunning) ? (Date.now() + timeRemaining) : null;
				document.getElementById('start').style.display = 'inline';
				update();
				saveData();
			}

			function pad2(n) {
				// make 2 digits
				return (n < 10) ? ('0' + n) : n;
			}
			function pad3(n) {
				// make 3 digits
				return (n < 100) ? ('0' + pad2(n)) : n;
			}

			function formatTime(time) {
				// format the time as yyy:ddd:hh:mm:ss.ss
				milliseconds = time % 1000;
				hundredths = Math.floor(milliseconds/10);
				seconds = Math.floor(time/1000);
				minutes = Math.floor(seconds/60);
				hours   = Math.floor(minutes/60);
				days    = Math.floor(hours/24);
				//years   = Math.floor(days/365);

				timeStr = '&nbsp;';
				//if (years > 0) timeStr += pad3(years) + ':';
				//if (days  > 0) timeStr += pad3(days % 365) + ':';
				if (days  > 0) timeStr += pad3(days) + ':';
				if (hours > 0) timeStr += pad2(hours % 24) + ':';
				if (minutes > 0) timeStr += pad2(minutes % 60) + ':';
				timeStr += pad2(seconds % 60) + '<small>.' + pad2(hundredths) + '</small>&nbsp;';
				return timeStr;
			}

			function update() {
				// update the timer
				if (isRunning) { timeRemaining = endTime - Date.now(); } // in milliseconds
				if (timeRemaining <= 0) {
					timeRemaining = 0;
					isRunning = false;
					document.getElementById('start').innerText = 'Start';
					document.getElementById('start').style.display = 'none';
					setTimeout(function(){window.alert('Times up!');}, 20);
				}
				time.innerHTML = formatTime(timeRemaining);

				// resize text if length changes
				if (time.innerText.length !== textLength) {
					textLength = time.innerText.length;
					resize();
				}

				if (colors.dynamic && isRunning) { setDynamicColors(new Date(timeRemaining)); } // && isRunning prevents colors flashing when setting duration

				if (isRunning) {
					if (showHundredths && window.requestAnimationFrame) {
						window.requestAnimationFrame(update);
					} else {
						setTimeout(update, 1000/30);
					}
				}
			}

			return {
				setData: setData,
				setDuration: setDuration,
				setDurationScroll: setDurationScroll,
				start: start,
				reset: reset
			};
		})();

		function init() {
			date = document.getElementById('date');
			time = document.getElementById('time');
			buttons = document.getElementById('buttons');
			setTimer = document.getElementById('setTimer');
			checkIPad();
			checkFullscreenAvailable();
			getOptions();
			resize();
		}

		if (window.addEventListener) {
			window.addEventListener('DOMContentLoaded', init);
			window.addEventListener('resize', resize);
			window.addEventListener('scroll', Timer.setDurationScroll);
		} else {
			window.onload = init;
			window.onresize = resize;
			window.onscroll = Timer.setDurationScroll;
		}

	</script>
</head>
<body>

	<div id="nav">
		<a href="./" onclick="return toggleNav();"><b>☰</b></a><br>
		<ul id="navlist">
			<li><a href="./">The time (ISO 8601)</a></li>
			<li><a href="./local.html">Local time format</a></li>
			<li><a href="./utc.html">UTC</a></li>
			<li><a href="./stopwatch.html">Stopwatch</a></li>
			<li><a href="./timer.html">Timer</a></li>
			<li><a href="./about.html">About</a></li>
			<li><a href="./settings.html">Settings</a></li>
		</ul>
	</div>

	<div id="main">
		<p id="date">Timer</p>
		<h1 id="time">05:00<small>.00</small></h1>
		<p id="buttons">
			<button type="button" id="start" onclick="Timer.start()">Start</button>
			<button type="button" id="reset" onclick="Timer.reset()">Reset</button>
		</p>
		<div id="setTimer">
			<p id="setTimerText">Scroll page to set timer... or set <a href="#setTimerForm" onclick="return showTimerForm()">manually</a>.</p>
			<form id="setTimerForm" onsubmit="Timer.setDuration(this); return hideTimerForm();">
				<input type="number" name="dd" min="0" max="999" value="0"> d : <!--
				--><input type="number" name="hh" min="0" max="23" value="0"> h : <!--
				--><input type="number" name="mm" min="0" max="59" value="5"> m : <!--
				--><input type="number" name="ss" min="0" max="59" value="0"> s
				<input type="submit" value="Set">
			</form>
		</div>
	</div>

	<!-- stats -->
	<script async defer src="https://api.virtualgeoff.com/latest.js"></script>
	<noscript><img src="https://api.virtualgeoff.com/noscript.gif" alt="" referrerpolicy="no-referrer-when-downgrade"></noscript>

	<script async src="https://virtualgeoff.com/analytics/js/hit.js"></script>
	<noscript><img src="https://virtualgeoff.com/analytics/pixel.php" alt="" width="1" height="1"></noscript>

</body>
</html>