|
|
<!DOCTYPE html> |
|
|
<html lang="en" data-theme="dark"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Login | Vortex Cortex</title> |
|
|
<link rel="icon" type="image/x-icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🌀</text></svg>"> |
|
|
<link rel="stylesheet" href="style.css"> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
|
|
</head> |
|
|
<body class="bg-slate-950 text-white min-h-screen overflow-hidden"> |
|
|
|
|
|
<div class="fixed inset-0 z-0"> |
|
|
<div class="absolute inset-0 bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950"></div> |
|
|
<div class="absolute inset-0 opacity-30"> |
|
|
<canvas id="neural-canvas"></canvas> |
|
|
</div> |
|
|
<div class="absolute top-20 left-10 w-72 h-72 bg-primary-500/20 rounded-full blur-3xl animate-float"></div> |
|
|
<div class="absolute bottom-20 right-10 w-96 h-96 bg-secondary-500/20 rounded-full blur-3xl animate-float" style="animation-delay: -3s;"></div> |
|
|
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-accent-500/10 rounded-full blur-3xl animate-pulse-slow"></div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<custom-navbar></custom-navbar> |
|
|
|
|
|
|
|
|
<main class="relative z-10 flex items-center justify-center min-h-[90vh] px-4"> |
|
|
<div class="w-full max-w-md glass-panel rounded-3xl p-8 md:p-12 transform transition-all duration-500 hover:scale-[1.02]"> |
|
|
<div class="text-center mb-10"> |
|
|
<div class="w-20 h-20 mx-auto mb-6 rounded-2xl bg-gradient-to-r from-primary-500 to-secondary-500 flex items-center justify-center animate-pulse-slow"> |
|
|
<span class="text-3xl">🌀</span> |
|
|
</div> |
|
|
<h1 class="text-3xl md:text-4xl font-bold mb-2">Welcome Back</h1> |
|
|
<p class="text-slate-400">Sign in to access your creations</p> |
|
|
</div> |
|
|
|
|
|
<form id="login-form" class="space-y-6"> |
|
|
<div class="space-y-4"> |
|
|
<div class="relative group"> |
|
|
<label for="email" class="block text-sm font-medium text-slate-400 mb-1 group-focus-within:text-primary-400 transition-colors">Email</label> |
|
|
<div class="relative"> |
|
|
<input type="email" id="email" required |
|
|
class="w-full px-4 py-3 bg-slate-900/50 border border-slate-800 rounded-xl focus:border-primary-500 focus:ring-2 focus:ring-primary-500/30 outline-none transition-all duration-300" |
|
|
placeholder="your@email.com"> |
|
|
<div class="absolute inset-0 rounded-xl border border-primary-500 opacity-0 group-focus-within:opacity-100 pointer-events-none transition-opacity duration-300"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="relative group"> |
|
|
<div class="flex items-center justify-between mb-1"> |
|
|
<label for="password" class="block text-sm font-medium text-slate-400 group-focus-within:text-primary-400 transition-colors">Password</label> |
|
|
<a href="#forgot" class="text-xs text-primary-400 hover:text-primary-300 transition-colors">Forgot password?</a> |
|
|
</div> |
|
|
<div class="relative"> |
|
|
<input type="password" id="password" required |
|
|
class="w-full px-4 py-3 bg-slate-900/50 border border-slate-800 rounded-xl focus:border-primary-500 focus:ring-2 focus:ring-primary-500/30 outline-none transition-all duration-300" |
|
|
placeholder="••••••••"> |
|
|
<div class="absolute inset-0 rounded-xl border border-primary-500 opacity-0 group-focus-within:opacity-100 pointer-events-none transition-opacity duration-300"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center"> |
|
|
<input type="checkbox" id="remember" class="w-4 h-4 rounded bg-slate-900 border-slate-700 focus:ring-primary-500"> |
|
|
<label for="remember" class="ml-2 text-sm text-slate-400">Remember me</label> |
|
|
</div> |
|
|
|
|
|
<button type="submit" class="w-full py-3 px-6 bg-gradient-to-r from-primary-500 to-secondary-500 rounded-xl font-semibold text-white shadow-lg hover:shadow-primary-500/30 transition-all duration-300 flex items-center justify-center gap-2"> |
|
|
<span id="login-text">Sign In</span> |
|
|
<span id="login-spinner" class="hidden animate-spin"> |
|
|
<i data-feather="loader" class="w-5 h-5"></i> |
|
|
</span> |
|
|
</button> |
|
|
</form> |
|
|
|
|
|
<div class="mt-8 text-center text-sm text-slate-500"> |
|
|
Don't have an account? |
|
|
<a href="#signup" class="text-primary-400 hover:text-primary-300 transition-colors font-medium">Sign up</a> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
|
|
|
<script src="components/navbar.js"></script> |
|
|
<script src="script.js"></script> |
|
|
<script> |
|
|
feather.replace(); |
|
|
|
|
|
document.getElementById('login-form').addEventListener('submit', function(e) { |
|
|
e.preventDefault(); |
|
|
|
|
|
const btnText = document.getElementById('login-text'); |
|
|
const spinner = document.getElementById('login-spinner'); |
|
|
|
|
|
btnText.textContent = 'Authenticating...'; |
|
|
spinner.classList.remove('hidden'); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
btnText.textContent = 'Success! Redirecting...'; |
|
|
setTimeout(() => { |
|
|
window.location.href = 'index.html'; |
|
|
}, 1000); |
|
|
}, 2000); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
