Commit 0e3c1cfa authored by Franca's avatar Franca
Browse files

feat: add suitcase and diploma graphics, adjust text positions

parent 068157cc
<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
......@@ -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
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment