Added real frontend

Made hostname global and easy to change in docker

cmd/frontend/src/App.vue

@@ -1,28 +1,147 @@
 <template>
-  <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
-  </div>
+   <the-header @start-sound-test="startSoundTest"></the-header>
+   <the-main ref="theMain"></the-main>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
+import TheHeader from "./components/layout/TheHeader.vue";
+import TheMain from "./components/layout/TheMain.vue";
 
 export default {
-  name: 'App',
-  components: {
-    HelloWorld
-  }
-}
+   components: {
+      TheHeader,
+      TheMain,
+   },
+   data() {
+      return {
+         screenWidth: 1000,
+      };
+   },
+   computed: {
+      displayWhenDesktop() {
+         if (this.screenWidth > 600) {
+            return true;
+         } else {
+            return false;
+         }
+      },
+   },
+   methods: {
+      startSoundTest() {
+         this.$refs.theMain.startSoundTest();
+      },
+   },
+   mounted() {
+      this.screenWidth = window.innerWidth;
+      window.addEventListener("resize", () => (this.screenWidth = window.innerWidth));
+   },
+};
 </script>
 
 <style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
+* {
+   margin: 0;
+   padding: 0;
+   font-family: Helvetica;
+}
+
+button {
+   background: rgb(54, 54, 54);
+   border-radius: 10px;
+   border-color: #ff9c00;
+   color: #ff9c00;
+   font-size: 1em;
+   padding: 10px;
+   outline: none;
+}
+
+.app {
+   display: flex;
+   height: 100vh;
+}
+
+body {
+   background-color: #555;
+}
+
+/* Global modal stuff */
+
+.modalAni-enter-from,
+.modalAni-leave-to {
+   opacity: 0;
+   transform: translateY(-20px);
+}
+.modalAni-enter-to,
+.modalAni-leave-from {
+   opacity: 1;
+}
+.modalAni-enter-active,
+.modalAni-leave-active {
+   transition: all 0.25s ease-out;
+}
+
+.modal {
+   position: fixed; /* Stay in place */
+   z-index: 10; /* Sit on top */
+   left: 0;
+   top: 0;
+   width: 100%; /* Full width */
+   height: 100%; /* Full height */
+   overflow: hidden;
+   background-color: rgb(0, 0, 0); /* Fallback color */
+   background-color: rgba(0, 0, 0, 0.5); /* Black w/ opacity */
+}
+.modalContainer {
+   background-color: #eeeeee;
+   margin: 10% auto; /* 15% from the top and centered */
+   border: 1px solid #888;
+   width: 50%; /* Could be more or less, depending on screen size */
+}
+.modalWrapper {
+   display: flex;
+   position: relative;
+   flex-wrap: wrap;
+   padding: 10px 40px;
+}
+
+.modalWrapper:last-child {
+   margin-bottom: 50px;
+}
+
+.closeModalImg {
+   position: absolute;
+   right: 8px;
+   top: 8px;
+   cursor: pointer;
+   opacity: 70%;
+}
+.modal h1 {
+   color: black;
+   margin-left: auto;
+   margin-right: auto;
+   padding-top: 10px;
+   font-size: 1.9rem;
+}
+.modal p {
+   color: black;
+}
+
+@media only screen and (max-width: 1000px) {
+   .modalContainer {
+      margin: 10% auto; /* 15% from the top and centered */
+      width: 93%; /* Could be more or less, depending on screen size */
+   }
+   .modalWrapper {
+      padding: 10px 10px;
+   }
+
+   .modalWrapper:last-child {
+      margin-bottom: 10px;
+   }
+
+   .modal h1 {
+      padding-top: 10px;
+      font-size: 1.6rem;
+   }
 }
 </style>