Composants CAPTCHA Cyberpunk_Weather_CAPTCHA_Component
Cyberpunk_Weather_CAPTCHA_Component

Un composant CAPTCHA complexe, sur le thème du cyberpunk, pour les données météorologiques/climatiques, avec des tons océan/bleus néons futuristes, des arrière-plans sombres et de multiples éléments interactifs. Entièrement réactif avec prise en charge du mode sombre.
Aperçu

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>
Composants associés

Composant CAPTCHA

Un composant CAPTCHA réactif inspiré de la conception matérielle avec prise en charge du mode sombre, à l’aide de Tailwind CSS.
Ouvrir
Composant CAPTCHA

Un composant CAPTCHA simple avec une conception en niveaux de gris en mode sombre, optimisé pour la lisibilité sur les blogs et les sites de contenu.
Ouvrir
Composant CAPTCHA

Un composant CAPTCHA minimaliste/plat pour la présentation de portefeuille, réactif avec prise en charge du mode sombre.
Ouvrir