Silahkan gunakan sintax dibawah untuk halaman login anda
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Login</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!--<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">-->
<link rel="stylesheet" href="bootstrap/css/login.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous" />
<!-- font awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous" />
<style>
@import url(https://fonts.googleapis.com/css?family=Vibur);
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
font-family: arial;
}
body {
background: #FF9000;
}
h1 {
color: #ccc;
text-align: center;
font-family: 'Vibur', cursive;
font-size: 50px;
}
.login-form {
width: 350px;
padding: 40px 30px;
background: #eee;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
margin: auto;
position: absolute;
left: 0;
right: 0;
top: 50%;
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.form-group {
position: relative;
margin-bottom: 15px;
}
.form-control {
width: 100%;
height: 50px;
border: none;
padding: 5px 7px 5px 15px;
background: #fff;
color: #666;
border: 2px solid #ddd;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
.form-control:focus, .form-control:focus + .fa {
border-color: #10CE88;
color: #10CE88;
}
.form-group .fa {
position: absolute;
right: 15px;
top: 17px;
color: #999;
}
.log-status.wrong-entry {
-moz-animation: wrong-log 0.3s;
-webkit-animation: wrong-log 0.3s;
animation: wrong-log 0.3s;
}
.log-status.wrong-entry .form-control, .wrong-entry .form-control + .fa {
border-color: #ed1c24;
color: #ed1c24;
}
.log-btn {
background: #0AC986;
dispaly: inline-block;
width: 100%;
font-size: 16px;
height: 50px;
color: #fff;
text-decoration: none;
border: none;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
.link {
text-decoration: none;
color: #C6C6C6;
float: right;
font-size: 12px;
margin-bottom: 15px;
}
.link:hover {
text-decoration: underline;
color: #8C918F;
}
.alert {
display: none;
font-size: 12px;
color: #f00;
float: left;
}
@-moz-keyframes wrong-log {
0%, 100% {
left: 0px;
}
20% , 60% {
left: 15px;
}
40% , 80% {
left: -15px;
}
}
@-webkit-keyframes wrong-log {
0%, 100% {
left: 0px;
}
20% , 60% {
left: 15px;
}
40% , 80% {
left: -15px;
}
}
@keyframes wrong-log {
0%, 100% {
left: 0px;
}
20% , 60% {
left: 15px;
}
40% , 80% {
left: -15px;
}
}
</style>
</head>
<body onload="getlocal()" style="background-color:#075E54">
<div class="container">
<div class="login-form">
<div class="box-header with-border">
<h1 sytle="font-style:arial">LOGIN</h1>
</div>
<form role="form" method="post">
<div class="form-row">
<!--<h4 class="title my-3 text-center">Login For Access</h4>-->
<div class="col-12">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1"><i class="fas fa-user"></i></span>
</div>
<input name="username" type="text" value="" class="input form-control" id="username" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1" />
</div>
</div>
<div class="col-12">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1"><i class="fas fa-lock"></i></span>
</div>
<input name="katasandi" type="password" value="" class="input form-control" id="katasandi" placeholder="password" required="true" aria-label="password" aria-describedby="basic-addon1" />
<div class="input-group-append">
<span class="input-group-text" onclick="password_show_hide();">
<i class="fas fa-eye" id="show_eye"></i>
<i class="fas fa-eye-slash d-none" id="hide_eye"></i>
</span>
</div>
</div>
</div>
</div>
<div class="box-footer">
<button type="submit" class="btn btn-primary log-btn" name="masuk">Login</button>
<a href="../">Belum Punya Akun? Daftar Disini</a>
<br>
<a href="https://api.whatsapp.com/send?phone=6282296569339&text=halo%20admin%20mohon%20dibantu%20reset%20password%20saya.%20terima%20kasih">Lupa Password? Klik Disini</a>
</div>
</form>
</div>
</div>
<script>
function password_show_hide() {
var x = document.getElementById("katasandi");
var show_eye = document.getElementById("show_eye");
var hide_eye = document.getElementById("hide_eye");
hide_eye.classList.remove("d-none");
if (x.type === "password") {
x.type = "text";
show_eye.style.display = "none";
hide_eye.style.display = "block";
} else {
x.type = "password";
show_eye.style.display = "block";
hide_eye.style.display = "none";
}
}
</script>
</body>
</html>
