File size: 6,264 Bytes
923f7a2 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 |
<!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">
<!-- 3D Animated Background -->
<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>
<!-- Navigation -->
<custom-navbar></custom-navbar>
<!-- Main Content -->
<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>
<!-- Scripts -->
<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');
// Simulate login (replace with actual auth)
setTimeout(() => {
btnText.textContent = 'Success! Redirecting...';
setTimeout(() => {
window.location.href = 'index.html';
}, 1000);
}, 2000);
});
</script>
</body>
</html> |