docs(prd): 5.16 tipografie+bugfix editare + 5.17 tipuri cont + mockup-uri
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>
This commit is contained in:
Claude Agent
221
docs/mockups/prd-5.16-dashboard-mobil.html
Normal file
221
docs/mockups/prd-5.16-dashboard-mobil.html
Normal file
@@ -0,0 +1,221 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ro">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>PRD 5.16 — Dashboard mobil 390px (RAR dot in antet + meniu)</title>
|
||||
<style>
|
||||
:root{
|
||||
--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;
|
||||
--fs-xs:12px; --fs-sm:13.5px; --fs-base:15px; --fs-md:16px; --fs-lg:18px; --fs-xl:20px; --fs-2xl:28px;
|
||||
--bg:#0f1218; --card:#181c24; --card2:#0f1218; --ink:#e6e9ef; --muted:#8b93a7;
|
||||
--line:#262b36; --line2:#1f2530; --accent:#6ea2ec; --ok:#2FBF8F; --warn:#E0A93B; --err:#E05D5D;
|
||||
--hbg:rgba(15,18,24,.95);
|
||||
}
|
||||
*{box-sizing:border-box;}
|
||||
body{margin:0; background:#05070b; font-family:var(--font-ui); -webkit-font-smoothing:antialiased; padding:24px;}
|
||||
.mono{font-family:var(--font-mono);} .muted{color:var(--muted);}
|
||||
.stage{display:flex; gap:34px; justify-content:center; align-items:flex-start; flex-wrap:wrap;}
|
||||
.cap{text-align:center; color:#9aa3b2; font-size:13px; margin-top:10px; max-width:390px;}
|
||||
.phone{width:390px; background:var(--bg); color:var(--ink); border-radius:30px; border:10px solid #20242c; overflow:hidden; box-shadow:0 30px 70px -20px rgba(0,0,0,.7);}
|
||||
.phone .screen{height:720px; overflow:hidden; position:relative;}
|
||||
.scroll{height:100%; overflow:auto;}
|
||||
|
||||
header{position:sticky; top:0; z-index:5; display:flex; align-items:center; justify-content:space-between; gap:8px; height:56px; padding:0 12px; background:var(--hbg); backdrop-filter:blur(8px); border-bottom:1px solid var(--line);}
|
||||
.logo-fallback{display:inline-flex; align-items:center; gap:4px; font-weight:800; font-size:var(--fs-base);}
|
||||
.logo-fallback .rom{color:#D1342F;} .logo-fallback .fast{color:var(--accent);}
|
||||
.h-center{flex:1; text-align:center; line-height:1.1; min-width:0;}
|
||||
.h-title{font-size:var(--fs-sm); font-weight:700;} .h-title .accent{color:var(--accent);}
|
||||
.tier{display:inline-block; margin-left:5px; padding:0 7px; border-radius:99px; font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--accent); background:color-mix(in srgb,var(--accent) 16%,transparent); vertical-align:middle;}
|
||||
.h-sub{font-size:11px; color:var(--muted); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
|
||||
.h-sub .svc{color:var(--ink); font-weight:600;}
|
||||
.h-right{display:flex; align-items:center; gap:7px;}
|
||||
/* RAR online = dot compact in antet (title pe hover); blocat => rosu */
|
||||
.rar-dot{width:38px; height:38px; border-radius:9px; border:1px solid color-mix(in srgb,var(--ok) 35%,var(--line)); background:color-mix(in srgb,var(--ok) 10%,transparent); display:inline-flex; align-items:center; justify-content:center; cursor:default;}
|
||||
.rar-dot .d{width:11px; height:11px; border-radius:99px; background:var(--ok); box-shadow:0 0 0 4px color-mix(in srgb,var(--ok) 22%,transparent);}
|
||||
.icon-btn{width:40px; height:40px; border-radius:9px; border:1px solid var(--line); background:transparent; color:var(--ink); cursor:pointer; display:inline-flex; align-items:center; justify-content:center;}
|
||||
|
||||
.body{padding:12px; display:flex; flex-direction:column; gap:12px;}
|
||||
|
||||
/* CARDURI compacte — doar numere, un rand */
|
||||
.stats{display:flex; background:var(--card2); border:1px solid var(--line); border-radius:11px; overflow:hidden;}
|
||||
.stat{flex:1; text-align:center; padding:10px 4px; border-right:1px solid var(--line2);}
|
||||
.stat:last-child{border-right:none;}
|
||||
.stat .n{font-size:var(--fs-xl); font-weight:700; line-height:1;}
|
||||
.stat .l{font-size:11px; color:var(--muted); margin-top:4px;}
|
||||
.s-ok{color:var(--ok);} .s-acc{color:var(--accent);} .s-err{color:var(--err);}
|
||||
|
||||
/* IMPORT colapsat */
|
||||
.import-collapse{border:1px solid var(--line); border-radius:11px; background:var(--card); overflow:hidden;}
|
||||
.import-collapse>summary{list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:13px 14px; font-size:var(--fs-base); font-weight:600; color:var(--ink); min-height:48px;}
|
||||
.import-collapse>summary::-webkit-details-marker{display:none;}
|
||||
.import-collapse>summary .ic-l{display:flex; align-items:center; gap:9px;}
|
||||
.import-collapse .plus{display:inline-flex; width:24px; height:24px; align-items:center; justify-content:center; border-radius:7px; background:color-mix(in srgb,var(--accent) 16%,transparent); color:var(--accent); font-size:17px; line-height:1;}
|
||||
.import-collapse>summary .chev{font-size:var(--fs-sm); color:var(--muted);}
|
||||
|
||||
/* NAV */
|
||||
.subnav{display:flex; gap:6px; border-bottom:1px solid var(--line);}
|
||||
.subnav a{flex:1; text-align:center; font-size:var(--fs-sm); font-weight:600; padding:10px 0; border-radius:9px 9px 0 0; color:var(--muted); text-decoration:none; border:1px solid transparent; border-bottom:none; margin-bottom:-1px;}
|
||||
.subnav a.active{color:var(--ink); background:var(--card); border-color:var(--line); border-bottom:1px solid var(--card);}
|
||||
.badge{display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; margin-left:5px; padding:0 5px; border-radius:99px; background:var(--err); color:#fff; font-size:11px; font-weight:700;}
|
||||
|
||||
/* LISTA — filtre se ASEAZA pe randuri (wrap), FARA linie de scroll */
|
||||
.panel{background:var(--card); border:1px solid var(--line); border-radius:0 11px 11px 11px; overflow:hidden;}
|
||||
.filtre{display:flex; gap:7px; flex-wrap:wrap; padding:11px 12px; border-bottom:1px solid var(--line2);}
|
||||
.pillf{font-size:var(--fs-sm); padding:7px 14px; border-radius:99px; border:1px solid var(--line); background:transparent; color:var(--muted);}
|
||||
.pillf.on{background:color-mix(in srgb,var(--accent) 16%,transparent); border-color:transparent; color:var(--accent); font-weight:600;}
|
||||
.rand{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:13px 13px; border-bottom:1px solid var(--line2); min-height:56px;}
|
||||
.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:6px; padding:5px 11px; border-radius:99px; font-size:var(--fs-sm); font-weight:500; flex-shrink:0;}
|
||||
.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);}
|
||||
|
||||
/* meniu burger deschis */
|
||||
.scrim{position:absolute; inset:0; background:rgba(0,0,0,.45); z-index:8;}
|
||||
.menu{position:absolute; top:52px; right:10px; width:240px; background:var(--card); border:1px solid var(--line); border-radius:12px; box-shadow:0 20px 50px -16px rgba(0,0,0,.7); padding:7px; z-index:9;}
|
||||
.menu-status{display:flex; align-items:center; gap:9px; padding:11px 11px; font-size:var(--fs-base); font-weight:600; color:var(--ok);}
|
||||
.menu-status .d{width:10px; height:10px; border-radius:99px; background:var(--ok); box-shadow:0 0 0 4px color-mix(in srgb,var(--ok) 22%,transparent);}
|
||||
.menu-status small{font-weight:400; color:var(--muted); font-family:var(--font-mono); font-size:11px;}
|
||||
.menu-plan{display:flex; align-items:center; justify-content:space-between; padding:6px 11px 8px; font-size:var(--fs-sm); color:var(--muted);}
|
||||
.menu-plan b{color:var(--accent);} .menu-plan .trial{font-size:11px;}
|
||||
.menu a{display:flex; align-items:center; justify-content:space-between; padding:12px 11px; border-radius:8px; font-size:var(--fs-base); color:var(--ink); text-decoration:none;}
|
||||
.menu a:active{background:var(--card2);}
|
||||
.menu hr{border:none; border-top:1px solid var(--line); margin:5px 4px;}
|
||||
|
||||
/* ecran editare full-screen */
|
||||
.modal-head{display:flex; align-items:center; justify-content:space-between; height:56px; padding:0 12px; border-bottom:1px solid var(--line); background:var(--hbg); position:sticky; top:0; z-index:5;}
|
||||
.modal-head .t{font-size:var(--fs-md); font-weight:700;}
|
||||
.field{margin-bottom:14px;}
|
||||
.field label{display:block; font-size:var(--fs-sm); color:var(--muted); margin-bottom:6px;}
|
||||
.field input, .field textarea, .field 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:9px; padding:11px 13px; min-height:46px;}
|
||||
.field input.mono{font-family:var(--font-mono);}
|
||||
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
|
||||
.op-row{padding:11px 0; border-bottom:1px solid var(--line2);}
|
||||
.op-name{font-size:var(--fs-md); font-weight:600; display:block; margin-bottom:8px;} .op-name small{font-weight:400; color:var(--muted); font-size:var(--fs-sm);}
|
||||
.op-ctl{display:flex; align-items:center; gap:8px;}
|
||||
.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:7px 11px; border-radius:8px;}
|
||||
.chip button{background:none; border:none; color:inherit; cursor:pointer; font-size:var(--fs-md);}
|
||||
.addcode{width:100%; font-size:var(--fs-sm); border:1px dashed color-mix(in srgb,var(--accent) 55%,var(--line)); background:transparent; color:var(--accent); border-radius:9px; padding:11px; cursor:pointer; margin-top:10px;}
|
||||
.actrow{display:flex; flex-direction:column; gap:10px; margin-top:18px;}
|
||||
.btn-primary{width:100%; font-size:var(--fs-md); font-weight:600; height:46px; background:var(--accent); color:#fff; border:none; border-radius:9px; cursor:pointer;}
|
||||
.btn-ghost{width:100%; font-size:var(--fs-md); height:46px; background:transparent; color:var(--ink); border:1px solid var(--line); border-radius:9px; cursor:pointer;}
|
||||
</style>
|
||||
</head>
|
||||
<body data-theme="grafit">
|
||||
<div class="stage">
|
||||
|
||||
<!-- ECRAN 1: DASHBOARD curat (RAR dot in antet, fara linie de scroll la filtre) -->
|
||||
<div>
|
||||
<div class="phone"><div class="screen"><div class="scroll">
|
||||
<header>
|
||||
<span class="logo-fallback"><span class="rom">ROM</span><span class="fast">FAST</span></span>
|
||||
<div class="h-center">
|
||||
<div class="h-title">ROMFAST <span class="accent">AUTOPASS</span><span class="tier">Pro</span></div>
|
||||
<div class="h-sub">Service auto: <span class="svc">Service Auto Vâlcea SRL</span></div>
|
||||
</div>
|
||||
<div class="h-right">
|
||||
<span class="rar-dot" title="RAR online · ultima autentificare 28.06.2026 09:41"><span class="d"></span></span>
|
||||
<button class="icon-btn" title="Temă: Grafit"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><circle cx="12" cy="12" r="9"/><path d="M12 3a9 9 0 0 0 0 18z" fill="currentColor" stroke="none"/></svg></button>
|
||||
<button class="icon-btn" title="Meniu">☰</button>
|
||||
</div>
|
||||
</header>
|
||||
<div class="body">
|
||||
<div class="stats">
|
||||
<div class="stat"><div class="n s-ok">847</div><div class="l">Total</div></div>
|
||||
<div class="stat"><div class="n s-ok">124</div><div class="l">Lună</div></div>
|
||||
<div class="stat"><div class="n s-ok">9</div><div class="l">Azi</div></div>
|
||||
<div class="stat"><div class="n s-acc">12</div><div class="l">Coadă</div></div>
|
||||
<div class="stat"><div class="n s-err">2</div><div class="l">Corectat</div></div>
|
||||
</div>
|
||||
<details class="import-collapse">
|
||||
<summary><span class="ic-l"><span class="plus">+</span> Importă fișier (XLSX / CSV)</span><span class="chev">▾</span></summary>
|
||||
</details>
|
||||
<div>
|
||||
<div class="subnav">
|
||||
<a href="#" class="active">Trimiteri</a>
|
||||
<a href="#">Mapări <span class="badge">2</span></a>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<div class="filtre">
|
||||
<button class="pillf on">Toate</button>
|
||||
<button class="pillf">În coadă</button>
|
||||
<button class="pillf">Trimise</button>
|
||||
<button class="pillf">De corectat</button>
|
||||
</div>
|
||||
<div class="rand"><div><div class="slim-vin">WBA8E9...K7F2</div><div class="slim-meta">Inspecție tehnică · 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 periodică · 09:38</div></div><span class="pill coada"><span class="pdot"></span>În coadă</span></div>
|
||||
<div class="rand"><div><div class="slim-vin">VF1RFB...A88</div><div class="slim-meta">Sistem frânare · 09:31</div></div><span class="pill err"><span class="pdot"></span>De corectat</span></div>
|
||||
<div class="rand"><div><div class="slim-vin">ZAR937...C04</div><div class="slim-meta">Schimb ulei · 09:24</div></div><span class="pill sent"><span class="pdot"></span>Trimis</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div></div></div>
|
||||
<div class="cap">390px · Acasă — RAR online = dot în antet (dată/oră pe hover), filtre fără linie de scroll</div>
|
||||
</div>
|
||||
|
||||
<!-- ECRAN 2: meniu burger deschis (RAR online si aici) -->
|
||||
<div>
|
||||
<div class="phone"><div class="screen">
|
||||
<header>
|
||||
<span class="logo-fallback"><span class="rom">ROM</span><span class="fast">FAST</span></span>
|
||||
<div class="h-center">
|
||||
<div class="h-title">ROMFAST <span class="accent">AUTOPASS</span><span class="tier">Pro</span></div>
|
||||
<div class="h-sub">Service auto: <span class="svc">Service Auto Vâlcea SRL</span></div>
|
||||
</div>
|
||||
<div class="h-right">
|
||||
<span class="rar-dot" title="RAR online"><span class="d"></span></span>
|
||||
<button class="icon-btn" title="Temă: Grafit"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><circle cx="12" cy="12" r="9"/><path d="M12 3a9 9 0 0 0 0 18z" fill="currentColor" stroke="none"/></svg></button>
|
||||
<button class="icon-btn" title="Închide meniu">×</button>
|
||||
</div>
|
||||
</header>
|
||||
<div class="scrim"></div>
|
||||
<div class="menu">
|
||||
<div class="menu-status"><span class="d"></span> RAR online <small>· 09:41</small></div>
|
||||
<div class="menu-plan">Plan: <b>Pro</b> <span class="trial">trial · 18 zile</span></div>
|
||||
<hr>
|
||||
<a href="#">Trimiteri</a>
|
||||
<a href="#">Mapări <span class="badge">2</span></a>
|
||||
<hr>
|
||||
<a href="#">Nomenclator</a>
|
||||
<hr>
|
||||
<a href="#">Cont</a>
|
||||
<a href="#">Integrare</a>
|
||||
<a href="#">Jurnal</a>
|
||||
<hr>
|
||||
<a href="#">Ieși din cont</a>
|
||||
</div>
|
||||
</div></div>
|
||||
<div class="cap">390px · Meniu burger — RAR online + Plan (Pro) + separatoare între secțiuni</div>
|
||||
</div>
|
||||
|
||||
<!-- ECRAN 3: editare full-screen (trimitere nefinalizata) -->
|
||||
<div>
|
||||
<div class="phone"><div class="screen"><div class="scroll">
|
||||
<div class="modal-head"><span class="t">Corectează trimiterea</span><button class="icon-btn" title="Închide">×</button></div>
|
||||
<div class="body" style="gap:0;">
|
||||
<div class="field"><label>VIN (serie șasiu)</label><input class="mono" value="VF1RFB00A88142073"></div>
|
||||
<div class="grid2">
|
||||
<div class="field"><label>Data prestației</label><input class="mono" value="2026-06-22"></div>
|
||||
<div class="field"><label>Nr. înmatriculare</label><input class="mono" value="CT88NOE"></div>
|
||||
</div>
|
||||
<div class="field"><label>Observații (operațiile efectuate)</label><textarea rows="2">Schimbare plăcuțe frână față</textarea></div>
|
||||
<div class="field" style="margin-bottom:6px;">
|
||||
<label>Prestații — cod RAR pe fiecare operație</label>
|
||||
<div class="op-row"><span class="op-name">REVIZIE PERIODICĂ <small>— la 15.000 km</small></span><div class="op-ctl"><span class="chip">REV2 <button>×</button></span></div></div>
|
||||
<div class="op-row" style="border-left:2px solid var(--warn); padding-left:10px;"><span class="op-name">SCHIMB PLĂCUȚE FRÂNĂ <small style="color:var(--warn)">— lipsă cod</small></span><div class="op-ctl"><select><option>— alege cod RAR —</option><option>FRN1 — Sistem de frânare</option></select></div></div>
|
||||
<button class="addcode">+ Adaugă altă operație / cod RAR</button>
|
||||
</div>
|
||||
<div class="actrow"><button class="btn-primary">Salvează și retrimite</button><button class="btn-ghost">Renunță</button></div>
|
||||
</div>
|
||||
</div></div></div>
|
||||
<div class="cap">390px · Editare full-screen — trimitere nefinalizată (picker cod+denumire, Renunță)</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
241
docs/mockups/prd-5.16-dashboard.html
Normal file
241
docs/mockups/prd-5.16-dashboard.html
Normal file
@@ -0,0 +1,241 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ro">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>PRD 5.16 — Dashboard aplicatie (compact, minimalist)</title>
|
||||
<style>
|
||||
:root{
|
||||
--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;
|
||||
--fs-xs:12px; --fs-sm:13.5px; --fs-base:15px; --fs-md:16px; --fs-lg:18px; --fs-xl:20px; --fs-2xl:28px;
|
||||
--bg:#0f1218; --card:#181c24; --card2:#0f1218; --ink:#e6e9ef; --muted:#8b93a7;
|
||||
--line:#262b36; --line2:#1f2530; --accent:#6ea2ec; --ok:#2FBF8F; --warn:#E0A93B; --err:#E05D5D;
|
||||
--hbg:rgba(15,18,24,.9);
|
||||
}
|
||||
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; --hbg:rgba(255,253,247,.92); }
|
||||
body[data-theme="cobalt"]{ --bg:#080d1c; --card:#111a33; --card2:#0b1226; --ink:#e9ecfb; --muted:#8a93b8; --line:#1d2747; --line2:#161f3a; --accent:#8aa0ff; --ok:#2fd0a6; --err:#f06a7a; --hbg:rgba(8,13,28,.92); }
|
||||
body[data-theme="cupru"]{ --bg:#15110b; --card:#211a12; --card2:#15110b; --ink:#efe6d6; --muted:#a89a85; --line:#36291c; --line2:#281e14; --accent:#dfa45c; --ok:#67b98c; --err:#e2685a; --hbg:rgba(21,17,11,.92); }
|
||||
*{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:1.55; -webkit-font-smoothing:antialiased;}
|
||||
.mono{font-family:var(--font-mono);} .muted{color:var(--muted);}
|
||||
|
||||
/* HEADER branded (numele service e DOAR aici, nu se mai duplica jos) */
|
||||
header{position:sticky; top:0; z-index:5; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px; height:64px; padding:0 22px; background:var(--hbg); backdrop-filter:blur(8px); border-bottom:1px solid var(--line);}
|
||||
.logo-fallback{display:inline-flex; align-items:center; gap:6px; font-weight:800; font-size:var(--fs-lg);}
|
||||
.logo-fallback .rom{color:#D1342F;} .logo-fallback .fast{color:var(--accent);}
|
||||
.h-center{text-align:center; line-height:1.15;}
|
||||
.h-title{font-size:var(--fs-md); font-weight:700;} .h-title .accent{color:var(--accent);}
|
||||
.h-sub{font-size:var(--fs-xs); color:var(--muted); margin-top:2px;} .h-sub .svc{color:var(--ink); font-weight:600;}
|
||||
.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);}
|
||||
/* badge tip cont (Gratuit/Standard/Pro/Premium) */
|
||||
.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);}
|
||||
.h-right{display:flex; align-items:center; justify-content:flex-end; gap:10px;}
|
||||
/* dot RAR online compact in antet (inlocuieste banda) — datetime pe title/hover */
|
||||
.rar-chip{display:flex; align-items:center; gap:8px; height:38px; padding:0 13px; border-radius:99px; border:1px solid color-mix(in srgb,var(--ok) 35%,var(--line)); background:color-mix(in srgb,var(--ok) 10%,transparent); color:var(--ok); font-size:var(--fs-sm); font-weight:600; cursor:default;}
|
||||
.rar-chip.blocat{border-color:color-mix(in srgb,var(--err) 45%,var(--line)); background:color-mix(in srgb,var(--err) 12%,transparent); color:var(--err);}
|
||||
.rar-chip .dot{width:9px; height:9px; border-radius:99px; background:currentColor; box-shadow:0 0 0 4px color-mix(in srgb,currentColor 22%,transparent);}
|
||||
.tema-btn{display:flex; align-items:center; gap:8px; height:38px; padding:0 13px; 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;}
|
||||
.tema-btn:hover{border-color:var(--accent); color:var(--ink);}
|
||||
.ver{font-size:var(--fs-xs); color:var(--muted);}
|
||||
.icon-btn{width:38px; height:38px; border-radius:8px; border:1px solid var(--line); background:transparent; color:var(--ink); font-size:18px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; position:relative;}
|
||||
/* meniu burger deschis (mockup) — contine si starea RAR */
|
||||
.menu{position:absolute; top:46px; right:0; width:230px; background:var(--card); border:1px solid var(--line); border-radius:10px; box-shadow:0 18px 40px -16px rgba(0,0,0,.6); padding:6px; z-index:10; text-align:left;}
|
||||
.menu-status{display:flex; align-items:center; gap:8px; padding:9px 10px; font-size:var(--fs-sm); font-weight:600; color:var(--ok);}
|
||||
.menu-status small{font-weight:400; color:var(--muted); font-family:var(--font-mono); font-size:11px;}
|
||||
.menu-plan{display:flex; align-items:center; justify-content:space-between; padding:8px 10px 4px; font-size:var(--fs-sm); color:var(--muted);}
|
||||
.menu-plan b{color:var(--accent);}
|
||||
.menu-plan .trial{font-size:11px; color:var(--muted);}
|
||||
.menu a{display:flex; align-items:center; justify-content:space-between; padding:9px 10px; border-radius:7px; font-size:var(--fs-sm); color:var(--ink); text-decoration:none;}
|
||||
.menu a:hover{background:var(--card2);}
|
||||
.menu hr{border:none; border-top:1px solid var(--line); margin:5px 4px;}
|
||||
.menu .badge{display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px; border-radius:99px; background:var(--err); color:#fff; font-size:11px; font-weight:700;}
|
||||
|
||||
.wrap{max-width:1000px; margin:0 auto; padding:16px 22px 70px; display:flex; flex-direction:column; gap:14px;}
|
||||
|
||||
/* Banda de stare — APARE DOAR cand e blocat (zero-silent-failures) */
|
||||
.strip{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; border-radius:10px;
|
||||
background:color-mix(in srgb, var(--ok) 13%, transparent); border:1px solid color-mix(in srgb, var(--ok) 30%, transparent);}
|
||||
.strip.blocat{background:color-mix(in srgb, var(--err) 13%, transparent); border-color:color-mix(in srgb, var(--err) 35%, transparent); color:var(--err);}
|
||||
.strip-left{display:flex; align-items:center; gap:10px; font-weight:700; font-size:var(--fs-md);}
|
||||
.strip .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);}
|
||||
.strip.blocat .dot{background:var(--err); box-shadow:0 0 0 4px color-mix(in srgb, var(--err) 22%, transparent);}
|
||||
.strip-right{font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--muted);}
|
||||
|
||||
/* 2. CARDURI contor — standalone, fara titlu de sectiune */
|
||||
.contoare{display:grid; grid-template-columns:repeat(5,1fr); gap:10px;}
|
||||
.contor-card{background:var(--card2); border:1px solid var(--line); border-radius:10px; padding:14px 16px;}
|
||||
.contor-card.primar{border-color:color-mix(in srgb,var(--ok) 40%,var(--line));}
|
||||
.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:7px;}
|
||||
.s-ok{color:var(--ok);} .s-acc{color:var(--accent);} .s-err{color:var(--err);}
|
||||
|
||||
/* 3. IMPORT colapsat */
|
||||
.import-collapse{border:1px solid var(--line); border-radius:10px; background:var(--card); overflow:hidden;}
|
||||
.import-collapse>summary{list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 16px; font-size:var(--fs-sm); font-weight:600; color:var(--ink);}
|
||||
.import-collapse>summary::-webkit-details-marker{display:none;}
|
||||
.import-collapse>summary .ic-l{display:flex; align-items:center; gap:10px;}
|
||||
.import-collapse .plus{display:inline-flex; width:24px; height:24px; align-items:center; justify-content:center; border-radius:7px; background:color-mix(in srgb,var(--accent) 16%,transparent); color:var(--accent); font-size:17px; line-height:1;}
|
||||
.import-collapse>summary .ic-r{font-size:var(--fs-xs); color:var(--muted);}
|
||||
.import-collapse[open]>summary{border-bottom:1px solid var(--line);}
|
||||
.import-body{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:16px; border:1px dashed color-mix(in srgb,var(--accent) 45%,var(--line)); border-radius:10px; margin:12px;}
|
||||
.import-body .u-tx{font-size:var(--fs-md); font-weight:600;}
|
||||
.import-body .u-sub{font-size:var(--fs-sm); color:var(--muted); margin-top:2px;}
|
||||
.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;}
|
||||
|
||||
/* 4. NAV tab-uri Trimiteri / Mapari */
|
||||
.subnav{display:flex; gap:6px; border-bottom:1px solid var(--line);}
|
||||
.subnav a{font-size:var(--fs-sm); font-weight:600; padding:9px 16px; border-radius:8px 8px 0 0; color:var(--muted); text-decoration:none; border:1px solid transparent; border-bottom:none; margin-bottom:-1px;}
|
||||
.subnav a.active{color:var(--ink); background:var(--card); border-color:var(--line); border-bottom:1px solid var(--card);}
|
||||
.subnav .badge{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;}
|
||||
|
||||
/* 5. LISTA (fara titlu/subtitlu de sectiune) */
|
||||
.panel{background:var(--card); border:1px solid var(--line); border-radius:0 12px 12px 12px; overflow:hidden;}
|
||||
.filtre{display:flex; gap:8px; padding:12px 16px; flex-wrap:wrap; border-bottom:1px solid var(--line2);}
|
||||
.pillf{font-size:var(--fs-sm); padding:6px 13px; border-radius:99px; border:1px solid var(--line); background:transparent; color:var(--muted); cursor:pointer;}
|
||||
.pillf.on{background:color-mix(in srgb,var(--accent) 16%,transparent); border-color:transparent; color:var(--accent); font-weight:600;}
|
||||
.rand{display:flex; align-items:center; justify-content:space-between; padding:13px 16px; border-bottom:1px solid var(--line2); cursor:pointer;}
|
||||
.rand:hover{background:color-mix(in srgb,var(--accent) 6%,transparent);}
|
||||
.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);}
|
||||
|
||||
/* MODAL editare trimitere nefinalizata (la click pe rand) */
|
||||
.editmodal{max-width:560px; background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden;}
|
||||
.editmodal .mhead{display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--line);}
|
||||
.editmodal .mhead .t{font-size:var(--fs-md); font-weight:700;}
|
||||
.editmodal .mbody{padding:18px;}
|
||||
.field{margin-bottom:14px;}
|
||||
.field label{display:block; font-size:var(--fs-sm); color:var(--muted); margin-bottom:6px;}
|
||||
.field input, .field textarea, .field 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;}
|
||||
.field 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);}
|
||||
.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-ghost{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;}
|
||||
.actrow{display:flex; gap:10px; margin-top:16px;}
|
||||
</style>
|
||||
</head>
|
||||
<body data-theme="grafit">
|
||||
|
||||
<header>
|
||||
<div><span class="logo-fallback"><span class="rom">ROM</span><span class="fast">FAST</span></span></div>
|
||||
<div class="h-center">
|
||||
<div class="h-title">ROMFAST <span class="accent">AUTOPASS</span><span class="env">test</span><span class="tier">Pro</span></div>
|
||||
<div class="h-sub">Service auto: <span class="svc">Service Auto Vâlcea SRL</span></div>
|
||||
</div>
|
||||
<div class="h-right">
|
||||
<div class="rar-chip" title="Ultima autentificare RAR: 28.06.2026 09:41"><span class="dot"></span> RAR online</div>
|
||||
<button class="tema-btn" onclick="cycle()">
|
||||
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><circle cx="12" cy="12" r="9"/><path d="M12 3a9 9 0 0 0 0 18z" fill="currentColor" stroke="none"/></svg>
|
||||
<span id="t-label">Grafit</span>
|
||||
</button>
|
||||
<span class="ver">v5.16</span>
|
||||
<button class="icon-btn" title="Meniu cont">☰
|
||||
<div class="menu">
|
||||
<div class="menu-status"><span class="rar-chip" style="height:auto;padding:0;border:none;background:none;"><span class="dot"></span></span> RAR online <small>· 09:41</small></div>
|
||||
<div class="menu-plan">Plan: <b>Pro</b> <span class="trial">trial · 18 zile rămase</span></div>
|
||||
<hr>
|
||||
<a href="#">Trimiteri</a>
|
||||
<a href="#">Mapări <span class="badge">2</span></a>
|
||||
<hr>
|
||||
<a href="#">Nomenclator</a>
|
||||
<hr>
|
||||
<a href="#">Cont</a>
|
||||
<a href="#">Integrare</a>
|
||||
<a href="#">Jurnal</a>
|
||||
<hr>
|
||||
<a href="#">Ieși din cont</a>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="wrap">
|
||||
|
||||
<!-- CARDURI (fara titlu de sectiune; RAR online e acum dot in antet) -->
|
||||
<div class="contoare">
|
||||
<div class="contor-card primar"><div class="contor-cifra s-ok">847</div><div class="contor-label">Total trimise</div></div>
|
||||
<div class="contor-card"><div class="contor-cifra s-ok">124</div><div class="contor-label">Luna asta</div></div>
|
||||
<div class="contor-card"><div class="contor-cifra s-ok">9</div><div class="contor-label">Azi</div></div>
|
||||
<div class="contor-card"><div class="contor-cifra s-acc">12</div><div class="contor-label">În coadă</div></div>
|
||||
<div class="contor-card"><div class="contor-cifra s-err">2</div><div class="contor-label">De corectat</div></div>
|
||||
</div>
|
||||
|
||||
<!-- 3. IMPORT colapsat -->
|
||||
<details class="import-collapse">
|
||||
<summary>
|
||||
<span class="ic-l"><span class="plus">+</span> Importă fișier (XLSX / CSV)</span>
|
||||
<span class="ic-r">trage-l aici sau apasă pentru a deschide ▾</span>
|
||||
</summary>
|
||||
<div class="import-body">
|
||||
<div><div class="u-tx">Încarcă un fișier sau trage-l aici</div><div class="u-sub">Mapezi coloanele o singură dată — apoi trimitem la RAR automat.</div></div>
|
||||
<button class="btn-primary">Alege fișier</button>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<!-- 4 + 5. NAV + LISTA -->
|
||||
<div>
|
||||
<div class="subnav">
|
||||
<a href="#" class="active">Trimiteri</a>
|
||||
<a href="#">Mapări <span class="badge">2</span></a>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<div class="filtre">
|
||||
<button class="pillf on">Toate</button>
|
||||
<button class="pillf">În coadă</button>
|
||||
<button class="pillf">Trimise</button>
|
||||
<button class="pillf">De corectat</button>
|
||||
</div>
|
||||
<div class="rand"><div><div class="slim-vin">WBA8E9...K7F2</div><div class="slim-meta">Inspecție tehnică · 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 periodică · 09:38</div></div><span class="pill coada"><span class="pdot"></span>În coadă</span></div>
|
||||
<div class="rand"><div><div class="slim-vin">VF1RFB...A88</div><div class="slim-meta">Sistem frânare · 09:31</div></div><span class="pill err"><span class="pdot"></span>De corectat</span></div>
|
||||
<div class="rand"><div><div class="slim-vin">ZAR937...C04</div><div class="slim-meta">Schimb ulei · 09:24</div></div><span class="pill sent"><span class="pdot"></span>Trimis</span></div>
|
||||
<div class="rand"><div><div class="slim-vin">JTDBR...9920</div><div class="slim-meta">Inspecție tehnică · 09:18</div></div><span class="pill sent"><span class="pdot"></span>Trimis</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- DOAR cand e BLOCAT: banda rosie reapare (zero-silent-failures) -->
|
||||
<div style="margin-top:18px; font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.08em; color:var(--err); font-weight:700;">Stare BLOCAT — banda apare DOAR atunci (worker oprit / RAR inaccesibil)</div>
|
||||
<div class="strip blocat">
|
||||
<span class="strip-left"><span class="dot"></span> Blocat: RAR inaccesibil — declarațiile NU pleacă</span>
|
||||
<span class="strip-right">Ultima autentificare RAR: 28.06.2026 09:41</span>
|
||||
</div>
|
||||
|
||||
<!-- MODAL editare: apare la click pe o trimitere nefinalizata (needs_data / needs_mapping / error) -->
|
||||
<div style="margin-top:22px; font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.08em; color:var(--accent); font-weight:700;">Modal editare — la click pe o trimitere nefinalizată (needs_data / needs_mapping)</div>
|
||||
<div class="editmodal" style="margin-top:8px;">
|
||||
<div class="mhead"><span class="t">Corectează trimiterea</span><button class="icon-btn" title="Închide">×</button></div>
|
||||
<div class="mbody">
|
||||
<div class="field"><label>VIN (serie șasiu)</label><input class="mono" value="VF1RFB00A88142073"></div>
|
||||
<div class="grid2">
|
||||
<div class="field"><label>Data prestației</label><input class="mono" value="2026-06-22"></div>
|
||||
<div class="field"><label>Număr înmatriculare</label><input class="mono" value="CT88NOE"></div>
|
||||
</div>
|
||||
<div class="field"><label>Observații (operațiile efectuate)</label><textarea rows="2">Schimbare plăcuțe frână față</textarea></div>
|
||||
<div class="field">
|
||||
<label>Prestații — cod RAR pe fiecare operație</label>
|
||||
<div class="op-row"><span class="op-name">REVIZIE PERIODICĂ <small>— la 15.000 km</small></span><span class="chip">REV2 <button>×</button></span></div>
|
||||
<div class="op-row" style="border-left:2px solid var(--warn); padding-left:10px;"><span class="op-name">SCHIMB PLĂCUȚE FRÂNĂ <small style="color:var(--warn)">— lipsă cod</small></span><select><option>— alege cod RAR —</option><option>FRN1 — Sistem de frânare</option><option>REV2 — Revizie periodică</option></select></div>
|
||||
<div style="margin-top:10px;"><button class="addcode">+ Adaugă altă operație / cod RAR</button></div>
|
||||
</div>
|
||||
<div class="actrow"><button class="btn-primary">Salvează și retrimite</button><button class="btn-ghost">Renunță</button></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var THEMES=[['grafit','Grafit'],['cobalt','Cobalt'],['cupru','Cupru'],['hartie','Hârtie']];
|
||||
var i=0;
|
||||
function cycle(){ i=(i+1)%THEMES.length; document.body.setAttribute('data-theme',THEMES[i][0]); document.getElementById('t-label').textContent=THEMES[i][1]; }
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
187
docs/mockups/prd-5.16-fonturi-system-stack.html
Normal file
187
docs/mockups/prd-5.16-fonturi-system-stack.html
Normal file
@@ -0,0 +1,187 @@
|
||||
<!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>
|
||||
173
docs/mockups/prd-5.16-header-login-tema.html
Normal file
173
docs/mockups/prd-5.16-header-login-tema.html
Normal file
@@ -0,0 +1,173 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ro">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>PRD 5.16 — Header profesional + /login + selector tema stil landing</title>
|
||||
<style>
|
||||
:root{
|
||||
--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;
|
||||
--fs-xs:12px; --fs-sm:13.5px; --fs-base:15px; --fs-md:16px; --fs-lg:18px; --fs-xl:20px; --fs-2xl:28px;
|
||||
--bg:#0f1218; --card:#181c24; --card2:#0f1218; --ink:#e6e9ef; --muted:#8b93a7;
|
||||
--line:#262b36; --line2:#1f2530; --accent:#6ea2ec; --ok:#2FBF8F; --warn:#E0A93B; --err:#E05D5D;
|
||||
--hbg:rgba(15,18,24,.88);
|
||||
}
|
||||
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;
|
||||
--hbg:rgba(255,253,247,.9);
|
||||
}
|
||||
body[data-theme="cobalt"]{ --bg:#080d1c; --card:#111a33; --card2:#0b1226; --ink:#e9ecfb; --muted:#8a93b8; --line:#1d2747; --line2:#161f3a; --accent:#8aa0ff; --ok:#2fd0a6; --err:#f06a7a; --hbg:rgba(8,13,28,.9); }
|
||||
body[data-theme="cupru"]{ --bg:#15110b; --card:#211a12; --card2:#15110b; --ink:#efe6d6; --muted:#a89a85; --line:#36291c; --line2:#281e14; --accent:#dfa45c; --ok:#67b98c; --err:#e2685a; --hbg:rgba(21,17,11,.9); }
|
||||
*{box-sizing:border-box;}
|
||||
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-ui); font-size:var(--fs-base); -webkit-font-smoothing:antialiased;}
|
||||
.mono{font-family:var(--font-mono);}
|
||||
.muted{color:var(--muted);}
|
||||
|
||||
/* ===== HEADER aplicatie (logat) — profesional, branded ===== */
|
||||
header{
|
||||
display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
|
||||
gap:16px; height:64px; padding:0 22px; background:var(--card); border:1px solid var(--line); border-radius:12px;
|
||||
}
|
||||
/* antet MINIMAL pe /login (neautentificat): doar logo + titlu + tema */
|
||||
.login-topbar{display:flex; align-items:center; justify-content:space-between; gap:16px; height:60px; padding:0 22px; background:var(--card); border:1px solid var(--line); border-radius:12px 12px 0 0; border-bottom:none;}
|
||||
.login-topbar .lt-brand{display:flex; align-items:center; gap:10px; font-weight:700; font-size:var(--fs-md);}
|
||||
.login-topbar .lt-brand .accent{color:var(--accent);}
|
||||
.h-left{display:flex; align-items:center; gap:12px;}
|
||||
.logo{height:32px; width:auto; display:block;}
|
||||
/* wordmark fallback in mockup (in app: PNG real ROMFAST) */
|
||||
.logo-fallback{display:inline-flex; align-items:center; gap:7px; font-weight:800; letter-spacing:-.01em; font-size:var(--fs-lg);}
|
||||
.logo-fallback .rom{color:#D1342F;} .logo-fallback .fast{color:var(--accent);}
|
||||
.h-center{text-align:center; line-height:1.15;}
|
||||
.h-title{font-size:var(--fs-md); font-weight:700; letter-spacing:.01em;}
|
||||
.h-title .accent{color:var(--accent);}
|
||||
.h-sub{font-size:var(--fs-xs); color:var(--muted); margin-top:2px;}
|
||||
.h-sub .svc{color:var(--ink); font-weight:600;}
|
||||
.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);}
|
||||
.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);}
|
||||
.h-right{display:flex; align-items:center; justify-content:flex-end; gap:10px;}
|
||||
.rar-chip{display:flex; align-items:center; gap:8px; height:38px; padding:0 13px; border-radius:99px; border:1px solid color-mix(in srgb,var(--ok) 35%,var(--line)); background:color-mix(in srgb,var(--ok) 10%,transparent); color:var(--ok); font-size:var(--fs-sm); font-weight:600; cursor:default;}
|
||||
.rar-chip .dot{width:9px; height:9px; border-radius:99px; background:currentColor; box-shadow:0 0 0 4px color-mix(in srgb,currentColor 22%,transparent);}
|
||||
|
||||
/* selector tema STIL LANDING: pill cu icon + eticheta tema curenta */
|
||||
.tema-btn{display:flex; align-items:center; gap:8px; height:38px; padding:0 13px; 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;}
|
||||
.tema-btn:hover{border-color:var(--accent); color:var(--ink);}
|
||||
.tema-btn svg{flex-shrink:0;}
|
||||
.ver{font-size:var(--fs-xs); color:var(--muted);}
|
||||
.icon-btn{width:38px; height:38px; border-radius:8px; border:1px solid var(--line); background:transparent;
|
||||
color:var(--ink); font-size:18px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center;}
|
||||
|
||||
.wrap{max-width:1100px; margin:0 auto; padding:24px 22px 60px;}
|
||||
.sec{font-size:var(--fs-lg); margin:30px 0 12px; padding-bottom:6px; border-bottom:1px solid var(--line);}
|
||||
.note{font-size:var(--fs-sm); color:var(--muted);}
|
||||
.toolbar{display:flex; gap:10px; align-items:center; margin:14px 0;}
|
||||
.toolbar button{font-family:var(--font-ui); font-size:var(--fs-sm); height:34px; padding:0 12px; border-radius:7px; border:1px solid var(--line); background:var(--card); color:var(--ink); cursor:pointer;}
|
||||
|
||||
/* ===== /login profesional ===== */
|
||||
.login-shell{min-height:520px; display:grid; grid-template-columns:1.1fr .9fr; border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--card);}
|
||||
.login-aside{padding:40px 38px; background:linear-gradient(160deg, color-mix(in srgb,var(--accent) 14%,var(--card)), var(--card)); border-right:1px solid var(--line); display:flex; flex-direction:column; justify-content:center;}
|
||||
.login-brand{display:flex; align-items:center; gap:10px; margin-bottom:22px;}
|
||||
.login-brand .logo-fallback{font-size:var(--fs-xl);}
|
||||
.login-aside h2{font-size:var(--fs-2xl); line-height:1.2; margin:0 0 12px; letter-spacing:-.02em;}
|
||||
.login-aside p{font-size:var(--fs-md); color:var(--muted); line-height:1.6; margin:0 0 18px; max-width:380px;}
|
||||
.trust{display:flex; flex-direction:column; gap:9px; margin-top:6px;}
|
||||
.trust div{display:flex; align-items:center; gap:9px; font-size:var(--fs-sm); color:var(--ink);}
|
||||
.trust svg{flex-shrink:0; color:var(--ok);}
|
||||
.login-form{padding:40px 38px; display:flex; flex-direction:column; justify-content:center;}
|
||||
.login-form h3{font-size:var(--fs-xl); margin:0 0 4px;}
|
||||
.login-form .lead{font-size:var(--fs-sm); color:var(--muted); margin:0 0 22px;}
|
||||
.field{margin-bottom:16px;}
|
||||
.field label{display:block; font-size:var(--fs-sm); color:var(--muted); margin-bottom:6px;}
|
||||
.field input{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:11px 13px; min-height:44px;}
|
||||
.field input:focus{outline:2px solid var(--accent); border-color:var(--accent);}
|
||||
.btn-primary{width:100%; height:46px; font-family:var(--font-ui); font-size:var(--fs-md); font-weight:600; background:var(--accent); color:#fff; border:none; border-radius:8px; cursor:pointer; margin-top:4px;}
|
||||
.row-between{display:flex; align-items:center; justify-content:space-between; margin:-4px 0 18px;}
|
||||
.link{color:var(--accent); font-size:var(--fs-sm); text-decoration:none;}
|
||||
.login-foot{text-align:center; font-size:var(--fs-sm); color:var(--muted); margin-top:18px;}
|
||||
</style>
|
||||
</head>
|
||||
<body data-theme="grafit">
|
||||
|
||||
<div class="wrap">
|
||||
<div class="toolbar">
|
||||
<span class="note">Comuta tema cu butonul de tema (stil landing: icon + eticheta).</span>
|
||||
</div>
|
||||
|
||||
<!-- ===== A. Antet aplicatie — LOGAT ===== -->
|
||||
<div class="sec">Antet aplicatie — LOGAT (branded)</div>
|
||||
<header>
|
||||
<div class="h-left">
|
||||
<span class="logo-fallback"><span class="rom">ROM</span><span class="fast">FAST</span></span>
|
||||
<span class="note" style="font-size:var(--fs-xs)">(in app: PNG logo real)</span>
|
||||
</div>
|
||||
<div class="h-center">
|
||||
<div class="h-title">ROMFAST <span class="accent">AUTOPASS</span><span class="env">test</span><span class="tier">Pro</span></div>
|
||||
<div class="h-sub">Service auto: <span class="svc">Service Auto Vâlcea SRL</span></div>
|
||||
</div>
|
||||
<div class="h-right">
|
||||
<div class="rar-chip" title="Ultima autentificare RAR: 28.06.2026 09:41"><span class="dot"></span> RAR online</div>
|
||||
<button class="tema-btn" onclick="cycle()">
|
||||
<svg id="t-ic" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><circle cx="12" cy="12" r="9"/><path d="M12 3a9 9 0 0 0 0 18z" fill="currentColor" stroke="none"/></svg>
|
||||
<span id="t-label">Grafit</span>
|
||||
</button>
|
||||
<span class="ver">v5.16</span>
|
||||
<button class="icon-btn" title="Meniu cont">☰</button>
|
||||
</div>
|
||||
</header>
|
||||
<p class="note">Doar cand esti LOGAT: titlu <strong>ROMFAST AUTOPASS</strong> + badge plan
|
||||
(<span class="mono">accounts.tier</span>) + sub titlu numele service-ului (<span class="mono">accounts.name</span>);
|
||||
dreapta dot <strong>RAR online</strong> + selector tema + meniu cont. Toate gate-uite pe
|
||||
<span class="mono">is_authenticated</span>.</p>
|
||||
|
||||
<!-- ===== B. /login — NEAUTENTIFICAT (antet minimal) ===== -->
|
||||
<div class="sec">Pagina /login — NEAUTENTIFICAT (antet minimal)</div>
|
||||
<div class="login-topbar">
|
||||
<span class="lt-brand"><span class="logo-fallback"><span class="rom">ROM</span><span class="fast">FAST</span></span> ROMFAST <span class="accent">AUTOPASS</span></span>
|
||||
<button class="tema-btn" onclick="cycle()">
|
||||
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><circle cx="12" cy="12" r="9"/><path d="M12 3a9 9 0 0 0 0 18z" fill="currentColor" stroke="none"/></svg>
|
||||
<span id="t-label2">Grafit</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="login-shell" style="border-radius:0 0 16px 16px; border-top:none;">
|
||||
<div class="login-aside">
|
||||
<div class="login-brand"><span class="logo-fallback"><span class="rom">ROM</span><span class="fast">FAST</span></span></div>
|
||||
<h2>ROMFAST <span style="color:var(--accent)">AUTOPASS</span></h2>
|
||||
<p>Declară prestațiile de service-auto la RAR AUTOPASS, automat. Conform Legii 142/2023.</p>
|
||||
<div class="trust">
|
||||
<div><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M20 6L9 17l-5-5"/></svg> Conform Legii 142/2023 și OMTI 210/2024</div>
|
||||
<div><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="5" y="11" width="14" height="9" rx="1.5"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/></svg> Datele tale criptate, șterse la 3 luni</div>
|
||||
<div><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg> Parte din familia ROA — Romfast Applications</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="login-form">
|
||||
<h3>Autentificare</h3>
|
||||
<p class="lead">Intră în contul service-ului tău.</p>
|
||||
<div class="field"><label>Email</label><input type="email" value="contact@service-valcea.ro"></div>
|
||||
<div class="field"><label>Parolă</label><input type="password" value="••••••••••"></div>
|
||||
<div class="row-between"><span></span><a class="link" href="#">Ai uitat parola?</a></div>
|
||||
<button class="btn-primary">Intră în cont</button>
|
||||
<div class="login-foot">Cont nou? <a class="link" href="/signup">Înregistrează service-ul</a></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="note">Antetul de <span class="mono">/login</span> NU are dot RAR, nume service sau badge plan —
|
||||
utilizatorul nu e logat inca. Doar logo + titlu <strong>ROMFAST AUTOPASS</strong> + selector tema.
|
||||
(RAR/service/plan/meniu apar abia dupa autentificare.)</p>
|
||||
|
||||
<div class="sec">Landing — butonul „Autentificare" duce la /login</div>
|
||||
<p class="note">Pe landing, „Autentificare" (azi deschide modalul de register din landing pe tab-ul
|
||||
login) devine un link real către <span class="mono">/login</span> (pagina de mai sus). „Creează cont"
|
||||
rămâne neschimbat. Selectorul de teme din landing e exact modelul pe care îl preia aplicația.</p>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var THEMES=[['grafit','Grafit'],['cobalt','Cobalt'],['cupru','Cupru'],['hartie','Hârtie']];
|
||||
var i=0;
|
||||
function cycle(){ i=(i+1)%THEMES.length; document.body.setAttribute('data-theme',THEMES[i][0]); document.getElementById('t-label').textContent=THEMES[i][1]; var l2=document.getElementById('t-label2'); if(l2)l2.textContent=THEMES[i][1]; }
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
275
docs/mockups/prd-5.16-import-wizard.html
Normal file
275
docs/mockups/prd-5.16-import-wizard.html
Normal file
@@ -0,0 +1,275 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ro">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>PRD 5.16 — Wizard import fișier (4 pași) + editare/corecție</title>
|
||||
<style>
|
||||
:root{
|
||||
--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;
|
||||
--fs-xs:12px; --fs-sm:13.5px; --fs-base:15px; --fs-md:16px; --fs-lg:18px; --fs-xl:20px; --fs-2xl:28px;
|
||||
--bg:#0f1218; --card:#181c24; --card2:#0f1218; --ink:#e6e9ef; --muted:#8b93a7;
|
||||
--line:#262b36; --line2:#1f2530; --accent:#6ea2ec; --ok:#2FBF8F; --warn:#E0A93B; --err:#E05D5D;
|
||||
--hbg:rgba(15,18,24,.9);
|
||||
}
|
||||
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; --hbg:rgba(255,253,247,.92); }
|
||||
*{box-sizing:border-box;}
|
||||
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-ui); font-size:var(--fs-base); -webkit-font-smoothing:antialiased;}
|
||||
.mono{font-family:var(--font-mono);} .muted{color:var(--muted);}
|
||||
|
||||
header{position:sticky; top:0; z-index:5; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px; height:64px; padding:0 22px; background:var(--hbg); backdrop-filter:blur(8px); border-bottom:1px solid var(--line);}
|
||||
.logo-fallback{display:inline-flex; align-items:center; gap:6px; font-weight:800; font-size:var(--fs-lg);}
|
||||
.logo-fallback .rom{color:#D1342F;} .logo-fallback .fast{color:var(--accent);}
|
||||
.h-center{text-align:center; line-height:1.15;}
|
||||
.h-title{font-size:var(--fs-md); font-weight:700;} .h-title .accent{color:var(--accent);}
|
||||
.h-sub{font-size:var(--fs-xs); color:var(--muted); margin-top:2px;} .h-sub .svc{color:var(--ink); font-weight:600;}
|
||||
.env{display:inline-block; margin-left:8px; padding:1px 7px; border-radius:99px; font-size:10px; font-weight:700; text-transform:uppercase; color:var(--warn); background:color-mix(in srgb,var(--warn) 16%,transparent);}
|
||||
.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);}
|
||||
.h-right{display:flex; align-items:center; justify-content:flex-end; gap:10px;}
|
||||
.rar-chip{display:flex; align-items:center; gap:8px; height:38px; padding:0 13px; border-radius:99px; border:1px solid color-mix(in srgb,var(--ok) 35%,var(--line)); background:color-mix(in srgb,var(--ok) 10%,transparent); color:var(--ok); font-size:var(--fs-sm); font-weight:600; cursor:default;}
|
||||
.rar-chip .dot{width:9px; height:9px; border-radius:99px; background:currentColor; box-shadow:0 0 0 4px color-mix(in srgb,currentColor 22%,transparent);}
|
||||
.tema-btn{display:flex; align-items:center; gap:8px; height:38px; padding:0 13px; border-radius:8px; background:transparent; border:1px solid var(--line); color:var(--muted); font-size:var(--fs-sm); cursor:pointer;}
|
||||
.icon-btn{width:38px; height:38px; border-radius:8px; border:1px solid var(--line); background:transparent; color:var(--ink); font-size:18px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center;}
|
||||
|
||||
.wrap{max-width:1000px; margin:0 auto; padding:22px 22px 70px;}
|
||||
.screen-cap{font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.08em; color:var(--accent); font-weight:700; margin:30px 0 10px;}
|
||||
|
||||
/* stepper slim */
|
||||
.stepper{display:flex; align-items:center; gap:0; background:var(--card); border:1px solid var(--line); border-radius:11px; padding:6px; margin-bottom:14px;}
|
||||
.step{flex:1; display:flex; align-items:center; gap:9px; padding:9px 12px; border-radius:8px; font-size:var(--fs-sm);}
|
||||
.step .num{display:inline-flex; width:24px; height:24px; align-items:center; justify-content:center; border-radius:99px; font-size:var(--fs-sm); font-weight:700; background:var(--card2); border:1px solid var(--line); color:var(--muted); flex-shrink:0;}
|
||||
.step.done .num{background:color-mix(in srgb,var(--ok) 20%,transparent); border-color:transparent; color:var(--ok);}
|
||||
.step.active{background:color-mix(in srgb,var(--accent) 14%,transparent);}
|
||||
.step.active .num{background:var(--accent); border-color:transparent; color:#fff;}
|
||||
.step.active .t{color:var(--ink); font-weight:600;} .step .t{color:var(--muted);}
|
||||
.step .sep{color:var(--line);}
|
||||
|
||||
.panel{background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden;}
|
||||
.panel-head{padding:16px 18px; border-bottom:1px solid var(--line);}
|
||||
.panel-head h3{margin:0; font-size:var(--fs-lg);}
|
||||
.panel-head p{margin:4px 0 0; font-size:var(--fs-sm); color:var(--muted);}
|
||||
.panel-body{padding:18px;}
|
||||
.foot{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px; border-top:1px solid var(--line); background:var(--card2);}
|
||||
.btn-primary{font-size:var(--fs-md); font-weight:600; height:44px; padding:0 22px; background:var(--accent); color:#fff; border:none; border-radius:9px; cursor:pointer;}
|
||||
.btn-ghost{font-size:var(--fs-md); height:44px; padding:0 18px; background:transparent; color:var(--ink); border:1px solid var(--line); border-radius:9px; cursor:pointer;}
|
||||
|
||||
/* PAS 1 — drop zone */
|
||||
.drop{border:2px dashed color-mix(in srgb,var(--accent) 45%,var(--line)); border-radius:12px; padding:46px 20px; text-align:center; background:var(--card2);}
|
||||
.drop .ic{width:54px; height:54px; border-radius:12px; margin:0 auto 14px; display:flex; align-items:center; justify-content:center; background:color-mix(in srgb,var(--accent) 14%,transparent); color:var(--accent);}
|
||||
.drop .big{font-size:var(--fs-lg); font-weight:700;}
|
||||
.drop .sm{font-size:var(--fs-sm); color:var(--muted); margin:6px 0 16px;}
|
||||
.formate{display:inline-flex; gap:8px; margin-top:14px;}
|
||||
.badge-fmt{font-family:var(--font-mono); font-size:var(--fs-xs); padding:3px 9px; border-radius:6px; background:var(--card); border:1px solid var(--line); color:var(--muted);}
|
||||
|
||||
/* PAS 2 — mapare coloane */
|
||||
.memo{display:flex; align-items:center; gap:9px; font-size:var(--fs-sm); color:var(--ok); background:color-mix(in srgb,var(--ok) 12%,transparent); border:1px solid color-mix(in srgb,var(--ok) 28%,transparent); border-radius:9px; padding:10px 14px; margin-bottom:14px;}
|
||||
table{width:100%; border-collapse:collapse; font-size:var(--fs-base);}
|
||||
.map th{text-align:left; font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.05em; color:var(--muted); padding:0 12px 8px; font-weight:700;}
|
||||
.map td{padding:9px 12px; border-top:1px solid var(--line2); vertical-align:middle;}
|
||||
.col-name{font-family:var(--font-mono); font-size:var(--fs-sm); font-weight:600;}
|
||||
.col-sample{font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--muted);}
|
||||
.map select{width:100%; font-family:var(--font-ui); font-size:var(--fs-base); color:var(--ink); background:var(--card2); border:1px solid var(--line); border-radius:8px; padding:8px 10px; min-height:38px;}
|
||||
.map .ignored select{color:var(--muted);}
|
||||
.switch{display:inline-flex; align-items:center; gap:9px; font-size:var(--fs-sm); color:var(--muted);}
|
||||
.switch .track{width:38px; height:22px; border-radius:99px; background:color-mix(in srgb,var(--accent) 70%,var(--line)); position:relative;}
|
||||
.switch .knob{position:absolute; top:2px; right:2px; width:18px; height:18px; border-radius:99px; background:#fff;}
|
||||
|
||||
/* PAS 3 — preview */
|
||||
.summary{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px;}
|
||||
.chipc{display:flex; align-items:center; gap:8px; font-size:var(--fs-sm); padding:7px 13px; border-radius:99px; border:1px solid var(--line); background:var(--card2);}
|
||||
.chipc b{font-size:var(--fs-md);}
|
||||
.pv th{text-align:left; font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.05em; color:var(--muted); padding:0 12px 9px; font-weight:700;}
|
||||
.pv td{padding:11px 12px; border-top:1px solid var(--line2); font-size:var(--fs-sm);}
|
||||
.pv .vin{font-family:var(--font-mono); font-size:var(--fs-sm);}
|
||||
.pill{display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:99px; font-size:var(--fs-xs); font-weight:600;}
|
||||
.pill .pdot{width:7px; height:7px; border-radius:99px;}
|
||||
.ok{background:color-mix(in srgb,var(--ok) 14%,transparent); color:var(--ok);} .ok .pdot{background:var(--ok);}
|
||||
.warn{background:color-mix(in srgb,var(--warn) 16%,transparent); color:var(--warn);} .warn .pdot{background:var(--warn);}
|
||||
.err{background:color-mix(in srgb,var(--err) 14%,transparent); color:var(--err);} .err .pdot{background:var(--err);}
|
||||
.lnk{color:var(--accent); font-size:var(--fs-sm); cursor:pointer; background:none; border:none; padding:0; text-decoration:underline;}
|
||||
tr.editing{background:color-mix(in srgb,var(--accent) 7%,transparent);}
|
||||
|
||||
/* editare inline / corectie (slim form) */
|
||||
.editbox{margin:2px 12px 12px; border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line)); border-radius:11px; background:var(--card2); padding:16px;}
|
||||
.editbox .et{font-size:var(--fs-sm); font-weight:700; margin-bottom:12px; color:var(--accent);}
|
||||
.field{margin-bottom:13px;}
|
||||
.field label{display:block; font-size:var(--fs-sm); color:var(--muted); margin-bottom:6px;}
|
||||
.field input, .field textarea, .field select{width:100%; font-family:var(--font-ui); font-size:var(--fs-md); color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:8px; padding:9px 12px; min-height:40px;}
|
||||
.field input.mono{font-family:var(--font-mono);}
|
||||
.grid3{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:12px;}
|
||||
.op-row{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 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);}
|
||||
.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;}
|
||||
.save-rule{font-size:var(--fs-xs); color:var(--muted); text-decoration:underline; background:none; border:none; cursor:pointer;}
|
||||
.actrow{display:flex; gap:10px; margin-top:14px;}
|
||||
|
||||
/* PAS 4 — confirma */
|
||||
.confirm-big{text-align:center; padding:8px 0 4px;}
|
||||
.confirm-big .n{font-size:42px; font-weight:700; color:var(--ok); line-height:1;}
|
||||
.confirm-big .l{font-size:var(--fs-md); color:var(--muted); margin-top:6px;}
|
||||
.breakdown{display:flex; gap:10px; justify-content:center; margin:16px 0;}
|
||||
.atest{display:flex; align-items:flex-start; gap:10px; font-size:var(--fs-sm); color:var(--ink); background:var(--card2); border:1px solid var(--line); border-radius:10px; padding:14px 16px; margin-top:6px;}
|
||||
.atest input{margin-top:3px; width:18px; height:18px;}
|
||||
.warn-note{display:flex; align-items:center; gap:9px; font-size:var(--fs-sm); color:var(--warn); margin-top:12px;}
|
||||
</style>
|
||||
</head>
|
||||
<body data-theme="grafit">
|
||||
|
||||
<header>
|
||||
<span class="logo-fallback"><span class="rom">ROM</span><span class="fast">FAST</span></span>
|
||||
<div class="h-center">
|
||||
<div class="h-title">ROMFAST <span class="accent">AUTOPASS</span><span class="env">test</span><span class="tier">Pro</span></div>
|
||||
<div class="h-sub">Service auto: <span class="svc">Service Auto Vâlcea SRL</span></div>
|
||||
</div>
|
||||
<div class="h-right">
|
||||
<div class="rar-chip" title="Ultima autentificare RAR: 28.06.2026 09:41"><span class="dot"></span> RAR online</div>
|
||||
<button class="tema-btn"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><circle cx="12" cy="12" r="9"/><path d="M12 3a9 9 0 0 0 0 18z" fill="currentColor" stroke="none"/></svg> Grafit</button>
|
||||
<button class="icon-btn">☰</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="wrap">
|
||||
|
||||
<!-- ============ PAS 1 ============ -->
|
||||
<div class="screen-cap">Pas 1 — Încarcă fișier</div>
|
||||
<div class="stepper">
|
||||
<div class="step active"><span class="num">1</span><span class="t">Încarcă</span></div>
|
||||
<div class="step"><span class="num">2</span><span class="t">Potrivește</span></div>
|
||||
<div class="step"><span class="num">3</span><span class="t">Verifică</span></div>
|
||||
<div class="step"><span class="num">4</span><span class="t">Confirmă</span></div>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<div class="panel-head"><h3>Încarcă fișierul cu prestații</h3><p>Trage un fișier xlsx/csv aici sau folosește butonul de alegere.</p></div>
|
||||
<div class="panel-body">
|
||||
<div class="drop">
|
||||
<div class="ic"><svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M12 16V4M7 9l5-5 5 5"/><path d="M5 20h14"/></svg></div>
|
||||
<div class="big">Trage fișierul aici</div>
|
||||
<div class="sm">sau apasă pentru a alege de pe calculator · max 5 MB</div>
|
||||
<button class="btn-primary">Alege fișier</button>
|
||||
<div class="formate"><span class="badge-fmt">.xlsx</span><span class="badge-fmt">.csv</span><span class="badge-fmt">.xls</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ============ PAS 2 ============ -->
|
||||
<div class="screen-cap">Pas 2 — Potrivește coloanele</div>
|
||||
<div class="stepper">
|
||||
<div class="step done"><span class="num">✓</span><span class="t">Încarcă</span></div>
|
||||
<div class="step active"><span class="num">2</span><span class="t">Potrivește</span></div>
|
||||
<div class="step"><span class="num">3</span><span class="t">Verifică</span></div>
|
||||
<div class="step"><span class="num">4</span><span class="t">Confirmă</span></div>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<div class="panel-head"><h3>Potrivește coloanele fișierului cu câmpurile RAR</h3><p>Spune-ne ce coloană din fișier corespunde cu ce câmp RAR. <span class="mono">prestatii-iunie.xlsx</span> · 38 rânduri.</p></div>
|
||||
<div class="panel-body">
|
||||
<div class="memo"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg> Format recunoscut — am reaplicat maparea salvată pentru aceste coloane.</div>
|
||||
<table class="map">
|
||||
<thead><tr><th style="width:34%">Coloană din fișier</th><th style="width:30%">Exemplu</th><th style="width:36%">Câmp RAR</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="col-name">SASIU</td><td class="col-sample">WBA8E9C5K7F20143</td><td><select><option>VIN (serie șasiu)</option></select></td></tr>
|
||||
<tr><td class="col-name">DATA</td><td class="col-sample">22.06.2026</td><td><select><option>Data prestației</option></select></td></tr>
|
||||
<tr><td class="col-name">NR_AUTO</td><td class="col-sample">CT88NOE</td><td><select><option>Număr înmatriculare</option></select></td></tr>
|
||||
<tr><td class="col-name">KM</td><td class="col-sample">142500</td><td><select><option>Odometru (km)</option></select></td></tr>
|
||||
<tr><td class="col-name">OPERATIE</td><td class="col-sample">Revizie periodică</td><td><select><option>Operație service → cod RAR</option></select></td></tr>
|
||||
<tr class="ignored"><td class="col-name">PRET</td><td class="col-sample">350 lei</td><td><select><option>— ignoră coloana —</option></select></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="foot">
|
||||
<label class="switch"><span class="track"><span class="knob"></span></span> Ține minte maparea pentru acest format</label>
|
||||
<div style="display:flex; gap:10px;"><button class="btn-ghost">Înapoi</button><button class="btn-primary">Continuă spre verificare</button></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ============ PAS 3 ============ -->
|
||||
<div class="screen-cap">Pas 3 — Verifică (cu editare/corecție rând)</div>
|
||||
<div class="stepper">
|
||||
<div class="step done"><span class="num">✓</span><span class="t">Încarcă</span></div>
|
||||
<div class="step done"><span class="num">✓</span><span class="t">Potrivește</span></div>
|
||||
<div class="step active"><span class="num">3</span><span class="t">Verifică</span></div>
|
||||
<div class="step"><span class="num">4</span><span class="t">Confirmă</span></div>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<div class="panel-head"><h3>Verifică rândurile înainte să le trimiți la RAR</h3><p>Corectează rândurile marcate. Restul sunt gata de trimis.</p></div>
|
||||
<div class="panel-body">
|
||||
<div class="summary">
|
||||
<span class="chipc"><span class="pill ok"><span class="pdot"></span></span> <b>33</b> gata</span>
|
||||
<span class="chipc"><span class="pill warn"><span class="pdot"></span></span> <b>2</b> Cod RAR lipsă</span>
|
||||
<span class="chipc"><span class="pill err"><span class="pdot"></span></span> <b>1</b> Date incomplete</span>
|
||||
<span class="chipc"><span class="pill warn"><span class="pdot"></span></span> <b>1</b> Duplicat în fișier</span>
|
||||
<span class="chipc"><span class="pill ok"><span class="pdot"></span></span> <b>1</b> Deja trimis</span>
|
||||
</div>
|
||||
<table class="pv">
|
||||
<thead><tr><th>VIN</th><th>Operație</th><th>Data</th><th>Stare</th><th></th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="vin">WBA8E9...K7F2</td><td>Inspecție tehnică</td><td class="mono">22.06.2026</td><td><span class="pill ok"><span class="pdot"></span>Gata</span></td><td><button class="lnk">editează</button></td></tr>
|
||||
<!-- rand in editare/corectie -->
|
||||
<tr class="editing"><td class="vin">VF1RFB...A88</td><td>Schimb plăcuțe frână</td><td class="mono">22.06.2026</td><td><span class="pill warn"><span class="pdot"></span>Cod RAR lipsă</span></td><td><button class="lnk">închide</button></td></tr>
|
||||
<tr class="editing"><td colspan="5" style="padding:0;">
|
||||
<div class="editbox">
|
||||
<div class="et">Corectează rândul — VF1RFB...A88</div>
|
||||
<div class="grid3">
|
||||
<div class="field"><label>VIN (serie șasiu)</label><input class="mono" value="VF1RFB00A88142073"></div>
|
||||
<div class="field"><label>Data prestației</label><input class="mono" value="2026-06-22"></div>
|
||||
<div class="field"><label>Nr. înmatriculare</label><input class="mono" value="CT88NOE"></div>
|
||||
</div>
|
||||
<div class="field"><label>Observații (operațiile efectuate)</label><textarea rows="2">Schimbare plăcuțe frână față</textarea></div>
|
||||
<div class="field">
|
||||
<label>Prestații — cod RAR pe fiecare operație</label>
|
||||
<div class="op-row" style="border-left:2px solid var(--warn); padding-left:10px;">
|
||||
<span class="op-name">SCHIMB PLĂCUȚE FRÂNĂ <small style="color:var(--warn)">— lipsă cod</small></span>
|
||||
<span style="display:flex; gap:8px; align-items:center;">
|
||||
<select><option>— alege cod RAR —</option><option>FRN1 — Sistem de frânare</option><option>REV2 — Revizie periodică</option></select>
|
||||
</span>
|
||||
</div>
|
||||
<div style="margin-top:8px; display:flex; align-items:center; gap:12px;">
|
||||
<button class="addcode">+ Adaugă altă operație / cod RAR</button>
|
||||
<button class="save-rule">salvează ca regulă op→cod (deblochează rândurile la fel)</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="actrow"><button class="btn-primary">Salvează rândul</button><button class="btn-ghost">Renunță</button></div>
|
||||
</div>
|
||||
</td></tr>
|
||||
<tr><td class="vin">ZAR937...C04</td><td>Schimb ulei</td><td class="mono">21.06.2026</td><td><span class="pill err"><span class="pdot"></span>Date incomplete</span></td><td><button class="lnk">editează</button></td></tr>
|
||||
<tr><td class="vin">WVWZZZ...3M1</td><td>Revizie periodică</td><td class="mono">22.06.2026</td><td><span class="pill warn"><span class="pdot"></span>Duplicat în fișier</span></td><td><button class="lnk">editează</button></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="foot">
|
||||
<span class="muted" style="font-size:var(--fs-sm);">3 rânduri de corectat înainte de trimitere</span>
|
||||
<div style="display:flex; gap:10px;"><button class="btn-ghost">Înapoi</button><button class="btn-primary">Confirmă valorile →</button></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ============ PAS 4 ============ -->
|
||||
<div class="screen-cap">Pas 4 — Confirmă trimiterea</div>
|
||||
<div class="stepper">
|
||||
<div class="step done"><span class="num">✓</span><span class="t">Încarcă</span></div>
|
||||
<div class="step done"><span class="num">✓</span><span class="t">Potrivește</span></div>
|
||||
<div class="step done"><span class="num">✓</span><span class="t">Verifică</span></div>
|
||||
<div class="step active"><span class="num">4</span><span class="t">Confirmă</span></div>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<div class="panel-head"><h3>Confirmă trimiterea la RAR</h3><p>Acțiunea e ireversibilă — prestațiile pleacă la RAR AUTOPASS.</p></div>
|
||||
<div class="panel-body">
|
||||
<div class="confirm-big"><div class="n">36</div><div class="l">prestații gata de trimis</div></div>
|
||||
<div class="breakdown">
|
||||
<span class="chipc"><span class="pill ok"><span class="pdot"></span></span> 36 vor pleca</span>
|
||||
<span class="chipc"><span class="pill warn"><span class="pdot"></span></span> 1 sărit (duplicat)</span>
|
||||
<span class="chipc"><span class="pill ok"><span class="pdot"></span></span> 1 deja trimis</span>
|
||||
</div>
|
||||
<label class="atest"><input type="checkbox" checked> Confirm că datele sunt corecte și autorizez trimiterea celor 36 de prestații la RAR AUTOPASS, conform Legii 142/2023.</label>
|
||||
<div class="warn-note"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 9v4M12 17h.01"/><path d="M10.3 3.8 2 18a2 2 0 0 0 1.7 3h16.6a2 2 0 0 0 1.7-3L13.7 3.8a2 2 0 0 0-3.4 0z"/></svg> O prestație finalizată la RAR nu mai poate fi anulată sau corectată prin aplicație.</div>
|
||||
</div>
|
||||
<div class="foot">
|
||||
<button class="btn-ghost">Înapoi la verificare</button>
|
||||
<button class="btn-primary">Trimite 36 de prestații la RAR</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user