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

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

diff --git a/application/views/loginbaru.php b/application/views/loginbaru.php
index 4d07e14..d0ec6cf 100644
--- a/application/views/loginbaru.php
+++ b/application/views/loginbaru.php
@@ -7,695 +7,85 @@
 	<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'); ?>">
-
-	<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>
+	<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'); ?>">
 </head>
 
 <body>
 
-	<div class="login-page">
-		<div class="login-wrapper">
+	<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-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="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 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>
 					</div>
 
-					<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>
-
-					<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">
+					<div class="text-center p-t-25">
+						<span class="txt1">
 							<strong>KOPERASI DHARMA AL MUHTADIN</strong>
-							Jl. Raya Cipayung No. 1 Cipayung<br>
-							Kota Depok
-						</div>
+						</span><br>
+						<span class="txt1">Jl. Raya Cipayung No. 1 Cipayung</span><br>
+						<span class="txt1">Kota Depok</span>
+					</div>
 
-					</form>
-				</div>
+				</form>
 			</div>
-
 		</div>
 	</div>
 
-	<script>
-		const togglePassword = document.getElementById('togglePassword');
-		const passwordInput = document.getElementById('password');
+	<div id="dropDownSelect1"></div>
 
-		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>
+	<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>
 
 </body>