login page html
This commit is contained in:
parent
7963d1976d
commit
5187b7c143
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
@ -0,0 +1 @@
|
|||||||
|
.venv/
|
||||||
105
test/css/login.css
Normal file
105
test/css/login.css
Normal file
@ -0,0 +1,105 @@
|
|||||||
|
* {
|
||||||
|
all: unset;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
title {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: "Arial", sans-serif;
|
||||||
|
background: linear-gradient(135deg, #5b727a, #355347);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
height: 100vh;
|
||||||
|
padding-right: 50px;
|
||||||
|
}
|
||||||
|
body .left-container {
|
||||||
|
flex: 1;
|
||||||
|
padding-left: 50px;
|
||||||
|
text-align: left;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
body .left-container .logo {
|
||||||
|
height: 190px;
|
||||||
|
max-width: 100%;
|
||||||
|
width: auto;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
align-self: flex-start;
|
||||||
|
}
|
||||||
|
body .left-container h1 {
|
||||||
|
font-size: 36px;
|
||||||
|
color: #ffffff;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
body .left-container p {
|
||||||
|
font-size: 18px;
|
||||||
|
color: rgba(207, 217, 215, 0.9);
|
||||||
|
}
|
||||||
|
body .login-container {
|
||||||
|
background-color: rgba(255, 255, 255, 0.9);
|
||||||
|
padding: 40px;
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
|
||||||
|
width: 350px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
body .login-container h2 {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
color: #5f5f5f;
|
||||||
|
font-size: 26px;
|
||||||
|
}
|
||||||
|
body .login-container form {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
body .login-container form input[type=text],
|
||||||
|
body .login-container form input[type=password] {
|
||||||
|
width: 100%;
|
||||||
|
padding: 12px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
border: 1px solid rgba(232, 232, 232, 0.7);
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 16px;
|
||||||
|
background-color: rgba(255, 255, 255, 0.95);
|
||||||
|
transition: border-color 0.3s, background-color 0.3s;
|
||||||
|
}
|
||||||
|
body .login-container form input[type=text]:hover,
|
||||||
|
body .login-container form input[type=password]:hover {
|
||||||
|
border-color: #005f73;
|
||||||
|
}
|
||||||
|
body .login-container form input[type=text]:focus,
|
||||||
|
body .login-container form input[type=password]:focus {
|
||||||
|
border-color: #005f73;
|
||||||
|
background-color: #fff;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
body .login-container form button {
|
||||||
|
width: 100%;
|
||||||
|
padding: 12px;
|
||||||
|
background-color: #003f5c;
|
||||||
|
color: #fff;
|
||||||
|
border: none;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: bold;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background-color 0.3s, transform 0.3s;
|
||||||
|
box-shadow: 0 4px 10px rgba(0, 95, 115, 0.3);
|
||||||
|
}
|
||||||
|
body .login-container form button:hover {
|
||||||
|
background-color: #2f798a;
|
||||||
|
}
|
||||||
|
body .login-container form button:active {
|
||||||
|
transform: translateY(0);
|
||||||
|
box-shadow: 0 2px 6px rgba(70, 70, 70, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*# sourceMappingURL=login.css.map */
|
||||||
1
test/css/login.css.map
Normal file
1
test/css/login.css.map
Normal file
@ -0,0 +1 @@
|
|||||||
|
{"version":3,"sourceRoot":"","sources":["../scss/_common.scss","../scss/login.scss","../scss/_colors.scss"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;EACA;;;ACAJ;EACE;;;AAIF;EACE;EACA,YCV4B;EDW5B;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA,OCjCqB;EDkCrB;;AAGF;EACE;EACA,OCtCyB;;AD0C7B;EACE,kBC1CoB;ED2CpB;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA,OClDmB;EDmDnB;;AAGF;EACE;EACA;EACA;;AAEA;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA,kBClEsB;EDmEtB;;AAEA;AAAA;EACI,cCpE0B;;ADsE9B;AAAA;EACE,cCtE4B;EDuE5B;EACA;;AAIJ;EACE;EACA;EACA,kBC9Ea;ED+Eb;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE,kBCxFiB;;AD2FnB;EACE;EACA","file":"login.css"}
|
||||||
27
test/html/login.html
Normal file
27
test/html/login.html
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link rel="stylesheet" href="/home/lcm/Works/ldapmanager/test/css/login.css">
|
||||||
|
<title>Login Page</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="left-container">
|
||||||
|
<img src="/home/lcm/Works/ldapmanager/test/images/logo2.png" alt="Company Logo" class="logo">
|
||||||
|
<h1>LDAP Manager</h1>
|
||||||
|
<p>User management system</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="login-container">
|
||||||
|
<h2>Login</h2>
|
||||||
|
<form action="/login" method="post">
|
||||||
|
<input type="text" name="username" placeholder="Username" required>
|
||||||
|
<input type="password" name="password" placeholder="Password" required>
|
||||||
|
<button type="submit">Login</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
BIN
test/images/logo.png
Normal file
BIN
test/images/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
BIN
test/images/logo2.png
Normal file
BIN
test/images/logo2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
6
test/scripts/csswatch.sh
Normal file
6
test/scripts/csswatch.sh
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
#!/bin/bash
|
||||||
|
idir="/home/lcm/Works/ldapmanager/test/scss"
|
||||||
|
odir="/home/lcm/Works/ldapmanager/test/css"
|
||||||
|
inotifywait -e modify -m -r $idir | while read events; do
|
||||||
|
sass $idir/:$odir/
|
||||||
|
done;
|
||||||
15
test/scss/_colors.scss
Normal file
15
test/scss/_colors.scss
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
// Login page colors
|
||||||
|
$login-page-background-color: linear-gradient(135deg, #5b727a, #355347);
|
||||||
|
$login-page-appname-color: #ffffff;
|
||||||
|
$login-page-description-color: rgba(207, 217, 215, 0.9);
|
||||||
|
$login-form-background: rgba(255, 255, 255, 0.9);
|
||||||
|
$login-form-shadow-color: rgba(0, 0, 0, 0.2);
|
||||||
|
$login-form-title-color: #5f5f5f;
|
||||||
|
$login-form-input-background: rgba(255, 255, 255, 0.95);
|
||||||
|
$login-form-input-border-color: rgba(232, 232, 232, 0.7);
|
||||||
|
$login-form-input-hover-border-color: #005f73;
|
||||||
|
$login-form-input-focus-border-color: #005f73;
|
||||||
|
$login-button-color: #003f5c;
|
||||||
|
$login-button-hover-color: #2f798a;
|
||||||
|
$login-button-shadow: rgba(0, 95, 115, 0.3);
|
||||||
|
$login-button-active-shadow: rgba(70, 70, 70, 0.2);
|
||||||
6
test/scss/_common.scss
Normal file
6
test/scss/_common.scss
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
* {
|
||||||
|
all: unset;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
111
test/scss/login.scss
Normal file
111
test/scss/login.scss
Normal file
@ -0,0 +1,111 @@
|
|||||||
|
@use "common";
|
||||||
|
@use "colors" as *; // Import the color scheme
|
||||||
|
|
||||||
|
// Hide the title
|
||||||
|
title {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Basic body styling with a new color theme
|
||||||
|
body {
|
||||||
|
font-family: 'Arial', sans-serif;
|
||||||
|
background: $login-page-background-color; // Use login background gradient
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
height: 100vh;
|
||||||
|
padding-right: 50px; // Space between the form and the right edge
|
||||||
|
|
||||||
|
.left-container {
|
||||||
|
flex: 1; // Take available space on the left
|
||||||
|
padding-left: 50px; // Space from the left edge
|
||||||
|
text-align: left; // Align text to the left
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column; // Stack elements vertically
|
||||||
|
justify-content: center; // Center elements vertically
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
height: 190px; // Set logo height to 250px
|
||||||
|
max-width: 100%; // Ensure the logo doesn't exceed the container's width
|
||||||
|
width: auto; // Maintain aspect ratio
|
||||||
|
margin-bottom: 20px; // Space below the logo
|
||||||
|
align-self: flex-start; // Align logo to the start (left) of the container
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 36px; // Adjust font size for application name
|
||||||
|
color: $login-page-appname-color; // Use login main text color
|
||||||
|
margin-bottom: 10px; // Space below the heading
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 18px; // Adjust font size for the description
|
||||||
|
color: $login-page-description-color; // Use login description color
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-container {
|
||||||
|
background-color: $login-form-background;
|
||||||
|
padding: 40px;
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow: 0 8px 15px $login-form-shadow-color;
|
||||||
|
width: 350px;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 20px; // Add more space below the heading
|
||||||
|
color: $login-form-title-color; // Use login main text color
|
||||||
|
font-size: 26px;
|
||||||
|
}
|
||||||
|
|
||||||
|
form {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center; // Center the form elements
|
||||||
|
|
||||||
|
input[type="text"],
|
||||||
|
input[type="password"] {
|
||||||
|
width: 100%; // Make the inputs full width of the form
|
||||||
|
padding: 12px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
border: 1px solid $login-form-input-border-color; // Use login input border color
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 16px;
|
||||||
|
background-color: $login-form-input-background; // Use login input background color
|
||||||
|
transition: border-color 0.3s, background-color 0.3s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: $login-form-input-hover-border-color;
|
||||||
|
}
|
||||||
|
&:focus {
|
||||||
|
border-color: $login-form-input-focus-border-color; // Use focus border color
|
||||||
|
background-color: #fff;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
width: 100%; // Make the button full width of the form
|
||||||
|
padding: 12px;
|
||||||
|
background-color: $login-button-color; // Use login button color
|
||||||
|
color: #fff;
|
||||||
|
border: none;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: bold;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background-color 0.3s, transform 0.3s;
|
||||||
|
box-shadow: 0 4px 10px $login-button-shadow; // Use button shadow color
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: $login-button-hover-color; // Use login button hover
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
transform: translateY(0);
|
||||||
|
box-shadow: 0 2px 6px $login-button-active-shadow;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user