<!DOCTYPE html>
<html lang="fr">
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	
	<?php 
		$page = "lobby";
		$t = time();
	?>

	<head>
		<style type="text/css">
			@import "../styles/lobby.css?<?php echo $t ?>";
			@import "../styles/_common.css?<?php echo $t ?>";
			@import "../styles/_objects.css?<?php echo $t ?>";
		</style>

	</head>

	<body>
		<div id="zHeader">
			<img src="../media/logo.png" alt="logo"/>
			<div class="zFlexRow zFGrow zVCenter">
				<div class="zFlexCol zMgL">
				</div>
				<div class="zFlexCol">
					<div><img id="wip" class="zMgL" height="50px" src="../media/wait_.gif" hidden></img></div>
				</div>
			</div>
			<div class="zFlexCol zMgR">
			</div>
		</div>
		
		<div id="zMenuBar">
			<!-- MENU -->
			<div id="leftMenu" class="zFlexRow zFGrow"></div>
			<div id="rightMenu" class="zFlexRow">
				<button type="button" class="zButton zButtonMenuStd zMgL" onclick="navPage('board.php')"><img class="zIconzButtonImageLeft" src="../media/experiment.png"></img>Board test</button>
			</div>
		</div>

		<div id="zMainBody">
		</div>

		<!-- ZONE D'AFFICHAGE PIED DE PAGE -->
		<div id="zFooter">
			<div id="fmessage" class="zFlexRow zFGrow zVCenter unselectable"></div>
			<div class="zFlexRow zVCenter">
				<div id="webApiState" class="zMgR" onclick="parent.startWebService()">
					<span id="webAPI" class="state">Serveur</span>
				</div>
				<div id="switchBlock" class="zFlexRow zVCenter zMgR">
					<span class="zMgR unselectable"><b>Dark/Light mode </b></span>
					<?php $theme="<script>document.write(localStorage.getItem('theme'));</script>"; ?>
					<div class="toggle">
						<input type="checkbox" id="theme-checkbox"/>
						<label for="theme-checkbox"></label>
					</div>
				</div>
			</div>
		</div>

	</body>

	<script type="module" src="../js/_common.js?<?php echo $t ?>"></script>
	<script type="module" src="../js/<?php echo $page; ?>.js?<?php echo $t ?>"></script>

</html>