Skip to content

Final update #485

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 5 commits into
base: master
Choose a base branch
from
Open

Final update #485

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 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
7050af2
more advanced interactions
ngoc-nguyen26 Mar 21, 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
82 changes: 49 additions & 33 deletions forgot-password.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,46 +2,73 @@
<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="author" content="">

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

<!-- Custom fonts for this template-->
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link
href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
rel="stylesheet">

<!-- Custom styles for this template-->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<link href="css/sb-admin-2.min.css" rel="stylesheet">

<style>
body {
background: linear-gradient(135deg, #667eea, #764ba2);
background-attachment: fixed;
animation: gradientShift 10s ease infinite alternate;
}

@keyframes gradientShift {
0% { background: linear-gradient(135deg, #667eea, #764ba2); }
100% { background: linear-gradient(135deg, #ffc107, #fad564); }
}

.card {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
border-radius: 15px;
border: 1px solid rgba(255, 255, 255, 0.2);
}

.form-control-user {
border-radius: 50px;
padding: 12px 20px;
}

.btn-user {
border-radius: 50px;
transition: background-color 0.3s ease, transform 0.2s ease, color 0.3s ease; /* Added color transition */
}

.btn-user:hover {
background-color: #3e8e41; /* Green color on hover */
transform: scale(1.05); /* Slightly enlarge the button */
}

.btn-user:active {
background-color: #3e8e41; /* Green color when clicked */
transform: scale(0.95); /* Slightly shrink the button */
color: black; /* Change text color to black when clicked */
}
</style>
</head>

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

<body>
<div class="container">

<!-- Outer Row -->
<div class="row justify-content-center">

<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-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">
<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>
<p class="mb-4" style="color: rgba(0, 0, 0, 0.6);">
We get it, stuff happens. Just enter your email address below
and we'll send you a link to reset your password!
</p>
</div>
<form class="user">
<div class="form-group">
Expand All @@ -55,33 +82,22 @@ <h1 class="h4 text-gray-900 mb-2">Forgot Your Password?</h1>
</form>
<hr>
<div class="text-center">
<a class="small" href="register.html">Create an Account!</a>
<a class="small" href="register.html" style="color: rgba(0, 0, 0, 0.6);">Create an Account!</a>
</div>
<div class="text-center">
<a class="small" href="login.html">Already have an account? Login!</a>
</div>
<a class="small" href="login.html" style="color: rgba(0, 0, 0, 0.6);">Already have an account? Login!</a>
</div>
</div>
</div>
</div>
</div>
</div>

</div>

</div>

</div>

<!-- Bootstrap core JavaScript-->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

<!-- Core plugin JavaScript-->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>

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

</body>

</html>
63 changes: 60 additions & 3 deletions login.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 @@ -45,11 +102,11 @@ <h1 class="h4 text-gray-900 mb-4">Welcome Back!</h1>
<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">
id="exampleInputPassword" placeholder="Password" required>
</div>
<div class="form-group">
<div class="custom-control custom-checkbox small">
Expand Down Expand Up @@ -100,4 +157,4 @@ <h1 class="h4 text-gray-900 mb-4">Welcome Back!</h1>

</body>

</html>
</html>
1 change: 1 addition & 0 deletions startbootstrap-sb-admin-2
Open in desktop
Submodule startbootstrap-sb-admin-2 added at f03098
20 changes: 11 additions & 9 deletions vendor/bootstrap/js/bootstrap.bundle.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.