beeeeg update

2026-09-23 04:15:10 +00:00
parent 487eff5bb2
commit d0c7b6548b
135 changed files with 9531 additions and 1777 deletions
--- a/src/routes/projects/animaldex/+layout.svelte
+++ b/src/routes/projects/animaldex/+layout.svelte
@@ -1,15 +1,5 @@
 <script lang="ts">
-	import './layout.css';
-
 	let { children } = $props();
 </script>

-<svelte:head>
-	<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
-	<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-	<link rel="shortcut icon" href="/favicon.ico" />
-	<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
-	<meta name="apple-mobile-web-app-title" content="Animaldex" />
-	<link rel="manifest" href="/site.webmanifest" />
-</svelte:head>
 {@render children()}
--- a/src/routes/projects/animaldex/+page.svelte
+++ b/src/routes/projects/animaldex/+page.svelte
@@ -1,10 +1,11 @@
 <script lang="ts">
-	import { onMount, onDestroy } from 'svelte';
+	import { onMount, onDestroy, tick } from 'svelte';
 	import { resolve } from '$app/paths';
+	import { page } from '$app/state';
 	import type { Map as MaptilerMap, Marker as MaptilerMarker } from '@maptiler/sdk';

 	interface TrailPoint {
-		id: string;
+		id: number;
 		lat: number;
 		lng: number;
 		seenAt: string;
@@ -13,7 +14,7 @@
 	}

 	interface AnimalFeatureProps {
-		animalId: string;
+		animalId: number;
 		species: string;
 		breed: string | null;
 		animalName: string | null;
@@ -28,9 +29,17 @@
 	}

 	let mapContainer: HTMLDivElement;
+	let detailsSection = $state<HTMLDivElement | null>(null);
 	let map: MaptilerMap | null = null;
+	let destroyed = false;
 	let htmlMarkers: MaptilerMarker[] = [];
 	let MapMarker: typeof MaptilerMarker | null = null;
+	let mapError = $state('');
+	let animalCount = $state<number | null>(null);
+	let visibleAnimals = $state<GeoJSONFeature[]>([]);
+	let locating = $state(false);
+	let request: AbortController | null = null;
+	const submitted = $derived(page.url.searchParams.has('submitted'));

 	let filterSpecies = $state('');
 	let filterBreed = $state('');
@@ -41,7 +50,7 @@
 	let showFilters = $state(false);

 	let selected = $state<{
-		animalId: string;
+		animalId: number;
 		species: string;
 		breed: string | null;
 		animalName: string | null;
@@ -53,54 +62,85 @@
 		return typeof raw === 'string' ? JSON.parse(raw) : raw;
 	}

