mangei/countdown.html

## countdown.html
<!-- Coding Contest Countdown by Manuel Geier -->
<!-- Use Ctrl + '+' or Ctrl + '-' to set the right zoom factor for your display -->
<html>
<head>
<title>Coding Contest</title>
<script>
/*************************************************************************/
/*
 * CONFIGURATION
 */
var finalCountdown = false; // Start Countdown: false, End Countdown: true
var finalTime = new Date(2019, 11-1, 08, 10, 00, 00 ,0).getTime();
var soundEnabled = true;
/*************************************************************************/
</script>
<style>
@font-face {
	font-family: "Cairo Regular";
	src: url("font/Cairo-Regular.ttf");
}
* {
	font-family: "Cairo Regular", Verdana;
	color: white;
}
html {
	border: 10px solid #182040;
}
body {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#182040+0,4d4790+100 */
	background: #182040; /* Old browsers */
	background: -moz-linear-gradient(top, #182040 0%, #4d4790 100%); /* FF3.6-15 */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#182040), color-stop(100%,#4d4790)); /* Chrome4-9,Safari4-5 */
	background: -webkit-linear-gradient(top, #182040 0%,#4d4790 100%); /* Chrome10-25,Safari5.1-6 */
	background: -o-linear-gradient(top, #182040 0%,#4d4790 100%); /* Opera 11.10-11.50 */
	background: -ms-linear-gradient(top, #182040 0%,#4d4790 100%); /* IE10 preview */
	background: linear-gradient(to bottom, #182040 0%,#4d4790 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#182040', endColorstr='#4d4790',GradientType=0 ); /* IE6-9 */
}
h1 {
	margin-top: 20vh;
	margin-bottom: 0;
}
.colHou {
	text-align: right;
	width: 50%;
}
.colMin {
	text-align: center;
}
.colSec {
	text-align: left;
	width: 50%;
}
.countdown, #timeOver {
	font-size: 50pt;
	font-weight: bold;
}
#timeOver {
	display: none;
}
.helpText {
}
#title {
	text-align: left;
	position: absolute;
	top: 10px;
	left: 10px;
	opacity: 0.3;
}
#figure {
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0;
	width: 100%;
	text-align: center;
}
#figure img {
	height: 50vh;
}
#infos {
	position: absolute;
	right: 1.5rem;
}
#infos tr > td:first-child {
	color: #FFDD17;
}
</style>
<body style="text-align: center">
<div id="infos">
	<table>
		<tr>
			<td>WIFI:</td>
			<td>wlan_highspeed</td>
		</tr>
		<tr>
			<td>Login:</td>
			<td>codingcontest.org/login</td>
		</tr>
		<tr>
			<td>Support:</td>
			<td>gitter.im/CodingContest-org</td>
		</tr>
	</table>
</div>
<div id="title">
	<img src="image/CCC-Logo_white@3x.png" width="30%" />
</div>
<div id="figure">
	<img src="image/codinator.png" />
</div>
<h1 id="headerId">Final Countdown</h1>
<table style="margin: 0 auto;" id="countdownContainer">
	<tr class="countdown">
		<td class="colHou"><span id="countdownHou"></span></td>
		<td>:</td>
		<td class="colMin"><span id="countdownMin"></span></td>
		<td>:</td>
		<td class="colSec"><span id="countdownSec"></span></td>
	</tr>
	<tr class="helpText">
		<td class="colHou">hours</td>
		<td></td>
		<td class="colMin">minutes</td>
		<td></td>
		<td class="colSec">seconds</td>
	</tr>
</table>
<span id="timeOver">Time is over!</span>

<script>

var eCountdown = document.getElementById('countdownContainer');
var eHou = document.getElementById('countdownHou');
var eMin = document.getElementById('countdownMin');
var eSec = document.getElementById('countdownSec');
var eHeader = document.getElementById('headerId');
var eTimeOver = document.getElementById('timeOver');
var audioPeep = new Audio('audio/Robot_blip-Marianne_Gagnon-120342607.mp3');
var audioEnd = new Audio('audio/Air Horn-SoundBible.com-964603082.mp3');

