🌐 Added some missing translations

frontend/src/routes/+page.svelte

@@ -208,7 +208,7 @@
 		</div>
 	</section>
 	<section>
-		<h2 class="text-center text-5xl mb-6">How does ClassQuiz even work?</h2>
+		<h2 class="text-center text-5xl mb-6">{$t('index_page.how_does_classquiz_work')}</h2>
 
 		<div class="flex justify-center w-full">
 			<h3 class="text-center text-3xl rounded-t-lg bg-opacity-40 bg-white py-2 px-6">

frontend/src/routes/account/settings/+page.svelte

@@ -170,7 +170,9 @@
 				alt="Profile image of {user.username}"
 			/>
 			<div class="m-2 flex justify-center">
-				<BrownButton href="/account/settings/avatar">Change avatar</BrownButton>
+				<BrownButton href="/account/settings/avatar"
+					>{$t('settings_page.change_avatar')}</BrownButton
+				>
 			</div>
 		</div>
 		<div class="grid grid-rows-2 col-start-2 col-end-7">
@@ -184,7 +186,7 @@
 				<div class="p-4 flex justify-center">
 					<div class="m-auto">
 						<BrownButton href="/account/settings/security"
-							>Security-Settings
+							>{$t('settings_page.security_settings')}
 						</BrownButton>
 					</div>
 				</div>
@@ -219,7 +221,7 @@
 					</div>
 				</form>
 				<div>
-					<button on:click={add_api_key}>Add API-Key</button>
+					<button on:click={add_api_key}>{$t('settings_page.security_settings')}</button>
 					{#await api_keys}
 						<Spinner />
 					{:then keys}
@@ -231,7 +233,7 @@
 										delete_api_key(key.key);
 									}}
 									class="admin-button"
-									>Delete
+									>{$t('words.delete')}
 								</button>
 							</div>
 						{/each}

frontend/src/routes/account/settings/avatar/+page.svelte

@@ -94,7 +94,7 @@
 						on:click={() => {
 							index = index - 1;
 						}}
-						disabled={index < 1}>Back</BrownButton
+						disabled={index < 1}>{$t('words.back')}</BrownButton
 					>
 				</div>
 				<div class="mx-auto">
@@ -103,7 +103,7 @@
 					</h2>
 				</div>
 				<div class="ml-auto">
-					<BrownButton disabled={index < 11}>Finish</BrownButton>
+					<BrownButton disabled={index < 11}>{$t('words.finish')}</BrownButton>
 				</div>
 			</div>
 			<div class="grid grid-cols-4">
@@ -167,11 +167,11 @@
 					<Spinner my_20={false} />
 				{/if}
 			</BrownButton>
-			<BrownButton href="/account/settings">Go back</BrownButton>
+			<BrownButton href="/account/settings">{$t('avatar_settings.go_back')}</BrownButton>
 			<BrownButton
 				on:click={() => {
 					finished = false;
-				}}>Close</BrownButton
+				}}>{$t('words.close')}</BrownButton
 			>
 		</div>
 	</div>

frontend/src/routes/account/settings/security/+page.svelte

@@ -10,6 +10,9 @@
 	import TotpSetup from './totp_setup.svelte';
 	import BackupCodes from './backup_codes.svelte';
 	import BrownButton from '$lib/components/buttons/brown.svelte';
+	import { getLocalization } from '$lib/i18n';
+
+	const { t } = getLocalization();
 
 	let user_data: object | undefined;
 	let security_keys: Array<{ id: number }> | undefined;
@@ -101,15 +104,17 @@
 	<div class="grid grid-rows-2 h-screen">
 		<div class="grid grid-cols-2 h-full border-b-2 border-black">
 			<div class="h-full w-full border-r-2 border-black">
-				<h2 class="text-center text-2xl">Backup-Code</h2>
+				<h2 class="text-center text-2xl">{$t('security_settings.backup_code')}</h2>
 				<div class="flex h-full w-full justify-center">
 					<div class="m-auto">
-						<BrownButton on:click={get_backup_code}>Get Backup-Codes</BrownButton>
+						<BrownButton on:click={get_backup_code}
+							>{$t('security_settings.get_backup_code')}</BrownButton
+						>
 					</div>
 				</div>
 			</div>
 			<div class="h-full w-full">
