Spaces:
Sleeping
Sleeping
| <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> | |