Spaces:
Sleeping
Sleeping
File size: 3,163 Bytes
1ec6698 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 | <!doctype html>
<html>
<head>
<meta charset="utf-8" />
<style>
* { box-sizing: border-box; }
body { font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #1f2937; margin: 0; padding: 40px; font-size: 14px; }
.header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 40px; }
.brand { font-size: 22px; font-weight: 700; color: #111827; }
.muted { color: #6b7280; }
h1 { font-size: 28px; margin: 0 0 4px; color: #111827; letter-spacing: 1px; }
.meta { text-align: right; }
.parties { margin-bottom: 32px; }
.label { text-transform: uppercase; font-size: 11px; letter-spacing: .5px; color: #9ca3af; margin-bottom: 6px; }
table { width: 100%; border-collapse: collapse; margin-bottom: 24px; }
th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: #6b7280; border-bottom: 2px solid #e5e7eb; padding: 10px 8px; }
td { padding: 12px 8px; border-bottom: 1px solid #f3f4f6; }
.right { text-align: right; }
.totals { width: 280px; margin-left: auto; }
.totals td { border: none; padding: 6px 8px; }
.totals .grand { font-size: 18px; font-weight: 700; color: #111827; border-top: 2px solid #e5e7eb; }
.notes { margin-top: 36px; color: #6b7280; font-size: 13px; }
.footer { margin-top: 40px; text-align: center; color: #9ca3af; font-size: 12px; }
</style>
</head>
<body>
<div class="header">
<div>
<div class="brand">{{company.name}}</div>
{{#if company.address}}<div class="muted">{{company.address}}</div>{{/if}}
{{#if company.email}}<div class="muted">{{company.email}}</div>{{/if}}
</div>
<div class="meta">
<h1>INVOICE</h1>
{{#if invoice.number}}<div class="muted">#{{invoice.number}}</div>{{/if}}
{{#if invoice.date}}<div class="muted">Date: {{invoice.date}}</div>{{/if}}
{{#if invoice.due}}<div class="muted">Due: {{invoice.due}}</div>{{/if}}
</div>
</div>
<div class="parties">
<div class="label">Bill To</div>
<div><strong>{{client.name}}</strong></div>
{{#if client.address}}<div class="muted">{{client.address}}</div>{{/if}}
{{#if client.email}}<div class="muted">{{client.email}}</div>{{/if}}
</div>
<table>
<thead>
<tr>
<th>Description</th>
<th class="right">Qty</th>
<th class="right">Price</th>
<th class="right">Amount</th>
</tr>
</thead>
<tbody>
{{#each items}}
<tr>
<td>{{this.description}}</td>
<td class="right">{{this.quantity}}</td>
<td class="right">{{this.price}}</td>
<td class="right">{{this.amount}}</td>
</tr>
{{/each}}
</tbody>
</table>
<table class="totals">
{{#if subtotal}}<tr><td>Subtotal</td><td class="right">{{subtotal}}</td></tr>{{/if}}
{{#if tax}}<tr><td>Tax</td><td class="right">{{tax}}</td></tr>{{/if}}
<tr><td class="grand">Total</td><td class="right grand">{{total}}</td></tr>
</table>
{{#if notes}}<div class="notes">{{notes}}</div>{{/if}}
{{#if company.name}}<div class="footer">Thank you for your business — {{company.name}}</div>{{/if}}
</body>
</html>
|