Added real frontend

Made hostname global and easy to change in docker

src/components/items/mobileMenu.vue

@@ -0,0 +1,136 @@
+<template>
+   <div
+      v-if="show"
+      class="mobileMenu"
+      @click="checkIfClickShouldCloseMobileMenu"
+   >
+      <transition name="mobileMenuAni">
+         <div v-if="showContent" class="mobileMenuContainer">
+            <div class="mobileMenuWrapper">
+               <h1>Menu</h1>
+               <button class="settingsButton" @click="showSettingsModal">
+                  Settings
+               </button>
+               <button class="statisticsButton" @click="showStatisticsModal">
+                  Statistics
+               </button>
+               <button class="aboutButton" @click="showAboutModal">
+                  About
+               </button>
+               <h1>Control</h1>
+               <extra-buttons
+                  @start-sound-test="startSoundTest"
+               ></extra-buttons>
+            </div>
+         </div>
+      </transition>
+   </div>
+</template>
+
+<script>
+import extraButtons from "./extraButtons.vue";
+
+export default {
+   components: {
+      extraButtons,
+   },
+   data() {
+      return {
+         show: false,
+         showContent: false,
+      };
+   },
+   methods: {
+      closeMobileMenu() {
+         this.showContent = false;
+         setTimeout(() => {
+            this.show = false;
+         }, 250);
+      },
+      openMobileMenu() {
+         this.show = true;
+      },
+      openMobileMenuContent() {
+         this.showContent = true;
+      },
+      checkIfClickShouldCloseMobileMenu(event) {
+         if (event.target.classList[0] === "mobileMenu") {
+            this.closeMobileMenu();
+         }
+      },
+      showSettingsModal() {
+         this.show = false;
+         this.showContent = false;
+         this.$emit("show-settings-modal");
+      },
+      showStatisticsModal() {
+         this.show = false;
+         this.showContent = false;
+         this.$emit("show-statistics-modal");
+      },
+      showAboutModal() {
+         this.show = false;
+         this.showContent = false;
+         this.$emit("show-about-modal");
+      },
+      startSoundTest() {
+         this.$emit("start-sound-test");
+      },
+   },
+};
+</script>
+
+<style scoped>
+.mobileMenuAni-enter-from,
+.mobileMenuAni-leave-to {
+   opacity: 0.6;
+   transform: translateX(80vw);
+}
+.mobileMenuAni-enter-to,
+.mobileMenuAni-leave-from {
+   opacity: 1;
+   transform: translateX(0vw);
+}
+.mobileMenuAni-enter-active,
+.mobileMenuAni-leave-active {
+   transition: all 0.3s ease-out;
+}
+
+.mobileMenu {
+   position: fixed;
+   z-index: 8;
+   right: 0;
+   bottom: 0;
+   width: 100%;
+   height: 100%;
+   overflow: hidden;
+   background-color: rgb(0, 0, 0);
+   background-color: rgba(0, 0, 0, 0.5);
+}
+
+.mobileMenuContainer {
+   background-color: #c4c4c4;
+   width: 80vw;
+   height: 100%;
+   margin-left: 20%;
+}
+
+.mobileMenuWrapper {
+   display: flex;
+   position: relative;
+   flex-wrap: wrap;
+   justify-content: center;
+}
+
+h1 {
+   margin: 10px 0px;
+   width: 100%;
+   text-align: center;
+}
+
+button {
+   width: 51vw;
+   height: 40px;
+   margin-bottom: 10px;
+}
+</style>