fyp/webpage/src/routes/Page404.svelte

<script lang="ts">
	let { message, goBackLink } = $props<{ message?: string; goBackLink?: string }>();
</script>

<div class="page404">
	<div>
		<h1>404</h1>
		{#if message}
			<h2>
				{message}
			</h2>
			{#if goBackLink}
				<div class="description">
					<a href={goBackLink}> 👈 Go back </a>
				</div>
			{/if}
		{:else}
			<h2>Page Not found</h2>
			<div class="description">The page you were looking for does not exist</div>
		{/if}
	</div>
</div>

<style lang="scss">
	.page404 {
		display: grid;
		place-items: center;
		height: calc(100vh - 60px);
		text-align: center;

		h1 {
			font-size: 10em;
			margin: 0;
		}

		h2 {
			font-size: 5em;
			margin: 0;
			margin-bottom: 0.3em;
		}

		div.description {
			font-size: 1.5em;
		}
	}
</style>