Componenti CAPTCHA RetroCaptchaComponent

RetroCaptchaComponent

Un semplice componente CAPTCHA a tema retrò con una tavolozza di colori verde bosco, progettato per siti Web senza scopo di lucro/beneficenza. Offre reattività e supporto per la modalità scura.

Anteprima

Codice HTML

<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>

Componenti correlati

Componente CAPTCHA - Organico/Ispirato alla natura (colori autunnali)

Un componente CAPTCHA complesso e reattivo progettato con uno stile organico ispirato alla natura utilizzando colori autunnali, adatto per siti Web di notizie/giornalismo. Include il supporto completo per la modalità scura.

Aperto

Glassmorphism_CAPTCHA_Component_Forest_Green

Un componente CAPTCHA reattivo in stile glassmorphism con una combinazione di colori verde foresta, adatto per applicazioni manifatturiere/industriali. Include il supporto per la modalità oscura.

Aperto

Monospace_Developer_CAPTCHA_Component

Un componente CAPTCHA complesso e ispirato al codice con un carattere monospace, un'estetica terminale e una combinazione di colori complementari, progettato per un portfolio per mostrare il lavoro. Completamente reattivo con supporto per la modalità oscura.

Aperto