romfast/rar-autopass
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(landing): elimina announce bar, actualizeaza badge hero, ancoreaza nav, simplifica login

Browse Source 
- Scoate announce bar-ul de deasupra header-ului
- Badge hero reformulat: "Este gratuit pentru service-urile mici — pana la 60 de trimiteri RAR/luna" + link "Creeaza cont in 2 minute"
- Nav links "Cum functioneaza", "API", "Pret" devin <a href="#..."> cu id-uri pe sectiunile corespunzatoare
- Pagina /login: scoate <aside> cu logo/tagline/trust, layout trece la o singura coloana centrata

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Claude Agent
2026-06-29 15:04:40 +00:00
parent 8f39dfbc1e
commit 3f513f6c12
2 changed files with 12 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
app/web/templates/landing.html
View File

@@ -54,18 +54,12 @@
<body data-theme="grafit">
<script>try{var _t=localStorage.getItem('lp-theme');if(_t&&['grafit','cobalt','cupru','hartie'].indexOf(_t)>=0)document.body.setAttribute('data-theme',_t);}catch(e){}</script>
<main class="page">
<!-- ANNOUNCE BAR -->
<div style="display:flex;align-items:center;justify-content:center;gap:16px;padding:10px 40px;background:var(--card,#181c24);border-bottom:1px solid var(--line,#262b36);font:500 13px var(--font-ui);color:var(--text,#e6e9ef);flex-wrap:wrap;">
<span style="display:inline-flex;align-items:center;gap:8px;"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#2FBF8F" stroke-width="2" style="flex-shrink:0;"><path d="M20 6L9 17l-5-5"/></svg>Vrei să testezi sau ai un service mic? Este <strong style="font-weight:700;color:#1F9D5C;">gratuit</strong> — până la 60 de prestații/lună, fără card bancar.</span>
<a data-act="auth" data-tab="register" style="display:inline-flex;align-items:center;gap:5px;color:var(--accent,#2E74D6);font-weight:700;cursor:pointer;text-decoration:none;transition:color .18s ease, transform .18s ease;" style-hover="color:#17a96e;transform:translateX(2px)">Creează cont în 2 minute <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
</div>
<!-- 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:48px;">
<img src="/static/romfast_logo.png" alt="ROMFAST" style="height:38px;width:auto;display:block;" />
<div class="lp-nav" style="display:flex;gap:28px;font:500 14px var(--font-ui);color:var(--sub,#8b93a7);">
<span>Cum funcționează</span><span>API</span><span>Preț</span>
<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>
<div class="lp-hactions" style="display:flex;align-items:center;gap:12px;">
@@ -81,9 +75,9 @@
<!-- HERO -->
<div style="display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding:80px 40px 72px;">
<div>
<div style="display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:99px;background:transparent;border:1px solid var(--line,#262b36);color:var(--text,#e6e9ef);font:500 13px var(--font-ui);margin-bottom:24px;">
<svg width="15" height="15" 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><strong style="font-weight:700;color:#1F9D5C;">Gratuit</strong> pentru testare și service-uri mici · 60 prestații/lună</span>
<div style="display:inline-flex;align-items:center;gap:12px;padding:7px 14px;border-radius:99px;background:transparent;border:1px solid var(--line,#262b36);color:var(--text,#e6e9ef);font:500 13px var(--font-ui);margin-bottom:24px;flex-wrap:wrap;">
<span style="display:inline-flex;align-items:center;gap:8px;"><svg width="15" height="15" 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>Este gratuit pentru service-urile mici — până la 60 de trimiteri RAR/lună</span>
<a data-act="auth" data-tab="register" style="display:inline-flex;align-items:center;gap:5px;color:var(--accent,#2E74D6);font-weight:700;cursor:pointer;text-decoration:none;" >Creează cont în 2 minute <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
</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ă prestațiile la RAR AUTOPASS, automat</h1>
<p style="font:400 17px/1.6 var(--font-ui);color:var(--sub,#8b93a7);margin:0 0 32px;max-width:480px;">Conformitate RAR fără bătaie de cap. Încarci un fișier sau conectezi softul de service — noi trimitem prezentările la RAR în siguranță, conform Legii 142/2023.</p>
@@ -205,7 +199,7 @@
</div>
<!-- SOLVE -->
<div style="padding:80px 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 id="cum-functioneaza" style="padding:80px 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:780px;margin:0 auto;text-align:center;">
<h2 style="font:700 36px var(--font-ui);letter-spacing:-.02em;margin:0 0 18px;color:var(--text,#e6e9ef);">Nu trebuie să fii bun cu calculatorul</h2>
<p style="font:400 19px/1.75 var(--font-ui);color:var(--sub,#8b93a7);margin:0 auto;max-width:660px;"><span style="color:var(--accent,#2E74D6);font-weight:700;text-decoration:underline;text-underline-offset:3px;">Încarci</span> fișierul CSV/XLSX (sau trimiți direct prin API). ROA Auto-Pass îți propune asocierile — tu le <span style="color:var(--accent,#2E74D6);font-weight:700;text-decoration:underline;text-underline-offset:3px;">confirmi sau corectezi</span> o singură dată — apoi le <span style="color:var(--accent,#2E74D6);font-weight:700;text-decoration:underline;text-underline-offset:3px;">trimitem</span> la RAR, iar tu doar <span style="color:var(--accent,#2E74D6);font-weight:700;text-decoration:underline;text-underline-offset:3px;">urmărești</span> pe ecran.</p>
@@ -216,7 +210,7 @@
</div>
<!-- API INTEGRATION -->
<div style="padding:0 40px 80px;">
<div id="api" style="padding:0 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 · ROAAUTO</div>
@@ -243,7 +237,7 @@
</div>
<!-- PRICING -->
<div style="padding:0 40px 80px;">
<div id="pret" style="padding:0 40px 80px;">
<div style="text-align:center;margin-bottom:44px;">
<div style="font:500 13px var(--font-ui);color:var(--accent,#2E74D6);letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px;">Preț</div>
<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>

47
app/web/templates/login.html
View File

@@ -8,31 +8,7 @@
<div class="login-2col" style="max-width:860px; margin:32px auto;">
{# Antet minimal deja randat in base.html (fara RAR dot, fara burger, fara account_name) #}
<div class="login-shell">
{# === Coloana stanga: brand + trust === #}
<aside class="login-aside" aria-label="Despre ROMFAST AUTOPASS">
<div class="login-brand-row">
<img src="/static/romfast_logo.png" alt="ROMFAST" style="height:36px; width:auto;">
</div>
<h2 class="login-headline">ROMFAST <span style="color:var(--accent);">AUTOPASS</span></h2>
<p class="login-tagline">Declara prestatiile de service-auto la RAR AUTOPASS, automat.
Conform Legii 142/2023 si OMTI 210/2024.</p>
<ul class="login-trust">
<li>
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" aria-hidden="true"><path d="M20 6L9 17l-5-5"/></svg>
Conform Legii 142/2023 si OMTI 210/2024
</li>
<li>
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><rect x="5" y="11" width="14" height="9" rx="1.5"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/></svg>
Datele criptate, sterse la 3 luni
</li>
<li>
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M20 6L9 17l-5-5"/></svg>
Parte din familia ROA — Romfast Applications
</li>
</ul>
</aside>
{# === Coloana dreapta: formular (NESCHIMBAT — CSRF, POST /login, link signup) === #}
{# === Formular autentificare === #}
<div class="login-form-col">
<h3 style="font-size:var(--fs-xl); margin:0 0 4px;">Autentificare</h3>
<p style="font-size:var(--fs-sm); color:var(--muted); margin:0 0 22px;">
@@ -66,33 +42,18 @@
<style>
/* US-010 PRD 5.16: layout /login profesional 2 coloane. */
.login-shell {
display:grid; grid-template-columns:1.1fr 0.9fr;
display:grid; grid-template-columns:1fr;
border:1px solid var(--line); border-radius:16px; overflow:hidden;
background:var(--card); min-height:480px;
background:var(--card); max-width:460px; margin:0 auto;
}
.login-aside {
padding:40px 38px;
background:linear-gradient(160deg, color-mix(in srgb,var(--accent) 12%,var(--card)), var(--card));
border-right:1px solid var(--line);
display:flex; flex-direction:column; justify-content:center;
}
.login-brand-row { display:flex; align-items:center; gap:10px; margin-bottom:24px; }
.login-headline { font-size:var(--fs-2xl); line-height:var(--lh-tight); margin:0 0 12px; letter-spacing:-.02em; }
.login-tagline { font-size:var(--fs-md); color:var(--muted); line-height:1.6; margin:0 0 20px; max-width:340px; }
.login-trust { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.login-trust li { display:flex; align-items:center; gap:9px; font-size:var(--fs-sm); color:var(--ink); }
.login-trust svg { flex-shrink:0; color:var(--ok); }
.login-form-col { padding:40px 38px; display:flex; flex-direction:column; justify-content:center; }
.btn-primary-full { width:100%; min-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; }
.btn-primary-full:hover { filter:brightness(1.08); }
.login-foot { text-align:center; font-size:var(--fs-sm); color:var(--muted); margin-top:18px; }
/* Mobil: stivuire verticala, formular sus */
@media (max-width:640px) {
.login-shell { grid-template-columns:1fr; grid-template-rows:auto auto; }
.login-aside { order:2; border-right:none; border-top:1px solid var(--line); padding:28px 22px; }
.login-form-col { order:1; padding:28px 22px; }
.login-form-col { padding:28px 22px; }
}
</style>
{% endblock %}