✨ New landing-page

frontend/package.json

@@ -29,6 +29,7 @@
 		"@types/yup": "^0.29.13",
 		"@typescript-eslint/eslint-plugin": "^5.10.1",
 		"@typescript-eslint/parser": "^5.10.1",
+		"i18next-scanner": "^3.1.0",
 		"autoprefixer": "^10.4.2",
 		"cookie": "^0.4.2",
 		"eslint": "^7.32.0",
@@ -37,7 +38,6 @@
 		"felte": "^1.0.1",
 		"highlight.js": "^11.4.0",
 		"i18next-browser-languagedetector": "^6.1.4",
-		"i18next-scanner": "^3.1.0",
 		"ioredis": "^4.28.5",
 		"js-cookie": "^3.0.1",
 		"luxon": "^2.3.1",

frontend/src/lib/assets/landing/.gitignore

@@ -0,0 +1,6 @@
+*.png
+*.xcf
+admin_overview.webp
+results.webp
+select.webp
+solution.webp

frontend/src/lib/i18n/index.ts

@@ -9,7 +9,7 @@ export const initLocalizationContext = () => {
 	const i18n = new I18nService();
 	const tranlator = new I18NextTranslationService(i18n);
 
-	// Setting the Svelte context
+	// skipcq: JS-0357
 	setLocalization({
 		t: tranlator.translate,
 		currentLanguage: tranlator.locale

frontend/src/lib/landing-promo.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	/*	import AdminOverviewScreenshot from '$lib/assets/landing/admin_overview.png';
+	import SelectScreenshot from '$lib/assets/landing/select.webp';
+	import ResultsScreenshot from '$lib/assets/landing/results.webp';
+	import SolutionScreenshot from '$lib/assets/landing/solution.webp';*/
+	import SelectMockup from '$lib/assets/landing/select-mockup.webp';
+	import ResultsMockup from '$lib/assets/landing/results-mockup.webp';
+	import SolutionMockup from '$lib/assets/landing/solution-mockup.webp';
+</script>
+
+<div class="grid grid-cols-3 grow pt-4">
+	<h1 class="text-center h-fit text-3xl marck-script">1: Answer</h1>
+	<h1 class="text-center h-fit text-3xl marck-script">2: See what was right or wrong</h1>
+	<h1 class="text-center h-fit text-3xl marck-script">3: See how many were right or wrong</h1>
+
+	<div class="flex justify-center">
+		<img src={SelectMockup} class="max-h-80" alt="Select answer" />
+	</div>
+	<div class="flex justify-center">
+		<img src={SolutionMockup} class="max-h-80" alt="See right and wrong solutions" />
+	</div>
+	<div class="flex justify-center">
+		<img
+			src={ResultsMockup}
+			class="max-h-80"
+			alt="See results in comparison with other players"
+		/>
+	</div>
+</div>

frontend/src/routes/edit.svelte

@@ -1,5 +1,6 @@
 <script lang="ts" context="module">
 	import { signedIn } from '$lib/stores';
+
 	export async function load({ url, session }) {
 		if (!session.authenticated) {
 			return {
@@ -29,6 +30,7 @@
 	import Editor from '$lib/editor.svelte';
 	import { getLocalization } from '$lib/i18n';
 	import { navbarVisible } from '$lib/stores';
+	import { onMount } from 'svelte';
 
 	navbarVisible.set(true);
 
@@ -60,6 +62,19 @@
 	export let quiz_id: string;
 	let data: Data;
 
+	onMount(() => {
+		const from_localstorage = localStorage.getItem('edit_game');
+		if (from_localstorage === null) {
+			data = {
+				description: '',
+				public: false,
+				title: '',
+				questions: [{ question: '', time: '20', answers: [{ right: false, answer: '' }] }]
+			};
+		} else {
+			data = JSON.parse(from_localstorage);
+		}
+	});
 	const get_quiz = async (): Promise<void> => {
 		const response = await fetch(`/api/v1/quiz/get/${quiz_id}`);
 		if (response.status === 404) {
@@ -78,7 +93,8 @@
 			}
 		});
 		if (res.status === 401) {
-			throw new Error('Unauthorized');
+			localStorage.setItem('edit_game', JSON.stringify(data));
+			window.location.href = '/account/login';
 		} else if (res.status === 404) {
 			throw new Error('Quiz not found');
 		} else if (res.status === 200) {

frontend/src/routes/index.svelte

@@ -14,6 +14,7 @@
 	import { getLocalization } from '$lib/i18n';
 	import Footer from '$lib/footer.svelte';
 
+	import LandingPromo from '$lib/landing-promo.svelte';
 	const { t } = getLocalization();
 
 	navbarVisible.set(true);
@@ -54,6 +55,10 @@
 			</p>
 		</div>
 	</section>
+
+	<section>
+		<LandingPromo />
+	</section>
 	<section id="features">
 		<div class="text-center pt-24 snap-y">
 			<h1 class="sm:text-6xl text-4xl">{$t('words.features')}</h1>