summaryrefslogtreecommitdiffstats
path: root/contrib/template.html
diff options
context:
space:
mode:
Diffstat (limited to 'contrib/template.html')
-rw-r--r--contrib/template.html204
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>
remember that computers suck.