Added front certificate design

ref #36
2021-03-31 14:51:41 +02:00 · 2021-03-31 14:51:41 +02:00 · 8b71608792
parent f1084b59a7
commit 8b71608792
3 changed files with 103 additions and 0 deletions
--- a/src/templates/certficate_background.png
+++ b/src/templates/certficate_background.png
--- a/src/templates/certificate_footer.png
+++ b/src/templates/certificate_footer.png
--- a/src/templates/runner_certificate.html
+++ b/src/templates/runner_certificate.html
@ -0,0 +1,103 @@
+<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:before is used to provide a background image with opacity */
+    .sheet:before {
+      content: ' ';
+      display: block;
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      opacity: 0.4;
+      background-image: url("./certficate_background.png");
+      background-repeat: no-repeat;
+      background-size: 11cm;
+      background-position: 5cm 5cm;
+      background-blend-mode: darken;
+    }
+
+    .sheet {
+      margin: 0;
+      overflow: hidden;
+      position: relative;
+      box-sizing: border-box;
+      page-break-after: always;
+      padding: 1.2cm 2cm 1.2cm 2cm;
+      /* border-style: solid; */
+    }
+
+    body.A4 .sheet {
+      width: 210mm;
+      height: 296mm
+    }
+
+    .certificate-footer {
+      position: absolute;
+      bottom: 0cm;
+    }
+
+    td {
+      border: 1px solid black;
+    }
+
+    thead {
+      font-weight: bold;
+    }
+  </style>
+</head>
+
+<body class="A4 landscape">
+  <div class="sheet background">
+    <header class="content has-text-centered">
+      <h1 style="font-size: 3cm; font-weight: bold;">Urkunde</h1>
+    </header>
+    <img class="background" style="position: absolute;">
+    <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;">Voasasdasdasdrname
+        mittelnamerqwerqwe
+        Nachnameasdasdasd
+      </p>
+      <p style="font-size: 1cm; margin-bottom: 0;">Hat beim Testen für Kaya!</p>
+      <p style="font-size: 2cm; font-weight: bold; margin-bottom: 0;">XX km</p>
+      <p style="font-size: 1cm;">für den guten Zweck zurückgelegt</p>
+    </main>
+    <footer class="certificate-footer">
+      <img src="./certificate_footer.png">
+    </footer>
+  </div>
+  <div class="sheet">
+    <header class="content has-text-centered">
+      <h1 style="font-size: 2.5cm;">Sponsorings</h1>
+    </header>
+    <main>
+      asd
+      <table style="border: solid; width: 17cm;">
+        <thead>
+          <td>Sponsor:in</td>
+          <td>Betrag/KM</td>
+          <td>Gesamtbetrag</td>
+        </thead>
+        <tbody>
+          <tr>
+            <td>Sponsor:in1</td>
+            <td>123€</td>
+            <td>312€</td>
+          </tr>
+        </tbody>
+      </table>
+    </main>
+    <footer class="certificate-footer">
+      <p>
+        Bankinfo
+      </p>
+    </footer>
+  </div>
+</body>
+
+</html>