Adjust live flasher animated saturation

src/lib/components/ui/LiveIndicator.svelte

@@ -0,0 +1,49 @@
+<div class="cont">
+    <div class="flash"></div>
+    <span class="txt">Live</span>
+</div>
+
+<style>
+    .cont {
+        display: inline-flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        font-family: 'URW Gothic', sans-serif;
+        font-weight: 600;
+        letter-spacing: 0.15ch;
+    }
+
+    .flash {
+        height: 0.6rem;
+        width: 0.6rem;
+        margin: 0 0.35rem;
+        border-radius: 50%;
+        background-color: forestgreen;
+        animation: live-pulse 1s ease-in-out infinite;
+    }
+
+    .txt {
+        animation: live-text-pulse 1s ease-in-out infinite;
+    }
+
+    @keyframes live-pulse {
+        0%, 100% {
+            box-shadow: 0 0 14px forestgreen;
+            filter: opacity(1) saturate(1);
+        }
+        50% {
+            box-shadow: 0 0 2px forestgreen;
+            filter: opacity(0.2) saturate(0.95);
+        }
+    }
+
+    @keyframes live-text-pulse {
+        0%, 100% {
+            opacity: 1;
+        }
+        50% {
+            opacity: 0.65;
+        }
+    }
+</style>

src/routes/board/+page.svelte

@@ -6,8 +6,11 @@
 
 	import { formatUkDateTime, formatUkTime } from '$lib/utils/time';
 	import StaffServicesTable from '$lib/components/ui/station-board/StaffServicesTable.svelte';
+	import LiveIndicator from '$lib/components/ui/LiveIndicator.svelte';
+
 	let { data } = $props();
 	let now = $state(new Date());
+	let live = $state(false);
 
 	// Handle auto-refreshing & Wake-lock
 	$effect(() => {
@@ -46,8 +49,10 @@
 					await invalidateAll();
 				} catch (error) {
 					console.error("Background data fetch failed: ", error)
+					live = false;
 				}
-			}, 61000);
+			}, 60100);
+			live = true;
 			console.log("Polling started")
 		};
 
@@ -107,7 +112,6 @@ $effect(() => {
 	// Load Data Invalidation Handling
 	// Refresh countdown logic
 </script>
-
 <section class="board-wrapper">
 	<div class="time-data">
 		<span class="time-loaded">Updated: {formatUkDateTime(data.boardData.producedAt, true)}</span>
@@ -116,6 +120,11 @@ $effect(() => {
 	{#if data.boardData.data.m?.length}
 		<StationAlertCard messages={data.boardData.data.m} />
 	{/if}
+	{#if live}
+		<div class="live-indicator">
+			<LiveIndicator />
+		</div>
+	{/if}
 	{#if data.boardData.data.s?.length}
 		<div class="service-list-wrapper">
 			<StaffServicesTable services={data.boardData.data.s} />
@@ -159,6 +168,10 @@ $effect(() => {
 		font-size: 1rem;
 	}
 
+	.live-indicator {
+		margin: 0.25rem auto;
+	}
+
 	.service-list-wrapper {
 		flex: 1;
 		overflow-y: auto;