gmariani/timer.html

## timer.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Work Timer</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
	var timerID = null, time = 0;
	function startTimer() {
		if (timerID == null) timerID = setInterval(onTimer, 100);
	}

	function onTimer(e) {
		time += 100;
		document.getElementById('timer').innerHTML = timeToString(time);
	}

	function toggleTimer() {
		var btn = document.getElementById('btnToggle');
		if (btn.value == 'Start') {
			startTimer();
			btn.value = 'Stop';
		} else {
			stopTimer();
			btn.value = 'Start';
		}
	}

	function stopTimer() {
		clearInterval(timerID);
		timerID = null;
	}

	function resetTimer() {
		time = 0;
		stopTimer();
		document.getElementById('timer').innerHTML = '00:00:00';
	}

	function timeToString(n) {
		var ms = parseInt(n % 1000);
		var s = n / 1000;
		var m = parseInt(s / 60);
		var h = parseInt(m / 60);
		s = parseInt(s % 60);
		m = parseInt(m % 60);
		return zero(h) + ":" + zero(m) + ":" + zero(s);
	}

	function zero(n, isMS) {
		if (isMS) {
			if(n < 10) return "00" + n;
			if(n < 100) return "0" + n;
		}
		if (n < 10) return "0" + n;
		return "" + n;
	}

	function popup() {
		window.open(window.location,'_blank','width=300,height=175');
	}
