Layout fix

src/app.html

@@ -4,7 +4,12 @@
 		<meta charset="utf-8" />
 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
 		<meta name="viewport" content="width=device-width" />
-		<link rel="manifest" crossorigin="use-credentials" href="manifest.json" hreflang="en" />
+		<link
+			rel="manifest"
+			crossorigin="use-credentials"
+			href="%sveltekit.assets%/manifest.json"
+			hreflang="en"
+		/>
 
 		%sveltekit.head%
 	</head>

src/lib/elements/Input.svelte

@@ -1,22 +1,29 @@
 <script lang="ts">
 	import { focusedInputStore } from '$lib/stores'
 	import { makeid } from '$lib/utils/tools'
+	import { onMount } from 'svelte'
 
 	export let id: string = makeid(3)
 	export let value: string
+	export let type: string = 'number'
 	export let placeholder: string = ''
 	export let disabled: boolean = false
 	export let classNames: string = ''
 
 	let inputRef: HTMLInputElement
+
+	onMount(() => {
+		if (inputRef) {
+			inputRef.type = type
+		}
+	})
 </script>
 
 <input
 	bind:this={inputRef}
 	{id}
 	{disabled}
 	class="input-field focus:!border-[1.5px] focus:!border-teal-500 focus:outline-none {classNames}"
-	type="number"
 	{placeholder}
 	bind:value
 	on:keydown

src/routes/auth/+layout.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { page } from '$app/stores'
+	import { PUBLIC_MIX_TOKEN } from '$env/static/public'
+	import '$lib/app.css'
+	import '@fontsource/jost'
+
+	//Import Mixpanel SDK
+	import mixpanel from 'mixpanel-browser'
+	mixpanel.init(PUBLIC_MIX_TOKEN, {
+		debug: false,
+		track_pageview: true,
+		persistence: 'localStorage'
+	})
+</script>
+
+<main class="h-[100svh] flex flex-col">
+	<nav>
+		<div class="flex justify-center py-2">
+			<p class="text-center text-2xl text-red-600 font-semibold">Molla Printing & Packaging</p>
+		</div>
+		<div
+			class="w-full max-w-6xl mx-auto bg-gradient-to-r from-transparent via-orange-800/40 to-transparent p-[1px]"
+		/>
+	</nav>
+	<slot />
+
+	<div class="absolute bottom-0 w-full">
+		<p class="text-center text-gray-400">
+			&#x1F4BB;Developed by <a href="https://github.com/prokawsar" target="_blank">ProKawsar</a
+			>&#x1F60E;
+		</p>
+	</div>
+</main>

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

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { page } from '$app/stores'
+	import Button from '$lib/elements/Button.svelte'
+	import Input from '$lib/elements/Input.svelte'
+	let email = ''
+</script>
+
+<svelte:head>
+	<title>Login</title>
+</svelte:head>
+
+<section class="max-w-6xl mx-auto flex w-full max-h-[90%] flex-col gap-4 px-4 py-5">
+	<h1 class="text-xl text-center">Login</h1>
+	<div class="w-full bg-gradient-to-r from-transparent via-slate-600/10 to-transparent p-[1px]" />
+
+	<div class="flex w-full flex-col gap-3 items-center">
+		<Input type="email" bind:value={email} classNames="!w-full" placeholder="Type your email" />
+		<Button text="Login with OTP" />
+	</div>
+</section>