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>
222 lines
16 KiB
HTML
222 lines
16 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 — 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>
|