kbruen
/
foxbank
mirror of https://github.com/dancojocaru2000/foxbank.git
1
0
Fork 0
Code Releases Activity
Browse Source

Overlay pages [notifications, account creation, send money]

pull/4/head
DariusTFox 3 years ago
parent
0bfc0d473d
commit
8442d4f755
10 changed files with 257 additions and 121 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 7
      client/src/AccountCard.svelte
  2. 51
      client/src/App.svelte
  3. 3
      client/src/CardBG.svelte
  4. 8
      client/src/CheckNotifications.svelte
  5. 67
      client/src/CreateAccount.svelte
  6. 35
      client/src/MainPage.svelte
  7. 5
      client/src/OrangeButton.svelte
  8. 36
      client/src/Overlay.svelte
  9. 96
      client/src/SendMoney.svelte
  10. 48
      client/src/TextareaField.svelte

7
client/src/AccountCard.svelte
Unescape View File

@ -41,7 +41,12 @@
//todo: CHeck here //todo: CHeck here
dispatch("createPopup",{ dispatch("createPopup",{
type: 'send_money', type: 'send_money',
iban, account: {
type,
currency,
balance,
iban,
}
}); });
} }
</script> </script>

51
client/src/App.svelte
Unescape View File

@ -5,6 +5,8 @@ import CreateAccount from "./CreateAccount.svelte";
import Login from "./Login.svelte"; import Login from "./Login.svelte";
import MainPage from "./MainPage.svelte"; import MainPage from "./MainPage.svelte";
import Overlay from "./Overlay.svelte";
import SendMoney from "./SendMoney.svelte";
import TopBorder from "./TopBorder.svelte"; import TopBorder from "./TopBorder.svelte";
let loggedin = true; let loggedin = true;
@ -26,6 +28,15 @@ import TopBorder from "./TopBorder.svelte";
break; break;
case "create_acc_success": case "create_acc_success":
var today = new Date();
var date = today.getDate()+'/'+(today.getMonth()+1)+'/'+today.getFullYear();
var time = today.getHours() + ":" + today.getMinutes();
notifications.push(
{
text: "The new account '" + event.detail.type+ "' was created successfully!",
time: time + " " + date,
});
isCreatingAccount = false; isCreatingAccount = false;
break; break;
@ -39,7 +50,7 @@ import TopBorder from "./TopBorder.svelte";
break; break;
case "send_money": case "send_money":
sendingAccount = event.detail.iban; sendingAccount = event.detail.account;
isSendingMoney = true; isSendingMoney = true;
break; break;
@ -47,9 +58,8 @@ import TopBorder from "./TopBorder.svelte";
isSendingMoney = false; isSendingMoney = false;
break; break;
case "send_money_failed": case "send_money_success":
isSendingMoney = false; isSendingMoney = false;
alert(`Sending money failed! Reason: ${event.detail.reason}`);
break; break;
case "check_notifications": case "check_notifications":
@ -68,22 +78,41 @@ import TopBorder from "./TopBorder.svelte";
</script> </script>
<main class="flex flex-col items-stretch bg-banner bg-cover bg-center bg-fixed h-screen font-sans"> <main class="flex flex-col items-stretch bg-banner bg-cover bg-center bg-fixed h-screen font-sans">
{#if isCreatingAccount}
<CreateAccount on:createPopup={onCreatePopup}> </CreateAccount>
{:else if isCheckingNotifications}
<CheckNotifications on:createPopup={onCreatePopup} notifications={notifications}></CheckNotifications>
{:else if isSendingMoney}
<!-- else if content here -->
{/if}
<TopBorder class="flex-shrink"></TopBorder> <TopBorder class="flex-shrink"></TopBorder>
<div class="flex-grow max-h-full overflow-hidden"> <div class="flex-grow max-h-full overflow-hidden">
{#if loggedin} {#if loggedin}
<MainPage on:logOut={toggleLoggedIn} on:createPopup={onCreatePopup}></MainPage>
{#if isCreatingAccount}
<Overlay>
<div class="flex items-center justify-center h-full">
<CreateAccount class="" on:createPopup={onCreatePopup}> </CreateAccount>
</div>
</Overlay>
{:else if isCheckingNotifications}
<Overlay>
<div class="flex items-center justify-center h-full">
<CheckNotifications on:createPopup={onCreatePopup} notifications={notifications}></CheckNotifications>
</div>
</Overlay>
{:else if isSendingMoney}
<Overlay>
<div class="flex items-center justify-center h-full w-full">
<SendMoney on:createPopup={onCreatePopup} account={sendingAccount}></SendMoney>
</div>
</Overlay>
{/if}
<MainPage on:createPopup={onCreatePopup} on:logOut={toggleLoggedIn}></MainPage>
{:else} {:else}
<Login on:loginSuccess={toggleLoggedIn}></Login> <Login on:loginSuccess={toggleLoggedIn}></Login>
{/if} {/if}
</div> </div>
<BottomBorder class="flex-none"></BottomBorder> <BottomBorder class="flex-none"></BottomBorder>
</main> </main>
<svelte:head> <svelte:head>

3
client/src/CardBG.svelte
Unescape View File

@ -1,12 +1,13 @@
<script> <script>
export let width = "inherit"; export let width = "inherit";
export let height = "inherit"; export let height = "inherit";
export let padding = true;
let clazz; let clazz;
export {clazz as class} export {clazz as class}
</script> </script>
<main class="rounded-x p-3 m-14 {clazz}" style="--width: {width}; --height: {height};"> <main class="rounded-x {padding ? "p-3" : ""} m-14 {clazz}" style="--width: {width}; --height: {height};">
<slot></slot> <slot></slot>
</main> </main>

8
client/src/CheckNotifications.svelte
Unescape View File

@ -5,7 +5,7 @@
import Icon from "@iconify/svelte"; import Icon from "@iconify/svelte";
import { fade, fly, slide } from 'svelte/transition'; import { fade, fly, slide } from 'svelte/transition';
import { flip } from 'svelte/animate'; import { flip } from 'svelte/animate';
import DetailField from "./DetailField.svelte"; import DetailField from "./DetailField.svelte";
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
@ -19,15 +19,15 @@ import DetailField from "./DetailField.svelte";
</script> </script>
<div class="h-full self-center"> <div class="h-full self-center">
<div class="h-full flex flex-col justify-center items-center md:items-start"> <div class="h-full flex flex-col justify-center items-center md:items-start overflow-clip">
<CardBG class="flex flex-col items-stretch"> <CardBG class="flex flex-col items-stretch min-h-0">
<div class="flex flex-row"> <div class="flex flex-row">
<h1 class='font-sans text-4xl text-gray-50 mt-6 mx-6 mb-1'>Inbox</h1> <h1 class='font-sans text-4xl text-gray-50 mt-6 mx-6 mb-1'>Inbox</h1>
<button class="ml-auto mr-6" on:click={cancelCheckNotifications}> <Icon icon="akar-icons:cross" color="rgba(249, 250, 251, 1)" width="32" height="32" /> </button> <button class="ml-auto mr-6" on:click={cancelCheckNotifications}> <Icon icon="akar-icons:cross" color="rgba(249, 250, 251, 1)" width="32" height="32" /> </button>
</div> </div>
<div class="w-full max-w-md self-start border-solid border mb-3"></div> <div class="w-full max-w-md self-start border-solid border mb-3"></div>
<div class="flex flex-col flex-grow pl-8 pr-10 relative scroller overflow-auto overflow-x-hidden max-h-medium"> <div class="flex flex-col flex-grow pl-8 pr-10 relative scroller overflow-auto overflow-x-hidden max-h-full min-h-0">
{#each notifications as notification,i (i)} {#each notifications as notification,i (i)}
<div in:slide={{delay:100*i}} out:slide={{delay:50*(notifications.length-i)}}> <div in:slide={{delay:100*i}} out:slide={{delay:50*(notifications.length-i)}}>

67
client/src/CreateAccount.svelte
Unescape View File

@ -4,7 +4,10 @@
import CardBG from "./CardBG.svelte"; import CardBG from "./CardBG.svelte";
import InputField from "./InputField.svelte"; import InputField from "./InputField.svelte";
import {createEventDispatcher} from 'svelte'; import {createEventDispatcher} from 'svelte';
import Icon from "@iconify/svelte"; import Icon from "@iconify/svelte";
import Overlay from "./Overlay.svelte";
import { fade, fly, slide } from 'svelte/transition';
import { flip } from 'svelte/animate';
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
@ -24,7 +27,7 @@ import Icon from "@iconify/svelte";
alert("Terms of Service not accepted!"); alert("Terms of Service not accepted!");
}else{ }else{
//TODO Create account with provided details on the server //TODO Create account with provided details on the server
dispatch("createPopup",{type:"create_acc_success"}); dispatch("createPopup",{type:"create_acc_success", account:{type:type, currency:currency, transactions:[]}});
} }
} }
@ -42,39 +45,43 @@ import Icon from "@iconify/svelte";
</script> </script>
<div class="h-full self-center">
<div class="h-full flex flex-col justify-center items-center md:items-start">
<CardBG class="flex flex-col items-stretch">
<div class="flex flex-row">
<h1 class='font-sans text-4xl text-gray-50 mt-6 mx-6 mb-1'>Open a new account</h1>
<button class="ml-auto mr-6" on:click={cancelCreate}> <Icon icon="akar-icons:cross" color="rgba(249, 250, 251, 1)" width="32" height="32" /> </button>
</div>
<div class="w-full max-w-md self-start border-solid border-gray-50 border mb-3"></div>
<div class="mx-1 flex-shrink"> <div class="h-full self-center" in:fade={{duration:300}} out:fade={{duration:300}}>
<h2 class='font-sans text-2xl text-gray-50 mb-2 '>Account name:</h2> <div class="h-full flex flex-col justify-center items-center md:items-start">
<InputField placeholder="New Account" isPassword={false} bind:value={type}></InputField> <CardBG padding={false} class="flex flex-col items-stretch">
</div> <div class="m-3">
<div class="flex flex-row">
<h1 class='font-sans text-4xl text-gray-50 mt-6 mx-6 mb-1'>Open a new account</h1>
<button class="ml-auto mr-6" on:click={cancelCreate}> <Icon icon="akar-icons:cross" color="rgba(249, 250, 251, 1)" width="32" height="32" /> </button>
</div>
<div class="w-full max-w-md self-start border-solid border-gray-50 border mb-3"></div>
<div class="mx-1 flex-shrink"> <div class="mx-1 flex-shrink">
<h2 class='font-sans text-2xl text-gray-50 mb-2 '>Currency:</h2> <h2 class='font-sans text-2xl text-gray-50 mb-2 '>Account name:</h2>
<InputField placeholder="RON" isPassword={false} bind:value={currency}></InputField> <InputField placeholder="New Account" isPassword={false} bind:value={type}></InputField>
</div> </div>
<div class="mx-1 flex-shrink max-w-2xl"> <div class="mx-1 flex-shrink">
<h2 class=" font-sans text-2xl text-gray-50 mb-2 ">Terms of Service:</h2> <h2 class='font-sans text-2xl text-gray-50 mb-2 '>Currency:</h2>
<button class="mb-1" on:click={termsOfService}> <Icon icon={termsAccepted ? "akar-icons:check-box" : "akar-icons:box"} color="rgba(249, 250, 251, 1)" width="18" height="18" /> </button> <InputField placeholder="RON" isPassword={false} bind:value={currency}></InputField>
<h3 class="inline m-0 mb-0 text-gray-300"> I have read and accepted the <a class="font-sans text-gray-50" href="https://c.tenor.com/TVRtbC8jKY0AAAAC/positive-fox-you-can-do-it.gif" target="_blank">terms and conditions</a> for creating a new account at FOXBANK. </h3> </div>
</div>
<div class="mx-1 flex-shrink max-w-2xl">
<h2 class=" font-sans text-2xl text-gray-50 mb-2 ">Terms of Service:</h2>
<button class="mb-1" on:click={termsOfService}> <Icon icon={termsAccepted ? "akar-icons:check-box" : "akar-icons:box"} color="rgba(249, 250, 251, 1)" width="18" height="18" /> </button>
<h3 class="inline m-0 mb-0 text-gray-300"> I have read and accepted the <a class="font-sans text-gray-50" href="https://c.tenor.com/TVRtbC8jKY0AAAAC/positive-fox-you-can-do-it.gif" target="_blank">terms and conditions</a> for creating a new account at FOXBANK. </h3>
</div>
<div class="m-10"></div>
<div class="mx-1 flex-shrink"> <div class="m-10"></div>
<OrangeButton on:click={create}>Confirm</OrangeButton> </div>
</div>
</CardBG> <div class="flex-shrink flex flex-row mb-4" style="background: linear-gradient(89.1deg, rgba(236, 98, 68, 0.95) 0.77%, rgba(236, 98, 68, 0) 99.12%);">
</div> <div class="flex-1"></div>
<OrangeButton class="flex-1 m-4" on:click={create}>Confirm</OrangeButton>
</div>
</CardBG>
</div>
</div> </div>

