Decentrala/luser
20
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Styling] change styling for web pages, dark mode

Browse Source
This commit is contained in:
coja
2025-10-23 00:44:07 +02:00
parent f2cd767c5c
commit 3c75fe3e2c
3 changed files with 280 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
luser/templates/changepassword.html
View File

@@ -1,27 +1,92 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/styles/reset.css"> <!-- <link rel="stylesheet" href="/styles/reset.css"> -->
<link rel="stylesheet" href="/styles/style.css"> <!-- <link rel="stylesheet" href="/styles/style.css"> -->
<link rel="stylesheet" href="/styles/account.css"> <!-- <link rel="stylesheet" href="/styles/account.css"> -->
<link rel="shortcut icon" href="/img/favicon.ico" type="image/x-icon"> <link rel="shortcut icon" href="/img/favicon.ico" type="image/x-icon">
<title>User password change in LDAP system</title> <title>User password change in LDAP system</title>
<style>
html {
background-color: #181715;
color: #fff;
}
form {
display: flex;
flex-direction: column;
gap: 16px;
max-width: 360px;
margin: 50px auto;
}
button {
height: 30px;
margin-top: 30px;
background-color: #262a2b;
border: 1px solid #7b7265;
color: #a1998d;
border-radius: 5px;
text-transform: uppercase;
letter-spacing: 2px;
}
button:hover {
opacity: 0.9;
cursor: pointer;
}
button:active {
opacity: 0.7;
}
input {
height: 25px;
padding: 2px 8px;
border: 1px solid #303436;
border-radius: 5px;
color: #7b7265;
background-color: #262a2b;
outline: none;
}
.container {
margin: 50px auto;
}
.form-input {
display: flex;
flex: 1;
justify-content: space-between;
align-items: center;
}
</style>
</head> </head>
<body> <body>
<main class="container"> <main class="container">
<h1 style="text-align:center;">Change password</h1> <h1 style="text-align:center;">Change password</h1>
<form action="/account/changepassword/" method="POST" style="text-align:center;"> <form action="/account/changepassword/" method="POST">
<label for="username">username</label> <div class="form-input">
<input type="text" name="username" id="username" placeholder="username" required> <label for="username">Username:</label>
<label for="oldpassword">oldpassword</label> <input type="text" name="username" id="username" placeholder="Username" required>
<input type="password" name="oldpassword" id="oldpassword" placeholder="oldpassword" required> </div>
<label for="newpassword">newpassword</label> <div class="form-input">
<input type="password" name="newpassword" id="newpassword" placeholder="newpassword" required> <label for="oldpassword">Old password:</label>
<br> <input type="password" name="oldpassword" id="oldpassword" placeholder="Old password" required>
<button>Change Password</button> </div>
</form> <div class="form-input">
</main> <label for="newpassword">New password:</label>
<input type="password" name="newpassword" id="newpassword" placeholder="New password" required>
</div>
<br />
<button>Change Password</button>
</form>
</main>
</body> </body>
</html> </html>

140
luser/templates/register.html
View File

