🚸 Added docs how to import from kahoot

frontend/package.json

@@ -18,6 +18,7 @@
 		"@sveltejs/adapter-auto": "next",
 		"@sveltejs/adapter-node": "^1.0.0-next.70",
 		"@sveltejs/kit": "next",
+		"@tailwindcss/typography": "^0.5.0-alpha.3",
 		"@types/luxon": "^2.0.9",
 		"@types/yup": "^0.29.13",
 		"@typescript-eslint/eslint-plugin": "^5.10.1",

frontend/src/routes/docs/import-from-kahoot.svelte

@@ -0,0 +1,20 @@
+<article
+	class='prose prose-sm sm:prose lg:prose-lg xl:prose-xl mx-auto mt-10 prose-pink text-yellow-50 px-4'
+>
+	<h1>Import Quizzes from Kahoot into ClassQuiz</h1>
+
+	<p>All in all, this procedure is pretty simple, so just go to <a href='https://create.kahoot.it/discover'
+																	 rel='nofollow' target='_blank'>create.kahoot.it/discover</a>,
+		find the quiz you want to import, so click on it and copy the URL into your clipboard. Then go to <a
+			href='https://classquiz.mawoka.eu/import' rel='nofollow' target='_blank'>classquiz.mawoka.eu/import</a> and paste
+		the url into the text field.
+	</p>
+
+	<h2>Limitations</h2>
+	<ul>
+		<li>Videos don't get imported</li>
+		<li>Pictures don't get imported</li>
+		<li>Metadata doesn't get imported</li>
+		<li>Point-multipliers don't get imported</li>
+	</ul>
+</article>

frontend/src/routes/import.svelte

@@ -110,7 +110,6 @@
 							</div>
 						</div>
 
-
 						<div class='flex items-center justify-between mt-4'>
 							<span></span>
 
@@ -141,6 +140,19 @@
 					</div>
 				</form>
 			</div>
+			<div
+				class='flex items-center justify-center py-4 text-center bg-gray-50 dark:bg-gray-700'
+			>
+				<span class='text-sm text-gray-600 dark:text-gray-200'
+				>Need help?
+				</span>
+
+				<a
+					href='/docs/import-from-kahoot'
+					class='mx-2 text-sm font-bold text-blue-500 dark:text-blue-400 hover:underline'
+				>Visit the docs</a
+				>
+			</div>
 		</div>
 	</div>
 </div>

frontend/tailwind.config.cjs

@@ -2,10 +2,64 @@ const config = {
 	content: ['./src/**/*.{html,js,svelte,ts}'],
 
 	theme: {
-		extend: {}
+		extend: {
+			colors: {
+				green: {
+					600: '#009444'
+				}
+			},
+			typography: (theme) => ({
+				DEFAULT: {
+					css: {
+						color: theme('colors.yellow.50'),
+						textDecoration: 'none',
+						a: {
+							color: theme('colors.blue.200')
+						},
+						blockquote: {
+							color: theme('colors.yellow.50')
+						},
+						h1: {
+							color: theme('colors.yellow.50')
+						},
+						h2: {
+							color: theme('colors.yellow.50')
+						},
+						h3: {
+							color: theme('colors.yellow.50')
+						},
+						h4: {
+							color: theme('colors.yellow.50')
+						},
+						th: {
+							color: theme('colors.yellow.50')
+						},
+						strong: {
+							color: theme('colors.yellow.50')
+						},
+						'code::before': {
+							content: '""',
+							'padding-left': '0.25rem'
+						},
+						'code::after': {
+							content: '""',
+							'padding-right': '0.25rem'
+						},
+						code: {
+							'padding-top': '0.25rem',
+							'padding-bottom': '0.25rem',
+							fontWeight: '400',
+							color: theme('colors.gray.100'),
+							'border-radius': '0.25rem',
+							backgroundColor: theme('colors.slate.800')
+						}
+					}
+				}
+			})
+		}
 	},
 
-	plugins: []
+	plugins: [require('@tailwindcss/typography')]
 };
 
 module.exports = config;