rays
d8db785681
The logo on the page switched with the mode (#63), but the tab's icon was always favicon.png, the light logo. web/favicon-dark.png is logo-dark.svg at 128px, served beside it, and the theme script points the icon link at whichever matches data-mode, so it follows the theme the account chose, not only the system. The sign-in page, with no account, picks by the system's with two media-bound links. /favicon.ico, which a browser asks for on its own, stays the light one. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
89 lines
3.7 KiB
HTML
89 lines
3.7 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 — iPX</title>
|
|
<link rel="icon" type="image/png" sizes="128x128" href="/favicon.png" media="(prefers-color-scheme:light)">
|
|
<link rel="icon" type="image/png" sizes="128x128" href="/favicon-dark.png" media="(prefers-color-scheme:dark)">
|
|
<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:#0a1726; /* the dark logo's navy (#0c2238), taken down */
|
|
--panel:#0f1f31;
|
|
--panel2:#15283d;
|
|
--raise:#1d3450;
|
|
--line:#264060;
|
|
--fg:#f3f7fb;
|
|
--dim:#a3b6ca;
|
|
--faint:#8a9fb5;
|
|
--accent:#8fc2ea; /* #8FC2EA the dark logo's scale */
|
|
--accent2:#ff6a1a; /* #FF6A1A the dark logo's needle */
|
|
--ink:#0a1726; /* text on an accent fill */
|
|
--good:#6fbf8b;
|
|
--warn:#f5a524; /* amber, apart from the needle's orange, for pending */
|
|
--bad:#ff6b7a; /* pushed towards pink, apart from the needle */
|
|
--shadow:0 8px 28px rgba(4,10,20,.55);
|
|
--r:10px;
|
|
}
|
|
/* Modern, as app.css has it. Signed out, there is no account to take a theme from, so this follows
|
|
the system. */
|
|
@media (prefers-color-scheme:light){:root {
|
|
--bg:#eef5fb; /* the light logo's sky (#DFF0FB), paler */
|
|
--panel:#ffffff;
|
|
--panel2:#e4eff9;
|
|
--raise:#d5e6f5;
|
|
--line:#c6d9ea;
|
|
--fg:#10233a;
|
|
--dim:#46596e;
|
|
--faint:#56697e;
|
|
--accent:#2f6aa0; /* #2F6AA0 the logo's scale */
|
|
--accent2:#c43e00; /* the needle (#FF5500), taken down until white on it clears AA */
|
|
--ink:#ffffff;
|
|
--good:#2f7d4f;
|
|
--warn:#985e0a; /* amber, apart from the needle's orange; lighter failed AA as text */
|
|
--bad:#b3263a; /* pushed towards crimson, apart from the needle */
|
|
--shadow:0 8px 28px rgba(47,106,160,.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 logo is a square app icon, so it gets an app icon's corners. */
|
|
.brand{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:20px}
|
|
.brand img{width:72px;height:72px;border-radius:16px}
|
|
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"><picture><source media="(prefers-color-scheme:light)" srcset="/logo.svg"><img src="/logo-dark.svg" alt=""></picture><h1>iPX</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>
|