nearby

src/routes/weather/compare/[location]/+page.svelte

@@ -26,6 +26,7 @@
 		groupRange,
 		isColumnUnit
 	} from '$lib/charts';
+	import * as m from '$lib/paraglide/messages';
 	import {
 		type DaylightBand,
 		type ModelCompareResult,
@@ -315,10 +316,10 @@
 	<!-- Range / zoom controls, aligned with the title like the other pages -->
 	<div class="lg:absolute lg:right-0 lg:top-20 z-40 flex flex-wrap items-center gap-3">
 		<span class="hidden text-xs text-muted-foreground lg:inline">
-			drag or
+			{m.meteograms_zoom_hint()}
 			<kbd class="rounded border border-border bg-muted px-1 py-0.5 font-sans text-[10px]">Ctrl</kbd
 			>
-			+ scroll to zoom
+			{m.meteograms_zoom_hint_end()}
 		</span>
 		{#if zoomActive}
 			<button
@@ -336,13 +337,13 @@
 					<path stroke-linecap="round" stroke-linejoin="round" d="M4 4v6h6M20 20v-6h-6" />
 					<path stroke-linecap="round" d="M20 10a8 8 0 0 0-14-4M4 14a8 8 0 0 0 14 4" />
 				</svg>
-				Reset zoom
+				{m.reset_zoom()}
 			</button>
 		{/if}
 		<div
 			class="inline-flex items-center rounded-lg bg-muted p-0.5 text-xs font-semibold"
 			role="group"
-			aria-label="Chart time range"
+			aria-label={m.range_group_aria()}
 		>
 			{#each rangePresets as preset (preset.label)}
 				<button
@@ -426,7 +427,9 @@
 		{#snippet controls()}
 			<div class="flex items-center gap-2">
 				<Switch id="show_legend" name="Show legend" bind:checked={showLegend} />
-				<Label for="show_legend" class="cursor-pointer text-base leading-none">Show legend</Label>
+				<Label for="show_legend" class="cursor-pointer text-base leading-none"
+					>{m.legend_show()}</Label
+				>
 			</div>
 		{/snippet}
 	</ChartToolbar>
@@ -436,7 +439,9 @@
 
 <div class="mt-4 md:mt-8">
 	<div class="flex">
-		<a href="#models"><h2 id="models" class="text-2xl md:text-3xl">Models</h2></a>
+		<a href="#models"
+			><h2 id="models" class="text-2xl md:text-3xl">{m.compare_models_heading()}</h2></a
+		>
 		{#if params.models && params.models.length > 0}
 			<div transition:fade={{ duration: 200 }} class="relative mt-1.25">
 				<div
@@ -487,7 +492,7 @@
 		<div class="flex">
 			<a href="#hourly_weather_variables"
 				><h2 id="hourly_weather_variables" class="text-2xl md:text-3xl">
-					Hourly Weather Variables
+					{m.compare_variables_heading()}
 				</h2></a
 			>
 			{#if params.hourly && params.hourly.length > 0}