120 lines
3.9 KiB
HTML
120 lines
3.9 KiB
HTML
<html>
|
|
|
|
<head>
|
|
<meta charset="utf8">
|
|
<title>Runner certificate</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;
|
|
background-image: url("data:image/png;base64,{{ loadImage "certificate_background" }}");
|
|
background-repeat: no-repeat;
|
|
background-size: 11cm;
|
|
background-position: 5cm 5cm;
|
|
color: #000;
|
|
/* border-style: solid; */
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
p {
|
|
color: black;
|
|
}
|
|
|
|
body.A4 .sheet {
|
|
width: 210mm;
|
|
height: 296mm
|
|
}
|
|
|
|
.certificate-footer {
|
|
position: absolute;
|
|
bottom: 0cm;
|
|
}
|
|
|
|
td {
|
|
border: 1px solid black;
|
|
font-size: large;
|
|
font-weight: 600;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body class="A4 landscape">
|
|
{{ range .Runners }}
|
|
<article class="sheet">
|
|
<header class="content has-text-centered">
|
|
<p style="font-size: 3cm; font-weight: bold;">Certificate</p>
|
|
</header>
|
|
<main class="content has-text-centered" style="padding-top: 3cm;">
|
|
<p style="width: 50%; font-size: 4vw; font-weight: bold; margin-bottom: 0; display: inline;">{{ .FirstName }}
|
|
{{ .MiddleName }} {{ .LastName }}
|
|
</p>
|
|
<p style="font-size: 1cm; margin-bottom: 0;">Ran</p>
|
|
<p style="font-size: 2cm; font-weight: bold; margin-bottom: 0;">{{formatUnit "kilometer" $.Locale .Distance}}km</p>
|
|
<p style="font-size: 1cm;">for our good cause at the {{ $.EventName }}</p>
|
|
</main>
|
|
<footer class="certificate-footer">
|
|
<img src="data:image/png;base64,{{ loadImage "certificate_footer" }}">
|
|
</footer>
|
|
</article>
|
|
<article class="sheet">
|
|
<header class="content has-text-centered">
|
|
<p style="font-size: 2.5cm; font-weight: bold;">Donations</p>
|
|
</header>
|
|
<main>
|
|
<table style="border: solid; width: 17cm;">
|
|
<thead>
|
|
<td class=".td-head">Donor</td>
|
|
<td>Amount / km</td>
|
|
<td>Total</td>
|
|
</thead>
|
|
<tbody>
|
|
{{ range .DistanceDonations}}
|
|
<tr>
|
|
<td>{{ .Donor.FirstName }} {{ .Donor.MiddleName }} {{ .Donor.LastName }}</td>
|
|
<td>{{ formatUnit "euro" $.Locale .AmountPerDistance }} {{ $.CurrencySymbol }}</td>
|
|
<td>{{ formatUnit "euro" $.Locale .Amount }} {{ $.CurrencySymbol }}</td>
|
|
</tr>
|
|
{{ end }}
|
|
</tbody>
|
|
<tfoot>
|
|
<td>Combined</td>
|
|
<td>{{ formatUnit "euro" $.Locale .TotalPerDistance }} {{ $.CurrencySymbol }}</td>
|
|
<td>{{ formatUnit "euro" $.Locale .TotalDonations }} {{ $.CurrencySymbol }}</td>
|
|
</tfoot>
|
|
</table>
|
|
</main>
|
|
<footer class="certificate-footer">
|
|
<table style="border-collapse: collapse; border: none; width: 17cm;">
|
|
<thead>
|
|
<tr>
|
|
<th style="border: none; width: 50%; text-align: center;">Link to your lap times</th>
|
|
<th style="border: none; width: 50%; text-align: center;">Transfer donation via SEPA</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td style="border: none; text-align: center;">
|
|
<img src="data:image/png;base64,{{ barcode .SelfServiceLink "qr" "" }}" style="height: 2.5cm; padding: 0.2cm">
|
|
</td>
|
|
<td style="border: none; text-align: center;">
|
|
<img src="data:image/png;base64,{{ epcCode $.SepaConfig.IBAN $.SepaConfig.BIC $.SepaConfig.HolderName (print "Sponsoring for " .FirstName " " .LastName ", " .CombinedGroupName) .TotalDonations $.SepaConfig.CurrencyIdentifier}}" style="height: 2.5cm; padding: 0.2cm">
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<p style="width: 17cm; text-align: center;">
|
|
{{ $.Footer }}
|
|
</p>
|
|
</footer>
|
|
</article>
|
|
{{ end }}
|
|
</body>
|
|
|
|
</html> |