<div class="min-h-screen flex items-center justify-center p-4 bg-gradient-to-br from-stone-100 to-amber-50 dark:from-stone-900 dark:to-orange-950 transition-all duration-500">
<div class="w-full max-w-md rounded-2xl shadow-xl overflow-hidden bg-white dark:bg-stone-800 transition-all duration-500 transform hover:scale-[1.01]">
<div class="relative p-8 sm:p-10 bg-gradient-to-tr from-stone-400 to-amber-600 dark:from-stone-700 dark:to-orange-800 text-white">
<h2 id="form-title" class="text-3xl sm:text-4xl font-extrabold text-center drop-shadow-md leading-tight">
Welcome,
<br class="sm:hidden"/>
Future Talent!
</h2>
<p class="mt-3 text-center opacity-90 text-sm sm:text-base">
Find your dream job or connect with top employers.
</p>
<div class="absolute inset-0 z-0 opacity-20">
<img src="https://picsum.photos/600/400?random=1" alt="Abstract background" class="w-full h-full object-cover" />
</div>
</div>
<div class="p-8 sm:p-10">
<div class="flex mb-6 rounded-lg overflow-hidden bg-stone-100 dark:bg-stone-700 shadow-inner">
<button
id="login-tab"
class="flex-1 py-3 px-4 text-center text-lg font-semibold rounded-lg
bg-gradient-to-r from-amber-600 to-orange-700 text-white shadow-md
dark:from-orange-700 dark:to-stone-600 transition-all duration-300 transform scale-105"
aria-controls="login-form" role="tab" aria-selected="true"
>
Login
</button>
<button
id="signup-tab"
class="flex-1 py-3 px-4 text-center text-lg font-medium text-stone-600 rounded-lg
dark:text-stone-300 hover:text-amber-800 dark:hover:text-amber-300 transition-colors duration-300 hover:bg-stone-50 dark:hover:bg-stone-600"
aria-controls="signup-form" role="tab" aria-selected="false"
>
Sign Up
</button>
</div>
<form id="login-form" class="space-y-6" aria-labelledby="form-title" role="tabpanel">
<div>
<label for="login-email" class="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-2">Email Address</label>
<input
type="email"
id="login-email"
name="email"
autocomplete="email"
required
class="w-full px-4 py-3 border border-stone-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-amber-500
dark:bg-stone-700 dark:border-stone-600 dark:text-white dark:focus:ring-amber-400 dark:focus:border-amber-400 transition-all duration-200"
placeholder="[email protected]"
/>
</div>
<div>
<label for="login-password" class="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-2">Password</label>
<input
type="password"
id="login-password"
name="password"
autocomplete="current-password"
required
class="w-full px-4 py-3 border border-stone-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-amber-500
dark:bg-stone-700 dark:border-stone-600 dark:text-white dark:focus:ring-amber-400 dark:focus:border-amber-400 transition-all duration-200"
placeholder="********"
/>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center">
<input
id="remember-me"
name="remember-me"
type="checkbox"
class="h-4 w-4 text-amber-600 focus:ring-amber-500 border-stone-300 rounded dark:text-amber-500 dark:focus:ring-amber-400 dark:border-stone-600"
/>
<label for="remember-me" class="ml-2 block text-sm text-stone-900 dark:text-stone-200">Remember me</label>
</div>
<a href="#" class="text-sm font-medium text-amber-600 hover:text-amber-800 dark:text-amber-400 dark:hover:text-amber-300 transition-colors duration-200">Forgot password?</a>
</div>
<button
type="submit"
class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-lg font-semibold text-white
bg-gradient-to-r from-amber-600 to-orange-700 hover:from-amber-700 hover:to-orange-800
dark:from-orange-800 dark:to-orange-900 dark:hover:from-orange-900 dark:hover:to-stone-900
focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 dark:focus:ring-offset-stone-800 dark:focus:ring-orange-600
transition-all duration-300 transform hover:scale-[1.01] active:scale-[0.99]"
>
Login
</button>
</form>
<form id="signup-form" class="space-y-6 hidden" aria-labelledby="form-title" role="tabpanel">
<div>
<label for="signup-name" class="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-2">Full Name</label>
<input
type="text"
id="signup-name"
name="name"
autocomplete="name"
required
class="w-full px-4 py-3 border border-stone-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-amber-500
dark:bg-stone-700 dark:border-stone-600 dark:text-white dark:focus:ring-amber-400 dark:focus:border-amber-400 transition-all duration-200"
placeholder="John Doe"
/>
</div>
<div>
<label for="signup-email" class="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-2">Email Address</label>
<input
type="email"
id="signup-email"
name="email"
autocomplete="email"
required
class="w-full px-4 py-3 border border-stone-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-amber-500
dark:bg-stone-700 dark:border-stone-600 dark:text-white dark:focus:ring-amber-400 dark:focus:border-amber-400 transition-all duration-200"
placeholder="[email protected]"
/>
</div>
<div>
<label for="signup-password" class="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-2">Password</label>
<input
type="password"
id="signup-password"
name="password"
autocomplete="new-password"
required
class="w-full px-4 py-3 border border-stone-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-amber-500
dark:bg-stone-700 dark:border-stone-600 dark:text-white dark:focus:ring-amber-400 dark:focus:border-amber-400 transition-all duration-200"
placeholder="Minimum 8 characters"
/>
</div>
<button
type="submit"
class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-lg font-semibold text-white
bg-gradient-to-r from-amber-600 to-orange-700 hover:from-amber-700 hover:to-orange-800
dark:from-orange-800 dark:to-orange-900 dark:hover:from-orange-900 dark:hover:to-stone-900
focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 dark:focus:ring-offset-stone-800 dark:focus:ring-orange-600
transition-all duration-300 transform hover:scale-[1.01] active:scale-[0.99]"
>
Sign Up
</button>
</form>
<div class="mt-8 text-center">
<p class="text-sm text-stone-600 dark:text-stone-400">
Or continue with
</p>
<div class="mt-4 flex justify-center space-x-4">
<button class="p-3 rounded-full bg-stone-100 dark:bg-stone-700 text-stone-700 dark:text-stone-300 hover:bg-stone-200 dark:hover:bg-stone-600 transition-colors shadow flex items-center justify-center">
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M12.0003 12.721C14.0506 12.721 15.6565 12.0299 16.7909 10.9234L19.4636 13.5961C17.7533 15.2259 15.2891 16.2737 12.0003 16.2737C7.4 16.2737 3.5332 13.2981 1.9996 9.27856L5.37482 6.67139C6.20817 8.8951 8.878 10.2737 12.0003 10.2737C13.2514 10.2737 14.4093 10.0245 15.4206 9.61056L18.8094 12.2797C17.4786 12.637 15.7009 12.721 12.0003 12.721Z" fill="#EA4335"/>
<path d="M23.6393 12.0003C23.6393 11.1017 23.5701 10.4284 23.4184 9.7712L12.0003 9.7712L12.0003 14.281L18.3754 14.281C18.0487 15.7531 17.1504 16.9404 15.9381 17.7471L19.313 20.3542C21.4116 18.2307 22.8711 15.3409 23.6393 12.0003Z" fill="#4285F4"/>
<path d="M12.0003 23.639C15.2891 23.639 18.0818 22.5694 20.0883 20.7381L16.7136 18.1309C15.8236 18.7303 14.5492 19.1678 12.0003 19.1678C8.80877 19.1678 6.13883 17.5517 4.90849 14.9446L1.5332 17.5517C3.39167 21.0506 7.4 23.639 12.0003 23.639Z" fill="#34A853"/>
<path d="M4.90849 14.9446C4.46048 13.7918 4.22559 12.4497 4.22559 11.0002C4.22559 9.5507 4.46048 8.20857 4.90849 7.05574L1.5332 4.44856C0.540866 6.3106 0 8.5804 0 11.0002C0 13.4199 0.540866 15.6897 1.5332 17.5517L4.90849 14.9446Z" fill="#FBBC04"/>
</svg>
</button>
<button class="p-3 rounded-full bg-stone-100 dark:bg-stone-700 text-stone-700 dark:text-stone-300 hover:bg-stone-200 dark:hover:bg-stone-600 transition-colors shadow flex items-center justify-center">
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M19.0303 1.25H4.96963C3.06748 1.25 1.5 2.81748 1.5 4.71963V19.0303C1.5 20.9325 3.06748 22.5 4.96963 22.5H19.0303C20.9325 22.5 22.5 20.9325 22.5 19.0303V4.96963C22.5 3.06748 20.9325 1.5 19.0303 1.5V1.25ZM11.9999 18.0002C8.70992 18.0002 6 15.2903 6 11.9999C6 8.70992 8.70992 6 11.9999 6C15.2903 6 18.0002 8.70992 18.0002 11.9999C18.0002 15.2903 15.2903 18.0002 11.9999 18.0002ZM19.5 7.275C18.8407 7.275 18.3 6.73427 18.3 6.075C18.3 5.41573 18.8407 4.875 19.5 4.875C20.1593 4.875 20.7 5.41573 20.7 6.075C20.7 6.73427 20.1593 7.275 19.5 7.275ZM11.9999 16.5C14.4852 16.5 16.5002 14.4852 16.5002 11.9999C16.5002 9.5146 14.4852 7.5 11.9999 7.5C9.5146 7.5 7.5 9.5146 7.5 11.9999C7.5 14.4852 9.5146 16.5 11.9999 16.5Z" fill="#C13584"/>
</svg>
</button>
<button class="p-3 rounded-full bg-stone-100 dark:bg-stone-700 text-stone-700 dark:text-stone-300 hover:bg-stone-200 dark:hover:bg-stone-600 transition-colors shadow flex items-center justify-center">
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M22.28 6.02C21.69 5.09 20.59 4.34 19.34 4.08C17.76 3.75 12 3.75 12 3.75C12 3.75 6.24 3.75 4.66 4.08C3.41 4.34 2.31 5.09 1.72 6.02C1.29 6.64 1.05 7.42 1.05 8.23C1.05 9.04 1.29 9.82 1.72 10.45L12 19.64L22.28 10.45C22.71 9.82 22.95 9.04 22.95 8.23C22.95 7.42 22.71 6.64 22.28 6.02Z" fill="#FF0000"/>
<path d="M9.75 15.22L7.31 12.78L6.2 13.91L9.75 17.45L17.81 9.39L16.7 8.28L9.75 15.22Z" fill="#FFFFFF"/>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
<script>
const loginTab = document.getElementById('login-tab');
const signupTab = document.getElementById('signup-tab');
const loginForm = document.getElementById('login-form');
const signupForm = document.getElementById('signup-form');
loginTab.addEventListener('click', () => {
loginTab.classList.remove('bg-stone-100', 'dark:bg-stone-700', 'text-stone-600', 'dark:text-stone-300', 'hover:text-amber-800', 'dark:hover:text-amber-300', 'hover:bg-stone-50', 'dark:hover:bg-stone-600', 'font-medium');
loginTab.classList.add('bg-gradient-to-r', 'from-amber-600', 'to-orange-700', 'text-white', 'shadow-md', 'dark:from-orange-700', 'dark:to-stone-600', 'font-semibold', 'scale-105');
loginTab.setAttribute('aria-selected', 'true');
signupTab.classList.remove('bg-gradient-to-r', 'from-amber-600', 'to-orange-700', 'text-white', 'shadow-md', 'dark:from-orange-700', 'dark:to-stone-600', 'font-semibold', 'scale-105');
signupTab.classList.add('bg-stone-100', 'dark:bg-stone-700', 'text-stone-600', 'dark:text-stone-300', 'hover:text-amber-800', 'dark:hover:text-amber-300', 'hover:bg-stone-50', 'dark:hover:bg-stone-600', 'font-medium');
signupTab.setAttribute('aria-selected', 'false');
loginForm.classList.remove('hidden');
signupForm.classList.add('hidden');
});
signupTab.addEventListener('click', () => {
signupTab.classList.remove('bg-stone-100', 'dark:bg-stone-700', 'text-stone-600', 'dark:text-stone-300', 'hover:text-amber-800', 'dark:hover:text-amber-300', 'hover:bg-stone-50', 'dark:hover:bg-stone-600', 'font-medium');
signupTab.classList.add('bg-gradient-to-r', 'from-amber-600', 'to-orange-700', 'text-white', 'shadow-md', 'dark:from-orange-700', 'dark:to-stone-600', 'font-semibold', 'scale-105');
signupTab.setAttribute('aria-selected', 'true');
loginTab.classList.remove('bg-gradient-to-r', 'from-amber-600', 'to-orange-700', 'text-white', 'shadow-md', 'dark:from-orange-700', 'dark:to-stone-600', 'font-semibold', 'scale-105');
loginTab.classList.add('bg-stone-100', 'dark:bg-stone-700', 'text-stone-600', 'dark:text-stone-300', 'hover:text-amber-800', 'dark:hover:text-amber-300', 'hover:bg-stone-50', 'dark:hover:bg-stone-600', 'font-medium');
loginTab.setAttribute('aria-selected', 'false');
signupForm.classList.remove('hidden');
loginForm.classList.add('hidden');
});
// Initial state for dark mode (if system prefers dark mode)
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.documentElement.classList.add('dark');
}
</script>
