login
This commit is contained in:
parent
a3048f391a
commit
3b1183f8b3
174
login/index.html
Normal file
174
login/index.html
Normal file
@ -0,0 +1,174 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Login Form</title>
|
||||
<style>
|
||||
/* From Uiverse.io by Praashoo7 */
|
||||
.form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
width: 290.73px;
|
||||
height: 370.56px;
|
||||
padding-left: 2em;
|
||||
padding-right: 2em;
|
||||
padding-bottom: 0.4em;
|
||||
background-color: #171717;
|
||||
border-radius: 25px;
|
||||
transition: .4s ease-in-out;
|
||||
}
|
||||
|
||||
.form:hover {
|
||||
transform: scale(1.05);
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
#heading {
|
||||
text-align: center;
|
||||
margin: 2em;
|
||||
color: rgb(255, 255, 255);
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.field {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5em;
|
||||
border-radius: 25px;
|
||||
padding: 0.6em;
|
||||
border: none;
|
||||
outline: none;
|
||||
color: white;
|
||||
background-color: #171717;
|
||||
box-shadow: inset 2px 5px 10px rgb(5, 5, 5);
|
||||
}
|
||||
|
||||
.input-icon {
|
||||
height: 1.3em;
|
||||
width: 1.3em;
|
||||
fill: white;
|
||||
}
|
||||
|
||||
.input-field {
|
||||
background: none;
|
||||
border: none;
|
||||
outline: none;
|
||||
width: 100%;
|
||||
color: #d3d3d3;
|
||||
}
|
||||
|
||||
.form .btn {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: row;
|
||||
margin-top: 2.5em;
|
||||
}
|
||||
|
||||
.button1 {
|
||||
padding: 0.5em;
|
||||
padding-left: 1.1em;
|
||||
padding-right: 1.1em;
|
||||
border-radius: 5px;
|
||||
margin-right: 0.5em;
|
||||
border: none;
|
||||
outline: none;
|
||||
transition: .4s ease-in-out;
|
||||
background-color: #252525;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.button1:hover {
|
||||
background-color: black;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.button2 {
|
||||
padding: 0.5em;
|
||||
padding-left: 2.3em;
|
||||
padding-right: 2.3em;
|
||||
border-radius: 5px;
|
||||
border: none;
|
||||
outline: none;
|
||||
transition: .4s ease-in-out;
|
||||
background-color: #252525;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.button2:hover {
|
||||
background-color: black;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.button3 {
|
||||
margin-bottom: 3em;
|
||||
padding: 0.5em;
|
||||
border-radius: 5px;
|
||||
border: none;
|
||||
outline: none;
|
||||
transition: .4s ease-in-out;
|
||||
background-color: #252525;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.button3:hover {
|
||||
background-color: red;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- From Uiverse.io by Praashoo7 -->
|
||||
<form class="form" action="SERVER_ADDRESS" method="post" id="loginForm">
|
||||
<p id="heading">Login</p>
|
||||
<div class="field">
|
||||
<svg class="input-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
||||
<path d="M13.106 7.222c0-2.967-2.249-5.032-5.482-5.032-3.35 0-5.646 2.318-5.646 5.702 0 3.493 2.235 5.708 5.762 5.708.862 0 1.689-.123 2.304-.335v-.862c-.43.199-1.354.328-2.29.328-2.926 0-4.813-1.88-4.813-4.798 0-2.844 1.921-4.881 4.594-4.881 2.735 0 4.608 1.688 4.608 4.156 0 1.682-.554 2.769-1.416 2.769-.492 0-.772-.28-.772-.76V5.206H8.923v.834h-.11c-.266-.595-.881-.964-1.6-.964-1.4 0-2.378 1.162-2.378 2.823 0 1.737.957 2.906 2.379 2.906.8 0 1.415-.39 1.709-1.087h.11c.081.67.703 1.148 1.503 1.148 1.572 0 2.57-1.415 2.57-3.643zm-7.177.704c0-1.197.54-1.907 1.456-1.907.93 0 1.524.738 1.524 1.907S8.308 9.84 7.371 9.84c-.895 0-1.442-.725-1.442-1.914z"></path>
|
||||
</svg>
|
||||
<input autocomplete="off" placeholder="Username" class="input-field" type="text" name="username">
|
||||
</div>
|
||||
<div class="field">
|
||||
<svg class="input-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
||||
<path d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z"></path>
|
||||
</svg>
|
||||
<input placeholder="Password" class="input-field" type="password" name="password">
|
||||
</div>
|
||||
<div class="btn">
|
||||
<button class="button1" type="submit"> Login </button>
|
||||
<button class="button2" type="button" onclick="signUp()">Sign Up</button>
|
||||
</div>
|
||||
<button class="button3" type="button" onclick="forgotPassword()">Forgot Password</button>
|
||||
</form>
|
||||
|
||||
<script>
|
||||
document.getElementById("loginForm").addEventListener("submit", function(event){
|
||||
event.preventDefault(); // Verhindert das Standardverhalten
|
||||
|
||||
const formData = new FormData(this);
|
||||
|
||||
fetch('SERVER_ADDRESS', {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
console.log(data);
|
||||
// hier können Sie die Antwortdaten weiterverarbeiten
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error:', error);
|
||||
});
|
||||
});
|
||||
|
||||
function signUp() {
|
||||
window.open('URL_ZUM_SIGN_UP_FENSTER', '_blank');
|
||||
}
|
||||
|
||||
function forgotPassword() {
|
||||
window.open('URL_ZUM_FORGOT_PASSWORD_FENSTER', '_blank');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
122
login/test.html
Normal file
122
login/test.html
Normal 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>
|
||||
Loading…
x
Reference in New Issue
Block a user