88 lines
2.2 KiB
HTML
88 lines
2.2 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8" />
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
|
|
<title>Login & Signup</title>
|
||
|
|
<style>
|
||
|
|
|
||
|
|
.stepper{
|
||
|
|
display: flex;
|
||
|
|
flex-direction: row;
|
||
|
|
gap: 50px;
|
||
|
|
background-color: brown;
|
||
|
|
width: 50%;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
.step {
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
form {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
form.active {
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.formdiv{
|
||
|
|
display: flex;
|
||
|
|
flex-direction: row;
|
||
|
|
margin-top: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="container">
|
||
|
|
<div class="stepper">
|
||
|
|
<div class="step active" id="login-step">Login</div>
|
||
|
|
<div class="step" id="signup-step">Signup</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="formdiv">
|
||
|
|
<form id="login-form" class="active" action="/login" method="post">
|
||
|
|
<label for="login-username">Username</label>
|
||
|
|
<input type="text" id="login-username" name="username" required />
|
||
|
|
|
||
|
|
<label for="login-password">Password</label>
|
||
|
|
<input type="password" id="login-password" name="password" required />
|
||
|
|
|
||
|
|
<button type="submit">Login</button>
|
||
|
|
</form>
|
||
|
|
|
||
|
|
<form id="signup-form" action="/signup" method="post">
|
||
|
|
<label for="signup-username">Username</label>
|
||
|
|
<input type="text" id="signup-username" name="username" required />
|
||
|
|
|
||
|
|
<label for="signup-email">Email</label>
|
||
|
|
<input type="email" id="signup-email" name="email" required />
|
||
|
|
|
||
|
|
<label for="signup-password">Password</label>
|
||
|
|
<input type="password" id="signup-password" name="password" required />
|
||
|
|
|
||
|
|
<button type="submit">Signup</button>
|
||
|
|
</form>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
const loginStep = document.getElementById("login-step");
|
||
|
|
const signupStep = document.getElementById("signup-step");
|
||
|
|
const loginForm = document.getElementById("login-form");
|
||
|
|
const signupForm = document.getElementById("signup-form");
|
||
|
|
|
||
|
|
loginStep.addEventListener("click", () => {
|
||
|
|
loginForm.classList.add("active");
|
||
|
|
signupForm.classList.remove("active");
|
||
|
|
});
|
||
|
|
|
||
|
|
signupStep.addEventListener("click", () => {
|
||
|
|
signupForm.classList.add("active");
|
||
|
|
loginForm.classList.remove("active");
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|