8dd0e1678c
PRD 5.16 (draft) — propagare design uniform peste aplicatie: - fonturi standard web (system font stack), scala uniforma --fs-* (carduri aerisite) - RAR online = dot in antet (datetime pe hover) + meniu burger; banda doar cand e blocat - antet branded "ROMFAST AUTOPASS" + nume service + badge plan (gate is_authenticated) - /login profesional (antet minimal pre-login), selector tema stil landing - bug-uri editare: denumiri in picker, adaugare operatie extra, fix save no-op, fix Renunta - dashboard compact: strip-less, contoare separate (mobil = bara numere), import colapsat, ordine carduri->import->tab-uri->lista, meniu cu separatoare - wizard import (4 pasi) + editare/corectie aliniate la design PRD 5.17 (draft) — tipuri de cont (Gratuit/Standard/Pro/Premium) + trial Pro 30 zile: - model accounts.tier + trial_until, app/plans.py sursa unica - enforcement DUR: limita Gratuit 60/luna (era 100) + API doar Pro+ - downgrade automat la expirare trial; aliniere landing (60, "Pro gratuit 30 zile") Mockup-uri vizuale (docs/mockups/prd-5.16-*.html): fonturi, header+login+tema, dashboard desktop+mobil, wizard import. Doar documentatie + mockup-uri; fara cod aplicatie. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
276 lines
22 KiB
HTML
276 lines
22 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ro">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>PRD 5.16 — 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>
|