Tom FluxandClaude Opus 5
8338374a8d
The board's dark theme is a saved preference, which there is no way to know before you're signed in, so the login page follows prefers-color-scheme instead. Palette taken from nullboard's .theme-dark. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01UU1vyTHj3uE9PJYSxRxwkU
148 lines
3.0 KiB
ERB
148 lines
3.0 KiB
ERB
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>ValidBoard</title>
|
|
<link rel="icon" href="/extras/favicon-16.png" sizes="16x16" type="image/png">
|
|
<style>
|
|
/* Barlow at nullboard's own sizes, so the login doesn't feel bolted on. */
|
|
@font-face {
|
|
font-family: 'f-barlow';
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
src: url('/extras/Barlow-Regular.woff') format('woff');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'f-barlow';
|
|
font-weight: 500;
|
|
font-style: normal;
|
|
src: url('/extras/Barlow-Medium.woff') format('woff');
|
|
}
|
|
|
|
html, body, input {
|
|
font-family: f-barlow, sans-serif;
|
|
font-size: 13px;
|
|
line-height: 17px;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
body {
|
|
background: #f8f9fb;
|
|
color: #333;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.box {
|
|
width: 260px;
|
|
margin-top: -60px; /* sit a little above centre */
|
|
padding: 0 20px 20px;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 18px;
|
|
font-weight: 500;
|
|
line-height: 24px;
|
|
margin: 0 0 2px;
|
|
color: #222;
|
|
}
|
|
|
|
.sub {
|
|
color: #999;
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
label {
|
|
display: block;
|
|
color: #999;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
input[type=password] {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 7px 9px;
|
|
border: 1px solid #dcdfe4;
|
|
border-radius: 3px;
|
|
background: #fff;
|
|
color: #333;
|
|
outline: none;
|
|
}
|
|
|
|
input[type=password]:focus {
|
|
border-color: #9fb4c7;
|
|
box-shadow: 0 0 0 2px rgba(159, 180, 199, .25);
|
|
}
|
|
|
|
button {
|
|
width: 100%;
|
|
margin-top: 12px;
|
|
padding: 8px;
|
|
border: 0;
|
|
border-radius: 3px;
|
|
background: #5c7a99;
|
|
color: #fff;
|
|
font-family: inherit;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
}
|
|
|
|
button:hover { background: #4e6b88; }
|
|
|
|
.error {
|
|
margin-bottom: 14px;
|
|
padding: 7px 9px;
|
|
border-radius: 3px;
|
|
background: #fdeaea;
|
|
color: #a33;
|
|
}
|
|
|
|
/* The board's own dark mode is a saved preference, which we can't know
|
|
before you're signed in — so follow the OS here instead. Colours are
|
|
nullboard's .theme-dark palette. */
|
|
@media (prefers-color-scheme: dark) {
|
|
body { background: #22272b; color: #b3b9c0; }
|
|
|
|
h1 { color: #d4d8dc; }
|
|
|
|
.sub, label { color: #6f7780; }
|
|
|
|
input[type=password] {
|
|
background: #2c3238;
|
|
border-color: #3b434b;
|
|
color: #d4d8dc;
|
|
}
|
|
|
|
input[type=password]:focus {
|
|
border-color: #5c7a99;
|
|
box-shadow: 0 0 0 2px rgba(92, 122, 153, .3);
|
|
}
|
|
|
|
.error { background: #3b2a2a; color: #e08585; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="box">
|
|
<h1>ValidBoard</h1>
|
|
<div class="sub">Sign in to your boards.</div>
|
|
|
|
<% if error %>
|
|
<div class="error"><%= Rack::Utils.escape_html(error) %></div>
|
|
<% end %>
|
|
|
|
<form method="post" action="/login">
|
|
<label for="password">Password</label>
|
|
<input type="password" id="password" name="password" autofocus autocomplete="current-password">
|
|
<button type="submit">Sign in</button>
|
|
</form>
|
|
</div>
|
|
</body>
|
|
</html>
|