검색 구성 요소

카테고리

캡차

인간 사용자를 결정하기 위한 챌린지-응답 테스트

Luxury_Premium_CAPTCHA_Weather_Component

날씨/기후 애플리케이션을 위한 복잡한 럭셔리 테마의 CAPTCHA 구성 요소로, 멋진 뉴트럴 색상, 세련된 타이포그래피, 다크 모드를 지원하는 반응형 디자인을 특징으로 합니다. 여기에는 시각적 챌린지, '현재 날씨' 디스플레이, '기후 데이터' 섹션과 같은 요소가 포함됩니다.

열다 미리 보기

                <div class="font-sans antialiased bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-200 min-h-screen p-4 sm:p-8 flex items-center justify-center">
  <div class="max-w-4xl w-full bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-[1.01] border border-gray-200 dark:border-gray-700">
    <div class="p-6 sm:p-10">
      <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-6 sm:mb-8 pb-4 border-b border-gray-100 dark:border-gray-700">
        <h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-gray-900 dark:text-gray-100 leading-tight tracking-tight mb-2 sm:mb-0">
          ClimateGuard Verification
        </h1>
        <div class="flex items-center space-x-3 text-gray-500 dark:text-gray-400">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9.663 17h4.673M12 10.333v4.334m-6.75 0h13.5c.621 0 1.125-.504 1.125-1.125V10.5m1.5-4.5h-16.5a1.125 1.125 0 00-1.125 1.125v12.75c0 .621.504 1.125 1.125 1.125h16.5c.621 0 1.125-.504 1.125-1.125V7.875c0-.621-.504-1.125-1.125-1.125z" />
          </svg>
          <span class="text-sm sm:text-base font-medium">Secure Access to Climate Data</span>
        </div>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-2 gap-8 lg:gap-12">
        <div class="flex flex-col">
          <h2 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-gray-100 mb-5">Verify You Are Human</h2>
          <p class="text-gray-600 dark:text-gray-300 text-lg mb-6 leading-relaxed">
            To proceed and access comprehensive climate data, please complete the security challenge below.
            This helps us ensure data integrity and protect against automated access.
          </p>

          <div class="bg-gray-50 dark:bg-gray-700 rounded-2xl p-4 sm:p-6 shadow-inner border border-gray-100 dark:border-gray-600 mb-6">
            <p class="text-lg font-semibold text-gray-700 dark:text-gray-200 mb-4">Click on all images containing <span class="text-blue-600 dark:text-blue-400">'Stratocumulus Clouds'</span>:</p>
            <div class="grid grid-cols-3 gap-2 sm:gap-3">
              <button aria-label="Image 1" class="relative w-full aspect-square rounded-lg overflow-hidden focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-600 group">
                <img src="https://picsum.photos/id/1041/300/200" alt="Image showing clouds" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110">
                <div class="absolute inset-0 bg-blue-600/30 dark:bg-blue-800/30 opacity-0 group-focus:opacity-100 group-hover:opacity-100 flex items-center justify-center transition-opacity duration-300">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-white" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                  </svg>
                </div>
              </button>
              <button aria-label="Image 2" class="relative w-full aspect-square rounded-lg overflow-hidden focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-600 group">
                <img src="https://picsum.photos/id/1018/300/200" alt="Image showing clouds" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110">
                <div class="absolute inset-0 bg-blue-600/30 dark:bg-blue-800/30 opacity-0 group-focus:opacity-100 group-hover:opacity-100 flex items-center justify-center transition-opacity duration-300">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-white" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                  </svg>
                </div>
              </button>
              <button aria-label="Image 3" class="relative w-full aspect-square rounded-lg overflow-hidden focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-600 group">
                <img src="https://picsum.photos/id/23/300/200" alt="Image showing clouds" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110">
                <div class="absolute inset-0 bg-blue-600/30 dark:bg-blue-800/30 opacity-0 group-focus:opacity-100 group-hover:opacity-100 flex items-center justify-center transition-opacity duration-300">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-white" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                  </svg>
                </div>
              </button>
              <button aria-label="Image 4" class="relative w-full aspect-square rounded-lg overflow-hidden focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-600 group">
                <img src="https://picsum.photos/id/1053/300/200" alt="Image showing clouds" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110">
                <div class="absolute inset-0 bg-blue-600/30 dark:bg-blue-800/30 opacity-0 group-focus:opacity-100 group-hover:opacity-100 flex items-center justify-center transition-opacity duration-300">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-white" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                  </svg>
                </div>
              </button>
              <button aria-label="Image 5" class="relative w-full aspect-square rounded-lg overflow-hidden focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-600 group">
                <img src="https://picsum.photos/id/10/300/200" alt="Image showing clouds" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110">
                <div class="absolute inset-0 bg-blue-600/30 dark:bg-blue-800/30 opacity-0 group-focus:opacity-100 group-hover:opacity-100 flex items-center justify-center transition-opacity duration-300">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-white" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                  </svg>
                </div>
              </button>
              <button aria-label="Image 6" class="relative w-full aspect-square rounded-lg overflow-hidden focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-600 group">
                <img src="https://picsum.photos/id/1004/300/200" alt="Image showing clouds" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110">
                <div class="absolute inset-0 bg-blue-600/30 dark:bg-blue-800/30 opacity-0 group-focus:opacity-100 group-hover:opacity-100 flex items-center justify-center transition-opacity duration-300">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-white" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                  </svg>
                </div>
              </button>
            </div>
            <div class="flex justify-between items-center mt-6">
              <button type="button" class="flex items-center text-sm font-medium text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition-colors duration-200">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004 16.087v-2.383m1.342 8.868L9.932 20m5.39-16.712L15.932 4.07m-5.463 8.356L2 10.978L6 6L10 10.978L6 14L2 10.978" />
                </svg>
                New Challenge
              </button>
              <button type="button" class="flex items-center text-sm font-medium text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition-colors duration-200">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M19.898 8.016l-3.69-3.69A2.25 2.25 0 0014.545 3H9.455c-.876 0-1.724.35-2.355.981L3.414 8.016m16.484 0l-3.69 3.69-3.69 3.69-3.69-3.69-3.69-3.69m7.38 0L9.454 3c-.876-.35-1.724-.981-2.355-2.355L3.414.016M12 21a9 9 0 100-18 9 9 0 000 18z" />
                </svg>
                Audio Challenge
              </button>
            </div>
          </div>

          <button type="submit" class="w-full py-4 text-lg font-bold bg-blue-600 hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-600 text-white rounded-xl shadow-lg transition-all duration-300 transform active:scale-95 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-600">
            Validate Access
            <span class="ml-2 inline-block transition-transform group-hover:translate-x-1">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0zM4 10a1 1 0 011-1h9a1 1 0 110 2H5a1 1 0 01-1-1z" clip-rule="evenodd" />
              </svg>
            </span>
          </button>

        </div>

        <div class="space-y-8">
          <div>
            <h2 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-gray-100 mb-5">Current Weather Overview</h2>
            <div class="bg-gradient-to-br from-blue-500 to-blue-700 dark:from-blue-700 dark:to-blue-900 rounded-2xl p-6 sm:p-8 text-white shadow-xl transform transition-all duration-300 hover:scale-[1.02]">
              <div class="flex justify-between items-center mb-4">
                <div>
                  <p class="text-5xl font-extrabold">24°C</p>
                  <p class="text-xl font-medium">London</p>
                </div>
                <img src="https://www.flaticon.com/svg/static/icons/svg/861/861056.svg" alt="Sunny icon" class="w-20 h-20 filter drop-shadow-lg">
              </div>
              <div class="grid grid-cols-2 gap-4 text-sm">
                <div class="flex items-center">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
                    <path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                  </svg>
                  <span>Wind: 15 km/h</span>
                </div>
                <div class="flex items-center">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v1m0 16v1m9-9h1M3 12H2m8.006-7.82l-.956-.956M15.82 4.18l.956-.956m-7.82 15.64l-.956.956m7.82-15.64l.956.956m-7.82 15.64l.956.956m-7.82 15.64l-.956.956M4.18 15.82l-.956.956m-1.956-6.75l.956-.956m15.64 7.82l.956.956M4.18 4.18l-.956-.956" />
                  </svg>
                  <span>Humidity: 65%</span>
                </div>
                <div class="flex items-center">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M17.657 16.7L13.257 21a2 2 0 01-3.514 0L6.343 16.7A8 8 0 1117.657 16.7z" />
                  </svg>
                  <span>UV Index: 7 (High)</span>
                </div>
                <div class="flex items-center">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M9.663 17h4.673M12 10.333v4.334m-6.75 0h13.5c.621 0 1.125-.504 1.125-1.125V10.5m1.5-4.5h-16.5a1.125 1.125 0 00-1.125 1.125v12.75c0 .621.504 1.125 1.125 1.125h16.5c.621 0 1.125-.504 1.125-1.125V7.875c0-.621-.504-1.125-1.125-1.125z" />
                  </svg>
                  <span>Precipitation: 0%</span>
                </div>
              </div>
            </div>
          </div>

          <div>
            <h2 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-gray-100 mb-5">Global Climate Data Insights</h2>
            <div class="bg-gray-50 dark:bg-gray-700 rounded-2xl p-6 sm:p-8 shadow-inner border border-gray-100 dark:border-gray-600">
              <div class="flex items-start mb-4">
                <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Climate scientist profile" class="w-16 h-16 rounded-full mr-4 shadow-lg border-2 border-blue-500 dark:border-blue-400">
                <p class="text-gray-700 dark:text-gray-200 text-lg">
                  "Recent data indicates a significant increase in global average temperatures. Urgent action is needed."
                  <br>
                  <span class="font-medium text-blue-600 dark:text-blue-400 text-sm">- Dr. Elara Vance, Climatologist</span>
                </p>
              </div>
              <ul class="list-none space-y-3 text-gray-600 dark:text-gray-300">
                <li class="flex items-center text-base">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M3 6a3 3 0 013-3h10a2 2 0 012 2v8a2 2 0 01-2 2H6a3 3 0 01-3-3V6zm4 0a1 1 0 011-1h2a1 1 0 110 2H8a1 1 0 01-1-1zm1 3a1 1 0 100 2h2a1 1 0 100-2H8z" clip-rule="evenodd" />
                  </svg>
                  Average Global Temperature: <span class="font-semibold ml-1 text-gray-800 dark:text-gray-100">+1.2°C since pre-industrial levels</span>
                </li>
                <li class="flex items-center text-base">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
                    <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
                  </svg>
                  CO2 Concentration: <span class="font-semibold ml-1 text-gray-800 dark:text-gray-100">419 ppm (Parts Per Million)</span>
                </li>
                <li class="flex items-center text-base">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M6 6V5a3 3 0 013-3h2a3 3 0 013 3v1h2a2 2 0 012 2v3.586l-2.293 2.293A1 1 0 0015 13.586V15h3a2 2 0 012 2v2a2 2 0 01-2 2H2a2 2 0 01-2-2v-2a2 2 0 012-2h3.586l2.293-2.293A1 1 0 0010.586 1L1 18.293V18h3.586l2.293-2.293A1 1 0 006 14.586V1h3a2 2 0 012 2v1H6zm4 0V5a1 1 0 00-1-1H9a1 1 0 00-1 1v1h2z" clip-rule="evenodd" />
                  </svg>
                  Sea Level Rise: <span class="font-semibold ml-1 text-gray-800 dark:text-gray-100">~3.6 mm/year</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>

      <div class="mt-8 pt-6 border-t border-gray-100 dark:border-gray-700 text-center text-gray-500 dark:text-gray-400 text-sm">
        <p>&copy; 2023 ClimateGuard. All rights reserved. Your data security is our priority.</p>
      </div>
    </div>
  </div>
