begin UI implementation

frontend/src/App.vue

@@ -1,30 +1,112 @@
 <template>
-  <nav>
+    <nav>
-    <router-link to="/">Home</router-link> |
+        <router-link to="/">Home</router-link> |
-    <router-link to="/about">About</router-link>
+        <router-link to="/about">About</router-link>
-  </nav>
+    </nav>
-  <router-view/>
+    <router-view v-slot="{ Component, route }">
+        <transition :name="route.meta.transition || 'scale'" mode="out-in">
+            <component :is="Component" />
+        </transition>
+    </router-view>
 </template>
 
+<script>
+export default {
+    name: 'app',
+    data () {
+        return {
+            theme: '',
+        }
+    },
+    methods: {
+        changeTheme () {
+            if ( this.theme === '&#9788;' ) {
+                document.documentElement.classList.remove( 'dark' );
+                document.documentElement.classList.add( 'light' );
+                sessionStorage.setItem( 'theme', '&#9789;' );
+                this.theme = '&#9789;';
+            } else if ( this.theme === '&#9789;' ) {
+                document.documentElement.classList.remove( 'light' );
+                document.documentElement.classList.add( 'dark' );
+                sessionStorage.setItem( 'theme', '&#9788;' );
+                this.theme = '&#9788;';
+            }
+        }
+    },
+    created () {
+        this.theme = sessionStorage.getItem( 'theme' ) ? sessionStorage.getItem( 'theme' ) : '';
+        if ( window.matchMedia( '(prefers-color-scheme: dark)' ).matches || this.theme === '&#9788;' ) {
+            document.documentElement.classList.add( 'dark' );
+            this.theme = '&#9788;';
+        } else {
+            document.documentElement.classList.add( 'light' );
+            this.theme = '&#9789;';
+        }
+    }
+}
+</script>
+
 <style>
+:root, :root.light {
+    --background-color: rgb(224, 222, 222);
+    --foreground-color: #2c3e50;
+    --highlight-color: rgb(221, 0, 0);
+}
+
+:root.dark {
+    --background-color: rgb(34, 34, 34);
+    --foreground-color: white;
+}
+
+body, html {
+    height: 100%;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+}
+
 #app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
+    font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
+    -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+    -moz-osx-font-smoothing: grayscale;
-  text-align: center;
+    text-align: center;
-  color: #2c3e50;
+    background-color: var( --background-color );
+    color: var( --foreground-color );
+    width: 100%;
+    height: 100%;
 }
 
 nav {
-  padding: 30px;
+    padding: 30px;
 }
 
 nav a {
-  font-weight: bold;
+    font-weight: bold;
-  color: #2c3e50;
+    color: #2c3e50;
 }
 
 nav a.router-link-exact-active {
-  color: #42b983;
+    color: #42b983;
+}
+
+.scale-enter-active,
+.scale-leave-active {
+    transition: all 0.5s ease;
+}
+
+.scale-enter-from,
+.scale-leave-to {
+    opacity: 0;
+    transform: scale(0.9);
+}
+
+.fade-enter-active,
+.fade-leave-active {
+    transition: opacity 0.4s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+    opacity: 0;
 }
 </style>

frontend/src/views/AboutView.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="about">
+    <div class="about">
-    <h1>This is an about page</h1>
+        <h1>This is an about page</h1>
-  </div>
+    </div>
 </template>

frontend/src/views/HomeView.vue

@@ -1,18 +1,11 @@
 <template>
-  <div class="home">
+    <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
+        <h1>ImageVideoUpscaler</h1>
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    </div>
-  </div>
 </template>
 
 <script>
-// @ is an alias to /src
-import HelloWorld from '@/components/HelloWorld.vue'
-
 export default {
-  name: 'HomeView',
+    name: 'HomeView',
-  components: {
-    HelloWorld
-  }
 }
 </script>