mort
/
pipic


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180
							<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Slides</title>
<style>
	html, body {
		margin: 0px;
		padding: 0px;
		height: 100%;
		overflow: hidden;

		font-family: sans-serif;
	}

	#_overlay {
		z-index: 2;
		will-change: opacity;
	}
	#_main {
		z-index: 1;
	}
	#_msg {
		z-index: 3;
		position: absolute;
		top: 6px;
		right: 6px;
		backgrounud: white;
		display: none;
	}
	#_msg.active {
		display: block;
	}

	._content {
		background: white;
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0%;
		left: 0px;

		display: flex;
		align-items: center;
		justify-content: center;
	}

	._content ._wrapper {
		display: inline-block;
		text-align: center;
	}

	._content h1 { font-size: 7em }
	._content h2 { font-size: 6.5em }
	._content h3 { font-size: 5em }

	._content p { font-size: 2.2em }

	._content .fullscreen {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0px;
		left: 50%;
		-moz-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}
	._content img.fullscreen {
		width: auto;
	}
	._content img.fullscreen.stretch {
		width: 100%;
	}

	#_overlay {
		transition: opacity <<transition_time>>s, transform <<transition_time>>s;
		opacity: 1;
	}
	#_overlay.hidden {
		opacity: 0;
		transform: scale(1.1);
	}
</style>
	</head>
	<body>
		<div id="_main" class="_content"></div>
		<div id="_overlay" class="_content"></div>
		<div id="_msg"></div>

		<!-- Fetch polyfill -->
		<script src="/polyfills.js"></script>

<script>
	(function fullscreen() {
		var elem = document.body;
		var rFS = elem.requestFullScreen ||
			elem.msRequestFullScreen ||
			elem.mozRequestFullScreen ||
			elem.webkitRequestFullScreen;

		if (rFS)
			rFS.call(elem);
	})();

	var overlay = () => document.querySelector("#_overlay");
	var main = () => document.querySelector("#_main");
	var msg = () => document.querySelector("#_msg");

	function message(str) {
		msg().innerHTML = str;
		msg().className = "active";
	}

	// Swap the IDs of two elements
	function swap(elem1, elem2) {
		var tmp = elem1.id;
		elem1.id = elem2.id;
		elem2.id = tmp;
	}

	// Change slides with a transition
	function update(name) {
		overlay().innerHTML = "";
		overlay().className = "_content";
		swap(main(), overlay());

		fetch("/slide")
			.then(response => response.text())
			.then(text => {
				history.replaceState({}, "", "/"+name+"/");
				main().innerHTML = "<div class='_wrapper'>"+text+"</div>";
				setTimeout(() => {
					overlay().className = "_content hidden";
				}, 1000);
			})
			.catch(err => console.error(err));
	}

	function reload() {
		message("Server down, waiting");
		var i = setInterval(() => {
			fetch("/")
				.then(() => {
					history.replaceState({}, "", "/");
					location.reload();
				})
				.catch(() => {});
		}, 1000);
	}

	function await() {
		// Wait for the next slide change, then update again
		console.log("fetching");
		fetch("/await", { method: "POST" })
			.then(response => response.json())
			.then(obj => {
				console.log("fetched", JSON.stringify(obj));
				if (obj.evt === "next") {
					update(obj.args.name);
				} else if (obj.evt === "reload") {
					return reload();
				} else {
					console.log("Unknown event: "+obj.evt);
				}
				await();
			})
			.catch(err => { console.error(err); await(); });
	}

	await();

	fetch("/init")
		.then(response => response.text())
		.then(name => update(name));
</script>
	</body>
</html>