BlurCard and Background image

client/.vscode/extensions.json

@@ -1,6 +1,7 @@
 {
 	"recommendations": [
 		"svelte.svelte-vscode",
-		"bradlc.vscode-tailwindcss"
+		"bradlc.vscode-tailwindcss",
+		"fivethree.vscode-svelte-snippets"
 	]
 }

client/public/index.html

@@ -4,7 +4,7 @@
 	<meta charset='utf-8'>
 	<meta name='viewport' content='width=device-width,initial-scale=1'>
 
-	<title>Svelte app</title>
+	<title>FOXBANK</title>
 
 	<link rel='icon' type='image/png' href='/favicon.png'>
 	<link rel='stylesheet' href='/build/bundle.css'>

client/src/App.svelte

@@ -1,15 +1,22 @@
 <script>
-	import Card from "./Card.svelte";
+import Login from "./Login.svelte";
+import MainPage from "./MainPage.svelte";
 
-
-	export let name;
+	let loggedin = false;
+	function toggleLoggedIn() {
+		loggedin = !loggedin;
+	}
 </script>
 
-<main>
-	<h1 class="text-yellow-400">Hello {name}!</h1>
-	<p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
-	<Card title="Test" text="123"></Card>
-	<Card title="Test 2" text="Hello, world!"></Card>
+<main class="bg-banner bg-cover bg-center h-screen">
+	<button on:click={toggleLoggedIn}>
+		toggle
+	</button>
+	{#if loggedin}
+		<MainPage></MainPage>
+	{:else}
+		<Login></Login>
+	{/if}
 </main>
 
 <style global lang="postcss">

client/src/Button.svelte

@@ -0,0 +1,11 @@
+<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>

client/src/CardBG.svelte

@@ -0,0 +1,22 @@
+<script>
+	export let width;
+	export let height;
+</script>
+
+<main>
+	<figure class="rounded-x p-3 m-14" style="--width: {width}; --height: {height};">
+		<slot></slot>
+	</figure>
+</main>
+
+<style>
+	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

@@ -0,0 +1,11 @@
+<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>

client/src/Login.svelte

@@ -0,0 +1,15 @@
+<script>
+import CardBG from "./CardBG.svelte";
+
+
+
+</script>
+
+<main>
+    <div class="container h-screen flex flex-col justify-center">
+        <CardBG width="464px" height="550px">
+            <h1>Login</h1>
+        </CardBG>
+    </div>
+    
+</main>

client/src/MainPage.svelte

@@ -0,0 +1,7 @@
+<script>
+
+</script>
+
+<main>
+    <h1>Main</h1>
+</main>

client/src/main.js

@@ -2,9 +2,6 @@ import App from './App.svelte';
 
 const app = new App({
 	target: document.body,
-	props: {
-		name: 'world'
-	}
 });
 
 export default app;

client/tailwind.config.js

@@ -8,7 +8,11 @@ module.exports = {
   },
   darkMode: false, // or 'media' or 'class'
   theme: {
-    extend: {},
+    extend: {
+      backgroundImage:{
+        "banner":"url('/img/Banner.jpg')"
+      }
+    },
   },
   variants: {
     extend: {},