function updateCountdown() {

	var currentTime = new Date().getTime(),
	    restInMilliseconds = finalTime - currentTime,
	    restInSeconds = parseInt(restInMilliseconds / 1000);

	if(restInSeconds >= 1) {

		// don't peep if the countdown did not run and we open the page and it is over
		updateCountdown.didRun = true;

		var hou = parseInt(restInSeconds / 60 / 60);
		    min = parseInt(restInSeconds / 60 % 60);
			sec = parseInt(restInSeconds % 60);

		eHou.innerHTML = hou.pad();
		eMin.innerHTML = min.pad();
		eSec.innerHTML = sec.pad();

		if(soundEnabled) {
			if(restInSeconds <= 10) {
				// <= 10 sec, every second
				audioPeep.play();
			} else if(restInSeconds <= 60) {
				if(restInSeconds % 10 === 0) {
					// <= 1 min, every 10 seconds
					audioPeep.play();
				}
			} else if(restInSeconds <= (10 * 60)) {
				// at 10 min
				if(restInSeconds % (10 * 60) === 0) {
					audioPeep.play();
					setTimeout(audioPeep.play, 300);
					setTimeout(audioPeep.play, 600);
				}
			}
		}

		setTimeout(updateCountdown, 1000);
	} else {
		eHeader.style.visibility = 'hidden';
		eCountdown.style.display = 'none';
		eTimeOver.style.display = 'block';

		if(updateCountdown.didRun) {
			audioEnd.play();
		}
	}
}

Number.prototype.pad = function(size) {
  var s = String(this);
  while (s.length < (size || 2)) {s = "0" + s;}
  return s;
}

if(finalCountdown) {
	eHeader.innerHTML = "Final Countdown";
	eTimeOver.innerHTML = "Time is over!";
} else {
	eHeader.innerHTML = "Start in";
	eTimeOver.innerHTML = "Lets start!";
}

updateCountdown();

