</> CAPTCHA System Source Code </>

kiz · 1 Ara 2024

Chatgpt ile yapılmış captcha system
png ile rastgele harf ve sayı oluşturuyor
textboxa girmeniz gerekiyor
taramasını engellemesi için ekrana
karıncılanma ve röntgen geliyor gidiyor

JavaScript:

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bozuk CAPTCHA Sistemi</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f4f7fa;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .captcha-container {
            background-color: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 600px;
            text-align: center;
        }
        h2 {
            color: #333;
        }
        .captcha-images {
            position: relative;
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-bottom: 20px;
            width: 100%;
        }
        .captcha-image {
            font-size: 40px;
            font-weight: bold;
            color: #007BFF;
            transform: skew(-10deg);
            text-shadow: 3px 3px 4px rgba(0, 0, 0, 0.1), -2px -2px 3px rgba(0, 0, 0, 0.1);
            margin-bottom: 15px;
            display: inline-block;
            width: 50px;
            height: 70px;
            text-align: center;
            line-height: 70px;
            border-radius: 5px;
            position: relative;
            overflow: hidden;
        }
        .captcha-image img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0.5;
        }
        .stripe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 10px;
            background-color: rgba(0, 0, 0, 0.3);
            animation: moveStripe 2s infinite linear;
        }
        @keyframes moveStripe {
            0% { top: -10px; }
            50% { top: 70px; }
            100% { top: -10px; }
        }
        .noise {
            position: absolute;
            background-color: rgba(0, 0, 0, 0.2);
            border-radius: 50%;
            animation: noiseEffect 0.1s infinite;
        }
        @keyframes noiseEffect {
            0% { transform: translate(-50%, -50%) scale(0.8); }
            50% { transform: translate(50%, 50%) scale(1.2); }
            100% { transform: translate(-50%, -50%) scale(0.8); }
        }
        .captcha-input {
            padding: 10px;
            font-size: 18px;
            border: 2px solid #ccc;
            border-radius: 5px;
            width: 200px;
            margin-top: 10px;
        }
        .captcha-btn {
            padding: 12px 25px;
            background-color: #28a745;
            color: white;
            font-size: 16px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin-top: 15px;
            transition: background-color 0.3s;
        }
        .captcha-btn:hover {
            background-color: #218838;
        }
        .error-message, .success-message {
            font-weight: bold;
            margin-top: 15px;
        }
        .error-message {
            color: red;
            display: none;
        }
        .success-message {
            color: green;
            display: none;
        }
    </style>
</head>
<body>

<div class="captcha-container">
    
    <div class="captcha-images" id="captcha-images">
        <!-- Resimler dinamik olarak eklenecek -->
    </div>
    
    <input type="text" id="captcha-input" class="captcha-input" placeholder="">
    <button class="captcha-btn" onclick="checkCaptcha()">※</button>
    
    <p class="error-message" id="error-message">Yanlış cevap! Lütfen tekrar deneyin.</p>
    <p class="success-message" id="success-message">Başarıyla doğrulandı!</p>
</div>

