Skip to content

Some design improvements by enhance UI/UX design #484

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Some design improvements by enhance UI/UX design #484

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a784d7d
Fixed Button toggle method
ngoc-nguyen26 Mar 19, 2025
8fec753
modified for better accessibility & usability
ngoc-nguyen26 Mar 20, 2025
2075c97
enhance the functionality and user experience
ngoc-nguyen26 Mar 20, 2025
0611f51
enhance the UI/UX design of forgot password section
ngoc-nguyen26 Mar 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
95 changes: 84 additions & 11 deletions forgot-password.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
<meta name="description" content="">
<meta name="author" content="">

<title>SB Admin 2 - Forgot Password</title>
<title>SB Admin 2 - Login</title>

<!-- Custom fonts for this template-->
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
Expand All @@ -20,6 +20,63 @@
<!-- Custom styles for this template-->
<link href="css/sb-admin-2.min.css" rel="stylesheet">

<!-- Custom Styles for UI/UX Enhancements -->
<style>
.form-control:focus {
border-color: #4e73df;
box-shadow: 0 0 5px rgba(78, 115, 223, 0.75);
}

.card {
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.3s ease;
}

.card:hover {
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
}

.btn-user {
transition: background-color 0.3s ease, transform 0.3s ease;
}

.btn-user:hover {
background-color: #3e8e41;
transform: scale(1.05);
}

.btn-google:hover {
background-color: #db4437;
transform: scale(1.05);
}

.btn-facebook:hover {
background-color: #3b5998;
transform: scale(1.05);
}

.bg-gradient-primary {
background: linear-gradient(90deg, rgba(233, 162, 44, 1) 0%, rgba(116, 70, 198, 1) 100%);
}

.text-gray-900 {
color: #3a3a3a;
}

.form-group {
margin-bottom: 1.5rem;
}

.p-5 {
padding: 3rem;
}

.container {
max-width: 1200px;
}
</style>

</head>

<body class="bg-gradient-primary">
Expand All @@ -35,30 +92,46 @@
<div class="card-body p-0">
<!-- Nested Row within Card Body -->
<div class="row">
<div class="col-lg-6 d-none d-lg-block bg-password-image"></div>
<div class="col-lg-6 d-none d-lg-block bg-login-image"></div>
<div class="col-lg-6">
<div class="p-5">
<div class="text-center">
<h1 class="h4 text-gray-900 mb-2">Forgot Your Password?</h1>
<p class="mb-4">We get it, stuff happens. Just enter your email address below
and we'll send you a link to reset your password!</p>
<h1 class="h4 text-gray-900 mb-4">Welcome Back!</h1>
</div>
<form class="user">
<div class="form-group">
<input type="email" class="form-control form-control-user"
id="exampleInputEmail" aria-describedby="emailHelp"
placeholder="Enter Email Address...">
placeholder="Enter Email Address..." required>
</div>
<div class="form-group">
<input type="password" class="form-control form-control-user"
id="exampleInputPassword" placeholder="Password" required>
</div>
<div class="form-group">
<div class="custom-control custom-checkbox small">
<input type="checkbox" class="custom-control-input" id="customCheck">
<label class="custom-control-label" for="customCheck">Remember
Me</label>
</div>
</div>
<a href="login.html" class="btn btn-primary btn-user btn-block">
Reset Password
<a href="index.html" class="btn btn-primary btn-user btn-block">
Login
</a>
<hr>
<a href="index.html" class="btn btn-google btn-user btn-block">
<i class="fab fa-google fa-fw"></i> Login with Google
</a>
<a href="index.html" class="btn btn-facebook btn-user btn-block">
<i class="fab fa-facebook-f fa-fw"></i> Login with Facebook
</a>
</form>
<hr>
<div class="text-center">
<a class="small" href="register.html">Create an Account!</a>
<a class="small" href="forgot-password.html">Forgot Password?</a>
</div>
<div class="text-center">
<a class="small" href="login.html">Already have an account? Login!</a>
<a class="small" href="register.html">Create an Account!</a>
</div>
</div>
</div>
Expand All @@ -84,4 +157,4 @@ <h1 class="h4 text-gray-900 mb-2">Forgot Your Password?</h1>

</body>

</html>
</html>
198 changes: 172 additions & 26 deletions login.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,10 @@
<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, shrink-to-fit=no">
<meta name="description" content="">
<meta name="description" content="SB Admin 2 - Login Portal">
<meta name="author" content="">

<title>SB Admin 2 - Login</title>
Expand All @@ -20,9 +19,57 @@
<!-- Custom styles for this template-->
<link href="css/sb-admin-2.min.css" rel="stylesheet">

