<!DOCTYPE html>
<html>
<head>
<title>Registration System</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
}
h1 {
text-align: center;
}
form {
max-width: 400px;
margin: 0 auto;
}
label {
display: block;
margin-top: 10px;
}
input[type="text"],
input[type="password"] {
width: 100%;
padding: 5px;
margin-top: 5px;
}
.captcha {
display: flex;
align-items: center;
margin-top: 10px;
}
.captcha span {
margin-right: 10px;
}
.feedback {
color: red;
margin-top: 10px;
}
.buttons {
text-align: center;
margin-top: 10px;
}
.buttons button {
padding: 5px 10px;
margin-right: 5px;
}
</style>
</head>
<body>
<h1>Registration System</h1>
<form id="registrationForm">
<label for="username">Username:</label>
<input type="text" id="username" required>
<label for="password">Password:</label>
<input type="password" id="password" required>
<div class="captcha">
<label for="captcha">Captcha:</label>
<input type="text" id="captcha" required>
<span id="captchaText"></span>
<button type="button" onclick="refreshCaptcha()">Refresh Captcha</button>
</div>
<div class="buttons">
<button type="submit" onclick="register()">Register</button>
</div>
<div id="feedback" class="feedback"></div>
</form>
<div id="loginPage" style="display: none;">
<h1>Login</h1>
<form id="loginForm">
<label for="loginUsername">Username:</label>
<input type="text" id="loginUsername" required>
<label for="loginPassword">Password:</label>
<input type="password" id="loginPassword" required>
<label for="loginCaptcha">Captcha:</label>
<input type="text" id="loginCaptcha" required>
<span id="loginCaptchaText"></span>
<button type="button" onclick="refreshLoginCaptcha()">Refresh Captcha</button>
<div class="buttons">
<button type="submit" onclick="login()">Login</button>
</div>
<div id="loginFeedback" class="feedback"></div>
</form>
</div>
<div id="welcomePage" style="display: none;">
<h1>Welcome</h1>
<div id="welcomeMessage"></div>
<div id="currentTime"></div>
</div>
<script>
function refreshCaptcha() {
var captchaText = document.getElementById("captchaText");
var randomString = generateRandomString(8);
captchaText.textContent = randomString;
}
function refreshLoginCaptcha() {
var loginCaptchaText = document.getElementById("loginCaptchaText");
var randomString = generateRandomString(8);
loginCaptchaText.textContent = randomString;
}
function generateRandomString(length) {
var characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
var randomString = "";
for (var i = 0; i < length; i++) {
var randomIndex = Math.floor(Math.random() * characters.length);
randomString += characters.charAt(randomIndex);
}
return randomString;
}
function register() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
var captcha = document.getElementById("captcha").value;
var captchaText = document.getElementById("captchaText").textContent;
if (captcha !== captchaText) {
document.getElementById("feedback").textContent = "Invalid captcha. Please try again.";
refreshCaptcha();
return;
}
if (!isValidUsername(username) || !isValidPassword(password)) {
document.getElementById("feedback").textContent = "Invalid username or password. Please try again.";
refreshCaptcha();
return;
}
alert("Registration successful!");
document.getElementById("registrationForm").reset();
showLoginPage();
}
function login() {
var loginUsername = document.getElementById("loginUsername").value;
var loginPassword = document.getElementById("loginPassword").value;
var loginCaptcha = document.getElementById("loginCaptcha").value;
var loginCaptchaText = document.getElementById("loginCaptchaText").textContent;
if (loginCaptcha !== loginCaptchaText) {
document.getElementById("loginFeedback").textContent = "Invalid captcha. Please try again.";
refreshLoginCaptcha();
return;
}
if (!isValidUsername(loginUsername) || !isValidPassword(loginPassword)) {
document.getElementById("loginFeedback").textContent = "Invalid username or password. Please try again.";
refreshLoginCaptcha();
return;
}
alert("Login successful!");
document.getElementById("loginForm").reset();
showWelcomePage(loginUsername);
}
function showLoginPage() {
document.getElementById("registrationForm").style.display = "none";
document.getElementById("loginPage").style.display = "block";
refreshLoginCaptcha();
}
function showWelcomePage(username) {
document.getElementById("loginPage").style.display = "none";
document.getElementById("welcomePage").style.display = "block";
document.getElementById("welcomeMessage").textContent = "Hello, " + username + "!";
updateTime();
}
function updateTime() {
var currentTime = document.getElementById("currentTime");
var date = new Date();
currentTime.textContent = "Current time: " + date.toLocaleTimeString();
setTimeout(updateTime, 1000);
}
function isValidUsername(username) {
var regex = /^[a-zA-Z0-9]{8,20}$/;
return regex.test(username);
}
function isValidPassword(password) {
var regex = /^[a-zA-Z0-9]{8,16}$/;
return regex.test(password);
}
</script>
</body>
</html>