</script>
<style>
html {
	height: 100%;
	width: 100%;
}
body {
/* 	background: -moz-linear-gradient(#fff, #ebedf3);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#ebedf3));
	background: -webkit-linear-gradient(#fff, #ebedf3); */
	font-family:proxima-nova-1,proxima-nova-2,Helvetica,Arial,sans-serif;
	font-size:16px;
	text-rendering:optimizeLegibility;
	color:#38527c;
	text-shadow: rgba(255,255,255,0.2) 0 1px 0;
	text-align:center;
	background: #ECF2FE url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAD0AAAA9CAIAAACRAPa%2BAAATGElEQVR4XlVZbY%2B1Ogg8%2F%2F%2BPVvsCTIvajzcMmmdvYoyetRQoDAP7g2844Lv6QlwX5Dob4I6x%2BVdR38UftVV96xTogu%2Fuu6u2KmgT62q6x5TDN%2FAtWVucEpYV2aXeIdy3%2Bm4TwBxLjB8U3oc%2FqA6zUbmqa%2FebCtyQjblL%2FH6hXsD%2BNRcMgaDEyh1P7trvKtfJ9V0pWiZ8n2vXVMWBMTFF5QnzbJk%2FfVyYG%2B9mE34X38039LGxh%2B74UkPLIilhy7hKOEj4%2FT5eAwyNCy1eT3dQzuk7DBtTu%2FwQ1sc2bW2EuAd4uj9p6OcMwdqt7qNuqxNNMLdhw71Mbz6H714nXMQvzAsLAK21fdCSPiWUGIq2SzUA3E7Vt8bCDVO4NOeJ1V0ctV5txoH0kC8tNGFchHnyQw1r8n2YlzZ1CnzzBCY9pFjax24VDBijMR73Gnsca5e5Lbx%2Bq22Yob2mdgYG441Xozt5GipXOLVJlX26YS5MHKEGQ9QvaAhH8xKevs346tbnRrVfbdehKE2b0O55S5io8D%2BbRaSGfv3bu1dhAFA%2FrFK3LilhueFbqHHXkxFfnGurVN2VZ2hzD7%2BLhP1VJ5gP1JiGSW4kqAyYHkfNcLqqe%2FP9634f8b4VDxgeVTbqOvTNGGsbyMANAw5J%2FwEmI880M1gwuNy4cZkLrkz0R8MYwR9fSI1wN39o9m6u5vdZ71K3hVo2pqNtpofA0XsEd0FIGPTvD7YBeq4qXLrs0iVdJb4O3z0VhaBZX1fPvft9imBsixzAoZeG%2FwTVaYyFne2KtLFd%2FSkvzrg4GKkCc3jkdHGFeSZra5nQBlf19Z3bDV%2BFByiyzxr3X3tTeBKkBH13l46rhNCZWqoq1A%2FfkTju1fHiRjeMTA9AL1QClkn1B%2FLE9wFbM7aYC3qp7cM1VGTgwpd%2BoS9%2Bt7ZPf%2BjgbbohYq6o11GtuJWWaBOOk7V%2FQMSu8GvohIGgu6gxnY0QUT%2BcAq%2BGq8gea52MJXVj1OJ0F2QC5QX0EFJwAVKaQyMdIdvCGHQuPwlzmjG5YqFFLt21XcV3reg%2Bm1IgLtTdl%2F5gUly6e%2FEnVvpC3ed40AkFriobXeByjtvaHmMxDa5aebIuCRelEv4HK4vctSXcbtovhah6%2Bs3q9uXu2DqZfG1b3308cOUxps2rTGk%2BUdV8DeIV%2FCrh%2FvmjF69Qq9%2Fdt1UFczx%2BcQ3r1zP8KeGANZh2aFQit5%2Fp3Qk40%2F%2FdVVyy7J1vJZ7QZ0C4HcFYFbZbCJFKOZpFg%2FLPtdW9xlpaTjmiGxb%2Bxnx%2BZwj1M1weIY%2Bqmme3QkWTfbaLiIvuAjcbmWFKF36XhFztzBBuVtqu60KAwy3dm8dzrw9RlRwBudZbJQTpi5VHj00Hsa86hGGjzNfme7SIH3T9lbGL7uFMxPRxepGvqVZfEsvaKm9G6sE7BuCqGtB7ijYXW2HA6F79adRG%2FDoCg2%2FY7uYl5BttlsPviudMUiCB6NUdbgywpxnDr82CjcViZ5qO79g%2FLEePgodcr4j41itMZCrUKQW79g0NVcSfRrzvXTIk%2BlunJmoAmfk9%2FHOevHCOFocgH0tLvjEGUTVfebd6ZQ3h5bVtq%2FRgpZ3tge5Egp%2F4wuLfWsrNeJq97lSrpoNDkEGkWcTA8PtcRBKdNc7hDiRhxH8XWC%2BkmMFvHqbBNqabPQEygQd26m6OwINuqHeobhGxlSyjunRIc4c%2BmEQ524c9mNfvsMcG0bRuw4OVKHGNhAJLYxx%2Bo26mszNI0jzgJaLr9dmKKFcJy3ntFjYbovRc1XdrSs1kTGlLGHikSiKAh%2Brzwtg1E7Hv4lPxleq168AZYuU3bIMgWBAgqC5KMtQt7ANDQqJeAMKsYtoxH5ayEPzJUYXcQV1ka3vKfMIkjaKTHxwgcSDCqvI8mXZf0ucz0QwAnlHpCGJic62%2BTn9gFnp%2F8SdwliWhLEBaZg9gAsdhG4OV3GbL37FPWtUWMrcSi8Tl%2FEK2ZEyTyp2TzxPoVzEa6Sohf3%2BvRHS%2FjWkQiL4MlmbIZxI9qJv9jjLN67aWRps0DPL6Zol6CPZoQB4CCQZlpZEa%2Bi30Rf4pG%2FVusYe%2F2vc9hFWs3lAnh7vVn9GDtRcGtGQzodvcUJldLqgTK0CGjtDwmi%2B0MO%2FXm%2FSohQ5%2FJKJq9RZpevo1kplIaKlVlHkjbVV%2FjDxhrK8W8uotEsOU1CU9rXHK5XXHXdpdxhpuB2PmrVCf%2FfC3XioL7ajLnPi7tPgKNdqtfrHezd%2FpRkwVmxdw25rpTrIOVxajYXtU6eE5odyv1mSxTJ6EqKwQq46Sdcd25oba1zpMRfdAJL%2FKuLnkDrHh10siTa8Gg1C%2BGrCrX0fA16MR2cDLrvWHoaX62YmX7mg4X%2Bpo2dRUR7CoehOSJdaDRWFeZnNE%2FKyyrhT3BrR7t6X5nJ72%2FxWyMQSuBACDWLL2MoNyiW5Z7CZ1g5mN5V%2B7uBL%2Bjya%2FTPlXYofJAxZSLuDXjSwiHuLeeva2bssDm3ydX9s%2FkikMG8yB91i6v33qIPEXcrUWilbdhV5IvW2w1n6tnbn%2BKUlySCopYML8MK%2BM7M6jh30N0lricujuVDcBu300PWNJAxkecneqaKrTYfvszlYAnbFe3Wp39jIYdhXOFWoIeQqVhl5jUogt2IUZqA9J2uxoq9pub8OVLnh%2BYJiXvm09yIqAf4RpuEIVIqhvtoXQ4NBK1WP70m74o5WkQtPC3CPjBCRSTLV5YVoZEWOqxP6Er05OMp%2Buasa90s3tm66Q36uLYBYnntCmp0WOQz%2BsBfZ7dp3adx3uxVgyqP3HkmdP91dGao8ELW5SX52qs%2FoozplmaKoCRHiwY5DC2UMCnFUkcyo1NZG23pqFcR%2F%2FhiLrd1AzznRkrDAL1UtarETNEfoZhwFZ7UluuNNU%2BAu0VRdj18mK15cwE0uVeigLrfYJB4JRaXfmNzOn%2BRzA108tZSoLW1gsKbiL8xyqK4%2Fi982EnpBbydODmJMepF%2FTwd%2FVVoRvC8KtGQ%2F1u9MYOdumzAdzIXEm%2BYwQ%2BCpsbowsXs%2FZGcQA%2FKpkIBhPMj5CHOnr0roQkquisorr%2BhX5BgmT5LMy4YaY3qjEBwufkVFkgl4nyE7zxKvUijK1uUEJQWDD5kDV9HEyoY6dSnCoktZmKDPcJwG7i7mTFT8Uns7Ssohj043V8KvzvjWUnudYzbcp8ShEK1nyFjyHP0n3%2BseiSpz4c7SrDjmT9A4nujmAk0MYhgGrzATD5imehym9bvloU08aF6o7qgxSFPVriIHsTQdxc6winqXn97ZVb5Rj0OU12yT6ftQt%2FOYteCqY73QKTQ9fwD7w%2Bo%2BU9aqEApYqKUlLDGe9ZIVAuNcR6cutL7wV%2BnlrKrxxxkIQc%2BhDLqVoDoR%2FNdzHvjgHD2eOGXInwVGfIndpivkxjbkbW6wCC1kZmurojrXHJ6G6fDKtYDGmk374n1RR2LY%2FTWqpT6sPY5X5Jjk2Sg6j5R80Cz%2BWjJM7DlqC%2Fb3Fr4VZ0vja2H7zlXjHlDWqwhjIgieTPD7LVo9ftIrNB%2Byvu%2BSugFEV%2BuyFP0mo5fL2mUH9LBHJLcPdjMBQw5KYV31EMU8k%2B%2FC%2FsxuPNiwq88XD%2BsrKv6nuCkbK%2Bg%2B%2F2tqoc9iktxTLuj8d5Nym3QQmyqH7MSG6JWtn5WnM18ff7hRCoKNukBArjfVyYd2wBXCE5Y7%2BDN%2FDiMHrwiTvIyRn2TMHnM1I3RXBXTGiOhx2qajI%2FjjWXSCl7yLP%2BeFDqYtok9NkBkOjHP%2FX%2BwBydmadu9ZtE209%2BtLmrb7C3%2BgRqX1E8aQI9DoFkZ2n83enZtzmrVj2hAGq7Sv%2Bg61Xd7CjWb3efUxW8qf2DVLTorsjJKOLyjb3ausD0%2F26WS6MnBrMkMxxwDEY1ur8Ui3mOc%2BPcncJuQtAxULHKSv0CEvpgGqUC8iWkQbQqcLBLuEv4clqGE%2B%2Bb7WZkOUVA2DhhYlqAkM8O7s%2BzIj%2BBWALR%2F2WXZ%2FMo6rxm%2BKfVZkJdVfiNyA66Da2n3cdu8m2dvHgVDTmlxVa%2FTnypIRYy5QoK6nI1WODx3KP3AAb5qO%2Br0gSNr7OI9mlJT%2BzCBu7iu5WeaqyqwgcaIpmOTkTat8dZvoTYVLO3Y2Zt9gdmiOYdMw9uN9UF5EEqWRdZnWeLTF7cpUzVHRUgaz29jgobTGO5RzS%2BH3Oanr9ugrbx8ohFgDKn1OdXVJ7CE0PueT9IljYw%2F%2BnHVFfvDJ%2FPyZ4WQTZgt8dEYuJvqfFN3HKK%2FgJquu6CymXxSqcg3P7j81%2F8bMKzzN5S07SNCM7u4d%2B1SDWwa7kY7BdN3CRWt89x3ruLXaR0fSr865WHRaTLg4O%2F%2Fw7Ty5MOchUk%2BKOxTzLZG1PsQcOM6o13vGi9QdGajCkQOiqxQKEdFtlUsHl1PW6ud2vwSaiq30g2FiMytpWrbHFAevOxTzLZcJe4cZEqVQLMpyjrG4jq0ylOPJHZL0E%2BIuI%2B9DH7I9vZo7zprm1pmMlDeSY01dPqq1hcKTBvIqrDcZtNqk8f%2BGrqVZ5oNQn%2BQmBTM4p0K2SvBllMi6NVwqibZ3zICq9xIPL925wBQzEzf7aw8bWb2uJP6Iz5ujoe4xPmgI1MKCalBy85Ny07qRfoElMKrKddvMAX151fRV7AfJhHMQfGBd7xtkq31SNrCg5xt2cdrK9PRNJZL28qpPWzitsa2R%2FLDFaYUNKlvHqwMZEyeUfWYIoPAY1I%2FJVMFSFHTpbdfLYdaGz6Nesq4K5R5Y3LChba5XTr9SV56voWuvUb2YboTz34XerW0mwymu%2FZQVguYUl7wvvQscj9mCgTz%2Fq7u4vsDJT0SWK6%2FoaTQNnXYk24FzzayKhbvQQMVgqTTefhbTmxO4gT1jZ6UwODDyqhn3TKbrwrIJqxwwUGkRiqq60cA7syh5q%2BEeSxkLT0VmGQuxivLk0b77iR4lxnLrmFKRw3v3yWOH%2FDs%2Bmb4843%2FbnQxs51LQaWjoAxYxRiDYFFapb2OS%2BICCILgtyLI4hE5dyBKBSvoRBkgi8BnNCgq%2FJV1TFZO0EeT%2F%2BjpDkV7qewmBwIrzuOnNZUB%2Brs8ynNDbttpVcB0iSiBqwtU7qUcaFsIc9%2FOtjKclnPkTX99npxTsiXq5I9LlI5aMTFV%2FKLRrhIRZqMCgs09DQs9v4jZbUbMFuIPtw4iXoJD53TwyBycy6g9jSUS92H6HxqWw6zV%2FR8yLeKYy9LYJjSiWArrDtpPA%2Bgcxyi4FCTcP0SZKsPCKMZWv3aWiTKrFefpX8rjygJo4BWyRxjlJXrdMyw9aGYSD2ax%2BjP4jW50KfYgQfpuB1Vs08G1VKtY49fNog8pid4hDKpBKAoV8QAT0qlXBOdM9kQGMbXiP1CSnrZ056jQw4hWReXwpOtHqQSdaaC5ooa5x2c1cyAs4CHpPnGDiMJg3VnA4w9g5mCFyG7j5W1z0GulIzsqU2pOVkIgy7xV%2FIL77oY9aQL%2BTMLXgswK5zymAnQjxGSAxLpC0%2FcSfG62Ly0YxGKbkBee8UF9QHmnXggV%2FSg6IxC18yrcosqttqTt7%2B9Ap01uGOJhgT420sihjygV%2Fa8uQRPzZpAseZ0o3IPVioxsKcvQo3dvOFzJ6%2Bz%2BokcWQatoO9qJ2uhYUd8uS4pxpdsBbqKnahXucAB9ZfDy7JtJbRTagL7Wucl5x1il%2FZCB%2ByAwCGBPK0wEH50nwVF2Xe2DsidAbZhax%2FwSJm1lRN82gJXS5gwIir1EVWrbSWDPkrKJj3v1Ujjz7dCVurLQx%2BSWmQ9qA9pwM1qA7gkR54Mu5%2FSQMOX3zXPK8%2BX0WRjaBNKEIibahNziVa90ACqpePLOiwaGSaJ2U95eZ%2F2Pgn21rDRzbStfIySoBw6cMJVjnR7QF2zQ0yoczvIPpSKcpk%2F87PAd0EsgNJiIzZq7ZICy19HxWaAb12bsP7VWx99G0Wl%2BEq%2FgwseNJ8h%2B4q72QiR1bnmNUlyZmRG2q7Bj%2FQL%2FDEaZsvHQJ2qNSel87A71jft%2FlC36c7v3aYMhIujl5hfo%2BvBa5jFr3aFyHF1ohiwV3ZhLMJmv1LpuQF1T%2FUA31PaAN5RPeFesMdlfw%2Bia4AHTZkxKqbYWaF81ish3X%2B34DCDicC%2BGVp2ULifPyeV03K5SUJUw722eyMfpdknkIY7RcmfWaaTaSQk1jbaGAFeMwlGZh1b34NCNzKIJKyTJ6BvMLzFyY6zFcwiMH45n%2FXkRgJBFQdAdhKV2GwnsdnI%2FzdOKlKkDJdxKLkHhZYsYCpaAIXDgpfNo93LvxdttUi0lRXTWCg4zoZfNM8W2mOYeuYD8%2FKtc%2FiS4J0XPT3sEH%2BIFV6AEKMRxQk8pNYEVuuTC%2BKmN%2FDNgYPlp4vBCmrr%2BX%2FD8SeUp%2BOrW5gScrAVYelGYP3asX2ScZGVpfytXMaw2c%2F3o8tI%2FA3fBU2hcpUO7Psh%2F8utfv4IpUHyko7tvSdWTVkW59pOdotI1vpZC%2BPuGFId0FWGR5X5cAy4KsCvrJ%2BDe5LmcqUlXNoDhzR2OwOSWZW%2BpsA%2FwH1ciRgBn8gOQAAAABJRU5ErkJggg%3D%3D)
}

