mort
/
pipic


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
							<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Slides</title>
<style>
	html, body {
		margin: 0px;
		padding: 0px;
		height: 100%;
		overflow: hidden;
	}

	#_overlay {
		z-index: 2;
	}
	#_main {
		z-index: 1;
	}

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

	._content {
		text-align: center;
	}

	._content h1 { font-size: 5em }
	._content h2 { font-size: 4.5em }
	._content h3 { font-size: 4em }

	._content p { font-size: 2.2em }

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

	#_overlay {
		transition: opacity 1s;
		opacity: 1;
	}
	#_overlay.hidden {
		opacity: 0;
	}
</style>
	</head>
	<body>
		<div id="_main" class="_content"></div>
		<div id="_overlay" class="_content"></div>

<script>
	var overlay = () => document.querySelector("#_overlay");
	var main = () => document.querySelector("#_main");

	// 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() {
		overlay().innerHTML = "";
		overlay().className = "_content";
		swap(main(), overlay());

		fetch("/slide")
			.then(response => response.text())
			.then(text => {
				setTimeout(() => {
					main().innerHTML = text;
					overlay().className = "_content hidden";
				}, 1000);
			})
			.catch(err => console.error(err));

		// Wait for the next slide change, then update again
		fetch("/await")
			.then(response => update())
			.catch(err => { console.error(err); update(); });
	}

	update();
</script>
	</body>
</html>