Add OwlBoard API Library

Add styling to UI Components

src/routes/about/+page.svelte

@@ -30,8 +30,8 @@
 	</p>
 	<p class="amble">
 		Why OwlBoard? The name was chosen as an evolution of its predecessor, 'Athena'; owls are
-		associated with the Roman Goddess as well as with wisdom. The name also links to Bath, where the
-		app has been built and is run, representing the 'Minerva Owl' sculpture trail in the city, with
+		associated with the equivalent Roman Goddess - Minerva - as well as with wisdom. This also links to Bath, where the
+		app has been built and is run, relating to the 'Minerva Owl' sculpture trail in the city, with
 		many of the sculptures still in the area.
 	</p>
 	<p class="opensource">

src/routes/pis/+page.svelte

@@ -1,16 +1,46 @@
 <script lang="ts">
     import PisStartEndCard from '$lib/components/ui/cards/pis/PisStartEndCard.svelte';
     import PisCode from '$lib/components/ui/cards/pis/PisCode.svelte';
+    import Button from '$lib/components/ui/Button.svelte';
+    import type { PisObjects } from '@owlboard/api-schema-types';
+
+    let results = $state<PisObjects[]>([]);
+    let resultsLoaded = $state<boolean>(false);
+
+    function handleStartEndSearch(start: string, end: string) {
+        console.log(`PIS Search: ${start}-${end}`);
+        // Fetch API Results Here
+        resultsLoaded = true;
+    }
+
+    function handleCodeSearch(code: string) {
+        console.log(`PIS Search: ${code}`);
+        // Fetch API Results Here
+        resultsLoaded = true;
+    }
+
+    function clearResults() {
+        console.log('Clearing Results');
+        resultsLoaded = false;
+        results = [];
+    }
 </script>
 
-<div class="card-container">
-    <PisStartEndCard />
-    <PisCode />
-</div>
-
-<div class="result-container">
-
-</div>
+{#if !resultsLoaded}
+    <div class="card-container">
+        <PisStartEndCard onsearch={handleStartEndSearch} />
+        <PisCode onsearch={handleCodeSearch} />
+    </div>
+{:else}
+    <div class="result-container">
+        {#if !results.length}
+            <p class="no-results">No results found</p>
+        {:else}
+            <p class="no-results">Unable to load results</p>
+        {/if}
+        <Button onclick={clearResults}>Reset</Button>
+    </div>
+{/if}
 
 <style>
 	.card-container {
@@ -23,11 +53,21 @@
 	}
 
     .result-container {
+        font-family: 'URW Gothic', sans-serif;
+        font-size: 1.2rem;
+        font-weight: 600;
         display: flex;
         align-items: center;
         flex-direction: column;
         gap: 5px;
         justify-content: center;
         background: var(--color-accent);
+        border-radius: 15px;
+        padding: 0 0 20px 0;
+        margin: auto;
+        margin-top: 25px;
+        width: 90%;
+        max-width: 1000px;
+		box-shadow: var(--shadow-std);
     }
 </style>