From 5ff230ccf13e624526e4773e66d4e9b839c286e2 Mon Sep 17 00:00:00 2001
From: atuy <muhamadfathurohman2@gmail.com>
Date: Sat, 27 Jun 2026 15:48:02 +0000
Subject: [PATCH] Update application/views/loginbaru.php

---
 application/views/loginbaru.php | 728 +++++++++++++++++++++++++++++---
 1 file changed, 669 insertions(+), 59 deletions(-)

diff --git a/application/views/loginbaru.php b/application/views/loginbaru.php
index d0ec6cf..4d07e14 100644
--- a/application/views/loginbaru.php
+++ b/application/views/loginbaru.php
@@ -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">
-					
-					<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-page">
+		<div class="login-wrapper">
 
-					<span class="login100-form-title p-b-26">
-						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>
 
-					<?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-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>
 
-					<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="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 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>