rays
768d02c840
Each in light and dark. The published palettes missed AA in 19 places, mostly Solarized and Catppuccin Latte, so each failing colour is moved the least distance, toward black or white, that clears every pair it is drawn in. Solarized dark's base0 had to rise to base1 to read on base02, so its dim sits between base2 and base1 to keep three steps of type. tests/contrast.js checks every palette against the pairs the page draws, and a border that matches the ground it sits on. Its first run caught Classic's links at 3.7:1 on the source list and Modern's faint at 4.3:1 on inputs; both are tuned. A failed toast moves to --panel, since the error colours are tuned for the page's grounds, not --raise. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
87 lines
3.4 KiB
HTML
87 lines
3.4 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="color-scheme" content="dark light">
|
|
<title>Sign in — iPodderX</title>
|
|
<link rel="icon" type="image/png" sizes="128x128" href="/favicon.png">
|
|
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
|
|
<style>
|
|
/* Inter, from ipx itself; see the same rule in index.html. */
|
|
@font-face{font-family:Inter;src:url(/inter.woff2) format("woff2");font-weight:100 900;font-display:swap}
|
|
:root {
|
|
--bg:#0e131b; /* the screen's navy (#314B74), taken right down */
|
|
--panel:#151c27;
|
|
--panel2:#1c2431;
|
|
--raise:#25303f;
|
|
--line:#2c3849;
|
|
--fg:#f5f5f5; /* #F5F5F5 device highlight */
|
|
--dim:#95a0b1; /* #95A0B1 straight from the icon's blue-grey */
|
|
--faint:#7e8b9c; /* lifted from the icon ramp until it clears AA at small sizes */
|
|
--accent:#92b2e6; /* #92B2E6 the screen blue */
|
|
--accent2:#f49e2c; /* #F49E2C the EQ bars */
|
|
--ink:#0e131b; /* text on an accent fill */
|
|
--good:#6fbf8b;
|
|
--warn:#f49e2c; /* the amber doubles as the pending colour */
|
|
--bad:#e2705f;
|
|
--shadow:0 8px 28px rgba(6,10,16,.55);
|
|
--r:10px;
|
|
}
|
|
/* Signed out, there is no account to take a theme from, so this follows the system. */
|
|
@media (prefers-color-scheme:light){:root {
|
|
--bg:#f2f4f7;
|
|
--panel:#ffffff; /* #FFFFFF device body */
|
|
--panel2:#e9edf3;
|
|
--raise:#dde3ec;
|
|
--line:#d6d6d6; /* #D6D6D6 device edge */
|
|
--fg:#1a1a1a; /* #1A1A1A icon outline */
|
|
--dim:#606060; /* #606060 */
|
|
--faint:#6b6b6b;
|
|
--accent:#2d5391; /* #2D5391 the deep screen blue reads better on white */
|
|
--accent2:#985e0a;
|
|
--ink:#ffffff;
|
|
--good:#2f7d4f;
|
|
--warn:#985e0a;
|
|
--bad:#b3402f;
|
|
--shadow:0 8px 28px rgba(45,83,145,.14);
|
|
}}
|
|
*{box-sizing:border-box}
|
|
html,body{height:100%}
|
|
body{
|
|
margin:0;display:grid;place-items:center;background:var(--bg);color:var(--fg);
|
|
font:14.5px/1.55 Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;padding:20px;
|
|
}
|
|
form{
|
|
width:min(360px,100%);background:var(--panel);border:1px solid var(--line);
|
|
border-radius:14px;padding:22px;box-shadow:var(--shadow);
|
|
}
|
|
/* The one place the 2004 icon is shown at the size it was drawn for. */
|
|
.brand{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:20px}
|
|
.brand img{width:96px;height:auto}
|
|
h1{font-size:21px;margin:0;font-weight:650;letter-spacing:-.01em}
|
|
label{display:block;font-size:12px;color:var(--dim);margin:0 0 4px}
|
|
input{
|
|
width:100%;background:var(--bg);border:1px solid var(--line);color:var(--fg);
|
|
border-radius:8px;padding:9px 11px;font:inherit;margin-bottom:13px;
|
|
}
|
|
input:focus{outline:0;border-color:var(--accent)}
|
|
button{
|
|
width:100%;font:inherit;font-weight:600;cursor:pointer;color:var(--ink);
|
|
background:var(--accent);border:0;border-radius:8px;padding:10px;
|
|
}
|
|
.msg{color:var(--bad);font-size:13px;min-height:19px;margin:10px 0 0;text-align:center}
|
|
button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
|
|
</style>
|
|
|
|
<form id="f">
|
|
<div class="brand"><img src="/icon.png" alt=""><h1>iPodderX</h1></div>
|
|
<label for="name">Name</label>
|
|
<input id="name" name="name" autocomplete="username" autofocus required>
|
|
<label for="pw">Password</label>
|
|
<input id="pw" name="password" type="password" autocomplete="current-password" required>
|
|
<button type="submit">Sign in</button>
|
|
<p class="msg" id="msg"></p>
|
|
</form>
|
|
|
|
<script data-src="web/src"></script>
|