46 lines
2.0 KiB
HTML
46 lines
2.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title>Login — frp Admin</title>
|
|
<style>
|
|
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
|
|
:root{--bg:#fff;--bg2:#f5f5f5;--fg:#000;--fg2:#888;--border:#ddd;--accent:#000;--font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;--radius:0}
|
|
@media(prefers-color-scheme:dark){
|
|
:root{--bg:#000;--bg2:#111;--fg:#fff;--fg2:#666;--border:#333;--accent:#fff}
|
|
}
|
|
html,body{height:100%}
|
|
body{font-family:var(--font);background:var(--bg2);color:var(--fg);font-size:14px;display:flex;align-items:center;justify-content:center;min-height:100vh}
|
|
.login-card{width:360px;padding:32px;background:var(--bg);border:1px solid var(--border)}
|
|
.login-card h1{font-size:20px;margin-bottom:24px;text-align:center;letter-spacing:-.5px}
|
|
.login-card .field{margin-bottom:16px}
|
|
.login-card .field label{display:block;font-size:12px;color:var(--fg2);margin-bottom:4px}
|
|
.login-card .error{font-size:13px;margin-bottom:12px;text-align:center}
|
|
input{padding:8px 12px;border:1px solid var(--border);background:var(--bg);color:var(--fg);font-size:13px;width:100%;-webkit-appearance:none;appearance:none}
|
|
input:focus{outline:1px solid var(--fg)}
|
|
button{padding:8px 16px;border:1px solid var(--fg);background:var(--fg);color:var(--bg);font-size:13px;cursor:pointer;font-family:var(--font);width:100%}
|
|
button:hover{opacity:.8}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="login-card">
|
|
<h1>frp Admin</h1>
|
|
{{if .Error}}
|
|
<div class="error">{{.Error}}</div>
|
|
{{end}}
|
|
<form method="post" action="/admin/login">
|
|
<div class="field">
|
|
<label for="username">Username</label>
|
|
<input type="text" id="username" name="username" required autofocus>
|
|
</div>
|
|
<div class="field">
|
|
<label for="password">Password</label>
|
|
<input type="password" id="password" name="password" required>
|
|
</div>
|
|
<button type="submit">Sign In</button>
|
|
</form>
|
|
</div>
|
|
</body>
|
|
</html>
|