210 lines
7.0 KiB
Plaintext
210 lines
7.0 KiB
Plaintext
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<style>
|
|
body {
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
font-size: 14px;
|
|
}
|
|
header{
|
|
width: 100%;
|
|
height: 4cm;
|
|
position: relative;
|
|
}
|
|
header .receiver{
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
}
|
|
header .sender{
|
|
position: absolute;
|
|
right: 0;
|
|
text-align: right;
|
|
}
|
|
header .company{
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
}
|
|
header .address .small{
|
|
font-size: 10px;
|
|
font-weight: bold;
|
|
padding-bottom: 5px;
|
|
}
|
|
header .address .small .break{
|
|
display: inline;
|
|
}
|
|
header .address .small .break:after{
|
|
content: ' / ';
|
|
}
|
|
span.break{
|
|
display: block;
|
|
}
|
|
h2 {
|
|
position: relative;
|
|
text-align: center;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
}
|
|
.bottom .company,
|
|
h2 .left {
|
|
position: absolute;
|
|
left: 0;
|
|
}
|
|
.bottom .bank_account,
|
|
h2 .right {
|
|
position: absolute;
|
|
right: 0;
|
|
}
|
|
.right{
|
|
text-align: right;
|
|
}
|
|
.center{
|
|
text-align: center;
|
|
}
|
|
tr {
|
|
vertical-align: baseline;
|
|
}
|
|
.foot,
|
|
.head{
|
|
margin: 15px 0;
|
|
}
|
|
td.description{
|
|
font-size: 12px;
|
|
color: #333;
|
|
}
|
|
header .logo{
|
|
width: 150px;
|
|
position: absolute;
|
|
left: 37%;
|
|
top: -60px;
|
|
}
|
|
.bottom{
|
|
width: 100%;
|
|
position: absolute;
|
|
bottom: 0;
|
|
text-align: center;
|
|
}
|
|
.bottom div{
|
|
display: inline;
|
|
text-align: left;
|
|
top: 0;
|
|
}
|
|
th {
|
|
background: paleGreen;
|
|
}
|
|
table:not(.bottom) tr:nth-child(4n+1),
|
|
tr:nth-child(4n){
|
|
background: #eaffea;
|
|
}
|
|
.ad{
|
|
font-size: 10px;
|
|
margin-top: 20px;
|
|
}
|
|
table{
|
|
width: 100%;
|
|
}
|
|
table.bottom td:nth-child(2n+1){
|
|
text-align: left;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<svg width="42mm" height="37mm" version="1.1" viewBox="0 0 840 727" xmlns="http://www.w3.org/2000/svg" class="logo">
|
|
<path d="m420 20c-200 0-400 120-400 300" fill="none" stroke="#1E8449" stroke-width="40"/>
|
|
<path d="m420 20c200 0 400 120 400 300" fill="none" stroke="#1E8449" stroke-width="40"/>
|
|
<path d="m380 160c-100-160-300 60-100 160" fill="none" stroke="#1E8449" stroke-width="40"/>
|
|
<path d="m276 318c194 102 94 332-104 238" fill="none" stroke="#1E8449" stroke-width="40"/>
|
|
<path d="m20 320c0 100 50 180 160 240" fill="none" stroke="#1E8449" stroke-width="40"/>
|
|
<line x1="440" x2="440" y1="80" y2="442" fill="none" stroke="#1E8449" stroke-width="40"/>
|
|
<path d="m440 320c180 0 152 92 232 192" fill="none" stroke="#1E8449" stroke-width="40"/>
|
|
<path d="m440 100c200 0 280 220 0 220" fill="none" stroke="#1E8449" stroke-width="40"/>
|
|
<path d="m626 578c-80 30-186 62-186-138" fill="none" stroke="#1E8449" stroke-width="40"/>
|
|
<path d="m620 580c116-40 200-150 200-260" fill="none" stroke="#1E8449" stroke-width="40"/>
|
|
<text x="100" y="700" fill="#1E8449" font-family="sans-serif" font-size="112.89px"><tspan x="100" y="700">SRSoftware</tspan></text>
|
|
</svg>
|
|
|
|
<div class="company"><? document.company.name ?></div>
|
|
<div class="receiver address">
|
|
<div class="small"><? document.sender.name ?></div>
|
|
<? document.customer.name ?>
|
|
</div>
|
|
<div class="sender data">
|
|
<? document.sender.name ?><br/>
|
|
<br/>
|
|
<? delivery_date ?>: <? document.delivery ?>
|
|
</div>
|
|
</header>
|
|
<h1><? document.type ?></h1>
|
|
<h2>
|
|
<span class="left"><? document.type ?> <? document.number ?></span>
|
|
<span class="center"><? customer_id ?>: <? document.customer.id ?></span>
|
|
<span class="right"><? document.date ?></span>
|
|
</h2>
|
|
<hr/>
|
|
<div class="head"><? document.head.rendered ?></div>
|
|
<table>
|
|
<tr>
|
|
<th><? position ?></th>
|
|
<th><? description ?></th>
|
|
<th><? unit_price ?></th>
|
|
<th><? amount ?></th>
|
|
<th><? price ?></th>
|
|
<th><? tax_rate ?></th>
|
|
</tr>
|
|
|
|
<!-- positions -->
|
|
|
|
<tr>
|
|
<td class="center"><? number ?></td>
|
|
<td><b><? title ?></b></td>
|
|
<td class="right"><? unit_price ?></td>
|
|
<td class="right"><? amount ?> <? unit ?></td>
|
|
<td class="right"><? net_price ?></td>
|
|
<td class="right"><? tax ?> %</td>
|
|
</tr>
|
|
<tr>
|
|
<td><? optional ?></td>
|
|
<td colspan="5" class="description"><? description.rendered ?></td>
|
|
</tr>
|
|
|
|
<!-- positions -->
|
|
|
|
<tr>
|
|
<th class="right" colspan="5"><? net_sum ?>:</th>
|
|
<th class="right"><? document.net_sum ?></th>
|
|
</tr>
|
|
|
|
<!-- tax list -->
|
|
|
|
<tr class="right">
|
|
<td></td>
|
|
<td><? net_sum ?> + <? rate ?> =</td>
|
|
<td><? gross_sum ?></td>
|
|
<td colspan="2"><? contained_tax ?>:</td>
|
|
<td><? amount ?></td>
|
|
</tr>
|
|
|
|
<!-- tax list -->
|
|
<tr>
|
|
<th class="right" colspan="5"><? gross_sum ?>:</th>
|
|
<th class="right"><? document.gross_sum ?></th>
|
|
</tr>
|
|
</table>
|
|
<div class="foot"><? document.footer.rendered ?></div>
|
|
<table class="bottom">
|
|
<tr>
|
|
<td><? document.sender.name ?></td>
|
|
<td>
|
|
<? tax_id ?>: <? document.sender.tax_id ?><br/>
|
|
<? local_court ?>: <? document.sender.court ?><br/><br/>
|
|
<div class="ad"><? document.type ?> <? created_with|tool=<a href="https://umbrella.srsoftware.de">Umbrella</a>|producer=<a href="https://srsoftware.de">SRSoftware</a> ?></div>
|
|
</td>
|
|
<td>
|
|
<? bank_account ?>:<br/>
|
|
<? document.sender.bank_account ?>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</body>
|
|
</html> |