atuy/buku
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update application/views/loginbaru.php

Browse Source
This commit is contained in:
atuy
2026-06-27 15:48:02 +00:00
parent f3b4b8e33b
commit 5ff230ccf1
1 changed files with 669 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
application/views/loginbaru.php
+669 -59
View File
@@ -7,85 +7,695 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="<?= base_url('assets/logo.png'); ?>" type="image/png">
<link rel="stylesheet" type="text/css" href="<?= base_url('assets/login/vendor/bootstrap/css/bootstrap.min.css'); ?>">
<link rel="stylesheet" type="text/css" href="<?= base_url('assets/login/fonts/font-awesome-4.7.0/css/font-awesome.min.css'); ?>">
<link rel="stylesheet" type="text/css" href="<?= base_url('assets/login/fonts/iconic/css/material-design-iconic-font.min.css'); ?>">
<link rel="stylesheet" type="text/css" href="<?= base_url('assets/login/vendor/animate/animate.css'); ?>">
<link rel="stylesheet" type="text/css" href="<?= base_url('assets/login/vendor/css-hamburgers/hamburgers.min.css'); ?>">
<link rel="stylesheet" type="text/css" href="<?= base_url('assets/login/vendor/animsition/css/animsition.min.css'); ?>">
<link rel="stylesheet" type="text/css" href="<?= base_url('assets/login/vendor/select2/select2.min.css'); ?>">
<link rel="stylesheet" type="text/css" href="<?= base_url('assets/login/vendor/daterangepicker/daterangepicker.css'); ?>">
<link rel="stylesheet" type="text/css" href="<?= base_url('assets/login/css/util.css'); ?>">
<link rel="stylesheet" type="text/css" href="<?= base_url('assets/login/css/main.css'); ?>">
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
min-height: 100vh;
font-family: "Segoe UI", Arial, sans-serif;
background:
radial-gradient(circle at top left, rgba(0, 117, 255, .13), transparent 28%),
radial-gradient(circle at bottom right, rgba(112, 65, 255, .14), transparent 32%),
linear-gradient(135deg, #f6f9ff 0%, #edf4ff 100%);
color: #1d2b45;
overflow-x: hidden;
}
.login-page {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 34px;
}
.login-wrapper {
width: 100%;
max-width: 1320px;
min-height: 760px;
display: grid;
grid-template-columns: 1.05fr .95fr;
border-radius: 34px;
overflow: hidden;
background: #ffffff;
box-shadow: 0 30px 80px rgba(19, 45, 85, .16);
}
.login-left {
position: relative;
padding: 70px 64px;
color: #ffffff;
overflow: hidden;
background:
linear-gradient(135deg, rgba(5, 26, 82, .98), rgba(6, 61, 153, .96)),
url("<?= base_url('assets/logo.png'); ?>");
}
.login-left::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 85% 15%, rgba(64, 165, 255, .28), transparent 24%),
radial-gradient(circle at 85% 95%, rgba(157, 73, 255, .24), transparent 25%),
linear-gradient(90deg, rgba(1, 14, 54, .2), rgba(1, 14, 54, .65));
z-index: 1;
}
.login-left::after {
content: "";
position: absolute;
right: -190px;
top: -110px;
width: 520px;
height: 520px;
border: 44px solid rgba(49, 177, 255, .15);
border-radius: 50%;
z-index: 1;
}
.left-content {
position: relative;
z-index: 3;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.welcome-pill {
display: inline-flex;
width: fit-content;
padding: 12px 26px;
border-radius: 18px;
background: linear-gradient(135deg, #0aa8ff, #8a43ff);
font-size: 20px;
font-weight: 700;
box-shadow: 0 12px 28px rgba(30, 127, 255, .28);
margin-bottom: 28px;
}
.hero-title {
font-size: 54px;
line-height: 1.05;
font-weight: 900;
letter-spacing: .5px;
margin-bottom: 18px;
}
.hero-subtitle {
font-size: 24px;
line-height: 1.5;
color: rgba(255, 255, 255, .88);
margin-bottom: 28px;
}
.hero-line {
width: 190px;
height: 5px;
border-radius: 999px;
background: linear-gradient(90deg, #09c8ff, #a744ff);
margin-bottom: 44px;
}
.feature-list {
display: flex;
flex-direction: column;
gap: 26px;
max-width: 430px;
}
.feature-item {
display: flex;
align-items: center;
gap: 18px;
}
.feature-icon {
width: 62px;
height: 62px;
flex: 0 0 62px;
border-radius: 18px;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
color: #ffffff;
background: linear-gradient(135deg, #0089ff, #1bc7ff);
box-shadow: 0 16px 35px rgba(0, 137, 255, .22);
}
.feature-item:nth-child(2) .feature-icon {
background: linear-gradient(135deg, #4f5cff, #8d3dff);
}
.feature-item:nth-child(3) .feature-icon {
background: linear-gradient(135deg, #00b5ff, #04d0c5);
}
.feature-text h4 {
font-size: 18px;
margin-bottom: 5px;
color: #ffffff;
}
.feature-text p {
font-size: 15px;
line-height: 1.5;
color: rgba(255, 255, 255, .78);
}
.book-visual {
position: absolute;
right: 58px;
bottom: 130px;
width: 330px;
height: 250px;
z-index: 2;
opacity: .98;
}
.book {
position: absolute;
width: 250px;
height: 55px;
border-radius: 10px 18px 18px 10px;
box-shadow: 0 18px 30px rgba(0, 0, 0, .25);
}
.book::after {
content: "";
position: absolute;
right: 14px;
top: 9px;
width: 165px;
height: 36px;
border-radius: 4px 14px 14px 4px;
background: rgba(255, 255, 255, .84);
}
.book.one {
right: 40px;
bottom: 100px;
background: linear-gradient(135deg, #0d6ee8, #4b70ff);
transform: rotate(-8deg);
}
.book.two {
right: 24px;
bottom: 54px;
background: linear-gradient(135deg, #5f37d6, #9a53ff);
transform: rotate(-4deg);
}
.book.three {
right: 8px;
bottom: 10px;
background: linear-gradient(135deg, #2d80f7, #43b9ff);
}
.book-label {
position: absolute;
left: 20px;
top: 16px;
z-index: 2;
color: #ffffff;
font-size: 13px;
font-weight: 800;
letter-spacing: .8px;
}
.plant {
position: absolute;
right: 24px;
bottom: 138px;
width: 105px;
height: 120px;
}
.plant .pot {
position: absolute;
bottom: 0;
left: 34px;
width: 45px;
height: 48px;
border-radius: 8px 8px 14px 14px;
background: #eef4ff;
}
.plant .leaf {
position: absolute;
width: 34px;
height: 58px;
background: linear-gradient(135deg, #31d084, #7ee4a6);
border-radius: 90% 0 90% 0;
transform-origin: bottom center;
}
.plant .leaf.a { left: 25px; bottom: 38px; transform: rotate(-36deg); }
.plant .leaf.b { left: 50px; bottom: 45px; transform: rotate(18deg); }
.plant .leaf.c { left: 38px; bottom: 66px; transform: rotate(-8deg); }
.quote-box {
width: 520px;
max-width: 100%;
border-radius: 20px;
padding: 23px 26px;
background: rgba(255, 255, 255, .09);
border: 1px solid rgba(255, 255, 255, .14);
backdrop-filter: blur(10px);
color: rgba(255, 255, 255, .9);
font-size: 16px;
line-height: 1.7;
}
.quote-box i {
font-size: 34px;
margin-right: 14px;
color: rgba(255, 255, 255, .55);
}
.login-right {
position: relative;
padding: 66px 72px;
background:
radial-gradient(circle at top left, rgba(0, 134, 255, .06), transparent 28%),
radial-gradient(circle at bottom right, rgba(121, 77, 255, .07), transparent 32%),
#ffffff;
display: flex;
align-items: center;
justify-content: center;
}
.login-card {
width: 100%;
max-width: 510px;
text-align: center;
}
.logo-box img {
width: 128px;
height: 128px;
object-fit: contain;
margin-bottom: 26px;
filter: drop-shadow(0 16px 22px rgba(14, 45, 105, .13));
}
.login-card h1 {
font-size: 42px;
font-weight: 900;
letter-spacing: .4px;
color: #082b68;
margin-bottom: 10px;
}
.login-card .subtitle {
font-size: 18px;
color: #7b8798;
margin-bottom: 26px;
}
.divider {
display: flex;
align-items: center;
gap: 18px;
margin-bottom: 32px;
color: #1b75ff;
}
.divider::before,
.divider::after {
content: "";
flex: 1;
height: 1px;
background: #dfe8f5;
}
.divider span {
width: 42px;
height: 42px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: #eef5ff;
color: #1a78ff;
font-size: 19px;
}
.form-group {
margin-bottom: 18px;
text-align: left;
}
.input-wrap {
height: 64px;
border: 1.5px solid #d9e3f2;
border-radius: 15px;
display: flex;
align-items: center;
padding: 0 20px;
background: #ffffff;
transition: .25s ease;
}
.input-wrap:focus-within {
border-color: #1687ff;
box-shadow: 0 0 0 4px rgba(22, 135, 255, .1);
}
.input-wrap i {
font-size: 22px;
color: #546a91;
margin-right: 15px;
}
.input-wrap input {
flex: 1;
height: 100%;
border: none;
outline: none;
background: transparent;
font-size: 17px;
color: #1d2b45;
}
.input-wrap input::placeholder {
color: #9aa6b7;
}
.toggle-password {
cursor: pointer;
margin-left: 12px;
}
.form-options {
display: flex;
justify-content: space-between;
align-items: center;
margin: 10px 0 22px;
font-size: 15px;
color: #56667c;
}
.remember {
display: flex;
align-items: center;
gap: 9px;
}
.remember input {
width: 17px;
height: 17px;
accent-color: #147cff;
}
.forgot-link {
text-decoration: none;
font-weight: 700;
color: #5144e8;
}
.login-btn {
width: 100%;
height: 66px;
border: none;
border-radius: 17px;
background: linear-gradient(135deg, #006ff2 0%, #10b8ff 48%, #9437ff 100%);
color: #ffffff;
font-size: 19px;
font-weight: 800;
letter-spacing: .5px;
cursor: pointer;
box-shadow: 0 18px 35px rgba(42, 118, 255, .30);
transition: .25s ease;
}
.login-btn:hover {
transform: translateY(-2px);
box-shadow: 0 24px 42px rgba(42, 118, 255, .38);
}
.login-btn i {
margin-right: 9px;
}
.error-alert {
margin-top: 18px;
padding: 14px 16px;
border-radius: 14px;
background: #fff1f1;
color: #d93636;
border: 1px solid #ffd2d2;
font-size: 15px;
font-weight: 600;
text-align: left;
}
.error-alert i {
margin-right: 8px;
}
.secure-text {
margin-top: 20px;
font-size: 14px;
color: #8a96a8;
}
.secure-text i {
color: #3d7fff;
margin-right: 7px;
}
.footer-login {
margin-top: 28px;
padding-top: 24px;
border-top: 1px solid #e5edf7;
color: #7c8798;
line-height: 1.7;
font-size: 15px;
}
.footer-login strong {
display: block;
font-size: 17px;
color: #082b68;
margin-bottom: 4px;
}
@media (max-width: 1050px) {
.login-wrapper {
grid-template-columns: 1fr;
min-height: auto;
}
.login-left {
padding: 46px 38px;
min-height: 520px;
}
.login-right {
padding: 46px 32px;
}
.book-visual {
opacity: .45;
right: 10px;
}
}
@media (max-width: 576px) {
.login-page {
padding: 14px;
}
.login-left {
display: none;
}
.login-right {
padding: 36px 22px;
}
.login-card h1 {
font-size: 31px;
}
.logo-box img {
width: 100px;
height: 100px;
}
.form-options {
align-items: flex-start;
flex-direction: column;
gap: 12px;
}
}
</style>
</head>
<body>
<div class="limiter">
<div class="container-login100">
<div class="wrap-login100">
<form class="login100-form validate-form" action="<?= base_url('auth/login'); ?>" method="POST">
<div class="login-page">
<div class="login-wrapper">
<span class="login100-form-title p-b-35">
<img width="100" src="<?= base_url('assets/logo.png'); ?>" alt="Logo POS Buku MTD">
</span>
<div class="login-left">
<div class="left-content">
<div>
<div class="welcome-pill">Selamat datang di</div>
<h1 class="hero-title">POS BUKU MTD</h1>
<p class="hero-subtitle">Sistem Informasi Penjualan Buku &amp; ATK</p>
<div class="hero-line"></div>
<span class="login100-form-title p-b-26">
POS BUKU MTD
</span>
<div class="feature-list">
<div class="feature-item">
<div class="feature-icon">
<i class="fa fa-book"></i>
</div>
<div class="feature-text">
<h4>Kelola Buku</h4>
<p>Data buku terstruktur dan mudah dikelola.</p>
</div>
</div>
<?php $error = $this->session->flashdata('message_name'); ?>
<?php if (!empty($error)) : ?>
<p align="center" style="color:red;"><?= html_escape($error); ?></p>
<?php endif; ?>
<div class="feature-item">
<div class="feature-icon">
<i class="fa fa-bar-chart"></i>
</div>
<div class="feature-text">
<h4>Pantau Stok</h4>
<p>Stok real-time akurat dan selalu up to date.</p>
</div>
</div>
<div class="wrap-input100 validate-input" data-validate="Masukkan username">
<input class="input100" type="text" name="username" id="username" autocomplete="username">
<span class="focus-input100" data-placeholder="Username"></span>
</div>
<div class="wrap-input100 validate-input" data-validate="Masukkan password">
<span class="btn-show-pass">
<i class="zmdi zmdi-eye"></i>
</span>
<input class="input100" type="password" name="password" id="password" autocomplete="current-password">
<span class="focus-input100" data-placeholder="Password"></span>
</div>
<div class="container-login100-form-btn">
<div class="wrap-login100-form-btn">
<div class="login100-form-bgbtn"></div>
<button type="submit" class="login100-form-btn" name="submit">
Login
</button>
<div class="feature-item">
<div class="feature-icon">
<i class="fa fa-list-alt"></i>
</div>
<div class="feature-text">
<h4>Laporan Lengkap</h4>
<p>Keputusan lebih cepat berdasarkan data.</p>
</div>
</div>
</div>
</div>
<div class="text-center p-t-25">
<span class="txt1">
<strong>KOPERASI DHARMA AL MUHTADIN</strong>
</span><br>
<span class="txt1">Jl. Raya Cipayung No. 1 Cipayung</span><br>
<span class="txt1">Kota Depok</span>
<div class="quote-box">
<i class="fa fa-quote-left"></i>
Mendukung pengelolaan usaha koperasi sekolah yang transparan, efisien, dan terpercaya.
</div>
</div>
<div class="book-visual">
<div class="plant">
<div class="leaf a"></div>
<div class="leaf b"></div>
<div class="leaf c"></div>
<div class="pot"></div>
</div>
</form>
<div class="book one">
<div class="book-label">BUKU</div>
</div>
<div class="book two">
<div class="book-label">ATK</div>
</div>
<div class="book three">
<div class="book-label">LAPORAN</div>
</div>
</div>
</div>
<div class="login-right">
<div class="login-card">
<div class="logo-box">
<img src="<?= base_url('assets/logo.png'); ?>" alt="Logo POS Buku MTD">
</div>
<h1>POS BUKU MTD</h1>
<p class="subtitle">Sistem Informasi Penjualan Buku &amp; ATK</p>
<div class="divider">
<span><i class="fa fa-book"></i></span>
</div>
<form action="<?= base_url('auth/login'); ?>" method="POST" autocomplete="off">
<div class="form-group">
<div class="input-wrap">
<i class="fa fa-user-o"></i>
<input type="text" name="username" id="username" placeholder="Username" autocomplete="username" required>
</div>
</div>
<div class="form-group">
<div class="input-wrap">
<i class="fa fa-lock"></i>
<input type="password" name="password" id="password" placeholder="Password" autocomplete="current-password" required>
<i class="fa fa-eye toggle-password" id="togglePassword"></i>
</div>
</div>
<div class="form-options">
<label class="remember">
<input type="checkbox" name="remember" value="1">
<span>Ingat saya</span>
</label>
<a href="javascript:void(0)" class="forgot-link">Lupa password?</a>
</div>
<button type="submit" class="login-btn" name="submit">
<i class="fa fa-sign-in"></i> LOGIN
</button>
<?php $error = $this->session->flashdata('message_name'); ?>
<?php if (!empty($error)) : ?>
<div class="error-alert">
<i class="fa fa-exclamation-circle"></i>
<?= html_escape($error); ?>
</div>
<?php endif; ?>
<div class="secure-text">
<i class="fa fa-shield"></i>
Akses aman dan terenkripsi
</div>
<div class="footer-login">
<strong>KOPERASI DHARMA AL MUHTADIN</strong>
Jl. Raya Cipayung No. 1 Cipayung<br>
Kota Depok
</div>
</form>
</div>
</div>
</div>
</div>
<div id="dropDownSelect1"></div>
<script>
const togglePassword = document.getElementById('togglePassword');
const passwordInput = document.getElementById('password');
<script src="<?= base_url('assets/login/vendor/jquery/jquery-3.2.1.min.js'); ?>"></script>
<script src="<?= base_url('assets/login/vendor/animsition/js/animsition.min.js'); ?>"></script>
<script src="<?= base_url('assets/login/vendor/bootstrap/js/popper.js'); ?>"></script>
<script src="<?= base_url('assets/login/vendor/bootstrap/js/bootstrap.min.js'); ?>"></script>
<script src="<?= base_url('assets/login/vendor/select2/select2.min.js'); ?>"></script>
<script src="<?= base_url('assets/login/vendor/daterangepicker/moment.min.js'); ?>"></script>
<script src="<?= base_url('assets/login/vendor/daterangepicker/daterangepicker.js'); ?>"></script>
<script src="<?= base_url('assets/login/vendor/countdowntime/countdowntime.js'); ?>"></script>
<script src="<?= base_url('assets/login/js/main.js'); ?>"></script>
if (togglePassword && passwordInput) {
togglePassword.addEventListener('click', function() {
const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
passwordInput.setAttribute('type', type);
this.classList.toggle('fa-eye');
this.classList.toggle('fa-eye-slash');
});
}
</script>
</body>