Componente CAPTCHA
Un componente CAPTCHA complesso e ispirato al codice con una combinazione di colori caramelle/dolci, progettato per le interfacce dei social media. Presenta un layout reattivo, supporto per la modalità oscura ed elementi interattivi.
Codice HTML
<div class="flex items-center justify-center min-h-screen p-4 bg-gradient-to-br from-purple-100 to-pink-100 dark:from-purple-950 dark:to-pink-950 font-mono">
<div class="w-full max-w-md p-6 rounded-lg shadow-xl bg-white dark:bg-gray-800 border-2 border-pink-300 dark:border-purple-600 transform transition duration-300 hover:scale-[1.02] overflow-hidden">
<!-- Header -->
<div class="flex items-center justify-between mb-6 pb-4 border-b-2 border-pink-200 dark:border-purple-700">
<h2 class="text-2xl font-bold text-pink-600 dark:text-purple-400"><span class="text-4xl pr-2">🔐</span>> _verify_identity</h2>
<span class="text-sm text-pink-400 dark:text-purple-500">v1.0.1_beta</span>
</div>
<!-- Instruction Panel -->
<div class="mb-6 p-4 rounded bg-pink-50 dark:bg-gray-700 border border-pink-200 dark:border-purple-600 text-pink-800 dark:text-gray-300 text-sm leading-relaxed overflow-x-auto">
<pre class="whitespace-pre-wrap"><code>> user_action: click_matching_pair()
> goal: prove_humanity()
> status: pending...
_Choose the two images that form a logical pair.</code></pre>
</div>
<!-- Image Grid -->
<div class="grid grid-cols-2 sm:grid-cols-3 gap-3 mb-6">
<!-- Image 1 -->
<label class="block cursor-pointer">
<input type="checkbox" class="hidden peer">
<div class="relative rounded-lg overflow-hidden border-2 border-pink-200 dark:border-purple-700 transition duration-200 peer-checked:border-pink-500 peer-checked:ring-2 peer-checked:ring-pink-300 dark:peer-checked:border-purple-400 dark:peer-checked:ring-purple-600 transform hover:scale-[1.03]">
<img src="https://picsum.photos/id/60/200/200" alt="Image 1" class="w-full h-24 sm:h-28 object-cover">
<span class="absolute top-1 right-1 text-xs px-2 py-1 rounded-full bg-pink-100 dark:bg-gray-700 text-pink-600 dark:text-purple-400">[IMG_001]</span>
<div class="absolute inset-0 bg-pink-500 dark:bg-purple-500 opacity-0 peer-checked:opacity-30 transition-opacity flex items-center justify-center">
<svg class="h-8 w-8 text-white dark:text-gray-200" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
</div>
</div>
</label>
<!-- Image 2 -->
<label class="block cursor-pointer">
<input type="checkbox" class="hidden peer">
<div class="relative rounded-lg overflow-hidden border-2 border-pink-200 dark:border-purple-700 transition duration-200 peer-checked:border-pink-500 peer-checked:ring-2 peer-checked:ring-pink-300 dark:peer-checked:border-purple-400 dark:peer-checked:ring-purple-600 transform hover:scale-[1.03]">
<img src="https://picsum.photos/id/61/200/200" alt="Image 2" class="w-full h-24 sm:h-28 object-cover">
<span class="absolute top-1 right-1 text-xs px-2 py-1 rounded-full bg-pink-100 dark:bg-gray-700 text-pink-600 dark:text-purple-400">[IMG_002]</span>
<div class="absolute inset-0 bg-pink-500 dark:bg-purple-500 opacity-0 peer-checked:opacity-30 transition-opacity flex items-center justify-center">
<svg class="h-8 w-8 text-white dark:text-gray-200" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
</div>
</div>
</label>
<!-- Image 3 -->
<label class="block cursor-pointer">
<input type="checkbox" class="hidden peer">
<div class="relative rounded-lg overflow-hidden border-2 border-pink-200 dark:border-purple-700 transition duration-200 peer-checked:border-pink-500 peer-checked:ring-2 peer-checked:ring-pink-300 dark:peer-checked:border-purple-400 dark:peer-checked:ring-purple-600 transform hover:scale-[1.03]">
<img src="https://picsum.photos/id/62/200/200" alt="Image 3" class="w-full h-24 sm:h-28 object-cover">
<span class="absolute top-1 right-1 text-xs px-2 py-1 rounded-full bg-pink-100 dark:bg-gray-700 text-pink-600 dark:text-purple-400">[IMG_003]</span>
<div class="absolute inset-0 bg-pink-500 dark:bg-purple-500 opacity-0 peer-checked:opacity-30 transition-opacity flex items-center justify-center">
<svg class="h-8 w-8 text-white dark:text-gray-200" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
</div>
</div>
</label>
<!-- Image 4 -->
<label class="block cursor-pointer">
<input type="checkbox" class="hidden peer">
<div class="relative rounded-lg overflow-hidden border-2 border-pink-200 dark:border-purple-700 transition duration-200 peer-checked:border-pink-500 peer-checked:ring-2 peer-checked:ring-pink-300 dark:peer-checked:border-purple-400 dark:peer-checked:ring-purple-600 transform hover:scale-[1.03]">
<img src="https://picsum.photos/id/63/200/200" alt="Image 4" class="w-full h-24 sm:h-28 object-cover">
<span class="absolute top-1 right-1 text-xs px-2 py-1 rounded-full bg-pink-100 dark:bg-gray-700 text-pink-600 dark:text-purple-400">[IMG_004]</span>
<div class="absolute inset-0 bg-pink-500 dark:bg-purple-500 opacity-0 peer-checked:opacity-30 transition-opacity flex items-center justify-center">
<svg class="h-8 w-8 text-white dark:text-gray-200" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
</div>
</div>
</label>
<!-- Image 5 -->
<label class="block cursor-pointer">
<input type="checkbox" class="hidden peer">
<div class="relative rounded-lg overflow-hidden border-2 border-pink-200 dark:border-purple-700 transition duration-200 peer-checked:border-pink-500 peer-checked:ring-2 peer-checked:ring-pink-300 dark:peer-checked:border-purple-400 dark:peer-checked:ring-purple-600 transform hover:scale-[1.03]">
<img src="https://picsum.photos/id/64/200/200" alt="Image 5" class="w-full h-24 sm:h-28 object-cover">
<span class="absolute top-1 right-1 text-xs px-2 py-1 rounded-full bg-pink-100 dark:bg-gray-700 text-pink-600 dark:text-purple-400">[IMG_005]</span>
<div class="absolute inset-0 bg-pink-500 dark:bg-purple-500 opacity-0 peer-checked:opacity-30 transition-opacity flex items-center justify-center">
<svg class="h-8 w-8 text-white dark:text-gray-200" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
</div>
</div>
</label>
<!-- Image 6 -->
<label class="block cursor-pointer">
<input type="checkbox" class="hidden peer">
<div class="relative rounded-lg overflow-hidden border-2 border-pink-200 dark:border-purple-700 transition duration-200 peer-checked:border-pink-500 peer-checked:ring-2 peer-checked:ring-pink-300 dark:peer-checked:border-purple-400 dark:peer-checked:ring-purple-600 transform hover:scale-[1.03]">
<img src="https://picsum.photos/id/65/200/200" alt="Image 6" class="w-full h-24 sm:h-28 object-cover">
<span class="absolute top-1 right-1 text-xs px-2 py-1 rounded-full bg-pink-100 dark:bg-gray-700 text-pink-600 dark:text-purple-400">[IMG_006]</span>
<div class="absolute inset-0 bg-pink-500 dark:bg-purple-500 opacity-0 peer-checked:opacity-30 transition-opacity flex items-center justify-center">
<svg class="h-8 w-8 text-white dark:text-gray-200" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
</div>
</div>
</label>
</div>
<!-- Action Buttons -->
<div class="flex justify-between items-center gap-4">
<button class="flex-1 py-3 px-4 rounded-lg bg-pink-500 dark:bg-purple-600 text-white dark:text-gray-100 font-bold text-lg hover:bg-pink-600 dark:hover:bg-purple-700 transition-all duration-200 transform hover:scale-105 shadow-md flex items-center justify-center">
<svg class="w-5 h-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
_confirm(_selection)
</button>
<button title="Refresh images" class="p-3 rounded-lg bg-mint-50 dark:bg-gray-700 border border-mint-200 dark:border-purple-600 text-mint-600 dark:text-purple-400 hover:bg-mint-100 dark:hover:bg-gray-600 transition-colors duration-200 transform hover:scale-110 shadow-sm">
<svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004 12v.621m15.821-6.196L15.424 4.1a1.999 1.999 0 00-2.616.488L7 12m10 8l-4.168-4.168A1.999 1.999 0 0013.916 16H8a1.999 1.999 0 00-1.999 1.999v1.001m0-8h.01M20 12l-1 1-1-1"></path></svg>
</button>
</div>
<!-- Footer Info -->
<div class="mt-6 pt-4 border-t-2 border-pink-200 dark:border-purple-700 text-center text-xs text-pink-400 dark:text-gray-500">
<p>_powered_by: secure_identity_protocol_v2.1</p>
<div class="flex items-center justify-center mt-2">
<img src="https://randomuser.me/api/portraits/lego/1.jpg" alt="Developer Avatar" class="h-6 w-6 rounded-full mr-2 border border-pink-300 dark:border-purple-600">
<span class="text-pink-500 dark:text-purple-400">// CAPTCHA_DevTeam Inc.</span>
</div>
</div>
</div>
</div>
Componenti correlati
Luxury_Premium_CAPTCHA_Weather_Component
Un componente CAPTCHA complesso e a tema di lusso per applicazioni meteo/climatiche, caratterizzato da colori neutri freddi, tipografia sofisticata e design reattivo con supporto per la modalità scura. Include elementi come una sfida visiva, una visualizzazione "Meteo attuale" e una sezione "Dati climatici".
Componente CAPTCHA - Acquerello/Artistico
Un componente CAPTCHA semplice e reattivo con un design acquerello/artistico, combinazione di colori ad alto contrasto e supporto per la modalità scura, adatto per applicazioni manifatturiere/industriali.
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.