Add preferences and privacy policy

src/routes/preferences/+page.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+	import BaseCard from '$lib/components/ui/cards/BaseCard.svelte';
+	import Button from '$lib/components/ui/form-elements/Button.svelte';
+	import Toggle from '$lib/components/ui/form-elements/Toggle.svelte';
+	import { quickLinks } from '$lib/quick-links.svelte';
+	import { prefs } from '$lib/preferences.svelte';
+</script>
+
+<section class="page-body">
+	<BaseCard header={'Display Settings'}>
+		<section class="card-content">
+			<Button onclick={() => quickLinks.reset()}>Reset QuickLinks</Button>
+			<div class="toggle-container">
+				<Toggle
+					label={'Show stations near to you'}
+					id={'toggle-nearby-stations'}
+					checked={prefs.current.NearToMe}
+					onchange={(checked) => prefs.toggleNearToMe(checked)}
+				/>
+				<Toggle
+					label={'Show passsing trains on boards'}
+					id={'toggle-passing-trains'}
+					checked={prefs.current.ShowPassingTrains}
+					onchange={(checked) => prefs.toggleShowPassingTrains(checked)}
+				/>
+			</div>
+		</section>
+	</BaseCard>
+</section>
+
+<style>
+	.page-body {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		padding: 1rem 0 1rem 0;
+	}
+
+	.card-content {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		gap: 1rem;
+		padding: 5px 0 5px 0;
+	}
+
+	.toggle-container {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+	}
+</style>