feat: add suitcase and diploma graphics, adjust text positions

src/App.vue

 <template>
-  <div class="centered">
-    <div class="centered-no-minheight">
-      <div id="title">
-        <h1 v-if="state !== 'correct'">Bitte L&ouml;sungsziffern eingeben!</h1>
-      </div>
-      <Lock v-model="pin" :dial-count="3" @enter="checkPin" :state="state" />
-      <div v-if="state === 'correct'">
-        <h2>Glückwunsch! Du hast die richtigen Ziffern gefunden!</h2>
-        <p>
-          Hier wartet deine Belohnung auf dich:
-          <br />
-          <a href="https://maps.world.fem-net.de/events/ewo2021w/gamenight/Bilder/Urkunde.pdf">
-            <!-- <img src="" alt="Urkunde" /> -->
-            <p>https://maps.world.fem-net.de/events/ewo2021w/gamenight/Bilder/Urkunde.pdf</p>
-          </a>
-        </p>
+  <div id="title">
+    <h1 class="text-center" v-if="state !== 'correct'">
+      Bitte L&ouml;sungsziffern eingeben!
+    </h1>
+    <h1 class="text-center" v-if="state === 'correct'">
+      Glückwunsch! Du hast die richtigen Ziffern gefunden!
+    </h1>
+  </div>
+  <div v-if="state === 'correct'">
+    <div>
+      <p class="text-center">Hier wartet deine Belohnung auf dich:</p>
+      <p class="text-center">
+        <a
+          href="https://maps.world.fem-net.de/events/ewo2021w/gamenight/Bilder/Urkunde.pdf"
+        >
+          <img src="diploma.png" alt="Diploma" width="100" />
+        </a>
+      </p>
+      <p class="small-text text-center">
+        Alternativer Link zum Kopieren:
+        <br />
+        <a
+          href="https://maps.world.fem-net.de/events/ewo2021w/gamenight/Bilder/Urkunde.pdf"
+        >
+          https://maps.world.fem-net.de/events/ewo2021w/gamenight/Bilder/Urkunde.pdf
+        </a>
+      </p>
+    </div>
+  </div>
+  <div>
+    <div class="centered-flex text-center">
+      <img
+        src="suitcase.png"
+        alt="Suitcase"
+        style="position: absolute; top: 30%"
+      />
+      <div style="position: absolute; top: 50%">
+        <Lock v-model="pin" :dial-count="3" @enter="checkPin" :state="state" />
       </div>
     </div>
   </div>
@@ -64,7 +86,6 @@ async function checkPin(pin: string) {
     state.value = "incorrect";
     startTimeout();
   }
-
 }
 
 function startTimeout() {
@@ -72,7 +93,7 @@ function startTimeout() {
     window.clearTimeout(resetTimeout);
   }
   resetTimeout = window.setTimeout(() => {
-    state.value = 'default';
+    state.value = "default";
   }, 3000);
 }
 </script>
\ No newline at end of file

src/bundle.css

@@ -14,23 +14,42 @@ h1, h2 {
 	font-weight: bold;
 	/*font-family: 'LibertinusSansRegular', 'Helvetica', 'Arial', sans-serif;*/
 	font-family: 'Verdana', 'Arial', sans-serif;
-	text-align: center;
 }
 
-.centered {
+p {
+	font-size: 1.3em;
+	font-family: 'Verdana', 'Arial', sans-serif;
+}
+
+a:link, a:visited {
+	color: #E3E3E3;
+	text-decoration: underline;
+	text-underline-offset: 3px;
+}
+
+a:hover, a:active {
+	color: #cecece;
+}
+
+.centered-flex {
 	display: flex;
 	flex-direction: column;
 	justify-content: center;
 	align-items: center;
-	text-align: center;
+	/**
 	min-height: 90vh;
+	background-image: url(suitcase.png);
+	background-repeat: no-repeat;
+	background-attachment: fixed;  
+	background-size: auto;
+	background-position: center;
+	**/
 }
 
-/*TODO: find a better way to center flex items*/
-.centered-no-minheight {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	align-items: center;
+.text-center{
 	text-align: center;
+}
+
+.small-text{
+	font-size: 0.7em;
 }
\ No newline at end of file