George Lambert
cb07f5b321
Some checks are pending
offline / test (push) Waiting to run
Match CS/sales/accounting/access-staff to the portal indigo system with dollar amounts, skip links, and empty states. Fleet replica actions move into overflow menus, roles become chips, Docs become cards, and the header copy reflects the 0.0.0.0 bind. Simulator uses the same shell (orange only for faults). Portal API keys are masked; admin customers edit in a drawer. Catalog uses system-ui. New UI-Docs repo holds screenshots, usage notes, and UI-REVIEW.pdf.
283 lines
12 KiB
HTML
283 lines
12 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Zappier Admin</title>
|
|
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='8' fill='%234f46e5'/%3E%3C/svg%3E"/>
|
|
<style>
|
|
:root {
|
|
--bg: #f4f5fb;
|
|
--panel: #ffffff;
|
|
--ink: #171a26;
|
|
--muted: #6b7186;
|
|
--line: #e5e7f0;
|
|
--accent: #4f46e5;
|
|
--accent-ink: #ffffff;
|
|
--accent-soft: #eef0fe;
|
|
--danger: #dc2626;
|
|
--ok: #047857;
|
|
--radius: 12px;
|
|
--shadow: 0 1px 2px rgba(23, 26, 38, 0.05), 0 8px 24px rgba(23, 26, 38, 0.06);
|
|
}
|
|
* { box-sizing: border-box; }
|
|
body {
|
|
margin: 0;
|
|
font-family: -apple-system, "SF Pro Text", "Segoe UI", "PingFang SC", sans-serif;
|
|
background: var(--bg);
|
|
color: var(--ink);
|
|
font-size: 14px;
|
|
}
|
|
|
|
/* ---------- Login ---------- */
|
|
#login {
|
|
min-height: 100vh;
|
|
display: grid;
|
|
place-items: center;
|
|
background: linear-gradient(160deg, #312e81 0%, #4f46e5 55%, #7c74f0 100%);
|
|
}
|
|
#login .card {
|
|
width: 360px;
|
|
background: var(--panel);
|
|
border-radius: 16px;
|
|
box-shadow: 0 24px 64px rgba(17, 12, 60, 0.35);
|
|
padding: 2rem;
|
|
}
|
|
#login h1 { font-size: 1.35rem; margin: 0 0 0.25rem; }
|
|
#login p.sub { color: var(--muted); margin: 0 0 1.5rem; }
|
|
#login label { display: block; font-weight: 600; font-size: 0.8rem; margin: 0.9rem 0 0.3rem; }
|
|
#login input {
|
|
width: 100%;
|
|
padding: 0.6rem 0.75rem;
|
|
border: 1px solid var(--line);
|
|
border-radius: 8px;
|
|
font-size: 0.95rem;
|
|
}
|
|
#login input:focus { outline: 2px solid var(--accent); border-color: transparent; }
|
|
#login button {
|
|
width: 100%;
|
|
margin-top: 1.4rem;
|
|
padding: 0.65rem;
|
|
border: 0;
|
|
border-radius: 8px;
|
|
background: var(--accent);
|
|
color: var(--accent-ink);
|
|
font-weight: 700;
|
|
font-size: 0.95rem;
|
|
cursor: pointer;
|
|
}
|
|
#login button:hover { filter: brightness(1.08); }
|
|
#login-error { color: var(--danger); font-size: 0.85rem; min-height: 1.2em; margin: 0.6rem 0 0; }
|
|
|
|
/* ---------- Shell ---------- */
|
|
#shell { display: none; min-height: 100vh; }
|
|
#shell.on { display: grid; grid-template-columns: 232px 1fr; }
|
|
aside {
|
|
background: var(--panel);
|
|
border-right: 1px solid var(--line);
|
|
padding: 1.25rem 0.9rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.25rem;
|
|
position: sticky;
|
|
top: 0;
|
|
height: 100vh;
|
|
}
|
|
.brand { display: flex; align-items: center; gap: 0.6rem; padding: 0.25rem 0.6rem 1.1rem; }
|
|
.brand .dot {
|
|
width: 30px; height: 30px; border-radius: 9px;
|
|
background: linear-gradient(140deg, var(--accent), #8b85f2);
|
|
display: grid; place-items: center; color: #fff; font-weight: 800;
|
|
}
|
|
.brand b { font-size: 1.02rem; }
|
|
nav button {
|
|
display: flex; align-items: center; gap: 0.55rem;
|
|
width: 100%;
|
|
border: 0; background: none;
|
|
text-align: left;
|
|
padding: 0.55rem 0.7rem;
|
|
border-radius: 8px;
|
|
font-size: 0.92rem;
|
|
color: var(--muted);
|
|
cursor: pointer;
|
|
}
|
|
nav button { min-height: 40px; }
|
|
nav button:hover { background: var(--bg); color: var(--ink); }
|
|
nav button.active { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
|
|
nav button:focus-visible, #logout:focus-visible, button.btn:focus-visible, a:focus-visible {
|
|
outline: 2px solid var(--accent); outline-offset: 2px;
|
|
}
|
|
.skip { position:absolute; left:-999px; }
|
|
.skip:focus { left:1rem; top:1rem; z-index:40; background:#fff; color:var(--accent); padding:.5rem .9rem; border-radius:8px; }
|
|
.empty { text-align:center; padding:1.6rem 1rem; color:var(--muted); }
|
|
.empty svg { display:block; margin:0 auto .6rem; }
|
|
.empty h3 { margin:0 0 .25rem; color:var(--ink); font-size:1rem; }
|
|
.drawer-backdrop { position:fixed; inset:0; background:rgba(23,26,38,.35); z-index:20; }
|
|
.drawer {
|
|
position:fixed; top:0; right:0; height:100vh; width:min(420px,100%);
|
|
background:#fff; box-shadow:-8px 0 32px rgba(23,26,38,.12); z-index:21;
|
|
padding:1.4rem 1.35rem 2rem; overflow:auto;
|
|
}
|
|
.drawer h2 { margin:0 0 .2rem; }
|
|
.drawer label { display:block; font-size:.72rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); margin:.85rem 0 .25rem; }
|
|
.drawer input, .drawer select { width:100%; }
|
|
aside .spacer { flex: 1; }
|
|
#logout {
|
|
border: 1px solid var(--line); background: none; border-radius: 8px;
|
|
padding: 0.5rem; color: var(--muted); cursor: pointer; font-size: 0.85rem;
|
|
}
|
|
#logout:hover { color: var(--danger); border-color: var(--danger); }
|
|
|
|
main { padding: 1.75rem 2rem 3rem; max-width: 1080px; }
|
|
main h2 { margin: 0 0 0.25rem; font-size: 1.3rem; }
|
|
main .lede { color: var(--muted); margin: 0 0 1.25rem; }
|
|
|
|
.card {
|
|
background: var(--panel);
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius);
|
|
box-shadow: var(--shadow);
|
|
padding: 1.1rem 1.25rem;
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
.card h3 { margin: 0 0 0.9rem; font-size: 0.95rem; }
|
|
|
|
table { border-collapse: collapse; width: 100%; }
|
|
th {
|
|
text-align: left; font-size: 0.72rem; text-transform: uppercase;
|
|
letter-spacing: 0.04em; color: var(--muted);
|
|
border-bottom: 1px solid var(--line); padding: 0.45rem 0.6rem;
|
|
}
|
|
td { border-bottom: 1px solid var(--line); padding: 0.55rem 0.6rem; }
|
|
tr:last-child td { border-bottom: 0; }
|
|
tbody tr:hover { background: #fafaff; }
|
|
td.id { font-family: "SF Mono", Menlo, monospace; font-size: 0.82rem; font-weight: 600; }
|
|
|
|
input, select {
|
|
padding: 0.4rem 0.55rem;
|
|
border: 1px solid var(--line);
|
|
border-radius: 7px;
|
|
font-size: 0.88rem;
|
|
background: #fff;
|
|
color: var(--ink);
|
|
}
|
|
input:focus, select:focus { outline: 2px solid var(--accent); border-color: transparent; }
|
|
input[type="number"] { width: 90px; }
|
|
.field { display: inline-flex; align-items: center; gap: 0.35rem; margin-right: 0.7rem; }
|
|
.field span { color: var(--muted); font-size: 0.78rem; font-family: "SF Mono", Menlo, monospace; }
|
|
|
|
button.btn {
|
|
border: 0; border-radius: 7px; padding: 0.42rem 0.85rem;
|
|
font-size: 0.85rem; font-weight: 600; cursor: pointer;
|
|
background: var(--accent); color: var(--accent-ink);
|
|
}
|
|
button.btn:hover { filter: brightness(1.08); }
|
|
button.btn.ghost { background: none; border: 1px solid var(--line); color: var(--muted); }
|
|
button.btn.ghost:hover { color: var(--danger); border-color: var(--danger); }
|
|
.row-actions { white-space: nowrap; text-align: right; }
|
|
.row-actions button { margin-left: 0.35rem; }
|
|
|
|
.pill {
|
|
display: inline-block; padding: 0.1rem 0.55rem; border-radius: 999px;
|
|
font-size: 0.72rem; font-weight: 700;
|
|
}
|
|
.pill.free { background: #ecfdf5; color: var(--ok); }
|
|
.pill.fixed { background: var(--accent-soft); color: var(--accent); }
|
|
.pill.variable { background: #fff7ed; color: #c2410c; }
|
|
.pill.draft { background: #f1f5f9; color: #475569; }
|
|
.pill.issued { background: #fff7ed; color: #c2410c; }
|
|
.pill.paid { background: #ecfdf5; color: var(--ok); }
|
|
.pill.stripe { background: var(--accent-soft); color: var(--accent); }
|
|
.pill.purchase_order { background: #fdf4ff; color: #a21caf; }
|
|
|
|
/* ---------- Accounting tabs ---------- */
|
|
.filterbar {
|
|
display: flex; flex-wrap: wrap; align-items: end; gap: 0.8rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
.filterbar label { display: flex; flex-direction: column; gap: 0.25rem; }
|
|
.filterbar label span {
|
|
font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em;
|
|
color: var(--muted); font-weight: 600;
|
|
}
|
|
.money { font-variant-numeric: tabular-nums; text-align: right; }
|
|
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.9rem; margin-bottom: 1.25rem; }
|
|
.stat {
|
|
background: var(--panel); border: 1px solid var(--line);
|
|
border-radius: var(--radius); box-shadow: var(--shadow);
|
|
padding: 0.9rem 1.1rem;
|
|
}
|
|
.stat .k { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
|
|
.stat .v { font-size: 1.35rem; font-weight: 800; margin-top: 0.2rem; font-variant-numeric: tabular-nums; }
|
|
.chart { width: 100%; height: auto; display: block; }
|
|
.chart .bar { fill: var(--accent); }
|
|
.chart .bar:hover { fill: #3730a3; }
|
|
.chart text { fill: var(--muted); font-size: 10px; font-family: inherit; }
|
|
.skip-list { margin: 0.6rem 0 0; padding-left: 1.1rem; color: var(--muted); font-size: 0.85rem; }
|
|
.kv { display: grid; grid-template-columns: 160px 1fr; row-gap: 0.45rem; }
|
|
.kv dt { color: var(--muted); font-size: 0.82rem; }
|
|
.kv dd { margin: 0; font-weight: 600; }
|
|
|
|
#status {
|
|
position: fixed; right: 1.25rem; bottom: 1.25rem;
|
|
background: var(--ink); color: #fff;
|
|
padding: 0.7rem 1.1rem; border-radius: 10px;
|
|
box-shadow: var(--shadow);
|
|
font-size: 0.88rem;
|
|
opacity: 0; transform: translateY(8px);
|
|
transition: opacity 0.2s, transform 0.2s;
|
|
max-width: 420px;
|
|
pointer-events: none;
|
|
}
|
|
#status.show { opacity: 1; transform: none; }
|
|
#status.error { background: var(--danger); }
|
|
.hint { color: var(--muted); font-size: 0.82rem; margin-top: 0.8rem; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<a class="skip" href="#main">Skip to content</a>
|
|
<section id="login">
|
|
<form class="card" id="login-form">
|
|
<h1>Zappier Admin</h1>
|
|
<p class="sub">Sign in to manage pricing, customer types, and customers.</p>
|
|
<label for="login-username">Username</label>
|
|
<input id="login-username" autocomplete="username" required />
|
|
<label for="login-password">Password</label>
|
|
<input id="login-password" type="password" autocomplete="current-password" required />
|
|
<p id="login-error"></p>
|
|
<button type="submit">Sign in</button>
|
|
</form>
|
|
</section>
|
|
|
|
<div id="shell">
|
|
<aside>
|
|
<div class="brand"><span class="dot">Z</span><b>Zappier</b></div>
|
|
<nav>
|
|
<button data-tab="endpoints" class="active">▦ Rate card</button>
|
|
<button data-tab="tiers">◈ Customer types</button>
|
|
<button data-tab="customers">☺ Customers</button>
|
|
<button data-tab="statement">☰ Statement</button>
|
|
<button data-tab="invoices">▤ Invoices</button>
|
|
<button data-tab="reports">↗ Reports</button>
|
|
<button data-tab="system">⚙ System</button>
|
|
<button data-tab="users">♟ Users</button>
|
|
</nav>
|
|
<div class="spacer"></div>
|
|
<button id="logout">Sign out</button>
|
|
</aside>
|
|
<main id="main">
|
|
<section id="endpoints"></section>
|
|
<section id="tiers" hidden></section>
|
|
<section id="customers" hidden></section>
|
|
<section id="statement" hidden></section>
|
|
<section id="invoices" hidden></section>
|
|
<section id="reports" hidden></section>
|
|
<section id="system" hidden></section>
|
|
<section id="users" hidden></section>
|
|
</main>
|
|
</div>
|
|
<div id="drawer-root"></div>
|
|
<p id="status"></p>
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|