kbruen/foxbank
1
0
Fork 0
mirror of https://github.com/dancojocaru2000/foxbank.git synced 2025-02-22 23:39:36 +02:00
Code Releases Activity

Main Page

Browse source 
Details card
Logout button
Notification button
This commit is contained in:
DariusTFox24 2021-11-16 22:09:01 +02:00
parent 46529ddd38
commit 2d0bee72ff
6 changed files with 2382 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2268
client/package-lock.json generated
View file

File diff suppressed because it is too large Load diff

1
client/package.json
View file

@ -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",

11
client/src/App.svelte
View file

@ -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');

22
client/src/BottomBorder.svelte Normal file
View file

@ -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>

65
client/src/MainPage.svelte
View file

@ -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>

22
client/src/TopBorder.svelte Normal file
View file

@ -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>