169426a6d8
Introduces services/targo-hub/lib/ui/ as the shared kit for every magic-link
page served from the hub (tech mobile, acceptance, payments):
design.css tokens (--brand, --success, etc) + reset + all primitives
components.js server-side HTML builders (badge/section/card/panel/statRow/
tabBar) + shared date helpers (fmtTime/dateLabelFr/montrealDate)
+ canonical STATUS_META
client.js client-side api wrapper ($, toast, api.get/post, router.on/go)
baked into every page — no more hand-rolled fetch+hashchange
scanner.js Gemini field-scan overlay (window.scanner.open(field,label,cb,ctx))
shell.js ui.page({title, body, bootVars, cfg, script, includeScanner})
inlines everything into one self-contained HTML doc
index.js barrel
Migrates tech-mobile.js to the kit:
- drops inline esc/toast/fmtTime/dlbl/STATUS_META/badge helpers
- api.post('/status', {...}) instead of fetch(H+'/t/'+T+'/status', {...})
- router.on('#job/:name', handler) instead of hand-rolled route()
- scanner.open(field, label, cb, ctx) instead of ~60 lines of field-scan logic
Behavior preserved — rendered HTML keeps tabs, detail view, notes editor,
photo upload, per-field Gemini scans, Montreal-TZ date labels, v16 link-label
resolution. Verified live at msg.gigafibre.ca with a real TECH-4 token.
Sets up acceptance.js and payments.js to drop from ~700 → ~300 lines each
in the next commits by consuming the same primitives.
365 lines
14 KiB
CSS
365 lines
14 KiB
CSS
/* ─────────────────────────────────────────────────────────────────────────────
|
|
Targo design tokens + primitives
|
|
Used by every magic-link page served from targo-hub (tech, acceptance, pay).
|
|
One place to tweak brand colors, spacing, radii, shadows.
|
|
───────────────────────────────────────────────────────────────────────────── */
|
|
|
|
:root {
|
|
/* Brand */
|
|
--brand: #5c59a8;
|
|
--brand-dark: #3f3d7a;
|
|
--brand-soft: #eef2ff;
|
|
--brand-tint: #ddd8ff;
|
|
|
|
/* Semantic status */
|
|
--success: #22c55e;
|
|
--success-dark: #16a34a;
|
|
--success-soft: #dcfce7;
|
|
--warning: #f59e0b;
|
|
--warning-dark: #d97706;
|
|
--warning-soft: #fef3c7;
|
|
--danger: #ef4444;
|
|
--danger-dark: #dc2626;
|
|
--danger-soft: #fee2e2;
|
|
--info: #818cf8;
|
|
--info-soft: #e0e7ff;
|
|
|
|
/* Neutrals */
|
|
--bg: #f1f5f9;
|
|
--surface: #fff;
|
|
--surface-alt: #f8fafc;
|
|
--border: #e2e8f0;
|
|
--border-soft: #f1f5f9;
|
|
--text: #0f172a;
|
|
--text-muted: #64748b;
|
|
--text-dim: #94a3b8;
|
|
|
|
/* Motion */
|
|
--tap-scale: .985;
|
|
--t-fast: .15s;
|
|
--t-med: .25s;
|
|
}
|
|
|
|
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
|
|
|
|
html, body { min-height: 100%; }
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
-webkit-text-size-adjust: 100%;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
/* ── Header (brand gradient) ───────────────────────────────────────────── */
|
|
.hdr {
|
|
background: linear-gradient(135deg, var(--brand-dark), var(--brand));
|
|
color: #fff;
|
|
padding: 14px 16px 28px;
|
|
border-radius: 0 0 18px 18px;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
.hdr-d { font-size: 12px; opacity: .75; text-transform: capitalize; }
|
|
.hdr-n { font-size: 19px; font-weight: 700; margin: 2px 0 12px; display: flex; align-items: center; gap: 8px; }
|
|
.hdr-n .ic {
|
|
width: 32px; height: 32px; border-radius: 50%;
|
|
background: rgba(255,255,255,.2);
|
|
display: flex; align-items: center; justify-content: center; font-size: 16px;
|
|
}
|
|
|
|
/* ── Stat row inside header ────────────────────────────────────────────── */
|
|
.sts { display: flex; gap: 8px; }
|
|
.st {
|
|
flex: 1;
|
|
background: rgba(255,255,255,.14);
|
|
border-radius: 10px;
|
|
padding: 10px 4px;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
transition: background var(--t-fast);
|
|
}
|
|
.st:active { background: rgba(255,255,255,.24); }
|
|
.st b { display: block; font-size: 19px; font-weight: 700; }
|
|
.st small { font-size: 10px; opacity: .75; letter-spacing: .3px; }
|
|
|
|
/* ── Page wrap ─────────────────────────────────────────────────────────── */
|
|
.wrap { padding: 14px 12px; margin-top: -14px; }
|
|
|
|
/* ── Section heading ───────────────────────────────────────────────────── */
|
|
.sec {
|
|
font-size: 11px; font-weight: 700; color: var(--brand);
|
|
letter-spacing: 1.2px; margin: 16px 4px 8px; text-transform: uppercase;
|
|
display: flex; align-items: center; gap: 8px;
|
|
}
|
|
.sec .cnt {
|
|
background: var(--brand-tint); color: var(--brand);
|
|
padding: 1px 7px; border-radius: 10px; font-size: 10px;
|
|
}
|
|
.sec.danger { color: var(--danger); }
|
|
.sec.danger .cnt { background: var(--danger-soft); color: var(--danger); }
|
|
|
|
/* ── Card ──────────────────────────────────────────────────────────────── */
|
|
.card {
|
|
background: var(--surface);
|
|
border-radius: 12px;
|
|
padding: 12px;
|
|
margin-bottom: 10px;
|
|
box-shadow: 0 1px 2px rgba(15,23,42,.06);
|
|
transition: transform .1s;
|
|
}
|
|
.card[onclick], .card.tappable { cursor: pointer; }
|
|
.card[onclick]:active, .card.tappable:active { transform: scale(var(--tap-scale)); }
|
|
.card.dim { opacity: .6; }
|
|
.card.od { box-shadow: 0 1px 2px rgba(239,68,68,.15), 0 0 0 1px #fecaca; }
|
|
|
|
/* ── Badge ─────────────────────────────────────────────────────────────── */
|
|
.bdg {
|
|
padding: 2px 8px; border-radius: 8px;
|
|
font-size: 10px; font-weight: 700; letter-spacing: .2px;
|
|
display: inline-block;
|
|
}
|
|
|
|
/* ── Row ───────────────────────────────────────────────────────────────── */
|
|
.row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
|
|
|
|
/* ── Inputs ────────────────────────────────────────────────────────────── */
|
|
.inp {
|
|
padding: 10px 12px;
|
|
border: 1.5px solid var(--border);
|
|
border-radius: 10px;
|
|
font-size: 14px;
|
|
background: var(--surface);
|
|
font-family: inherit;
|
|
outline: none;
|
|
width: 100%;
|
|
}
|
|
.inp:focus { border-color: var(--brand); }
|
|
textarea.inp { resize: vertical; min-height: 90px; }
|
|
|
|
/* ── Buttons ───────────────────────────────────────────────────────────── */
|
|
.btn {
|
|
padding: 12px 16px; border: none; border-radius: 10px;
|
|
font-family: inherit; font-weight: 700; font-size: 14px;
|
|
cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
|
|
transition: background var(--t-fast), transform .1s;
|
|
}
|
|
.btn:active { transform: scale(var(--tap-scale)); }
|
|
.btn:disabled { opacity: .5; pointer-events: none; }
|
|
.btn-pri { background: var(--brand); color: #fff; }
|
|
.btn-pri:active { background: var(--brand-dark); }
|
|
.btn-ok { background: var(--success); color: #fff; }
|
|
.btn-ok:active { background: var(--success-dark); }
|
|
.btn-warn { background: var(--warning); color: #fff; }
|
|
.btn-danger { background: var(--danger); color: #fff; }
|
|
.btn-danger:active { background: var(--danger-dark); }
|
|
.btn-ghost { background: var(--brand-soft); color: var(--brand); }
|
|
.btn-ghost:active { background: var(--brand-tint); }
|
|
.btn-muted { background: var(--border-soft); color: var(--text-muted); }
|
|
.btn-block { width: 100%; }
|
|
.btn-sm { padding: 9px 12px; font-size: 13px; border-radius: 8px; }
|
|
|
|
/* ── Empty state ───────────────────────────────────────────────────────── */
|
|
.empty {
|
|
text-align: center;
|
|
padding: 50px 24px;
|
|
color: var(--text-dim);
|
|
}
|
|
.empty .em { font-size: 44px; margin-bottom: 8px; opacity: .5; }
|
|
|
|
.placeholder {
|
|
background: var(--surface);
|
|
border-radius: 12px;
|
|
padding: 40px 24px;
|
|
text-align: center;
|
|
color: var(--text-dim);
|
|
margin-top: 14px;
|
|
}
|
|
.placeholder .em { font-size: 48px; margin-bottom: 10px; opacity: .5; }
|
|
.placeholder h2 { font-size: 16px; color: #475569; margin-bottom: 6px; }
|
|
.placeholder p { font-size: 13px; line-height: 1.5; }
|
|
|
|
/* ── Toast ─────────────────────────────────────────────────────────────── */
|
|
.toast {
|
|
position: fixed; top: 14px; left: 12px; right: 12px;
|
|
padding: 12px 14px; border-radius: 10px;
|
|
color: #fff; font-size: 13px; font-weight: 600; text-align: center;
|
|
z-index: 300; opacity: 0;
|
|
transform: translateY(-12px);
|
|
transition: all var(--t-med);
|
|
pointer-events: none;
|
|
box-shadow: 0 4px 12px rgba(0,0,0,.2);
|
|
}
|
|
.toast.on { opacity: 1; transform: translateY(0); }
|
|
|
|
/* ── Sticky search bar ─────────────────────────────────────────────────── */
|
|
.sbar {
|
|
position: sticky; top: 0;
|
|
background: var(--bg);
|
|
padding: 10px 4px 8px;
|
|
z-index: 5;
|
|
margin: 0 -4px;
|
|
}
|
|
|
|
/* ── Panel (detail-view section) ───────────────────────────────────────── */
|
|
.panel {
|
|
background: var(--surface);
|
|
border-radius: 12px;
|
|
padding: 14px;
|
|
margin: 12px 12px 0;
|
|
box-shadow: 0 1px 2px rgba(15,23,42,.06);
|
|
}
|
|
.panel h3 {
|
|
font-size: 11px; font-weight: 700; color: var(--brand);
|
|
letter-spacing: 1.2px; margin-bottom: 8px; text-transform: uppercase;
|
|
display: flex; align-items: center; gap: 8px;
|
|
}
|
|
.panel h3 .rt {
|
|
margin-left: auto; font-size: 10px; color: var(--text-dim);
|
|
font-weight: 600; letter-spacing: .5px;
|
|
}
|
|
|
|
/* ── Bottom tab bar ────────────────────────────────────────────────────── */
|
|
.tbar {
|
|
position: fixed; bottom: 0; left: 0; right: 0;
|
|
background: var(--surface);
|
|
border-top: 1px solid var(--border);
|
|
display: flex; height: 62px; z-index: 40;
|
|
padding-bottom: env(safe-area-inset-bottom, 0);
|
|
}
|
|
.tab {
|
|
flex: 1;
|
|
display: flex; flex-direction: column; align-items: center; justify-content: center;
|
|
gap: 2px;
|
|
color: var(--text-dim);
|
|
font-size: 10px; font-weight: 600;
|
|
cursor: pointer; border: none; background: none;
|
|
font-family: inherit;
|
|
}
|
|
.tab .ic { font-size: 22px; line-height: 1; }
|
|
.tab.on { color: var(--brand); }
|
|
|
|
/* ── Overlay (fullscreen pane over page) ───────────────────────────────── */
|
|
.ov {
|
|
display: none;
|
|
position: fixed; inset: 0;
|
|
background: var(--bg);
|
|
z-index: 100;
|
|
flex-direction: column;
|
|
overflow-y: auto;
|
|
}
|
|
.ov.open { display: flex; }
|
|
.ov-hdr {
|
|
display: flex; align-items: center;
|
|
padding: 12px 14px;
|
|
background: var(--surface);
|
|
border-bottom: 1px solid var(--border);
|
|
position: sticky; top: 0; z-index: 2;
|
|
gap: 8px;
|
|
}
|
|
.ov-hdr h2 { font-size: 16px; font-weight: 700; flex: 1; margin: 0; color: var(--text); }
|
|
.ov-x {
|
|
background: none; border: none;
|
|
font-size: 22px; cursor: pointer; padding: 4px 8px; color: var(--text-muted);
|
|
width: 36px; height: 36px;
|
|
display: flex; align-items: center; justify-content: center;
|
|
border-radius: 8px;
|
|
}
|
|
.ov-x:active { background: var(--bg); }
|
|
.ov-body { padding: 14px; flex: 1; }
|
|
.ov-sec {
|
|
font-size: 11px; font-weight: 700; color: var(--brand);
|
|
letter-spacing: 1.2px; margin: 16px 0 8px; text-transform: uppercase;
|
|
}
|
|
|
|
/* ── Scanner camera + results ──────────────────────────────────────────── */
|
|
.cam-wrap {
|
|
position: relative;
|
|
width: 100%; max-width: 400px;
|
|
margin: 0 auto 10px;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
background: #000;
|
|
aspect-ratio: 4/3;
|
|
}
|
|
.cam-wrap video, .cam-wrap canvas { width: 100%; display: block; }
|
|
.cam-overlay {
|
|
position: absolute; inset: 0;
|
|
pointer-events: none;
|
|
border: 2px solid rgba(92,89,168,.6);
|
|
border-radius: 12px;
|
|
}
|
|
.sr {
|
|
background: var(--surface);
|
|
border-radius: 10px;
|
|
padding: 10px 12px;
|
|
margin-bottom: 8px;
|
|
box-shadow: 0 1px 2px rgba(0,0,0,.04);
|
|
font-size: 13px; color: #334155;
|
|
}
|
|
.sr b { color: var(--brand); }
|
|
.sr .sm { font-size: 11px; color: var(--text-dim); }
|
|
|
|
/* ── Field-scan nested overlay (single-value Gemini) ───────────────────── */
|
|
.fs-ov {
|
|
display: none;
|
|
position: fixed; inset: 0;
|
|
background: rgba(15,23,42,.92);
|
|
z-index: 200;
|
|
flex-direction: column; align-items: center; justify-content: center;
|
|
padding: 20px;
|
|
}
|
|
.fs-ov.open { display: flex; }
|
|
.fs-box {
|
|
background: var(--surface);
|
|
border-radius: 16px;
|
|
width: 100%; max-width: 480px;
|
|
max-height: 90vh; overflow-y: auto;
|
|
padding: 16px;
|
|
}
|
|
.fs-box h3 {
|
|
font-size: 15px; margin-bottom: 10px; color: var(--text);
|
|
display: flex; align-items: center; gap: 8px;
|
|
}
|
|
.fs-box .fs-close {
|
|
margin-left: auto;
|
|
background: none; border: none;
|
|
font-size: 22px; color: var(--text-muted);
|
|
cursor: pointer;
|
|
}
|
|
.fs-cam {
|
|
width: 100%; aspect-ratio: 4/3;
|
|
background: #000; border-radius: 12px; overflow: hidden;
|
|
margin-bottom: 10px;
|
|
}
|
|
.fs-cam video { width: 100%; height: 100%; object-fit: cover; }
|
|
.fs-btn { display: flex; gap: 8px; margin-top: 10px; }
|
|
.fs-btn button {
|
|
flex: 1; padding: 12px;
|
|
border: none; border-radius: 10px;
|
|
font-family: inherit; font-weight: 700; font-size: 14px;
|
|
cursor: pointer;
|
|
}
|
|
.fs-capture { background: var(--brand); color: #fff; }
|
|
.fs-capture:active { background: var(--brand-dark); }
|
|
.fs-cancel { background: var(--border-soft); color: var(--text-muted); }
|
|
.conf-bar {
|
|
height: 4px; background: var(--border-soft);
|
|
border-radius: 2px; margin-top: 6px; overflow: hidden;
|
|
}
|
|
.conf-bar .f { height: 100%; transition: width .3s; }
|
|
.fs-val {
|
|
font-size: 22px; font-weight: 700; color: var(--text);
|
|
margin: 10px 0 4px; text-align: center;
|
|
font-family: ui-monospace, monospace;
|
|
}
|
|
|
|
/* ── Utility ───────────────────────────────────────────────────────────── */
|
|
.dis { opacity: .5; pointer-events: none; }
|
|
.hidden { display: none !important; }
|
|
.ta-c { text-align: center; }
|
|
.ta-r { text-align: right; }
|
|
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; }
|
|
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; }
|
|
.pad-body { padding-bottom: 68px; min-height: 100vh; } /* reserve space for tbar */
|