TASK 1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login with CAPTCHA</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Login</h1>
<form id="loginForm">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<div class="captcha-container">
<label for="captcha">CAPTCHA:</label>
<div id="captcha" class="captcha"></div>
<input type="text" id="captchaInput" required placeholder="Enter CAPTCHA">
<button type="button" id="refreshCaptcha">Refresh</button>
</div>
<button type="submit">Login</button>
</form>
</div>
<script src="script.js"></script>
</body>
</html>
TASK 2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Social Media Login</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h2>Login with Social Media</h2>
<div class="social-login">
<button class="btn facebook">Login with Facebook</button>
<button class="btn google">Login with Google</button>
<button class="btn twitter">Login with Twitter</button>
</div>
<div class="divider">
<span>or</span>
</div>
<form class="email-login">
<div class="input-group">
<label for="username">Email or Username</label>
<input type="text" id="username" name="username" required>
</div>
<div class="input-group">
<label for="password">Password</label>
<input type="password" id="password" name="password" required>
</div>
<button type="submit">Login</button>
</form>
</div>
</body>
</html>
TASK 3:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Two-Factor Authentication Login</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h2>Login</h2>
<form id="login-form" class="auth-form">
<div class="input-group">
<label for="username">Username</label>
<input type="text" id="username" name="username" required>
</div>
<div class="input-group">
<label for="password">Password</label>
<input type="password" id="password" name="password" required>
</div>
<button type="submit">Login</button>
</form>
<form id="2fa-form" class="auth-form hidden">
<h2>Enter Verification Code</h2>
<div class="input-group">
<label for="code">Verification Code</label>
<input type="text" id="code" name="code" required>
</div>
<button type="submit">Verify</button>
</form>
</div>
<script>
const loginForm = document.getElementById('login-form');
const twoFAForm = document.getElementById('2fa-form');
// Hardcoded credentials
const validUsername = 'mohamed sami';
const validPassword = 'sami123';
const verificationCode = '123456'; // This would be sent to the user in a real app
loginForm.addEventListener('submit', function(e) {
e.preventDefault();
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
// Check credentials
if (username === validUsername && password === validPassword) {
// Show the 2FA form
loginForm.classList.add('hidden');
twoFAForm.classList.remove('hidden');
alert("A verification code has been sent to your registered email or phone.");
} else {
alert("Invalid username or password.");
}
});
twoFAForm.addEventListener('submit', function(e) {
e.preventDefault();
const code = document.getElementById('code').value;
// Check verification code
if (code === verificationCode) {
alert("Verification successful! You are now logged in.");
// Redirect or proceed with the login
} else {
alert("Invalid verification code. Please try again.");
});
</script>
</body>
</html>
TASK 4:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Email-Based Security Login</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="login-container">
<h2>Email Login</h2>
<form action="backend_login.php" method="POST">
<label for="email">Email:</label>
<input type="email" id="email" name="email" class="input-field" placeholder="Enter your
email" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" class="input-field"
placeholder="Enter your password" required>
<button type="submit" class="btn">Login</button>
</form>
</div>
</body>
</html>
CSS:
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
.login-container {
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 300px;
}
.login-container h2 {
text-align: center;
margin-bottom: 20px;
.input-field {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ddd;
border-radius: 4px;
.btn {
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
.btn:hover {
background-color: #45a049;
TASK 5:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Single Sign-On (SSO) Login</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h2>Login with SSO</h2>
<div class="social-login">
<button class="btn google" onclick="alert('Google SSO not implemented')">Login with
Google</button>
<button class="btn facebook" onclick="alert('Facebook SSO not implemented')">Login with
Facebook</button>
<button class="btn microsoft" onclick="alert('Microsoft SSO not implemented')">Login with
Microsoft</button>
</div>
<div class="divider">
<span>or</span>
</div>
<form id="email-login-form" class="auth-form">
<div class="input-group">
<label for="email">Email</label>
<input type="email" id="email" name="email" required>
</div>
<div class="input-group">
<label for="password">Password</label>
<input type="password" id="password" name="password" required>
</div>
<button type="submit">Login</button>
</form>
</div>
<script>
const emailLoginForm = document.getElementById('email-login-form');
// Hardcoded credentials
const validEmail = 'testuser@example.com';
const validPassword = 'Password123!';
emailLoginForm.addEventListener('submit', function(e) {
e.preventDefault();
const email = document.getElementById('email').value;
const password = document.getElementById('password').value;
// Check credentials
if (email === validEmail && password === validPassword) {
alert("Logged in successfully!");
// Redirect to the main application dashboard or homepage
} else {
alert("Invalid email or password. Please try again.");
});
</script>
</body>
</html>
TASK 6:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Biometric Login</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="login-container">
<h2>Biometric Login</h2>
<form action="backend_bio_login.php" method="POST">
<div class="biometric-options">
<button type="button" class="bio-btn" id="fingerprint-btn">Login with Fingerprint</button>
<button type="button" class="bio-btn" id="face-id-btn">Login with Face ID</button>
</div>
<div id="bio-status" class="status-message"></div>
<p>Alternatively, you can use your username and password:</p>
<label for="username">Username:</label>
<input type="text" id="username" name="username" class="input-field" placeholder="Enter
your username" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" class="input-field"
placeholder="Enter your password" required>
<button type="submit" class="btn">Login</button>
</form>
</div>
<script>
// Sample JavaScript to simulate biometric login attempts (for demonstration)
document.getElementById('fingerprint-btn').addEventListener('click', function() {
document.getElementById('bio-status').innerHTML = 'Fingerprint authentication in progress...';
setTimeout(function() {
document.getElementById('bio-status').innerHTML = 'Fingerprint recognized! You are logged
in.';
}, 2000); // Simulating a delay for fingerprint recognition
});
</script>
</body>
</html>
TASK 7:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login with CAPTCHA</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Login</h1>
<form id="loginForm">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<div class="captcha-container">
<label for="captcha">CAPTCHA:</label>
<div id="captcha" class="captcha"></div>
<input type="text" id="captchaInput" required placeholder="Enter CAPTCHA">
<button type="button" id="refreshCaptcha">Refresh</button>
</div>
<button type="submit">Login</button>
</form>
</div>
<script src="script.js"></script>
</body>
</html>
TASK 8:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Two-Factor Authentication Login</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h2>Login</h2>
<form id="login-form" class="auth-form">
<div class="input-group">
<label for="username">Username</label>
<input type="text" id="username" name="username" required>
</div>
<div class="input-group">
<label for="password">Password</label>
<input type="password" id="password" name="password" required>
</div>
<button type="submit">Login</button>
</form>
<form id="2fa-form" class="auth-form hidden">
<h2>Enter Verification Code</h2>
<div class="input-group">
<label for="code">Verification Code</label>
<input type="text" id="code" name="code" required>
</div>
<button type="submit">Verify</button>
</form>
</div>
<script>
const loginForm = document.getElementById('login-form');
const twoFAForm = document.getElementById('2fa-form');
// Hardcoded credentials
const validUsername = 'mohamed sami';
const validPassword = 'sami123';
const verificationCode = '123456'; // This would be sent to the user in a real app
loginForm.addEventListener('submit', function(e) {
e.preventDefault();
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
// Check credentials
if (username === validUsername && password === validPassword) {
// Show the 2FA form
loginForm.classList.add('hidden');
twoFAForm.classList.remove('hidden');
alert("A verification code has been sent to your registered email or phone.");
} else {
alert("Invalid username or password.");
});
twoFAForm.addEventListener('submit', function(e) {
e.preventDefault();
const code = document.getElementById('code').value;
// Check verification code
if (code === verificationCode) {
alert("Verification successful! You are now logged in.");
// Redirect or proceed with the login
} else {
alert("Invalid verification code. Please try again.");
});
</script>
</body>
</html>
FINAL CSS (COMMON FOR MOST OF THE PROGRAMS):
*{
box-sizing: border-box;
margin: 0;
padding: 0;
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
.container {
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
width: 300px;
h2 {
margin-bottom: 20px;
text-align: center;
.auth-form {
display: flex;
flex-direction: column;
}
.input-group {
margin-bottom: 15px;
label {
display: block;
margin-bottom: 5px;
input {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
button {
background-color: #5cb85c;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
padding: 10px;
button:hover {
background-color: #4cae4c;
.hidden {
display: none;
