<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
	<meta charset="utf-8">
	<title>Play a line animation</title>
	<style media="screen">
		#sample,
		svg {
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			width: 100%;
			height: 100%;
			font-family: sans-serif;
			z-index: 2;
		}

		img {
			position: absolute;
			top: 0;
			bottom: 0;
			right: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
		}

		path {
			fill: none;
			stroke: gray;
			stroke-width: 1mm;
			stroke-linecap: round;
		}

		path.before_in {
			opacity: .2;
		}

		#wrapper {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			background: none;
		}

		.gray {
			position: absolute;
			background: rgba(255, 255, 255, 0.7);
		}

		html,
		body {
			height: 100%;
			width: 100%;
			margin: 0;
			font-family: sans-serif;
		}

		
		input[type='range'] {
			position: absolute;
			z-index: 100;
			bottom: 0;
			left: 0;
			right: 0;
			width: 90%;
		}

		.scrubber {
			position: absolute;
			z-index: 100;
			bottom: 0;
			left: 0;
			right: 0;
			width: 90%;
		}
	</style>
	<link rel="stylesheet" href="assets/nouislider-15.5.0.css">
	<link rel="stylesheet" href="core.css">
</head>

<body>
	<div id='interface'>
	</div>
	<script src="assets/nouislider-15.5.0.js"></script>
	<script src="play.js"></script>
	<script src="playlist.js"></script>
	<script type='text/javascript'>
		if (location.search) {
			const player = new Player(
				document.getElementById("interface"),
				location.search.substring(1)
			);
		} else {
			const playlist = new Playlist(document.getElementById("interface"), '/files/');
		}
	</script>
</body>

</html>