Scribd
Upload
13 views3 pages

JSP

Jsp

Uploaded by

harshharshgopal
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
13 views3 pages

JSP

Jsp

Uploaded by

harshharshgopal
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login & Register</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="tabs">
<button class="tab-btn active" onclick="showTab('login')">Login</button>
<button class="tab-btn" onclick="showTab('register')">Register</button>
</div>
<div class="form-container">
<!-- Login Form -->
<form id="login" class="form active">
<h2>Login</h2>
<div class="input-group">
<label for="login-username">Username</label>
<input type="text" id="login-username" placeholder="Enter your
username" required>
</div>
<div class="input-group">
<label for="login-password">Password</label>
<input type="password" id="login-password" placeholder="Enter your
password" required>
</div>
<button type="submit" class="btn">Login</button>
</form>

<!-- Register Form -->


<form id="register" class="form">
<h2>Register</h2>
<div class="input-group">
<label for="register-username">Username</label>
<input type="text" id="register-username" placeholder="Enter your
username" required>
</div>
<div class="input-group">
<label for="register-password">Password</label>
<input type="password" id="register-password" placeholder="Enter a
strong password" required>
</div>
<div class="input-group">
<label for="register-confirm-password">Confirm Password</label>
<input type="password" id="register-confirm-password"
placeholder="Confirm your password" required>
</div>
<button type="submit" class="btn">Register</button>
</form>
</div>
</div>

<script src="script.js"></script>
</body>
</html>

function showTab(tabName) {
// Get all tabs and forms
const tabs = document.querySelectorAll(".tab-btn");
const forms = document.querySelectorAll(".form");
// Remove active class from all tabs and forms
tabs.forEach((tab) => tab.classList.remove("active"));
forms.forEach((form) => form.classList.remove("active"));

// Add active class to the selected tab and corresponding form


document.querySelector(`.tab-btn[onclick="showTab('$
{tabName}')"]`).classList.add("active");
document.getElementById(tabName).classList.add("active");
}

/* General Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: Arial, sans-serif;
background-color: #f3f4f6;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

.container {
width: 400px;
background-color: #ffffff;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
overflow: hidden;
}

.tabs {
display: flex;
border-bottom: 1px solid #ddd;
}

.tab-btn {
flex: 1;
padding: 15px 0;
text-align: center;
cursor: pointer;
font-weight: bold;
color: #555;
background-color: #f3f4f6;
border: none;
transition: background-color 0.3s, color 0.3s;
}

.tab-btn.active {
background-color: #ffffff;
color: #000;
border-bottom: 3px solid #007bff;
}

.form-container {
padding: 20px;
}

.form {
display: none;
}
.form.active {
display: block;
}

h2 {
text-align: center;
margin-bottom: 20px;
color: #333;
}

.input-group {
margin-bottom: 15px;
}

.input-group label {
display: block;
font-weight: bold;
margin-bottom: 5px;
color: #555;
}

.input-group input {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 16px;
}

.btn {
width: 100%;
padding: 10px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s;
}

.btn:hover {
background-color: #0056b3;
}

You might also like