feat: add admin login page

This commit is contained in:
EETagent 2022-11-25 14:46:07 +01:00
parent 661b60d85f
commit 4a7124b6bb
2 changed files with 54 additions and 0 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 767 KiB

View file

@ -0,0 +1,54 @@
<script lang="ts">
import lev from '$lib/assets/logo/lev.png';
import SplitLayout from '$lib/components/layout/SplitLayout.svelte';
import TextField from '$lib/components/textfield/TextField.svelte';
import background from '$lib/assets/background2.jpg';
let adminIdValue = '';
let adminPasswordValue = '';
</script>
<SplitLayout backgroundImage={background} backgroundPosition="30%">
<div class="form">
<div
class="py-3 px-6 md:py-4 md:px-8 rounded-[999px] shadow-2xl flex items-center justify-center"
>
<img class="object-cover" src={lev} alt="" />
</div>
<h1 class="mt-8 text-4xl text-sspsBlue font-semibold">Přihlášení</h1>
<p class="mt-8 font-light text-sspsGray text-center">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br /> Fusce suscipit libero eget elit.
</p>
<div class="w-3/5">
<TextField bind:value={adminIdValue} placeholder="Admin id" type="number" />
<TextField bind:value={adminPasswordValue} placeholder="Heslo" type="password" icon>
<div slot="icon" class="flex items-center justify-center">
<svg class="stroke-sspsBlue" fill="none" height="24" width="24" xmlns="http://www.w3.org/2000/svg"
><g class="fill-sspsBlue"
><path
d="M19.414 20.414l.707.707zm-14.828 0l-.707.707zm14.828-9.828l.707-.707zM8 11h8V9H8zm-3 6v-3H3v3zm11 3H8v2h8zm3-6v3h2v-3zm-3 8c.915 0 1.701.002 2.328-.082.655-.088 1.284-.287 1.793-.797l-1.414-1.414c-.076.076-.212.17-.646.229-.462.062-1.09.064-2.061.064zm3-5c0 .971-.002 1.599-.064 2.061-.059.434-.153.57-.229.646l1.414 1.414c.51-.51.709-1.138.797-1.793C21.002 18.7 21 17.915 21 17zM3 17c0 .915-.002 1.701.082 2.328.088.655.287 1.284.797 1.793l1.414-1.414c-.076-.076-.17-.212-.229-.646C5.002 18.6 5 17.971 5 17zm5 3c-.971 0-1.599-.002-2.061-.064-.434-.059-.57-.153-.646-.229l-1.414 1.414c.51.51 1.138.709 1.793.797C6.3 22.002 7.085 22 8 22zm8-9c.971 0 1.599.002 2.061.064.434.059.57.153.646.229l1.414-1.414c-.51-.51-1.138-.709-1.793-.797C17.7 8.998 16.915 9 16 9zm5 3c0-.915.002-1.701-.082-2.328-.088-.655-.287-1.284-.797-1.793l-1.414 1.414c.076.076.17.212.229.646.062.462.064 1.09.064 2.061zM8 9c-.915 0-1.701-.002-2.328.082-.655.088-1.284.287-1.793.797l1.414 1.414c.076-.076.212-.17.646-.229C6.4 11.002 7.029 11 8 11zm-3 5c0-.971.002-1.599.064-2.061.059-.434.153-.57.229-.646L3.879 9.879c-.51.51-.709 1.138-.797 1.793C2.998 12.3 3 13.085 3 14z"
/><path
d="M16 6h-1zm-8 4h1V6.5H7V10zm1-3.5c0-1.174.447-1.718.942-2.026C10.514 4.12 11.293 4 12 4V2c-.856 0-2.077.131-3.114.776C7.772 3.468 7 4.674 7 6.5zM12 4c.706 0 1.514.118 2.108.441.524.285.892.72.892 1.559h2c0-1.66-.85-2.726-1.937-3.316C14.05 2.132 12.856 2 12 2zm3 2v4h2V6z"
/></g
></svg
>
</div>
</TextField>
</div>
<input
class="mt-8 w-3/5 p-3 rounded-lg font-semibold text-xl transition-colors duration-300 bg-sspsBlue hover:bg-sspsBlueDark 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>