854db66abc
Implementare completa U5 din plan-treapta2.md (sectiunea 13): - _upload.html: drop zone + buton accesibil (a11y: drag nu e la tastatura), drag-and-drop JS, mesaj 'NU se trimite nimic pana confirmi', selector foi pt multi-sheet xlsx, stari eroare/mesaj - _mapcoloane.html: formular mapare coloane cu .maprow/.mapcol.grow, sugestii fuzzy pre-selectate, etiichete <label> vizibile, sample values, format data configurabil - _preview_import.html: tabel 6 stari, pills rezumat, filtre pe stare, .chk per-rand pe needs_review (D11), banner declarant .banner.warn direct deasupra input-ului N (D12), bara confirmare sticky, text 'dubla cu randul N' pe duplicate_in_file (D10 daltonism), link export CSV randuri esuate - base.html: .s-needs_review (warn), .s-already_sent/.s-duplicate_in_file (muted), .drop-zone, .banner.warn, .sticky-bar, .htmx-indicator - routes.py: rute /_import/upload/mapare-coloane/preview/reset/confirma; helper _web_compute_preview refoloseste _resolve_row_for_preview, _already_sent_lookup, _signature din import_router (fara a-l edita); commit ON CONFLICT DO NOTHING (TOCTOU); log atestare - tests/test_import_ui.py: 15 teste (dashboard, upload, mapare, preview, confirmare N corect/gresit, reset, erori, multi-sheet, a11y D10/D11/D12) 279 teste total, 0 esecuri. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
78 lines
4.6 KiB
HTML
78 lines
4.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ro">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>{% block title %}Gateway RAR AUTOPASS{% endblock %}</title>
|
|
<script src="/static/htmx.min.js"></script>
|
|
<style>
|
|
:root { --bg:#0f1115; --card:#181b22; --ink:#e6e9ef; --muted:#8b93a7; --line:#262b36;
|
|
--ok:#3ecf8e; --warn:#e6b34a; --err:#e5605e; --accent:#5b8def; }
|
|
* { box-sizing:border-box; }
|
|
body { margin:0; font:15px/1.5 ui-sans-serif,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
|
|
background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased; }
|
|
header { padding:16px 24px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:12px; }
|
|
header h1 { font-size:20px; margin:0; font-weight:700; letter-spacing:-.01em; }
|
|
header .env { font-size:12px; color:var(--muted); border:1px solid var(--line); padding:2px 8px; border-radius:99px; }
|
|
main { padding:24px; max-width:1100px; margin:0 auto; }
|
|
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:16px 20px; margin-bottom:16px; }
|
|
.banner { border-left:3px solid var(--err); background:#241a1a; }
|
|
.banner.hidden { display:none; }
|
|
/* Tabelele de date au multe coloane; pe ecrane inguste scroll IN card, nu
|
|
impinge layout-ul paginii (altfel toata pagina scrolleaza orizontal). */
|
|
.tablewrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
|
|
table { width:100%; border-collapse:collapse; font-size:14px; font-variant-numeric:tabular-nums; }
|
|
th,td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); white-space:nowrap; }
|
|
th { color:var(--muted); font-weight:500; font-size:12px; text-transform:uppercase; letter-spacing:.04em; }
|
|
.empty { color:var(--muted); padding:24px; text-align:center; }
|
|
.pill { font-size:12px; padding:2px 8px; border-radius:99px; border:1px solid var(--line); }
|
|
.s-queued{color:var(--accent);} .s-sending{color:var(--warn);} .s-sent{color:var(--ok);}
|
|
.s-error,.s-needs_data,.s-needs_mapping{color:var(--err);}
|
|
.s-ok{color:var(--ok);}
|
|
.s-needs_review{color:var(--warn);}
|
|
.s-already_sent,.s-duplicate_in_file{color:var(--muted);}
|
|
.muted { color:var(--muted); }
|
|
a { color:var(--accent); }
|
|
/* Drop zone upload fisier */
|
|
.drop-zone { border:2px dashed var(--line); border-radius:8px; padding:32px 20px;
|
|
text-align:center; transition:border-color .15s,background .15s; }
|
|
.drop-zone.drag-over { border-color:var(--accent); background:rgba(91,141,239,.05); }
|
|
/* Banner varianta warn (nu eroare) */
|
|
.banner.warn { border-left-color:var(--warn); background:#201c0f; }
|
|
/* Bara confirmare sticky */
|
|
.sticky-bar { position:sticky; bottom:0; background:var(--card); border-top:1px solid var(--line);
|
|
padding:12px 16px; display:flex; align-items:flex-start; gap:16px;
|
|
flex-wrap:wrap; z-index:10; }
|
|
/* Indicator HTMX — ascuns pana la request */
|
|
.htmx-indicator { display:none; }
|
|
.htmx-indicator.htmx-request { display:inline; }
|
|
/* Link-uri de actiune in antetul cardurilor: zona de atins mai mare (>=36px) si
|
|
feedback la hover; pe ecrane inguste antetul se rupe curat sub titlu. */
|
|
.cardlink { font-size:13px; padding:7px 10px; border-radius:6px; display:inline-flex;
|
|
align-items:center; min-height:36px; white-space:nowrap; }
|
|
.cardlink:hover { background:var(--line); }
|
|
.flash { background:#16241c; border-left:3px solid var(--ok); padding:8px 12px; border-radius:6px;
|
|
margin:0 0 12px; font-size:13px; }
|
|
.maprow { display:flex; gap:16px; align-items:center; padding:12px 0; border-bottom:1px solid var(--line);
|
|
flex-wrap:wrap; }
|
|
.maprow:last-child { border-bottom:0; }
|
|
.mapcol.grow { flex:1 1 280px; min-width:240px; }
|
|
.sugg { color:var(--accent); }
|
|
select, button, input[type=text] { font:inherit; background:var(--bg); color:var(--ink);
|
|
border:1px solid var(--line); border-radius:6px; padding:6px 10px; }
|
|
select { max-width:340px; }
|
|
button { background:var(--accent); border-color:var(--accent); color:#fff; cursor:pointer; }
|
|
button:hover { filter:brightness(1.08); }
|
|
.chk { font-size:13px; color:var(--muted); display:flex; align-items:center; gap:6px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<h1>Gateway RAR AUTOPASS</h1>
|
|
<span class="env">{{ rar_env }}</span>
|
|
<span class="muted" style="margin-left:auto; font-size:13px;">v{{ version }}</span>
|
|
</header>
|
|
<main>{% block content %}{% endblock %}</main>
|
|
</body>
|
|
</html>
|