RanchiMall/flopay
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

0.0.43

Browse Source
This commit is contained in:
sairaj mote 2020-09-28 03:07:32 +05:30
parent 449316b73d
commit 184276fb7c
6 changed files with 260 additions and 211 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components.js
View File

@ -1907,7 +1907,7 @@ customElements.define('sm-popup', class extends HTMLElement {
handleTouchStart = (e) => { handleTouchStart = (e) => {
this.touchStartY = e.changedTouches[0].clientY this.touchStartY = e.changedTouches[0].clientY
this.popup.style.transition = 'initial' this.popup.style.transition = 'transform 0.1s'
this.touchStartTime = e.timeStamp this.touchStartTime = e.timeStamp
} }

34
css/bg-art4.svg Normal file
View File

@ -0,0 +1,34 @@
<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<rect width="512" height="512" fill="#DE7EFF"/>
<g filter="url(#filter0_d)">
<path d="M221.779 309.294C48.3794 380.575 -58.7347 516.954 -91.1719 575.626L-100 0.193375L564.422 -10L566.853 148.481C506.54 258.92 398.685 236.571 221.779 309.294Z" fill="#F1BAFF"/>
</g>
<g filter="url(#filter1_d)">
<path d="M155.507 228.837C0.0457989 333.625 -77.3623 488.805 -97.3001 552.812L-222 -9.0155L426.713 -153L461.057 1.73443C424.257 122.067 314.11 121.931 155.507 228.837Z" fill="#FAE6FF"/>
</g>
</g>
<defs>
<filter id="filter0_d" x="-100" y="-26" width="715.25" height="625.626" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dx="22" dy="4"/>
<feGaussianBlur stdDeviation="10"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<filter id="filter1_d" x="-222" y="-156" width="815.413" height="743.812" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dx="23" dy="16"/>
<feGaussianBlur stdDeviation="9.5"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<clipPath id="clip0">
<rect width="512" height="512" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

132
css/main.css
View File

@ -14,7 +14,7 @@ body {
--text-color: 17, 17, 17; --text-color: 17, 17, 17;
--text-color-light: 85, 85, 85; --text-color-light: 85, 85, 85;
--foreground-color: 255, 255, 255; --foreground-color: 255, 255, 255;
--background-color: #e8e8e8; --background-color: rgba(var(--foreground-color), 1);
--dark-shade: #dadada; --dark-shade: #dadada;
--hue: 255; --hue: 255;
--saturation: 61%; --saturation: 61%;
@ -24,6 +24,18 @@ body {
background-size: cover; background-size: cover;
} }
body[data-theme=dark] {
--accent-color: #a293d0;
--text-color: 238, 238, 238;
--text-color-light: 170, 170, 170;
--foreground-color: 26, 26, 26;
--background-color: #111;
background-color: var(--background-color);
}
body[data-theme=dark] .balance:nth-of-type(3) {
color: rgba(var(--text-color), 1);
}
a { a {
font-weight: 600; font-weight: 600;
text-decoration: none; text-decoration: none;
@ -394,6 +406,12 @@ sm-popup .action h4 {
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
font-weight: 500; font-weight: 500;
} }
sm-popup .message {
margin-bottom: 0.2rem;
}
sm-popup .message + .copy-row {
margin-bottom: 1.5rem;
}
sm-popup h5:not(.tag) { sm-popup h5:not(.tag) {
font-family: "Roboto", sans-serif; font-family: "Roboto", sans-serif;
margin-bottom: 0.4rem; margin-bottom: 0.4rem;
@ -494,7 +512,8 @@ details p {
position: relative; position: relative;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
padding: 0.3em; padding: 0.3rem;
padding-top: 0.8rem;
border-radius: 0.4em; border-radius: 0.4em;
opacity: 0.6; opacity: 0.6;
color: rgba(var(--text-color), 1); color: rgba(var(--text-color), 1);
@ -551,7 +570,15 @@ details p {
gap: 0.8rem; gap: 0.8rem;
margin-top: 1rem; margin-top: 1rem;
} }
.display-balance .balance { .display-balance .icon {
height: 1.4rem;
width: 1.4rem;
padding: 0.3rem;
stroke-width: 10;
cursor: pointer;
}
.balance {
height: 10rem; height: 10rem;
position: relative; position: relative;
display: flex; display: flex;
@ -560,7 +587,7 @@ details p {
padding: 1rem; padding: 1rem;
justify-content: flex-end; justify-content: flex-end;
} }
.display-balance .balance h4 { .balance h4 {
font-size: 2.5rem; font-size: 2.5rem;
font-family: "Roboto", sans-serif; font-family: "Roboto", sans-serif;
font-weight: 500; font-weight: 500;
@ -568,47 +595,40 @@ details p {
word-break: break-all; word-break: break-all;
flex: 1; flex: 1;
} }
.display-balance .balance h5 { .balance h5 {
opacity: 0.8; opacity: 0.8;
margin-bottom: 0.2rem; margin-bottom: 0.2rem;
} }
.display-balance .balance .tooltip { .balance .tooltip {
border-radius: 1rem; border-radius: 1rem;
color: rgba(var(--text-color), 1); color: rgba(var(--text-color), 1);
} }
.display-balance .balance:nth-of-type(1) { .balance:nth-of-type(1) {
background: url(bg-art2.svg) bottom, linear-gradient(200deg, rgba(var(--text-color), 0.1), rgba(var(--text-color), 0.2)); background: url(bg-art2.svg) bottom, linear-gradient(200deg, rgba(var(--text-color), 0.1), rgba(var(--text-color), 0.2));
background-size: cover; background-size: cover;
} }
.display-balance .balance:nth-of-type(1) .tooltip { .balance:nth-of-type(1) .tooltip {
box-shadow: 0 0 0 0.4rem rgba(var(--text-color), 0.1) inset; box-shadow: 0 0 0 0.4rem rgba(var(--text-color), 0.1) inset;
} }
.display-balance .balance:nth-of-type(2) { .balance:nth-of-type(2) {
background: url(bg-art1.svg), linear-gradient(135deg, #fd946a, #ff4857); background: url(bg-art1.svg), linear-gradient(135deg, #fd946a, #ff4857);
background-size: cover; background-size: cover;
} }
.display-balance .balance:nth-of-type(2) .tooltip { .balance:nth-of-type(2) .tooltip {
box-shadow: 0 0 0 0.4rem #ff4857 inset; box-shadow: 0 0 0 0.4rem #ff4857 inset;
} }
.display-balance .balance:nth-of-type(3) { .balance:nth-of-type(3) {
grid-area: flo; grid-area: flo;
color: rgba(var(--foreground-color), 1); color: rgba(var(--foreground-color), 1);
background: url(bg-art3.svg) bottom no-repeat, linear-gradient(270deg, #2f69e6, #1b0980); background: url(bg-art3.svg) bottom no-repeat, linear-gradient(270deg, #2f69e6, #1b0980);
background-size: cover; background-size: cover;
} }
.display-balance .balance:nth-of-type(3) .tooltip { .balance:nth-of-type(3) .tooltip {
box-shadow: 0 0 0 0.4rem #1b0980 inset; box-shadow: 0 0 0 0.4rem #1b0980 inset;
} }
.display-balance .balance .tooltip { .balance .tooltip {
margin-left: auto; margin-left: auto;
} }
.display-balance .icon {
height: 1.4rem;
width: 1.4rem;
padding: 0.3rem;
stroke-width: 10;
cursor: pointer;
}
.tooltip { .tooltip {
position: absolute; position: absolute;
@ -717,7 +737,7 @@ details p {
sm-tab-header { sm-tab-header {
position: sticky; position: sticky;
top: 0; top: 0;
background: rgba(var(--foreground-color), 1); background: var(--background-color);
z-index: 2; z-index: 2;
padding: 1rem 0; padding: 1rem 0;
margin-bottom: 1rem; margin-bottom: 1rem;
@ -968,10 +988,6 @@ sm-panel {
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
#send_amount_to_deposit {
margin-bottom: 0 !important;
}
@keyframes popup { @keyframes popup {
0% { 0% {
stroke-dashoffset: 50; stroke-dashoffset: 50;
@ -1073,6 +1089,7 @@ sm-panel {
width: 3rem; width: 3rem;
padding: 0.8rem; padding: 0.8rem;
background: rgba(var(--text-color), 0.06); background: rgba(var(--text-color), 0.06);
background-size: cover;
border-radius: 2rem; border-radius: 2rem;
} }
.activity .activity-type { .activity .activity-type {
@ -1152,7 +1169,6 @@ sm-panel {
transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
} }
.select .remove { .select .remove {
display: none;
width: 3rem; width: 3rem;
height: 2rem; height: 2rem;
padding: 0.7rem; padding: 0.7rem;
@ -1178,9 +1194,12 @@ sm-panel {
width: max-content; width: max-content;
} }
#settings_page .remove { #activity_page .empty-state,
display: block; #request_page .empty-state,
#settings_page .empty-state {
justify-content: left;
} }
#settings_page > h4 { #settings_page > h4 {
margin-top: 2rem; margin-top: 2rem;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
@ -1191,9 +1210,6 @@ sm-panel {
#settings_page sm-button { #settings_page sm-button {
margin-top: 0.8rem; margin-top: 0.8rem;
} }
#settings_page .empty-state {
justify-content: left;
}
@media only screen and (max-width: 640px) { @media only screen and (max-width: 640px) {
#home_page, #deposit { #home_page, #deposit {
@ -1221,7 +1237,7 @@ sm-panel {
body { body {
padding: 0 2rem; padding: 0 2rem;
margin-left: 11rem; margin-left: 4rem;
} }
sm-popup { sm-popup {
@ -1252,16 +1268,14 @@ sm-panel {
#navbar .navbar-item { #navbar .navbar-item {
display: flex; display: flex;
width: auto; width: auto;
padding: 0.8rem; padding: 0.8rem 1.2rem;
} }
#navbar .navbar-item .icon { #navbar .navbar-item .icon {
height: 1.2rem; height: 1.2rem;
width: 1.2rem; width: 1.2rem;
margin-right: 0.8rem;
} }
#navbar .navbar-item h5 { #navbar .navbar-item h5 {
font-size: 0.9rem; display: none;
margin: 0;
} }
#navbar .navbar-item:hover { #navbar .navbar-item:hover {
opacity: 1; opacity: 1;
@ -1270,7 +1284,7 @@ sm-panel {
margin: 1.5rem 1rem; margin: 1.5rem 1rem;
} }
#navbar .logo h4 { #navbar .logo h4 {
font-size: 1rem; display: none;
} }
#navbar .logo .main-logo { #navbar .logo .main-logo {
height: 1.2rem; height: 1.2rem;
@ -1309,6 +1323,10 @@ sm-panel {
} }
} }
@media only screen and (min-width: 800px) { @media only screen and (min-width: 800px) {
body {
margin-left: 11rem;
}
.complaint { .complaint {
gap: 0 1.5rem; gap: 0 1.5rem;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
@ -1327,6 +1345,19 @@ sm-panel {
flex-direction: column; flex-direction: column;
} }
#navbar .navbar-item h5 {
font-size: 0.9rem;
margin: 0;
display: block;
}
#navbar .icon {
margin-right: 0.8rem;
}
#navbar .logo h4 {
display: block;
font-size: 1rem;
}
.user-panel { .user-panel {
position: sticky; position: sticky;
top: 1.5rem; top: 1.5rem;
@ -1358,33 +1389,6 @@ sm-panel {
font-size: 14px; font-size: 14px;
} }
} }
@media (prefers-color-scheme: dark) {
:root {
--text-color: 238, 238, 238;
--text-color-light: 170, 170, 170;
--foreground-color: 26, 26, 26;
--background-color: #111;
--dark-shade: #1a1a1a;
}
}
@media (prefers-color-scheme: light) {
:root {
--text-color: 17, 17, 17;
--text-color-light: 85, 85, 85;
--foreground-color: 255, 255, 255;
--background-color: #e8e8e8;
--dark-shade: #dadada;
}
}
@media (prefers-color-scheme: no-preference) {
:root {
--text-color: 17, 17, 17;
--text-color-light: 85, 85, 85;
--foreground-color: 255, 255, 255;
--background-color: #e8e8e8;
--dark-shade: #dadada;
}
}
@media (any-hover: hover) { @media (any-hover: hover) {
.navbar-item:hover { .navbar-item:hover {
background: rgba(var(--text-color), 0.06); background: rgba(var(--text-color), 0.06);

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

203
css/main.scss
View File

@ -14,7 +14,7 @@ body {
--text-color: 17, 17, 17; --text-color: 17, 17, 17;
--text-color-light: 85, 85, 85; --text-color-light: 85, 85, 85;
--foreground-color: 255, 255, 255; --foreground-color: 255, 255, 255;
--background-color: #e8e8e8; --background-color: rgba(var(--foreground-color), 1);
--dark-shade: #dadada; --dark-shade: #dadada;
--hue: 255; --hue: 255;
--saturation: 61%; --saturation: 61%;
@ -23,6 +23,17 @@ body {
font-size: 16px; font-size: 16px;
background-size: cover; background-size: cover;
} }
body[data-theme="dark"]{
--accent-color: #a293d0;
--text-color: 238, 238, 238;
--text-color-light: 170, 170, 170;
--foreground-color: 26, 26, 26;
--background-color: #111;
background-color: var(--background-color);
.balance:nth-of-type(3){
color: rgba(var(--text-color), 1);
}
}
a { a {
font-weight: 600; font-weight: 600;
@ -412,6 +423,12 @@ sm-popup{
font-weight: 500; font-weight: 500;
} }
} }
.message{
margin-bottom: 0.2rem;
}
.message + .copy-row{
margin-bottom: 1.5rem;
}
h5:not(.tag){ h5:not(.tag){
font-family: 'Roboto', sans-serif; font-family: 'Roboto', sans-serif;
margin-bottom: 0.4rem; margin-bottom: 0.4rem;
@ -517,7 +534,8 @@ details{
position: relative; position: relative;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
padding: 0.3em; padding: 0.3rem;
padding-top: 0.8rem;
border-radius: 0.4em; border-radius: 0.4em;
opacity: 0.6; opacity: 0.6;
color: rgba(var(--text-color), 1); color: rgba(var(--text-color), 1);
@ -575,57 +593,6 @@ details{
grid-template-areas: '. .' 'flo flo'; grid-template-areas: '. .' 'flo flo';
gap: 0.8rem; gap: 0.8rem;
margin-top: 1rem; margin-top: 1rem;
.balance{
height: 10rem;
position: relative;
display: flex;
flex-direction: column;
border-radius: 1rem;
padding: 1rem;
justify-content: flex-end;
h4{
font-size: 2.5rem;
font-family: 'Roboto', sans-serif;
font-weight: 500;
text-shadow: 1px 0.1rem 0.2rem #00000040;
word-break: break-all;
flex: 1;
}
h5{
opacity: 0.8;
margin-bottom: 0.2rem;
}
.tooltip{
border-radius: 1rem;
color: rgba(var(--text-color), 1);
}
&:nth-of-type(1){
background: url(bg-art2.svg) bottom, linear-gradient(200deg, rgba(var(--text-color), 0.1), rgba(var(--text-color), 0.2));
background-size: cover;
.tooltip{
box-shadow: 0 0 0 0.4rem rgba(var(--text-color), 0.1) inset;
}
}
&:nth-of-type(2){
background: url(bg-art1.svg), linear-gradient(135deg, #fd946a, #ff4857);
background-size: cover;
.tooltip{
box-shadow: 0 0 0 0.4rem #ff4857 inset;
}
}
&:nth-of-type(3){
grid-area: flo;
color: rgba(var(--foreground-color), 1);
background: url(bg-art3.svg) bottom no-repeat, linear-gradient(270deg, #2f69e6, #1b0980);
background-size: cover;
.tooltip{
box-shadow: 0 0 0 0.4rem#1b0980 inset;
}
}
.tooltip{
margin-left: auto;
}
}
.icon { .icon {
height: 1.4rem; height: 1.4rem;
width: 1.4rem; width: 1.4rem;
@ -634,6 +601,57 @@ details{
cursor: pointer; cursor: pointer;
} }
} }
.balance{
height: 10rem;
position: relative;
display: flex;
flex-direction: column;
border-radius: 1rem;
padding: 1rem;
justify-content: flex-end;
h4{
font-size: 2.5rem;
font-family: 'Roboto', sans-serif;
font-weight: 500;
text-shadow: 1px 0.1rem 0.2rem #00000040;
word-break: break-all;
flex: 1;
}
h5{
opacity: 0.8;
margin-bottom: 0.2rem;
}
.tooltip{
border-radius: 1rem;
color: rgba(var(--text-color), 1);
}
&:nth-of-type(1){
background: url(bg-art2.svg) bottom, linear-gradient(200deg, rgba(var(--text-color), 0.1), rgba(var(--text-color), 0.2));
background-size: cover;
.tooltip{
box-shadow: 0 0 0 0.4rem rgba(var(--text-color), 0.1) inset;
}
}
&:nth-of-type(2){
background: url(bg-art1.svg), linear-gradient(135deg, #fd946a, #ff4857);
background-size: cover;
.tooltip{
box-shadow: 0 0 0 0.4rem #ff4857 inset;
}
}
&:nth-of-type(3){
grid-area: flo;
color: rgba(var(--foreground-color), 1);
background: url(bg-art3.svg) bottom no-repeat, linear-gradient(270deg, #2f69e6, #1b0980);
background-size: cover;
.tooltip{
box-shadow: 0 0 0 0.4rem#1b0980 inset;
}
}
.tooltip{
margin-left: auto;
}
}
.tooltip{ .tooltip{
position: absolute; position: absolute;
@ -746,7 +764,7 @@ details{
sm-tab-header { sm-tab-header {
position: sticky; position: sticky;
top: 0; top: 0;
background: rgba(var(--foreground-color), 1); background: var(--background-color);
z-index: 2; z-index: 2;
padding: 1rem 0; padding: 1rem 0;
margin-bottom: 1rem; margin-bottom: 1rem;
@ -1030,9 +1048,6 @@ sm-panel{
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
} }
#send_amount_to_deposit{
margin-bottom: 0 !important;
}
@keyframes popup{ @keyframes popup{
0%{ 0%{
@ -1136,6 +1151,7 @@ sm-panel{
width: 3rem; width: 3rem;
padding: 0.8rem; padding: 0.8rem;
background: rgba(var(--text-color), 0.06); background: rgba(var(--text-color), 0.06);
background-size: cover;
border-radius: 2rem; border-radius: 2rem;
} }
.activity-type{ .activity-type{
@ -1214,7 +1230,6 @@ sm-panel{
} }
} }
.remove{ .remove{
display: none;
width: 3rem; width: 3rem;
height: 2rem; height: 2rem;
padding: 0.7rem; padding: 0.7rem;
@ -1239,10 +1254,14 @@ sm-panel{
justify-self: flex-start; justify-self: flex-start;
width: max-content; width: max-content;
} }
#activity_page,
#request_page,
#settings_page{ #settings_page{
.remove{ .empty-state{
display: block; justify-content: left;
} }
}
#settings_page{
& > h4{ & > h4{
margin-top: 2rem; margin-top: 2rem;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
@ -1253,9 +1272,6 @@ sm-panel{
sm-button{ sm-button{
margin-top: 0.8rem; margin-top: 0.8rem;
} }
.empty-state{
justify-content: left;
}
} }
@media only screen and (max-width: 640px) { @media only screen and (max-width: 640px) {
#home_page, #deposit{ #home_page, #deposit{
@ -1281,7 +1297,7 @@ sm-panel{
} }
body { body {
padding: 0 2rem; padding: 0 2rem;
margin-left: 11rem; margin-left: 4rem;
} }
sm-popup{ sm-popup{
background: rgba(var(--foreground-color), 1); background: rgba(var(--foreground-color), 1);
@ -1309,15 +1325,13 @@ sm-panel{
.navbar-item { .navbar-item {
display: flex; display: flex;
width: auto; width: auto;
padding: 0.8rem; padding: 0.8rem 1.2rem;
.icon { .icon {
height: 1.2rem; height: 1.2rem;
width: 1.2rem; width: 1.2rem;
margin-right: 0.8rem;
} }
h5{ h5{
font-size: 0.9rem; display: none;
margin: 0;
} }
&:hover { &:hover {
opacity: 1; opacity: 1;
@ -1326,7 +1340,7 @@ sm-panel{
.logo{ .logo{
margin: 1.5rem 1rem; margin: 1.5rem 1rem;
h4{ h4{
font-size: 1rem; display: none;
} }
.main-logo{ .main-logo{
height: 1.2rem; height: 1.2rem;
@ -1368,6 +1382,9 @@ sm-panel{
} }
@media only screen and (min-width: 800px) { @media only screen and (min-width: 800px) {
body {
margin-left: 11rem;
}
.complaint { .complaint {
gap: 0 1.5rem; gap: 0 1.5rem;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
@ -1388,6 +1405,24 @@ sm-panel{
flex-direction: column; flex-direction: column;
} }
} }
#navbar{
.navbar-item {
h5{
font-size: 0.9rem;
margin: 0;
display: block;
}
}
.icon{
margin-right: 0.8rem;
}
.logo{
h4{
display: block;
font-size: 1rem;
}
}
}
.user-panel{ .user-panel{
position: sticky; position: sticky;
top: 1.5rem; top: 1.5rem;
@ -1421,36 +1456,6 @@ sm-panel{
} }
} }
@media (prefers-color-scheme: dark) {
:root {
--text-color: 238, 238, 238;
--text-color-light: 170, 170, 170;
--foreground-color: 26, 26, 26;
--background-color: #111;
--dark-shade: #1a1a1a;
}
}
@media (prefers-color-scheme: light) {
:root {
--text-color: 17, 17, 17;
--text-color-light: 85, 85, 85;
--foreground-color: 255, 255, 255;
--background-color: #e8e8e8;
--dark-shade: #dadada;
}
}
@media (prefers-color-scheme: no-preference) {
:root {
--text-color: 17, 17, 17;
--text-color-light: 85, 85, 85;
--foreground-color: 255, 255, 255;
--background-color: #e8e8e8;
--dark-shade: #dadada;
}
}
@media (any-hover: hover) { @media (any-hover: hover) {
.navbar-item:hover{ .navbar-item:hover{
background: rgba(var(--text-color), 0.06); background: rgba(var(--text-color), 0.06);

98
index.html
View File

@ -129,7 +129,7 @@
<h5>Step 6</h5> <h5>Step 6</h5>
<p>Press <strong>Deposit</strong> button</p> <p>Press <strong>Deposit</strong> button</p>
</details> </details>
<p id="send_amount_to_deposit">Pay <b>₹0</b> to UPI Id below.</p> <p class="message">Send money to UPI ID below.</p>
<div class="copy-row"> <div class="copy-row">
<h4 id="send_cash_to_deposit" class="copy"></h4> <h4 id="send_cash_to_deposit" class="copy"></h4>
<svg class="icon" onclick="copyToClipboard(this.parentNode)" viewBox="0 0 64 64"> <svg class="icon" onclick="copyToClipboard(this.parentNode)" viewBox="0 0 64 64">
@ -255,7 +255,15 @@
sent as Rupee. sent as Rupee.
</p> </p>
</details> </details>
<p id="pay_cashier_info"></p> <p class="message">Send money to UPI ID below.</p>
<div class="copy-row">
<h4 id="pay_cashier_info" class="copy"></h4>
<svg class="icon" onclick="copyToClipboard(this.parentNode)" viewBox="0 0 64 64">
<title>Copy</title>
<rect x="16" y="16" width="48" height="48" rx="6" />
<path d="M.5,47.52V6.5a6,6,0,0,1,6-6h41" />
</svg>
</div>
<sm-input id="recvr_amount_to_pay" placeholder="Amount" type="number" min="1" max="100000" required> <sm-input id="recvr_amount_to_pay" placeholder="Amount" type="number" min="1" max="100000" required>
<svg slot="icon" class="rupee-symbol" viewBox="0 0 64 64"> <svg slot="icon" class="rupee-symbol" viewBox="0 0 64 64">
<title>rupee-symbol</title> <title>rupee-symbol</title>
@ -713,21 +721,21 @@
<h3>Payment Requests</h3> <h3>Payment Requests</h3>
<sm-tab-header variant="tab" class="round" target="payment_request_tab"> <sm-tab-header variant="tab" class="round" target="payment_request_tab">
<sm-tab>Pending</sm-tab> <sm-tab>Pending</sm-tab>
<sm-tab>Approved</sm-tab> <sm-tab>Paid</sm-tab>
<sm-tab>Declined</sm-tab> <sm-tab>Declined</sm-tab>
</sm-tab-header> </sm-tab-header>
<sm-tab-panels id="payment_request_tab"> <sm-tab-panels id="payment_request_tab">
<sm-panel> <sm-panel>
<div id="pending_payment_request_container" class="container"></div> <div id="pending_payment_request_container" class="container"></div>
<h4 class="empty-state">You don't have any requests.</h4> <h4 class="empty-state">You don't have any pending requests.</h4>
</sm-panel> </sm-panel>
<sm-panel> <sm-panel>
<div id="approved_payment_request_container" class="container"></div> <div id="paid_payment_request_container" class="container"></div>
<h4 class="empty-state">You don't have any requests.</h4> <h4 class="empty-state">No paid requests.</h4>
</sm-panel> </sm-panel>
<sm-panel> <sm-panel>
<div id="declined_payment_request_container" class="container"></div> <div id="declined_payment_request_container" class="container"></div>
<h4 class="empty-state">You don't have any requests.</h4> <h4 class="empty-state">No declined requests.</h4>
</sm-panel> </sm-panel>
</sm-tab-panels> </sm-tab-panels>
</section> </section>
@ -793,16 +801,16 @@
</section> </section>
<section id="settings_page" class="page hide-completely"> <section id="settings_page" class="page hide-completely">
<h3 class="bottom-margin">Settings<h3> <h3 class="bottom-margin">Settings<h3>
<section> <section>
<h4>My FLO ID</h4> <h4>My FLO ID</h4>
<div class="copy-row"> <div class="copy-row">
<h4 class="user-flo-id copy"></h4> <h4 class="user-flo-id copy"></h4>
<svg class="icon" onclick="copyToClipboard(this.parentNode)" viewBox="0 0 64 64"> <svg class="icon" onclick="copyToClipboard(this.parentNode)" viewBox="0 0 64 64">
<title>Copy</title> <title>Copy</title>
<rect x="16" y="16" width="48" height="48" rx="6" /> <rect x="16" y="16" width="48" height="48" rx="6" />
<path d="M.5,47.52V6.5a6,6,0,0,1,6-6h41" /> <path d="M.5,47.52V6.5a6,6,0,0,1,6-6h41" />
</svg> </svg>
</div> </div>
</section> </section>
<h4>My UPIs</h4> <h4>My UPIs</h4>
<div class="upi-container"></div> <div class="upi-container"></div>
@ -813,6 +821,7 @@
<sm-button variant="primary" onclick="signOut()">Sign out</sm-button> <sm-button variant="primary" onclick="signOut()">Sign out</sm-button>
</section> </section>
<section id="transaction_page" class="page"> <section id="transaction_page" class="page">
<h3 class="bottom-margin">Transaction</h3>
</section> </section>
</main> </main>
@ -1342,7 +1351,8 @@
document.addEventListener('popupopened', e => { document.addEventListener('popupopened', e => {
let thisPopup = e.detail.popup, let thisPopup = e.detail.popup,
firstInput = thisPopup.querySelector('sm-input') firstInput = thisPopup.querySelector('sm-input')
firstInput.focusIn() if(firstInput)
firstInput.focusIn()
switch(e.detail.popup.id){ switch(e.detail.popup.id){
case 'deposit_rupee' : case 'deposit_rupee' :
request_rupee_token() request_rupee_token()
@ -1582,10 +1592,6 @@
if (e.target.closest('sm-input')) { if (e.target.closest('sm-input')) {
let input = e.target.closest('sm-input') let input = e.target.closest('sm-input')
formValidation(input) formValidation(input)
if(input.id === 'token_amount_to_buy'){
let amount = input.value < 1 ? 0 : input.value
document.getElementById('send_amount_to_deposit').innerHTML = `Pay <b>₹${amount}</b> to UPI Id below.`;
}
} }
}) })
document.addEventListener('keyup', (e) => { document.addEventListener('keyup', (e) => {
@ -1769,8 +1775,6 @@
} }
const addUpiInput = document.getElementById('add_upi_input') const addUpiInput = document.getElementById('add_upi_input')
async function addUserUPI() { async function addUserUPI() {
userUPI = addUpiInput.value userUPI = addUpiInput.value
compactIDB.addData('userUPIs', userUPI, userUPI) compactIDB.addData('userUPIs', userUPI, userUPI)
@ -1795,6 +1799,8 @@
function removeUPI(upi){ function removeUPI(upi){
compactIDB.removeData('userUPIs', upi) compactIDB.removeData('userUPIs', upi)
if(upi === defaultUPI)
localStorage.removeItem(`defaultUPI${myFloID}`)
renderUserUPI() renderUserUPI()
} }
@ -1820,13 +1826,15 @@
if(upi === defaultUPI) if(upi === defaultUPI)
radios += ` radios += `
<h5 class="tag">Primary</h5>` <h5 class="tag">Primary</h5>`
radios += ` if(container.closest('#settings_page'))
<svg class="icon remove" viewBox="0 0 64 64"> radios += `
<title>Remove this UPI</title> <svg class="icon remove" viewBox="0 0 64 64">
<line x1="64" y1="0" x2="0" y2="64"/> <title>Remove this UPI</title>
<line x1="64" y1="64" x2="0" y2="0"/> <line x1="64" y1="0" x2="0" y2="64"/>
</svg> <line x1="64" y1="64" x2="0" y2="0"/>
</div>` </svg>`
radios +=`
</div>`
} }
container.innerHTML = radios container.innerHTML = radios
}) })
@ -11491,7 +11499,7 @@
userType.forEach(user => user.textContent = 'User') userType.forEach(user => user.textContent = 'User')
show_all_user_activities() show_all_user_activities()
show_payment_requests() show_payment_requests()
showPage(document.getElementById('home_page_btn'), 'home_page') showPage(document.getElementById('home_page_btn'), 'transaction_page')
withdraw_token_to_get_cash(); withdraw_token_to_get_cash();
@ -11962,28 +11970,29 @@
refreshButton.textContent = 'Checking...' refreshButton.textContent = 'Checking...'
const current_token_balance = document.querySelector('.token-balance').textContent; const current_token_balance = document.querySelector('.token-balance').textContent;
if (typeof current_token_balance == "string") { if (typeof current_token_balance == "string") {
const get_user_rupee_balance = await ajaxGet( const [get_user_rupee_balance, get_user_flo_balance] = await Promise.all([ ajaxGet(
'https://ranchimallflo.duckdns.org/api/v1.0/getFloAddressBalance?token=rupee&floAddress=' + 'https://ranchimallflo.duckdns.org/api/v1.0/getFloAddressBalance?token=rupee&floAddress=' +
myFloID) myFloID),
floBlockchainAPI.getBalance(myFloID)
])
if (typeof get_user_rupee_balance === "object" && get_user_rupee_balance.balance >= 0) { if (typeof get_user_rupee_balance === "object" && get_user_rupee_balance.balance >= 0) {
if (get_user_rupee_balance.balance === null) if (get_user_rupee_balance.balance === null)
get_user_rupee_balance.balance = 0; get_user_rupee_balance.balance = 0;
document.querySelectorAll('.token-balance').forEach(bal => bal.textContent = get_user_rupee_balance.balance); document.querySelectorAll('.token-balance').forEach(bal => bal.textContent = get_user_rupee_balance.balance);
} }
const get_user_unconfirmed_rupee_balance = await get_unconfirmed_balance(myFloID, get_user_rupee_balance.balance);
if (typeof get_user_unconfirmed_rupee_balance == "number" && !isNaN(get_user_unconfirmed_rupee_balance)) {
document.querySelectorAll('.uncnf-token-balance').forEach(elem => elem.textContent = get_user_unconfirmed_rupee_balance);
}
const get_user_flo_balance = await floBlockchainAPI.getBalance(myFloID)
console.log(get_user_flo_balance) console.log(get_user_flo_balance)
if (typeof get_user_flo_balance !== "number" || isNaN(get_user_flo_balance)) { if (typeof get_user_flo_balance !== "number" || isNaN(get_user_flo_balance)) {
get_user_flo_balance = 0; get_user_flo_balance = 0;
} }
document.querySelectorAll('.flo-balance').forEach(elem => elem.textContent = get_user_flo_balance); document.querySelectorAll('.flo-balance').forEach(elem => elem.textContent = get_user_flo_balance);
const get_user_unconfirmed_rupee_balance = await get_unconfirmed_balance(myFloID, get_user_rupee_balance.balance);
if (typeof get_user_unconfirmed_rupee_balance == "number" && !isNaN(get_user_unconfirmed_rupee_balance)) {
document.querySelectorAll('.uncnf-token-balance').forEach(elem => elem.textContent = get_user_unconfirmed_rupee_balance);
}
} }
if (refreshButton) { if (refreshButton) {
notify('Balance Updated') notify('Balance Updated')
@ -12334,10 +12343,7 @@
const cashier = randomNoRepeats(Object.keys(token_app.master_configurations.cashiers))(); const cashier = randomNoRepeats(Object.keys(token_app.master_configurations.cashiers))();
const cashier_upi = token_app.master_configurations.cashiers[cashier].upi_id; const cashier_upi = token_app.master_configurations.cashiers[cashier].upi_id;
const txt = `Please send cash to UPI address <strong>${cashier_upi}</strong>. document.getElementById('pay_cashier_info').textContent = cashier_upi;
Then specify the <strong>amount sent</strong> and <strong>UPI address you used to send money</strong> below.`;
document.getElementById('pay_cashier_info').innerHTML = txt;
const cnf_cash_payment_btn = document.getElementById('cnf_cash_payment') const cnf_cash_payment_btn = document.getElementById('cnf_cash_payment')
cnf_cash_payment_btn.onclick = function () { cnf_cash_payment_btn.onclick = function () {
@ -12628,7 +12634,7 @@
.map(m => m.message.pay_req_id)); .map(m => m.message.pay_req_id));
let pendingPaymentRequestContainer = document.getElementById("pending_payment_request_container"), let pendingPaymentRequestContainer = document.getElementById("pending_payment_request_container"),
approvedPaymentRequestContainer = document.getElementById("approved_payment_request_container"), approvedPaymentRequestContainer = document.getElementById("paid_payment_request_container"),
declinedPaymentRequestContainer = document.getElementById("declined_payment_request_container"); declinedPaymentRequestContainer = document.getElementById("declined_payment_request_container");
pendingPaymentRequestContainer.innerHTML = ``; pendingPaymentRequestContainer.innerHTML = ``;