Project Gallery
Explore Secure Login & Register Portal in detail
1
/1
100%
Project Overview
Secure Login & Register Portal
Project Description
- The user needs a login and register page using HTML, CSS, and JavaScript, focusing on a well-designed UI.
- "Bs" likely refers to Bootstrap, but the user explicitly restricts the use to HTML, CSS, JavaScript, and optionally TailwindCSS
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Secure Login & Register Portal</title>
<!-- Import TailwindCSS for responsive design -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Import Font Awesome for icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
</head>
<body>
<div class="background-overlay">
<img src="https://storage.googleapis.com/workspace-0f70711f-8b4e-4d94-86f1-2a93ccde5887/image/cfd38320-97ed-4b45-b3d3-15eef54de89c.png" alt="Panoramic view of a modern metropolitan skyline at sunset with towering glass skyscrapers reflecting golden hour light, surrounded by calm water and scattered clouds in the sky, evoking a sense of futuristic technology and urban serenity" style="width: 100%; height: 100%; object-fit: cover;" onerror="this.style.display='none';" />
</div>
<div class="card p-8 w-full max-w-md">
<div class="text-center mb-6">
<h2 class="text-3xl font-bold text-white mb-4">Welcome</h2>
<div class="flex justify-center space-x-4 mb-4">
<button class="toggle-btn active" onclick="showForm('login')">Login</button>
<button class="toggle-btn" onclick="showForm('register')">Register</button>
</div>
</div>
<!-- Login Form -->
<form id="login-form" class="form-container">
<div class="input-group">
<i class="fas fa-envelope"></i>
<input type="email" placeholder="Email Address" required>
</div>
<div class="input-group">
<i class="fas fa-lock"></i>
<input type="password" placeholder="Password" required>
</div>
<button type="submit" class="btn-submit">Login</button>
<p class="text-center mt-4">
<a href="#" class="link">Forgot Password?</a>
</p>
</form>
<!-- Register Form -->
<form id="register-form" class="form-container hidden">
<div class="grid grid-cols-2 gap-4 mb-4">
<div class="input-group">
<i class="fas fa-user"></i>
<input type="text" placeholder="First Name" required>
</div>
<div class="input-group">
<i class="fas fa-user"></i>
<input type="text" placeholder="Last Name" required>
</div>
</div>
<div class="input-group">
<i class="fas fa-envelope"></i>
<input type="email" placeholder="Email Address" required>
</div>
<div class="input-group">
<i class="fas fa-lock"></i>
<input type="password" placeholder="Password" required>
</div>
<div class="input-group">
<i class="fas fa-lock"></i>
<input type="password" placeholder="Confirm Password" required>
</div>
<button type="submit" class="btn-submit">Register</button>
<p class="text-center mt-4 text-sm text-white">
By registering, you agree to our <a href="#" class="link">Terms</a> and <a href="#" class="link">Privacy Policy</a>.
</p>
</form>
</div>
</body>
</html>CSS
<style>
body {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Inter', sans-serif;
}
.background-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 16px;
box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 40px rgba(31, 38, 135, 0.5);
}
.form-container {
transition: opacity 0.5s ease;
}
.toggle-btn {
background: linear-gradient(145deg, #ffffff, #f0f0f0);
border: none;
padding: 10px 20px;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
}
.toggle-btn:hover {
background: #e0e0e0;
transform: scale(1.05);
}
.active {
background: #667eea !important;
color: white;
}
.input-group {
position: relative;
margin-bottom: 20px;
}
.input-group input {
width: 100%;
padding: 12px 12px 12px 45px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 8px;
background: rgba(255, 255, 255, 0.1);
color: white;
font-size: 16px;
transition: border-color 0.3s ease;
}
.input-group input:focus {
border-color: #ffffff;
outline: none;
}
.input-group i {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: rgba(255, 255, 255, 0.7);
}
.btn-submit {
background: linear-gradient(145deg, #667eea, #764ba2);
border: none;
color: white;
padding: 12px;
border-radius: 8px;
width: 100%;
cursor: pointer;
transition: transform 0.3s ease;
}
.btn-submit:hover {
transform: translateY(-2px);
}
.link {
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
}
.link:hover {
text-decoration: underline;
}
@media (max-width: 640px) {
.card {
width: 90%;
padding: 20px;
}
}
</style>JavaScript
<script>
function showForm(formType) {
const loginForm = document.getElementById('login-form');
const registerForm = document.getElementById('register-form');
const loginBtn = document.querySelector('button[onclick*="login"]');
const registerBtn = document.querySelector('button[onclick*="register"]');
if (formType === 'login') {
loginForm.classList.remove('hidden');
registerForm.classList.add('hidden');
loginBtn.classList.add('active');
registerBtn.classList.remove('active');
} else {
registerForm.classList.remove('hidden');
loginForm.classList.add('hidden');
registerBtn.classList.add('active');
loginBtn.classList.remove('active');
}
}
// Basic form validation
document.querySelectorAll('form').forEach(form => {
form.addEventListener('submit', function(event) {
const inputs = form.querySelectorAll('input[required]');
let isValid = true;
inputs.forEach(input => {
if (!input.value.trim()) {
alert(`Please fill in the ${input.placeholder}`);
isValid = false;
return;
}
});
if (!isValid) {
event.preventDefault();
} else {
alert('Form submitted successfully! (Demo)');
event.preventDefault(); // Prevent actual submission for demo
}
});
});
</script>