8dd0e1678c
PRD 5.16 (draft) — propagare design uniform peste aplicatie: - fonturi standard web (system font stack), scala uniforma --fs-* (carduri aerisite) - RAR online = dot in antet (datetime pe hover) + meniu burger; banda doar cand e blocat - antet branded "ROMFAST AUTOPASS" + nume service + badge plan (gate is_authenticated) - /login profesional (antet minimal pre-login), selector tema stil landing - bug-uri editare: denumiri in picker, adaugare operatie extra, fix save no-op, fix Renunta - dashboard compact: strip-less, contoare separate (mobil = bara numere), import colapsat, ordine carduri->import->tab-uri->lista, meniu cu separatoare - wizard import (4 pasi) + editare/corectie aliniate la design PRD 5.17 (draft) — tipuri de cont (Gratuit/Standard/Pro/Premium) + trial Pro 30 zile: - model accounts.tier + trial_until, app/plans.py sursa unica - enforcement DUR: limita Gratuit 60/luna (era 100) + API doar Pro+ - downgrade automat la expirare trial; aliniere landing (60, "Pro gratuit 30 zile") Mockup-uri vizuale (docs/mockups/prd-5.16-*.html): fonturi, header+login+tema, dashboard desktop+mobil, wizard import. Doar documentatie + mockup-uri; fara cod aplicatie. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
188 lines
12 KiB
HTML
188 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ro">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>PRD 5.16 — Preview fonturi system-stack + scala tipografica</title>
|
|
<style>
|
|
/* ============================================================
|
|
PROPUNERE 5.16: fonturi STANDARD WEB (system font stack).
|
|
ZERO fisiere de font descarcate. Arata nativ pe fiecare OS.
|
|
Inlocuieste IBM Plex self-hostat din /static/fonts.
|
|
============================================================ */
|
|
:root{
|
|
/* Stive de font standard web (fara @font-face, fara /static/fonts) */
|
|
--font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
--font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Segoe UI Mono", "Roboto Mono", Menlo, Consolas, monospace;
|
|
|
|
/* SCALA TIPOGRAFICA UNIFORMA (sursa unica de adevar; azi e ad-hoc 10/11/13px) */
|
|
--fs-xs: 12px; /* meta, sub-linii mono, hint-uri (azi: 10px) */
|
|
--fs-sm: 13.5px; /* label-uri formular, pill-uri (azi: 11px) */
|
|
--fs-base: 15px; /* text body implicit (azi: ~13px) */
|
|
--fs-md: 16px; /* input-uri, text card (azi: 13px) */
|
|
--fs-lg: 18px; /* titluri de sectiune mici */
|
|
--fs-xl: 20px; /* sub-titluri */
|
|
--fs-2xl: 28px; /* cifra contor (azi: 22px) */
|
|
--fs-3xl: 34px; /* titlu pagina */
|
|
--lh-tight: 1.25;
|
|
--lh-body: 1.55;
|
|
|
|
/* paleta grafit (din DESIGN.md) — doar pentru context vizual */
|
|
--bg:#0f1218; --card:#181c24; --card2:#0f1218; --ink:#e6e9ef; --muted:#8b93a7;
|
|
--line:#262b36; --line2:#1f2530; --accent:#6ea2ec; --ok:#2FBF8F; --warn:#E0A93B; --err:#E05D5D;
|
|
}
|
|
body[data-theme="hartie"]{
|
|
--bg:#f3efe6; --card:#fffdf7; --card2:#f3efe6; --ink:#1e1a13; --muted:#6a6052;
|
|
--line:#e2dccc; --line2:#ece6d9; --accent:#1F5FBF; --ok:#1c7d5d; --warn:#b45309; --err:#bd463c;
|
|
}
|
|
*{box-sizing:border-box;}
|
|
body{
|
|
margin:0; background:var(--bg); color:var(--ink);
|
|
font-family:var(--font-ui);
|
|
font-size:var(--fs-base); line-height:var(--lh-body);
|
|
-webkit-font-smoothing:antialiased;
|
|
}
|
|
.wrap{max-width:1100px; margin:0 auto; padding:28px 22px 80px;}
|
|
.mono{font-family:var(--font-mono);}
|
|
h1{font-size:var(--fs-3xl); line-height:var(--lh-tight); margin:0 0 6px; letter-spacing:-.02em;}
|
|
.lead{color:var(--muted); font-size:var(--fs-md); margin:0 0 22px;}
|
|
.sec{font-size:var(--fs-lg); margin:34px 0 12px; padding-bottom:6px; border-bottom:1px solid var(--line);}
|
|
.toolbar{display:flex; gap:10px; align-items:center; margin-bottom:8px;}
|
|
.toolbar button{font-family:var(--font-ui); font-size:var(--fs-sm); height:36px; padding:0 14px;
|
|
border-radius:7px; border:1px solid var(--line); background:var(--card); color:var(--ink); cursor:pointer;}
|
|
.note{font-size:var(--fs-sm); color:var(--muted); margin:2px 0 0;}
|
|
|
|
/* ---- carduri-contor (aerisite, text mai mare) ---- */
|
|
.contoare{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
|
|
.contor-card{background:var(--card2); border:1px solid var(--line); border-radius:12px; padding:18px 18px;}
|
|
.contor-cifra{font-size:var(--fs-2xl); font-weight:700; line-height:1;}
|
|
.contor-label{font-size:var(--fs-sm); color:var(--muted); margin-top:8px;}
|
|
.contor-sub{font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--muted); margin-top:4px;}
|
|
.s-ok{color:var(--ok);} .s-acc{color:var(--accent);} .s-err{color:var(--err);} .s-muted{color:var(--muted);}
|
|
|
|
/* ---- strip sanatate cu DOT (nu bifa) pentru RAR online ---- */
|
|
.strip{display:flex; align-items:center; justify-content:space-between; gap:12px;
|
|
padding:12px 16px; border-radius:10px; margin-bottom:14px;
|
|
background:color-mix(in srgb, var(--ok) 13%, transparent);
|
|
border:1px solid color-mix(in srgb, var(--ok) 30%, transparent);}
|
|
.strip-left{display:flex; align-items:center; gap:10px; font-weight:700; font-size:var(--fs-md);}
|
|
.dot{width:10px; height:10px; border-radius:99px; background:var(--ok); flex-shrink:0;
|
|
box-shadow:0 0 0 4px color-mix(in srgb, var(--ok) 22%, transparent);}
|
|
.dot.live{animation:pulse 2s ease-in-out infinite;}
|
|
@keyframes pulse{0%,100%{opacity:1;} 50%{opacity:.55;}}
|
|
.strip-right{font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--muted);}
|
|
|
|
/* ---- lista slim ---- */
|
|
.lista{background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden; margin-top:14px;}
|
|
.rand{display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--line2);}
|
|
.rand:last-child{border-bottom:none;}
|
|
.slim-vin{font-family:var(--font-mono); font-size:var(--fs-md); font-weight:500;}
|
|
.slim-meta{font-size:var(--fs-sm); color:var(--muted); margin-top:3px;}
|
|
.pill{display:inline-flex; align-items:center; gap:7px; padding:5px 12px; border-radius:99px; font-size:var(--fs-sm); font-weight:500;}
|
|
.pill .pdot{width:7px; height:7px; border-radius:99px;}
|
|
.pill.sent{background:color-mix(in srgb,var(--ok) 14%,transparent); color:var(--ok);}
|
|
.pill.sent .pdot{background:var(--ok);}
|
|
.pill.coada{background:color-mix(in srgb,var(--accent) 16%,transparent); color:var(--accent);}
|
|
.pill.coada .pdot{background:var(--accent);}
|
|
.pill.err{background:color-mix(in srgb,var(--err) 14%,transparent); color:var(--err);}
|
|
.pill.err .pdot{background:var(--err);}
|
|
|
|
/* ---- formular editare slim ---- */
|
|
.form-card{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:22px; margin-top:14px; max-width:560px;}
|
|
.camp{margin-bottom:14px;}
|
|
.camp label{display:block; font-size:var(--fs-sm); color:var(--muted); margin-bottom:6px;}
|
|
.camp input, .camp textarea, .camp select{
|
|
width:100%; font-family:var(--font-ui); font-size:var(--fs-md); color:var(--ink);
|
|
background:var(--card2); border:1px solid var(--line); border-radius:8px; padding:9px 12px; min-height:40px;}
|
|
.camp input.mono{font-family:var(--font-mono);}
|
|
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
|
|
.op-row{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 0; border-bottom:1px solid var(--line2);}
|
|
.op-name{font-size:var(--fs-md); font-weight:600;}
|
|
.op-name small{font-weight:400; color:var(--muted); font-size:var(--fs-sm);}
|
|
.chip{display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:var(--fs-sm);
|
|
background:color-mix(in srgb,var(--accent) 18%,transparent); color:var(--accent); padding:5px 10px; border-radius:7px;}
|
|
.chip button{background:none; border:none; color:inherit; cursor:pointer; font-size:var(--fs-md); line-height:1;}
|
|
.addcode{font-size:var(--fs-sm); border:1px dashed color-mix(in srgb,var(--accent) 55%,var(--line));
|
|
background:transparent; color:var(--accent); border-radius:7px; padding:6px 12px; cursor:pointer;}
|
|
.btn-primary{font-family:var(--font-ui); font-size:var(--fs-md); font-weight:600; height:42px; padding:0 20px;
|
|
background:var(--accent); color:#fff; border:none; border-radius:8px; cursor:pointer;}
|
|
.btn-ghost{font-family:var(--font-ui); font-size:var(--fs-md); height:42px; padding:0 18px;
|
|
background:transparent; color:var(--ink); border:1px solid var(--line); border-radius:8px; cursor:pointer;}
|
|
|
|
/* tabel scala — referinta rapida */
|
|
table.scala{width:100%; border-collapse:collapse; font-size:var(--fs-sm); margin-top:8px;}
|
|
table.scala td{padding:7px 10px; border-bottom:1px solid var(--line2);}
|
|
table.scala td:first-child{font-family:var(--font-mono); color:var(--accent); white-space:nowrap;}
|
|
</style>
|
|
</head>
|
|
<body data-theme="grafit">
|
|
<div class="wrap">
|
|
<div class="toolbar">
|
|
<button onclick="document.body.setAttribute('data-theme', document.body.getAttribute('data-theme')==='grafit'?'hartie':'grafit')">Comuta tema (grafit / hartie)</button>
|
|
<span class="note">Fonturi: <span class="mono">system-ui, -apple-system, Segoe UI, Roboto…</span> — zero fisiere descarcate.</span>
|
|
</div>
|
|
|
|
<h1>Gateway RAR AUTOPASS</h1>
|
|
<p class="lead">Preview tipografie 5.16 — font stack nativ + scala uniforma, carduri aerisite, text mai mare.</p>
|
|
|
|
<div class="sec">Scala tipografica unica (tokeni)</div>
|
|
<table class="scala">
|
|
<tr><td>--fs-xs 12px</td><td style="font-size:var(--fs-xs)">Meta, hint-uri, sub-linii mono (azi 10px — prea mic)</td></tr>
|
|
<tr><td>--fs-sm 13.5px</td><td style="font-size:var(--fs-sm)">Label-uri formular, pill-uri de stare (azi 11px)</td></tr>
|
|
<tr><td>--fs-base 15px</td><td style="font-size:var(--fs-base)">Text body implicit pe toate paginile</td></tr>
|
|
<tr><td>--fs-md 16px</td><td style="font-size:var(--fs-md)">Input-uri, VIN mono, text de card (azi 13px)</td></tr>
|
|
<tr><td>--fs-2xl 28px</td><td style="font-size:var(--fs-2xl);font-weight:700">Cifra contor (azi 22px)</td></tr>
|
|
</table>
|
|
|
|
<div class="sec">Dashboard — strip sanatate (DOT, nu bifa) + carduri-contor</div>
|
|
<div class="strip">
|
|
<span class="strip-left"><span class="dot live"></span> RAR online · declaratiile curg normal</span>
|
|
<span class="strip-right">Ultima autentificare RAR: 28.06.2026 09:41</span>
|
|
</div>
|
|
<div class="contoare">
|
|
<div class="contor-card"><div class="contor-cifra s-ok">847</div><div class="contor-label">Trimise (total)</div><div class="contor-sub">luna 124 · azi 9</div></div>
|
|
<div class="contor-card"><div class="contor-cifra s-acc">12</div><div class="contor-label">In coada</div></div>
|
|
<div class="contor-card"><div class="contor-cifra s-muted">0</div><div class="contor-label">De corectat</div></div>
|
|
</div>
|
|
|
|
<div class="sec">Lista trimiteri — rand slim</div>
|
|
<div class="lista">
|
|
<div class="rand"><div><div class="slim-vin">WBA8E9...K7F2</div><div class="slim-meta">Inspectie tehnica · 09:42</div></div><span class="pill sent"><span class="pdot"></span>Trimis</span></div>
|
|
<div class="rand"><div><div class="slim-vin">WVWZZZ...3M1</div><div class="slim-meta">Revizie periodica · 09:38</div></div><span class="pill coada"><span class="pdot"></span>In coada</span></div>
|
|
<div class="rand"><div><div class="slim-vin">VF1RFB...A88</div><div class="slim-meta">Sistem franare · 09:31</div></div><span class="pill err"><span class="pdot"></span>De corectat</span></div>
|
|
</div>
|
|
|
|
<div class="sec">Formular editare — denumiri operatii in picker + adaugare operatie</div>
|
|
<div class="form-card">
|
|
<div class="camp"><label>VIN (serie sasiu)</label><input class="mono" value="WBA8E9C5K7F20143"></div>
|
|
<div class="grid2">
|
|
<div class="camp"><label>Data prestatiei</label><input class="mono" value="2026-06-22"></div>
|
|
<div class="camp"><label>Numar inmatriculare</label><input class="mono" value="CT88NOE"></div>
|
|
</div>
|
|
<div class="camp"><label>Observatii (operatiile efectuate)</label><textarea rows="2">Revizie; schimbare placute frana</textarea></div>
|
|
|
|
<div class="camp">
|
|
<label>Prestatii — cod RAR pe fiecare operatie</label>
|
|
<div class="op-row">
|
|
<span class="op-name">REVIZIE PERIODICA <small>— revizie la 15.000 km</small></span>
|
|
<span style="display:flex;gap:8px;align-items:center;"><span class="chip">REV2 <button>×</button></span></span>
|
|
</div>
|
|
<div class="op-row" style="border-left:2px solid var(--warn); padding-left:10px;">
|
|
<span class="op-name">SCHIMB PLACUTE FRANA <small style="color:var(--warn)">— lipsa cod</small></span>
|
|
<select><option>— alege cod RAR —</option><option>FRN1 — Sistem de franare</option><option>REV2 — Revizie periodica</option></select>
|
|
</div>
|
|
<div style="margin-top:10px;"><button class="addcode">+ Adauga alta operatie / cod RAR</button></div>
|
|
<p class="note">Picker-ul arata <strong>cod + denumire</strong> (FRN1 — Sistem de franare), nu doar codul.</p>
|
|
</div>
|
|
|
|
<div style="display:flex; gap:10px; margin-top:18px;">
|
|
<button class="btn-primary">Salveaza si retrimite</button>
|
|
<button class="btn-ghost">Renunta</button>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="note" style="margin-top:30px;">Nota: tema/culorile sunt doar context. Subiectul acestui preview e <strong>fontul</strong> (system-ui) si <strong>scala</strong> (dimensiuni mai mari, uniforme). Deschide pe Windows si pe Mac ca sa vezi cum cade fontul nativ pe fiecare.</p>
|
|
</div>
|
|
</body>
|
|
</html>
|