clean up + start

frontend/src/App.vue

@@ -1,30 +1,175 @@
 <template>
-  <nav>
-    <router-link to="/">Home</router-link> |
-    <router-link to="/about">About</router-link>
-  </nav>
-  <router-view/>
+    <router-view v-slot="{ Component, route }">
+        <transition :name="route.meta.transition || 'fade'" mode="out-in">
+            <component :is="Component" />
+        </transition>
+    </router-view>
 </template>
 
 <style>
-#app {
+    :root, :root.light {
+        --primary-color: #2c3e50;
+        --accent-background: rgb(30, 30, 82);
+        --secondary-color: white;
+        --background-color: white;
+        --popup-color: rgb(224, 224, 224);
+        --accent-color: #42b983;
+        --hover-color: rgb(165, 165, 165);
+        --accent-background-hover: rgb(124, 140, 236);
+        --overlay-color: rgba(0, 0, 0, 0.7);
+        --inactive-color: rgb(100, 100, 100);
+        --highlight-backdrop: rgb(143, 134, 192);
+        --hint-color: rgb(174, 210, 221);
+        --PI: 3.14159265358979;
+    }
+
+    :root.dark {
+        --primary-color: white;
+        --accent-background: rgb(56, 56, 112);
+        --secondary-color: white;
+        --background-color: rgb(32, 32, 32);
+        --popup-color: rgb(58, 58, 58);
+        --accent-color: #42b983;
+        --hover-color: rgb(83, 83, 83);
+        --accent-background-hover: #4380a8;
+        --overlay-color: rgba(104, 104, 104, 0.575);
+        --inactive-color: rgb(190, 190, 190);
+        --highlight-backdrop: rgb(85, 63, 207);
+        --hint-color: rgb(88, 91, 110);
+    }
+
+    @media ( prefers-color-scheme: dark ) {
+        :root {
+            --primary-color: white;
+            --accent-background: rgb(56, 56, 112);
+            --secondary-color: white;
+            --background-color: rgb(32, 32, 32);
+            --popup-color: rgb(58, 58, 58);
+            --accent-color: #42b983;
+            --hover-color: rgb(83, 83, 83);
+            --accent-background-hover: #4380a8;
+            --overlay-color: rgba(104, 104, 104, 0.575);
+            --inactive-color: rgb(190, 190, 190);
+            --highlight-backdrop: rgb(85, 63, 207);
+            --hint-color: rgb(88, 91, 110);
+        }
+    }
+
+    ::selection {
+        background-color: var( --highlight-backdrop );
+        color: var( --secondary-color );
+    }
+
+    #themeSelector {
+        background-color: rgba( 0, 0, 0, 0 );
+        color: var( --primary-color );
+        font-size: 130%;
+        padding: 0;
+        margin: 0;
+        border: none;
+        cursor: pointer;
+    }
+
+    html,
+    body {
+        width: 100%;
+        height: 100%;
+        margin: 0;
+        padding: 0;
+    }
+
+    #app {
+        transition: 0.5s;
+        background-color: var( --background-color );
         font-family: Avenir, Helvetica, Arial, sans-serif;
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale;
         text-align: center;
-  color: #2c3e50;
-}
+        color: var( --primary-color );
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+    }
 
-nav {
+    nav {
         padding: 30px;
-}
+    }
 
-nav a {
+    nav a {
         font-weight: bold;
-  color: #2c3e50;
-}
+        color: var( --primary-color );
+    }
 
-nav a.router-link-exact-active {
+    nav a.router-link-exact-active {
         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;
+    }
+
+    .material-symbols-outlined {
+        font-variation-settings:
+        'FILL' 0,
+        'wght' 400,
+        'GRAD' 0,
+        'opsz' 48
+    }
+
+    .clr-open {
+        border: black solid 1px !important;
+    }
 </style>
+
+<script>
+export default {
+    name: 'app',
+    data () {
+        return {
+            theme: '',
+        }
+    },
+    methods: {
+        changeTheme () {
+            if ( this.theme === '&#9788;' ) {
+                document.documentElement.classList.remove( 'dark' );
+                document.documentElement.classList.add( 'light' );
+                localStorage.setItem( 'theme', '&#9789;' );
+                this.theme = '&#9789;';
+            } else if ( this.theme === '&#9789;' ) {
+                document.documentElement.classList.remove( 'light' );
+                document.documentElement.classList.add( 'dark' );
+                localStorage.setItem( 'theme', '&#9788;' );
+                this.theme = '&#9788;';
+            }
+        }
+    },
+    created () {
+        this.theme = localStorage.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>

frontend/src/components/HelloWorld.vue

@@ -1,58 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

frontend/src/router/index.js

@@ -7,14 +7,6 @@ const routes = [
     name: 'home',
     component: HomeView
   },
-  {
-    path: '/about',
-    name: 'about',
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
-  }
 ]
 
 const router = createRouter({

frontend/src/views/AboutView.vue

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

frontend/src/views/HomeView.vue

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