✨ Added footer

frontend/src/lib/footer.svelte

@@ -0,0 +1,15 @@
+<footer class="text-center text-white border-black">
+	<div class="text-center p-4 bg-gray-700">
+		Made with ❤️ by
+		<a
+			href="https://mawoka.eu?utm_source=ClassQuiz&utm_medium=footer"
+			class="hover:underline bg-clip-text text-transparent bg-gradient-to-r from-[#009444] via-[#39b54a] to-[#8dc63f]"
+			>Mawoka</a
+		>
+	</div>
+	<div class="flex justify-center bg-gray-700 border-t-2 border-t-white">
+		<p class="text-gray-400 text-center">
+			<i>Kahoot! and the K! logo are trademarks of Kahoot! AS</i>
+		</p>
+	</div>
+</footer>

frontend/src/routes/account/login.svelte

@@ -14,6 +14,7 @@
 	import { navbarVisible } from '$lib/stores';
 	import { browser } from '$app/env';
 	import { getLocalization } from '$lib/i18n';
+	import Footer from '$lib/footer.svelte';
 
 	const { t } = getLocalization();
 
@@ -73,7 +74,6 @@
 <svelte:head>
 	<title>ClassQuiz - Login</title>
 </svelte:head>
-
 <div class="flex items-center justify-center h-full px-4">
 	<div>
 		<span class="p-4" />
@@ -184,7 +184,7 @@
 		</div>
 	</div>
 </div>
-
+<Footer />
 <div
 	class="fixed z-10 inset-0 overflow-y-auto"
 	aria-labelledby="modal-title"

frontend/src/routes/account/register.svelte

@@ -15,6 +15,7 @@
 	import { getLocalization } from '$lib/i18n';
 	import { validateSchema } from '@felte/validator-yup';
 	import { navbarVisible } from '$lib/stores';
+	import Footer from '$lib/footer.svelte';
 
 	const { t } = getLocalization();
 	// import reporter from '@felte/reporter-tippy';
@@ -227,7 +228,7 @@
 		</div>
 	</div>
 </div>
-
+<Footer />
 <div
 	class="fixed z-10 inset-0 overflow-y-auto"
 	aria-labelledby="modal-title"

frontend/src/routes/docs/__layout.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import Footer from '$lib/footer.svelte';
+</script>
+
+<div class="min-h-screen flex flex-col">
+	<slot />
+</div>
+<div class="pt-4">
+	<Footer />
+</div>

frontend/src/routes/index.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { navbarVisible } from '$lib/stores';
 	import { getLocalization } from '$lib/i18n';
+	import Footer from '$lib/footer.svelte';
 
 	const { t } = getLocalization();
 
@@ -22,25 +23,27 @@
 	<meta name="description" content={$t('index_page.meta.description')} />
 </svelte:head>
 
-<section>
+<div class="min-h-screen flex flex-col">
+	<section>
 		<div class="pt-12 text-center">
 			<h1 class="sm:text-8xl text-6xl mt-6 marck-script">ClassQuiz</h1>
 			<p class="text-xl mt-4">{$t('index_page.slogan')}</p>
 		</div>
-</section>
+	</section>
 
-<section id="stats">
+	<section id="stats">
 		<div class="text-center pt-48 snap-y">
 			<h1 class="sm:text-6xl text-4xl">{$t('words.stats')}</h1>
 			<p class="text-xl pt-4">
 				{#await getStats() then stats}
-				There are already <span class="underline">{stats.user_count}</span> users and <!-- TODO: Add translation -->
+					There are already <span class="underline">{stats.user_count}</span> users and
+					<!-- TODO: Add translation -->
 					<span class="underline">{stats.quiz_count}</span> quizzes on ClassQuiz.
 				{/await}
 			</p>
 		</div>
-</section>
+	</section>
-<section id="features">
+	<section id="features">
 		<div class="text-center pt-24 snap-y">
 			<h1 class="sm:text-6xl text-4xl">{$t('words.features')}</h1>
 			<p class="text-xl pt-4">
@@ -49,4 +52,7 @@
 				{$t('index_page.features_description.2')}
 			</p>
 		</div>
-</section>
+	</section>
+</div>
+
+<Footer />

frontend/src/routes/overview.svelte

@@ -18,6 +18,7 @@
 	import type { QuizData } from '../app';
 	import { DateTime } from 'luxon';
 	import { getLocalization } from '$lib/i18n';
+	import Footer from '$lib/footer.svelte';
 	const { t } = getLocalization();
 
 	const getData = async (): Promise<Array<QuizData>> => {
@@ -57,7 +58,8 @@
 	<title>ClassQuiz - Overview</title>
 </svelte:head>
 
-{#await getData()}
+<div class="min-h-screen flex flex-col">
+	{#await getData()}
 		<svg class="h-8 w-8 animate-spin mx-auto my-20" viewBox="3 3 18 18">
 			<path
 				class="fill-black"
@@ -68,7 +70,7 @@
 				d="M16.9497 7.05015C14.2161 4.31648 9.78392 4.31648 7.05025 7.05015C6.65973 7.44067 6.02656 7.44067 5.63604 7.05015C5.24551 6.65962 5.24551 6.02646 5.63604 5.63593C9.15076 2.12121 14.8492 2.12121 18.364 5.63593C18.7545 6.02646 18.7545 6.65962 18.364 7.05015C17.9734 7.44067 17.3403 7.44067 16.9497 7.05015Z"
 			/>
 		</svg>
-{:then quizzes}
+	{:then quizzes}
 		<div class="flex flex-col w-fit mx-auto">
 			<!--		<button
 					class='px-4 py-2 font-medium tracking-wide text-gray-500 whitespace-nowrap dark:text-gray-400 capitalize transition-colors dark:bg-gray-700 duration-200 transform bg-gray-50 rounded-md hover:bg-green-600 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-80'>
@@ -144,7 +146,9 @@
 							<tbody>
 								<!-- Product 1 -->
 								{#each quizzes as quiz}
-								<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
+									<tr
+										class="bg-white border-b dark:bg-gray-800 dark:border-gray-700"
+									>
 										<td
 											class="py-4 px-6 text-sm font-medium text-gray-900 whitespace-nowrap dark:text-white"
 										>
@@ -206,6 +210,8 @@
 				</div>
 			</div>
 		</div>
-{:catch err}
+	{:catch err}
 		<p>{err}</p>
-{/await}
+	{/await}
+</div>
+<Footer />