Load background from server page

frontend/src/lib/components/ImageInfoModal.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+	import type { Background } from '$lib/types';
+	import { createEventDispatcher } from 'svelte';
+	const dispatch = createEventDispatcher();
+	import { onMount } from 'svelte';
+	let modal: HTMLDialogElement;
+	export let background: Background;
+
+	onMount(() => {
+		modal = document.getElementById('my_modal_1') as HTMLDialogElement;
+		if (modal) {
+			modal.showModal();
+		}
+	});
+
+	function close() {
+		dispatch('close');
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (event.key === 'Escape') {
+			dispatch('close');
+		}
+	}
+</script>
+
+<dialog id="my_modal_1" class="modal">
+	<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+	<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+	<div class="modal-box" role="dialog" on:keydown={handleKeydown} tabindex="0">
+		<h3 class="font-bold text-lg">
+			About This Background<span class=" inline-block"></span>
+		</h3>
+
+		<div class="flex flex-col items-center">
+			<!-- svelte-ignore a11y-img-redundant-alt -->
+			<!-- <img
+					src={background.url}
+					alt="Background Image"
+					class="w-96 h-96 object-cover rounded-lg shadow-lg mt-4"
+				/> -->
+			{#if background.author != ''}
+				<p class="text-center mt-2">Photo by {background.author}</p>
+			{/if}
+			{#if background.location != ''}
+				<p class="text-center">Location: {background.location}</p>
+			{/if}
+			<button
+				on:click={() => (window.location.href = 'https://forms.gle/2uZNnz8QS3VjuYtQ8')}
+				class="btn btn-neutral inline-block mt-4 mb-2">Submit an Image</button
+			>
+		</div>
+
+		<button class="btn btn-primary" on:click={close}>Close</button>
+	</div>
+</dialog>

frontend/src/lib/index.ts

@@ -1,6 +1,14 @@
 import inspirationalQuotes from './json/quotes.json';
 import randomBackgrounds from './json/backgrounds.json';
-import type { Adventure, Checklist, Collection, Note, Transportation, User } from './types';
+import type {
+	Adventure,
+	Background,
+	Checklist,
+	Collection,
+	Note,
+	Transportation,
+	User
+} from './types';
 
 export function getRandomQuote() {
 	const quotes = inspirationalQuotes.quotes;
@@ -278,5 +286,5 @@ export function isAdventureVisited(adventure: Adventure) {
 
 export function getRandomBackground() {
 	const randomIndex = Math.floor(Math.random() * randomBackgrounds.backgrounds.length);
-	return randomBackgrounds.backgrounds[randomIndex];
+	return randomBackgrounds.backgrounds[randomIndex] as Background;
 }

frontend/src/lib/types.ts

@@ -162,3 +162,9 @@ export type ChecklistItem = {
 	created_at: string; // ISO 8601 date string
 	updated_at: string; // ISO 8601 date string
 };
+
+export type Background = {
+	url: string;
+	author?: string;
+	location?: string;
+};