feat: use tailwind css
This commit is contained in:
@@ -1,111 +0,0 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,70 +1,96 @@
|
||||
<article class="c6ee15365-8f47-4dab-8bee-2a56a7916c57">
|
||||
<div class="separator-h">{{ .Scissors }}</div>
|
||||
<div class="receiver">
|
||||
<div class="payment-details">
|
||||
<div>
|
||||
<h2>Empfangsschein</h2>
|
||||
<h4 style="margin-top: 0">Konto / Zahlbar an</h4>
|
||||
<p>
|
||||
{{ .ReceiverIBAN }} <br />
|
||||
{{ .ReceiverName }} <br />
|
||||
{{ .ReceiverStreet}} {{.ReceiverNumber}} <br />
|
||||
{{ .ReceiverZIPCode }} {{ .ReceiverPlace }}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4>Referenz</h4>
|
||||
<p>{{ .Reference }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4>Zahlbar durch</h4>
|
||||
<p>
|
||||
{{ .PayeeName }} <br />
|
||||
{{ .PayeeStreet}} {{.PayeeNumber}} <br />
|
||||
{{ .PayeeZIPCode }} {{ .PayeePlace }}
|
||||
</p>
|
||||
</div>
|
||||
<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>
|
||||
<div class="separator-v">{{ .Scissors }}</div>
|
||||
<div class="payer">
|
||||
<h2>Zahlteil</h2>
|
||||
<div class="qr-code">
|
||||
<!-- Replace with your QR code image or generated SVG -->
|
||||
<div class="qr-section-img">
|
||||
<image src="{{ .GetQR }}"></image>
|
||||
{{ .Cross }}
|
||||
|
||||
<!-- 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">
|
||||
<h4>Währung</h4>
|
||||
<h4>Betrag</h4>
|
||||
<p>CHF</p>
|
||||
<p>{{ .Amount }}</p>
|
||||
<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>
|
||||
<div class="payment-details">
|
||||
<div>
|
||||
<h4 style="margin-top: 0">Konto / Zahlbar an</h4>
|
||||
<p>
|
||||
{{ .ReceiverIBAN }} <br />
|
||||
{{ .ReceiverName }} <br />
|
||||
{{ .ReceiverStreet}} {{.ReceiverNumber}} <br />
|
||||
{{ .ReceiverZIPCode }} {{ .ReceiverPlace }}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4>Referenz</h4>
|
||||
<p>{{ .Reference }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4>Zahlbar durch</h4>
|
||||
<p>
|
||||
{{ .PayeeName }} <br />
|
||||
{{ .PayeeStreet}} {{.PayeeNumber}} <br />
|
||||
{{ .PayeeZIPCode }} {{ .PayeePlace }}
|
||||
</p>
|
||||
</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>
|
||||
|
||||
Reference in New Issue
Block a user