feat: add info page

This commit is contained in:
Settel 2022-09-30 18:03:34 +02:00
parent d330164906
commit 15ca4459eb
2 changed files with 100 additions and 3 deletions

View File

@ -12,7 +12,7 @@
</div> </div>
<div class="page-index__space" /> <div class="page-index__space" />
</div> </div>
<div class="page-index__copyright-notice"> <div class="page-index__copyright-notice" @click="navigateTo('/info')">
v{{ config.version }}, © 2021-2022, Settel v{{ config.version }}, © 2021-2022, Settel
</div> </div>
<CreateTeamDialog v-if="showCreateTeamDialog" @close="closeCreateTeamDialog" /> <CreateTeamDialog v-if="showCreateTeamDialog" @close="closeCreateTeamDialog" />
@ -20,7 +20,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { useRuntimeConfig } from '#app' import { useRuntimeConfig, navigateTo } from '#app'
import { ref } from 'vue' import { ref } from 'vue'
import useAuth from '@/composables/useAuth' import useAuth from '@/composables/useAuth'
import useI18n from '@/composables/useI18n' import useI18n from '@/composables/useI18n'
@ -75,7 +75,12 @@ body {
position: absolute; position: absolute;
right: 1em; right: 1em;
bottom: 0; bottom: 0;
color: #000000; color: #606060;
cursor: pointer;
&:hover {
color: #c0c0c0;
}
} }
} }
</style> </style>

92
client/src/pages/info.vue Normal file
View File

@ -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>