Skip to content

Commit

Permalink
created invoice template
Browse files Browse the repository at this point in the history
  • Loading branch information
Bert Bruynooghe committed Jun 1, 2024
1 parent c3a3280 commit 63ddd48
Showing 1 changed file with 184 additions and 0 deletions.
184 changes: 184 additions & 0 deletions cv/invoice-template.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,184 @@
<html>
<head>
<style type="text/css">
* { margin: 0; padding: 0; }
body { font: 16px Helvetica, Sans-Serif; line-height: 24px; background: url(images/noise.jpeg); }
.clear { clear: both; }
#page-wrap { width: 800px; margin: 40px auto 60px; }
#pic { float: right; margin: -15px 40px 0 0; transform: rotate(-3deg); border: 1px black;}
#pic img { border: 5px white;}
h1 { margin: 0 0 16px 0; padding: 0 0 16px 0; font-size: 42px; font-weight: bold; letter-spacing: -2px; border-bottom: 1px solid #999; }
h2 { font-size: 16px; margin: 0 0 6px 0; position: relative; }
/* h2 span, h3 span { position: absolute; bottom: 0; right: 0; font-style: italic; font-family: Georgia, Serif; font-size: 16px; color: #999; font-weight: normal; } */
h2 span, span { font-style: italic; font-family: Georgia, Serif; font-size: 16px; color: #999; font-weight: normal; }
p { margin: 0 0 16px 0; }
a { color: #999; text-decoration: none; border-bottom: 1px dotted #999; }
a:hover { border-bottom-style: solid; color: black; }
ul { margin: 0 0 32px 17px; }
#objective { width: 500px; float: left; }
#objective p { font-family: Georgia, Serif; font-style: italic; color: #666; }
dt { font-style: italic; font-weight: bold; font-size: 18px; text-align: right; padding: 0 26px 0 0; width: 150px; float: left; height: 100px; border-right: 1px solid #999; }
dd { width: 600px; float: right; }
dd.clear { float: none; margin: 0; height: 15px; }
@media print {
.pageBreak {
page-break-before: right;
}
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-format/1.3.0/d3-format.min.js" referrerpolicy="no-referrer"></script>
<script>
const days = 9.5
const invoiceDate = new Date('2024-05-31')
const invoiceNumber = 202405
const title = 'May 2024'

const dueDate = (new Date(invoiceDate.valueOf() + 15 * 24 * 60 * 60 * 1000))
const dueDateString = `${dueDate.getDate()}/${dueDate.getMonth() + 1}/${dueDate.getFullYear()}`

const enUs = d3.formatDefaultLocale({
thousands: ".",
decimal: ',',
grouping: [3],
currency: ['&euro;', '']
})
const params = new URLSearchParams(document.location.search)
const tariff = parseFloat(params.get('tariff'))
if (!tariff) alert('please provide tariff as query param')

const nominator = parseInt(`${invoiceNumber}0000`)
const remainder = (nominator % 97) || 97
const theString = `${nominator}${remainder}`
const paymentRef = `+++${theString.slice(0,3)}/${theString.slice(3,7)}/${theString.slice(7)}+++`
</script>
</head>
<body style="margin: 1em;">
<div style="display: flex; justify-content: space-between;">
<div style="background: black; margin: 0.5em;">
<img src="../assets/houteborg_logo_inverted.png" width="100" >
</div>
<div style="margin: 0 3em;">
<h1>Invoice</h1>
Invoice <script>document.write(title)</script>
</div>
<div style="display: flex;">
<div style="margin: 0 1em;">
<div><strong>Invoice number</strong></div>
<div>W<script>document.write(invoiceNumber)</script></div>
</div>
<div style="margin: 0 1em;">
<div>
<div><strong>Invoice date</strong></div>
<div><script>document.writeln(`${invoiceDate.getDate()}/${invoiceDate.getMonth() + 1}/${invoiceDate.getFullYear()}`)</script></div>
</div>
<div>
<div><strong>Due date</strong></div>
<div><script>document.writeln(dueDateString)</script></div>
</div>
</div>
</div>
</div>
<div>
<div style="display: flex; justify-content: space-between; align-items: flex-end;">
<div>
<div style="background: silver; font-weight: bold; padding: 0.2em 0.5em;">CLIENT</div>
<div style="background: whitesmoke; padding: 0.2em 0.5em;">
<div><strong>WindEurope</strong></div>
<div>Rue Belliard 40</div>
<div>1040 Brussels</div>
<div>BE0476 915 445</div>
</div>
</div>
<div>
<div style="background: silver; font-weight: bold; padding: 0.2em 0.5em;">SERVICE PROVIDER</div>
<div style="background: whitesmoke; padding: 0.2em 0.5em;">
<div><strong>Houteborg</strong></div>
<div>Bert Bruynooghe</div>
<div>Robert Rinskopflaan 24</div>
<div>9050 Gentbrugge</div>
<div>BE0780 444 776</div>
</div>
</div>
</div>
<div>
<div style="margin: 2em 0;"><strong>Assignment:</strong> Development WindEurope Intelligence Platform</div>
<table style="width: 100%; border-collapse: collapse;">
<thead>
<tr style="background: silver; font-weight: bold;">
<th style="text-align: left; width: 100%; padding: 0.5em 1em;">Work</th>
<th style="text-align: right; padding: 0.5em 1em;">Quantity</th>
<th style="text-align: right; padding: 0.5em 1em;">Price</th>
<th style="text-align: right; padding: 0.5em 1em;">VAT</th>
<th style="text-align: right; padding: 0.5em 1em;">Total</th>
</tr>
</thead>
<tbody>
<tr style="background: whitesmoke;">
<td style="text-align: left; width: 100%; padding: 0.5em 1em;">days</td>
<td style="text-align: right; padding: 0.5em 1em;"><script>document.write(d3.format('~r')(days))</script></td>
<td style="text-align: right; padding: 0.5em 1em;">&euro;<script>document.write(tariff)</script></td>
<td style="text-align: right; padding: 0.5em 1em;">21%</td>
<td style="text-align: right; padding: 0.5em 1em;">&euro;<script>document.write(d3.format(',.2f')(tariff * days))</script></td>
</tr>
</tbody>
</table>

<div style="display: flex; background: whitesmoke; margin: 1em 0; justify-content: space-between;">
<div style="display: flex;">
<div style="padding: 0.5em 1em;">Subtotal</div>
<div style="padding: 0.5em 1em;"><strong>&euro;<script>
document.write(d3.format(',.2f')(tariff * days))
</script></strong></div>
<div style="padding: 0.5em 1em;">VAT (21%)</div>
<div style="padding: 0.5em 1em;"><strong>&euro;<script>
document.write(d3.format(',.2f')(tariff * days * 0.21))
</script></strong></div>
</div>
<div style="display: flex;">
<div style="padding: 0.5em 1em; background: black; color: white;">Total</div>
<div style="padding: 0.5em 1em; background: black; color: white;"><strong>&euro;<script>
document.write(d3.format(',.2f')(tariff * days * 1.21))
</script>
</strong></div>
</div>
</div>
</div>

</div>
<div style="background: whitesmoke;">
<div style="background: silver; font-weight: bold; padding: 0.5em 1em;">Payment details</div>
<table style="background: whitesmoke; margin-left:auto; margin-right:0;">
<thead>
<tr>
<th style="text-align: right; padding: 0.1em 1em;">Amount</th>
<th style="text-align: left;">&euro;<script>
document.write(d3.format(',.2f')(tariff * days * 1.21))
</script></th>
</tr>
</thead>
<tbody>
<tr>
<th style="text-align: right; padding: 0.1em 1em;">Due date</th>
<td><script>document.writeln(dueDateString)</script></td>
</tr>
<tr>
<th style="text-align: right; padding: 0.1em 1em;">To</th>
<td>Houteborg</td>
</tr>
<tr>
<th style="text-align: right; padding: 0.1em 1em;">IBAN</th>
<td>BE81 9734 2188 1124</td>
</tr>
<tr>
<th style="text-align: right; padding: 0.1em 1em;">BIC</th>
<td>ARSP BE 22</td>
</tr>
<tr>
<th style="text-align: right; padding: 0.1em 1em;">Payment ref.</th>
<td><script>document.write(paymentRef)</script></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

0 comments on commit 63ddd48

Please sign in to comment.