feat(5.16+5.17): tipografie/antet branded + tipuri cont, planuri si enforcement
PRD 5.16 — propagare design finalizata (system font stack, fara IBM Plex self-hostat): - US-001/002/008: tokeni --font-ui/--font-mono (system stack) + scala --fs-*; zero @font-face si zero /static/fonts/; landing aliniat la acelasi stack - US-003: RAR online = dot compact in antet + meniu burger; banda rosie DOAR pe blocat (invariant zero-silent-failures pastrat) - US-010: antet "ROMFAST AUTOPASS" + nume service + /login brandeit 2 coloane + badge plan; meniu burger cu separatoare; gate strict pe is_authenticated - US-011: selector tema pill icon+eticheta (reuse THEMES) - US-004/005/006/007: bug-fix editor prestatii (picker cod+denumire, add_extra in mod operatii, cod ales se salveaza fara "+", Renunta inchide via closest) - US-012/013: landing Autentificare->/login; wizard import colapsat + 4 pasi pe tokeni - fix VERIFY E2E: contoare duplicate pe 390px (inline display:flex batea @media) -> CSS + test-lock PRD 5.17 — tipuri de cont + trial Pro 30z + enforcement DUR: - US-001/002/008: accounts.tier + trial_until (migrare aditiva defensiva); app/plans.py sursa unica (PLANS, FREE_MONTHLY_LIMIT=60, effective_tier(now injectabil), monthly_usage, CONSUMED_STATUSES); create_account trial Pro 30z; CLI set-tier (protejat id=1, audit) - US-003/004/005: enforce volum 60/luna INAINTE de build_key pe ambele canale (PLAN_LIMITA_LUNARA, 3 niveluri + log_event); gate API Pro+ (PLAN_FARA_API 403 actionabil); valideaza/nomenclator raman permise; downgrade lazy; flag AUTOPASS_ENFORCE_PLANS (kill-switch) - US-006: badge plan antet + linie burger + consum N/60 + warn>=80% + 6 stari + copy RO pluralizat + banner one-time trial->Gratuit + pagina Cont Regresie: 1380 passed, 0 failed, 1 deselected (live). E2E browser pe 390/1280 confirmat. Backend trimitere (worker/masina stari/idempotenta/contract RAR) NEATINS. Lucrul 5.18 (corpus kNN) ramane separat, necomis. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Claude Agent
@@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>{% block title %}Gateway RAR AUTOPASS{% endblock %}</title>
|
||||
<title>{% block title %}ROMFAST AUTOPASS{% endblock %}</title>
|
||||
<script src="/static/htmx.min.js"></script>
|
||||
<script>
|
||||
// Raspunsurile de editare-rand contin un <tr> (swap pe rand) PLUS
|
||||
@@ -36,78 +36,22 @@
|
||||
})();
|
||||
</script>
|
||||
<style>
|
||||
/* IBM Plex Sans + Mono self-hosted (latin-ext pentru diacritice romanesti).
|
||||
font-display:swap permite text vizibil inainte de incarcare (FOUT system-ui->IBM Plex);
|
||||
reflow-ul vizibil pe VIN/coduri e acceptat explicit. */
|
||||
@font-face {
|
||||
font-family: "IBM Plex Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url("/static/fonts/IBMPlexSans-Regular-latin-ext.woff2") format("woff2");
|
||||
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "IBM Plex Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url("/static/fonts/IBMPlexSans-Regular-latin.woff2") format("woff2");
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+20AC, U+2122, U+FEFF, U+FFFD;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "IBM Plex Sans";
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-display: swap;
|
||||
src: url("/static/fonts/IBMPlexSans-Medium-latin-ext.woff2") format("woff2");
|
||||
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "IBM Plex Sans";
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-display: swap;
|
||||
src: url("/static/fonts/IBMPlexSans-Medium-latin.woff2") format("woff2");
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+20AC, U+2122, U+FEFF, U+FFFD;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "IBM Plex Sans";
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: url("/static/fonts/IBMPlexSans-Bold-latin-ext.woff2") format("woff2");
|
||||
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "IBM Plex Sans";
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: url("/static/fonts/IBMPlexSans-Bold-latin.woff2") format("woff2");
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+20AC, U+2122, U+FEFF, U+FFFD;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "IBM Plex Mono";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url("/static/fonts/IBMPlexMono-Regular-latin-ext.woff2") format("woff2");
|
||||
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "IBM Plex Mono";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url("/static/fonts/IBMPlexMono-Regular-latin.woff2") format("woff2");
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+20AC, U+2122, U+FEFF, U+FFFD;
|
||||
}
|
||||
/* US-001 PRD 5.16: stive de font standard web. Toate regulile font-face IBM Plex sterse.
|
||||
Motiv: decizie user (risc AI-Slop #11 acceptat constient), uniformitate cross-page.
|
||||
Fisierele woff2 raman pe disc (curatare = follow-up optional, non-blocant).
|
||||
Referinte catre directorul de fonturi statice eliminate — font-ui si font-mono sunt stive sistem. */
|
||||
/* Paleta dark (default) — accent azur ROMFAST.
|
||||
--card2: fundal input/contor (= --bg, nivelul cel mai adanc).
|
||||
--line2: separator subtire (intre --bg si --line). */
|
||||
:root { --bg:#0f1218; --card:#181c24; --card2:#0f1218; --ink:#e6e9ef; --muted:#8b93a7; --line:#262b36; --line2:#1f2530;
|
||||
--ok:#2FBF8F; --warn:#E0A93B; --err:#E05D5D; --accent:#2E74D6; }
|
||||
--ok:#2FBF8F; --warn:#E0A93B; --err:#E05D5D; --accent:#2E74D6;
|
||||
/* US-001 (PRD 5.16): stive font standard web — sursa unica de adevar */
|
||||
--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;
|
||||
/* US-002 (PRD 5.16): scala tipografica uniforma — sursa unica de adevar */
|
||||
--fs-xs:12px; --fs-sm:13.5px; --fs-base:15px; --fs-md:16px;
|
||||
--fs-lg:18px; --fs-xl:20px; --fs-2xl:28px; --fs-3xl:34px;
|
||||
--lh-tight:1.25; --lh-body:1.55; }
|
||||
/* Paleta light — accent azur inchis pentru contrast AA pe alb (#1F66C9: 5.51:1 pe alb) */
|
||||
[data-theme="light"] { --bg:#f5f7fa; --card:#ffffff; --card2:#f5f7fa; --ink:#1a1d24; --muted:#5c6473; --line:#e2e5ea; --line2:#eaedf2;
|
||||
--ok:#15803d; --warn:#b45309; --err:#dc2626; --accent:#1F66C9; }
|
||||
@@ -135,7 +79,7 @@
|
||||
variabila; folosim consecvent `@media (max-width:767px)` peste tot (mobil) si
|
||||
`@media (max-width:1024px)` doar pentru densitatea tabelului. >=1024px = layout
|
||||
desktop neschimbat (fara regresie). Orice regula mobila noua reutilizeaza 767px. */
|
||||
body { margin:0; font:15px/1.5 "IBM Plex Sans",system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
|
||||
body { margin:0; font-family:var(--font-ui); font-size:var(--fs-base); line-height:var(--lh-body);
|
||||
background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased; }
|
||||
/* Grila 3 coloane — stanga (logo ROMFAST) | centru (titlu+env) | dreapta (controale). */
|
||||
header { padding:16px 24px; border-bottom:1px solid var(--line);
|
||||
@@ -200,6 +144,44 @@
|
||||
flex-wrap:wrap; z-index:10; }
|
||||
/* Indicator HTMX — ascuns pana la request */
|
||||
.htmx-indicator { display:none; }
|
||||
/* US-011 (PRD 5.16): selector tema stil pill — icon + eticheta temei curente.
|
||||
Eticheta se ascunde pe <=560px (spatiu ingust), ramane iconita. */
|
||||
.tema-btn { display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 12px;
|
||||
border-radius:8px; background:transparent; border:1px solid var(--line);
|
||||
color:var(--muted); font-family:var(--font-ui); font-size:var(--fs-sm);
|
||||
cursor:pointer; transition:border-color .15s, color .15s; line-height:1; }
|
||||
.tema-btn:hover { border-color:var(--accent); color:var(--ink); }
|
||||
.tema-btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
|
||||
@media (max-width:560px) { #tema-label { display:none; } }
|
||||
/* US-003 (PRD 5.16): dot RAR compact in antet.
|
||||
Stare OK: dot verde pulsant + "RAR online". Stare BLOCAT: dot rosu.
|
||||
Stilat ca pill; sensul NU depinde de culoare (aria-label + title). */
|
||||
.rar-chip { display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 12px;
|
||||
border-radius:99px; font-size:var(--fs-sm); font-weight:600; cursor:default; white-space:nowrap; }
|
||||
.rar-chip.rar-ok { border:1px solid color-mix(in srgb,var(--ok) 35%,var(--line));
|
||||
background:color-mix(in srgb,var(--ok) 10%,transparent); color:var(--ok); }
|
||||
.rar-chip.rar-err { border:1px solid color-mix(in srgb,var(--err) 35%,var(--line));
|
||||
background:color-mix(in srgb,var(--err) 10%,transparent); color:var(--err); }
|
||||
.rar-dot { width:9px; height:9px; border-radius:99px; background:currentColor; flex-shrink:0;
|
||||
box-shadow:0 0 0 3px color-mix(in srgb,currentColor 20%,transparent); }
|
||||
.rar-dot.live { animation:rar-pulse 2s ease-in-out infinite; }
|
||||
@keyframes rar-pulse { 0%,100%{opacity:1;} 50%{opacity:.5;} }
|
||||
@media (max-width:560px) { .rar-chip .rar-tx { display:none; } }
|
||||
/* US-010 (PRD 5.16): sub-titlu cu numele service-ului (cand autentificat). */
|
||||
.h-sub { font-size:var(--fs-xs); color:var(--muted); margin-top:2px; line-height:1.2; }
|
||||
.h-sub .svc { color:var(--ink); font-weight:600; }
|
||||
/* Badge env (test/prod) si badge tier (plan cont) langa titlu. */
|
||||
.badge-env { display:inline-block; margin-left:8px; padding:1px 7px; border-radius:99px;
|
||||
font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
|
||||
color:var(--warn); background:color-mix(in srgb,var(--warn) 16%,transparent); vertical-align:middle; }
|
||||
.badge-tier { display:inline-block; margin-left:6px; padding:1px 8px; border-radius:99px;
|
||||
font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
|
||||
color:var(--accent); background:color-mix(in srgb,var(--accent) 16%,transparent); vertical-align:middle; }
|
||||
/* Menu RAR status line in burger (prima intrare) */
|
||||
.menu-rar-line { display:flex; align-items:center; gap:7px; padding:8px 10px;
|
||||
font-size:var(--fs-sm); border-radius:6px; cursor:default; }
|
||||
.menu-rar-line.ok { color:var(--ok); }
|
||||
.menu-rar-line.err { color:var(--err); background:color-mix(in srgb,var(--err) 6%,transparent); }
|
||||
.htmx-indicator.htmx-request { display:inline; }
|
||||
/* Link-uri de actiune in antetul cardurilor: zona de atins mai mare (>=36px) si
|
||||
feedback la hover; pe ecrane inguste antetul se rupe curat sub titlu. */
|
||||
@@ -317,7 +299,7 @@
|
||||
border-radius:0 6px 6px 0; }
|
||||
.eroare-3n-sep { margin-top:6px; }
|
||||
.eroare-3n-problema { font-weight:600; color:var(--err); font-size:13px; }
|
||||
.eroare-3n-camp { font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:12px; opacity:.85; }
|
||||
.eroare-3n-camp { font-family:var(--font-mono); font-size:var(--fs-xs); opacity:.85; }
|
||||
.eroare-3n-cauza { color:var(--muted); font-size:12px; margin-top:3px; }
|
||||
.eroare-3n-fix { color:var(--accent); font-size:12px; margin-top:3px; }
|
||||
.eroare-3n-label { font-weight:500; }
|
||||
@@ -424,8 +406,8 @@
|
||||
/* secundarul muted („cod RAR" / „nemapat") — >=12px, contrast pe var(--muted) >=4.5:1 */
|
||||
.tabel-trimiteri .cod-rar-sub { font-size:12px; margin-top:2px; }
|
||||
/* Codul RAR pe linia 2 — chip discret, fara prefixul „cod RAR:". */
|
||||
.tabel-trimiteri .cod-rar-cod { display:inline-block; font-family:"IBM Plex Mono",ui-monospace,monospace;
|
||||
font-size:12px; padding:1px 7px; border:1px solid var(--line);
|
||||
.tabel-trimiteri .cod-rar-cod { display:inline-block; font-family:var(--font-mono);
|
||||
font-size:var(--fs-xs); padding:1px 7px; border:1px solid var(--line);
|
||||
border-radius:99px; color:var(--muted); }
|
||||
/* Eticheta umana scurta sub pill — text mic; clasa `s-error` o coloreaza
|
||||
(apare doar pe error/needs_*). Stare prin text, nu doar culoare. */
|
||||
@@ -696,37 +678,56 @@
|
||||
}
|
||||
/* === SENTINEL-COMPONENTE-SLIM: inceput componente slim US-002 (PRD 5.15).
|
||||
Testele ancoreaza pe acest marker. Nu muta/sterge. === */
|
||||
/* .contor-card — card cifra contor: fundal --card2, bordura --line, radius 8px, padding 10-12px.
|
||||
/* .contor-card — card cifra contor: fundal --card2, bordura --line, radius 8px.
|
||||
US-002 PRD 5.16: padding marit (18px), cifra pe --fs-2xl, label pe --fs-sm, sub pe --fs-xs.
|
||||
Variante de culoare a cifrei prin clasele .s-* existente (verde/accent/rosu). */
|
||||
.contor-card { background:var(--card2); border:1px solid var(--line); border-radius:8px; padding:10px 12px; }
|
||||
.contor-cifra { font-size:22px; font-weight:700; line-height:1; }
|
||||
.contor-label { font-size:11px; color:var(--muted); margin-top:5px; }
|
||||
.contor-sub { font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:10px; color:var(--muted); margin-top:3px; }
|
||||
.contor-card { background:var(--card2); border:1px solid var(--line); border-radius:8px; 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; }
|
||||
/* Contoarele desktop = 5 carduri side-by-side. display:flex sta in CSS (NU inline pe
|
||||
element) ca media query-ul de mai jos sa-l poata ascunde pe mobil — un inline
|
||||
style="display:flex" ar bate regula @media si ar duce la contoare duplicate pe 390px. */
|
||||
.contoare-desktop { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
|
||||
/* Bara compacta contoare pe mobil (<=560px): un singur rand, numere + etichete scurte, fara carduri mari. */
|
||||
.contoare-compact { display:none; }
|
||||
@media (max-width:560px) {
|
||||
.contoare-desktop { display:none; }
|
||||
.contoare-compact { display:flex; align-items:center; gap:0; margin-bottom:14px;
|
||||
background:var(--card2); border:1px solid var(--line); border-radius:8px;
|
||||
overflow:hidden; }
|
||||
.compact-item { flex:1; display:flex; flex-direction:column; align-items:center; padding:10px 6px;
|
||||
border-right:1px solid var(--line); min-width:0; text-align:center; }
|
||||
.compact-item:last-child { border-right:none; }
|
||||
.compact-nr { font-size:var(--fs-xl); font-weight:700; line-height:1; }
|
||||
.compact-lbl { font-size:10px; color:var(--muted); margin-top:3px; white-space:nowrap; }
|
||||
}
|
||||
/* .lista-trimiteri-slim + .trimitere-slim — lista compacta cu separator --line2.
|
||||
Randul e clickabil (rol button), tinta min-height:44px pe mobil. */
|
||||
.lista-trimiteri-slim { list-style:none; margin:0; padding:0; }
|
||||
.trimitere-slim { display:flex; align-items:center; justify-content:space-between; gap:12px;
|
||||
padding:11px 14px; border-bottom:1px solid var(--line2); min-height:44px; cursor:pointer; }
|
||||
padding:14px 16px; border-bottom:1px solid var(--line2); min-height:44px; cursor:pointer; }
|
||||
.trimitere-slim:last-child { border-bottom:none; }
|
||||
.trimitere-slim:hover { background:color-mix(in srgb, var(--accent) 6%, transparent); }
|
||||
.trimitere-slim:focus, .trimitere-slim:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
|
||||
.slim-vin { font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:13px; font-weight:500; color:var(--ink); }
|
||||
.slim-meta { font-size:11px; color:var(--muted); margin-top:3px; }
|
||||
/* .camp-slim — varianta compacta camp formular: label 11px muted deasupra, input ~30px, fundal --card2.
|
||||
.slim-vin { font-family:var(--font-mono); font-size:var(--fs-md); font-weight:500; color:var(--ink); }
|
||||
.slim-meta { font-size:var(--fs-sm); color:var(--muted); margin-top:3px; }
|
||||
/* .camp-slim — varianta compacta camp formular: label --fs-sm muted deasupra, input --fs-md, fundal --card2.
|
||||
Mono pentru campuri VIN/odometru/nr: adauga clasa .camp-mono pe input. */
|
||||
.camp-slim { margin-bottom:8px; }
|
||||
.camp-slim label { font-size:11px; color:var(--muted); display:block; margin-bottom:4px; }
|
||||
.camp-slim input, .camp-slim textarea, .camp-slim select { background:var(--card2); height:30px; width:100%;
|
||||
padding:0 10px; border:1px solid var(--line); border-radius:6px; font:inherit; color:var(--ink); }
|
||||
.camp-slim textarea { height:auto; min-height:48px; padding:8px 10px; resize:vertical; }
|
||||
.camp-slim .camp-mono { font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:12px; }
|
||||
.camp-slim label { font-size:var(--fs-sm); color:var(--muted); display:block; margin-bottom:4px; }
|
||||
.camp-slim input, .camp-slim textarea, .camp-slim select { background:var(--card2); min-height:36px; width:100%;
|
||||
padding:0 10px; border:1px solid var(--line); border-radius:6px; font-family:var(--font-ui);
|
||||
font-size:var(--fs-md); color:var(--ink); }
|
||||
.camp-slim textarea { min-height:52px; height:auto; padding:8px 10px; resize:vertical; }
|
||||
.camp-slim .camp-mono { font-family:var(--font-mono); font-size:var(--fs-sm); }
|
||||
/* .chips + .chip — prestatii multi-select cu buton de stergere accesibil (.chip-del).
|
||||
Fundal accent 18%, font IBM Plex Mono 11px. */
|
||||
Fundal accent 18%, font mono --fs-xs. */
|
||||
.chips { min-height:30px; display:flex; align-items:center; gap:6px; flex-wrap:wrap;
|
||||
padding:4px 8px; border:1px solid var(--line); border-radius:6px; background:var(--card2); }
|
||||
.chip { display:inline-flex; align-items:center; gap:5px; padding:3px 8px; border-radius:5px;
|
||||
background:color-mix(in srgb, var(--accent) 18%, transparent); color:var(--accent);
|
||||
font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:11px; font-weight:600; }
|
||||
font-family:var(--font-mono); font-size:var(--fs-xs); font-weight:600; }
|
||||
.chip .chip-del { background:transparent; border:none; color:inherit; opacity:.7; cursor:pointer;
|
||||
padding:0; font-size:13px; line-height:1; display:inline-flex;
|
||||
align-items:center; justify-content:center; min-width:16px; min-height:16px; }
|
||||
@@ -737,13 +738,13 @@
|
||||
/* .add-code — buton dashed pentru adaugare cod in chipbox */
|
||||
.add-code { display:inline-flex; align-items:center; height:22px; padding:0 7px; background:transparent;
|
||||
border:1px dashed color-mix(in srgb, var(--accent) 55%, var(--line));
|
||||
border-radius:5px; color:var(--accent); font:500 10px inherit; cursor:pointer; }
|
||||
border-radius:5px; color:var(--accent); font:500 10px var(--font-ui); cursor:pointer; }
|
||||
.add-code:hover, .add-code:focus-visible { border-style:solid; }
|
||||
/* .op-row — rand operatie cu picker op<->cod (E4): operatie + chip cod + picker */
|
||||
.op-row { display:flex; align-items:center; justify-content:space-between; gap:10px;
|
||||
padding:8px 10px; border:1px solid var(--line); border-radius:6px;
|
||||
background:var(--card2); margin-bottom:8px; }
|
||||
.op-row-name { font-size:12px; font-weight:500; color:var(--ink); }
|
||||
.op-row-name { font-size:var(--fs-xs); font-weight:500; color:var(--ink); }
|
||||
.op-row-warn { border-color:color-mix(in srgb, var(--warn) 45%, var(--line)); }
|
||||
/* Mobil: tinta touch pentru trimitere-slim (deja garantata prin min-height:44px in regula de baza) */
|
||||
@media (max-width:767px) {
|
||||
@@ -753,7 +754,9 @@
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
{# Grila 3 coloane — stanga (logo ROMFAST) | centru (titlu+env) | dreapta (controale). #}
|
||||
{# US-010 (PRD 5.16): antet branduit ROMFAST AUTOPASS.
|
||||
Grila 3 coloane — stanga (logo) | centru (titlu+env+tier+account_name) | dreapta (RAR dot + tema + burger).
|
||||
Antet MINIMAL pe /login: nu afiseaza RAR dot, meniu burger sau account_name (nelogat). #}
|
||||
<header>
|
||||
{# Celula stanga: logo ROMFAST #}
|
||||
<div class="header-left">
|
||||
@@ -763,35 +766,86 @@
|
||||
<img src="/static/romfast_logo.png" alt="ROMFAST" class="brand-logo">
|
||||
</a>
|
||||
</div>
|
||||
{# Celula centru: titlu + badge env mic.
|
||||
{# Celula centru: titlu ROMFAST AUTOPASS + badge env + badge tier + sub-titlu account_name.
|
||||
Titlul linkeaza la / (Trimiteri) ca si logo-ul. #}
|
||||
<div class="header-center">
|
||||
<a href="/" style="text-decoration:none; color:inherit;"><h1>Gateway RAR AUTOPASS</h1></a>
|
||||
<span class="env">{{ rar_env }}</span>
|
||||
<a href="/" style="text-decoration:none; color:inherit;">
|
||||
<h1>ROMFAST AUTOPASS<span class="badge-env">{{ rar_env }}</span>{% if is_authenticated|default(false) and tier_label|default('') %}<span class="badge-tier">{{ tier_label }}</span>{% endif %}</h1>
|
||||
</a>
|
||||
{% if is_authenticated|default(false) and account_name|default('') %}
|
||||
<div class="h-sub">Service auto: <span class="svc">{{ account_name }}</span></div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{# Celula dreapta: comutator tema + versiune + meniu cont #}
|
||||
{# Celula dreapta: dot RAR (numai cand logat) + selector tema + versiune + meniu burger #}
|
||||
<div class="header-right">
|
||||
<button id="tema-toggle" class="icon-btn"
|
||||
aria-label="Comuta tema (luminos/intunecat)"
|
||||
title="Comuta tema">☀</button>
|
||||
<span class="muted" style="font-size:13px;">v{{ version }}</span>
|
||||
{# US-003 (PRD 5.16): dot RAR in antet — OK = chip verde pulsant, BLOCAT = chip rosu.
|
||||
Banda plina apare DOAR in _status.html cand BLOCAT (nu mai e mereu vizibila). #}
|
||||
{% if is_authenticated|default(false) %}
|
||||
{% if sanatate_ok|default(true) %}
|
||||
<div class="rar-chip rar-ok" role="status"
|
||||
title="RAR online{% if last_login|default('') %} — Ultima autentificare: {{ last_login }}{% endif %}"
|
||||
aria-label="RAR online">
|
||||
<span class="rar-dot live" aria-hidden="true"></span>
|
||||
<span class="rar-tx">RAR online</span>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="rar-chip rar-err" role="status"
|
||||
title="RAR indisponibil"
|
||||
aria-label="RAR indisponibil">
|
||||
<span class="rar-dot" aria-hidden="true"></span>
|
||||
<span class="rar-tx">RAR blocat</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{# US-011 (PRD 5.16): selector tema = pill cu icon + eticheta temei curente.
|
||||
Eticheta ascunsa pe <=560px via CSS. JS actualizeaza .tema-icon si #tema-label. #}
|
||||
<button id="tema-toggle" class="tema-btn"
|
||||
aria-label="Comuta tema"
|
||||
title="Comuta tema">
|
||||
<span class="tema-icon" aria-hidden="true">☀</span>
|
||||
<span id="tema-label">Light</span>
|
||||
</button>
|
||||
<span class="muted" style="font-size:var(--fs-xs);">v{{ version }}</span>
|
||||
{% if is_authenticated|default(false) %}
|
||||
{# Meniu cont: Cont/Integrare/Nomenclator + (admin) + logout.
|
||||
US-010: structura cu <hr> separatori + RAR status (prima intrare) + Plan tier.
|
||||
Pe paginile neautentificate (login/signup) nu se randeaza deloc. #}
|
||||
<div class="cont-menu-wrap">
|
||||
<button id="cont-menu-toggle" class="icon-btn"
|
||||
aria-haspopup="true" aria-expanded="false" aria-controls="cont-menu"
|
||||
aria-label="Meniu cont" title="Meniu cont">☰</button>
|
||||
<div id="cont-menu" class="cont-menu" role="menu" aria-labelledby="cont-menu-toggle" hidden>
|
||||
{# Prima intrare: Trimiteri (Acasa) — pagina principala cu import + lista trimiterilor. #}
|
||||
{# Prima intrare: starea RAR (US-003) #}
|
||||
{% if sanatate_ok|default(true) %}
|
||||
<div class="menu-rar-line ok" role="menuitem" aria-disabled="true">
|
||||
<span style="width:8px;height:8px;border-radius:99px;background:currentColor;display:inline-block;"></span>
|
||||
RAR online
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="menu-rar-line err" role="menuitem" aria-disabled="true">
|
||||
<span style="width:8px;height:8px;border-radius:99px;background:currentColor;display:inline-block;"></span>
|
||||
RAR indisponibil
|
||||
</div>
|
||||
{% endif %}
|
||||
{# Plan cont curent (US-006 PRD 5.17): linie detaliata cu trial/consum/warn.
|
||||
Warn = culoare + text (accesibilitate, decizie #14). #}
|
||||
<div class="menu-rar-line" role="menuitem" aria-disabled="true"
|
||||
style="color:{% if plan_limita_atinsa|default(false) %}var(--err){% elif plan_warn|default(false) %}var(--warn){% else %}var(--muted){% endif %};
|
||||
{% if plan_warn|default(false) %}font-weight:600;{% endif %}">
|
||||
{{ plan_linie|default('Plan: ' + (tier_label|default('Gratuit'))) }}
|
||||
</div>
|
||||
<hr>
|
||||
{# Navigare principala: Trimiteri + Mapari #}
|
||||
<a role="menuitem" href="/">Trimiteri</a>
|
||||
{# Mapari, cu badge needs_mapping. #}
|
||||
{% set _mapari_badge = (badges.mapari if (badges is defined and badges and badges.mapari) else 0) %}
|
||||
<a role="menuitem" href="/?tab=mapari">Mapari{% if _mapari_badge %}<span class="tab-badge" aria-hidden="true" style="display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; margin-left:6px; padding:0 5px; border-radius:99px; background:var(--err); color:#fff; font-size:11px; font-weight:700;">{{ _mapari_badge }}</span>{% endif %}</a>
|
||||
<hr>
|
||||
{# Nomenclator: coduri RAR — public, dar in meniu arata mai logic la logat #}
|
||||
<a role="menuitem" href="/?tab=nomenclator">Nomenclator</a>
|
||||
<hr>
|
||||
{# Setari cont #}
|
||||
<a role="menuitem" href="/?tab=cont">Cont</a>
|
||||
<a role="menuitem" href="/?tab=integrare">Integrare</a>
|
||||
<a role="menuitem" href="/?tab=nomenclator">Nomenclator</a>
|
||||
<a role="menuitem" href="/?tab=jurnal">Jurnal</a>
|
||||
{% if is_admin|default(false) %}<a role="menuitem" href="/admin">Conturi clienti</a>{% endif %}
|
||||
<hr>
|
||||
@@ -863,7 +917,11 @@
|
||||
}
|
||||
function _syncButton(stored) {
|
||||
var s = VALID[stored] ? stored : 'auto';
|
||||
btn.innerHTML = ICONS[s];
|
||||
// US-011: actualizeaza iconita si eticheta separat (btn e pill, nu se inlocuieste innerHTML intreg)
|
||||
var icon = btn.querySelector('.tema-icon');
|
||||
if (icon) icon.innerHTML = ICONS[s];
|
||||
var label = document.getElementById('tema-label');
|
||||
if (label) label.textContent = LABELS[s];
|
||||
btn.setAttribute('aria-label', 'Tema: ' + LABELS[s] + ', apasa pentru ' + NEXT[s]);
|
||||
btn.title = LABELS[s]; // doar numele temei (ex. "Petrol"), nu ciclul intreg
|
||||
}
|
||||
@@ -1129,7 +1187,7 @@
|
||||
|
||||
// Inchidere: x si backdrop (elemente cu data-modal-close), Esc.
|
||||
overlay.addEventListener('click', function(e) {
|
||||
if (e.target && e.target.hasAttribute && e.target.hasAttribute('data-modal-close')) close();
|
||||
if (e.target && e.target.closest && e.target.closest('[data-modal-close]')) close();
|
||||
});
|
||||
document.addEventListener('keydown', function(e) {
|
||||
if (e.key === 'Escape' && isOpen()) { e.preventDefault(); close(); }
|
||||
|
||||
Reference in New Issue
Block a user