dotStart/brainpower.html

## brainpower.html
<!DOCTYPE html>
<html xmlns="https://www.w3.org/1999/xhtml/">
	<head>
		<meta charset="UTF-8" />

		<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:700" />
		<style typte="text/css">
			body {
				font-family: 'Roboto', 'Helvetica Neue', 'Helvetica', sans-serif;
				font-size: 18px;
			}

			@keyframes message {
				0% {
					transform: scale(1, 1);
				}
				100% {
					transform: scale(1.5, 1.5);
				}
			}

			#messages {
				width: 50vw;
				margin: 0 auto;
				text-align: center;
			}

			#video-container {
				visibility: hidden;
			}

			h1 {
				animation-name: message;
				animation-duration: 175ms;
				transform-origin: 50% 50%;

				color: #FFFFFF;
				text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);


				animation-iteration-count: infinite;
				animation-direction: alternate;
			}
		</style>

		<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
		<script type="text/javascript" src="https://www.youtube.com/iframe_api"></script>
		<script type="text/javascript">
		// <![CDATA[
		'use strict';

		const displayTime = 2000;
		const animationTime = 250;
		const messages = {
			24: "Are you ready?",
			63: "Blockbuster!",
			66: "Brainpower!",
			91: "Brainpower!",
			155: "Blockbuster!",
			158: "Brainpower!",
			184: "Brainpower!"
		};

		var player;

		function onReady(event) {
			event.target.setVolume(10);
			event.target.playVideo();
		}

		function onStateChange(event) {
			if (event.data == YT.PlayerState.ENDED) {
				player.playVideo();
			}
		}

		function onUpdate() {
			var index = Math.floor(player.getCurrentTime());
			var message = messages[index];

			if (message != undefined) {
				var header = $('<h1 />').text(message).hide();
				$('#messages').append(header);

				header.show(animationTime, function() {
					window.setTimeout(function() {
						header.hide(animationTime, function() {
							header.remove();
						});
					}, displayTime);
				});
			}
		}

		function onYouTubeIframeAPIReady() {
			$(document).ready(function() {
				player = new YT.Player('video-container', {
					height: 1,
					width: 1,
					videoId: '9R8aSKwTEMg',
					events: {
						'onReady': onReady,
						'onStateChange': onStateChange
					}
				});


				window.setInterval(onUpdate, 1000);
			});
		}
		// ]]>
		</script>
	</head>
	<body>
		<div id="messages"></div>
		<div id="video-container"></div>
	</body>
</html>
	<!DOCTYPE html>
	<html xmlns="https://www.w3.org/1999/xhtml/">
	<head>
	<meta charset="UTF-8" />

	<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:700" />
	<style typte="text/css">
	body {
	font-family: 'Roboto', 'Helvetica Neue', 'Helvetica', sans-serif;
	font-size: 18px;
	}

	@keyframes message {
	0% {
	transform: scale(1, 1);
	}
	100% {
	transform: scale(1.5, 1.5);
	}
	}

	#messages {
	width: 50vw;
	margin: 0 auto;
	text-align: center;
	}

	#video-container {
	visibility: hidden;
	}

	h1 {
	animation-name: message;
	animation-duration: 175ms;
	transform-origin: 50% 50%;

	color: #FFFFFF;
	text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);


	animation-iteration-count: infinite;
	animation-direction: alternate;
	}
	</style>

	<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
	<script type="text/javascript" src="https://www.youtube.com/iframe_api"></script>
	<script type="text/javascript">
	// <![CDATA[
	'use strict';

	const displayTime = 2000;
	const animationTime = 250;
	const messages = {
	24: "Are you ready?",
	63: "Blockbuster!",
	66: "Brainpower!",
	91: "Brainpower!",
	155: "Blockbuster!",
	158: "Brainpower!",
	184: "Brainpower!"
	};

	var player;

	function onReady(event) {
	event.target.setVolume(10);
	event.target.playVideo();
	}

	function onStateChange(event) {
	if (event.data == YT.PlayerState.ENDED) {
	player.playVideo();
	}
	}

	function onUpdate() {
	var index = Math.floor(player.getCurrentTime());
	var message = messages[index];

	if (message != undefined) {
	var header = $('<h1 />').text(message).hide();
	$('#messages').append(header);

	header.show(animationTime, function() {
	window.setTimeout(function() {
	header.hide(animationTime, function() {
	header.remove();
	});
	}, displayTime);
	});
	}
	}

	function onYouTubeIframeAPIReady() {
	$(document).ready(function() {
	player = new YT.Player('video-container', {
	height: 1,
	width: 1,
	videoId: '9R8aSKwTEMg',
	events: {
	'onReady': onReady,
	'onStateChange': onStateChange
	}
	});


	window.setInterval(onUpdate, 1000);
	});
	}
	// ]]>
	</script>
	</head>
	<body>
	<div id="messages"></div>
	<div id="video-container"></div>
	</body>
	</html>