8dd0e1678c
PRD 5.16 (draft) — propagare design uniform peste aplicatie: - fonturi standard web (system font stack), scala uniforma --fs-* (carduri aerisite) - RAR online = dot in antet (datetime pe hover) + meniu burger; banda doar cand e blocat - antet branded "ROMFAST AUTOPASS" + nume service + badge plan (gate is_authenticated) - /login profesional (antet minimal pre-login), selector tema stil landing - bug-uri editare: denumiri in picker, adaugare operatie extra, fix save no-op, fix Renunta - dashboard compact: strip-less, contoare separate (mobil = bara numere), import colapsat, ordine carduri->import->tab-uri->lista, meniu cu separatoare - wizard import (4 pasi) + editare/corectie aliniate la design PRD 5.17 (draft) — tipuri de cont (Gratuit/Standard/Pro/Premium) + trial Pro 30 zile: - model accounts.tier + trial_until, app/plans.py sursa unica - enforcement DUR: limita Gratuit 60/luna (era 100) + API doar Pro+ - downgrade automat la expirare trial; aliniere landing (60, "Pro gratuit 30 zile") Mockup-uri vizuale (docs/mockups/prd-5.16-*.html): fonturi, header+login+tema, dashboard desktop+mobil, wizard import. Doar documentatie + mockup-uri; fara cod aplicatie. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
242 lines
20 KiB
HTML
242 lines
20 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ro">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>PRD 5.16 — Dashboard aplicatie (compact, minimalist)</title>
|
|
<style>
|
|
:root{
|
|
--font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
--font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Segoe UI Mono", "Roboto Mono", Menlo, Consolas, monospace;
|
|
--fs-xs:12px; --fs-sm:13.5px; --fs-base:15px; --fs-md:16px; --fs-lg:18px; --fs-xl:20px; --fs-2xl:28px;
|
|
--bg:#0f1218; --card:#181c24; --card2:#0f1218; --ink:#e6e9ef; --muted:#8b93a7;
|
|
--line:#262b36; --line2:#1f2530; --accent:#6ea2ec; --ok:#2FBF8F; --warn:#E0A93B; --err:#E05D5D;
|
|
--hbg:rgba(15,18,24,.9);
|
|
}
|
|
body[data-theme="hartie"]{ --bg:#f3efe6; --card:#fffdf7; --card2:#f3efe6; --ink:#1e1a13; --muted:#6a6052; --line:#e2dccc; --line2:#ece6d9; --accent:#1F5FBF; --ok:#1c7d5d; --warn:#b45309; --err:#bd463c; --hbg:rgba(255,253,247,.92); }
|
|
body[data-theme="cobalt"]{ --bg:#080d1c; --card:#111a33; --card2:#0b1226; --ink:#e9ecfb; --muted:#8a93b8; --line:#1d2747; --line2:#161f3a; --accent:#8aa0ff; --ok:#2fd0a6; --err:#f06a7a; --hbg:rgba(8,13,28,.92); }
|
|
body[data-theme="cupru"]{ --bg:#15110b; --card:#211a12; --card2:#15110b; --ink:#efe6d6; --muted:#a89a85; --line:#36291c; --line2:#281e14; --accent:#dfa45c; --ok:#67b98c; --err:#e2685a; --hbg:rgba(21,17,11,.92); }
|
|
*{box-sizing:border-box;}
|
|
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-ui); font-size:var(--fs-base); line-height:1.55; -webkit-font-smoothing:antialiased;}
|
|
.mono{font-family:var(--font-mono);} .muted{color:var(--muted);}
|
|
|
|
/* HEADER branded (numele service e DOAR aici, nu se mai duplica jos) */
|
|
header{position:sticky; top:0; z-index:5; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px; height:64px; padding:0 22px; background:var(--hbg); backdrop-filter:blur(8px); border-bottom:1px solid var(--line);}
|
|
.logo-fallback{display:inline-flex; align-items:center; gap:6px; font-weight:800; font-size:var(--fs-lg);}
|
|
.logo-fallback .rom{color:#D1342F;} .logo-fallback .fast{color:var(--accent);}
|
|
.h-center{text-align:center; line-height:1.15;}
|
|
.h-title{font-size:var(--fs-md); font-weight:700;} .h-title .accent{color:var(--accent);}
|
|
.h-sub{font-size:var(--fs-xs); color:var(--muted); margin-top:2px;} .h-sub .svc{color:var(--ink); font-weight:600;}
|
|
.env{display:inline-block; margin-left:8px; padding:1px 7px; border-radius:99px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--warn); background:color-mix(in srgb,var(--warn) 16%,transparent);}
|
|
/* badge tip cont (Gratuit/Standard/Pro/Premium) */
|
|
.tier{display:inline-block; margin-left:6px; padding:1px 8px; border-radius:99px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--accent); background:color-mix(in srgb,var(--accent) 16%,transparent);}
|
|
.h-right{display:flex; align-items:center; justify-content:flex-end; gap:10px;}
|
|
/* dot RAR online compact in antet (inlocuieste banda) — datetime pe title/hover */
|
|
.rar-chip{display:flex; align-items:center; gap:8px; height:38px; padding:0 13px; border-radius:99px; border:1px solid color-mix(in srgb,var(--ok) 35%,var(--line)); background:color-mix(in srgb,var(--ok) 10%,transparent); color:var(--ok); font-size:var(--fs-sm); font-weight:600; cursor:default;}
|
|
.rar-chip.blocat{border-color:color-mix(in srgb,var(--err) 45%,var(--line)); background:color-mix(in srgb,var(--err) 12%,transparent); color:var(--err);}
|
|
.rar-chip .dot{width:9px; height:9px; border-radius:99px; background:currentColor; box-shadow:0 0 0 4px color-mix(in srgb,currentColor 22%,transparent);}
|
|
.tema-btn{display:flex; align-items:center; gap:8px; height:38px; padding:0 13px; border-radius:8px; background:transparent; border:1px solid var(--line); color:var(--muted); font-family:var(--font-ui); font-size:var(--fs-sm); cursor:pointer;}
|
|
.tema-btn:hover{border-color:var(--accent); color:var(--ink);}
|
|
.ver{font-size:var(--fs-xs); color:var(--muted);}
|
|
.icon-btn{width:38px; height:38px; border-radius:8px; border:1px solid var(--line); background:transparent; color:var(--ink); font-size:18px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; position:relative;}
|
|
/* meniu burger deschis (mockup) — contine si starea RAR */
|
|
.menu{position:absolute; top:46px; right:0; width:230px; background:var(--card); border:1px solid var(--line); border-radius:10px; box-shadow:0 18px 40px -16px rgba(0,0,0,.6); padding:6px; z-index:10; text-align:left;}
|
|
.menu-status{display:flex; align-items:center; gap:8px; padding:9px 10px; font-size:var(--fs-sm); font-weight:600; color:var(--ok);}
|
|
.menu-status small{font-weight:400; color:var(--muted); font-family:var(--font-mono); font-size:11px;}
|
|
.menu-plan{display:flex; align-items:center; justify-content:space-between; padding:8px 10px 4px; font-size:var(--fs-sm); color:var(--muted);}
|
|
.menu-plan b{color:var(--accent);}
|
|
.menu-plan .trial{font-size:11px; color:var(--muted);}
|
|
.menu a{display:flex; align-items:center; justify-content:space-between; padding:9px 10px; border-radius:7px; font-size:var(--fs-sm); color:var(--ink); text-decoration:none;}
|
|
.menu a:hover{background:var(--card2);}
|
|
.menu hr{border:none; border-top:1px solid var(--line); margin:5px 4px;}
|
|
.menu .badge{display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px; border-radius:99px; background:var(--err); color:#fff; font-size:11px; font-weight:700;}
|
|
|
|
.wrap{max-width:1000px; margin:0 auto; padding:16px 22px 70px; display:flex; flex-direction:column; gap:14px;}
|
|
|
|
/* Banda de stare — APARE DOAR cand e blocat (zero-silent-failures) */
|
|
.strip{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; border-radius:10px;
|
|
background:color-mix(in srgb, var(--ok) 13%, transparent); border:1px solid color-mix(in srgb, var(--ok) 30%, transparent);}
|
|
.strip.blocat{background:color-mix(in srgb, var(--err) 13%, transparent); border-color:color-mix(in srgb, var(--err) 35%, transparent); color:var(--err);}
|
|
.strip-left{display:flex; align-items:center; gap:10px; font-weight:700; font-size:var(--fs-md);}
|
|
.strip .dot{width:10px; height:10px; border-radius:99px; background:var(--ok); flex-shrink:0; box-shadow:0 0 0 4px color-mix(in srgb, var(--ok) 22%, transparent);}
|
|
.strip.blocat .dot{background:var(--err); box-shadow:0 0 0 4px color-mix(in srgb, var(--err) 22%, transparent);}
|
|
.strip-right{font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--muted);}
|
|
|
|
/* 2. CARDURI contor — standalone, fara titlu de sectiune */
|
|
.contoare{display:grid; grid-template-columns:repeat(5,1fr); gap:10px;}
|
|
.contor-card{background:var(--card2); border:1px solid var(--line); border-radius:10px; padding:14px 16px;}
|
|
.contor-card.primar{border-color:color-mix(in srgb,var(--ok) 40%,var(--line));}
|
|
.contor-cifra{font-size:var(--fs-2xl); font-weight:700; line-height:1;}
|
|
.contor-label{font-size:var(--fs-sm); color:var(--muted); margin-top:7px;}
|
|
.s-ok{color:var(--ok);} .s-acc{color:var(--accent);} .s-err{color:var(--err);}
|
|
|
|
/* 3. IMPORT colapsat */
|
|
.import-collapse{border:1px solid var(--line); border-radius:10px; background:var(--card); overflow:hidden;}
|
|
.import-collapse>summary{list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 16px; font-size:var(--fs-sm); font-weight:600; color:var(--ink);}
|
|
.import-collapse>summary::-webkit-details-marker{display:none;}
|
|
.import-collapse>summary .ic-l{display:flex; align-items:center; gap:10px;}
|
|
.import-collapse .plus{display:inline-flex; width:24px; height:24px; align-items:center; justify-content:center; border-radius:7px; background:color-mix(in srgb,var(--accent) 16%,transparent); color:var(--accent); font-size:17px; line-height:1;}
|
|
.import-collapse>summary .ic-r{font-size:var(--fs-xs); color:var(--muted);}
|
|
.import-collapse[open]>summary{border-bottom:1px solid var(--line);}
|
|
.import-body{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:16px; border:1px dashed color-mix(in srgb,var(--accent) 45%,var(--line)); border-radius:10px; margin:12px;}
|
|
.import-body .u-tx{font-size:var(--fs-md); font-weight:600;}
|
|
.import-body .u-sub{font-size:var(--fs-sm); color:var(--muted); margin-top:2px;}
|
|
.btn-primary{font-family:var(--font-ui); font-size:var(--fs-md); font-weight:600; height:42px; padding:0 20px; background:var(--accent); color:#fff; border:none; border-radius:8px; cursor:pointer;}
|
|
|
|
/* 4. NAV tab-uri Trimiteri / Mapari */
|
|
.subnav{display:flex; gap:6px; border-bottom:1px solid var(--line);}
|
|
.subnav a{font-size:var(--fs-sm); font-weight:600; padding:9px 16px; border-radius:8px 8px 0 0; color:var(--muted); text-decoration:none; border:1px solid transparent; border-bottom:none; margin-bottom:-1px;}
|
|
.subnav a.active{color:var(--ink); background:var(--card); border-color:var(--line); border-bottom:1px solid var(--card);}
|
|
.subnav .badge{display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; margin-left:6px; padding:0 5px; border-radius:99px; background:var(--err); color:#fff; font-size:11px; font-weight:700;}
|
|
|
|
/* 5. LISTA (fara titlu/subtitlu de sectiune) */
|
|
.panel{background:var(--card); border:1px solid var(--line); border-radius:0 12px 12px 12px; overflow:hidden;}
|
|
.filtre{display:flex; gap:8px; padding:12px 16px; flex-wrap:wrap; border-bottom:1px solid var(--line2);}
|
|
.pillf{font-size:var(--fs-sm); padding:6px 13px; border-radius:99px; border:1px solid var(--line); background:transparent; color:var(--muted); cursor:pointer;}
|
|
.pillf.on{background:color-mix(in srgb,var(--accent) 16%,transparent); border-color:transparent; color:var(--accent); font-weight:600;}
|
|
.rand{display:flex; align-items:center; justify-content:space-between; padding:13px 16px; border-bottom:1px solid var(--line2); cursor:pointer;}
|
|
.rand:hover{background:color-mix(in srgb,var(--accent) 6%,transparent);}
|
|
.rand:last-child{border-bottom:none;}
|
|
.slim-vin{font-family:var(--font-mono); font-size:var(--fs-md); font-weight:500;}
|
|
.slim-meta{font-size:var(--fs-sm); color:var(--muted); margin-top:3px;}
|
|
.pill{display:inline-flex; align-items:center; gap:7px; padding:5px 12px; border-radius:99px; font-size:var(--fs-sm); font-weight:500;}
|
|
.pill .pdot{width:7px; height:7px; border-radius:99px;}
|
|
.pill.sent{background:color-mix(in srgb,var(--ok) 14%,transparent); color:var(--ok);} .pill.sent .pdot{background:var(--ok);}
|
|
.pill.coada{background:color-mix(in srgb,var(--accent) 16%,transparent); color:var(--accent);} .pill.coada .pdot{background:var(--accent);}
|
|
.pill.err{background:color-mix(in srgb,var(--err) 14%,transparent); color:var(--err);} .pill.err .pdot{background:var(--err);}
|
|
|
|
/* MODAL editare trimitere nefinalizata (la click pe rand) */
|
|
.editmodal{max-width:560px; background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden;}
|
|
.editmodal .mhead{display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--line);}
|
|
.editmodal .mhead .t{font-size:var(--fs-md); font-weight:700;}
|
|
.editmodal .mbody{padding:18px;}
|
|
.field{margin-bottom:14px;}
|
|
.field label{display:block; font-size:var(--fs-sm); color:var(--muted); margin-bottom:6px;}
|
|
.field input, .field textarea, .field select{width:100%; font-family:var(--font-ui); font-size:var(--fs-md); color:var(--ink); background:var(--card2); border:1px solid var(--line); border-radius:8px; padding:9px 12px; min-height:40px;}
|
|
.field input.mono{font-family:var(--font-mono);}
|
|
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
|
|
.op-row{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 0; border-bottom:1px solid var(--line2);}
|
|
.op-name{font-size:var(--fs-md); font-weight:600;} .op-name small{font-weight:400; color:var(--muted); font-size:var(--fs-sm);}
|
|
.chip{display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:var(--fs-sm); background:color-mix(in srgb,var(--accent) 18%,transparent); color:var(--accent); padding:5px 10px; border-radius:7px;}
|
|
.chip button{background:none; border:none; color:inherit; cursor:pointer; font-size:var(--fs-md);}
|
|
.addcode{font-size:var(--fs-sm); border:1px dashed color-mix(in srgb,var(--accent) 55%,var(--line)); background:transparent; color:var(--accent); border-radius:7px; padding:6px 12px; cursor:pointer;}
|
|
.btn-ghost{font-size:var(--fs-md); height:42px; padding:0 18px; background:transparent; color:var(--ink); border:1px solid var(--line); border-radius:8px; cursor:pointer;}
|
|
.actrow{display:flex; gap:10px; margin-top:16px;}
|
|
</style>
|
|
</head>
|
|
<body data-theme="grafit">
|
|
|
|
<header>
|
|
<div><span class="logo-fallback"><span class="rom">ROM</span><span class="fast">FAST</span></span></div>
|
|
<div class="h-center">
|
|
<div class="h-title">ROMFAST <span class="accent">AUTOPASS</span><span class="env">test</span><span class="tier">Pro</span></div>
|
|
<div class="h-sub">Service auto: <span class="svc">Service Auto Vâlcea SRL</span></div>
|
|
</div>
|
|
<div class="h-right">
|
|
<div class="rar-chip" title="Ultima autentificare RAR: 28.06.2026 09:41"><span class="dot"></span> RAR online</div>
|
|
<button class="tema-btn" onclick="cycle()">
|
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><circle cx="12" cy="12" r="9"/><path d="M12 3a9 9 0 0 0 0 18z" fill="currentColor" stroke="none"/></svg>
|
|
<span id="t-label">Grafit</span>
|
|
</button>
|
|
<span class="ver">v5.16</span>
|
|
<button class="icon-btn" title="Meniu cont">☰
|
|
<div class="menu">
|
|
<div class="menu-status"><span class="rar-chip" style="height:auto;padding:0;border:none;background:none;"><span class="dot"></span></span> RAR online <small>· 09:41</small></div>
|
|
<div class="menu-plan">Plan: <b>Pro</b> <span class="trial">trial · 18 zile rămase</span></div>
|
|
<hr>
|
|
<a href="#">Trimiteri</a>
|
|
<a href="#">Mapări <span class="badge">2</span></a>
|
|
<hr>
|
|
<a href="#">Nomenclator</a>
|
|
<hr>
|
|
<a href="#">Cont</a>
|
|
<a href="#">Integrare</a>
|
|
<a href="#">Jurnal</a>
|
|
<hr>
|
|
<a href="#">Ieși din cont</a>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="wrap">
|
|
|
|
<!-- CARDURI (fara titlu de sectiune; RAR online e acum dot in antet) -->
|
|
<div class="contoare">
|
|
<div class="contor-card primar"><div class="contor-cifra s-ok">847</div><div class="contor-label">Total trimise</div></div>
|
|
<div class="contor-card"><div class="contor-cifra s-ok">124</div><div class="contor-label">Luna asta</div></div>
|
|
<div class="contor-card"><div class="contor-cifra s-ok">9</div><div class="contor-label">Azi</div></div>
|
|
<div class="contor-card"><div class="contor-cifra s-acc">12</div><div class="contor-label">În coadă</div></div>
|
|
<div class="contor-card"><div class="contor-cifra s-err">2</div><div class="contor-label">De corectat</div></div>
|
|
</div>
|
|
|
|
<!-- 3. IMPORT colapsat -->
|
|
<details class="import-collapse">
|
|
<summary>
|
|
<span class="ic-l"><span class="plus">+</span> Importă fișier (XLSX / CSV)</span>
|
|
<span class="ic-r">trage-l aici sau apasă pentru a deschide ▾</span>
|
|
</summary>
|
|
<div class="import-body">
|
|
<div><div class="u-tx">Încarcă un fișier sau trage-l aici</div><div class="u-sub">Mapezi coloanele o singură dată — apoi trimitem la RAR automat.</div></div>
|
|
<button class="btn-primary">Alege fișier</button>
|
|
</div>
|
|
</details>
|
|
|
|
<!-- 4 + 5. NAV + LISTA -->
|
|
<div>
|
|
<div class="subnav">
|
|
<a href="#" class="active">Trimiteri</a>
|
|
<a href="#">Mapări <span class="badge">2</span></a>
|
|
</div>
|
|
<div class="panel">
|
|
<div class="filtre">
|
|
<button class="pillf on">Toate</button>
|
|
<button class="pillf">În coadă</button>
|
|
<button class="pillf">Trimise</button>
|
|
<button class="pillf">De corectat</button>
|
|
</div>
|
|
<div class="rand"><div><div class="slim-vin">WBA8E9...K7F2</div><div class="slim-meta">Inspecție tehnică · 09:42</div></div><span class="pill sent"><span class="pdot"></span>Trimis</span></div>
|
|
<div class="rand"><div><div class="slim-vin">WVWZZZ...3M1</div><div class="slim-meta">Revizie periodică · 09:38</div></div><span class="pill coada"><span class="pdot"></span>În coadă</span></div>
|
|
<div class="rand"><div><div class="slim-vin">VF1RFB...A88</div><div class="slim-meta">Sistem frânare · 09:31</div></div><span class="pill err"><span class="pdot"></span>De corectat</span></div>
|
|
<div class="rand"><div><div class="slim-vin">ZAR937...C04</div><div class="slim-meta">Schimb ulei · 09:24</div></div><span class="pill sent"><span class="pdot"></span>Trimis</span></div>
|
|
<div class="rand"><div><div class="slim-vin">JTDBR...9920</div><div class="slim-meta">Inspecție tehnică · 09:18</div></div><span class="pill sent"><span class="pdot"></span>Trimis</span></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- DOAR cand e BLOCAT: banda rosie reapare (zero-silent-failures) -->
|
|
<div style="margin-top:18px; font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.08em; color:var(--err); font-weight:700;">Stare BLOCAT — banda apare DOAR atunci (worker oprit / RAR inaccesibil)</div>
|
|
<div class="strip blocat">
|
|
<span class="strip-left"><span class="dot"></span> Blocat: RAR inaccesibil — declarațiile NU pleacă</span>
|
|
<span class="strip-right">Ultima autentificare RAR: 28.06.2026 09:41</span>
|
|
</div>
|
|
|
|
<!-- MODAL editare: apare la click pe o trimitere nefinalizata (needs_data / needs_mapping / error) -->
|
|
<div style="margin-top:22px; font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.08em; color:var(--accent); font-weight:700;">Modal editare — la click pe o trimitere nefinalizată (needs_data / needs_mapping)</div>
|
|
<div class="editmodal" style="margin-top:8px;">
|
|
<div class="mhead"><span class="t">Corectează trimiterea</span><button class="icon-btn" title="Închide">×</button></div>
|
|
<div class="mbody">
|
|
<div class="field"><label>VIN (serie șasiu)</label><input class="mono" value="VF1RFB00A88142073"></div>
|
|
<div class="grid2">
|
|
<div class="field"><label>Data prestației</label><input class="mono" value="2026-06-22"></div>
|
|
<div class="field"><label>Număr înmatriculare</label><input class="mono" value="CT88NOE"></div>
|
|
</div>
|
|
<div class="field"><label>Observații (operațiile efectuate)</label><textarea rows="2">Schimbare plăcuțe frână față</textarea></div>
|
|
<div class="field">
|
|
<label>Prestații — cod RAR pe fiecare operație</label>
|
|
<div class="op-row"><span class="op-name">REVIZIE PERIODICĂ <small>— la 15.000 km</small></span><span class="chip">REV2 <button>×</button></span></div>
|
|
<div class="op-row" style="border-left:2px solid var(--warn); padding-left:10px;"><span class="op-name">SCHIMB PLĂCUȚE FRÂNĂ <small style="color:var(--warn)">— lipsă cod</small></span><select><option>— alege cod RAR —</option><option>FRN1 — Sistem de frânare</option><option>REV2 — Revizie periodică</option></select></div>
|
|
<div style="margin-top:10px;"><button class="addcode">+ Adaugă altă operație / cod RAR</button></div>
|
|
</div>
|
|
<div class="actrow"><button class="btn-primary">Salvează și retrimite</button><button class="btn-ghost">Renunță</button></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
var THEMES=[['grafit','Grafit'],['cobalt','Cobalt'],['cupru','Cupru'],['hartie','Hârtie']];
|
|
var i=0;
|
|
function cycle(){ i=(i+1)%THEMES.length; document.body.setAttribute('data-theme',THEMES[i][0]); document.getElementById('t-label').textContent=THEMES[i][1]; }
|
|
</script>
|
|
</body>
|
|
</html>
|