<!DOCTYPE html>
<html>
	<head>

		<!-- Page Title -->
		<title>Mi Huella por la Paz - Yucatán</title>
		<!-- Favicon -->
		<link rel="shortcut icon" href="favicon.ico?v3">

		<!-- Page Options -->
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=0">
				
		<!-- Styles -->
		<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Lato"/>
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
		<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">
		<link rel="stylesheet" type="text/css" href="ownStyle.css?v<?php echo rand(11111,99999); ?>" media="screen"/>
		
		<!-- Scripts -->
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
		<script src="script.js"></script>

	</head>


	<body onload="document.getElementById('search-box').focus();">


		<div class="ripple-background">
			<div class="circle xxlarge shade1"></div>
			<div class="circle xlarge shade2"></div>
			<div class="circle large shade3"></div>
			<div class="circle mediun shade4"></div>
			<div class="circle small shade5"></div>
		</div>


		<div class="container col-md-12" style="margin-top: 10%">

			<div class="d-flex justify-content-center  col-md-12 col-sm-12 col-xs-12">
				<div class="user_card">
				    <div class="d-flex justify-content-center">
				        <div class="brand_logo_container">
				            <img src="images/logo_geo.png" class=" visible-md brand_logo " alt="Logo">
				        </div>
				        <div class="brand_logo_container1">
				            <img src="images/g980.png" class=" hidden visible-xs visible-sm brand_logo1 " alt="Logo">
				        </div>
				        <div class="brand_logo_container2">
				            <img src="images/g1010.png" class="visible-md brand_logo1 " alt="Logo">
				        </div>
				    </div>
				    <div class=" justify-content-center container form_container">

				        <form method="get" action="lenguaje.php">

				            <div class="input-group" id="search-div">
				                <div class="input-group-append">
				                    <span class="input-group-text"><i class="fas fa-search"></i></span>
				                </div>

				                <input type="text" autocomplete="off" id="search-box"
				                       class="form-control col-md-12 custom-select" value=""
				                       placeholder="Seleccione la clave o nombre de su escuela" required ">
				                <input type="hidden" name="clave_escuela" id="clave_escuela">
				            </div>
				            <div class="input-group">
				                <div id="suggesstion-box" class="col-md-12"></div>
				            </div>

							<div style="width:100%; height: 50px; margin-top:10px;">
						<?php
						if (isset($_GET['err'])) {
							echo "<div id='derror' class=\"alert alert-danger alert-dismissible \"><strong>¡Debe seleccionar una opción de la lista!</strong></div>";
							echo '<script> setTimeout(function(){$( "#derror" ).fadeOut(1000);}, 3000); </script>';
						}
						?>
							</div>
						
				            <div class="" style=" width:100%; height: 200px; color: white; margin-top: -50px;">
				                <div class="mt-4">
				                    <div class="d-flex text-center justify-content-center links" id="titulo1">
				                    </div>
				                </div>
				                <div class="mt-2">
				                    <div class="d-flex text-center justify-content-center links">
				                        <h1 id="nombre_escuela"></h1>
				                    </div>
				                </div>
				                <div class="mt-4">
				                    <div class="d-flex text-center justify-content-center links" id="titulo2">
				                    </div>
				                </div>
				                <div class="mt-2">
				                    <div class="d-flex text-center justify-content-center links">
				                        <h3 id="clave"></h3>
				                    </div>
				                </div>
				                
				                				                
				                
				            </div>

				            <div class="d-flex justify-content-center mt-3 login_container">
					            <button style="margin: 5px; display: none;" type="button" id="clear" class="btn login_btn" onclick="selClear();">Cambiar</button>
				                <button style="margin: 5px; display: none;" type="submit" id="next" class="btn login_btn">Siguiente</button>

				            </div>
				            
				        </form>
				    </div>
				</div>

			</div>
			<div class="text-center" style="margin:40px;">
		        <img class="img-fluid img-responsive" src="images/Logo-Horizontal-V2-blanco.png" width="300"><br>

				<div class="text-center" style="margin:40px;">
				    <img class="img-fluid img-responsive" src="images/g122.png" width="300">
				</div>

			</div>
						
	</body>
</html>

