Added real frontend

Made hostname global and easy to change in docker

cmd/frontend/src/components/items/aboutModal.vue

@@ -0,0 +1,78 @@
+<template>
+   <transition name="modalAni">
+      <div v-if="show" class="modal" @click="checkIfClickShouldCloseModal">
+         <div class="modalContainer">
+            <div class="modalWrapper">
+               <img
+                  class="closeModalImg"
+                  src="cancel-black-36dp.svg"
+                  alt="closeModalIMG"
+                  @click="closeModal"
+               />
+               <h1>Music Player Randomizer v0.1</h1>
+               <p class="descriptionText">
+                  Try your video game music knowledge with this VGM randomizer,
+                  invite your friends and see who is the best.
+               </p>
+               <p class="creditText">
+                  Back-end done by Sebastian Olsson,
+                  <a href="https://twitter.com/Raida91">Twitter</a>
+               </p>
+               <p class="creditText">
+                  Front-end done by Peter Johansson,
+                  <a href="https://twitter.com/WebDevPJ">Twitter</a>
+               </p>
+               <!-- <p class="patchNotesText">
+               Full patch notes can be found
+               <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">here</a>
+            </p> -->
+            </div>
+         </div>
+      </div>
+   </transition>
+</template>
+
+<script>
+export default {
+   data() {
+      return {
+         show: false,
+      };
+   },
+   methods: {
+      closeModal() {
+         this.show = false;
+      },
+      openModal() {
+         this.show = true;
+      },
+      checkIfClickShouldCloseModal(event) {
+         if (event.target.classList[0] === "modal") {
+            this.closeModal();
+         }
+      },
+   },
+};
+</script>
+
+<style scoped>
+p {
+   font-size: 1.2rem;
+   width: 100%;
+}
+
+.descriptionText {
+   margin-top: 35px;
+}
+
+.creditText {
+   margin-top: 30px;
+}
+.creditText:nth-child(5) {
+   margin-top: 0px;
+}
+
+.patchNotesText {
+   margin-top: 20px;
+}
+</style>