<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login & Registration Form</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #000000;
}
.container {
width: 400px;
background: #2776ae;
padding: 40px;
border-radius: 10px;
box-shadow: 0 10px 25px rgba(47, 38, 38, 0.1);
}
.form-title {
text-align: center;
margin-bottom: 30px;
font-size: 24px;
font-weight: bold;
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
margin-bottom: 5px;
}
.form-group input {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}
.btn {
width: 100%;
padding: 10px;
background-color: black;
border: none;
color: white;
border-radius: 5px;
cursor: pointer;
}
.btn:hover {
background-color: #c3ff00;
}
.toggle-btn {
margin-top: 20px;
background-color: ;
}
.toggle-btn:hover {
background-color: #f30000;
}
.message {
text-align: left;
margin-top: 20px;
}
.error {
color: red;
text-align: center;
margin-bottom: 15px;
}
</style>
</head>
<body>
<div class="container" id="formContainer">
<div class="form-title" id="formTitle">Login Form</div>
<form id="loginForm">
<div class="form-group">
<label for="loginEmail">Email</label>
<input type="email" id="loginEmail" placeholder="Enter your email" required>
</div>
<div class="form-group">
<label for="loginPassword">Password</label>
<input type="password" id="loginPassword" placeholder="Enter your password" required>
</div>
<div class="error" id="loginError"></div>
<button type="submit" class="btn">Login</button>
</form>
<form id="registerForm" style="display: none;">
<div class="form-title">Register Form</div>
<div class="form-group">
<label for="registerName">Name</label>
<input type="text" id="registerName" placeholder="Enter your name" required>
</div>
<div class="form-group">
<label for="registerEmail">Email</label>
<input type="email" id="registerEmail" placeholder="Enter your email" required>
<label for="Contact">Contact</label>
<input type="phone" id="ph" placeholder="phone number " required>
</div>
<div class="form-group">
<label for="registerPassword">Password</label>
<input type="password" id="registerPassword" placeholder="Enter your password" required>
</div>
<label for ="gender"> Gender</label>
<input type="radio" name="gender">Male
<input type="radio" name="gender">Female
<br>
<label for ="Country">Country</label>
<input type="radio" name="Country">Nepal
<input type="radio" name="Country">India
<div class="error" id="registerError"></div>
<button type="submit" class="btn">Register</button>
</form>
<button class="btn toggle-btn" id="toggleFormBtn">Switch to Register</button>
<div class="message" id="message"></div>
</div>
<script>
const loginForm = document.getElementById('loginForm');
const registerForm = document.getElementById('registerForm');
const toggleFormBtn = document.getElementById('toggleFormBtn');
const formTitle = document.getElementById('formTitle');
const messageDiv = document.getElementById('message');
const loginError = document.getElementById('loginError');
const registerError = document.getElementById('registerError');
toggleFormBtn.addEventListener('click', () => {
if (loginForm.style.display === 'none') {
loginForm.style.display = 'block';
registerForm.style.display = 'none';
formTitle.textContent = 'Login Form';
toggleFormBtn.textContent = 'Switch to Register';
} else {
loginForm.style.display = 'none';
registerForm.style.display = 'block';
formTitle.textContent = 'Register Form';
toggleFormBtn.textContent = 'Switch to Login';
}
});
loginForm.addEventListener('submit', (e) => {
e.preventDefault();
loginError.textContent = '';
const email = document.getElementById('loginEmail').value;
const password = document.getElementById('loginPassword').value;
if (email === 'user@example.com' && password === 'password') {
messageDiv.textContent = 'Login successful!';
messageDiv.style.color = 'green';
} else {
loginError.textContent = 'Invalid login credentials!';
}
});
registerForm.addEventListener('submit', (e) => {
e.preventDefault();
registerError.textContent = '';
const name = document.getElementById('registerName').value;
const email = document.getElementById('registerEmail').value;
const password = document.getElementById('registerPassword').value;
if (name && email && password) {
messageDiv.textContent = 'Registration successful!';
messageDiv.style.color = 'green';
} else {
registerError.textContent = 'Please fill out all fields!';
}
});
</script>
</body>
</html>
HTML