73 lines
4.6 KiB
Plaintext
73 lines
4.6 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/tuta-amb/fontawesome-pro@latest/web/css/all.min.css">
|
|
<title>Sign In</title>
|
|
<style>
|
|
body {
|
|
background-color: #0f172a;
|
|
background-image: radial-gradient(at 0% 0%, hsla(253,16%,7%,1) 0, transparent 50%), radial-gradient(at 50% 0%, hsla(225,39%,30%,1) 0, transparent 50%), radial-gradient(at 100% 0%, hsla(339,49%,30%,1) 0, transparent 50%);
|
|
background-attachment: fixed;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="antialiased min-h-screen flex items-center justify-center p-4 text-gray-100">
|
|
<div class="w-full max-w-md">
|
|
<div class="bg-gray-800/80 backdrop-blur-lg shadow-2xl rounded-2xl overflow-hidden border border-white/10">
|
|
<div class="p-8 sm:p-10">
|
|
<div class="text-center mb-8">
|
|
<div class="flex justify-center mb-6">
|
|
<img src="/assets/img/logo.png" alt="Logo" class="h-20 w-auto">
|
|
</div>
|
|
<h3 class="text-3xl font-bold text-white tracking-tight">Paging Console</h3>
|
|
<p class="text-gray-400 mt-2">Please sign in to your account</p>
|
|
</div>
|
|
|
|
<% if (typeof error !== 'undefined' && error) { %>
|
|
<div class="bg-red-900/50 border-l-4 border-red-500 text-red-200 p-4 rounded-r mb-6 flex items-start gap-3" role="alert">
|
|
<i class="fa-solid fa-circle-exclamation mt-1"></i>
|
|
<div><%= error %></div>
|
|
</div>
|
|
<% } %>
|
|
|
|
<form action="/login" method="post" novalidate class="space-y-6">
|
|
<div>
|
|
<label for="username" class="block text-sm font-semibold text-gray-300 mb-2">Username</label>
|
|
<div class="relative">
|
|
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
|
<i class="fa-regular fa-user text-gray-500"></i>
|
|
</div>
|
|
<input id="username" name="username" type="text" class="block w-full pl-10 pr-3 py-3 border border-gray-600 rounded-xl shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all bg-gray-900/50 focus:bg-gray-900 text-white placeholder-gray-500" placeholder="Enter your username" required autofocus
|
|
value="<%= typeof username !== 'undefined' ? username : '' %>">
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="password" class="block text-sm font-semibold text-gray-300 mb-2">Password</label>
|
|
<div class="relative">
|
|
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
|
<i class="fa-regular fa-lock text-gray-500"></i>
|
|
</div>
|
|
<input id="password" name="password" type="password" class="block w-full pl-10 pr-3 py-3 border border-gray-600 rounded-xl shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all bg-gray-900/50 focus:bg-gray-900 text-white placeholder-gray-500" placeholder="••••••••" required>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center">
|
|
<input id="remember" name="remember" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-600 rounded cursor-pointer bg-gray-700">
|
|
<label class="ml-2 block text-sm text-gray-400 cursor-pointer select-none" for="remember">Remember me</label>
|
|
</div>
|
|
</div>
|
|
|
|
<button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-xl shadow-lg text-sm font-bold text-white bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transform transition-all hover:-translate-y-0.5 active:translate-y-0">
|
|
Sign in
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |