Janus007/Calendar
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
Calendar/.workbench/spec-salary.html
Janus C. H. Knudsen fac7754d7a Refactors design system documentation and layout 
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
2026-01-07 22:12:25 +01:00

564 lines
16 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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 (2 sider)</title>
<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;
}
*{ 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: linear-gradient(135deg, rgba(14,165,233,.10), rgba(34,197,94,.08));
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;
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; }
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 “side 1” 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>
<div style="text-align:right">
<div><span class="badge">Side 1: Overblik</span></div>
<div style="margin-top:6px; color:var(--muted); font-size:12px; line-height:1.35">
Kort opsummering til udlevering.<br/>
Detaljer findes på side 2.
</div>
</div>
</section>
<section class="grid">
<div class="card avoid-break">
<div class="hd">
<h2>Samlet lønopgørelse</h2>
<span class="badge">Alle beløb i DKK</span>
</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>
<p class="note">
(Hvis du senere vil have skat/AM-bidrag/nettoløn med, kan det tilføjes som ekstra blok her.)
</p>
</div>
</div>
<div class="card avoid-break">
<div class="hd">
<h2>Saldi</h2>
<span class="badge">Ved periodens slut</span>
</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>
<span class="badge">Det vigtigste</span>
</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><b>Side 1/2</b> · Overblik</div>
<div style="text-align:right">Lønspecifikation · Januar 2026</div>
</div>
<div class="page-break"></div>
<!-- ===================== PAGE 2: DETALJER ===================== -->
<div class="hdr">
<div class="brand">
<p class="title">Lønspecifikation – Detaljer</p>
<p class="subtitle">Periode: <b>Januar 2026</b> · Medarbejder: <b>Emma Larsen</b></p>
</div>
<div class="meta">
<div class="pill">Bruttoløn: <b>34.063,50 kr</b></div>
<div class="kv">
<span>Ansættelse:</span><b>Fuldtid (37 t/uge)</b>
<span>Afdeling:</span><b>Frisør</b>
<span>Medarb.nr.:</span><b>EMP-001</b>
</div>
</div>
</div>
<section class="card">
<div class="hd">
<h2>Arbejdstid pr. uge</h2>
<span class="badge">Normal + overtid</span>
</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>
<span class="badge">Services & produkter</span>
</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>
<span class="badge">Opsummering</span>
</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><b>Side 2/2</b> · Detaljer</div>
<div style="text-align:right">Lønspecifikation · Januar 2026</div>
</div>
<div class="no-print" style="margin:12px 0; color:var(--muted); font-size:12px;">
Tip: I Chrome/Edge: <b>Ctrl/Cmd + P</b> → Destination: <b>Gem som PDF</b> → slå “Headers and footers” fra.
</div>
</div>
</body>
</html>
Reference in a new issue View git blame Copy permalink