0.0.47
This commit is contained in:
sairaj mote
parent
70676538af
commit
ae0ae51989
147
css/main.css
147
css/main.css
@ -5,10 +5,6 @@
|
||||
font-family: "Roboto", sans-serif;
|
||||
}
|
||||
|
||||
:root {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
--accent-color: #4527A0;
|
||||
--text-color: 17, 17, 17;
|
||||
@ -36,12 +32,9 @@ body[data-theme=dark] {
|
||||
--lightness: 70%;
|
||||
background-color: var(--background-color);
|
||||
}
|
||||
body[data-theme=dark] .balance:nth-of-type(3) {
|
||||
body[data-theme=dark] .flo-balance-card {
|
||||
color: rgba(var(--text-color), 1);
|
||||
}
|
||||
body[data-theme=dark] .person .person-initials {
|
||||
color: rgba(var(--text-color), 0.9) !important;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 600;
|
||||
@ -198,6 +191,10 @@ button:disabled ~ .loader {
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
.capitalize {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
sm-button[variant=outlined] {
|
||||
--accent-color: rgba(var(--text-color), 1);
|
||||
}
|
||||
@ -228,6 +225,14 @@ sm-button[variant=outlined] {
|
||||
stroke-dashoffset: -210;
|
||||
}
|
||||
}
|
||||
@keyframes load-btn-loader {
|
||||
50% {
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
100% {
|
||||
stroke-dashoffset: -220;
|
||||
}
|
||||
}
|
||||
.action {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
@ -253,6 +258,14 @@ sm-button[variant=outlined] {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
padding: 0.4em;
|
||||
stroke-dashoffset: 220;
|
||||
stroke-dasharray: 220;
|
||||
}
|
||||
.action .loader:not(.animate-loader) {
|
||||
opacity: 0;
|
||||
}
|
||||
.action .animate-loader {
|
||||
animation: load-btn-loader 2.6s infinite, rotate 1s infinite linear;
|
||||
}
|
||||
|
||||
.clip {
|
||||
@ -578,13 +591,33 @@ details p {
|
||||
.user-panel .icon {
|
||||
stroke: rgba(var(--foreground-color), 1);
|
||||
}
|
||||
.user-panel sm-button {
|
||||
.user-panel .action {
|
||||
width: auto;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.user-panel .action h4 {
|
||||
border-radius: 2rem;
|
||||
background-color: rgba(var(--text-color), 0.1);
|
||||
color: rgba(var(--text-color), 1);
|
||||
width: auto;
|
||||
}
|
||||
.user-panel .action .loader {
|
||||
align-self: flex-end;
|
||||
}
|
||||
.user-panel .action .clip {
|
||||
clip-path: circle(0 at 100% 0) !important;
|
||||
}
|
||||
|
||||
#deposit .user-panel {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
#deposit .display-balance {
|
||||
grid-template-areas: "rupee rupee" "flo flo";
|
||||
}
|
||||
|
||||
.display-balance {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-areas: ". ." "flo flo";
|
||||
grid-template-areas: "rupee ." "flo flo";
|
||||
gap: 0.8rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
@ -620,33 +653,35 @@ details p {
|
||||
.balance .tooltip {
|
||||
border-radius: 1rem;
|
||||
color: rgba(var(--text-color), 1);
|
||||
margin-left: auto;
|
||||
}
|
||||
.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-size: cover;
|
||||
|
||||
.rupee-balance-card {
|
||||
grid-area: rupee;
|
||||
background: url("data:image/svg+xml,%3Csvg width='512' height='512' viewBox='0 0 512 512' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)'%3E%3Cg filter='url(%23filter0_d)'%3E%3Crect x='312' y='323' width='240' height='140' rx='18' transform='rotate(30 312 323)' fill='%231C783B'/%3E%3C/g%3E%3Cg filter='url(%23filter1_d)'%3E%3Crect x='431.283' y='302' width='240' height='140' rx='18' transform='rotate(50.0235 431.283 302)' fill='%232DBD5E'/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d' x='225' y='320' width='301.846' height='265.244' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix 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'/%3E%3CfeOffset dx='-5' dy='9'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3Cfilter id='filter1_d' x='307' y='299' width='285.477' height='297.86' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix 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'/%3E%3CfeOffset dx='-5' dy='9'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3CclipPath id='clip0'%3E%3Crect width='512' height='512' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A") bottom right no-repeat, linear-gradient(200deg, rgba(var(--text-color), 0.1), rgba(var(--text-color), 0.2));
|
||||
background-size: 9rem, cover;
|
||||
}
|
||||
.balance:nth-of-type(1) .tooltip {
|
||||
.rupee-balance-card .tooltip {
|
||||
box-shadow: 0 0 0 0.4rem rgba(var(--text-color), 0.1) inset;
|
||||
}
|
||||
.balance:nth-of-type(2) {
|
||||
background: url(bg-art1.svg) left bottom, linear-gradient(135deg, #fd946a, #ff4857);
|
||||
|
||||
.in-process-balance {
|
||||
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920' height='1080' viewBox='0 0 1920 1080'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:%231b1464;%7D.b%7Bfill:%2309083f;%7D.c%7Bfill:%2329abe2;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3Ebg-art1%3C/title%3E%3Cpolygon class='a' points='0 957.24 232 957.24 357 828 434 899 485 867 594 959 843 957 889 925 938 953 1301 953 1447 807 1555 915 1590 880 1623 913 1673 856 1744 957 1920 957.24 1920 1080 0 1080 0 957.24'/%3E%3Cpolygon class='b' points='495 959 594 959 485 867 434 899 495 959'/%3E%3Cpolygon class='c' points='232 957 357 828 247 957 232 957'/%3E%3Cpolygon class='c' points='1301 953 1447 807 1318.32 953 1301 953'/%3E%3C/svg%3E") left bottom, linear-gradient(135deg, #fd946a, #ff4857);
|
||||
background-size: cover;
|
||||
}
|
||||
.balance:nth-of-type(2) .tooltip {
|
||||
.in-process-balance .tooltip {
|
||||
box-shadow: 0 0 0 0.4rem #ff4857 inset;
|
||||
}
|
||||
.balance:nth-of-type(3) {
|
||||
|
||||
.flo-balance-card {
|
||||
grid-area: flo;
|
||||
color: rgba(var(--foreground-color), 1);
|
||||
background: url(bg-art3.svg) center no-repeat, linear-gradient(270deg, #2f69e6, #1b0980);
|
||||
background: url("data:image/svg+xml,%3Csvg width='1920' height='1080' viewBox='0 0 1920 1080' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)'%3E%3Cg filter='url(%23filter0_d)'%3E%3Ccircle cx='1814.5' cy='977.5' r='437.5' fill='white'/%3E%3C/g%3E%3Cg filter='url(%23filter1_d)'%3E%3Ccircle cx='1814.5' cy='977.5' r='243.5' fill='%231B0980'/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d' x='1344' y='515' width='913' height='913' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix 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'/%3E%3CfeOffset dx='-14' dy='-6'/%3E%3CfeGaussianBlur stdDeviation='9.5'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3Cfilter id='filter1_d' x='1538' y='709' width='525' height='525' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix 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'/%3E%3CfeOffset dx='-14' dy='-6'/%3E%3CfeGaussianBlur stdDeviation='9.5'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3CclipPath id='clip0'%3E%3Crect width='1920' height='1080' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A") center no-repeat, linear-gradient(270deg, #2f69e6, #1b0980);
|
||||
background-size: cover;
|
||||
}
|
||||
.balance:nth-of-type(3) .tooltip {
|
||||
.flo-balance-card .tooltip {
|
||||
box-shadow: 0 0 0 0.4rem #1b0980 inset;
|
||||
}
|
||||
.balance .tooltip {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
position: absolute;
|
||||
@ -782,13 +817,18 @@ sm-panel {
|
||||
border-radius: 0.4em;
|
||||
border: solid 1px rgba(var(--text-color), 0.2);
|
||||
}
|
||||
.request h4 {
|
||||
font-weight: 500;
|
||||
}
|
||||
.request h5 {
|
||||
margin-bottom: 0.2rem;
|
||||
text-transform: capitalize;
|
||||
font-weight: 500;
|
||||
opacity: 0.8;
|
||||
}
|
||||
.request h3,
|
||||
.request h4 {
|
||||
margin-bottom: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.request h4:last-of-type {
|
||||
margin-bottom: 0;
|
||||
@ -797,7 +837,7 @@ sm-panel {
|
||||
align-self: flex-end;
|
||||
}
|
||||
.request .amount {
|
||||
font-size: 1.4em;
|
||||
font-family: "Roboto", sans-serif;
|
||||
}
|
||||
.request button {
|
||||
width: auto;
|
||||
@ -1031,14 +1071,8 @@ sm-panel {
|
||||
#transaction_result {
|
||||
z-index: 12;
|
||||
}
|
||||
#transaction_result::part(popup) {
|
||||
background-image: url(card-back.svg);
|
||||
background-size: cover;
|
||||
background-position-y: -3rem;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
#transaction_result #transaction_heading {
|
||||
margin-bottom: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
#transaction_result .copy-row {
|
||||
grid-template-areas: "label label" ". .";
|
||||
@ -1057,7 +1091,7 @@ sm-panel {
|
||||
}
|
||||
#transaction_result > h4 {
|
||||
font-size: 1.2rem;
|
||||
margin-top: 6rem;
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
#transaction_result sm-button {
|
||||
@ -1072,7 +1106,7 @@ sm-panel {
|
||||
align-self: center;
|
||||
stroke: none;
|
||||
stroke-dasharray: 50;
|
||||
fill: rgba(var(--foreground-color), 1);
|
||||
fill: rgba(var(--text-color), 0.1);
|
||||
animation: popup 2s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
}
|
||||
|
||||
@ -1245,9 +1279,14 @@ sm-panel {
|
||||
font-weight: 400;
|
||||
font-family: "Roboto", sans-serif;
|
||||
opacity: 0.8;
|
||||
margin-bottom: 0.2rem;
|
||||
margin-bottom: 0.4rem;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
#transaction_page p:last-of-type {
|
||||
margin: 2rem 0 1rem 0;
|
||||
font-size: 0.9rem;
|
||||
opacity: 0.8;
|
||||
}
|
||||
#transaction_page #transaction_details {
|
||||
position: relative;
|
||||
margin: 1.5rem 0;
|
||||
@ -1265,7 +1304,7 @@ sm-panel {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
#transaction_page #transaction_details .flex {
|
||||
margin-bottom: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
align-items: baseline;
|
||||
}
|
||||
#transaction_page #transaction_details strong {
|
||||
@ -1295,6 +1334,7 @@ sm-panel {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 5rem;
|
||||
text-align: center;
|
||||
transition: transform 0.3s;
|
||||
font-size: 0.85rem;
|
||||
@ -1308,10 +1348,12 @@ sm-panel {
|
||||
height: 3rem;
|
||||
width: 3rem;
|
||||
border-radius: 2rem;
|
||||
stroke-width: 10;
|
||||
padding: 1rem;
|
||||
background: rgba(var(--text-color), 0.06);
|
||||
align-self: center;
|
||||
margin-bottom: 0.4rem;
|
||||
box-shadow: 0 0.1rem 0.1rem #00000016, 0 0.1rem 0.3rem #00000040;
|
||||
}
|
||||
|
||||
.person {
|
||||
@ -1321,11 +1363,13 @@ sm-panel {
|
||||
cursor: pointer;
|
||||
transition: transform 0.3s;
|
||||
width: 5rem;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.person:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
.person .person-initials {
|
||||
|
||||
.person-initials, #person_initials {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
height: 3rem;
|
||||
@ -1336,8 +1380,10 @@ sm-panel {
|
||||
border-radius: 2rem;
|
||||
margin-bottom: 0.4rem !important;
|
||||
text-transform: uppercase;
|
||||
box-shadow: 0 0.1rem 0.1rem #00000016, 0 0.1rem 0.3rem #00000040;
|
||||
}
|
||||
.person .person-name {
|
||||
|
||||
.person-name {
|
||||
font-size: 0.85rem;
|
||||
opacity: 0.8;
|
||||
font-weight: 500;
|
||||
@ -1345,12 +1391,33 @@ sm-panel {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#person_popup > .flex:first-of-type {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
#person_popup > .flex:first-of-type .flex {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
#person_popup > .flex:first-of-type .flex .icon {
|
||||
height: 2.6rem;
|
||||
width: 2.6rem;
|
||||
padding: 0.8rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
#person_popup h3 {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
#person_popup .copy-row {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
#person_popup #show_person_name {
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 0.4rem;
|
||||
max-width: 30ch;
|
||||
}
|
||||
#person_popup #show_person_name:focus {
|
||||
outline: none;
|
||||
background: rgba(var(--text-color), 0.1);
|
||||
}
|
||||
|
||||
#activity_page .empty-state,
|
||||
#request_page .empty-state,
|
||||
@ -1397,6 +1464,10 @@ sm-panel {
|
||||
#transaction_page header {
|
||||
padding: 1.5rem 0;
|
||||
}
|
||||
|
||||
#deposit .user-panel {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 640px) {
|
||||
.hide-on-desktop {
|
||||
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
209
css/main.scss
209
css/main.scss
@ -4,11 +4,6 @@
|
||||
margin: 0;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
}
|
||||
|
||||
:root {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
--accent-color: #4527A0;
|
||||
--text-color: 17, 17, 17;
|
||||
@ -34,14 +29,9 @@ body[data-theme="dark"]{
|
||||
--saturation: 39%;
|
||||
--lightness: 70%;
|
||||
background-color: var(--background-color);
|
||||
.balance:nth-of-type(3){
|
||||
.flo-balance-card{
|
||||
color: rgba(var(--text-color), 1);
|
||||
}
|
||||
.person{
|
||||
.person-initials{
|
||||
color: rgba(var(--text-color), 0.9) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
@ -198,6 +188,9 @@ button {
|
||||
.no-transformations {
|
||||
transform: none !important;
|
||||
}
|
||||
.capitalize{
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
sm-button[variant="outlined"]{
|
||||
--accent-color: rgba(var(--text-color), 1);
|
||||
@ -231,6 +224,15 @@ sm-button[variant="outlined"]{
|
||||
stroke-dashoffset: -210;
|
||||
}
|
||||
}
|
||||
@keyframes load-btn-loader {
|
||||
50% {
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
stroke-dashoffset: -220;
|
||||
}
|
||||
}
|
||||
|
||||
.action {
|
||||
position: relative;
|
||||
@ -261,7 +263,16 @@ sm-button[variant="outlined"]{
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
padding: 0.4em;
|
||||
stroke-dashoffset: 220;
|
||||
stroke-dasharray: 220;
|
||||
}
|
||||
.loader:not(.animate-loader){
|
||||
opacity: 0;
|
||||
}
|
||||
.animate-loader {
|
||||
animation: load-btn-loader 2.6s infinite, rotate 1s infinite linear;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.clip {
|
||||
@ -602,14 +613,34 @@ details{
|
||||
.icon{
|
||||
stroke: rgba(var(--foreground-color), 1);
|
||||
}
|
||||
sm-button{
|
||||
border-radius: 2rem;
|
||||
.action{
|
||||
width: auto;
|
||||
justify-content: flex-end;
|
||||
h4{
|
||||
border-radius: 2rem;
|
||||
background-color: rgba(var(--text-color), 0.1);
|
||||
color: rgba(var(--text-color), 1);
|
||||
width: auto ;
|
||||
}
|
||||
.loader{
|
||||
align-self: flex-end;
|
||||
}
|
||||
.clip{
|
||||
clip-path: circle(0 at 100% 0) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
#deposit{
|
||||
.user-panel{
|
||||
padding: 0 1rem;
|
||||
}
|
||||
.display-balance {
|
||||
grid-template-areas: 'rupee rupee' 'flo flo';
|
||||
}
|
||||
}
|
||||
|
||||
.display-balance {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-areas: '. .' 'flo flo';
|
||||
grid-template-areas: 'rupee .' 'flo flo';
|
||||
gap: 0.8rem;
|
||||
margin-top: 1rem;
|
||||
.icon {
|
||||
@ -643,34 +674,33 @@ details{
|
||||
.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) left bottom, 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) center no-repeat, linear-gradient(270deg, #2f69e6, #1b0980);
|
||||
background-size: cover;
|
||||
.tooltip{
|
||||
box-shadow: 0 0 0 0.4rem#1b0980 inset;
|
||||
}
|
||||
}
|
||||
.tooltip{
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
.rupee-balance-card{
|
||||
grid-area: rupee;
|
||||
background: url("data:image/svg+xml,%3Csvg width='512' height='512' viewBox='0 0 512 512' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)'%3E%3Cg filter='url(%23filter0_d)'%3E%3Crect x='312' y='323' width='240' height='140' rx='18' transform='rotate(30 312 323)' fill='%231C783B'/%3E%3C/g%3E%3Cg filter='url(%23filter1_d)'%3E%3Crect x='431.283' y='302' width='240' height='140' rx='18' transform='rotate(50.0235 431.283 302)' fill='%232DBD5E'/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d' x='225' y='320' width='301.846' height='265.244' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix 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'/%3E%3CfeOffset dx='-5' dy='9'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3Cfilter id='filter1_d' x='307' y='299' width='285.477' height='297.86' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix 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'/%3E%3CfeOffset dx='-5' dy='9'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3CclipPath id='clip0'%3E%3Crect width='512' height='512' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A") bottom right no-repeat, linear-gradient(200deg, rgba(var(--text-color), 0.1), rgba(var(--text-color), 0.2));
|
||||
background-size: 9rem, cover;
|
||||
.tooltip{
|
||||
box-shadow: 0 0 0 0.4rem rgba(var(--text-color), 0.1) inset;
|
||||
}
|
||||
}
|
||||
.in-process-balance{
|
||||
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920' height='1080' viewBox='0 0 1920 1080'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:%231b1464;%7D.b%7Bfill:%2309083f;%7D.c%7Bfill:%2329abe2;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3Ebg-art1%3C/title%3E%3Cpolygon class='a' points='0 957.24 232 957.24 357 828 434 899 485 867 594 959 843 957 889 925 938 953 1301 953 1447 807 1555 915 1590 880 1623 913 1673 856 1744 957 1920 957.24 1920 1080 0 1080 0 957.24'/%3E%3Cpolygon class='b' points='495 959 594 959 485 867 434 899 495 959'/%3E%3Cpolygon class='c' points='232 957 357 828 247 957 232 957'/%3E%3Cpolygon class='c' points='1301 953 1447 807 1318.32 953 1301 953'/%3E%3C/svg%3E") left bottom, linear-gradient(135deg, #fd946a, #ff4857);
|
||||
background-size: cover;
|
||||
.tooltip{
|
||||
box-shadow: 0 0 0 0.4rem #ff4857 inset;
|
||||
}
|
||||
}
|
||||
.flo-balance-card{
|
||||
grid-area: flo;
|
||||
color: rgba(var(--foreground-color), 1);
|
||||
background: url("data:image/svg+xml,%3Csvg width='1920' height='1080' viewBox='0 0 1920 1080' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)'%3E%3Cg filter='url(%23filter0_d)'%3E%3Ccircle cx='1814.5' cy='977.5' r='437.5' fill='white'/%3E%3C/g%3E%3Cg filter='url(%23filter1_d)'%3E%3Ccircle cx='1814.5' cy='977.5' r='243.5' fill='%231B0980'/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d' x='1344' y='515' width='913' height='913' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix 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'/%3E%3CfeOffset dx='-14' dy='-6'/%3E%3CfeGaussianBlur stdDeviation='9.5'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3Cfilter id='filter1_d' x='1538' y='709' width='525' height='525' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix 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'/%3E%3CfeOffset dx='-14' dy='-6'/%3E%3CfeGaussianBlur stdDeviation='9.5'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3CclipPath id='clip0'%3E%3Crect width='1920' height='1080' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A") center no-repeat, linear-gradient(270deg, #2f69e6, #1b0980);
|
||||
background-size: cover;
|
||||
.tooltip{
|
||||
box-shadow: 0 0 0 0.4rem#1b0980 inset;
|
||||
}
|
||||
}
|
||||
|
||||
.tooltip{
|
||||
position: absolute;
|
||||
@ -807,14 +837,19 @@ sm-panel{
|
||||
border-radius: 0.4em;
|
||||
border: solid 1px rgba(var(--text-color), 0.2);
|
||||
|
||||
h4{
|
||||
font-weight: 500;
|
||||
}
|
||||
h5 {
|
||||
margin-bottom: 0.2rem;
|
||||
text-transform: capitalize;
|
||||
font-weight: 500;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
h3,
|
||||
h4 {
|
||||
margin-bottom: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
h4:last-of-type {
|
||||
@ -826,7 +861,7 @@ sm-panel{
|
||||
}
|
||||
|
||||
.amount {
|
||||
font-size: 1.4em;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
}
|
||||
|
||||
button {
|
||||
@ -1091,14 +1126,8 @@ sm-panel{
|
||||
}
|
||||
#transaction_result{
|
||||
z-index: 12;
|
||||
&::part(popup){
|
||||
background-image: url(card-back.svg);
|
||||
background-size: cover;
|
||||
background-position-y: -3rem;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
#transaction_heading{
|
||||
margin-bottom: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.copy-row{
|
||||
grid-template-areas: 'label label' '. .';
|
||||
@ -1117,7 +1146,7 @@ sm-panel{
|
||||
}
|
||||
& > h4{
|
||||
font-size: 1.2rem;
|
||||
margin-top: 6rem;
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
sm-button{
|
||||
@ -1132,7 +1161,7 @@ sm-panel{
|
||||
align-self: center;
|
||||
stroke: none;
|
||||
stroke-dasharray: 50;
|
||||
fill: rgba(var(--foreground-color), 1);
|
||||
fill: rgba(var(--text-color), 0.1);
|
||||
animation: popup 2s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
}
|
||||
|
||||
@ -1306,9 +1335,14 @@ sm-panel{
|
||||
font-weight: 400;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
opacity: 0.8;
|
||||
margin-bottom: 0.2rem;
|
||||
margin-bottom: 0.4rem;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
p:last-of-type{
|
||||
margin: 2rem 0 1rem 0;
|
||||
font-size: 0.9rem;
|
||||
opacity: 0.8;
|
||||
}
|
||||
#transaction_details{
|
||||
position: relative;
|
||||
margin: 1.5rem 0;
|
||||
@ -1325,7 +1359,7 @@ sm-panel{
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.flex{
|
||||
margin-bottom: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
align-items: baseline;
|
||||
}
|
||||
strong{
|
||||
@ -1355,6 +1389,7 @@ sm-panel{
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 5rem;
|
||||
text-align: center;
|
||||
transition: transform 0.3s;
|
||||
font-size: 0.85rem;
|
||||
@ -1367,10 +1402,12 @@ sm-panel{
|
||||
height: 3rem;
|
||||
width: 3rem;
|
||||
border-radius: 2rem;
|
||||
stroke-width: 10;
|
||||
padding: 1rem;
|
||||
background: rgba(var(--text-color), 0.06);
|
||||
align-self: center;
|
||||
margin-bottom: 0.4rem;
|
||||
box-shadow: 0 0.1rem 0.1rem #00000016, 0 0.1rem 0.3rem #00000040;
|
||||
}
|
||||
}
|
||||
.person{
|
||||
@ -1380,37 +1417,60 @@ sm-panel{
|
||||
cursor: pointer;
|
||||
transition: transform 0.3s;
|
||||
width: 5rem;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
&:active{
|
||||
transform: scale(0.95);
|
||||
}
|
||||
.person-initials{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
height: 3rem;
|
||||
width: 3rem;
|
||||
font-size: 1.2rem !important;
|
||||
font-weight: 500;
|
||||
align-items: center;
|
||||
border-radius: 2rem;
|
||||
margin-bottom: 0.4rem !important;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.person-name{
|
||||
font-size: 0.85rem;
|
||||
opacity: 0.8;
|
||||
font-weight: 500;
|
||||
text-transform: capitalize;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.person-initials, #person_initials{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
height: 3rem;
|
||||
width: 3rem;
|
||||
font-size: 1.2rem !important;
|
||||
font-weight: 500;
|
||||
align-items: center;
|
||||
border-radius: 2rem;
|
||||
margin-bottom: 0.4rem !important;
|
||||
text-transform: uppercase;
|
||||
box-shadow: 0 0.1rem 0.1rem #00000016, 0 0.1rem 0.3rem #00000040;
|
||||
}
|
||||
.person-name{
|
||||
font-size: 0.85rem;
|
||||
opacity: 0.8;
|
||||
font-weight: 500;
|
||||
text-transform: capitalize;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#person_popup{
|
||||
& > .flex:first-of-type{
|
||||
margin: 1rem 0;
|
||||
.flex{
|
||||
margin-top: 0.5rem;
|
||||
.icon{
|
||||
height: 2.6rem;
|
||||
width: 2.6rem;
|
||||
padding: 0.8rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
h3{
|
||||
text-transform: capitalize;
|
||||
}
|
||||
.copy-row{
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
#show_person_name{
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 0.4rem;
|
||||
max-width: 30ch;
|
||||
&:focus{
|
||||
outline: none;
|
||||
background: rgba(var(--text-color), 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#activity_page,
|
||||
@ -1457,6 +1517,11 @@ sm-panel{
|
||||
padding: 1.5rem 0;
|
||||
}
|
||||
}
|
||||
#deposit{
|
||||
.user-panel{
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 640px) {
|
||||
|
||||
240
index.html
240
index.html
@ -53,7 +53,7 @@
|
||||
Sign In
|
||||
</button>
|
||||
</sm-popup>
|
||||
<sm-popup id="cash_transfer">
|
||||
<sm-popup id="send_rupee_popup">
|
||||
<header class="popup-header" slot="header">
|
||||
<svg class="icon" onclick="this.closest('sm-popup').hide()" viewBox="0 0 64 64">
|
||||
<title>close</title>
|
||||
@ -381,7 +381,16 @@
|
||||
<line x1="64" y1="64" x2="0" y2="0" />
|
||||
</svg>
|
||||
</header>
|
||||
<h3 id="show_person_name"></h3>
|
||||
<div class="flex direction-column align-center">
|
||||
<h3 id="person_initials"></h3>
|
||||
<div class="flex space-between align-center">
|
||||
<h4 class="capitalize" id="show_person_name"></h4>
|
||||
<svg id="edit_person_name" class="icon" onclick="setNameEditable()" viewBox="0 0 64 64">
|
||||
<title>edit</title>
|
||||
<path d="M46.73,14.81l7,7,7.65-7.6A7.15,7.15,0,0,0,61.39,4L60.11,2.77a7.23,7.23,0,0,0-10.19,0L3.87,48.57a5,5,0,0,0-1.39,2.6L.53,61.27a1.74,1.74,0,0,0,2,2l10.15-1.94A5.06,5.06,0,0,0,15.34,60L49.6,25.9"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<h5>FLO ID</h5>
|
||||
<div class="copy-row grid">
|
||||
<h4 id="show_person_flo_id" class="copy"></h4>
|
||||
@ -391,21 +400,20 @@
|
||||
<path d="M.5,47.52V6.5a6,6,0,0,1,6-6h41" />
|
||||
</svg>
|
||||
</div>
|
||||
<h5>Rupee actions</h5>
|
||||
<div class="flex">
|
||||
<div class="option" onclick="showPopup('cash_transfer')">
|
||||
<div class="option" onclick="showPopup('send_rupee_popup')">
|
||||
<svg class="icon" viewBox="0 0 64 64">
|
||||
<path
|
||||
d="M47.28,16.8,29.6,34.64a3.3,3.3,0,0,1-3.59.71L2.5,25.42a3.28,3.28,0,0,1,.26-6.13L59.21.87A3.28,3.28,0,0,1,63.32,5l-18.93,56a3.26,3.26,0,0,1-6.12.18l-6.4-15.68" />
|
||||
</svg>
|
||||
<h4>Send</h4>
|
||||
<h4>Send rupee</h4>
|
||||
</div>
|
||||
<div class="option" onclick="showPopup('request_rupee')">
|
||||
<svg class="icon request-icon" viewBox="0 0 64 64">
|
||||
<path
|
||||
d="M47.28,16.8,29.6,34.64a3.3,3.3,0,0,1-3.59.71L2.5,25.42a3.28,3.28,0,0,1,.26-6.13L59.21.87A3.28,3.28,0,0,1,63.32,5l-18.93,56a3.26,3.26,0,0,1-6.12.18l-6.4-15.68" />
|
||||
</svg>
|
||||
<h4>Request</h4>
|
||||
<h4>Request rupee</h4>
|
||||
</div>
|
||||
</div>
|
||||
</sm-popup>
|
||||
@ -504,7 +512,7 @@
|
||||
<div class="left">
|
||||
<h4>Rupee actions</h4>
|
||||
<section class="options-tab">
|
||||
<div class="option" onclick="showPopup('cash_transfer')">
|
||||
<div class="option" onclick="showPopup('send_rupee_popup')">
|
||||
<svg class="icon" viewBox="0 0 64 64">
|
||||
<path
|
||||
d="M47.28,16.8,29.6,34.64a3.3,3.3,0,0,1-3.59.71L2.5,25.42a3.28,3.28,0,0,1,.26-6.13L59.21.87A3.28,3.28,0,0,1,63.32,5l-18.93,56a3.26,3.26,0,0,1-6.12.18l-6.4-15.68" />
|
||||
@ -565,12 +573,19 @@
|
||||
</section>
|
||||
</div>
|
||||
<div class="user-panel">
|
||||
<div class="flex align-items space-between">
|
||||
<div class="flex align-center space-between">
|
||||
<h4>My Balances</h4>
|
||||
<sm-button class="small round" onclick="refresh_balance(this)">Check Balance</sm-button>
|
||||
<button id="refresh_balance_btn" onclick="refresh_balance(this)" class="action expand" type="submit">
|
||||
<h4 class="primary-btn expand">
|
||||
Refresh Balance
|
||||
</h4>
|
||||
<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>
|
||||
</button>
|
||||
</div>
|
||||
<div class="display-balance grid">
|
||||
<div class="balance">
|
||||
<div class="balance rupee-balance-card">
|
||||
<div class="tooltip help">
|
||||
<div class="tt-icon">?</div>
|
||||
<p class="tooltip-text">Your wallet balance</p>
|
||||
@ -578,7 +593,7 @@
|
||||
<h5>Rupee</h5>
|
||||
<h4 class="token-balance">0</h4>
|
||||
</div>
|
||||
<div class="balance">
|
||||
<div class="balance in-process-balance">
|
||||
<div class="tooltip help">
|
||||
<div class="tt-icon">?</div>
|
||||
<p class="tooltip-text">Money that is in-process after deposit.</p>
|
||||
@ -586,7 +601,7 @@
|
||||
<h5>In-process</h5>
|
||||
<h4 class="uncnf-token-balance">0</h4>
|
||||
</div>
|
||||
<div class="balance">
|
||||
<div class="balance flo-balance-card">
|
||||
<div class="tooltip help">
|
||||
<div class="tt-icon">?</div>
|
||||
<p class="tooltip-text">FLO balance required for each transaction.</p>
|
||||
@ -607,11 +622,9 @@
|
||||
</sm-tab-header>
|
||||
<sm-tab-panels id="requests_to_cashier">
|
||||
<sm-panel>
|
||||
<div class="container-header">
|
||||
<sm-button id="fetch_deposits" onclick="show_deposit_request()">
|
||||
Load pending
|
||||
</sm-button>
|
||||
</div>
|
||||
<sm-button id="fetch_deposits" onclick="show_deposit_request()" class="bottom-margin">
|
||||
Load pending
|
||||
</sm-button>
|
||||
<div id="pending_deposits_container" class="container"></div>
|
||||
<div id="deposit_illustration" class="empty-state">
|
||||
<svg viewBox="0 0 529.94 446.5">
|
||||
@ -668,9 +681,7 @@
|
||||
</div>
|
||||
</sm-panel>
|
||||
<sm-panel>
|
||||
<div class="container-header">
|
||||
<sm-button id="fetch_withdraws" onclick="show_withdraw_request()">Load pending</sm-button>
|
||||
</div>
|
||||
<sm-button id="fetch_withdraws" onclick="show_withdraw_request()" class="bottom-margin">Load pending</sm-button>
|
||||
<div id="pending_withdrawals_container" class="container"></div>
|
||||
<div id="withdraw_illustration" class="empty-state">
|
||||
<svg viewBox="0 0 529.94 446.5">
|
||||
@ -727,11 +738,9 @@
|
||||
</div>
|
||||
</sm-panel>
|
||||
<sm-panel>
|
||||
<div class="container-header">
|
||||
<sm-button id="fetch_pay_requests" onclick="showPayRequests()">
|
||||
Load pending
|
||||
</sm-button>
|
||||
</div>
|
||||
<sm-button id="fetch_pay_requests" onclick="showPayRequests()" class="bottom-margin">
|
||||
Load pending
|
||||
</sm-button>
|
||||
<div id="pay_requests_container" class="container"></div>
|
||||
<div id="pay_illustration" class="empty-state">
|
||||
<svg viewBox="0 0 529.94 446.5">
|
||||
@ -795,11 +804,11 @@
|
||||
<sm-button class="small round" onclick="refresh_balance(this)">Check Balance</sm-button>
|
||||
</div>
|
||||
<div class="display-balance grid">
|
||||
<div class="balance">
|
||||
<div class="balance rupee-balance-card">
|
||||
<h5>Rupee</h5>
|
||||
<h4 class="token-balance">0</h3>
|
||||
</div>
|
||||
<div class="balance">
|
||||
<div class="balance flo-balance-card">
|
||||
<h5>FLO</h5>
|
||||
<h4 class="flo-balance">0</h4>
|
||||
</div>
|
||||
@ -904,10 +913,12 @@
|
||||
<p>Toggle dark theme</p>
|
||||
<sm-switch id="theme_switcher" class="justify-right"></sm-switch>
|
||||
</div>
|
||||
<h4>My UPIs</h4>
|
||||
<div class="upi-container"></div>
|
||||
<p class="empty-state">Add UPI address for easier access during various transactions.</p>
|
||||
<sm-button variant="no-outline" onclick="showPopup('add_upi_popup')">+ Add UPI address</sm-button>
|
||||
<div class="user-option">
|
||||
<h4 class="top-margin">My UPIs</h4>
|
||||
<div class="upi-container"></div>
|
||||
<p class="empty-state">Add UPI address for easier access during various transactions.</p>
|
||||
<sm-button variant="no-outline" onclick="showPopup('add_upi_popup')">+ Add UPI address</sm-button>
|
||||
</div>
|
||||
<h4>Sign Out</h4>
|
||||
<p>Signing out will erase all the data stored in local storage and Indexed DB. This will remove saved private key, UPI addresses.</p>
|
||||
<sm-button variant="primary" onclick="signOut()">Sign out</sm-button>
|
||||
@ -921,6 +932,7 @@
|
||||
<h4 id="transaction_type"></h4>
|
||||
</header>
|
||||
<div id="transaction_details" class="grid direction-column"></div>
|
||||
<p>It may take upto 48 working hours for a transaction to complete. If even after 48 hours transction wasn't completed and your money was deducted, use <Strong>Report</Strong> button to report your issue.</p>
|
||||
<sm-button onclick="showPopup('report_popup')" variant="outlined">Report</div>
|
||||
</section>
|
||||
</main>
|
||||
@ -965,9 +977,6 @@
|
||||
console.log(`Welcome ${myFloID}`)
|
||||
refresh_balance()
|
||||
userFloIdContainers.forEach(container => container.textContent = myFloID)
|
||||
defaultUPI = localStorage.getItem(`defaultUPI${myFloID}`)
|
||||
renderUserUPI()
|
||||
renderAllContacts()
|
||||
hideLoader()
|
||||
await token_app.actions.doShreeGanesh();
|
||||
}).catch(error => console.error(error))
|
||||
@ -979,7 +988,7 @@
|
||||
notificationSound = document.getElementById('notification_sound');
|
||||
let defaultUPI
|
||||
const render = {
|
||||
depositRequest(txid, floId) {
|
||||
depositRequest(txid, floId, amount) {
|
||||
let card = document.createElement('div');
|
||||
card.classList.add('request')
|
||||
setAttributes(card, {
|
||||
@ -990,12 +999,14 @@
|
||||
<h4 class="breakable">${floId}</h4>
|
||||
<h5>UPI TXID</h5>
|
||||
<h4 class="breakable">${txid}</h4>
|
||||
<h5>Amount</h5>
|
||||
<h4 class="breakable">₹${amount}</h4>
|
||||
<button id="" class="confirm-deposit-btn">
|
||||
Confirm
|
||||
</button>`;
|
||||
return card;
|
||||
},
|
||||
withdrawRequest(txid, upiId, floId) {
|
||||
withdrawRequest(txid, upiId, floId, amount) {
|
||||
let card = document.createElement('div');
|
||||
card.classList.add('request')
|
||||
setAttributes(card, {
|
||||
@ -1006,9 +1017,9 @@
|
||||
card.innerHTML = ` <h5>FLO address</h5>
|
||||
<h4 class="breakable">${floId}</h4>
|
||||
<h5>UPI ID</h5>
|
||||
<h3 class="breakable">${upiId}</h3>
|
||||
<h5>Transaction ID</h5>
|
||||
<h4 class="breakable">${txid}</h4>
|
||||
<h4 class="breakable">${upiId}</h4>
|
||||
<h5>TAmount</h5>
|
||||
<h4 class="breakable">₹${amount}</h4>
|
||||
<button id="" class="confirm-withdraw-btn"">
|
||||
Confirm
|
||||
</button>`;
|
||||
@ -1115,7 +1126,7 @@
|
||||
<h4 class="activity-type">${transaction}</h4>`
|
||||
if(receiver)
|
||||
composition += `
|
||||
<h4 class="activity-receiver ">${receiver}</h4>
|
||||
<h4 class="activity-receiver breakable">${allContacts[receiver] ? allContacts[receiver].name : receiver}</h4>
|
||||
`
|
||||
composition += `
|
||||
<h4 class="activity-amount ${className}">${sign} ₹${amount}</h4>
|
||||
@ -1136,16 +1147,9 @@
|
||||
})
|
||||
markup = ` <h5 class="time">${formatedTime(time)}</h5>
|
||||
<h5>Request by</h5>
|
||||
<div class="copy-row">
|
||||
<h4 class="copy">${senderAddress}</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>
|
||||
<h4 class="breakable">${allContacts[senderAddress] ? allContacts[senderAddress].name : senderAddress}</h4>
|
||||
<h5 class="label">amount</h5>
|
||||
<h4>₹ ${amount}</h4>
|
||||
<h4 class="amount">₹ ${amount}</h4>
|
||||
`;
|
||||
if (enableActions)
|
||||
markup += `
|
||||
@ -1409,14 +1413,12 @@
|
||||
</div>`
|
||||
return card;
|
||||
},
|
||||
contact(floId, name){
|
||||
console.log(floId, name)
|
||||
contact(floId, name, color){
|
||||
let card = document.createElement('div')
|
||||
card.classList.add('person')
|
||||
setAttributes(card, {'data-flo-id': floId, 'data-name': name})
|
||||
let color = randomHsl()
|
||||
card.innerHTML = `
|
||||
<h3 class="person-initials" style="background-color: ${color.light}; color: ${color.primary}">${name.charAt(0)}</h3>
|
||||
<h3 class="person-initials" style="background-color: ${color.light};">${name.charAt(0)}</h3>
|
||||
<h4 class="person-name">${name}</h4>
|
||||
`
|
||||
return card
|
||||
@ -1505,9 +1507,22 @@
|
||||
switch(e.detail.popup.id){
|
||||
case 'deposit_rupee' :
|
||||
request_rupee_token()
|
||||
break;
|
||||
}
|
||||
})
|
||||
break;
|
||||
case 'person_popup':
|
||||
personPopupOpen = true
|
||||
break;
|
||||
case 'send_rupee_popup':
|
||||
if(personPopupOpen){
|
||||
tokenReceiver.value = person.dataset.floId
|
||||
}
|
||||
break;
|
||||
case 'request_rupee':
|
||||
if(personPopupOpen){
|
||||
requestedAddress.value = person.dataset.floId
|
||||
}
|
||||
break;
|
||||
}
|
||||
})
|
||||
document.addEventListener('popupclosed', e => {
|
||||
popupStack = e.detail.popupStack
|
||||
let thisPopup = e.detail.popup,
|
||||
@ -1528,7 +1543,7 @@
|
||||
document.querySelector('#navbar').classList.remove('hide-completely')
|
||||
document.querySelector('#main_header').classList.remove('hide-completely')
|
||||
break;
|
||||
case 'cash_transfer' :
|
||||
case 'send_rupee_popup' :
|
||||
payingRequested = false;
|
||||
tokenReceiver.readOnly = false
|
||||
tokenAmount.readOnly = false
|
||||
@ -1543,6 +1558,9 @@
|
||||
transactionFailedSection.classList.add('hide-completely')
|
||||
}, 300);
|
||||
break;
|
||||
case 'person_popup':
|
||||
personPopupOpen = false
|
||||
break;
|
||||
case 'prompt':
|
||||
if (thisPopup.querySelector('sm-input').value == '')
|
||||
thisPopup.querySelector('.cancel-btn').click()
|
||||
@ -1740,11 +1758,20 @@
|
||||
}
|
||||
|
||||
let payingRequested = false,
|
||||
currentPaymentRequest;
|
||||
currentPaymentRequest,
|
||||
person,
|
||||
personName;
|
||||
const tokenReceiver = document.getElementById('token_receiver'),
|
||||
tokenAmount = document.getElementById('token_amount'),
|
||||
depositRupeeAmount = document.getElementById('token_amount_to_buy')
|
||||
|
||||
const requestedAddress = document.getElementById('requested_address'),
|
||||
requestedAmount = document.getElementById('requested_amount')
|
||||
|
||||
const showPersonName = document.getElementById('show_person_name'),
|
||||
showPersonFloId = document.getElementById('show_person_flo_id'),
|
||||
personInitials = document.getElementById('person_initials')
|
||||
|
||||
window.addEventListener('load', () => {
|
||||
document.addEventListener('input', e => {
|
||||
if (e.target.closest('sm-input')) {
|
||||
@ -1763,12 +1790,12 @@
|
||||
|
||||
//Function for handling contact click event
|
||||
|
||||
const showPersonName = document.getElementById('show_person_name'),
|
||||
showPersonFloId = document.getElementById('show_person_flo_id')
|
||||
peopleContainer.addEventListener('click', e => {
|
||||
if(e.target.closest('.person')){
|
||||
let person = e.target.closest('.person')
|
||||
person = e.target.closest('.person')
|
||||
showPersonName.textContent = person.dataset.name
|
||||
personInitials.textContent = person.dataset.name.charAt(0)
|
||||
personInitials.style.background = allContacts[person.dataset.floId].color.light
|
||||
showPersonFloId.textContent = person.dataset.floId
|
||||
showPopup('person_popup')
|
||||
}
|
||||
@ -1778,6 +1805,15 @@
|
||||
}
|
||||
})
|
||||
|
||||
document.getElementById('person_popup').addEventListener('click', e => {
|
||||
if(!e.target.closest('#show_person_name') && !e.target.closest('#edit_person_name')){
|
||||
if(showPersonName.isContentEditable && personName !== showPersonName.textContent){
|
||||
changePersonName()
|
||||
showPersonName.contentEditable = 'false'
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// Function for confirming deposit requests
|
||||
document.getElementById('pending_deposits_container').addEventListener('click', async (e) => {
|
||||
if (e.target.closest('.confirm-deposit-btn'))
|
||||
@ -1845,12 +1881,10 @@
|
||||
customMsg)
|
||||
}
|
||||
})
|
||||
// Function for requesting rupee
|
||||
// Function for requesting rupee
|
||||
document.getElementById('request_rupee_btn').addEventListener('click', (e) => {
|
||||
let requestedAddress = document.getElementById('requested_address').value,
|
||||
requestedAmount = document.getElementById('requested_amount').value
|
||||
btnLoading('request_rupee_btn', 'start')
|
||||
request_payment(requestedAddress, requestedAmount)
|
||||
request_payment(requestedAddress.value, requestedAmount.value)
|
||||
})
|
||||
|
||||
// Function for accepting payment request
|
||||
@ -1860,7 +1894,7 @@
|
||||
senderAddress = parent.dataset.senderAddress,
|
||||
amount = parent.dataset.amount,
|
||||
paymentRequestId = parent.dataset.paymentRequestId;;
|
||||
showPopup('cash_transfer');
|
||||
showPopup('send_rupee_popup');
|
||||
payingRequested = true;
|
||||
currentPaymentRequest = {
|
||||
paymentRequest: parent,
|
||||
@ -2015,7 +2049,7 @@
|
||||
|
||||
if(receiver !== 'undefined')
|
||||
composition +=`
|
||||
<h5>${transaction}</h5> <strong>${receiver}</strong>`
|
||||
<h5>${transaction}</h5> <strong>${allContacts[receiver] ? allContacts[receiver].name : receiver}</strong>`
|
||||
|
||||
if(upiTxId !== 'undefined')
|
||||
composition += `
|
||||
@ -2035,22 +2069,22 @@
|
||||
}
|
||||
|
||||
|
||||
let allPages = document.querySelectorAll('.page'),
|
||||
allTabs = document.querySelectorAll('.navbar-item');
|
||||
const allPages = document.querySelectorAll('.page'),
|
||||
allTabs = document.querySelectorAll('.navbar-item')
|
||||
|
||||
function showPage(page, btn) {
|
||||
allPages.forEach((page) => {
|
||||
page.classList.add('hide-completely')
|
||||
})
|
||||
document.getElementById(page).classList.remove('hide-completely')
|
||||
allTabs.forEach((tab) => {
|
||||
tab.classList.remove('active')
|
||||
})
|
||||
if(btn){
|
||||
if(typeof btn === 'string')
|
||||
btn = document.getElementById(btn)
|
||||
btn = document.getElementById(btn)
|
||||
btn.classList.add('active', 'shrink')
|
||||
}
|
||||
document.getElementById(page).classList.remove('hide-completely')
|
||||
if (page === 'request_page') {
|
||||
show_payment_requests()
|
||||
}
|
||||
@ -2134,7 +2168,7 @@
|
||||
const contactFlo = document.getElementById('person_flo_id'),
|
||||
contactName = document.getElementById('person_name')
|
||||
async function addPerson(){
|
||||
compactIDB.addData('contacts', {name: contactName.value}, contactFlo.value)
|
||||
compactIDB.addData('contacts', {name: contactName.value, color: randomHsl()}, contactFlo.value)
|
||||
.then(success => {
|
||||
notify('Contact added', 'success')
|
||||
renderAllContacts()
|
||||
@ -2146,11 +2180,12 @@
|
||||
}
|
||||
|
||||
const peopleContainer = document.getElementById('people_container')
|
||||
let allContacts
|
||||
async function renderAllContacts(){
|
||||
const allContacts = await compactIDB.readAllData('contacts')
|
||||
allContacts = await compactIDB.readAllData('contacts')
|
||||
peopleContainer.innerHTML = ``
|
||||
for(contact in allContacts){
|
||||
frag.append(render.contact(contact, allContacts[contact].name))
|
||||
frag.append(render.contact(contact, allContacts[contact].name, allContacts[contact].color))
|
||||
}
|
||||
peopleContainer.append(frag)
|
||||
let addPersonButton = document.createElement('div')
|
||||
@ -2166,6 +2201,30 @@
|
||||
peopleContainer.prepend(addPersonButton)
|
||||
}
|
||||
|
||||
function setNameEditable(){
|
||||
showPersonName.contentEditable = 'true'
|
||||
showPersonName.focus()
|
||||
document.execCommand('selectAll', false, null);
|
||||
document.getSelection().collapseToEnd();
|
||||
personName = showPersonName.textContent
|
||||
}
|
||||
|
||||
async function changePersonName(){
|
||||
let contact = await compactIDB.readData('contacts', person.dataset.floId)
|
||||
contact.name = showPersonName.textContent
|
||||
if(showPersonName.textContent === '')
|
||||
contact.name = 'Unknown'
|
||||
compactIDB.writeData('contacts', contact, person.dataset.floId)
|
||||
.then(success => {
|
||||
notify('Changes saved', 'success')
|
||||
renderAllContacts()
|
||||
personInitials.textContent = contact.name.charAt(0)
|
||||
})
|
||||
.catch(error => {
|
||||
notify(error, 'error')
|
||||
})
|
||||
}
|
||||
|
||||
function signIn() {
|
||||
return new Promise((resolve, reject) => {
|
||||
hideLoader()
|
||||
@ -11663,15 +11722,14 @@
|
||||
#!#helplineFloId=F9MAyvT5b9aSfsuukAungrbt1L5fgmJmuK
|
||||
#!#cashiers=
|
||||
{
|
||||
"FCja6sLv58e3RMy41T5AmWyvXEWesqBCkX": {
|
||||
"upi_id": "8507742774@ybl"
|
||||
},
|
||||
"FPFeL5PXzW9bGosUjQYCxTHSMHidnygvvd": {
|
||||
"upi_id": "7744023898@paytm"
|
||||
}
|
||||
}`
|
||||
/*
|
||||
,
|
||||
"FCja6sLv58e3RMy41T5AmWyvXEWesqBCkX": {
|
||||
"upi_id": "8507742774@ybl"
|
||||
},
|
||||
"FHW2kgYEhDt85vjAiMMF7bQqdP74L7iwvQ": {
|
||||
"upi_id": "8340617958@ybl"
|
||||
},
|
||||
@ -11805,7 +11863,7 @@
|
||||
})
|
||||
let cashierList = ``,
|
||||
cashierSelect = document.getElementById('select_cashier')
|
||||
cashierList += `<sm-strip-option value = "">Select Cashier...</sm-strip-option>`;
|
||||
cashierList += `<sm-strip-option value = "">Select Cashier</sm-strip-option>`;
|
||||
for (cashier in token_app.master_configurations.cashiers)
|
||||
cashierList += `<sm-strip-option value = "${cashier}">${cashier}</sm-strip-option>`
|
||||
cashierSelect.innerHTML = cashierList;
|
||||
@ -11827,6 +11885,10 @@
|
||||
option.classList.remove('hide-completely')
|
||||
})
|
||||
userType.forEach(user => user.textContent = 'User')
|
||||
defaultUPI = localStorage.getItem(`defaultUPI${myFloID}`)
|
||||
renderUserUPI()
|
||||
renderAllContacts()
|
||||
|
||||
show_all_user_activities()
|
||||
show_payment_requests()
|
||||
showPage('home_page', 'home_page_btn')
|
||||
@ -12035,11 +12097,13 @@
|
||||
for (const m of general_msg) {
|
||||
if (cash_deposits_upi_txid_list.includes(m.message.upi_txid)) continue;
|
||||
if (processed_deposits.includes(m.message.upi_txid)) continue;
|
||||
console.log(m)
|
||||
let {
|
||||
user_flo_id,
|
||||
upi_txid
|
||||
upi_txid,
|
||||
deposit_amount
|
||||
} = m.message;
|
||||
frag.append(render.depositRequest(upi_txid, user_flo_id))
|
||||
frag.append(render.depositRequest(upi_txid, user_flo_id, deposit_amount))
|
||||
}
|
||||
|
||||
depositsContainer.append(frag)
|
||||
@ -12083,12 +12147,14 @@
|
||||
for (const m of general_msg) {
|
||||
if (cash_withdraws_token_txid_list.includes(m.message.token_txid)) continue;
|
||||
if (processed_withdraws.includes(m.message.token_txid)) continue;
|
||||
console.log(m)
|
||||
let {
|
||||
token_txid,
|
||||
user_flo_id,
|
||||
withdrawer_upi
|
||||
withdrawer_upi,
|
||||
withdraw_amount
|
||||
} = m.message
|
||||
frag.append(render.withdrawRequest(token_txid, withdrawer_upi, user_flo_id))
|
||||
frag.append(render.withdrawRequest(token_txid, withdrawer_upi, user_flo_id, withdraw_amount))
|
||||
}
|
||||
|
||||
withdrawsContainer.append(frag)
|
||||
@ -12299,7 +12365,7 @@
|
||||
async function refresh_balance(refreshButton) {
|
||||
try {
|
||||
if (refreshButton)
|
||||
refreshButton.textContent = 'Checking...'
|
||||
btnLoading(refreshButton, 'start')
|
||||
const current_token_balance = document.querySelector('.token-balance').textContent;
|
||||
if (typeof current_token_balance == "string") {
|
||||
const [get_user_rupee_balance, get_user_flo_balance] = await Promise.all([ ajaxGet(
|
||||
@ -12327,12 +12393,14 @@
|
||||
|
||||
}
|
||||
if (refreshButton) {
|
||||
notify('Balance Updated')
|
||||
refreshButton.textContent = 'Check Balance'
|
||||
btnLoading(refreshButton, 'stop')
|
||||
}
|
||||
return true;
|
||||
} catch (error) {
|
||||
notify("Unable to load balance", 'error')
|
||||
if (refreshButton) {
|
||||
btnLoading(refreshButton, 'stop')
|
||||
}
|
||||
throw new Error(error);
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user