<?php
session_start();

?>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script><!-- untuk simpan tanpa relod ajax -->

<title>MMU A-39 REJOSARI</title>
<link href="assets/img/favicon.png" rel="icon">
</head>

<script type="text/javascript">
/*  https://erroz.wordpress.com/2009/03/30/fungsi-pindah-baris/*/
    function nextfield(ID)
{
if (event.keyCode == 13)
document.getElementById(ID).focus();
}
</script>


<body>

<div class="container">

<link rel="stylesheet" type="text/css" href="stylelogin.css">
<form method = "POST" class="form-user" >

	
	

<div class="login-background">
     <div class="login-header">
     <img src="img/logougt.png" class="img-logo">
     <p></p>
     
    </div>
<div class="login-body">

<tr>
<!-- <td>Username</td> -->
<!-- <td>:</td> -->
<div class="input-group">
<td><input type="text" name="username"  placeholder=" Masukkan UserName Anda" onkeypress="nextfield('pasword')" autofocus/>
<!-- <span class="fa fa-user form-control-feedback right" aria-hidden="true"></span> -->
<!-- <font face='Arial' size=1>" -->
	
</tr>
</div>
<!-- <td>Password</td> -->
<!-- <td>:</td> -->
<div class="input-group">

 
<td><span class="input-group-addon"> <i class="glyphicon glyphicon-lock"></i></span><input type="password" name="password"  placeholder=" Masukkan Pasword Anda" id="pasword" onkeypress="nextfield('masuk')">

</tr></div></span>

<tr>
<td></td>
<td></td>
<td><button type="button" class="login-id" id="masuk" >Login</td></button>
</td>


<!-- <script type="text/javascript">document.formID.inputID.focus();</script>
 -->
<!-- untuk kursor otomatis ada di field
<script type="text/javascript">
	https://www.dumetschool.com/blog/cara-membuat-input-auto-fokus-pada-html
	function SetFocus () {
		/*var input = document.getElementById ("theFieldID");*/
		var input = document.getElementById ("inputID");

		input.focus ();
		</script> -->

<!--https://www.malasngoding.com/input-data-ke-database-tanpa-reload-dengan-ajax-jquery-->
  <script type="text/javascript"> 
  $(document).ready(function(){
    $(".login-id").click(function(){
      let data = $('.form-user').serialize();
      
      $.ajax({
        type: 'POST',
        url: "validasi_login.php",
        data: data,
        success: function() {
        	window.location.href= './home.php?home=beranda';
         
        }
      });
    });
  });
  </script>

		

</table>
<style type="text/css">
.login-id{
background: #0eb7cc;
color: #fff;
border-radius: 12px;
padding: 10px;
width: 100%;
border: none;
}
</style>
<style type="text/css">
.img-logo{
height: 77px; /*mengatur tinggi logo*/
width: 110px; /*mengatur lebar logo*/ 
}
a,a:hover,a:visited,a:active{
text-decoration: none;
color: #999;
}


.container{
  /*background:rgba(142, 130, 136, 0.2);*/

    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    padding: 20px 25px;
    width: 300px;

    /*background-color: rgba(0,0,0,.7);
    box-shadow: 0 0 10px rgba(255,255,255,.3);
    http://abdulrazaknaufal.com/panduan-membuat-form-login-dengan-html-dan-css/
		*/
}
</style>

<!-- https://kursuswebdesign.org/cara-membuat-login-form-dengan-background-image-di-bootstrap/ -->
<style type="text/css">
body { 
 background: url(./img/kepatuhan_spi.jpg) no-repeat center center fixed; 
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
}
.container{
  opacity: 0.9; /*untuk tranpran*/
    position: absolute;
    left: 40%;
    top: 50%;
    transform: translate(-50%,-50%);
    padding: 20px 25px;
    width: 50px;
    }
</style>

</form>
</body>
</html>
					
					