</div>

Skeuomorphic CAPTCHA 구성 요소

이벤트/컨퍼런스 웹 사이트를 위해 설계된 스큐어모픽 CAPTCHA 구성 요소로, 트라이어딕 색 구성표와 다크 모드 지원을 특징으로 합니다. 대화형 버튼으로 실제 디지털 요소를 모방합니다.

열다 미리 보기

                <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>

ArtDecoCaptcha컴포넌트

아르데코 디자인 미학을 갖춘 간단하고 반응이 빠른 CAPTCHA 구성 요소로, 비즈니스/기업 웹사이트에 적합한 가을 색상을 사용하며 다크 모드를 지원합니다.

열다 미리 보기

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-orange-100 via-amber-200 to-yellow-200 dark:from-stone-900 dark:via-stone-800 dark:to-stone-700 p-4 font-serif">
  <div class="w-full max-w-sm bg-gradient-to-br from-amber-50 dark:from-stone-800 to-orange-100 dark:to-stone-900 rounded-lg shadow-xl overflow-hidden
    border-4 border-amber-800 dark:border-stone-600
    transform skew-y-1 hover:skew-y-0 transition-transform duration-500 ease-in-out
    relative overflow-hidden group">

    <!-- Art Deco Top Border Effect -->
    <div class="absolute top-0 left-0 w-full h-8 bg-amber-800 dark:bg-stone-600 opacity-75 group-hover:opacity-100 transition-opacity duration-300
      flex justify-around items-center -skew-x-12 transform origin-top-left">
      <div class="w-3 h-3 bg-white opacity-25 rounded-full"></div>
      <div class="w-3 h-3 bg-white opacity-25 rounded-full"></div>
      <div class="w-3 h-3 bg-white opacity-25 rounded-full"></div>
    </div>

    <!-- Art Deco Background Pattern Simulation -->
    <div class="absolute inset-0 z-0 opacity-10 dark:opacity-5 pointer-events-none">
      <svg class="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
        <defs>
          <pattern id="artDecoPattern" x="0" y="0" width="10" height="10" patternUnits="userSpaceOnUse">
            <rect x="0" y="0" width="5" height="5" fill="rgba(0,0,0,0.1)"/>
            <rect x="5" y="5" width="5" height="5" fill="rgba(0,0,0,0.1)"/>
          </pattern>
        </defs>
        <rect x="0" y="0" width="100" height="100" fill="url(#artDecoPattern)"/>
      </svg>
    </div>

    <div class="art-deco-frame p-8 relative z-10">
      <h2 class="text-2xl md:text-3xl font-bold text-amber-900 dark:text-stone-100 mb-6 text-center tracking-wider uppercase drop-shadow-md group-hover:scale-105 transition-transform duration-300">
        Verification Required
      </h2>

      <div class="mb-6 text-center">
        <p class="text-sm text-lime-950 dark:text-stone-300 mb-4">Please verify you are not a robot.</p>
        <div class="w-48 h-20 bg-gradient-to-r from-amber-200 to-orange-300 dark:from-stone-700 dark:to-stone-600 rounded drop-shadow-lg mx-auto flex items-center justify-center
          border-2 border-amber-700 dark:border-stone-500
          transform rotate-1 skew-x-2 group-hover:rotate-0 group-hover:skew-x-0 transition-transform duration-500 ease-in-out animate-pulse-slight">
          <span class="text-3xl font-extrabold text-amber-800 dark:text-orange-300 tracking-widest select-none leading-none">A2k9X</span>
        </div>
        <button class="mt-4 text-xs text-amber-700 dark:text-stone-400 hover:text-amber-900 dark:hover:text-stone-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-50">
          <i class="fas fa-sync-alt mr-1"></i> Regenerate Code
        </button>
      </div>

      <div class="mb-6 relative">
        <label for="captchaInput" class="sr-only">Enter CAPTCHA Code</label>
        <input type="text" id="captchaInput" placeholder="Enter code" class="block w-full px-4 py-3 rounded-md text-base bg-amber-50 dark:bg-stone-700 text-lime-950 dark:text-stone-200
          border-2 border-amber-600 dark:border-stone-500 placeholder-amber-400 dark:placeholder-stone-400
          focus:outline-none focus:ring-4 focus:ring-amber-500 dark:focus:ring-stone-400 focus:ring-opacity-50 dark:focus:ring-opacity-50
          transition-all duration-300 ease-in-out shadow-inner
          transform group-hover:-translate-y-0.5 group-hover:scale-[1.01]">
        <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none ">
          <svg class="h-5 w-5 text-amber-500 dark:text-stone-400" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M5.5 9V7a3.5 3.5 0 017 0v2h.5a2 2 0 012 2v5a2 2 0 01-2 2h-9a2 2 0 01-2-2v-5a2 2 0 012-2h.5zM8 7a1.5 1.5 0 013 0v2H8V7zm0 6a.5.5 0 01.5-.5h3a.5.5 0 010 1h-3a.5.5 0 01-.5-.5z" clip-rule="evenodd"/>
          </svg>
        </div>
      </div>

      <button type="submit" class="w-full py-3 rounded-md text-lg font-semibold
        bg-amber-800 hover:bg-amber-900 dark:bg-stone-600 dark:hover:bg-stone-700
        text-white dark:text-stone-100 shadow-xl
        transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105 active:scale-95
        focus:outline-none focus:ring-4 focus:ring-amber-500 dark:focus:ring-stone-400 focus:ring-opacity-60 dark:focus:ring-opacity-60
        border-b-4 border-r-4 border-amber-900 dark:border-stone-800 drop-shadow-lg">
        Submit
      </button>
    </div>

    <!-- Art Deco Bottom Border Effect -->
    <div class="absolute bottom-0 left-0 w-full h-8 bg-amber-800 dark:bg-stone-600 opacity-75 group-hover:opacity-100 transition-opacity duration-300
      flex justify-around items-center -skew-x-12 transform origin-bottom-right">
      <div class="w-3 h-3 bg-white opacity-25 rounded-full"></div>
      <div class="w-3 h-3 bg-white opacity-25 rounded-full"></div>
      <div class="w-3 h-3 bg-white opacity-25 rounded-full"></div>
    </div>

  </div>
