Monospace_Developer_CAPTCHA_Component
Un composant CAPTCHA complexe, inspiré du code, avec une police monospace, une esthétique terminale et une palette de couleurs complémentaires, conçu pour un portfolio afin de présenter le travail. Entièrement réactif avec prise en charge du mode sombre.
HTML Code
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 font-mono p-4">
<div class="w-full max-w-md bg-gray-200 dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden border-2 border-green-500 dark:border-purple-500 transform transition-all duration-300 hover:scale-105">
<div class="bg-green-600 dark:bg-purple-600 p-3 flex items-center justify-between">
<div class="flex space-x-2">
<span class="p-1.5 rounded-full bg-red-500"></span>
<span class="p-1.5 rounded-full bg-yellow-500"></span>
<span class="p-1.5 rounded-full bg-green-500"></span>
</div>
<p class="text-white opacity-90 text-sm">$ interactive_captcha.sh</p>
<button aria-label="Minimize window" class="text-white text-lg leading-none align-middle transform rotate-45 hover:text-gray-300 transition-colors duration-200">+</button>
</div>
<div class="p-6 space-y-6 text-gray-800 dark:text-gray-200">
<p class="text-lg font-bold text-green-700 dark:text-purple-400">// SYSTEM_INIT: Verifying Human Identity...</p>
<div class="bg-gray-800 dark:bg-gray-700 p-4 rounded-md border border-gray-700 dark:border-gray-600 shadow-inner flex flex-col space-y-4 md:flex-row md:space-x-4 md:space-y-0 items-center justify-between">
<div class="flex-shrink-0 w-32 h-24 bg-gray-900 dark:bg-gray-800 rounded-sm overflow-hidden border border-gray-600 dark:border-gray-500 flex items-center justify-center">
<img src="https://picsum.photos/seed/captcha1/128/96" alt="CAPTCHA image" class="w-full h-full object-cover grayscale opacity-80">
</div>
<div class="flex-grow text-sm text-gray-200 dark:text-gray-300">
<p class="mb-2">> Type the characters you see in the image:</p>
<div class="flex space-x-2">
<span class="px-2 py-1 bg-green-500 text-gray-900 rounded inline-block transform -rotate-6 text-lg font-extrabold shadow-md">A</span>
<span class="px-2 py-1 bg-yellow-500 text-gray-900 rounded inline-block transform rotate-3 text-lg font-extrabold shadow-md">b</span>
<span class="px-2 py-1 bg-blue-500 text-gray-900 rounded inline-block transform -rotate-2 text-lg font-extrabold shadow-md">C</span>
<span class="px-2 py-1 bg-red-500 text-gray-900 rounded inline-block transform rotate-5 text-lg font-extrabold shadow-md">1</span>
<span class="px-2 py-1 bg-purple-500 text-gray-900 rounded inline-block transform -rotate-4 text-lg font-extrabold shadow-md">2</span>
</div>
</div>
</div>
<div class="space-y-4">
<label for="captcha-input" class="block text-sm font-semibold text-green-600 dark:text-purple-400">$USER_INPUT:</label>
<input type="text" id="captcha-input" placeholder="> your_response_here" class="w-full p-3 rounded-md bg-gray-900 dark:bg-gray-700 text-green-300 dark:text-purple-300 border border-green-700 dark:border-purple-600 focus:outline-none focus:ring-2 focus:ring-green-500 dark:focus:ring-purple-500 font-mono text-base shadow-sm leading-relaxed caret-green-500 dark:caret-purple-500">
<div class="flex flex-col md:flex-row md:space-x-4 space-y-4 md:space-y-0">
<button class="flex-1 py-3 px-6 bg-green-600 hover:bg-green-700 dark:bg-purple-600 dark:hover:bg-purple-700 text-white rounded-md font-bold text-lg transition-colors duration-200 shadow-lg transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-green-500 dark:focus:ring-purple-500">
<svg class="inline-block w-5 h-5 mr-2 -mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
VERIFY <span class="hidden sm:inline">[ACCEPT]</span>
</button>
<button class="flex-1 py-3 px-6 bg-gray-500 hover:bg-gray-600 dark:bg-gray-700 dark:hover:bg-gray-600 text-white rounded-md font-bold text-lg transition-colors duration-200 shadow-lg transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-500">
<svg class="inline-block w-5 h-5 mr-2 -mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004 13v-1m6.7-6.7L7 7m0 0l-3.72 3.72M7 7V4"></path></svg>
RELOAD <span class="hidden sm:inline">[TRY_AGAIN]</span>
</button>
</div>
</div>
<p class="text-sm text-gray-500 dark:text-gray-400">// STATUS: Awaiting input from user...</p>
</div>
<div class="bg-gray-800 dark:bg-gray-700 p-3 pt-2 text-xs text-gray-400 dark:text-gray-500 flex justify-between items-center">
<p>@ 2023 INTERACTIVE_DEV.SYS</p>
<a href="#" class="text-green-500 dark:text-purple-400 hover:underline">help.md</a>
</div>
</div>
</div>Composants associés
Composant CAPTCHA
Un composant CAPTCHA épuré et minimaliste avec un style de typographie suisse/international, avec des tons océan/bleu. Conçu pour les sites Web d’événements et de conférences, il est réactif et inclut la prise en charge du mode sombre.
CAPTCHA minimaliste
Un composant CAPTCHA réactif avec prise en charge du mode sombre, avec un design minimaliste avec des couleurs pastel. Comprend une simple case à cocher et un espace réservé pour le texte.
ArtDecoCaptchaComponent
Un composant CAPTCHA simple et réactif avec une esthétique Art Déco, utilisant des couleurs d’automne adaptées aux sites Web d’entreprise, avec prise en charge du mode sombre.