<?php
if ($_SESSION['id_user'] == "") {
	echo '
			<script>
				window.location = "/login"
			</script>
        ';
}
?>

<video autoplay muted id="myVideo">

	<source src="https://firebasestorage.googleapis.com/v0/b/beegoup-160ea.appspot.com/o/Stand_cp.mp4?alt=media&token=d909ed6d-597e-4c13-baa1-c38a65db1f40" type="video/mp4">


</video>
<!-- <img id="myVideo" src="/img/bg_home.jpeg" alt=""> -->

<style>
	#myVideo {
		position: fixed;
		right: 0;
		bottom: 0px;
		min-width: 100%;
		min-height: 100%;
		z-index: -1;
		width: 100%;
		padding-top: auto;
	}

	.blanco {
		color: white !important;
	}
</style>


<h3 style="position: absolute; bottom: 60%; left: 30%;" class="blanco">El acceso a los Stands se activará el día 22 de Abril</h3>


<div id="maestro" class="e_web">
	<div style="display: none;" id="button_lobby">
		<a href="<?php echo $url; ?>/stand/1"><button type="button" class="btn btn-light botones" style="position: absolute; bottom: 20px; left: 10%;border-radius: 30px; margin-bottom: 15px; padding: 10px 30px; color: #000; font-size: 20px; background-color: #fdd300; border: 0; font-family: S-Core-CoreSansBold;" >ARGENTINA</button></a>
		<a href="<?php echo $url; ?>/stand/2"><button type="button" class="btn btn-light botones" style="position: absolute; bottom: 20px; left: 25%;border-radius: 30px; margin-bottom: 15px; padding: 10px 30px; color: #000; font-size: 20px; background-color: #fdd300; border: 0; font-family: S-Core-CoreSansBold;">COLOMBIA</button></a>
		<a href="<?php echo $url; ?>/stand/3"><button type="button" class="btn btn-light botones" style="position: absolute; bottom: 20px; left: 40%;border-radius: 30px; margin-bottom: 15px; padding: 10px 30px; color: #000; font-size: 20px; background-color: #fdd300; border: 0; font-family: S-Core-CoreSansBold;">MEXICO</button></a>

		<a href="<?php echo $url; ?>/stand/4"><button type="button" class="btn btn-light botones" style="position: absolute; bottom: 20px; left: 55%;border-radius: 30px; margin-bottom: 15px; padding: 10px 30px; color: #000; font-size: 20px; background-color: #fdd300; border: 0; font-family: S-Core-CoreSansBold;">EXPERIENCIAS</button></a>
		<a href="<?php echo $url; ?>/stand/5"><button type="button" class="btn btn-light botones" style="position: absolute; bottom: 20px; left: 70%;border-radius: 30px; margin-bottom: 15px; padding: 10px 30px; color: #000; font-size: 20px; background-color: #fdd300; border: 0; font-family: S-Core-CoreSansBold;">JUEGOS</button></a>
		<a href="<?php echo $url; ?>/lobby">
			<img src="<?php echo $url; ?>/img/img_wd/bt_back.png" style="width: 130px; position: absolute; top: 120px; left: 3%;">
		</a>
	</div>
</div>

<div class="e_movil" align="center">
	<div style="display: none;" id="button_lobby">
		<a href="<?php echo $url; ?>/stand/1"><button type="button" class="btn btn-light botones_movil">ARGENTINA</button></a>
		<a href="<?php echo $url; ?>/stand/2"><button type="button" class="btn btn-light botones_movil">COLOMBIA</button></a>
		<a href="<?php echo $url; ?>/stand/3"><button type="button" class="btn btn-light botones_movil">MEXICO</button></a>
		<a href="<?php echo $url; ?>/stand/4"><button type="button" class="btn btn-light botones_movil">EXPERIENCIAS</button></a>
		<a href="<?php echo $url; ?>/stand/5"><button type="button" class="btn btn-light botones_movil">JUEGOS</button></a>
		<a href="<?php echo $url; ?>/lobby">
			<img src="<?php echo $url; ?>/img/img_wd/bt_back.png" width="220">
		</a>
	</div>

</div>


<style>
	.botones {
		border-radius: 30px;
		font-size: 11px;
		padding: 5px 20px;
		font-weight: bold;
		box-shadow: 0px 3px 0px #a2a2a2;
		width: 200px;
	}

	.botones_movil {
		border-radius: 30px;
		width: 90%;
		font-size: 11px;
		padding: 5px 20px;
		font-weight: bold;
		box-shadow: 0px 3px 0px #a2a2a2;
		margin-bottom: 10px;
	}
</style>

<script type='text/javascript'>
	document.getElementById('myVideo').addEventListener('ended', myHandler, false);

	function myHandler(e) {
		document.getElementById('button_lobby').style.display = 'block'
	}
</script>

<script>
	$(document).ready(function() {
		$("#maestro").height($("#img_muestra").height());

		alto = $(window).width() * 0.37;

		$("#diabetes").css("top", (alto * 0.42));
		$("#cardio").css("top", (alto * 0.3));
		$("#neuro").css("top", (alto * 0.3));
		$("#angels").css("top", (alto * 0.44));

	});

	$(window).resize(function() {
		$("#maestro").height($("#img_muestra").height());
	});
</script>