<!doctype html>
<html lang="en">

<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.css" rel="stylesheet"/>

<style>
bodyX {
  background: #00589F;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00589F', endColorstr='#0073CF', GradientType=0);
  background: -webkit-linear-gradient(to bottom, #00589F 50%, #0073CF) !important;
  background: -moz-linear-gradient(to bottom, #00589F 50%, #0073CF) !important;
  background: -ms-linear-gradient(to bottom, #00589F 50%, #0073CF) !important;
  background: -o-linear-gradient(to bottom, #00589F 50%, #0073CF) !important;
  background: linear-gradient(to bottom, #00589F 50%, #0073CF) !important;
  color: white;
  background-color: white;
}

div.well{
  height: 250px;
} 

.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

.Absolute-Center.is-Responsive {
  width: 50%; 
  height: 50%;
  min-width: 200px;
  max-width: 400px;
  padding: 40px;
}

#logo-container{
  margin: auto;
  margin-top: -30px;
  margin-bottom: 10px;
  width:200px;
  height:180px;
  background-image:url('/assets/img/logo.jpg');
}

#title-container{
  margin: auto;
  width:120px;
  height:30px;
}
</style>
</head>

<body>

<div class="container">
  <div class="row">
    <div class="Absolute-Center is-Responsive">
      <div id="logo-container"></div>
      <div id="title-container"><h4><b>K P D N H E P</b></h4></div>
      <div class="col-sm-12 col-md-10 col-md-offset-1">
        <form action="" id="loginForm">
          <div class="form-group input-group">
            <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
            <input class="form-control" type="text" id="username" name='username' placeholder="username" value=""/>          
          </div>
          <div class="form-group input-group">
            <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
            <input class="form-control" type="password" id="password" name='password' placeholder="password" value=""/>     
          </div>
          <br/>
          <!--
          <div class="checkbox">
            <label>
              <input type="checkbox"> I agree to the <a href="#">Terms and Conditions</a>
            </label>
          </div>
-->
          <div class="form-group">
            <button type="button" id="login" class="btn btn-def btn-block">Login</button>
          </div>
          <!--
          <div class="form-group text-center">
            <a href="#">Forgot Password</a>&nbsp;|&nbsp;<a href="#">Support</a>
          </div>
            -->
        </form>        
      </div>  
    </div>    
  </div>
</div>


</body>

<script src="/assets/js/jquery-1.10.2.js" type="text/javascript"></script>
<script src="/assets/js/bootstrap.min.js" type="text/javascript"></script>

<script>
        $(document).ready(function() {
			
			$.ajaxSetup({
                cache: false
            });			

            $('#login').on('click', function (e) {
                
                var username = $('#username').val();
                var password = $('#password').val();
                if (username === 'kpdnhep' && password === 'kpdnhep') {
                    window.location = "/k/index.php";
                }
                else {
                    alert("Wrong credential!");
                }
		    });	

        });
    </script>

</html>