</div>

Retro_Candy_CAPTCHA_Component

캔디/스위트 색상 구성표가 있는 복잡한 레트로/빈티지 스타일의 CAPTCHA 구성 요소로, 예약 및 예약 시스템을 위해 설계되었습니다. 다양한 대화형 요소, 완벽하게 반응하는 레이아웃 및 다크 모드 지원을 제공합니다.

열다 미리 보기

                <div class="p-4 sm:p-6 md:p-8 min-h-screen bg-gradient-to-br from-purple-200 to-pink-200 dark:from-purple-900 via-pink-900 to-indigo-900 flex items-center justify-center font-mono">
  <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-3xl shadow-xl border-4 border-pink-400 dark:border-pink-600 overflow-hidden transform transition-all duration-300 hover:scale-[1.01] hover:shadow-2xl">
    <div class="h-24 bg-gradient-to-r from-pink-500 to-purple-600 dark:from-pink-700 dark:to-purple-800 flex items-center justify-center relative">
      <h2 class="text-3xl sm:text-4xl font-extrabold text-white uppercase tracking-wider drop-shadow-lg text-center relative z-10">
        <span class="block transform -rotate-6 scale-90">Verifying Identity</span>
      </h2>
      <div class="absolute inset-0 flex items-center justify-center transform -rotate-12 bounce-slow">
        <div class="w-16 h-16 bg-pink-300 dark:bg-pink-500 rounded-full opacity-30"></div>
        <div class="w-12 h-12 bg-purple-300 dark:bg-purple-500 rounded-full opacity-30 ml-8"></div>
      </div>
    </div>

    <div class="p-6 sm:p-8">
      <p class="text-center text-lg sm:text-xl text-gray-700 dark:text-gray-300 mb-6 font-semibold leading-relaxed">
        To book your sweet slot, please complete the CAPTCHA.
      </p>

      <div class="space-y-6">
        <!-- Image Selection CAPTCHA -->
        <div class="bg-pink-100 dark:bg-pink-900 p-4 rounded-xl border border-pink-300 dark:border-pink-700 shadow-inner animation-pulse-light">
          <h3 class="text-lg sm:text-xl font-bold text-pink-700 dark:text-pink-300 mb-4">Select all squares with <span class="text-purple-600 dark:text-purple-400">Cupcakes</span></h3>
          <div class="grid grid-cols-3 gap-2">
            <div class="relative group aspect-square rounded-lg overflow-hidden border-2 border-pink-200 dark:border-pink-800 focus-within:ring-4 focus-within:ring-pink-400 cursor-pointer transition-all duration-200 ease-in-out hover:scale-105 hover:z-10" tabindex="0">
              <img src="https://picsum.photos/id/1053/300/300" alt="Image 1" class="w-full h-full object-cover group-hover:brightness-110">
              <div class="absolute inset-0 bg-pink-500/50 dark:bg-pink-700/50 flex items-center justify-center opacity-0 group-focus:opacity-100 group-hover:opacity-100 transition-opacity duration-200 text-white text-3xl"><i class="fas fa-check-circle"></i></div>
            </div>
            <div class="relative group aspect-square rounded-lg overflow-hidden border-2 border-pink-200 dark:border-pink-800 focus-within:ring-4 focus-within:ring-pink-400 cursor-pointer transition-all duration-200 ease-in-out hover:scale-105 hover:z-10" tabindex="0">
              <img src="https://picsum.photos/id/108/300/300" alt="Image 2" class="w-full h-full object-cover group-hover:brightness-110">
              <div class="absolute inset-0 bg-pink-500/50 dark:bg-pink-700/50 flex items-center justify-center opacity-0 group-focus:opacity-100 group-hover:opacity-100 transition-opacity duration-200 text-white text-3xl"><i class="fas fa-check-circle"></i></div>
            </div>
            <div class="relative group aspect-square rounded-lg overflow-hidden border-2 border-pink-200 dark:border-pink-800 focus-within:ring-4 focus-within:ring-pink-400 cursor-pointer transition-all duration-200 ease-in-out hover:scale-105 hover:z-10" tabindex="0">
              <img src="https://picsum.photos/id/1041/300/300" alt="Image 3" class="w-full h-full object-cover group-hover:brightness-110">
              <div class="absolute inset-0 bg-pink-500/50 dark:bg-pink-700/50 flex items-center justify-center opacity-0 group-focus:opacity-100 group-hover:opacity-100 transition-opacity duration-200 text-white text-3xl"><i class="fas fa-check-circle"></i></div>
            </div>
            <div class="relative group aspect-square rounded-lg overflow-hidden border-2 border-pink-200 dark:border-pink-800 focus-within:ring-4 focus-within:ring-pink-400 cursor-pointer transition-all duration-200 ease-in-out hover:scale-105 hover:z-10" tabindex="0">
              <img src="https://picsum.photos/id/1025/300/300" alt="Image 4" class="w-full h-full object-cover group-hover:brightness-110">
              <div class="absolute inset-0 bg-pink-500/50 dark:bg-pink-700/50 flex items-center justify-center opacity-0 group-focus:opacity-100 group-hover:opacity-100 transition-opacity duration-200 text-white text-3xl"><i class="fas fa-check-circle"></i></div>
            </div>
            <div class="relative group aspect-square rounded-lg overflow-hidden border-2 border-pink-200 dark:border-pink-800 focus-within:ring-4 focus-within:ring-pink-400 cursor-pointer transition-all duration-200 ease-in-out hover:scale-105 hover:z-10" tabindex="0">
              <img src="https://picsum.photos/id/103/300/300" alt="Image 5" class="w-full h-full object-cover group-hover:brightness-110">
              <div class="absolute inset-0 bg-pink-500/50 dark:bg-pink-700/50 flex items-center justify-center opacity-0 group-focus:opacity-100 group-hover:opacity-100 transition-opacity duration-200 text-white text-3xl"><i class="fas fa-check-circle"></i></div>
            </div>
            <div class="relative group aspect-square rounded-lg overflow-hidden border-2 border-pink-200 dark:border-pink-800 focus-within:ring-4 focus-within:ring-pink-400 cursor-pointer transition-all duration-200 ease-in-out hover:scale-105 hover:z-10" tabindex="0">
              <img src="https://picsum.photos/id/1069/300/300" alt="Image 6" class="w-full h-full object-cover group-hover:brightness-110">
              <div class="absolute inset-0 bg-pink-500/50 dark:bg-pink-700/50 flex items-center justify-center opacity-0 group-focus:opacity-100 group-hover:opacity-100 transition-opacity duration-200 text-white text-3xl"><i class="fas fa-check-circle"></i></div>
            </div>
          </div>
        </div>

        <!-- Audio CAPTCHA (simplified for HTML only) -->
        <div class="bg-purple-100 dark:bg-purple-900 p-4 rounded-xl border border-purple-300 dark:border-purple-700 shadow-inner">
          <h3 class="text-lg sm:text-xl font-bold text-purple-700 dark:text-purple-300 mb-4">Listen and type the numbers you hear:</h3>
          <div class="flex flex-col sm:flex-row items-center gap-4">
            <button class="flex-shrink-0 bg-purple-500 hover:bg-purple-600 dark:bg-purple-700 dark:hover:bg-purple-800 text-white font-bold py-3 px-6 rounded-full shadow-lg transform transition-transform duration-200 hover:scale-105 focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-500">
              <i class="fas fa-play mr-2"></i> Play Audio
            </button>
            <input type="text" placeholder="Enter numbers here" class="flex-grow w-full sm:w-auto p-3 rounded-full border-2 border-purple-300 dark:border-purple-600 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-500 shadow-sm">
          </div>
        </div>

        <!-- Drag & Drop / Slider CAPTCHA (simplified for HTML only) -->
        <div class="bg-mint-100 dark:bg-green-900 p-4 rounded-xl border border-mint-300 dark:border-green-700 shadow-inner">
          <h3 class="text-lg sm:text-xl font-bold text-mint-700 dark:text-green-300 mb-4">Drag the <span class="text-purple-600 dark:text-purple-400">Candy</span> into the frame:</h3>
          <div class="flex justify-center items-center gap-4">
            <div class="w-24 h-24 sm:w-32 sm:h-32 bg-white dark:bg-gray-700 rounded-lg border-4 border-dashed border-mint-400 dark:border-green-600 flex items-center justify-center text-gray-400 dark:text-gray-500 text-sm overflow-hidden relative">
              <img src="https://picsum.photos/id/214/100/100" class="absolute inset-0 object-cover opacity-30 blur-sm" />
              <span class="relative z-10">Drop Zone</span>
            </div>
            <div class="w-20 h-20 sm:w-24 sm:h-24 bg-pink-300 dark:bg-pink-700 rounded-full flex items-center justify-center text-white text-3xl shadow-md cursor-grab transform transition-transform duration-200 hover:scale-110">
              🍬
            </div>
          </div>
        </div>

        <!-- ReCAPTCHA-like checkbox -->
        <div class="flex items-center justify-center bg-gray-50 dark:bg-gray-700 p-4 rounded-xl border border-gray-200 dark:border-gray-600 shadow-inner">
          <label for="iamnotarobot" class="flex items-center cursor-pointer">
            <input type="checkbox" id="iamnotarobot" name="iamnotarobot" class="form-checkbox h-7 w-7 text-green-500 rounded-md border-2 border-gray-400 dark:border-gray-500 focus:ring-green-400 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition-colors duration-200">
            <span class="ml-3 text-lg sm:text-xl text-gray-700 dark:text-gray-300 font-semibold">I'm not a robot!</span>
          </label>
        </div>

        <button type="submit" class="w-full py-4 bg-gradient-to-r from-pink-500 to-purple-600 dark:from-pink-700 dark:to-purple-800 text-white text-2xl font-extrabold uppercase rounded-full shadow-lg transform transition-all duration-300 hover:scale-105 hover:from-pink-600 hover:to-purple-700 focus:outline-none focus:ring-4 focus:ring-pink-300 dark:focus:ring-pink-500 disco-shadow">
          Confirm Reservation
        </button>
      </div>
    </div>

    <div class="p-4 sm:p-6 bg-pink-200 dark:bg-pink-900 border-t-4 border-pink-400 dark:border-pink-600 flex justify-center items-center text-sm text-pink-700 dark:text-pink-300">
      <img src="https://randomuser.me/api/portraits/lego/1.jpg" alt="Captcha Mascot" class="w-10 h-10 rounded-full mr-3 border-2 border-pink-500 dark:border-pink-700 shadow-md">
      <p>Powered by SweetGuard™ &copy; 2023</p>
    </div>
  </div>
