fac7754d7a
Updates design system documentation with comprehensive component overview Enhances UI layout across multiple pages with consistent styling and new components Adds support for charts, pagination, and responsive design elements Improves overall system documentation and visual consistency
533 lines
14 KiB
HTML
533 lines
14 KiB
HTML
<!doctype html>
|
||
<html lang="da">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>Lønspecifikation – Januar 2026</title>
|
||
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||
|
||
<style>
|
||
/* ===== Print setup ===== */
|
||
@page { size: A4; margin: 14mm; }
|
||
@media print {
|
||
.no-print { display: none !important; }
|
||
.page-break { break-after: page; page-break-after: always; }
|
||
a { color: inherit; text-decoration: none; }
|
||
}
|
||
|
||
/* ===== Base ===== */
|
||
:root {
|
||
--ink: #0f172a;
|
||
--muted: #475569;
|
||
--line: #e2e8f0;
|
||
--soft: #f8fafc;
|
||
--accent: #0ea5e9;
|
||
--accent-2: #22c55e;
|
||
--font-mono: 'JetBrains Mono', monospace;
|
||
}
|
||
* { box-sizing: border-box; }
|
||
body {
|
||
margin: 0;
|
||
font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
|
||
color: var(--ink);
|
||
background: #fff;
|
||
}
|
||
.sheet {
|
||
max-width: 210mm;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
/* ===== Header ===== */
|
||
.hdr {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
gap: 16px;
|
||
padding: 14px 0 10px;
|
||
border-bottom: 2px solid var(--line);
|
||
margin-bottom: 12px;
|
||
}
|
||
.brand {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
}
|
||
.title {
|
||
font-size: 20px;
|
||
font-weight: 800;
|
||
letter-spacing: .2px;
|
||
margin: 0;
|
||
line-height: 1.1;
|
||
}
|
||
.subtitle {
|
||
margin: 0;
|
||
color: var(--muted);
|
||
font-size: 12px;
|
||
}
|
||
.meta {
|
||
text-align: right;
|
||
min-width: 260px;
|
||
}
|
||
.meta .pill {
|
||
display: inline-block;
|
||
font-size: 12px;
|
||
padding: 6px 10px;
|
||
border: 1px solid var(--line);
|
||
border-radius: 999px;
|
||
background: var(--soft);
|
||
margin-bottom: 8px;
|
||
}
|
||
.meta .kv {
|
||
display: grid;
|
||
grid-template-columns: auto auto;
|
||
gap: 4px 12px;
|
||
justify-content: end;
|
||
font-size: 12px;
|
||
color: var(--muted);
|
||
}
|
||
.meta .kv b { color: var(--ink); font-weight: 600; }
|
||
|
||
/* ===== Blocks ===== */
|
||
.card {
|
||
border: 1px solid var(--line);
|
||
border-radius: 14px;
|
||
overflow: hidden;
|
||
background: #fff;
|
||
margin-bottom: 12px;
|
||
}
|
||
.card .hd {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 10px 12px;
|
||
background: linear-gradient(0deg, var(--soft), #fff);
|
||
border-bottom: 1px solid var(--line);
|
||
}
|
||
.card .hd h2 {
|
||
font-size: 13px;
|
||
margin: 0;
|
||
letter-spacing: .2px;
|
||
text-transform: uppercase;
|
||
color: var(--muted);
|
||
}
|
||
.card .bd { padding: 12px; }
|
||
|
||
.grid {
|
||
display: grid;
|
||
grid-template-columns: 1.2fr .8fr;
|
||
gap: 12px;
|
||
}
|
||
|
||
/* ===== Total ===== */
|
||
.total {
|
||
display: flex;
|
||
align-items: baseline;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
padding: 14px 14px;
|
||
border-radius: 14px;
|
||
border: 1px solid var(--line);
|
||
background: var(--soft);
|
||
margin-bottom: 12px;
|
||
}
|
||
.total .label {
|
||
color: var(--muted);
|
||
font-size: 12px;
|
||
text-transform: uppercase;
|
||
letter-spacing: .25px;
|
||
margin-bottom: 6px;
|
||
}
|
||
.total .big {
|
||
font-size: 28px;
|
||
font-weight: 900;
|
||
font-family: var(--font-mono);
|
||
margin: 0;
|
||
line-height: 1.05;
|
||
}
|
||
.total .big small {
|
||
font-size: 14px;
|
||
font-weight: 700;
|
||
color: var(--muted);
|
||
}
|
||
.badge {
|
||
display: inline-block;
|
||
font-size: 11px;
|
||
padding: 4px 8px;
|
||
border-radius: 999px;
|
||
border: 1px solid var(--line);
|
||
background: var(--soft);
|
||
color: var(--muted);
|
||
}
|
||
|
||
/* ===== Tables ===== */
|
||
table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
font-size: 12px;
|
||
}
|
||
th, td {
|
||
padding: 8px 8px;
|
||
border-bottom: 1px solid var(--line);
|
||
vertical-align: top;
|
||
}
|
||
th {
|
||
text-align: left;
|
||
color: var(--muted);
|
||
font-weight: 700;
|
||
font-size: 11px;
|
||
text-transform: uppercase;
|
||
letter-spacing: .2px;
|
||
background: var(--soft);
|
||
}
|
||
td.num, th.num { text-align: right; }
|
||
td.num { font-family: var(--font-mono); }
|
||
tr:last-child td { border-bottom: none; }
|
||
|
||
.note {
|
||
margin: 8px 0 0;
|
||
color: var(--muted);
|
||
font-size: 11px;
|
||
line-height: 1.35;
|
||
}
|
||
|
||
/* ===== Footer ===== */
|
||
.ftr {
|
||
margin-top: 10px;
|
||
padding-top: 10px;
|
||
border-top: 1px solid var(--line);
|
||
display: flex;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
font-size: 10.5px;
|
||
color: var(--muted);
|
||
}
|
||
|
||
/* ===== Ensure content doesn't get split awkwardly ===== */
|
||
.avoid-break { break-inside: avoid; page-break-inside: avoid; }
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<!-- ===================== PAGE 1: OVERBLIK ===================== -->
|
||
<div class="sheet">
|
||
<div class="hdr">
|
||
<div class="brand">
|
||
<p class="title">Lønspecifikation</p>
|
||
<p class="subtitle">Periode: <b>Januar 2026</b></p>
|
||
</div>
|
||
|
||
<div class="meta">
|
||
<div class="pill">Medarbejdernr.: <b>EMP-001</b></div>
|
||
<div class="kv">
|
||
<span>Medarbejder:</span><b>Emma Larsen</b>
|
||
<span>Afdeling:</span><b>Frisør</b>
|
||
<span>Ansættelse:</span><b>Fuldtid (37 t/uge)</b>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<section class="total avoid-break">
|
||
<div>
|
||
<div class="label">Bruttoløn (Januar 2026)</div>
|
||
<p class="big">34.063,50 <small>kr</small></p>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="grid">
|
||
<div class="card avoid-break">
|
||
<div class="hd">
|
||
<h2>Samlet lønopgørelse</h2>
|
||
</div>
|
||
<div class="bd">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Løndel</th>
|
||
<th class="num">Beløb</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>Grundløn inkl. overarbejde</td>
|
||
<td class="num">29.322,50 kr</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Provision i alt</td>
|
||
<td class="num">3.685,00 kr</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Tillæg i alt</td>
|
||
<td class="num">1.056,00 kr</td>
|
||
</tr>
|
||
<tr>
|
||
<td><b>Bruttoløn</b></td>
|
||
<td class="num"><b>34.063,50 kr</b></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card avoid-break">
|
||
<div class="hd">
|
||
<h2>Saldi</h2>
|
||
</div>
|
||
<div class="bd">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Type</th>
|
||
<th class="num">Optjent</th>
|
||
<th class="num">Afholdt</th>
|
||
<th class="num">Rest</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>Ferie (dage)</td>
|
||
<td class="num">18,5</td>
|
||
<td class="num">6,0</td>
|
||
<td class="num">12,5</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Afspadsering (timer)</td>
|
||
<td class="num">12,0</td>
|
||
<td class="num">4,0</td>
|
||
<td class="num">8,0</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<p class="note">Saldi er opgjort som angivet på lønspecifikationen.</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="card avoid-break">
|
||
<div class="hd">
|
||
<h2>Hurtigt resumé</h2>
|
||
</div>
|
||
<div class="bd">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Nøglepunkt</th>
|
||
<th class="num">Værdi</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>Normaltimer</td>
|
||
<td class="num">148,0 t</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Overarbejde</td>
|
||
<td class="num">7,0 t</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Provision (services + produkter)</td>
|
||
<td class="num">3.685,00 kr</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Tillæg (aften + lørdag + søndag)</td>
|
||
<td class="num">1.056,00 kr</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
|
||
<div class="ftr">
|
||
<div>Overblik</div>
|
||
<div style="text-align:right">Lønspecifikation · Januar 2026</div>
|
||
</div>
|
||
|
||
<div class="page-break"></div>
|
||
|
||
<!-- ===================== PAGE 2: DETALJER ===================== -->
|
||
<section class="card">
|
||
<div class="hd">
|
||
<h2>Arbejdstid pr. uge</h2>
|
||
</div>
|
||
<div class="bd">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Uge</th>
|
||
<th class="num">Normaltimer</th>
|
||
<th class="num">Overtid</th>
|
||
<th class="num">Beløb</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>Uge 1 (30. dec – 5. jan)</td>
|
||
<td class="num">37,0 t</td>
|
||
<td class="num">2,0 t</td>
|
||
<td class="num">7.400,00 kr</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Uge 2 (6. – 12. jan)</td>
|
||
<td class="num">37,0 t</td>
|
||
<td class="num">3,5 t</td>
|
||
<td class="num">7.816,25 kr</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Uge 3 (13. – 19. jan)</td>
|
||
<td class="num">37,0 t</td>
|
||
<td class="num">0,0 t</td>
|
||
<td class="num">6.845,00 kr</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Uge 4 (20. – 26. jan)</td>
|
||
<td class="num">37,0 t</td>
|
||
<td class="num">1,5 t</td>
|
||
<td class="num">7.261,25 kr</td>
|
||
</tr>
|
||
<tr>
|
||
<td><b>I alt</b></td>
|
||
<td class="num"><b>148,0 t</b></td>
|
||
<td class="num"><b>7,0 t</b></td>
|
||
<td class="num"><b>29.322,50 kr</b></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<p class="note">
|
||
Satser: Normal 185,00 kr/time. Overtid (50%) 277,50 kr/time.
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="card">
|
||
<div class="hd">
|
||
<h2>Provision</h2>
|
||
</div>
|
||
<div class="bd">
|
||
<p class="note" style="margin-top:0">
|
||
<b>Services:</b> 15% af omsætning over minimum (220 kr/time).<br/>
|
||
<b>Produkter:</b> 10% af salg.
|
||
</p>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Uge</th>
|
||
<th class="num">Service prov.</th>
|
||
<th class="num">Produkt prov.</th>
|
||
<th class="num">I alt</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>Uge 1</td>
|
||
<td class="num">573,00 kr</td>
|
||
<td class="num">210,00 kr</td>
|
||
<td class="num">783,00 kr</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Uge 2</td>
|
||
<td class="num">883,50 kr</td>
|
||
<td class="num">320,00 kr</td>
|
||
<td class="num">1.203,50 kr</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Uge 3</td>
|
||
<td class="num">459,00 kr</td>
|
||
<td class="num">180,00 kr</td>
|
||
<td class="num">639,00 kr</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Uge 4</td>
|
||
<td class="num">769,50 kr</td>
|
||
<td class="num">290,00 kr</td>
|
||
<td class="num">1.059,50 kr</td>
|
||
</tr>
|
||
<tr>
|
||
<td><b>I alt</b></td>
|
||
<td class="num"><b>2.685,00 kr</b></td>
|
||
<td class="num"><b>1.000,00 kr</b></td>
|
||
<td class="num"><b>3.685,00 kr</b></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="card">
|
||
<div class="hd">
|
||
<h2>Tillæg & fravær</h2>
|
||
</div>
|
||
<div class="bd">
|
||
<div class="grid" style="grid-template-columns: 1fr 1fr;">
|
||
<div>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Tillæg</th>
|
||
<th class="num">Timer</th>
|
||
<th class="num">Beløb</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>Aftentillæg (hverdage 18–21)</td>
|
||
<td class="num">12,0</td>
|
||
<td class="num">336,00 kr</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Lørdagstillæg (før kl. 14)</td>
|
||
<td class="num">16,0</td>
|
||
<td class="num">720,00 kr</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Søndagstillæg</td>
|
||
<td class="num">0,0</td>
|
||
<td class="num">0,00 kr</td>
|
||
</tr>
|
||
<tr>
|
||
<td><b>Tillæg i alt</b></td>
|
||
<td class="num"></td>
|
||
<td class="num"><b>1.056,00 kr</b></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<div>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Fravær</th>
|
||
<th class="num">Dage</th>
|
||
<th class="num">Beløb</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>Ferie med løn</td>
|
||
<td class="num">0</td>
|
||
<td class="num">0,00 kr</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Sygdom</td>
|
||
<td class="num">0</td>
|
||
<td class="num">0,00 kr</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Barns sygedag</td>
|
||
<td class="num">0</td>
|
||
<td class="num">0,00 kr</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<p class="note">Ingen fravær registreret i perioden.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<div class="ftr">
|
||
<div>Detaljer</div>
|
||
<div style="text-align:right">Lønspecifikation · Januar 2026</div>
|
||
</div>
|
||
|
||
</div>
|
||
</body>
|
||
</html>
|