<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
/* ═══════════════════════════════════════════════
DELIVERY NOTE / PACKING SLIP — Clean Shipping Document
═══════════════════════════════════════════════ */
/* ── Print-ready page setup ── */
@page {
size: {{ style.page_format | default('A4') }};
margin: {{ style.margin_top | default('16mm') }} {{ style.margin_right | default('16mm') }} {{ style.margin_bottom | default('16mm') }} {{ style.margin_left | default('16mm') }};
@bottom-center {
content: "Page " counter(page) " of " counter(pages);
font-size: 9px;
color: #94a3b8;
font-family: {{ style.font_family | default('Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif') }};
}
}
:root {
--primary: {{ style.primary_color | default('#0ea5e9') }};
--primary-dark: {{ style.primary_dark | default('#0284c7') }};
--primary-light: {{ style.primary_light | default('#e0f2fe') }};
--primary-faint: {{ style.primary_faint | default('#f0f9ff') }};
--accent: {{ style.accent_color | default('#f59e0b') }};
--font: {{ style.font_family | default('Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif') }};
--text-heading: {{ style.text_primary | default('#0f172a') }};
--text-body: {{ style.text_secondary | default('#475569') }};
--text-muted: {{ style.text_tertiary | default('#94a3b8') }};
--border: {{ style.border_color | default('#e2e8f0') }};
--bg-subtle: {{ style.bg_subtle | default('#f8fafc') }};
--bg-card: #ffffff;
}
/* ── Print color preservation ── */
*, *::before, *::after {
-webkit-print-color-adjust: exact !important;
-print-color-adjust: exact !important;
color-adjust: exact !important;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: var(--font);
font-size: 11px;
color: var(--text-body);
line-height: 1.6;
background: #eef2f7;
padding: 18px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* ═══════════════════════════════════════════════
DOCUMENT SHELL
═══════════════════════════════════════════════ */
.document {
max-width: 740px;
margin: 0 auto;
background: var(--bg-card);
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
/* ═══════════════════════════════════════════════
HEADER
═══════════════════════════════════════════════ */
.header {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 32px 40px 24px;
gap: 24px;
}
.header-left {
flex: 1;
}
.header-logo {
max-width: 150px;
max-height: 44px;
margin-bottom: 12px;
display: block;
}
.header-company {
font-size: 16px;
font-weight: 700;
color: var(--text-heading);
letter-spacing: 0.2px;
margin-bottom: 3px;
}
.header-company-detail {
font-size: 10px;
color: var(--text-muted);
line-height: 1.5;
}
.header-right {
text-align: right;
min-width: 240px;
}
/* ── Badge ── */
.badge {
display: inline-block;
background: var(--primary);
color: #ffffff;
font-size: 11px;
font-weight: 800;
letter-spacing: 3px;
text-transform: uppercase;
padding: 8px 22px;
border-radius: 4px;
margin-bottom: 12px;
}
.doc-number {
font-size: 12px;
font-weight: 600;
color: var(--text-heading);
margin-bottom: 3px;
}
.doc-date {
font-size: 10px;
color: var(--text-muted);
}
.header-divider {
margin: 0 40px;
border: none;
height: 2px;
background: linear-gradient(to right, var(--primary) 0%, var(--primary-light) 100%);
}
/* ═══════════════════════════════════════════════
CONTENT AREA
═══════════════════════════════════════════════ */
.content {
padding: 24px 40px 28px;
}
.section {
margin-bottom: 22px;
page-break-inside: avoid;
}
.section:last-child {
margin-bottom: 0;
}
.section-header {
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
color: var(--primary);
padding-bottom: 6px;
margin-bottom: 12px;
border-bottom: 2px solid var(--primary);
display: flex;
align-items: center;
gap: 8px;
}
.section-icon {
width: 18px;
height: 18px;
background: var(--primary);
color: #fff;
border-radius: 3px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 700;
}
/* ═══════════════════════════════════════════════
SHIPPING INFO — Large Address Block
═══════════════════════════════════════════════ */
.shipping-block {
background: var(--bg-subtle);
border: 1px solid var(--border);
border-left: 4px solid var(--primary);
border-radius: 0 8px 8px 0;
padding: 18px 22px;
display: flex;
gap: 24px;
align-items: flex-start;
}
.ship-to {
flex: 1;
}
.ship-to .label {
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--primary);
margin-bottom: 6px;
}
.ship-to .name {
font-size: 15px;
font-weight: 700;
color: var(--text-heading);
margin-bottom: 4px;
}
.ship-to .address {
font-size: 11px;
color: var(--text-body);
line-height: 1.6;
}
.ship-meta {
text-align: right;
min-width: 140px;
border-left: 1px solid var(--border);
padding-left: 20px;
}
.ship-meta .label {
font-size: 8px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--text-muted);
margin-bottom: 3px;
}
.ship-meta .value {
font-size: 12px;
font-weight: 600;
color: var(--text-heading);
margin-bottom: 8px;
}
.ship-meta .value:last-child {
margin-bottom: 0;
}
/* ═══════════════════════════════════════════════
ORDER REFERENCE
═══════════════════════════════════════════════ */
.order-ref {
display: flex;
gap: 12px;
}
.ref-card {
flex: 1;
padding: 12px 16px;
background: var(--primary-faint);
border: 1px solid var(--primary-light);
border-radius: 6px;
}
.ref-card .label {
font-size: 8px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--text-muted);
margin-bottom: 4px;
}
.ref-card .value {
font-size: 13px;
font-weight: 700;
color: var(--primary);
font-variant-numeric: tabular-nums;
letter-spacing: 0.5px;
}
/* ═══════════════════════════════════════════════
ITEMS TABLE
═══════════════════════════════════════════════ */
.items-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
border: 1px solid var(--border);
border-radius: 8px;
overflow: hidden;
}
.items-table thead th {
background: var(--primary);
color: #ffffff;
padding: 10px 14px;
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.8px;
text-align: left;
}
.items-table thead th.center { text-align: center; }
.items-table thead th.right { text-align: right; }
.items-table tbody td {
padding: 10px 14px;
border-bottom: 1px solid var(--border);
font-size: 11px;
}
.items-table tbody td.center { text-align: center; }
.items-table tbody td.right { text-align: right; font-variant-numeric: tabular-nums; }
.items-table tbody tr:last-child td { border-bottom: none; }
.items-table tbody tr:nth-child(even) { background: var(--bg-subtle); }
.items-table .item-desc {
font-weight: 500;
color: var(--text-heading);
}
.items-table .item-sku {
font-size: 9px;
color: var(--text-muted);
font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;
margin-top: 2px;
}
/* ── Quantity match highlight ── */
.qty-match {
color: var(--success, #059669);
font-weight: 700;
}
.qty-diff {
color: #dc2626;
font-weight: 700;
}
/* ═══════════════════════════════════════════════
SHIPPING DETAILS
═══════════════════════════════════════════════ */
.shipping-details {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.ship-detail-card {
flex: 1;
min-width: 160px;
padding: 12px 16px;
background: var(--bg-subtle);
border: 1px solid var(--border);
border-radius: 6px;
display: flex;
align-items: center;
gap: 12px;
}
.ship-detail-icon {
width: 36px;
height: 36px;
background: var(--primary);
color: #fff;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
flex-shrink: 0;
}
.ship-detail-label {
font-size: 8px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.8px;
color: var(--text-muted);
}
.ship-detail-value {
font-size: 12px;
font-weight: 600;
color: var(--text-heading);
margin-top: 1px;
}
/* ═══════════════════════════════════════════════
DELIVERY CONFIRMATION — Signature
═══════════════════════════════════════════════ */
.signature-section {
margin-top: 28px;
page-break-inside: avoid;
}
.signature-block {
border: 1px solid var(--border);
border-radius: 8px;
padding: 24px;
background: var(--bg-subtle);
}
.sig-grid {
display: flex;
gap: 48px;
}
.sig-col {
flex: 1;
}
.sig-line {
border-top: 1.5px solid var(--border);
margin-top: 44px;
margin-bottom: 6px;
padding-top: 6px;
}
.sig-field {
font-size: 9px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.8px;
color: var(--text-muted);
}
.sig-underlined {
border-bottom: 1px solid var(--border);
min-width: 180px;
display: inline-block;
padding: 2px 0;
font-size: 10px;
color: var(--text-muted);
margin-top: 2px;
}
/* ═══════════════════════════════════════════════
FOOTER
═══════════════════════════════════════════════ */
.footer {
padding: 18px 40px;
background: var(--bg-subtle);
border-top: 1px solid var(--border);
text-align: center;
font-size: 10px;
color: var(--text-muted);
line-height: 1.5;
}
.footer-brand {
font-weight: 700;
color: var(--text-heading);
font-size: 11px;
}
/* ═══════════════════════════════════════════════
PAGE BREAKS
═══════════════════════════════════════════════ */
.signature-section, .shipping-block, .items-table tbody tr {
page-break-inside: avoid;
}
/* ═══════════════════════════════════════════════
WATERMARK
═══════════════════════════════════════════════ */
.watermark {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-35deg);
font-size: 64px;
font-weight: 900;
color: var(--primary);
opacity: 0.06;
pointer-events: none;
text-transform: uppercase;
letter-spacing: 8px;
}
{% if style.show_watermark | default(false) | to_bool %}
<div class="watermark">{{ style.watermark_text | default('DELIVERY NOTE') }}</div>
{% endif %}
</style>
</head>
<body>
<div class="document">
<!-- ════════════════════════════════════════
HEADER
════════════════════════════════════════ -->
<div class="header">
<div class="header-left">
{% if style.logo_url %}
<img src="{{ style.logo_url }}" alt="Logo" class="header-logo">
{% endif %}
<div class="header-company">{{ data.from.name | default('Company Name') }}</div>
{% if data.from.address %}
<div class="header-company-detail">{{ data.from.address | nl2br }}</div>
{% endif %}
{% if data.from.phone %}
<div class="header-company-detail">Tel: {{ data.from.phone }}</div>
{% endif %}
</div>
<div class="header-right">
<div class="badge">DELIVERY NOTE</div>
{% if data.document_number or data.delivery_note_number %}
<div class="doc-number">#{{ data.delivery_note_number | default(data.document_number) }}</div>
{% endif %}
{% if data.issue_date %}
<div class="doc-date">{{ data.issue_date | date_format }}</div>
{% endif %}
</div>
</div>
<hr class="header-divider">
<div class="content">
<!-- ════════════════════════════════════
SHIPPING INFO
════════════════════════════════════ -->
<div class="section">
<div class="section-header">
<span class="section-icon">🚚</span>
Ship To
</div>
<div class="shipping-block">
<div class="ship-to">
<div class="label">Delivery Address</div>
{% if data.to.name %}
<div class="name">{{ data.to.name }}</div>
{% endif %}
{% if data.to.address %}
<div class="address">{{ data.to.address | nl2br }}</div>
{% endif %}
{% if data.to.phone %}
<div class="address">Tel: {{ data.to.phone }}</div>
{% endif %}
</div>
{% if data.delivery_date %}
<div class="ship-meta">
<div class="label">Delivery Date</div>
<div class="value">{{ data.delivery_date | date_format }}</div>
</div>
{% endif %}
</div>
</div>
<!-- ════════════════════════════════════
ORDER REFERENCE
════════════════════════════════════ -->
<div class="section">
<div class="section-header">
<span class="section-icon">📋</span>
Order Reference
</div>
<div class="order-ref">
{% if data.po_number %}
<div class="ref-card">
<div class="label">PO Number</div>
<div class="value">{{ data.po_number }}</div>
</div>
{% endif %}
{% if data.order_number %}
<div class="ref-card">
<div class="label">Order Number</div>
<div class="value">{{ data.order_number }}</div>
</div>
{% endif %}
{% if not data.po_number and not data.order_number %}
<div class="ref-card">
<div class="label">Reference</div>
<div class="value">{{ data.document_number | default('—') }}</div>
</div>
{% endif %}
</div>
</div>
<!-- ════════════════════════════════════
ITEMS TABLE
════════════════════════════════════ -->
{% if data.line_items %}
<div class="section">
<div class="section-header">
<span class="section-icon">●</span>
Items Shipped
</div>
<table class="items-table">
<thead>
<tr>
<th style="width:4%;">#</th>
<th style="width:38%;">Item / Description</th>
<th class="center" style="width:12%;">Qty Ordered</th>
<th class="center" style="width:12%;">Qty Shipped</th>
<th style="width:14%;">Unit</th>
</tr>
</thead>
<tbody>
{% for item in data.line_items %}
<tr>
<td>{{ loop.index }}</td>
<td>
<div class="item-desc">{{ item.description | default('') }}</div>
{% if item.sku %}
<div class="item-sku">{{ item.sku }}</div>
{% endif %}
</td>
<td class="center">{{ item.qty_ordered | default(item.quantity | default(0)) }}</td>
<td class="center">{{ item.qty_shipped | default(item.quantity | default(0)) }}</td>
<td>{{ item.unit | default('') }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% endif %}
<!-- ════════════════════════════════════
SHIPPING DETAILS
════════════════════════════════════ -->
<div class="section">
<div class="section-header">
<span class="section-icon">🚚</span>
Shipping Details
</div>
<div class="shipping-details">
{% if data.carrier %}
<div class="ship-detail-card">
<div class="ship-detail-icon">🚚</div>
<div>
<div class="ship-detail-label">Carrier</div>
<div class="ship-detail-value">{{ data.carrier }}</div>
</div>
</div>
{% endif %}
{% if data.tracking_number %}
<div class="ship-detail-card">
<div class="ship-detail-icon">🔌</div>
<div>
<div class="ship-detail-label">Tracking Number</div>
<div class="ship-detail-value">{{ data.tracking_number }}</div>
</div>
</div>
{% endif %}
{% if data.weight %}
<div class="ship-detail-card">
<div class="ship-detail-icon">🪸</div>
<div>
<div class="ship-detail-label">Weight</div>
<div class="ship-detail-value">{{ data.weight }}</div>
</div>
</div>
{% endif %}
{% if not data.carrier and not data.tracking_number and not data.weight %}
<div class="ship-detail-card" style="opacity: 0.5;">
<div class="ship-detail-label" style="width:100%;">No shipping details provided</div>
</div>
{% endif %}
</div>
</div>
<!-- ════════════════════════════════════
ADDITIONAL NOTES
════════════════════════════════════ -->
{% if data.notes %}
<div class="section">
<div class="section-header">
<span class="section-icon">📝</span>
Notes
</div>
<div style="font-size:11px; color:var(--text-body); line-height:1.6; padding:12px 16px; background:var(--bg-subtle); border-radius:6px; border:1px solid var(--border);">
{{ data.notes | nl2br }}
</div>
</div>
{% endif %}
<!-- ════════════════════════════════════
DELIVERY CONFIRMATION
════════════════════════════════════ -->
<div class="signature-section">
<div class="section-header">
<span class="section-icon">✎</span>
Delivery Confirmation
</div>
<div class="signature-block">
<p style="font-size:11px; color:var(--text-body); margin-bottom:12px;">
By signing below, the recipient confirms receipt of the items listed above in good condition.
</p>
<div class="sig-grid">
<div class="sig-col">
<div class="sig-line"></div>
<div class="sig-field">Signature on Delivery</div>
</div>
<div class="sig-col">
<div class="sig-line"></div>
<div class="sig-field">Received By</div>
<div class="sig-underlined"> </div>
<br>
<div class="sig-field" style="margin-top:8px;">Date</div>
<div class="sig-underlined"> </div>
</div>
</div>
</div>
</div>
</div>
<!-- ════════════════════════════════════════
FOOTER
════════════════════════════════════════ -->
<div class="footer">
<div class="footer-brand">{{ data.from.name | default('Company Name') }}</div>
{% if data.from.email %}<div>{{ data.from.email }}</div>{% endif %}
{% if data.from.phone %}<div>{{ data.from.phone }}</div>{% endif %}
</div>
</div>
</body>
</html>