Add parsing for StationAlerts, and fetch function for Boards.

src/lib/components/ui/cards/StationAlertCard.svelte

@@ -0,0 +1,137 @@
+<script lang="ts">
+	import { slide } from 'svelte/transition';
+	import type { ApiStationsBoard } from '@owlboard/owlboard-ts';
+	import { IconAlertOctagonFilled, IconChevronDownFilled } from '@tabler/icons-svelte';
+
+	let { messages = [] }: { messages: ApiStationsBoard.BoardMsgs[] } = $props();
+	let isOpen = $state(false);
+</script>
+
+{#if messages.length > 0}
+	<aside class="alert-card">
+		<button onclick={() => (isOpen = !isOpen)} class="trigger" class:active={isOpen}>
+			<span class="warning-icon">
+                <IconAlertOctagonFilled />
+            </span>
+			<span class="summary">
+				{messages.length}
+				{messages.length === 1 ? 'active alert' : 'active alerts'}
+			</span>
+			<span class="chevron" class:rotated={isOpen}><IconChevronDownFilled /></span>
+		</button>
+
+    {#if isOpen}
+        <div transition:slide={{ duration: 450 }} class="content">
+            {#each messages as msg}
+                <div class="message-item">
+                    <p class="message-text">
+                        {msg.t}
+                        {#if msg.l && msg.lt}
+                            <a href={msg.l} target="_blank" rel="noopener noreferrer" class="alert-link">
+                                {msg.lt}
+                            </a>
+                        {/if}
+                    </p>
+                </div>
+            {/each}
+        </div>
+    {/if}
+    </aside>
+{/if}
+
+<style>
+    .alert-card {
+        margin: 1rem 0;
+        border-radius: 8px;
+        background: transparent;
+        position: relative;
+        z-index: 10;
+        width: 95%;
+        max-width: 750px;
+    }
+
+    .trigger {
+        width: 100%;
+        display: flex;
+        border-radius: 8px;
+        align-items: center;
+        padding: 0.4rem 1rem;
+        background: var(--alert-orange);
+        color: white;
+        border: none;
+        cursor: pointer;
+        text-align: left;
+        position: relative;
+        z-index: 2;
+        height: 46px;
+        transition: all 0.65s 0.2s;
+    }
+
+    .trigger.active {
+        border-radius: 8px 8px 0 0;
+        transition: all 0.1s 0s;
+    }
+
+    .warning-icon {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        margin-left: 0;
+        margin-top: 0;
+        margin-bottom: 0;
+        margin-right: 1rem;
+        padding: 0;
+    }
+
+    .summary {
+        flex: 1;
+        font-family: 'URW Gothic', sans-serif;
+        letter-spacing: 0.05em;
+        font-weight: 600;
+        font-size: 1rem;
+    }
+
+    .chevron {
+        transition: transform  0.5s ease;
+        display: inline-flex;
+        justify-content: center;
+    }
+
+    .chevron.rotated {
+        transform: rotateX(180deg);
+    }
+
+    .content {
+        padding: 1rem;
+        position: absolute;
+        top: 46px;
+        border-radius: 0 0 8px 8px;
+        left: 0;
+        right: 0;
+        background: var(--alert-orange);
+        filter: brightness(1.2);
+        color: var(--color-title);
+        font-family: 'URW Gothic', sans-serif;
+        font-size: 1.0rem;
+        font-weight: 600;
+        line-height: 1.2;
+        z-index: 1;
+    }
+
+    .message-item {
+        margin: 10px;
+        padding-bottom: 0.75rem;
+    }
+
+    .message-item p {
+        margin: 0;
+    }
+
+    .message-item a {
+        color: #f2ff00;
+    }
+
+    .message-item:last-child {
+        padding-bottom: 0;
+    }
+</style>

src/lib/components/ui/cards/pis/PisCode.svelte

@@ -4,12 +4,6 @@
 	import Button from '$lib/components/ui/Button.svelte';
 
 	let { onsearch }: { onsearch: (c: string) => void } = $props();
-
-	let codeValue = $state('');
-
-	function resetValues(): void {
-		codeValue = '';
-	}
 </script>
 
 <BaseCard header={'Find by Code'}>
@@ -19,16 +13,13 @@
 				<Textbox
 					placeholder={'Code'}
 					uppercase={true}
-					type={'number'}
-					max={9999}
-					bind:value={codeValue}
+					type={'text'}
+					onsubmit={onsearch}
+					maxLength={4}
+					inputmode={'numeric'}
 				/>
 			</div>
 		</div>
-		<div class="button-wrapper">
-			<Button onclick={() => onsearch(codeValue.toString())}>Search</Button>
-			<Button onclick={resetValues}>Reset</Button>
-		</div>
 	</div>
 </BaseCard>
 
@@ -48,7 +39,7 @@
 	}
 
 	.textbox-item-wrapper {
-		width: 30%;
+		width: 60%;
 	}
 
 	.button-wrapper {

src/lib/components/ui/cards/pis/PisStartEndCard.svelte

@@ -43,11 +43,11 @@
 		display: flex;
 		width: 100%;
 		justify-content: center;
-		gap: 4rem;
+		gap: 1.1rem;
 	}
 
 	.textbox-item-wrapper {
-		width: 30%;
+		width: 50%;
 	}
 
 	.button-wrapper {