mirror of
https://github.com/arsvendg/Stirling-PDF.git
synced 2026-07-14 10:34:06 +02:00
196 lines
9.7 KiB
HTML
196 lines
9.7 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Purchase Order</title>
|
||
<style>
|
||
:root {
|
||
--theme-primary: #1e3a5f;
|
||
--theme-accent: #2563eb;
|
||
--theme-secondary: #475569;
|
||
--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); }
|
||
.doc-number-area { text-align: right; flex-shrink: 0; }
|
||
.doc-number-label { font-size: 7.5pt; color: var(--theme-text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2pt; }
|
||
.doc-number { font-size: 11pt; font-weight: 700; color: var(--theme-primary); }
|
||
hr { border: none; border-top: 0.5pt solid var(--theme-border); margin: 6pt 0; }
|
||
.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); font-size: 8.5pt; }
|
||
.meta-value { font-size: 8.5pt; }
|
||
.section-heading { font-size: 10pt; font-weight: 700; color: var(--theme-primary); border-bottom: 1pt solid var(--theme-accent); padding-bottom: 2pt; margin: 10pt 0 6pt; text-transform: uppercase; letter-spacing: 0.5px; }
|
||
.parties-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10pt; margin-bottom: 8pt; }
|
||
.addresses-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10pt; margin-bottom: 8pt; }
|
||
.party-card { border: 0.5pt solid var(--theme-border); 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); margin-bottom: 4pt; }
|
||
.party-name { font-size: 9.5pt; font-weight: 600; color: var(--theme-heading); margin-bottom: 2pt; }
|
||
.party-detail { font-size: 8pt; color: var(--theme-text-muted); line-height: 1.5; }
|
||
.items-table { width: 100%; border-collapse: collapse; margin-bottom: 6pt; font-size: 8.5pt; }
|
||
.items-table thead tr { background: var(--theme-primary); color: #fff; }
|
||
.items-table thead th { padding: 5pt 6pt; text-align: left; font-weight: 600; }
|
||
.items-table thead th.num { text-align: right; }
|
||
.items-table tbody tr:nth-child(even) { background: var(--theme-surface); }
|
||
.items-table tbody td { padding: 4pt 6pt; border-bottom: 0.3pt solid var(--theme-border); vertical-align: top; }
|
||
.items-table tbody td.num { text-align: right; white-space: nowrap; }
|
||
.totals-wrapper { display: flex; justify-content: flex-end; margin-bottom: 10pt; }
|
||
.totals-table { border-collapse: collapse; font-size: 8.5pt; min-width: 140pt; }
|
||
.totals-table td { padding: 2pt 6pt; }
|
||
.totals-table td:first-child { color: var(--theme-text-muted); }
|
||
.totals-table td:last-child { text-align: right; }
|
||
.totals-table .total-row td { font-weight: 700; font-size: 9.5pt; border-top: 1pt solid var(--theme-primary); padding-top: 4pt; }
|
||
.text-section { font-size: 8.5pt; line-height: 1.5; margin-bottom: 4pt; }
|
||
.auth-table { width: 100%; border-collapse: collapse; font-size: 8.5pt; margin-top: 4pt; }
|
||
.auth-table td:first-child { font-weight: 600; color: var(--theme-text-muted); width: 100pt; padding: 2pt 0; }
|
||
.auth-table td:last-child { padding: 2pt 6pt; }
|
||
.footer-note { margin-top: 10pt; padding-top: 6pt; border-top: 0.5pt solid var(--theme-border); font-size: 7.5pt; color: var(--theme-text-muted); }
|
||
@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">Purchase Order</div>
|
||
<div class="doc-subtitle">Sterling Systems Group Ltd</div>
|
||
</div>
|
||
<div class="doc-number-area">
|
||
<div class="doc-number-label">PO Number</div>
|
||
<div class="doc-number">PO-2026-0184</div>
|
||
</div>
|
||
</div>
|
||
<hr>
|
||
<div class="meta-grid">
|
||
<span class="meta-label">PO Date:</span> <span class="meta-value">12 January 2026</span>
|
||
<span class="meta-label">Buyer Reference:</span> <span class="meta-value">REQ-A19-772</span>
|
||
<span class="meta-label">Vendor Reference:</span> <span class="meta-value">QUOTE-Q4481</span>
|
||
<span class="meta-label">Currency:</span> <span class="meta-value">GBP</span>
|
||
<span class="meta-label">Requested Delivery:</span><span class="meta-value">19 January 2026</span>
|
||
<span class="meta-label">Delivery Method:</span> <span class="meta-value">Courier</span>
|
||
<span class="meta-label">Incoterms:</span> <span class="meta-value">DAP (Delivered at Place)</span>
|
||
<span class="meta-label">Payment Terms:</span> <span class="meta-value">Net 30</span>
|
||
</div>
|
||
<hr>
|
||
<div class="section-heading">Parties & Addresses</div>
|
||
<div class="parties-grid">
|
||
<div class="party-card">
|
||
<div class="party-card-header">Buyer</div>
|
||
<div class="party-name">Sterling Systems Group Ltd</div>
|
||
<div class="party-detail">100 Kingfisher Way, London, EC2V 7AB, UK</div>
|
||
<div class="party-detail">Contact: Operations Procurement</div>
|
||
<div class="party-detail">Email: [email protected]</div>
|
||
<div class="party-detail">Phone: +44 20 0000 0000</div>
|
||
</div>
|
||
<div class="party-card">
|
||
<div class="party-card-header">Vendor</div>
|
||
<div class="party-name">Northbridge Office Supply Co.</div>
|
||
<div class="party-detail">14 Meridian Park, Reading, RG1 1AA, UK</div>
|
||
<div class="party-detail">Contact: Accounts Desk</div>
|
||
<div class="party-detail">Email: [email protected]</div>
|
||
<div class="party-detail">Phone: +44 118 000 0000</div>
|
||
</div>
|
||
</div>
|
||
<div class="addresses-row">
|
||
<div class="party-card">
|
||
<div class="party-card-header">Bill To</div>
|
||
<div class="party-name">Sterling Systems Group Ltd (Accounts Payable)</div>
|
||
<div class="party-detail">100 Kingfisher Way, London, EC2V 7AB, UK</div>
|
||
</div>
|
||
<div class="party-card">
|
||
<div class="party-card-header">Ship To</div>
|
||
<div class="party-name">Sterling Systems Group Ltd (Receiving)</div>
|
||
<div class="party-detail">Dock 2, 100 Kingfisher Way, London, EC2V 7AB, UK</div>
|
||
</div>
|
||
</div>
|
||
<div class="section-heading">Line Items</div>
|
||
<table class="items-table">
|
||
<thead>
|
||
<tr>
|
||
<th style="width:24pt">#</th>
|
||
<th style="width:45%">Description</th>
|
||
<th class="num" style="width:36pt">Qty</th>
|
||
<th style="width:36pt">Unit</th>
|
||
<th class="num" style="width:55pt">Unit Price</th>
|
||
<th class="num" style="width:55pt">Line Total</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>1</td>
|
||
<td>A4 paper, 80gsm (box of 5 reams)</td>
|
||
<td class="num">20</td>
|
||
<td>box</td>
|
||
<td class="num">£18.50</td>
|
||
<td class="num">£370.00</td>
|
||
</tr>
|
||
<tr>
|
||
<td>2</td>
|
||
<td>Black toner cartridge (Model X200)</td>
|
||
<td class="num">6</td>
|
||
<td>unit</td>
|
||
<td class="num">£74.00</td>
|
||
<td class="num">£444.00</td>
|
||
</tr>
|
||
<tr>
|
||
<td>3</td>
|
||
<td>Heavy-duty archive boxes (pack of 10)</td>
|
||
<td class="num">8</td>
|
||
<td>pack</td>
|
||
<td class="num">£21.25</td>
|
||
<td class="num">£170.00</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<div class="totals-wrapper">
|
||
<table class="totals-table">
|
||
<tbody>
|
||
<tr><td>Subtotal:</td><td>£984.00</td></tr>
|
||
<tr><td>Tax (20% VAT):</td><td>£196.80</td></tr>
|
||
<tr><td>Shipping:</td><td>£25.00</td></tr>
|
||
<tr><td>Discount:</td><td>-£30.00</td></tr>
|
||
<tr class="total-row"><td>Total:</td><td>£1,175.80</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div class="section-heading">Notes</div>
|
||
<div class="text-section">Deliveries accepted Mon–Fri, 09:00–16:00. Please reference the PO number on all delivery documents.</div>
|
||
<div class="section-heading">Special Instructions</div>
|
||
<div class="text-section">Pack cartons securely; label each carton with PO number and delivery contact.</div>
|
||
<div class="section-heading">Terms and Conditions</div>
|
||
<div class="text-section">Payment per stated terms; substitutions require buyer approval; notify buyer of delays exceeding 48 hours.</div>
|
||
<div class="section-heading">Authorisation</div>
|
||
<table class="auth-table">
|
||
<tbody>
|
||
<tr><td>Authorised by:</td><td>Alexandra Moore</td></tr>
|
||
<tr><td>Title:</td><td>Head of Operations</td></tr>
|
||
<tr><td>Date:</td><td>12 January 2026</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<div class="footer-note">This document is provided for demonstration purposes only.</div>
|
||
</div>
|
||
</body>
|
||
</html>
|