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>