Add basic routing and layout structure

Replaced App.vue with Layout.vue to serve as the main layout. Added Home and 404NotFound route components and configured router to handle home and fallback routes. Updated main.ts to use the new layout component.

GUI/src/App.vue

@@ -1,11 +0,0 @@
-<script setup lang="ts"></script>
-
-<template>
-  <h1>You did it!</h1>
-  <p>
-    Visit <a href="https://vuejs.org/" target="_blank" rel="noopener">vuejs.org</a> to read the
-    documentation
-  </p>
-</template>
-
-<style scoped></style>

GUI/src/Layout.vue

@@ -0,0 +1,8 @@
+<script setup lang="ts"></script>
+
+<template>
+  <h1>You did it!</h1>
+  <router-view></router-view>
+</template>
+
+<style scoped></style>

GUI/src/main.ts

@@ -1,5 +1,5 @@
 import { createApp } from 'vue'
-import App from './App.vue'
+import App from './Layout.vue'
 import router from './router'
 import vuetify from './plugins/vuetify'
 

GUI/src/router/index.ts

@@ -1,8 +1,17 @@
+import Home from '@/routes/Home.vue'
+import NotFound from '@/routes/404NotFound.vue'
 import { createRouter, createWebHistory } from 'vue-router'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
-  routes: [],
+  routes: [
+    {
+      name: 'Home',
+      path: '/',
+      component: Home,
+    },
+    { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound },
+  ],
 })
 
 export default router

GUI/src/routes/404NotFound.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts"></script>
+
+<template>
+  <h1>404</h1>
+</template>
+
+<style scoped>
+.error-title {
+  font-size: 3rem;
+  font-weight: bold;
+  margin-bottom: 1rem;
+  letter-spacing: 2px;
+  color: #fff;
+}
+
+.error-message {
+  font-size: 1.25rem;
+  opacity: 0.85;
+  color: #fff;
+}
+</style>

GUI/src/routes/Home.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+</script>
+
+<template>
+    <h1>Home Vue</h1>
+</template>
+
+<style scoped>
+</style>