Add homepage and make bridges look nice

.gitea/workflows/build-push.yaml

@@ -3,7 +3,7 @@ run-name: ${{ gitea.actor }} is building and pushing
 
 on:
   create:
-    tags: "*"
+    tags: '*'
 
 env:
   GITEA_DOMAIN: git.fjla.uk
@@ -36,4 +36,4 @@ jobs:
           push: true
           tags: |
             ${{ env.GITEA_DOMAIN }}/${{ env.RESULT_IMAGE_NAME }}:${{ gitea.ref_name }}
-            ${{ env.GITEA_DOMAIN }}/${{ env.RESULT_IMAGE_NAME }}:latest
+            ${{ env.GITEA_DOMAIN }}/${{ env.RESULT_IMAGE_NAME }}:latest

.gitignore

@@ -2,6 +2,7 @@ node_modules
 
 # Transpiled JSON
 /static/mapFiles/json/
+/static/map-index.json
 
 # Output
 .output

Dockerfile

@@ -16,6 +16,7 @@ WORKDIR /app
 COPY --from=builder /app/build ./build
 COPY --from=builder /app/node_modules ./node_modules
 COPY --from=builder /app/package.json ./package.json
+COPY --from=builder /app/static ./static
 
 USER node
 

scripts/parse-maps.js

@@ -4,13 +4,30 @@ import path from 'path';
 
 const inputDir = './static/mapFiles/yaml';
 const outputDir = './static/mapFiles/json';
+const indexFile = './static/map-index.json';
 
 if (!fs.existsSync(outputDir)) fs.mkdirSync(outputDir, { recursive: true });
 
+const mapList = [];
+
 fs.readdirSync(inputDir).forEach((file) => {
 	if (file.endsWith('.yaml')) {
-		const content = yaml.load(fs.readFileSync(path.join(inputDir, file), 'utf8'));
+		const fullPath = path.join(inputDir, file);
+		const content = yaml.load(fs.readFileSync(fullPath, 'utf8'));
+
 		const fileName = file.replace('.yaml', '.json');
 		fs.writeFileSync(path.join(outputDir, fileName), JSON.stringify(content));
+
+		mapList.push({
+			routeId: content.routeId || null,
+			routeStart: content.routeStart || null,
+			routeEnd: content.routeEnd || null,
+			created: content.created || null,
+			checked: content.checked || null,
+		});
 	}
 });
+
+fs.writeFileSync(indexFile, JSON.stringify(mapList));
+
+console.log(`Generated ${mapList.length} map files and index.`)

src/hooks.server.ts

@@ -0,0 +1,20 @@
+import { type HandleFetch } from "@sveltejs/kit";
+
+export const handleFetch: HandleFetch = async ({ request, fetch }) => {
+    if (request.url.startsWith('https://maps.owlboard.info')) {
+        const newUrl = request.url.replace('https://maps.owlboard.info', 'http://localhost:3000');
+        
+        const headers = new Headers(request.headers);
+        headers.set('host', 'maps.owlboard.info');
+
+        request = new Request(newUrl, {
+            method: request.method,
+            headers: headers,
+            body: request.body,
+            // @ts-ignore - 'duplex' is needed for node fetch with bodies
+            duplex: 'half' 
+        });
+    }
+
+    return fetch(request);
+}

src/lib/components/mapIcons/Bridge.svelte

@@ -1,80 +1,194 @@
 <script lang="ts">
 	import BaseTrack from '$lib/components/mapIcons/BaseTrack.svelte';
+	import type { ElecType } from '$lib/railStyles';
 
 	export let feature: {
 		position: 'over' | 'under';
-		category: 'rail' | 'footbridge' | 'aroad' | 'minorRoad' | 'motorway' | 'waterway';
+		category: 'rail' |'stream'| 'foot' | 'aroad' | 'minorRoad' | 'motorway' | 'waterway' | 'pipeline';
 		roadName?: string;
 	};
-
-	export let activeElec: string;
+	export let activeElec: ElecType;
 
 	const bridgeStyles = {
-		rail: { color: '#ffffff', stroke: '#000000', width: 20, text: '#000000' },
-		footbridge: { color: '#ffffff', stroke: '#475569', width: 10, text: '#475569' },
-		aroad: { color: '#00703c', stroke: '#004d29', width: 24, text: '#FFEB3B' },
-		minorRoad: { color: '#ffffff', stroke: '#64748b', width: 20, text: '#334155' },
-		motorway: { color: '#005da1', stroke: '#003e6b', width: 32, text: '#ffffff' },
-		waterway: { color: '#bae6fd', stroke: '#0369a1', width: 24, text: '#075985' },
-		pipeline: { color: '#334155', stroke: '#1e293b', width: 4, text: '#334155' }
+		rail: {
+			stroke: '#0f172a',
+			width: 22,
+			bg: '#334155',
+			text: '#ffffff',
+			textBg: '#000000',
+			textBorder: '',
+			type: 'rail'
+		},
+		foot: {
+			stroke: '#475569',
+			width: 10,
+			bg: '#94a3b8',
+			text: '#ffffff',
+			textBg: '#000000',
+			textBorder: '',
+			type: 'path'
+		},
+		aroad: {
+			stroke: '#065f46',
+			width: 32,
+			bg: '#059669',
+			text: '#ffd200',
+			textBg: '#00703c',
+			textBorder: '#ffd200',
+			type: 'road'
+		},
+		minorRoad: {
+			stroke: '#334155',
+			width: 24,
+			bg: '#475569',
+			text: '#000000',
+			textBg: '#ffffff',
+			textBorder: '#000000',
+			type: 'road'
+		},
+		motorway: {
+			stroke: '#1e40af',
+			width: 40,
+			bg: '#3b82f6',
+			text: '#ffffff',
+			textBg: '#007ac1',
+			textBorder: '#ffffff',
+			type: 'road'
+		},
+		waterway: {
+			stroke: '#0369a1',
+			width: 32,
+			bg: '#bae6fd',
+			text: '#075985',
+			textBg: '#000000',
+			textBorder: '',
+			type: 'water'
+		},
+		stream: {
+			stroke: '#0369a1',
+			width: 4,
+			bg: '#bae6fd',
+			text: '#075985',
+			textBg: '#000000',
+			textBorder: '',
+			type: 'water'
+		},
+		pipeline: {
+			stroke: '#1e293b',
+			width: 4,
+			bg: '#1e293b',
+			text: '#ffffff',
+			textBg: '#000000',
+			textBorder: '',
+			type: 'path'
+		}
 	};
 
 	$: s = bridgeStyles[feature.category] || bridgeStyles.minorRoad;
 	$: isOver = feature.position === 'over';
 
