Add extra message to +error.svelte to handle, and clarify 'OFFLINE' error.

Add features:
- manifest.json with PNG icon set. - reset option against QuickLinks storage - 'Preferences' store, ready for preferences page - including location boolean... Important! - Minor service-worker improvements for better offline fallbacks
2026-05-14 19:43:22 +01:00 · 2026-05-14 19:39:05 +01:00 · 2026-05-13 20:47:01 +01:00 · 2026-05-12 20:35:12 +01:00 · 2026-05-12 19:06:25 +01:00 · 2026-05-11 20:28:22 +01:00
28 changed files with 1734 additions and 648 deletions
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -41,7 +41,8 @@
 		"vitest-browser-svelte": "^2.0.2"
 	},
 	"dependencies": {
-		"@owlboard/owlboard-ts": "^3.0.0-dev.20260503t0947",
+		"@owlboard/api-schema-types": "^3.0.3-alpha18",
 		"@owlboard/owlboard-ts": "^3.0.0-dev.20260509t2101",
 		"@tabler/icons-svelte": "^3.40.0"
 	}
 }
--- a/src/app.html
+++ b/src/app.html
@@ -3,12 +3,14 @@
 	<head>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<link rel="manifest" href="/manifest.webmanifest" />
 		<meta name="title" content="OwlBoard | Your fastest route to live and reference data" />
 		<meta
 			name="description"
 			content="Live station departures, Live train tracking, PIS Codes & more"
 		/>
 		<!-- PWA Requirements -->
 		<link rel="manifest" href="%sveltekit.assets%/manifest.json" />
 		<link rel="apple-touch-icon" href="%sveltekit.assets%/icons/apple-touch-icon.png" />
 		<meta name="theme-color" content="#4fd1d1" />
 		<link rel="canonical" href="https://owlboard.info" />
 		<meta property="og:type" content="website" />
--- a/src/lib/assets/apple-touch-icon.png
+++ b/src/lib/assets/apple-touch-icon.png
--- a/src/lib/assets/owlboard-logo-square.svg
+++ b/src/lib/assets/owlboard-logo-square.svg
@@ -0,0 +1 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" viewBox="0 0 562.1 562.1"><defs><radialGradient xlink:href="#a" id="b" cx="256" cy="256" r="254" fx="256" fy="256" gradientTransform="translate(27 27)" gradientUnits="userSpaceOnUse"/><linearGradient id="a"><stop offset="0" stop-color="#2b343c"/><stop offset="1" stop-color="#404c55"/></linearGradient></defs><path fill="url(#b)" d="M694.3 283a411.3 394 0 0 1-410.7 394 411.3 394 0 0 1-412-392.8 411.3 394 0 0 1 409.5-395.1 411.3 394 0 0 1 413.2 391.4" transform="translate(-2 -2)"/><path fill="#4fd1d1" d="M281 81a200 200 0 0 0-153.4 71.8 120 120 0 0 0 50.5 25.8c9 2.3 8.9 2.3 15.6-.6 50-21.6 124.4-21.6 175.2-.1 13.3 5.6 44.6-6.5 65.9-24.8a200 200 0 0 0-153.8-72m-161.9 82.7a200 200 0 0 0-38 117.3 200 200 0 0 0 200 200 200 200 0 0 0 200-200 200 200 0 0 0-37.8-116.8 96 96 0 0 1-17.7 46.6l-2.8 4 1.3 1.8c73.3 99.2-14.3 222.2-116.7 163.6-2.5-1.4-4.7-2.4-5-2.1s-10.5 19.6-18 34c-3.4 6.5-2.7 6.6-6.3-.3-9.2-17.5-18-34-18.3-34-.1 0-2.3 1-4.7 2.5-101.3 58-190.7-65.7-117.4-162.4q2.3-3 1.8-3.6a102 102 0 0 1-20.4-50.6m86.5 57q-14.6 0-29.8 7.5C108 261.8 143.1 366.4 217.5 352a68 68 0 0 0 43.3-28.4c2.4-3.4 3.3-4.2 3.7-3.7l8.5 14.6c9.4 16.3 8 15 11.4 9 5.1-9 13.7-23.5 14-24 .3-.2 1.9 1.8 3.6 4.3 31 45.5 101.6 35.6 118.3-16.5a66.4 66.4 0 0 0-83.9-83c-23.3 7.7-38.7 24.4-53.8 58.4l-1.3 3-2.7-6c-17-38.5-43.7-59.5-73-59.2m147.2 34.7a32 32 0 0 1 23.7 9.5c22.8 22.8.7 60.8-30.9 53.1a32 32 0 0 1-23.2-37.3 31.5 31.5 0 0 1 30.4-25.3m-145.8 0c16.4-.8 32.7 11 33.9 30.1a32.2 32.2 0 0 1-40.1 32.5 31.5 31.5 0 0 1-15-52.9 32 32 0 0 1 21.2-9.6m12 9.6q-3.3 0-5.8 3c-6.3 7.4 2.5 17.7 11 13a9 9 0 0 0 4.2-7.5c0-5.4-4.8-8.9-9.4-8.5m123.1 0c-6 .5-9.6 6.5-7 12.3 2 4.5 8.3 6.3 12.2 3.6 7.2-4.9 4.7-15.3-4-15.8z"/></svg>
--- a/src/lib/components/ui/Loading.svelte
+++ b/src/lib/components/ui/Loading.svelte
@@ -1,12 +1,36 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import { fade } from 'svelte/transition';
 	let { message = 'Loading...' } = $props();
 	let messageIndex = $state(0);
 	onMount(() => {
 		const interval = setInterval(() => {
 			if (messageIndex === 0) {
 				messageIndex = 1;
 			} else {
 				messageIndex = messageIndex === 1 ? 2 : 1;
 			}
 		}, 1500);
 		return () => clearInterval(interval);
 	});
 </script>
 <div class="loading-state">
 	<div class="track">
 		<div class="shuttle"></div>
 	</div>
