0.0.1
UI upgrade started
This commit is contained in:
sairaj mote
parent
eb891df838
commit
8d9fe51497
1144
css/main.css
Normal file
1144
css/main.css
Normal file
File diff suppressed because it is too large
Load Diff
9
css/main.css.map
Normal file
9
css/main.css.map
Normal file
File diff suppressed because one or more lines are too long
816
css/main.scss
Normal file
816
css/main.scss
Normal file
@ -0,0 +1,816 @@
|
|||||||
|
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&family=Roboto:wght@400;500;700&display=swap');
|
||||||
|
*{
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
font-family: 'Barlow', sans-serif;
|
||||||
|
}
|
||||||
|
:root{
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
body{
|
||||||
|
--primary-color: #303F9F;
|
||||||
|
--text: 17, 17, 17;
|
||||||
|
--text-light: 85, 85, 85;
|
||||||
|
--foreground: 255, 255, 255;
|
||||||
|
--background: #e8e8e8;
|
||||||
|
--dark-shade: #dadada;
|
||||||
|
background: var(--foreground);
|
||||||
|
color: rgba(var(--text), 1);
|
||||||
|
font-size: 16px;
|
||||||
|
margin: 1.5rem;
|
||||||
|
}
|
||||||
|
a{
|
||||||
|
font-weight: 600;
|
||||||
|
text-decoration: none;
|
||||||
|
color: var(--primary-color);
|
||||||
|
}
|
||||||
|
.dark-text{
|
||||||
|
color: #111;
|
||||||
|
}
|
||||||
|
h1,h2,h3,h4,h5{
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
button{
|
||||||
|
position: relative;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
padding: 0.6rem 1rem;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 0.2em;
|
||||||
|
color: var(--primary-color);
|
||||||
|
transition: transform 0.3s, clip-path 0.3s;
|
||||||
|
border: none;
|
||||||
|
clip-path: circle(100%);
|
||||||
|
background: rgba(var(--text), 0.1);
|
||||||
|
-webkit-tap-highlight-color: transparent;
|
||||||
|
&:focus{
|
||||||
|
outline: thin solid rgba(var(--text-light), .4);
|
||||||
|
}
|
||||||
|
&:disabled{
|
||||||
|
cursor: default;
|
||||||
|
background: rgba(var(--text-light), 1);
|
||||||
|
}
|
||||||
|
&:disabled ~ .loader{
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
input[type=number]::-webkit-inner-spin-button,
|
||||||
|
input[type=number]::-webkit-outer-spin-button {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
input[type=text]::-ms-clear { display: none; width : 0; height: 0; }
|
||||||
|
input[type=text]::-ms-reveal { display: none; width : 0; height: 0; }
|
||||||
|
input[type="search"]::-webkit-search-decoration,
|
||||||
|
input[type="search"]::-webkit-search-cancel-button,
|
||||||
|
input[type="search"]::-webkit-search-results-button,
|
||||||
|
input[type="search"]::-webkit-search-results-decoration { display: none; }
|
||||||
|
input[type=number] {
|
||||||
|
-moz-appearance:textfield;
|
||||||
|
}
|
||||||
|
input:invalid{
|
||||||
|
outline: none;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
::-moz-focus-inner{
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
.bottom-padding{
|
||||||
|
padding-bottom: 1em;
|
||||||
|
}
|
||||||
|
.top-padding{
|
||||||
|
padding-top: 1em;
|
||||||
|
}
|
||||||
|
.bottom-margin{
|
||||||
|
margin-bottom: 1em;
|
||||||
|
}
|
||||||
|
.top-margin{
|
||||||
|
margin-top: 1em;
|
||||||
|
}
|
||||||
|
.flex{
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.grid{
|
||||||
|
display: grid;
|
||||||
|
}
|
||||||
|
.grid-2{
|
||||||
|
grid-template-columns: auto auto;
|
||||||
|
gap: 1em;
|
||||||
|
}
|
||||||
|
.light-text{
|
||||||
|
color: rgba(var(--text-light), 1);
|
||||||
|
}
|
||||||
|
.hide{
|
||||||
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
.hide-completely{
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
.breakable{
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
.separator{
|
||||||
|
padding: .1em;
|
||||||
|
}
|
||||||
|
.no-transformations{
|
||||||
|
transform: none !important;
|
||||||
|
}
|
||||||
|
.loader{
|
||||||
|
fill: none;
|
||||||
|
stroke-width: 10;
|
||||||
|
stroke: var(--primary-color);
|
||||||
|
height: 2rem;
|
||||||
|
width: 2rem;
|
||||||
|
overflow: visible;
|
||||||
|
stroke-dashoffset: 230;
|
||||||
|
stroke-dasharray: 230;
|
||||||
|
padding: 2px;
|
||||||
|
justify-self: center;
|
||||||
|
}
|
||||||
|
@keyframes rotate{
|
||||||
|
100%{
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes load{
|
||||||
|
50%{
|
||||||
|
stroke-dashoffset: 0;
|
||||||
|
}
|
||||||
|
100%{
|
||||||
|
stroke-dashoffset: -210;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
p{
|
||||||
|
line-height: 1.5;
|
||||||
|
font-family: 'Roboto', sans-serif;
|
||||||
|
color: rgba(var(--text), 0.8);
|
||||||
|
}
|
||||||
|
.action{
|
||||||
|
position: relative;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
.btn{
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
.loader{
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1;
|
||||||
|
padding: 0.4em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.clip{
|
||||||
|
clip-path: circle(0) !important;
|
||||||
|
}
|
||||||
|
.animate-loader{
|
||||||
|
animation: load 2.6s infinite, rotate 1s infinite linear;
|
||||||
|
}
|
||||||
|
.expand{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.fade-left{
|
||||||
|
animation: fadeleft 0.3s;
|
||||||
|
}
|
||||||
|
.fade-right{
|
||||||
|
animation: faderight 0.3s;
|
||||||
|
}
|
||||||
|
@keyframes faderight{
|
||||||
|
from{
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateX(-1em);
|
||||||
|
}
|
||||||
|
to{
|
||||||
|
opacity: 1;
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes fadeleft{
|
||||||
|
from{
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateX(1em);
|
||||||
|
}
|
||||||
|
to{
|
||||||
|
opacity: 1;
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#logo{
|
||||||
|
display: inline-grid;
|
||||||
|
align-items: center;
|
||||||
|
grid-template-columns: auto 1fr;
|
||||||
|
gap: 0.6rem 0.2rem;
|
||||||
|
margin-right: 1rem;
|
||||||
|
h4{
|
||||||
|
letter-spacing: 0.06rem;
|
||||||
|
word-spacing: 0.12rem;
|
||||||
|
margin-top: 0.2rem;
|
||||||
|
}
|
||||||
|
h5{
|
||||||
|
font-family: 'Roboto', sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
#main_logo{
|
||||||
|
height: 1.4rem;
|
||||||
|
width: 1.4rem;
|
||||||
|
fill: rgba(var(--text), 1);
|
||||||
|
stroke: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.input{
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
padding: 0.8em;
|
||||||
|
margin-bottom: 1.5em;
|
||||||
|
border-radius: 0.2em;
|
||||||
|
background: rgba(var(--text), 0.1);
|
||||||
|
border: 0.1em solid transparent;
|
||||||
|
&:last-of-type{
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
&:focus-within{
|
||||||
|
border: 0.1em solid var(--primary-color);
|
||||||
|
}
|
||||||
|
label{
|
||||||
|
opacity: .7;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 1em;
|
||||||
|
position: absolute;
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
transform-origin: left;
|
||||||
|
pointer-events: none;
|
||||||
|
will-change: contents;
|
||||||
|
}
|
||||||
|
input{
|
||||||
|
flex: 1;
|
||||||
|
font-size: 1rem;
|
||||||
|
border: none;
|
||||||
|
background: transparent;
|
||||||
|
outline: none;
|
||||||
|
color: rgba(var(--text), 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.animate-label{
|
||||||
|
input{
|
||||||
|
transform: translateY(0.5em);
|
||||||
|
}
|
||||||
|
label{
|
||||||
|
transform: translateY(-60%) scale(0.7);
|
||||||
|
opacity: 1;
|
||||||
|
color: var(--primary-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.container-header{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: row;
|
||||||
|
width: 100%;
|
||||||
|
padding: 1rem 0;
|
||||||
|
h2{
|
||||||
|
flex: 1;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
button{
|
||||||
|
align-self: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.btn{
|
||||||
|
background: var(--primary-color);
|
||||||
|
color: rgba(var(--foreground), 1);
|
||||||
|
padding: 0.4em 1em;
|
||||||
|
}
|
||||||
|
.back-arrow{
|
||||||
|
stroke: rgba(var(--text), 1);
|
||||||
|
stroke-width: 6;
|
||||||
|
fill: none;
|
||||||
|
height: 2rem;
|
||||||
|
padding: 0.5rem 0.5rem 0.5rem 0;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.card{
|
||||||
|
border-radius: 0.6rem;
|
||||||
|
padding: 1.5em;
|
||||||
|
background: rgba(var(--foreground), 1);
|
||||||
|
}
|
||||||
|
.solid-background{
|
||||||
|
background: var(--background) !important;
|
||||||
|
}
|
||||||
|
.popup-container{
|
||||||
|
display: grid;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
place-items: center;
|
||||||
|
background: rgba($color: #000000, $alpha: 0.24);
|
||||||
|
z-index: 10;
|
||||||
|
transition: opacity 0.3s ease;
|
||||||
|
.popup{
|
||||||
|
align-self: flex-end;
|
||||||
|
align-items: flex-start;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
width: 100%;
|
||||||
|
border-radius: 0.5rem 0.5rem 0 0;
|
||||||
|
padding: 1.5rem;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
background: rgba(var(--foreground), 1);
|
||||||
|
transform: translateY(1rem);
|
||||||
|
transition: transform 0.3s;
|
||||||
|
box-shadow: 0 2rem 2rem rgba($color: #000000, $alpha: 0.24);
|
||||||
|
overflow-y: auto;
|
||||||
|
h5{
|
||||||
|
margin: 0.5rem 0;
|
||||||
|
}
|
||||||
|
button:first-of-type{
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
.container-header{
|
||||||
|
align-items: center;
|
||||||
|
padding: 0;
|
||||||
|
margin-bottom: 1.5em;
|
||||||
|
.btn{
|
||||||
|
padding: 0.6em 1.2em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#show_message{
|
||||||
|
transform: translate(0, -100%);
|
||||||
|
transition: transform 0.3s, opacity 0.3s;
|
||||||
|
box-shadow: 0.2rem 0.4rem 0.8rem rgba($color: #000000, $alpha: 0.16);
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: row;
|
||||||
|
display: flex;
|
||||||
|
color: rgba(var(--text), 1);
|
||||||
|
position: fixed;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 100%;
|
||||||
|
z-index: 11;
|
||||||
|
background: rgba(var(--foreground), 1);
|
||||||
|
#error_icon{
|
||||||
|
fill: #E53935;
|
||||||
|
}
|
||||||
|
#done_icon{
|
||||||
|
fill: #00C853;
|
||||||
|
}
|
||||||
|
.notification-icon{
|
||||||
|
height: 2em;
|
||||||
|
width: 2em;
|
||||||
|
margin: 1em 0 1em 1em;
|
||||||
|
fill: rgba(var(--text), 1);
|
||||||
|
}
|
||||||
|
div{
|
||||||
|
padding: 1em;
|
||||||
|
flex: 1;
|
||||||
|
h5{
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
span{
|
||||||
|
font-weight: 500;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
button{
|
||||||
|
padding: 1rem;
|
||||||
|
margin: 0 1em 0 0;
|
||||||
|
border: none;
|
||||||
|
background: none;
|
||||||
|
svg{
|
||||||
|
height: 1em;
|
||||||
|
width: 1em;
|
||||||
|
stroke: rgba(var(--text), 1);
|
||||||
|
stroke-width: 6;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#confirmation{
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 1rem;
|
||||||
|
p{
|
||||||
|
margin: 1rem;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 500;
|
||||||
|
color: rgba(var(--rgb-bw),1) !important;
|
||||||
|
}
|
||||||
|
div{
|
||||||
|
display: flex;
|
||||||
|
padding: 1em;
|
||||||
|
justify-content: right;
|
||||||
|
width: 100%;
|
||||||
|
button{
|
||||||
|
background: none;
|
||||||
|
}
|
||||||
|
button:first-of-type{
|
||||||
|
margin-right: 0.6em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.refresh{
|
||||||
|
margin-top: 0.6em;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
}
|
||||||
|
#sign_in_popup{
|
||||||
|
align-self: center;
|
||||||
|
border-radius: 0.5em;
|
||||||
|
width: calc(100vw - 2em);
|
||||||
|
background: rgba(var(--foreground), 1);
|
||||||
|
h1{
|
||||||
|
margin-top: 3em;
|
||||||
|
}
|
||||||
|
p:first-of-type{
|
||||||
|
margin-bottom: 4em;
|
||||||
|
}
|
||||||
|
.action{
|
||||||
|
margin-top: 1em;
|
||||||
|
}
|
||||||
|
p:nth-of-type(2){
|
||||||
|
margin-top: 2em;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
}
|
||||||
|
.input{
|
||||||
|
background: rgba(var(--text), 0.1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.primary-btn{
|
||||||
|
background: var(--primary-color);
|
||||||
|
padding: 0.8em 1.6em;
|
||||||
|
justify-content: center;
|
||||||
|
color: rgba(var(--foreground), 1);
|
||||||
|
}
|
||||||
|
#main_header{
|
||||||
|
align-items: center;
|
||||||
|
padding: 1em 0;
|
||||||
|
svg{
|
||||||
|
stroke: var(--primary-color);
|
||||||
|
stroke-width: 10;
|
||||||
|
stroke-linecap: round;
|
||||||
|
height: 2em;
|
||||||
|
width: 3em;
|
||||||
|
fill: none;
|
||||||
|
margin-right: 0.4em;
|
||||||
|
}
|
||||||
|
#display_balance{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
margin-left: auto;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#navbar{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
top: auto;
|
||||||
|
border-top: solid 1px rgba(var(--text), 0.2);
|
||||||
|
z-index: 3;
|
||||||
|
background: rgba(var(--foreground), 1);
|
||||||
|
.navbar-item{
|
||||||
|
position: relative;
|
||||||
|
text-align: center;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 0.3em;
|
||||||
|
margin: 0.3em;
|
||||||
|
border-radius: 0.4em;
|
||||||
|
color: rgba(var(--text), 0.8);
|
||||||
|
font-size: 0.9em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
.icon{
|
||||||
|
height: 1.2rem;
|
||||||
|
width: 1.2rem;
|
||||||
|
fill: none;
|
||||||
|
stroke: rgba(var(--text), 0.8);
|
||||||
|
stroke-width: 6;
|
||||||
|
overflow: visible;
|
||||||
|
stroke-linecap: round;
|
||||||
|
stroke-linejoin: round;
|
||||||
|
}
|
||||||
|
h5{
|
||||||
|
font-size: 0.6em;
|
||||||
|
margin-top: 0.4em;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
.banking{
|
||||||
|
stroke-width: 4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.active{
|
||||||
|
color: var(--primary-color);
|
||||||
|
.icon{
|
||||||
|
stroke: var(--primary-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#home_page{
|
||||||
|
h1{
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
p{
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
.user-option{
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
&:last-of-type{
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.options-tab{
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin-top: 0.8rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
.option{
|
||||||
|
white-space: nowrap;
|
||||||
|
padding: 0.6rem 1rem;
|
||||||
|
text-decoration: none;
|
||||||
|
border-right: solid 1px rgba(var(--text), 0.2);
|
||||||
|
text-transform: capitalize;
|
||||||
|
&:last-of-type{
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.notification-dot::after{
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 0.6em;
|
||||||
|
width: 0.6em;
|
||||||
|
background-color: #E53935;
|
||||||
|
border-radius: 0.4em;
|
||||||
|
transition: transform 0.3s;
|
||||||
|
}
|
||||||
|
.shrink.notification-dot::after{
|
||||||
|
transform: scale(0);
|
||||||
|
}
|
||||||
|
#deposit, #withdraw{
|
||||||
|
.container-header{
|
||||||
|
background: linear-gradient(rgba(var(--foreground), 1) 90%, transparent);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.request{
|
||||||
|
display: inline-flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 2em 1.5em;
|
||||||
|
border-radius: 0.4em;
|
||||||
|
background: var(--background);
|
||||||
|
h5{
|
||||||
|
color: rgba(var(--text-light), 1);
|
||||||
|
margin-bottom: 0.3rem;
|
||||||
|
}
|
||||||
|
h3,h4{
|
||||||
|
margin-bottom: 1em;
|
||||||
|
font-family: 'Roboto', sans-serif;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
.action{
|
||||||
|
align-self: flex-end;
|
||||||
|
}
|
||||||
|
.amount{
|
||||||
|
font-size: 1.4em;
|
||||||
|
}
|
||||||
|
button{
|
||||||
|
width: auto;
|
||||||
|
align-self: flex-end;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#deposit_request_container, #withdraw_request_container{
|
||||||
|
display: grid;
|
||||||
|
gap: 1em;
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
.page{
|
||||||
|
padding: 2rem 0;
|
||||||
|
padding-bottom: 4rem;
|
||||||
|
.container-header{
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr auto;
|
||||||
|
grid-template-areas: '. .'
|
||||||
|
'search search';
|
||||||
|
gap: 1rem;
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
padding-bottom: 1em;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
z-index: 2;
|
||||||
|
h2{
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.action{
|
||||||
|
height: 100%;
|
||||||
|
button{
|
||||||
|
height: 100%;
|
||||||
|
padding: 0.8em 1.6em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.search{
|
||||||
|
grid-area: search;
|
||||||
|
input{
|
||||||
|
padding: 1em;
|
||||||
|
border: none;
|
||||||
|
width: 100%;
|
||||||
|
background: var(--dark-shade);
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 500;
|
||||||
|
color: rgba(var(--text), 1);
|
||||||
|
border-radius: 0.2em;
|
||||||
|
&:focus{
|
||||||
|
outline: none;
|
||||||
|
background: rgba(var(--text-light), 0.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.empty{
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
width: 100%;
|
||||||
|
svg{
|
||||||
|
stroke: rgba(var(--text), 0.8);
|
||||||
|
height: 12em;
|
||||||
|
width: 12em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media only screen and (min-width: 640px){
|
||||||
|
body{
|
||||||
|
padding: 1rem 6vw;
|
||||||
|
margin-left: 6rem;
|
||||||
|
}
|
||||||
|
.popup-container{
|
||||||
|
.popup{
|
||||||
|
width: auto;
|
||||||
|
align-self: center;
|
||||||
|
border-radius: 0.2rem;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#show_message{
|
||||||
|
transform: translate(100%, 0);
|
||||||
|
margin: 1rem;
|
||||||
|
max-width: 60vw;
|
||||||
|
width: max-content;
|
||||||
|
border-radius: 0.2rem;
|
||||||
|
}
|
||||||
|
#confirmation{
|
||||||
|
padding: 1rem;
|
||||||
|
width: 24rem;
|
||||||
|
button{
|
||||||
|
margin-left: 0.5rem;
|
||||||
|
&:first-of-type{
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
p{
|
||||||
|
margin: 1rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#deposit_request_container, #withdraw_request_container{
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
}
|
||||||
|
#navbar{
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: stretch;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
top: 0;
|
||||||
|
right: auto;
|
||||||
|
width: 6rem;
|
||||||
|
border-right: solid 1px rgba(var(--text), 0.2);
|
||||||
|
.navbar-item{
|
||||||
|
width: auto;
|
||||||
|
padding: 1.4em 0;
|
||||||
|
margin: 0.6em;
|
||||||
|
.icon{
|
||||||
|
height: 1.4rem;
|
||||||
|
width: 1.4rem;
|
||||||
|
}
|
||||||
|
h5{
|
||||||
|
font-size: 0.8em;
|
||||||
|
}
|
||||||
|
&:hover{
|
||||||
|
.icon{
|
||||||
|
stroke: rgba(var(--text), 1);
|
||||||
|
}
|
||||||
|
h5{
|
||||||
|
color: rgba(var(--text), 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.active:hover{
|
||||||
|
.icon{
|
||||||
|
stroke: var(--primary-color);
|
||||||
|
}
|
||||||
|
h5{
|
||||||
|
color: var(--primary-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.page{
|
||||||
|
padding-bottom: 2em;
|
||||||
|
}
|
||||||
|
#sign_in_popup{
|
||||||
|
width: 24rem;
|
||||||
|
}
|
||||||
|
.options-tab{
|
||||||
|
//grid-template-columns: repeat(4, auto);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media only screen and (min-width: 800px){
|
||||||
|
#deposit_request_container, #withdraw_request_container{
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
}
|
||||||
|
#home_page{
|
||||||
|
.user-option{
|
||||||
|
max-width: 40%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media only screen and (min-width: 1280px){
|
||||||
|
body{
|
||||||
|
padding: 1rem 12vw;
|
||||||
|
}
|
||||||
|
#deposit_request_container, #withdraw_request_container{
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media only screen and (min-width: 1920px){
|
||||||
|
body{
|
||||||
|
font-size: 24px;
|
||||||
|
padding: 2rem 20vw;
|
||||||
|
}
|
||||||
|
#deposit_request_container, #withdraw_request_container{
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media only screen and (min-width: 2048px){
|
||||||
|
body{
|
||||||
|
font-size: 24px;
|
||||||
|
padding: 2rem 30vw;
|
||||||
|
}
|
||||||
|
#deposit_request_container, #withdraw_request_container{
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media only screen and (max-width: 320px){
|
||||||
|
body{
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (prefers-color-scheme: dark){
|
||||||
|
:root{
|
||||||
|
--text: 238, 238, 238;
|
||||||
|
--text-light: 170, 170, 170;
|
||||||
|
--foreground: 26, 26, 26;
|
||||||
|
--background: #111;
|
||||||
|
--dark-shade: #1a1a1a;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (prefers-color-scheme: light){
|
||||||
|
:root{
|
||||||
|
--text: 17, 17, 17;
|
||||||
|
--text-light: 85, 85, 85;
|
||||||
|
--foreground: 255, 255, 255;
|
||||||
|
--background: #e8e8e8;
|
||||||
|
--dark-shade: #dadada;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (prefers-color-scheme: no-preference){
|
||||||
|
:root{
|
||||||
|
--text: 17, 17, 17;
|
||||||
|
--text-light: 85, 85, 85;
|
||||||
|
--foreground: 255, 255, 255;
|
||||||
|
--background: #e8e8e8;
|
||||||
|
--dark-shade: #dadada;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (any-hover: hover){
|
||||||
|
}
|
||||||
|
|
||||||
807
index.html
Normal file
807
index.html
Normal file
@ -0,0 +1,807 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Blockchain UPI</title>
|
||||||
|
<link rel="stylesheet" href="css/main.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<audio id="notification_sound">
|
||||||
|
<source src="https://rmservices.duckdns.org/files/notification-sound.mp3" type="audio/mpeg">
|
||||||
|
<source src="https://rmservices.duckdns.org/files/notification-sound.ogg" type="audio/ogg">
|
||||||
|
</audio>
|
||||||
|
<div class="popup-container hide">
|
||||||
|
<div id="confirmation" class="popup">
|
||||||
|
<p></p>
|
||||||
|
<div>
|
||||||
|
<button class="hover" onclick="hidePopup(this)">Cancel</button>
|
||||||
|
<button class="hover">Ok</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="show_message" class="hide">
|
||||||
|
<svg id="error_icon" class="notification-icon hide-completely" viewBox="0 0 100 100">
|
||||||
|
<title>Error icon</title>
|
||||||
|
<path
|
||||||
|
d="M50,0a50,50,0,1,0,50,50A50,50,0,0,0,50,0ZM46,27.18A.79.79,0,0,1,46.6,27h7.72a.79.79,0,0,1,.79.79l-1,28.76a.79.79,0,0,
|
||||||
|
1-.79.79H47.46a.77.77,0,0,1-.56-.23.73.73,0,0,1-.23-.56l-.86-28.76A.77.77,0,0,1,46,27.18Zm7.68,44.39A4.91,4.91,0,0,1,50,73.05a5.08,5.08,
|
||||||
|
0,0,1-5.21-5.21A5,5,0,0,1,50,62.63a5,5,0,0,1,3.73,1.45,5.18,5.18,0,0,1,1.42,3.76A5.11,5.11,0,0,1,53.72,71.57Z" />
|
||||||
|
</svg>
|
||||||
|
<svg id="done_icon" class="notification-icon" viewBox="0 0 100 100">
|
||||||
|
<title>Done icon</title>
|
||||||
|
<path
|
||||||
|
d="M50,0a50,50,0,1,0,50,50A50,50,0,0,0,50,0ZM80.85,32.37,40.3,72.92a1.24,1.24,0,0,1-1.75,0l-19.4-19.4a1.23,1.23,0,0,1,0-1.75l3.54-3.54a1.23,
|
||||||
|
1.23,0,0,1,1.74,0L38.55,62.35a1.24,1.24,0,0,0,1.75,0L75.57,27.08a1.23,1.23,0,0,1,1.74,0l3.54,3.54A1.23,1.23,0,0,1,80.85,32.37Z" />
|
||||||
|
</svg>
|
||||||
|
<div>
|
||||||
|
<h5>Notification</h5>
|
||||||
|
<span id="notification_text">Message</span>
|
||||||
|
</div>
|
||||||
|
<button id="hide_banner_btn">
|
||||||
|
<svg viewBox="0 0 50 50">
|
||||||
|
<title>Close this notification</title>
|
||||||
|
<line x1="50" y1="0" x2="0" y2="50" />
|
||||||
|
<line x1="0" y1="0" x2="50" y2="50" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="popup-container solid-background hide">
|
||||||
|
<div id="sign_in_popup" class="popup">
|
||||||
|
<div class="container-header">
|
||||||
|
<h1>Sign In</h1>
|
||||||
|
</div>
|
||||||
|
<p class="expand light-text">Welcome to RanchiMall Blockchain UPI</b></p>
|
||||||
|
<form class="expand" autocomplete="off" onsubmit="return false">
|
||||||
|
<div class="input">
|
||||||
|
<input id="get_priv_key_field" type="password" required>
|
||||||
|
<label>Private Key</label>
|
||||||
|
</div>
|
||||||
|
<div class="action expand" onclick="signIn(this)">
|
||||||
|
<button class="primary-btn expand" type="submit" disabled>
|
||||||
|
Sign In
|
||||||
|
</button>
|
||||||
|
<svg viewBox="0 0 73 73" class="loader">
|
||||||
|
<path
|
||||||
|
d="M72.5,36.5c0,19.88-16.12,36-36,36s-36-16.12-36-36s16.12-36,36-36S72.5,16.62,72.5,36.5" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<header id="main_header" class="flex">
|
||||||
|
<svg viewBox="0 0 180 105.7" class="hide-completely">
|
||||||
|
<path d="M22.5,35.5C27.7,32.6,33.6,31,40,31c19.9,0,36,16.1,36,36c0,16.6-11.2,30.6-26.5,34.7" />
|
||||||
|
<path d="M4,4v63c0,16.2,10.7,30,25.5,34.4" />
|
||||||
|
<line x1="94" y1="67.1" x2="126" y2="67.1" />
|
||||||
|
<line x1="110" y1="50.5" x2="110" y2="83.8" />
|
||||||
|
<line x1="144" y1="67.1" x2="176" y2="67.1" />
|
||||||
|
<line x1="160" y1="50.5" x2="160" y2="83.8" />
|
||||||
|
</svg>
|
||||||
|
<div id="logo">
|
||||||
|
<svg id="main_logo" viewBox="0 0 27.25 32">
|
||||||
|
<title>RanchiMall</title>
|
||||||
|
<path
|
||||||
|
d="M27.14,30.86c-.74-2.48-3-4.36-8.25-6.94a20,20,0,0,1-4.2-2.49,6,6,0,0,1-1.25-1.67,4,4,0,0,1,0-2.26c.37-1.08.79-1.57,3.89-4.55a11.66,11.66,0,0,0,3.34-4.67,6.54,6.54,0,0,0,.05-2.82C20,3.6,18.58,2,16.16.49c-.89-.56-1.29-.64-1.3-.24a3,3,0,0,1-.3.72l-.3.55L13.42.94C13,.62,12.4.26,12.19.15c-.4-.2-.73-.18-.72.05a9.39,9.39,0,0,1-.61,1.33s-.14,0-.27-.13C8.76.09,8-.27,8,.23A11.73,11.73,0,0,1,6.76,2.6C4.81,5.87,2.83,7.49.77,7.49c-.89,0-.88,0-.61,1,.22.85.33.92,1.09.69A5.29,5.29,0,0,0,3,8.33c.23-.17.45-.29.49-.26a2,2,0,0,1,.22.63A1.31,1.31,0,0,0,4,9.34a5.62,5.62,0,0,0,2.27-.87L7,8l.13.55c.19.74.32.82,1,.65a7.06,7.06,0,0,0,3.46-2.47l.6-.71-.06.64c-.17,1.63-1.3,3.42-3.39,5.42L6.73,14c-3.21,3.06-3,5.59.6,8a46.77,46.77,0,0,0,4.6,2.41c.28.13,1,.52,1.59.87,3.31,2,4.95,3.92,4.95,5.93a2.49,2.49,0,0,0,.07.77h0c.09.09,0,.1.9-.14a2.61,2.61,0,0,0,.83-.32,3.69,3.69,0,0,0-.55-1.83A11.14,11.14,0,0,0,17,26.81a35.7,35.7,0,0,0-5.1-2.91C9.37,22.64,8.38,22,7.52,21.17a3.53,3.53,0,0,1-1.18-2.48c0-1.38.71-2.58,2.5-4.23,2.84-2.6,3.92-3.91,4.67-5.65a3.64,3.64,0,0,0,.42-2A3.37,3.37,0,0,0,13.61,5l-.32-.74.29-.48c.17-.27.37-.63.46-.8l.15-.3.44.64a5.92,5.92,0,0,1,1,2.81,5.86,5.86,0,0,1-.42,1.94c0,.12-.12.3-.15.4a9.49,9.49,0,0,1-.67,1.1,28,28,0,0,1-4,4.29C8.62,15.49,8.05,16.44,8,17.78a3.28,3.28,0,0,0,1.11,2.76c.95,1,2.07,1.74,5.25,3.32,3.64,1.82,5.22,2.9,6.41,4.38A4.78,4.78,0,0,1,21.94,31a3.21,3.21,0,0,0,.14.92,1.06,1.06,0,0,0,.43-.05l.83-.22.46-.12-.06-.46c-.21-1.53-1.62-3.25-3.94-4.8a37.57,37.57,0,0,0-5.22-2.82A13.36,13.36,0,0,1,11,21.19a3.36,3.36,0,0,1-.8-4.19c.41-.85.83-1.31,3.77-4.15,2.39-2.31,3.43-4.13,3.43-6a5.85,5.85,0,0,0-2.08-4.29c-.23-.21-.44-.43-.65-.65A2.5,2.5,0,0,1,15.27.69a10.6,10.6,0,0,1,2.91,2.78A4.16,4.16,0,0,1,19,6.16a4.91,4.91,0,0,1-.87,3c-.71,1.22-1.26,1.82-4.27,4.67a9.47,9.47,0,0,0-2.07,2.6,2.76,2.76,0,0,0-.33,1.54,2.76,2.76,0,0,0,.29,1.47c.57,1.21,2.23,2.55,4.65,3.73a32.41,32.41,0,0,1,5.82,3.24c2.16,1.6,3.2,3.16,3.2,4.8a1.94,1.94,0,0,0,.09.76,4.54,4.54,0,0,0,1.66-.4C27.29,31.42,27.29,31.37,27.14,30.86ZM6.1,7h0a3.77,3.77,0,0,1-1.46.45L4,7.51l.68-.83a25.09,25.09,0,0,0,3-4.82A12,12,0,0,1,8.28.76c.11-.12.77.32,1.53,1l.63.58-.57.84A10.34,10.34,0,0,1,6.1,7Zm5.71-1.78A9.77,9.77,0,0,1,9.24,7.18h0a5.25,5.25,0,0,1-1.17.28l-.58,0,.65-.78a21.29,21.29,0,0,0,2.1-3.12c.22-.41.42-.76.44-.79s.5.43.9,1.24L12,5ZM13.41,3a2.84,2.84,0,0,1-.45.64,11,11,0,0,1-.9-.91l-.84-.9.19-.45c.34-.79.39-.8,1-.31A9.4,9.4,0,0,1,13.8,2.33q-.18.34-.39.69Z" />
|
||||||
|
</svg>
|
||||||
|
<span>
|
||||||
|
<h5>RanchiMall</h5>
|
||||||
|
<h4>BLOCKCHAIN UPI</h4>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div id="display_balance">
|
||||||
|
<h5>Rupee Tokens</h5>
|
||||||
|
<h3 id="token_balance">0</h3>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<nav id="navbar">
|
||||||
|
<div title="homepage" id="home_page_btn" class="navbar-item active" onclick="showPage(this, 'home_page')">
|
||||||
|
<svg class="icon" viewBox="0 0 64 64">
|
||||||
|
<path
|
||||||
|
d="M24.77,44.15H40.06V63.5H53.4V36h5.66a3.38,3.38,0,0,0,2.53-5.68l-6.73-7.16V11.26H46.48v3L34.53,1.59a3.49,3.49,0,0,0-5.06,0L2.41,30.35A3.38,3.38,0,0,0,4.94,36H10.6V63.5H24.77" />
|
||||||
|
</svg>
|
||||||
|
<h5>Home</h5>
|
||||||
|
</div>
|
||||||
|
<div title="See all cash deposit requests" id="deposit_page_btn" class="navbar-item notification-dot"
|
||||||
|
onclick="showPage(this, 'deposit')">
|
||||||
|
<svg class="icon banking" viewBox="0 0 52 51.5">
|
||||||
|
<line x1="4" y1="28" x2="4" y2="19.5" />
|
||||||
|
<polyline points="4 6 4 1 51 1 51 48 4 48 4 41.5" />
|
||||||
|
<line x1="9" y1="50" x2="18" y2="50" />
|
||||||
|
<line x1="36" y1="50" x2="45" y2="50" />
|
||||||
|
<circle cx="27.5" cy="30" r="9.5" />
|
||||||
|
<circle cx="27.5" cy="30" r="3.5" />
|
||||||
|
<rect x="1" y="6" width="6" height="13.5" rx="2.76" />
|
||||||
|
<rect x="1" y="28" width="6" height="13.5" rx="2.76" />
|
||||||
|
</svg>
|
||||||
|
<h5>Deposit</h5>
|
||||||
|
</div>
|
||||||
|
<div title="See all cash withdraw requests" class="navbar-item notification-dot"
|
||||||
|
onclick="showPage(this, 'withdraw')">
|
||||||
|
<svg class="icon banking" viewBox="0 0 52 60">
|
||||||
|
<line x1="4" y1="33.5" x2="4" y2="25" />
|
||||||
|
<polyline points="41.52 6.5 51 6.5 51 53.5 41.69 53.5" />
|
||||||
|
<line x1="9" y1="55.5" x2="14" y2="55.5" />
|
||||||
|
<line x1="43" y1="55.5" x2="45" y2="55.5" />
|
||||||
|
<rect x="1" y="11.5" width="6" height="13.5" rx="2.76" />
|
||||||
|
<rect x="1" y="33.5" width="6" height="13.5" rx="2.76" />
|
||||||
|
<polyline points="3.81 11.5 3.81 6.5 41.5 1 41.69 59 3.81 53.5 3.81 47" />
|
||||||
|
<path
|
||||||
|
d="M35.64,39.19c0,6.31-3.25,11.45-7.22,11.48s-7-4.92-7-11.07,3.13-11.29,7.05-11.48S35.64,32.88,35.64,39.19Z"
|
||||||
|
transform="translate(-6 -2)" />
|
||||||
|
<path
|
||||||
|
d="M31.06,39.32c0,2.31-1.19,4.2-2.64,4.23s-2.62-1.79-2.62-4.08S27,35.3,28.42,35.24,31.06,37,31.06,39.32Z"
|
||||||
|
transform="translate(-6 -2)" />
|
||||||
|
</svg>
|
||||||
|
<h5>Withdraw</h5>
|
||||||
|
</div>
|
||||||
|
<div title="profile page" class="dropdown navbar-item" onclick="showPage(this, 'profile_page')">
|
||||||
|
<svg class="icon" id="profile_pic" viewBox="0 0 49.54 61.12">
|
||||||
|
<path
|
||||||
|
d="M49.34,19.94c7.73,0,13.26,5.26,13.26,14S58.18,50.14,49.71,50.08,36.82,42.66,36.82,33.93s5.53-14,13.26-14"
|
||||||
|
transform="translate(-25.23 -20)" />
|
||||||
|
<path
|
||||||
|
d="M43.83,52c-2.34,4.38-9.77,6.64-15.31,9.06-2.29,1-4.11,13-1.53,13a46.06,46.06,0,0,0,23.51,6,40.48,40.48,0,0,0,22.51-6c2.58,0,.76-12-1.53-13-5.54-2.42-13-4.68-15.31-9.06"
|
||||||
|
transform="translate(-25.23 -19.44)" />
|
||||||
|
</svg>
|
||||||
|
<h5>Cashier</h5>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<main class="">
|
||||||
|
<section class="page" id="home_page">
|
||||||
|
<h1>What do we offer?</h1>
|
||||||
|
<p>
|
||||||
|
Your Rupee balance is digital footprint of actual cash.<br> Deposit, Withdraw or Pay Rupee digitally
|
||||||
|
using a FLO Blockchain address.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h4>Go ahead and try something</h4>
|
||||||
|
|
||||||
|
<div class="options-tab">
|
||||||
|
<a class="option" href="#cash_transfer">Transfer cash</a>
|
||||||
|
<a class="option" href="#buy_rupee">buy rupee</a>
|
||||||
|
<a class="option" href="#withdraw_rupee">withdraw rupee</a>
|
||||||
|
<a class="option" href="#pay_anyone">pay through cashier</a>
|
||||||
|
</div>
|
||||||
|
<div id="cash_transfer" class="user-option">
|
||||||
|
<h2>Cash transfer</h2>
|
||||||
|
<form autocomplete="off" onsubmit="return false">
|
||||||
|
<div class="input">
|
||||||
|
<input id="token_reciever" type="text" required>
|
||||||
|
<label for="token_reciever">Reciever's FLO ID</label>
|
||||||
|
</div>
|
||||||
|
<div class="input">
|
||||||
|
<input id="token_amount" inputmode="numeric" type="number" required>
|
||||||
|
<label for="token_amount">Amount</label>
|
||||||
|
</div>
|
||||||
|
<div id="send-tokens_btn" class="action top-margin expand">
|
||||||
|
<button class="primary-btn expand" type="submit" disabled>
|
||||||
|
transfer
|
||||||
|
</button>
|
||||||
|
<svg viewBox="0 0 73 73" class="loader">
|
||||||
|
<path
|
||||||
|
d="M72.5,36.5c0,19.88-16.12,36-36,36s-36-16.12-36-36s16.12-36,36-36S72.5,16.62,72.5,36.5" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div id="buy_rupee" class="user-option">
|
||||||
|
<h2>Buy rupee</h2>
|
||||||
|
<form autocomplete="off" onsubmit="return false">
|
||||||
|
<div class="input">
|
||||||
|
<input id="token_amount_to_buy" inputmode="numeric" type="number" required>
|
||||||
|
<label for="token_amount_to_buy">Amount</label>
|
||||||
|
</div>
|
||||||
|
<div id="request_tokens_btn" class="action top-margin expand">
|
||||||
|
<button class="primary-btn expand" type="submit" disabled>
|
||||||
|
buy
|
||||||
|
</button>
|
||||||
|
<svg viewBox="0 0 73 73" class="loader">
|
||||||
|
<path
|
||||||
|
d="M72.5,36.5c0,19.88-16.12,36-36,36s-36-16.12-36-36s16.12-36,36-36S72.5,16.62,72.5,36.5" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div id="withdraw_rupee" class="user-option">
|
||||||
|
<h2>Withdraw rupee</h2>
|
||||||
|
<form autocomplete="off" onsubmit="return false">
|
||||||
|
<div class="input">
|
||||||
|
<input id="withdraw_cash_amount" type="text" required>
|
||||||
|
<label for="withdraw_cash_amount">Reciever's FLO ID</label>
|
||||||
|
</div>
|
||||||
|
<div class="input">
|
||||||
|
<input id="user_withdraw_upi" type="text" required>
|
||||||
|
<label for="user_withdraw_upi">Reciever's FLO ID</label>
|
||||||
|
</div>
|
||||||
|
<div id="withdraw_cash_btn" class="action top-margin expand">
|
||||||
|
<button class="primary-btn expand" type="submit" disabled>
|
||||||
|
withdraw
|
||||||
|
</button>
|
||||||
|
<svg viewBox="0 0 73 73" class="loader">
|
||||||
|
<path
|
||||||
|
d="M72.5,36.5c0,19.88-16.12,36-36,36s-36-16.12-36-36s16.12-36,36-36S72.5,16.62,72.5,36.5" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div id="pay_anyone" class="user-option">
|
||||||
|
<h2>Pay anyone through cashier</h2>
|
||||||
|
<form autocomplete="off" onsubmit="return false">
|
||||||
|
<div class="input">
|
||||||
|
<input id="recvr_id" type="text" required>
|
||||||
|
<label for="recvr_id">Reciever's FLO ID</label>
|
||||||
|
</div>
|
||||||
|
<div class="input">
|
||||||
|
<input id="recvr_amount_to_pay" type="number" inputmode="numeric" required>
|
||||||
|
<label for="recvr_amount_to_pay">Amount</label>
|
||||||
|
</div>
|
||||||
|
<div class="input">
|
||||||
|
<input id="paid_cashier_upi_txid" type="text" required>
|
||||||
|
<label for="paid_cashier_upi_txid">UPI Txid/Ref Number</label>
|
||||||
|
</div>
|
||||||
|
<div id="cnf_cash_payment" class="action top-margin expand" onclick="confirm_pay_through_cashier_request()">
|
||||||
|
<button class="primary-btn expand" type="submit" disabled>
|
||||||
|
pay
|
||||||
|
</button>
|
||||||
|
<svg viewBox="0 0 73 73" class="loader">
|
||||||
|
<path
|
||||||
|
d="M72.5,36.5c0,19.88-16.12,36-36,36s-36-16.12-36-36s16.12-36,36-36S72.5,16.62,72.5,36.5" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section id="deposit" class="page hide-completely">
|
||||||
|
<div class="container-header">
|
||||||
|
<h2>Deposit Requests</h2>
|
||||||
|
<div id="fetch_deposits">
|
||||||
|
<button>
|
||||||
|
Load pending
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<label class="search" id="search_deposit">
|
||||||
|
<input type="search" placeholder="Search">
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div id="deposit_illustration" class="empty">
|
||||||
|
<svg viewBox="0 0 529.94 446.5">
|
||||||
|
<defs>
|
||||||
|
<style>
|
||||||
|
.a,
|
||||||
|
.b,
|
||||||
|
.c,
|
||||||
|
.d {
|
||||||
|
fill: none;
|
||||||
|
stroke-linejoin: round;
|
||||||
|
}
|
||||||
|
|
||||||
|
.a {
|
||||||
|
stroke-width: 9px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.b,
|
||||||
|
.c {
|
||||||
|
stroke-width: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c {
|
||||||
|
stroke-dasharray: 11.94 11.94;
|
||||||
|
}
|
||||||
|
|
||||||
|
.d {
|
||||||
|
stroke-width: 3px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</defs>
|
||||||
|
<title>Empty icon</title>
|
||||||
|
<polyline class="a"
|
||||||
|
points="508.5 289 220.5 217 4.5 289 293.5 361 370.38 335.47 220.5 298 143.05 323.82 220.5 298 220.5 217 4.5 289 4.5 370 292.5 442 508.5 370 508.5 289 293.5 361 292.5 442" />
|
||||||
|
<path class="b" d="M947.54,629.34q0-3,.05-6" transform="translate(-703.5 -300.22)" />
|
||||||
|
<path class="c"
|
||||||
|
d="M948.09,611.41c5.42-83.07,49.82-144.78,102.21-154.63,57.46-10.81,101.53-.27,88.07,42.61-7.82,24.88-50.89,36.71-71.95,5.86-26.87-39.37,12.95-108.88,71.46-131,17.38-6.57,37.33-14.37,53.89-30.53"
|
||||||
|
transform="translate(-703.5 -300.22)" />
|
||||||
|
<path class="b" d="M1195.9,339.41c1.32-1.47,2.62-3,3.88-4.58"
|
||||||
|
transform="translate(-703.5 -300.22)" />
|
||||||
|
<path class="d"
|
||||||
|
d="M1215,324.59c-2,3.62-6.21,5.12-9.34,3.36s-4-6.11-2-9.72,5.67-3.13,8.8-1.37S1217,321,1215,324.59Z"
|
||||||
|
transform="translate(-703.5 -300.22)" />
|
||||||
|
<ellipse class="d" cx="1215.17" cy="310.95" rx="4.5" ry="4"
|
||||||
|
transform="translate(-354.28 918.17) rotate(-60.69)" />
|
||||||
|
<path class="d"
|
||||||
|
d="M1231.68,321.5c1.44-1.68-3.48-3-6.84-5.84s-8.44-.9-9.87.78,1.31,2.43,4.67,5.3S1230.25,323.18,1231.68,321.5Z"
|
||||||
|
transform="translate(-703.5 -300.22)" />
|
||||||
|
<path class="d"
|
||||||
|
d="M1197.61,302.37c.69-2.09,4.36,1.43,8.56,2.81s5.16,6.73,4.47,8.83-2.76.14-7-1.23S1196.93,304.47,1197.61,302.37Z"
|
||||||
|
transform="translate(-703.5 -300.22)" />
|
||||||
|
</svg>
|
||||||
|
<h2 class="light-text">No deposit requests.</h2>
|
||||||
|
</div>
|
||||||
|
<div id="deposit_request_container">
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section id="withdraw" class="page hide-completely">
|
||||||
|
<div class="container-header">
|
||||||
|
<h2>Withdraw Requests</h2>
|
||||||
|
<div id="fetch_withdraws" class="action">
|
||||||
|
<button>
|
||||||
|
Load pending
|
||||||
|
</button>
|
||||||
|
<svg viewBox="0 0 73 73" class="loader">
|
||||||
|
<path
|
||||||
|
d="M72.5,36.5c0,19.88-16.12,36-36,36s-36-16.12-36-36s16.12-36,36-36S72.5,16.62,72.5,36.5" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<label class="search" id="search_withdraw">
|
||||||
|
<input type="search" placeholder="Search">
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div id="withdraw_illustration" class="empty">
|
||||||
|
<svg viewBox="0 0 529.94 446.5">
|
||||||
|
<defs>
|
||||||
|
<style>
|
||||||
|
.a,
|
||||||
|
.b,
|
||||||
|
.c,
|
||||||
|
.d {
|
||||||
|
fill: none;
|
||||||
|
stroke-linejoin: round;
|
||||||
|
}
|
||||||
|
|
||||||
|
.a {
|
||||||
|
stroke-width: 9px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.b,
|
||||||
|
.c {
|
||||||
|
stroke-width: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c {
|
||||||
|
stroke-dasharray: 11.94 11.94;
|
||||||
|
}
|
||||||
|
|
||||||
|
.d {
|
||||||
|
stroke-width: 3px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</defs>
|
||||||
|
<title>Empty icon</title>
|
||||||
|
<polyline class="a"
|
||||||
|
points="508.5 289 220.5 217 4.5 289 293.5 361 370.38 335.47 220.5 298 143.05 323.82 220.5 298 220.5 217 4.5 289 4.5 370 292.5 442 508.5 370 508.5 289 293.5 361 292.5 442" />
|
||||||
|
<path class="b" d="M947.54,629.34q0-3,.05-6" transform="translate(-703.5 -300.22)" />
|
||||||
|
<path class="c"
|
||||||
|
d="M948.09,611.41c5.42-83.07,49.82-144.78,102.21-154.63,57.46-10.81,101.53-.27,88.07,42.61-7.82,24.88-50.89,36.71-71.95,5.86-26.87-39.37,12.95-108.88,71.46-131,17.38-6.57,37.33-14.37,53.89-30.53"
|
||||||
|
transform="translate(-703.5 -300.22)" />
|
||||||
|
<path class="b" d="M1195.9,339.41c1.32-1.47,2.62-3,3.88-4.58"
|
||||||
|
transform="translate(-703.5 -300.22)" />
|
||||||
|
<path class="d"
|
||||||
|
d="M1215,324.59c-2,3.62-6.21,5.12-9.34,3.36s-4-6.11-2-9.72,5.67-3.13,8.8-1.37S1217,321,1215,324.59Z"
|
||||||
|
transform="translate(-703.5 -300.22)" />
|
||||||
|
<ellipse class="d" cx="1215.17" cy="310.95" rx="4.5" ry="4"
|
||||||
|
transform="translate(-354.28 918.17) rotate(-60.69)" />
|
||||||
|
<path class="d"
|
||||||
|
d="M1231.68,321.5c1.44-1.68-3.48-3-6.84-5.84s-8.44-.9-9.87.78,1.31,2.43,4.67,5.3S1230.25,323.18,1231.68,321.5Z"
|
||||||
|
transform="translate(-703.5 -300.22)" />
|
||||||
|
<path class="d"
|
||||||
|
d="M1197.61,302.37c.69-2.09,4.36,1.43,8.56,2.81s5.16,6.73,4.47,8.83-2.76.14-7-1.23S1196.93,304.47,1197.61,302.37Z"
|
||||||
|
transform="translate(-703.5 -300.22)" />
|
||||||
|
</svg>
|
||||||
|
<h2 class="light-text">No withdraw requests.</h2>
|
||||||
|
</div>
|
||||||
|
<div id="withdraw_request_container">
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section id="profile_page" class="page hide-completely">
|
||||||
|
<div class="container-header">
|
||||||
|
<h2>Profile</h2>
|
||||||
|
</div>
|
||||||
|
<h5>FLO ID</h5>
|
||||||
|
<h4>FPFeL5PXzW9bGosUjQYCxTHSMHidnygvvd</h4>
|
||||||
|
<button class="primary-btn top-margin" onclick="signOut()">Sign out</button>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
<script id="ui_functions">
|
||||||
|
let frag = document.createDocumentFragment(),
|
||||||
|
currentTimeout,
|
||||||
|
notificationSound = document.getElementById('notification_sound');
|
||||||
|
const render = {
|
||||||
|
// returns an order element;
|
||||||
|
depositRequest: function (txid, upiId, floId, currency, amount) {
|
||||||
|
let card = document.createElement('div'), currencySymbol;
|
||||||
|
card.classList.add('request')
|
||||||
|
currency === 'INR' ? currencySymbol = '₹' : currencySymbol = '$';
|
||||||
|
card.innerHTML = ` <h5>FLO ID</h5>
|
||||||
|
<h4 class="breakable">${floId}</h4>
|
||||||
|
<h5>UPI ID</h5>
|
||||||
|
<h3 class="breakable">${upiId}</h3>
|
||||||
|
<h5>Amount</h5>
|
||||||
|
<h3>${currencySymbol}${amount}</h3>
|
||||||
|
<button id="" class="confirm-deposit-btn">
|
||||||
|
Confirm
|
||||||
|
</button>`;
|
||||||
|
return card;
|
||||||
|
},
|
||||||
|
withdrawRequest: function (txid, upiId, floId, currency, amount) {
|
||||||
|
let card = document.createElement('div'), currencySymbol;
|
||||||
|
card.classList.add('request')
|
||||||
|
currency === 'INR' ? currencySymbol = '₹' : currencySymbol = '$';
|
||||||
|
card.innerHTML = ` <h5>FLO ID</h5>
|
||||||
|
<h4 class="breakable">${floId}</h4>
|
||||||
|
<h5>UPI ID</h5>
|
||||||
|
<h3 class="breakable">${upiId}</h3>
|
||||||
|
<h5>Amount</h5>
|
||||||
|
<h3>${currencySymbol}${amount}</h3>
|
||||||
|
<h5>Transaction ID</h5>
|
||||||
|
<h4 class="breakable">${txid}</h4>
|
||||||
|
<button id="" class="confirm-withdraw-btn"">
|
||||||
|
Confirm
|
||||||
|
</button>`;
|
||||||
|
return card;
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
//Checks for internet connection status
|
||||||
|
if (!navigator.onLine)
|
||||||
|
notify('error', 'There seems to be a problem connecting to the internet.', 'fixed', true)
|
||||||
|
window.addEventListener('offline', () => {
|
||||||
|
notify('error', 'There seems to be a problem connecting to the internet.', 'fixed', true)
|
||||||
|
})
|
||||||
|
window.addEventListener('online', () => {
|
||||||
|
notify('', 'We are back online.', '', true)
|
||||||
|
})
|
||||||
|
// function required for popups or modals to appear
|
||||||
|
function showPopup(popup, permission) {
|
||||||
|
let thisPopup = document.getElementById(popup);
|
||||||
|
thisPopup.parentNode.classList.remove('hide');
|
||||||
|
thisPopup.classList.add('no-transformations');
|
||||||
|
window.onmousedown = function (event) {
|
||||||
|
if (event.target == thisPopup.parentNode && permission !== 'no')
|
||||||
|
hidePopup(popup, permission);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// hides the popup or modal
|
||||||
|
function hidePopup(pop, permission) {
|
||||||
|
let popup;
|
||||||
|
typeof pop === 'string' ? popup = document.getElementById(pop) : popup = pop.closest('.popup');
|
||||||
|
if (permission === 'no') return;
|
||||||
|
popup.closest('.popup-container').classList.add('hide');
|
||||||
|
popup.closest('.popup').classList.remove('no-transformations');
|
||||||
|
setTimeout(() => {
|
||||||
|
clearAllInputs(popup)
|
||||||
|
if (popup.querySelector('.btn')) {
|
||||||
|
popup.querySelector('.btn').classList.remove('clip')
|
||||||
|
popup.querySelector('.loader').classList.remove('animate-loader')
|
||||||
|
popup.querySelector(".action button").disabled = true;
|
||||||
|
}
|
||||||
|
}, 400)
|
||||||
|
}
|
||||||
|
|
||||||
|
function setAttributes(el, attrs) {
|
||||||
|
for (var key in attrs) {
|
||||||
|
el.setAttribute(key, attrs[key]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function clearAllInputs(parent) {
|
||||||
|
parent.querySelectorAll("input").forEach((field) => {
|
||||||
|
if (field.getAttribute('type') !== 'radio') {
|
||||||
|
field.value = '';
|
||||||
|
if (field.closest('.input')) {
|
||||||
|
field.closest('.input').classList.remove('animate-label')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else
|
||||||
|
field.checked = false
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
//Function for displaying toast notifications. pass in error for mode param if you want to show an error.
|
||||||
|
function notify(mode, message, behavior, sound) {
|
||||||
|
let banner = document.getElementById('show_message'),
|
||||||
|
back;
|
||||||
|
if (mode === 'error') {
|
||||||
|
banner.querySelector('#error_icon').classList.remove('hide-completely')
|
||||||
|
banner.querySelector('#done_icon').classList.add('hide-completely')
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
banner.querySelector('#error_icon').classList.add('hide-completely')
|
||||||
|
banner.querySelector('#done_icon').classList.remove('hide-completely')
|
||||||
|
}
|
||||||
|
|
||||||
|
banner.style.background = back;
|
||||||
|
banner.classList.add('no-transformations')
|
||||||
|
banner.classList.remove('hide')
|
||||||
|
banner.querySelector('#notification_text').textContent = message.charAt(0).toUpperCase() + message.slice(1);
|
||||||
|
if (navigator.onLine && sound) {
|
||||||
|
notificationSound.currentTime = 0;
|
||||||
|
notificationSound.play();
|
||||||
|
}
|
||||||
|
banner.querySelector('#hide_banner_btn').onclick = function () {
|
||||||
|
banner.classList.add('hide')
|
||||||
|
banner.classList.remove('no-transformations')
|
||||||
|
}
|
||||||
|
clearTimeout(currentTimeout)
|
||||||
|
if (behavior === 'fixed') return;
|
||||||
|
currentTimeout = setTimeout(() => {
|
||||||
|
banner.classList.add('hide')
|
||||||
|
banner.classList.remove('no-transformations')
|
||||||
|
}, 4000)
|
||||||
|
}
|
||||||
|
|
||||||
|
// displays a popup for asking permission. Use this instead of JS confirm
|
||||||
|
let askConfirmation = function (message) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
let popup = document.getElementById('confirmation');
|
||||||
|
showPopup('confirmation')
|
||||||
|
popup.children[0].textContent = message;
|
||||||
|
popup.children[1].firstElementChild.onclick = function () {
|
||||||
|
hidePopup('confirmation')
|
||||||
|
resolve(false)
|
||||||
|
}
|
||||||
|
popup.children[1].children[1].onclick = function () {
|
||||||
|
hidePopup('confirmation')
|
||||||
|
resolve(true);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
function enableBtn(btn) {
|
||||||
|
if (typeof btn === 'string')
|
||||||
|
btn = document.getElementById(btn);
|
||||||
|
if (btn.disabled)
|
||||||
|
btn.disabled = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function disableBtn(btn) {
|
||||||
|
if (typeof btn === 'string')
|
||||||
|
btn = document.getElementById(btn);
|
||||||
|
if (!btn.disabled)
|
||||||
|
btn.disabled = true;
|
||||||
|
}
|
||||||
|
function btnLoading(btn, option) {
|
||||||
|
if (typeof btn === 'string')
|
||||||
|
btn = document.getElementById(btn);
|
||||||
|
if (option === 'start') {
|
||||||
|
btn.firstElementChild.focus();
|
||||||
|
btn.children[0].classList.add('clip')
|
||||||
|
btn.children[1].classList.add('animate-loader')
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
disableBtn(btn.children[0])
|
||||||
|
btn.children[0].classList.remove('clip')
|
||||||
|
btn.children[1].classList.remove('animate-loader')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// prevents non numerical input on firefox
|
||||||
|
function preventNonNumericalInput(e) {
|
||||||
|
e = e || window.event;
|
||||||
|
let charCode = (typeof e.which == "undefined") ? e.keyCode : e.which,
|
||||||
|
charStr = String.fromCharCode(charCode);
|
||||||
|
|
||||||
|
if (!charStr.match(/[+-]?([0-9]*[.])?[0-9]+/))
|
||||||
|
e.preventDefault();
|
||||||
|
}
|
||||||
|
|
||||||
|
function areInputsEmpty(parent) {
|
||||||
|
let allInputs = parent.querySelectorAll(".input input"),
|
||||||
|
allRadios = parent.querySelectorAll("input[type='radio']"),
|
||||||
|
radioStatus, inputStatus, counter = 0;
|
||||||
|
inputStatus = [...allInputs].every(input => input.checkValidity())
|
||||||
|
|
||||||
|
allRadios.forEach(radio => {
|
||||||
|
if (radio.checked)
|
||||||
|
counter++;
|
||||||
|
})
|
||||||
|
if (counter == allRadios.length / 2)
|
||||||
|
radioStatus = true;
|
||||||
|
if (inputStatus && radioStatus)
|
||||||
|
return true
|
||||||
|
else false
|
||||||
|
}
|
||||||
|
|
||||||
|
function formValidation(formElement, e) {
|
||||||
|
if (formElement.getAttribute('type') === 'number')
|
||||||
|
preventNonNumericalInput(e);
|
||||||
|
let parent = formElement.closest('form'),
|
||||||
|
submitBtn = parent.querySelector(".action button");
|
||||||
|
if (areInputsEmpty(parent))
|
||||||
|
submitBtn.disabled = false;
|
||||||
|
else
|
||||||
|
submitBtn.disabled = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
let allForms = document.querySelectorAll('form');
|
||||||
|
window.addEventListener('load', () => {
|
||||||
|
allForms.forEach((form) => {
|
||||||
|
form.addEventListener('input', (e) => {
|
||||||
|
if (e.target.closest('.input')) {
|
||||||
|
let parent = e.target.closest('.input');
|
||||||
|
if (parent.firstElementChild.value !== '')
|
||||||
|
parent.classList.add('animate-label')
|
||||||
|
else
|
||||||
|
parent.classList.remove('animate-label')
|
||||||
|
formValidation(parent.firstElementChild, e)
|
||||||
|
if (e.key === 'Enter') {
|
||||||
|
parent.closest('form').querySelector("button[type='submit']").click();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
allForms.forEach((form) => {
|
||||||
|
form.addEventListener('blur', (e) => {
|
||||||
|
if (e.target.closest('.input')) {
|
||||||
|
let parent = e.target.closest('.input');
|
||||||
|
if (parent.firstElementChild.value === '')
|
||||||
|
parent.classList.remove('animate-label')
|
||||||
|
}
|
||||||
|
}, true)
|
||||||
|
})
|
||||||
|
|
||||||
|
// Function for confirming deposit requests
|
||||||
|
document.getElementById('deposit_request_container').addEventListener('click', (e) => {
|
||||||
|
let container = document.getElementById('deposit_request_container');
|
||||||
|
if (e.target.closest('.confirm-deposit-btn'))
|
||||||
|
askConfirmation('Confirm this deposit request?').then((result) => {
|
||||||
|
if (result) {
|
||||||
|
let depositRequestId = e.target.closest('.confirm-deposit-btn').id;
|
||||||
|
btnLoading(e.target.closest('.confirm-deposit-btn'), 'start')
|
||||||
|
setTimeout(() => {
|
||||||
|
e.target.closest('.request').remove();
|
||||||
|
notify('', `Request id: ${depositRequestId} confirmed.`, '', true)
|
||||||
|
checkBalance();
|
||||||
|
if (container.children.length === 0) {
|
||||||
|
document.getElementById('deposit_illustration').classList.remove('hide-completely')
|
||||||
|
document.getElementById('search_deposit').classList.add('hide-completely')
|
||||||
|
}
|
||||||
|
}, 1000)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
// Function for confirming withdraw requests
|
||||||
|
document.getElementById('withdraw_request_container').addEventListener('click', (e) => {
|
||||||
|
let container = document.getElementById('withdraw_request_container');
|
||||||
|
if (e.target.closest('.confirm-withdraw-btn'))
|
||||||
|
askConfirmation('Confirm this withdraw request?').then((result) => {
|
||||||
|
if (result) {
|
||||||
|
let withdrawRequestId = e.target.closest('.confirm-withdraw-btn').id;
|
||||||
|
btnLoading(e.target.closest('.confirm-withdraw-btn'), 'start')
|
||||||
|
setTimeout(() => {
|
||||||
|
e.target.closest('.request').remove();
|
||||||
|
notify('', `Request id: ${withdrawRequestId} confirmed.`, '', true)
|
||||||
|
if (container.children.length === 0) {
|
||||||
|
document.getElementById('withdraw_illustration').classList.remove('hide-completely')
|
||||||
|
document.getElementById('search_withdraw').classList.add('hide-completely')
|
||||||
|
}
|
||||||
|
}, 1000)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
//renders deposit requests
|
||||||
|
document.getElementById('deposit_request_container').innerHTML = '';
|
||||||
|
for (let i = 0; i < 6; i++) {
|
||||||
|
frag.append(render.depositRequest('s6f5h4s65f4h6s5465s4', '7744023898@paytm', 'FPFeL5PXzW9bGosUjQYCxTHSMHidnygvvd', 'INR', '50000'))
|
||||||
|
}
|
||||||
|
if (frag.children.length === 0) {
|
||||||
|
document.getElementById('deposit_illustration').classList.remove('hide-completely')
|
||||||
|
document.getElementById('search_deposit').classList.add('hide-completely')
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
document.getElementById('search_withdraw').classList.remove('hide-completely')
|
||||||
|
document.getElementById('deposit_illustration').classList.add('hide-completely')
|
||||||
|
}
|
||||||
|
document.getElementById('deposit_request_container').append(frag);
|
||||||
|
|
||||||
|
//renders deposit requests
|
||||||
|
document.getElementById('withdraw_request_container').innerHTML = '';
|
||||||
|
for (let i = 0; i < 4; i++) {
|
||||||
|
frag.append(render.withdrawRequest('s6f5h4s65f4h6s5465s4kdvbskjbvjasbdvbadbvjabdjvajdbksvjbskjb', '7744023898@paytm', 'FPFeL5PXzW9bGosUjQYCxTHSMHidnygvvd', 'INR', '50000'))
|
||||||
|
}
|
||||||
|
if (frag.children.length === 0) {
|
||||||
|
document.getElementById('withdraw_request_container').innerHTML = ``;
|
||||||
|
document.getElementById('search_withdraw').classList.add('hide-completely')
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
document.getElementById('search_withdraw').classList.remove('hide-completely')
|
||||||
|
document.getElementById('withdraw_illustration').classList.add('hide-completely')
|
||||||
|
}
|
||||||
|
|
||||||
|
document.getElementById('withdraw_request_container').append(frag);
|
||||||
|
})
|
||||||
|
|
||||||
|
let allPages = document.querySelectorAll('.page'),
|
||||||
|
allTabs = document.querySelectorAll('.navbar-item');
|
||||||
|
function showPage(btn, page) {
|
||||||
|
let thisBtn;
|
||||||
|
typeof btn === 'string' ? thisbtn = document.getElementById(btn) : thisBtn = btn;
|
||||||
|
allPages.forEach((page) => {
|
||||||
|
page.classList.add('hide-completely')
|
||||||
|
})
|
||||||
|
allTabs.forEach((tab) => {
|
||||||
|
tab.classList.remove('active')
|
||||||
|
})
|
||||||
|
document.getElementById(page).classList.remove('hide-completely')
|
||||||
|
thisBtn.classList.add('active', 'shrink')
|
||||||
|
if (page === 'send_token') {
|
||||||
|
document.getElementById('deposit_page_btn').classList.remove('shrink')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let balDisplay = document.getElementById('token_balance'),
|
||||||
|
userFloId = 'FCja6sLv58e3RMy41T5AmWyvXEWesqBCkX';
|
||||||
|
function checkBalance() {
|
||||||
|
fetch(`https://ranchimallflo.duckdns.org/api/v1.0/getFloAddressBalance?floAddress=${userFloId}&token=rupee`)
|
||||||
|
.then((response) => {
|
||||||
|
if (response.status !== 200) {
|
||||||
|
console.log('Looks like there was a problem. Status Code: ' +
|
||||||
|
response.status);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// Examine the text in the response
|
||||||
|
response.json().then(function (data) {
|
||||||
|
balDisplay.textContent = data.balance;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
)
|
||||||
|
.catch(function (err) {
|
||||||
|
console.log('Fetch Error :-S', err);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// exchange execute option functions
|
||||||
|
|
||||||
|
function buyCrypto(btn) {
|
||||||
|
let parentPopup = btn.closest('.popup'),
|
||||||
|
selectedCrypto = parentPopup.querySelector("input[name='crypto']:checked").value,
|
||||||
|
selectedCurrency = parentPopup.querySelector("input[name='currency']:checked").value,
|
||||||
|
buyWorth = parentPopup.querySelector('.input input').value;
|
||||||
|
console.log(selectedCrypto, selectedCurrency, buyWorth)
|
||||||
|
btnLoading(btn, 'start')
|
||||||
|
|
||||||
|
//if operation completes{
|
||||||
|
setTimeout(() => {
|
||||||
|
btnLoading(btn, 'stop')
|
||||||
|
hidePopup(parentPopup)
|
||||||
|
notify('', 'Bought Crypto')
|
||||||
|
}, 1000)
|
||||||
|
//}
|
||||||
|
/*else{
|
||||||
|
notify('error', 'Error message')
|
||||||
|
}*/
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function signIn(btn) {
|
||||||
|
let parentPopup = btn.closest('form');
|
||||||
|
btnLoading(btn, 'start')
|
||||||
|
|
||||||
|
//if operation completes{
|
||||||
|
setTimeout(() => {
|
||||||
|
btnLoading(btn, 'stop')
|
||||||
|
hidePopup(parentPopup)
|
||||||
|
notify('', 'Signed In')
|
||||||
|
document.querySelector('main').classList.remove('hide-completely')
|
||||||
|
document.getElementById('deposit_page_btn').click()
|
||||||
|
}, 1000)
|
||||||
|
//}
|
||||||
|
}
|
||||||
|
|
||||||
|
function signOut() {
|
||||||
|
askConfirmation('Do you want to sign out?').then((result) => {
|
||||||
|
if (result) {
|
||||||
|
notify('', 'Signed out')
|
||||||
|
document.querySelector('main').classList.add('hide-completely')
|
||||||
|
showPopup('sign_in_popup')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
checkBalance()
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue
Block a user