Update form login baru :)

This commit is contained in:
mikael-zakaria 2025-08-21 10:53:32 +07:00
parent 0fb5dac54d
commit 9953865c05
3 changed files with 194 additions and 56 deletions

View File

@ -7,15 +7,53 @@
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" type="image/png" sizes="16x16" href="<?=base_url();?>/assets/favicon.png">
<title>Summit-CRM</title>
<link href="<?=base_url();?>/assets/login.css" rel="stylesheet">
<link href="<?=base_url();?>/assets/style.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<title>Summit-CRM Login</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
background-color: #85b9df;
}
.login-container {
min-height: 100vh;
}
.login-card {
border-radius: 16px;
overflow: hidden;
box-shadow: 0 6px 18px rgba(0,0,0,0.1);
}
.login-img {
object-fit: cover;
width: 100%;
height: 100%;
}
.form-control {
border-radius: 10px;
border: 1px solid #dee2e6;
box-shadow: none;
transition: all 0.3s ease-in-out;
}
.form-control:focus {
border-color: #0d6efd;
box-shadow: 0 0 0 0.2rem rgba(13,110,253,0.15);
}
.btn-primary {
border-radius: 10px;
font-weight: 500;
padding: 0.75rem;
transition: all 0.3s ease-in-out;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(13,110,253,0.3);
}
.form-check-label {
font-size: 0.9rem;
color: #555;
}
h3 {
font-weight: 700;
}
</style>
</head>
<?php
helper('cookie');
@ -27,61 +65,67 @@ if(!isset($password)) { $password = ''; }
<div class="preloader">
<div class="loader">
<div class="loader__figure"></div>
<p class="loader__label">Summit-CRM</p>
<!-- <p class="loader__label">Summit-CRM</p> -->
</div>
</div>
<section id="wrapper" class="login-register login-sidebar" style="background-image:url(<?=base_url();?>/assets/images/bg-01.jpg);">
<div class="login-box card">
<div class="card-body">
<form class="form-horizontal form-material text-center" id="loginform" method='POST'>
<a href="javascript:void(0)"><img src="<?=base_url();?>/assets/images/logo.png" /></a>
<?php if(isset($validation)) { ?>
<div class='alert alert-danger alert-dismissible mt-5'>
<?= $validation->listErrors(); ?>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"> <span aria-hidden="true"></span> </button>
<div class="container login-container d-flex justify-content-center align-items-center">
<div class="row w-100 justify-content-center">
<div class="col-12">
<div class="card login-card border-0">
<div class="row g-0">
<!-- Bagian Gambar -->
<div class="col-sm-6 col-md-8 d-none d-md-block">
<img src="<?=base_url();?>/assets/images/finalpanda.png" alt="login" class="login-img" alt="">
</div>
<?php } ?>
<?php if (session()->getFlashdata('loginError')) : ?>
<div class="alert alert-danger alert-dismissible mt-5">
<?= session()->getFlashdata('loginError') ?>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"> <span aria-hidden="true"></span> </button>
<!-- Bagian Form -->
<div class="col-sm-6 col-md-4 d-flex align-items-center">
<div class="card-body pt-5 pb-0 px-4 w-100">
<h3 class="mb-5 text-center">CRM Sign In</h3>
<form id="loginform" method='POST'>
<?php if(isset($validation)) { ?>
<div class='alert alert-danger alert-dismissible pt-3 pb-0'>
<?= $validation->listErrors(); ?>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"> <span aria-hidden="true"></span> </button>
</div>
<?php } ?>
<?php if (session()->getFlashdata('loginError')) : ?>
<div class="alert alert-danger alert-dismissible">
<?= session()->getFlashdata('loginError') ?>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"> <span aria-hidden="true"></span> </button>
</div>
<?php endif; ?>
<div class="form-floating mb-4">
<input type="email" class="form-control form-control-sm" required id="floatingEmail" name='email' placeholder='email' value='<?=$email;?>' >
<label for="floatingEmail">Email</label>
</div>
<div class="form-floating mb-4">
<input type="password" class="form-control form-control-sm" required id="floatingPassword" name='password' placeholder='password' value='<?=$password;?>'>
<label for="floatingPassword">Password</label>
</div>
<div class="d-grid mb-3">
<button type="submit" class="btn btn-primary btn-sm">Sign In</button>
</div>
<div class="form-check text-start mb-5">
<input class="form-check-input" name='rememberme' type="checkbox" value="1" id="rememberme" <?php if(isset($rememberme)) { echo 'checked'; }?>>
<label class="form-check-label" for="rememberme">
Remember Me
</label>
</div>
</form>
<p class="text-end text-muted fw-light fs-6 m-0 p-0">© 2022 - <?php echo(date("Y")); ?> &nbsp;5Pandawa🐼</p>
</div>
<?php endif; ?>
<div class="form-group m-t-40">
<div class="col-xs-12">
<input class="form-control" type="text" name='email' required placeholder="Email" value='<?=$email;?>' />
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<!-- <input class="form-control" type="password" name='password' placeholder="Password" value='' /> -->
<input class="form-control" type="password" name='password' placeholder="Password" value='<?=$password;?>' />
</div>
</div>
<div class="form-group row">
<div class="col-md-12">
<div class="d-flex no-block align-items-center">
<div class="form-check">
<input type="checkbox" class="form-check-input" name='rememberme' value='1' <?php if(isset($rememberme)) { echo 'checked'; }?> /> <label class="form-check-label">Remember me</label>
</div>
</div>
</div>
</div>
<div class="form-group text-center m-t-20">
<div class="col-xs-12">
<button class="btn btn-info btn-lg w-100 text-uppercase btn-rounded text-white" type="submit">Log In</button>
</div>
</div>
</form>
</div>
<div class='card-footer'>
<p class='ms-auto'>&copy; 4SKA1 2022 - 2024</p>
<!-- <p>Selamat datang, <?= session('email') ?>!</p> -->
</div>
</div>
</div>
</section>
<script src="<?=base_url();?>/assets/jquery/jquery.min.js"></script>
<script src="<?=base_url();?>/assets/bootstrap.bundle.min.js"></script>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript">
$(function() {
$(".preloader").fadeOut();

View File

@ -0,0 +1,94 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" type="image/png" sizes="16x16" href="<?=base_url();?>/assets/favicon.png">
<title>Summit-CRM</title>
<link href="<?=base_url();?>/assets/login.css" rel="stylesheet">
<link href="<?=base_url();?>/assets/style.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<?php
helper('cookie');
if(!isset($email)) { $email = ''; }
if(!isset($password)) { $password = ''; }
?>
<body>
<div class="preloader">
<div class="loader">
<div class="loader__figure"></div>
<p class="loader__label">Summit-CRM</p>
</div>
</div>
<section id="wrapper" class="login-register login-sidebar" style="background-image:url(<?=base_url();?>/assets/images/bg-01.jpg);">
<div class="login-box card">
<div class="card-body">
<form class="form-horizontal form-material text-center" id="loginform" method='POST'>
<a href="javascript:void(0)"><img src="<?=base_url();?>/assets/images/logo.png" /></a>
<?php if(isset($validation)) { ?>
<div class='alert alert-danger alert-dismissible mt-5'>
<?= $validation->listErrors(); ?>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"> <span aria-hidden="true"></span> </button>
</div>
<?php } ?>
<?php if (session()->getFlashdata('loginError')) : ?>
<div class="alert alert-danger alert-dismissible mt-5">
<?= session()->getFlashdata('loginError') ?>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"> <span aria-hidden="true"></span> </button>
</div>
<?php endif; ?>
<div class="form-group m-t-40">
<div class="col-xs-12">
<input class="form-control" type="text" name='email' required placeholder="Email" value='<?=$email;?>' />
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<!-- <input class="form-control" type="password" name='password' placeholder="Password" value='' /> -->
<input class="form-control" type="password" name='password' placeholder="Password" value='<?=$password;?>' />
</div>
</div>
<div class="form-group row">
<div class="col-md-12">
<div class="d-flex no-block align-items-center">
<div class="form-check">
<input type="checkbox" class="form-check-input" name='rememberme' value='1' <?php if(isset($rememberme)) { echo 'checked'; }?> /> <label class="form-check-label">Remember me</label>
</div>
</div>
</div>
</div>
<div class="form-group text-center m-t-20">
<div class="col-xs-12">
<button class="btn btn-info btn-lg w-100 text-uppercase btn-rounded text-white" type="submit">Log In</button>
</div>
</div>
</form>
</div>
<div class='card-footer'>
<p class='ms-auto'>&copy; 4SKA1 2022 - 2024</p>
<!-- <p>Selamat datang, <?= session('email') ?>!</p> -->
</div>
</div>
</section>
<script src="<?=base_url();?>/assets/jquery/jquery.min.js"></script>
<script src="<?=base_url();?>/assets/bootstrap.bundle.min.js"></script>
<script type="text/javascript">
$(function() {
$(".preloader").fadeOut();
});
$(function() {
$('[data-bs-toggle="tooltip"]').tooltip()
});
</script>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 MiB