@@ -1,33 +1,121 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/styles/reset.css"> <link rel="shortcut icon" href="/img/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="/styles/style.css"> <title>User registration to LDAP system</title>
<link rel="stylesheet" href="/styles/account.css">
<link rel="shortcut icon" href="/img/favicon.ico" type="image/x-icon"> <style>
<title>User registration to LDAP system</title> html {
background-color: #181715;
color: #fff;
}
form {
display: flex;
flex-direction: column;
gap: 16px;
max-width: 360px;
margin: 50px auto;
}
button {
height: 30px;
margin-top: 30px;
background-color: #262a2b;
border: 1px solid #7b7265;
color: #a1998d;
border-radius: 5px;
text-transform: uppercase;
letter-spacing: 2px;
}
button:hover {
opacity: 0.9;
cursor: pointer;
}
button:active {
opacity: 0.7;
}
input {
height: 25px;
padding: 2px 8px;
border: 1px solid #303436;
border-radius: 5px;
color: #7b7265;
background-color: #262a2b;
outline: none;
}
.container {
margin: 50px auto;
}
.form-input {
display: flex;
flex: 1;
justify-content: space-between;
align-items: center;
}
.captcha {
width: 200px;
margin: 10px auto;
text-align: center;
}
.captcha img {
width: 100%;
height: auto;
}
.hint {
letter-spacing: 2px;
text-transform: uppercase;
font-size: 10px;
text-align: center;
font-weight: 500px;
}
.danger {
color: #bb3131;
}
</style>
</head> </head>
<body> <body>
<main class="container"> <main class="container">
<h1 style="text-align:center;">Register</h1> <h1 style="text-align:center;">Register</h1>
<form action="/account/register/" method="POST" style="text-align:center;"> <form action="/account/register/" method="POST">
<label for="username">username</label> <div class="form-input">
<input type="text" name="username" id="username" placeholder="username" required> <label for="username">Username:</label>
<label for="password">password</label> <input type="text" name="username" id="username" placeholder="Username" required>
<input type="password" name="password" id="password" placeholder="password" required> </div>
<label for="confirmpassword">confirmpassword</label> <div class="form-input">
<input type="password" name="confirmpassword" id="confirmpassword" placeholder="confirmpassword" required> <label for="password">Password:</label>
<p>password must be at least 8 characters long<p> <input type="password" name="password" id="password" placeholder="Password" required>
<br> </div>
<img src=/account/static/register/captcha_img/{{ imgsrc }} alt="{{ captchahash }}" style="width:200;margin:auto;"> <div class="form-input">
<p> <label for="confirmpassword">Confirm password:</label>
<label for="captcha answer">captcha answer</label> <input type="password" name="confirmpassword" id="confirmpassword" placeholder="Confirm Password" required>
<input type="text" name="captchaa" id="captchaa" placeholder="captcha answer" required> </div>
<input type="hidden" name="captchaq" id="captchaq" value="{{ imgsrc }}"> <p class="hint danger">Password must be at least 8 characters long </p>
<button>Register</button> <br />
</form> <div class="captcha">
</main> <img src=/account/static/register/captcha_img/{{ imgsrc }} alt="{{ captchahash }}" />
</div>
<div class="form-input">
<label for="captchaa">Captcha answer:</label>
<input type="text" name="captchaa" id="captchaa" placeholder="Captcha answer" required>
</div>
<input type="hidden" name="captchaq" id="captchaq" value="{{ imgsrc }}">
<button>Register</button>
</form>
</main>
</body> </body>
</html> </html>

99
luser/templates/unregister.html
View File

@@ -1,25 +1,88 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/styles/reset.css"> <!-- <link rel="stylesheet" href="/styles/reset.css"> -->
<link rel="stylesheet" href="/styles/style.css"> <!-- <link rel="stylesheet" href="/styles/style.css"> -->
<link rel="stylesheet" href="/styles/account.css"> <!-- <link rel="stylesheet" href="/styles/account.css"> -->
<link rel="shortcut icon" href="/img/favicon.ico" type="image/x-icon"> <link rel="shortcut icon" href="/img/favicon.ico" type="image/x-icon">
<title>User unregistration to LDAP system</title> <title>User unregistration to LDAP system</title>
<style>
html {
background-color: #181715;
color: #fff;
}
form {
display: flex;
flex-direction: column;
gap: 16px;
max-width: 360px;
margin: 50px auto;
}
button {
height: 30px;
margin-top: 30px;
background-color: #262a2b;
border: 1px solid #7b7265;
color: #a1998d;
border-radius: 5px;
text-transform: uppercase;
letter-spacing: 2px;
}
button:hover {
opacity: 0.9;
cursor: pointer;
}
button:active {
opacity: 0.7;
}
input {
height: 25px;
padding: 2px 8px;
border: 1px solid #303436;
border-radius: 5px;
color: #7b7265;
background-color: #262a2b;
outline: none;
}
.container {
margin: 50px auto;
}
.form-input {
display: flex;
flex: 1;
justify-content: space-between;
align-items: center;
}
</style>
</head> </head>
<body> <body>
<main class="container"> <main class="container">
<h1 style="text-align:center;">Unregister</h1> <h1 style="text-align:center;">Unregister</h1>
<form action="/account/unregister/" method="POST" style="text-align:center;"> <form action="/account/unregister/" method="POST">
<label for="username">username</label> <div class="form-input">
<input type="text" name="username" id="username" placeholder="username" required> <label for="username">Username:</label>
<label for="password">password</label> <input type="text" name="username" id="username" placeholder="Username" required>
<input type="password" name="password" id="password" placeholder="password" required> </div>
<br> <div class="form-input">
<button>Unregister</button> <label for="password">Password:</label>
</form> <input type="password" name="password" id="password" placeholder="Password" required>
</main> </div>
<br>
<button>Unregister</button>
</form>
</main>
</body> </body>
</html> </html>