Add feedback overlay (#3)

src/App.vue

@@ -9,6 +9,14 @@
           <span class="alpha">Alpha</span></v-toolbar-title
         >
         <v-spacer></v-spacer>
+        <v-tooltip bottom>
+          <template v-slot:activator="{ on, attrs }">
+            <v-btn icon v-bind="attrs" v-on="on" @click="feedback = !feedback">
+              <v-icon>mdi-message-alert</v-icon>
+            </v-btn>
+          </template>
+          <span>Feedback</span>
+        </v-tooltip>
         <v-tooltip bottom>
           <template v-slot:activator="{ on, attrs }">
             <v-btn
@@ -77,6 +85,65 @@
     <v-main>
       <router-view></router-view>
     </v-main>
+
+    <v-overlay :value="feedback">
+      <v-sheet color="blue darken-3" elevation="3">
+        <v-container>
+          <v-layout>
+            <v-flex xs12>
+              <v-row class="ma-5">
+                <v-col align="center" justify="center"
+                  ><h2>Feedback is appreciated!</h2></v-col
+                >
+              </v-row>
+              <v-divider></v-divider>
+              <v-row class="mt-5 ml-5 mr-5">
+                <v-col align="center" justify="center">
+                  Bugs and concrete feature requests may be filed directly in
+                  the GitHub issue trackers:
+                </v-col>
+              </v-row>
+              <v-row class="mb-5 ml-5 mr-5">
+                <v-col align="center" justify="center">
+                  <v-btn
+                    plain
+                    href="https://github.com/mutalyzer/website/issues"
+                    target="_blank"
+                    >frontend</v-btn
+                  >
+                </v-col>
+                <v-col align="center" justify="center">
+                  <v-btn
+                    plain
+                    href="https://github.com/mutalyzer/normalizer/issues"
+                    target="_blank"
+                    >backend</v-btn
+                  >
+                </v-col>
+              </v-row>
+              <v-divider></v-divider>
+              <v-row class="mt-5 ml-5 mr-5">
+                <v-col align="center" justify="center">
+                  If you have a private question or a security related issue to
+                  discuss, please use the following email address:
+                </v-col>
+              </v-row>
+              <v-row class="mb-5 ml-5 mr-5">
+                <v-col align="center" justify="center">
+                  [email protected]
+                </v-col>
+              </v-row>
+              <v-divider></v-divider>
+              <v-row class="ma-5">
+                <v-col align="center" justify="center">
+                  <v-btn @click="feedback = false"> Close </v-btn>
+                </v-col>
+              </v-row>
+            </v-flex>
+          </v-layout>
+        </v-container>
+      </v-sheet>
+    </v-overlay>
   </v-app>
 </template>
 
@@ -89,6 +156,7 @@ export default {
   data: () => ({
     drawer: false,
     apiBaseUrl: apiBaseUrl,
+    feedback: false,
   }),
 };
 </script>