receiver/index.html

<!DOCTYPE html>
<html>
	<head>
		<title>Googolplex Theater</title>
		<style type="text/css">
			html, body {
				width: 100%;
				height: 100%;
				padding: 0;
				margin: 0;
			}
			body {
				overflow:hidden;
				background: #FFF;
			}
			#iframe {
				width: 100%;
				height: 100%;
			}
			#message {
				position:absolute;
				bottom:0px;
				right:0px;
				margin: 5px;
				opacity:0.7;
				font-family: sans-serif;
				color: white;
				text-shadow: 0px 0px 1px black;
			}
		</style>
	</head>
	<body>
		<div id="message">Googolplex Theater</div>
		<iframe id="iframe" src="" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" seamless="seamless"></iframe>
		<script type="text/javascript" src="receiver.js"></script>
		<script type="text/javascript">
			GoogolplexTheater.init((deviceName, settings, sendMessage) => {
				document.getElementById("message").innerText = deviceName;
				const { refreshSeconds, url } = settings;
				document.getElementById("iframe").src = url;
				if (refreshSeconds) {
					window.setInterval(() => {
						iframe.src += '';
					}, refreshSeconds * 1000);
				}
			});
		</script>
	</body>
</html>