From f3393f3c070ba04277cc1b0caebba778815694e4 Mon Sep 17 00:00:00 2001
From: Fred Boniface <fjla@fredboniface.co.uk>
Date: Sun, 5 Apr 2026 00:22:36 +0100
Subject: [PATCH] Add timezone warning to top of +layout.svelte conditionally
 displayed when the users device is not in the Europe/London timezone

---
 src/lib/components/ui/TimezoneWarning.svelte | 42 ++++++++++++++++++++
 src/routes/+layout.svelte                    |  3 ++
 2 files changed, 45 insertions(+)
 create mode 100644 src/lib/components/ui/TimezoneWarning.svelte

diff --git a/src/lib/components/ui/TimezoneWarning.svelte b/src/lib/components/ui/TimezoneWarning.svelte
new file mode 100644
index 0000000..c2ebf57
--- /dev/null
+++ b/src/lib/components/ui/TimezoneWarning.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+    import { slide } from 'svelte/transition';
+
+	let isNotLondon = $state(false);
+	let londonZone = $state('Greenwich Mean Time');
+
+	onMount(() => {
+		const userTZ = Intl.DateTimeFormat().resolvedOptions().timeZone;
+		isNotLondon = userTZ !== 'Europe/London';
+
+		const parts = new Intl.DateTimeFormat('en-GB', {
+			timeZone: 'Europe/London',
+			timeZoneName: 'long'
+		}).formatToParts(new Date());
+
+		londonZone = parts.find((p) => p.type === 'timeZoneName')?.value || 'UK Time';
+	});
+</script>
+
+{#if isNotLondon}
+	<div transition:slide={{duration: 300}} class="tzWarn"><p class="tzText">
+		All times are shown in <strong>{londonZone}</strong>
+    </p></div>
+{/if}
+
+<style>
+    .tzWarn {
+        display: flex;
+        justify-content: center;
+        width: 100%;
+        padding: 1rem 0 0 0;
+    }
+
+    .tzText {
+        width: 80%;
+        text-align: center;
+        margin: auto;
+        font-family: 'URW Gothic', sans-serif;
+        font-size: 1.2rem;
+    }
+</style>
\ No newline at end of file
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 79d6f94..6be2492 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -6,6 +6,8 @@
 	import { LOCATIONS } from '$lib/locations-object.svelte';
 	import { nearestStationsState } from '$lib/geohash.svelte';
 
+	import TimezoneWarning from '$lib/components/ui/TimezoneWarning.svelte';
+
 	import '$lib/global.css';
 
 	import logoText from '$lib/assets/round-logo-text.svg';
@@ -78,6 +80,7 @@
 </header>
 
 <main>
+	<TimezoneWarning />
 	{@render children()}
 </main>