CAPTCHA 组件

<div class="flex items-center justify-center min-h-screen p-4 bg-gradient-to-br from-blue-50 to-blue-100 dark:from-gray-900 dark:to-gray-800 font-sans">
  <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-[1.01] dark:border dark:border-gray-700">
    <div class="p-6 sm:p-8 space-y-6">
      <h2 class="text-2xl sm:text-3xl font-bold tracking-tight text-blue-800 dark:text-blue-300 text-center">
        Verify Humanity
      </h2>
      <p class="text-sm text-gray-600 dark:text-gray-400 text-center leading-relaxed">
        To proceed, please complete the security check below.
      </p>

      <div class="space-y-4">
        <!-- CAPTCHA Main Area -->
        <div class="p-4 bg-blue-50 dark:bg-gray-700 rounded-md border border-blue-200 dark:border-gray-600 shadow-inner flex flex-col items-center justify-center min-h-[140px] relative">
          <!-- Loading/Placeholder state -->
          <div class="absolute inset-0 flex items-center justify-center bg-blue-50 dark:bg-gray-700 rounded-md z-0 opacity-100 transition-opacity duration-300" id="captcha_loading_state">
            <div class="w-8 h-8 border-4 border-blue-400 border-t-transparent rounded-full animate-spin"></div>
            <span class="ml-3 text-blue-600 dark:text-blue-400 text-sm">Loading CAPTCHA...</span>
          </div>

          <!-- Simulated CAPTCHA content (initially hidden) -->
          <div class="flex flex-col items-center justify-center space-y-4 opacity-0 transition-opacity duration-300" id="captcha_content_state">
            <img src="https://picsum.photos/seed/captcha/300/100" alt="Image CAPTCHA" class="w-full max-w-[300px] h-auto rounded-sm border border-gray-300 dark:border-gray-500 shadow-sm">
            <p class="text-sm text-gray-700 dark:text-gray-300 font-medium">What do you see in the image?</p>
            <input type="text" placeholder="Enter text here" class="w-full p-2.5 rounded-md border border-gray-300 dark:border-gray-600 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:text-white text-base transition-all duration-200">
          </div>
        </div>

        <!-- Refresh/Audio Buttons -->
        <div class="flex justify-between items-center gap-2">
          <button class="flex-1 py-2 px-4 rounded-md border border-blue-300 dark:border-blue-600 text-blue-700 dark:text-blue-300 hover:bg-blue-100 dark:hover:bg-gray-700 transition-colors duration-200 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
            <svg class="inline-block w-4 h-4 mr-1 -mt-0.5" 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 12c0 2.21.823 4.239 2.207 5.768m0-11.536c1.384-1.529 3.314-2.207 5.346-2.207 4.493 0 8.002 3.614 8.002 8s-3.509 8-8.002 8c-2.21 0-4.239-.823-5.768-2.207m0-11.536H16h-4" /></svg>
            Refresh
          </button>
          <button class="flex-1 py-2 px-4 rounded-md border border-blue-300 dark:border-blue-600 text-blue-700 dark:text-blue-300 hover:bg-blue-100 dark:hover:bg-gray-700 transition-colors duration-200 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
            <svg class="inline-block w-4 h-4 mr-1 -mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.899a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.647 11 4.103 11 5v14c0 .897-.077 1.353-.293 1.586l-4.707-4.707z" /></svg>
            Audio
          </button>
        </div>
      </div>

      <!-- Submit Button -->
      <button class="w-full flex justify-center items-center py-3 px-6 border border-transparent rounded-md shadow-sm text-base font-semibold text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:bg-blue-700 dark:hover:bg-blue-800 dark:focus:ring-offset-gray-800 transition-colors duration-200">
        Verify
        <svg class="w-5 h-5 ml-2 -mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>
      </button>

      <p class="text-xs text-gray-500 dark:text-gray-400 text-center leading-snug pt-2">
        This site is protected by reCAPTCHA and the Google
        <a href="#" class="text-blue-600 hover:underline dark:text-blue-400">Privacy Policy</a> and
        <a href="#" class="text-blue-600 hover:underline dark:text-blue-400">Terms of Service</a> apply.
      </p>
    </div>
  </div>
</div>

<script>
  // Simulate CAPTCHA loading
  document.addEventListener('DOMContentLoaded', () => {
    const loadingState = document.getElementById('captcha_loading_state');
    const contentState = document.getElementById('captcha_content_state');

    setTimeout(() => {
      loadingState.classList.add('opacity-0');
      loadingState.classList.remove('z-0');
      loadingState.classList.add('z-10');
      contentState.classList.remove('opacity-0');
      contentState.classList.add('opacity-100');
    }, 1500);
  });
</script>