<script>
    // Bozuk harf veya sayı
    const captchaData = [
        'A', 'B', 'C', 'D', '1', '2', '3', '4', 'X', 'Y', 'Z', 'E', 'F', 'G', 'H', 'I', 'J', 'K'
    ];

    // Köpek resimleri
    const dogImages = [
        'https://via.placeholder.com/50x70?text=Dog1',
        'https://via.placeholder.com/50x70?text=Dog2',
        'https://via.placeholder.com/50x70?text=Dog3'
    ];

    // Daha fazla font
    const fonts = [
        'Arial', 'Verdana', 'Tahoma', 'Courier New', 'Georgia', 'Impact', 'Times New Roman', 'Comic Sans MS', 'Brush Script MT', 'Lucida Console', 'Monaco', 'Consolas', 'Segoe UI', 'Trebuchet MS', 'Rockwell', 'Garamond', 'Helvetica', 'Futura', 'Cursive', 'Palatino', 'Arial Black', 'Courier', 'Georgia', 'Copperplate', 'Andale Mono'
    ];

    let currentCaptcha = [];

    // Bozuk bir harf veya sayı resim oluşturma
    function generateCaptcha() {
        // 4 karakter seç
        currentCaptcha = [];
        while (currentCaptcha.length < 4) {
            let randomChar = captchaData[Math.floor(Math.random() * captchaData.length)];
            if (!currentCaptcha.includes(randomChar)) {
                currentCaptcha.push(randomChar);
            }
        }

        // Karakterleri rastgele karıştır
        currentCaptcha = shuffle(currentCaptcha);

        // CAPTCHA görsellerini oluştur
        const container = document.getElementById('captcha-images');
        container.innerHTML = '';
        
        currentCaptcha.forEach(char => {
            const imgElement = document.createElement('div');
            imgElement.className = 'captcha-image';
            imgElement.textContent = char;

            // Fontu rastgele seç
            imgElement.style.fontFamily = fonts[Math.floor(Math.random() * fonts.length)];

            // Bozuk görsel efekti eklemek için CSS uygulanabilir
            imgElement.style.transform = `rotate(${Math.random() * 10 - 5}deg) skew(${Math.random() * 10 - 5}deg)`;

            // Köpek resmi eklemek
            const dogImage = document.createElement('img');
            dogImage.src = dogImages[Math.floor(Math.random() * dogImages.length)];
            dogImage.style.opacity = '0.3'; // Resmi daha şeffaf yapıyoruz
            imgElement.appendChild(dogImage);

            // Şerit eklemek
            const stripe = document.createElement('div');
            stripe.classList.add('stripe');
            stripe.style.top = `${Math.random() * 100}%`;  // Şeritleri rastgele konumlandır
            imgElement.appendChild(stripe);

            // Karıncalanma efekti eklemek
            const numOfNoise = Math.floor(Math.random() * 5) + 5; // Karıncalanma noktaları
            for (let i = 0; i < numOfNoise; i++) {
                const noiseDot = document.createElement('div');
                noiseDot.classList.add('noise');
                noiseDot.style.width = `${Math.random() * 4 + 1}px`;
                noiseDot.style.height = `${Math.random() * 4 + 1}px`;
                noiseDot.style.top = `${Math.random() * 70}%`;
                noiseDot.style.left = `${Math.random() * 100}%`;
                imgElement.appendChild(noiseDot);
            }

            container.appendChild(imgElement);
        });
    }

    // Karıştırma fonksiyonu
    function shuffle(array) {
        let shuffledArray = [...array];
        for (let i = shuffledArray.length - 1; i > 0; i--) {
            const j = Math.floor(Math.random() * (i + 1));
            [shuffledArray[i], shuffledArray[j]] = [shuffledArray[j], shuffledArray[i]];
        }
        return shuffledArray;
    }

    // CAPTCHA doğrulama
    function checkCaptcha() {
        const userInput = document.getElementById('captcha-input').value.toUpperCase();
        const errorMessage = document.getElementById('error-message');
        const successMessage = document.getElementById('success-message');

        // Kullanıcı doğru cevabı girerse
        if (userInput === currentCaptcha.join('')) {
            successMessage.style.display = 'block';
            errorMessage.style.display = 'none';
        } else {
            successMessage.style.display = 'none';
            errorMessage.style.display = 'block';
        }

        // Yeni CAPTCHA oluştur
        generateCaptcha();
        document.getElementById('captcha-input').value = ''; // Inputu temizle
    }

    // Sayfa yüklendiğinde CAPTCHA'yı oluştur
    generateCaptcha();
</script>

</body>
</html>

</> CAPTCHA System Source Code </>

kiz

Şuanda konuyu görüntüleyen kullanıcılar