<!-- Additional custom styles -->
<style>
.bg-gradient-custom {
background: linear-gradient(135deg, #4e73df 0%, #224abe 100%);
}
.card-custom {
border-radius: 1rem;
}
.remember-me-text {
color: #858796;
}
.login-heading {
font-weight: 700;
}
.social-btn {
transition: all 0.3s;
}
.social-btn:hover {
transform: translateY(-2px);
}
.login-divider {
position: relative;
text-align: center;
margin: 1.5rem 0;
}
.login-divider:before {
content: "";
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 1px;
background-color: #eaecf4;
}
.login-divider-text {
position: relative;
display: inline-block;
padding: 0 1rem;
background-color: #fff;
font-size: 0.85rem;
color: #858796;
}
.brand-logo {
width: 80px;
height: auto;
margin-bottom: 1.5rem;
}
</style>
</head>

<body class="bg-gradient-primary">
<body class="bg-gradient-custom">

<div class="container">

Expand All @@ -31,43 +78,78 @@

<div class="col-xl-10 col-lg-12 col-md-9">

<div class="card o-hidden border-0 shadow-lg my-5">
<div class="card o-hidden border-0 shadow-lg my-5 card-custom">
<div class="card-body p-0">
<!-- Nested Row within Card Body -->
<div class="row">
<div class="col-lg-6 d-none d-lg-block bg-login-image"></div>
<div class="col-lg-6 d-none d-lg-block">
<div class="d-flex align-items-center justify-content-center h-100 bg-login-image">
<!-- Optional: Add an overlay with text -->
<div class="text-center p-5 text-white">
<h2 class="mb-4">Welcome Back!</h2>
<p class="mb-0">Access your dashboard and manage your business.</p>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="p-5">
<div class="text-center">
<h1 class="h4 text-gray-900 mb-4">Welcome Back!</h1>
<!-- Optional: Add a logo -->
<img class="brand-logo" src="img/logo.png" alt="Company Logo">
<h1 class="h4 text-gray-900 mb-4 login-heading">Welcome Back!</h1>
</div>

<!-- Social Login -->
<div class="mb-3">
<button class="btn btn-google btn-user btn-block social-btn mb-2">
<i class="fab fa-google fa-fw"></i> Sign in with Google
</button>
<button class="btn btn-facebook btn-user btn-block social-btn">
<i class="fab fa-facebook-f fa-fw"></i> Sign in with Facebook
</button>
</div>

<div class="login-divider">
<span class="login-divider-text">OR</span>
</div>
<form class="user">

<form class="user" id="loginForm" method="POST" action="process-login.php">
<!-- Security token -->
<input type="hidden" name="security_token" value="<?php echo generateToken(); ?>">

<div class="form-group">
<input type="email" class="form-control form-control-user"
id="exampleInputEmail" aria-describedby="emailHelp"
placeholder="Enter Email Address...">
id="emailInput" name="email" aria-describedby="emailHelp"
placeholder="Enter Email Address..." required autocomplete="email">
<div class="invalid-feedback">Please enter a valid email address</div>
</div>
<div class="form-group">
<input type="password" class="form-control form-control-user"
id="exampleInputPassword" placeholder="Password">
<div class="input-group">
<input type="password" class="form-control form-control-user"
id="passwordInput" name="password" placeholder="Password" required
autocomplete="current-password">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" id="togglePassword">
<i class="fas fa-eye" id="toggleIcon"></i>
</button>
</div>
</div>
<div class="invalid-feedback">Please enter your password</div>
</div>
<div class="form-group">
<div class="custom-control custom-checkbox small">
<input type="checkbox" class="custom-control-input" id="customCheck">
<label class="custom-control-label" for="customCheck">Remember
<input type="checkbox" class="custom-control-input" id="rememberCheck" name="remember">
<label class="custom-control-label remember-me-text" for="rememberCheck">Remember
Me</label>
</div>
</div>
<a href="index.html" class="btn btn-primary btn-user btn-block">

<!-- Error message area -->
<div class="alert alert-danger d-none" id="loginError" role="alert"></div>

<button type="submit" class="btn btn-primary btn-user btn-block">
Login
</a>
<hr>
<a href="index.html" class="btn btn-google btn-user btn-block">
<i class="fab fa-google fa-fw"></i> Login with Google
</a>
<a href="index.html" class="btn btn-facebook btn-user btn-block">
<i class="fab fa-facebook-f fa-fw"></i> Login with Facebook
</a>
</button>
</form>
<hr>
<div class="text-center">
Expand All @@ -81,11 +163,8 @@ <h1 class="h4 text-gray-900 mb-4">Welcome Back!</h1>
</div>
</div>
</div>

</div>

</div>

</div>

<!-- Bootstrap core JavaScript-->
Expand All @@ -97,7 +176,74 @@ <h1 class="h4 text-gray-900 mb-4">Welcome Back!</h1>

<!-- Custom scripts for all pages-->
<script src="js/sb-admin-2.min.js"></script>


<!-- Form validation script -->
<script>
$(document).ready(function() {
// Toggle password visibility
$('#togglePassword').click(function() {
const passwordInput = $('#passwordInput');
const toggleIcon = $('#toggleIcon');

if (passwordInput.attr('type') === 'password') {
passwordInput.attr('type', 'text');
toggleIcon.removeClass('fa-eye').addClass('fa-eye-slash');
} else {
passwordInput.attr('type', 'password');
toggleIcon.removeClass('fa-eye-slash').addClass('fa-eye');
}
});

// Form validation and submission
$('#loginForm').on('submit', function(e) {
e.preventDefault();
let isValid = true;

// Validate email
const email = $('#emailInput').val().trim();
if (!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
$('#emailInput').addClass('is-invalid');
isValid = false;
} else {
$('#emailInput').removeClass('is-invalid');
}

// Validate password
const password = $('#passwordInput').val();
if (!password) {
$('#passwordInput').addClass('is-invalid');
isValid = false;
} else {
$('#passwordInput').removeClass('is-invalid');
}

if (isValid) {
// Show loading state
const submitBtn = $(this).find('button[type="submit"]');
const originalText = submitBtn.text();
submitBtn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Logging in...');

// Submit form via AJAX
$.ajax({
type: 'POST',
url: $(this).attr('action'),
data: $(this).serialize(),
success: function(response) {
// Redirect on successful login
window.location.href = 'index.html';
},
error: function(xhr) {
// Show error message
$('#loginError').removeClass('d-none').text(xhr.responseJSON?.message || 'Invalid email or password. Please try again.');

// Reset button state
submitBtn.prop('disabled', false).text(originalText);
}
});
}
});
});
</script>
</body>

</html>
1 change: 1 addition & 0 deletions startbootstrap-sb-admin-2
Open in desktop
Submodule startbootstrap-sb-admin-2 added at f03098
Loading