br0tkasten/www.creative-crafter.de
1
0
Fork 0
Code Releases Activity

login

Browse Source
This commit is contained in:
matt
2025-02-06 19:12:44 +01:00
parent a3048f391a
commit 3b1183f8b3
2 changed files with 296 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
login/test.html Normal file
View File

@ -0,0 +1,122 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #e3f2fd;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.form {
display: flex;
flex-direction: column;
gap: 15px;
padding: 2em;
background-color: #ffffff;
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
border-radius: 10px;
transition: transform 0.3s ease-in-out;
}
.form:hover {
transform: scale(1.02);
}
#heading {
text-align: center;
margin: 0;
color: #1565c0;
font-size: 1.5em;
font-weight: 600;
}
.field {
display: flex;
align-items: center;
gap: 10px;
padding: 0.75em 1em;
background-color: #bbdefb;
border-radius: 5px;
}
.input-icon {
height: 1.5em;
width: 1.5em;
fill: #1565c0;
}
.input-field {
width: 100%;
background: none;
border: none;
outline: none;
color: #1565c0;
font-size: 1em;
}
.btn {
display: flex;
justify-content: center;
}
.button {
padding: 0.75em 2em;
border: none;
outline: none;
border-radius: 5px;
background-color: #1565c0; /* Blue Button */
color: #ffffff;
font-size: 1em;
font-weight: 600;
cursor: pointer;
transition: background-color 0.3s ease-in-out;
}
.button:hover {
background-color: #0d47a1; /* Darker blue on hover */
}
</style>
</head>
<body>
<div class="form">
<h2 id="heading">Login</h2>
<div class="field">
<input type="text" id="username" placeholder="Username" required class="input-field">
</div>
<div class="field">
<input type="email" id="email" placeholder="Email" required class="input-field">
</div>
<div class="field">
<input type="password" id="password" placeholder="Password" required class="input-field">
</div>
<div class="field">
<input type="password" id="confirm_password" placeholder="Confirm Password" required class="input-field">
</div>
<div class="btn">
<button class="button" onclick="login()">Login</button>
</div>
</div>
<script>
function login() {
var username = document.getElementById('username').value;
var email = document.getElementById('email').value;
var password = document.getElementById('password').value;
var confirmPassword = document.getElementById('confirm_password').value;
if (password !== confirmPassword) {
alert("Passwords do not match.");
return;
}
var xhr = new XMLHttpRequest();
xhr.open("POST", "http://YOUR_SERVER_ADDRESS/login", true); // Replace "YOUR_SERVER_ADDRESS" with your actual server address
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function () {
if (xhr.readyState === XMLHttpRequest.DONE) {
document.body.innerHTML = xhr.responseText;
}
};
xhr.send("username=" + encodeURIComponent(username) + "&email=" + encodeURIComponent(email) + "&password=" + encodeURIComponent(password));
}
</script>
</body>
</html>