nix
152 lines
4.8 KiB
HTML
Executable File
152 lines
4.8 KiB
HTML
Executable File
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Random Terrible CAPTCHA (Working Version)</title>
|
||
<style>
|
||
body { font-family: "Segoe UI", Arial, sans-serif; background: #f3f3f7; display: flex; justify-content: center; padding: 40px; }
|
||
#wrapper { width: 450px; background: white; padding: 30px; border-radius: 16px; box-shadow: 0 6px 20px rgba(0,0,0,0.12); }
|
||
h1 { text-align: center; margin-bottom: 25px; }
|
||
#captcha-box { border: 2px solid #333; padding: 20px; border-radius: 10px; background: #fafafa; }
|
||
button { margin-top: 10px; padding: 10px 20px; cursor: pointer; border: none; border-radius: 8px; background: #4b6aff; color: white; font-size: 15px; }
|
||
button:hover { background: #3f5ce0; }
|
||
input, select { width: 100%; margin-top: 10px; padding: 10px; border-radius: 8px; border: 1px solid #bbb; font-size: 15px; }
|
||
.emoji-btn { font-size: 28px; padding: 5px 12px; margin: 3px; cursor: pointer; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div id="wrapper">
|
||
<h1>Access Verification</h1>
|
||
|
||
<form id="accessForm" method="POST" action="access.php"></form>
|
||
|
||
<div id="captcha-box">
|
||
<div id="captcha-content"></div>
|
||
<button id="validateBtn">Validate</button>
|
||
</div>
|
||
|
||
<script>
|
||
let currentCaptcha = null;
|
||
let captchaControls = {};
|
||
|
||
// FULLY WORKING CAPTCHA SYSTEM
|
||
const captchas = [
|
||
{
|
||
render: () => `Type the following EXACTLY:<br><code>supercalifragilisticexpialidocious!!??</code><input id="answer">`,
|
||
setup: () => {},
|
||
check: v => v === "supercalifragilisticexpialidocious!!??"
|
||
},
|
||
|
||
{
|
||
render: () => `How many digits are in:<br><code>x91k33mm007pp444z</code><input id="answer" type="number">`,
|
||
setup: () => {},
|
||
check: v => Number(v) === 11
|
||
},
|
||
|
||
{
|
||
render: () => `Click the FOURTH cat with sunglasses:<br>
|
||
<button class="emoji-btn" data-id="1">😺</button>
|
||
<button class="emoji-btn" data-id="2">😺😎</button>
|
||
<button class="emoji-btn" data-id="3">😺😎</button>
|
||
<button class="emoji-btn" data-id="4">😺😎</button>
|
||
<button class="emoji-btn" data-id="5">😺</button>
|
||
<input id="answer" type="hidden">`,
|
||
setup: () => {
|
||
document.querySelectorAll('.emoji-btn').forEach(btn => {
|
||
btn.addEventListener('click', () => {
|
||
document.getElementById('answer').value = btn.dataset.id;
|
||
});
|
||
});
|
||
},
|
||
check: v => v === "4"
|
||
},
|
||
|
||
{
|
||
render: () => `Solve:<br>((3×3) + 7 − 2) × 4 + 13 = ?<input id="answer" type="number">`,
|
||
setup: () => {},
|
||
check: v => Number(v) === (((3*3)+7-2)*4+13)
|
||
},
|
||
|
||
{
|
||
render: () => `Click this button exactly 10 times:<br>
|
||
<button id="clicker">Click me</button>
|
||
<p>Clicks: <span id="count">0</span></p>
|
||
<input id="answer" type="hidden">`,
|
||
setup: () => {
|
||
let clicks = 0;
|
||
document.getElementById('clicker').addEventListener('click', () => {
|
||
clicks++;
|
||
document.getElementById('count').textContent = clicks;
|
||
document.getElementById('answer').value = clicks;
|
||
});
|
||
},
|
||
check: v => Number(v) === 10
|
||
},
|
||
|
||
{
|
||
render: () => `Reorder the words:<br><code>blue is sky the</code><input id="answer" placeholder="Correct sentence">`,
|
||
setup: () => {},
|
||
check: v => v.toLowerCase().trim() === "the sky is blue"
|
||
},
|
||
|
||
{
|
||
render: () => `Select the meaning of life:<br>
|
||
<select id="answer">
|
||
<option value="">-- choose --</option>
|
||
<option>42</option>
|
||
<option>7</option>
|
||
<option>113</option>
|
||
</select>`,
|
||
setup: () => {},
|
||
check: v => v === "42"
|
||
},
|
||
|
||
{
|
||
render: () => `Type this but REVERSED:<br><code>!sdrow ruoy esreveR</code><input id="answer">`,
|
||
setup: () => {},
|
||
check: v => v === "Reverse your words!"
|
||
},
|
||
|
||
{
|
||
render: () => {
|
||
const nums = [3,7,2,9,4];
|
||
captchaControls.sum = nums.reduce((a,b)=>a+b,0);
|
||
return `What is the sum?<br><code>${nums.join(' + ')}</code><input id="answer" type="number">`;
|
||
},
|
||
setup: () => {},
|
||
check: v => Number(v) === captchaControls.sum
|
||
},
|
||
|
||
{
|
||
render: () => `Type the COLOR of the text:<br><span style="color:red;font-weight:bold;font-size:22px;">BLUE</span><input id="answer">`,
|
||
setup: () => {},
|
||
check: v => v.toLowerCase() === "red"
|
||
}
|
||
];
|
||
|
||
function loadRandomCaptcha() {
|
||
currentCaptcha = captchas[Math.floor(Math.random() * captchas.length)];
|
||
document.getElementById('captcha-content').innerHTML = currentCaptcha.render();
|
||
currentCaptcha.setup();
|
||
}
|
||
|
||
// BUTTON → VALIDATE CAPTCHA → SUBMIT POST TO PHP
|
||
|
||
document.getElementById('validateBtn').addEventListener('click', evt => {
|
||
evt.preventDefault();
|
||
const val = document.getElementById('answer').value || "";
|
||
|
||
if (currentCaptcha.check(val)) {
|
||
document.getElementById('accessForm').submit();
|
||
} else {
|
||
alert("Incorrect — new CAPTCHA loaded.");
|
||
loadRandomCaptcha();
|
||
}
|
||
});
|
||
|
||
loadRandomCaptcha();
|
||
</script>
|
||
</div>
|
||
</body>
|
||
</html>
|