Update ui and test table layout

Pulsar/WebApp/src/lib/JournalLog.svelte

@@ -1,17 +1,146 @@
 <script lang="ts">
-  import connection from "./stores/Connection.store";
+    import connection from "./stores/Connection.store";
 
-  let value = $state('');
+    let value = $state("");
 
+    $connection.on("JournalUpdated", (journals) => {
+        console.log(journals);
+        value += `${JSON.stringify(journals)}\n`;
+    });
 
-$connection.on("JournalUpdated", (journals) => {
+    let data: any[] = [{}, {}, {}, {}, {}];
-    console.log(journals);
-    value += `${JSON.stringify(journals)}\n`;
-});
-
 </script>
 
-<h1>Journals:</h1>
+<section>
+    <div class="title">
+        <h1>Journals</h1>
+    </div>
 
-<textarea bind:value ></textarea>
+    <div class="box">
+        {#each data as row}
+            <div class="group">
+                <div class="summary">
+                    <span>Body Name: Farseer Inc</span>
+                    <div>
+                        <span>Signals: 1</span>
+                        <span>Base Value: 11111</span>
+                    </div>
+                </div>
 
+                <table class="details">
+                    <thead>
+                        <tr>
+                            <th>Flags</th>
+                            <th>Genus</th>
+                            <th>Species</th>
+                            <th>Seen</th>
+                            <th>Samples</th>
+                            <th>Type</th>
+                            <th>Possible Variants</th>
+                            <th>Base Value</th>
+                            <th>Distance</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {#each data as row}
+                            <tr>
+                                <td>Test</td>
+                                <td>Test</td>
+                                <td>Test</td>
+                                <td>Test</td>
+                                <td>Test</td>
+                                <td>Test</td>
+                                <td>Test</td>
+                                <td>Test</td>
+                                <td>500m</td>
+                            </tr>
+                        {/each}
+                    </tbody>
+                </table>
+            </div>
+        {/each}
+    </div>
+</section>
+
+<style>
+    section {
+        margin-top: 5px;
+        height: 500px;
+        overflow-y: scroll;
+    }
+
+    .box {
+        display: flex;
+        flex-direction: column;
+        gap: 20px;
+    }
+
+    .title {
+        padding-left: 5px;
+        padding-right: 5px;
+    }
+
+    .summary {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 50px;
+        padding-top: 5px;
+        padding-bottom: 5px;
+        background-color: #c06400;
+        color: var(--font-color-2);
+        font-weight: bold;
+    }
+
+    .summary span {
+        padding-left: 5px;
+    }
+
+    .summary div {
+        display: flex;
+        gap: 20px;
+    }
+
+    .details {
+        border-collapse: collapse;
+        border: none;
+        table-layout: auto;
+        width: 100%;
+    }
+
+    thead {
+        background-color: #c06400;
+    }
+
+    tbody tr:nth-child(even) {
+        background-color: #301900;
+        color: #cccccc;
+    }
+
+    tbody tr:nth-child(odd) {
+        background-color: #170c00;
+        color: #cccccc;
+    }
+
+    tbody tr:hover td {
+        background-color: rgba(79, 42, 0, 0.85);
+    }
+
+    th {
+        padding-top: 5px;
+        padding-bottom: 5px;
+        padding-left: 5px;
+        padding-right: 5px;
+        text-wrap: wrap;
+        text-align: left;
+        color: var(--font-color-2);
+    }
+
+    th:not(:first-child) {
+        text-align: center;
+    }
+
+    td:not(:first-child) {
+        text-align: center;
+    }
+</style>

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

@@ -1,10 +1,5 @@
 <script>
-  import Fuel from "$lib/Fuel.svelte";
+    import Fuel from "$lib/Fuel.svelte";
-    import {
-        QueryClient,
-        QueryClientProvider,
-    } from "@sveltestack/svelte-query";
-    const queryClient = new QueryClient();
 </script>
 
 <header>
@@ -17,20 +12,18 @@
     <Fuel />
 </header>
 
-<QueryClientProvider client={queryClient}>
+<main>
-    <main>
+    <slot />
-        <slot />
+</main>
-    </main>
-</QueryClientProvider>
 
 <style>
     :root {
         --background-color: #0d0302;
-        /* #290d00; */
         --header-color: #202225;
         --headings-color: #ffffff;
-        --font-color: #eeeeee;
+        --font-color-1: #cccccc;
-        --border-color: #141414;
+        --font-color-2: #000000;
+        --border-color: #5f3100;
         --line-color: #ffffff;
         --link-color: #d06527;
         --link-color-hover: #000000;
@@ -38,8 +31,9 @@
 
     :global(body) {
         background-color: var(--background-color);
-        color: var(--font-color);
+        color: var(--font-color-1);
-        font-family: "Open Sans", sans-serif;
+        font-family: "Eurostile", Helvetica, sans-serif;
+        letter-spacing: 0.05em;
         font-size: 1rem;
         box-sizing: border-box;
         margin: 0px;

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

@@ -2,7 +2,7 @@
     import Status from "$lib/Status.svelte";
     import Ship from "$lib/Ship.svelte";
     import Debug from "$lib/Debug.svelte";
-    import MissionStack from "$lib/MissionStack.svelte"; 
+    import MissionStack from "$lib/MissionStack.svelte";
     import JournalLog from "$lib/JournalLog.svelte";
 </script>
 
@@ -13,36 +13,21 @@
     <div>
         <JournalLog />
     </div>
-    <div>
-        <!-- <Ship /> -->
-    </div>
-    <div>
-        <!-- <MissionStack /> -->
-    </div>
-    <!--<div>
-        <Debug />
-    </div>-->
 </section>
 
 <style>
     div {
-        border: 2px solid #d66325;
+        border: 2px solid var(--border-color);
     }
 
     section {
         display: flex;
         flex-wrap: wrap;
-        /* display: grid; */
-        /* grid-template-columns: repeat(auto-fit, minmax(600px, 1fr)); */
         gap: 20px;
-
-        /* display: flex; */
-        /* flex-direction: column; */
-        /* gap: 10px; */
     }
 
     div {
         flex: 50%;
-        padding: 5px;
+        max-width: 100%;
     }
 </style>