<!DOCTYPE html>
<html>

  <head>
    <meta charset='utf-8' />
    <meta http-equiv="X-UA-Compatible" content="chrome=1" />
    <meta name="description" content="HTML5 QR Lector" />
	
    <link rel="stylesheet" type="text/css" href="css/style_menu.css">
    <link href="icon.css" media="screen" rel="stylesheet" type="text/css" />

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    <script src="http://192.168.1.5:3000/socket.io/lib/socket.io.js"></script>
    <script src="libs/html5-qrcode.min.js"></script>
    <script>
    	$(document).ready(function(){
			$('#reader').html5_qrcode(function(data){
					$('#read').html(data);
			$("#bot").click(function () {     
            	$('#bot').toggle();
             });
		},
		function(error){
			$('#read_error').html(error);
		},function(videoError){
			$('#vid_error').html(videoError);
		}
	);
	
	
	});
    </script>

    <title>Lector HTML5</title>
  </head>

  <body>
  <div class="wrap">
	<nav>
		<ul class="menu">
			
			<li><a href="/usuario"><span class="icon-github"> </span>Perfil</a>
			</li>
			<li><a href="/Anuncios"><span class="icon-users"></span>Donaciones</a>
			<li><a href="#"><span class="icon-film"> </span>Adopciones</a>
				<ul>
					<li><a href="/video">Hacer foto</a></li>
					<li><a href="/index">Hacer video</a></li>
					<li><a href="/upload">Subir archivo</a></li>
					<li><a href="/mos_foto">Animales en adopcion</a></li>
					<li><a href="/mos_video">Animales felices</a></li>
					
				</ul>
			</li>
			<li><a href="#"><span class="icon-home"></span>¿Quienes somos?</a>
				<ul>
					<li><a href="/Adopcion">Como adoptar</a></li>
					<li><a href="/Busqueda">Busqueda</a></li>
					<li><a href="#">¿Quieres ayudar?</a></li>
						<ul>
							<li><a href="/Socio">Socio</a></li>
							<li><a href="/Simpatizante">Simpatizante</a></li>
							<li><a href="/Voluntario">Voluntario</a></li>
						</ul>
				</ul>
			</li>
			<li><a href="#"><span class="icon-location"> </span>Animales perdidos</a>
				<ul>
					<li><a href="/Foto_loc">Foto con localización</a></li>
					<li><a href="/Galeria_Loc">¡Al rescate!</a></li>
				
				</ul>
			</li>
			<li><a href="#"><span class="icon-users"> </span>Códigos QR</a>
				<ul>
					<li><a href="/Lec_qr">Lector qr</a></li>
					<li><a href="/Cod_qr">Generar qr</a></li>
				</ul>
			</li>
			
			
			<li><a href="/logout">Salir</a></li>
			
		</ul>
		<div class="clearfix"> </div>	
	</nav>
	</div>	
	
<h3 class="center" style= "font-style:oblique;font-family:cursive;font-size:18px;font-weight:bold;text-shadow: 3px 3px 3px #aaa;">Lector QR</h3>

<div  class="center" id="reader" style="width:300px;height:250px;"> </div>
<div class="center">
<h6 class="center">Resultado de la lectura</h6>
<span id="read" class="center"> </span>
</div><br>
<div class="center">
<h6 class="center" style= "font-style:oblique;font-family:cursive;font-size:13px;font-weight:bold;text-shadow: 3px 3px 3px #aaa;">Read Error (Debug only)</h6>
<span class="center" style= "font-style:oblique;font-family:cursive;font-size:10px;">Will constantly show a message, can be ignored</span>
<span id="read_error" class="center"> </span>
</div>
<br>
<div class="center">
<h6 class="center"style="font-style:oblique;font-family:cursive;font-size:13px;font-weight:bold;text-shadow: 3px 3px 3px #aaa;"> Video Error</h6>
<span id="vid_error" class="center"style= "font-style:oblique;font-family:cursive;font-size:10px;"> </span>
</div>
<br>
<br>
<br>
  </body>
</html>