-	$: topY = 32 - s.width / 2;
-	$: bottomY = 32 + s.width / 2;
+	$: xLeft = 6;
+	$: xRight = 58;
 
-	$: topPath = `M 0 ${topY} Q 8 ${topY} 8 ${topY - 4} M 56 ${topY - 4} Q 56 ${topY} 64 ${topY}`;
-	$: bottomPath = `M 0 ${bottomY} Q 8 ${bottomY} 8 ${bottomY + 4} M 56 ${bottomY + 4} Q 56 ${bottomY} 64 ${bottomY}`;
-
-	$: bodyPath = `M 0 ${topY} L 64 ${topY} L 64 ${bottomY} L 0 ${bottomY} Z`;
+	const yTop = 16;
+	const yBottom = 48;
 </script>
 
 <svg viewBox="0 0 64 64" width="64" height="64" class="bridge">
-	{#if !isOver}
-		<path d={bodyPath} fill={s.color} />
-		<path d={`M 0 ${topY} L 64 ${topY}`} stroke={s.stroke} stroke-width="2" />
-		<path d={`M 0 ${bottomY} L 64 ${bottomY}`} stroke={s.stroke} stroke-width="2" />
+	{#if isOver}
 		<BaseTrack {activeElec} height={64} />
+
+
+				<!-- White edge, to provide separation between abutment line and bridge content -->
+		<rect x=0 y={32 - (s.width / 2) - 4} width="64" height="{s.width + 8}" fill="white" />
+
+		<rect x="6" y={32 - (s.width / 2)} width="52" height={s.width} fill={s.bg} />
+
+		{#if s.type === 'road'}
+			<line
+				x1={xLeft}
+				y1="32"
+				x2={xRight}
+				y2="32"
+				stroke="white"
+				stroke-width="1.5"
+				stroke-dasharray="4 3"
+				opacity="0.6"
+			/>
+		{:else if s.type === 'rail'}
+			<line x1={xLeft} y1="28" x2={xRight} y2="28" stroke="#cbd5e1" stroke-width="1.5" />
+			<line x1={xLeft} y1="36" x2={xRight} y2="36" stroke="#cbd5e1" stroke-width="1.5" />
+		{/if}
+
+<g fill="none" stroke={s.stroke} stroke-width="2.5" stroke-linecap="square">
+    <path d={`M 20 ${32 - s.width / 2 - 6} L 20 ${32 - s.width / 2 - 4} L 44 ${32 - s.width / 2 - 4} L 44 ${32 - s.width / 2 - 6}`} />
+    
+    <path d={`M 20 ${32 + s.width / 2 + 6} L 20 ${32 + s.width / 2 + 4} L 44 ${32 + s.width / 2 + 4} L 44 ${32 + s.width / 2 + 6}`} />
+</g>
 	{:else}
-		<BaseTrack {activeElec} height={64} />
 
-		<path d={bodyPath} fill="white" /> <path d={bodyPath} fill={s.color} />
 
-		<g fill="none" stroke={s.stroke} stroke-width="2.5" stroke-linecap="round">
-			<path d={`M 0 ${topY} L 64 ${topY}`} />
-			<path d={`M 0 ${bottomY} L 64 ${bottomY}`} />
-			<path d={`M 0 ${topY} Q 4 ${topY} 4 ${topY - 6}`} />
-			<path d={`M 64 ${topY} Q 60 ${topY} 60 ${topY - 6}`} />
-			<path d={`M 0 ${bottomY} Q 4 ${bottomY} 4 ${bottomY + 6}`} />
-			<path d={`M 64 ${bottomY} Q 60 ${bottomY} 60 ${bottomY + 6}`} />
+		<rect x="6" y={32 - (s.width / 2)} width="52" height={s.width} fill={s.bg} />
+
+		{#if s.type === 'road'}
+			<line
+				x1={xLeft}
+				y1="32"
+				x2={xRight}
+				y2="32"
+				stroke="white"
+				stroke-width="1.5"
+				stroke-dasharray="4 3"
+				opacity="0.6"
+			/>
+		{:else if s.type === 'rail'}
+			<line x1={xLeft} y1="28" x2={xRight} y2="28" stroke="#cbd5e1" stroke-width="1.5" />
+			<line x1={xLeft} y1="36" x2={xRight} y2="36" stroke="#cbd5e1" stroke-width="1.5" />
+		{/if}
+
+		<rect x="26" y={yTop} width="12" height="64" fill="white" />
+		<g stroke={s.stroke} stroke-width="2.5" fill="none" stroke-linecap="square">
+			<path d={`M 24 ${(32 - (s.width / 2)) - 5} L 25 ${(32 - (s.width / 2)) - 5} L 25 ${(32 - (s.width / 2)) + s.width + 5} L 24 ${(32 - (s.width / 2)) + s.width + 5}`} />
+
+			<path d={`M 40 ${(32 - (s.width / 2)) - 5} L 39 ${(32 - (s.width / 2)) - 5} L 39 ${(32 - (s.width / 2)) + s.width + 5} L 40 ${(32 - (s.width / 2)) + s.width + 5}`} />
 		</g>
 
-		{#if feature.roadName}
+		<BaseTrack {activeElec} height={64} />
+	{/if}
+
+	{#if feature.roadName}
+		<g class="label-group">
+			<rect
+				x={32 - feature.roadName.length * 3 - 4}
+				y="27"
+				width={feature.roadName.length * 6 + 8}
+				height="10"
+				stroke={s.textBorder || s.textBg}
+				stroke-width="1"
+				fill={s.textBg}
+				rx="3"
+				ry="4"
+			/>
 			<text
 				x="32"
 				y="32"
 				text-anchor="middle"
 				dominant-baseline="central"
 				fill={s.text}
-				font-family="sans-serif"
-				font-weight="bold"
-				font-size={s.width > 20 ? '10' : '8'}
-				style="pointer-events: none; text-transform: uppercase; letter-spacing: 0.5px;"
+				font-family="ui-monospace, monospace"
+				font-weight="900"
+				font-size="8"
 			>
 				{feature.roadName}
 			</text>
-		{/if}
+		</g>
 	{/if}
 </svg>
 
 <style>
-	svg {
-		display: block;
-		overflow: visible;
-	}
 	text {
-		user-select: none;
+		text-transform: uppercase;
+		letter-spacing: 0.5px;
+		pointer-events: none;
 	}
 </style>

src/lib/components/mapIcons/ElectrificationChange.svelte

@@ -1,13 +1,14 @@
 <script lang="ts">
 	import { getElecColour } from '$lib/railStyles';
+	import type { ElecType } from '$lib/railStyles';
 
 	export let feature: {
 		from: {
-			elec: string;
+			elec: ElecType;
 			eco?: string;
 		};
 		to: {
-			elec: string;
+			elec: ElecType;
 			eco?: string;
 		};
 	};

src/lib/components/mapIcons/Junction.svelte

@@ -1,43 +1,48 @@
 <script lang="ts">
-    import { getElecColour } from '$lib/railStyles';
-    import BaseTrack from '$lib/components/mapIcons/BaseTrack.svelte';
+	import { getElecColour } from '$lib/railStyles';
+	import BaseTrack from '$lib/components/mapIcons/BaseTrack.svelte';
 
-    export let feature: {
-        direction: 'up' | 'down';
-        diverges: 'left' | 'right' | 'both';
-        elecBranch?: string;
-    };
-    export let activeElec: any;
-    export let reversed: boolean = false;
+	export let feature: {
+		direction: 'up' | 'down';
+		diverges: 'left' | 'right' | 'both';
+		elecBranch?: string;
+	};
+	export let activeElec: any;
+	export let reversed: boolean = false;
 
-    $: isUp = feature.direction === 'up';
-    $: visualUp = reversed ? !isUp : isUp;
+	$: isUp = feature.direction === 'up';
+	$: visualUp = reversed ? !isUp : isUp;
+	$: visualSide = (side: 'left' | 'right') => {
+		if (!reversed) return side;
+		return side === 'left' ? 'right' : 'left';
+	};
 
-    const getPath = (side: 'left' | 'right') => {
-        const yStart = visualUp ? 64 : 0;
-        const yEnd = visualUp ? 8 : 56;
-        const xEnd = side === 'right' ? 56 : 8;
-        return `M 32 ${yStart} Q 32 32 ${xEnd} ${yEnd}`;
-    };
+	const getPath = (side: 'left' | 'right') => {
+		const yStart = visualUp ? 64 : 0;
+		const yEnd = visualUp ? 8 : 56;
+		const xEnd = side === 'right' ? 56 : 8;
+		return `M 32 ${yStart} Q 32 32 ${xEnd} ${yEnd}`;
+	};
 
-    $: paths = (() => {
-        if (feature.diverges === 'both') return [getPath('left'), getPath('right')];
-        return [getPath(feature.diverges)];
-    })();
+	$: paths = (() => {
+		if (feature.diverges === 'both') return [getPath('left'), getPath('right')];
+		const effectiveSide = visualSide(feature.diverges as 'left' | 'right');
+		return [getPath(effectiveSide)];
+	})();
 
-    $: branchColour = getElecColour(feature.elecBranch || activeElec);
+	$: branchColour = getElecColour(feature.elecBranch || activeElec);
 </script>
 
 <svg viewBox="0 0 64 64" width="64" height="64" class="junction">
-    {#each paths as d}
-        <path {d} fill="none" stroke={branchColour} stroke-width="5" stroke-linecap="round" />
-    {/each}
-    <BaseTrack {activeElec} height={64} />
+	{#each paths as d}
+		<path {d} fill="none" stroke={branchColour} stroke-width="5" stroke-linecap="round" />
+	{/each}
+	<BaseTrack {activeElec} height={64} />
 </svg>
 
 <style>
-    svg {
-        display: block;
-        overflow: visible;
-    }
+	svg {
+		display: block;
+		overflow: visible;
+	}
 </style>

src/lib/components/mapIcons/RouteEndLink.svelte

@@ -1,93 +1,121 @@
 <script lang="ts">
-  export let feature: {
-    routeName: string;
-    routeId: string;
-  };
+	export let feature: {
+		routeName: string;
+		routeId: string;
+	};
 </script>
 
 <div class="link-wrapper">
-  <a href="/map/{feature.routeId}" class="wide-button">
-    <div class="accent-bar"></div>
-    <div class="content">
-      <span class="sub-text">Continue to next map</span>
-      <span class="main-text">{feature.routeName}</span>
-    </div>
-    <div class="icon">
-      <svg viewBox="0 0 24 24" width="20" height="20">
-        <path d="M5 12h14M12 5l7 7-7 7" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
-      </svg>
-    </div>
-  </a>
+	<a href="/map/{feature.routeId}" class="wide-button">
+		<div class="content">
+			<div class="header-row">
+				<span class="sub-text">Go to</span>
+				<span class="route-id-chip">{feature.routeId}</span>
+			</div>
+			<span class="main-text">{feature.routeName}</span>
+		</div>
+
+		<div class="icon-circle">
+			<svg viewBox="0 0 24 24" width="20" height="20">
+				<path
+					d="M5 12h14M12 5l7 7-7 7"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="3"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				/>
+			</svg>
+		</div>
+	</a>
 </div>
 
 <style>
-  .link-wrapper {
-    position: relative;
-    z-index: 100;
-    padding: 12px;
-    width: 100%;
-    box-sizing: border-box;
-  }
+	.link-wrapper {
+		padding: 16px;
+		width: 100%;
+		box-sizing: border-box;
+	}
 
-  .wide-button {
-    display: flex;
-    align-items: center;
-    background: #ffffff;
-    border: 2px solid #e2e8f0;
-    border-radius: 12px;
-    text-decoration: none;
-    overflow: hidden;
-    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
-  }
+	.wide-button {
+		display: flex;
+		align-items: center;
+		background: #ffffff;
+		border: 1px solid #e2e8f0;
+		border-radius: 16px;
+		text-decoration: none;
+		padding: 12px 16px;
+		transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+	}
 
-  .accent-bar {
-    width: 6px;
-    align-self: stretch;
-    background: #475569;
-  }
+	.content {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+		min-width: 0;
+	}
 
-  .content {
-    flex: 1;
-    padding: 12px 16px;
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-  }
+	.header-row {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+	}
 
-  .sub-text {
-    font-size: 10px;
-    font-weight: 700;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    color: #94a3b8;
-  }
+	.sub-text {
+		font-size: 0.65rem;
+		font-weight: 700;
+		text-transform: uppercase;
+		letter-spacing: 0.05em;
+		color: #64748b;
+	}
 
-  .main-text {
-    font-size: 16px;
-    font-weight: 800;
-    color: #1e293b;
-  }
+	.route-id-chip {
+		font-size: 0.6rem;
+		font-weight: 800;
+		background: #f1f5f9;
+		color: #475569;
+		padding: 2px 6px;
+		border-radius: 6px;
+		text-transform: uppercase;
+	}
 
-  .icon {
-    padding-right: 20px;
-    color: #cbd5e1;
-    transition: transform 0.2s ease;
-  }
+	.main-text {
+		font-size: 1rem;
+		font-weight: 800;
+		color: #0f172a;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
 
+	.icon-circle {
+		width: 40px;
+		height: 40px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background: #f8fafc;
+		border-radius: 50%;
+		color: #94a3b8;
+		transition: all 0.3s ease;
+		margin-left: 12px;
+	}
 
-  .wide-button:hover {
-    border-color: #94a3b8;
-    background: #f8fafc;
-  }
+	.wide-button:hover {
+		border-color: #cbd5e1;
+		background: #fdfdfd;
+		box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
+	}
 
-  .wide-button:hover .icon {
-    color: #475569;
-    transform: translateX(4px);
-  }
+	.wide-button:hover .icon-circle {
+		background: #4f46e5;
+		color: #ffffff;
+		transform: rotate(-45deg);
+	}
 
-  .wide-button:active {
-    transform: scale(0.98);
-    background: #f1f5f9;
-  }
-</style>
+	.wide-button:active {
+		transform: scale(0.98);
+	}
+</style>

src/lib/components/mapIcons/SignallerChange.svelte

@@ -6,7 +6,14 @@
 		to: string;
 	};
 
+	export let reversed: boolean = false;
+
 	export let activeElec: any;
+
+	$: effectiveFeature = {
+		from: reversed ? feature.to : feature.from,
+		to: reversed ? feature.from : feature.to
+	};
 </script>
 
 <svg viewBox="0 0 64 64" width="64" height="64" style="overflow: visible;">
@@ -24,10 +31,10 @@
 
 	<g font-family="sans-serif" font-weight="800" font-size="11">
 		<text x="70" y="24" fill="#4338ca" style="text-transform: uppercase;">
-			{feature.from}
+			{effectiveFeature.from}
 		</text>
 		<text x="70" y="46" fill="#4338ca" style="text-transform: uppercase;">
-			{feature.to}
+			{effectiveFeature.to}
 		</text>
 	</g>
 </svg>

src/lib/components/mapIcons/Tunnel.svelte

@@ -1,56 +1,59 @@
 <script lang="ts">
-    import BaseTrack from "./BaseTrack.svelte";
+	import BaseTrack from './BaseTrack.svelte';
 
-    export let feature: {
-        tunnelType: "start" | "whole" | "end";
-        length: string;
-    };
+	export let feature: {
+		tunnelType: 'start' | 'whole' | 'end';
+		length: string;
+	};
 
-    export let activeElec: any;
+	export let activeElec: any;
 
-    export let reversed: boolean = false;
+	export let reversed: boolean = false;
 
-    const portalColour = "#475569"; // Slate grey
+	const portalColour = '#475569'; // Slate grey
 
-    $: effectiveType = (() => {
-        if (!reversed || feature.tunnelType === 'whole') return feature.tunnelType;
-        return feature.tunnelType === 'start' ? 'end' : 'start';
-    })();
+	$: effectiveType = (() => {
+		if (!reversed || feature.tunnelType === 'whole') return feature.tunnelType;
+		return feature.tunnelType === 'start' ? 'end' : 'start';
+	})();
 </script>
 
 <svg viewBox="0 0 64 64" width="64" height="64" class="tunnel">
-    <BaseTrack {activeElec} height={64} />
+	<BaseTrack {activeElec} height={64} />
 
-    <g fill="none" stroke={portalColour} stroke-width="3" stroke-linecap="round">
-        {#if effectiveType === 'whole'}
-            <path d="M 16 12 Q 32 24 48 12" />
-            <path d="M 16 52 Q 32 40 48 52" />
+	<g fill="none" stroke={portalColour} stroke-width="3" stroke-linecap="round">
+		{#if effectiveType === 'whole'}
+			<path d="M 16 12 Q 32 24 48 12" />
+			<path d="M 16 52 Q 32 40 48 52" />
+		{:else if effectiveType === 'start'}
+			<path d="M 16 12 Q 32 24 48 12" />
+		{:else if effectiveType === 'end'}
+			<path d="M 16 52 Q 32 40 48 52" />
+		{/if}
+	</g>
 
-        {:else if effectiveType === 'start'}
-            <path d="M 16 12 Q 32 24 48 12" />
-
-        {:else if effectiveType === 'end'}
-            <path d="M 16 52 Q 32 40 48 52" />
-        {/if}
-    </g>
-
-    {#if feature.tunnelType === 'whole' && feature.length}
-        <rect x="12" y="26" width="40" height="12" fill="white" />
-        <text 
-            x="32" 
-            y="35" 
-            text-anchor="middle" 
-            font-size="8.5" 
-            font-weight="bold" 
-            fill={portalColour} 
-            class="t-text"
-        >
-            {feature.length}
-        </text>
-    {/if}
+	{#if feature.tunnelType === 'whole' && feature.length}
+		<rect x="12" y="26" width="40" height="12" fill="white" />
+		<text
+			x="32"
+			y="35"
+			text-anchor="middle"
+			font-size="8.5"
+			font-weight="bold"
+			fill={portalColour}
+			class="t-text"
+		>
+			{feature.length}
+		</text>
+	{/if}
 </svg>
 
 <style>
-    svg { display: block; overflow: visible; }
-    .t-text { font-family: ui-monospace, monospace; }
-</style>
+	svg {
+		display: block;
+		overflow: visible;
+	}
+	.t-text {
+		font-family: ui-monospace, monospace;
+	}
+</style>

src/lib/mapRegistry.ts

@@ -23,5 +23,5 @@ export const components = {
 	signallerChange: SignallerChange,
 	electrificationChange: ElectrificationChange,
 	default: BaseTrack,
-	tunnel: Tunnel,
+	tunnel: Tunnel
 };

src/routes/+page.svelte

@@ -1,116 +1,236 @@
 <script lang="ts">
-	import RouteRow from '$lib/components/RouteRow.svelte';
+    import type { PageData } from './$types';
+    export let data: PageData;
 
-	const dummyFeatures = [
-		{
-			type: 'station',
-			miles: 0,
-			chains: 0,
-			name: 'Testington',
-			description: 'Terminus',
-			terminus: true,
-			elec: '25kvac'
-		},
-		{
-			type: 'station',
-			miles: 0,
-			chains: 76,
-			name: 'Closeby',
-			description: 'Temporarily closed',
-			elec: '25kvac'
-		},
-		{
-			type: 'junction',
-			name: 'Test Junction',
-			diverges: 'right',
-			direction: 'down',
-			elec: '25kvac',
-			elecBranch: 'none',
-			miles: 1,
-			chains: 13
-		},
-		{
-			type: 'bridge',
-			position: 'over',
-			category: 'pipeline',
-			name: 'Waterway Bridge',
-			roadName: 'TfL (LU)',
-			elec: '25kvac',
-			miles: 1,
-			chains: 41
-		},
-		{
-			type: 'crossover',
-			name: 'Dolphin junction',
-			elec: '25kvac',
-			miles: 1,
-			chains: 42
-		},
-		{
-			type: 'junction',
-			name: 'Test Junction South',
-			description: 'To: Banbury West Junction & Birmingham',
-			diverges: 'left',
-			direction: 'down',
-			elec: '25kvac',
-			elecBranch: '650vdc',
-			miles: 1,
-			chains: 42
-		},
-		{
-			type: 'electrificationChange',
-			from: {
-				elec: '25kvac',
-				eco: 'Didcot'
-			},
-			to: {
-				elec: 'none'
-			}
-		},
-		{
-			type: 'crossing',
-			kind: 'ahb',
-			elec: '25kvac',
-			name: 'Swindon Lane',
-			description: 'Controlled by TVSC (Level Crossing WS)'
-		},
-		{
-			type: 'loop',
-			side: 'both',
-			elec: '25kvac',
-			elecLoop: 'none'
-		},
-		{
-			type: 'signallerChange',
-			from: 'TVSC - Didcot WS (SB)',
-			to: 'TVSC - Swindon WS (SN)',
-			elec: '25kvac'
-		},
-		{
-			type: 'station',
-			miles: 4,
-			chains: 13,
-			name: 'Powerless',
-			description: "Doesn't exist",
-			elec: '750vdc'
-		}
-	];
+    let searchTerm = '';
+
+    const formatDate = (dateVal: string | null) => {
+        if (!dateVal) return '---';
+        const d = new Date(dateVal);
+        return d.toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: '2-digit' });
+    };
+
+    $: filteredMaps = data.maps.filter(m => 
+        m.routeId.toString().includes(searchTerm) ||
+        m.routeStart.toLowerCase().includes(searchTerm.toLowerCase()) ||
+        m.routeEnd.toLowerCase().includes(searchTerm.toLowerCase())
+    );
+
+const isVerifiedRecently = (dateVal: string | null) => {
+        if (!dateVal) return 'draft';
+        
+        const checkedDate = new Date(dateVal).getTime();
+        const oneYearAgo = Date.now() - (365 * 24 * 60 * 60 * 1000);
+        
+        return checkedDate > oneYearAgo ? 'verified' : 'stale';
+    };
 </script>
 
-<h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
+<div class="page-wrapper">
+    <header class="main-header">
+        <h1>ROUTE_DB</h1>
+        <div class="search-container">
+            <input 
+                type="text" 
+                bind:value={searchTerm} 
+                placeholder="Search index..." 
+                class="search-input"
+            />
+        </div>
+    </header>
 
-<div class="map-container">
-	{#each dummyFeatures as feature}
-		<RouteRow {feature} activeElec={feature.elec} />
-	{/each}
+    <div class="list-container">
+        {#each filteredMaps as map}
+            <a href="/map/{map.routeId.toString().padStart(4, '0')}" class="card">
+                <div class="card-top">
+                    <span class="route-id">{map.routeId.toString().padStart(4, '0')}</span>
+<span class="status-badge {isVerifiedRecently(map.checked)}">
+    {#if isVerifiedRecently(map.checked) === 'verified'}
+        Reviewed
+    {:else if isVerifiedRecently(map.checked) === 'stale'}
+        Needs review
+    {:else}
+        Draft
+    {/if}
+</span>
+                </div>
+                
+                <div class="card-body">
+                    <div class="location origin">{map.routeStart}</div>
+                    <div class="path-arrow">↓</div>
+                    <div class="location destination">{map.routeEnd}</div>
+                </div>
+
+                <div class="card-footer">
+                    <span>Created: {formatDate(map.created)}</span>
+                    {#if map.checked}
+                        <span>• Checked: {formatDate(map.checked)}</span>
+                    {/if}
+                </div>
+            </a>
+        {:else}
+            <div class="empty-state">No maps found.</div>
+        {/each}
+    </div>
 </div>
 
 <style>
-	.map-container {
-		width: 100%;
-		max-width: 600px;
-		margin: 0 auto;
-		font-family: sans-serif;
-	}
-</style>
+    /* Mobile-First Base Styles */
+    :global(body) {
+        margin: 0;
+        background-color: #f8fafc;
+        color: #0f172a;
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    }
+
+    .page-wrapper {
+        padding: 1rem;
+        max-width: 800px;
+        margin: 0 auto;
+    }
+
+    .main-header {
+        margin-bottom: 1.5rem;
+    }
+
+    h1 {
+        font-size: 1.5rem;
+        font-weight: 900;
+        letter-spacing: -0.05em;
+        margin: 0 0 1rem 0;
+        font-style: italic;
+    }
+
+    .search-input {
+        width: 100%;
+        padding: 0.8rem 1rem;
+        border: 2px solid #e2e8f0;
+        border-radius: 12px;
+        font-size: 1rem;
+        box-sizing: border-box; /* Ensures padding doesn't break width */
+        outline: none;
+    }
+
+    .search-input:focus {
+        border-color: #3b82f6;
+    }
+
+    /* Card Layout (Mobile) */
+    .list-container {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+    }
+
+    .card {
+        display: block;
+        background: white;
+        padding: 1.25rem;
+        border-radius: 16px;
+        text-decoration: none;
+        color: inherit;
+        border: 1px solid #e2e8f0;
+        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
+        transition: transform 0.1s ease;
+    }
+
+    .card:active {
+        transform: scale(0.98); /* Tactile feedback for mobile */
+    }
+
+    .card-top {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 0.75rem;
+    }
+
+    .route-id {
+        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+        font-weight: 800;
+        color: #3b82f6;
+        background: #eff6ff;
+        padding: 0.2rem 0.5rem;
+        border-radius: 6px;
+    }
+
+    .card-body {
+        margin-bottom: 1rem;
+    }
+
+    .location {
+        font-size: 1.125rem;
+        font-weight: 700;
+        letter-spacing: -0.02em;
+    }
+
+    .path-arrow {
+        color: #cbd5e1;
+        font-size: 0.9rem;
+        margin: 0.2rem 0;
+    }
+
+    .card-footer {
+        font-size: 0.7rem;
+        color: #64748b;
+        text-transform: uppercase;
+        font-weight: 600;
+        letter-spacing: 0.05em;
+        border-top: 1px solid #f1f5f9;
+        padding-top: 0.75rem;
+    }
+
+/* Update your existing badge styles */
+.status-badge {
+    font-size: 0.65rem;
+    font-weight: 800;
+    text-transform: uppercase;
+    padding: 0.3rem 0.6rem;
+    border-radius: 999px;
+    white-space: nowrap; /* Prevents label snapping on small screens */
+}
+
+.verified { 
+    background: #dcfce7; 
+    color: #166534; 
+}
+
+.stale { 
+    background: #fef3c7; /* Amber/Yellow background */
+    color: #92400e;      /* Dark brown/gold text */
+    border: 1px solid #fcd34d;
+}
+
+.draft { 
+    background: #f1f5f9; 
+    color: #475569; 
+}
+
+    /* Desktop Adjustments */
+    @media (min-width: 640px) {
+        .page-wrapper {
+            padding: 3rem 1.5rem;
+        }
+
+        .main-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .search-input {
+            width: 300px;
+        }
+
+        .path-arrow {
+            display: inline-block;
+            margin: 0 0.5rem;
+            transform: rotate(-90deg); /* Turn down arrow into right arrow */
+        }
+
+        .card-body {
+            display: flex;
+            align-items: center;
+        }
+    }
+</style>

src/routes/+page.ts

@@ -0,0 +1,17 @@
+import type { PageLoad } from "./$types";
+
+export const load: PageLoad = async ({ fetch }) => {
+    const response = await fetch('map-index.json');
+
+    if (!response.ok) {
+        return { maps: [] };
+    }
+
+    const maps = await response.json();
+
+    return {
+        maps: maps.sort((a: any, b: any) => {
+            return Number(a.routeId) - Number(b.routeId);
+        })
+    };
+};

src/routes/healthz/+server.ts

@@ -2,7 +2,10 @@ import { json } from '@sveltejs/kit';
 import type { RequestHandler } from './$types';
 
 export const GET: RequestHandler = () => {
-    return json({ status: 'ok', uptime: process.uptime() }, {
-        status: 200
-    });
-};
+	return json(
+		{ status: 'ok', uptime: process.uptime() },
+		{
+			status: 200
+		}
+	);
+};

src/routes/map/[slug]/+page.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
 	import RouteRow from '$lib/components/RouteRow.svelte';
-    import RouteEndLink from '$lib/components/mapIcons/RouteEndLink.svelte';
+	import RouteEndLink from '$lib/components/mapIcons/RouteEndLink.svelte';
 	import { slide } from 'svelte/transition';
 
-	// data.route contains: routeName, routeId, elecStart, elecEnd, routeDetail[]
+	// data.route contains: routeStart, routeEnd, routeId, elecStart, elecEnd, routeDetail[]
 	export let data;
 
 	let reversed = false; // Reverses Array, and passes value down to children
@@ -17,7 +17,7 @@
 		electrificationChange: true,
 		siteof: true,
 		junction: true,
-        tunnel: true,
+		tunnel: true
 	};
 
 	let showFilters = false;
@@ -58,16 +58,31 @@
 </script>
 
 <div class="map-layout">
-	<header class="top-nav">
-		<h1>{data.route.routeName}</h1>
-		<span class="route-code">{data.route.routeId}</span>
-		<div class="quick-actions">
-			<button class="icon-btn" on:click={() => (reversed = !reversed)}>
-				⇄ {reversed ? 'UP' : 'DN'}
-			</button>
-			<button class="icon-btn" on:click={() => (showFilters = !showFilters)}> Settings </button>
-		</div>
-	</header>
+<header class="top-nav">
+    <div class="nav-cluster">
+        <a href="/" class="home-link" title="Back to Index">
+            <span class="home-icon">⌂</span>
+        </a>
+        
+        <div class="route-stack">
+            {#if data?.route}
+                <h1 class="primary-station">
+                    {reversed ? data.route.routeEnd : data.route.routeStart}
+                </h1>
+                <span class="secondary-station">
+                    to {reversed ? data.route.routeStart : data.route.routeEnd}
+                </span>
+            {/if}
+        </div>
+    </div>
+
+    <div class="quick-actions">
+        <button class="icon-btn" on:click={() => (reversed = !reversed)}>
+            ⇄ {reversed ? 'UP' : 'DN'}
+        </button>
+        <button class="icon-btn" on:click={() => (showFilters = !showFilters)}> Settings </button>
+    </div>
+</header>
 
 	{#if showFilters}
 		<div class="backdrop" on:click={() => (showFilters = false)}></div>
@@ -108,53 +123,130 @@
 	<main class="map-spine">
 		<div class="container">
 			{#each filteredFeatures as f, i (`${f.type}-${f.miles}-${f.chains}-${i}`)}
-              {#if (f.type === 'continues')}
-                <RouteEndLink feature={f} />
-              {:else}
-				<RouteRow feature={f} activeElec={f.activeElec} {reversed} />
-              {/if}
+				{#if f.type === 'continues'}
+					<RouteEndLink feature={f} />
+				{:else}
+					<RouteRow feature={f} activeElec={f.activeElec} {reversed} />
+				{/if}
 			{/each}
 		</div>
 	</main>
 </div>
+
 <style>
 	.map-layout {
 		display: flex;
 		flex-direction: column;
 		background: #ffffff;
 		min-height: 100vh;
+		margin-top: 0;
+		padding-top: 0;
 	}
 
-	.top-nav {
-		position: sticky;
-		top: 0;
-		z-index: 100;
-		background: rgba(255, 255, 255, 0.9);
-		backdrop-filter: blur(10px);
-		border-bottom: 1px solid #e2e8f0;
-		padding: 0.75rem 1rem;
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		gap: 1rem;
+.top-nav {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0.5rem 1rem;
+        background: #0f172a;
+        color: white;
+        gap: 1rem;
+    }
+
+    .nav-cluster {
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+        min-width: 0; /* Prevents flex children from overflowing */
+    }
+
+    .home-link {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 36px;
+        height: 36px;
+        background: #1e293b;
+        border: 1px solid #334155;
+        border-radius: 8px;
+        color: #94a3b8;
+        text-decoration: none;
+        font-size: 1.2rem;
+        flex-shrink: 0; /* Keeps button from squishing on mobile */
+    }
+
+    .home-link:hover {
+        background: #334155;
+        color: white;
+        border-color: #475569;
+    }
+
+    .route-stack {
+        display: flex;
+        flex-direction: column;
+        min-width: 0;
+    }
+
+    .primary-station {
+        font-size: 1rem;
+        font-weight: 800;
+        margin: 0;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .secondary-station {
+        font-size: 0.7rem;
+        color: #94a3b8;
+        text-transform: uppercase;
+        font-weight: 600;
+    }
+
+    .quick-actions {
+        display: flex;
+        gap: 0.5rem;
+    }
+
+    .icon-btn {
+        background: #1e293b;
+        border: 1px solid #334155;
+        color: white;
+        padding: 0.4rem 0.6rem;
+        border-radius: 6px;
+        font-size: 0.75rem;
+        font-weight: bold;
+        cursor: pointer;
+        white-space: nowrap;
+    }
+
+	.map-spine {
+		padding-top: 72px;
 	}
 
-	h1 {
-		flex: 1;
-		min-width: 0;
-		margin: 0;
-		font-size: 1.1rem;
-		font-weight: 800;
-		line-height: 1.2;
-		color: #0f172a;
-		letter-spacing: -0.02em;
-		white-space: normal;
-		overflow-wrap: break-word;
+	.secondary-station {
+		font-size: 0.85rem;
+		font-weight: 500;
+		color: #64748b;
+		letter-spacing: 0.025em;
+		margin-top: 2px;
 	}
 
 	@media (min-width: 768px) {
+		.primary-station {
+			font-size: 1.5rem;
+		}
+		.secondary-station {
+			font-size: 1rem;
+		}
+
 		.top-nav {
-			padding: 1rem 2rem;
+			padding: 0 2rem;
+			height: 90px;
+		}
+
+		.map-spine {
+			padding-top: 90px;
 		}
 
 		h1 {
@@ -242,4 +334,37 @@
 		color: white;
 		border-color: #1e293b;
 	}
+
+	.quick-actions {
+		display: flex;
+		gap: 0.5rem;
+		flex-shrink: 0;
+	}
+
+	.icon-btn {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.4rem;
+		padding: 0.5rem 0.8rem;
+		border-radius: 12px;
+		border: 1px solid #e2e8f0;
+		background: #f8fafc;
+		color: #475569;
+		font-size: 0.75rem;
+		font-weight: 700;
+		cursor: pointer;
+		transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+		text-transform: uppercase;
+		letter-spacing: 0.02em;
+	}
+
+	.icon-btn:hover {
+		background: #f1f5f9;
+		border-color: #cbd5e1;
+		color: #1e293b;
+	}
+
+	.icon-btn:active {
+		transform: scale(0.96);
+	}
 </style>

static/mapFiles/yaml/0001.yaml

@@ -1,5 +1,8 @@
-routeName: Paddington - Reading West Jn
+routeStart: Paddington
+routeEnd: Reading West Jn
 routeId: 0001
+created: 2026-02-04
+checked: 2026-02-06
 signallerStart: TVSC Paddington WS
 signallerEnd: TVSC Reading WS
 elecStart:
@@ -117,8 +120,8 @@ routeDetail:
   chains: 73
 
 - type: junction
-  name: Kensal Green South Junction
-  diverges: right
+  name: Kensal Green East Junction
+  diverges: both
   direction: down
   description: to Crossrail & North Pole Depots
   miles: 2
@@ -141,11 +144,16 @@ routeDetail:
 - type: junction
   name: Old Oak Common East
   diverges: left
-  direction: up
+  direction: down
   description: to Crossrail Depot
   miles: 2
   chains: 62
 
+- type: siteof
+  name: Old Oak Common HS2 interchange
+  miles: 3
+  chains: 0
+
 - type: junction
   name: Old Oak Common West
   diverges: left
@@ -432,7 +440,7 @@ routeDetail:
 - type: bridge
   name: Yeading Brook
   position: under
-  category: waterway
+  category: stream
   miles: 10
   chains: 29
 
@@ -450,6 +458,11 @@ routeDetail:
   miles: 10
   chains: 32
 
+- type: crossovers
+  name: Hayes East
+  miles: 10
+  chains: 45
+
 - type: bridge
   position: under
   category: waterway
@@ -500,7 +513,7 @@ routeDetail:
   chains: 22
 
 - type: crossovers
-  name: West Drayton East
+  name: West Drayton East Junction
   miles: 12
   chains: 67
 
@@ -529,6 +542,7 @@ routeDetail:
   diverges: left
   direction: down
   description: Colnbrook Freight (near Heathrow)
+  elecBranch: none
   miles: 13
   chains: 31
 
@@ -568,7 +582,7 @@ routeDetail:
 - type: bridge
   name: Stream
   position: under
-  category: waterway
+  category: stream
   miles: 14
   chains: 10
 
@@ -616,7 +630,7 @@ routeDetail:
 - type: bridge
   name: Stream
   position: under
-  category: waterway
+  category: stream
   miles: 15
   chains: 61
 
@@ -850,7 +864,7 @@ routeDetail:
 - type: bridge
   name: Stream
   position: under
-  category: waterway
+  category: stream
   miles: 23
   chains: 66
 
@@ -1027,9 +1041,11 @@ routeDetail:
   chains: 1
 
 - type: junction
+  name: Henley Branch Junction
   diverges: left
   direction: down
   description: Henley-on-Thames from Platform 4 only
+  elecBranch: none
   miles: 31
   chains: 4
 
@@ -1162,6 +1178,7 @@ routeDetail:
   name: Reading New Junction
   diverges: right
   direction: up
+  elecBranch: none
   description: to Southern Lines (Waterloo/Guildford)
   miles: 35
   chains: 40
@@ -1177,6 +1194,7 @@ routeDetail:
   name: Reading East Junction
   diverges: left
   direction: up
+  elecBranch: none
   description: to Southern Lines (Waterloo/Guildford)
   miles: 35
   chains: 61

static/mapFiles/yaml/0002.yaml

@@ -0,0 +1,18 @@
+routeStart: Reading West Jn
+routeEnd: Bristol TM
+routeId: 0002
+created: 2026-02-04
+checked:
+signallerStart: TVSC Reading WS
+signallerEnd: TVSC Temple Meads WS
+elecStart:
+  elec: 25kvac
+  eco: Didcot (TVSC)
+elecEnd:
+  elec: none
+routeDetail:
+- type: crossovers
+  name: Scours Lane Junction
+  description: Line diverges
+  miles: 38
+  chains: 90