feat: init login page

frontend/src/lib/components/DarkModeToggle.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	let backgroundColor: 'white' | 'black' = 'white';
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	class:blue={backgroundColor === 'white'}
+	class:white={backgroundColor === 'black'}
+	viewBox="0 0 24 24"
+	stroke-width="2"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+>
+	<circle cx="12" cy="12" r="5" />
+	<g>
+		<line x1="12" y1="1" x2="12" y2="3" />
+		<line x1="12" y1="21" x2="12" y2="23" />
+		<line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
+		<line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+		<line x1="1" y1="12" x2="3" y2="12" />
+		<line x1="21" y1="12" x2="23" y2="12" />
+		<line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
+		<line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+	</g>
+</svg>
+
+<style>
+    svg {
+        @apply w-12 h-12;
+    }
+	.blue {
+		@apply stroke-sspsBlue fill-sspsBlue;
+	}
+	.white {
+        @apply stroke-white fill-white;
+    }
+</style>

frontend/src/lib/components/layout/SplitLayout.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+	import backgroundImage from '$lib/assets/background.jpg';
+	import logo from '$lib/assets/logo/ssps.svg';
+	import DarkModeToggle from '../DarkModeToggle.svelte';
+</script>
+
+<div class="bg">
+	<div class="bgOverlay">
+		<img class="logo" src={logo} alt="SSPŠ logo" />
+	</div>
+	<div style={`background-image: url(${backgroundImage});`} class="bgImage" />
+</div>
+<div class="view">
+	<div class="content">
+		<slot />
+	</div>
+</div>
+
+<style>
+	.bgImage {
+		@apply -z-20;
+		@apply absolute min-w-screen md:min-w-[50vw] min-h-screen;
+		@apply bg-no-repeat;
+		background-position: 55%;
+	}
+	.bgOverlay {
+		@apply -z-10 absolute min-w-screen md:min-w-[50vw] min-h-screen;
+		background: linear-gradient(45deg, rgba(18, 48, 75, 1), rgba(119, 173, 224, 0.443));
+		@apply bg-cover;
+	}
+	.bgOverlay .logo {
+        @apply hidden md:block;
+		@apply h-auto max-w-56 p-7;
+	}
+	.darkModeToggle {
+		@apply w-full;
+		@apply hidden md:inline-block;
+		@apply p-7;
+	}
+	.view {
+		@apply z-10 overflow-scroll;
+		@apply rounded-lg md:rounded-none;
+		@apply absolute w-[90vw] h-[85vh] top-0 md:top-auto right-0 bottom-0 md:bottom-auto left-0 md:left-auto m-auto md:m-0;
+		@apply md:w-[50vw] md:h-screen;
+		@apply md:my-auto;
+		@apply bg-white;
+	}
+    .content {
+        @apply w-full h-full;
+    }
+</style>

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

@@ -0,0 +1,2 @@
+<h1 class="text-6xl">Welcome to SvelteKit</h1>
+<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>

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

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import lev from '$lib/assets/logo/lev.png';
+	import SplitLayout from '$lib/components/layout/SplitLayout.svelte';
+</script>
+
+<SplitLayout>
+	<div class="form">
+		<div
+			class="py-3 px-6 md:py-4 md:px-8 rounded-[999px] shadow-lg flex items-center justify-center"
+		>
+			<img class="object-cover" src={lev} alt="" />
+		</div>
+		<h1 class="mt-6 text-4xl text-[#406280] font-semibold">Přihlášení</h1>
+		<p class="mt-6 font-light text-[#e6e6e6] text-center">
+			Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br /> Fusce suscipit libero eget elit.
+		</p>
+		<input
+			class="mt-6 w-3/5 shadow-lg p-3 rounded-lg text-xl"
+			type="text"
+			placeholder="Evidenční číslo přihlášky"
+		/>
+		<input
+			class="mt-6 w-3/5 shadow-lg p-3 rounded-lg text-xl border border-[#406280] border-2"
+			type="password"
+			value="............"
+		/>
+		<input
+			class="mt-6 w-3/5 p-3 rounded-lg font-semibold text-xl bg-[#406280] text-white"
+			type="submit"
+			value="Odeslat"
+		/>
+	</div>
+</SplitLayout>
+
+<style>
+	.form {
+
+		@apply flex flex-col;
+		@apply mx-auto w-[90%] h-full;
+		@apply items-center justify-center;
+	}
+</style>