Styled front

ref #14

src/PdfCreator.ts

@@ -132,7 +132,7 @@ export class PdfCreator {
         await i18next.changeLanguage(locale);
         const template_source = fs.readFileSync(`${this.templateDir}/runner_card.html`, 'utf8');
         const template = Handlebars.compile(template_source);
-        const result = template({ cards })
+        const result = template({ cards, eventname: "LfK! 2069" })
         const pdf = await this.renderPdf(result, { format: "A4", landscape: false });
         return pdf
     }

src/templates/runner_card.html

@@ -22,6 +22,7 @@
     .runnercard {
       border: 1px solid;
       height: 5.5cm;
+      overflow: hidden;
     }
   </style>
 </head>
@@ -31,7 +32,21 @@
     <div class="columns is-multiline">
       {{#each cards}}
       <div class="column is-half runnercard">
-        <p>Front: {{this.code}}</p>
+        <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;">lauf-fuer-kaya.de - am 01.01.2021</p>
+        <p style="font-size: small;">Mit unterstützung von:</p>
+        <div class="columns" style="height: 6rem; overflow: hidden;">
+          <div class="column is-two-thirds">
+            <!--SPONSOR LOGO HERE-->
+            <img src="https://odit.services/assets/img/profile-pic-no_bg.hash.0c81702a.png" width="60%" />
+          </div>
+          <div class="column is-one-third">
+            <!--BARCODE HERE-->
+            <img src="https://odit.services/assets/img/profile-pic-no_bg.hash.0c81702a.png" width="100%" />
+          </div>
+        </div>
+        <p>{{this.runner.lastname}}, {{this.runner.firstname}} {{this.runner.middlename}}</p>
+        <p>{{this.runner.group.name}}</p>
       </div>
       {{/each}}
     </div>