blob: 458af62d2cc2f68ea6f2de98808d2f92e79f530c (
plain) (
tree)
|
|
<!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>
|
