РетроКапчаКомпонент
Простой компонент CAPTCHA в стиле ретро с цветовой палитрой зеленого леса, предназначенный для некоммерческих/благотворительных сайтов. Особенности, отзывчивость и поддержка темного режима.
HTML-код
<div class="flex items-center justify-center min-h-screen p-4 bg-lime-100 dark:bg-gray-900 font-mono">
<div class="w-full max-w-sm p-6 bg-lime-50 dark:bg-gray-800 rounded-lg shadow-xl border-4 border-lime-600 dark:border-emerald-600 transform -rotate-2 hover:rotate-0 transition-transform duration-300 ease-in-out">
<h2 class="text-2xl font-bold text-lime-900 dark:text-lime-200 mb-4 text-center tracking-wider uppercase drop-shadow-md">Are you human?</h2>
<p class="text-sm text-lime-800 dark:text-lime-300 mb-6 text-center italic">Help us fight spam and protect our community.</p>
<div class="flex flex-col items-center space-y-4">
<div class="w-full bg-lime-200 dark:bg-gray-700 p-3 rounded-md border-2 border-lime-600 dark:border-emerald-600 relative overflow-hidden">
<img src="https://picsum.photos/300/100?random=1" alt="CAPTCHA image" class="w-full h-24 object-cover rounded filter grayscale sepia brightness-90 contrast-120 blur-sm">
<div class="absolute inset-0 bg-lime-300 dark:bg-gray-600 mix-blend-multiply opacity-75"></div>
<p class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-4xl text-lime-900 dark:text-emerald-900 font-extrabold tracking-widest uppercase rotate-3 select-none" style="text-shadow: 2px 2px
#a3e635, 4px 4px #4D7C0F;">rUn34r</p>
<button class="absolute top-2 right-2 text-lime-800 dark:text-lime-200 hover:text-lime-900 dark:hover:text-lime-100 transition-colors duration-200" aria-label="Refresh CAPTCHA">
<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="M4 4v5h.582m15.356 2A8.001 8.001 0 004 12c0 2.197-.736 4.22-1.99 5.864M4 20v-5h.582m15.356-2A8.001 8.001 0 0020 12c0-2.197.736-4.22 1.99-5.864" />
</svg>
</button>
</div>
<input type="text" placeholder="Enter the text above" class="w-full px-4 py-2 text-lime-900 dark:text-lime-100 bg-lime-100 dark:bg-gray-700 border-2 border-lime-600 dark:border-emerald-600 rounded-md focus:outline-none focus:ring-2 focus:ring-lime-700 dark:focus:ring-emerald-500 placeholder-lime-700 dark:placeholder-lime-300 text-center tracking-wide font-bold uppercase" aria-label="CAPTCHA input field">
<button class="w-full px-6 py-3 bg-lime-700 dark:bg-emerald-700 text-lime-50 dark:text-emerald-50 font-bold uppercase rounded-md shadow-md hover:bg-lime-800 dark:hover:bg-emerald-800 focus:outline-none focus:ring-2 focus:ring-lime-700 dark:focus:ring-emerald-500 transform hover:scale-105 transition-all duration-300 ease-in-out text-lg tracking-wider">
Verify
</button>
<button class="text-sm text-lime-800 dark:text-lime-300 hover:text-lime-900 dark:hover:text-lime-200 transition-colors duration-200" aria-label="Report an issue with CAPTCHA">
Can't read the image?
</button>
</div>
</div>
</div>
Связанные компоненты
Компонент CAPTCHA - органический/вдохновленный природой (осенние цвета)
Сложный, отзывчивый компонент CAPTCHA, разработанный в органичном, вдохновленном природой стиле с использованием осенних цветов, подходит для новостных и журналистских веб-сайтов. Включает полную поддержку темного режима.
Компонент CAPTCHA - акварель/художественный
Простой, отзывчивый компонент CAPTCHA с акварельным/художественным дизайном, высококонтрастной цветовой схемой и поддержкой темного режима, подходящий для производственных и промышленных приложений.
Компонент CAPTCHA
Компонент CAPTCHA, стилизованный с использованием принципов Material Design и Tailwind CSS, подходящий для веб-сайтов электронной коммерции, с поддержкой темных тем и адаптивным дизайном.