Yıldız Dağıtma Bot Koruması

ARWENDA · 6 Mar 2026

Sürekli trafik lambası yaya geçidi veya motosiklet seçenekleri doğru olduğu halde bazen doğrulama geçilemiyor.
Bu html tasarımını örnek olarak veriyorum.Bunun CSS,JSS Mantığını kendiniz bir bot koruması yapmak isterseniz kullanabilirsiniz.
Fare etkileşimine dayalı,yıldızları dağıtarak geçilen bir CAPTCHA.

Ekrana rastgele konumlarda yıldızlar yerleştireceğiz.
Kullanıcı faresini yıldızların üzerinde gezdirdikçe yıldızlar fare imlecinden kaçarak dağılacak ve kaybolacak.
Yıldızların büyük bir kısmı (örneğin %80'i) temizlendiğinde sistem kullanıcının insan olduğunu doğrulayacak.

Kendiniz bunun sistemini kurabilirisiniz.Tasarım olarak kodları atıyorum

Kod:

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Yıldız Dağıtma Bot Koruması</title>
  <style>
    /* Genel Sayfa Tasarımı */
    body {
      background-color: #0f172a; /* Koyu lacivert uzay teması */
      color: #e2e8f0;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
    }

    /* Form ve Captcha Konteyneri */
    .form-container {
      background-color: #1e293b;
      padding: 30px;
      border-radius: 12px;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
      text-align: center;
      max-width: 450px;
      width: 100%;
    }

    .form-container h2 {
      margin-top: 0;
      color: #38bdf8;
    }

    .form-container p {
      font-size: 14px;
      color: #94a3b8;
      margin-bottom: 20px;
    }

    /* Captcha Kutusu */
    #captcha-box {
      width: 100%;
      height: 250px;
      background-color: #000;
      border: 2px dashed #38bdf8;
      border-radius: 8px;
      position: relative;
      overflow: hidden;
      margin: 0 auto 20px auto;
      cursor: crosshair;
      box-shadow: inset 0 0 15px rgba(56, 189, 248, 0.2);
    }

    /* Yıldız Tasarımı */
    .star {
      position: absolute;
      font-size: 20px;
      user-select: none;
      /* Dağılma hızını buradan ayarlayabilirsin */
      transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    }

    /* Fare Değdiğinde Çalışacak Animasyon Sınıfı */
    .scattered {
      opacity: 0;
      transform: scale(3) translate(var(--scatter-x), var(--scatter-y));
      pointer-events: none;
    }

    /* Başarı Mesajı Ekranı */
    #success-message {
      position: absolute;
      inset: 0;
      display: none; /* Başlangıçta gizli */
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: rgba(16, 185, 129, 0.15);
      backdrop-filter: blur(3px);
      color: #34d399;
      font-size: 1.2rem;
      font-weight: bold;
      z-index: 10;
    }

    .success-icon {
      font-size: 3rem;
      margin-bottom: 10px;
    }

    /* Gönder Butonu Tasarımı */
    #submit-btn {
      background-color: #38bdf8;
      color: #0f172a;
      border: none;
      padding: 12px 24px;
      font-size: 16px;
      font-weight: bold;
      border-radius: 6px;
      cursor: pointer;
      width: 100%;
      transition: background-color 0.3s;
    }

    #submit-btn:disabled {
      background-color: #475569;
      color: #94a3b8;
      cursor: not-allowed;
    }

    #submit-btn:not(:disabled):hover {
      background-color: #7dd3fc;
    }
  </style>
</head>
<body>

  <div class="form-container">
    <h2>Güvenlik Doğrulaması</h2>
    <p>Robot olmadığınızı kanıtlamak için farenizi yıldızların üzerinde gezdirerek onları dağıtın.</p>
    
    <div id="captcha-box">
      <div id="star-field"></div>
      
      <div id="success-message">
        <div class="success-icon">🛡️</div>
        <div>İnsan Doğrulandı!</div>
      </div>
    </div>

    <button id="submit-btn" disabled>Sisteme Giriş Yap</button>
  </div>

  <script>
    document.addEventListener("DOMContentLoaded", () => {
      const captchaBox = document.getElementById('captcha-box');
      const starField = document.getElementById('star-field');
      const successMessage = document.getElementById('success-message');
      const submitBtn = document.getElementById('submit-btn');
      
      const totalStars = 40; // Kutudaki toplam yıldız sayısı
      let clearedStars = 0;
      let isVerified = false;

      // Yıldızları oluştur ve kutuya yerleştir
      for (let i = 0; i < totalStars; i++) {
        createStar();
      }

      function createStar() {
        const star = document.createElement('div');
        star.classList.add('star');
        
        // Farklı boyut ve renklerde yıldızlar için ufak varyasyonlar
        const starTypes = ['⭐', '✨', '🌟'];
        star.innerHTML = starTypes[Math.floor(Math.random() * starTypes.length)];
        
        // Kutunun içinde kalacak şekilde rastgele koordinatlar (Kenarlardan 20px içeride)
        const x = Math.random() * (captchaBox.clientWidth - 40) + 10;
        const y = Math.random() * (captchaBox.clientHeight - 40) + 10;
        star.style.left = `${x}px`;
        star.style.top = `${y}px`;
        
        // Fare değdiğinde yıldızın kaçacağı yönü (açıyı) ve mesafeyi belirle
        const angle = Math.random() * 2 * Math.PI; // 360 derece rastgele yön
        const distance = 100 + Math.random() * 150; // 100px ile 250px arası fırlat
        
        // CSS değişkenlerine değerleri ata
        star.style.setProperty('--scatter-x', `${Math.cos(angle) * distance}px`);
        star.style.setProperty('--scatter-y', `${Math.sin(angle) * distance}px`);

        // Etkileşim: Fare üzerine geldiğinde
        star.addEventListener('mouseenter', () => {
          if (!star.classList.contains('scattered') && !isVerified) {
            star.classList.add('scattered');
            clearedStars++;
            checkVerification();
          }
        });

        // Mobilde dokunmatik ekran desteği için (isteğe bağlı)
        star.addEventListener('touchmove', (e) => {
           e.preventDefault(); // Sayfanın kaymasını engelle
           if (!star.classList.contains('scattered') && !isVerified) {
            star.classList.add('scattered');
            clearedStars++;
            checkVerification();
          }
        });

        starField.appendChild(star);
      }

      // Doğrulama mantığı
      function checkVerification() {
        // Yıldızların %85'i temizlendiyse başarılı say
        const threshold = Math.floor(totalStars * 0.85);
        
        if (clearedStars >= threshold && !isVerified) {
          isVerified = true;
          
          // Animasyonların bitmesi için kısa bir bekleme süresi
          setTimeout(() => {
            starField.style.display = 'none'; // Kalan yıldızları gizle
            successMessage.style.display = 'flex'; // Başarı mesajını göster
            captchaBox.style.cursor = 'default';
            captchaBox.style.borderColor = '#10b981'; // Çerçeveyi yeşil yap
            
            // Gerçek form butonunu aktif hale getir
            submitBtn.disabled = false;
            submitBtn.innerText = "Giriş Yapıldı ✓";
          }, 400);
        }
      }
    });
  </script>

</body>
</html>

Yıldız Dağıtma Bot Koruması

ARWENDA

Katılımcı Üye

Sosyal medya sayfalarımız