<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>UEP PORTAL</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body{
height: 100vh;
margin: 0;
display: flex;
}
.left-side{
flex: 1;
background: url('{{asset ("images/background.png")}}') no-repeat center center;
background-size: cover;
}
.right-side{
flex: 1;
display: flex;
align-items: center;
justify-content: center;
background: white;
}
</style>
</head>
<body>
{{-- left side background --}}
<div class="left-side"></div>
<div class="right-side">
<div class="login-box">
<img src="{{asset ('images/logouep.png')}}" class="logo" alt="ueplogo">
<h4 class="text-left mb-3">Welcome!</h4>
<form onsubmit="return false;">
<div class="form-floating mb-3">
<input type="text" class="form-control" id="username" placeholder="Username">
<label for="username">Username</label>
</div>
<div class="mb-3 password-wrapper">
<div class="form-floating">
<input type="password" class="form-control" id="password" placeholder="Password">
<label for="password">Password</label>
</div>
{{-- <button type="button" class="toggle-pass" aria-label="Show/Hide password" onclick="togglePassword()">
</button> --}}
</div>
<button type="button" class="btn btn-danger w-100 mb-3">Login</button>
</form>
<div class="text-center">
<a href="#" class="d-block mb-2">Forgot Password</a>
<small class="text-muted small-note">
by logging in , you agree with <a href="#"> Terms and Conditions</a>
</small>
</div>
</div>
</div>
</body>
</html>
fix the code in loginblade to make the login page exactly like this with functions. this is uep orange app. you can see it in chrome. heres the link https://uepcollege.acctech.ph/