control.html

<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>slam.js - Kleinkunst Competition Interactive Slides</title>
		<link rel="stylesheet" href="/css/bootstrap.min.css" />
		<link rel="stylesheet" href="/css/jsgrid.min.css" />
		<link rel="stylesheet" href="/css/jsgrid-theme.min.css" />
		<link rel="stylesheet" href="/css/control.css" />
		<script src="/js/jquery.min.js"></script>
		<script src="/js/jquery-ui.min.js"></script>
		<script src="/js/jsgrid.min.js"></script>
		<script src="/js/bootstrap.min.js"></script>
	</head>

	<body>
		<div id="current-slide"></div>
		<div id="upcoming-slide"><span class="overlay-element label">Upcoming</span></div>
		<div id="slam-controls">
			<ul class="nav nav-tabs" role="tablist">
				<li class="nav-item"><a class="nav-link active" role="tab" data-toggle="tab" href="#artists">Artists</a></li>
				<li class="nav-item"><a class="nav-link" role="tab" data-toggle="tab" href="#rounds">Rounds</a></li>
				<li class="nav-item"><a class="nav-link" role="tab" data-toggle="tab" href="#slots">Slots</a></li>
				<li class="nav-item"><a class="nav-link" role="tab" data-toggle="tab" href="#rating">Rating</a></li>
			</ul>

			<form id="slam-dropdown-container" class="form-inline">
				<div id="slam-round" class="input-group mb-3">
					<div class="input-group-prepend">
						<label class="input-group-text" for="slam-round-dropdown">Round</label>
					</div>
					<select class="custom-select" id="slam-round-dropdown"></select>
				</div>
				<div id="slam-layout" class="input-group mb-3">
					<div class="input-group-prepend">
						<label class="input-group-text" for="slam-layout-dropdown">Layout</label>
					</div>
					<select class="custom-select" id="slam-layout-dropdown"></select>
				</div>
			</form>

			<div class="tab-content">
				<div id="artists" class="tab-pane fade show active">
					<div id="artistGrid"></div>
				</div>
				<div id="rounds" class="tab-pane fade">
					<div id="roundGrid"></div>
				</div>
				<div id="slots" class="tab-pane fade">
					<div id="slotRoundGrid"></div>
					<div id="slotArtistGrid"></div>
				</div>
				<div id="rating" class="tab-pane fade">
					<div id="ratingGrid"></div>
				</div>
			</div>
		</div>

		<script src="/socket.io/socket.io.js"></script>
		<script src="/js/slamlib.js"></script>
		<script>
			var socket = io.connect(window.location.origin),
				socketId = '{{socketId}}';
		</script>
		<script src="/js/control.js"></script>
	</body>
</html>