✨ Added cover-image (Closes #103)

frontend/src/routes/+page.svelte

@@ -200,10 +200,12 @@
 		</div>
 	</section>
 	<section>
+		<h2 class="text-center text-5xl mb-6">How does ClassQuiz even work?</h2>
+
 		<div class="flex justify-center w-full">
-			<h2 class="text-center text-3xl rounded-t-lg bg-opacity-40 bg-white py-2 px-6">
+			<h3 class="text-center text-3xl rounded-t-lg bg-opacity-40 bg-white py-2 px-6">
 				{$t('index_page.get_a_quiz')}
-			</h2>
+			</h3>
 		</div>
 		<div
 			class="grid grid-rows-2 lg:grid-rows-1 lg:grid-cols-2 bg-opacity-40 bg-white shadow-lg mb-12 lg:mx-12 mx-4 rounded-lg"

frontend/src/routes/play/+page.svelte

@@ -122,7 +122,11 @@
 	{:else if JSON.stringify(final_results) !== JSON.stringify([null])}
 		<ShowEndScreen bind:final_results bind:quiz_data={gameData} />
 	{:else if gameData !== undefined && question_index === ''}
-		<ShowTitle bind:title={gameData.title} bind:description={gameData.description} />
+		<ShowTitle
+			bind:title={gameData.title}
+			bind:description={gameData.description}
+			bind:cover_image={gameData.cover_image}
+		/>
 	{:else if gameMeta.started && gameData !== undefined && question_index !== '' && answer_results === undefined}
 		{#key unique}
 			<Question

frontend/src/routes/view/[quiz_id]/+page.svelte

@@ -55,6 +55,17 @@
 	<div class="text-center">
 		<p>{quiz.description}</p>
 	</div>
+	{#if quiz.cover_image}
+		<div class="flex justify-center align-middle items-center">
+			<div class="h-[15vh] m-auto w-auto my-3">
+				<img
+					class="max-h-full max-w-full  block"
+					src={quiz.cover_image}
+					alt="Not provided"
+				/>
+			</div>
+		</div>
+	{/if}
 	<div class="text-center text-sm pt-1">
 		<ImportedOrNot imported={quiz.imported_from_kahoot} />
 	</div>
@@ -98,7 +109,6 @@
 					<!--					</label>-->
 					{#if question.image}
 						<span>
-							{$t('words.image')}:
 							<img class="pl-8" src={question.image} alt="Not provided" />
 						</span>
 					{/if}