<html>
<head>
<title>INVENTORY - KAWASAN BERIKAT</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link type="text/css" rel="stylesheet" href="include/css/styles_login.css">
<link href="images/icon_logo.png" rel="shortcut icon">
<script type="text/javascript">
function cek_login(){
	if(login.username.value == ""){
		alert("Username belum diisi...!");
		login.username.focus();
		return false;
	}
	if(login.password.value == ""){
		alert("Password belum diisi...!");
		login.password.focus();
		return false;
	}
	login.action = "login.php";
	login.method = "post";
	login.submit();

}
</script>
<style>
	*{
		margin:0;
		padding:0;
		outline:0;
		font-family:'Open Sans', sans-serif;
	}
	body{
		height:100vh;
		background-image:url("images/kb.jpg");
		background-size:cover;
		background-position:center;
		background-repeat:no-repeat;
	}
	.container{
		position:absolute;
		left:50%;
		top:50%;
		transform:translate(-50%,-50%);
		padding:20px 25px;
		width:300px;
		background-color:rgba(128, 128, 128,0.6);
	}
	.container h1{
		text-align:left;
		color:#fafafa;
		margin-bottom:30px;
		text-transform:uppercase;
		border-bottom:4px solid #FFCC00;
	}
	.container label{
		text-align:left;
		color:#FFCC00;
	}
	.container form input{
		width:calc(100%);
		padding:8px 10px;
		margin-bottom:15px;
		border:none;
		background-color:transparent;
		border-bottom:2px solid #FFCC00;
		color:#fff;
		font-size:16px;
	}
	.container form button{
		width:100%;
		padding:10px;
		border:none;
		text-align:center;
		background-color:#FFCC00;
		font-size:18px;
		color:#fafafa;
		transition:all 0.5s;
		display:inline-block;
		cursor:pointer;
		border-radius:4px;
		margin:0px;
	}
	.container form button span{
		cursor:pointer;
		display:inline-block;
		position:relative;
		transition:0.5s;
	}
	.container form button span:after{
		content:'\00bb';
		position:absolute;
		opacity:0;
		top:0;
		right:-20px;
		transition:0.5s;
	}
	.container form button:hover span{
		padding-right:25px;
	}
	.container form button:hover span:after{
		opacity:1;
		right:0;
	}
</style>

</head>
<body>
	<div class="container">
		<h1>Login</h1>
		<form id="form-login" name="login" method="post">
		<label>Username</label><br>
		<input type="text" name="username"><br>
		<label>Password<label><br>
		<input type="password" name="password"><br>
		
		<button onClick="cek_login();"><span>Login</span></button> 
		</form>
	</div>
</div>
</body>
</html>
