diff --git a/frontend/assets/variables.scss b/frontend/assets/variables.scss
index f60e6090d9b7053ac70371e1d23ab0748fbc8118..07af6d526bc3fbb4351d3135eb2114e8c0ba0d5e 100644
--- a/frontend/assets/variables.scss
+++ b/frontend/assets/variables.scss
@@ -1,4 +1,7 @@
// Ref: https://github.com/nuxt-community/vuetify-module#customvariables
-//
-// The variables you want to modify
-// $font-size-root: 20px;
+@import url("https://fonts.googleapis.com/css2?family=Taviraj:wght@600&display=swap");
+$heading-font-family: "Taviraj", serif;
+
+$material-dark: (
+ background: #162c41,
+);
diff --git a/frontend/components/Logo.vue b/frontend/components/Logo.vue
deleted file mode 100644
index 6c7285417981f030eb47ab0642c8449e90cd5551..0000000000000000000000000000000000000000
--- a/frontend/components/Logo.vue
+++ /dev/null
@@ -1,79 +0,0 @@
-<template>
- <div class="VueToNuxtLogo">
- <div class="Triangle Triangle--two" />
- <div class="Triangle Triangle--one" />
- <div class="Triangle Triangle--three" />
- <div class="Triangle Triangle--four" />
- </div>
-</template>
-
-<style>
-.VueToNuxtLogo {
- display: inline-block;
- animation: turn 2s linear forwards 1s;
- transform: rotateX(180deg);
- position: relative;
- overflow: hidden;
- height: 180px;
- width: 245px;
-}
-
-.Triangle {
- position: absolute;
- top: 0;
- left: 0;
- width: 0;
- height: 0;
-}
-
-.Triangle--one {
- border-left: 105px solid transparent;
- border-right: 105px solid transparent;
- border-bottom: 180px solid #41b883;
-}
-
-.Triangle--two {
- top: 30px;
- left: 35px;
- animation: goright 0.5s linear forwards 3.5s;
- border-left: 87.5px solid transparent;
- border-right: 87.5px solid transparent;
- border-bottom: 150px solid #3b8070;
-}
-
-.Triangle--three {
- top: 60px;
- left: 35px;
- animation: goright 0.5s linear forwards 3.5s;
- border-left: 70px solid transparent;
- border-right: 70px solid transparent;
- border-bottom: 120px solid #35495e;
-}
-
-.Triangle--four {
- top: 120px;
- left: 70px;
- animation: godown 0.5s linear forwards 3s;
- border-left: 35px solid transparent;
- border-right: 35px solid transparent;
- border-bottom: 60px solid #fff;
-}
-
-@keyframes turn {
- 100% {
- transform: rotateX(0deg);
- }
-}
-
-@keyframes godown {
- 100% {
- top: 180px;
- }
-}
-
-@keyframes goright {
- 100% {
- left: 70px;
- }
-}
-</style>
diff --git a/frontend/components/VuetifyLogo.vue b/frontend/components/VuetifyLogo.vue
deleted file mode 100644
index 9a609379e5abec928877e5f14c3258ad1329f6a4..0000000000000000000000000000000000000000
--- a/frontend/components/VuetifyLogo.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
- <img class="VuetifyLogo" alt="Vuetify Logo" src="/vuetify-logo.svg" />
-</template>
-
-<style>
-.VuetifyLogo {
- height: 180px;
- width: 180px;
- transform: rotateY(560deg);
- animation: turn 3.5s ease-out forwards 1s;
-}
-
-@keyframes turn {
- 100% {
- transform: rotateY(0deg);
- }
-}
-</style>
diff --git a/frontend/layouts/default.vue b/frontend/layouts/default.vue
index a4bb0f2e7ea31e2ecec626cabacbc498b3cb6172..96e8d5b06c3b43814206ed73a1c11b2c459cbe2d 100644
--- a/frontend/layouts/default.vue
+++ b/frontend/layouts/default.vue
@@ -1,91 +1,16 @@
<template>
<v-app dark>
- <v-navigation-drawer
- v-model="drawer"
- :mini-variant="miniVariant"
- :clipped="clipped"
- fixed
- app
- >
- <v-list>
- <v-list-item
- v-for="(item, i) in items"
- :key="i"
- :to="item.to"
- router
- exact
- >
- <v-list-item-action>
- <v-icon>{{ item.icon }}</v-icon>
- </v-list-item-action>
- <v-list-item-content>
- <v-list-item-title v-text="item.title" />
- </v-list-item-content>
- </v-list-item>
- </v-list>
- </v-navigation-drawer>
- <v-app-bar :clipped-left="clipped" fixed app>
- <v-app-bar-nav-icon @click.stop="drawer = !drawer" />
- <v-btn icon @click.stop="miniVariant = !miniVariant">
- <v-icon>mdi-{{ `chevron-${miniVariant ? "right" : "left"}` }}</v-icon>
- </v-btn>
- <v-btn icon @click.stop="clipped = !clipped">
- <v-icon>mdi-application</v-icon>
- </v-btn>
- <v-btn icon @click.stop="fixed = !fixed">
- <v-icon>mdi-minus</v-icon>
- </v-btn>
- <v-toolbar-title v-text="title" />
- <v-spacer />
- <v-btn icon @click.stop="rightDrawer = !rightDrawer">
- <v-icon>mdi-menu</v-icon>
- </v-btn>
- </v-app-bar>
<v-main>
- <v-container>
- <nuxt />
- </v-container>
+ <nuxt />
</v-main>
- <v-navigation-drawer v-model="rightDrawer" :right="right" temporary fixed>
- <v-list>
- <v-list-item @click.native="right = !right">
- <v-list-item-action>
- <v-icon light> mdi-repeat </v-icon>
- </v-list-item-action>
- <v-list-item-title>Switch drawer (click me)</v-list-item-title>
- </v-list-item>
- </v-list>
- </v-navigation-drawer>
- <v-footer :absolute="!fixed" app>
- <span>© {{ new Date().getFullYear() }}</span>
+ <v-footer style="background: var(--v-background-lighten1)" app>
+ <v-flex text-center>
+ Diese Website steht in keiner Verbindung mit den abgebildeten Kommunen
+ </v-flex>
</v-footer>
</v-app>
</template>
<script>
-export default {
- data() {
- return {
- clipped: false,
- drawer: false,
- fixed: false,
- items: [
- {
- icon: "mdi-apps",
- title: "Welcome",
- to: "/",
- },
- {
- icon: "mdi-chart-bubble",
- title: "Inspire",
- to: "/inspire",
- },
- ],
- miniVariant: false,
- right: true,
- rightDrawer: false,
- title: "Vuetify.js",
- };
- },
-};
+export default {};
</script>
diff --git a/frontend/layouts/error.vue b/frontend/layouts/error.vue
index d99a426d182e15b29273ab81e7741f213e9f2dc5..6bc9193fd2e79d6b289822e08138304f729e4fb4 100644
--- a/frontend/layouts/error.vue
+++ b/frontend/layouts/error.vue
@@ -1,18 +1,20 @@
<template>
<v-app dark>
- <h1 v-if="error.statusCode === 404">
- {{ pageNotFound }}
- </h1>
- <h1 v-else>
- {{ otherError }}
- </h1>
- <NuxtLink to="/"> Home page </NuxtLink>
+ <v-container align-center d-flex fill-height justify-space-around>
+ <v-row class="justify-center">
+ <h1 class="text-h1 justify-start text-center">
+ {{ errorMsg }}
+ </h1>
+ </v-row>
+ <NuxtLink id="home-page" to="/" class="text-uppercase">
+ Home page
+ </NuxtLink>
+ </v-container>
</v-app>
</template>
<script>
export default {
- layout: "empty",
props: {
error: {
type: Object,
@@ -21,13 +23,15 @@ export default {
},
data() {
return {
+ errorMsg: `${
+ this.error.statusCode === 404 ? "404 Not Found" : "An error occured"
+ }`,
pageNotFound: "404 Not Found",
otherError: "An error occurred",
};
},
head() {
- const title =
- this.error.statusCode === 404 ? this.pageNotFound : this.otherError;
+ const title = this.errorMsg;
return {
title,
};
@@ -36,6 +40,11 @@ export default {
</script>
<style scoped>
+#home-page {
+ font-size: x-large;
+ text-decoration: none;
+ color: var(--v-info-base);
+}
h1 {
font-size: 20px;
}
diff --git a/frontend/nuxt.config.js b/frontend/nuxt.config.js
index 06630556e7a838aafe3e9e9c4d24af7b235bb031..6819493de5637ce6b1352ed1702d0445ae56602c 100644
--- a/frontend/nuxt.config.js
+++ b/frontend/nuxt.config.js
@@ -1,19 +1,19 @@
-import colors from 'vuetify/es5/util/colors'
+import colors from "vuetify/es5/util/colors";
export default {
// Global page headers: https://go.nuxtjs.dev/config-head
head: {
- titleTemplate: '%s - cdv-frontend',
- title: 'cdv-frontend',
+ titleTemplate: "%s",
+ title: "Spaß mit Wappen",
htmlAttrs: {
- lang: 'en',
+ lang: "de",
},
meta: [
- { charset: 'utf-8' },
- { name: 'viewport', content: 'width=device-width, initial-scale=1' },
- { hid: 'description', name: 'description', content: '' },
+ { charset: "utf-8" },
+ { name: "viewport", content: "width=device-width, initial-scale=1" },
+ { hid: "description", name: "description", content: "" },
],
- link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
+ link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }],
},
// Global CSS: https://go.nuxtjs.dev/config-css
@@ -28,15 +28,15 @@ export default {
// Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
buildModules: [
// https://go.nuxtjs.dev/eslint
- '@nuxtjs/eslint-module',
+ "@nuxtjs/eslint-module",
// https://go.nuxtjs.dev/vuetify
- '@nuxtjs/vuetify',
+ "@nuxtjs/vuetify",
],
// Modules: https://go.nuxtjs.dev/config-modules
modules: [
// https://go.nuxtjs.dev/axios
- '@nuxtjs/axios',
+ "@nuxtjs/axios",
],
// Axios module configuration: https://go.nuxtjs.dev/config-axios
@@ -44,11 +44,21 @@ export default {
// Vuetify module configuration: https://go.nuxtjs.dev/config-vuetify
vuetify: {
- customVariables: ['~/assets/variables.scss'],
+ customVariables: ["~/assets/variables.scss"],
+ treeShake: true,
+ defaultAssets: {
+ font: {
+ family: "Poppins",
+ },
+ },
theme: {
+ options: {
+ customProperties: true,
+ },
dark: true,
themes: {
dark: {
+ background: "#162c41",
primary: colors.blue.darken2,
accent: colors.grey.darken3,
secondary: colors.amber.darken3,
@@ -63,4 +73,4 @@ export default {
// Build Configuration: https://go.nuxtjs.dev/config-build
build: {},
-}
+};
diff --git a/frontend/pages/index.vue b/frontend/pages/index.vue
index bef5a74ac1747807bef703daf84d274e8c062e8c..9d9e2276cc27d49d4bad5d9e755801588128a2f7 100644
--- a/frontend/pages/index.vue
+++ b/frontend/pages/index.vue
@@ -1,93 +1,18 @@
<template>
- <v-row justify="center" align="center">
- <v-col cols="12" sm="8" md="6">
- <div class="text-center">
- <logo />
- <vuetify-logo />
- </div>
- <v-card>
- <v-card-title class="headline">
- Welcome to the Vuetify + Nuxt.js template
- </v-card-title>
- <v-card-text>
- <p>
- Vuetify is a progressive Material Design component framework for
- Vue.js. It was designed to empower developers to create amazing
- applications.
- </p>
- <p>
- For more information on Vuetify, check out the
- <a
- href="https://vuetifyjs.com"
- target="_blank"
- rel="noopener noreferrer"
- >
- documentation </a
- >.
- </p>
- <p>
- If you have questions, please join the official
- <a
- href="https://chat.vuetifyjs.com/"
- target="_blank"
- rel="noopener noreferrer"
- title="chat"
- >
- discord </a
- >.
- </p>
- <p>
- Find a bug? Report it on the github
- <a
- href="https://github.com/vuetifyjs/vuetify/issues"
- target="_blank"
- rel="noopener noreferrer"
- title="contribute"
- >
- issue board </a
- >.
- </p>
- <p>
- Thank you for developing with Vuetify and I look forward to bringing
- more exciting features in the future.
- </p>
- <div class="text-xs-right">
- <em><small>— John Leider</small></em>
- </div>
- <hr class="my-3" />
- <a
- href="https://nuxtjs.org/"
- target="_blank"
- rel="noopener noreferrer"
- >
- Nuxt Documentation
- </a>
- <br />
- <a
- href="https://github.com/nuxt/nuxt.js"
- target="_blank"
- rel="noopener noreferrer"
- >
- Nuxt GitHub
- </a>
- </v-card-text>
- <v-card-actions>
- <v-spacer />
- <v-btn color="primary" nuxt to="/inspire"> Continue </v-btn>
- </v-card-actions>
- </v-card>
- </v-col>
- </v-row>
+ <v-container class="d-flex" fill-height>
+ <v-row class="justify-center align-center">
+ <h1 align="center" class="text-h4 center text-sm-h2 text-lg-h1">
+ Spaß mit Wappen
+ </h1>
+ </v-row>
+ <v-row class="justify-center">
+ <nuxt-link to="/info">
+ <v-btn color="primary" elevation="4" x-large dark> Start </v-btn>
+ </nuxt-link>
+ </v-row>
+ </v-container>
</template>
<script>
-import Logo from "~/components/Logo.vue";
-import VuetifyLogo from "~/components/VuetifyLogo.vue";
-
-export default {
- components: {
- Logo,
- VuetifyLogo,
- },
-};
+export default {};
</script>
diff --git a/frontend/pages/info.vue b/frontend/pages/info.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9c272817edd42a7b5f32743f0636a8f8165d52cc
--- /dev/null
+++ b/frontend/pages/info.vue
@@ -0,0 +1,9 @@
+<template>
+ <v-container grid-list-xs> </v-container>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style></style>
diff --git a/frontend/pages/inspire.vue b/frontend/pages/inspire.vue
deleted file mode 100644
index 172f12f2814981cc7782ece6fbdacf398f00d88d..0000000000000000000000000000000000000000
--- a/frontend/pages/inspire.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<template>
- <v-row>
- <v-col class="text-center">
- <img src="/v.png" alt="Vuetify.js" class="mb-5" />
- <blockquote class="blockquote">
- “First, solve the problem. Then, write the code.”
- <footer>
- <small>
- <em>—John Johnson</em>
- </small>
- </footer>
- </blockquote>
- </v-col>
- </v-row>
-</template>
diff --git a/frontend/static/v.png b/frontend/static/v.png
deleted file mode 100644
index a2ce2353f273cbda4cc6de145f86062ff039a1d2..0000000000000000000000000000000000000000
Binary files a/frontend/static/v.png and /dev/null differ
diff --git a/frontend/static/vuetify-logo.svg b/frontend/static/vuetify-logo.svg
deleted file mode 100644
index 145b6d13089c81fcb16f68ad8f976e389dcd77e3..0000000000000000000000000000000000000000
--- a/frontend/static/vuetify-logo.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 87.5 100"><defs><style>.cls-1{fill:#1697f6;}.cls-2{fill:#7bc6ff;}.cls-3{fill:#1867c0;}.cls-4{fill:#aeddff;}</style></defs><title>Artboard 46</title><polyline class="cls-1" points="43.75 0 23.31 0 43.75 48.32"/><polygon class="cls-2" points="43.75 62.5 43.75 100 0 14.58 22.92 14.58 43.75 62.5"/><polyline class="cls-3" points="43.75 0 64.19 0 43.75 48.32"/><polygon class="cls-4" points="64.58 14.58 87.5 14.58 43.75 100 43.75 62.5 64.58 14.58"/></svg>
diff --git a/frontend/store/index.js b/frontend/store/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..2746215e3b43d983dfe378eb1e09014cdb463c9c
--- /dev/null
+++ b/frontend/store/index.js
@@ -0,0 +1,3 @@
+export const state = () => ({});
+
+export const mutations = {};