Glassmorphism_CAPTCHA_Component_Forest_Green
Eine reaktionsschnelle CAPTCHA-Komponente im Glasmorphismus-Stil mit einem waldgrünen Farbschema, geeignet für Fertigungs-/Industrieanwendungen. Enthält Unterstützung für den Dunkelmodus.
HTML-Code
<div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-green-100 via-green-50 to-emerald-100 dark:from-gray-900 dark:via-gray-800 dark:to-teal-900 p-4 font-sans">
<div class="relative w-full max-w-md mx-auto bg-white/20 dark:bg-gray-800/30 backdrop-blur-lg rounded-2xl shadow-xl border border-white/30 dark:border-gray-700/50 overflow-hidden p-6 sm:p-8">
<div class="absolute inset-0 bg-gradient-to-br from-emerald-400/20 to-green-600/20 dark:from-gray-700/20 dark:to-gray-900/20 rounded-2xl animate-pulse-slow"></div>
<div class="relative z-10 space-y-6">
<h2 class="text-2xl sm:text-3xl font-extrabold text-green-900 dark:text-green-200 text-center flex items-center justify-center gap-2">
<svg class="w-8 h-8 text-emerald-700 dark:text-emerald-400" 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="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.01 12.01 0 002.944 12c0 2.879 1.136 5.513 2.944 7.465S9.123 21.052 12 21.052c2.879 0 5.513-1.136 7.465-2.944S21.052 14.879 21.052 12A12.01 12.01 0 0018.06 7.004z"></path></svg>
Security Check
</h2>
<p class="text-lg text-green-800 dark:text-green-300 text-center">
Please verify you are not a robot.
</p>
<!-- Example: Image CAPTCHA -->
<div class="bg-white/40 dark:bg-gray-700/40 border border-t-white border-l-white dark:border-t-gray-600 dark:border-l-gray-600 border-b-white/50 border-r-white/50 dark:border-b-gray-600/50 dark:border-r-gray-600/50 rounded-lg p-4 shadow-inner space-y-4">
<p class="text-green-900 dark:text-green-100 text-center font-medium">Select all squares with a <span class="font-bold text-emerald-700 dark:text-emerald-400">forklift</span>:</p>
<div class="grid grid-cols-3 gap-2">
<button class="captcha-grid-item group" aria-label="Image 1">
<img src="https://picsum.photos/id/1084/200/200" alt="Placeholder image for CAPTCHA grid" class="w-full h-full object-cover rounded-md transition-transform duration-200 group-hover:scale-105">
<div class="captcha-overlay"></div>
</button>
<button class="captcha-grid-item group selected" aria-label="Image 2">
<img src="https://picsum.photos/id/400/200/200" alt="Placeholder image for CAPTCHA grid" class="w-full h-full object-cover rounded-md transition-transform duration-200 group-hover:scale-105">
<div class="captcha-overlay">
<svg class="w-6 h-6 text-white" 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>
</div>
</button>
<button class="captcha-grid-item group" aria-label="Image 3">
<img src="https://picsum.photos/id/35/200/200" alt="Placeholder image for CAPTCHA grid" class="w-full h-full object-cover rounded-md transition-transform duration-200 group-hover:scale-105">
<div class="captcha-overlay"></div>
</button>
<button class="captcha-grid-item group selected" aria-label="Image 4">
<img src="https://picsum.photos/id/29/200/200" alt="Placeholder image for CAPTCHA grid" class="w-full h-full object-cover rounded-md transition-transform duration-200 group-hover:scale-105">
<div class="captcha-overlay">
<svg class="w-6 h-6 text-white" 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>
</div>
</button>
<button class="captcha-grid-item group" aria-label="Image 5">
<img src="https://picsum.photos/id/1060/200/200" alt="Placeholder image for CAPTCHA grid" class="w-full h-full object-cover rounded-md transition-transform duration-200 group-hover:scale-105">
<div class="captcha-overlay"></div>
</button>
<button class="captcha-grid-item group" aria-label="Image 6">
<img src="https://picsum.photos/id/426/200/200" alt="Placeholder image for CAPTCHA grid" class="w-full h-full object-cover rounded-md transition-transform duration-200 group-hover:scale-105">
<div class="captcha-overlay"></div>
</button>
<button class="captcha-grid-item group" aria-label="Image 7">
<img src="https://picsum.photos/id/194/200/200" alt="Placeholder image for CAPTCHA grid" class="w-full h-full object-cover rounded-md transition-transform duration-200 group-hover:scale-105">
<div class="captcha-overlay"></div>
</button>
<button class="captcha-grid-item group selected" aria-label="Image 8">
<img src="https://picsum.photos/id/145/200/200" alt="Placeholder image for CAPTCHA grid" class="w-full h-full object-cover rounded-md transition-transform duration-200 group-hover:scale-105">
<div class="captcha-overlay">
<svg class="w-6 h-6 text-white" 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>
</div>
</button>
<button class="captcha-grid-item group" aria-label="Image 9">
<img src="https://picsum.photos/id/175/200/200" alt="Placeholder image for CAPTCHA grid" class="w-full h-full object-cover rounded-md transition-transform duration-200 group-hover:scale-105">
<div class="captcha-overlay"></div>
</button>
</div>
</div>
<div class="flex items-center justify-between gap-4">
<button class="inline-flex items-center justify-center p-2 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500 dark:focus:ring-emerald-400 bg-white/50 dark:bg-gray-700/50 backdrop-blur-sm text-green-800 dark:text-green-300 hover:text-emerald-700 dark:hover:text-emerald-200 transition-colors border border-white/60 dark:border-gray-600/60 shadow-md" aria-label="Refresh CAPTCHA">
<svg class="w-6 h-6" 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 12c0 2.127.818 4.044 2.146 5.5M16 4v5h.582m-15.356 2A8.001 8.001 0 0120 12c0-2.127-.818-4.044-2.146-5.5"></path></svg>
</button>
<button class="flex-1 py-3 px-6 bg-emerald-600 hover:bg-emerald-700 dark:bg-emerald-700 dark:hover:bg-emerald-800 text-white font-bold rounded-lg shadow-lg transform transition duration-300 hover:-translate-y-1 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500 dark:focus:ring-emerald-400 focus:ring-offset-white/20 dark:focus:ring-offset-gray-800/20">
Verify
</button>
</div>
<p class="text-sm text-center text-green-700 dark:text-green-400 opacity-80">
Protected by Industrial CAPTCHA™
</p>
</div>
</div>
</div>
<style>
/* Animation for the background blob */
@keyframes pulse-slow {
0%, 100% { transform: scale(1); opacity: 0.2; }
50% { transform: scale(1.05); opacity: 0.3; }
}
.animate-pulse-slow {
animation: pulse-slow 8s infinite ease-in-out;
}
/* CAPTCHA grid item styles */
.captcha-grid-item {
position: relative;
width: 100%;
padding-bottom: 100%; /* For square aspect ratio */
background-color: rgba(255, 255, 255, 0.6);
border-radius: 0.5rem;
overflow: hidden;
cursor: pointer;
display: block;
border: 2px solid transparent;
transition: border-color 0.2s, transform 0.2s, background-color 0.2s;
}
.captcha-grid-item:hover {
border-color: rgba(5, 150, 105, 0.6); /* emerald-600 with transparency */
transform: scale(1.02);
}
.captcha-grid-item img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.captcha-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(5, 150, 105, 0.4); /* emerald-600 with transparency */
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.2s ease-in-out;
}
.captcha-grid-item.selected .captcha-overlay {
opacity: 1;
background-color: rgba(5, 150, 105, 0.7); /* More opaque when selected */
}
.captcha-grid-item.selected {
border-color: #059669; /* Solid emerald-600 when selected */
}
/* Dark mode adjustments for border colors */
.dark .captcha-grid-item {
background-color: rgba(55, 65, 81, 0.6); /* gray-700/60 */
}
.dark .captcha-grid-item:hover {
border-color: rgba(16, 185, 129, 0.6); /* emerald-500 with transparency */
}
.dark .captcha-grid-item.selected {
border-color: #10B981; /* Solid emerald-500 dark mode */
}
.dark .captcha-overlay {
background-color: rgba(16, 185, 129, 0.4); /* emerald-500 with transparency */
}
.dark .captcha-grid-item.selected .captcha-overlay {
background-color: rgba(16, 185, 129, 0.7); /* More opaque when selected */
}
</style>Verwandte Komponenten
CAPTCHA-Komponente für den Dunkelmodus
Eine CAPTCHA-Komponente, die für die Benutzeroberfläche im Dunkelmodus mit reaktionsschnellen Effekten und Unterstützung für dunkle Designs entwickelt wurde.
Luxury_Premium_CAPTCHA_Weather_Component
Eine komplexe, luxuriöse CAPTCHA-Komponente für Wetter-/Klimaanwendungen mit kühlen neutralen Farben, anspruchsvoller Typografie und responsivem Design mit Unterstützung des Dunkelmodus. Es enthält Elemente wie eine visuelle Herausforderung, eine Anzeige des aktuellen Wetters und einen Abschnitt "Klimadaten".
CAPTCHA-Komponente
Eine klare, minimalistische CAPTCHA-Komponente mit einem schweizerischen/internationalen Typografie-Designstil mit Ozean-/Blautönen. Es wurde für Event- und Konferenz-Websites entwickelt, ist reaktionsschnell und bietet Unterstützung für den Dunkelmodus.