<%-- 
    Document   : index
    Created on : 01/12/2014, 02:29:49 PM
    Author     : evicente
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="es">
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta charset="utf-8" />
		<title>:: SISTEMA DE ASISTENCIA ::</title>

		<meta name="description" content="User login page" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

		<!-- bootstrap & fontawesome -->
		<link rel="stylesheet" href="../assets/css/bootstrap.css" />
		<link rel="stylesheet" href="../assets/css/font-awesome.css" />

		<!-- text fonts -->
		<link rel="stylesheet" href="../assets/css/ace-fonts.css" />

		<!-- ace styles -->
		<link rel="stylesheet" href="../assets/css/ace.css" />

		<!--[if lte IE 9]>
			<link rel="stylesheet" href="../assets/css/ace-part2.css" />
		<![endif]-->
		<link rel="stylesheet" href="../assets/css/ace-rtl.css" />

		<!--[if lte IE 9]>
		  <link rel="stylesheet" href="../assets/css/ace-ie.css" />
		<![endif]-->

		<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->

		<!--[if lt IE 9]>
		<script src="../assets/js/html5shiv.js"></script>
		<script src="../assets/js/respond.js"></script>
		<![endif]-->
                
                <link href="compiled/flipclock.css" rel="stylesheet" type="text/css"/>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
                <script src="compiled/flipclock.js" type="text/javascript"></script>
		
                
	</head>

	<body class="login-layout blur-login">
		<div class="main-container">
			<div class="main-content">
				<div class="row">
					<div class="col-sm-10 col-sm-offset-1">
						<div class="login-container">
							<div class="center">
								<h1>
									<i class="ace-icon fa fa-clock-o  green"></i>
									<span class="red">Sistema de </span>
									<span class="white" id="id-text2">  Asistencia</span>
								</h1>
								<h4 class="light-blue" id="id-company-text">Saco Oliveros 2015</h4>
                                                                <br>
                                                                <br>
                                                                <br>
                                                                
                                                                
                                                                <div class="clock" style="margin:2em;"></div>

                                                                <script type="text/javascript">
                                                                        var clock;

                                                                        $(document).ready(function() {
                                                                            alert();
                                                                                clock = $('.clock').FlipClock({
                                                                                        clockFace: 'TwelveHourClock'
                                                                                });
                                                                        });
                                                                </script>
                                                                
                                                                
                                                                
                                                        
                                                        </div>
                                                    
                                                    
                                                    

							<div class="space-6"></div>

							<div class="position-relative">
                                                            <center>
								<div id="login-box" class="login-box visible widget-box no-border">
									<div class="widget-body">
										<div class="widget-main">
											<h4 class="header blue lighter bigger">
												<i class="ace-icon fa fa-users green"></i>
                                                                                                Acceso al Sistema
											</h4>

											<div class="space-6"></div>

											<form>
												<fieldset>
													<label class="block clearfix">
														<span class="block input-icon input-icon-right">
															<input id="txt_usuario" type="text" class="form-control" placeholder="Usuario" />
															<i class="ace-icon fa fa-user"></i>
														</span>
													</label>

													<label class="block clearfix">
														<span class="block input-icon input-icon-right">
															<input id="txt_contrasena" type="password" class="form-control" placeholder="Contraseña" onkeypress='enter(event);'/>
															<i class="ace-icon fa fa-lock"></i>
														</span>
													</label>

													<div class="space"></div>
                                                    <div id="MensajeErrorLogin">
                                                    </div>
                                                    <div class="space"></div>
													<div class="clearfix">

														<button type="button" class="width-35 pull-center btn btn-sm btn-primary" onClick="validarLogin();">
															<i class="ace-icon fa fa-key"></i>
															<span class="bigger-110">Ingresar</span>
														</button>
													</div>

													<div class="space-4"></div>
												</fieldset>
											</form>
                                            
											<div class="space-6"></div>
                                            
										</div><!-- /.widget-main -->

										<div class="toolbar center">
                                        <span class="bigger-120">
                                            <span class="white">Saco Oliveros - Sistemas &copy; 2015</span><br>
                                             <img src="../assets/images/icons/internet explorer.png" class="align-middle">
                                            &nbsp;
                                            <img src="../assets/images/icons/chrome3.png" class="align-middle">
                                            &nbsp;
                                            <img src="../assets/images/icons/firefox.png" class="align-middle">
                                            &nbsp;
                                            <img src="../assets/images/icons/opera.png" class="align-middle">
                                            &nbsp;
                                            <img src="../assets/images/icons/safari2.png" class="align-middle">
                                            &nbsp;
                                            <img src="../assets/images/icons/html5.png" class="align-middle">
                                            &nbsp;
                                            <img src="../assets/images/icons/css3.png" class="align-middle">
                                            &nbsp;
                                            <img src="../assets/images/icons/android.png" class="align-middle">
                                        </span>
										</div>
									</div><!-- /.widget-body -->
								</div><!-- /.login-box -->
                                                            </center>
							</div><!-- /.position-relative -->
						</div><br>
                                              
					</div><!-- /.col -->
				</div><!-- /.row -->
			</div><!-- /.main-content -->
		</div><!-- /.main-container -->

		<!-- basic scripts -->

		<!--[if !IE]> -->
		<script type="text/javascript" src="../assets/js/jquery-1.7.2.min.js"></script>
                <script language="javascript" type="text/javascript">   
                    function validarLogin(){
			  var p_usuario=$('#txt_usuario').val();
			  var p_password=$('#txt_contrasena').val();	  
			  $.ajax({
				  type:'POST',
				  url:'../ServletUsuario?accion=validarUsuario',
				  data:'txt_usuario='+p_usuario+'&txt_contrasena='+p_password,
				  success:function(resultado){
                                      $('#MensajeErrorLogin').html(resultado);
				  },complete: function (){
                                      mensajeAlert();
				}
			  });  	
                    }
                    function enter(e) {
                        tecla = (document.all) ? e.keyCode : e.which;
                        if (tecla==13) validarLogin();
                    }

                    $('input').keypress(function(e){
                        if(e.which == 13){
                            return false;
                        }
                    });
                        
		  function mensajeAlert(){
			  bandera=$('#hbandera').val();
			  if (bandera==1){
				  //alert("usuario ok");
                                  window.location="principal.jsp";
			  }else{
				  $('#txt_usuario').val("");
				  $('#txt_contrasena').val("");
				  $('#txt_usuario').focus();
			  }
		  }
                </script>
        
	</body>
</html>