h1 {
	font-size: 60px;
	font-weight: bold;
	text-shadow:rgba(0,0,0,0.5) 0 1px 4px;
	line-height:37px;
}

input {
	color:#38527c;
	padding:5px 12px;
	border:1px solid #bfccda;
	background:-moz-linear-gradient(rgba(255,255,255,0.6), rgba(255,255,255,0));
	background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.6)), to(rgba(255,255,255,0)));
	background:-webkit-linear-gradient(rgba(255,255,255,0.6), rgba(255,255,255,0));
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
	-moz-box-shadow:inset #fff 0 1px 0,#fff 0 1px 0;
	-webkit-box-shadow: inset #fff 0 1px 0,#fff 0 1px 0;
	box-shadow:inset #fff 0 1px 0,#fff 0 1px 0;
}

input:active {
	background:transparent;
	background:-moz-linear-gradient(rgba(255,255,255,0), rgba(255,255,255,0.6));
	background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0)), to(rgba(255,255,255,0.6)));
	background:-webkit-linear-gradient(rgba(255,255,255,0), rgba(255,255,255,0.6));
	background:-o-linear-gradient(rgba(255,255,255,0), rgba(255,255,255,0.6));
}
</style>
</head>
<body>
<h1 id="timer" >00:00:00</h1>
<input id="btnToggle" type="button" value="Start" onClick="toggleTimer();"/>
<input type="button" value="Reset" onClick="resetTimer();"/>
<input type="button" value="Pop Up" onClick="popup();"/>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset=utf-8 />
	<title>Work Timer</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<script type="text/javascript">
	var timerID = null, time = 0;
	function startTimer() {
	if (timerID == null) timerID = setInterval(onTimer, 100);
	}

	function onTimer(e) {
	time += 100;
	document.getElementById('timer').innerHTML = timeToString(time);
	}

	function toggleTimer() {
	var btn = document.getElementById('btnToggle');
	if (btn.value == 'Start') {
	startTimer();
	btn.value = 'Stop';
	} else {
	stopTimer();
	btn.value = 'Start';
	}
	}

	function stopTimer() {
	clearInterval(timerID);
	timerID = null;
	}

	function resetTimer() {
	time = 0;
	stopTimer();
	document.getElementById('timer').innerHTML = '00:00:00';
	}

	function timeToString(n) {
	var ms = parseInt(n % 1000);
	var s = n / 1000;
	var m = parseInt(s / 60);
	var h = parseInt(m / 60);
	s = parseInt(s % 60);
	m = parseInt(m % 60);
	return zero(h) + ":" + zero(m) + ":" + zero(s);
	}

	function zero(n, isMS) {
	if (isMS) {
	if(n < 10) return "00" + n;
	if(n < 100) return "0" + n;
	}
	if (n < 10) return "0" + n;
	return "" + n;
	}

	function popup() {
	window.open(window.location,'_blank','width=300,height=175');
	}
	</script>
	<style>
	html {
	height: 100%;
	width: 100%;
	}
	body {
	/* background: -moz-linear-gradient(#fff, #ebedf3);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#ebedf3));
	background: -webkit-linear-gradient(#fff, #ebedf3); */
	font-family:proxima-nova-1,proxima-nova-2,Helvetica,Arial,sans-serif;
	font-size:16px;
	text-rendering:optimizeLegibility;
	color:#38527c;
	text-shadow: rgba(255,255,255,0.2) 0 1px 0;
	text-align:center;
	background: #ECF2FE url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAD0AAAA9CAIAAACRAPa%2BAAATGElEQVR4XlVZbY%2B1Ogg8%2F%2F%2BPVvsCTIvajzcMmmdvYoyetRQoDAP7g2844Lv6QlwX5Dob4I6x%2BVdR38UftVV96xTogu%2Fuu6u2KmgT62q6x5TDN%2FAtWVucEpYV2aXeIdy3%2Bm4TwBxLjB8U3oc%2FqA6zUbmqa%2FebCtyQjblL%2FH6hXsD%2BNRcMgaDEyh1P7trvKtfJ9V0pWiZ8n2vXVMWBMTFF5QnzbJk%2FfVyYG%2B9mE34X38039LGxh%2B74UkPLIilhy7hKOEj4%2FT5eAwyNCy1eT3dQzuk7DBtTu%2FwQ1sc2bW2EuAd4uj9p6OcMwdqt7qNuqxNNMLdhw71Mbz6H714nXMQvzAsLAK21fdCSPiWUGIq2SzUA3E7Vt8bCDVO4NOeJ1V0ctV5txoH0kC8tNGFchHnyQw1r8n2YlzZ1CnzzBCY9pFjax24VDBijMR73Gnsca5e5Lbx%2Bq22Yob2mdgYG441Xozt5GipXOLVJlX26YS5MHKEGQ9QvaAhH8xKevs346tbnRrVfbdehKE2b0O55S5io8D%2BbRaSGfv3bu1dhAFA%2FrFK3LilhueFbqHHXkxFfnGurVN2VZ2hzD7%2BLhP1VJ5gP1JiGSW4kqAyYHkfNcLqqe%2FP9634f8b4VDxgeVTbqOvTNGGsbyMANAw5J%2FwEmI880M1gwuNy4cZkLrkz0R8MYwR9fSI1wN39o9m6u5vdZ71K3hVo2pqNtpofA0XsEd0FIGPTvD7YBeq4qXLrs0iVdJb4O3z0VhaBZX1fPvft9imBsixzAoZeG%2FwTVaYyFne2KtLFd%2FSkvzrg4GKkCc3jkdHGFeSZra5nQBlf19Z3bDV%2BFByiyzxr3X3tTeBKkBH13l46rhNCZWqoq1A%2FfkTju1fHiRjeMTA9AL1QClkn1B%2FLE9wFbM7aYC3qp7cM1VGTgwpd%2BoS9%2Bt7ZPf%2BjgbbohYq6o11GtuJWWaBOOk7V%2FQMSu8GvohIGgu6gxnY0QUT%2BcAq%2BGq8gea52MJXVj1OJ0F2QC5QX0EFJwAVKaQyMdIdvCGHQuPwlzmjG5YqFFLt21XcV3reg%2Bm1IgLtTdl%2F5gUly6e%2FEnVvpC3ed40AkFriobXeByjtvaHmMxDa5aebIuCRelEv4HK4vctSXcbtovhah6%2Bs3q9uXu2DqZfG1b3308cOUxps2rTGk%2BUdV8DeIV%2FCrh%2FvmjF69Qq9%2Fdt1UFczx%2BcQ3r1zP8KeGANZh2aFQit5%2Fp3Qk40%2F%2FdVVyy7J1vJZ7QZ0C4HcFYFbZbCJFKOZpFg%2FLPtdW9xlpaTjmiGxb%2Bxnx%2BZwj1M1weIY%2Bqmme3QkWTfbaLiIvuAjcbmWFKF36XhFztzBBuVtqu60KAwy3dm8dzrw9RlRwBudZbJQTpi5VHj00Hsa86hGGjzNfme7SIH3T9lbGL7uFMxPRxepGvqVZfEsvaKm9G6sE7BuCqGtB7ijYXW2HA6F79adRG%2FDoCg2%2FY7uYl5BttlsPviudMUiCB6NUdbgywpxnDr82CjcViZ5qO79g%2FLEePgodcr4j41itMZCrUKQW79g0NVcSfRrzvXTIk%2BlunJmoAmfk9%2FHOevHCOFocgH0tLvjEGUTVfebd6ZQ3h5bVtq%2FRgpZ3tge5Egp%2F4wuLfWsrNeJq97lSrpoNDkEGkWcTA8PtcRBKdNc7hDiRhxH8XWC%2BkmMFvHqbBNqabPQEygQd26m6OwINuqHeobhGxlSyjunRIc4c%2BmEQ524c9mNfvsMcG0bRuw4OVKHGNhAJLYxx%2Bo26mszNI0jzgJaLr9dmKKFcJy3ntFjYbovRc1XdrSs1kTGlLGHikSiKAh%2Brzwtg1E7Hv4lPxleq168AZYuU3bIMgWBAgqC5KMtQt7ANDQqJeAMKsYtoxH5ayEPzJUYXcQV1ka3vKfMIkjaKTHxwgcSDCqvI8mXZf0ucz0QwAnlHpCGJic62%2BTn9gFnp%2F8SdwliWhLEBaZg9gAsdhG4OV3GbL37FPWtUWMrcSi8Tl%2FEK2ZEyTyp2TzxPoVzEa6Sohf3%2BvRHS%2FjWkQiL4MlmbIZxI9qJv9jjLN67aWRps0DPL6Zol6CPZoQB4CCQZlpZEa%2Bi30Rf4pG%2FVusYe%2F2vc9hFWs3lAnh7vVn9GDtRcGtGQzodvcUJldLqgTK0CGjtDwmi%2B0MO%2FXm%2FSohQ5%2FJKJq9RZpevo1kplIaKlVlHkjbVV%2FjDxhrK8W8uotEsOU1CU9rXHK5XXHXdpdxhpuB2PmrVCf%2FfC3XioL7ajLnPi7tPgKNdqtfrHezd%2FpRkwVmxdw25rpTrIOVxajYXtU6eE5odyv1mSxTJ6EqKwQq46Sdcd25oba1zpMRfdAJL%2FKuLnkDrHh10siTa8Gg1C%2BGrCrX0fA16MR2cDLrvWHoaX62YmX7mg4X%2Bpo2dRUR7CoehOSJdaDRWFeZnNE%2FKyyrhT3BrR7t6X5nJ72%2FxWyMQSuBACDWLL2MoNyiW5Z7CZ1g5mN5V%2B7uBL%2Bjya%2FTPlXYofJAxZSLuDXjSwiHuLeeva2bssDm3ydX9s%2FkikMG8yB91i6v33qIPEXcrUWilbdhV5IvW2w1n6tnbn%2BKUlySCopYML8MK%2BM7M6jh30N0lricujuVDcBu300PWNJAxkecneqaKrTYfvszlYAnbFe3Wp39jIYdhXOFWoIeQqVhl5jUogt2IUZqA9J2uxoq9pub8OVLnh%2BYJiXvm09yIqAf4RpuEIVIqhvtoXQ4NBK1WP70m74o5WkQtPC3CPjBCRSTLV5YVoZEWOqxP6Er05OMp%2Buasa90s3tm66Q36uLYBYnntCmp0WOQz%2BsBfZ7dp3adx3uxVgyqP3HkmdP91dGao8ELW5SX52qs%2FoozplmaKoCRHiwY5DC2UMCnFUkcyo1NZG23pqFcR%2F%2FhiLrd1AzznRkrDAL1UtarETNEfoZhwFZ7UluuNNU%2BAu0VRdj18mK15cwE0uVeigLrfYJB4JRaXfmNzOn%2BRzA108tZSoLW1gsKbiL8xyqK4%2Fi982EnpBbydODmJMepF%2FTwd%2FVVoRvC8KtGQ%2F1u9MYOdumzAdzIXEm%2BYwQ%2BCpsbowsXs%2FZGcQA%2FKpkIBhPMj5CHOnr0roQkquisorr%2BhX5BgmT5LMy4YaY3qjEBwufkVFkgl4nyE7zxKvUijK1uUEJQWDD5kDV9HEyoY6dSnCoktZmKDPcJwG7i7mTFT8Uns7Ssohj043V8KvzvjWUnudYzbcp8ShEK1nyFjyHP0n3%2BseiSpz4c7SrDjmT9A4nujmAk0MYhgGrzATD5imehym9bvloU08aF6o7qgxSFPVriIHsTQdxc6winqXn97ZVb5Rj0OU12yT6ftQt%2FOYteCqY73QKTQ9fwD7w%2Bo%2BU9aqEApYqKUlLDGe9ZIVAuNcR6cutL7wV%2BnlrKrxxxkIQc%2BhDLqVoDoR%2FNdzHvjgHD2eOGXInwVGfIndpivkxjbkbW6wCC1kZmurojrXHJ6G6fDKtYDGmk374n1RR2LY%2FTWqpT6sPY5X5Jjk2Sg6j5R80Cz%2BWjJM7DlqC%2Fb3Fr4VZ0vja2H7zlXjHlDWqwhjIgieTPD7LVo9ftIrNB%2Byvu%2BSugFEV%2BuyFP0mo5fL2mUH9LBHJLcPdjMBQw5KYV31EMU8k%2B%2FC%2FsxuPNiwq88XD%2BsrKv6nuCkbK%2Bg%2B%2F2tqoc9iktxTLuj8d5Nym3QQmyqH7MSG6JWtn5WnM18ff7hRCoKNukBArjfVyYd2wBXCE5Y7%2BDN%2FDiMHrwiTvIyRn2TMHnM1I3RXBXTGiOhx2qajI%2FjjWXSCl7yLP%2BeFDqYtok9NkBkOjHP%2FX%2BwBydmadu9ZtE209%2BtLmrb7C3%2BgRqX1E8aQI9DoFkZ2n83enZtzmrVj2hAGq7Sv%2Bg61Xd7CjWb3efUxW8qf2DVLTorsjJKOLyjb3ausD0%2F26WS6MnBrMkMxxwDEY1ur8Ui3mOc%2BPcncJuQtAxULHKSv0CEvpgGqUC8iWkQbQqcLBLuEv4clqGE%2B%2Bb7WZkOUVA2DhhYlqAkM8O7s%2BzIj%2BBWALR%2F2WXZ%2FMo6rxm%2BKfVZkJdVfiNyA66Da2n3cdu8m2dvHgVDTmlxVa%2FTnypIRYy5QoK6nI1WODx3KP3AAb5qO%2Br0gSNr7OI9mlJT%2BzCBu7iu5WeaqyqwgcaIpmOTkTat8dZvoTYVLO3Y2Zt9gdmiOYdMw9uN9UF5EEqWRdZnWeLTF7cpUzVHRUgaz29jgobTGO5RzS%2BH3Oanr9ugrbx8ohFgDKn1OdXVJ7CE0PueT9IljYw%2F%2BnHVFfvDJ%2FPyZ4WQTZgt8dEYuJvqfFN3HKK%2FgJquu6CymXxSqcg3P7j81%2F8bMKzzN5S07SNCM7u4d%2B1SDWwa7kY7BdN3CRWt89x3ruLXaR0fSr865WHRaTLg4O%2F%2Fw7Ty5MOchUk%2BKOxTzLZG1PsQcOM6o13vGi9QdGajCkQOiqxQKEdFtlUsHl1PW6ud2vwSaiq30g2FiMytpWrbHFAevOxTzLZcJe4cZEqVQLMpyjrG4jq0ylOPJHZL0E%2BIuI%2B9DH7I9vZo7zprm1pmMlDeSY01dPqq1hcKTBvIqrDcZtNqk8f%2BGrqVZ5oNQn%2BQmBTM4p0K2SvBllMi6NVwqibZ3zICq9xIPL925wBQzEzf7aw8bWb2uJP6Iz5ujoe4xPmgI1MKCalBy85Ny07qRfoElMKrKddvMAX151fRV7AfJhHMQfGBd7xtkq31SNrCg5xt2cdrK9PRNJZL28qpPWzitsa2R%2FLDFaYUNKlvHqwMZEyeUfWYIoPAY1I%2FJVMFSFHTpbdfLYdaGz6Nesq4K5R5Y3LChba5XTr9SV56voWuvUb2YboTz34XerW0mwymu%2FZQVguYUl7wvvQscj9mCgTz%2Fq7u4vsDJT0SWK6%2FoaTQNnXYk24FzzayKhbvQQMVgqTTefhbTmxO4gT1jZ6UwODDyqhn3TKbrwrIJqxwwUGkRiqq60cA7syh5q%2BEeSxkLT0VmGQuxivLk0b77iR4lxnLrmFKRw3v3yWOH%2FDs%2Bmb4843%2FbnQxs51LQaWjoAxYxRiDYFFapb2OS%2BICCILgtyLI4hE5dyBKBSvoRBkgi8BnNCgq%2FJV1TFZO0EeT%2F%2BjpDkV7qewmBwIrzuOnNZUB%2Brs8ynNDbttpVcB0iSiBqwtU7qUcaFsIc9%2FOtjKclnPkTX99npxTsiXq5I9LlI5aMTFV%2FKLRrhIRZqMCgs09DQs9v4jZbUbMFuIPtw4iXoJD53TwyBycy6g9jSUS92H6HxqWw6zV%2FR8yLeKYy9LYJjSiWArrDtpPA%2Bgcxyi4FCTcP0SZKsPCKMZWv3aWiTKrFefpX8rjygJo4BWyRxjlJXrdMyw9aGYSD2ax%2BjP4jW50KfYgQfpuB1Vs08G1VKtY49fNog8pid4hDKpBKAoV8QAT0qlXBOdM9kQGMbXiP1CSnrZ056jQw4hWReXwpOtHqQSdaaC5ooa5x2c1cyAs4CHpPnGDiMJg3VnA4w9g5mCFyG7j5W1z0GulIzsqU2pOVkIgy7xV%2FIL77oY9aQL%2BTMLXgswK5zymAnQjxGSAxLpC0%2FcSfG62Ly0YxGKbkBee8UF9QHmnXggV%2FSg6IxC18yrcosqttqTt7%2B9Ap01uGOJhgT420sihjygV%2Fa8uQRPzZpAseZ0o3IPVioxsKcvQo3dvOFzJ6%2Bz%2BokcWQatoO9qJ2uhYUd8uS4pxpdsBbqKnahXucAB9ZfDy7JtJbRTagL7Wucl5x1il%2FZCB%2ByAwCGBPK0wEH50nwVF2Xe2DsidAbZhax%2FwSJm1lRN82gJXS5gwIir1EVWrbSWDPkrKJj3v1Ujjz7dCVurLQx%2BSWmQ9qA9pwM1qA7gkR54Mu5%2FSQMOX3zXPK8%2BX0WRjaBNKEIibahNziVa90ACqpePLOiwaGSaJ2U95eZ%2F2Pgn21rDRzbStfIySoBw6cMJVjnR7QF2zQ0yoczvIPpSKcpk%2F87PAd0EsgNJiIzZq7ZICy19HxWaAb12bsP7VWx99G0Wl%2BEq%2FgwseNJ8h%2B4q72QiR1bnmNUlyZmRG2q7Bj%2FQL%2FDEaZsvHQJ2qNSel87A71jft%2FlC36c7v3aYMhIujl5hfo%2BvBa5jFr3aFyHF1ohiwV3ZhLMJmv1LpuQF1T%2FUA31PaAN5RPeFesMdlfw%2Bia4AHTZkxKqbYWaF81ish3X%2B34DCDicC%2BGVp2ULifPyeV03K5SUJUw722eyMfpdknkIY7RcmfWaaTaSQk1jbaGAFeMwlGZh1b34NCNzKIJKyTJ6BvMLzFyY6zFcwiMH45n%2FXkRgJBFQdAdhKV2GwnsdnI%2FzdOKlKkDJdxKLkHhZYsYCpaAIXDgpfNo93LvxdttUi0lRXTWCg4zoZfNM8W2mOYeuYD8%2FKtc%2FiS4J0XPT3sEH%2BIFV6AEKMRxQk8pNYEVuuTC%2BKmN%2FDNgYPlp4vBCmrr%2BX%2FD8SeUp%2BOrW5gScrAVYelGYP3asX2ScZGVpfytXMaw2c%2F3o8tI%2FA3fBU2hcpUO7Psh%2F8utfv4IpUHyko7tvSdWTVkW59pOdotI1vpZC%2BPuGFId0FWGR5X5cAy4KsCvrJ%2BDe5LmcqUlXNoDhzR2OwOSWZW%2BpsA%2FwH1ciRgBn8gOQAAAABJRU5ErkJggg%3D%3D)
	}

	h1 {
	font-size: 60px;
	font-weight: bold;
	text-shadow:rgba(0,0,0,0.5) 0 1px 4px;
	line-height:37px;
	}

	input {
	color:#38527c;
	padding:5px 12px;
	border:1px solid #bfccda;
	background:-moz-linear-gradient(rgba(255,255,255,0.6), rgba(255,255,255,0));
	background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.6)), to(rgba(255,255,255,0)));
	background:-webkit-linear-gradient(rgba(255,255,255,0.6), rgba(255,255,255,0));
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
	-moz-box-shadow:inset #fff 0 1px 0,#fff 0 1px 0;
	-webkit-box-shadow: inset #fff 0 1px 0,#fff 0 1px 0;
	box-shadow:inset #fff 0 1px 0,#fff 0 1px 0;
	}

	input:active {
	background:transparent;
	background:-moz-linear-gradient(rgba(255,255,255,0), rgba(255,255,255,0.6));
	background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0)), to(rgba(255,255,255,0.6)));
	background:-webkit-linear-gradient(rgba(255,255,255,0), rgba(255,255,255,0.6));
	background:-o-linear-gradient(rgba(255,255,255,0), rgba(255,255,255,0.6));
	}
	</style>
	</head>
	<body>
	<h1 id="timer" >00:00:00</h1>
	<input id="btnToggle" type="button" value="Start" onClick="toggleTimer();"/>
	<input type="button" value="Reset" onClick="resetTimer();"/>
	<input type="button" value="Pop Up" onClick="popup();"/>
	</body>
	</html>