</script>
</body>
</html>
	<!-- Coding Contest Countdown by Manuel Geier -->
	<!-- Use Ctrl + '+' or Ctrl + '-' to set the right zoom factor for your display -->
	<html>
	<head>
	<title>Coding Contest</title>
	<script>
	/*************************************************************************/
	/*
	* CONFIGURATION
	*/
	var finalCountdown = false; // Start Countdown: false, End Countdown: true
	var finalTime = new Date(2019, 11-1, 08, 10, 00, 00 ,0).getTime();
	var soundEnabled = true;
	/*************************************************************************/
	</script>
	<style>
	@font-face {
	font-family: "Cairo Regular";
	src: url("font/Cairo-Regular.ttf");
	}
	* {
	font-family: "Cairo Regular", Verdana;
	color: white;
	}
	html {
	border: 10px solid #182040;
	}
	body {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#182040+0,4d4790+100 */
	background: #182040; /* Old browsers */
	background: -moz-linear-gradient(top, #182040 0%, #4d4790 100%); /* FF3.6-15 */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#182040), color-stop(100%,#4d4790)); /* Chrome4-9,Safari4-5 */
	background: -webkit-linear-gradient(top, #182040 0%,#4d4790 100%); /* Chrome10-25,Safari5.1-6 */
	background: -o-linear-gradient(top, #182040 0%,#4d4790 100%); /* Opera 11.10-11.50 */
	background: -ms-linear-gradient(top, #182040 0%,#4d4790 100%); /* IE10 preview */
	background: linear-gradient(to bottom, #182040 0%,#4d4790 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#182040', endColorstr='#4d4790',GradientType=0 ); /* IE6-9 */
	}
	h1 {
	margin-top: 20vh;
	margin-bottom: 0;
	}
	.colHou {
	text-align: right;
	width: 50%;
	}
	.colMin {
	text-align: center;
	}
	.colSec {
	text-align: left;
	width: 50%;
	}
	.countdown, #timeOver {
	font-size: 50pt;
	font-weight: bold;
	}
	#timeOver {
	display: none;
	}
	.helpText {
	}
	#title {
	text-align: left;
	position: absolute;
	top: 10px;
	left: 10px;
	opacity: 0.3;
	}
	#figure {
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0;
	width: 100%;
	text-align: center;
	}
	#figure img {
	height: 50vh;
	}
	#infos {
	position: absolute;
	right: 1.5rem;
	}
	#infos tr > td:first-child {
	color: #FFDD17;
	}
	</style>
	<body style="text-align: center">
	<div id="infos">
	<table>
	<tr>
	<td>WIFI:</td>
	<td>wlan_highspeed</td>
	</tr>
	<tr>
	<td>Login:</td>
	<td>codingcontest.org/login</td>
	</tr>
	<tr>
	<td>Support:</td>
	<td>gitter.im/CodingContest-org</td>
	</tr>
	</table>
	</div>
	<div id="title">
	<img src="image/CCC-Logo_white@3x.png" width="30%" />
	</div>
	<div id="figure">
	<img src="image/codinator.png" />
	</div>
	<h1 id="headerId">Final Countdown</h1>
	<table style="margin: 0 auto;" id="countdownContainer">
	<tr class="countdown">
	<td class="colHou"><span id="countdownHou"></span></td>
	<td>:</td>
	<td class="colMin"><span id="countdownMin"></span></td>
	<td>:</td>
	<td class="colSec"><span id="countdownSec"></span></td>
	</tr>
	<tr class="helpText">
	<td class="colHou">hours</td>
	<td></td>
	<td class="colMin">minutes</td>
	<td></td>
	<td class="colSec">seconds</td>
	</tr>
	</table>
	<span id="timeOver">Time is over!</span>

	<script>

	var eCountdown = document.getElementById('countdownContainer');
	var eHou = document.getElementById('countdownHou');
	var eMin = document.getElementById('countdownMin');
	var eSec = document.getElementById('countdownSec');
	var eHeader = document.getElementById('headerId');
	var eTimeOver = document.getElementById('timeOver');
	var audioPeep = new Audio('audio/Robot_blip-Marianne_Gagnon-120342607.mp3');
	var audioEnd = new Audio('audio/Air Horn-SoundBible.com-964603082.mp3');

	function updateCountdown() {

	var currentTime = new Date().getTime(),
	restInMilliseconds = finalTime - currentTime,
	restInSeconds = parseInt(restInMilliseconds / 1000);

	if(restInSeconds >= 1) {

	// don't peep if the countdown did not run and we open the page and it is over
	updateCountdown.didRun = true;

	var hou = parseInt(restInSeconds / 60 / 60);
	min = parseInt(restInSeconds / 60 % 60);
	sec = parseInt(restInSeconds % 60);

	eHou.innerHTML = hou.pad();
	eMin.innerHTML = min.pad();
	eSec.innerHTML = sec.pad();

	if(soundEnabled) {
	if(restInSeconds <= 10) {
	// <= 10 sec, every second
	audioPeep.play();
	} else if(restInSeconds <= 60) {
	if(restInSeconds % 10 === 0) {
	// <= 1 min, every 10 seconds
	audioPeep.play();
	}
	} else if(restInSeconds <= (10 * 60)) {
	// at 10 min
	if(restInSeconds % (10 * 60) === 0) {
	audioPeep.play();
	setTimeout(audioPeep.play, 300);
	setTimeout(audioPeep.play, 600);
	}
	}
	}

	setTimeout(updateCountdown, 1000);
	} else {
	eHeader.style.visibility = 'hidden';
	eCountdown.style.display = 'none';
	eTimeOver.style.display = 'block';

	if(updateCountdown.didRun) {
	audioEnd.play();
	}
	}
	}

	Number.prototype.pad = function(size) {
	var s = String(this);
	while (s.length < (size \|\| 2)) {s = "0" + s;}
	return s;
	}

	if(finalCountdown) {
	eHeader.innerHTML = "Final Countdown";
	eTimeOver.innerHTML = "Time is over!";
	} else {
	eHeader.innerHTML = "Start in";
	eTimeOver.innerHTML = "Lets start!";
	}

	updateCountdown();

	</script>
	</body>
	</html>