Retro_Vintage_Captcha_Component
비즈니스/기업 웹사이트를 위한 레트로/빈티지 테마의 CAPTCHA 구성 요소로, 유사한 색 구성표, 반응형 디자인 및 다크 모드 지원을 특징으로 합니다. 80/90년대의 미학을 불러일으킵니다.
HTML 코드
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4 font-mono select-none">
<div class="w-full max-w-sm rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 scale-95 md:scale-100
bg-gradient-to-br from-purple-300 via-pink-300 to-red-300
dark:from-purple-800 dark:via-pink-800 dark:to-red-800 dark:border dark:border-gray-700">
<div class="p-6 space-y-6">
<header class="flex items-center justify-between border-b-2 border-dashed border-gray-700/50 dark:border-gray-200/50 pb-4 mb-4">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100 tracking-wider uppercase drop-shadow-md">
SYSTEM CHECK
</h2>
<svg class="h-8 w-8 text-gray-700 dark:text-gray-300 animate-pulse" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 111.955 0 0112 2.928c-2.483.9-4.502 2.766-5.836 5.011zm0 0c-1.334 2.245-2.001 4.707-2.001 7.218 0 3.738 2.059 6.829 5.838 6.829 3.78 0 5.838-3.091 5.838-6.829 0-2.511-.667-4.973-2.001-7.218z" />
</svg>
</header>
<div class="mt-4 mb-6 space-y-4">
<p class="text-sm text-gray-700 dark:text-gray-200">
Help us confirm you are not a robot by solving the puzzle below. We appreciate your cooperation.
</p>
<div class="bg-checkerboard-light dark:bg-checkerboard-dark p-4 rounded-md border-2 border-purple-600 dark:border-pink-600 shadow-inner flex flex-col items-center justify-center space-y-4">
<p class="text-lg font-semibold text-gray-800 dark:text-gray-100 drop-shadow-sm">Click all squares with:</p>
<div class="flex items-center space-x-2 text-2xl font-extrabold text-red-700 dark:text-yellow-400 uppercase tracking-widest">
<img src="https://picsum.photos/40/40?random=11" alt="Target Object" class="w-8 h-8 rounded-full border-2 border-red-500 dark:border-yellow-400 object-cover">
<span>VINTAGE CARS</span>
</div>
<div class="grid grid-cols-3 gap-2 w-full max-w-xs aspect-square p-2 bg-gray-50 dark:bg-gray-800 rounded-md border border-gray-300 dark:border-gray-700">
<!-- Replace with actual image selections or logic -->
<div class="captcha-grid-item group" role="button" aria-label="Image for captcha">
<img src="https://picsum.photos/150/150?random=1" alt="Random image 1" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200">
<div class="captcha-overlay"></div>
</div>
<div class="captcha-grid-item group" role="button" aria-label="Image for captcha">
<img src="https://picsum.photos/150/150?random=2" alt="Random image 2" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200">
<div class="captcha-overlay"></div>
</div>
<div class="captcha-grid-item group selected" role="button" aria-label="Image for captcha">
<img src="https://picsum.photos/150/150?random=3" alt="Random image 3" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200">
<div class="captcha-overlay"></div>
</div>
<div class="captcha-grid-item group" role="button" aria-label="Image for captcha">
<img src="https://picsum.photos/150/150?random=4" alt="Random image 4" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200">
<div class="captcha-overlay"></div>
</div>
<div class="captcha-grid-item group selected" role="button" aria-label="Image for captcha">
<img src="https://picsum.photos/150/150?random=5" alt="Random image 5" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200">
<div class="captcha-overlay"></div>
</div>
<div class="captcha-grid-item group" role="button" aria-label="Image for captcha">
<img src="https://picsum.photos/150/150?random=6" alt="Random image 6" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200">
<div class="captcha-overlay"></div>
</div>
<div class="captcha-grid-item group selected" role="button" aria-label="Image for captcha">
<img src="https://picsum.photos/150/150?random=7" alt="Random image 7" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200">
<div class="captcha-overlay"></div>
</div>
<div class="captcha-grid-item group" role="button" aria-label="Image for captcha">
<img src="https://picsum.photos/150/150?random=8" alt="Random image 8" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200">
<div class="captcha-overlay"></div>
</div>
<div class="captcha-grid-item group" role="button" aria-label="Image for captcha">
<img src="https://picsum.photos/150/150?random=9" alt="Random image 9" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200">
<div class="captcha-overlay"></div>
</div>
</div>
</div>
</div>
<div class="flex justify-between items-center pt-4 border-t-2 border-dashed border-gray-700/50 dark:border-gray-200/50">
<button type="button" class="transition-all duration-200
rounded-md py-2 px-4 text-xs font-bold uppercase tracking-wider
bg-blue-600 hover:bg-blue-700 text-white shadow-md
dark:bg-blue-700 dark:hover:bg-blue-800 dark:shadow-lg
focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
dark:focus:ring-offset-gray-900">
<svg class="inline-block mr-1 h-3 w-3" 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.896 4.21 2.344 5.656M4 20v-5h.582m15.356-2A8.001 8.001 0 0020 12c0-2.21-.896-4.21-2.344-5.656" />
</svg>
Reload
</button>
<button type="submit" class="transition-all duration-200
rounded-md py-2 px-6 text-base font-bold uppercase tracking-wider
bg-green-600 hover:bg-green-700 text-white shadow-md
dark:bg-lime-600 dark:hover:bg-lime-700 dark:shadow-lg
focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2
dark:focus:ring-lime-500 dark:focus:ring-offset-gray-900">
Verify
</button>
</div>
<footer class="text-center text-xs text-gray-700 dark:text-gray-300 opacity-70 mt-6">
<p>© 1996 - <span id="current-year"></span> CyberCorp Security Inc.</p>
</footer>
</div>
</div>
</div>
<style>
/* Base grid item styling */
.captcha-grid-item {
position: relative;
width: 100%;
padding-top: 100%; /* 1:1 Aspect Ratio */
overflow: hidden;
border-radius: 4px;
cursor: pointer;
border: 2px solid transparent;
transition: all 0.2s ease-in-out;
}
.captcha-grid-item img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.2s ease-in-out;
filter: grayscale(20%); /* Faded retro look */
}
.captcha-grid-item:hover {
border-color: #6d28d9; /* Deep Purple */
box-shadow: 0 0 0 2px #6d28d9; /* Focus ring effect */
}
.dark .captcha-grid-item:hover {
border-color: #db2777; /* Deep Pink */
box-shadow: 0 0 0 2px #db2777;
}
.captcha-grid-item.selected {
border-color: #10B981; /* Emerald Green */
filter: brightness(1.2) contrast(1.1);
box-shadow: 0 0 0 3px #10B981;
}
.dark .captcha-grid-item.selected {
border-color: #84cc16; /* Lime Green */
filter: brightness(1.2) contrast(1.1);
box-shadow: 0 0 0 3px #84cc16;
}
/* Overlay to indicate selection */
.captcha-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(162, 28, 175, 0.4); /* Purple overlay */
opacity: 0;
transition: opacity 0.2s ease-in-out;
display: flex;
align-items: center;
justify-content: center;
}
.dark .captcha-overlay {
background-color: rgba(219, 39, 119, 0.4); /* Pink overlay */
}
.captcha-grid-item.selected .captcha-overlay {
opacity: 1;
background-color: rgba(16, 185, 129, 0.6); /* Emerald Green overlay */
}
.dark .captcha-grid-item.selected .captcha-overlay {
background-color: rgba(132, 204, 22, 0.6); /* Lime Green overlay */
}
.captcha-overlay::after {
content: '\2713'; /* Checkmark symbol */
font-size: 3rem;
font-weight: bold;
color: white;
text-shadow: 0 0 5px rgba(0,0,0,0.5);
}
/* Checkerboard Background Pattern */
.bg-checkerboard-light {
background-image: linear-gradient(45deg, #e0e0e0 25%, transparent 25%),
linear-gradient(-45deg, #e0e0e0 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #e0e0e0 75%),
linear-gradient(-45deg, transparent 75%, #e0e0e0 75%);
background-size: 20px 20px;
background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}
.dark .bg-checkerboard-dark {
background-image: linear-gradient(45deg, #333 25%, transparent 25%),
linear-gradient(-45deg, #333 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #333 75%),
linear-gradient(-45deg, transparent 75%, #333 75%);
background-size: 20px 20px;
background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}
</style>
<script>
// This script is purely for demonstration purposes to update the year and toggle 'selected' class.
// In a real application, this logic would be handled by a framework or backend.
document.addEventListener('DOMContentLoaded', () => {
const currentYearSpan = document.getElementById('current-year');
if (currentYearSpan) {
currentYearSpan.textContent = new Date().getFullYear();
}
document.querySelectorAll('.captcha-grid-item').forEach(item => {
item.addEventListener('click', () => {
item.classList.toggle('selected');
});
});
// Optional: Simulate dark mode toggle for demonstration outside Tailwind playground
// In a real app, this would be handled by a global state/preference system
const toggleDarkMode = () => {
document.documentElement.classList.toggle('dark');
};
// Example: Add a button to toggle dark mode for testing (not part of the component itself)
// const darkToggleBtn = document.createElement('button');
// darkToggleBtn.textContent = 'Toggle Dark Mode';
// darkToggleBtn.onclick = toggleDarkMode;
// document.body.prepend(darkToggleBtn);
});
</script>관련 구성 요소
Brutalist CAPTCHA 구성 요소
회색조 색 구성표로 설계된 원시적이고 대담한 CAPTCHA 구성 요소로, 사용자 확인을 위한 대화형 기능을 포함하여 대시보드 인터페이스에 적합합니다.
Skeuomorphic CAPTCHA 구성 요소
적당히 복잡한 스큐어모픽 CAPTCHA 구성 요소는 기업용 블루 톤으로 설계되었으며 예약 및 예약 시스템에 적합합니다. 반응형 디자인과 다크 모드 지원이 특징이며 실제 디지털 요소를 모방합니다.
CAPTCHA 구성 요소
코드에서 영감을 받은 복잡한 CAPTCHA 구성 요소로, 캔디/달콤한 색 구성표가 있으며 소셜 미디어 인터페이스용으로 설계되었습니다. 반응형 레이아웃, 다크 모드 지원 및 대화형 요소를 제공합니다.