-	<p>{message}</p>
+	<div class="message-container">
 		{#if messageIndex === 0}
 			<p in:fade={{ delay: 300, duration: 250 }} out:fade={{ duration: 250 }}>{message}</p>
 		{:else if messageIndex === 1}
 			<p in:fade={{ delay: 300, duration: 250 }} out:fade={{ duration: 250 }}>Slow connection...</p>
 		{:else}
 			<p in:fade={{ delay: 300, duration: 250 }} out:fade={{ duration: 250 }}>Still trying...</p>
 		{/if}
 	</div>
 </div>
 <style>
@@ -38,11 +62,18 @@
 		animation: data-travel 1.6s infinite ease-in-out;
 	}
 	.message-container {
 		display: grid;
 		place-items: center;
 		height: 2rem;
 		margin-top: 1rem;
 	}
 	p {
 		grid-area: 1 / 1;
 		font-family: 'URW Gothic', sans-serif;
 		letter-spacing: 0.15em;
 		color: var(--color-title);
 		animation: pulse 2s infinite ease-in-out;
 	}
 	@keyframes data-travel {
@@ -53,14 +84,4 @@
 			left: 100%;
 		}
 	}
 	@keyframes pulse {
 		0%,
 		100% {
 			opacity: 1;
 		}
 		50% {
 			opacity: 0.4;
 		}
 	}
 </style>
