schreifuchs
9a5ea229bf
All checks were successful
Go / build (push) Successful in 14s
feat: user templates
97 lines
3.0 KiB
HTML
97 lines
3.0 KiB
HTML
<article
|
|
class="absolute bottom-0 left-0 w-full grid [grid-template-columns:240px_1px_1fr] [grid-template-rows:1px_1fr]"
|
|
>
|
|
<!-- Horizontal Separator -->
|
|
<div
|
|
class="separator-h row-start-1 col-span-3 border-t border-black relative"
|
|
>
|
|
<div class="absolute left-10 top-[-52px] rotate-[-90deg]">
|
|
{{ .Scissors }}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Receiver Section -->
|
|
<div class="receiver row-start-2 col-start-1 text-[12pt] p-4">
|
|
<h2 class="m-0 mb-2 text-2xl font-bold">Empfangsschein</h2>
|
|
<div class="payment-details text-[0.9rem] leading-[1.4]">
|
|
<h4 class="mt-0 mb-[0.1em] font-bold">Konto / Zahlbar an</h4>
|
|
<p>
|
|
{{ .ReceiverIBAN }} <br />
|
|
{{ .ReceiverName }} <br />
|
|
{{ .ReceiverStreet }} {{ .ReceiverNumber }} <br />
|
|
{{ .ReceiverZIPCode }} {{ .ReceiverPlace }}
|
|
</p>
|
|
|
|
<h4 class="mt-2 mb-[0.1em] font-bold">Referenz</h4>
|
|
<p>{{ .Reference }}</p>
|
|
|
|
<h4 class="mt-2 mb-[0.1em] font-bold">Zahlbar durch</h4>
|
|
<p>
|
|
{{ .PayeeName }} <br />
|
|
{{ .PayeeStreet }} {{ .PayeeNumber }} <br />
|
|
{{ .PayeeZIPCode }} {{ .PayeePlace }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Vertical Separator -->
|
|
<div
|
|
class="separator-v row-start-2 col-start-2 border-r border-black relative"
|
|
>
|
|
<div class="-ml-8">{{ .Scissors }}</div>
|
|
</div>
|
|
|
|
<!-- Payer Section -->
|
|
<div
|
|
class="payer row-start-2 col-start-3 grid [grid-template-columns:250px_1fr] [grid-template-rows:2em_1fr] p-4 gap-4 w-full"
|
|
>
|
|
<h2 class="row-start-1 col-span-1 m-0 text-2xl font-bold">Zahlteil</h2>
|
|
|
|
<!-- QR Code Section -->
|
|
<div class="qr-code row-start-2 col-start-1 flex flex-col justify-between">
|
|
<div class="qr-section-img relative w-full">
|
|
<img src="{{ .GetQR }}" class="w-full" />
|
|
<div
|
|
class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-[1] scale-36"
|
|
>
|
|
<!-- cross gets replaced with svg-->
|
|
{{ .Cross }}
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="qr-section-info grid grid-cols-2 grid-rows-2 justify-items-center"
|
|
>
|
|
<h4 class="m-0 font-bold">Währung</h4>
|
|
<h4 class="m-0 font-bold">Betrag</h4>
|
|
<p class="m-0">CHF</p>
|
|
<p class="m-0">{{ .Amount }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Payment Details -->
|
|
<div
|
|
class="payment-details row-start-2 col-start-2 text-[0.9rem] leading-[1.4]"
|
|
>
|
|
<h4 class="mt-0 mb-[0.1em] font-bold">Konto / Zahlbar an</h4>
|
|
<p>
|
|
{{ .ReceiverIBAN }} <br />
|
|
{{ .ReceiverName }} <br />
|
|
{{ .ReceiverStreet }} {{ .ReceiverNumber }} <br />
|
|
{{ .ReceiverZIPCode }} {{ .ReceiverPlace }}
|
|
</p>
|
|
|
|
<h4 class="mt-2 mb-[0.1em] font-bold">Referenz</h4>
|
|
|
|
<p>{{ .Reference }}</p>
|
|
|
|
<h4 class="mt-2 mb-[0.1em] font-bold">Zahlbar durch</h4>
|
|
<p>
|
|
{{ .PayeeName }} <br />
|
|
{{ .PayeeStreet }} {{ .PayeeNumber }} <br />
|
|
{{ .PayeeZIPCode }} {{ .PayeePlace }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</article>
|