</div>

<style>
  @keyframes bounce-slow {
    0%, 100% { transform: translateY(0) rotate(-12deg); }
    50% { transform: translateY(-5px) rotate(-12deg); }
  }

  .bounce-slow {
    animation: bounce-slow 3s ease-in-out infinite;
  }

  @keyframes pulse-light {
    0%, 100% { box-shadow: 0 0 0px rgba(255, 192, 203, 0.4); }
    50% { box-shadow: 0 0 10px rgba(255, 192, 203, 0.8); }
  }

  .animation-pulse-light {
    animation: pulse-light 2s infinite alternate;
  }

  .dark .animation-pulse-light {
    animation: none; /* Disable light pulse in dark mode for better visibility */
  }

  .disco-shadow {
    box-shadow: 0 0 15px rgba(255, 105, 180, 0.7), 0 0 30px rgba(138, 43, 226, 0.5);
    transition: box-shadow 0.3s ease-in-out;
  }

  .disco-shadow:hover {
    box-shadow: 0 0 25px rgba(255, 105, 180, 1), 0 0 50px rgba(138, 43, 226, 0.8);
  }

  /* Custom colors for better specificity and semantics */
  .bg-mint-100 { background-color: #e0fdf5; /* Light mint */ }
  .dark\:bg-green-900 { background-color: #0d362d; /* Darker green for dark mode */ }
  .border-mint-300 { border-color: #92e0c1; /* Medium mint */ }
  .dark\:border-green-700 { border-color: #1a624d; /* Dark green for dark mode */ }
  .text-mint-700 { color: #218360; /* Dark mint */ }
  .dark\:text-green-300 { color: #81e2b5; /* Light green for dark mode */ }
</style>

Retro_Captcha_Component

오션/블루 톤의 레트로/빈티지 스타일 CAPTCHA 구성 요소로, 컨설팅/서비스 웹사이트를 위해 설계되었습니다. 왜곡된 이미지, 오디오 챌린지 및 입력 필드가 있는 복잡한 인터페이스가 특징입니다.

열다 미리 보기

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-blue-300 to-blue-600 dark:from-gray-900 dark:to-blue-900 p-4 font-mono sm:p-6 lg:p-8">
  <div class="w-full max-w-md rounded-lg shadow-xl overflow-hidden border-4 border-blue-900 bg-gradient-to-br from-blue-100 to-blue-300 dark:from-gray-800 dark:to-blue-950 transform rotate-[-2deg] skew-y-1 relative motion-safe:transition-transform motion-safe:duration-300 hover:rotate-0 hover:skew-y-0">
    <div class="absolute inset-0 bg-blue-200 opacity-20 dark:bg-blue-900 dark:opacity-30 blur-sm pointer-events-none"></div>
    <div class="p-6 relative z-10 space-y-6 sm:p-8">
      <h2 class="text-3xl font-extrabold text-blue-900 uppercase tracking-widest text-shadow-sm dark:text-blue-100 dark:text-shadow-md text-center transform rotate-[-1deg]">
        SYSTEM AUTHENTICATION
      </h2>
      <p class="text-sm text-blue-800 text-center font-semibold dark:text-blue-200 leading-snug transform skew-y-1">
        Please prove you're not a robot by completing the challenge below.
      </p>

      <div class="bg-blue-600 border-4 border-blue-900 p-2 rounded transform rotate-[1deg] shadow-lg dark:bg-blue-950 dark:border-blue-700">
        <div class="flex flex-col items-center justify-center p-4 bg-blue-50 border-2 border-blue-400 aspect-video overflow-hidden relative dark:bg-gray-700 dark:border-gray-600">
          <img src="https://picsum.photos/400/150?blur=5&grayscale&random=1" alt="Distorted CAPTCHA image" class="w-full h-full object-cover transform scale-110 rotate-[-3deg] skew-y-2 opacity-80 filter blur-[0.5px] contrast-150 brightness-110" loading="lazy">
          <div class="absolute inset-0 bg-gradient-to-br from-blue-100/30 via-blue-500/10 to-blue-900/40 dark:from-gray-700/30 dark:via-gray-900/10 dark:to-gray-950/40"></div>
          <p class="absolute text-3xl sm:text-4xl lg:text-5xl font-black text-blue-950 tracking-widest leading-none select-none drop-shadow-lg transform rotate-[3deg] skew-x-3 dark:text-blue-200 dark:drop-shadow-xl">
            <span class="inline-block rotate-[-5deg]">P</span>
            <span class="inline-block rotate-[2deg]">R</span>
            <span class="inline-block rotate-[-1deg]">0</span>
            <span class="inline-block rotate-[4deg]">T</span>
            <span class="inline-block rotate-[-3deg]">E</span>
            <span class="inline-block rotate-[1deg]">C</span>
            <span class="inline-block rotate-[-2deg]">T</span>
          </p>
          <div class="absolute bottom-2 right-2 flex space-x-2">
            <button aria-label="Refresh CAPTCHA" class="p-1.5 bg-blue-200 rounded-full text-blue-800 hover:bg-blue-300 dark:bg-gray-600 dark:text-gray-200 dark:hover:bg-gray-500 shadow-md transform hover:scale-105 active:scale-95 transition-transform duration-150">
              <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 12v.622m15.356-2A8.001 8.001 0 0120 12v.622"></path>
              </svg>
            </button>
          </div>
        </div>
      </div>

      <div class="flex flex-col space-y-4 md:flex-row md:space-x-4 md:space-y-0">
        <div class="flex-1">
          <label for="captcha-input" class="block text-sm font-bold text-blue-800 uppercase mb-2 dark:text-blue-200 transform -rotate-[0.5deg]">
            Verify Code:
          </label>
          <input type="text" id="captcha-input" placeholder="Enter the text above..." class="w-full px-4 py-2 bg-blue-50 border-4 border-blue-700 rounded-md text-blue-900 placeholder-blue-500 focus:ring-2 focus:ring-blue-500 focus:border-blue-900 outline-none shadow-inner transform skew-y-[-0.5deg] text-lg lg:text-xl dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:placeholder-gray-400 dark:focus:ring-blue-400">
        </div>
        <div class="flex-shrink-0 flex items-end justify-center pt-2 md:pt-0">
          <button aria-label="Play audio CAPTCHA" class="p-3 bg-blue-700 rounded-md text-white border-2 border-blue-900 hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-500 shadow-md transform rotate-[2deg] hover:rotate-0 active:scale-95 transition-all duration-200 dark:bg-blue-600 dark:border-blue-800 dark:hover:bg-blue-700">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" d="M9.383 3.076A1 1 0 0110 4v12a1 1 0 01-1.707.707L4.586 13H2a1 1 0 01-1-1V8a1 1 0 011-1h2.586l3.707-3.707a1 1 0 011.09-.217zM14.657 2.929a1 1 0 011.414 0A9.998 9.998 0 0119 10a9.998 9.998 0 01-2.929 7.071 1 1 0 01-1.414-1.414A7.998 7.998 0 0017 10c0-2.222-.89-4.212-2.343-5.657a1 1 0 010-1.414zm-2.828 2.828a1 1 0 011.414 0A5.996 5.996 0 0115 10a5.996 5.996 0 01-1.757 4.243 1 1 0 01-1.414-1.414A3.996 3.996 0 0013 10c0-1.03-1.04-2.176-1.707-2.828a1 1 0 010-1.414z" clip-rule="evenodd"></path>
            </svg>
          </button>
        </div>
      </div>

      <div class="pt-4">
        <button type="submit" class="w-full py-3 px-6 bg-blue-900 text-blue-50 uppercase font-extrabold rounded-md shadow-lg border-2 border-blue-950 focus:outline-none focus:ring-4 focus:ring-blue-400 hover:bg-blue-800 dark:bg-blue-700 dark:text-blue-100 dark:border-blue-900 dark:hover:bg-blue-600 transform skew-x-[-1deg] rotate-[0.5deg] tracking-wide text-lg sm:text-xl motion-safe:transition-transform motion-safe:duration-300 hover:skew-x-0 hover:rotate-0 active:scale-98">
          SUBMIT VERIFICATION
        </button>
      </div>
    </div>
    <div class="absolute bottom-0 right-0 p-2 text-blue-900 text-xs opacity-70 dark:text-blue-200 dark:opacity-50 transform rotate-[-2deg]">
      &copy; 2023 RETRO-SECURE. ALL RIGHTS RESERVED.
    </div>
  </div>
</div>

<style>
  /* Custom text-shadow for a retro feel */
  .text-shadow-sm {
    text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.2), 1px 1px 0px rgba(255, 255, 255, 0.4);
  }
  .dark .text-shadow-sm {
    text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.4), 1px 1px 0px rgba(50, 100, 200, 0.2);
  }
  
  .text-shadow-md {
    text-shadow: 3px 3px 0px rgba(0, 0, 0, 0.3), 2px 2px 0px rgba(255, 255, 255, 0.5);
  }
  .dark .text-shadow-md {
    text-shadow: 3px 3px 0px rgba(0, 0, 0, 0.6), 2px 2px 0px rgba(50, 100, 200, 0.4);
  }
</style>

CAPTCHA 구성 요소

코드에서 영감을 받은 복잡한 CAPTCHA 구성 요소로, 캔디/달콤한 색 구성표가 있으며 소셜 미디어 인터페이스용으로 설계되었습니다. 반응형 레이아웃, 다크 모드 지원 및 대화형 요소를 제공합니다.

열다 미리 보기

                <div class="flex items-center justify-center min-h-screen p-4 bg-gradient-to-br from-purple-100 to-pink-100 dark:from-purple-950 dark:to-pink-950 font-mono">
  <div class="w-full max-w-md p-6 rounded-lg shadow-xl bg-white dark:bg-gray-800 border-2 border-pink-300 dark:border-purple-600 transform transition duration-300 hover:scale-[1.02] overflow-hidden">
    
    <!-- Header -->
    <div class="flex items-center justify-between mb-6 pb-4 border-b-2 border-pink-200 dark:border-purple-700">
      <h2 class="text-2xl font-bold text-pink-600 dark:text-purple-400"><span class="text-4xl pr-2">🔐</span>&gt; _verify_identity</h2>
      <span class="text-sm text-pink-400 dark:text-purple-500">v1.0.1_beta</span>
    </div>

    <!-- Instruction Panel -->
    <div class="mb-6 p-4 rounded bg-pink-50 dark:bg-gray-700 border border-pink-200 dark:border-purple-600 text-pink-800 dark:text-gray-300 text-sm leading-relaxed overflow-x-auto">
      <pre class="whitespace-pre-wrap"><code>&gt; user_action: click_matching_pair()
&gt; goal: prove_humanity()
&gt; status: pending...

_Choose the two images that form a logical pair.</code></pre>
    </div>

    <!-- Image Grid -->
    <div class="grid grid-cols-2 sm:grid-cols-3 gap-3 mb-6">
      <!-- Image 1 -->
      <label class="block cursor-pointer">
        <input type="checkbox" class="hidden peer">
        <div class="relative rounded-lg overflow-hidden border-2 border-pink-200 dark:border-purple-700 transition duration-200 peer-checked:border-pink-500 peer-checked:ring-2 peer-checked:ring-pink-300 dark:peer-checked:border-purple-400 dark:peer-checked:ring-purple-600 transform hover:scale-[1.03]">
          <img src="https://picsum.photos/id/60/200/200" alt="Image 1" class="w-full h-24 sm:h-28 object-cover">
          <span class="absolute top-1 right-1 text-xs px-2 py-1 rounded-full bg-pink-100 dark:bg-gray-700 text-pink-600 dark:text-purple-400">[IMG_001]</span>
          <div class="absolute inset-0 bg-pink-500 dark:bg-purple-500 opacity-0 peer-checked:opacity-30 transition-opacity flex items-center justify-center">
            <svg class="h-8 w-8 text-white dark:text-gray-200" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
          </div>
        </div>
      </label>
      <!-- Image 2 -->
      <label class="block cursor-pointer">
        <input type="checkbox" class="hidden peer">
        <div class="relative rounded-lg overflow-hidden border-2 border-pink-200 dark:border-purple-700 transition duration-200 peer-checked:border-pink-500 peer-checked:ring-2 peer-checked:ring-pink-300 dark:peer-checked:border-purple-400 dark:peer-checked:ring-purple-600 transform hover:scale-[1.03]">
          <img src="https://picsum.photos/id/61/200/200" alt="Image 2" class="w-full h-24 sm:h-28 object-cover">
          <span class="absolute top-1 right-1 text-xs px-2 py-1 rounded-full bg-pink-100 dark:bg-gray-700 text-pink-600 dark:text-purple-400">[IMG_002]</span>
          <div class="absolute inset-0 bg-pink-500 dark:bg-purple-500 opacity-0 peer-checked:opacity-30 transition-opacity flex items-center justify-center">
            <svg class="h-8 w-8 text-white dark:text-gray-200" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
          </div>
        </div>
      </label>
      <!-- Image 3 -->
      <label class="block cursor-pointer">
        <input type="checkbox" class="hidden peer">
        <div class="relative rounded-lg overflow-hidden border-2 border-pink-200 dark:border-purple-700 transition duration-200 peer-checked:border-pink-500 peer-checked:ring-2 peer-checked:ring-pink-300 dark:peer-checked:border-purple-400 dark:peer-checked:ring-purple-600 transform hover:scale-[1.03]">
          <img src="https://picsum.photos/id/62/200/200" alt="Image 3" class="w-full h-24 sm:h-28 object-cover">
          <span class="absolute top-1 right-1 text-xs px-2 py-1 rounded-full bg-pink-100 dark:bg-gray-700 text-pink-600 dark:text-purple-400">[IMG_003]</span>
          <div class="absolute inset-0 bg-pink-500 dark:bg-purple-500 opacity-0 peer-checked:opacity-30 transition-opacity flex items-center justify-center">
            <svg class="h-8 w-8 text-white dark:text-gray-200" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
          </div>
        </div>
      </label>
      <!-- Image 4 -->
      <label class="block cursor-pointer">
        <input type="checkbox" class="hidden peer">
        <div class="relative rounded-lg overflow-hidden border-2 border-pink-200 dark:border-purple-700 transition duration-200 peer-checked:border-pink-500 peer-checked:ring-2 peer-checked:ring-pink-300 dark:peer-checked:border-purple-400 dark:peer-checked:ring-purple-600 transform hover:scale-[1.03]">
          <img src="https://picsum.photos/id/63/200/200" alt="Image 4" class="w-full h-24 sm:h-28 object-cover">
          <span class="absolute top-1 right-1 text-xs px-2 py-1 rounded-full bg-pink-100 dark:bg-gray-700 text-pink-600 dark:text-purple-400">[IMG_004]</span>
          <div class="absolute inset-0 bg-pink-500 dark:bg-purple-500 opacity-0 peer-checked:opacity-30 transition-opacity flex items-center justify-center">
            <svg class="h-8 w-8 text-white dark:text-gray-200" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
          </div>
        </div>
      </label>
      <!-- Image 5 -->
      <label class="block cursor-pointer">
        <input type="checkbox" class="hidden peer">
        <div class="relative rounded-lg overflow-hidden border-2 border-pink-200 dark:border-purple-700 transition duration-200 peer-checked:border-pink-500 peer-checked:ring-2 peer-checked:ring-pink-300 dark:peer-checked:border-purple-400 dark:peer-checked:ring-purple-600 transform hover:scale-[1.03]">
          <img src="https://picsum.photos/id/64/200/200" alt="Image 5" class="w-full h-24 sm:h-28 object-cover">
          <span class="absolute top-1 right-1 text-xs px-2 py-1 rounded-full bg-pink-100 dark:bg-gray-700 text-pink-600 dark:text-purple-400">[IMG_005]</span>
          <div class="absolute inset-0 bg-pink-500 dark:bg-purple-500 opacity-0 peer-checked:opacity-30 transition-opacity flex items-center justify-center">
            <svg class="h-8 w-8 text-white dark:text-gray-200" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
          </div>
        </div>
      </label>
      <!-- Image 6 -->
      <label class="block cursor-pointer">
        <input type="checkbox" class="hidden peer">
        <div class="relative rounded-lg overflow-hidden border-2 border-pink-200 dark:border-purple-700 transition duration-200 peer-checked:border-pink-500 peer-checked:ring-2 peer-checked:ring-pink-300 dark:peer-checked:border-purple-400 dark:peer-checked:ring-purple-600 transform hover:scale-[1.03]">
          <img src="https://picsum.photos/id/65/200/200" alt="Image 6" class="w-full h-24 sm:h-28 object-cover">
          <span class="absolute top-1 right-1 text-xs px-2 py-1 rounded-full bg-pink-100 dark:bg-gray-700 text-pink-600 dark:text-purple-400">[IMG_006]</span>
          <div class="absolute inset-0 bg-pink-500 dark:bg-purple-500 opacity-0 peer-checked:opacity-30 transition-opacity flex items-center justify-center">
            <svg class="h-8 w-8 text-white dark:text-gray-200" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
          </div>
        </div>
      </label>
    </div>

    <!-- Action Buttons -->
    <div class="flex justify-between items-center gap-4">
      <button class="flex-1 py-3 px-4 rounded-lg bg-pink-500 dark:bg-purple-600 text-white dark:text-gray-100 font-bold text-lg hover:bg-pink-600 dark:hover:bg-purple-700 transition-all duration-200 transform hover:scale-105 shadow-md flex items-center justify-center">
        <svg class="w-5 h-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"><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>
        _confirm(_selection)
      </button>
      <button title="Refresh images" class="p-3 rounded-lg bg-mint-50 dark:bg-gray-700 border border-mint-200 dark:border-purple-600 text-mint-600 dark:text-purple-400 hover:bg-mint-100 dark:hover:bg-gray-600 transition-colors duration-200 transform hover:scale-110 shadow-sm">
        <svg class="w-6 h-6" 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 12v.621m15.821-6.196L15.424 4.1a1.999 1.999 0 00-2.616.488L7 12m10 8l-4.168-4.168A1.999 1.999 0 0013.916 16H8a1.999 1.999 0 00-1.999 1.999v1.001m0-8h.01M20 12l-1 1-1-1"></path></svg>
      </button>
    </div>

    <!-- Footer Info -->
    <div class="mt-6 pt-4 border-t-2 border-pink-200 dark:border-purple-700 text-center text-xs text-pink-400 dark:text-gray-500">
      <p>_powered_by: secure_identity_protocol_v2.1</p>
      <div class="flex items-center justify-center mt-2">
        <img src="https://randomuser.me/api/portraits/lego/1.jpg" alt="Developer Avatar" class="h-6 w-6 rounded-full mr-2 border border-pink-300 dark:border-purple-600">
        <span class="text-pink-500 dark:text-purple-400">// CAPTCHA_DevTeam Inc.</span>
      </div>
    </div>

  </div>
</div>

CAPTCHA 구성 요소 - 유기농/자연에서 영감을 받은 (가을색)

뉴스/저널리즘 웹사이트에 적합한 가을 색상을 사용하여 자연에서 영감을 받은 유기적 스타일로 설계된 복잡하고 반응이 빠른 CAPTCHA 구성 요소입니다. 완전한 다크 모드 지원이 포함됩니다.

열다 미리 보기

                <div class="flex items-center justify-center min-h-screen p-4 bg-gradient-to-br from-amber-50 to-orange-100 dark:from-gray-900 dark:to-gray-800 font-sans">
  <div class="w-full max-w-sm p-6 rounded-2xl shadow-xl bg-white/80 backdrop-blur-sm transform transition-all duration-300 hover:shadow-2xl dark:bg-gray-800/80 dark:border dark:border-gray-700 md:max-w-md lg:max-w-lg overflow-hidden relative">
    <!-- Organic Shape Overlay -->
    <div class="absolute -top-10 -left-10 w-32 h-32 rounded-full bg-gradient-to-br from-orange-200 to-amber-300 opacity-60 dark:from-gray-700 dark:to-gray-900 dark:opacity-40 filter blur-xl transform rotate-45"></div>
    <div class="absolute -bottom-10 -right-10 w-40 h-40 rounded-full bg-gradient-to-br from-red-300 to-amber-400 opacity-60 dark:from-gray-800 dark:to-teal-900 dark:opacity-40 filter blur-xl transform -rotate-30"></div>

    <div class="relative z-10">
      <h2 class="text-3xl font-extrabold text-amber-800 mb-6 text-center dark:text-amber-300 leading-tight tracking-wide">
        <span class="block">Are you a Human?</span>
        <span class="block text-xl font-medium text-orange-600 dark:text-orange-400">A quick check before proceeding</span>
      </h2>

      <!-- Captcha Challenge Area -->
      <div class="bg-orange-50/70 dark:bg-gray-700/60 p-5 rounded-xl border border-orange-200 dark:border-gray-600 mb-6 shadow-inner relative overflow-hidden">
        <div class="absolute inset-0 bg-[url('https://picsum.photos/600/400?blur=5&grayscale=true')] bg-cover bg-center opacity-10 dark:opacity-5"></div>
        <div class="relative z-10">
          <p class="text-lg text-amber-900 font-semibold mb-4 dark:text-amber-200 text-center">
            Please select all images containing
            <span class="font-extrabold text-red-700 dark:text-red-400">"Autumn Leaves"</span>
          </p>

          <div class="grid grid-cols-3 gap-3 md:gap-4">
            <div class="relative group cursor-pointer border-2 border-orange-200 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-all duration-200 transform hover:-translate-y-0.5">
              <img src="https://picsum.photos/300/200?random=1" alt="Captcha Image" class="w-full h-24 sm:h-28 md:h-32 object-cover rounded-md group-hover:scale-105 transition-transform duration-300">
              <div class="absolute inset-0 bg-transparent group-hover:bg-amber-600/20 transition-colors duration-200 flex items-center justify-center">
                <input type="checkbox" class="hidden peer" id="img1">
                <label for="img1" class="w-8 h-8 rounded-full border-2 border-white bg-white/50 backdrop-blur-sm peer-checked:bg-green-500 peer-checked:border-green-600 flex items-center justify-center transition-all duration-200">
                  <svg class="w-5 h-5 text-white opacity-0 peer-checked:opacity-100 transition-opacity 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>
                </label>
              </div>
            </div>

            <div class="relative group cursor-pointer border-2 border-orange-200 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-all duration-200 transform hover:-translate-y-0.5">
              <img src="https://picsum.photos/300/200?random=2" alt="Captcha Image" class="w-full h-24 sm:h-28 md:h-32 object-cover rounded-md group-hover:scale-105 transition-transform duration-300">
              <div class="absolute inset-0 bg-transparent group-hover:bg-amber-600/20 transition-colors duration-200 flex items-center justify-center">
                <input type="checkbox" class="hidden peer" id="img2">
                <label for="img2" class="w-8 h-8 rounded-full border-2 border-white bg-white/50 backdrop-blur-sm peer-checked:bg-green-500 peer-checked:border-green-600 flex items-center justify-center transition-all duration-200">
                  <svg class="w-5 h-5 text-white opacity-0 peer-checked:opacity-100 transition-opacity 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>
                </label>
              </div>
            </div>
            
            <div class="relative group cursor-pointer border-2 border-orange-200 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-all duration-200 transform hover:-translate-y-0.5">
              <img src="https://picsum.photos/300/200?random=3" alt="Captcha Image" class="w-full h-24 sm:h-28 md:h-32 object-cover rounded-md group-hover:scale-105 transition-transform duration-300">
              <div class="absolute inset-0 bg-transparent group-hover:bg-amber-600/20 transition-colors duration-200 flex items-center justify-center">
                <input type="checkbox" class="hidden peer" id="img3">
                <label for="img3" class="w-8 h-8 rounded-full border-2 border-white bg-white/50 backdrop-blur-sm peer-checked:bg-green-500 peer-checked:border-green-600 flex items-center justify-center transition-all duration-200">
                  <svg class="w-5 h-5 text-white opacity-0 peer-checked:opacity-100 transition-opacity 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>
                </label>
              </div>
            </div>
            
            <div class="relative group cursor-pointer border-2 border-orange-200 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-all duration-200 transform hover:-translate-y-0.5">
              <img src="https://picsum.photos/300/200?random=4" alt="Captcha Image" class="w-full h-24 sm:h-28 md:h-32 object-cover rounded-md group-hover:scale-105 transition-transform duration-300">
              <div class="absolute inset-0 bg-transparent group-hover:bg-amber-600/20 transition-colors duration-200 flex items-center justify-center">
                <input type="checkbox" class="hidden peer" id="img4">
                <label for="img4" class="w-8 h-8 rounded-full border-2 border-white bg-white/50 backdrop-blur-sm peer-checked:bg-green-500 peer-checked:border-green-600 flex items-center justify-center transition-all duration-200">
                  <svg class="w-5 h-5 text-white opacity-0 peer-checked:opacity-100 transition-opacity 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>
                </label>
              </div>
            </div>
            
            <div class="relative group cursor-pointer border-2 border-orange-200 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-all duration-200 transform hover:-translate-y-0.5">
              <img src="https://picsum.photos/300/200?random=5" alt="Captcha Image" class="w-full h-24 sm:h-28 md:h-32 object-cover rounded-md group-hover:scale-105 transition-transform duration-300">
              <div class="absolute inset-0 bg-transparent group-hover:bg-amber-600/20 transition-colors duration-200 flex items-center justify-center">
                <input type="checkbox" class="hidden peer" id="img5">
                <label for="img5" class="w-8 h-8 rounded-full border-2 border-white bg-white/50 backdrop-blur-sm peer-checked:bg-green-500 peer-checked:border-green-600 flex items-center justify-center transition-all duration-200">
                  <svg class="w-5 h-5 text-white opacity-0 peer-checked:opacity-100 transition-opacity 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>
                </label>
              </div>
            </div>
            
            <div class="relative group cursor-pointer border-2 border-orange-200 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-all duration-200 transform hover:-translate-y-0.5">
              <img src="https://picsum.photos/300/200?random=6" alt="Captcha Image" class="w-full h-24 sm:h-28 md:h-32 object-cover rounded-md group-hover:scale-105 transition-transform duration-300">
              <div class="absolute inset-0 bg-transparent group-hover:bg-amber-600/20 transition-colors duration-200 flex items-center justify-center">
                <input type="checkbox" class="hidden peer" id="img6">
                <label for="img6" class="w-8 h-8 rounded-full border-2 border-white bg-white/50 backdrop-blur-sm peer-checked:bg-green-500 peer-checked:border-green-600 flex items-center justify-center transition-all duration-200">
                  <svg class="w-5 h-5 text-white opacity-0 peer-checked:opacity-100 transition-opacity 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>
                </label>
              </div>
            </div>
            
            <div class="relative group cursor-pointer border-2 border-orange-200 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-all duration-200 transform hover:-translate-y-0.5">
              <img src="https://picsum.photos/300/200?random=7" alt="Captcha Image" class="w-full h-24 sm:h-28 md:h-32 object-cover rounded-md group-hover:scale-105 transition-transform duration-300">
              <div class="absolute inset-0 bg-transparent group-hover:bg-amber-600/20 transition-colors duration-200 flex items-center justify-center">
                <input type="checkbox" class="hidden peer" id="img7">
                <label for="img7" class="w-8 h-8 rounded-full border-2 border-white bg-white/50 backdrop-blur-sm peer-checked:bg-green-500 peer-checked:border-green-600 flex items-center justify-center transition-all duration-200">
                  <svg class="w-5 h-5 text-white opacity-0 peer-checked:opacity-100 transition-opacity 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>
                </label>
              </div>
            </div>

            <div class="relative group cursor-pointer border-2 border-orange-200 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-all duration-200 transform hover:-translate-y-0.5">
              <img src="https://picsum.photos/300/200?random=8" alt="Captcha Image" class="w-full h-24 sm:h-28 md:h-32 object-cover rounded-md group-hover:scale-105 transition-transform duration-300">
              <div class="absolute inset-0 bg-transparent group-hover:bg-amber-600/20 transition-colors duration-200 flex items-center justify-center">
                <input type="checkbox" class="hidden peer" id="img8">
                <label for="img8" class="w-8 h-8 rounded-full border-2 border-white bg-white/50 backdrop-blur-sm peer-checked:bg-green-500 peer-checked:border-green-600 flex items-center justify-center transition-all duration-200">
                  <svg class="w-5 h-5 text-white opacity-0 peer-checked:opacity-100 transition-opacity 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>
                </label>
              </div>
            </div>

            <div class="relative group cursor-pointer border-2 border-orange-200 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-all duration-200 transform hover:-translate-y-0.5">
              <img src="https://picsum.photos/300/200?random=9" alt="Captcha Image" class="w-full h-24 sm:h-28 md:h-32 object-cover rounded-md group-hover:scale-105 transition-transform duration-300">
              <div class="absolute inset-0 bg-transparent group-hover:bg-amber-600/20 transition-colors duration-200 flex items-center justify-center">
                <input type="checkbox" class="hidden peer" id="img9">
                <label for="img9" class="w-8 h-8 rounded-full border-2 border-white bg-white/50 backdrop-blur-sm peer-checked:bg-green-500 peer-checked:border-green-600 flex items-center justify-center transition-all duration-200">
                  <svg class="w-5 h-5 text-white opacity-0 peer-checked:opacity-100 transition-opacity 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>
                </label>
              </div>
            </div>

          </div>
        </div>
      </div>

      <div class="flex justify-between items-center mb-6">
        <button class="flex items-center text-orange-600 hover:text-red-700 dark:text-orange-400 dark:hover:text-red-500 transition-colors duration-200 text-sm md:text-base">
          <svg class="w-5 h-5 mr-2" 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.88 1.14 5.518 3 7.493l1.884-1.884m5.348-2.604A7.962 7.962 0 0110 20c-5.14 0-8.862-5.714-8.862-5.714L10 10l-1.884 1.884"></path></svg>
          Reload Challenge
        </button>
        <a href="#" class="text-orange-600 hover:text-red-700 dark:text-orange-400 dark:hover:text-red-500 transition-colors duration-200 text-sm md:text-base">
          Get a new challenge
        </a>
      </div>

      <button class="w-full flex items-center justify-center bg-amber-700 hover:bg-amber-800 text-white font-bold py-3 px-6 rounded-full transition-all duration-300 transform hover:scale-105 shadow-lg shadow-amber-600/40 dark:bg-amber-600 dark:hover:bg-amber-700 dark:shadow-amber-500/40 focus:outline-none focus:ring-4 focus:ring-amber-500/50 dark:focus:ring-amber-400/50">
        Verify
        <svg class="w-5 h-5 ml-2 -mr-1" 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 5l7 7-7 7"></path></svg>
      </button>

      <p class="text-center text-xs text-gray-500 mt-6 dark:text-gray-400">
        Enhanced by <a href="#" class="underline hover:text-orange-600 dark:hover:text-orange-400 transition-colors duration-200">NatureShield™</a>
      </p>
    </div>
  </div>
</div>

CAPTCHA 구성 요소

음식/레스토랑 웹사이트를 위한 간단하고 깔끔한 모노스페이스 테마의 CAPTCHA 구성 요소로, 그레이스케일 색 구성표와 다크 모드 지원으로 완전한 응답성을 제공합니다.

열다 미리 보기

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 font-mono p-4">
  <div class="w-full max-w-sm rounded-lg shadow-xl bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 overflow-hidden">
    <div class="p-6 space-y-4">
      <h2 class="text-xl font-bold text-gray-900 dark:text-gray-100 text-center">
        Verify You Are Human
      </h2>
      <p class="text-sm text-gray-700 dark:text-gray-300 text-center leading-relaxed">
        To proceed, please select all images containing <span class="text-gray-900 dark:text-gray-100 font-semibold">burgers</span>.
      </p>
      <div class="grid grid-cols-3 gap-2">
        <div class="relative group cursor-pointer border-2 border-transparent hover:border-gray-400 dark:hover:border-gray-500 rounded-md overflow-hidden transition-all duration-200 ease-in-out">
          <img src="https://picsum.photos/id/1084/300/200" alt="Image 1" class="w-full h-24 object-cover">
          <div class="absolute inset-0 bg-gray-900 bg-opacity-0 group-hover:bg-opacity-20 flex items-center justify-center transition-all duration-200 ease-in-out">
            <div class="w-6 h-6 border-2 border-gray-300 dark:border-gray-500 rounded-sm flex items-center justify-center text-gray-100 text-xs font-bold opacity-0 group-hover:opacity-100 transition-all duration-200 ease-in-out"></div>
          </div>
        </div>
        <div class="relative group cursor-pointer border-2 border-transparent hover:border-gray-400 dark:hover:border-gray-500 rounded-md overflow-hidden transition-all duration-200 ease-in-out">
          <img src="https://picsum.photos/id/433/300/200" alt="Image 2" class="w-full h-24 object-cover">
          <div class="absolute inset-0 bg-gray-900 bg-opacity-0 group-hover:bg-opacity-20 flex items-center justify-center transition-all duration-200 ease-in-out">
            <div class="w-6 h-6 border-2 border-gray-300 dark:border-gray-500 rounded-sm flex items-center justify-center text-gray-100 text-xs font-bold opacity-0 group-hover:opacity-100 transition-all duration-200 ease-in-out"></div>
          </div>
        </div>
        <div class="relative group cursor-pointer border-2 border-transparent hover:border-gray-400 dark:hover:border-gray-500 rounded-md overflow-hidden transition-all duration-200 ease-in-out">
          <img src="https://picsum.photos/id/1069/300/200" alt="Image 3" class="w-full h-24 object-cover">
          <div class="absolute inset-0 bg-gray-900 bg-opacity-0 group-hover:bg-opacity-20 flex items-center justify-center transition-all duration-200 ease-in-out">
            <div class="w-6 h-6 border-2 border-gray-300 dark:border-gray-500 rounded-sm flex items-center justify-center text-gray-100 text-xs font-bold opacity-0 group-hover:opacity-100 transition-all duration-200 ease-in-out"></div>
          </div>
        </div>
        <div class="relative group cursor-pointer border-2 border-transparent hover:border-gray-400 dark:hover:border-gray-500 rounded-md overflow-hidden transition-all duration-200 ease-in-out">
          <img src="https://picsum.photos/id/228/300/200" alt="Image 4" class="w-full h-24 object-cover">
          <div class="absolute inset-0 bg-gray-900 bg-opacity-0 group-hover:bg-opacity-20 flex items-center justify-center transition-all duration-200 ease-in-out">
            <div class="w-6 h-6 border-2 border-gray-300 dark:border-gray-500 rounded-sm flex items-center justify-center text-gray-100 text-xs font-bold opacity-0 group-hover:opacity-100 transition-all duration-200 ease-in-out"></div>
          </div>
        </div>
        <div class="relative group cursor-pointer border-2 border-transparent hover:border-gray-400 dark:hover:border-gray-500 rounded-md overflow-hidden transition-all duration-200 ease-in-out">
          <img src="https://picsum.photos/id/111/300/200" alt="Image 5" class="w-full h-24 object-cover">
          <div class="absolute inset-0 bg-gray-900 bg-opacity-0 group-hover:bg-opacity-20 flex items-center justify-center transition-all duration-200 ease-in-out">
            <div class="w-6 h-6 border-2 border-gray-300 dark:border-gray-500 rounded-sm flex items-center justify-center text-gray-100 text-xs font-bold opacity-0 group-hover:opacity-100 transition-all duration-200 ease-in-out"></div>
          </div>
        </div>
        <div class="relative group cursor-pointer border-2 border-transparent hover:border-gray-400 dark:hover:border-gray-500 rounded-md overflow-hidden transition-all duration-200 ease-in-out">
          <img src="https://picsum.photos/id/350/300/200" alt="Image 6" class="w-full h-24 object-cover">
          <div class="absolute inset-0 bg-gray-900 bg-opacity-0 group-hover:bg-opacity-20 flex items-center justify-center transition-all duration-200 ease-in-out">
            <div class="w-6 h-6 border-2 border-gray-300 dark:border-gray-500 rounded-sm flex items-center justify-center text-gray-100 text-xs font-bold opacity-0 group-hover:opacity-100 transition-all duration-200 ease-in-out"></div>
          </div>
        </div>
      </div>
      <div class="flex items-center justify-between pt-4">
        <div class="flex items-center space-x-2 text-gray-700 dark:text-gray-300">
          <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 12v2m7 12h.582M20 20v-5h-.582m0 0a8.005 8.005 0 00-15.356-2L4 12V4"></path></svg>
          <button class="text-sm hover:underline focus:outline-none">Reload</button>
        </div>
        <button class="px-5 py-2 bg-gray-800 hover:bg-gray-700 dark:bg-gray-100 dark:hover:bg-gray-200 text-white dark:text-gray-900 font-semibold rounded-md transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-gray-500 dark:focus:ring-gray-400 focus:ring-opacity-50">
          Verify
        </button>
      </div>
    </div>
  </div>
</div>

CAPTCHA 구성 요소

깨끗하고 미니멀한 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>

Glassmorphism_CAPTCHA_Component_Forest_Green

포레스트 그린 색상 구성표를 가진 반응형 glassmorphism 스타일의 CAPTCHA 구성 요소로, 제조/산업 응용 분야에 적합합니다. 다크 모드 지원이 포함됩니다.

열다 미리 보기

                <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>