Componente CAPTCHA scheumorfico
Un componente CAPTCHA scheumorfico progettato per siti Web di eventi/conferenze, con una combinazione di colori triadica e supporto per la modalità scura. Imita gli elementi digitali del mondo reale con pulsanti interattivi.
Codice HTML
<div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-gray-100 to-gray-300 dark:from-gray-900 dark:to-gray-800 p-4 font-sans">
<div class="w-full max-w-md bg-gradient-to-br from-gray-300 to-gray-100 dark:from-gray-700 dark:to-gray-900 rounded-3xl shadow-xl border border-gray-400 dark:border-gray-600 p-8 transform transition-all duration-300 hover:shadow-2xl hover:scale-[1.01] overflow-hidden relative">
<!-- Top 'screen' bezel effect -->
<div class="absolute top-0 left-0 right-0 h-12 bg-gray-400 dark:bg-gray-800 rounded-t-3xl shadow-inner-top blur-sm"></div>
<div class="absolute bottom-0 left-0 right-0 h-12 bg-gray-400 dark:bg-gray-800 rounded-b-3xl shadow-inner-bottom blur-sm"></div>
<div class="relative z-10">
<h2 class="text-2xl font-bold text-center text-gray-800 dark:text-gray-100 mb-6 drop-shadow-md">Verify you are human!</h2>
<div class="bg-gradient-to-br from-gray-200 to-gray-50 dark:from-gray-800 dark:to-gray-700 rounded-2xl p-6 mb-8 border border-gray-300 dark:border-gray-600 shadow-inner flex flex-col items-center space-y-4">
<p class="text-lg text-gray-700 dark:text-gray-200 text-center mb-4">Please select all squares with:</p>
<div class="text-3xl font-extrabold text-blue-600 dark:text-teal-400 drop-shadow-lg">Traffic Lights</div>
<div class="grid grid-cols-3 gap-3 w-full max-w-xs mx-auto">
<!-- Captcha Grid Items -->
<button class="captcha-grid-item w-full aspect-square bg-gray-100 dark:bg-gray-900 rounded-lg flex items-center justify-center overflow-hidden border border-gray-300 dark:border-gray-700 shadow-md transform transition-all duration-200 hover:scale-[1.03] active:scale-[0.97] focus:outline-none focus:ring-4 focus:ring-blue-400 focus:ring-opacity-70 dark:focus:ring-teal-500 dark:focus:ring-opacity-70 group">
<img src="https://picsum.photos/100/100?random=1" alt="grid image" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200 blur-sm group-[.is-selected]:blur-none group-[.is-selected]:brightness-110">
<div class="absolute inset-0 bg-blue-500/0 dark:bg-teal-500/0 group-[.is-selected]:bg-blue-500/30 dark:group-[.is-selected]:bg-teal-500/30 rounded-lg transition-colors duration-200"></div>
<svg class="absolute w-8 h-8 text-white opacity-0 group-[.is-selected]:opacity-100 transform scale-0 group-[.is-selected]:scale-100 transition-all duration-200" 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="3" d="M5 13l4 4L19 7"></path></svg>
</button>
<button class="captcha-grid-item w-full aspect-square bg-gray-100 dark:bg-gray-900 rounded-lg flex items-center justify-center overflow-hidden border border-gray-300 dark:border-gray-700 shadow-md transform transition-all duration-200 hover:scale-[1.03] active:scale-[0.97] focus:outline-none focus:ring-4 focus:ring-blue-400 focus:ring-opacity-70 dark:focus:ring-teal-500 dark:focus:ring-opacity-70 group">
<img src="https://picsum.photos/100/100?random=2" alt="grid image" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200 blur-sm group-[.is-selected]:blur-none group-[.is-selected]:brightness-110">
<div class="absolute inset-0 bg-blue-500/0 dark:bg-teal-500/0 group-[.is-selected]:bg-blue-500/30 dark:group-[.is-selected]:bg-teal-500/30 rounded-lg transition-colors duration-200"></div>
<svg class="absolute w-8 h-8 text-white opacity-0 group-[.is-selected]:opacity-100 transform scale-0 group-[.is-selected]:scale-100 transition-all duration-200" 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="3" d="M5 13l4 4L19 7"></path></svg>
</button>
<button class="captcha-grid-item w-full aspect-square bg-gray-100 dark:bg-gray-900 rounded-lg flex items-center justify-center overflow-hidden border border-gray-300 dark:border-gray-700 shadow-md transform transition-all duration-200 hover:scale-[1.03] active:scale-[0.97] focus:outline-none focus:ring-4 focus:ring-blue-400 focus:ring-opacity-70 dark:focus:ring-teal-500 dark:focus:ring-opacity-70 group">
<img src="https://picsum.photos/100/100?random=3" alt="grid image" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200 blur-sm group-[.is-selected]:blur-none group-[.is-selected]:brightness-110">
<div class="absolute inset-0 bg-blue-500/0 dark:bg-teal-500/0 group-[.is-selected]:bg-blue-500/30 dark:group-[.is-selected]:bg-teal-500/30 rounded-lg transition-colors duration-200"></div>
<svg class="absolute w-8 h-8 text-white opacity-0 group-[.is-selected]:opacity-100 transform scale-0 group-[.is-selected]:scale-100 transition-all duration-200" 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="3" d="M5 13l4 4L19 7"></path></svg>
</button>
<button class="captcha-grid-item w-full aspect-square bg-gray-100 dark:bg-gray-900 rounded-lg flex items-center justify-center overflow-hidden border border-gray-300 dark:border-gray-700 shadow-md transform transition-all duration-200 hover:scale-[1.03] active:scale-[0.97] focus:outline-none focus:ring-4 focus:ring-blue-400 focus:ring-opacity-70 dark:focus:ring-teal-500 dark:focus:ring-opacity-70 group">
<img src="https://picsum.photos/100/100?random=4" alt="grid image" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200 blur-sm group-[.is-selected]:blur-none group-[.is-selected]:brightness-110">
<div class="absolute inset-0 bg-blue-500/0 dark:bg-teal-500/0 group-[.is-selected]:bg-blue-500/30 dark:group-[.is-selected]:bg-teal-500/30 rounded-lg transition-colors duration-200"></div>
<svg class="absolute w-8 h-8 text-white opacity-0 group-[.is-selected]:opacity-100 transform scale-0 group-[.is-selected]:scale-100 transition-all duration-200" 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="3" d="M5 13l4 4L19 7"></path></svg>
</button>
<button class="captcha-grid-item w-full aspect-square bg-gray-100 dark:bg-gray-900 rounded-lg flex items-center justify-center overflow-hidden border border-gray-300 dark:border-gray-700 shadow-md transform transition-all duration-200 hover:scale-[1.03] active:scale-[0.97] focus:outline-none focus:ring-4 focus:ring-blue-400 focus:ring-opacity-70 dark:focus:ring-teal-500 dark:focus:ring-opacity-70 group">
<img src="https://picsum.photos/100/100?random=5" alt="grid image" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200 blur-sm group-[.is-selected]:blur-none group-[.is-selected]:brightness-110">
<div class="absolute inset-0 bg-blue-500/0 dark:bg-teal-500/0 group-[.is-selected]:bg-blue-500/30 dark:group-[.is-selected]:bg-teal-500/30 rounded-lg transition-colors duration-200"></div>
<svg class="absolute w-8 h-8 text-white opacity-0 group-[.is-selected]:opacity-100 transform scale-0 group-[.is-selected]:scale-100 transition-all duration-200" 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="3" d="M5 13l4 4L19 7"></path></svg>
</button>
<button class="captcha-grid-item w-full aspect-square bg-gray-100 dark:bg-gray-900 rounded-lg flex items-center justify-center overflow-hidden border border-gray-300 dark:border-gray-700 shadow-md transform transition-all duration-200 hover:scale-[1.03] active:scale-[0.97] focus:outline-none focus:ring-4 focus:ring-blue-400 focus:ring-opacity-70 dark:focus:ring-teal-500 dark:focus:ring-opacity-70 group">
<img src="https://picsum.photos/100/100?random=6" alt="grid image" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200 blur-sm group-[.is-selected]:blur-none group-[.is-selected]:brightness-110">
<div class="absolute inset-0 bg-blue-500/0 dark:bg-teal-500/0 group-[.is-selected]:bg-blue-500/30 dark:group-[.is-selected]:bg-teal-500/30 rounded-lg transition-colors duration-200"></div>
<svg class="absolute w-8 h-8 text-white opacity-0 group-[.is-selected]:opacity-100 transform scale-0 group-[.is-selected]:scale-100 transition-all duration-200" 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="3" d="M5 13l4 4L19 7"></path></svg>
</button>
<button class="captcha-grid-item w-full aspect-square bg-gray-100 dark:bg-gray-900 rounded-lg flex items-center justify-center overflow-hidden border border-gray-300 dark:border-gray-700 shadow-md transform transition-all duration-200 hover:scale-[1.03] active:scale-[0.97] focus:outline-none focus:ring-4 focus:ring-blue-400 focus:ring-opacity-70 dark:focus:ring-teal-500 dark:focus:ring-opacity-70 group">
<img src="https://picsum.photos/100/100?random=7" alt="grid image" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200 blur-sm group-[.is-selected]:blur-none group-[.is-selected]:brightness-110">
<div class="absolute inset-0 bg-blue-500/0 dark:bg-teal-500/0 group-[.is-selected]:bg-blue-500/30 dark:group-[.is-selected]:bg-teal-500/30 rounded-lg transition-colors duration-200"></div>
<svg class="absolute w-8 h-8 text-white opacity-0 group-[.is-selected]:opacity-100 transform scale-0 group-[.is-selected]:scale-100 transition-all duration-200" 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="3" d="M5 13l4 4L19 7"></path></svg>
</button>
<button class="captcha-grid-item w-full aspect-square bg-gray-100 dark:bg-gray-900 rounded-lg flex items-center justify-center overflow-hidden border border-gray-300 dark:border-gray-700 shadow-md transform transition-all duration-200 hover:scale-[1.03] active:scale-[0.97] focus:outline-none focus:ring-4 focus:ring-blue-400 focus:ring-opacity-70 dark:focus:ring-teal-500 dark:focus:ring-opacity-70 group">
<img src="https://picsum.photos/100/100?random=8" alt="grid image" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200 blur-sm group-[.is-selected]:blur-none group-[.is-selected]:brightness-110">
<div class="absolute inset-0 bg-blue-500/0 dark:bg-teal-500/0 group-[.is-selected]:bg-blue-500/30 dark:group-[.is-selected]:bg-teal-500/30 rounded-lg transition-colors duration-200"></div>
<svg class="absolute w-8 h-8 text-white opacity-0 group-[.is-selected]:opacity-100 transform scale-0 group-[.is-selected]:scale-100 transition-all duration-200" 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="3" d="M5 13l4 4L19 7"></path></svg>
</button>
<button class="captcha-grid-item w-full aspect-square bg-gray-100 dark:bg-gray-900 rounded-lg flex items-center justify-center overflow-hidden border border-gray-300 dark:border-gray-700 shadow-md transform transition-all duration-200 hover:scale-[1.03] active:scale-[0.97] focus:outline-none focus:ring-4 focus:ring-blue-400 focus:ring-opacity-70 dark:focus:ring-teal-500 dark:focus:ring-opacity-70 group">
<img src="https://picsum.photos/100/100?random=9" alt="grid image" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200 blur-sm group-[.is-selected]:blur-none group-[.is-selected]:brightness-110">
<div class="absolute inset-0 bg-blue-500/0 dark:bg-teal-500/0 group-[.is-selected]:bg-blue-500/30 dark:group-[.is-selected]:bg-teal-500/30 rounded-lg transition-colors duration-200"></div>
<svg class="absolute w-8 h-8 text-white opacity-0 group-[.is-selected]:opacity-100 transform scale-0 group-[.is-selected]:scale-100 transition-all duration-200" 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="3" d="M5 13l4 4L19 7"></path></svg>
</button>
</div>
</div>
<div class="flex justify-between items-center">
<button class="px-6 py-3 bg-gradient-to-br from-yellow-300 to-amber-400 dark:from-yellow-600 dark:to-orange-700 text-gray-800 dark:text-gray-100 font-semibold rounded-xl shadow-lg border border-yellow-500 dark:border-orange-800 transform transition-all duration-200 hover:scale-105 hover:shadow-xl active:scale-95 focus:outline-none focus:ring-4 focus:ring-yellow-400 focus:ring-opacity-70 dark:focus:ring-orange-500 dark:focus:ring-opacity-70 relative overflow-hidden group">
<span class="relative z-10">Refresh</span>
<div class="absolute inset-0 bg-gradient-to-br from-yellow-400 to-amber-500 opacity-0 group-hover:opacity-100 transition-opacity duration-200 mix-blend-overlay"></div>
</button>
<button class="px-8 py-3 bg-gradient-to-br from-blue-500 to-indigo-600 dark:from-blue-700 dark:to-indigo-800 text-white font-semibold rounded-xl shadow-lg border border-blue-700 dark:border-indigo-900 transform transition-all duration-200 hover:scale-105 hover:shadow-xl active:scale-95 focus:outline-none focus:ring-4 focus:ring-blue-400 focus:ring-opacity-70 dark:focus:ring-indigo-500 dark:focus:ring-opacity-70 relative overflow-hidden group">
<span class="relative z-10">Verify</span>
<div class="absolute inset-0 bg-gradient-to-br from-blue-600 to-indigo-700 opacity-0 group-hover:opacity-100 transition-opacity duration-200 mix-blend-overlay"></div>
</button>
</div>
</div>
</div>
</div>
<!-- Just for demonstration: Simulate click effect with JS (not part of the deliverable) -->
<script>
document.querySelectorAll('.captcha-grid-item').forEach(button => {
button.addEventListener('click', () => {
button.classList.toggle('is-selected');
});
});
</script>
<style>
.shadow-inner {
box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05), inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}
.dark .shadow-inner {
box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.shadow-inner-top {
box-shadow: inset 0 8px 10px -6px rgba(0, 0, 0, 0.2), inset 0 1px 2px 0 rgba(0, 0, 0, 0.1);
}
.dark .shadow-inner-top {
box-shadow: inset 0 8px 10px -6px rgba(0, 0, 0, 0.4), inset 0 1px 2px 0 rgba(255, 255, 255, 0.05);
}
.shadow-inner-bottom {
box-shadow: inset 0 -8px 10px -6px rgba(0, 0, 0, 0.2), inset 0 -1px 2px 0 rgba(0, 0, 0, 0.1);
}
.dark .shadow-inner-bottom {
box-shadow: inset 0 -8px 10px -6px rgba(0, 0, 0, 0.4), inset 0 -1px 2px 0 rgba(255, 255, 255, 0.05);
}
.drop-shadow-md {
filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
}
.drop-shadow-lg {
filter: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
}
</style>Componenti correlati
Retro_Vintage_Captcha_Component
Un componente CAPTCHA a tema retrò/vintage per siti Web aziendali/aziendali, con una combinazione di colori analoga, un design reattivo e il supporto per la modalità oscura. Evoca l'estetica degli anni '80/'90.
Componente CAPTCHA brutalista
Un componente CAPTCHA progettato in stile brutalista, con contrasto elevato, layout insoliti ed effetti reattivi con supporto per temi scuri.
Componente CAPTCHA di neumorfismo
Un componente CAPTCHA reattivo e complesso progettato in uno stile neumorfico per siti di e-commerce, con supporto per temi scuri, utilizzando Tailwind CSS.