Main Page

Details card
Logout button
Notification button

client/package.json

@@ -8,6 +8,7 @@
     "start": "sirv public --no-clear"
   },
   "devDependencies": {
+    "@iconify/svelte": "^2.1.0",
     "@rollup/plugin-commonjs": "^17.0.0",
     "@rollup/plugin-node-resolve": "^11.0.0",
     "rollup": "^2.3.4",

client/src/App.svelte

@@ -1,6 +1,9 @@
 <script>
+import BottomBorder from "./BottomBorder.svelte";
+
 import Login from "./Login.svelte";
 import MainPage from "./MainPage.svelte";
+import TopBorder from "./TopBorder.svelte";
 
 	let loggedin = false;
 	function toggleLoggedIn() {
@@ -9,13 +12,19 @@ import MainPage from "./MainPage.svelte";
 </script>
 
 <main class="bg-banner bg-cover bg-center h-screen font-sans">
+	<TopBorder></TopBorder>
+	<BottomBorder></BottomBorder>
 	{#if loggedin}
-		<MainPage></MainPage>
+		<MainPage on:logOut={toggleLoggedIn}></MainPage>
 	{:else}
 		<Login on:loginSuccess={toggleLoggedIn}></Login>
 	{/if}
 </main>
 
+<svelte:head>
+	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
+</svelte:head>
+
 <style global lang="postcss">
 	
 	@import url('https://fonts.googleapis.com/css2?family=Geo&family=Roboto&family=Rochester&display=swap');

client/src/BottomBorder.svelte

@@ -0,0 +1,22 @@
+<script>
+
+</script>
+
+<main>
+	<div >
+
+    </div>
+</main>
+
+<style>
+	div{
+        width:100%;
+        height:80px;
+        background:#00f;
+        position:fixed;
+        bottom:0;
+        left:0;
+        
+        background: linear-gradient(270.31deg, rgba(38, 77, 89, 0.7) 21.94%, rgba(38, 77, 89, 0) 89.29%);
+    }
+</style>

client/src/MainPage.svelte

@@ -1,7 +1,64 @@
 <script>
+    import Icon from '@iconify/svelte';
+    
+        import CardBG from "./CardBG.svelte";
+        import {createEventDispatcher} from 'svelte';
+        
+        const dispatch = createEventDispatcher();
+    
+        let username = "Firstname Lastname";
+        let code = "";
+        let totalbalance = "2455,22";
+        let accountnr = "2";
+        let maincurrency = "RON"
+    
+        function dispatchLogout(){
+            //todo: CHeck here 
+            dispatch("logOut",null);
+        }
 
-</script>
+        function showNotifications(){
+            //todo: CHeck here 
+            dispatch("showNotifications",null);
+        }
+    
+    </script>
+
+    <main>
+ 
+        <div class="container h-screen flex flex-col justify-center">
+            <CardBG width="514px" height="600px" class="flex flex-col items-stretch">
+                <div class="flex flex-row"> 
+                    <h1 class='font-sans text-5xl text-gray-50 m-6 border-b-2'>{username}</h1>
+                    <button on:click={showNotifications} style=" filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));"> <Icon icon="akar-icons:envelope" color="#FB6666" width="64" height="64" /></button>
+                </div>
+               
+                <div class="m-3 flex-shrink">
+                    <h2 class='font-sans text-4xl text-gray-50'>Total balance: <span style="color: #264D59">{totalbalance}</span>{maincurrency}</h2>
+                    <p class='font-sans text-1xl text-gray-50 m-2'>➜ from {accountnr} accounts</p>
+                </div>
+                
+                <div class="m-3 flex-shrink">
+                    <h2 class='font-sans text-4xl text-gray-50'>Total balance: <span style="color: #264D59">{totalbalance}</span>{maincurrency}</h2>
+                    <p class='font-sans text-1xl text-gray-50 m-2'>➜ from {accountnr} accounts</p>
+                </div>
+                
+                <div class="flex-grow"></div>
+                <div class="flex-grow"></div>
+                <div class="flex-grow"></div>
+    
+                <div class="flex flex-row">
+                        <button on:click={dispatchLogout}> <Icon icon="ri:logout-box-line" color="gray" width="44" height="44"/></button>
+                        <div class="flex-grow"></div>
+                        <div class="flex-grow"></div>
+                        <div class="flex-grow"></div>
+                        <div class="flex-grow"></div>
+                        <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'>Feedback</a>
+                </div>
+                
+            </CardBG>
+        </div>
+        
+    </main>
 
-<main>
-    <h1>Main</h1>
-</main>

client/src/TopBorder.svelte

@@ -0,0 +1,22 @@
+<script>
+
+</script>
+
+<main>
+	<div >
+        <h1 class="font-title text-7xl text-gray-50">FOXBANK</h1>
+    </div>
+</main>
+
+<style>
+	div{
+        width:100%;
+        height:80px;
+        background:#00f;
+        position:fixed;
+        top:0;
+        left:0;
+        
+        background: linear-gradient(90.12deg, rgba(38, 77, 89, 0.7) 19.7%, rgba(38, 77, 89, 0) 93.77%);
+    }
+</style>