-	onMount(async () => {
-		const { Map, Marker, config } = await import('@maptiler/sdk');
-		const { env } = await import('$env/dynamic/public');
+	async function selectAnimal(feature: GeoJSONFeature) {
+		selected = { ...feature.properties, trail: parseTrail(feature.properties.trail) };
+		await tick();
+		detailsSection?.scrollIntoView({ block: 'nearest' });
+	}

-		config.apiKey = env.PUBLIC_MAPTILER_API_KEY;
-		MapMarker = Marker;
+	onMount(() => {
+		(async () => {
+			try {
+				const { Map, Marker, config } = await import('@maptiler/sdk');
+				const { env } = await import('$env/dynamic/public');
+				if (destroyed) return;
+				if (!env.PUBLIC_MAPTILER_API_KEY) {
+					mapError = 'The map is not configured yet.';
+					return;
+				}

-		const initMap = (center: [number, number], zoom: number) => {
-			map = new Map({
-				container: mapContainer,
-				style:
-					'https://api.maptiler.com/maps/satellite/style.json?key=' + env.PUBLIC_MAPTILER_API_KEY,
-				center,
-				zoom
-			});
+				config.apiKey = env.PUBLIC_MAPTILER_API_KEY;
+				MapMarker = Marker;

-			map.on('load', () => {
-				map!.addSource('trails', {
-					type: 'geojson',
-					data: { type: 'FeatureCollection', features: [] }
-				});
-				map!.addLayer({
-					id: 'trails',
-					type: 'line',
-					source: 'trails',
-					paint: {
-						'line-color': '#f97316',
-						'line-width': 2,
-						'line-dasharray': [2, 2],
-						'line-opacity': 0.7
-					}
-				});
-				loadMarkers(Marker);
-			});
+				const initMap = (center: [number, number], zoom: number) => {
+					map = new Map({
+						container: mapContainer,
+						style:
+							'https://api.maptiler.com/maps/satellite/style.json?key=' +
+							env.PUBLIC_MAPTILER_API_KEY,
+						center,
+						zoom,
+						scrollZoom: false,
+						cooperativeGestures: true
+					});

-			map.on('moveend', () => {
-				if (MapMarker) loadMarkers(MapMarker);
-			});
-		};
+					map.on('load', () => {
+						map!.addSource('trails', {
+							type: 'geojson',
+							data: { type: 'FeatureCollection', features: [] }
+						});
+						map!.addLayer({
+							id: 'trails',
+							type: 'line',
+							source: 'trails',
+							paint: {
+								'line-color': '#ffffff',
+								'line-width': 2,
+								'line-dasharray': [2, 2],
+								'line-opacity': 0.7
+							}
+						});
+						loadMarkers(Marker);
+					});

-		navigator.geolocation.getCurrentPosition(
-			(pos) => initMap([pos.coords.longitude, pos.coords.latitude], 13),
-			() => initMap([4.708, 52.009], 15.5),
-			{ enableHighAccuracy: true, timeout: 5000 }
-		);
+					map.on('moveend', () => {
+						if (MapMarker) loadMarkers(MapMarker);
+					});
+				};
+
+				const fallback = () => {
+					if (!destroyed) initMap([4.708, 52.009], 15.5);
+				};
+				if (!navigator.geolocation) {
+					fallback();
+					return;
+				}
+				navigator.geolocation.getCurrentPosition(
+					(position) => {
+						if (!destroyed) initMap([position.coords.longitude, position.coords.latitude], 14);
+					},
+					fallback,
+					{ enableHighAccuracy: true, timeout: 10000 }
+				);
+			} catch {
+				mapError = 'The map could not load. Please try again later.';
+			}
+		})();
 	});

 	onDestroy(() => {
+		destroyed = true;
+		request?.abort();
 		htmlMarkers.forEach((m) => m.remove());
 		map?.remove();
 	});
@@ -120,11 +160,25 @@
 		if (filterName) params.set('name', filterName);
 		if (filterReporter) params.set('reporter', filterReporter);
 		if (filterFrom) params.set('fromDate', new Date(filterFrom).toISOString());
-		if (filterTo) params.set('toDate', new Date(filterTo).toISOString());
+		if (filterTo) params.set('toDate', new Date(`${filterTo}T23:59:59`).toISOString());

-		const res = await fetch(`/projects/animaldex/api/map?${params}`);
-		if (!res.ok) return;
-		const geojson: { features: GeoJSONFeature[] } = await res.json();
+		request?.abort();
+		request = new AbortController();
+		let geojson: { features: GeoJSONFeature[] };
+		try {
+			const res = await fetch(`${resolve('/projects/animaldex/api/map')}?${params}`, {
+				signal: request.signal
+			});
+			if (!res.ok) throw new Error('Map request failed');
+			geojson = await res.json();
+			mapError = '';
+			animalCount = geojson.features.length;
+			visibleAnimals = geojson.features;
+		} catch (cause) {
+			if (cause instanceof DOMException && cause.name === 'AbortError') return;
+			mapError = 'Could not load animals in this area. Try moving the map again.';
+			return;
+		}

 		htmlMarkers.forEach((m) => m.remove());
 		htmlMarkers = [];
@@ -152,34 +206,27 @@
 		for (const feature of geojson.features) {
 			const props = feature.properties;
 			const trail = parseTrail(props.trail);
-			const photoUrl = trail[0]?.photoUrl ?? null;
+			const photoUrl = [...trail].reverse().find((point) => point.photoUrl)?.photoUrl ?? null;

-			const el = document.createElement('div');
+			const el = document.createElement('button');
+			el.type = 'button';
+			el.setAttribute('aria-label', `View ${props.animalName || props.species}`);
 			el.style.cssText = `
 				width: 44px; height: 44px; border-radius: 50%;
-				border: 3px solid white;
+				border: 2px solid white;
 				box-shadow: 0 2px 8px rgba(0,0,0,0.4);
 				cursor: pointer; overflow: hidden;
-				background: #f97316;
+				background: #171717; color: white;
 			`;
 			if (photoUrl) {
 				el.style.backgroundImage = `url(${photoUrl})`;
 				el.style.backgroundSize = 'cover';
 				el.style.backgroundPosition = 'center';
 			} else {
-				el.innerHTML = `<div style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:18px">🐾</div>`;
+				el.textContent = '🐾';
 			}

-			el.onclick = () => {
-				selected = {
-					animalId: props.animalId,
-					species: props.species,
-					breed: props.breed,
-					animalName: props.animalName,
-					sightingCount: props.sightingCount,
-					trail
-				};
-			};
+			el.onclick = () => selectAnimal(feature);

 			const marker = new Marker({ element: el })
 				.setLngLat(feature.geometry.coordinates)
@@ -190,6 +237,7 @@

 	function applyFilters() {
 		showFilters = false;
+		selected = null;
 		if (MapMarker) loadMarkers(MapMarker);
 	}
 	function clearFilters() {
@@ -199,9 +247,29 @@
 		filterReporter = '';
 		filterFrom = '';
 		filterTo = '';
+		selected = null;
 		if (MapMarker) loadMarkers(MapMarker);
 	}

+	function locate() {
+		if (!navigator.geolocation || !map) {
+			mapError = 'Location is unavailable in this browser.';
+			return;
+		}
+		locating = true;
+		navigator.geolocation.getCurrentPosition(
+			(position) => {
+				locating = false;
+				map?.flyTo({ center: [position.coords.longitude, position.coords.latitude], zoom: 14 });
+			},
+			() => {
+				locating = false;
+				mapError = 'Location access was denied. You can still browse the map.';
+			},
+			{ enableHighAccuracy: true, timeout: 10000 }
+		);
+	}
+
 	const activeFilterCount = $derived(
 		[filterSpecies, filterBreed, filterName, filterReporter, filterFrom, filterTo].filter(Boolean)
 			.length
@@ -209,149 +277,223 @@
 </script>

 <svelte:head>
-	<title>Animaldex</title>
 	<link rel="stylesheet" href="https://cdn.maptiler.com/maptiler-sdk-js/latest/maptiler-sdk.css" />
 </svelte:head>

-<div class="relative h-screen w-full overflow-hidden">
-	<div bind:this={mapContainer} class="h-full w-full"></div>
-
-	<div class="absolute top-4 left-1/2 z-10 flex -translate-x-1/2 gap-2">
+<section class="mx-auto max-w-6xl px-4 py-10 sm:px-6 sm:py-14">
+	<div class="mb-7 flex flex-wrap items-end justify-between gap-4">
+		<div>
+			<h1 class="text-4xl font-semibold tracking-tight sm:text-5xl">animaldex</h1>
+			<p class="mt-2 text-base text-[var(--site-muted)]">neighborhood animals on the map</p>
+		</div>
 		<a
 			href={resolve('/projects/animaldex/register')}
-			class="flex items-center gap-2 rounded-full bg-orange-500 px-4 py-2 text-sm font-semibold text-white shadow-lg hover:bg-orange-600"
+			class="rounded bg-[var(--site-text)] px-4 py-2.5 text-base font-medium text-[var(--site-bg)]"
 		>
-			+ Log a sighting
+			add an animal
 		</a>
-		<button
-			onclick={() => (showFilters = !showFilters)}
-			class="relative rounded-full bg-white px-4 py-2 text-sm font-semibold text-gray-700 shadow-lg hover:bg-gray-50"
+	</div>
+	{#if submitted}<p role="status" class="mb-5 border-y border-[var(--site-border)] py-3">
+			sighting submitted. it will appear after review.
+		</p>{/if}
+	<div class="mb-4 flex flex-wrap items-center justify-between gap-3">
+		<span class="text-base text-[var(--site-muted)]"
+			>{animalCount === null
+				? mapError
+					? 'map unavailable'
+					: 'loading animals…'
+				: `${animalCount} ${animalCount === 1 ? 'animal' : 'animals'} in this area`}</span
 		>
-			Filters
-			{#if activeFilterCount > 0}
-				<span
-					class="absolute -top-1 -right-1 flex h-4 w-4 items-center justify-center rounded-full bg-orange-500 text-[10px] text-white"
-					>{activeFilterCount}</span
-				>
-			{/if}
-		</button>
+		<div class="flex items-center gap-5">
+			<button
+				type="button"
+				onclick={locate}
+				disabled={locating}
+				class="underline underline-offset-4">{locating ? 'locating…' : 'my location'}</button
+			>
+			<button
+				type="button"
+				onclick={() => (showFilters = !showFilters)}
+				aria-expanded={showFilters}
+				class="underline underline-offset-4"
+			>
+				filters{activeFilterCount ? ` (${activeFilterCount})` : ''}
+			</button>
+		</div>
 	</div>

 	{#if showFilters}
-		<div
-			class="absolute top-16 left-1/2 z-20 w-80 -translate-x-1/2 rounded-2xl bg-white p-4 shadow-xl"
-		>
-			<div class="mb-3 flex items-center justify-between">
-				<h2 class="font-semibold text-gray-800">Filter sightings</h2>
-				<button onclick={() => (showFilters = false)} class="text-gray-400 hover:text-gray-600"
-					>✕</button
-				>
-			</div>
-			<div class="space-y-2">
+		<div class="mb-5 border-y border-[var(--site-border)] py-5">
+			<h2 class="mb-3 text-lg font-medium">filter sightings</h2>
+			<div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
 				<input
 					bind:value={filterSpecies}
 					placeholder="Species"
-					class="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm outline-none focus:border-orange-400"
+					aria-label="Species"
+					class="w-full rounded border border-[var(--site-border)] bg-[var(--site-bg)] px-3 py-2 text-base"
 				/>
 				<input
 					bind:value={filterBreed}
 					placeholder="Breed"
-					class="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm outline-none focus:border-orange-400"
+					aria-label="Breed"
+					class="w-full rounded border border-[var(--site-border)] bg-[var(--site-bg)] px-3 py-2 text-base"
 				/>
 				<input
 					bind:value={filterName}
 					placeholder="Animal name"
-					class="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm outline-none focus:border-orange-400"
+					aria-label="Animal name"
+					class="w-full rounded border border-[var(--site-border)] bg-[var(--site-bg)] px-3 py-2 text-base"
 				/>
 				<input
 					bind:value={filterReporter}
 					placeholder="Reporter name"
-					class="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm outline-none focus:border-orange-400"
+					aria-label="Reporter name"
+					class="w-full rounded border border-[var(--site-border)] bg-[var(--site-bg)] px-3 py-2 text-base"
 				/>
-				<div class="grid grid-cols-2 gap-2">
+				<div class="grid grid-cols-2 gap-3 sm:col-span-2">
 					<div>
-						<label for="filter-from" class="mb-1 block text-xs text-gray-500">From</label>
+						<label for="filter-from" class="mb-1 block text-base">from</label>
 						<input
 							id="filter-from"
 							type="date"
 							bind:value={filterFrom}
-							class="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm outline-none focus:border-orange-400"
+							class="w-full rounded border border-[var(--site-border)] bg-[var(--site-bg)] px-3 py-2 text-base"
 						/>
 					</div>
 					<div>
-						<label for="filter-to" class="mb-1 block text-xs text-gray-500">To</label>
+						<label for="filter-to" class="mb-1 block text-base">to</label>
 						<input
 							id="filter-to"
 							type="date"
 							bind:value={filterTo}
-							class="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm outline-none focus:border-orange-400"
+							class="w-full rounded border border-[var(--site-border)] bg-[var(--site-bg)] px-3 py-2 text-base"
 						/>
 					</div>
 				</div>
 			</div>
-			<div class="mt-3 flex gap-2">
+			<div class="mt-4 flex gap-4">
 				<button
 					onclick={applyFilters}
-					class="flex-1 rounded-lg bg-orange-500 py-2 text-sm font-semibold text-white hover:bg-orange-600"
-					>Apply</button
-				>
-				<button
-					onclick={clearFilters}
-					class="rounded-lg border border-gray-200 px-4 py-2 text-sm text-gray-600 hover:bg-gray-50"
-					>Clear</button
+					class="rounded bg-[var(--site-text)] px-4 py-2 text-base text-[var(--site-bg)]"
+					>apply</button
 				>
+				<button onclick={clearFilters} class="text-base underline underline-offset-4">clear</button>
 			</div>
 		</div>
 	{/if}
+	<div
+		bind:this={mapContainer}
+		role="region"
+		aria-label="Animaldex map"
+		class="h-[min(56vh,560px)] min-h-80 w-full overflow-hidden rounded border border-[var(--site-border)] bg-[var(--site-surface)] sm:h-[min(65vh,640px)]"
+	></div>
+	{#if mapError}<p role="alert" class="mt-3 text-base">{mapError}</p>{/if}
+	{#if animalCount === 0}<p class="mt-4 text-base text-[var(--site-muted)]">
+			no animals here yet. try another area.
+		</p>{/if}

 	{#if selected}
-		<div class="absolute right-4 bottom-8 z-10 w-80 overflow-hidden rounded-2xl bg-white shadow-xl">
-			{#if selected.trail[0]?.photoUrl}
-				<div class="relative h-40 bg-gray-100">
-					<img src={selected.trail[0].photoUrl} alt="" class="h-full w-full object-cover" />
+		<div
+			bind:this={detailsSection}
+			class="mt-8 max-w-2xl border-t border-[var(--site-border)] pt-6"
+		>
+			{#if [...selected.trail].reverse().find((point) => point.photoUrl)?.photoUrl}
+				<div
+					class="relative mb-5 aspect-video max-h-80 overflow-hidden rounded bg-[var(--site-surface)]"
+				>
+					<img
+						src={[...selected.trail].reverse().find((point) => point.photoUrl)?.photoUrl}
+						alt={selected.animalName || selected.species}
+						class="h-full w-full object-cover"
+					/>
 					<button
 						onclick={() => (selected = null)}
-						class="absolute top-2 right-2 flex h-7 w-7 items-center justify-center rounded-full bg-black/50 text-white"
-						>✕</button
+						aria-label="Close animal details"
+						class="absolute top-3 right-3 rounded bg-black px-3 py-1 text-white">✕</button
 					>
 				</div>
 			{/if}
-			<div class="p-4">
-				<div class="mb-1 flex items-start justify-between">
+			<div>
+				<div class="mb-1 flex items-start justify-between gap-4">
 					<div>
-						<p class="text-lg font-semibold text-gray-900">
+						<h2 class="text-2xl font-semibold">
 							{selected.animalName ?? selected.species}
-						</p>
-						<p class="text-sm text-gray-500">
+						</h2>
+						<p class="mt-1 text-base text-[var(--site-muted)]">
 							{selected.species}{selected.breed ? ` · ${selected.breed}` : ''}
 						</p>
 					</div>
-					<span class="rounded-full bg-orange-100 px-2 py-0.5 text-xs font-medium text-orange-700"
+					<span class="text-base text-[var(--site-muted)]"
 						>{selected.sightingCount}
 						{selected.sightingCount === 1 ? 'sighting' : 'sightings'}</span
 					>
 				</div>
-				<div class="mt-3 max-h-36 space-y-1.5 overflow-y-auto">
+				<button
+					type="button"
+					onclick={() => (selected = null)}
+					class="text-base underline underline-offset-4">close details</button
+				>
+				<div class="mt-5 divide-y divide-[var(--site-border)] border-t border-[var(--site-border)]">
 					{#each [...selected.trail].sort((a, b) => new Date(b.seenAt).getTime() - new Date(a.seenAt).getTime()) as s (s.id)}
-						<div class="flex items-center justify-between rounded-lg bg-gray-50 px-3 py-2 text-xs">
-							<span class="text-gray-600"
+						<div class="flex flex-wrap items-center justify-between gap-2 py-3 text-base">
+							<span
 								>{new Date(s.seenAt).toLocaleDateString('nl-NL', {
 									day: 'numeric',
 									month: 'short',
 									year: 'numeric'
 								})}</span
 							>
-							{#if s.reporterName}<span class="text-gray-400">by {s.reporterName}</span>{/if}
+							{#if s.reporterName}<span class="text-[var(--site-muted)]">by {s.reporterName}</span
+								>{/if}
 						</div>
 					{/each}
 				</div>
 				<a
 					href={resolve(`/projects/animaldex/register?animalId=${selected.animalId}`)}
-					class="mt-3 block w-full rounded-lg bg-orange-500 py-2 text-center text-sm font-semibold text-white hover:bg-orange-600"
+					class="mt-5 inline-block text-base underline underline-offset-4"
 				>
-					I saw this animal too!
+					i saw this animal too ↗
 				</a>
 			</div>
 		</div>
 	{/if}
-</div>
+	{#if visibleAnimals.length}
+		<div class="mt-10">
+			<h2 class="mb-3 text-xl font-semibold">animals in this area</h2>
+			<ul class="grid gap-x-8 sm:grid-cols-2">
+				{#each visibleAnimals.slice(0, 24) as feature (feature.properties.animalId)}
+					{@const animal = feature.properties}
+					{@const photo = [...parseTrail(animal.trail)]
+						.reverse()
+						.find((point) => point.photoUrl)?.photoUrl}
+					<li class="border-t border-[var(--site-border)]">
+						<button
+							type="button"
+							onclick={() => selectAnimal(feature)}
+							class="flex w-full items-center gap-3 py-3 text-left hover:text-[var(--site-muted)]"
+						>
+							{#if photo}<img
+									src={photo}
+									alt=""
+									class="h-12 w-12 rounded object-cover"
+								/>{:else}<span
+									class="flex h-12 w-12 items-center justify-center rounded bg-[var(--site-surface)]"
+									>🐾</span
+								>{/if}
+							<span class="min-w-0">
+								<span class="block font-medium">{animal.animalName || animal.species}</span>
+								<span class="block text-base text-[var(--site-muted)]"
+									>{animal.species} · {animal.sightingCount}
+									{animal.sightingCount === 1 ? 'sighting' : 'sightings'}</span
+								>
+							</span>
+						</button>
+					</li>
+				{/each}
+			</ul>
+			{#if visibleAnimals.length > 24}<p class="mt-3 text-base text-[var(--site-muted)]">
+					showing 24 animals. zoom in to see the others.
+				</p>{/if}
+		</div>
+	{/if}
+</section>
--- a/src/routes/projects/animaldex/+page.ts
+++ b/src/routes/projects/animaldex/+page.ts
@@ -1 +0,0 @@
-export const ssr = false;
--- a/src/routes/projects/animaldex/admin/+page.svelte
+++ b/src/routes/projects/animaldex/admin/+page.svelte
@@ -5,97 +5,63 @@

 	let { data }: { data: PageData } = $props();

-	let password = $state('');
-	let loginError = $state('');
-	let loginLoading = $state(false);
-
-	async function login() {
-		loginLoading = true;
-		loginError = '';
-		const res = await fetch('/admin/login', {
-			method: 'POST',
-			headers: { 'Content-Type': 'application/json' },
-			body: JSON.stringify({ password })
-		});
-		if (res.ok) {
-			await invalidateAll();
-		} else {
-			loginError = 'Wrong password';
-		}
-		loginLoading = false;
-	}
-
 	let actionLoading = $state<string | null>(null);
+	let actionError = $state('');

-	async function moderate(type: 'animals' | 'sightings', id: string, action: 'accept' | 'deny') {
-		actionLoading = `${type}-${id}-${action}`;
-		await fetch(`/api/${type}/${id}/moderate`, {
-			method: 'POST',
-			headers: { 'Content-Type': 'application/json' },
-			body: JSON.stringify({ action })
-		});
-		actionLoading = null;
-		await invalidateAll();
+	async function moderate(id: number, action: 'accept' | 'deny') {
+		actionLoading = `animals-${id}-${action}`;
+		actionError = '';
+		try {
+			const response = await fetch(resolve(`/projects/animaldex/api/animals/${id}/moderate`), {
+				method: 'POST',
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify({ action })
+			});
+			if (!response.ok) throw new Error();
+			await invalidateAll();
+		} catch {
+			actionError = 'Could not update this animal. Please try again.';
+		} finally {
+			actionLoading = null;
+		}
 	}

 	const queue = $derived(data.queue ?? []);
 </script>

-<svelte:head><title>Animaldex - Admin</title></svelte:head>
-
 {#if !data.admin}
-	<div class="flex min-h-screen items-center justify-center bg-gray-50">
-		<div class="w-80 rounded-2xl bg-white p-8 shadow-xl">
-			<h1 class="mb-6 text-xl font-semibold text-gray-900">Admin login</h1>
-			<input
-				type="password"
-				bind:value={password}
-				placeholder="Password"
-				onkeydown={(e) => e.key === 'Enter' && login()}
-				class="mb-3 w-full rounded-lg border border-gray-200 px-3 py-2 text-sm outline-none focus:border-orange-400"
-			/>
-			{#if loginError}
-				<p class="mb-3 text-xs text-red-500">{loginError}</p>
-			{/if}
-			<button
-				onclick={login}
-				disabled={loginLoading}
-				class="w-full rounded-lg bg-orange-500 py-2 text-sm font-semibold text-white hover:bg-orange-600 disabled:opacity-50"
+	<div class="mx-auto max-w-md p-8 text-center">
+		<h1 class="text-xl font-bold">Administrator access required</h1>
+		{#if !data.user}<a
+				class="mt-4 inline-block underline"
+				href={resolve('/login?returnTo=/projects/animaldex/admin')}>Log in with your account</a
 			>
-				{loginLoading ? 'Logging in…' : 'Log in'}
-			</button>
-		</div>
+		{:else}<p class="mt-4">Your account does not have administrator access.</p>{/if}
 	</div>
 {:else}
-	<div class="min-h-screen bg-gray-50">
-		<div
-			class="sticky top-0 z-10 flex items-center justify-between border-b border-gray-100 bg-white px-6 py-3"
+	<section class="mx-auto max-w-4xl px-4 py-10 sm:px-6 sm:py-14">
+		<a href={resolve('/projects/animaldex')} class="text-base text-[var(--site-muted)]"
+			>← animaldex</a
 		>
-			<div class="flex items-center gap-3">
-				<a href={resolve('/')} class="text-gray-400 hover:text-gray-600">←</a>
-				<h1 class="font-semibold text-gray-900">Animaldex admin</h1>
-			</div>
-			<span class="rounded-full bg-orange-100 px-2 py-0.5 text-xs font-medium text-orange-700">
+		<div class="mt-5 mb-8 flex flex-wrap items-end justify-between gap-4">
+			<h1 class="text-4xl font-semibold tracking-tight">animaldex admin</h1>
+			<span class="text-base text-[var(--site-muted)]">
 				{queue.filter((r) => !r.acceptedAt && !r.deniedAt).length} pending
 			</span>
 		</div>
-
-		<div class="mx-auto max-w-3xl space-y-4 px-4 py-6">
+		{#if actionError}<p role="alert" class="mb-5 text-base">{actionError}</p>{/if}
+		<div class="space-y-4">
 			{#if queue.length === 0}
-				<div class="rounded-2xl bg-white p-8 text-center text-gray-400 shadow-sm">
-					No submissions yet
-				</div>
+				<p class="border-t border-[var(--site-border)] py-5 text-[var(--site-muted)]">
+					no submissions yet
+				</p>
 			{/if}

 			{#each queue as item (item.animalId)}
 				{@const status = item.acceptedAt ? 'accepted' : item.deniedAt ? 'denied' : 'pending'}
-				<div
-					class="overflow-hidden rounded-2xl bg-white shadow-sm {status === 'denied'
-						? 'opacity-60'
-						: ''}"
-				>
+				<div class="border-t border-[var(--site-border)] pt-4">
 					<div class="flex gap-4 p-4">
-						<div class="h-24 w-24 shrink-0 overflow-hidden rounded-xl bg-gray-100">
+						<div class="h-24 w-24 shrink-0 overflow-hidden rounded bg-[var(--site-surface)]">
 							{#if item.photoUrl}
 								<img src={item.photoUrl} alt="" class="h-full w-full object-cover" />
 							{:else}
@@ -105,30 +71,23 @@
 						<div class="min-w-0 flex-1">
 							<div class="flex items-start justify-between gap-2">
 								<div>
-									<p class="font-semibold text-gray-900">{item.animalName ?? item.species}</p>
-									<p class="text-sm text-gray-500">
+									<p class="font-semibold">{item.animalName ?? item.species}</p>
+									<p class="text-base text-[var(--site-muted)]">
 										{item.species}{item.breed ? ` · ${item.breed}` : ''}
 									</p>
 								</div>
-								<span
-									class="shrink-0 rounded-full px-2 py-0.5 text-xs font-medium
-									{status === 'accepted'
-										? 'bg-green-100 text-green-700'
-										: status === 'denied'
-											? 'bg-red-100 text-red-700'
-											: 'bg-yellow-100 text-yellow-700'}"
-								>
+								<span class="shrink-0 text-base text-[var(--site-muted)]">
 									{status}
 								</span>
 							</div>
 							{#if item.aiBreedSuggestion}
-								<p class="mt-1 text-xs text-gray-400">
+								<p class="mt-1 text-base text-[var(--site-muted)]">
 									🤖 AI: {item.aiBreedSuggestion} ({Math.round(
 										(item.aiBreedConfidence ?? 0) * 100
 									)}%)
 								</p>
 							{/if}
-							<p class="mt-1 text-xs text-gray-400">
+							<p class="mt-1 text-base text-[var(--site-muted)]">
 								{new Date(item.submittedAt).toLocaleDateString('nl-NL', {
 									day: 'numeric',
 									month: 'short',
@@ -138,27 +97,23 @@
 								})}
 								{#if item.reporterName}· by {item.reporterName}{/if}
 							</p>
-							<p class="mt-0.5 text-xs text-gray-400">
+							<p class="mt-0.5 text-base text-[var(--site-muted)]">
 								📍 {item.sightingLat.toFixed(5)}, {item.sightingLng.toFixed(5)}
 							</p>
 						</div>
 					</div>
-					<div class="flex gap-2 border-t border-gray-100 px-4 py-3">
+					<div class="flex gap-3 border-t border-[var(--site-border)] px-4 py-3">
 						<button
-							onclick={() => moderate('animals', item.animalId, 'accept')}
+							onclick={() => moderate(item.animalId, 'accept')}
 							disabled={actionLoading !== null || status === 'accepted'}
-							class="flex-1 rounded-lg py-1.5 text-sm font-medium {status === 'accepted'
-								? 'cursor-default bg-green-100 text-green-700'
-								: 'bg-gray-100 text-gray-700 hover:bg-green-100 hover:text-green-700'}"
+							class="flex-1 rounded border border-[var(--site-border)] py-2 text-base disabled:opacity-50"
 						>
 							{actionLoading === `animals-${item.animalId}-accept` ? '…' : '✓ Accept'}
 						</button>
 						<button
-							onclick={() => moderate('animals', item.animalId, 'deny')}
+							onclick={() => moderate(item.animalId, 'deny')}
 							disabled={actionLoading !== null || status === 'denied'}
-							class="flex-1 rounded-lg py-1.5 text-sm font-medium {status === 'denied'
-								? 'cursor-default bg-red-100 text-red-700'
-								: 'bg-gray-100 text-gray-700 hover:bg-red-100 hover:text-red-700'}"
+							class="flex-1 rounded border border-[var(--site-border)] py-2 text-base disabled:opacity-50"
 						>
 							{actionLoading === `animals-${item.animalId}-deny` ? '…' : '✕ Deny'}
 						</button>
@@ -166,5 +121,5 @@
 				</div>
 			{/each}
 		</div>
-	</div>
+	</section>
 {/if}
--- a/src/routes/projects/animaldex/admin/login/+server.ts
+++ b/src/routes/projects/animaldex/admin/login/+server.ts
@@ -1,25 +1,3 @@
-import { json, error } from '@sveltejs/kit';
-import type { RequestHandler } from './$types';
-import { env } from '$env/dynamic/private';
-import { z } from 'zod';
-
-const loginSchema = z.object({ password: z.string().min(1) });
-
-export const POST: RequestHandler = async ({ request, cookies }) => {
-	const body = await request.json().catch(() => null);
-	const parsed = loginSchema.safeParse(body);
-
-	if (!parsed.success || parsed.data.password !== env.ADMIN_SECRET) {
-		throw error(401, { message: 'Invalid password' });
-	}
-
-	cookies.set('admin_token', env.ADMIN_SECRET, {
-		path: '/',
-		httpOnly: true,
-		sameSite: 'strict',
-		secure: process.env.NODE_ENV === 'production',
-		maxAge: 60 * 60 * 24 * 7
-	});
-
-	return json({ ok: true });
-};
+import { error, redirect } from '@sveltejs/kit';
+export const GET = () => redirect(303, '/login');
+export const POST = () => error(410, 'Use the central account login at /login');
--- a/src/routes/projects/animaldex/api/animals/+server.ts
+++ b/src/routes/projects/animaldex/api/animals/+server.ts
@@ -3,8 +3,8 @@ import type { RequestHandler } from './$types';
 import { db } from '$lib/server/db';
 import { animals, sightings, photos } from '$lib/server/db/schema';
 import { registerAnimalSchema } from '$lib/validation/sighting';
-import { sql } from 'drizzle-orm';
 import { env } from '$env/dynamic/private';
+import { distanceMeters } from '$lib/geo';

 const MAX_DISTANCE_METERS = 30_000;

@@ -18,14 +18,7 @@ export const POST: RequestHandler = async ({ request }) => {

 	const data = parsed.data;

-	const [distRow] = await db.execute(sql`
-		SELECT ST_Distance(
-			ST_MakePoint(${data.deviceLng}, ${data.deviceLat})::geography,
-			ST_MakePoint(${data.lng}, ${data.lat})::geography
-		) AS dist
-	`);
-
-	const dist = Number((distRow as Record<string, unknown>).dist);
+	const dist = distanceMeters(data.deviceLat, data.deviceLng, data.lat, data.lng);
 	if (dist > MAX_DISTANCE_METERS) {
 		throw error(422, {
 			message: `Location is ${Math.round(dist / 1000)}km from your device. Maximum is 30km.`
--- a/src/routes/projects/animaldex/api/animals/[id]/moderate/+server.ts
+++ b/src/routes/projects/animaldex/api/animals/[id]/moderate/+server.ts
@@ -9,6 +9,9 @@ import { requireAdmin } from '$lib/server/auth';
 export const POST: RequestHandler = async (event) => {
 	requireAdmin(event);

+	const id = Number(event.params.id);
+	if (!Number.isInteger(id) || id <= 0) throw error(404, { message: 'Not found' });
+
 	const body = await event.request.json().catch(() => null);
 	const parsed = moderationActionSchema.safeParse(body);

@@ -26,14 +29,14 @@ export const POST: RequestHandler = async (event) => {
 				acceptedAt: isAccept ? now : null,
 				deniedAt: isAccept ? null : now
 			})
-			.where(eq(animals.id, event.params.id))
+			.where(eq(animals.id, id))
 			.returning({ id: animals.id });

 		if (result.length && isAccept) {
 			await tx
 				.update(sightings)
 				.set({ acceptedAt: now, deniedAt: null })
-				.where(eq(sightings.animalId, event.params.id));
+				.where(eq(sightings.animalId, id));
 		}

 		return result;
--- a/src/routes/projects/animaldex/api/animals/[id]/sightings/+server.ts
+++ b/src/routes/projects/animaldex/api/animals/[id]/sightings/+server.ts
@@ -5,20 +5,9 @@ import { animals, sightings, photos } from '$lib/server/db/schema';
 import { addSightingSchema } from '$lib/validation/sighting';
 import { eq } from 'drizzle-orm';
 import { env } from '$env/dynamic/private';
+import { distanceMeters } from '$lib/geo';

 const MAX_DISTANCE_METERS = 30_000;
-const EARTH_RADIUS_METERS = 6_371_000;
-
-// Haversine distance between two lat/lng points, in meters.
-function distanceMeters(lat1: number, lng1: number, lat2: number, lng2: number): number {
-	const toRad = (deg: number) => (deg * Math.PI) / 180;
-	const dLat = toRad(lat2 - lat1);
-	const dLng = toRad(lng2 - lng1);
-	const a =
-		Math.sin(dLat / 2) ** 2 +
-		Math.cos(toRad(lat1)) * Math.cos(toRad(lat2)) * Math.sin(dLng / 2) ** 2;
-	return 2 * EARTH_RADIUS_METERS * Math.asin(Math.sqrt(a));
-}

 export const POST: RequestHandler = async ({ request, params }) => {
 	const body = await request.json().catch(() => null);
@@ -33,7 +22,7 @@ export const POST: RequestHandler = async ({ request, params }) => {
 	const [animal] = await db
 		.select({ id: animals.id, acceptedAt: animals.acceptedAt })
 		.from(animals)
-		.where(eq(animals.id, params.id))
+		.where(eq(animals.id, data.animalId))
 		.limit(1);

 	if (!animal) {
--- a/src/routes/projects/animaldex/api/animals/[id]/sightings/[id]/moderate/+server.ts
+++ b/src/routes/projects/animaldex/api/animals/[id]/sightings/[id]/moderate/+server.ts
@@ -9,6 +9,9 @@ import { requireAdmin } from '$lib/server/auth';
 export const POST: RequestHandler = async (event) => {
 	requireAdmin(event);

+	const id = Number(event.params.id);
+	if (!Number.isInteger(id) || id <= 0) throw error(404, { message: 'Not found' });
+
 	const body = await event.request.json().catch(() => null);
 	const parsed = moderationActionSchema.safeParse(body);

@@ -25,7 +28,7 @@ export const POST: RequestHandler = async (event) => {
 			acceptedAt: isAccept ? now : null,
 			deniedAt: isAccept ? null : now
 		})
-		.where(eq(sightings.id, event.params.id))
+		.where(eq(sightings.id, id))
 		.returning({ id: sightings.id });

 	if (!updated) {
--- a/src/routes/projects/animaldex/api/detect-breed/+server.ts
+++ b/src/routes/projects/animaldex/api/detect-breed/+server.ts
@@ -12,6 +12,6 @@ export const POST: RequestHandler = async ({ request }) => {
 		throw error(400, { message: 'imageUrl is required' });
 	}

-	// const result = await detectBreed(parsed.data.imageUrl);
-	return json(result ?? { breed: null, confidence: 0 });
+	// Breed detection is not configured for this site yet.
+	return json({ breed: null, confidence: 0 });
 };
--- a/src/routes/projects/animaldex/api/map/+server.ts
+++ b/src/routes/projects/animaldex/api/map/+server.ts
@@ -57,14 +57,14 @@ export const GET: RequestHandler = async ({ url }) => {
 		.orderBy(sightings.seenAt);

 	const animalMap = new Map<
-		string,
+		number,
 		{
-			animalId: string;
+			animalId: number;
 			species: string;
 			breed: string | null;
 			animalName: string | null;
 			sightings: Array<{
-				id: string;
+				id: number;
 				lat: number;
 				lng: number;
 				seenAt: Date;
@@ -118,10 +118,5 @@ export const GET: RequestHandler = async ({ url }) => {
 		};
 	});

-	console.log(
-		`[map] query returned ${rows.length} rows for bbox ${q.minLng},${q.minLat} → ${q.maxLng},${q.maxLat}`
-	);
-	console.log(`[map] built ${features.length} features`);
-
 	return json({ type: 'FeatureCollection', features });
 };
--- a/src/routes/projects/animaldex/api/upload/+server.ts
+++ b/src/routes/projects/animaldex/api/upload/+server.ts
@@ -1,22 +1,18 @@
 import { json, error } from '@sveltejs/kit';
 import type { RequestHandler } from './$types';
-import { createPresignedUpload, isAllowedMimeType } from '$lib/server/r2';
-import { presignedUploadSchema } from '$lib/validation/sighting';
+import { uploadImage, isAllowedMimeType } from '$lib/server/r2';

 export const POST: RequestHandler = async ({ request }) => {
-	const body = await request.json().catch(() => null);
-	const parsed = presignedUploadSchema.safeParse(body);
-
-	if (!parsed.success) {
-		throw error(400, { message: 'Invalid request body' });
+	const form = await request.formData().catch(() => null);
+	const photo = form?.get('photo');
+	if (!(photo instanceof File) || !isAllowedMimeType(photo.type))
+		throw error(400, 'Use a JPEG, PNG, WebP, or HEIC photo.');
+	if (!photo.size || photo.size > 5 * 1024 * 1024)
+		throw error(400, 'Photos must be 5 MB or smaller.');
+	try {
+		return json(await uploadImage(photo));
+	} catch (cause) {
+		console.error('Animaldex image upload failed', cause);
+		throw error(503, 'Image storage is unavailable.');
 	}
-
-	const { mimeType } = parsed.data;
-
-	if (!isAllowedMimeType(mimeType)) {
-		throw error(400, { message: 'Unsupported image type' });
-	}
-
-	const result = await createPresignedUpload(mimeType);
-	return json(result);
 };
--- a/src/routes/projects/animaldex/layout.css
+++ b/src/routes/projects/animaldex/layout.css
@@ -1 +0,0 @@
-@import 'tailwindcss';
--- a/src/routes/projects/animaldex/register/+page.svelte
+++ b/src/routes/projects/animaldex/register/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { resolve } from '$app/paths';
 	import type { Map as MaptilerMap, Marker as MaptilerMarker } from '@maptiler/sdk';
-	import { onMount } from 'svelte';
+	import { onDestroy, onMount } from 'svelte';
 	import { page } from '$app/stores';
 	import { goto } from '$app/navigation';

@@ -14,14 +14,16 @@
 	let animalName = $state('');
 	let description = $state('');
 	let reporterName = $state('');
-	let seenAt = $state(new Date().toISOString().slice(0, 16));
+	let seenAt = $state(localDateTime());

-	let aiSuggestion = $state<{ breed: string; confidence: number } | null>(null);
-	let aiLoading = $state(false);
-	let aiDismissed = $state(false);
+	function localDateTime() {
+		const now = new Date();
+		return new Date(now.getTime() - now.getTimezoneOffset() * 60_000).toISOString().slice(0, 16);
+	}

 	let photoFiles = $state<File[]>([]);
 	let photoPreviews = $state<string[]>([]);
+	let draggingPhotos = $state(false);

 	let lat = $state<number | null>(null);
 	let lng = $state<number | null>(null);
@@ -33,6 +35,8 @@
 	let mapContainer = $state<HTMLDivElement>(null!);
 	let map: MaptilerMap | null = null;
 	let marker: MaptilerMarker | null = null;
+	let mapError = $state('');
+	let destroyed = false;

 	let submitting = $state(false);
 	let submitError = $state('');
@@ -46,9 +50,26 @@
 	const COMMON_SPECIES = ['Dog', 'Cat', 'Fox', 'Bird', 'Rabbit', 'Deer', 'Squirrel', 'Hedgehog'];
 	const finalSpecies = $derived(species === '__custom__' ? customSpecies : species);

-	onMount(async () => {
+	onMount(() => {
 		reporterName = localStorage.getItem('reporterName') ?? '';
+		requestLocation();
+	});
+
+	onDestroy(() => {
+		destroyed = true;
+		photoPreviews.forEach((url) => URL.revokeObjectURL(url));
+		marker?.remove();
+		map?.remove();
+	});
+
+	function requestLocation() {
+		locationError = '';
 		locationLoading = true;
+		if (!navigator.geolocation) {
+			locationLoading = false;
+			locationError = 'Location is unavailable in this browser.';
+			return;
+		}
 		navigator.geolocation.getCurrentPosition(
 			(pos) => {
 				deviceLat = pos.coords.latitude;
@@ -59,77 +80,78 @@
 			},
 			() => {
 				locationLoading = false;
-				locationError = 'Location access denied. GPS is required to register a sighting.';
+				locationError = 'Allow location access to log a sighting near you.';
 			},
 			{ enableHighAccuracy: true, timeout: 10000 }
 		);
-	});
+	}

 	async function initMap() {
 		if (!mapContainer || lat === null || lng === null) return;
-		const { Map, Marker, config } = await import('@maptiler/sdk');
-		const { env } = await import('$env/dynamic/public');
-		config.apiKey = env.PUBLIC_MAPTILER_API_KEY;
-
-		map = new Map({
-			container: mapContainer,
-			style:
-				'https://api.maptiler.com/maps/satellite/style.json?key=' + env.PUBLIC_MAPTILER_API_KEY,
-			center: [lng!, lat!],
-			zoom: 15
-		});
-
-		map.on('load', () => {
-			marker = new Marker({ draggable: true }).setLngLat([lng!, lat!]).addTo(map!);
-			marker.on('dragend', () => {
-				const lngLat = marker!.getLngLat();
-				lat = lngLat.lat;
-				lng = lngLat.lng;
+		try {
+			const { Map, Marker, config } = await import('@maptiler/sdk');
+			const { env } = await import('$env/dynamic/public');
+			if (destroyed) return;
+			if (!env.PUBLIC_MAPTILER_API_KEY) {
+				mapError = 'The map is not configured yet. Your GPS location is still available.';
+				return;
+			}
+			config.apiKey = env.PUBLIC_MAPTILER_API_KEY;
+			map = new Map({
+				container: mapContainer,
+				style: `https://api.maptiler.com/maps/satellite/style.json?key=${env.PUBLIC_MAPTILER_API_KEY}`,
+				center: [lng!, lat!],
+				zoom: 15
 			});
-		});
+			map.on('load', () => {
+				marker = new Marker({ draggable: true }).setLngLat([lng!, lat!]).addTo(map!);
+				marker.on('dragend', () => {
+					const lngLat = marker!.getLngLat();
+					lat = lngLat.lat;
+					lng = lngLat.lng;
+				});
+			});
+		} catch {
+			mapError = 'The map could not load. You can still submit using your GPS location.';
+		}
 	}

 	function handlePhotoChange(e: Event) {
 		const input = e.target as HTMLInputElement;
-		const newFiles = Array.from(input.files ?? []).slice(0, 10 - photoFiles.length);
+		addPhotos(Array.from(input.files ?? []));
+		input.value = '';
+	}
+
+	function addPhotos(files: File[]) {
+		const newFiles = files.slice(0, 10 - photoFiles.length);
+		if (
+			newFiles.some(
+				(file) => !['image/jpeg', 'image/png', 'image/webp', 'image/heic'].includes(file.type)
+			)
+		) {
+			submitError = 'Use JPEG, PNG, WebP, or HEIC photos.';
+			return;
+		}
+		if (newFiles.some((file) => file.size > 5 * 1024 * 1024)) {
+			submitError = 'Photos must be 5 MB or smaller.';
+			return;
+		}
+		submitError = '';
+		photoPreviews.forEach((url) => URL.revokeObjectURL(url));
 		photoFiles = [...photoFiles, ...newFiles].slice(0, 10);
 		photoPreviews = photoFiles.map((f) => URL.createObjectURL(f));
-		if (photoFiles.length === 1 && !isNewSighting) runAIDetection(photoFiles[0]);
+	}
+
+	function dropPhotos(event: DragEvent) {
+		event.preventDefault();
+		draggingPhotos = false;
+		addPhotos(Array.from(event.dataTransfer?.files ?? []));
 	}

 	function removePhoto(index: number) {
+		photoPreviews.forEach((url) => URL.revokeObjectURL(url));
 		photoFiles = photoFiles.filter((_, i) => i !== index);
-		photoPreviews = photoPreviews.filter((_, i) => i !== index);
-	}
-
-	async function runAIDetection(file: File) {
-		aiLoading = true;
-		aiDismissed = false;
-		try {
-			const presignRes = await fetch('/api/upload', {
-				method: 'POST',
-				headers: { 'Content-Type': 'application/json' },
-				body: JSON.stringify({ mimeType: file.type })
-			});
-			if (!presignRes.ok) return;
-			const { uploadUrl, publicUrl } = await presignRes.json();
-			await fetch(uploadUrl, { method: 'PUT', body: file, headers: { 'Content-Type': file.type } });
-			const aiRes = await fetch('/api/detect-breed', {
-				method: 'POST',
-				headers: { 'Content-Type': 'application/json' },
-				body: JSON.stringify({ imageUrl: publicUrl })
-			});
-			if (!aiRes.ok) return;
-			const result = await aiRes.json();
-			if (result.breed) {
-				aiSuggestion = result;
-				if (!breed) breed = result.breed;
-			}
-		} catch {
-			/* silent */
-		} finally {
-			aiLoading = false;
-		}
+		photoPreviews = photoFiles.map((file) => URL.createObjectURL(file));
 	}

 	async function submit() {
@@ -152,25 +174,22 @@
 			const photoKeys: string[] = [];
 			if (photoFiles.length > 0) {
 				for (const file of photoFiles) {
-					const presignRes = await fetch('/api/upload', {
+					const uploadForm = new FormData();
+					uploadForm.set('photo', file);
+					const uploadRes = await fetch(resolve('/projects/animaldex/api/upload'), {
 						method: 'POST',
-						headers: { 'Content-Type': 'application/json' },
-						body: JSON.stringify({ mimeType: file.type })
+						body: uploadForm
 					});
-					if (!presignRes.ok) throw new Error('Failed to get upload URL');
-					const { key, uploadUrl } = await presignRes.json();
-					const uploadRes = await fetch(uploadUrl, {
-						method: 'PUT',
-						body: file,
-						headers: { 'Content-Type': file.type }
-					});
-					if (!uploadRes.ok) throw new Error('Photo upload failed');
+					if (!uploadRes.ok) throw new Error('Photo upload failed. Please try again.');
+					const { key } = await uploadRes.json();
 					photoKeys.push(key);
 				}
 			}
 			if (reporterName) localStorage.setItem('reporterName', reporterName);

-			const endpoint = isNewSighting ? `/api/animals/${animalId}/sightings` : '/api/animals';
+			const endpoint = isNewSighting
+				? resolve(`/projects/animaldex/api/animals/${animalId}/sightings`)
+				: resolve('/projects/animaldex/api/animals');
 			const body = isNewSighting
 				? {
 						animalId,
@@ -188,8 +207,6 @@
 						animalName: animalName || undefined,
 						description: description || undefined,
 						reporterName: reporterName || undefined,
-						aiBreedSuggestion: aiSuggestion?.breed,
-						aiBreedConfidence: aiSuggestion?.confidence,
 						seenAt: new Date(seenAt).toISOString(),
 						lat,
 						lng,
@@ -207,7 +224,7 @@
 				const err = await res.json();
 				throw new Error(err.message ?? 'Submission failed');
 			}
-			goto(resolve('/?submitted=1'));
+			goto(resolve('/projects/animaldex?submitted=1'));
 		} catch (e: unknown) {
 			submitError = e instanceof Error ? e.message : 'Something went wrong.';
 		} finally {
@@ -217,46 +234,49 @@
 </script>

 <svelte:head>
-	<title>Animaldex - Log a sighting</title>
 	<link rel="stylesheet" href="https://cdn.maptiler.com/maptiler-sdk-js/latest/maptiler-sdk.css" />
 </svelte:head>

-<div class="min-h-screen bg-gray-50">
-	<div
-		class="sticky top-0 z-10 flex items-center gap-3 border-b border-gray-100 bg-white px-4 py-3"
+<section class="mx-auto max-w-3xl px-4 py-10 sm:px-6 sm:py-14">
+	<a
+		href={resolve('/projects/animaldex')}
+		class="text-base text-[var(--site-muted)] hover:text-[var(--site-text)]">← animaldex</a
 	>
-		<a href={resolve('/')} class="text-gray-400 hover:text-gray-600">←</a>
-		<h1 class="font-semibold text-gray-900">
-			{isNewSighting ? 'Log another sighting' : 'Register an animal'}
-		</h1>
-	</div>
+	<h1 class="mt-5 text-4xl font-semibold tracking-tight sm:text-5xl">
+		{isNewSighting ? 'add a sighting' : 'add an animal'}
+	</h1>
+	<p class="mt-2 text-base text-[var(--site-muted)]">
+		{isNewSighting ? 'mark where you saw this animal' : 'add a neighborhood animal to the map'}
+	</p>

-	<div class="mx-auto max-w-lg space-y-5 px-4 py-6">
+	<div class="mt-8 space-y-8">
 		{#if locationError}
-			<div class="rounded-xl border border-red-200 bg-red-50 p-4 text-sm text-red-700">
-				<p class="font-medium">📍 Location required</p>
+			<div role="alert" class="border-y border-[var(--site-border)] py-4 text-base">
+				<p class="font-medium">location required</p>
 				<p class="mt-1">{locationError}</p>
-				<p class="mt-2 text-xs">
-					Go to <strong>Settings → Site permissions → Location</strong> and allow this site.
-				</p>
+				<button type="button" onclick={requestLocation} class="mt-3 underline underline-offset-4"
+					>try again</button
+				>
 			</div>
 		{/if}

-		<section class="rounded-2xl bg-white p-4 shadow-sm">
-			<h2 class="mb-3 text-sm font-semibold text-gray-700">
-				Photos
+		<section class="border-t border-[var(--site-border)] pt-6">
+			<h2 class="mb-3 text-xl font-semibold">
+				photos
 				{#if isNewSighting}
-					<span class="text-xs font-normal text-gray-400">(optional)</span>
+					<span class="text-base font-normal text-[var(--site-muted)]">(optional)</span>
 				{:else}
-					<span class="text-red-400">*</span>
+					<span class="text-base font-normal text-[var(--site-muted)]">(at least one)</span>
 				{/if}
 			</h2>
 			<div class="flex flex-wrap gap-2">
 				{#each photoPreviews as preview, i (i)}
-					<div class="relative h-20 w-20 overflow-hidden rounded-xl">
+					<div class="relative h-20 w-20 overflow-hidden rounded">
 						<img src={preview} alt="" class="h-full w-full object-cover" />
 						<button
+							type="button"
 							onclick={() => removePhoto(i)}
+							aria-label={`Remove photo ${i + 1}`}
 							class="absolute top-1 right-1 flex h-5 w-5 items-center justify-center rounded-full bg-black/60 text-xs text-white"
 							>✕</button
 						>
@@ -264,59 +284,36 @@
 				{/each}
 				{#if photoFiles.length < 10}
 					<label
-						class="flex h-20 w-20 cursor-pointer flex-col items-center justify-center rounded-xl border-2 border-dashed border-gray-200 text-gray-400 hover:border-orange-300"
+						class="relative flex min-h-28 w-full cursor-pointer items-center justify-center rounded border border-dashed border-[var(--site-border)] text-center text-base text-[var(--site-muted)] hover:text-[var(--site-text)] focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-[var(--site-text)] {draggingPhotos
+							? 'bg-[var(--site-surface)]'
+							: ''}"
+						ondragover={(event) => {
+							event.preventDefault();
+							draggingPhotos = true;
+						}}
+						ondragleave={() => (draggingPhotos = false)}
+						ondrop={dropPhotos}
 					>
-						<span class="text-2xl">+</span>
-						<span class="text-xs">Photo</span>
+						<span>drop photos here or choose files</span>
 						<input
 							type="file"
 							accept="image/jpeg,image/png,image/webp,image/heic"
 							multiple
-							class="hidden"
+							class="absolute inset-0 w-full cursor-pointer opacity-0"
 							onchange={handlePhotoChange}
 						/>
 					</label>
 				{/if}
 			</div>
-			<p class="mt-2 text-xs text-gray-400">Max 10 photos · JPEG, PNG, WebP, HEIC</p>
+			<p class="mt-3 text-base text-[var(--site-muted)]">
+				up to 10 photos · JPEG, PNG, WebP, HEIC · 5 MB each
+			</p>
 		</section>

-		{#if aiLoading}
-			<div class="flex items-center gap-2 rounded-xl bg-orange-50 p-3 text-sm text-orange-700">
-				<span class="animate-spin">⟳</span> Identifying breed…
-			</div>
-		{:else if aiSuggestion && !aiDismissed}
-			<div class="rounded-xl border border-orange-200 bg-orange-50 p-3">
-				<p class="text-sm font-medium text-orange-800">
-					🤖 AI thinks this is a <strong>{aiSuggestion.breed}</strong>
-					<span class="text-xs font-normal text-orange-600"
-						>({Math.round(aiSuggestion.confidence * 100)}% confident)</span
-					>
-				</p>
-				<div class="mt-2 flex gap-2">
-					<button
-						onclick={() => {
-							if (aiSuggestion) breed = aiSuggestion.breed;
-						}}
-						class="rounded-lg bg-orange-500 px-3 py-1 text-xs font-semibold text-white"
-						>Use this</button
-					>
-					<button
-						onclick={() => {
-							aiDismissed = true;
-							aiSuggestion = null;
-						}}
-						class="rounded-lg border border-orange-200 px-3 py-1 text-xs text-orange-700"
-						>Dismiss</button
-					>
-				</div>
-			</div>
-		{/if}
-
 		{#if !isNewSighting}
-			<section class="rounded-2xl bg-white p-4 shadow-sm">
-				<h2 class="mb-3 text-sm font-semibold text-gray-700">
-					Species <span class="text-red-400">*</span>
+			<section class="border-t border-[var(--site-border)] pt-6">
+				<h2 class="mb-3 text-xl font-semibold">
+					Species <span class="text-[var(--site-muted)]">*</span>
 				</h2>
 				<div class="flex flex-wrap gap-2">
 					{#each COMMON_SPECIES as s (s)}
@@ -325,107 +322,120 @@
 								species = s;
 								customSpecies = '';
 							}}
-							class="rounded-full px-3 py-1.5 text-sm {species === s
-								? 'bg-orange-500 text-white'
-								: 'bg-gray-100 text-gray-700 hover:bg-gray-200'}">{s}</button
+							class="rounded border border-[var(--site-border)] px-3 py-1.5 text-base {species === s
+								? 'bg-[var(--site-text)] text-[var(--site-bg)]'
+								: 'bg-[var(--site-surface)] text-[var(--site-text)] hover:bg-[var(--site-hover)]'}"
+							>{s}</button
 						>
 					{/each}
 					<button
 						onclick={() => {
 							species = '__custom__';
 						}}
-						class="rounded-full px-3 py-1.5 text-sm {species === '__custom__'
-							? 'bg-orange-500 text-white'
-							: 'bg-gray-100 text-gray-700 hover:bg-gray-200'}">Other…</button
+						class="rounded border border-[var(--site-border)] px-3 py-1.5 text-base {species ===
+						'__custom__'
+							? 'bg-[var(--site-text)] text-[var(--site-bg)]'
+							: 'bg-[var(--site-surface)] text-[var(--site-text)] hover:bg-[var(--site-hover)]'}"
+						>Other…</button
 					>
 				</div>
 				{#if species === '__custom__'}
 					<input
 						bind:value={customSpecies}
 						placeholder="Enter species"
-						class="mt-3 w-full rounded-lg border border-gray-200 px-3 py-2 text-sm outline-none focus:border-orange-400"
+						class="mt-3 w-full rounded border border-[var(--site-border)] bg-[var(--site-bg)] px-3 py-2 text-base"
 					/>
 				{/if}
 			</section>

-			<section class="rounded-2xl bg-white p-4 shadow-sm">
-				<h2 class="mb-1 text-sm font-semibold text-gray-700">
-					Breed <span class="text-xs font-normal text-gray-400">(optional)</span>
+			<section class="border-t border-[var(--site-border)] pt-6">
+				<h2 class="mb-1 text-xl font-semibold">
+					Breed <span class="text-base font-normal text-[var(--site-muted)]">(optional)</span>
 				</h2>
 				<input
 					bind:value={breed}
 					placeholder="e.g. Golden Retriever"
-					class="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm outline-none focus:border-orange-400"
+					class="w-full rounded border border-[var(--site-border)] bg-[var(--site-bg)] px-3 py-2 text-base"
 				/>
 			</section>

-			<section class="space-y-3 rounded-2xl bg-white p-4 shadow-sm">
+			<section class="space-y-3 border-t border-[var(--site-border)] pt-6">
 				<div>
-					<h2 class="mb-1 text-sm font-semibold text-gray-700">
-						Animal name <span class="text-xs font-normal text-gray-400">(optional)</span>
+					<h2 class="mb-1 text-xl font-semibold">
+						Animal name <span class="text-base font-normal text-[var(--site-muted)]"
+							>(optional)</span
+						>
 					</h2>
 					<input
 						bind:value={animalName}
 						placeholder="e.g. Fluffy"
-						class="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm outline-none focus:border-orange-400"
+						class="w-full rounded border border-[var(--site-border)] bg-[var(--site-bg)] px-3 py-2 text-base"
 					/>
 				</div>
 				<div>
-					<h2 class="mb-1 text-sm font-semibold text-gray-700">
-						Description <span class="text-xs font-normal text-gray-400">(optional)</span>
+					<h2 class="mb-1 text-xl font-semibold">
+						Description <span class="text-base font-normal text-[var(--site-muted)]"
+							>(optional)</span
+						>
 					</h2>
 					<textarea
 						bind:value={description}
 						placeholder="Behaviour, features, context…"
 						rows="3"
-						class="w-full resize-none rounded-lg border border-gray-200 px-3 py-2 text-sm outline-none focus:border-orange-400"
+						class="w-full resize-none rounded border border-[var(--site-border)] bg-[var(--site-bg)] px-3 py-2 text-base"
 					></textarea>
 				</div>
 			</section>
 		{/if}

-		<section class="space-y-3 rounded-2xl bg-white p-4 shadow-sm">
+		<section class="space-y-3 border-t border-[var(--site-border)] pt-6">
 			<div>
-				<h2 class="mb-1 text-sm font-semibold text-gray-700">
-					When did you see it? <span class="text-red-400">*</span>
+				<h2 class="mb-1 text-xl font-semibold">
+					When did you see it? <span class="text-[var(--site-muted)]">*</span>
 				</h2>
 				<input
 					type="datetime-local"
 					bind:value={seenAt}
-					max={new Date().toISOString().slice(0, 16)}
-					class="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm outline-none focus:border-orange-400"
+					max={localDateTime()}
+					class="w-full rounded border border-[var(--site-border)] bg-[var(--site-bg)] px-3 py-2 text-base"
 				/>
 			</div>
 			<div>
-				<h2 class="mb-1 text-sm font-semibold text-gray-700">
-					Your name <span class="text-xs font-normal text-gray-400">(optional)</span>
+				<h2 class="mb-1 text-xl font-semibold">
+					Your name <span class="text-base font-normal text-[var(--site-muted)]">(optional)</span>
 				</h2>
 				<input
 					bind:value={reporterName}
 					placeholder="Saved for next time"
-					class="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm outline-none focus:border-orange-400"
+					class="w-full rounded border border-[var(--site-border)] bg-[var(--site-bg)] px-3 py-2 text-base"
 				/>
 			</div>
 		</section>

-		<section class="rounded-2xl bg-white p-4 shadow-sm">
-			<h2 class="mb-2 text-sm font-semibold text-gray-700">
-				Location <span class="text-red-400">*</span>
+		<section class="border-t border-[var(--site-border)] pt-6">
+			<h2 class="mb-2 text-xl font-semibold">
+				Location <span class="text-[var(--site-muted)]">*</span>
 			</h2>
 			{#if locationLoading}
 				<div
-					class="flex h-40 items-center justify-center rounded-xl bg-gray-100 text-sm text-gray-400"
+					class="flex h-64 items-center justify-center rounded bg-[var(--site-surface)] text-base text-[var(--site-muted)]"
 				>
 					Getting your location…
 				</div>
 			{:else if lat !== null}
-				<div bind:this={mapContainer} class="h-48 w-full overflow-hidden rounded-xl"></div>
-				<p class="mt-2 text-xs text-gray-400">Drag the pin to fine-tune (max 30 km from you).</p>
+				<div
+					bind:this={mapContainer}
+					class="h-64 w-full overflow-hidden rounded border border-[var(--site-border)]"
+				></div>
+				{#if mapError}<p role="alert" class="mt-2 text-base">{mapError}</p>{/if}
+				<p class="mt-2 text-base text-[var(--site-muted)]">
+					Drag the pin to fine-tune (max 30 km from you).
+				</p>
 			{/if}
 		</section>

 		{#if submitError}
-			<div class="rounded-xl border border-red-200 bg-red-50 p-3 text-sm text-red-700">
+			<div role="alert" class="border-y border-[var(--site-border)] py-3 text-base">
 				{submitError}
 			</div>
 		{/if}
@@ -433,13 +443,13 @@
 		<button
 			onclick={submit}
 			disabled={submitting || !!locationError || lat === null}
-			class="w-full rounded-xl bg-orange-500 py-3 font-semibold text-white hover:bg-orange-600 disabled:cursor-not-allowed disabled:opacity-50"
+			class="w-full rounded bg-[var(--site-text)] py-3 font-medium text-[var(--site-bg)] disabled:cursor-not-allowed disabled:opacity-50"
 		>
 			{submitting ? 'Submitting…' : isNewSighting ? 'Submit sighting' : 'Register animal'}
 		</button>

-		<p class="pb-8 text-center text-xs text-gray-400">
+		<p class="pb-8 text-center text-base text-[var(--site-muted)]">
 			All submissions are reviewed before appearing on the map.
 		</p>
 	</div>
-</div>
+</section>