-				<h2 class="text-center text-2xl">Activate 2 Factor</h2>
+				<h2 class="text-center text-2xl">{$t('security_settings.activate_2fa')}</h2>
 				<div class="flex h-full w-full justify-center flex-col">
 					<div class="m-auto">
 						{#if user_data.require_password}
@@ -130,7 +135,7 @@
 									/>
 								</button>
 								<span class="text-sm font-medium text-gray-700 dark:text-white"
-									>Two Factor authentication is activated</span
+									>{$t('security_settings.2fa_activated')}</span
 								>
 							</div>
 						{:else}
@@ -151,7 +156,7 @@
 									/>
 								</button>
 								<span class="text-sm font-medium text-gray-700 dark:text-white"
-									>Two Factor authentication is deactivated</span
+									>{$t('security_settings.2fa_deactivated')}</span
 								>
 							</div>
 						{/if}
@@ -161,17 +166,19 @@
 		</div>
 		<div class="grid grid-cols-2 h-full">
 			<div class="h-full w-full flex flex-col border-r-2 border-black">
-				<h2 class="text-center text-2xl">Webauthn</h2>
+				<h2 class="text-center text-2xl">{$t('security_settings.webauthn')}</h2>
 				<div class="flex justify-center">
 					{#if security_keys.length > 0}
-						<p>Webauthn is available</p>
+						<p>{$t('security_settings.webauthn_available')}</p>
 					{:else}
-						<p>Webauthn is not available</p>
+						<p>{$t('security_settings.webauthn_unavailable')}</p>
 					{/if}
 				</div>
 				<div class="flex justify-center">
 					<div class="m-auto">
-						<BrownButton on:click={add_security_key}>Add Security-Key</BrownButton>
+						<BrownButton on:click={add_security_key}
+							>{$t('security_settings.add_security_key')}</BrownButton
+						>
 					</div>
 				</div>
 				<div class="flex justify-center">
@@ -190,21 +197,25 @@
 				</div>
 			</div>
 			<div class="h-full w-full flex flex-col">
-				<h2 class="text-center text-2xl">Totp</h2>
+				<h2 class="text-center text-2xl">{$t('security_settings.totp')}</h2>
 				<div class="flex justify-center">
 					{#if totp_activated}
-						<p>Totp is available</p>
+						<p>{$t('security_settings.totp_available')}</p>
 					{:else}
-						<p>Totp is not available</p>
+						<p>{$t('security_settings.totp_unavailable')}</p>
 					{/if}
 				</div>
 
 				<div class="flex justify-center">
 					<div class="m-auto">
 						{#if totp_activated}
-							<BrownButton on:click={disable_totp}>Disable Totp</BrownButton>
+							<BrownButton on:click={disable_totp}
+								>{$t('security_settings.disable_totp')}</BrownButton
+							>
 						{:else}
-							<BrownButton on:click={enable_totp}>Enable Totp</BrownButton>
+							<BrownButton on:click={enable_totp}
+								>{$t('security_settings.enable_totp')}</BrownButton
+							>
 						{/if}
 					</div>
 				</div>

frontend/src/routes/account/settings/security/backup_codes.svelte

@@ -4,6 +4,9 @@
   - file, You can obtain one at https://mozilla.org/MPL/2.0/.
   -->
 <script lang="ts">
+	import { getLocalization } from '$lib/i18n';
+
+	const { t } = getLocalization();
 	export let backup_code;
 
 	let already_downloaded = false;
@@ -30,12 +33,12 @@
 			on:click={() => {
 				backup_code = undefined;
 			}}
-			>Close
+			>{$t('words.close')}
 		</button>
 		<div
 			class="bg-white dark:bg-gray-700 rounded-b-lg rounded-tr-lg w-full h-full flex flex-col"
 		>
-			<h2 class="text-3xl m-auto">Your Backup-Code</h2>
+			<h2 class="text-3xl m-auto">{$t('security_settings.backup_codes.your_backup_code')}</h2>
 			<p
 				class="select-all font-mono text-xl m-auto"
 				on:click={() => {
@@ -44,13 +47,14 @@
 			>
 				{backup_code}
 			</p>
-			<p class="m-auto">Save this somewhere safe!</p>
+			<p class="m-auto">{$t('security_settings.backup_codes.save_somewhere_save')}</p>
 			<button
 				on:click={() => {
 					download_code(true);
 				}}
-				class="m-auto p-2 bg-[#B07156] rounded-lg">Download code</button
-			>
+				class="m-auto p-2 bg-[#B07156] rounded-lg"
+				>{$t('security_settings.backup_codes.download_code')}
+			</button>
 		</div>
 	</div>
 </div>

frontend/src/routes/account/settings/security/totp_setup.svelte

@@ -6,6 +6,9 @@
 <script lang="ts">
 	import QRCode from 'qrcode';
 	import Spinner from '$lib/Spinner.svelte';
+	import { getLocalization } from '$lib/i18n';
+
+	const { t } = getLocalization();
 
 	export let totp_data: { url: string; secret: string } | undefined;
 
@@ -21,23 +24,25 @@
 			on:click={() => {
 				totp_data = undefined;
 			}}
-			>Close
+			>{$t('words.close')}
 		</button>
 		<div class="bg-white dark:bg-gray-700 rounded-b-lg rounded-tr-lg w-full h-full">
 			<div class="grid grid-cols-3 w-full h-full">
 				<div class="flex flex-col justify-center w-full h-5/6">
 					<span class="m-auto" />
 					<div class="h-5/6 flex">
-						<p class="my-auto ml-auto">Scan this to set up the code</p>
+						<p class="my-auto ml-auto">
+							{$t('security_settings.totp_setup.scan_to_set_up')}
+						</p>
 					</div>
 					<div class="flex">
 						<p class="my-auto ml-auto">
-							Enter this as the secret if you can't scan the code
+							{$t('security_settings.totp_setup.enter_as_secret_if_no_see_code')}
 						</p>
 					</div>
 				</div>
 				<div class="flex flex-col justify-start w-full h-5/6">
-					<h2 class="text-2xl m-auto">Totp-Setup</h2>
+					<h2 class="text-2xl m-auto">{$t('security_settings.totp_setup.totp_setup')}</h2>
 					{#await get_image_url()}
 						<Spinner my_20={false} />
 					{:then data}
@@ -52,7 +57,9 @@
 					<p class="m-auto select-all font-mono">{totp_data.secret}</p>
 				</div>
 				<div class="flex justify-center h-5/6 w-full">
-					<p class="m-auto text-3xl p-4">Do not forget to save your recovery-code!</p>
+					<p class="m-auto text-3xl p-4">
+						{$t('security_settings.totp_setup.do_not_forget_backup_code')}
+					</p>
 				</div>
 			</div>
 		</div>

frontend/src/routes/results/[result_id]/general_overview.svelte

@@ -5,6 +5,9 @@
   -->
 <script lang="ts">
 	import type { Question } from '$lib/quiz_types';
+	import { getLocalization } from '$lib/i18n';
+
+	const { t } = getLocalization();
 
 	export let questions: Question[];
 	export let answers: {
@@ -41,10 +44,12 @@
 <div class="w-full">
 	<div class="flex justify-center w-full">
 		<p class="text-3xl w-5/6 text-center">
-			The quiz with the title '<strong>{title}</strong>' was played on
-			<strong>{new Date(timestamp).toLocaleString()}</strong>
-			with <strong>{usernames.length}</strong> players. The players achieved an average score
-			of <strong>{get_average_final_score()}</strong>.
+			{$t('results_page.general_overview.sentence', {
+				title,
+				date: new Date(timestamp).toLocaleString(),
+				player_count: usernames.length,
+				average_score: get_average_final_score()
+			})}
 		</p>
 	</div>
 </div>

frontend/src/routes/results/[result_id]/player_overview.svelte

@@ -25,7 +25,7 @@
 				<th class="border-r dark:border-gray-500 p-1 mx-auto border-gray-300"
 					>{$t('result_page.player_name')}
 				</th>
-				<th class="p-1 mx-auto">Player Score</th>
+				<th class="p-1 mx-auto">{$t('result_page.player_score')}</th>
 				{#if Object.keys(custom_field).length !== 0}
 					<th class="border-l dark:border-gray-500 p-1 mx-auto border-gray-300"
 						>{$t('result_page.custom_field')}

frontend/src/routes/user/[user_id]/+page.svelte

@@ -40,7 +40,7 @@
 	<div class="grid grid-cols-6 h-full">
 		<div class="pl-2">
 			{#if data.user.username === undefined}
-				<h2 class="text-4xl text-center p-4">User not found</h2>
+				<h2 class="text-4xl text-center p-4">{$t('public_user_page.user_not_found')}</h2>
 			{:else}
 				<div class="flex justify-center">
 					<img src={`/api/v1/users/avatar/${data.user.id}`} alt="profile" />
@@ -49,7 +49,9 @@
 					@{data.user.username}
 				</h2>
 				<p class="italic text-center">
-					Joined on {new Date(data.user.created_at).toLocaleDateString()}
+					{$t('public_user_page.joined_on', {
+						date: new Date(data.user.created_at).toLocaleDateString()
+					})}
 				</p>
 			{/if}
 		</div>
@@ -57,7 +59,7 @@
 			class="col-start-2 col-end-7 border-l border-black h-full p-4 overflow-y-scroll flex flex-col gap-4"
 		>
 			{#if data.quizzes.length === 0}
-				<p class="text-center text-4xl">No original quizzes found...</p>
+				<p class="text-center text-4xl">{$t('public_user_page.no_original_quizzes')}</p>
 			{:else}
 				{#each data.quizzes as quiz}
 					<div

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

@@ -71,7 +71,8 @@
 		<p>{@html quiz.description}</p>
 	</div>
 	<p class="text-center">
-		Made by <a href="/user/{quiz.user_id.id}" class="underline">@{quiz.user_id.username}</a>
+		{$t('view_quiz_page.made_by')}
+		<a href="/user/{quiz.user_id.id}" class="underline">@{quiz.user_id.username}</a>
 	</p>
 	{#if quiz.cover_image}
 		<div class="flex justify-center align-middle items-center">
@@ -95,7 +96,7 @@
 						href="https://create.kahoot.it/details/{quiz.kahoot_id}"
 						target="_blank"
 					>
-						View on <i>Kahoot!</i>
+						{$t('view_quiz_page.view_on_kahoot')}
 					</GrayButton>
 				</div>
 			{/if}