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