Add test ui code

Pulsar/WebApp/src/routes/+layout.svelte

@@ -1,32 +1,104 @@
-<nav>
-    <ul>
-        <li><a href="/">Dashboard</a></li>
-        <li><a href="/ship">Ship</a></li>
-        <li><a href="/botany">Botanist</a></li>
-        <li><a href="/explorer">Explorer</a></li>
-        <li><a href="/options">Options</a></li>
-    </ul>
-</nav>
+<script>
+    import {
+        QueryClient,
+        QueryClientProvider,
+    } from "@sveltestack/svelte-query";
+    const queryClient = new QueryClient();
+</script>
 
-<slot />
+<header>
+    <nav>
+        <ul>
+            <li><a href="/">Dashboard</a></li>
+            <li><a href="/settings">Settings</a></li>
+        </ul>
+    </nav>
+</header>
+
+<QueryClientProvider client={queryClient}>
+    <main>
+        <slot />
+    </main>
+</QueryClientProvider>
 
 <style>
-    ul {
-        display: flex;
-        list-style-type: none;
-    }
-    li {
-        padding: 1%;
+    :root {
+        --background-color: #0d0302;
+        /* #290d00; */
+        --header-color: #202225;
+        --headings-color: #ffffff;
+        --font-color: #eeeeee;
+        --border-color: #141414;
+        --line-color: #ffffff;
+        --link-color: #d06527;
+        --link-color-hover: #000000;
     }
 
     :global(body) {
-        background-color: black;
-        color: white;
-        [href] {
-            color: red;
-            &:visited {
-                color: aqua;
-            }
-        }
+        background-color: var(--background-color);
+        color: var(--font-color);
+        font-family: "Open Sans", sans-serif;
+        font-size: 1rem;
+        box-sizing: border-box;
+        margin: 0px;
+        line-height: 1.6;
     }
-</style>
+
+    :global(h1) {
+        margin: 0;
+    }
+
+    header {
+        margin-top: 10px;
+        margin-bottom: 20px;
+    }
+
+    nav {
+        border-bottom: 3px solid #d66325;
+        border-top: 3px solid #d66325;
+        max-width: 1600px;
+        margin: 0 auto;
+    }
+
+    ul {
+        display: flex;
+        list-style-type: none;
+        margin: 0px;
+        padding: 0px;
+        gap: 10px;
+    }
+
+    li {
+        margin-top: 5px;
+        margin-bottom: 5px;
+        width: 200px;
+        padding-left: 10px;
+        padding-right: 10px;
+        padding-top: 4px;
+        padding-bottom: 4px;
+        background-color: #3c1e05;
+        font-weight: bold;
+        font-size: 1.125rem;
+        text-align: center;
+    }
+
+    li:hover {
+        background-color: #ef7d15;
+    }
+
+    li:hover a {
+        color: var(--link-color-hover);
+    }
+
+    a {
+        display: block;
+        width: 100%;
+        color: var(--link-color);
+        text-decoration: none;
+    }
+
+    main {
+        max-width: 1600px;
+        margin: 0 auto;
+    }
+</style>

Pulsar/WebApp/src/routes/+page.svelte

@@ -1,56 +1,44 @@
 <script lang="ts">
-    import * as signalR from "@microsoft/signalr"
-    import {onMount} from "svelte";
-    let x: string | null = $state(null);
-    let textarea = $state("");
-
-    const connection = new signalR.HubConnectionBuilder()
-        .withUrl("http://localhost:5000/api/events")
-        .configureLogging(signalR.LogLevel.Information)
-        .build();
-
-    onMount(async () => {
-
-        connection.onclose(async () => {
-            console.log("Lost connection to Event Hub. Attempting to reconnect...");
-            await connection.start();
-        });
-
-        connection.on("StatusUpdated", (message) => {
-            console.log('we did it!');
-            console.log(message);
-            textarea += JSON.stringify(message) + "\n"
-        });
-
-        await connection.start();
-    })
-
-    const getStatus = async () => {
-        var response = await fetch("http://localhost:5000/api/status", {
-            method: "GET",
-            headers: {
-                "Content-Type": "application/json",
-                "Accept": "application/json"
-            }
-        });
-
-        if (response.ok)
-        {
-            const data = await response.text();
-            console.log(data);
-            x = data;
-        }
-
-        console.log(response);
-    }
+    import Status from "$lib/Status.svelte";
+    import Ship from "$lib/Ship.svelte";
+    import Debug from "$lib/Debug.svelte";
+    import MissionStack from "$lib/MissionStack.svelte";
 </script>
 
-<h1>Welcome to Pulsar</h1>
+<section>
+    <div>
+        <Status />
+    </div>
+    <div>
+        <!-- <Ship /> -->
+    </div>
+    <div>
+        <!-- <MissionStack /> -->
+    </div>
+    <!--<div>
+        <Debug />
+    </div>-->
+</section>
 
-<button on:click={getStatus}> GetStatus </button>
+<style>
+    div {
+        border: 2px solid #d66325;
+    }
 
-<span> {x} </span>
+    section {
+        display: flex;
+        flex-wrap: wrap;
+        /* display: grid; */
+        /* grid-template-columns: repeat(auto-fit, minmax(600px, 1fr)); */
+        gap: 20px;
 
-<br/>
+        /* display: flex; */
+        /* flex-direction: column; */
+        /* gap: 10px; */
+    }
 
-<textarea bind:value={textarea}></textarea>
+    div {
+        flex: 50%;
+        padding: 5px;
+    }
+</style>