--- a/src/lib/components/ui/Textbox.svelte
+++ b/src/lib/components/ui/Textbox.svelte
@@ -97,6 +97,17 @@
 		color: var(--color-title);
 	}
 	input[type='number']::-webkit-outer-spin-button,
 	input[type='number']::-webkit-inner-spin-button {
 		-webkit-appearance: none;
 		margin: 0;
 	}
 	input[type='number'] {
 		-moz-appearance: textfield;
 		appearance: textfield;
 	}
 	input {
 		width: 100%;
 		background: transparent;
--- a/src/lib/components/ui/TrainService.svelte
+++ b/src/lib/components/ui/TrainService.svelte
@@ -7,6 +7,7 @@
 	import TocStyle from '$lib/components/ui/TocStyle.svelte';
 	import TiplocConverter from '$lib/components/ui/TiplocConverter.svelte';
 	import { IconChevronDownFilled } from '@tabler/icons-svelte';
 	import { estClass } from '$lib/utils/time';
 	let { service }: { service: ApiTrainsTrainByHeadcode.TrainByHeadcodeResponse } = $props();
 	let isExpanded = $state(false);
 	let loadingDetails = $state(false);
@@ -26,7 +27,7 @@
 			details = result.data;
 			isExpanded = true;
 		} catch (e) {
-			console.Error('Failed to load train details');
+			console.error('Failed to load train details');
 			loadingDetailsError = true;
 			loadingDetailsErrorMsg = e.message;
 		} finally {
@@ -45,8 +46,6 @@
 		loadingDetails = false;
 	}
 	const estClass = (act, est) => (!act && est ? 'est' : 'act');
 	const activityMap: Record<string, string> = {
 		'-D': 'Vehicles detatched',
 		'-T': 'Vehicles attached & detached',
@@ -147,12 +146,12 @@
 				{/if}
 				{#if details.pis}
 					<div class="pis-detail">
-						<span class="pis-code">PIS: {details.Pis.code}</span>
+						<span class="pis-code">PIS: {details.pis.code}</span>
-						{#if details.Pis.skip?.skip > 0}
+						{#if details.pis.skip?.skip > 0}
 							<span class="pis-skip">
-								(skip {details.Pis.skip.position === 'head' ? 'first' : 'last'}
+								(skip {details.pis.skip.position === 'head' ? 'first' : 'last'}
-								{details.Pis.skip.skip}
+								{details.pis.skip.skip}
-								{details.Pis.skip.skip === 1 ? 'stop' : 'stops'}
+								{details.pis.skip.skip === 1 ? 'stop' : 'stops'}
 								)
 							</span>
 						{/if}
--- a/src/lib/components/ui/cards/pis/PisCode.svelte
+++ b/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'}
+					type={'text'}
-					max={9999}
+					onsubmit={onsearch}
-					bind:value={codeValue}
+					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 {
--- a/src/lib/components/ui/cards/pis/PisStartEndCard.svelte
+++ b/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 {
--- a/src/lib/components/ui/station-board/StaffServicesTable.svelte
+++ b/src/lib/components/ui/station-board/StaffServicesTable.svelte
@@ -0,0 +1,418 @@
 <script lang="ts">
 	import type { ApiStationsBoard } from '@owlboard/owlboard-ts';
 	import { formatUkTime, estClass, delayClassFromTimePair } from '$lib/utils/time';
 	let { services }: { services: ApiStationsBoard.BoardService[] } = $props();
 	const getRowKey = (s: ApiStationsBoard.BoardService) =>
 		`${s.r}${s.sta ?? ''}${s.std ?? ''}${s.wtp ?? ''}`;
 </script>
 <table class="departure-board">
 	<colgroup>
 		<col style="width:10%;" />
 		<!-- ID (Headcode) -->
 		<col style="width:17%;" />
 		<!-- ORIG (Origin) -->
 		<col style="width:17%;" />
 		<!-- DEST (Destination) -->
 		<col style="width:9%;" />
 		<!-- PLT (Platform) -->
 		<col style="width: 12%;" />
 		<!-- STA -->
 		<col style="width: 12%;" />
 		<!-- ETA/ATA -->
 		<col style="width: 12%;" />
 		<!-- STD -->
 		<col style="width: 11%;" />
 		<!-- ETD/ATD -->
 	</colgroup>
 	<thead>
 		<tr>
 			<th colspan="4" aria-hidden="true"></th>
 			<th scope="colgroup" colspan="2" class="upper-head"><abbr title="Arrival">Arr</abbr></th>
 			<th scope="colgroup" colspan="2" class="upper-head"><abbr title="Departure">Dep</abbr></th>
 		</tr>
 		<tr>
 			<th scope="col"><abbr title="Headcode">ID</abbr></th>
 			<th scope="col"><abbr title="Origin">Orig</abbr></th>
 			<th scope="col"><abbr title="Destination">Dest</abbr></th>
 			<th scope="col"><abbr title="Platform">Plt</abbr></th>
 			<th scope="col"><abbr title="Scheduled">Sch</abbr></th>
 			<th scope="col"><abbr title="Actual/Expected">Act</abbr></th>
 			<th scope="col"><abbr title="Scheduled">Sch</abbr></th>
 			<th scope="col"><abbr title="Actual/Expected">Act</abbr></th>
 		</tr>
 	</thead>
 	{#each services as service (getRowKey(service))}
 		<tbody>
 			<tr
 				class="service-row"
 				class:serviceCancelled={service.c}
 				class:servicePass={service.wtp}
 				class:serviceNonPassenger={!service.ip}
 			>
 				<td class="id-cell">{service.h}</td>
 				<td class="orig-cell"
 					><abbr title={service.og.n.toLocaleUpperCase()}>{service.og.t}</abbr></td
 				>
 				<td class="dest-cell"
 					><abbr title={service.dt.n.toLocaleUpperCase()}>{service.dt.t}</abbr></td
 				>
 				<td class="plt-cell" class:platSup={service.ps} class:platChange={service.pc}
 					>{service.p || '-'}</td
 				>
 				<!-- Handle different display for a passing train -->
 				{#if service.wtp}
 					<td class="pass-cell" colspan="2">Pass</td>
 					<td class="time-cell">{formatUkTime(service.wtp)}</td>
 					<!-- If cancelled, show '-', otherwise check for RT or show time -->
 					<td
 						class="time-cell {estClass(service.atp, service.etp)} {delayClassFromTimePair(
 							service.wtp,
 							service.atp || service.etp
 						)}"
 					>
 						<span>
 							{service.c
 								? '-'
 								: delayClassFromTimePair(service.wtp, service.atp || service.etp) === 'delay-rt'
 									? 'RT'
 									: formatUkTime(service.atp || service.etp)}
 						</span>
 					</td>
 				{:else}
 					<td class="time-cell">{formatUkTime(service.sta)}</td>
 					<!-- Arrival Actual/Expected -->
 					<td
 						class="time-cell {estClass(service.ata, service.eta)} {delayClassFromTimePair(
 							service.sta,
 							service.ata || service.eta
 						)}"
 					>
 						<span>
 							{service.c
 								? '-'
 								: delayClassFromTimePair(service.sta, service.ata || service.eta) === 'delay-rt'
 									? 'RT'
 									: formatUkTime(service.ata || service.eta)}
 						</span>
 					</td>
 					<td class="time-cell">{formatUkTime(service.std)}</td>
 					<!-- Departure Actual/Expected -->
 					<td
 						class="time-cell {estClass(service.atd, service.etd)} {delayClassFromTimePair(
 							service.std,
 							service.atd || service.etd
 						)}"
 					>
 						<span>
 							{service.c
 								? '-'
 								: delayClassFromTimePair(service.std, service.atd || service.etd) === 'delay-rt'
 									? 'RT'
 									: formatUkTime(service.atd || service.etd)}
 						</span>
 					</td>
 				{/if}
 			</tr>
 			{#if service.o}
 				<tr class="toc-coach-row">
 					<td colspan="8">
 						{service.o}
 					</td>
 				</tr>
 			{/if}
 			{#if service.c && service.cr?.r}
 				<tr class="cancel-row">
 					<td colspan="8">
 						{service.cr.r}
 						{#if service.cr.l}
 							{service.cr.n ? 'near' : 'at'}
 							{service.cr.l}
 						{/if}
 					</td>
 				</tr>
 			{/if}
 			{#if service.dr?.r}
 				<tr class="delay-row">
 					<td colspan="9">
 						{service.dr.r}
 						{#if service.dr.l}
 							{service.dr.n ? 'near' : 'at'}
 							{service.dr.l}
 						{/if}
 					</td>
 				</tr>
 			{/if}
 		</tbody>
 	{/each}
 </table>
 <style>
 	.departure-board {
 		width: 100%;
 		margin: 5px auto;
 		border-collapse: collapse;
 		table-layout: fixed;
 	}
 	.departure-board td {
 		font-family: 'Inconsolata Variable', monospace;
 		font-size: clamp(1rem, 0.475rem + 2.8vw, 1.35rem);
 		font-variant-ligatures: additional-ligatures;
 		overflow: hidden;
 	}
 	thead,
 	.cancel-row td,
 	.delay-row td {
 		letter-spacing: -0.15ch;
 	}
 	thead {
 		position: sticky;
 		top: 0;
 		z-index: 2;
 		background: var(--color-bg-dark);
 	}
 	abbr {
 		text-decoration: none;
 		border-bottom: none;
 		cursor: help;
 	}
 	tbody tr:first-child td {
 		border-top: 5px solid transparent;
 	}
 	/* Row Logic */
 	.serviceCancelled {
 		color: rgb(255, 131, 131);
 	}
 	.servicePass td {
 		opacity: 0.75;
 		font-weight: 200;
 	}
 	.serviceNonPassenger td {
 		opacity: 0.5;
 		font-weight: 290;
 		font-style: italic;
 	}
 	/* Special Row Styles */
 	.cancel-row td,
 	.delay-row td {
 		font-size: 0.88rem;
 		text-align: left;
 	}
 	.cancel-row td[colspan],
 	.delay-row td[colspan] {
 		padding-left: 0ch;
 	}
 	.cancel-row td {
 		color: rgb(255, 131, 131);
 		font-weight: 400;
 	}
 	.delay-row td {
 		color: var(--delay-orange);
 		font-style: italic;
 	}
 	@media (min-width: 375px) {
 		.cancel-row td,
 		.delay-row td {
 			font-size: 1.08rem;
 		}
 	}
 	@media (min-width: 420px) {
 		.cancel-row td,
 		.delay-row td {
 			font-size: 1.12rem;
 		}
 	}
 	@media (min-width: 550px) {
 		.cancel-row td,
 		.delay-row td {
 			font-size: 1.18rem;
 		}
 	}
 	@media (min-width: 620px) {
 		.cancel-row td,
 		.delay-row td {
 			font-size: 1.2rem;
 		}
 	}
 	.toc-coach-row td {
 		font-family: 'URW Gothic', sans-serif;
 		font-size: 0.7rem;
 		padding: 0;
 		color: rgb(187, 187, 255);
 	}
 	@media (min-width: 400px) {
 		.toc-coach-row td {
 			font-size: 0.8rem;
 		}
 	}
 	@media (min-width: 550px) {
 		.toc-coach-row td {
 			font-size: 0.85rem;
 		}
 	}
 	/* Column Specifics */
 	.id-cell {
 		text-align: left;
 		font-weight: 400;
 		font-stretch: 85%;
 		filter: brightness(0.75);
 	}
 	@media (min-width: 400px) {
 		.id-cell {
 			font-stretch: 90%;
 		}
 	}
 	.orig-cell,
 	.dest-cell {
 		font-stretch: 80%;
 		font-weight: 400;
 	}
 	.orig-cell {
 		text-align: left;
 		color: var(--location-yellow);
 	}
 	.dest-cell {
 		text-align: right;
 		color: var(--location-yellow);
 	}
 	@media (min-width: 350px) {
 		.orig-cell,
 		.dest-cell {
 			font-stretch: 85%;
 		}
 		@media (min-width: 400px) {
 			.orig-cell,
 			.dest-cell {
 				font-stretch: 90%;
 			}
 		}
 		@media (min-width: 490px) {
 			.orig-cell,
 			.dest-cell {
 				font-stretch: 95%;
 			}
 		}
 		@media (min-width: 520px) {
 			.orig-cell,
 			.dest-cell {
 				font-stretch: 100%;
 			}
 			.orig-cell {
 				text-align: right;
 				padding-right: 7px;
 			}
 			.dest-cell {
 				text-align: left;
 				padding-left: 7px;
 			}
 		}
 		@media (min-width: 600px) {
 			.orig-cell,
 			.dest-cell {
 				letter-spacing: 0.05ch;
 			}
 		}
 	}
 	.plt-cell {
 		text-align: center;
 		font-weight: 410;
 		font-stretch: 100%;
 	}
 	@media (min-width: 525px) {
 		.plt-cell {
 			font-stretch: 110%;
 		}
 	}
 	.plt-cell.platSup {
 		font-weight: 200;
 		opacity: 0.3;
 	}
 	.plt-cell.platChange {
 		animation: fast-pulse 2s ease-out infinite;
 	}
 	.service-row.serviceCancelled .plt-cell {
 		text-decoration: line-through;
 	}
 	.pass-cell {
 		text-align: center;
 		font-stretch: 100%;
 	}
 	/* Colour orig and dest values when cancelled */
 	.service-row.serviceCancelled .orig-cell,
 	.service-row.serviceCancelled .dest-cell {
 		color: rgb(255, 131, 131);
 	}
 	.time-cell {
 		text-align: center;
 		font-stretch: 72%;
 	}
 	@media (min-width: 350px) {
 		.time-cell {
 			font-stretch: 77%;
 		}
 	}
 	@media (min-width: 400px) {
 		.time-cell {
 			font-stretch: 82%;
 		}
 	}
 	@media (min-width: 525px) {
 		.time-cell {
 			font-stretch: 90%;
 		}
 	}
 	@media (min-width: 600px) {
 		.time-cell {
 			font-stretch: 100%;
 		}
 	}
 	/* RT Logic */
 	.time-cell.delay-rt span {
 		display: none;
 	}
 	.time-cell.delay-rt::after {
 		content: 'RT';
 	}
 	.time-cell.delay-early {
 		color: var(--early-blue);
 	}
 	.time-cell.delay-late {
 		color: var(--delay-orange);
 	}
 	/* Time Types */
 	.est {
 		font-style: italic;
 		opacity: 0.75;
 		font-weight: 200;
 	}
 	.act {
 		font-weight: 600;
 	}
 </style>
--- a/src/lib/components/ui/station-board/StationAlertCard.svelte
+++ b/src/lib/components/ui/station-board/StationAlertCard.svelte
@@ -0,0 +1,143 @@
 <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: 0;
 		border-radius: 8px;
 		background: transparent;
 		position: relative;
 		z-index: 10;
 		margin-bottom: 0;
 		width: 95%;
 		max-width: 750px;
 		-webkit-tap-highlight-color: transparent;
 	}
 	.alert-card:active {
 		filter: brightness(1.2);
 	}
 	.trigger {
 		width: 100%;
 		display: flex;
 		border-radius: 8px;
 		align-items: center;
 		padding: 0.1rem 1.05rem;
 		background: var(--alert-orange);
 		color: white;
 		border: none;
 		cursor: pointer;
 		text-align: left;
 		position: relative;
 		z-index: 2;
 		height: 40px;
 		transition: all 0.65s 0.2s;
 	}
 	.trigger.active {
 		border-radius: 8px 8px 0 0;
 		transition: all 0.01s 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: 40px;
 		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: 1rem;
 		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>
--- a/src/lib/global.css
+++ b/src/lib/global.css
@@ -129,7 +129,41 @@
 	font-style: normal;
 	font-display: swap;
 }
 /* Fira Code - Variable with fallback */
@font-face {
 	font-family: 'Fira Code';
 	src: url('/type/fira-code/FiraCode-VF.woff2') format('woff2-variations');
 	font-weight: 300 700;
 	font-style: normal;
 	font-display: swap;
 }
@font-face {
 	font-family: 'Fira Code';
 	src: url('/type/fira-code/FiraCode-Regular.woff2') format('woff2');
 	font-weight: 400;
 	font-style: normal;
 	font-display: swap;
 }
 /* Inconsolata Variable */
@font-face {
 	font-family: 'Inconsolata Variable';
 	font-style: normal;
 	font-display: swap;
 	font-weight: 200 900;
 	font-stretch: 50% 200%;
 	src: url(/type/inconsolata/latin-wdth-normal.woff2) format('woff2-variations');
 	unicode-range:
 		U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
 		U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 :root {
 	/* Fixed Heights */
 	--header-height: 80px;
 	--nav-height: 60px;
 	/* Brand Colours */
 	--color-brand: #4fd1d1;
 	--color-accent: #3c6f79;
@@ -147,6 +181,7 @@
 	/* Functional Colours */
 	--location-yellow: #edff22;
 	--delay-orange: #ff914d;
 	--alert-orange: #f87728;
 	--cancel-red: #c60000;
 	--early-blue: #5ec1ff;
 }
@@ -158,7 +193,7 @@
 		opacity: 1;
 	}
 	50% {
-		opacity: 0.3;
+		opacity: 0.5;
 	}
 }
@@ -170,7 +205,7 @@
 	}
 	25%,
 	75% {
-		opacity: 0;
+		opacity: 0.25;
 	}
 }
--- a/src/lib/preferences.svelte.ts
+++ b/src/lib/preferences.svelte.ts
@@ -0,0 +1,43 @@
 import { browser } from '$app/environment';
 export interface Preferences {
 	locationEnabled: boolean;
 }
 const STORAGE_KEY = 'ob_pref';
 const DEFAULT_PREFS: Preferences = {
 	locationEnabled: false
 };
 function loadPrefs(): Preferences {
 	if (!browser) return DEFAULT_PREFS;
 	const stored = localStorage.getItem(STORAGE_KEY);
 	if (!stored) return DEFAULT_PREFS;
 	try {
 		return { ...DEFAULT_PREFS, ...JSON.parse(stored) };
 	} catch {
 		return DEFAULT_PREFS;
 	}
 }
 class PreferencesStore {
 	current = $state<Preferences>(loadPrefs());
 	constructor() {
 		$effect.root(() => {
 			$effect(() => {
 				if (browser) {
 					localStorage.setItem(STORAGE_KEY, JSON.stringify(this.current));
 				}
 			});
 		});
 	}
 	toggleLocation(enabled: boolean) {
 		this.current.locationEnabled = enabled;
 	}
 }
 export const prefs = new PreferencesStore();
--- a/src/lib/quick-links.svelte.ts
+++ b/src/lib/quick-links.svelte.ts
@@ -15,7 +15,11 @@ class QuickLinksService {
 		if (typeof window !== 'undefined') {
 			const saved = localStorage.getItem('ql');
 			if (saved) {
-				this.#links = JSON.parse(saved);
+				try {
 					this.#links = JSON.parse(saved);
 				} catch {
 					this.#links = [];
 				}
 			}
 		}
 	}
@@ -53,7 +57,16 @@ class QuickLinksService {
 		this.#links = sorted.slice(0, MAX_ENTRIES);
-		localStorage.setItem('ql', JSON.stringify(this.#links));
+		if (typeof window !== 'undefined') {
 			localStorage.setItem('ql', JSON.stringify(this.#links));
 		}
 	}
 	reset() {
 		this.#links = [];
 		if (typeof window !== 'undefined') {
 			localStorage.removeItem('ql');
 		}
 	}
 }
--- a/src/lib/utils/time.ts
+++ b/src/lib/utils/time.ts
@@ -1,36 +1,96 @@
 import type { ApiTrainsTrainDetails } from '@owlboard/owlboard-ts';
 export const estClass = (act: any, est: any) => (act ? 'act' : 'est');
 /**
- * Converts ISO/JSON time to UK-formatted HH:MM string.
+ * Converts ISO/JSON time to UK-formatted HH:MM string, with optional (default off) seconds
 * Ensures Europe/London timezone irrespective of browser timezone.
 */
-export function formatUkTime(dateStr: string | Date | undefined): string {
+export function formatUkTime(
-	if (!dateStr) return '--:--';
+	dateStr: string | Date | undefined,
 	includeSeconds: boolean = false
 ): string {
 	if (!dateStr) return '-';
 	const date = typeof dateStr === 'string' ? new Date(dateStr) : dateStr;
-	if (isNaN(date.getTime())) return '--:--';
+	if (isNaN(date.getTime())) return '-';
 	return date.toLocaleTimeString('en-GB', {
 		hour: '2-digit',
 		minute: '2-digit',
 		...(includeSeconds && { second: '2-digit' }),
 		hour12: false,
 		timeZone: 'Europe/London'
 	});
 }
 /**
 * Converts ISO/JSON time to UK-formatted DD/MM/YY HH:MM:SS string.
 * Ensures Europe/London timezone irrespective of browser timezone.
 */
 export function formatUkDateTime(
 	dateStr: string | Date | undefined,
 	includeSeconds: boolean = false
 ): string {
 	if (!dateStr) return '--/--/-- --:--:--';
 	const date = typeof dateStr === 'string' ? new Date(dateStr) : dateStr;
 	if (isNaN(date.getTime())) return '--/--/-- --:--:--';
 	return date
 		.toLocaleString('en-GB', {
 			day: '2-digit',
 			month: '2-digit',
 			year: '2-digit',
 			hour: '2-digit',
 			minute: '2-digit',
 			...(includeSeconds && { second: '2-digit' }),
 			hour12: false,
 			timeZone: 'Europe/London'
 		})
 		.replace(',', '');
 }
 /**
 * Specific type that can handle the TrainDetails.ServiceLocation and the ApiStationsBoard.BoardService types for delay calculation
 */
 interface DelayInput {
 	// Board types
 	sta?: string | null;
 	std?: string | null;
 	eta?: string | null;
 	etd?: string | null;
 	ata?: string | null;
 	atd?: string | null;
 	// Journey types
 	pta?: string | null;
 	ptd?: string | null;
 	wta?: string | null;
 	wtd?: string | null;
 	atp?: string | null;
 	wtp?: string | null;
 	etp?: string | null;
 }
 /**
 * Calculates a 'delay' value, in the formats:
 * RT, 1E, 7L, etc.
- * @param 'Schedule Location' object
+ * @param 'Schedule Location' or 'Board Service' object
 * @returns Delay string for departure boards
 */
-export function calculateDelay(loc: ApiTrainsTrainDetails.ServiceLocation): {
+export function calculateDelay(loc: DelayInput): {
 	val: string;
 	type: string;
 } {
 	const pairs = [
-		{ actual: loc.atd, sched: loc.ptd ?? loc.wtd },
+		// Departure check (Board: atd/etd vs std | Journey: atd vs ptd/wtd)
-		{ actual: loc.ata, sched: loc.pta ?? loc.wta },
+		{ actual: loc.atd || loc.etd, sched: loc.std || loc.ptd || loc.wtd },
-		{ actual: loc.atp, sched: loc.wtp }
+		// Arrival check (Board: ata/eta vs sta | Journey: ata vs pta/wta)
 		{ actual: loc.ata || loc.eta, sched: loc.sta || loc.pta || loc.wta },
 		// Passing check
 		{ actual: loc.atp || loc.etp, sched: loc.wtp }
 	];
 	const match = pairs.find((p) => p.actual && p.sched);
@@ -48,3 +108,27 @@ export function calculateDelay(loc: ApiTrainsTrainDetails.ServiceLocation): {
 		return { val: `${absDiff}E`, type: 'early' };
 	}
 }
 /**
 * Accepts a pair of times (string or Date) and outputs a delay class 'delay-early', 'delay-late' or 'delay-rt'
 * @param sched Scheduled Time (string, Date)
 * @param act Actual Time (string, Date)
 */
 export function delayClassFromTimePair(sched: any, act: any): string {
 	if (!sched || !act) return '';
 	const s = new Date(sched).getTime();
 	const a = new Date(act).getTime();
 	if (isNaN(s) || isNaN(a)) return '';
 	const diff = a - s;
 	const oneMinute = 60000;
 	// on-time if within one minute
 	if (Math.abs(diff) < oneMinute) {
 		return 'delay-rt';
 	}
 	return diff > 0 ? 'delay-late' : 'delay-early';
 }
--- a/src/routes/+error.svelte
+++ b/src/routes/+error.svelte
@@ -10,6 +10,10 @@
 	{#if page.status == 404}
 		<!-- Warning no data image -->
 		<img class="err-img" src={noResult} alt="" role="presentation" width="200" height="200" />
 	{:else if page.status == 499}
 		<!-- Change to a GSM-R X Sign?? -->
 		<span>OFFLINE!</span>
 		<img class="err-img" src={stopErr} alt="" role="presentation" width="150" height="210" />
 	{:else}
 		<!-- STOP Error image -->
 		<img class="err-img" src={stopErr} alt="" role="presentation" width="150" height="210" />
@@ -26,7 +30,11 @@
 		</div>
 	{/if}
-	<Button href={'/'} color={'accent'}>Return to Home</Button>
+	{#if page.error?.owlCode === 'NETWORK_DISCONNECTED'}
 		<Button onclick={() => window.location.reload()} color={'accent'}>Retry</Button>
 	{:else}
 		<Button href={'/'} color={'accent'}>Return to Home</Button>
 	{/if}
 </div>
 <style>
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -2,9 +2,9 @@
 	import { page } from '$app/state';
 	import { slide, fade } from 'svelte/transition';
 	import { onMount } from 'svelte';
 	import { browser } from '$app/environment';
 	import { navigating } from '$app/state';
 	import { LOCATIONS } from '$lib/locations-object.svelte';
 	import { nearestStationsState } from '$lib/geohash.svelte';
 	import Loading from '$lib/components/ui/Loading.svelte';
 	import TimezoneWarning from '$lib/components/ui/TimezoneWarning.svelte';
@@ -17,7 +17,19 @@
 	import { IconHome, IconDialpad, IconSettings, IconHelp, IconDots } from '@tabler/icons-svelte';
-	onMount(() => LOCATIONS.init());
+	onMount(async () => {
 		LOCATIONS.init();
 		if (browser && 'serviceWorker' in navigator) {
 			try {
 				const registration = await navigator.serviceWorker.register('/service-worker.js', {
 					type: 'module'
 				});
 				console.info('OwlBoard Service Worker registered', registration.scope);
 			} catch (error) {
 				console.error('Service Worker installation failed: ', error);
 			}
 		}
 	});
 	let { children } = $props();
@@ -147,14 +159,14 @@
 	<h1 class="viewport-guard-title">Narrow Gauge Detected</h1>
 	<p>
 		Just as trains need the right track width, our data needs a bit more room to stay on the rails.
-		Please expand your view to at least 300px to view the app.
+		Please expand your view to at least 320px to view the app.
 	</p>
 </div>
 <style>
 	header {
 		top: 0;
-		height: 80px;
+		height: var(--header-height);
 		box-shadow: var(--shadow-std);
 	}
 	.logo-link {
@@ -201,13 +213,12 @@
 		min-height: 100dvh;
 		box-sizing: border-box;
 		background-color: var(--color-bg-dark);
 		background-image: radial-gradient(var(--color-bg-dark), var(--color-bg-light));
 	}
 	nav {
 		display: flex;
 		bottom: 0;
-		height: 60px;
+		height: var(--nav-height);
 		box-shadow: var(--shadow-up);
 	}
@@ -320,7 +331,7 @@
 		display: none;
 	}
-	@media (max-width: 299px) {
+	@media (max-width: 319px) {
 		.viewport-guard {
 			display: block;
 			position: fixed;
--- a/src/routes/board/+page.svelte
+++ b/src/routes/board/+page.svelte
@@ -1,8 +1,20 @@
 <script lang="ts">
-	import { untrack } from 'svelte';
+	import { onMount, untrack } from 'svelte';
 	import { quickLinks } from '$lib/quick-links.svelte';
 	import StationAlertCard from '$lib/components/ui/station-board/StationAlertCard.svelte';
 	import { formatUkDateTime, formatUkTime } from '$lib/utils/time';
 	import StaffServicesTable from '$lib/components/ui/station-board/StaffServicesTable.svelte';
 	let { data } = $props();
 	let now = $state(new Date());
 	onMount(() => {
 		const interval = setInterval(() => {
 			now = new Date();
 		}, 1000);
 		return () => clearInterval(interval);
 	});
 	// Update 'QuickLinks'
 	$effect(() => {
@@ -17,18 +29,69 @@
 			}
 		}
 	});
 	// Wake Lock API Handling
 	// Load Data Invalidation Handling
 	// Refresh countdown logic
 </script>
-<section>Live board are not yet implemented on the server</section>
+<section class="board-wrapper">
 	<div class="time-data">
 		<span class="time-loaded">Updated: {formatUkDateTime(data.boardData.producedAt, true)}</span>
 		<span class="time-now">{formatUkTime(now, true)}</span>
 	</div>
 	{#if data.boardData.data.m?.length}
 		<StationAlertCard messages={data.boardData.data.m} />
 	{/if}
 	{#if data.boardData.data.s?.length}
 		<div class="service-list-wrapper">
 			<StaffServicesTable services={data.boardData.data.s} />
 		</div>
 	{/if}
 </section>
 <style>
-	section {
+	.board-wrapper {
-		font-family: 'URW Gothic', sans-serif;
+		display: flex;
-		text-align: center;
+		height: calc(100dvh - var(--nav-height) - var(--header-height));
-		font-size: 2rem;
+		flex-direction: column;
 		align-items: center;
 		width: 100%;
 		margin: 0 auto;
 		overflow: hidden;
 		gap: 0;
 	}
 	.time-data {
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
 		width: 90%;
-		margin: auto;
+		max-width: 700px;
-		padding-top: 25px;
+		margin: 10px auto;
-		max-width: 500px;
+		font-family: 'URW Gothic', sans-serif;
 	}
 	.time-loaded,
 	.time-now {
 		font-variant-numeric: tabular-nums;
 	}
 	.time-loaded {
 		font-size: 0.9rem;
 	}
 	.time-now {
 		font-weight: 600;
 		font-size: 1rem;
 	}
 	.service-list-wrapper {
 		flex: 1;
 		overflow-y: auto;
 		height: calc(100dvh - 60px);
 		width: 97%;
 		max-width: 700px;
 		margin-bottom: 5px;
 	}
 </style>
--- a/src/routes/board/+page.ts
+++ b/src/routes/board/+page.ts
@@ -1,16 +1,14 @@
 import { LOCATIONS } from '$lib/locations-object.svelte';
 import { ApiError, OwlClient, ValidationError } from '$lib/owlClient';
 import type { PageLoad } from './$types';
 import { error } from '@sveltejs/kit';
-export const load: PageLoad = async ({ url }) => {
+export const load: PageLoad = async ({ url, fetch }) => {
 	const locId = url.searchParams.get('loc');
 	if (!LOCATIONS.loaded) {
 		await LOCATIONS.init();
 	}
 	let title: string = '';
 	if (!locId) {
 		error(400, {
 			message: 'Location not provided',
@@ -18,22 +16,49 @@ export const load: PageLoad = async ({ url }) => {
 		});
 	}
-	let BoardLocation;
+	const BoardLocation = LOCATIONS.find(locId);
-	if (locId) {
+	if (!BoardLocation) {
-		BoardLocation = LOCATIONS.find(locId);
+		error(404, {
 			message: `Location (${locId.toUpperCase()}) not found`,
 			owlCode: 'INVALID_LOCATION_CODE'
 		});
 	}
 	const title = BoardLocation.n || BoardLocation.t || 'Live Arr/Dep';
-		if (BoardLocation) {
+	try {
-			title = BoardLocation.n || BoardLocation.t || 'Live Arr/Dep';
+		const boardData = await OwlClient.board.getByLocation(locId, fetch);
-		} else {
+
-			error(404, {
+		return {
-				message: `Location (${locId.toUpperCase()}) not found`,
+			title,
-				owlCode: 'INVALID_LOCATION_CODE'
+			BoardLocation,
 			boardData
 		};
 	} catch (e: unknown) {
 		if (
 			e instanceof TypeError &&
 			(e.message == 'Failed to fetch' || e.message.includes('network'))
 		) {
 			throw error(503, {
 				message: 'Network error: Please check your connection',
 				owlCode: 'NETWORK_DISCONNECTED'
 			});
 		}
 		if (e instanceof ValidationError) {
 			throw error(400, { message: e.message, owlCode: 'VALIDATION_ERROR' });
 		} else if (e instanceof ApiError) {
 			// If the API returns 404, it means the backend doesn't recognize this CRS/TIPLOC
 			if (e.code === 'NOT_FOUND') {
 				throw error(404, {
 					message: `Location (${locId.toUpperCase()}) is not recognized by the server.`,
 					owlCode: 'LOCATION_NOT_IN_BACKEND'
 				});
 			}
 			throw error(e.status, { message: e.message, owlCode: 'API_ERROR' });
 		} else if (e instanceof Error) {
 			throw error(500, { message: e.message, owlCode: 'GEN_ERROR' });
 		}
 		throw error(500, { message: 'Unexpected error', owlCode: 'UNKNOWN_ERR' });
 	}
 	return {
 		title,
 		BoardLocation
 	};
 };
--- a/src/routes/trains/+page.ts
+++ b/src/routes/trains/+page.ts
@@ -3,7 +3,7 @@ import type { ApiTrainsTrainByHeadcode } from '@owlboard/owlboard-ts';
 import type { PageLoad } from './$types';
 import { error } from '@sveltejs/kit';
-export const load: PageLoad = async ({ url }) => {
+export const load: PageLoad = async ({ fetch, url }) => {
 	const headcode = url.searchParams.get('h');
 	let dateParam = url.searchParams.get('d');
 	const toc = url.searchParams.get('t') || '';
@@ -21,7 +21,7 @@ export const load: PageLoad = async ({ url }) => {
 	let results: ApiTrainsTrainByHeadcode.TrainByHeadcodeResponse[];
 	try {
-		const response = await OwlClient.trains.getByHeadcode(headcode, date, toc);
+		const response = await OwlClient.trains.getByHeadcode(headcode, date, toc, fetch);
 		results = response.data;
 		return {
--- a/src/service-worker.ts
+++ b/src/service-worker.ts
@@ -0,0 +1,83 @@
 /// <reference types="@sveltejs/kit" />
 /// <reference lib="webworker" />
 import type { ApiEnvelope } from '@owlboard/api-schema-types';
 import { build, files, version } from '$service-worker';
 const sw = self as unknown as ServiceWorkerGlobalScope;
 const CACHE_NAME = `owlboard-cache-${version}`;
 const ASSETS = [
 	...build,
 	...files.filter((file) => !file.endsWith('manifest.json') && !file.startsWith('/icons/')),
 	'/'
 ];
 sw.addEventListener('install', (event) => {
 	sw.skipWaiting();
 	event.waitUntil(caches.open(CACHE_NAME).then((cache) => cache.addAll(ASSETS)));
 });
 sw.addEventListener('activate', (event) => {
 	event.waitUntil(
 		Promise.all([
 			caches.keys().then((keys) => {
 				return Promise.all(
 					keys.filter((key) => key !== CACHE_NAME).map((key) => caches.delete(key))
 				);
 			}),
 			sw.clients.claim()
 		])
 	);
 });
 sw.addEventListener('fetch', (event) => {
 	const { request } = event;
 	if (request.method !== 'GET') return;
 	const url = new URL(request.url);
 	// Uncached static assets
 	if (url.pathname.endsWith('manifest.json') || url.pathname.includes('/icons/')) {
 		event.respondWith(fetch(request));
 		return;
 	}
 	// 1. Static Assets (Cache-First)
 	if (ASSETS.includes(url.pathname) || url.pathname.startsWith('/_app/')) {
 		event.respondWith(caches.match(request).then((res) => res || fetch(request)));
 		return;
 	}
 	// 2. Offline API Fallback (Network-First)
 	if (url.pathname.startsWith('/api') || url.hostname.includes('api')) {
 		event.respondWith(
 			fetch(request).catch(() => {
 				const errorObject: ApiEnvelope.Envelope = {
 					e: {
 						code: 'NETWORK_DISCONNECTED',
 						msg: 'Cannot connect to the OwlBoard server'
 					},
 					t: Math.floor(Date.now() / 1000)
 				};
 				return new Response(JSON.stringify(errorObject), {
 					status: 503,
 					headers: { 'Content-Type': 'application/json' }
 				});
 			})
 		);
 		return;
 	}
 	// 3. Navigation Fallback (The Offline 404 Catch-All)
 	// This catches top-level page navigations and hard refreshes
 	if (request.mode === 'navigate' || request.headers.get('accept')?.includes('text/html')) {
 		event.respondWith(
 			fetch(request).catch(() => {
 				// The network request failed entirely (offline).
 				// Serve the cached root shell so SvelteKit can boot.
 				return caches.match('/') as Promise<Response>;
 			})
 		);
 		return;
 	}
 });
--- a/static/icons/apple-touch-icon.png
+++ b/static/icons/apple-touch-icon.png
--- a/static/icons/icon-192.png
+++ b/static/icons/icon-192.png
--- a/static/icons/icon-512.png
+++ b/static/icons/icon-512.png
--- a/static/icons/maskable-512.png
+++ b/static/icons/maskable-512.png
--- a/static/manifest.json
+++ b/static/manifest.json
@@ -0,0 +1,62 @@
 {
    "name": "OwlBoard",
    "short_name": "OwlBoard",
    "description": "Real-time UK rail data and operational tools for staff and enthusiasts.",
    "id": "/",
    "start_url": "/",
    "scope": "/",
    "display": "standalone",
    "display_override": [
        "window-controls-overlay",
        "standalone",
        "minimal-ui"
    ],
    "background_color": "#404c55",
    "theme_color": "#4fd1d1",
    "orientation": "portrait",
    "categories": [
        "transportation",
        "utilities"
    ],
    "dir": "ltr",
    "lang": "en-GB",
    "prefer_related_applications": false,
    "icons": [
        {
            "src": "/icons/icon-192.png",
            "sizes": "192x192",
            "type": "image/png",
            "purpose": "any"
        },
        {
            "src": "/icons/icon-512.png",
            "sizes": "512x512",
            "type": "image/png",
            "purpose": "any"
        },
        {
            "src": "/icons/maskable-512.png",
            "sizes": "512x512",
            "type": "image/png",
            "purpose": "maskable"
        }
    ],
    "shortcuts": [
        {
            "name": "Find PIS",
            "short_name": "PIS",
            "description": "Find PIS Codes fast",
            "url": "/pis",
            "icons": [
                {
                    "src": "/icons/icon-192.png",
                    "sizes": "192x192"
                }
            ]
        }
    ],
    "handle_links": "preferred",
    "launch_handler": {
        "client_mode": "focus-existing"
    }
 }
--- a/static/type/inconsolata/latin-wdth-normal.woff2
+++ b/static/type/inconsolata/latin-wdth-normal.woff2
Author	SHA1	Message	Date
Fred Boniface	1105a9f7c5	Add extra message to +error.svelte to handle, and clarify 'OFFLINE' error.	2026-05-14 19:43:22 +01:00
Fred Boniface	25b64edabd	Add features: - manifest.json with PNG icon set. - reset option against QuickLinks storage - 'Preferences' store, ready for preferences page - including location boolean... Important! - Minor service-worker improvements for better offline fallbacks	2026-05-14 19:39:05 +01:00
Fred Boniface	bc56e66178	Add initlal service-worker with basic offline handling. Manifest is not yet present.	2026-05-13 20:47:01 +01:00
Fred Boniface	0ef9e5b56f	Adjust dynamic styles on the departure board component	2026-05-12 20:35:12 +01:00
Fred Boniface	b88f4f3b35	Dynamically adjust font size based on vw value	2026-05-12 19:06:25 +01:00
Fred Boniface	a2e6f3b99a	Switch departure board to use Inconsolata monospaced font (varying widths, weights, etc.)	2026-05-11 20:28:22 +01:00
Fred Boniface	7edccf294b	Update table display on board page, in preparation for offering different 'table' styles.	2026-05-11 12:04:40 +01:00
Fred Boniface	13d22d7b73	Add initial departure board table 'skeleton', very basic at present	2026-05-10 20:57:50 +01:00
Fred Boniface	59e8a77d3d	Change 'Fetched' to 'Updated' on the Board page fetch time	2026-05-10 00:27:45 +01:00
Fred Boniface	1f1e215c0c	Fix layout shifts with the temporary <pre> element on the board page	2026-05-10 00:26:21 +01:00
Fred Boniface	909e36ebc2	Add parsing for StationAlerts, and fetch function for Boards.	2026-05-10 00:15:53 +01:00
Fred Boniface	f3d633e719	Fix PIS Display	2026-05-05 20:41:27 +01:00
		`@@ -0,0 +1 @@`
							<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" viewBox="0 0 562.1 562.1"><defs><radialGradient xlink:href="#a" id="b" cx="256" cy="256" r="254" fx="256" fy="256" gradientTransform="translate(27 27)" gradientUnits="userSpaceOnUse"/><linearGradient id="a"><stop offset="0" stop-color="#2b343c"/><stop offset="1" stop-color="#404c55"/></linearGradient></defs><path fill="url(#b)" d="M694.3 283a411.3 394 0 0 1-410.7 394 411.3 394 0 0 1-412-392.8 411.3 394 0 0 1 409.5-395.1 411.3 394 0 0 1 413.2 391.4" transform="translate(-2 -2)"/><path fill="#4fd1d1" d="M281 81a200 200 0 0 0-153.4 71.8 120 120 0 0 0 50.5 25.8c9 2.3 8.9 2.3 15.6-.6 50-21.6 124.4-21.6 175.2-.1 13.3 5.6 44.6-6.5 65.9-24.8a200 200 0 0 0-153.8-72m-161.9 82.7a200 200 0 0 0-38 117.3 200 200 0 0 0 200 200 200 200 0 0 0 200-200 200 200 0 0 0-37.8-116.8 96 96 0 0 1-17.7 46.6l-2.8 4 1.3 1.8c73.3 99.2-14.3 222.2-116.7 163.6-2.5-1.4-4.7-2.4-5-2.1s-10.5 19.6-18 34c-3.4 6.5-2.7 6.6-6.3-.3-9.2-17.5-18-34-18.3-34-.1 0-2.3 1-4.7 2.5-101.3 58-190.7-65.7-117.4-162.4q2.3-3 1.8-3.6a102 102 0 0 1-20.4-50.6m86.5 57q-14.6 0-29.8 7.5C108 261.8 143.1 366.4 217.5 352a68 68 0 0 0 43.3-28.4c2.4-3.4 3.3-4.2 3.7-3.7l8.5 14.6c9.4 16.3 8 15 11.4 9 5.1-9 13.7-23.5 14-24 .3-.2 1.9 1.8 3.6 4.3 31 45.5 101.6 35.6 118.3-16.5a66.4 66.4 0 0 0-83.9-83c-23.3 7.7-38.7 24.4-53.8 58.4l-1.3 3-2.7-6c-17-38.5-43.7-59.5-73-59.2m147.2 34.7a32 32 0 0 1 23.7 9.5c22.8 22.8.7 60.8-30.9 53.1a32 32 0 0 1-23.2-37.3 31.5 31.5 0 0 1 30.4-25.3m-145.8 0c16.4-.8 32.7 11 33.9 30.1a32.2 32.2 0 0 1-40.1 32.5 31.5 31.5 0 0 1-15-52.9 32 32 0 0 1 21.2-9.6m12 9.6q-3.3 0-5.8 3c-6.3 7.4 2.5 17.7 11 13a9 9 0 0 0 4.2-7.5c0-5.4-4.8-8.9-9.4-8.5m123.1 0c-6 .5-9.6 6.5-7 12.3 2 4.5 8.3 6.3 12.2 3.6 7.2-4.9 4.7-15.3-4-15.8z"/></svg>