Cyberpunk_Weather_CAPTCHA_Component
A complex, cyberpunk-themed CAPTCHA component for weather/climate data, featuring futuristic neon ocean/blue tones, dark backgrounds, and multiple interactive elements. Fully responsive with dark mode support.
HTML Code
<div class="min-h-screen bg-gray-950 text-blue-300 flex items-center justify-center p-4 dark:bg-gray-950 transition-colors duration-500 font-mono">
<div class="relative w-full max-w-xl p-8 rounded-xl shadow-2xl border border-blue-800/50 bg-gradient-to-br from-gray-900 to-gray-950 overflow-hidden
dark:border-blue-700/50 dark:from-gray-900 dark:to-gray-950 transition-colors duration-500">
<!-- Background Grid/Pattern -->
<div class="absolute inset-0 z-0 opacity-10">
<div class="absolute inset-0 bg-[size:40px_40px] [mask-image:radial-gradient(ellipse_at_center,white,transparent)]"
style="background-image: linear-gradient(to right, #0A0A0A 1px, transparent 1px), linear-gradient(to bottom, #0A0A0A 1px, transparent 1px);"></div>
</div>
<!-- Neon Border Effect -->
<div class="absolute inset-0 border-4 rounded-xl border-transparent pointer-events-none z-10 animate-pulse-border">
<div class="absolute -inset-0.5 rounded-xl blur opacity-75 animate-neon-glow bg-gradient-to-r from-blue-600 via-cyan-500 to-blue-600"></div>
</div>
<div class="relative z-20 space-y-8">
<h2 class="text-4xl font-bold text-center uppercase tracking-wider text-blue-400 drop-shadow-lg [text-shadow:0_0_8px_rgb(59_130_246_/_0.7)]">
<span class="block">Security Protocol // Engage</span>
<span class="block text-xl text-blue-500/70">"Climate Data Access"</span>
</h2>
<div class="bg-gray-800/60 p-6 rounded-lg border border-blue-700/40 shadow-inner space-y-6">
<div class="flex items-center justify-between text-lg text-blue-300">
<span class="flex items-center space-x-2">
<svg class="w-6 h-6 text-cyan-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="M8 11V7a4 4 0 118 0v4m-5 3h2m-6 4h8a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2z"></path></svg>
Access Key Authorization
</span>
<svg class="w-6 h-6 text-blue-500 animate-spin-slow" 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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37zm3.504 5.959a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
</div>
<p class="text-blue-200/90 text-sm md:text-base">To proceed, please identify the weather patterns that match the 'Glacial Anomaly Index' below:</p>
<!-- CAPTCHA Grid -->
<div class="grid grid-cols-3 gap-3 md:gap-4 lg:grid-cols-4">
<div class="aspect-w-1 aspect-h-1 relative bg-gray-700/50 rounded-lg overflow-hidden border border-blue-700/30 group cursor-pointer hover:border-blue-500 transition-all duration-300">
<img src="https://picsum.photos/id/1041/300/200" alt="Weather Image" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" />
<div class="absolute inset-0 flex items-center justify-center bg-blue-900/60 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<svg class="w-8 h-8 text-cyan-300" 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>
</div>
<div class="aspect-w-1 aspect-h-1 relative bg-gray-700/50 rounded-lg overflow-hidden border border-blue-700/30 group cursor-pointer hover:border-blue-500 transition-all duration-300">
<img src="https://picsum.photos/id/1043/300/200" alt="Weather Image" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" />
<div class="absolute inset-0 flex items-center justify-center bg-blue-900/60 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<svg class="w-8 h-8 text-cyan-300" 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>
</div>
<div class="aspect-w-1 aspect-h-1 relative bg-gray-700/50 rounded-lg overflow-hidden border border-blue-700/30 group cursor-pointer hover:border-blue-500 transition-all duration-300">
<img src="https://picsum.photos/id/1049/300/200" alt="Weather Image" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" />
<div class="absolute inset-0 flex items-center justify-center bg-blue-900/60 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<svg class="w-8 h-8 text-cyan-300" 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>
</div>
<div class="aspect-w-1 aspect-h-1 relative bg-gray-700/50 rounded-lg overflow-hidden border border-blue-700/30 group cursor-pointer hover:border-blue-500 transition-all duration-300">
<img src="https://picsum.photos/id/1050/300/200" alt="Weather Image" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" />
<div class="absolute inset-0 flex items-center justify-center bg-blue-900/60 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<svg class="w-8 h-8 text-cyan-300" 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>
</div>
<div class="aspect-w-1 aspect-h-1 relative bg-gray-700/50 rounded-lg overflow-hidden border border-blue-700/30 group cursor-pointer hover:border-blue-500 transition-all duration-300">
<img src="https://picsum.photos/id/1052/300/200" alt="Weather Image" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" />
<div class="absolute inset-0 flex items-center justify-center bg-blue-900/60 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<svg class="w-8 h-8 text-cyan-300" 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>
</div>
<div class="aspect-w-1 aspect-h-1 relative bg-gray-700/50 rounded-lg overflow-hidden border border-blue-700/30 group cursor-pointer hover:border-blue-500 transition-all duration-300">
<img src="https://picsum.photos/id/1053/300/200" alt="Weather Image" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" />
<div class="absolute inset-0 flex items-center justify-center bg-blue-900/60 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<svg class="w-8 h-8 text-cyan-300" 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>
</div>
<div class="aspect-w-1 aspect-h-1 relative bg-gray-700/50 rounded-lg overflow-hidden border border-blue-700/30 group cursor-pointer hover:border-blue-500 transition-all duration-300">
<img src="https://picsum.photos/id/1055/300/200" alt="Weather Image" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" />
<div class="absolute inset-0 flex items-center justify-center bg-blue-900/60 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<svg class="w-8 h-8 text-cyan-300" 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>
</div>
<div class="aspect-w-1 aspect-h-1 relative bg-gray-700/50 rounded-lg overflow-hidden border border-blue-700/30 group cursor-pointer hover:border-blue-500 transition-all duration-300">
<img src="https://picsum.photos/id/1063/300/200" alt="Weather Image" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" />
<div class="absolute inset-0 flex items-center justify-center bg-blue-900/60 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<svg class="w-8 h-8 text-cyan-300" 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>
</div>
</div>
<!-- Reload and Audio Buttons -->
<div class="flex justify-around pt-2 text-blue-400">
<button class="flex items-center space-x-2 text-sm md:text-base hover:text-cyan-400 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75 rounded-md p-2 -m-2">
<svg class="w-5 h-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 12v1a8 8 0 0015.356 2m-6.356-2H20v-5"></path></svg>
<span>Reload Directive</span>
</button>
<button class="flex items-center space-x-2 text-sm md:text-base hover:text-cyan-400 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75 rounded-md p-2 -m-2">
<svg class="w-5 h-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="M9 19V6l12-3v13M9 19a2 2 0 002 2h2a2 2 0 002-2M9 19V6a3 3 0 003-3h.01M6 16V9a3 3 0 003-3m-6 0h.01M6 16a3 3 0 003 3"></path></svg>
<span>Audio Scan</span>
</button>
</div>
</div>
<!-- Verify Button -->
<button class="w-full flex items-center justify-center py-4 px-6 rounded-lg font-bold text-xl uppercase tracking-wider
bg-gradient-to-r from-blue-600 to-cyan-500 text-white shadow-lg
hover:from-blue-700 hover:to-cyan-600 transition-all duration-300
focus:outline-none focus:ring-4 focus:ring-blue-500 focus:ring-opacity-75
scale-100 hover:scale-[1.01] active:scale-[0.99] transform">
<svg class="w-7 h-7 mr-3 animate-pulse" 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-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
Verify Bio-Signature
</button>
<p class="text-center text-blue-400/60 text-xs mt-6">
Warning: Unauthorized bypass attempts will trigger Protocol 7. <br class="sm:hidden"/>System Log: <span class="text-yellow-400">//IP [REDACTED]</span>
</p>
</div>
</div>
</div>
<style>
/* Base for defining custom animations in Tailwind */
@keyframes pulse-border {
0%, 100% { border-color: rgba(59, 130, 246, 0.5); }
50% { border-color: rgba(6, 182, 212, 0.7); }
}
@keyframes neon-glow {
0%, 100% { filter: blur(4px) brightness(1.2); opacity: 0.75; }
50% { filter: blur(8px) brightness(1.5); opacity: 0.9; }
}
@keyframes spin-slow {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.animate-pulse-border {
animation: pulse-border 4s infinite ease-in-out;
}
.animate-neon-glow {
animation: neon-glow 3s infinite alternate ease-in-out;
}
.animate-spin-slow {
animation: spin-slow 10s linear infinite;
}
/* Aspect Ratio Utility Classes (modern alternative to aspect-w/h) */
/* For Tailwind JIT/v3: Enable 'aspectRatio' in tailwind.config.js */
/* If not using JIT or v3, include these manually: */
.aspect-w-1 {
aspect-ratio: 1 / 1;
}
</style>Related Components
CAPTCHA Component - Organic/Nature-inspired (Autumn Colors)
A complex, responsive CAPTCHA component designed with an organic, nature-inspired style using autumn colors, suitable for news/journalism websites. Includes full dark mode support.
CAPTCHA Component
A Material Design inspired CAPTCHA component with a vibrant color scheme, designed for social media applications. Fully responsive with dark mode support.
Skeuomorphic CAPTCHA Component
A skeuomorphic CAPTCHA component designed for event/conference websites, featuring a triadic color scheme and dark mode support. It mimics real-world digital elements with interactive buttons.