NawelMer/captcha-validator-pro

1 2document.addEventListener('DOMContentLoaded', () => {3    const captchaImage = document.getElementById('captchaImage');4    const refreshBtn = document.getElementById('refreshBtn');5    const trueBtn = document.getElementById('trueBtn');6    const falseBtn = document.getElementById('falseBtn');7    const userInput = document.getElementById('userInput');8    const verifiedCount = document.getElementById('verifiedCount');9    const pendingCount = document.getElementById('pendingCount');10    const failedCount = document.getElementById('failedCount');11    // List of CAPTCHA images12    const captchaImages = [13        'http://static.photos/technology/320x240/1',14        'http://static.photos/abstract/320x240/2',15        'http://static.photos/nature/320x240/3',16        'http://static.photos/cityscape/320x240/4',17        'http://static.photos/workspace/320x240/5'18    ];19let currentCaptchaIndex = 0;20    let stats = {21        verified: 0,22        pending: 0,23        failed: 024    };25    26    // Initialize27    generateCaptcha();28    // Generate random CAPTCHA29    function generateCaptcha() {30        // Select a random image from the array31        currentCaptchaIndex = Math.floor(Math.random() * captchaImages.length);32        const imagePath = captchaImages[currentCaptchaIndex];33        34        // Set the image source35        captchaImage.src = imagePath;36        captchaImage.alt = "CAPTCHA Image";37        38        stats.pending++;39        updateStats();40    }41    // Validate CAPTCHA42    function validateCaptcha() {43        // For image-based CAPTCHA, we'll just simulate validation44        // In a real implementation, you would check the user's input against the actual CAPTCHA text45        46        // Remove any existing feedback47        const existingFeedback = document.querySelector('.feedback-message');48        if (existingFeedback) existingFeedback.remove();49        50        const feedbackDiv = document.createElement('div');51        feedbackDiv.classList.add('feedback-message');52        53        // Simulate validation (50% chance of being correct)54        const isCorrect = Math.random() > 0.5;55        56        if (isCorrect) {57            feedbackDiv.classList.add('feedback-success');58            feedbackDiv.textContent = 'Verification successful! You are human.';59            stats.verified++;60            stats.pending--;61        } else {62            feedbackDiv.classList.add('feedback-error');63            feedbackDiv.textContent = 'Verification failed. Please try again.';64            stats.failed++;65            stats.pending--;66        }67        68        // Insert feedback after the input container69        document.querySelector('.bg-indigo-50').appendChild(feedbackDiv);70        71        // Clear input72        userInput.value = '';73        74        // Update stats75        updateStats();76        77        // Generate new CAPTCHA after delay78        setTimeout(() => {79            generateCaptcha();80            feedbackDiv.remove();81        }, 3000);82    }83// Update statistics display84    function updateStats() {85        verifiedCount.textContent = stats.verified;86        pendingCount.textContent = stats.pending;87        failedCount.textContent = stats.failed;88    }89    // Play audio CAPTCHA (simulated)90    function playAudioCaptcha() {91        // Remove any existing feedback92        const existingFeedback = document.querySelector('.feedback-message');93        if (existingFeedback) existingFeedback.remove();94        95        const feedbackDiv = document.createElement('div');96        feedbackDiv.classList.add('feedback-message', 'feedback-success');97        feedbackDiv.textContent = `Audio CAPTCHA: "${currentCaptcha}" (simulated)`;98        99        // Insert feedback after the input container100        document.querySelector('.bg-indigo-50').appendChild(feedbackDiv);101        102        // Remove after delay103        setTimeout(() => {104            feedbackDiv.remove();105        }, 3000);106// Event listeners107    refreshBtn.addEventListener('click', generateCaptcha);108    trueBtn.addEventListener('click', () => validateCaptcha(true));109    falseBtn.addEventListener('click', () => validateCaptcha(false));110    // Allow Enter key to submit111    userInput.addEventListener('keyup', (e) => {112        if (e.key === 'Enter') {113            validateCaptcha();114        }115    });116// Modified validateCaptcha to handle true/false buttons117    function validateCaptcha(isTrue) {118        // Remove any existing feedback119        const existingFeedback = document.querySelector('.feedback-message');120        if (existingFeedback) existingFeedback.remove();121        122        const feedbackDiv = document.createElement('div');123        feedbackDiv.classList.add('feedback-message');124        125        // For this implementation, we'll consider "true" as correct when the CAPTCHA is valid126        // and "false" as correct when the CAPTCHA is invalid (which we'll simulate)127        const isCorrect = isTrue; // Simplified logic - in a real app, you would have actual validation128        129        if (isCorrect) {130            feedbackDiv.classList.add('feedback-success');131            feedbackDiv.textContent = 'Verification successful! You are human.';132            stats.verified++;133            stats.pending--;134        } else {135            feedbackDiv.classList.add('feedback-error');136            feedbackDiv.textContent = 'Verification failed. Please try again.';137            stats.failed++;138            stats.pending--;139        }140        141        // Insert feedback after the input container142        document.querySelector('.bg-indigo-50').appendChild(feedbackDiv);143        144        // Clear input145        userInput.value = '';146        147        // Update stats148        updateStats();149        150        // Generate new CAPTCHA after delay151        setTimeout(() => {152            generateCaptcha();153            feedbackDiv.remove();154        }, 3000);155    }156});