From ea6167fcbb66046685aefad81f1e3d20bee86288 Mon Sep 17 00:00:00 2001
From: Colin Kallemein <cakallemein@gmail.com>
Date: Wed, 1 May 2024 22:33:13 +0200
Subject: [PATCH] Added buttons to login screen

Adjusted styling
---
 public/assets/Button_1.png       | Bin 0 -> 3054 bytes
 public/assets/Button_2.png       | Bin 0 -> 3040 bytes
 public/assets/Button_3.png       | Bin 0 -> 2933 bytes
 public/assets/Button_4.png       | Bin 0 -> 2916 bytes
 src/App.vue                      |   2 +-
 src/assets/main.scss             |  18 +++++++++
 src/components/screens/Login.vue |  66 ++++++++++++++++++++++++++-----
 7 files changed, 76 insertions(+), 10 deletions(-)
 create mode 100644 public/assets/Button_1.png
 create mode 100644 public/assets/Button_2.png
 create mode 100644 public/assets/Button_3.png
 create mode 100644 public/assets/Button_4.png

diff --git a/public/assets/Button_1.png b/public/assets/Button_1.png
new file mode 100644
index 0000000000000000000000000000000000000000..6efcac44c4ca2218e85df0f493fecd7fd6501475
GIT binary patch
literal 3054
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

literal 0
HcmV?d00001

diff --git a/public/assets/Button_2.png b/public/assets/Button_2.png
new file mode 100644
index 0000000000000000000000000000000000000000..9fd2e001437f25eecadc9dd5fb612ff856b9dc2f
GIT binary patch
literal 3040
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

literal 0
HcmV?d00001

diff --git a/public/assets/Button_3.png b/public/assets/Button_3.png
new file mode 100644
index 0000000000000000000000000000000000000000..819739a71ce26ac0dcbfc88fdb45437dc203e74e
GIT binary patch
literal 2933
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

literal 0
HcmV?d00001

diff --git a/public/assets/Button_4.png b/public/assets/Button_4.png
new file mode 100644
index 0000000000000000000000000000000000000000..6366e7b1cc071aaa98d76bfc073780b8ee666f2c
GIT binary patch
literal 2916
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
O0000<MNUMnLSTZtotZHJ

literal 0
HcmV?d00001

diff --git a/src/App.vue b/src/App.vue
index 974f8ec..0dfe2f8 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <Game />
+  <Login />
 </template>
 
 <script setup lang="ts">
diff --git a/src/assets/main.scss b/src/assets/main.scss
index bb533ab..5d3d8f7 100644
--- a/src/assets/main.scss
+++ b/src/assets/main.scss
@@ -1,3 +1,8 @@
+@font-face {
+    font-family: GentiumPlus;
+    src: url('@/assets/fonts/Gentium_plus.ttf');
+}
+
 body {
     -ms-overflow-style: none;
     scrollbar-width: none;
@@ -5,6 +10,19 @@ body {
     background: black;
 }
 
+p, a, li {
+    font-family: Arial, sans-serif;
+    color: #FFF;
+}
+
+a {
+    text-decoration: none;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    font-family: GentiumPlus, serif;
+}
+
 ::-webkit-scrollbar {
     display: none;
 }
\ No newline at end of file
diff --git a/src/components/screens/Login.vue b/src/components/screens/Login.vue
index dd568f8..e6f3bdc 100644
--- a/src/components/screens/Login.vue
+++ b/src/components/screens/Login.vue
@@ -3,6 +3,24 @@
   <img src="/assets/Leaf_BG_standalone.png" id="bg-img" alt="New Quest login background" />
   <div class="content-wrapper">
     <h1 class="main-title">NEW QUEST</h1>
+
+    <div class="row-buttons">
+      <a class="button button-1" href="/">
+        LOGIN
+      </a>
+
+      <a class="button button-2" href="/">
+        REGISTER
+      </a>
+
+      <a class="button button-3" href="/">
+        CREDITS
+      </a>
+
+      <a class="button button-4" href="/">
+        EXIT
+      </a>
+    </div>
   </div>
 </template>
 
@@ -22,7 +40,7 @@ onMounted(() => {
 })
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 #bg-img {
   height: 100vh;
   position: absolute;
@@ -38,21 +56,51 @@ onMounted(() => {
   display: flex;
   align-items: center;
   justify-content: center;
+  flex-direction: column;
+  position: relative;
+
+  .row-buttons {
+    display: flex;
+    gap: 0.5rem;
+    position: absolute;
+    bottom: 2.5rem;
+
+    .button {
+      padding: 1.2rem 0;
+      min-width: 8.2rem;
+      text-align: center;
+      position: relative;
+
+      &.button-1 {
+        background-image: url('/assets/Button_1.png');
+      }
+      &.button-2 {
+        background-image: url('/assets/Button_2.png');
+      }
+      &.button-3 {
+        background-image: url('/assets/Button_3.png');
+      }
+      &.button-4 {
+        background-image: url('/assets/Button_4.png');
+      }
+      background-position: center;
+      background-size: 100%;
+      background-repeat: no-repeat;
+
+      &:hover {
+        filter: brightness(60%);
+      }
+    }
+  }
 }
 
 .main-title {
+  position: absolute;
   text-align: center;
-  margin: auto 0;
+  top: 40%;
   font-size: 3rem;
   color: #FFF;
   text-shadow: -1px -1px 0 gray, 1px -1px 0 gray, -1px 1px 0 gray, 1px 1px 0 gray;
 }
 
-@font-face {
-  font-family: GentiumPlus;
-  src: url('@/assets/fonts/Gentium_plus.ttf');
-}
-h1, h2, h3, h4, h5, h6 {
-  font-family: GentiumPlus, serif;
-}
 </style>
\ No newline at end of file