Files
accounting/index.html
2025-08-24 13:11:31 +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 41057 10271 08692 82635 <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 41057 10271 08692 82635</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;AAAGaklEQVR42uydzbGkOgyF1cXCS0IgFEKD0AiFEFiyoNAr6xzJ7vsiaI96NXXLfLNx6fdIFsXvnC&#43;pv0lfUdFdVj1EZr3KXfSRj6qKbHqseopI0XvihwlIAAB7/W6pgKL1aAXItgNwiZRb7HsVke2oh&#43;erAh77DxMwDGBTPZZTZL7LMz0fHlU9ZLlkvqVU6gfX5ljPxf5x82QCEvANmK/5xlUk4FhVzUoVfSrALp6sei71ZAIGBcistwjsTDVJ9Xv/mZ3CSa2eqR5NwGgAeCYH0AltsB3mmSZ9K8Du0Z//KgEJcECEuvRMCHW3Y3UzVY1PtUi6b3v9Iy3S/2PlBPwwwH8z3NDUApT1ZKjLs7LtcbZepT&#43;/BPzbgOqwGM3UozXEoRc7ZHHf5pGuUZdLkDPVS6sJGANg7sacEAMXy50tSzYnZFfm012k6q5qPj2Zu0rASID61/mS8kzubDY3KMUAFqBs9c6JNM&#43;E/ysBCaDxOeBjCo2PiFpV9lyqoUJN9nWqFWXtbDVTTLoS8PsANcdkBqkwjanfix&#43;1WprnQXBXrNibE0tAAgBg/Drjzv3t51hRdnrl48ZrQUOoGq/307o8Cfh1QNwky3ge1mT3rlzi0cxuRdl6tKi1fl6voSTg9wE7Q11VK857k&#43;ZYD0H51e4Mbpt1&#43;xChMO9NQAIAsA6x6lmzo/JM4ZssqEUixZsom&#43;JozbK99ZOAQQBmkJDzqDf78P1aqRfj35dxiywo2RvV7lwCEmCAXXi9pNyTJc9sF0Jzop4726W1ygziXy/CJGAQABOZC4DX3A0KtWdfhY&#43;U55Q5tGp9ATcBvwxgVItqiTIYUd1X7/rGnZFt3471FFbYLA9KQAII0H07xOuvk/r3NT3CWfuhy7Mz1LXv6a4SMAhAva93lVAeWXKzKiNdaSV77/3cVlixkwlIgHyFumzooDOIpAmuDQ2dGgxt0Uq&#43;q&#43;nyYlwCBgDsG6KZmvI8wlDXAKaCrogJjb2NGjZeryjOJ2AMAFu5lvlO7PZ5UIvrZcJ3dn2t6ibl8TuXgAS0&#43;utyQpdmka4FM9bmmREAwyBZ6mzNZHZ5mr9KwM8DosFbww5F7hzu6kIA3EbzFN8XTNK8IglIgAM4beG9YLZueBM1lG2hnF8wtMPrmYAxAF1Uy4aO0iJh8JMZtSnnmfJ07koSMAjADIp5JstnqQ2JqV5IEVstzRVsMVaRgAR0AC&#43;7AdDiHtxEc0KqXw0hkd61JeDXAVacV7qmKYRpvkSCM54SMpLqmRD&#43;WkKtCRgDwMk8sx0SGncDLFZUNQladH3XU8h9Pm83opmABFBkZDUUlN3UK3QoxqH&#43;6uEQpUvdTUzAAAAan5rl2qBV/FVM4s7NEuKhLrLku19Vk4AEYOoGqfN8&#43;dGQUdvQeJMeWSZlurTSGa8EDAFAg/dE2cyvDEZpTkFRFomQz1qw66vPJ4ooCfh9gM9FXG00j9uJfAdadPs4zXnaurPIjhKQAOrSVoS6pjJ6ov5KTWuJygoy6lNgkaamOEnACAAGI9UiyRSTNBivubpVia4piKiYcqIEJEAYqR6ovyJnalMR3tjDKE5soaDIntuREjAKQJtS4HH9ANwV11whqg2xGnQkU1&#43;MS8DPA5D8xlLEyccqmliN9ddYrnnOFC2yQZyABFAo4AsjbMbzw7EK8et5o5fc7y3BUkVx&#43;UACBgCgQIax3q7Lw/GaOXYxU1RAiXzTGCUgARqbjL4WcYZrw&#43;6rTuhqDeZFfaMA19okYADAt2cKsVnLg7BZ4pVuxJPDFpKAgQA17ICZQKiLCQob0cTMt6sWXad6ej7MPZoJSADaxrJ65BLru1sw06mUoFg5fSMWa3EJGAJATQAFI1OnNcOGEZoejuZxKXjRu&#43;/2JSABX1tpeFh9eQDXXHkzOVb7xrxfAkYCcBmJNYj96QDx3VdRQvFuH2dufP93AsYAxOb/iwCN5e7cmOlCVzMoFstokxMlIAF/3iJpl86imVXpmbqcqc14xiNXkoBBAN3riZ7H9H&#43;UWJnJUKZNUHQ6lAQkIF5Lg0nyXXiY4ovX0rSf7dM246kJGAsQ&#43;kZYJI0XeKOz5w8W2Zqr8rQNzwkYDPDn5aolVIuYoNh8NK/N3HQGJQH/OsBl0FdplVa&#43;a2Z1lUKA7lzIOuNZXoirEzAI4Ov1xK&#43;3u7mySJ9Ol0YZSfl&#43;eyABvw74LwAA//9wYD7CB3CrcAAAAABJRU5ErkJggg=="></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 41057 10271 08692 82635</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>