From 15ca4459eb44bd05037c1e32ef9fc26b46547bf5 Mon Sep 17 00:00:00 2001
From: Settel <settel@localhost>
Date: Fri, 30 Sep 2022 18:03:34 +0200
Subject: [PATCH] feat: add info page

---
 client/src/pages/index.vue | 11 +++--
 client/src/pages/info.vue  | 92 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 100 insertions(+), 3 deletions(-)
 create mode 100644 client/src/pages/info.vue

diff --git a/client/src/pages/index.vue b/client/src/pages/index.vue
index 3d3a714..33ceb2a 100644
--- a/client/src/pages/index.vue
+++ b/client/src/pages/index.vue
@@ -12,7 +12,7 @@
       </div>
       <div class="page-index__space" />
     </div>
-    <div class="page-index__copyright-notice">
+    <div class="page-index__copyright-notice" @click="navigateTo('/info')">
       v{{ config.version }}, © 2021-2022, Settel
     </div>
     <CreateTeamDialog v-if="showCreateTeamDialog" @close="closeCreateTeamDialog" />
@@ -20,7 +20,7 @@
 </template>
 
 <script setup lang="ts">
-import { useRuntimeConfig } from '#app'
+import { useRuntimeConfig, navigateTo } from '#app'
 import { ref } from 'vue'
 import useAuth from '@/composables/useAuth'
 import useI18n from '@/composables/useI18n'
@@ -75,7 +75,12 @@ body {
     position: absolute;
     right: 1em;
     bottom: 0;
-    color: #000000;
+    color: #606060;
+    cursor: pointer;
+    
+    &:hover {
+      color: #c0c0c0;
+    }
   }
 }
 </style>
\ No newline at end of file
diff --git a/client/src/pages/info.vue b/client/src/pages/info.vue
new file mode 100644
index 0000000..4431b0b
--- /dev/null
+++ b/client/src/pages/info.vue
@@ -0,0 +1,92 @@
+<template>
+  <div class="info__container">
+    <div class="info__box">
+      <h1 class="info__title">Know Your Teammates</h1>
+      <h2 class="info__subtitle">{{ $t('credits') }}</h2>
+      <table class="info__table">
+        <tr>
+          <td class="info__table-key">Settel</td>
+          <td>idea, code, add. design</td>
+        </tr>
+        <tr>
+          <td class="info__table-key">Denis</td>
+          <td>design</td>
+        </tr>
+      </table>
+      <h2 class="info__subtitle">{{ $t('technologies') }}</h2>
+      <table class="info__table">
+        <tr>
+          <td class="info__table-key">Frontend</td>
+          <td>Vue3 + Nuxt3</td>
+        </tr>
+        <tr>
+          <td class="info__table-key">Backend</td>
+          <td>Go</td>
+        </tr>
+        <tr>
+          <td class="info__table-key">Tools</td>
+          <td>Podman/Docker, GNU Make, VS Code, Figma</td>
+        </tr>
+      </table>
+      <Button class="info__button" :border="true" @click="navigateTo('/')">{{ $t('back') }}</Button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { navigateTo } from '#app'
+import useI18n from '@/composables/useI18n'
+
+const { $t } = useI18n({
+  back: { en: 'back', de: 'zurück' },
+  credits: { en: 'Credits', de: 'Mitwirkende' },
+  technologies: { en: 'Technologies used', de: 'verwendete Technologien' },
+})
+</script>
+
+<style lang="scss">
+@import '~/assets/css/components';
+
+.info {
+  &__container {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    font-family: $font-primary;
+    color: $text-primary-color;
+  }
+
+  &__box {
+    display: flex;
+    flex-direction: column;
+    min-width: 600px;
+    margin: auto;
+    padding: 32px;
+    border: 1px solid white;
+    border-radius: 16px;
+  }
+
+  &__title {
+    margin: 0 32px 32px 0;
+    font-size: 48px;
+  }
+
+  &__subtitle {
+    margin: 32px 0 8px 0;
+    font-size: 24px;
+    font-family: $font-secondary;
+  }
+
+  &__table {
+    font-family: $font-secondary;
+
+    &-key {
+      width: 6em;
+    }
+  }
+
+  &__button {
+    margin: 64px 0 0 auto;
+  }
+}
+</style>
\ No newline at end of file