162 lines
4.6 KiB
PHP
162 lines
4.6 KiB
PHP
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<title><?php echo $title; ?></title>
|
|
<meta name="author" content="phpmu.com">
|
|
<!-- Tell the browser to be responsive to screen width -->
|
|
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
|
|
<!-- Bootstrap 3.3.5 -->
|
|
<link rel="stylesheet" href="<?php echo base_url(); ?>/asset/admin/bootstrap/css/bootstrap.min.css">
|
|
<!-- Font Awesome -->
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
|
|
<!-- Ionicons -->
|
|
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
|
|
<!-- Theme style -->
|
|
<link rel="stylesheet" href="<?php echo base_url(); ?>/asset/admin/dist/css/AdminLTE.min.css">
|
|
<!-- iCheck -->
|
|
<link rel="stylesheet" href="<?php echo base_url(); ?>/asset/admin/plugins/iCheck/square/blue.css">
|
|
</head>
|
|
<style>
|
|
.teks {
|
|
font-style: italic;
|
|
font-size: 30px;
|
|
color: black;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.teks.visible {
|
|
opacity: 1;
|
|
}
|
|
|
|
.overlay {
|
|
position: absolute;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background-color: white;
|
|
justify-items: center;
|
|
z-index: 3;
|
|
color: transparent;
|
|
height: 100%;
|
|
width: 100%;
|
|
opacity: 20%;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(40px);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeOut {
|
|
from {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
to {
|
|
opacity: 0;
|
|
transform: translateY(40px);
|
|
}
|
|
}
|
|
|
|
.fadeIn {
|
|
animation: fadeIn 3s forwards;
|
|
}
|
|
|
|
.fadeOut {
|
|
animation: fadeOut 1s forwards;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<center>
|
|
<div class="overlay" id="overlay">
|
|
<img class="gambar" id="gambar"
|
|
src="https://media3.giphy.com/media/v1.Y2lkPTc5MGI3NjExbzNudXk2Z2s4eW51MTRrdmhvdHp6YWZhMDdoYXlmb2g0ZHJ5cDcyMSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9cw/Lew6ElbGiIVuIaiwNa/giphy.webp"
|
|
alt="">
|
|
<p class="teks" id="teks">Bayar Gaji Pegawai Lebih Mudah Menggunakan Aplikasi Dana</p>
|
|
</div>
|
|
</center>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const overlayElement = document.getElementById('overlay');
|
|
overlayElement.classList.add('fadeIn');
|
|
|
|
setTimeout(() => {
|
|
overlayElement.classList.remove('fadeIn');
|
|
overlayElement.classList.add('fadeOut');
|
|
}, 6000);
|
|
|
|
overlayElement.addEventListener('animationend', () => {
|
|
if (overlayElement.classList.contains('fadeOut')) {
|
|
overlayElement.style.display = 'none';
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
|
|
<body class="hold-transition login-page">
|
|
<div class="login-box">
|
|
<div class="login-logo">
|
|
<a href="#"><b>Pelapak </b> Login</a>
|
|
</div><!-- /.login-logo -->
|
|
<div class="login-box-body">
|
|
<p class="login-box-msg">Silahkan Login Pada Form dibawah ini</p>
|
|
|
|
<form action="" method="post">
|
|
<div class="form-group has-feedback">
|
|
<input type="text" class="form-control" name='a' placeholder="Username" required>
|
|
<span class="glyphicon glyphicon-user form-control-feedback"></span>
|
|
</div>
|
|
<div class="form-group has-feedback">
|
|
<input type="password" class="form-control" name='b' placeholder="Password" required>
|
|
<span class="glyphicon glyphicon-lock form-control-feedback"></span>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-xs-8">
|
|
<div class="checkbox icheck">
|
|
<label>
|
|
<input type="checkbox"> Remember Me
|
|
</label>
|
|
</div>
|
|
</div><!-- /.col -->
|
|
<div class="col-xs-4">
|
|
<button name='submit' type="submit" class="btn btn-primary btn-block btn-flat">Sign In</button>
|
|
</div><!-- /.col -->
|
|
</div>
|
|
</form>
|
|
|
|
</div><!-- /.login-box-body -->
|
|
</div><!-- /.login-box -->
|
|
|
|
<!-- jQuery 2.1.4 -->
|
|
<script src="<?php echo base_url(); ?>/asset/admin/plugins/jQuery/jQuery-2.1.4.min.js"></script>
|
|
<!-- Bootstrap 3.3.5 -->
|
|
<script src="<?php echo base_url(); ?>/asset/admin/bootstrap/js/bootstrap.min.js"></script>
|
|
<!-- iCheck -->
|
|
<script src="<?php echo base_url(); ?>/asset/admin/plugins/iCheck/icheck.min.js"></script>
|
|
<script>
|
|
$(function () {
|
|
$('input').iCheck({
|
|
checkboxClass: 'icheckbox_square-blue',
|
|
radioClass: 'iradio_square-blue',
|
|
increaseArea: '20%' // optional
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|