mirror of
https://github.com/arsvendg/Stirling-PDF.git
synced 2026-07-14 10:34:06 +02:00
185 lines
8.3 KiB
HTML
185 lines
8.3 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Pay Stub</title>
|
||
<style>
|
||
:root {
|
||
--theme-primary: #1e3a5f;
|
||
--theme-accent: #2563eb;
|
||
--theme-bg: #ffffff;
|
||
--theme-surface: #f8fafc;
|
||
--theme-border: #e2e8f0;
|
||
--theme-text: #1a1a1a;
|
||
--theme-text-muted: #6b7280;
|
||
--theme-heading: #111827;
|
||
--theme-font: 'Helvetica Neue', Arial, sans-serif;
|
||
}
|
||
|
||
@page { size: A4; margin: 20mm; }
|
||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||
body { font-family: var(--theme-font); font-size: 10pt; color: var(--theme-text); background: var(--theme-bg); line-height: 1.4; }
|
||
.document { max-width: 170mm; margin: 0 auto; }
|
||
.top-bar { height: 3pt; background: var(--theme-accent); margin-bottom: 10pt; }
|
||
.doc-header { display: flex; align-items: center; gap: 12pt; margin-bottom: 8pt; }
|
||
.doc-header-text { flex: 1; text-align: center; }
|
||
.doc-title { font-size: 16pt; font-weight: 700; color: var(--theme-primary); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 3pt; }
|
||
.doc-subtitle { font-size: 9pt; color: var(--theme-text-muted); }
|
||
hr { border: none; border-top: 0.5pt solid var(--theme-border); margin: 6pt 0; }
|
||
.employee-card { background: var(--theme-surface); border: 0.5pt solid var(--theme-border); border-radius: 3pt; padding: 8pt 10pt; margin-bottom: 10pt; }
|
||
.employee-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4pt 20pt; }
|
||
.info-row { display: flex; gap: 4pt; }
|
||
.info-label { font-weight: 600; color: var(--theme-text-muted); font-size: 8pt; min-width: 76pt; flex-shrink: 0; }
|
||
.info-value { font-size: 8.5pt; color: var(--theme-text); }
|
||
.section-heading { font-size: 9.5pt; font-weight: 700; color: var(--theme-primary); border-bottom: 1pt solid var(--theme-accent); padding-bottom: 2pt; margin: 0 0 5pt; text-transform: uppercase; letter-spacing: 0.5px; }
|
||
.pay-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14pt; margin-bottom: 0; }
|
||
.pay-col-inner { margin-bottom: 10pt; }
|
||
.pay-table { width: 100%; border-collapse: collapse; font-size: 8pt; }
|
||
.pay-table thead tr { background: var(--theme-primary); color: #fff; }
|
||
.pay-table thead th { padding: 4pt 6pt; text-align: left; font-weight: 600; font-size: 7.5pt; text-transform: uppercase; letter-spacing: 0.3px; }
|
||
.pay-table thead th.num { text-align: right; }
|
||
.pay-table tbody tr:nth-child(even) { background: var(--theme-surface); }
|
||
.pay-table tbody td { padding: 3pt 6pt; border-bottom: 0.3pt solid var(--theme-border); vertical-align: top; }
|
||
.pay-table tbody td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
|
||
.pay-table tfoot tr { border-top: 1pt solid var(--theme-border); background: var(--theme-surface); }
|
||
.pay-table tfoot td { padding: 4pt 6pt; font-weight: 700; font-size: 8.5pt; color: var(--theme-heading); }
|
||
.pay-table tfoot td.num { text-align: right; font-variant-numeric: tabular-nums; }
|
||
.net-pay-box { display: flex; justify-content: space-between; align-items: center; background: var(--theme-primary); color: #fff; padding: 9pt 14pt; margin: 0 0 10pt; }
|
||
.net-pay-label { font-size: 11pt; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
|
||
.net-pay-amount { font-size: 20pt; font-weight: 700; font-variant-numeric: tabular-nums; }
|
||
.ytd-table { width: 100%; border-collapse: collapse; font-size: 8.5pt; margin-bottom: 8pt; }
|
||
.ytd-table thead tr { background: var(--theme-primary); color: #fff; }
|
||
.ytd-table thead th { padding: 4pt 8pt; text-align: right; font-weight: 600; font-size: 8pt; text-transform: uppercase; letter-spacing: 0.3px; }
|
||
.ytd-table thead th:first-child { text-align: left; }
|
||
.ytd-table tbody td { padding: 4pt 8pt; text-align: right; border-bottom: 0.3pt solid var(--theme-border); font-variant-numeric: tabular-nums; }
|
||
.ytd-table tbody td:first-child { text-align: left; font-weight: 600; color: var(--theme-text-muted); }
|
||
.payment-info { font-size: 8.5pt; color: var(--theme-text); line-height: 1.6; }
|
||
@media print { body { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="document">
|
||
<div class="top-bar"></div>
|
||
<div class="doc-header">
|
||
<div class="doc-header-text">
|
||
<div class="doc-title">Pay Stub</div>
|
||
<div class="doc-subtitle">Meridian Technologies Ltd</div>
|
||
</div>
|
||
</div>
|
||
<hr>
|
||
<div class="employee-card">
|
||
<div class="employee-card-grid">
|
||
<div class="info-row"><span class="info-label">Employee Name:</span><span class="info-value">Sarah J. Mitchell</span></div>
|
||
<div class="info-row"><span class="info-label">Pay Period:</span><span class="info-value">1 February 2026 – 28 February 2026</span></div>
|
||
<div class="info-row"><span class="info-label">Employee ID:</span><span class="info-value">EMP-0142</span></div>
|
||
<div class="info-row"><span class="info-label">Pay Date:</span><span class="info-value">28 February 2026</span></div>
|
||
<div class="info-row"><span class="info-label">Department:</span><span class="info-value">Engineering</span></div>
|
||
<div class="info-row"><span class="info-label">Position:</span><span class="info-value">Senior Software Engineer</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="pay-cols">
|
||
<div class="pay-col-inner">
|
||
<div class="section-heading">Earnings</div>
|
||
<table class="pay-table">
|
||
<thead>
|
||
<tr>
|
||
<th>Description</th>
|
||
<th class="num">Hours</th>
|
||
<th class="num">Rate</th>
|
||
<th class="num">Amount</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>Basic Salary</td>
|
||
<td class="num">160</td>
|
||
<td class="num">£30.21</td>
|
||
<td class="num">£4,833.33</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Overtime</td>
|
||
<td class="num">8</td>
|
||
<td class="num">£45.31</td>
|
||
<td class="num">£362.50</td>
|
||
</tr>
|
||
<tr>
|
||
<td>On-Call Allowance</td>
|
||
<td class="num">—</td>
|
||
<td class="num">—</td>
|
||
<td class="num">£150.00</td>
|
||
</tr>
|
||
</tbody>
|
||
<tfoot>
|
||
<tr>
|
||
<td colspan="3">Gross Pay</td>
|
||
<td class="num">£5,345.83</td>
|
||
</tr>
|
||
</tfoot>
|
||
</table>
|
||
</div>
|
||
<div class="pay-col-inner">
|
||
<div class="section-heading">Deductions</div>
|
||
<table class="pay-table">
|
||
<thead>
|
||
<tr>
|
||
<th>Description</th>
|
||
<th class="num">Amount</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>Income Tax (PAYE)</td>
|
||
<td class="num">£1,156.60</td>
|
||
</tr>
|
||
<tr>
|
||
<td>National Insurance</td>
|
||
<td class="num">£455.62</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Pension (Employee 5%)</td>
|
||
<td class="num">£267.29</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Health Insurance</td>
|
||
<td class="num">£85.00</td>
|
||
</tr>
|
||
</tbody>
|
||
<tfoot>
|
||
<tr>
|
||
<td>Total Deductions</td>
|
||
<td class="num">£1,964.51</td>
|
||
</tr>
|
||
</tfoot>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
<div class="net-pay-box">
|
||
<div class="net-pay-label">Net Pay</div>
|
||
<div class="net-pay-amount">£3,381.32</div>
|
||
</div>
|
||
<div class="section-heading" style="margin-top:10pt">Year-to-Date Summary</div>
|
||
<table class="ytd-table">
|
||
<thead>
|
||
<tr>
|
||
<th></th>
|
||
<th>Gross Pay</th>
|
||
<th>Total Deductions</th>
|
||
<th>Net Pay</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>YTD</td>
|
||
<td>£10,524.16</td>
|
||
<td>£3,871.42</td>
|
||
<td>£6,652.74</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<div class="section-heading" style="margin-top:10pt">Payment Details</div>
|
||
<div class="payment-info">Payment Method: BACS Direct Credit<br>Bank: Lloyds Bank plc | Sort Code: 30-00-00 | Account: ****4821</div>
|
||
</div>
|
||
</body>
|
||
</html>
|