35
client/src/MainPage.svelte
Unescape View File

@ -11,7 +11,7 @@
let username = "Firstname Lastname"; let username = "Firstname Lastname";
let code = ""; let code = "";
let totalbalance = "2455,22"; let totalbalance = "2455.22";
let maincurrency = "RON"; let maincurrency = "RON";
let expandedAccount = null; let expandedAccount = null;
let showAllAccounts = true; let showAllAccounts = true;
@ -21,35 +21,32 @@
{time: "15:38 27/11/2021", text: "A notification's text but way longer absdb aybdbaysbdya bybdabs bdabsd absdb aybdbaysbdya bybdabs bdabsd absdb aybdbaysbdya bybdabs bdabsd absdb aybdbaysbdya bybdabs bdabsd absdb aybdbaysbdya bybdabs bdabsd absdb aybdbaysbdya bybdabs bdabsd absdb aybdbaysbdya bybdabs bdabsd absdb aybdbaysbdya bybdabs bdabsd absdb aybdbaysbdya bybdabs bdabsd."}, {time: "15:38 27/11/2021", text: "A notification's text but way longer absdb aybdbaysbdya bybdabs bdabsd absdb aybdbaysbdya bybdabs bdabsd absdb aybdbaysbdya bybdabs bdabsd absdb aybdbaysbdya bybdabs bdabsd absdb aybdbaysbdya bybdabs bdabsd absdb aybdbaysbdya bybdabs bdabsd absdb aybdbaysbdya bybdabs bdabsd absdb aybdbaysbdya bybdabs bdabsd absdb aybdbaysbdya bybdabs bdabsd."},
{time: "15:38 27/11/2021", text: "A notification's text."}, {time: "15:38 27/11/2021", text: "A notification's text."},
{time: "15:38 27/11/2021", text: "A notification's text."}, {time: "15:38 27/11/2021", text: "A notification's text."},
{time: "15:38 27/11/2021", text: "A notification's text."},
{time: "15:38 27/11/2021", text: "A notification's text."},
{time: "15:38 27/11/2021", text: "A notification's text."},
]; ];
let accounts = [ let accounts = [
{type:"RON Account", currency:"RON", balance:"420,42", iban:"RONFOX62188921", {type:"RON Account", currency:"RON", balance:"420.42", iban:"RONFOX62188921",
transactions: [ transactions: [
{title:"Transaction Name#1", status:"PROCESSED", amount:"-45,09", time:"15:38 27/11/2021", type:"send"}, {title:"Transaction Name#1", status:"PROCESSED", amount:"-45.09", time:"15:38 27/11/2021", type:"send"},
{title:"Transaction Name#2", status:"PENDING", amount:"+25,00", time:"15:38 27/11/2021", type:"received"}, {title:"Transaction Name#2", status:"PENDING", amount:"+25.00", time:"15:38 27/11/2021", type:"received"},
{title:"Transaction Name#3", status:"CANCELLED", amount:"-469,09", time:"15:38 27/11/2021", type:"send"}, {title:"Transaction Name#3", status:"CANCELLED", amount:"-469.09", time:"15:38 27/11/2021", type:"send"},
{title:"Transaction Name#1", status:"PROCESSED", amount:"-45,09", time:"15:38 27/11/2021", type:"send"}, {title:"Transaction Name#1", status:"PROCESSED", amount:"-45.09", time:"15:38 27/11/2021", type:"send"},
{title:"Transaction Name#2", status:"PENDING", amount:"+25,00", time:"15:38 27/11/2021", type:"received"}, {title:"Transaction Name#2", status:"PENDING", amount:"+25.00", time:"15:38 27/11/2021", type:"received"},
{title:"Transaction Name#3", status:"CANCELLED", amount:"-469,09", time:"15:38 27/11/2021", type:"send"}, {title:"Transaction Name#3", status:"CANCELLED", amount:"-469.09", time:"15:38 27/11/2021", type:"send"},
{title:"Transaction Name#1", status:"PROCESSED", amount:"-45,09", time:"15:38 27/11/2021", type:"send"}, {title:"Transaction Name#1", status:"PROCESSED", amount:"-45.09", time:"15:38 27/11/2021", type:"send"},
{title:"Transaction Name#2", status:"PENDING", amount:"+25,00", time:"15:38 27/11/2021", type:"received"}, {title:"Transaction Name#2", status:"PENDING", amount:"+25.00", time:"15:38 27/11/2021", type:"received"},
{title:"Transaction Name#3", status:"CANCELLED", amount:"-469,09", time:"15:38 27/11/2021", type:"send"}, {title:"Transaction Name#3", status:"CANCELLED", amount:"-469.09", time:"15:38 27/11/2021", type:"send"},
] ]
}, },
{type:"EUR Account", currency:"EUR", balance:"620,42", iban:"EURFOX62188921", {type:"EUR Account", currency:"EUR", balance:"620,42", iban:"EURFOX62188921",
transactions: [ transactions: [
{title:"Transaction Name#2", status:"PENDING", amount:"+25,00", time:"15:38 27/11/2021", type:"received"}, {title:"Transaction Name#2", status:"PENDING", amount:"+25.00", time:"15:38 27/11/2021", type:"received"},
{title:"Transaction Name#1", status:"PROCESSED", amount:"-45,09", time:"15:38 27/11/2021", type:"send"}, {title:"Transaction Name#1", status:"PROCESSED", amount:"-45.09", time:"15:38 27/11/2021", type:"send"},
{title:"Transaction Name#3", status:"CANCELLED", amount:"-469,09", time:"15:38 27/11/2021", type:"send"}, {title:"Transaction Name#3", status:"CANCELLED", amount:"-469.09", time:"15:38 27/11/2021", type:"send"},
] ]
}, },
]; ];
function dispatchLogout(){ function dispatchLogout(){
//todo: CHeck here //todo: CHeck here
if (confirm("Log out?")) { if (confirm("Log out?")) {
@ -99,7 +96,7 @@
{#if showAllAccounts} {#if showAllAccounts}
{#each accounts as account,i} {#each accounts as account,i}
<div in:slide={{delay:500*i, duration:250*(i==0 ? 1 : i) }}> <div in:slide={{delay:500*i, duration:250*(i==0 ? 1 : i) }}>
<AccountCard type={account.type} currency={account.currency} balance={account.balance} iban={account.iban} transactions={account.transactions} isExpanded={false} on:expanded={() => expanded(i)}></AccountCard> <AccountCard type={account.type} currency={account.currency} balance={account.balance} iban={account.iban} transactions={account.transactions} isExpanded={false} on:expanded={() => expanded(i)} on:createPopup></AccountCard>
</div> </div>
{/each} {/each}
{/if} {/if}

5
client/src/OrangeButton.svelte
Unescape View File

@ -1,11 +1,12 @@
<script> <script>
import BaseButton from "./BaseButton.svelte"; import BaseButton from "./BaseButton.svelte";
let clazz = "";
export {clazz as class};
</script> </script>
<div class="orange"> <div class="orange {clazz}">
<BaseButton on:click> <BaseButton on:click>
<slot></slot> <slot></slot>
</BaseButton> </BaseButton>

36
client/src/Overlay.svelte
Unescape View File

@ -0,0 +1,36 @@
<script>
let clazz = "";
export {clazz as class}
</script>
<div id="overlay" class="overlay {clazz}">
<div class="overlay-content">
<slot></slot>
</div>
</div>
<style>
/* The Overlay (background) */
.overlay {
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
bottom: 0;
right: 0;
overflow-x: hidden; /* Disable horizontal scroll */
background: linear-gradient(165.31deg, rgba(67, 151, 141, 0.44) 18.49%, rgba(67, 151, 141, 0) 97.15%);
backdrop-filter: blur(6px);
transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}
/* Position the content inside the overlay */
.overlay-content {
position: relative;
/* top: 25%; 25% from the top */
width: 100%; /* 100% width */
height: 100%;
}
</style>

96
client/src/SendMoney.svelte
Unescape View File

@ -4,77 +4,89 @@
import CardBG from "./CardBG.svelte"; import CardBG from "./CardBG.svelte";
import InputField from "./InputField.svelte"; import InputField from "./InputField.svelte";
import {createEventDispatcher} from 'svelte'; import {createEventDispatcher} from 'svelte';
import Icon from "@iconify/svelte"; import Icon from "@iconify/svelte";
import Overlay from "./Overlay.svelte";
import TextareaField from "./TextareaField.svelte";
import { fade, fly, slide } from 'svelte/transition';
import { flip } from 'svelte/animate';
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
let type = ""; export let account={type: "", currency:"", balance:0};
let currencies = ["RON", "EUR"]; let receivername="";
let currency = currencies[0]; let receiveriban="";
let termsAccepted = false; let amount=0.00;
let description="";
let send_details={receivername:"", receiveriban:"", amount:0, description:""};
function create(){ function create(){
if(type == "" || type == null) { if(receivername == "" || receivername == null) {
alert("Account Name field can not be empty!"); alert("Receiver's name field can not be empty!");
console.debug(`account name: ${type}`) }else if(receiveriban == "" || receiveriban == null){
}else if(!currencies.includes(currency)){ alert("Receiver's iBan field can not be empty!");
alert("Currency is not supported!"); }else if (amount > parseFloat(account.balance) ){
}else if (!termsAccepted){ alert("Not enough money in your account!");
alert("Terms of Service not accepted!"); }else if (amount <= 0.00 ){
alert("Insert a valid amount!");
}else{ }else{
//TODO Create account with provided details on the server //TODO Create account with provided details on the server
dispatch("createPopup",{type:"create_acc_success"}); send_details={receivername:receivername, receiveriban:receiveriban, amount:amount, description:description}
dispatch("createPopup",{type:"send_money_success", send_details:{send_details}});
} }
} }
function cancelCreate(){ function cancelSend(){
dispatch("createPopup",{type:"create_acc_cancelled"}); dispatch("createPopup",{type:"send_money_cancelled"});
}
function failCreate(){
dispatch("createPopup",{type:"create_acc_failed", reason:"Invalid arguments. [type: "+type+", currency: "+currency});
} }
function termsOfService() {
termsAccepted = !termsAccepted;
}
</script> </script>
<div class="h-full self-center">
<div class="h-full flex flex-col justify-center items-center md:items-start"> <div class="h-full flex flex-col justify-center items-center md:items-start" in:fade={{duration:300}} out:fade={{duration:300}}>
<CardBG class="flex flex-col items-stretch"> <CardBG padding={false} class="flex flex-col items-stretch md:min-w-full">
<div class="flex flex-row"> <div class="flex-grow m-3 flex flex-col items-stretch">
<h1 class='font-sans text-4xl text-gray-50 mt-6 mx-6 mb-1'>Open a new account</h1> <div class="flex flex-row ">
<button class="ml-auto mr-6" on:click={cancelCreate}> <Icon icon="akar-icons:cross" color="rgba(249, 250, 251, 1)" width="32" height="32" /> </button> <h1 class='inline mt-6 mx-6 mb-1 font-sans text-4xl text-gray-50'>Send money</h1>
<span class="mb-1 ml-4 mr-2 mt-auto text-2xl text-gray-50"> from</span>
<span class="mb-1 mt-auto font-sans text-4xl">{account.type}</span>
<button class="mb-1 ml-auto" on:click={cancelSend}> <Icon icon="akar-icons:cross" color="rgba(249, 250, 251, 1)" width="32" height="32" /> </button>
</div> </div>
<div class="w-full max-w-md self-start border-solid border-gray-50 border mb-3"></div> <div class="w-full max-w-md self-start border-solid border-gray-50 border mb-3"></div>
<div class="mx-1 flex-shrink"> <div class="mx-1 flex-shrink">
<h2 class='font-sans text-2xl text-gray-50 mb-2 '>Account name:</h2> <h2 class='font-sans text-2xl text-gray-50 mb-2 '>Receiver's full name:</h2>
<InputField placeholder="New Account" isPassword={false} bind:value={type}></InputField> <InputField placeholder="Mr Foxy Fox" isPassword={false} bind:value={receivername}></InputField>
</div> </div>
<div class="mx-1 flex-shrink"> <div class="mx-1 flex-shrink">
<h2 class='font-sans text-2xl text-gray-50 mb-2 '>Currency:</h2> <h2 class='font-sans text-2xl text-gray-50 mb-2 '>IBAN:</h2>
<InputField placeholder="RON" isPassword={false} bind:value={currency}></InputField> <InputField placeholder={account.currency +"-0000-0000-0000-0000"} isPassword={false} bind:value={receiveriban}></InputField>
</div> </div>
<div class="mx-1 flex-shrink max-w-2xl"> <div class="mx-1 flex-shrink">
<h2 class=" font-sans text-2xl text-gray-50 mb-2 ">Terms of Service:</h2> <h2 class='font-sans text-2xl text-gray-50 mb-2 '>Amount:</h2>
<button class="mb-1" on:click={termsOfService}> <Icon icon={termsAccepted ? "akar-icons:check-box" : "akar-icons:box"} color="rgba(249, 250, 251, 1)" width="18" height="18" /> </button> <InputField style="color: #264D59" placeholder=0 isPassword={false} bind:value={amount}>
<h3 class="inline m-0 mb-0 text-gray-300"> I have read and accepted the <a class="font-sans text-gray-50" href="https://c.tenor.com/TVRtbC8jKY0AAAAC/positive-fox-you-can-do-it.gif" target="_blank">terms and conditions</a> for creating a new account at FOXBANK. </h3> <span class="text-gray-50">{account.currency}</span>
</InputField>
</div> </div>
<div class="m-10"></div>
<div class="mx-1 flex-shrink"> <div class="mx-1 flex-shrink">
<OrangeButton on:click={create}>Confirm</OrangeButton> <h2 class='font-sans text-2xl text-gray-50 mb-2 '>Description:</h2>
<TextareaField class="flex-grow mb-0" placeholder="Sent from FOXBANK!" rows={5} bind:value={description}></TextareaField>
</div> </div>
</div>
</CardBG> <div class="m-4"></div>
</div>
<div class="flex-shrink flex flex-row mb-4 mt-0" style="background: linear-gradient(89.1deg, rgba(236, 98, 68, 0.95) 0.77%, rgba(236, 98, 68, 0) 99.12%);">
<div class="flex-1"></div>
<OrangeButton class="flex-1 m-4" on:click={create}>Confirm</OrangeButton>
</div>
</CardBG>
</div> </div>

48
client/src/TextareaField.svelte
Unescape View File

@ -0,0 +1,48 @@
<script>
export let placeholder;
export let value;
export let rows = 2;
const handleInput = e => {
value = e.target.value;
}
</script>
<main>
<textarea placeholder={placeholder} value={value} rows={rows} on:input={handleInput} class="placeholder-gray-300 p-3 text-gray-50 w-full text-3xl"></textarea>
</main>
<style>
textarea {
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;
}
::-webkit-scrollbar {
width: 3px;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 2px rgba(141, 140, 140, 0.281);
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: rgba(238, 236, 236, 0.897);
border-radius: 10px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: rgba(182, 182, 182, 0.918);
}
textarea {
scrollbar-width: thin;
scrollbar-color: rgba(238, 236, 236, 0.897) rgba(141, 140, 140, 0.281);
}
</style>
Write Preview
Loading…
Cancel
Save