rays
fc09e8a6b7
- The logo as favicon, squared up (it is 128x121), at /favicon.png and at /favicon.ico outside the auth layer, where a browser asking on its own got a 401; an apple-touch-icon on white (#32). - An item not yet downloaded had its download bar on a line of its own under the file icon, lifting the icon above its row's; the bar now sits under it without taking space (#31). - A feed error is Font Awesome's exclamation, hung in the margin where a folder's triangle is, in the same column; a folder holding a failing feed has its triangle turn red. Closes #31, #32. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
81 lines
3.2 KiB
HTML
81 lines
3.2 KiB
HTML
<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:#7a8799; /* 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;
|
|
}
|
|
:root[data-theme="light"] {
|
|
--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:#767676; /* between the icon's #929292 and #606060, to clear AA */
|
|
--accent:#2d5391; /* #2D5391 the deep screen blue reads better on white */
|
|
--accent2:#b06f10;
|
|
--ink:#ffffff;
|
|
--good:#2f7d4f;
|
|
--warn:#b06f10;
|
|
--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>
|