376 lines
7.7 KiB
HTML
376 lines
7.7 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Invoice {{invoiceNumber}}</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
|
color: #2c3e50;
|
|
line-height: 1.6;
|
|
padding: 60px;
|
|
background: #ffffff;
|
|
}
|
|
|
|
.container {
|
|
max-width: 850px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* Header */
|
|
.header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
margin-bottom: 60px;
|
|
padding-bottom: 30px;
|
|
border-bottom: 2px solid {{highlightColor}};
|
|
}
|
|
|
|
.company-info h1 {
|
|
font-size: 32px;
|
|
font-weight: 300;
|
|
color: {{highlightColor}};
|
|
margin-bottom: 10px;
|
|
letter-spacing: -0.5px;
|
|
}
|
|
|
|
.company-info p {
|
|
font-size: 14px;
|
|
color: #7f8c8d;
|
|
line-height: 1.8;
|
|
margin: 3px 0;
|
|
}
|
|
|
|
.invoice-info {
|
|
text-align: right;
|
|
}
|
|
|
|
.invoice-title {
|
|
font-size: 48px;
|
|
font-weight: 200;
|
|
color: #34495e;
|
|
margin-bottom: 5px;
|
|
letter-spacing: -1px;
|
|
}
|
|
|
|
.invoice-number {
|
|
font-size: 18px;
|
|
color: #7f8c8d;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.invoice-number strong {
|
|
color: {{highlightColor}};
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Parties Section */
|
|
.parties {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 50px;
|
|
gap: 60px;
|
|
}
|
|
|
|
.party {
|
|
flex: 1;
|
|
}
|
|
|
|
.party-label {
|
|
font-size: 11px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1.5px;
|
|
color: #95a5a6;
|
|
font-weight: 600;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.party-name {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
color: #2c3e50;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.party-details {
|
|
font-size: 14px;
|
|
color: #7f8c8d;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
/* Dates */
|
|
.dates {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 40px;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.date-item {
|
|
text-align: right;
|
|
}
|
|
|
|
.date-label {
|
|
font-size: 11px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1.2px;
|
|
color: #95a5a6;
|
|
font-weight: 600;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.date-value {
|
|
font-size: 15px;
|
|
color: #2c3e50;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* Table */
|
|
.items-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.items-table thead {
|
|
border-bottom: 2px solid #34495e;
|
|
}
|
|
|
|
.items-table th {
|
|
padding: 15px 12px;
|
|
text-align: left;
|
|
font-size: 11px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1.2px;
|
|
color: #34495e;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.items-table th:nth-child(2),
|
|
.items-table th:nth-child(3),
|
|
.items-table th:nth-child(4) {
|
|
text-align: right;
|
|
width: 12%;
|
|
}
|
|
|
|
.items-table tbody tr {
|
|
border-bottom: 1px solid #ecf0f1;
|
|
}
|
|
|
|
.items-table td {
|
|
padding: 18px 12px;
|
|
font-size: 14px;
|
|
color: #2c3e50;
|
|
}
|
|
|
|
.items-table td:first-child {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.items-table td:nth-child(2),
|
|
.items-table td:nth-child(3),
|
|
.items-table td:nth-child(4) {
|
|
text-align: right;
|
|
color: #7f8c8d;
|
|
}
|
|
|
|
.items-table td:nth-child(4) {
|
|
font-weight: 600;
|
|
color: #2c3e50;
|
|
}
|
|
|
|
/* Summary */
|
|
.summary {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
margin-top: 30px;
|
|
}
|
|
|
|
.summary-content {
|
|
width: 320px;
|
|
}
|
|
|
|
.summary-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 12px 0;
|
|
font-size: 15px;
|
|
}
|
|
|
|
.summary-row.subtotal {
|
|
color: #7f8c8d;
|
|
border-bottom: 1px solid #ecf0f1;
|
|
padding-bottom: 15px;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.summary-row.total {
|
|
border-top: 2px solid {{highlightColor}};
|
|
padding-top: 20px;
|
|
margin-top: 15px;
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.summary-row.total .label {
|
|
color: #34495e;
|
|
}
|
|
|
|
.summary-row.total .amount {
|
|
color: {{highlightColor}};
|
|
}
|
|
|
|
/* Notes */
|
|
.notes {
|
|
margin-top: 60px;
|
|
padding-top: 30px;
|
|
border-top: 1px solid #ecf0f1;
|
|
}
|
|
|
|
.notes-title {
|
|
font-size: 11px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1.5px;
|
|
color: #95a5a6;
|
|
font-weight: 600;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.notes-content {
|
|
font-size: 14px;
|
|
color: #7f8c8d;
|
|
line-height: 1.8;
|
|
max-width: 600px;
|
|
}
|
|
|
|
/* Footer */
|
|
.footer {
|
|
margin-top: 80px;
|
|
padding-top: 25px;
|
|
border-top: 1px solid #ecf0f1;
|
|
text-align: center;
|
|
font-size: 13px;
|
|
color: #95a5a6;
|
|
}
|
|
|
|
@media print {
|
|
body {
|
|
padding: 40px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<!-- Header -->
|
|
<div class="header">
|
|
<div class="company-info">
|
|
<h1>{{companyName}}</h1>
|
|
{{#companyAddress}}<p>{{companyAddress}}</p>{{/companyAddress}}
|
|
{{#companyEmail}}<p>{{companyEmail}}</p>{{/companyEmail}}
|
|
{{#companyPhone}}<p>{{companyPhone}}</p>{{/companyPhone}}
|
|
</div>
|
|
<div class="invoice-info">
|
|
<div class="invoice-title">INVOICE</div>
|
|
<div class="invoice-number"><strong>#{{invoiceNumber}}</strong></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bill To & From -->
|
|
<div class="parties">
|
|
<div class="party">
|
|
<div class="party-label">Bill To</div>
|
|
<div class="party-name">{{customerName}}</div>
|
|
<div class="party-details">
|
|
{{#customerAddress}}<div>{{customerAddress}}</div>{{/customerAddress}}
|
|
{{#customerEmail}}<div>{{customerEmail}}</div>{{/customerEmail}}
|
|
{{#customerPhone}}<div>{{customerPhone}}</div>{{/customerPhone}}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="dates">
|
|
<div class="date-item">
|
|
<div class="date-label">Issue Date</div>
|
|
<div class="date-value">{{issueDate}}</div>
|
|
</div>
|
|
{{#dueDate}}
|
|
<div class="date-item">
|
|
<div class="date-label">Due Date</div>
|
|
<div class="date-value">{{dueDate}}</div>
|
|
</div>
|
|
{{/dueDate}}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Items Table -->
|
|
<table class="items-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Description</th>
|
|
<th>Quantity</th>
|
|
<th>Rate</th>
|
|
<th>Amount</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{{#items}}
|
|
<tr>
|
|
<td>{{description}}</td>
|
|
<td>{{quantity}}</td>
|
|
<td>{{unitPrice}}</td>
|
|
<td>{{lineTotal}}</td>
|
|
</tr>
|
|
{{/items}}
|
|
</tbody>
|
|
</table>
|
|
|
|
<!-- Summary -->
|
|
<div class="summary">
|
|
<div class="summary-content">
|
|
{{#subtotal}}
|
|
<div class="summary-row subtotal">
|
|
<span class="label">Subtotal</span>
|
|
<span class="amount">{{subtotal}}</span>
|
|
</div>
|
|
{{/subtotal}}
|
|
{{#tax}}
|
|
<div class="summary-row">
|
|
<span class="label">Tax</span>
|
|
<span class="amount">{{tax}}</span>
|
|
</div>
|
|
{{/tax}}
|
|
{{#discount}}
|
|
<div class="summary-row">
|
|
<span class="label">Discount</span>
|
|
<span class="amount">-{{discount}}</span>
|
|
</div>
|
|
{{/discount}}
|
|
<div class="summary-row total">
|
|
<span class="label">Total</span>
|
|
<span class="amount">{{total}} {{currency}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Notes -->
|
|
{{#notes}}
|
|
<div class="notes">
|
|
<div class="notes-title">Notes</div>
|
|
<div class="notes-content">{{notes}}</div>
|
|
</div>
|
|
{{/notes}}
|
|
|
|
<!-- Footer -->
|
|
<div class="footer">
|
|
Thank you for your business
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |