Skip to content

Commit

Permalink
Merge pull request #1613 from shagithubrit/main
Browse files Browse the repository at this point in the history 
Dark Theme Implementation for Login Page #1612
  • Loading branch information
@rahulkhandait-sde
rahulkhandait-sde authored Oct 29, 2024
2 parents bf13c77 + 2645bca commit 93bb041
Show file tree
Hide file tree
Showing 3 changed files with 80 additions and 89 deletions.
1 change: 1 addition & 0 deletions assets/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1972,6 +1972,7 @@ data {
background-color: #1a1a1a;
color: #ffffff;
padding: 0;
margin-top: 1rem;
/* Reduced padding */
font-family: 'Roboto', sans-serif;
}
Expand Down
150 changes: 61 additions & 89 deletions login.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Enhanced Login</title>
<title>Enhanced Login - Dark Theme</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

Expand All @@ -17,32 +17,33 @@

body {
min-height: 100vh;
background: linear-gradient(135deg, #1be23d 0%, #26df79 100%);
background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
color: #e0e0e0;
}

.login-container {
background: rgba(255, 255, 255, 0.9);
background: rgba(40, 40, 40, 0.95);
backdrop-filter: blur(10px);
border-radius: 20px;
padding: 40px;
width: 100%;
max-width: 450px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
transform: translateY(0);
transition: all 0.3s ease;
}

.login-container:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

h2 {
color: #1a237e;
color: #e0e0e0;
font-size: 2.2em;
text-align: center;
margin-bottom: 30px;
Expand All @@ -59,7 +60,7 @@
transform: translateX(-50%);
width: 60px;
height: 4px;
background: linear-gradient(to right, #667eea, #764ba2);
background: linear-gradient(to right, #8b5cf6, #6366f1);
border-radius: 2px;
}

Expand All @@ -72,58 +73,60 @@
position: absolute;
top: -10px;
left: 10px;
background: white;
background: #282828;
padding: 0 5px;
color: #666;
color: #a0a0a0;
font-size: 0.9em;
transition: all 0.3s ease;
}

.input-group input {
width: 100%;
padding: 15px;
border: 2px solid #e0e0e0;
border: 2px solid #404040;
border-radius: 12px;
font-size: 1em;
transition: all 0.3s ease;
background: white;
background: #333333;
color: #e0e0e0;
}

.input-group input:focus {
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
border-color: #8b5cf6;
box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2);
outline: none;
}

.input-group input:focus+label {
color: #667eea;
color: #8b5cf6;
font-weight: 500;
}

.password-toggle {
position: relative;
}

.password-toggle i {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
color: #666;
transition: color 0.3s ease;
}
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
color: #a0a0a0;
transition: color 0.3s ease;
}

.password-toggle i:hover {
color: #8b5cf6;
}

.password-toggle i.fa-eye-slash {
color: #8b5cf6; /* Change color when password is visible */
}

.password-toggle i:hover {
color: #667eea;
}

.password-strength {
height: 4px;
margin-top: 8px;
border-radius: 2px;
transition: all 0.3s ease;
background: #e0e0e0;
background: #404040;
}

.extras {
Expand All @@ -137,51 +140,53 @@
display: flex;
align-items: center;
gap: 8px;
color: #a0a0a0;
}

.remember-me input[type="checkbox"] {
appearance: none;
width: 18px;
height: 18px;
border: 2px solid #e0e0e0;
border: 2px solid #404040;
border-radius: 4px;
cursor: pointer;
position: relative;
transition: all 0.3s ease;
background: #333333;
}

.remember-me input[type="checkbox"]:checked {
background: #667eea;
border-color: #667eea;
background: #8b5cf6;
border-color: #8b5cf6;
}

.remember-me input[type="checkbox"]:checked::after {
content: '✓';
position: absolute;
color: white;
color: #e0e0e0;
font-size: 12px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}

.forgot-password {
color: #667eea;
color: #8b5cf6;
text-decoration: none;
font-weight: 500;
transition: color 0.3s ease;
}

.forgot-password:hover {
color: #764ba2;
color: #6366f1;
text-decoration: underline;
}

.login-button {
width: 100%;
padding: 15px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
color: #ffffff;
border: none;
border-radius: 12px;
font-size: 1.1em;
Expand All @@ -192,26 +197,9 @@
overflow: hidden;
}

.login-button::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.2);
transform: translate(-50%, -50%) scale(0);
border-radius: 50%;
transition: transform 0.5s ease;
}

.login-button:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}

.login-button:active::after {
transform: translate(-50%, -50%) scale(2);
box-shadow: 0 5px 15px rgba(139, 92, 246, 0.3);
}

.social-login {
Expand All @@ -220,7 +208,7 @@
}

.social-login p {
color: #666;
color: #a0a0a0;
margin-bottom: 15px;
position: relative;
}
Expand All @@ -232,7 +220,7 @@
top: 50%;
width: 35%;
height: 1px;
background: #e0e0e0;
background: #404040;
}

.social-login p::before {
Expand Down Expand Up @@ -263,14 +251,14 @@
}

.google-btn {
background: white;
color: #666;
border: 2px solid #e0e0e0;
background: #333333;
color: #e0e0e0;
border: 2px solid #404040;
}

.google-btn:hover {
background: #f5f5f5;
border-color: #666;
background: #404040;
border-color: #505050;
}

.facebook-btn {
Expand All @@ -282,7 +270,6 @@
.facebook-btn:hover {
background: #1664d9;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(24, 119, 242, 0.4);
}

.social-btn img {
Expand All @@ -294,35 +281,28 @@
.signup-link {
text-align: center;
margin-top: 25px;
color: #666;
color: #a0a0a0;
}

.signup-link a {
color: #667eea;
color: #8b5cf6;
text-decoration: none;
font-weight: 600;
transition: color 0.3s ease;
}

.signup-link a:hover {
color: #764ba2;
color: #6366f1;
text-decoration: underline;
}

@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}

to {
opacity: 1;
transform: translateY(0);
}
}

.login-container {
animation: fadeIn 0.6s ease-out;
.home-icon {
position: absolute;
top: 20px;
left: 20px;
color: #e0e0e0;
font-size: 24px;
text-decoration: none;
}

@media (max-width: 480px) {
Expand All @@ -338,14 +318,6 @@
flex-direction: column;
}
}
.home-icon {
position: absolute;
top: 20px;
left: 20px;
color: #023430;
font-size: 24px;
text-decoration: none;
}
</style>
</head>

Expand Down
18 changes: 18 additions & 0 deletions login.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,24 @@ document.addEventListener('DOMContentLoaded', function () {
updatePasswordStrengthIndicator(strength);
});

// show password implementation
document.addEventListener('DOMContentLoaded', function () {
// Get the password input and the toggle icon
const passwordInput = document.getElementById('password');
const togglePassword = document.getElementById('togglePassword');

// Add click event listener to the toggle icon
togglePassword.addEventListener('click', function () {
// Toggle the type attribute
const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
passwordInput.setAttribute('type', type);

// Toggle the eye icon class
this.classList.toggle('fa-eye');
this.classList.toggle('fa-eye-slash');
});
});

// Email Validation
email.addEventListener('input', function () {
this.setCustomValidity('');
Expand Down

0 comments on commit 93bb041

Please sign in to comment.