e80a20c856
- headline Problem: "Pierzi 6 zile pe an / introducand manual in Auto-Pass" - hero: "Declara operatiile de service la RAR Auto-Pass, automat" (accent pe "automat") - slidere calculator pe trepte fixe (50-500 trimiteri, 30-150 lei/h) cu repere vizibile - denumirea oficiala "RAR Auto-Pass" peste tot in landing (ROA AUTOPASS ramane brand) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
532 lines
77 KiB
HTML
532 lines
77 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ro">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>ROA AUTOPASS — declari prestațiile la RAR din câteva click-uri</title>
|
||
<meta name="description" content="Încarci fișierul tău cu operațiile service-ului, completezi o dată codurile RAR și le salvezi. ROMFAST trimite prestațiile la RAR Auto-Pass în locul tău, fără tastat manual. Conform Legii 142/2023.">
|
||
<style>
|
||
|
||
/* IBM Plex eliminat complet — stive font sistem standard web.
|
||
Tokenurile --font-ui / --font-mono definite in :root (sursa unica de adevar). */
|
||
: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;}
|
||
*{box-sizing:border-box;}
|
||
html,body{margin:0;padding:0;}
|
||
body{font-family:var(--font-ui);-webkit-font-smoothing:antialiased;background:var(--bg,#0f1218);color:var(--text,#e6e9ef);}
|
||
body[data-theme="grafit"]{--bg:#0f1218;--card:#181c24;--card2:#0f1218;--text:#e6e9ef;--sub:#8b93a7;--line:#262b36;--line2:#1f2530;--accent:#2E74D6;--hbg:rgba(15,18,24,.88);--okt:#2FBF8F;--infot:#6ea2ec;--errt:#E05D5D;--mut:#5c6473}
|
||
body[data-theme="cobalt"]{--bg:#080d1c;--card:#111a33;--card2:#0b1226;--text:#e9ecfb;--sub:#8a93b8;--line:#1d2747;--line2:#161f3a;--accent:#4068FF;--hbg:rgba(8,13,28,.9);--okt:#2fd0a6;--infot:#8aa0ff;--errt:#f06a7a;--mut:#5a6390}
|
||
body[data-theme="cupru"]{--bg:#15110b;--card:#211a12;--card2:#15110b;--text:#efe6d6;--sub:#a89a85;--line:#36291c;--line2:#281e14;--accent:#D98A3D;--hbg:rgba(21,17,11,.9);--okt:#67b98c;--infot:#dfa45c;--errt:#e2685a;--mut:#6d5f4c}
|
||
body[data-theme="hartie"]{--bg:#f3efe6;--card:#fffdf7;--card2:#f3efe6;--text:#1e1a13;--sub:#6a6052;--line:#e2dccc;--line2:#ece6d9;--accent:#1F5FBF;--hbg:rgba(255,253,247,.92);--okt:#1c7d5d;--infot:#1F5FBF;--errt:#bd463c;--mut:#9a8f7d}
|
||
/* Teme aliniate cu aplicatia (base.html) — acelasi set de 8; 'auto' se rezolva la light/dark. */
|
||
body[data-theme="light"]{--bg:#f5f7fa;--card:#ffffff;--card2:#f5f7fa;--text:#1a1d24;--sub:#5c6473;--line:#e2e5ea;--line2:#eaedf2;--accent:#1F66C9;--hbg:rgba(245,247,250,.9);--okt:#15803d;--infot:#1F66C9;--errt:#dc2626;--mut:#8a92a0}
|
||
body[data-theme="dark"]{--bg:#0f1218;--card:#181c24;--card2:#0f1218;--text:#e6e9ef;--sub:#8b93a7;--line:#262b36;--line2:#1f2530;--accent:#2E74D6;--hbg:rgba(15,18,24,.88);--okt:#2FBF8F;--infot:#6ea2ec;--errt:#E05D5D;--mut:#5c6473}
|
||
body[data-theme="petrol"]{--bg:#0e1416;--card:#161e20;--card2:#0e1416;--text:#e6e9ef;--sub:#8b93a7;--line:#232c2e;--line2:#1c2426;--accent:#0E7C7B;--hbg:rgba(14,20,22,.9);--okt:#2FBF8F;--infot:#3fb9b6;--errt:#E05D5D;--mut:#5c6473}
|
||
.page{width:100%;max-width:1280px;margin:0 auto;background:var(--bg,#0f1218);color:var(--text,#e6e9ef);overflow:hidden;}
|
||
a{text-decoration:none;}
|
||
input[type=range]{-webkit-appearance:none;appearance:none;background:transparent;}
|
||
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:99px;background:var(--line,#262b36);}
|
||
input[type=range]::-moz-range-track{height:6px;border-radius:99px;background:var(--line,#262b36);}
|
||
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;margin-top:-6px;border-radius:99px;background:var(--accent,#2E74D6);cursor:pointer;border:none;}
|
||
input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:99px;background:var(--accent,#2E74D6);cursor:pointer;border:none;}
|
||
|
||
@media (max-width:900px){
|
||
.lp-nav{display:none!important;}
|
||
.lp-header{padding:0 18px!important;}
|
||
.lp-h1{font-size:32px!important;line-height:1.1!important;}
|
||
.page [style*="grid-template-columns"]{grid-template-columns:1fr!important;}
|
||
.page [style*="padding:80px 40px"]{padding:48px 20px!important;}
|
||
.page [style*="padding:0 40px 80px"]{padding:0 20px 48px!important;}
|
||
.page [style*="padding:56px 40px 80px"]{padding:36px 20px 48px!important;}
|
||
.page [style*="padding:44px"]{padding:28px!important;}
|
||
.page [style*="padding:56px 40px"]{padding:40px 22px!important;}
|
||
.page [style*="height:68px"]{height:60px!important;}
|
||
.page [style*="gap:56px"]{gap:32px!important;}
|
||
.page [style*="gap:48px"]{gap:28px!important;}
|
||
}
|
||
@media (max-width:560px){
|
||
.lp-h1{font-size:27px!important;}
|
||
.page [style*="padding:10px 40px"]{padding:10px 18px!important;}
|
||
.lp-header{padding:0 12px!important;}
|
||
#theme-label{display:none!important;}
|
||
.lp-hactions{gap:8px!important;}
|
||
.lp-hactions button{height:38px!important;padding:0 11px!important;font-size:13px!important;}
|
||
}
|
||
@media (max-width:430px){
|
||
.lp-hactions a.auth-login-link{display:none!important;}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body data-theme="grafit">
|
||
<script>try{var _t=localStorage.getItem('theme');var _V={light:1,dark:1,petrol:1,grafit:1,cobalt:1,cupru:1,hartie:1,auto:1};if(_t&&_V[_t]){var _r=_t==='auto'?(window.matchMedia('(prefers-color-scheme: light)').matches?'light':'dark'):_t;document.body.setAttribute('data-theme',_r);}}catch(e){}</script>
|
||
<main class="page">
|
||
<!-- HEADER -->
|
||
<div class="lp-header" style="position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;padding:0 40px;height:68px;background:var(--hbg,rgba(15,18,24,.88));backdrop-filter:blur(8px);border-bottom:1px solid var(--line,#262b36);z-index:5;">
|
||
<div style="display:flex;align-items:center;gap:14px;">
|
||
<img src="/static/romfast_logo.png" alt="ROMFAST" style="height:38px;width:auto;display:block;" />
|
||
<div style="display:flex;flex-direction:column;line-height:1.05;">
|
||
<span style="font:700 17px var(--font-ui);letter-spacing:-.01em;color:var(--text,#e6e9ef);">ROA AUTOPASS</span>
|
||
<span style="font:500 11px var(--font-ui);letter-spacing:.04em;color:var(--sub,#8b93a7);">Gateway RAR</span>
|
||
</div>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:28px;">
|
||
<div class="lp-nav" style="display:flex;gap:28px;font:500 14px var(--font-ui);color:var(--sub,#8b93a7);">
|
||
<a href="#cum-functioneaza" style="color:inherit;text-decoration:none;">Cum funcționează</a><a href="#api" style="color:inherit;text-decoration:none;">API</a><a href="#pret" style="color:inherit;text-decoration:none;">Preț</a>
|
||
</div>
|
||
<div class="lp-hactions" style="display:flex;align-items:center;gap:12px;">
|
||
<button data-act="theme" style="display:flex;align-items:center;gap:8px;height:40px;padding:0 13px;border-radius:6px;background:transparent;border:1px solid var(--line,#262b36);color:var(--sub,#8b93a7);font:500 13px var(--font-ui);cursor:pointer;">
|
||
<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="theme-label">Grafit</span>
|
||
</button>
|
||
<a href="/login" class="auth-login-link" style="display:inline-flex;align-items:center;height:44px;padding:0 18px;border-radius:6px;background:transparent;border:1px solid var(--line,#262b36);color:var(--text,#e6e9ef);font:500 14px var(--font-ui);cursor:pointer;transition:transform .18s ease, background .18s ease, border-color .18s ease;text-decoration:none;" style-hover="background:#1F9D5C;border-color:#1F9D5C;color:#fff;transform:translateY(-1px)">Autentificare</a>
|
||
<button data-act="auth" data-tab="register" style="height:44px;padding:0 18px;border-radius:6px;background:#1F9D5C;border:1px solid #1F9D5C;color:#fff;font:700 14px var(--font-ui);cursor:pointer;transition:transform .2s cubic-bezier(.2,.8,.2,1), background .2s ease, box-shadow .2s ease;" style-hover="background:#16864a;border-color:#16864a;transform:translateY(-1px)">Creează cont</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- HERO -->
|
||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding:80px 40px 72px;">
|
||
<div>
|
||
<h1 class="lp-h1" style="font:700 50px/1.06 var(--font-ui);letter-spacing:-.025em;margin:0 0 20px;color:var(--text,#e6e9ef);">Declară operațiile de service la RAR Auto-Pass, <span style="color:var(--accent,#2E74D6);">automat</span></h1>
|
||
<p style="font:400 17px/1.6 var(--font-ui);color:var(--sub,#8b93a7);margin:0 0 24px;max-width:480px;">Încarci fișierul tău așa cum îl ai, potrivești o dată operațiile cu codurile RAR, și trimitem prestațiile la RAR Auto-Pass în locul tău. Fără tastat câmp cu câmp.</p>
|
||
<div style="margin-bottom:32px;">
|
||
<p style="display:flex;align-items:center;gap:8px;font:700 16px var(--font-ui);color:var(--text,#e6e9ef);margin:0;"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#1F9D5C" stroke-width="2.6" style="flex-shrink:0;"><path d="M20 6L9 17l-5-5"/></svg><span><span style="color:#1F9D5C;">Gratuit</span> până la 60 de trimiteri/lună</span></p>
|
||
</div>
|
||
<div style="display:flex;gap:12px;margin-bottom:22px;">
|
||
<button data-act="auth" data-tab="register" style="height:50px;padding:0 26px;border-radius:6px;background:#1F9D5C;border:1px solid #1F9D5C;color:#fff;font:700 15px var(--font-ui);cursor:pointer;transition:transform .2s cubic-bezier(.2,.8,.2,1), background .2s ease, box-shadow .2s ease;" style-hover="background:#16864a;border-color:#16864a;transform:translateY(-1px)">Creează cont gratuit</button>
|
||
<button style="height:50px;padding:0 24px;border-radius:6px;background:transparent;border:1px solid var(--line,#262b36);color:var(--text,#e6e9ef);font:500 15px var(--font-ui);cursor:pointer;transition:transform .18s ease, background .18s ease, border-color .18s ease;" style-hover="background:#1F9D5C;border-color:#1F9D5C;color:#fff;transform:translateY(-1px)">Vezi cum funcționează</button>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:14px;font:400 13px var(--font-ui);color:var(--sub,#8b93a7);flex-wrap:wrap;">
|
||
<span style="display:flex;align-items:center;gap:6px;"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#2FBF8F" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg>Conform Legii 142/2023</span>
|
||
<span style="color:var(--line,#262b36);">·</span>
|
||
<span style="display:flex;align-items:center;gap:6px;"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#2FBF8F" stroke-width="1.7"><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</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Dashboard mockup -->
|
||
<div style="background:var(--card,#181c24);border:1px solid var(--line,#262b36);border-radius:12px;box-shadow:0 24px 60px -20px rgba(0,0,0,.6);overflow:hidden;">
|
||
<div style="display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--line,#262b36);">
|
||
<div>
|
||
<div style="font:700 14px var(--font-ui);color:var(--text,#e6e9ef);">Trimiteri RAR Auto-Pass</div>
|
||
<div style="font:400 12px var(--font-mono);color:var(--sub,#8b93a7);margin-top:2px;">Service Auto Vâlcea · 28 iun 2026</div>
|
||
</div>
|
||
<div style="display:flex;gap:8px;">
|
||
<div style="display:flex;align-items:center;gap:5px;padding:4px 9px;border-radius:99px;background:color-mix(in srgb,#2FBF8F 13%,transparent);font:500 11px var(--font-ui);color:var(--okt,#2FBF8F);"><span style="width:6px;height:6px;border-radius:99px;background:#2FBF8F;"></span>Live</div>
|
||
</div>
|
||
</div>
|
||
<div style="display:flex;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line,#262b36);">
|
||
<div style="flex:1;background:var(--card2,#0f1218);border:1px solid var(--line,#262b36);border-radius:8px;padding:10px 12px;"><div style="font:700 20px var(--font-ui);color:var(--text,#e6e9ef);">847</div><div style="font:400 11px var(--font-ui);color:var(--sub,#8b93a7);">Trimise luna asta</div></div>
|
||
<div style="flex:1;background:var(--card2,#0f1218);border:1px solid var(--line,#262b36);border-radius:8px;padding:10px 12px;"><div style="font:700 20px var(--font-ui);color:var(--accent,#2E74D6);">12</div><div style="font:400 11px var(--font-ui);color:var(--sub,#8b93a7);">În coadă</div></div>
|
||
<div style="flex:1;background:var(--card2,#0f1218);border:1px solid var(--line,#262b36);border-radius:8px;padding:10px 12px;"><div style="font:700 20px var(--font-ui);color:#E05D5D;">2</div><div style="font:400 11px var(--font-ui);color:var(--sub,#8b93a7);">De corectat</div></div>
|
||
</div>
|
||
<div style="padding:6px 0;">
|
||
<div style="display:flex;align-items:center;justify-content:space-between;padding:11px 18px;border-bottom:1px solid var(--line2,#1f2530);">
|
||
<div><div style="font:500 13px var(--font-mono);color:var(--text,#e6e9ef);">WBA8E9...K7F2</div><div style="font:400 11px var(--font-ui);color:var(--sub,#8b93a7);">Inspecție tehnică · 09:42</div></div>
|
||
<div style="display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:99px;background:color-mix(in srgb,#2FBF8F 13%,transparent);font:500 12px var(--font-ui);color:var(--okt,#2FBF8F);"><span style="width:6px;height:6px;border-radius:99px;background:#2FBF8F;"></span>Trimis</div>
|
||
</div>
|
||
<div style="display:flex;align-items:center;justify-content:space-between;padding:11px 18px;border-bottom:1px solid var(--line2,#1f2530);">
|
||
<div><div style="font:500 13px var(--font-mono);color:var(--text,#e6e9ef);">WVWZZZ...3M1</div><div style="font:400 11px var(--font-ui);color:var(--sub,#8b93a7);">Revizie periodică · 09:38</div></div>
|
||
<div style="display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:99px;background:color-mix(in srgb,var(--accent,#2E74D6) 14%,transparent);font:500 12px var(--font-ui);color:var(--infot,#6ea2ec);"><span style="width:6px;height:6px;border-radius:99px;background:var(--accent,#2E74D6);"></span>În coadă</div>
|
||
</div>
|
||
<div style="display:flex;align-items:center;justify-content:space-between;padding:11px 18px;border-bottom:1px solid var(--line2,#1f2530);">
|
||
<div><div style="font:500 13px var(--font-mono);color:var(--text,#e6e9ef);">VF1RFB...A88</div><div style="font:400 11px var(--font-ui);color:var(--sub,#8b93a7);">Sistem frânare · 09:31</div></div>
|
||
<div style="display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:99px;background:color-mix(in srgb,#E05D5D 14%,transparent);font:500 12px var(--font-ui);color:var(--errt,#E05D5D);"><span style="width:6px;height:6px;border-radius:99px;background:#E05D5D;"></span>Eroare VIN</div>
|
||
</div>
|
||
<div style="display:flex;align-items:center;justify-content:space-between;padding:11px 18px;">
|
||
<div><div style="font:500 13px var(--font-mono);color:var(--text,#e6e9ef);">ZAR937...C04</div><div style="font:400 11px var(--font-ui);color:var(--sub,#8b93a7);">Schimb ulei · 09:24</div></div>
|
||
<div style="display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:99px;background:color-mix(in srgb,#2FBF8F 13%,transparent);font:500 12px var(--font-ui);color:var(--okt,#2FBF8F);"><span style="width:6px;height:6px;border-radius:99px;background:#2FBF8F;"></span>Trimis</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- PROBLEM + CALCULATOR (combinat) -->
|
||
<div style="padding:80px 40px 40px;background:color-mix(in srgb,#E05D5D 6%,var(--bg,#0f1218));">
|
||
<div style="text-align:center;max-width:760px;margin:0 auto 40px;">
|
||
<h2 style="font:700 38px/1.14 var(--font-ui);letter-spacing:-.02em;margin:0 0 14px;color:var(--text,#e6e9ef);"><span style="color:var(--errt,#E05D5D);">Pierzi 6 zile pe an</span><br>introducând manual în Auto-Pass ...</h2>
|
||
<p style="font:400 16px/1.65 var(--font-ui);color:var(--sub,#8b93a7);margin:0;">... VIN de 2 ori, număr de înmatriculare, kilometraj, dată, operații…<br>în loc să pleci mai devreme acasă.</p>
|
||
</div>
|
||
|
||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch;">
|
||
<!-- STANGA: formularul RAR Auto-Pass -->
|
||
<div style="background:var(--card,#181c24);border:1px solid var(--line,#262b36);border-radius:14px;padding:24px;display:flex;flex-direction:column;">
|
||
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;"><span style="font:500 12px var(--font-mono);color:var(--sub,#8b93a7);">RAR Auto-Pass · prestație nouă</span><span style="display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:99px;background:color-mix(in srgb,#E05D5D 14%,transparent);color:var(--errt,#E05D5D);font:600 12px var(--font-mono);"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="13" r="8"/><path d="M12 9v4l2.5 2.5M9 2h6"/></svg>02:34</span></div>
|
||
<div style="display:flex;flex-direction:column;gap:10px;">
|
||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;">
|
||
<div><div style="font:400 11px var(--font-ui);color:var(--sub,#8b93a7);margin-bottom:4px;">VIN</div><div style="height:30px;display:flex;align-items:center;padding:0 10px;border:1px solid var(--line,#262b36);border-radius:6px;background:var(--card2,#0f1218);font:400 12px var(--font-mono);color:var(--text,#e6e9ef);overflow:hidden;white-space:nowrap;">U1234567890123456</div></div>
|
||
<div><div style="font:400 11px var(--font-ui);color:var(--sub,#8b93a7);margin-bottom:4px;">Confirmă VIN</div><div style="height:30px;display:flex;align-items:center;padding:0 10px;border:1px solid var(--line,#262b36);border-radius:6px;background:var(--card2,#0f1218);font:400 12px var(--font-mono);color:var(--text,#e6e9ef);overflow:hidden;white-space:nowrap;">U1234567890123456</div></div>
|
||
</div>
|
||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;">
|
||
<div><div style="font:400 11px var(--font-ui);color:var(--sub,#8b93a7);margin-bottom:4px;">Data prestației</div><div style="height:30px;display:flex;align-items:center;padding:0 10px;border:1px solid var(--line,#262b36);border-radius:6px;background:var(--card2,#0f1218);font:400 12px var(--font-mono);color:var(--text,#e6e9ef);">2026-06-22</div></div>
|
||
<div><div style="font:400 11px var(--font-ui);color:var(--sub,#8b93a7);margin-bottom:4px;">Număr înmatriculare</div><div style="height:30px;display:flex;align-items:center;padding:0 10px;border:1px solid var(--line,#262b36);border-radius:6px;background:var(--card2,#0f1218);font:400 12px var(--font-mono);color:var(--text,#e6e9ef);">CT88NOE</div></div>
|
||
</div>
|
||
<div><div style="font:400 11px var(--font-ui);color:var(--sub,#8b93a7);margin-bottom:4px;">Observații</div><div style="height:30px;display:flex;align-items:center;padding:0 10px;border:1px solid var(--line,#262b36);border-radius:6px;background:var(--card2,#0f1218);font:400 12px var(--font-ui);color:var(--text,#e6e9ef);overflow:hidden;white-space:nowrap;">REVIZIE; SCHIMBARE PLĂCUȚE FRÂNĂ</div></div>
|
||
<div><div style="font:400 11px var(--font-ui);color:var(--sub,#8b93a7);margin-bottom:4px;">Prestații</div><div style="min-height:30px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:3px 6px;border:1px solid var(--line,#262b36);border-radius:6px;background:var(--card2,#0f1218);"><span style="display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:5px;background:color-mix(in srgb,var(--accent,#2E74D6) 18%,transparent);color:var(--accent,#2E74D6);font:500 10px var(--font-ui);"><span style="opacity:.7;">×</span>REVIZIE PERIODICĂ</span><span style="display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:5px;background:color-mix(in srgb,var(--accent,#2E74D6) 18%,transparent);color:var(--accent,#2E74D6);font:500 10px var(--font-ui);"><span style="opacity:.7;">×</span>ÎNTREȚINERE</span></div></div>
|
||
<div><div style="font:400 11px var(--font-ui);color:var(--sub,#8b93a7);margin-bottom:4px;">Valoarea citită a odometrului</div><div style="height:30px;display:flex;align-items:center;padding:0 10px;border:1px solid var(--line,#262b36);border-radius:6px;background:var(--card2,#0f1218);font:400 12px var(--font-mono);color:var(--text,#e6e9ef);">39000</div></div>
|
||
</div>
|
||
<button style="margin-top:14px;height:34px;padding:0 14px;border-radius:6px;background:color-mix(in srgb,var(--accent,#2E74D6) 40%,var(--card2,#0f1218));border:none;color:#fff;opacity:.55;font:600 12px var(--font-ui);cursor:not-allowed;align-self:flex-start;">Salvează Prezentarea</button>
|
||
<div style="margin-top:auto;padding-top:12px;font:400 12px var(--font-ui);color:var(--sub,#8b93a7);text-align:center;">se repetă pentru fiecare comandă · zi de zi</div>
|
||
</div>
|
||
|
||
<!-- DREAPTA: calculatorul (slidere + cifre) -->
|
||
<div style="background:var(--card,#181c24);border:1px solid var(--line,#262b36);border-radius:14px;padding:34px;display:flex;flex-direction:column;">
|
||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-bottom:28px;">
|
||
<div>
|
||
<div style="display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px;"><span style="font:500 13px var(--font-ui);color:var(--text,#e6e9ef);">Trimiteri/lună</span><span style="font:700 24px var(--font-ui);letter-spacing:-.02em;color:var(--accent,#2E74D6);" id="out-pres">100</span></div>
|
||
<input type="range" min="0" max="5" step="1" value="1" id="calc-pres" data-act="calc" style="width:100%;height:6px;accent-color:var(--accent,#2E74D6);cursor:pointer;" />
|
||
<div style="display:flex;justify-content:space-between;margin-top:5px;font:400 11px var(--font-mono);color:var(--mut,#5c6473);"><span>50</span><span>100</span><span>150</span><span>200</span><span>300</span><span>500</span></div>
|
||
</div>
|
||
<div>
|
||
<div style="display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px;"><span style="font:500 13px var(--font-ui);color:var(--text,#e6e9ef);">Manoperă</span><span style="font:700 24px var(--font-ui);letter-spacing:-.02em;color:var(--accent,#2E74D6);"><span id="out-rate">60</span><span style="font:500 12px var(--font-ui);color:var(--sub,#8b93a7);"> lei/h</span></span></div>
|
||
<input type="range" min="0" max="5" step="1" value="2" id="calc-rate" data-act="calc" style="width:100%;height:6px;accent-color:var(--accent,#2E74D6);cursor:pointer;" />
|
||
<div style="display:flex;justify-content:space-between;margin-top:5px;font:400 11px var(--font-mono);color:var(--mut,#5c6473);"><span>30</span><span>50</span><span>60</span><span>80</span><span>100</span><span>150</span></div>
|
||
</div>
|
||
</div>
|
||
<div style="background:color-mix(in srgb,#E05D5D 9%,var(--card2,#0f1218));border:1px solid color-mix(in srgb,#E05D5D 28%,var(--line,#262b36));border-radius:10px;padding:22px 24px;">
|
||
<div style="font:600 11px var(--font-ui);color:var(--errt,#E05D5D);letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px;">Pierdut pe raportare manuală</div>
|
||
<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:14px;">
|
||
<div><div style="font:700 30px var(--font-ui);letter-spacing:-.02em;color:var(--errt,#E05D5D);"><span data-calc="leiMonth">0</span></div><div style="font:400 12px var(--font-ui);color:var(--sub,#8b93a7);margin-top:2px;">lei/lună</div></div>
|
||
<div><div style="font:700 30px var(--font-ui);letter-spacing:-.02em;color:var(--errt,#E05D5D);"><span data-calc="hMonth">0</span></div><div style="font:400 12px var(--font-ui);color:var(--sub,#8b93a7);margin-top:2px;">ore/lună</div></div>
|
||
<div><div style="font:700 30px var(--font-ui);letter-spacing:-.02em;color:var(--errt,#E05D5D);"><span data-calc="leiYear">0</span></div><div style="font:400 12px var(--font-ui);color:var(--sub,#8b93a7);margin-top:2px;">lei/an</div></div>
|
||
<div><div style="font:700 30px var(--font-ui);letter-spacing:-.02em;color:var(--errt,#E05D5D);"><span data-calc="days">0</span></div><div style="font:400 12px var(--font-ui);color:var(--sub,#8b93a7);margin-top:2px;">zile/an</div></div>
|
||
</div>
|
||
</div>
|
||
<div style="margin-top:20px;padding-top:18px;border-top:1px solid var(--line,#262b36);">
|
||
<div style="display:flex;align-items:center;gap:9px;font:600 14px var(--font-ui);color:var(--okt,#2FBF8F);"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" style="flex-shrink:0;"><path d="M20 6L9 17l-5-5"/></svg>Cu ROA AUTOPASS: câteva secunde pentru tot lotul</div>
|
||
<div style="font:400 13px/1.55 var(--font-ui);color:var(--sub,#8b93a7);margin-top:6px;">Recuperezi ~<span data-calc="leiMonth">0</span> lei/lună și timpul îl pui pe mașini, nu pe formulare.</div>
|
||
</div>
|
||
<div style="margin-top:14px;display:flex;align-items:center;gap:8px;font:400 12px var(--font-ui);color:var(--mut,#5c6473);"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><circle cx="12" cy="13" r="8"/><path d="M12 9v4l2.5 2.5M9 2h6"/></svg>Estimat la ~2,5 minute de tastat manual pentru fiecare trimitere.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- LEGE / AMENZI -->
|
||
<div style="padding:56px 40px 80px;">
|
||
<div style="display:flex;gap:20px;align-items:flex-start;background:color-mix(in srgb,#E0A93B 9%,var(--card,#181c24));border:1px solid color-mix(in srgb,#E0A93B 34%,var(--line,#262b36));border-radius:12px;padding:26px 28px;">
|
||
<div style="width:44px;height:44px;flex-shrink:0;border-radius:8px;background:color-mix(in srgb,#E0A93B 16%,transparent);display:flex;align-items:center;justify-content:center;color:#E0A93B;"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M12 3l8 4v5c0 4.4-3.1 8.3-8 9.5C7.1 20.3 4 16.4 4 12V7l8-4z"/><path d="M9.5 12l1.8 1.8L15 10"/></svg></div>
|
||
<div>
|
||
<div style="font:700 16px var(--font-ui);color:var(--text,#e6e9ef);margin-bottom:7px;">Evită riscul amenzilor — transmite automat la RAR Auto-Pass</div>
|
||
<p style="font:400 14px/1.65 var(--font-ui);color:var(--sub,#8b93a7);margin:0;">Conform <strong style="color:var(--text,#e6e9ef);font-weight:600;">Legii nr. 142/2023</strong> și <strong style="color:var(--text,#e6e9ef);font-weight:600;">OMTI nr. 210/2024</strong>, service-urile auto autorizate RAR trebuie să transmită, la finalizarea fiecărei prestații, informațiile obligatorii (VIN, kilometraj și, după caz, date privind intervențiile asupra odometrului și reparațiile rezultate din avarii grave). Nerespectarea obligației se sancționează cu amendă între <span style="color:var(--errt,#E05D5D);font-weight:600;">2.000 și 5.000 lei</span>, iar transmiterea unor informații eronate cu amendă între <span style="color:#E0A93B;font-weight:600;">1.000 și 2.000 lei</span>.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- SOLVE: fragment de wizard import (pasii reali din aplicatie) -->
|
||
<div id="cum-functioneaza" style="padding:80px 40px 40px;background:color-mix(in srgb,var(--accent,#2E74D6) 8%,var(--bg,#0f1218));border-top:1px solid var(--line,#262b36);border-bottom:1px solid var(--line,#262b36);">
|
||
<div style="max-width:720px;margin:0 auto;text-align:center;">
|
||
<h2 style="font:700 34px/1.15 var(--font-ui);letter-spacing:-.02em;margin:0 0 14px;color:var(--text,#e6e9ef);">Uite cât de simplu e</h2>
|
||
<p style="font:400 16px/1.65 var(--font-ui);color:var(--sub,#8b93a7);margin:0 auto;">Patru pași pe ecran, exact așa cum arată în aplicație: <span style="color:var(--accent,#2E74D6);font-weight:700;text-decoration:underline;text-underline-offset:3px;">încarci</span> fișierul, <span style="color:var(--accent,#2E74D6);font-weight:700;text-decoration:underline;text-underline-offset:3px;">confirmi</span> potrivirile propuse de noi, <span style="color:var(--accent,#2E74D6);font-weight:700;text-decoration:underline;text-underline-offset:3px;">verifici</span> lista și apeși <span style="color:var(--accent,#2E74D6);font-weight:700;text-decoration:underline;text-underline-offset:3px;">Trimite</span>. Prima dată durează câteva minute — de la a doua, câteva secunde.</p>
|
||
</div>
|
||
|
||
<div style="max-width:980px;margin:34px auto 0;background:var(--card,#181c24);border:1px solid var(--line,#262b36);border-radius:12px;box-shadow:0 24px 60px -24px rgba(0,0,0,.45);overflow:hidden;">
|
||
<div style="display:flex;align-items:center;gap:7px;padding:10px 14px;border-bottom:1px solid var(--line,#262b36);background:var(--card2,#0f1218);">
|
||
<span style="width:10px;height:10px;border-radius:99px;background:var(--errt,#E05D5D);"></span><span style="width:10px;height:10px;border-radius:99px;background:#E0A93B;"></span><span style="width:10px;height:10px;border-radius:99px;background:var(--okt,#2FBF8F);"></span>
|
||
<span style="font:400 12px var(--font-mono);color:var(--sub,#8b93a7);margin-left:8px;">ROA AUTOPASS · Import fișier</span>
|
||
</div>
|
||
<div style="display:flex;flex-wrap:wrap;padding:16px 18px 0;">
|
||
<div style="flex:1;min-width:150px;display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:2px solid var(--okt,#2FBF8F);font:500 12.5px var(--font-ui);color:var(--okt,#2FBF8F);"><span style="width:20px;height:20px;border-radius:99px;border:1.5px solid currentColor;display:flex;align-items:center;justify-content:center;font:700 11px var(--font-ui);flex-shrink:0;">✓</span>Încarcă fișier</div>
|
||
<div style="flex:1;min-width:150px;display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:2px solid var(--okt,#2FBF8F);font:500 12.5px var(--font-ui);color:var(--okt,#2FBF8F);"><span style="width:20px;height:20px;border-radius:99px;border:1.5px solid currentColor;display:flex;align-items:center;justify-content:center;font:700 11px var(--font-ui);flex-shrink:0;">✓</span>Potrivește coloanele</div>
|
||
<div style="flex:1;min-width:150px;display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:2px solid var(--accent,#2E74D6);font:500 12.5px var(--font-ui);color:var(--text,#e6e9ef);"><span style="width:20px;height:20px;border-radius:99px;background:var(--accent,#2E74D6);color:#fff;display:flex;align-items:center;justify-content:center;font:700 11px var(--font-ui);flex-shrink:0;">3</span>Verifică</div>
|
||
<div style="flex:1;min-width:150px;display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:2px solid var(--line,#262b36);font:500 12.5px var(--font-ui);color:var(--mut,#5c6473);"><span style="width:20px;height:20px;border-radius:99px;border:1.5px solid var(--line,#262b36);display:flex;align-items:center;justify-content:center;font:700 11px var(--font-ui);flex-shrink:0;">4</span>Confirmă trimiterea</div>
|
||
</div>
|
||
<div style="display:grid;grid-template-columns:1fr 1.15fr 1.35fr;gap:14px;padding:18px;">
|
||
<!-- Pas 1: incarcare -->
|
||
<div style="background:var(--card2,#0f1218);border:1px solid var(--line,#262b36);border-radius:10px;padding:14px;display:flex;flex-direction:column;gap:10px;min-width:0;">
|
||
<div style="font:700 12px var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--sub,#8b93a7);display:flex;align-items:center;gap:7px;"><span style="width:17px;height:17px;border-radius:99px;background:var(--accent,#2E74D6);color:#fff;display:inline-flex;align-items:center;justify-content:center;font:700 10px var(--font-ui);flex-shrink:0;">1</span>Încarcă fișier</div>
|
||
<div style="border:1.5px dashed color-mix(in srgb,var(--accent,#2E74D6) 45%,var(--line,#262b36));border-radius:8px;padding:16px 12px;text-align:center;font:400 12.5px/1.5 var(--font-ui);color:var(--sub,#8b93a7);">
|
||
Trage fișierul aici sau alege-l de pe calculator
|
||
<br><span style="display:inline-flex;align-items:center;gap:7px;margin-top:9px;padding:5px 11px;border-radius:6px;background:var(--card,#181c24);border:1px solid var(--line,#262b36);font:500 12px var(--font-mono);color:var(--text,#e6e9ef);">
|
||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="var(--okt,#2FBF8F)" stroke-width="1.8"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/></svg>
|
||
comenzi_iunie.xlsx
|
||
</span>
|
||
</div>
|
||
<div style="font:400 11px/1.5 var(--font-ui);color:var(--okt,#2FBF8F);display:flex;gap:6px;align-items:flex-start;">
|
||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="flex-shrink:0;"><path d="M20 6L9 17l-5-5"/></svg>
|
||
Merge fișierul tău, așa cum îl scoți din programul de facturare — xlsx sau csv.
|
||
</div>
|
||
</div>
|
||
<!-- Pas 2: mapare coloane -->
|
||
<div style="background:var(--card2,#0f1218);border:1px solid var(--line,#262b36);border-radius:10px;padding:14px;display:flex;flex-direction:column;gap:10px;min-width:0;">
|
||
<div style="font:700 12px var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--sub,#8b93a7);display:flex;align-items:center;gap:7px;"><span style="width:17px;height:17px;border-radius:99px;background:var(--accent,#2E74D6);color:#fff;display:inline-flex;align-items:center;justify-content:center;font:700 10px var(--font-ui);flex-shrink:0;">2</span>Potrivește coloanele</div>
|
||
<div style="display:grid;grid-template-columns:1fr 14px 1fr;align-items:center;gap:6px;"><span style="padding:5px 8px;border-radius:6px;background:var(--card,#181c24);border:1px solid var(--line,#262b36);color:var(--sub,#8b93a7);font:400 11px var(--font-mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">Serie sasiu</span><span style="color:var(--mut,#5c6473);text-align:center;font:400 11px var(--font-ui);">→</span><span style="padding:5px 8px;border-radius:6px;background:color-mix(in srgb,var(--accent,#2E74D6) 12%,var(--card,#181c24));border:1px solid color-mix(in srgb,var(--accent,#2E74D6) 35%,var(--line,#262b36));color:var(--text,#e6e9ef);font:600 11px var(--font-ui);display:flex;align-items:center;justify-content:space-between;gap:6px;overflow:hidden;white-space:nowrap;">VIN <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="flex-shrink:0;opacity:.6;"><path d="M6 9l6 6 6-6"/></svg></span></div>
|
||
<div style="display:grid;grid-template-columns:1fr 14px 1fr;align-items:center;gap:6px;"><span style="padding:5px 8px;border-radius:6px;background:var(--card,#181c24);border:1px solid var(--line,#262b36);color:var(--sub,#8b93a7);font:400 11px var(--font-mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">Data iesire</span><span style="color:var(--mut,#5c6473);text-align:center;font:400 11px var(--font-ui);">→</span><span style="padding:5px 8px;border-radius:6px;background:color-mix(in srgb,var(--accent,#2E74D6) 12%,var(--card,#181c24));border:1px solid color-mix(in srgb,var(--accent,#2E74D6) 35%,var(--line,#262b36));color:var(--text,#e6e9ef);font:600 11px var(--font-ui);display:flex;align-items:center;justify-content:space-between;gap:6px;overflow:hidden;white-space:nowrap;">Data prestației <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="flex-shrink:0;opacity:.6;"><path d="M6 9l6 6 6-6"/></svg></span></div>
|
||
<div style="display:grid;grid-template-columns:1fr 14px 1fr;align-items:center;gap:6px;"><span style="padding:5px 8px;border-radius:6px;background:var(--card,#181c24);border:1px solid var(--line,#262b36);color:var(--sub,#8b93a7);font:400 11px var(--font-mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">Km bord</span><span style="color:var(--mut,#5c6473);text-align:center;font:400 11px var(--font-ui);">→</span><span style="padding:5px 8px;border-radius:6px;background:color-mix(in srgb,var(--accent,#2E74D6) 12%,var(--card,#181c24));border:1px solid color-mix(in srgb,var(--accent,#2E74D6) 35%,var(--line,#262b36));color:var(--text,#e6e9ef);font:600 11px var(--font-ui);display:flex;align-items:center;justify-content:space-between;gap:6px;overflow:hidden;white-space:nowrap;">Odometru <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="flex-shrink:0;opacity:.6;"><path d="M6 9l6 6 6-6"/></svg></span></div>
|
||
<div style="display:grid;grid-template-columns:1fr 14px 1fr;align-items:center;gap:6px;"><span style="padding:5px 8px;border-radius:6px;background:var(--card,#181c24);border:1px solid var(--line,#262b36);color:var(--sub,#8b93a7);font:400 11px var(--font-mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">Denumire lucrare</span><span style="color:var(--mut,#5c6473);text-align:center;font:400 11px var(--font-ui);">→</span><span style="padding:5px 8px;border-radius:6px;background:color-mix(in srgb,var(--accent,#2E74D6) 12%,var(--card,#181c24));border:1px solid color-mix(in srgb,var(--accent,#2E74D6) 35%,var(--line,#262b36));color:var(--text,#e6e9ef);font:600 11px var(--font-ui);display:flex;align-items:center;justify-content:space-between;gap:6px;overflow:hidden;white-space:nowrap;">Operații <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="flex-shrink:0;opacity:.6;"><path d="M6 9l6 6 6-6"/></svg></span></div>
|
||
<div style="font:400 11px/1.5 var(--font-ui);color:var(--okt,#2FBF8F);display:flex;gap:6px;align-items:flex-start;">
|
||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="flex-shrink:0;"><path d="M20 6L9 17l-5-5"/></svg>
|
||
Le potrivești o singură dată — la următorul fișier le ținem minte noi.
|
||
</div>
|
||
</div>
|
||
<!-- Pas 3: verificare -->
|
||
<div style="background:var(--card2,#0f1218);border:1px solid var(--line,#262b36);border-radius:10px;padding:14px;display:flex;flex-direction:column;gap:10px;min-width:0;">
|
||
<div style="font:700 12px var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--sub,#8b93a7);display:flex;align-items:center;gap:7px;"><span style="width:17px;height:17px;border-radius:99px;background:var(--accent,#2E74D6);color:#fff;display:inline-flex;align-items:center;justify-content:center;font:700 10px var(--font-ui);flex-shrink:0;">3</span>Verifică</div>
|
||
<div style="display:flex;gap:6px;flex-wrap:wrap;">
|
||
<span style="display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:99px;font:600 10.5px var(--font-ui);background:color-mix(in srgb,#2FBF8F 13%,transparent);color:var(--okt,#2FBF8F);white-space:nowrap;"><span style="width:5px;height:5px;border-radius:99px;background:currentColor;"></span>22 gata de trimis</span>
|
||
<span style="display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:99px;font:600 10.5px var(--font-ui);background:color-mix(in srgb,#E0A93B 14%,transparent);color:#E0A93B;white-space:nowrap;"><span style="width:5px;height:5px;border-radius:99px;background:currentColor;"></span>1 verifică valori</span>
|
||
<span style="display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:99px;font:600 10.5px var(--font-ui);background:color-mix(in srgb,#E05D5D 13%,transparent);color:var(--errt,#E05D5D);white-space:nowrap;"><span style="width:5px;height:5px;border-radius:99px;background:currentColor;"></span>1 cod RAR lipsă</span>
|
||
</div>
|
||
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 9px;border-radius:7px;background:var(--card,#181c24);border:1px solid var(--line2,#1f2530);min-width:0;">
|
||
<div style="min-width:0;"><div style="font:500 11px var(--font-mono);color:var(--text,#e6e9ef);">WBA8E9...K7F2</div><div style="font:400 10.5px var(--font-ui);color:var(--sub,#8b93a7);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">Revizie periodică · 22.06.2026</div></div>
|
||
<span style="display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:99px;font:600 10.5px var(--font-ui);background:color-mix(in srgb,#2FBF8F 13%,transparent);color:var(--okt,#2FBF8F);white-space:nowrap;flex-shrink:0;"><span style="width:5px;height:5px;border-radius:99px;background:currentColor;"></span>Gata de trimis</span>
|
||
</div>
|
||
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 9px;border-radius:7px;background:var(--card,#181c24);border:1px solid color-mix(in srgb,#E0A93B 40%,var(--line,#262b36));min-width:0;">
|
||
<div style="min-width:0;"><div style="font:500 11px var(--font-mono);color:var(--text,#e6e9ef);">WVWZZZ...3M1</div><div style="font:400 10.5px var(--font-ui);color:var(--sub,#8b93a7);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">Schimb plăcuțe frână · 22.06.2026</div></div>
|
||
<span style="display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:99px;font:600 10.5px var(--font-ui);background:color-mix(in srgb,#E0A93B 14%,transparent);color:#E0A93B;white-space:nowrap;flex-shrink:0;"><span style="width:5px;height:5px;border-radius:99px;background:currentColor;"></span>Verifică valori</span>
|
||
</div>
|
||
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 9px;border-radius:7px;background:var(--card,#181c24);border:1px solid color-mix(in srgb,#E05D5D 40%,var(--line,#262b36));min-width:0;">
|
||
<div style="min-width:0;"><div style="font:500 11px var(--font-mono);color:var(--text,#e6e9ef);">VF1RFB...A88</div><div style="font:400 10.5px var(--font-ui);color:var(--sub,#8b93a7);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">REP. ELECTROMOTOR · 21.06.2026</div></div>
|
||
<span style="display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:99px;font:600 10.5px var(--font-ui);background:color-mix(in srgb,#E05D5D 13%,transparent);color:var(--errt,#E05D5D);white-space:nowrap;flex-shrink:0;"><span style="width:5px;height:5px;border-radius:99px;background:currentColor;"></span>Cod RAR lipsă</span>
|
||
</div>
|
||
<div style="display:flex;gap:6px;align-items:center;min-width:0;">
|
||
<span style="flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:6px;padding:5px 8px;border-radius:6px;background:var(--card,#181c24);border:1px solid var(--line,#262b36);font:400 11px var(--font-ui);color:var(--text,#e6e9ef);white-space:nowrap;overflow:hidden;">63 — Instalație electrică <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="flex-shrink:0;opacity:.55;"><path d="M6 9l6 6 6-6"/></svg></span>
|
||
<span style="height:26px;padding:0 12px;border-radius:6px;background:var(--accent,#2E74D6);color:#fff;font:600 11px/26px var(--font-ui);flex-shrink:0;">Salvează</span>
|
||
</div>
|
||
<div style="font:400 10.5px/1.5 var(--font-ui);color:var(--accent,#2E74D6);display:flex;gap:6px;align-items:flex-start;">
|
||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="flex-shrink:0;margin-top:1px;"><path d="M9 18h6M10 22h4M12 2a7 7 0 0 0-4 12.7c.6.5 1 1.4 1 2.3h6c0-.9.4-1.8 1-2.3A7 7 0 0 0 12 2z"/></svg>
|
||
Sugestia e preselectată — o confirmi cu un click și rămâne salvată.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 18px 18px;padding:13px 16px;border-radius:10px;background:color-mix(in srgb,#1F9D5C 10%,var(--card2,#0f1218));border:1px solid color-mix(in srgb,#1F9D5C 32%,var(--line,#262b36));flex-wrap:wrap;">
|
||
<div style="font:400 13px/1.5 var(--font-ui);color:var(--sub,#8b93a7);"><strong style="color:var(--text,#e6e9ef);font-weight:700;">22 de prezentări</strong> gata de trimis · duplicatele sunt oprite automat, tu doar confirmi numărul</div>
|
||
<span style="height:38px;padding:0 18px;border-radius:6px;background:#1F9D5C;color:#fff;font:700 13px/38px var(--font-ui);">Trimite la RAR →</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="text-align:center;max-width:880px;margin:30px auto 0;font:400 16px/1.6 var(--font-ui);color:var(--sub,#8b93a7);">
|
||
<span style="text-decoration:line-through;text-decoration-color:var(--errt,#E05D5D);text-decoration-thickness:2px;">2–3 minute de tastat pentru fiecare comandă</span><span style="color:var(--text,#e6e9ef);font-weight:700;"> → câteva secunde pentru tot lotul.</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- API INTEGRATION -->
|
||
<div id="api" style="padding:56px 40px 80px;">
|
||
<div style="background:var(--card,#181c24);border:1px solid var(--line,#262b36);border-radius:14px;display:grid;grid-template-columns:1fr 1fr;gap:40px;padding:44px;align-items:center;">
|
||
<div>
|
||
<div style="display:inline-flex;align-items:center;gap:8px;padding:5px 11px;border-radius:99px;border:1px solid var(--line,#262b36);color:var(--sub,#8b93a7);font:500 12px var(--font-ui);margin-bottom:18px;">Pentru service-uri cu soft propriu</div>
|
||
<h2 style="font:700 30px/1.15 var(--font-ui);letter-spacing:-.02em;margin:0 0 14px;color:var(--text,#e6e9ef);">Ai deja un soft de service? Conectează-l automat</h2>
|
||
<p style="font:400 15px/1.65 var(--font-ui);color:var(--sub,#8b93a7);margin:0 0 24px;">Softul tău se poate conecta și direct la API-ul RAR Auto-Pass. Cu ROMFAST primești în plus asistență la maparea automată a operațiilor tale (prin mai multe metode) și salvarea mapărilor pentru trimiterile viitoare — totul printr-un singur apel, cu cheie API per cont.</p>
|
||
<button style="height:44px;padding:0 20px;border-radius:6px;background:transparent;border:1px solid var(--line,#262b36);color:var(--text,#e6e9ef);font:500 14px var(--font-ui);cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:transform .18s ease, background .18s ease, border-color .18s ease;" style-hover="background:#1F9D5C;border-color:#1F9D5C;color:#fff;transform:translateY(-1px)">Vezi documentația API <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M5 12h14M13 6l6 6-6 6"/></svg></button>
|
||
</div>
|
||
<div style="background:#0d1015;border:1px solid #262b36;border-radius:10px;overflow:hidden;">
|
||
<div style="display:flex;align-items:center;gap:7px;padding:11px 14px;border-bottom:1px solid #262b36;">
|
||
<span style="width:11px;height:11px;border-radius:99px;background:#E05D5D;"></span><span style="width:11px;height:11px;border-radius:99px;background:#E0A93B;"></span><span style="width:11px;height:11px;border-radius:99px;background:#2FBF8F;"></span>
|
||
<span style="font:400 12px var(--font-mono);color:#8b93a7;margin-left:8px;">request.sh</span>
|
||
</div>
|
||
<pre style="margin:0;padding:18px;font:400 13px/1.7 var(--font-mono);color:#e6e9ef;overflow-x:auto;"><span style="color:#2FBF8F;">POST</span> /v1/prezentari
|
||
<span style="color:#8b93a7;">Authorization:</span> <span style="color:#E0A93B;">rfak_••••••••</span>
|
||
<span style="color:#8b93a7;">Content-Type:</span> application/json
|
||
|
||
{
|
||
<span style="color:#6ea2ec;">"vin"</span>: <span style="color:#2FBF8F;">"WBA8E9C5..."</span>,
|
||
<span style="color:#6ea2ec;">"cod_prestatie"</span>: <span style="color:#2FBF8F;">"ITP-01"</span>,
|
||
<span style="color:#6ea2ec;">"odometru"</span>: <span style="color:#E0A93B;">142500</span>
|
||
}</pre>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- TRIAL BENEFIT -->
|
||
<div style="padding:0 40px 80px;">
|
||
<div style="display:flex;align-items:center;gap:22px;background:color-mix(in srgb,#2FBF8F 9%,var(--card,#181c24));border:1px solid color-mix(in srgb,#2FBF8F 32%,var(--line,#262b36));border-radius:14px;padding:30px 34px;flex-wrap:wrap;">
|
||
<div style="width:48px;height:48px;flex-shrink:0;border-radius:10px;background:color-mix(in srgb,#2FBF8F 16%,transparent);display:flex;align-items:center;justify-content:center;color:var(--okt,#2FBF8F);"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M12 2v4M12 18v4M2 12h4M18 12h4"/><circle cx="12" cy="12" r="4.5"/></svg></div>
|
||
<div style="flex:1;min-width:240px;">
|
||
<div style="font:700 19px var(--font-ui);letter-spacing:-.01em;color:var(--text,#e6e9ef);margin-bottom:5px;"><span style="color:var(--okt,#2FBF8F);">30 de zile Pro gratuit</span> la fiecare cont nou</div>
|
||
<p style="font:400 14px/1.6 var(--font-ui);color:var(--sub,#8b93a7);margin:0;">Începi direct cu tot ce are planul Pro — import API, categorisire automată și suport rapid. După 30 de zile treci automat pe Gratuit, fără plată și fără întreruperi.</p>
|
||
</div>
|
||
<button data-act="auth" data-tab="register" data-plan="pro" style="height:48px;padding:0 24px;border-radius:6px;background:#1F9D5C;border:1px solid #1F9D5C;color:#fff;font:700 14px var(--font-ui);cursor:pointer;white-space:nowrap;transition:transform .2s cubic-bezier(.2,.8,.2,1), background .2s ease, box-shadow .2s ease;" style-hover="background:#16864a;border-color:#16864a;transform:translateY(-1px)">Începe gratuit</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- PRICING -->
|
||
<div id="pret" style="padding:0 40px 80px;">
|
||
<div style="text-align:center;margin-bottom:44px;">
|
||
<h2 style="font:700 34px var(--font-ui);letter-spacing:-.02em;margin:0 0 10px;color:var(--text,#e6e9ef);">Pentru un service mic, nu costă nimic</h2>
|
||
<p style="font:400 15px var(--font-ui);color:var(--sub,#8b93a7);margin:0;">Alege planul potrivit volumului tău. Poți schimba sau anula oricând.</p>
|
||
</div>
|
||
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:0 auto;align-items:stretch;max-width:920px;">
|
||
<!-- Gratuit -->
|
||
<div style="background:var(--card,#181c24);border:1px solid var(--line,#262b36);border-radius:12px;padding:26px 24px;display:flex;flex-direction:column;">
|
||
<div style="font:700 17px var(--font-ui);color:var(--text,#e6e9ef);margin-bottom:8px;">Gratuit</div>
|
||
<div style="display:flex;align-items:baseline;gap:5px;margin-bottom:14px;"><span style="font:700 32px var(--font-ui);letter-spacing:-.02em;color:var(--text,#e6e9ef);">0 lei</span><span style="font:400 13px var(--font-ui);color:var(--sub,#8b93a7);">/lună</span></div>
|
||
<div style="display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;"><span style="display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:7px;font:700 11.5px var(--font-ui);background:color-mix(in srgb,var(--accent,#2E74D6) 12%,transparent);border:1px solid color-mix(in srgb,var(--accent,#2E74D6) 40%,var(--line,#262b36));color:var(--accent,#2E74D6);"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/></svg>Import CSV/XLSX</span></div>
|
||
<div style="display:flex;align-items:flex-start;gap:7px;padding:7px 10px;border-radius:7px;background:color-mix(in srgb,#2FBF8F 13%,transparent);color:var(--okt,#2FBF8F);font:600 12px/1.45 var(--font-ui);margin-bottom:14px;"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="flex-shrink:0;margin-top:1px;"><circle cx="12" cy="13" r="8"/><path d="M12 9v4l2.5 2.5M9 2h6"/></svg><span>Economisești ~2,5 ore / ~150 lei pe lună <span style="font-weight:400;opacity:.8;">· la 60 de trimiteri</span></span></div>
|
||
<div style="display:flex;flex-direction:column;gap:10px;margin-bottom:22px;flex:1;">
|
||
<div style="display:flex;gap:9px;font:400 13px/1.4 var(--font-ui);color:var(--text,#e6e9ef);"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#2FBF8F" stroke-width="2" style="flex-shrink:0;margin-top:1px;"><path d="M20 6L9 17l-5-5"/></svg>Până la 60 de trimiteri/lună</div>
|
||
<div style="display:flex;gap:9px;font:400 13px/1.4 var(--font-ui);color:var(--text,#e6e9ef);"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#2FBF8F" stroke-width="2" style="flex-shrink:0;margin-top:1px;"><path d="M20 6L9 17l-5-5"/></svg>Îți sugerăm codul RAR pentru fiecare operație</div>
|
||
<div style="display:flex;gap:9px;font:400 13px/1.4 var(--font-ui);color:var(--text,#e6e9ef);"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#2FBF8F" stroke-width="2" style="flex-shrink:0;margin-top:1px;"><path d="M20 6L9 17l-5-5"/></svg>Alegerile se salvează — la următorul fișier nu mai mapezi nimic</div>
|
||
<div style="display:flex;gap:9px;font:400 13px/1.4 var(--font-ui);color:var(--text,#e6e9ef);"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#2FBF8F" stroke-width="2" style="flex-shrink:0;margin-top:1px;"><path d="M20 6L9 17l-5-5"/></svg>Protecție la duplicate</div>
|
||
<div style="display:flex;gap:9px;font:400 13px/1.4 var(--font-ui);color:var(--text,#e6e9ef);"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#2FBF8F" stroke-width="2" style="flex-shrink:0;margin-top:1px;"><path d="M20 6L9 17l-5-5"/></svg>Suport email, în 48h</div>
|
||
</div>
|
||
<button data-act="auth" data-tab="register" data-plan="free" style="width:100%;height:46px;border-radius:6px;background:transparent;border:1px solid var(--line,#262b36);color:var(--text,#e6e9ef);font:500 14px var(--font-ui);cursor:pointer;transition:transform .18s ease, background .18s ease, border-color .18s ease;" style-hover="background:#1F9D5C;border-color:#1F9D5C;color:#fff;transform:translateY(-1px)">Creează cont gratuit</button>
|
||
</div>
|
||
<!-- Standard -->
|
||
<div style="background:var(--card,#181c24);border:1.5px solid var(--accent,#2E74D6);border-radius:12px;padding:26px 24px;position:relative;display:flex;flex-direction:column;">
|
||
<div style="position:absolute;top:-12px;left:20px;padding:4px 11px;border-radius:99px;background:var(--accent,#2E74D6);color:#fff;font:700 10px var(--font-ui);letter-spacing:.04em;text-transform:uppercase;">Popular</div>
|
||
<div style="font:700 17px var(--font-ui);color:var(--text,#e6e9ef);margin-bottom:8px;">Standard</div>
|
||
<div style="display:flex;align-items:baseline;gap:5px;margin-bottom:14px;"><span style="font:700 32px var(--font-ui);letter-spacing:-.02em;color:var(--text,#e6e9ef);">49 lei</span><span style="font:400 13px var(--font-ui);color:var(--sub,#8b93a7);">/lună</span><span style="font:400 12px var(--font-ui);color:var(--mut,#5c6473);">* fără TVA</span></div>
|
||
<div style="display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;"><span style="display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:7px;font:700 11.5px var(--font-ui);background:color-mix(in srgb,var(--accent,#2E74D6) 12%,transparent);border:1px solid color-mix(in srgb,var(--accent,#2E74D6) 40%,var(--line,#262b36));color:var(--accent,#2E74D6);"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/></svg>Import CSV/XLSX</span><span style="display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:7px;font:500 11.5px var(--font-ui);background:transparent;border:1px solid var(--line,#262b36);color:var(--mut,#5c6473);text-decoration:line-through;text-decoration-thickness:1px;">API</span></div>
|
||
<div style="display:flex;align-items:flex-start;gap:7px;padding:7px 10px;border-radius:7px;background:color-mix(in srgb,#2FBF8F 13%,transparent);color:var(--okt,#2FBF8F);font:600 12px/1.45 var(--font-ui);margin-bottom:14px;"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="flex-shrink:0;margin-top:1px;"><circle cx="12" cy="13" r="8"/><path d="M12 9v4l2.5 2.5M9 2h6"/></svg><span>Economisești 4+ ore / 250+ lei pe lună <span style="font-weight:400;opacity:.8;">· la 100+ trimiteri</span></span></div>
|
||
<div style="display:flex;flex-direction:column;gap:10px;margin-bottom:22px;flex:1;">
|
||
<div style="display:flex;gap:9px;font:400 13px/1.4 var(--font-ui);color:var(--text,#e6e9ef);"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#2FBF8F" stroke-width="2" style="flex-shrink:0;margin-top:1px;"><path d="M20 6L9 17l-5-5"/></svg><span><strong style="font-weight:700;">Tot ce este la Gratuit</strong> +</span></div>
|
||
<div style="display:flex;gap:9px;font:400 13px/1.4 var(--font-ui);color:var(--text,#e6e9ef);"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#2FBF8F" stroke-width="2" style="flex-shrink:0;margin-top:1px;"><path d="M20 6L9 17l-5-5"/></svg>Trimiteri nelimitate</div>
|
||
<div style="display:flex;gap:9px;font:400 13px/1.4 var(--font-ui);color:var(--text,#e6e9ef);"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#2FBF8F" stroke-width="2" style="flex-shrink:0;margin-top:1px;"><path d="M20 6L9 17l-5-5"/></svg>Suport email, maxim 24h</div>
|
||
</div>
|
||
<button style="width:100%;height:46px;border-radius:6px;background:#1F9D5C;border:1px solid #1F9D5C;color:#fff;font:700 14px var(--font-ui);cursor:pointer;transition:transform .2s cubic-bezier(.2,.8,.2,1), background .2s ease, box-shadow .2s ease;" style-hover="background:#16864a;border-color:#16864a;transform:translateY(-1px)" data-act="auth" data-tab="register" data-plan="standard">Creează cont gratuit</button>
|
||
</div>
|
||
<!-- Pro -->
|
||
<div style="background:var(--card,#181c24);border:1px solid var(--line,#262b36);border-radius:12px;padding:26px 24px;display:flex;flex-direction:column;">
|
||
<div style="font:700 17px var(--font-ui);color:var(--text,#e6e9ef);margin-bottom:8px;">Pro</div>
|
||
<div style="display:flex;align-items:baseline;gap:5px;margin-bottom:14px;"><span style="font:700 32px var(--font-ui);letter-spacing:-.02em;color:var(--text,#e6e9ef);">59 lei</span><span style="font:400 13px var(--font-ui);color:var(--sub,#8b93a7);">/lună</span><span style="font:400 12px var(--font-ui);color:var(--mut,#5c6473);">* fără TVA</span></div>
|
||
<div style="display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;"><span style="display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:7px;font:700 11.5px var(--font-ui);background:color-mix(in srgb,var(--accent,#2E74D6) 12%,transparent);border:1px solid color-mix(in srgb,var(--accent,#2E74D6) 40%,var(--line,#262b36));color:var(--accent,#2E74D6);"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/></svg>Import CSV/XLSX</span><span style="display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:7px;font:700 11.5px var(--font-ui);background:color-mix(in srgb,#2FBF8F 13%,transparent);border:1px solid color-mix(in srgb,#2FBF8F 40%,var(--line,#262b36));color:var(--okt,#2FBF8F);"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M16 18l6-6-6-6M8 6l-6 6 6 6"/></svg>+ API</span></div>
|
||
<div style="display:flex;align-items:flex-start;gap:7px;padding:7px 10px;border-radius:7px;background:color-mix(in srgb,#2FBF8F 13%,transparent);color:var(--okt,#2FBF8F);font:600 12px/1.45 var(--font-ui);margin-bottom:14px;"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="flex-shrink:0;margin-top:1px;"><circle cx="12" cy="13" r="8"/><path d="M12 9v4l2.5 2.5M9 2h6"/></svg><span>Economisești 4+ ore / 250+ lei pe lună <span style="font-weight:400;opacity:.8;">· la 100+ trimiteri</span></span></div>
|
||
<div style="display:flex;flex-direction:column;gap:10px;margin-bottom:22px;flex:1;">
|
||
<div style="display:flex;gap:9px;font:400 13px/1.4 var(--font-ui);color:var(--text,#e6e9ef);"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#2FBF8F" stroke-width="2" style="flex-shrink:0;margin-top:1px;"><path d="M20 6L9 17l-5-5"/></svg><span><strong style="font-weight:700;">Tot ce este la Standard</strong> +</span></div>
|
||
<div style="display:flex;gap:9px;font:400 13px/1.4 var(--font-ui);color:var(--text,#e6e9ef);"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#2FBF8F" stroke-width="2" style="flex-shrink:0;margin-top:1px;"><path d="M20 6L9 17l-5-5"/></svg>Trimite direct din softul de service (API)</div>
|
||
<div style="display:flex;gap:9px;font:400 13px/1.4 var(--font-ui);color:var(--text,#e6e9ef);"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#2FBF8F" stroke-width="2" style="flex-shrink:0;margin-top:1px;"><path d="M20 6L9 17l-5-5"/></svg>Confirmi mapările fie prin API, fie din browser</div>
|
||
<div style="display:flex;gap:9px;font:400 13px/1.4 var(--font-ui);color:var(--text,#e6e9ef);"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#2FBF8F" stroke-width="2" style="flex-shrink:0;margin-top:1px;"><path d="M20 6L9 17l-5-5"/></svg>Suport email, maxim 8h</div>
|
||
</div>
|
||
<button style="width:100%;height:46px;border-radius:6px;background:transparent;border:1px solid var(--line,#262b36);color:var(--text,#e6e9ef);font:500 14px var(--font-ui);cursor:pointer;transition:transform .18s ease, background .18s ease, border-color .18s ease;" style-hover="background:#1F9D5C;border-color:#1F9D5C;color:#fff;transform:translateY(-1px)" data-act="auth" data-tab="register" data-plan="pro">Creează cont gratuit</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- PRIVACY -->
|
||
<div style="padding:80px 40px;border-top:1px solid var(--line,#262b36);">
|
||
<div style="margin:0 auto;display:grid;grid-template-columns:minmax(240px,330px) 1fr;gap:48px;align-items:center;">
|
||
<h2 style="font:700 30px/1.2 var(--font-ui);letter-spacing:-.02em;margin:0;color:var(--text,#e6e9ef);">Datele clienților tăi nu devin marfă</h2>
|
||
<div style="display:flex;flex-wrap:wrap;">
|
||
<div style="flex:1;min-width:200px;padding:4px 28px;border-left:1px solid var(--line,#262b36);">
|
||
<div style="font:700 16px var(--font-ui);color:var(--text,#e6e9ef);margin-bottom:7px;">Reținem doar strict necesarul</div>
|
||
<div style="font:400 14px/1.55 var(--font-ui);color:var(--sub,#8b93a7);">Doar datele de care e nevoie ca să trimitem la RAR — nimic adunat în plus, nici la conturile gratuite.</div>
|
||
</div>
|
||
<div style="flex:1;min-width:200px;padding:4px 28px;border-left:1px solid var(--line,#262b36);">
|
||
<div style="font:700 16px var(--font-ui);color:var(--text,#e6e9ef);margin-bottom:7px;">Doar pentru scopul declarat</div>
|
||
<div style="font:400 14px/1.55 var(--font-ui);color:var(--sub,#8b93a7);">Maparea și trimiterea la RAR. Nu le vindem și nu le dăm mai departe.</div>
|
||
</div>
|
||
<div style="flex:1;min-width:200px;padding:4px 28px;border-left:1px solid var(--line,#262b36);">
|
||
<div style="font:700 16px var(--font-ui);color:var(--text,#e6e9ef);margin-bottom:7px;">Se șterg la 3 luni</div>
|
||
<div style="font:400 14px/1.55 var(--font-ui);color:var(--sub,#8b93a7);">Automat, fără să ceri — sau chiar acum, cu un singur click.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- AUTH / REGISTER -->
|
||
<div id="inregistrare" style="padding:80px 40px;border-top:1px solid var(--line,#262b36);background:color-mix(in srgb,var(--accent,#2E74D6) 5%,var(--bg,#0f1218));">
|
||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:56px;margin:0 auto;align-items:center;">
|
||
<div>
|
||
<div style="font:500 13px var(--font-ui);color:var(--accent,#2E74D6);letter-spacing:.1em;text-transform:uppercase;margin-bottom:14px;">Creează cont</div>
|
||
<h2 style="font:700 34px/1.15 var(--font-ui);letter-spacing:-.02em;margin:0 0 14px;color:var(--text,#e6e9ef);">Creează cont în 2 minute și declară azi la RAR</h2>
|
||
<p style="font:400 16px/1.6 var(--font-ui);color:var(--sub,#8b93a7);margin:0 0 24px;">Te înregistrezi gratuit. Imediat poți încărca primul fișier sau conecta softul de service.</p>
|
||
<div style="display:flex;flex-direction:column;gap:12px;">
|
||
<div style="display:flex;gap:10px;align-items:center;font:400 15px var(--font-ui);color:var(--text,#e6e9ef);"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#2FBF8F" stroke-width="2" style="flex-shrink:0;"><path d="M20 6L9 17l-5-5"/></svg>Pro gratuit 30 de zile, apoi automat pe Gratuit</div>
|
||
<div style="display:flex;gap:10px;align-items:center;font:400 15px var(--font-ui);color:var(--text,#e6e9ef);"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#2FBF8F" stroke-width="2" style="flex-shrink:0;"><path d="M20 6L9 17l-5-5"/></svg>Conform Legii 142/2023 și OMTI 210/2024</div>
|
||
<div style="display:flex;gap:10px;align-items:center;font:400 15px var(--font-ui);color:var(--text,#e6e9ef);"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#2FBF8F" stroke-width="2" style="flex-shrink:0;"><path d="M20 6L9 17l-5-5"/></svg>Datele cu caracter personal criptate (GDPR)</div>
|
||
</div>
|
||
</div>
|
||
<div style="background:var(--card,#181c24);border:1px solid var(--line,#262b36);border-radius:14px;padding:32px;box-shadow:0 20px 50px -24px rgba(0,0,0,.5);">
|
||
<div style="display:flex;gap:28px;border-bottom:1px solid var(--line,#262b36);margin-bottom:24px;">
|
||
<button type="button" data-act="tab" data-tab="register" class="auth-tab is-active" style="position:relative;background:none;border:none;padding:0 0 12px;font:700 15px var(--font-ui);color:var(--text,#e6e9ef);cursor:pointer;">Creează cont<span class="tab-underline" style="position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent,#2E74D6);"></span></button>
|
||
<button type="button" data-act="tab" data-tab="login" class="auth-tab" style="position:relative;background:none;border:none;padding:0 0 12px;font:700 15px var(--font-ui);color:var(--sub,#8b93a7);cursor:pointer;">Autentificare<span class="tab-underline" style="position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent,#2E74D6);"></span></button>
|
||
</div>
|
||
<form method="post" action="/signup" data-pane="register">
|
||
<input type="hidden" name="csrf_token" value="{{ csrf_token }}">
|
||
<label style="display:block;margin-bottom:14px;"><span style="display:block;margin-bottom:6px;font:500 13px var(--font-ui);color:var(--sub,#8b93a7);">Companie</span><input type="text" name="name" required placeholder="SC Service Auto SRL" style="width:100%;height:44px;padding:0 12px;border:1px solid var(--line,#262b36);border-radius:6px;background:var(--card2,#0f1218);color:var(--text,#e6e9ef);font:400 14px var(--font-ui);outline:none;" /></label>
|
||
<label style="display:block;margin-bottom:14px;"><span style="display:block;margin-bottom:6px;font:500 13px var(--font-ui);color:var(--sub,#8b93a7);">CUI</span><input type="text" name="cui" required placeholder="RO12345678" style="width:100%;height:44px;padding:0 12px;border:1px solid var(--line,#262b36);border-radius:6px;background:var(--card2,#0f1218);color:var(--text,#e6e9ef);font:400 14px var(--font-mono);outline:none;" /></label>
|
||
<label style="display:block;margin-bottom:14px;"><span style="display:block;margin-bottom:6px;font:500 13px var(--font-ui);color:var(--sub,#8b93a7);">Email</span><input type="email" name="email" required placeholder="nume@service.ro" style="width:100%;height:44px;padding:0 12px;border:1px solid var(--line,#262b36);border-radius:6px;background:var(--card2,#0f1218);color:var(--text,#e6e9ef);font:400 14px var(--font-ui);outline:none;" /></label>
|
||
<label style="display:block;margin-bottom:14px;"><span style="display:block;margin-bottom:6px;font:500 13px var(--font-ui);color:var(--sub,#8b93a7);">Parolă</span><input type="password" name="parola" required minlength="10" placeholder="Minim 10 caractere" style="width:100%;height:44px;padding:0 12px;border:1px solid var(--line,#262b36);border-radius:6px;background:var(--card2,#0f1218);color:var(--text,#e6e9ef);font:400 14px var(--font-ui);outline:none;" /></label>
|
||
<label style="display:block;margin-bottom:16px;"><span style="display:block;margin-bottom:6px;font:500 13px var(--font-ui);color:var(--sub,#8b93a7);">Pachet ales</span><select id="plan-select" name="plan" style="width:100%;height:44px;padding:0 10px;border:1px solid var(--line,#262b36);border-radius:6px;background:var(--card2,#0f1218);color:var(--text,#e6e9ef);font:400 14px var(--font-ui);outline:none;cursor:pointer;"><option value="free" selected>Gratuit — 0 lei/lună</option><option value="standard">Standard — 49 lei/lună</option><option value="pro">Pro — 59 lei/lună</option></select></label>
|
||
<label style="display:flex;gap:9px;align-items:flex-start;margin-bottom:18px;font:400 13px/1.5 var(--font-ui);color:var(--sub,#8b93a7);cursor:pointer;"><input type="checkbox" name="consent" value="1" required style="margin-top:2px;accent-color:var(--accent,#2E74D6);width:16px;height:16px;flex-shrink:0;" />Sunt de acord cu Termenii și cu prelucrarea datelor conform politicii de confidențialitate (GDPR).</label>
|
||
<button type="submit" class="btn-green" style="width:100%;height:48px;border-radius:6px;background:#1F9D5C;border:1px solid #1F9D5C;color:#fff;font:700 15px var(--font-ui);cursor:pointer;transition:transform .2s cubic-bezier(.2,.8,.2,1), background .2s ease, box-shadow .2s ease;">Creează cont gratuit</button>
|
||
<div style="text-align:center;margin-top:14px;font:400 13px var(--font-ui);color:var(--sub,#8b93a7);">Ai deja cont? <a data-act="tab" data-tab="login" style="color:var(--accent,#2E74D6);font-weight:500;cursor:pointer;">Autentifică-te</a></div>
|
||
</form>
|
||
<form method="post" action="/login" data-pane="login" style="display:none;">
|
||
<input type="hidden" name="csrf_token" value="{{ csrf_token }}">
|
||
<label style="display:block;margin-bottom:14px;"><span style="display:block;margin-bottom:6px;font:500 13px var(--font-ui);color:var(--sub,#8b93a7);">Email</span><input type="email" name="email" required placeholder="nume@service.ro" style="width:100%;height:44px;padding:0 12px;border:1px solid var(--line,#262b36);border-radius:6px;background:var(--card2,#0f1218);color:var(--text,#e6e9ef);font:400 14px var(--font-ui);outline:none;" /></label>
|
||
<label style="display:block;margin-bottom:10px;"><span style="display:block;margin-bottom:6px;font:500 13px var(--font-ui);color:var(--sub,#8b93a7);">Parolă</span><input type="password" name="parola" required placeholder="Parola ta" style="width:100%;height:44px;padding:0 12px;border:1px solid var(--line,#262b36);border-radius:6px;background:var(--card2,#0f1218);color:var(--text,#e6e9ef);font:400 14px var(--font-ui);outline:none;" /></label>
|
||
<div style="text-align:right;margin-bottom:18px;"><a href="/login" style="font:400 13px var(--font-ui);color:var(--accent,#2E74D6);cursor:pointer;">Ai uitat parola?</a></div>
|
||
<button type="submit" class="btn-green" style="width:100%;height:48px;border-radius:6px;background:#1F9D5C;border:1px solid #1F9D5C;color:#fff;font:700 15px var(--font-ui);cursor:pointer;transition:transform .2s cubic-bezier(.2,.8,.2,1), background .2s ease;">Autentificare</button>
|
||
<div style="text-align:center;margin-top:14px;font:400 13px var(--font-ui);color:var(--sub,#8b93a7);">Nu ai cont? <a data-act="tab" data-tab="register" style="color:var(--accent,#2E74D6);font-weight:500;cursor:pointer;">Creează unul gratuit</a></div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- FOOTER -->
|
||
<div style="border-top:1px solid var(--line,#262b36);padding:36px 40px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;">
|
||
<div style="font:700 18px var(--font-ui);letter-spacing:-.02em;color:var(--text,#e6e9ef);">ROM<span style="color:var(--accent,#2E74D6);">FAST</span></div>
|
||
<div style="display:flex;gap:26px;font:400 14px var(--font-ui);color:var(--sub,#8b93a7);">
|
||
<span>Termeni</span><span>Confidențialitate / GDPR</span><span>Documentație API</span><span>Contact</span>
|
||
</div>
|
||
<div style="font:400 13px var(--font-ui);color:var(--mut,#5c6473);">© 2026 ROMFAST</div>
|
||
</div>
|
||
</main>
|
||
<script>
|
||
(function(){
|
||
// Acelasi set de 8 teme, aceeasi ordine si aceeasi cheie 'theme' ca aplicatia
|
||
// (base.html), ca preferinta sa se pastreze intre landing si aplicatie.
|
||
// 'auto' urmeaza sistemul (prefers-color-scheme).
|
||
var THEMES=[['light','Light'],['dark','Dark'],['petrol','Petrol'],['grafit','Grafit'],['cobalt','Cobalt'],['cupru','Cupru'],['hartie','Hârtie'],['auto','Auto']];
|
||
var VALID=THEMES.reduce(function(a,t){a[t[0]]=1;return a;},{});
|
||
var body=document.body;
|
||
function resolve(id){return id==='auto'?(window.matchMedia('(prefers-color-scheme: light)').matches?'light':'dark'):id;}
|
||
function storedId(){try{var v=localStorage.getItem('theme');return (v&&VALID[v])?v:null;}catch(e){return null;}}
|
||
function curId(){return storedId()||body.getAttribute('data-theme')||'grafit';}
|
||
function curIndex(){var t=curId();for(var i=0;i<THEMES.length;i++){if(THEMES[i][0]===t)return i;}return 3;}
|
||
function label(i){var l=document.getElementById('theme-label');if(l)l.textContent=THEMES[i][1];}
|
||
function applyTheme(i){i=((i%THEMES.length)+THEMES.length)%THEMES.length;var id=THEMES[i][0];body.setAttribute('data-theme',resolve(id));label(i);try{localStorage.setItem('theme',id);}catch(e){}}
|
||
// Init: sincronizeaza eticheta + data-theme din starea stocata, FARA a scrie in localStorage
|
||
// (altfel simpla vizitare a landing-ului ar suprascrie alegerea facuta in aplicatie).
|
||
(function(){var i=curIndex();body.setAttribute('data-theme',resolve(THEMES[i][0]));label(i);})();
|
||
|
||
// style-hover: framework-ul de design folosea atributul style-hover; il aplicam la hover.
|
||
function parseStyle(str){var o={};str.split(';').forEach(function(p){var idx=p.indexOf(':');if(idx>0)o[p.slice(0,idx).trim()]=p.slice(idx+1).trim();});return o;}
|
||
document.querySelectorAll('[style-hover]').forEach(function(el){
|
||
var hov=parseStyle(el.getAttribute('style-hover'));var keys=Object.keys(hov);var saved={};
|
||
el.addEventListener('mouseenter',function(){keys.forEach(function(k){saved[k]=el.style.getPropertyValue(k);el.style.setProperty(k,hov[k]);});});
|
||
el.addEventListener('mouseleave',function(){keys.forEach(function(k){el.style.setProperty(k,saved[k]);});});
|
||
});
|
||
|
||
// Calculator: cost raportare manuala (2,5 min/prestatie). Slidere cu trepte discrete.
|
||
var pres=document.getElementById('calc-pres'),rate=document.getElementById('calc-rate');
|
||
var PRES_STEPS=[50,100,150,200,300,500],RATE_STEPS=[30,50,60,80,100,150];
|
||
var nf=new Intl.NumberFormat('ro-RO',{maximumFractionDigits:0});
|
||
var nf1=new Intl.NumberFormat('ro-RO',{maximumFractionDigits:1});
|
||
function recalc(){
|
||
var p=PRES_STEPS[+pres.value],r=RATE_STEPS[+rate.value],minPer=2.5;
|
||
var hMonth=(p*minPer)/60,leiMonth=hMonth*r;
|
||
document.getElementById('out-pres').textContent=p;
|
||
document.getElementById('out-rate').textContent=r;
|
||
var map={leiMonth:nf.format(Math.round(leiMonth)),hMonth:nf.format(Math.round(hMonth)),leiYear:nf.format(Math.round(leiMonth*12)),days:nf.format(Math.round((hMonth*12)/8))};
|
||
Object.keys(map).forEach(function(k){document.querySelectorAll('[data-calc="'+k+'"]').forEach(function(n){n.textContent=map[k];});});
|
||
}
|
||
if(pres&&rate){pres.addEventListener('input',recalc);rate.addEventListener('input',recalc);recalc();}
|
||
|
||
// Tab-uri autentificare/inregistrare.
|
||
function setTab(tab){
|
||
document.querySelectorAll('[data-pane]').forEach(function(f){f.style.display=(f.getAttribute('data-pane')===tab)?'':'none';});
|
||
document.querySelectorAll('.auth-tab').forEach(function(b){
|
||
var on=b.getAttribute('data-tab')===tab;b.classList.toggle('is-active',on);
|
||
b.style.color=on?'var(--text,#e6e9ef)':'var(--sub,#8b93a7)';
|
||
var u=b.querySelector('.tab-underline');if(u)u.style.display=on?'':'none';
|
||
});
|
||
}
|
||
setTab('register');
|
||
|
||
document.addEventListener('click',function(e){
|
||
var t=e.target.closest('[data-act]');if(!t)return;
|
||
var act=t.getAttribute('data-act');
|
||
if(act==='theme'){applyTheme(curIndex()+1);}
|
||
else if(act==='tab'){e.preventDefault();setTab(t.getAttribute('data-tab'));}
|
||
else if(act==='auth'){
|
||
e.preventDefault();
|
||
setTab(t.getAttribute('data-tab')||'register');
|
||
var plan=t.getAttribute('data-plan'),sel=document.getElementById('plan-select');
|
||
if(plan&&sel)sel.value=plan;
|
||
var a=document.getElementById('inregistrare');if(a)a.scrollIntoView({behavior:'smooth',block:'start'});
|
||
}
|
||
});
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html>
|