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>
174 lines
12 KiB
HTML
174 lines
12 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 — 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>
|