19f89ecd70
Tema grafit, tokenuri identice cu landing.html. Acopera cele 3 piese pe care mockup-urile existente nu le aratau si rezolva contradictiile mockup<->PRD: VIN unic (fara Confirma VIN), contor Trimise all-time ca cifra principala, culori prin tokeni (nu hex hardcodat), picker prestatii pe operatie (op<->cod) in loc de chips plate. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
195 lines
14 KiB
HTML
195 lines
14 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.15 — mockup-uri piese lipsa (D6 strip / E4 picker / odo reveal)</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
*{box-sizing:border-box;}
|
|
/* grafit (default dark) — aceleasi tokenuri ca landing.html */
|
|
:root{--bg:#0f1218;--card:#181c24;--card2:#0f1218;--text:#e6e9ef;--sub:#8b93a7;--line:#262b36;--line2:#1f2530;--accent:#2E74D6;--okt:#2FBF8F;--infot:#6ea2ec;--errt:#E05D5D;--warn:#E0A93B;}
|
|
body{margin:0;padding:32px;background:#0b0e13;font-family:'IBM Plex Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased;color:var(--text);}
|
|
h1{font:700 22px 'IBM Plex Sans';margin:0 0 4px;}
|
|
.pgsub{font:400 13px 'IBM Plex Sans';color:var(--sub);margin:0 0 28px;}
|
|
.seclabel{font:500 13px 'IBM Plex Sans';color:var(--sub);letter-spacing:.04em;text-transform:uppercase;margin:34px 0 14px;border-top:1px solid var(--line);padding-top:18px;}
|
|
.frames{display:flex;gap:24px;flex-wrap:wrap;align-items:flex-start;}
|
|
.frlabel{font:500 12px 'IBM Plex Sans';color:var(--sub);margin-bottom:10px;}
|
|
/* componente slim */
|
|
.counter{flex:1;background:var(--card2);border:1px solid var(--line);border-radius:8px;padding:10px 12px;}
|
|
.cnum{font:700 22px 'IBM Plex Sans';line-height:1;}
|
|
.clabel{font:400 11px 'IBM Plex Sans';color:var(--sub);margin-top:5px;}
|
|
.csub{font:400 10px 'IBM Plex Mono';color:var(--sub);margin-top:3px;}
|
|
.row{display:flex;align-items:center;justify-content:space-between;padding:11px 18px;border-bottom:1px solid var(--line2);}
|
|
.vin{font:500 13px 'IBM Plex Mono';color:var(--text);}
|
|
.meta{font:400 11px 'IBM Plex Sans';color:var(--sub);margin-top:3px;}
|
|
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:99px;font:500 12px 'IBM Plex Sans';}
|
|
.dot{width:6px;height:6px;border-radius:99px;}
|
|
.lab{font:400 11px 'IBM Plex Sans';color:var(--sub);margin-bottom:4px;}
|
|
.fld{height:30px;display:flex;align-items:center;padding:0 10px;border:1px solid var(--line);border-radius:6px;background:var(--card2);font:400 12px 'IBM Plex Mono';color:var(--text);}
|
|
.fldsans{font-family:'IBM Plex Sans';}
|
|
.chip{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:5px;background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent);font:600 11px 'IBM Plex Mono';}
|
|
.chipx{opacity:.7;cursor:pointer;}
|
|
.chipbox{min-height:30px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:4px 8px;border:1px solid var(--line);border-radius:6px;background:var(--card2);}
|
|
.addcode{display:inline-flex;align-items:center;height:22px;padding:0 7px;border:1px dashed color-mix(in srgb,var(--accent) 55%,var(--line));border-radius:5px;color:var(--accent);font:500 10px 'IBM Plex Sans';cursor:pointer;}
|
|
.oprow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:6px;background:var(--card2);margin-bottom:8px;}
|
|
.opname{font:500 12px 'IBM Plex Sans';color:var(--text);}
|
|
.picker{height:26px;display:inline-flex;align-items:center;gap:6px;padding:0 8px;border:1px dashed color-mix(in srgb,var(--accent) 55%,var(--line));border-radius:5px;background:transparent;color:var(--accent);font:500 11px 'IBM Plex Sans';cursor:pointer;}
|
|
.saverule{font:400 10px 'IBM Plex Sans';color:var(--okt);margin-top:3px;display:inline-flex;align-items:center;gap:4px;}
|
|
.btn{margin-top:6px;height:34px;padding:0 16px;border-radius:6px;background:var(--accent);border:none;color:#fff;font:600 12px 'IBM Plex Sans';cursor:pointer;align-self:flex-start;}
|
|
.form{display:flex;flex-direction:column;gap:11px;padding:18px;}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<h1>PRD 5.15 — mockup-uri pentru piesele fara design</h1>
|
|
<p class="pgsub">Tema grafit (dark), tokenuri identice cu landing.html. Trei piese pe care mockup-urile existente nu le acopera: stripul de sanatate D6, pickerul prestatii E4 (op↔cod), si reveal-ul odometru initial.</p>
|
|
|
|
<!-- ===================== D6 STRIP SANATATE ===================== -->
|
|
<div class="seclabel">1 · D6 — strip sanatate mereu-vizibil (deasupra contoarelor)</div>
|
|
<div class="frames">
|
|
|
|
<div>
|
|
<div class="frlabel">Stare BLOCAT (rosu) — declaratiile NU pleaca</div>
|
|
<div style="width:600px;background:var(--bg);border:1px solid var(--line);border-radius:12px;overflow:hidden;">
|
|
<div style="padding:14px;">
|
|
<div style="display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;border-radius:8px;background:color-mix(in srgb,var(--errt) 16%,var(--card));border:1px solid color-mix(in srgb,var(--errt) 40%,transparent);margin-bottom:14px;">
|
|
<div style="display:flex;align-items:center;gap:9px;">
|
|
<span aria-hidden="true" style="font:700 15px 'IBM Plex Sans';color:var(--errt);">✗</span>
|
|
<span style="font:700 13px 'IBM Plex Sans';color:var(--text);">Blocat: worker oprit — declaratiile NU pleaca</span>
|
|
</div>
|
|
<span style="font:400 11px 'IBM Plex Mono';color:var(--sub);white-space:nowrap;">Ultima autentificare RAR: azi 08:14</span>
|
|
</div>
|
|
<div style="margin-bottom:14px;">
|
|
<div style="font:700 17px 'IBM Plex Sans';color:var(--text);">Trimiteri RAR AUTOPASS</div>
|
|
<div style="font:400 12px 'IBM Plex Sans';color:var(--sub);margin-top:2px;">Service Auto Valcea · 28 iun 2026</div>
|
|
</div>
|
|
<div style="display:flex;gap:12px;margin-bottom:14px;">
|
|
<div class="counter"><div class="cnum" style="color:var(--text);">847</div><div class="clabel">Trimise (total)</div><div class="csub">luna 124 · azi 9</div></div>
|
|
<div class="counter"><div class="cnum" style="color:var(--accent);">12</div><div class="clabel">In coada</div></div>
|
|
<div class="counter"><div class="cnum" style="color:var(--errt);">2</div><div class="clabel">De corectat</div></div>
|
|
</div>
|
|
<div>
|
|
<div class="row"><div><div class="vin">WBA8E9...K7F2</div><div class="meta">Inspectie tehnica · 09:42</div></div><span class="pill" style="background:color-mix(in srgb,var(--okt) 13%,transparent);color:var(--okt);"><span class="dot" style="background:var(--okt);"></span>Trimis</span></div>
|
|
<div class="row"><div><div class="vin">WVWZZZ...3M1</div><div class="meta">Revizie periodica · 09:38</div></div><span class="pill" style="background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--infot);"><span class="dot" style="background:var(--accent);"></span>In coada</span></div>
|
|
<div class="row" style="border-bottom:none;"><div><div class="vin">VF1RFB...A88</div><div class="meta">Sistem franare · 09:31</div></div><span class="pill" style="background:color-mix(in srgb,var(--errt) 14%,transparent);color:var(--errt);"><span class="dot" style="background:var(--errt);"></span>De corectat</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="frlabel">Stare OK (verde) — declaratiile curg</div>
|
|
<div style="width:600px;background:var(--bg);border:1px solid var(--line);border-radius:12px;overflow:hidden;">
|
|
<div style="padding:14px;">
|
|
<div style="display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;border-radius:8px;background:color-mix(in srgb,var(--okt) 13%,transparent);border:1px solid color-mix(in srgb,var(--okt) 30%,transparent);margin-bottom:14px;">
|
|
<div style="display:flex;align-items:center;gap:9px;">
|
|
<span aria-hidden="true" style="font:700 15px 'IBM Plex Sans';color:var(--okt);">✓</span>
|
|
<span style="font:600 13px 'IBM Plex Sans';color:var(--text);">Declaratiile curg normal</span>
|
|
</div>
|
|
<span style="font:400 11px 'IBM Plex Mono';color:var(--sub);white-space:nowrap;">Ultima autentificare RAR: azi 09:12</span>
|
|
</div>
|
|
<div style="margin-bottom:14px;">
|
|
<div style="font:700 17px 'IBM Plex Sans';color:var(--text);">Trimiteri RAR AUTOPASS</div>
|
|
<div style="font:400 12px 'IBM Plex Sans';color:var(--sub);margin-top:2px;">Service Auto Valcea · 28 iun 2026</div>
|
|
</div>
|
|
<div style="display:flex;gap:12px;margin-bottom:14px;">
|
|
<div class="counter"><div class="cnum" style="color:var(--text);">847</div><div class="clabel">Trimise (total)</div><div class="csub">luna 124 · azi 9</div></div>
|
|
<div class="counter"><div class="cnum" style="color:var(--accent);">3</div><div class="clabel">In coada</div></div>
|
|
<div class="counter"><div class="cnum" style="color:var(--sub);">0</div><div class="clabel">De corectat</div></div>
|
|
</div>
|
|
<div>
|
|
<div class="row"><div><div class="vin">WBA8E9...K7F2</div><div class="meta">Inspectie tehnica · 09:42</div></div><span class="pill" style="background:color-mix(in srgb,var(--okt) 13%,transparent);color:var(--okt);"><span class="dot" style="background:var(--okt);"></span>Trimis</span></div>
|
|
<div class="row" style="border-bottom:none;"><div><div class="vin">ZAR937...C04</div><div class="meta">Schimb ulei · 09:24</div></div><span class="pill" style="background:color-mix(in srgb,var(--okt) 13%,transparent);color:var(--okt);"><span class="dot" style="background:var(--okt);"></span>Trimis</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- ===================== E4 PICKER PRESTATII ===================== -->
|
|
<div class="seclabel">2 · E4 — formular editare slim: VIN unic + Observatii + picker prestatii PE operatie</div>
|
|
<div class="frames">
|
|
<div>
|
|
<div class="frlabel">Editare trimitere (needs_data)</div>
|
|
<div style="width:640px;background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden;">
|
|
<div class="form">
|
|
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:2px;">
|
|
<span style="font:500 12px 'IBM Plex Mono';color:var(--sub);">corecteaza · needs_data</span>
|
|
<span style="display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:99px;background:color-mix(in srgb,var(--errt) 14%,transparent);color:var(--errt);font:600 11px 'IBM Plex Sans';">Date incomplete</span>
|
|
</div>
|
|
<div><div class="lab">VIN (serie sasiu)</div><div class="fld">U1234567890123456</div></div>
|
|
<div style="display:grid;grid-template-columns:1fr 1fr;gap:11px;">
|
|
<div><div class="lab">Data prestatiei</div><div class="fld">2026-06-22</div></div>
|
|
<div><div class="lab">Numar inmatriculare</div><div class="fld">CT88NOE</div></div>
|
|
</div>
|
|
<div><div class="lab">Observatii (operatiile efectuate)</div><div class="fld fldsans" style="height:auto;min-height:48px;align-items:flex-start;padding:8px 10px;">Revizie; schimbare placute frana</div></div>
|
|
<div>
|
|
<div class="lab">Prestatii — cod RAR pe fiecare operatie</div>
|
|
<div class="oprow">
|
|
<span class="opname">REVIZIE PERIODICA</span>
|
|
<span style="display:flex;align-items:center;gap:8px;">
|
|
<span class="chip"><span class="chipx">×</span>REV2</span>
|
|
<span class="picker">+ alt cod</span>
|
|
</span>
|
|
</div>
|
|
<div class="saverule">✓ salveaza regula REVIZIE PERIODICA → REV2 (auto-rezolva data viitoare)</div>
|
|
<div class="oprow" style="border-color:color-mix(in srgb,var(--warn) 45%,var(--line));margin-top:10px;">
|
|
<span class="opname">SCHIMBARE PLACUTE FRANA <span style="color:var(--warn);font:500 10px 'IBM Plex Sans';">· lipsa cod</span></span>
|
|
<span class="picker" style="border-style:solid;border-color:var(--warn);color:var(--warn);">alege cod RAR ▾</span>
|
|
</div>
|
|
<div style="font:400 10px 'IBM Plex Sans';color:var(--sub);margin-top:8px;">Fara operatie (corectie pura): chip-uri de coduri libere · dedupare per-pereche (op,cod), nu doar dupa cod.</div>
|
|
</div>
|
|
<button class="btn">Salveaza si retrimite</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ===================== ODO REVEAL ===================== -->
|
|
<div class="seclabel">3 · Reveal odometru initial — apare doar la coduri R-ODO / I-ODO (server-driven, E6)</div>
|
|
<div class="frames">
|
|
|
|
<div>
|
|
<div class="frlabel">Inainte · niciun R-ODO → odometru initial ascuns</div>
|
|
<div style="width:480px;background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden;">
|
|
<div class="form">
|
|
<div><div class="lab">Prestatii</div>
|
|
<div class="chipbox"><span class="chip"><span class="chipx">×</span>REV2</span><span class="addcode">+ cod</span></div>
|
|
</div>
|
|
<div><div class="lab">Odometru final</div><div class="fld">39000</div></div>
|
|
<div style="font:400 10px 'IBM Plex Sans';color:var(--sub);font-style:italic;">Odometru initial se cere doar pentru coduri R-ODO / I-ODO.</div>
|
|
<button class="btn">Salveaza</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="frlabel">Dupa · adaugi R-ODO → campul apare</div>
|
|
<div style="width:480px;background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden;">
|
|
<div class="form">
|
|
<div><div class="lab">Prestatii</div>
|
|
<div class="chipbox">
|
|
<span class="chip"><span class="chipx">×</span>REV2</span>
|
|
<span class="chip" style="background:color-mix(in srgb,var(--warn) 22%,transparent);color:var(--warn);"><span class="chipx">×</span>R-ODO</span>
|
|
<span class="addcode">+ cod</span>
|
|
</div>
|
|
</div>
|
|
<div><div class="lab">Odometru final</div><div class="fld">39000</div></div>
|
|
<div style="border-left:2px solid var(--warn);padding-left:10px;margin-left:-12px;">
|
|
<div class="lab" style="color:var(--warn);">Odometru initial · necesar pentru R-ODO</div>
|
|
<div class="fld" style="border-color:color-mix(in srgb,var(--warn) 50%,var(--line));">12500</div>
|
|
</div>
|
|
<button class="btn">Salveaza</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|