diff options
| author | Romain Gonçalves <me@rgoncalves.se> | 2024-07-09 10:04:00 +0200 |
|---|---|---|
| committer | Romain Gonçalves <me@rgoncalves.se> | 2024-07-09 10:07:47 +0200 |
| commit | 28d5c1c212a06d599160f96cbe0e6c88840ab367 (patch) | |
| tree | e3504a070c0b212c93db5251c54b324c3ff39380 /contrib/template.html | |
| download | invoiceg-28d5c1c212a06d599160f96cbe0e6c88840ab367.tar.gz | |
inittrunk
Diffstat (limited to 'contrib/template.html')
| -rw-r--r-- | contrib/template.html | 204 |
1 files changed, 204 insertions, 0 deletions
diff --git a/contrib/template.html b/contrib/template.html new file mode 100644 index 0000000..458af62 --- /dev/null +++ b/contrib/template.html @@ -0,0 +1,204 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"/> + <style> + * { + margin: 0; + padding: 0; + font-family: monospace, monospace; + font-size: 14px; + color: #111; + } + + @page { + size: A4 portrait; + margin: 16mm; + } + + h1, h2, h3 { + margin: 0; + color: #444; + } + + h2 { + font-size: 1.2em; + } + + ul li { + list-style: none; + } + + a, a:visited { + color: #000; + } + + article { + margin-top: 2em; + margin-bottom: 2em; + } + + header article { + margin: 0; + } + + header { + display: flex; + } + + footer { + position: fixed; + bottom: 0; + width: 100%; + } + + table * { + vertical-align: top; + } + + p.comment { + color: #444; + margin-left: .5em; + } + + #services table { + border-collapse: collapse; + margin: 2em 0 2em 0; + } + + #services table tr th:last-child, + #services table tr td:last-child { + text-align: right; + } + + #services table thead tr th:first-child { + width: 60%; + } + + #services table tfoot, table thead { + border-bottom: solid 1px black; + } + + #services table tfoot { + border-top: solid 1px black; + } + + #services table tfoot td { + font-weight: 700; + } + + #services table { + width: 100%; + } + + #author { + width: 60%; + } + + #header-title h2 { + width: 60%; + } + + #bank table { + width: 50%; + } + + #metadata { + width: 40%; + } + + #metadata table { + width: 100%; + } + + </style> +</head> + +<body> + + <header> + <article id="author"> + <h2>Invoice from</h2> + <ul> + <li>${ author.name }</li> + <li>${ author.address }</li> + <li><a href="${ author.website }">${ author.website }</a></li> + <li><a href="mailto:${ author.email }">${ author.email }</a></li> + <li><a href="tel:${ author.phone }">${ author.phone }</a></li> + </ul> + </article> + + <article id="metadata"> + <table> + <tr><td><h2>Invoice</h2></td><td> #${ number }</td></tr> + <tr><td>issued at:</td><td> ${ date }</td></tr> + <tr><td>due at:</td><td> ${ due_date }</td></tr> + </table> + </article> + </header> + + <section> + <article id="client"> + <h2>Invoice for</h2> + <ul> + <li>${ client.name }</li> + <li>${ client.address }</li> + <li>${ client.email }</li> + </ul> + </article> + ${ if(notes) } + <article id="notes"> + <p>${ notes }</p> + </article> + ${ endif } + </section> + + <section> + <article id="services"> + <table> + <thead> + <tr> + <th>Description</th> + <th>Rate</th> + <th>Quantity</th> + <th>Amount</th> + </tr> + </thead> + <tbody> + ${ for(services) } + <tr> + <td> + ${ it.name } + ${ if(it.comment) } + <p class="comment">${ it.comment }</p> + ${ endif } + </td> + <td>${ it.rate }</td> + <td>${ it.qty }</td> + <td>${ it.sum }</td> + </tr> + ${ endfor } + </tbody> + <tfoot> + <tr> + <td colspan="3">Total in ${ currency }</td> + <td>${ total }</td> + </tr> + </tfoot> + </table> + </article> + </section> + + <footer> + <hr> + <article id="bank"> + <h2>Bank details</h2> + <table> + <tr><td>name:</td><td> ${ bank.name }</td></tr> + <tr><td>SWIFT:</td><td> ${ bank.swift }</td></tr> + <tr><td>IBAN:</td><td> ${ bank.iban }</td></tr> + </table> + </article> + </footer> +</body> +</html> |