some initial setup work for GUI

MusicPlayerV2-GUI/src/App.vue

@@ -0,0 +1,167 @@
+<!--
+*				libreevent - App.vue
+*
+*	Created by Janis Hutz 05/14/2023, Licensed under the GPL V3 License
+*			https://janishutz.com, development@janishutz.com
+*
+*
+-->
+
+<template>
+    <div>
+        <button @click="changeTheme();" id="themeSelector" title="Toggle between light and dark mode"><span class="material-symbols-outlined" v-html="theme"></span></button>
+        <router-view v-slot="{ Component, route }" id="main-view">
+            <transition :name="route.meta.transition ? String( route.meta.transition ) : 'fade'" mode="out-in">
+                <component :is="Component"></component>
+            </transition>
+        </router-view>
+    </div>
+</template>
+
+<style>
+    body {
+        background-color: var( --background-color );
+    }
+
+    :root, :root.light {
+        --primary-color: #0a1520;
+        --secondary-color: white;
+        --background-color: rgb(221, 221, 221);
+        --nav-background: white;
+        --hover-color: #00457a;
+        --popup-color: rgb(224, 224, 224);
+        --overlay-color: rgba(0, 0, 0, 0.7);
+        --PI: 3.14159265358979;
+        --gray-color: rgb(53, 53, 53);
+        --footer-background: rgb(233, 233, 233);
+        --accent-background: rgb(195, 235, 243);
+        --loading-color: rgb(167, 167, 167);
+    }
+
+    :root.dark {
+        --primary-color: white;
+        --secondary-color: black;
+        --background-color: rgb(32, 32, 32);
+        --nav-background: rgb(54, 54, 54);
+        --popup-color: rgb(58, 58, 58);
+        --hover-color: #007ddd;
+        --overlay-color: rgba(104, 104, 104, 0.575);
+        --gray-color: rgb(207, 207, 207);
+        --footer-background: rgb(53, 53, 53);
+        --accent-background: rgb(24, 12, 58);
+        --loading-color: rgb(65, 65, 65);
+    }
+
+    @media ( prefers-color-scheme: dark ) {
+        :root {
+            --primary-color: white;
+            --secondary-color: black;
+            --background-color: rgb(32, 32, 32);
+            --nav-background: rgb(54, 54, 54);
+            --popup-color: rgb(58, 58, 58);
+            --hover-color: #007ddd;
+            --overlay-color: rgba(104, 104, 104, 0.575);
+            --gray-color: rgb(207, 207, 207);
+            --footer-background: rgb(53, 53, 53);
+            --accent-background: rgb(24, 12, 58);
+            --loading-color: rgb(65, 65, 65);
+        }
+    }
+
+    ::selection {
+        background-color: #7c8cec;
+        color: white;
+    }
+
+    html,
+    body {
+        width: 100%;
+        height: 100%;
+        margin: 0;
+        padding: 0;
+        font-size: 17px;
+    }
+
+    #app {
+        transition: 0.5s;
+        background-color: var( --background-color );
+        font-family: 'Plus Jakarta Sans', sans-serif;
+        /* font-family: Avenir, Helvetica, Arial, sans-serif; */
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        text-align: center;
+        color: var( --primary-color );
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+        width: 100vw;
+        margin: 0;
+    }
+
+    #main-view {
+        min-height: 60vh;
+    }
+
+    .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 setup lang="ts">
+    import { ref } from 'vue';
+    import { RouterView } from 'vue-router';
+
+    const theme = ref( 'light_mode' );
+
+    const changeTheme = () => {
+        if ( theme.value === 'dark_mode' ) {
+            document.documentElement.classList.remove( 'dark' );
+            document.documentElement.classList.add( 'light' );
+            localStorage.setItem( 'theme', 'light_mode' );
+            theme.value = 'light_mode';
+        } else if ( theme.value === 'light_mode' ) {
+            document.documentElement.classList.remove( 'light' );
+            document.documentElement.classList.add( 'dark' );
+            localStorage.setItem( 'theme', 'dark_mode' );
+            theme.value = 'dark_mode';
+        }
+    }
+
+    theme.value = localStorage.getItem( 'theme' ) ?? '';
+    if ( window.matchMedia( '(prefers-color-scheme: dark)' ).matches || theme.value === 'dark_mode' ) {
+        document.documentElement.classList.add( 'dark' );
+        theme.value = 'dark_mode';
+    } else {
+        document.documentElement.classList.add( 'light' );
+        theme.value = 'light_mode';
+    }
+</script>

MusicPlayerV2-GUI/src/assets/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>

MusicPlayerV2-GUI/src/main.ts

@@ -0,0 +1,12 @@
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+
+import App from './App.vue'
+import router from './router'
+
+const app = createApp(App)
+
+app.use(createPinia())
+app.use(router)
+
+app.mount('#app')

MusicPlayerV2-GUI/src/router/index.ts

@@ -0,0 +1,15 @@
+import { createRouter, createWebHistory } from 'vue-router';
+import HomeView from '@/views/HomeView.vue';
+
+const router = createRouter( {
+    history: createWebHistory( import.meta.env.BASE_URL ),
+    routes: [
+        {
+            path: '/',
+            name: 'home',
+            component: HomeView
+        },
+    ]
+} );
+
+export default router;

MusicPlayerV2-GUI/src/stores/counter.ts

@@ -0,0 +1,12 @@
+import { ref, computed } from 'vue'
+import { defineStore } from 'pinia'
+
+export const useCounterStore = defineStore('counter', () => {
+  const count = ref(0)
+  const doubleCount = computed(() => count.value * 2)
+  function increment() {
+    count.value++
+  }
+
+  return { count, doubleCount, increment }
+})

MusicPlayerV2-GUI/src/views/HomeView.vue

@@ -0,0 +1,10 @@
+<template>
+    <div>
+        <h1>Hello World</h1>
+        <div class="player-panel-link"></div>
+    </div>
+</template>
+
+<script setup lang="ts">
+
+</script>