mirror of
https://github.com/Stirling-Tools/Stirling-PDF.git
synced 2026-09-03 05:10:16 +03:00
298 lines
7.4 KiB
HTML
298 lines
7.4 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Invoice {{INVOICE_NUMBER}}</title>
|
||
|
|
<style>
|
||
|
|
/* ── Theme variables (replaced at generation time) ── */
|
||
|
|
{{THEME_CSS}}
|
||
|
|
|
||
|
|
/* ── Print / page setup ── */
|
||
|
|
@page {
|
||
|
|
size: A4;
|
||
|
|
margin: 20mm;
|
||
|
|
}
|
||
|
|
|
||
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||
|
|
|
||
|
|
body {
|
||
|
|
font-family: var(--theme-font, 'Helvetica Neue', Arial, sans-serif);
|
||
|
|
font-size: 10pt;
|
||
|
|
color: var(--theme-text, #1a1a1a);
|
||
|
|
background: var(--theme-bg, #ffffff);
|
||
|
|
line-height: 1.4;
|
||
|
|
}
|
||
|
|
|
||
|
|
.document {
|
||
|
|
max-width: 170mm;
|
||
|
|
margin: 0 auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ── Top accent bar ── */
|
||
|
|
{{HEADER_CSS}}
|
||
|
|
|
||
|
|
/* ── Divider ── */
|
||
|
|
hr {
|
||
|
|
border: none;
|
||
|
|
border-top: 0.5pt solid var(--theme-border, #e2e8f0);
|
||
|
|
margin: 6pt 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ── Meta info grid ── */
|
||
|
|
.meta-grid {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: 120pt auto;
|
||
|
|
row-gap: 2pt;
|
||
|
|
margin-bottom: 8pt;
|
||
|
|
}
|
||
|
|
|
||
|
|
.meta-label {
|
||
|
|
font-weight: 600;
|
||
|
|
color: var(--theme-text-muted, #6b7280);
|
||
|
|
font-size: 8.5pt;
|
||
|
|
}
|
||
|
|
|
||
|
|
.meta-value {
|
||
|
|
font-size: 8.5pt;
|
||
|
|
color: var(--theme-text, #1a1a1a);
|
||
|
|
}
|
||
|
|
|
||
|
|
.meta-value.due-date {
|
||
|
|
font-weight: 600;
|
||
|
|
color: var(--theme-accent, #2563eb);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ── Section heading ── */
|
||
|
|
.section-heading {
|
||
|
|
font-size: 10pt;
|
||
|
|
font-weight: 700;
|
||
|
|
color: var(--theme-primary, #1e3a5f);
|
||
|
|
border-bottom: 1pt solid var(--theme-accent, #2563eb);
|
||
|
|
padding-bottom: 2pt;
|
||
|
|
margin: 10pt 0 6pt;
|
||
|
|
text-transform: uppercase;
|
||
|
|
letter-spacing: 0.5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ── Party cards (matching purchase_order style) ── */
|
||
|
|
.parties-grid {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: 1fr 1fr;
|
||
|
|
gap: 10pt;
|
||
|
|
margin-bottom: 8pt;
|
||
|
|
}
|
||
|
|
|
||
|
|
.party-card {
|
||
|
|
border: 0.5pt solid var(--theme-border, #e2e8f0);
|
||
|
|
border-radius: 3pt;
|
||
|
|
padding: 6pt 8pt;
|
||
|
|
}
|
||
|
|
|
||
|
|
.party-card-header {
|
||
|
|
font-size: 8pt;
|
||
|
|
font-weight: 700;
|
||
|
|
text-transform: uppercase;
|
||
|
|
letter-spacing: 0.5px;
|
||
|
|
color: var(--theme-accent, #2563eb);
|
||
|
|
margin-bottom: 4pt;
|
||
|
|
}
|
||
|
|
|
||
|
|
.party-name {
|
||
|
|
font-size: 9.5pt;
|
||
|
|
font-weight: 600;
|
||
|
|
color: var(--theme-heading, #111827);
|
||
|
|
margin-bottom: 2pt;
|
||
|
|
}
|
||
|
|
|
||
|
|
.party-detail {
|
||
|
|
font-size: 8pt;
|
||
|
|
color: var(--theme-text-muted, #6b7280);
|
||
|
|
line-height: 1.5;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ── Line items table ── */
|
||
|
|
.items-table {
|
||
|
|
width: 100%;
|
||
|
|
border-collapse: collapse;
|
||
|
|
margin-bottom: 6pt;
|
||
|
|
font-size: 8.5pt;
|
||
|
|
}
|
||
|
|
|
||
|
|
.items-table thead tr {
|
||
|
|
background: var(--theme-primary, #1e3a5f);
|
||
|
|
color: #ffffff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.items-table thead th {
|
||
|
|
padding: 5pt 6pt;
|
||
|
|
text-align: left;
|
||
|
|
font-weight: 600;
|
||
|
|
white-space: nowrap;
|
||
|
|
}
|
||
|
|
|
||
|
|
.items-table thead th.num { text-align: right; }
|
||
|
|
|
||
|
|
.items-table tbody tr:nth-child(even) {
|
||
|
|
background: var(--theme-surface, #f8fafc);
|
||
|
|
}
|
||
|
|
|
||
|
|
.items-table tbody td {
|
||
|
|
padding: 4pt 6pt;
|
||
|
|
border-bottom: 0.3pt solid var(--theme-border, #e2e8f0);
|
||
|
|
vertical-align: top;
|
||
|
|
}
|
||
|
|
|
||
|
|
.items-table tbody td.num {
|
||
|
|
text-align: right;
|
||
|
|
white-space: nowrap;
|
||
|
|
}
|
||
|
|
|
||
|
|
.items-table .desc-col { width: 40%; }
|
||
|
|
|
||
|
|
/* ── Totals block ── */
|
||
|
|
.totals-wrapper {
|
||
|
|
display: flex;
|
||
|
|
justify-content: flex-end;
|
||
|
|
margin-bottom: 10pt;
|
||
|
|
}
|
||
|
|
|
||
|
|
.totals-table {
|
||
|
|
border-collapse: collapse;
|
||
|
|
font-size: 8.5pt;
|
||
|
|
min-width: 150pt;
|
||
|
|
}
|
||
|
|
|
||
|
|
.totals-table td { padding: 2pt 6pt; }
|
||
|
|
|
||
|
|
.totals-table td:first-child {
|
||
|
|
color: var(--theme-text-muted, #6b7280);
|
||
|
|
text-align: left;
|
||
|
|
}
|
||
|
|
|
||
|
|
.totals-table td:last-child {
|
||
|
|
text-align: right;
|
||
|
|
font-variant-numeric: tabular-nums;
|
||
|
|
}
|
||
|
|
|
||
|
|
.totals-table .total-row td {
|
||
|
|
font-weight: 700;
|
||
|
|
font-size: 10pt;
|
||
|
|
border-top: 1pt solid var(--theme-primary, #1e3a5f);
|
||
|
|
padding-top: 4pt;
|
||
|
|
color: var(--theme-heading, #111827);
|
||
|
|
}
|
||
|
|
|
||
|
|
.totals-table .balance-row td {
|
||
|
|
font-weight: 700;
|
||
|
|
font-size: 10pt;
|
||
|
|
color: var(--theme-accent, #2563eb);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ── Text sections ── */
|
||
|
|
.text-section {
|
||
|
|
font-size: 8.5pt;
|
||
|
|
color: var(--theme-text, #1a1a1a);
|
||
|
|
line-height: 1.5;
|
||
|
|
margin-bottom: 4pt;
|
||
|
|
white-space: pre-line;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ── Page-break controls ── */
|
||
|
|
thead { display: table-header-group; }
|
||
|
|
tr { break-inside: avoid; page-break-inside: avoid; }
|
||
|
|
.section-heading { break-after: avoid; page-break-after: avoid; }
|
||
|
|
.totals-wrapper { break-inside: avoid; page-break-inside: avoid; }
|
||
|
|
.totals-table { break-inside: avoid; page-break-inside: avoid; }
|
||
|
|
.party-card { break-inside: avoid; page-break-inside: avoid; }
|
||
|
|
|
||
|
|
/* ── Print overrides ── */
|
||
|
|
@media print {
|
||
|
|
body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
|
||
|
|
.document { max-width: 100%; }
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="document">
|
||
|
|
|
||
|
|
<div class="top-bar"></div>
|
||
|
|
|
||
|
|
<!-- Header -->
|
||
|
|
<div class="doc-header">
|
||
|
|
{{LOGO_BLOCK}}
|
||
|
|
<div class="doc-header-text">
|
||
|
|
<div class="doc-title">Invoice</div>
|
||
|
|
</div>
|
||
|
|
<div class="doc-number-area">
|
||
|
|
<div class="doc-number-label">Invoice Number</div>
|
||
|
|
<div class="doc-number">{{INVOICE_NUMBER}}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<hr>
|
||
|
|
|
||
|
|
<!-- Meta info -->
|
||
|
|
<div class="meta-grid">
|
||
|
|
<span class="meta-label">Invoice Date:</span> <span class="meta-value">{{INVOICE_DATE}}</span>
|
||
|
|
<span class="meta-label">Due Date:</span> <span class="meta-value due-date">{{DUE_DATE}}</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<hr>
|
||
|
|
|
||
|
|
<!-- Parties -->
|
||
|
|
<div class="section-heading">Parties</div>
|
||
|
|
<div class="parties-grid">
|
||
|
|
<div class="party-card">
|
||
|
|
<div class="party-card-header">From</div>
|
||
|
|
<div class="party-name">{{SUPPLIER_NAME}}</div>
|
||
|
|
<div class="party-detail">{{SUPPLIER_ADDRESS}}</div>
|
||
|
|
</div>
|
||
|
|
<div class="party-card">
|
||
|
|
<div class="party-card-header">Bill To</div>
|
||
|
|
<div class="party-name">{{CUSTOMER_NAME}}</div>
|
||
|
|
<div class="party-detail">{{CUSTOMER_ADDRESS}}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Line Items -->
|
||
|
|
<div class="section-heading">Line Items</div>
|
||
|
|
<table class="items-table">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th style="width:22pt">#</th>
|
||
|
|
<th class="desc-col">Description</th>
|
||
|
|
<th class="num" style="width:32pt">Qty</th>
|
||
|
|
<th style="width:32pt">Unit</th>
|
||
|
|
<th class="num" style="width:55pt">Unit Price</th>
|
||
|
|
<th class="num" style="width:55pt">Line Total</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
{{LINEITEM_ROWS}}
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
|
||
|
|
<!-- Totals -->
|
||
|
|
<div class="totals-wrapper">
|
||
|
|
<table class="totals-table">
|
||
|
|
<tbody>
|
||
|
|
<tr><td>Subtotal:</td><td>{{SUBTOTAL_TEXT}}</td></tr>
|
||
|
|
<tr><td>Tax:</td><td>{{TAX_TEXT}}</td></tr>
|
||
|
|
<tr class="total-row"><td>Total:</td><td>{{TOTAL_TEXT}}</td></tr>
|
||
|
|
<tr class="balance-row"><td>Balance Due:</td><td>{{BALANCE_DUE_TEXT}}</td></tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Payment Terms -->
|
||
|
|
<div class="section-heading">Payment Terms</div>
|
||
|
|
<div class="text-section">{{PAYMENT_TERMS_TEXT}}</div>
|
||
|
|
|
||
|
|
<!-- Bank Details -->
|
||
|
|
<div class="section-heading">Bank Details</div>
|
||
|
|
<div class="text-section">{{BANK_DETAILS_TEXT}}</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|