Add login page styles and refactor authentication views
- Introduced new styles for the login page, enhancing layout and responsiveness. - Updated the login view to utilize the new styles and improve user feedback for login errors and success messages. - Removed unused controllers and views related to contact and login functionalities to streamline the codebase. - Adjusted error message handling in the AuthController for better clarity on password requirements.
This commit is contained in:
118
CSS/style.css
118
CSS/style.css
@@ -126,11 +126,117 @@ a {
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
/* Login Page Styles */
|
||||
.login-page-bg {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #DFF0F2 60%, #BAC8D4 100%);
|
||||
}
|
||||
|
||||
.login-container {
|
||||
position: absolute;
|
||||
top: 200px;
|
||||
background-color: #BAC8D4;
|
||||
width: 900px;
|
||||
height: 450px;
|
||||
border-radius: 10px;
|
||||
background: #fff;
|
||||
box-shadow: 0 4px 24px rgba(0,0,0,0.10);
|
||||
border-radius: 16px;
|
||||
padding: 40px 32px 32px 32px;
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.login-title {
|
||||
margin-bottom: 24px;
|
||||
color: #4d4d4d;
|
||||
font-size: 2rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.login-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.login-field label {
|
||||
font-weight: 500;
|
||||
color: #4d4d4d;
|
||||
}
|
||||
|
||||
.login-field input {
|
||||
padding: 10px 12px;
|
||||
border: 1px solid #BAC8D4;
|
||||
border-radius: 6px;
|
||||
font-size: 1rem;
|
||||
background: #F7FAFC;
|
||||
transition: border 0.2s;
|
||||
}
|
||||
|
||||
.login-field input:focus {
|
||||
border: 1.5px solid #09add0;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
margin-top: 10px;
|
||||
padding: 12px 0;
|
||||
background: #09add0;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.login-btn:hover {
|
||||
background: #007b9e;
|
||||
}
|
||||
|
||||
.login-error {
|
||||
background: #ffe0e0;
|
||||
color: #b30000;
|
||||
border: 1px solid #ffb3b3;
|
||||
border-radius: 6px;
|
||||
padding: 10px 16px;
|
||||
margin-bottom: 18px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.login-success {
|
||||
background: #e0ffe6;
|
||||
color: #006633;
|
||||
border: 1px solid #b3ffd1;
|
||||
border-radius: 6px;
|
||||
padding: 10px 16px;
|
||||
margin-bottom: 18px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.login-link {
|
||||
display: inline-block;
|
||||
margin-top: 10px;
|
||||
color: #09add0;
|
||||
font-weight: 500;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.login-container {
|
||||
padding: 24px 8px;
|
||||
max-width: 95vw;
|
||||
}
|
||||
}
|
Reference in New Issue
Block a user