torsten
e8c8085a07
Co-authored-by: Torsten Ueberschar <torsten@ueberschar.de> Reviewed-on: torsten/freelance_invoice#2
227 lines
5.8 KiB
HTML
227 lines
5.8 KiB
HTML
<html>
|
|
<head>
|
|
<style>
|
|
@font-face {
|
|
font-family: "Barlow Semi Condensed";
|
|
src: url("fonts/BarlowSemiCondensed-Regular.ttf");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Barlow Semi Condensed";
|
|
src: url("fonts/BarlowSemiCondensed-Light.ttf");
|
|
font-style: normal;
|
|
font-weight: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Barlow Semi Condensed";
|
|
src: url("fonts/BarlowSemiCondensed-LightItalic.ttf");
|
|
font-style: italic;
|
|
font-weight: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Barlow Semi Condensed";
|
|
src: url("fonts/BarlowSemiCondensed-Bold.ttf");
|
|
font-style: normal;
|
|
font-weight: bold;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Barlow Semi Condensed";
|
|
src: url("fonts/BarlowSemiCondensed-BoldItalic.ttf");
|
|
font-style: italic;
|
|
font-weight: bold;
|
|
}
|
|
|
|
@page {
|
|
size: a4 portrait;
|
|
margin: 1cm 1cm 1cm 2cm;
|
|
font-size: 12pt;
|
|
|
|
@frame address_frame {
|
|
/* Static Frame */
|
|
-pdf-frame-content: address_frame_content;
|
|
left: 2.5cm;
|
|
width: 8.5cm;
|
|
top: 5.5cm;
|
|
height: 4cm;
|
|
}
|
|
|
|
@frame letter_head_frame {
|
|
/* Another static Frame */
|
|
-pdf-frame-content: letter_head_content;
|
|
left: 15.5cm;
|
|
width: 4cm;
|
|
top: 1cm;
|
|
}
|
|
|
|
@frame content_first_page_frame {
|
|
/* Content Frame */
|
|
left: 2cm;
|
|
width: 13cm;
|
|
top: 11cm;
|
|
bottom: 1cm;
|
|
}
|
|
}
|
|
|
|
body {
|
|
font-family: 'Barlow Semi Condensed';
|
|
font-size: 10pt;
|
|
}
|
|
|
|
table {
|
|
}
|
|
|
|
#address_frame_content {
|
|
}
|
|
|
|
#letter_head_content {
|
|
}
|
|
|
|
.head {
|
|
}
|
|
|
|
.positionen {
|
|
padding-top: 1pt;
|
|
padding-bottom: 1pt;
|
|
}
|
|
|
|
.links {
|
|
text-align: left;
|
|
}
|
|
|
|
.rechts {
|
|
text-align: right;
|
|
}
|
|
|
|
.summe {
|
|
padding-top: 1mm;
|
|
border-top: .1pt solid black;
|
|
}
|
|
|
|
.bold {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.underline {
|
|
border-bottom: .1pt solid black;
|
|
}
|
|
|
|
.overline {
|
|
border-top: .1pt solid black;
|
|
}
|
|
|
|
.center {
|
|
text-align: center;
|
|
}
|
|
|
|
.head_data {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
.head_data td {
|
|
text-align: center;
|
|
}
|
|
|
|
.small {
|
|
font-size: 8pt;
|
|
}
|
|
|
|
#letter_head_content img {
|
|
display: block;
|
|
margin-left: -.55cm;
|
|
}
|
|
|
|
.position_top {
|
|
padding-top: 1pt;
|
|
}
|
|
|
|
.position_bottom {
|
|
padding-bottom: 1pt;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<!-- Content for Static Frame 'header_frame' -->
|
|
<div id="address_frame_content">
|
|
<p class="underline small center">{{ envelope.AddressContent.AddressBoxSender }}</p>
|
|
<address>
|
|
{{ invoice.AddressField | markdown_to_html }}
|
|
</address>
|
|
</div>
|
|
<div id="letter_head_content" class="small">
|
|
{% for address in envelope.AddressContent.Contents %}
|
|
{{ address.Text | markdown_to_html }}
|
|
{% endfor %}
|
|
</div>
|
|
|
|
|
|
<!-- HTML Content -->
|
|
<table class="head_data">
|
|
<tr class="small">
|
|
<td>Rechnungsnummer:</td>
|
|
<td>Kundennummer:</td>
|
|
<td>Rechnungsdatum:</td>
|
|
</tr>
|
|
<tr>
|
|
<td>{{ invoice.Id }}</td>
|
|
<td>{{ invoice.CustomerId }}</td>
|
|
<td>{{ invoice.InvoiceDate.strftime('%d. %B %Y') }}</td>
|
|
</tr>
|
|
</tr>
|
|
</table>
|
|
|
|
<section>
|
|
<p>{{ invoice.Introduction | markdown_to_html }}</p>
|
|
</section>
|
|
|
|
<section>
|
|
<table>
|
|
<tr class="head underline">
|
|
<th class="links" style="width: 55%">Aktivität</th>
|
|
<th class="rechts" style="width: 15%">Anzahl</th>
|
|
<th class="rechts" style="width: 15%">Einheit</th>
|
|
<th class="rechts" style="width: 15%">Betrag</th>
|
|
</tr>
|
|
{% for position in invoice.Positions %}
|
|
<tr>
|
|
<td class="links position_top">{{ position.Title }}</td>
|
|
<td class="rechts" rowspan="2">{{ format_float(position.Quantity | float) }}</td>
|
|
<td class="rechts" rowspan="2">{{ format_float((position.PricePerUnit or invoice.PricePerUnit) | float) }}
|
|
</td>
|
|
<td class="rechts" rowspan="2">{{ format_float(position.Quantity * ( position.PricePerUnit or
|
|
invoice.PricePerUnit ))}}
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="links small position_bottom">{{ position.SubTitle }}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
<tr class="summe">
|
|
<td></td>
|
|
<td colspan="2" class="rechts">Nettosumme:</td>
|
|
<td class="rechts">{{ format_float(calculate_total(invoice)) }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td></td>
|
|
<td colspan="2" class="rechts">USt. ({{ format_float(invoice.Vat) }}%):</td>
|
|
<td class="rechts">{{ format_float(calculate_total(invoice) * ((invoice.Vat / 100))) }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td></td>
|
|
<td colspan="2" class="rechts bold overline">Gesamt Summe:</td>
|
|
<td class="rechts bold overline">{{ format_float(calculate_total(invoice) * ((invoice.Vat / 100)+1)) }}</td>
|
|
</tr>
|
|
</table>
|
|
</section>
|
|
|
|
<section>
|
|
<p>{{ invoice.Footer | markdown_to_html | named_replace(ZahlungsZiel=(invoice.InvoiceDate |
|
|
add_days(invoice.DueDate)).strftime('%d. %B %Y')) }}</p>
|
|
</section>
|
|
</body>
|
|
</html> |