Composants CAPTCHA RetroCaptchaComponent

RetroCaptchaComponent

Un composant CAPTCHA simple à thème rétro avec une palette de couleurs vert forêt, conçu pour les sites Web à but non lucratif/caritatifs. Dispose d’une réactivité et d’une prise en charge du mode sombre.

Aperçu

HTML Code

<div class="flex items-center justify-center min-h-screen p-4 bg-lime-100 dark:bg-gray-900 font-mono">
  <div class="w-full max-w-sm p-6 bg-lime-50 dark:bg-gray-800 rounded-lg shadow-xl border-4 border-lime-600 dark:border-emerald-600 transform -rotate-2 hover:rotate-0 transition-transform duration-300 ease-in-out">
    <h2 class="text-2xl font-bold text-lime-900 dark:text-lime-200 mb-4 text-center tracking-wider uppercase drop-shadow-md">Are you human?</h2>
    <p class="text-sm text-lime-800 dark:text-lime-300 mb-6 text-center italic">Help us fight spam and protect our community.</p>

    <div class="flex flex-col items-center space-y-4">
      <div class="w-full bg-lime-200 dark:bg-gray-700 p-3 rounded-md border-2 border-lime-600 dark:border-emerald-600 relative overflow-hidden">
        <img src="https://picsum.photos/300/100?random=1" alt="CAPTCHA image" class="w-full h-24 object-cover rounded filter grayscale sepia brightness-90 contrast-120 blur-sm">
        <div class="absolute inset-0 bg-lime-300 dark:bg-gray-600 mix-blend-multiply opacity-75"></div>
        <p class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-4xl text-lime-900 dark:text-emerald-900 font-extrabold tracking-widest uppercase rotate-3 select-none" style="text-shadow: 2px 2px 
#a3e635, 4px 4px #4D7C0F;">rUn34r</p>
        <button class="absolute top-2 right-2 text-lime-800 dark:text-lime-200 hover:text-lime-900 dark:hover:text-lime-100 transition-colors duration-200" aria-label="Refresh CAPTCHA">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004 12c0 2.197-.736 4.22-1.99 5.864M4 20v-5h.582m15.356-2A8.001 8.001 0 0020 12c0-2.197.736-4.22 1.99-5.864" />
          </svg>
        </button>
      </div>

      <input type="text" placeholder="Enter the text above" class="w-full px-4 py-2 text-lime-900 dark:text-lime-100 bg-lime-100 dark:bg-gray-700 border-2 border-lime-600 dark:border-emerald-600 rounded-md focus:outline-none focus:ring-2 focus:ring-lime-700 dark:focus:ring-emerald-500 placeholder-lime-700 dark:placeholder-lime-300 text-center tracking-wide font-bold uppercase" aria-label="CAPTCHA input field">

      <button class="w-full px-6 py-3 bg-lime-700 dark:bg-emerald-700 text-lime-50 dark:text-emerald-50 font-bold uppercase rounded-md shadow-md hover:bg-lime-800 dark:hover:bg-emerald-800 focus:outline-none focus:ring-2 focus:ring-lime-700 dark:focus:ring-emerald-500 transform hover:scale-105 transition-all duration-300 ease-in-out text-lg tracking-wider">
        Verify
      </button>
      <button class="text-sm text-lime-800 dark:text-lime-300 hover:text-lime-900 dark:hover:text-lime-200 transition-colors duration-200" aria-label="Report an issue with CAPTCHA">
        Can't read the image?
      </button>
    </div>
  </div>
</div>

Composants associés

Composant Captcha Glassmorphism

Un composant CAPTCHA simple et réactif de style glassmorphism avec une palette de couleurs en niveaux de gris et une prise en charge du mode sombre, adapté aux blogs ou aux sites de contenu.

Ouvrir

Composant CAPTCHA brutaliste

Un composant CAPTCHA brut et gras conçu avec une palette de couleurs en niveaux de gris, adapté à une interface de tableau de bord, y compris des fonctionnalités interactives pour la vérification de l’utilisateur.

Ouvrir

Composant CAPTCHA

Un composant CAPTCHA de style Material Design pour améliorer la sécurité d’un site Web de portfolio, avec un thème sombre et un design réactif avec Tailwind CSS.

Ouvrir