Login Page

client/src/App.svelte

@@ -8,18 +8,18 @@ import MainPage from "./MainPage.svelte";
 	}
 </script>
 
-<main class="bg-banner bg-cover bg-center h-screen">
-	<button on:click={toggleLoggedIn}>
-		toggle
-	</button>
+<main class="bg-banner bg-cover bg-center h-screen font-sans">
 	{#if loggedin}
 		<MainPage></MainPage>
 	{:else}
-		<Login></Login>
+		<Login on:loginSuccess={toggleLoggedIn}></Login>
 	{/if}
 </main>
 
 <style global lang="postcss">
+	
+	@import url('https://fonts.googleapis.com/css2?family=Geo&family=Roboto&family=Rochester&display=swap');
+
 	@tailwind base;
 	@tailwind components;
 	@tailwind utilities;

client/src/Button.svelte

@@ -1,11 +1,18 @@
 <script>
-	export let title;
-	export let text;
+
 </script>
 
 <main>
-	<figure class="bg-gray-100 rounded-xl p-3 m-2">
-		<h1 class="text-lg font-bold">{title}</h1>
-		<p class="text-gray-900">{text}</p>
-	</figure>
-</main>
+	<button on:click class="rounded-2xl p-6 w-full text-center text-3xl text-gray-50">
+		<slot></slot>
+	</button>
+</main>
+
+<style>
+	button{
+		background: linear-gradient(272.39deg, rgba(247, 175, 67, 0.93) -34.2%, rgba(245, 72, 17, 0.93) 100%);
+		box-shadow: 0px 8px 4px rgba(0, 0, 0, 0.25);
+		border-radius: 20px;
+	}
+
+</style>

client/src/CardBG.svelte

@@ -1,10 +1,13 @@
 <script>
 	export let width;
 	export let height;
+
+	let clazz;
+	export {clazz as class}
 </script>
 
 <main>
-	<figure class="rounded-x p-3 m-14" style="--width: {width}; --height: {height};">
+	<figure class="rounded-x p-3 m-14 {clazz}" style="--width: {width}; --height: {height};">
 		<slot></slot>
 	</figure>
 </main>
@@ -13,10 +16,9 @@
 	figure{
 		width: var(--width);
 		height: var(--height);
-		
+
 		background: linear-gradient(165.31deg, rgba(67, 151, 141, 0.44) 18.49%, rgba(67, 151, 141, 0) 97.15%);
 		box-shadow: 0px 13px 6px 4px rgba(0, 0, 0, 0.25);
 		backdrop-filter: blur(12px);
 	}
-
 </style>

client/src/InputField.svelte

@@ -1,11 +1,22 @@
 <script>
-	export let title;
-	export let text;
+	export let isPassword;
+	export let placeholder;
+	export let value;
+
+	const handleInput = e => {
+		value = e.target.value;
+	}
 </script>
 
 <main>
-	<figure class="bg-gray-100 rounded-xl p-3 m-2">
-		<h1 class="text-lg font-bold">{title}</h1>
-		<p class="text-gray-900">{text}</p>
-	</figure>
-</main>
+	<input type={isPassword ? "password" : "text"} placeholder={placeholder} value={value} on:input={handleInput} class="placeholder-gray-300 p-3 text-gray-50 w-full text-3xl">
+</main>
+
+<style>
+	input{
+		background: linear-gradient(92.55deg, rgba(76, 172, 135, 0.95) -28.27%, rgba(249, 224, 127, 0.096) 115.79%);
+		filter: drop-shadow(0px 8px 4px rgba(0, 0, 0, 0.25));
+		border-radius: 3px;
+	}
+
+</style>

client/src/Login.svelte

@@ -1,14 +1,47 @@
 <script>
-import CardBG from "./CardBG.svelte";
+import Button from "./Button.svelte";
 
+    import CardBG from "./CardBG.svelte";
+    import InputField from "./InputField.svelte";
+    import {createEventDispatcher} from 'svelte';
+    
+    const dispatch = createEventDispatcher();
 
+    let username = "";
+    let code = "";
+
+    function checkLogin(){
+        //todo: CHeck here 
+        dispatch("loginSuccess",null);
+    }
 
 </script>
 
 <main>
     <div class="container h-screen flex flex-col justify-center">
-        <CardBG width="464px" height="550px">
-            <h1>Login</h1>
+        <CardBG width="464px" height="550px" class="flex flex-col items-stretch">
+            <h1 class='font-welcome text-7xl text-gray-50 m-6 border-b-2'>Welcome,</h1>
+            <div class="m-3 flex-shrink">
+                <InputField placeholder="Username" isPassword={false} value={username}></InputField>
+            </div>
+            
+            <div class="m-3 flex-shrink">
+                <InputField placeholder="Code" isPassword={true} value={code}></InputField>
+            </div>
+
+            <div class="m-3 flex-shrink"> 
+                <Button on:click={checkLogin}>Login</Button>
+            </div>
+            
+            <div class="flex-grow">
+                
+            </div>
+
+            <div class="flex">
+                    <a href='https://google.com' class='text-3xl text-gray-400 m-6 flex-auto text-center'>Help!</a>
+                    <a href='https://google.com' class='text-3xl text-gray-400 m-6 flex-auto text-center'>Can't login?</a>
+            </div>
+            
         </CardBG>
     </div>
     

client/tailwind.config.js

@@ -11,7 +11,13 @@ module.exports = {
     extend: {
       backgroundImage:{
         "banner":"url('/img/Banner.jpg')"
-      }
+      },
+
+      fontFamily:{
+        "title":['Geo', 'sans-serif'],
+        "welcome":['Rochester', 'cursive'],
+        "sans":['Roboto', 'sans-serif']
+      },
     },
   },
   variants: {