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