refactor(templates): Dynamic template loading
This commit is contained in:
1
static/images/certificate_footer.base64
Normal file
1
static/images/certificate_footer.base64
Normal file
File diff suppressed because one or more lines are too long
1
static/images/error.base64
Normal file
1
static/images/error.base64
Normal file
File diff suppressed because one or more lines are too long
1
static/images/sponsoringheader.base64
Normal file
1
static/images/sponsoringheader.base64
Normal file
File diff suppressed because one or more lines are too long
80
static/templates/card/de.html
Normal file
80
static/templates/card/de.html
Normal file
@@ -0,0 +1,80 @@
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf8">
|
||||
<title>Sponsoring contract</title>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">
|
||||
<style>
|
||||
.sheet {
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
page-break-after: always;
|
||||
padding: 1.2cm 2cm 1.2cm 2cm
|
||||
}
|
||||
|
||||
body.A4 .sheet {
|
||||
width: 210mm;
|
||||
height: 296mm
|
||||
}
|
||||
|
||||
.runnercard {
|
||||
border: 1px solid;
|
||||
height: 5.5cm;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="A4 landscape">
|
||||
{{ range .CardSegments }}
|
||||
<div class="sheet">
|
||||
<div class="columns is-multiline">
|
||||
{{ range .Cards }}
|
||||
<div class="column is-half runnercard">
|
||||
{{ if ne .Code "" }}
|
||||
<p class="title is-5" style="text-align: center; padding-bottom: 0; margin-top: -0.75rem;">{{ $.EventName }}</p>
|
||||
<p style="text-align: center; margin-top: -1.5rem; font-size: small;">{{ $.CardSubtitle }}</p>
|
||||
<p style="font-size: small;">Mit Unterstützung von:</p>
|
||||
<div class="columns" style="height: 6rem; overflow: hidden;">
|
||||
<div class="column is-half">
|
||||
<!--SPONSOR LOGO HERE-->
|
||||
<img style="vertical-align: revert; margin-top: auto; object-fit: cover; max-height: 2cm;"
|
||||
src="data:image/png;base64,{{ sponsorLogo .ID }}" />
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
<!--BARCODE HERE-->
|
||||
<img style="vertical-align: revert; margin-top: auto; object-fit: cover; max-height: 5rem;"
|
||||
src="data:image/png;base64,{{ barcode .Code $.BarcodeFormat $.BarcodePrefix }}" />
|
||||
<p style="font-size: 0.6rem; text-align: center; margin: 0; padding: 0;">{{ .Code }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<p>{{ .Runner.LastName }}, {{ .Runner.FirstName }} {{ .Runner.MiddleName }}</p>
|
||||
<p>{{ .Runner.Group.Name }}</p>
|
||||
{{ end}}
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="sheet">
|
||||
<div class="columns is-multiline">
|
||||
{{ range .CardsSwapped }}
|
||||
<div class="column is-half runnercard" style="justify-content: center; align-items: center; text-align: center;">
|
||||
{{ if ne .Code "" }}
|
||||
<!--SPONSOR LOGO FIRST-->
|
||||
<div style="height: 2cm; padding: 0 0 1cm 0">
|
||||
<img style="object-fit: cover; max-height: 2cm;" src="data:image/png;base64,{{ sponsorLogo .ID }}" />
|
||||
</div>
|
||||
<img style="object-fit: cover; max-height: 6rem; position: relative;"
|
||||
src="data:image/png;base64,{{ barcode .Code $.BarcodeFormat $.BarcodePrefix }}" />
|
||||
<p style="font-size: 1rem; text-align: center; margin: 0; padding: 0;">{{ .Code }}</p>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
{{ end}}
|
||||
</body>
|
||||
|
||||
</html>
|
||||
75
static/templates/card/en.html
Normal file
75
static/templates/card/en.html
Normal file
@@ -0,0 +1,75 @@
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf8">
|
||||
<title>Sponsoring contract</title>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">
|
||||
<style>
|
||||
.sheet {
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
page-break-after: always;
|
||||
padding: 1.2cm 2cm 1.2cm 2cm
|
||||
}
|
||||
|
||||
body.A4 .sheet {
|
||||
width: 210mm;
|
||||
height: 296mm
|
||||
}
|
||||
|
||||
.runnercard {
|
||||
border: 1px solid;
|
||||
height: 5.5cm;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="A4 landscape">
|
||||
{{ range .CardSegments }}
|
||||
<div class="sheet">
|
||||
<div class="columns is-multiline">
|
||||
{{ range .Cards }}
|
||||
<div class="column is-half runnercard">
|
||||
<p class="title is-5" style="text-align: center; padding-bottom: 0; margin-top: -0.75rem;">{{ $.EventName }}</p>
|
||||
<p style="text-align: center; margin-top: -1.5rem; font-size: small;">{{ $.CardSubtitle }}</p>
|
||||
<p style="font-size: small;">Supported by:</p>
|
||||
<div class="columns" style="height: 6rem; overflow: hidden;">
|
||||
<div class="column is-half">
|
||||
<!--SPONSOR LOGO HERE-->
|
||||
<img style="vertical-align: revert; margin-top: auto; object-fit: cover; max-height: 2cm;"
|
||||
src="data:image/png;base64,{{ sponsorLogo .ID }}" />
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
<!--BARCODE HERE-->
|
||||
<img style="vertical-align: revert; margin-top: auto; object-fit: cover; max-height: 5rem;"
|
||||
src="data:image/png;base64,{{ barcode .Code $.BarcodeFormat $.BarcodePrefix }}" />
|
||||
<p style="font-size: 0.6rem; text-align: center; margin: 0; padding: 0;">{{ .Code }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<p>{{ .Runner.LastName }}, {{ .Runner.FirstName }} {{ .Runner.MiddleName }}</p>
|
||||
<p>{{ .Runner.Group.Name }}</p>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="sheet">
|
||||
<div class="columns is-multiline">
|
||||
{{ range .CardsSwapped }}
|
||||
<div class="column is-half runnercard" style="justify-content: center; align-items: center; text-align: center;">
|
||||
<!--SPONSOR LOGO FIRST-->
|
||||
<div style="height: 2cm; padding: 0 0 1cm 0">
|
||||
<img style="object-fit: cover; max-height: 2cm;" src="data:image/png;base64,{{ sponsorLogo .ID }}" />
|
||||
</div>
|
||||
<img style="object-fit: cover; max-height: 6rem; position: relative;" src="data:image/png;base64,{{ barcode .Code $.BarcodeFormat $.BarcodePrefix }}" />
|
||||
<p style="font-size: 1rem; text-align: center; margin: 0; padding: 0;">{{ .Code }}</p>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
{{ end}}
|
||||
</body>
|
||||
|
||||
</html>
|
||||
102
static/templates/certificate/de.html
Normal file
102
static/templates/certificate/de.html
Normal file
File diff suppressed because one or more lines are too long
102
static/templates/certificate/en.html
Normal file
102
static/templates/certificate/en.html
Normal file
File diff suppressed because one or more lines are too long
124
static/templates/contract/de.html
Normal file
124
static/templates/contract/de.html
Normal file
@@ -0,0 +1,124 @@
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf8">
|
||||
<title>Sponsoring contract</title>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">
|
||||
<style>
|
||||
.sheet {
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
page-break-after: always;
|
||||
}
|
||||
|
||||
body.A5.landscape .sheet {
|
||||
width: 210mm;
|
||||
height: 147mm
|
||||
}
|
||||
|
||||
.column {
|
||||
margin-bottom: -20;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="A5 landscape">
|
||||
{{ range .Runners }}
|
||||
<div class="sheet">
|
||||
<img id="header_img" width="100%" src="data:image/png;base64,{{ $.SponsoringHeader}}" />
|
||||
<div style=" padding: 0 1rem 0 1rem;">
|
||||
<div class="columns">
|
||||
<div class="column is-10">
|
||||
<div class="columns" style="padding-bottom: 0;">
|
||||
<div class="column is-two-fifths">
|
||||
<p style="font-size: large; font-weight: bold;">Sponsoringerklärung</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p style="font-size: x-small; vertical-align: revert; margin-top: auto;">Bitte in DRUCKBUCHSTABEN
|
||||
schreiben
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<p>Ich bin/ Wir sind bereit anlässlich des {{ $.EventName }}</p>
|
||||
<div class="columns">
|
||||
<div class="column is-9">
|
||||
<span style="border-bottom: 1px solid; width: 100%; display: block;">{{ .FirstName }}
|
||||
{{ .MiddleName }}</span>
|
||||
<p style="font-size: x-small; display: block;">Vorname</p>
|
||||
</div>
|
||||
<div class="column is-3">
|
||||
<span style="border-bottom: 1px solid; width: 100%; display: block;">{{ .ID }}</span>
|
||||
<p style="font-size: x-small; display: block;">ID</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<img style="vertical-align: revert; margin-top: auto; object-fit: cover; max-height: 2cm;"
|
||||
src="data:image/png;base64,{{ barcode (printf "%d" .ID) $.BarcodeFormat $.BarcodePrefix }}" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns" style="padding-top: 1rem;">
|
||||
<div class="column is-6">
|
||||
<span style="border-bottom: 1px solid; width: 100%; display: block;">{{ .LastName }}</span>
|
||||
<p style="font-size: x-small; display: block;">Nachname</p>
|
||||
</div>
|
||||
<div class="column is-6">
|
||||
<span style="border-bottom: 1px solid; width: 100%; display: block;">{{ .Group.Name }}</span>
|
||||
<p style="font-size: x-small; display: block;">Team/ Klasse</p>
|
||||
</div>
|
||||
</div>
|
||||
<p style="margin-top: -0.5rem">mit einem Betrag von _____ {{ $.CurrencySymbol }} pro gelaufenem Kilometer zu
|
||||
unterstützen.</p>
|
||||
<div class="columns" style="margin-top: -1rem;">
|
||||
<div class="column is-6">
|
||||
<span style="border-bottom: 1px solid; width: 100%; display: block;"> </span>
|
||||
<p style="font-size: x-small; display: block;">Nachname</p>
|
||||
</div>
|
||||
<div class="column is-6">
|
||||
<span style="border-bottom: 1px solid; width: 100%; display: block;"> </span>
|
||||
<p style="font-size: x-small; display: block;">Vorname</p>
|
||||
</div>
|
||||
</div>
|
||||
<p style="font-size: medium; margin-top: -0.5rem;">Adresse (Sponsor)</p>
|
||||
<p style="font-size: x-small;">(Muss ausgefüllt werden, wenn Sie eine Spendenquittung benötigen -
|
||||
Spendenquittungen können erst ab einem Gesamtbetrag von {{ $.ReceiptMinimumAmount }}{{ $.CurrencySymbol }}
|
||||
ausgestellt werden)</p>
|
||||
<div class="columns" style="margin-top: -1rem;">
|
||||
<div class="column is-8">
|
||||
<span style="border-bottom: 1px solid; width: 100%; display: block;"> </span>
|
||||
<p style="font-size: x-small; display: block;">Straße</p>
|
||||
</div>
|
||||
<div class="column is-4">
|
||||
<span style="border-bottom: 1px solid; width: 100%; display: block;"> </span>
|
||||
<p style="font-size: x-small; display: block;">Hausnummer</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns" style="margin-top: -1rem;">
|
||||
<div class="column is-4">
|
||||
<span style="border-bottom: 1px solid; width: 100%; display: block;"> </span>
|
||||
<p style="font-size: x-small; display: block;">Postleitzahl</p>
|
||||
</div>
|
||||
<div class="column is-8">
|
||||
<span style="border-bottom: 1px solid; width: 100%; display: block;"> </span>
|
||||
<p style="font-size: x-small; display: block;">Stadt</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns" style="margin-top: -1rem;">
|
||||
<div class="column is-7">
|
||||
<span style="border-bottom: 1px solid; width: 100%; display: block;"> </span>
|
||||
<p style="font-size: x-small; display: block;">Ort, Datum</p>
|
||||
</div>
|
||||
<div class="column is-5">
|
||||
<span style="border-bottom: 1px solid; width: 100%; display: block;"> </span>
|
||||
<p style="font-size: x-small; display: block;">Unterschrift</p>
|
||||
</div>
|
||||
</div>
|
||||
<p style="font-size: xx-small; overflow: hidden; height: 4rem; text-align: center;"> {{ $.Disclaimer }}</p>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</body>
|
||||
|
||||
</html>
|
||||
120
static/templates/contract/en.html
Normal file
120
static/templates/contract/en.html
Normal file
@@ -0,0 +1,120 @@
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf8">
|
||||
<title>Sponsoring contract</title>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">
|
||||
<style>
|
||||
.sheet {
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
page-break-after: always;
|
||||
}
|
||||
|
||||
body.A5.landscape .sheet {
|
||||
width: 210mm;
|
||||
height: 147mm
|
||||
}
|
||||
|
||||
.column {
|
||||
margin-bottom: -20;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="A5 landscape">
|
||||
{{ range .Runners }}
|
||||
<div class="sheet">
|
||||
<img id="header_img" width="100%" src="data:image/png;base64,{{ $.SponsoringHeader}}" />
|
||||
<div style=" padding: 0 1rem 0 1rem;">
|
||||
<div class="columns">
|
||||
<div class="column is-10">
|
||||
<div class="columns" style="padding-bottom: 0;">
|
||||
<div class="column is-two-fifths">
|
||||
<p style="font-size: large; font-weight: bold;">Sponsoring contract</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p style="font-size: x-small; vertical-align: revert; margin-top: auto;">Please write in BLOCK LETTERS.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<p> On the occasion of the {{ $.EventName }} I/We want to support </p>
|
||||
<div class="columns">
|
||||
<div class="column is-9">
|
||||
<span style="border-bottom: 1px solid; width: 100%; display: block;">{{ .FirstName }}
|
||||
{{ .MiddleName }}</span>
|
||||
<p style="font-size: x-small; display: block;">First name</p>
|
||||
</div>
|
||||
<div class="column is-3">
|
||||
<span style="border-bottom: 1px solid; width: 100%; display: block;">{{ .ID }}</span>
|
||||
<p style="font-size: x-small; display: block;">ID</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<img style="vertical-align: revert; margin-top: auto; object-fit: cover; max-height: 2cm;"
|
||||
src="data:image/png;base64,{{ barcode (printf "%d" .ID) $.BarcodeFormat $.BarcodePrefix }}"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns" style="padding-top: 1rem;">
|
||||
<div class="column is-6">
|
||||
<span style="border-bottom: 1px solid; width: 100%; display: block;">{{ .LastName }}</span>
|
||||
<p style="font-size: x-small; display: block;">Last Name</p>
|
||||
</div>
|
||||
<div class="column is-6">
|
||||
<span style="border-bottom: 1px solid; width: 100%; display: block;">{{ .Group.Name}}</span>
|
||||
<p style="font-size: x-small; display: block;">Team/class</p>
|
||||
</div>
|
||||
</div>
|
||||
<p style="margin-top: -0.5rem">with the amount of _____{{ $.CurrencySymbol }} per kilometer run.</p>
|
||||
<div class="columns" style="margin-top: -1rem;">
|
||||
<div class="column is-6">
|
||||
<span style="border-bottom: 1px solid; width: 100%; display: block;"> </span>
|
||||
<p style="font-size: x-small; display: block;">Last name</p>
|
||||
</div>
|
||||
<div class="column is-6">
|
||||
<span style="border-bottom: 1px solid; width: 100%; display: block;"> </span>
|
||||
<p style="font-size: x-small; display: block;">First name</p>
|
||||
</div>
|
||||
</div>
|
||||
<p style="font-size: medium; margin-top: -0.5rem;">Address (Sponsor)</p>
|
||||
<p style="font-size: x-small;">(You have to provide an address if you want a donation receipt - Donation receipts can't be issued for total donation amounts under {{ $.ReceiptMinimumAmount }}{{ $.CurrencySymbol }})</p>
|
||||
<div class="columns" style="margin-top: -1rem;">
|
||||
<div class="column is-8">
|
||||
<span style="border-bottom: 1px solid; width: 100%; display: block;"> </span>
|
||||
<p style="font-size: x-small; display: block;">Street</p>
|
||||
</div>
|
||||
<div class="column is-4">
|
||||
<span style="border-bottom: 1px solid; width: 100%; display: block;"> </span>
|
||||
<p style="font-size: x-small; display: block;">House number</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns" style="margin-top: -1rem;">
|
||||
<div class="column is-4">
|
||||
<span style="border-bottom: 1px solid; width: 100%; display: block;"> </span>
|
||||
<p style="font-size: x-small; display: block;">Postal code</p>
|
||||
</div>
|
||||
<div class="column is-8">
|
||||
<span style="border-bottom: 1px solid; width: 100%; display: block;"> </span>
|
||||
<p style="font-size: x-small; display: block;">City</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns" style="margin-top: -1rem;">
|
||||
<div class="column is-7">
|
||||
<span style="border-bottom: 1px solid; width: 100%; display: block;"> </span>
|
||||
<p style="font-size: x-small; display: block;">Location, Date</p>
|
||||
</div>
|
||||
<div class="column is-5">
|
||||
<span style="border-bottom: 1px solid; width: 100%; display: block;"> </span>
|
||||
<p style="font-size: x-small; display: block;">Signature</p>
|
||||
</div>
|
||||
</div>
|
||||
<p style="font-size: xx-small; overflow: hidden; height: 4rem; text-align: center;">{{ $.Disclaimer }}</p>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user