100 lines
4.7 KiB
HTML
100 lines
4.7 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>Swap Station – Login</title>
|
||
|
||
<!-- Inter font -->
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||
|
||
<!-- Tailwind CDN -->
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<script>
|
||
tailwind.config = {
|
||
theme: {
|
||
extend: {
|
||
fontFamily: { sans: ["Inter", "ui-sans-serif", "system-ui"] },
|
||
keyframes: {
|
||
float: { '0%,100%': { transform:'translateY(0)' }, '50%': { transform:'translateY(-8px)' } },
|
||
spinSlow: { '0%': { transform:'rotate(0)' }, '100%': { transform:'rotate(360deg)' } },
|
||
fadeUp: { '0%': { opacity:0, transform:'translateY(8px) scale(.98)' }, '100%': { opacity:1, transform:'translateY(0) scale(1)' } },
|
||
},
|
||
animation: {
|
||
float: 'float 6s ease-in-out infinite',
|
||
spinSlow: 'spinSlow 18s linear infinite',
|
||
fadeUp: 'fadeUp .45s ease-out forwards',
|
||
},
|
||
backgroundImage: {
|
||
grid: "radial-gradient(circle at 25px 25px, rgba(120,120,120,.15) 2px, transparent 2px)",
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
:root { color-scheme: dark; }
|
||
html, body { height: 100%; }
|
||
</style>
|
||
</head>
|
||
<body class="min-h-screen bg-[#0a0a0a] text-gray-100 relative overflow-hidden flex items-center justify-center">
|
||
|
||
<!-- Ambient glows -->
|
||
<div class="pointer-events-none absolute inset-0">
|
||
<div class="absolute -top-32 -left-32 w-[38rem] h-[38rem] rounded-full bg-gradient-to-br from-emerald-500/20 via-teal-400/10 to-cyan-400/10 blur-3xl animate-float"></div>
|
||
<div class="absolute -bottom-40 -right-40 w-[42rem] h-[42rem] rounded-full bg-gradient-to-tr from-sky-500/20 via-purple-500/10 to-fuchsia-400/10 blur-3xl animate-float" style="animation-delay:-2s"></div>
|
||
</div>
|
||
<div class="absolute inset-0 bg-grid bg-[length:100px_100px] opacity-[.08] [mask-image:radial-gradient(ellipse_at_center,black,transparent_70%)]"></div>
|
||
<div class="pointer-events-none absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[46rem] h-[46rem] rounded-full border border-emerald-400/10 animate-spinSlow"></div>
|
||
|
||
<!-- Main -->
|
||
<main class="relative z-10 w-full max-w-md">
|
||
<div class="rounded-2xl border border-white/10 bg-white/5 backdrop-blur-xl shadow-2xl ring-1 ring-white/10 p-8 animate-fadeUp">
|
||
<!-- Brand -->
|
||
<div class="flex flex-col items-center gap-3">
|
||
<img src="./assets/vec_logo.png" alt="VECMOCON" class="h-12 w-auto drop-shadow" onerror="this.style.display='none'"/>
|
||
<h1 class="text-3xl font-extrabold tracking-tight">Swap Station Dashboard</h1>
|
||
<p class="text-sm text-gray-400">Sign in to access your stations</p>
|
||
</div>
|
||
|
||
<!-- Error -->
|
||
<div id="error-message" class="mt-6 hidden rounded-lg border border-red-400/30 bg-red-500/10 px-4 py-3 text-sm text-red-200"></div>
|
||
|
||
<!-- Form -->
|
||
<form id="login-form" class="mt-6 space-y-5" autocomplete="on">
|
||
<div class="space-y-4">
|
||
<div class="relative">
|
||
<label for="username" class="sr-only">Username</label>
|
||
<input id="username" name="username" type="text" required
|
||
class="w-full rounded-xl border border-white/10 bg-white/5 px-3 py-3 text-white placeholder-gray-500 outline-none focus:ring-2 focus:ring-emerald-500/70 focus:border-emerald-500/40"
|
||
placeholder="Username" />
|
||
</div>
|
||
|
||
<div class="relative">
|
||
<label for="password" class="sr-only">Password</label>
|
||
<input id="password" name="password" type="password" required
|
||
class="w-full rounded-xl border border-white/10 bg-white/5 px-3 py-3 text-white placeholder-gray-500 outline-none focus:ring-2 focus:ring-emerald-500/70 focus:border-emerald-500/40"
|
||
placeholder="Password" />
|
||
</div>
|
||
</div>
|
||
|
||
<button type="submit"
|
||
class="relative w-full overflow-hidden rounded-xl bg-gradient-to-r from-emerald-500 via-teal-500 to-cyan-500 px-4 py-3 text-sm font-semibold text-white transition-transform duration-300 hover:scale-[1.02] focus:outline-none focus:ring-2 focus:ring-emerald-400/60">
|
||
Sign In
|
||
</button>
|
||
</form>
|
||
</div>
|
||
|
||
<p class="mt-6 text-center text-[11px] text-gray-500">© <span id="year"></span> VECMOCON • All rights reserved.</p>
|
||
</main>
|
||
|
||
<script>
|
||
document.getElementById('year').textContent = new Date().getFullYear();
|
||
</script>
|
||
<script src="./js/auth.js"></script>
|
||
</body>
|
||
</html>
|