Files
accounting/index.html
2025-08-24 00:24:40 +02:00

710 lines
19 KiB
HTML

<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Rechnung vom 24.08.2025</title>
<style>
@page {
size: A4;
padding: 2cm;
}
@page:first {
padding: 0;
}
@media print {
.page,
.page-break {
break-after: page;
}
}
.first-page {
margin-left: 2cm;
margin-right: 2cm;
}
body {
font-family: sans-serif;
font-size: 12pt;
color: #333;
}
section {
margin-bottom: 3em;
}
p {
margin-top: 0.25em;
margin-bottom: 0.5em;
}
header {
display: flex;
justify-content: space-between;
margin-bottom: 40px;
h2 {
margin-top: 0;
}
}
h1 {
margin: 0;
font-size: 2em;
}
h2 {
margin-top: 0.5em;
}
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
}
table,
th,
td {
border: 1px solid #ccc;
}
th,
td {
padding: 0.25em 0.5em;
text-align: left;
}
th {
background-color: #f2f2f2;
}
article {
margin-bottom: 20px;
}
.issue-title {
display: flex;
justify-content: space-between;
align-items: end;
margin-top: 2em;
margin-bottom: 0.5em;
h3,
p {
margin: 0;
}
}
</style>
<style>
.c6ee15365-8f47-4dab-8bee-2a56a7916c57 {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
display: grid;
grid-template-columns: 240px 1px 1fr;
grid-template-rows: 1px 1fr;
.separator-h {
grid-row: 1;
grid-column: 1 / span 3;
border-top: 1px solid black;
svg {
transform: rotate(-90deg);
margin-top: -52px;
}
}
.separator-v {
grid-row: 2;
grid-column: 2;
border-right: 1px solid black;
svg {
margin-left: -32px;
}
}
.receiver {
grid-row: 2;
grid-column: 1;
font-size: 12pt;
padding: 1em;
h2 {
margin: 0;
margin-bottom: 0.5em;
}
h4 {
margin-bottom: 0.1em;
}
}
.payer {
grid-row: 2;
grid-column: 3;
display: grid;
grid-template-columns: 250px 1fr;
grid-template-rows: 2em 1fr;
padding: 1em;
gap: 1em;
width: 100%;
h2 {
grid-row: 1;
grid-column: 1 / 2;
margin: 0;
}
h4 {
margin-bottom: 0.1em;
}
.qr-code {
grid-row: 2;
grid-column: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
.qr-section-img {
position: relative;
width: 100%;
img {
width: 100%;
}
svg {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
width: 40px;
}
}
.qr-section-info {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
justify-items: center;
p,
h4 {
margin: 0;
}
}
}
.payment-details {
grid-row: 2;
grid-column: 2;
font-size: 0.9rem;
line-height: 1.4;
}
}
}
</style>
</head>
<body>
<header class="first-page" style="margin-top: 2cm">
<div class="company">
<h2>schreifuchs.ch</h2>
<p>
Kilchbergerweg 1 <br />
3052 Zollikofen <br />
Niklas Breitenstein
</p>
<p></p>
</div>
<div class="invoice-info">
<p>
<strong>Rechnung:</strong> 20 25082 32224 30630 09759 35659 <br />
<strong>Datum:</strong> 24.08.2025 <br />
</p>
</div>
</header>
<section class="client first-page">
<h2>Rechnung an:</h2>
<p>
Lou Taylor <br />
Alpenstrasse 22 <br />
4950 Huttwil <br />
Loana Groux
</p>
</section>
<section class="page p1 first-page">
<article>
<table>
<thead>
<tr>
<th style="min-width: 3.5em">FID</th>
<th>Name</th>
<th>Aufwand</th>
<th style="min-width: 5.5em">Preis</th>
</tr>
</thead>
<tbody>
<tr>
<td style="font-family: monospace">API-6</td>
<td>Multilingual</td>
<td>2.50 h</td>
<td>40.00 CHF</td>
</tr>
<tr>
<td style="font-family: monospace">ACC-7</td>
<td>asdfasdf</td>
<td>1.72 h</td>
<td>27.45 CHF</td>
</tr>
<tr>
<td style="font-family: monospace">ACC-6</td>
<td>ss</td>
<td>1.72 h</td>
<td>27.45 CHF</td>
</tr>
<tr>
<td style="font-family: monospace">ACC-5</td>
<td>a</td>
<td>1.72 h</td>
<td>27.45 CHF</td>
</tr>
<tr>
<td style="font-family: monospace">ACC-4</td>
<td>Hello ```info duration: 1h 43min ``` # adökfjaösldkjflaa ## ASDFADS ### adllglggl</td>
<td>1.72 h</td>
<td>27.45 CHF</td>
</tr>
<tr>
<td style="font-family: monospace">ACC-3</td>
<td>ss</td>
<td>1.72 h</td>
<td>27.45 CHF</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="2" style="text-align: right">Summe:</th>
<td>11.08 h</td>
<td>177.35</td>
</tr>
</tfoot>
</table>
</article>
<article class="c6ee15365-8f47-4dab-8bee-2a56a7916c57">
<div class="separator-h"><?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="64"
height="106.131"
viewBox="0 0 16.933333 28.080496"
version="1.1"
id="svg851"
inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
sodipodi:docname="scissors.svg"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96">
<defs
id="defs845" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="2.6582031"
inkscape:cx="-135.5963"
inkscape:cy="106.75833"
inkscape:document-units="mm"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:window-width="1920"
inkscape:window-height="1080"
inkscape:window-x="86"
inkscape:window-y="117"
inkscape:window-maximized="0" />
<metadata
id="metadata848">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-52.847684,-108.31232)">
<text
y="-57.540855"
x="117.23324"
class="st2 st3"
id="text18"
style="font-size:11.17903996px;font-family:ZapfDingbatsITC;stroke-width:0.26458332"
transform="rotate(90)"></text>
</g>
</svg>
</div>
<div class="receiver">
<div class="payment-details">
<div>
<h2>Empfangsschein</h2>
<h4 style="margin-top: 0">Konto / Zahlbar an</h4>
<p>
CH06 0079 0042 5877 0443 7 <br />
schreifuchs.ch <br />
Kilchbergerweg 1 <br />
3052 Zollikofen
</p>
</div>
<div>
<h4>Referenz</h4>
<p>20 25082 32224 30630 09759 35659</p>
</div>
<div>
<h4>Zahlbar durch</h4>
<p>
Lou Taylor <br />
Alpenstrasse 22 <br />
4950 Huttwil
</p>
</div>
</div>
</div>
<div class="separator-v"><?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="64"
height="106.131"
viewBox="0 0 16.933333 28.080496"
version="1.1"
id="svg851"
inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
sodipodi:docname="scissors.svg"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96">
<defs
id="defs845" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="2.6582031"
inkscape:cx="-135.5963"
inkscape:cy="106.75833"
inkscape:document-units="mm"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:window-width="1920"
inkscape:window-height="1080"
inkscape:window-x="86"
inkscape:window-y="117"
inkscape:window-maximized="0" />
<metadata
id="metadata848">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-52.847684,-108.31232)">
<text
y="-57.540855"
x="117.23324"
class="st2 st3"
id="text18"
style="font-size:11.17903996px;font-family:ZapfDingbatsITC;stroke-width:0.26458332"
transform="rotate(90)"></text>
</g>
</svg>
</div>
<div class="payer">
<h2>Zahlteil</h2>
<div class="qr-code">
<div class="qr-section-img">
<image src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAIAAQMAAADOtka5AAAABlBMVEX///8AAABVwtN&#43;AAAGg0lEQVR42uydvY2tQAyFjQgmpARKoTQojVIogZAArZ/sc2y4&#43;yq4syZaIe63yci/xx5RPMd0ij2j/oiKbrLoLjLp2a6mtwyqKrLqvughIk2vkT8sQAEA2Ox3swGa2qcGkHUD4BRpl/jvVUTW3T6eTgPc/g8L0A1gVd3nQ2S62j3eAz9V3WU&#43;ZbqkGXXAsdmXY/Y/Ln5ZgAJ8AqZzuprGs627LKpupZreBvCDJ4ses31ZgE4BMqnqbY7JH3dC8bidwpdqnmnSSwrQGwCeyQDx2oMR1WNW90yj/gzkLvhXl8h/rq0AfxyQoS49E0LddV/CTJnxMYuk27rZS1qk/2PlAnwxIJ4Jbmj0dx6L6MFQl9/KuuW3dpR&#43;PQX42wBzWDuiGfvULJInTfuyyxy&#43;LSJdC3UtAEbOZIdWC9AJwFyTJTLnZCGO&#43;RsPdS3jOeLIDK&#43;DZO7K8unR3VUBOgF42OFvpyiMMPWFQWkO8ABldaw8nukHvy9AAYShLssl5pj8eK1RLjHrc8uAVCqLspZQu5nKWLkA3w7QbfFQ1769eZIiQsG3tzx5kLsrVuzFCysFKIADNrNIaOgo&#43;jlufAQAL8qOPzKE8ZrREGqo16DLU4AOAB7iML0R5s6f5ZKIZjYvyqodJPXWzytGKsC3A/z14Z295kZC6YNwvK44MxLdPkQowgi4AAWgJmDD6ZIJ7kbornZPj1CARVF2pROzLNtbPwiLC9ADwIORp1ziFknDTMFdqRfn8VJmlOyd&#43;tTdClCATXi8pF3jPeqrGEeThNzZD633gxD/ZhWnAH0AmMicACB&#43;RaH2eFfhM&#43;U5aLuYBxWgCwBKrayWhH7APdNC0xFnRtZt3SOWucTzoAIUgABIj1h/RS0OeVTEvxJBLVRKXrez38NdFaAXAOpmyIhDeeTJzaKMdL0VrJHyIKP2wgprKAUoAFIetAvZ0EFn0F&#43;zW4iGjgVDa8bEl5kuVnUL0APgJT0KGQmlAq6CdrUaGnsrNWw8XlmEKUAHAJ4Ze8tyibLb56YDx8uF7&#43;z62km6ouxWgAIQ4Cfx1e1jtQQd4gkBcPSSUViB/PUeNZOuAnw/IBt7U2rkNYrz84kA&#43;H7ZHvgwTNKgZF&#43;AAkhoWlXzePEk7ijKairbsoc4x9AOguICdAHwVvCe54j&#43;ZkNyk4JnKOcl34a7kgJ0AshQV0/IVyVfinCCQp9aGhVGmmMVBSjA8Mz2RdltZDNYtwWDn&#43;j9DLRTr4aQhOqxAF0AEKHQNeW8nayaZkpDVOC1NPNMwqFgn6AoQBeA9/CUYDxGuERi9qKqS9Cy67scEl4sDEoBCpAAJzS9x9weIAvnw1/1V8HUuL3LPQMF6AMQozTYP8OU52kFe3YDjbuHusiSr/BMESwX4M8DNFWL0mK2j/IBTJI/0iMv0bkuLXWuUoBOAGjwPtNXfmRCPoCi7D1G7pz7JlzoGkWUAnQAiLmIU1iGT&#43;V77EDLbh9Nz&#43;HrzlxHoioFKEDo0hDMwDPdaWeoaW1Xu59vfXmAW6TxUZwUoAeAcCOA5TxYIsEjsxzz&#43;VqVSG3JrLERixMYBShARKoxdcOcKaYiorGHUZzcQkGR/XtovADfD9jWbPe1WzjBC3fFNVcYoUixGnQkrNgXoBcAttLE1rvxU1tyTrGf6FmqePxee1eAAjBuiRiH2dHnZokLU3g4s/RkbpGemn8BugBwzVUcJOTDSxbnuVyTNRQuD0iNUQEK8BrJgvG5ud7IV5T4BMWn0FUQDcVGAZb8C9ABIJaRYG2z3rmt1w7SyQsFoBT4pYJ&#43;thMV4PsBz1Lvs1GXliOamPmORUShUz0iH8YezQIUgAtZd4gCcBdJbox/Le1lnryylzxxmR6VsgXoAUBNgBmfdsWCZjohhC0SG622kA9gzZUMec1AAQqQW2mgnL9Z3F8VewIsmtHYfhWrfXPerwA9ATR&#43;r3l1QObOTwklun3wVrn/uwB9AHLz/0mA5nJ3bswMf&#43;UGxVNfhZwIC2wKUAB530XCzWa54VnpmV450zPjiQtK0iIV4PsBr9sTrxA8s51zxO2JT9f3Y4JCU4dSgALkbWloF&#43;ZIlgPytjR9z/bpM&#43;OpBegLMLGGkqsl9hAKxIUCvE8Aa67a/Wx4LkBPgDNNx6MxCtUiJijWGM1jPpxFmAIU4HV74tmeSivvNXNNQSNANy5knXAtL8TVBegE8HF74sfd3VhZ5FLE1KVRRtLedw8U4PsB/wIAAP//irIo4ZGkhQwAAAAASUVORK5CYII="></image>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Generator: Adobe Illustrator 20.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.1"
id="Ebene_2"
x="0px"
y="0px"
viewBox="0 0 128 128"
xml:space="preserve"
sodipodi:docname="ch-cross.svg"
width="128"
height="128"
inkscape:export-filename="/home/irvin/Work/repos/swiss-qr-invoice/assets/raw/ch-cross.png"
inkscape:export-xdpi="232.22856"
inkscape:export-ydpi="232.22856"
inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
style="shape-rendering:crispEdges"><metadata
id="metadata17"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
id="defs15" /><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1668"
inkscape:window-height="1021"
id="namedview13"
showgrid="false"
inkscape:document-units="px"
units="px"
inkscape:zoom="2.8284271"
inkscape:cx="-38.018193"
inkscape:cy="61.405051"
inkscape:window-x="0"
inkscape:window-y="31"
inkscape:window-maximized="0"
inkscape:current-layer="Ebene_2"><inkscape:grid
type="xygrid"
id="grid916" /></sodipodi:namedview>
<style
type="text/css"
id="style2">
.st0{fill:#FFFFFF;}
.st1{fill:none;stroke:#FFFFFF;stroke-width:1.4357;stroke-miterlimit:10;}
</style>
<g
id="g4736"
transform="matrix(4.8380969,0,0,4.8380389,-1.9834927e-5,9.0008541e-4)"><polygon
transform="matrix(1.3598365,0,0,1.3598365,-0.23403522,-0.23403522)"
style="fill:#000000;fill-opacity:1;stroke-width:0.73538256"
id="polygon4"
points="0.7,0.7 0.7,1.6 0.7,18.3 0.7,19.1 1.6,19.1 18.3,19.1 19.1,19.1 19.1,18.3 19.1,1.6 19.1,0.7 18.3,0.7 1.6,0.7 " /><rect
style="fill:#ffffff;fill-opacity:1;stroke-width:1"
id="rect6"
height="14.958201"
width="4.4874606"
class="st0"
y="5.2231627"
x="11.034758" /><rect
style="fill:#fffff9;fill-opacity:1;stroke-width:1"
id="rect8"
height="4.4874606"
width="14.958201"
class="st0"
y="10.526525"
x="5.7313952" /><polygon
transform="matrix(1.3598207,0,0,1.3598361,-0.2338788,-0.23403126)"
style="fill:none;stroke:#ffffff;stroke-width:1.05601561;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
id="polygon10"
points="1.6,0.7 0.7,0.7 0.7,1.6 0.7,18.3 0.7,19.1 1.6,19.1 18.3,19.1 19.1,19.1 19.1,18.3 19.1,1.6 19.1,0.7 18.3,0.7 "
class="st1" /></g>
</svg>
</div>
<div class="qr-section-info">
<h4>Währung</h4>
<h4>Betrag</h4>
<p>CHF</p>
<p>177.35</p>
</div>
</div>
<div class="payment-details">
<div>
<h4 style="margin-top: 0">Konto / Zahlbar an</h4>
<p>
CH06 0079 0042 5877 0443 7 <br />
schreifuchs.ch <br />
Kilchbergerweg 1 <br />
3052 Zollikofen
</p>
</div>
<div>
<h4>Referenz</h4>
<p>20 25082 32224 30630 09759 35659</p>
</div>
<div>
<h4>Zahlbar durch</h4>
<p>
Lou Taylor <br />
Alpenstrasse 22 <br />
4950 Huttwil
</p>
</div>
</div>
</div>
</article>
</section>
<section>
<h2 style="margin-top: 0">Details zu den Features</h2>
<article>
<div class="issue-title">
<h3>
<span style="font-family: monospace">API-6</span>: Multilingual
</h3>
<p>Fertiggestellt: 21.08.2025 18:05</p>
</div>
<p>The application must support English and German.</p>
<h5 id="todo-s">TODO&rsquo;s</h5>
<ul>
<li><input type="checkbox" checked disabled> Add multiple languages to Pages</li>
<li><input type="checkbox" checked disabled> Add multiple languages to Events</li>
</ul>
</article>
<article>
<div class="issue-title">
<h3>
<span style="font-family: monospace">ACC-7</span>: asdfasdf
</h3>
<p>Fertiggestellt: 23.08.2025 14:56</p>
</div>
<h4 id="adökfjaösldkjflaa">adökfjaösldkjflaa</h4>
<h5 id="asdfads">ASDFADS</h5>
<h6 id="adllglggl">adllglggl</h6>
</article>
<article>
<div class="issue-title">
<h3>
<span style="font-family: monospace">ACC-6</span>: ss
</h3>
<p>Fertiggestellt: 23.08.2025 14:56</p>
</div>
<h4 id="adökfjaösldkjflaa">adökfjaösldkjflaa</h4>
<h5 id="asdfads">ASDFADS</h5>
<h6 id="adllglggl">adllglggl</h6>
</article>
<article>
<div class="issue-title">
<h3>
<span style="font-family: monospace">ACC-5</span>: a
</h3>
<p>Fertiggestellt: 23.08.2025 14:56</p>
</div>
<h4 id="adökfjaösldkjflaa">adökfjaösldkjflaa</h4>
<h5 id="asdfads">ASDFADS</h5>
<h6 id="adllglggl">adllglggl</h6>
</article>
<article>
<div class="issue-title">
<h3>
<span style="font-family: monospace">ACC-4</span>: Hello ```info duration: 1h 43min ``` # adökfjaösldkjflaa ## ASDFADS ### adllglggl
</h3>
<p>Fertiggestellt: 23.08.2025 14:56</p>
</div>
<h4 id="adökfjaösldkjflaa">adökfjaösldkjflaa</h4>
<h5 id="asdfads">ASDFADS</h5>
<h6 id="adllglggl">adllglggl</h6>
</article>
<article>
<div class="issue-title">
<h3>
<span style="font-family: monospace">ACC-3</span>: ss
</h3>
<p>Fertiggestellt: 23.08.2025 14:55</p>
</div>
<h4 id="adökfjaösldkjflaa">adökfjaösldkjflaa</h4>
<h5 id="asdfads">ASDFADS</h5>
<h6 id="adllglggl">adllglggl</h6>
</article>
</section>
</body>
</html>