working on document rendering

This commit is contained in:
2025-07-16 18:21:35 +02:00
parent 07ef168226
commit 877edadd50
11 changed files with 611 additions and 12 deletions

View File

@@ -0,0 +1,224 @@
<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 number ?>: <? document.customer.id ?></span>
<span class="right"><? document.date ?></span>
</h2>
<hr/>
<div class="head"><? document.head ?></div>
<table>
<tr>
<th><? Position ?></th>
<th><? Description ?></th>
<th><? Price per unit ?></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 ?>&nbsp;<? unit ?></td>
<td class="right"><? net_price ?></td>
<td class="right"><? tax ?>&nbsp;%</td>
</tr>
<tr>
<td><? optional ?></td>
<td colspan="5" class="description"><? description ?></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 ?>&nbsp;+&nbsp;<? rate ?>&nbsp;=</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 ?></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 ?> <a href="https://umbrella.srsoftware.de">Umbrella</a> <? by ?> <a href="https://srsoftware.de">SRSoftware</a></div>
</td>
<td>
<? Bank account ?>:<br/>
<? document.sender.bank_account ?>
</td>
</tr>
</table>
<!-- <div class="bottom">
<div class="company">
<? document.sender.name ?>
</div>
<div class="tax_data">
<? Tax id ?>: <? document.sender.tax_id ?><br/>
<? local court ?>: <? document.sender.court ?><br/><br/>
<div class="ad"><? document.type ?> <? created with ?> <a href="https://umbrella.srsoftware.de">Umbrella</a> <? by ?> <a href="https://srsoftware.de">SRSoftware</a></div>
</div>
<div class="bank_account">
<? Bank account ?>:<br/>
<? document.sender.bank_account ?>
</div>
</div> -->
</body>
</html>