Captcha

Code

<!DOCTYPE html>

<head>

<title>Simple CAPTCHA</title>

<style>

body {

font-family: Arial, sans-serif;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

margin: 0;

background-color: #f0f0f0;

}

.captcha-container {

background-color: white;

padding: 20px;

border-radius: 8px;

box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

text-align: center;

max-width: 400px;

width: 100%;

}

.captcha-image {

background-color: #e0e0e0;

padding: 15px;

border-radius: 4px;

margin: 15px 0;

position: relative;

overflow: hidden;

}

.captcha-text {

font-family: "Courier New", monospace;

font-size: 28px;

font-weight: bold;

letter-spacing: 8px;

color: #333;

transform: skewX(-10deg);

display: inline-block;

position: relative;

user-select: none;

}

.captcha-text::before {

content: "";

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

background: linear-gradient(45deg, rgba(255,255,255,0.2) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.2) 75%, transparent 75%, transparent);

background-size: 4px 4px;

pointer-events: none;

}

.noise-line {

position: absolute;

height: 2px;

background-color: #333;

opacity: 0.5;

}

.captcha-input {

padding: 10px;

width: 80%;

border: 1px solid #ddd;

border-radius: 4px;

margin-bottom: 15px;

font-size: 16px;

}

.captcha-button {

background-color: #4CAF50;

color: white;

border: none;

padding: 10px 20px;

border-radius: 4px;

cursor: pointer;

font-size: 16px;

transition: background-color 0.3s;

}

.captcha-button:hover {

background-color: #45a049;

}

.refresh-captcha {

background-color: #f0f0f0;

border: none;

border-radius: 4px;

padding: 8px 12px;

cursor: pointer;

margin-top: 10px;

font-size: 14px;

}

.message {

margin-top: 15px;

padding: 10px;

border-radius: 4px;

display: none;

}

.success {

background-color: #dff0d8;

color: #3c763d;

border: 1px solid #d6e9c6;

}

.error {

background-color: #f2dede;

color: #a94442;

border: 1px solid #ebccd1;

}

.verified-content {

display: none;

margin-top: 20px;

padding: 15px;

background-color: #f9f9f9;

border-radius: 4px;

border: 1px solid #ddd;

}

</style>

</head>

<body>

<h2>Verify you're human</h2>

<p>Please enter the text you see in the image below</p>

XB7D4R

</div>

</div>

<button class="captcha-button">Verify</button>

<div>

<button class="refresh-captcha">↻ Get a new CAPTCHA</button>

</div>

</div>

<h3>Access Granted</h3>

<p>Thank you for verifying you're human. You now have access to the protected content.</p>

<p>This content would typically be protected behind the CAPTCHA verification.</p>

<button id="back-button" class="refresh-captcha">Back to verification</button>

</div>

// Get DOM elements

const captchaInput = document.querySelector('.captcha-input');

const captchaText = document.querySelector('.captcha-text');

const verifyButton = document.querySelector('.captcha-button');

const refreshButton = document.querySelector('.refresh-captcha');

const message = document.getElementById('verification-message');

const verificationArea = document.getElementById('verification-area');

const protectedContent = document.getElementById('protected-content');

const backButton = document.getElementById('back-button');

// Set up event listeners

verifyButton.addEventListener('click', verifyCaptcha);

refreshButton.addEventListener('click', refreshCaptcha);

backButton.addEventListener('click', resetVerification);

// Allow Enter key to submit

captchaInput.addEventListener('keyup', function(event) {

if (event.key === 'Enter') {

verifyCaptcha();

}

});

// Initialize with a random CAPTCHA

refreshCaptcha();

// Verify the CAPTCHA input

function verifyCaptcha() {

const input = captchaInput.value.trim();

const currentCaptcha = captchaText.textContent.trim();

if (input === currentCaptcha) {

// Success

showMessage('Verification successful!', 'success');

// Show protected content after a brief delay

setTimeout(() => {

verificationArea.style.display = 'none';

protectedContent.style.display = 'block';

}, 1000);

} else {

// Error

showMessage('Incorrect. Please try again.', 'error');

captchaInput.value = '';

refreshCaptcha();

captchaInput.focus();

}

// Show verification message

function showMessage(text, type) {

message.textContent = text;

message.className = 'message';

message.classList.add(type);

message.style.display = 'block';

// Hide the message after 3 seconds if it's an error

if (type === 'error') {

setTimeout(() => {

message.style.display = 'none';

}, 3000);

}

// Generate a new random CAPTCHA

function refreshCaptcha() {

const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ';

let newCaptcha = '';

for (let i = 0; i < 6; i++) {

newCaptcha += chars.charAt(Math.floor(Math.random() * chars.length));

}

captchaText.textContent = newCaptcha;

captchaInput.value = '';

message.style.display = 'none';

}

// Reset verification to try again

function resetVerification() {

refreshCaptcha();

verificationArea.style.display = 'block';

protectedContent.style.display = 'none';

}

</script>

</body>

</html>