<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Doodle Math CAPTCHA</title>
<!-- Handwritten font -->
<link href="https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap" rel="stylesheet">
<!-- MathJax -->
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<style>
body {
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #ffffff;
font-family: 'Patrick Hand', cursive;
}
.login-box {
border: 3px solid black;
padding: 40px;
width: 500px;
border-radius: 20px;
box-shadow: 6px 6px 0px black;
}
h2 {
text-align: center;
font-size: 32px;
margin-bottom: 25px;
}
.input-group {
margin-bottom: 20px;
}
input {
width: 100%;
padding: 10px;
border: 2px solid black;
border-radius: 12px;
font-size: 18px;
font-family: 'Patrick Hand', cursive;
}
input:focus {
outline: none;
}
.captcha-container {
display: none;
margin-top: 25px;
padding: 20px;
border: 2px dashed black;
border-radius: 15px;
}
.captcha-header {
display: flex;
justify-content: space-between;
margin-bottom: 15px;
font-size: 20px;
}
.captcha-row {
display: flex;
align-items: center;
gap: 20px;
}
.math-box {
flex: 3;
font-size: 22px;
}
.answer-box {
flex: 1;
}
.answer-box input {
width: 80px; /* Smaller answer box */
text-align: center;
font-size: 20px;
}
.refresh-btn {
border: 2px solid black;
background: white;
padding: 5px 10px;
cursor: pointer;
font-family: 'Patrick Hand', cursive;
}
.login-btn {
margin-top: 25px;
width: 100%;
padding: 10px;
border: 3px solid black;
background: white;
font-size: 20px;
cursor: pointer;
border-radius: 12px;
box-shadow: 4px 4px 0px black;
}
.login-btn:active {
box-shadow: 2px 2px 0px black;
transform: translate(2px,2px);
}
</style>
</head>
<body>
<div class="login-box">
<h2>Login</h2>
<form autocomplete="off">
<!-- Autofill blockers -->
<input type="text" style="display:none">
<input type="password" style="display:none">
<div class="input-group">
<input type="text"
id="email"
placeholder="Username"
autocomplete="off"
readonly
onfocus="this.removeAttribute('readonly');">
</div>
<div class="input-group">
<input type="password"
id="password"
placeholder="Password"
autocomplete="new-password"
readonly
onfocus="this.removeAttribute('readonly');">
</div>
<div class="captcha-container" id="captchaBox">
<div class="captcha-header">
<span>Are you human?</span>
<button type="button" class="refresh-btn" onclick="generateCaptcha()">↻</button>
</div>
<div class="captcha-row">
<div class="math-box" id="captchaQuestion"></div>
<div class="answer-box">
<input type="number" id="captchaAnswer" placeholder="?" autocomplete="off">
</div>
</div>
</div>
<button type="button" class="login-btn" onclick="validateForm()">LOGIN</button>
</form>
</div>
<script>
let correctAnswer = 0;
function generateCaptcha() {
let a = Math.floor(Math.random() * 5) + 1;
let b = Math.floor(Math.random() * 5) + 1;
correctAnswer = Math.round((Math.sin(a) + Math.cos(b)) * 10);
let equation = `
\\[
\\int \\frac{ \\cos^{2}(${a}) \\sqrt{1 - ${b}^{2}} }
{ \\log \\left( 1 + \\frac{ \\sin(2${a} \\sqrt{1-${b}^{2}}) }{ \\pi } \\right) } dx
\\]
`;
document.getElementById("captchaQuestion").innerHTML = equation;
MathJax.typeset();
}
function checkInputs() {
const email = document.getElementById("email").value.trim();
const password = document.getElementById("password").value.trim();
if (email.length > 2 && password.length > 2) {
document.getElementById("captchaBox").style.display = "block";
if (!document.getElementById("captchaQuestion").innerHTML) {
generateCaptcha();
}
} else {
document.getElementById("captchaBox").style.display = "none";
}
}
function validateForm() {
const userAnswer = parseInt(document.getElementById("captchaAnswer").value);
if (userAnswer === correctAnswer) {
alert("Access Granted ✔");
} else {
alert("Wrong! Try again.");
generateCaptcha();
}
}
document.getElementById("email").addEventListener("input", checkInputs);
document.getElementById("password").addEventListener("input", checkInputs);
</script>
</body>
</html>
