From afc1ac087a1da3ba009b93eb1bbab874ebf8794a Mon Sep 17 00:00:00 2001 From: sairaj mote Date: Sat, 3 Oct 2020 02:00:12 +0530 Subject: [PATCH] 0.0.52 --- css/main.css | 8 + css/main.min.css | 2 +- css/main.scss | 8 + index.html | 1171 +++++++++++++++++++++++++--------------------- 4 files changed, 656 insertions(+), 533 deletions(-) diff --git a/css/main.css b/css/main.css index 6c5f9ac..5271eb3 100644 --- a/css/main.css +++ b/css/main.css @@ -1187,6 +1187,14 @@ sm-panel { color: rgba(var(--text-color), 0.7); font-weight: 500; } +.activity .pending { + display: inline-flex; + padding: 0.3rem 0.6rem; + background: rgba(var(--text-color), 0.06); + border-radius: 1rem; + width: max-content; + margin-left: 0.4rem; +} .back-arrow { stroke-width: 10; diff --git a/css/main.min.css b/css/main.min.css index 05cb45f..1ca5a85 100644 --- a/css/main.min.css +++ b/css/main.min.css @@ -1 +1 @@ -#transaction_page h5,*,.activity .activity-amount,.balance h4,.request .amount{font-family:Roboto,sans-serif}body,body[data-theme=dark] .flo-balance-card{color:rgba(var(--text-color),1)}a,h1,h2,h3,h4,h5{font-weight:600}.activity,.option,button{transition:transform .3s}.option,.person,button{-webkit-tap-highlight-color:transparent}#navbar .navbar-item,#transaction_page h5,#transaction_page header h4,.activity .activity-type,.capitalize,.option,.request h5,button,sm-tab{text-transform:capitalize}.action,button{position:relative;display:inline-flex}.icon,.loader{overflow:visible}*{box-sizing:border-box;padding:0;margin:0}button,h1,h2,h3,h4,h5{font-family:Poppins,sans-serif}body{--accent-color:#4527A0;--text-color:17,17,17;--text-color-light:85,85,85;--foreground-color:255,255,255;--background-color:rgba(var(--foreground-color), 1);--dark-shade:#f4f4f4;--hue:255;--saturation:61%;--lightness:39%;font-size:16px;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;--dark-shade:#222;--hue:255;--saturation:39%;--lightness:70%;background-color:var(--background-color)}a{text-decoration:none;color:var(--accent-color)}.dark-text{color:#111}h1{font-size:3.5rem}h2{font-size:2rem}h3{font-size:1.5rem}h4{font-size:1rem}h5{font-size:.8rem}p{line-height:1.5;max-width:60ch;color:rgba(var(--text-color),.9)}strong{font-weight:500}button{align-items:center;justify-content:center;padding:.6rem 1.2rem;font-weight:600;cursor:pointer;border-radius:.3rem;color:var(--accent-color);border:none;background:rgba(var(--text-color),.1)}button:focus{outline:solid thin}button:disabled{cursor:default;background:rgba(var(--text-color),.5)}button:disabled~.loader{opacity:0}::-moz-focus-inner{border:none}.bottom-padding{padding-bottom:1.5rem}.top-padding{padding-top:1em}.bottom-margin{margin-bottom:1.5rem}.top-margin{margin-top:1.5rem}.flex{display:flex}.grid{display:grid}.grid-2{grid-template-columns:auto auto;gap:1em}.align-center{align-items:center}#confirmation,#prompt,.balance,.direction-column{flex-direction:column}.justify-right{margin-left:auto}.space-between{justify-content:space-between}.label{margin-bottom:.4rem}.light-text{opacity:.7}.hide{opacity:0;pointer-events:none}.hide-completely{display:none!important}.breakable{word-break:break-all}.separator{padding:.1em}.no-transformations{transform:none!important}sm-button[variant=outlined]{--accent-color:rgba(var(--text-color), 1)}.loader{fill:none;stroke-width:10;stroke:var(--accent-color);height:2rem;width:2rem;stroke-dashoffset:230;stroke-dasharray:230;padding:2px;justify-self:center}.action,.logo{align-items:center}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes load{50%{stroke-dashoffset:0}100%{stroke-dashoffset:-210}}@keyframes load-btn-loader{50%{stroke-dashoffset:0}100%{stroke-dashoffset:-220}}.action{justify-content:center;padding:0;background:0 0}.action:disabled .primary-btn{background:0 0}.action:focus{outline:0}.action h4{padding:.5rem 1.2rem;font-size:.9rem;clip-path:circle(100%);transition:clip-path .3s;border-radius:.2rem}.action .btn{z-index:2}.action .loader{position:absolute;z-index:1;padding:.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{clip-path:circle(0)!important}.animate-loader{animation:load 2.6s infinite,rotate 1s infinite linear}.expand{width:100%}.fade-left{animation:fadeleft .3s}.fade-right{animation:faderight .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:flex}.logo h4{font-weight:500;font-size:clamp(1.1rem,2vw,1.2rem)}.logo .main-logo{height:clamp(1.4rem,2vw,1.6rem);width:clamp(1.4rem,2vw,1.6rem);fill:rgba(var(--text-color),1);stroke:none;margin-right:.2rem}textarea{width:100%;max-width:100%;background:rgba(var(--text-color),.1);border:none;border-radius:.2rem;resize:none;font-size:1rem;line-height:1.6;padding:.8rem}:empty+.empty-state{display:grid}.empty-state{display:none;place-items:center;width:100%}.empty-state svg{stroke:rgba(var(--text-color),.8);height:12em;width:12em}.container-header{display:flex;align-items:center;flex-direction:row;width:100%;padding:1rem 0}.container-header h2{flex:1}.container-header button{align-self:center}.btn{background:var(--accent-color);color:rgba(var(--foreground-color),1);padding:.4em 1em}.back-arrow{stroke:rgba(var(--text-color),1);fill:none;height:2rem;cursor:pointer}.card{border-radius:.6rem;padding:1.5em;background:rgba(var(--foreground-color),1)}.solid-background{background:rgba(var(--foreground-color),1)!important}#confirmation p,#prompt p{margin:1rem}#confirmation h4,#prompt h4{font-weight:500;margin-bottom:1.5rem}#confirmation .flex sm-button:first-of-type,#prompt .flex sm-button:first-of-type{margin-right:.6em;margin-left:auto}.refresh{margin-top:.6em;margin-bottom:1em}sm-popup .illustration{position:relative;height:4rem;width:4rem;padding:1rem;stroke:var(--accent-color);margin-bottom:1rem;border-radius:5rem;background:rgba(var(--text-color),.06)}#main_loader,#navbar{position:fixed;left:0}sm-popup sm-input:not(:last-of-type){margin-bottom:1rem}sm-popup p{margin-block-end:1rem}sm-popup .action h4{padding:.5rem 1rem;font-weight:500}sm-popup .message{margin-bottom:.2rem}sm-popup .message+.copy-row{margin-bottom:1.5rem}sm-popup h5:not(.tag){font-family:Roboto,sans-serif;margin-bottom:.4rem;margin-top:1rem;font-weight:500}.popup-header{padding:1.5rem;padding-bottom:0;display:flex;align-items:center;width:100%}.popup-header .icon{margin-right:1rem;padding:.2rem;stroke-width:10;cursor:pointer}.popup-header button{width:auto;margin-left:auto}details,summary{margin-bottom:1rem}summary{cursor:pointer}details h5{line-height:.6;margin-bottom:0;margin-top:1.2rem!important}details p{font-size:.9rem;line-height:1.4}#sign_in_popup::part(background){background:rgba(var(--foreground-color),1)}#sign_in_popup h3{margin-top:2rem}#sign_in_popup h4{font-weight:500;margin-bottom:3rem}#sign_in_popup button{margin:1rem 0}#sign_in_popup p{margin-top:1rem;margin-bottom:0!important}.primary-btn{background:var(--accent-color);justify-content:center;color:rgba(var(--foreground-color),1)}#navbar .navbar-item,.balance .tooltip,.user-panel .action h4{color:rgba(var(--text-color),1)}#main_header{align-items:center;padding:clamp(1rem,2vw,2rem) 1rem;justify-content:space-between}.icon{height:1.2rem;width:1.2rem;fill:none;stroke:rgba(var(--text-color),.8);stroke-width:6;stroke-linecap:round;stroke-linejoin:round}#navbar{display:flex;flex-direction:row;align-items:center;justify-content:space-evenly;right:0;bottom:0;top:auto;z-index:3;background:rgba(var(--foreground-color),1);box-shadow:0 -.5rem 1rem #00010;border-radius:1rem 1rem 0 0}#navbar .navbar-item{position:relative;text-align:center;cursor:pointer;padding:.3rem;padding-top:.8rem;border-radius:.4em;opacity:.6;font-size:.8em;width:100%;font-weight:600}#navbar .navbar-item h5{margin-top:.4em}#navbar .navbar-item .icon{stroke:rgba(var(--text-color),1)}#navbar .active{opacity:1}.banking{stroke-width:4}#home_page{padding:0 0 4rem}#home_page .left{width:auto;border-radius:.6rem}#home_page .left h3,#home_page .left h4,#home_page .left p{padding:0 1.5rem}#home_page .left h3{font-size:2rem;margin-bottom:1rem}.user-panel{position:relative;padding:1.5rem;padding-top:1rem;align-self:flex-start}.request .action,.request button,.user-panel .action .loader{align-self:flex-end}.user-panel .icon{stroke:rgba(var(--foreground-color),1)}.user-panel .action{width:auto;justify-content:flex-end}.user-panel .action h4{border-radius:2rem;background-color:rgba(var(--text-color),.1);width:auto}.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:"rupee ." "flo flo";gap:.8rem;margin-top:1rem}.display-balance .icon{height:1.4rem;width:1.4rem;padding:.3rem;stroke-width:10;cursor:pointer}.balance{height:10rem;position:relative;display:flex;border-radius:1rem;padding:1rem;justify-content:flex-end}.balance h4{font-size:2rem;font-weight:500;text-shadow:1px .1rem .2rem #00040;word-break:break-all;flex:1}.balance h5{opacity:.8;margin-bottom:.2rem}.balance .tooltip{border-radius:1rem;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),.1),rgba(var(--text-color),.2));background-size:9rem,cover}.rupee-balance-card .tooltip{box-shadow:0 0 0 .4rem rgba(var(--text-color),.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}.in-process-balance .tooltip{box-shadow: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}.flo-balance-card .tooltip{box-shadow:0 0 0 .4rem #1b0980 inset}.tooltip{position:absolute;left:0;right:0;top:0;bottom:0;cursor:help;display:flex;flex-direction:column;background:rgba(var(--foreground-color),1);z-index:1;transition:clip-path .4s ease-out;clip-path:circle(.8rem at calc(100% - 1.5rem) 1.4rem);scrollbar-width:thin}.tooltip .tt-icon{display:inline-flex;width:3rem;height:3rem;align-items:center;justify-content:center;margin-left:auto;font-weight:600}.tooltip .tooltip-text{padding:1rem;padding-top:0;line-height:1.4;font-size:.9rem;font-weight:400;overflow-y:auto;max-height:calc(100% - 3rem);max-width:30ch}.option h4,.page .container-header .search input,.request h4,.request h5,.user-type{font-weight:500}.tooltip:hover{clip-path:circle(100%)}.options-tab{display:grid;grid-template-columns:repeat(4,1fr);padding:1.5rem;gap:2rem .2rem}.option{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;border-radius:.4rem;width:5rem;cursor:pointer}.option .icon{height:3rem;width:3rem;background:rgba(var(--text-color),.06);border-radius:2rem;padding:.8rem;margin-bottom:.6rem}.option h4{font-size:.85rem;opacity:.8}.option:active{transform:scale(.95)}.request-icon{transform:rotate(180deg)}.notification-dot::after{content:"";position:absolute;z-index:1;top:0;right:0;height:.6em;width:.6em;background-color:#E53935;border-radius:.4em;transition:transform .3s}.shrink.notification-dot::after{transform:scale(0)}#deposit .container-header,#withdraw .container-header{background:linear-gradient(rgba(var(--foreground-color),1) 90%,transparent)}sm-tab-header{position:sticky;top:0;display:inline-flex;background-color:var(--dark-shade);z-index:2;padding:.3rem;margin:1rem 0;border-radius:3rem}sm-tab::part(tab){padding:.4rem 1.2rem}sm-panel{width:100%}.request{display:inline-flex;flex-direction:column;padding:1.5em;border-radius:.4em;border:1px solid}.request h5{margin-bottom:.2rem;opacity:.8}.request h3,.request h4{margin-bottom:1rem}.request h4:last-of-type{margin-bottom:0}.request button{width:auto;margin-top:1.5rem;margin-bottom:0}.request .copy-row{margin-bottom:1.5rem}.request .flex{align-items:center;justify-content:flex-end;margin-top:1.5rem}.request .flex button,.request .flex h5{margin:0}.deposited{color:#007732}.decline-request{margin-right:.5rem!important}.withdrawn{color:#d43125}.container{display:grid;gap:1em;width:100%;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr))}.copy-row,.page .container-header{display:grid;grid-template-columns:1fr auto}.page{padding:1rem 1.5rem;padding-bottom:5rem}.page .container-header{grid-template-areas:". ." "search search";gap:1rem;top:0;background:rgba(var(--foreground-color),1);will-change:auto;z-index:2}.page .container-header .search{grid-area:search}.page .container-header .search input{padding:1em;border:none;width:100%;background:var(--dark-shade);font-size:1rem;color:rgba(var(--text-color),1);border-radius:.2em}.page .container-header .search input:focus{outline:0;background:rgba(var(--text-color-light),.2)}.copy-row{align-items:center;gap:.5rem;width:auto}.copy-row h4{margin-bottom:0;font-weight:400}.copy-row .icon{cursor:pointer;padding:.4rem;height:1.8rem;width:1.8rem}.copy-row .copy{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.time{margin-bottom:1.5rem!important;font-weight:500}#report_popup{width:32rem}#profile_page{display:flex;flex-direction:column}#profile_page button{align-self:flex-start}.complaint{display:grid;gap:1.5rem 0}.complaint .complaint-actions{align-items:center;margin:1.5rem 0 0}#helpline_page sm-select,.complaint .processed,.complaint .unprocessed{margin-bottom:1.5rem}.complaint .processed{color:#007732}.complaint .unprocessed{color:#d43125}.complaint button .icon{padding:.2rem;margin-right:.5rem;stroke:var(--accent-color);stroke-width:8}.complaints-container{padding-top:1.5rem;display:grid;align-items:flex-start;gap:1.5rem}.complaint-placeholder{animation:pulse infinite .6s alternate}.complaint-placeholder h4,.complaint-placeholder h5{border-radius:.2rem}.complaint-placeholder h5{background:rgba(var(--text-color),.1);padding:.5rem .6rem}.complaint-placeholder h4{background:rgba(var(--text-color),.2);padding:.8rem}.complaint-placeholder .demo-btn{padding:.8rem 3rem}@keyframes pulse{from{opacity:.4}to{opacity:1}}#main_loader{text-align:center;place-content:center;height:100vh;width:100vw}#main_loader sm-button{margin-left:0;margin-top:1rem}#main_loader svg{height:2rem;width:2rem;stroke:var(--accent-color);stroke-width:6;fill:none;overflow:visible;stroke-linecap:round;stroke-dashoffset:210;stroke-dasharray:210;justify-self:center;align-self:center;margin-bottom:2rem}.activity,.select{align-items:center;background:rgba(var(--text-color),.06)}#main_loader h3{width:100%;font-weight:400;word-spacing:.16em}#upi_txId_section .copy-row{margin-bottom:1.5rem}@keyframes popup{0%{stroke-dashoffset:50;transform:translateY(4rem) scale(.2,.6)}40%,41%{transform:translateY(0) scale(.2)}50%{stroke-dashoffset:50;transform:translateY(0) scale(1)}100%{stroke-dashoffset:0}}#add_person_btn:active,.activity:active,.person:active{transform:scale(.95)}#transaction_result{z-index:12}#transaction_result #transaction_heading{margin-bottom:1rem}#transaction_result .copy-row{grid-template-areas:"label label" ". .";margin-top:1rem;gap:0 1rem}#transaction_result .copy-row h4{font-weight:500}#transaction_result h5{grid-area:label;color:rgba(var(--text-color),.7)}#transaction_result h4,#transaction_result h5,#transaction_result p{text-align:center}#transaction_result>h4{font-size:1.2rem;margin-top:2rem;margin-bottom:.5rem}#transaction_result sm-button{align-self:center;width:auto}#failure_svg,#success_svg{height:5rem;width:5rem;stroke-width:4;align-self:center;stroke:none;stroke-dasharray:50;fill:rgba(var(--text-color),.1);animation:popup 2s forwards cubic-bezier(.175,.885,.32,1.275)}#success_svg polyline{fill:none;stroke:#00C853}#failure_svg line{stroke:#EF5350}.rupee-symbol{height:1rem;width:1rem;fill:rgba(var(--text-color),.5)}#deposit_rupee .copy-row{margin-bottom:1rem}.activity-container{display:grid;gap:1rem}.activity{display:grid;border-radius:.6rem;padding:1rem 1.2rem;gap:0 1rem;grid-template-columns:auto 1fr auto;grid-template-areas:"icon type amount" "icon receiver time";cursor:pointer}.activity .icon{grid-area:icon;height:3rem;width:3rem;padding:.8rem;background:rgba(var(--text-color),.06);background-size:cover;border-radius:2rem}.activity .activity-type{grid-area:type;font-weight:400;font-size:.8rem}.activity .activity-receiver{grid-area:receiver;font-weight:500;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.activity .activity-amount{text-align:right;grid-area:amount}.activity .activity-time{text-align:right;grid-area:time;color:rgba(var(--text-color),.7);font-weight:500}.back-arrow{stroke-width:10;margin-right:.5rem;padding:.2rem}.select{max-width:50ch;position:relative;display:flex;width:100%;border-radius:.3rem}.select:first-of-type:not(:last-of-type){border-radius:.3rem .3rem 0 0}.select+.select{margin-top:0;border-radius:0 0 .3rem .3rem;border-top:solid 1px rgba(var(--text-color),.16)}.select label{display:flex;align-items:center;cursor:pointer;flex:1;padding:.8rem 1rem}.select input[type=radio]{display:none}.select input:checked~.radio .outer-ring{stroke:var(--accent-color)}.select input:checked~.radio .inner-disc{transform:none}.select .radio{width:1.2rem;height:1.2rem;fill:none;overflow:visible;margin-right:.6rem}.select .radio .outer-ring{stroke-width:8;stroke:rgba(var(--text-color),.5)}.select .radio .inner-disc{transform-origin:center;fill:var(--accent-color);transform:scale(0);transition:transform .3s cubic-bezier(.175,.885,.32,1.275)}.select .remove{width:3rem;height:2rem;padding:.7rem;cursor:pointer;stroke-width:10}.select .tag{grid-area:tag;opacity:.6;font-weight:500;border:1px solid;padding:.2rem .4rem;border-radius:.3rem;margin-right:.5rem}#add_person_btn,#person_popup h5,.person-name{opacity:.8;font-weight:500}.select h4{font-weight:400}.add-upi{margin-top:.4rem;justify-self:flex-start;width:max-content}#transaction_page header{padding:.5rem 0}#transaction_page header .back-arrow{grid-area:back}#transaction_page h5{font-weight:400;opacity:.8;margin-bottom:.4rem}#transaction_page p:last-of-type{margin:2rem 0 1rem;font-size:.9rem;opacity:.8}#transaction_page #transaction_details{position:relative;margin:1.5rem 0;padding:1.5rem;background-color:rgba(var(--text-color),.06);max-width:50ch;border-radius:.5rem}#transaction_page #transaction_details .icon{height:4rem;width:4rem;padding:1.2rem;border-radius:4rem;background:rgba(var(--text-color),.06);margin-bottom:2rem}#add_person_btn .icon,#person_initials,.person-initials{border-radius:2rem;box-shadow:0 .1rem .1rem #00016,0 .1rem .3rem #00040}#transaction_page #transaction_details .flex{margin-bottom:1.5rem;align-items:baseline}#add_person_btn,.person{flex-direction:column;transition:transform .3s;cursor:pointer}#transaction_page #transaction_details strong{font-weight:500}#transaction_page #transaction_details strong:not(:last-of-type){margin-bottom:1rem}#transaction_page .transaction-amount{font-size:2rem;font-weight:400}#transaction_page #transaction_time{right:0;position:absolute;margin:1.5rem}#people_container{display:grid;grid-template-columns:repeat(4,1fr);padding:1.5rem;gap:2rem .2rem}#add_person_btn{display:flex;width:5rem;text-align:center;font-size:.85rem}#add_person_btn .icon{height:3rem;width:3rem;stroke-width:10;padding:1rem;background:rgba(var(--text-color),.06);align-self:center;margin-bottom:.6rem}.person{display:flex;align-items:center;width:5rem}#person_initials,.person-initials{display:flex;justify-content:center;height:3rem;width:3rem;font-size:1.2rem!important;font-weight:500;align-items:center;margin-bottom:.6rem!important;text-transform:uppercase}#person_popup h3,.person-name{text-transform:capitalize}.person-name{font-size:.85rem;text-align:center}#person_popup>.flex:first-of-type{margin:1rem 0}#person_popup>.flex:first-of-type .flex{margin-top:.5rem}#person_popup>.flex:first-of-type .flex .icon{height:2.6rem;width:2.6rem;padding:.8rem;cursor:pointer}#person_popup .copy-row{margin-bottom:1.5rem}#person_popup #show_person_name{padding:.5rem 1rem;border-radius:.4rem;max-width:30ch}#person_popup #show_person_name:focus{outline:0;background:rgba(var(--text-color),.1)}#activity_page .empty-state,#request_page .empty-state,#settings_page .empty-state{justify-content:left}#settings_page>h4{margin-top:2rem;margin-bottom:.4rem}#settings_page p{color:rgba(var(--text-color),.7)}#settings_page sm-button{margin-top:.8rem}#settings_page .flex{max-width:60ch}@media only screen and (max-width:640px){#deposit,#home_page{display:grid;gap:1.5rem;grid-template-areas:"." "left";grid-template-columns:minmax(0,1fr)}#deposit .left,#home_page .left{grid-area:left}sm-select{width:100%}.hide-on-mobile{display:none!important}#transaction_page{padding-top:0}#transaction_page header{padding:1.5rem 0}#deposit .user-panel{padding:0}}@media only screen and (min-width:640px){.hide-on-desktop{display:none!important}body{padding:0 2rem;margin-left:4rem}sm-popup{background:rgba(var(--foreground-color),1)}#navbar,#navbar .active{background:rgba(var(--text-color),.06)}#confirmation,sm-popup::part(popup){width:24rem}#navbar{justify-content:flex-start;flex-direction:column;align-items:stretch;left:0;bottom:0;top:0;right:auto;border-top:none;border-radius:0;box-shadow:-.5rem 0 .5rem #00008 inset}#navbar .navbar-item{display:flex;width:auto;padding:.8rem 1.2rem}#navbar .logo h4,#navbar .navbar-item h5{display:none}#navbar .logo .main-logo,#navbar .navbar-item .icon{height:1.2rem;width:1.2rem}#navbar .navbar-item:hover{opacity:1}#navbar .logo{margin:1.5rem 1rem}.page{padding-bottom:2rem}#sign_in_popup{width:24rem}#home_page{padding-top:.5rem}#home_page .left{margin-top:1rem}#people_container,.options-tab{grid-template-columns:repeat(auto-fill,minmax(5rem,1fr));gap:2rem .8rem}.display-balance .balance{height:9rem}#settings_page .copy-row{display:inline-grid}}@media only screen and (min-width:800px){body{margin-left:11rem}.complaint{gap:0 1.5rem;grid-template-columns:1fr 1fr;grid-template-areas:". . " "header header"}.complaint .complaint-actions{grid-area:header}.complaint .left{border-right:1px solid rgba(var(--text-color),.2);padding-right:1.5rem}.complaint .right{display:flex;justify-content:center;flex-direction:column}#navbar .navbar-item h5{font-size:.9rem;margin:0;display:block}#navbar .icon{margin-right:.8rem}#navbar .logo h4{display:block;font-size:1rem}.user-panel{position:sticky;top:1.5rem;padding-top:1.5rem}#deposit,#home_page{display:grid;gap:1.5rem;grid-template-columns:minmax(0,1fr) 22rem}.activity{width:60ch}}@media only screen and (min-width:1920px){body{font-size:24px}}@media only screen and (min-width:2048px){body{font-size:24px}}@media only screen and (max-width:320px){body{font-size:14px}}@media (any-hover:hover){.navbar-item:hover{background:rgba(var(--text-color),.06)}.remove{opacity:.6}.remove:hover{opacity:1}} \ No newline at end of file +#transaction_page h5,*,.activity .activity-amount,.balance h4,.request .amount{font-family:Roboto,sans-serif}#navbar .navbar-item,.balance .tooltip,.user-panel .action h4,body,body[data-theme=dark] .flo-balance-card{color:rgba(var(--text-color),1)}a,h1,h2,h3,h4,h5{font-weight:600}.action,button{position:relative}.activity,.option,button{transition:transform .3s}.option,.person,button{-webkit-tap-highlight-color:transparent}#navbar .navbar-item,#transaction_page h5,#transaction_page header h4,.activity .activity-type,.capitalize,.option,.request h5,button,sm-tab{text-transform:capitalize}.icon,.loader{overflow:visible}.balance h4,.breakable{word-break:break-all}*{box-sizing:border-box;padding:0;margin:0}button,h1,h2,h3,h4,h5{font-family:Poppins,sans-serif}body{--accent-color:#4527A0;--text-color:17,17,17;--text-color-light:85,85,85;--foreground-color:255,255,255;--background-color:rgba(var(--foreground-color), 1);--dark-shade:#f4f4f4;--hue:255;--saturation:61%;--lightness:39%;font-size:16px;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;--dark-shade:#222;--hue:255;--saturation:39%;--lightness:70%;background-color:var(--background-color)}a{text-decoration:none;color:var(--accent-color)}.dark-text{color:#111}h1{font-size:3.5rem}h2{font-size:2rem}h3{font-size:1.5rem}h4{font-size:1rem}h5{font-size:.8rem}p{line-height:1.5;max-width:60ch;color:rgba(var(--text-color),.9)}strong{font-weight:500}button{display:inline-flex;align-items:center;justify-content:center;padding:.6rem 1.2rem;font-weight:600;cursor:pointer;border-radius:.3rem;color:var(--accent-color);border:none;background:rgba(var(--text-color),.1)}.action,.align-center{align-items:center}button:focus{outline:solid thin}button:disabled{cursor:default;background:rgba(var(--text-color),.5)}button:disabled~.loader{opacity:0}::-moz-focus-inner{border:none}.bottom-padding{padding-bottom:1.5rem}.top-padding{padding-top:1em}.bottom-margin{margin-bottom:1.5rem}.top-margin{margin-top:1.5rem}.flex{display:flex}.grid{display:grid}.grid-2{grid-template-columns:auto auto;gap:1em}#confirmation,#prompt,.balance,.direction-column{flex-direction:column}.justify-right{margin-left:auto}.space-between{justify-content:space-between}.label{margin-bottom:.4rem}.light-text{opacity:.7}.hide{opacity:0;pointer-events:none}.hide-completely{display:none!important}.separator{padding:.1em}.no-transformations{transform:none!important}sm-button[variant=outlined]{--accent-color:rgba(var(--text-color), 1)}.loader{fill:none;stroke-width:10;stroke:var(--accent-color);height:2rem;width:2rem;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}}@keyframes load-btn-loader{50%{stroke-dashoffset:0}100%{stroke-dashoffset:-220}}.action{display:inline-flex;justify-content:center;padding:0;background:0 0}.action:disabled .primary-btn{background:0 0}.action:focus{outline:0}.action h4{padding:.5rem 1.2rem;font-size:.9rem;clip-path:circle(100%);transition:clip-path .3s;border-radius:.2rem}.action .btn{z-index:2}.action .loader{position:absolute;z-index:1;padding:.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{clip-path:circle(0)!important}.animate-loader{animation:load 2.6s infinite,rotate 1s infinite linear}.expand{width:100%}.fade-left{animation:fadeleft .3s}.fade-right{animation:faderight .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:flex;align-items:center}.logo h4{font-weight:500;font-size:clamp(1.1rem,2vw,1.2rem)}.logo .main-logo{height:clamp(1.4rem,2vw,1.6rem);width:clamp(1.4rem,2vw,1.6rem);fill:rgba(var(--text-color),1);stroke:none;margin-right:.2rem}textarea{width:100%;max-width:100%;background:rgba(var(--text-color),.1);border:none;border-radius:.2rem;resize:none;font-size:1rem;line-height:1.6;padding:.8rem}:empty+.empty-state{display:grid}.empty-state{display:none;place-items:center;width:100%}.empty-state svg{stroke:rgba(var(--text-color),.8);height:12em;width:12em}.container-header{display:flex;align-items:center;flex-direction:row;width:100%;padding:1rem 0}.container-header h2{flex:1}.container-header button{align-self:center}.btn{background:var(--accent-color);color:rgba(var(--foreground-color),1);padding:.4em 1em}.back-arrow{stroke:rgba(var(--text-color),1);fill:none;height:2rem;cursor:pointer}.card{border-radius:.6rem;padding:1.5em;background:rgba(var(--foreground-color),1)}.solid-background{background:rgba(var(--foreground-color),1)!important}.option .icon,sm-popup .illustration{background:rgba(var(--text-color),.06)}#confirmation p,#prompt p{margin:1rem}#confirmation h4,#prompt h4{font-weight:500;margin-bottom:1.5rem}#confirmation .flex sm-button:first-of-type,#prompt .flex sm-button:first-of-type{margin-right:.6em;margin-left:auto}.refresh{margin-top:.6em;margin-bottom:1em}sm-popup .illustration{position:relative;height:4rem;width:4rem;padding:1rem;stroke:var(--accent-color);margin-bottom:1rem;border-radius:5rem}#main_loader,#navbar{position:fixed;left:0}#navbar,#sign_in_popup::part(background){background:rgba(var(--foreground-color),1)}sm-popup sm-input:not(:last-of-type){margin-bottom:1rem}sm-popup p{margin-block-end:1rem}sm-popup .action h4{padding:.5rem 1rem;font-weight:500}sm-popup .message{margin-bottom:.2rem}sm-popup .message+.copy-row{margin-bottom:1.5rem}sm-popup h5:not(.tag){font-family:Roboto,sans-serif;margin-bottom:.4rem;margin-top:1rem;font-weight:500}.popup-header{padding:1.5rem;padding-bottom:0;display:flex;align-items:center;width:100%}.popup-header .icon{margin-right:1rem;padding:.2rem;stroke-width:10;cursor:pointer}.popup-header button{width:auto;margin-left:auto}details,summary{margin-bottom:1rem}summary{cursor:pointer}details h5{line-height:.6;margin-bottom:0;margin-top:1.2rem!important}details p{font-size:.9rem;line-height:1.4}#sign_in_popup h3{margin-top:2rem}#sign_in_popup h4{font-weight:500;margin-bottom:3rem}#sign_in_popup button{margin:1rem 0}#sign_in_popup p{margin-top:1rem;margin-bottom:0!important}.primary-btn{background:var(--accent-color);justify-content:center;color:rgba(var(--foreground-color),1)}#main_header{align-items:center;padding:clamp(1rem,2vw,2rem) 1rem;justify-content:space-between}.icon{height:1.2rem;width:1.2rem;fill:none;stroke:rgba(var(--text-color),.8);stroke-width:6;stroke-linecap:round;stroke-linejoin:round}#navbar{display:flex;flex-direction:row;align-items:center;justify-content:space-evenly;right:0;bottom:0;top:auto;z-index:3;box-shadow:0 -.5rem 1rem #00010;border-radius:1rem 1rem 0 0}#navbar .navbar-item{position:relative;text-align:center;cursor:pointer;padding:.3rem;padding-top:.8rem;border-radius:.4em;opacity:.6;font-size:.8em;width:100%;font-weight:600}#navbar .navbar-item h5{margin-top:.4em}#navbar .navbar-item .icon{stroke:rgba(var(--text-color),1)}#navbar .active{opacity:1}.banking{stroke-width:4}#home_page{padding:0 0 4rem}#home_page .left{width:auto;border-radius:.6rem}#home_page .left h3,#home_page .left h4,#home_page .left p{padding:0 1.5rem}#home_page .left h3{font-size:2rem;margin-bottom:1rem}.user-panel{position:relative;padding:1.5rem;padding-top:1rem;align-self:flex-start}.request .action,.request button,.user-panel .action .loader{align-self:flex-end}.user-panel .icon{stroke:rgba(var(--foreground-color),1)}.user-panel .action{width:auto;justify-content:flex-end}.user-panel .action h4{border-radius:2rem;background-color:rgba(var(--text-color),.1);width:auto}.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:"rupee ." "flo flo";gap:.8rem;margin-top:1rem}.display-balance .icon{height:1.4rem;width:1.4rem;padding:.3rem;stroke-width:10;cursor:pointer}.balance{height:10rem;position:relative;display:flex;border-radius:1rem;padding:1rem;justify-content:flex-end}.balance h4{font-size:2rem;font-weight:500;text-shadow:1px .1rem .2rem #00040;flex:1}.balance h5{opacity:.8;margin-bottom:.2rem}.balance .tooltip{border-radius:1rem;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),.1),rgba(var(--text-color),.2));background-size:9rem,cover}.rupee-balance-card .tooltip{box-shadow:0 0 0 .4rem rgba(var(--text-color),.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}.in-process-balance .tooltip{box-shadow: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}.flo-balance-card .tooltip{box-shadow:0 0 0 .4rem #1b0980 inset}.tooltip{position:absolute;left:0;right:0;top:0;bottom:0;cursor:help;display:flex;flex-direction:column;background:rgba(var(--foreground-color),1);z-index:1;transition:clip-path .4s ease-out;clip-path:circle(.8rem at calc(100% - 1.5rem) 1.4rem);scrollbar-width:thin}.tooltip .tt-icon{display:inline-flex;width:3rem;height:3rem;align-items:center;justify-content:center;margin-left:auto;font-weight:600}.tooltip .tooltip-text{padding:1rem;padding-top:0;line-height:1.4;font-size:.9rem;font-weight:400;overflow-y:auto;max-height:calc(100% - 3rem);max-width:30ch}.option h4,.page .container-header .search input,.request h4,.request h5,.user-type{font-weight:500}.tooltip:hover{clip-path:circle(100%)}.options-tab{display:grid;grid-template-columns:repeat(4,1fr);padding:1.5rem;gap:2rem .2rem}.option{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;border-radius:.4rem;width:5rem;cursor:pointer}.option .icon{height:3rem;width:3rem;border-radius:2rem;padding:.8rem;margin-bottom:.6rem}.option h4{font-size:.85rem;opacity:.8}.option:active{transform:scale(.95)}.request-icon{transform:rotate(180deg)}.notification-dot::after{content:"";position:absolute;z-index:1;top:0;right:0;height:.6em;width:.6em;background-color:#E53935;border-radius:.4em;transition:transform .3s}.shrink.notification-dot::after{transform:scale(0)}#deposit .container-header,#withdraw .container-header{background:linear-gradient(rgba(var(--foreground-color),1) 90%,transparent)}sm-tab-header{position:sticky;top:0;display:inline-flex;background-color:var(--dark-shade);z-index:2;padding:.3rem;margin:1rem 0;border-radius:3rem}sm-tab::part(tab){padding:.4rem 1.2rem}sm-panel{width:100%}.request{display:inline-flex;flex-direction:column;padding:1.5em;border-radius:.4em;border:1px solid}.request h5{margin-bottom:.2rem;opacity:.8}.request h3,.request h4{margin-bottom:1rem}.request h4:last-of-type{margin-bottom:0}.request button{width:auto;margin-top:1.5rem;margin-bottom:0}.request .copy-row{margin-bottom:1.5rem}.request .flex{align-items:center;justify-content:flex-end;margin-top:1.5rem}.request .flex button,.request .flex h5{margin:0}.deposited{color:#007732}.decline-request{margin-right:.5rem!important}.withdrawn{color:#d43125}.container{display:grid;gap:1em;width:100%;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr))}.copy-row,.page .container-header{display:grid;grid-template-columns:1fr auto}.page{padding:1rem 1.5rem;padding-bottom:5rem}.page .container-header{grid-template-areas:". ." "search search";gap:1rem;top:0;background:rgba(var(--foreground-color),1);will-change:auto;z-index:2}.page .container-header .search{grid-area:search}.page .container-header .search input{padding:1em;border:none;width:100%;background:var(--dark-shade);font-size:1rem;color:rgba(var(--text-color),1);border-radius:.2em}.page .container-header .search input:focus{outline:0;background:rgba(var(--text-color-light),.2)}.copy-row{align-items:center;gap:.5rem;width:auto}.copy-row h4{margin-bottom:0;font-weight:400}.copy-row .icon{cursor:pointer;padding:.4rem;height:1.8rem;width:1.8rem}.copy-row .copy{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.time{margin-bottom:1.5rem!important;font-weight:500}#report_popup{width:32rem}#profile_page{display:flex;flex-direction:column}#profile_page button{align-self:flex-start}.complaint{display:grid;gap:1.5rem 0}.complaint .complaint-actions{align-items:center;margin:1.5rem 0 0}#helpline_page sm-select,.complaint .processed,.complaint .unprocessed{margin-bottom:1.5rem}.complaint .processed{color:#007732}.complaint .unprocessed{color:#d43125}#settings_page p,#transaction_result h5,.activity .activity-time{color:rgba(var(--text-color),.7)}.complaint button .icon{padding:.2rem;margin-right:.5rem;stroke:var(--accent-color);stroke-width:8}.complaints-container{padding-top:1.5rem;display:grid;align-items:flex-start;gap:1.5rem}.complaint-placeholder{animation:pulse infinite .6s alternate}.complaint-placeholder h4,.complaint-placeholder h5{border-radius:.2rem}.complaint-placeholder h5{background:rgba(var(--text-color),.1);padding:.5rem .6rem}.complaint-placeholder h4{background:rgba(var(--text-color),.2);padding:.8rem}.activity,.activity .icon{background:rgba(var(--text-color),.06)}.complaint-placeholder .demo-btn{padding:.8rem 3rem}@keyframes pulse{from{opacity:.4}to{opacity:1}}#main_loader{text-align:center;place-content:center;height:100vh;width:100vw}#main_loader sm-button{margin-left:0;margin-top:1rem}#main_loader svg{height:2rem;width:2rem;stroke:var(--accent-color);stroke-width:6;fill:none;overflow:visible;stroke-linecap:round;stroke-dashoffset:210;stroke-dasharray:210;justify-self:center;align-self:center;margin-bottom:2rem}.activity,.select{align-items:center}#main_loader h3{width:100%;font-weight:400;word-spacing:.16em}#upi_txId_section .copy-row{margin-bottom:1.5rem}@keyframes popup{0%{stroke-dashoffset:50;transform:translateY(4rem) scale(.2,.6)}40%,41%{transform:translateY(0) scale(.2)}50%{stroke-dashoffset:50;transform:translateY(0) scale(1)}100%{stroke-dashoffset:0}}#add_person_btn:active,.activity:active,.person:active{transform:scale(.95)}#transaction_result{z-index:12}#transaction_result #transaction_heading{margin-bottom:1rem}#transaction_result .copy-row{grid-template-areas:"label label" ". .";margin-top:1rem;gap:0 1rem}#transaction_result .copy-row h4{font-weight:500}#transaction_result h5{grid-area:label}#transaction_result h4,#transaction_result h5,#transaction_result p{text-align:center}#transaction_result>h4{font-size:1.2rem;margin-top:2rem;margin-bottom:.5rem}#transaction_result sm-button{align-self:center;width:auto}#failure_svg,#success_svg{height:5rem;width:5rem;stroke-width:4;align-self:center;stroke:none;stroke-dasharray:50;fill:rgba(var(--text-color),.1);animation:popup 2s forwards cubic-bezier(.175,.885,.32,1.275)}#success_svg polyline{fill:none;stroke:#00C853}#failure_svg line{stroke:#EF5350}.rupee-symbol{height:1rem;width:1rem;fill:rgba(var(--text-color),.5)}#deposit_rupee .copy-row{margin-bottom:1rem}.activity-container{display:grid;gap:1rem}.activity{display:grid;border-radius:.6rem;padding:1rem 1.2rem;gap:0 1rem;grid-template-columns:auto 1fr auto;grid-template-areas:"icon type amount" "icon receiver time";cursor:pointer}.activity .icon{grid-area:icon;height:3rem;width:3rem;padding:.8rem;background-size:cover;border-radius:2rem}#add_person_btn .icon,#transaction_page #transaction_details .icon,.activity .pending,.select{background:rgba(var(--text-color),.06)}.activity .activity-type{grid-area:type;font-weight:400;font-size:.8rem}.activity .activity-receiver{grid-area:receiver;font-weight:500;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.activity .activity-amount{text-align:right;grid-area:amount}.activity .activity-time{text-align:right;grid-area:time;font-weight:500}.activity .pending{display:inline-flex;padding:.3rem .6rem;border-radius:1rem;width:max-content;margin-left:.4rem}.back-arrow{stroke-width:10;margin-right:.5rem;padding:.2rem}.select{max-width:50ch;position:relative;display:flex;width:100%;border-radius:.3rem}.select:first-of-type:not(:last-of-type){border-radius:.3rem .3rem 0 0}.select+.select{margin-top:0;border-radius:0 0 .3rem .3rem;border-top:solid 1px rgba(var(--text-color),.16)}.select label{display:flex;align-items:center;cursor:pointer;flex:1;padding:.8rem 1rem}.select input[type=radio]{display:none}.select input:checked~.radio .outer-ring{stroke:var(--accent-color)}.select input:checked~.radio .inner-disc{transform:none}.select .radio{width:1.2rem;height:1.2rem;fill:none;overflow:visible;margin-right:.6rem}.select .radio .outer-ring{stroke-width:8;stroke:rgba(var(--text-color),.5)}.select .radio .inner-disc{transform-origin:center;fill:var(--accent-color);transform:scale(0);transition:transform .3s cubic-bezier(.175,.885,.32,1.275)}.select .remove{width:3rem;height:2rem;padding:.7rem;cursor:pointer;stroke-width:10}.select .tag{grid-area:tag;opacity:.6;font-weight:500;border:1px solid;padding:.2rem .4rem;border-radius:.3rem;margin-right:.5rem}#add_person_btn,#person_popup h5,.person-name{opacity:.8;font-weight:500}.select h4{font-weight:400}.add-upi{margin-top:.4rem;justify-self:flex-start;width:max-content}#transaction_page header{padding:.5rem 0}#transaction_page header .back-arrow{grid-area:back}#transaction_page h5{font-weight:400;opacity:.8;margin-bottom:.4rem}#transaction_page p:last-of-type{margin:2rem 0 1rem;font-size:.9rem;opacity:.8}#transaction_page #transaction_details{position:relative;margin:1.5rem 0;padding:1.5rem;background-color:rgba(var(--text-color),.06);max-width:50ch;border-radius:.5rem}#transaction_page #transaction_details .icon{height:4rem;width:4rem;padding:1.2rem;border-radius:4rem;margin-bottom:2rem}#add_person_btn .icon,#person_initials,.person-initials{border-radius:2rem;box-shadow:0 .1rem .1rem #00016,0 .1rem .3rem #00040}#transaction_page #transaction_details .flex{margin-bottom:1.5rem;align-items:baseline}#add_person_btn,.person{flex-direction:column;transition:transform .3s;cursor:pointer}#transaction_page #transaction_details strong{font-weight:500}#transaction_page #transaction_details strong:not(:last-of-type){margin-bottom:1rem}#transaction_page .transaction-amount{font-size:2rem;font-weight:400}#transaction_page #transaction_time{right:0;position:absolute;margin:1.5rem}#people_container{display:grid;grid-template-columns:repeat(4,1fr);padding:1.5rem;gap:2rem .2rem}#add_person_btn{display:flex;width:5rem;text-align:center;font-size:.85rem}#add_person_btn .icon{height:3rem;width:3rem;stroke-width:10;padding:1rem;align-self:center;margin-bottom:.6rem}.person{display:flex;align-items:center;width:5rem}#person_initials,.person-initials{display:flex;justify-content:center;height:3rem;width:3rem;font-size:1.2rem!important;font-weight:500;align-items:center;margin-bottom:.6rem!important;text-transform:uppercase}#person_popup h3,.person-name{text-transform:capitalize}.person-name{font-size:.85rem;text-align:center}#person_popup>.flex:first-of-type{margin:1rem 0}#person_popup>.flex:first-of-type .flex{margin-top:.5rem}#person_popup>.flex:first-of-type .flex .icon{height:2.6rem;width:2.6rem;padding:.8rem;cursor:pointer}#person_popup .copy-row{margin-bottom:1.5rem}#person_popup #show_person_name{padding:.5rem 1rem;border-radius:.4rem;max-width:30ch}#person_popup #show_person_name:focus{outline:0;background:rgba(var(--text-color),.1)}#activity_page .empty-state,#request_page .empty-state,#settings_page .empty-state{justify-content:left}#settings_page>h4{margin-top:2rem;margin-bottom:.4rem}#settings_page sm-button{margin-top:.8rem}#settings_page .flex{max-width:60ch}@media only screen and (max-width:640px){#deposit,#home_page{display:grid;gap:1.5rem;grid-template-areas:"." "left";grid-template-columns:minmax(0,1fr)}#deposit .left,#home_page .left{grid-area:left}sm-select{width:100%}.hide-on-mobile{display:none!important}#transaction_page{padding-top:0}#transaction_page header{padding:1.5rem 0}#deposit .user-panel{padding:0}}@media only screen and (min-width:640px){.hide-on-desktop{display:none!important}body{padding:0 2rem;margin-left:4rem}sm-popup{background:rgba(var(--foreground-color),1)}#navbar,#navbar .active{background:rgba(var(--text-color),.06)}#confirmation,sm-popup::part(popup){width:24rem}#navbar{justify-content:flex-start;flex-direction:column;align-items:stretch;left:0;bottom:0;top:0;right:auto;border-top:none;border-radius:0;box-shadow:-.5rem 0 .5rem #00008 inset}#navbar .navbar-item{display:flex;width:auto;padding:.8rem 1.2rem}#navbar .logo h4,#navbar .navbar-item h5{display:none}#navbar .logo .main-logo,#navbar .navbar-item .icon{height:1.2rem;width:1.2rem}#navbar .navbar-item:hover{opacity:1}#navbar .logo{margin:1.5rem 1rem}.page{padding-bottom:2rem}#sign_in_popup{width:24rem}#home_page{padding-top:.5rem}#home_page .left{margin-top:1rem}#people_container,.options-tab{grid-template-columns:repeat(auto-fill,minmax(5rem,1fr));gap:2rem .8rem}.display-balance .balance{height:9rem}#settings_page .copy-row{display:inline-grid}}@media only screen and (min-width:800px){body{margin-left:11rem}.complaint{gap:0 1.5rem;grid-template-columns:1fr 1fr;grid-template-areas:". . " "header header"}.complaint .complaint-actions{grid-area:header}.complaint .left{border-right:1px solid rgba(var(--text-color),.2);padding-right:1.5rem}.complaint .right{display:flex;justify-content:center;flex-direction:column}#navbar .navbar-item h5{font-size:.9rem;margin:0;display:block}#navbar .icon{margin-right:.8rem}#navbar .logo h4{display:block;font-size:1rem}.user-panel{position:sticky;top:1.5rem;padding-top:1.5rem}#deposit,#home_page{display:grid;gap:1.5rem;grid-template-columns:minmax(0,1fr) 22rem}.activity{width:60ch}}@media only screen and (min-width:1920px){body{font-size:24px}}@media only screen and (min-width:2048px){body{font-size:24px}}@media only screen and (max-width:320px){body{font-size:14px}}@media (any-hover:hover){.navbar-item:hover{background:rgba(var(--text-color),.06)}.remove{opacity:.6}.remove:hover{opacity:1}} \ No newline at end of file diff --git a/css/main.scss b/css/main.scss index 285e36a..be12468 100644 --- a/css/main.scss +++ b/css/main.scss @@ -1242,6 +1242,14 @@ sm-panel{ color: rgba(var(--text-color), 0.7); font-weight: 500; } + .pending{ + display: inline-flex; + padding: 0.3rem 0.6rem; + background: rgba(var(--text-color), 0.06); + border-radius: 1rem; + width: max-content; + margin-left: 0.4rem; + } } .back-arrow{ stroke-width: 10; diff --git a/index.html b/index.html index 1063543..eedda63 100644 --- a/index.html +++ b/index.html @@ -48,7 +48,8 @@

Welcome to RanchiMall Pay.
Please enter your FLO private key to continue.

- + + @@ -87,7 +88,8 @@ rupee-symbol - + @@ -119,7 +121,8 @@
Step 1

Copy UPI address shown below.

Step 2
-

Open any UPI app of your preference and send money to copied UPI address. (Do not close this browser)

+

Open any UPI app of your preference and send money to copied UPI address. (Do not close this + browser)

Step 3

Copy the UPI transaction ID shown after transaction was successful.

Step 4
@@ -141,11 +144,12 @@ rupee-symbol - + - + - + + @@ -386,12 +398,15 @@

- + - - - + + +
@@ -479,7 +494,8 @@
requests
- ` return card; }, - contact(floId, name, color){ + contact(floId, name, color) { let card = document.createElement('div') card.classList.add('person') - setAttributes(card, {'data-flo-id': floId, 'data-name': name}) + setAttributes(card, { 'data-flo-id': floId, 'data-name': name }) card.innerHTML = `

${name.charAt(0)}

${name}

@@ -1473,20 +1510,20 @@ daylight() themeSwitcher.checked = false; } - + function daylight() { document.body.setAttribute("data-theme", "light"); } - + function nightlight() { document.body.setAttribute("data-theme", "dark"); } - themeSwitcher.addEventListener('change', function(e){ - if(this.checked){ + themeSwitcher.addEventListener('change', function (e) { + if (this.checked) { nightlight(); localStorage.setItem("theme", "dark"); } - else{ + else { daylight(); localStorage.setItem("theme", "light"); } @@ -1523,39 +1560,39 @@ // hides the popup or modal function hidePopup() { if (popupStack.peek() === undefined) - return; + return; popupStack.peek().popup.hide() } - + document.addEventListener('popupopened', e => { let thisPopup = e.detail.popup, firstInput = thisPopup.querySelector('sm-input') - if(firstInput) + if (firstInput) firstInput.focusIn() - switch(e.detail.popup.id){ - case 'deposit_rupee' : + switch (e.detail.popup.id) { + case 'deposit_rupee': request_rupee_token() - break; + break; case 'person_popup': personPopupOpen = true - break; + break; case 'send_rupee_popup': - if(personPopupOpen){ + if (personPopupOpen) { tokenReceiver.value = person.dataset.floId } - break; + break; case 'request_rupee': - if(personPopupOpen){ + if (personPopupOpen) { requestedAddress.value = person.dataset.floId } - break; - } + break; + } }) let personPopupOpen = false; document.addEventListener('popupclosed', e => { - popupStack = e.detail.popupStack + popupStack = e.detail.popupStack let thisPopup = e.detail.popup, submitButton = thisPopup.querySelector('button[type="submit"]') if (submitButton) @@ -1567,35 +1604,35 @@ } }, 400) zIndex-- - switch(e.detail.popup.id){ - case 'sign_in_popup' : + switch (e.detail.popup.id) { + case 'sign_in_popup': loader.classList.remove('animate-loader') document.querySelector('main').classList.remove('hide-completely') document.querySelector('#navbar').classList.remove('hide-completely') document.querySelector('#main_header').classList.remove('hide-completely') - break; - case 'send_rupee_popup' : + break; + case 'send_rupee_popup': payingRequested = false; tokenReceiver.readOnly = false tokenAmount.readOnly = false - break; - case 'transaction_result' : - setTimeout(() => { - transactionHeading.textContent = '' - transactionMessage.innerHTML = '' - transactionSuccessId.textContent = '' - transactionSuccessId.parentNode.classList.add('hide-completely') - transactionSuccessSection.classList.add('hide-completely') - transactionFailedSection.classList.add('hide-completely') - }, 300); - break; + break; + case 'transaction_result': + setTimeout(() => { + transactionHeading.textContent = '' + transactionMessage.innerHTML = '' + transactionSuccessId.textContent = '' + transactionSuccessId.parentNode.classList.add('hide-completely') + transactionSuccessSection.classList.add('hide-completely') + transactionFailedSection.classList.add('hide-completely') + }, 300); + break; case 'person_popup': personPopupOpen = false - break; + break; case 'prompt': - if (thisPopup.querySelector('sm-input').value == '') - thisPopup.querySelector('.cancel-btn').click() - break + if (thisPopup.querySelector('sm-input').value == '') + thisPopup.querySelector('.cancel-btn').click() + break } }) @@ -1638,7 +1675,7 @@ let hue = Math.random() * 360 let color = { primary: `hsla( ${hue}, ${saturation}%, ${lightness}%, 1)`, - light : `hsla( ${hue}, ${saturation}%, 90%, 0.6)` + light: `hsla( ${hue}, ${saturation}%, 90%, 0.6)` } return color; } @@ -1718,7 +1755,7 @@ const currentYear = new Date().getFullYear() function formatedTime(time, relative) { try { - if(String(time).indexOf('_')) + if (String(time).indexOf('_')) time = String(time).split('_')[0] let timeFrag = new Date(parseInt(time)).toString().split(' '), day = timeFrag[0], @@ -1738,13 +1775,13 @@ finalHours = `${hours}:${minutes}` finalHours = hours >= 12 ? `${finalHours} PM` : `${finalHours} AM` - if(relative){ - if(year == currentYear){ - if(currentTime[1] === month && date === currentTime[2]) + if (relative) { + if (year == currentYear) { + if (currentTime[1] === month && date === currentTime[2]) return `${finalHours}`; else return ` ${date} ${month}`; - + } } else @@ -1765,17 +1802,17 @@ function areInputsValid(parent) { let allInputs = parent.querySelectorAll("sm-input:not([disabled])"), inputsFilled = [...allInputs].every(input => { - if(input.hasAttribute('floId')){ - if(floCrypto.validateAddr(input.value.trim())) return true + if (input.hasAttribute('floId')) { + if (floCrypto.validateAddr(input.value.trim())) return true } - else if(input.hasAttribute('privateKey')){ - if(floCrypto.getPubKeyHex(input.value.trim())) return true + else if (input.hasAttribute('privateKey')) { + if (floCrypto.getPubKeyHex(input.value.trim())) return true } else return input.isValid }) let allRadios = parent.querySelectorAll("input[type='radio']") - if(allRadios.length) + if (allRadios.length) return inputsFilled && parent.querySelector('[checked]') else return inputsFilled @@ -1795,17 +1832,17 @@ currentPaymentRequest, person, personName; - const tokenReceiver = document.getElementById('token_receiver'), - tokenAmount = document.getElementById('token_amount'), - depositRupeeAmount = document.getElementById('token_amount_to_buy') + 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') - 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')) { @@ -1825,7 +1862,7 @@ //Function for handling contact click event peopleContainer.addEventListener('click', e => { - if(e.target.closest('.person')){ + if (e.target.closest('.person')) { person = e.target.closest('.person') showPersonName.textContent = person.dataset.name personInitials.textContent = person.dataset.name.charAt(0) @@ -1833,15 +1870,15 @@ showPersonFloId.textContent = person.dataset.floId showPopup('person_popup') } - if(e.target.closest('#add_person_btn')){ + if (e.target.closest('#add_person_btn')) { showPopup('add_person_popup') - + } }) 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){ + if (!e.target.closest('#show_person_name') && !e.target.closest('#edit_person_name')) { + if (showPersonName.isContentEditable && personName !== showPersonName.textContent) { changePersonName() showPersonName.contentEditable = 'false' } @@ -1900,7 +1937,8 @@ amount: currentRequest.dataset.amount, receiver: currentRequest.dataset.receiver, upiTxId: currentRequest.dataset.upiTxid, - receiverUPI: currentRequest.dataset.receiverUpi + receiverUPI: currentRequest.dataset.receiverUpi, + pending: currentRequest.dataset.pending }) } }) @@ -1972,11 +2010,11 @@ }) document.getElementById('settings_page').addEventListener('change', e => { - if(e.target.closest('.upi-container')) + if (e.target.closest('.upi-container')) setPrimaryUPI(e.target.value) }) document.getElementById('settings_page').addEventListener('click', async e => { - if(e.target.closest('.remove') && await confirmation('Do you want to remove this UPI address?', 'No', 'Remove UPI')){ + if (e.target.closest('.remove') && await confirmation('Do you want to remove this UPI address?', 'No', 'Remove UPI')) { let upi = e.target.closest('.select').querySelector('input').value removeUPI(upi) notify('Removed UPI address') @@ -1985,41 +2023,43 @@ }) - const transactionSuccessSection = document.getElementById('success_section'), - transactionFailedSection = document.getElementById('failure_section'), - transactionSuccessId = document.getElementById('successful_transaction_id'), - transactionHeading = document.getElementById('transaction_heading'), - transactionMessage = document.getElementById('transaction_message') + const transactionSuccessSection = document.getElementById('success_section'), + transactionFailedSection = document.getElementById('failure_section'), + transactionSuccessId = document.getElementById('successful_transaction_id'), + transactionHeading = document.getElementById('transaction_heading'), + transactionMessage = document.getElementById('transaction_message') - function showTransactionStatus(status, heading, message, transactionId){ + function showTransactionStatus(status, heading, message, transactionId) { transactionHeading.textContent = heading transactionMessage.innerHTML = message transactionSuccessId.textContent = transactionId - if(transactionId) + if (transactionId) transactionSuccessId.parentNode.classList.remove('hide-completely') else transactionSuccessId.parentNode.classList.add('hide-completely') - if(status === 'success'){ + if (status === 'success') { transactionSuccessSection.classList.remove('hide-completely') } - else{ + else { transactionFailedSection.classList.remove('hide-completely') } showPopup('transaction_result') } - const transactionPage = document.getElementById('transaction_page'), - transactionType = document.getElementById('transaction_type'), - transactionDetails = document.getElementById('transaction_details') + const transactionPage = document.getElementById('transaction_page'), + transactionType = document.getElementById('transaction_type'), + transactionDetails = document.getElementById('transaction_details'), + cautionMessage = document.getElementById('caution_message'), + showReportButton = document.getElementById('show_report_btn') - function showTransactionDetails(obj){ - let {type, timeStamp, amount, receiver, upiTxId, receiverUPI} = obj; + function showTransactionDetails(obj) { + let { type, timeStamp, amount, receiver, upiTxId, receiverUPI, pending } = obj; let composition = ``, icon, transaction, className - - switch(type){ + + switch (type) { case 'sent': icon = ` @@ -2028,7 +2068,7 @@ ` transaction = 'Sent to' - break; + break; case 'received': icon = ` @@ -2037,7 +2077,7 @@ ` transaction = 'Received from' - break; + break; case 'deposit': icon = ` @@ -2052,8 +2092,10 @@ ` type = 'deposited' + if(pending === 'true') + type = 'deposit' transaction = 'Deposited to' - break; + break; case 'withdraw': icon = ` @@ -2069,8 +2111,10 @@ ` type = 'withdrawn' + if(pending === 'true') + type = 'Withdraw' transaction = 'withdrawn to' - break; + break; case 'payCashier': icon = ` @@ -2081,26 +2125,42 @@ className = 'withdrawn' transaction = 'Paid to' type = 'Paid through cashier' - break; + if(pending === 'true') + type = 'Paying through cashier' + break; } - composition = `${icon} + if(pending === 'true'){ + icon = ` + pending + + + ` + cautionMessage.innerHTML = ` + 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 Report button to report your issue.` + showReportButton.classList.remove('hide') + } + else + showReportButton.classList.add('hide') + + composition = `${icon}
${type}
${amount}
` - if(receiver !== 'undefined') - composition +=` + if (receiver !== 'undefined') + composition += `
${transaction}
${allContacts[receiver] ? allContacts[receiver].name : receiver}` - if(upiTxId !== 'undefined') + if (upiTxId !== 'undefined') composition += `
UPI transaction ID
${upiTxId} ` - if(receiverUPI !== 'undefined') + if (receiverUPI !== 'undefined') composition += `
Sent to UPI ID
${receiverUPI} @@ -2123,19 +2183,19 @@ allTabs.forEach((tab) => { tab.classList.remove('active') }) - if(btn){ - if(typeof btn === 'string') - btn = document.getElementById(btn) + if (btn) { + if (typeof btn === 'string') + btn = document.getElementById(btn) btn.classList.add('active', 'shrink') } if (page === 'request_page') { show_payment_requests() } - if(page === 'transaction_page'){ + if (page === 'transaction_page') { document.getElementById('navbar').classList.add('hide-on-mobile') document.getElementById('main_header').classList.add('hide-on-mobile') } - else{ + else { document.getElementById('navbar').classList.remove('hide-on-mobile') document.getElementById('main_header').classList.remove('hide-on-mobile') } @@ -2145,40 +2205,40 @@ async function addUserUPI() { userUPI = addUpiInput.value compactIDB.addData('userUPIs', userUPI, userUPI) - .then( success => { - if(!defaultUPI) - setPrimaryUPI(userUPI) - notify('UPI address added', 'success') - hidePopup() - renderUserUPI() - }) - .catch (error => { - notify('UPI address already added.', 'error') - throw new Error(error); - }) + .then(success => { + if (!defaultUPI) + setPrimaryUPI(userUPI) + notify('UPI address added', 'success') + hidePopup() + renderUserUPI() + }) + .catch(error => { + notify('UPI address already added.', 'error') + throw new Error(error); + }) } - function setPrimaryUPI(upiAddress){ + function setPrimaryUPI(upiAddress) { localStorage.setItem(`defaultUPI${myFloID}`, upiAddress) renderUserUPI() defaultUPI = upiAddress } - function removeUPI(upi){ + function removeUPI(upi) { compactIDB.removeData('userUPIs', upi) - if(upi === defaultUPI) + if (upi === defaultUPI) localStorage.removeItem(`defaultUPI${myFloID}`) renderUserUPI() } - const UPIContainers = document.querySelectorAll('.upi-container') - async function renderUserUPI(){ + const UPIContainers = document.querySelectorAll('.upi-container') + async function renderUserUPI() { let upis = await compactIDB.readAllData('userUPIs') UPIContainers.forEach(container => { let randomGroup = floCrypto.randString(6, true), radios = `` - for(upi in upis){ - let checked = upi === defaultUPI ? 'checked': '' + for (upi in upis) { + let checked = upi === defaultUPI ? 'checked' : '' radios += `
` - if(upi === defaultUPI) + if (upi === defaultUPI) radios += `
Primary
` - if(container.closest('#settings_page')) + if (container.closest('#settings_page')) radios += ` Remove this UPI ` - radios +=` + radios += `
` } container.innerHTML = radios @@ -2209,30 +2269,30 @@ } const contactFlo = document.getElementById('person_flo_id'), - contactName = document.getElementById('person_name') - async function addPerson(){ - compactIDB.addData('contacts', {name: contactName.value, color: randomHsl()}, contactFlo.value) - .then(success => { - notify('Contact added', 'success') - renderAllContacts() - hidePopup() - }) - .catch(error => { - notify('Contact already added', 'error') - }) + contactName = document.getElementById('person_name') + async function addPerson() { + compactIDB.addData('contacts', { name: contactName.value, color: randomHsl() }, contactFlo.value) + .then(success => { + notify('Contact added', 'success') + renderAllContacts() + hidePopup() + }) + .catch(error => { + notify('Contact already added', 'error') + }) } const peopleContainer = document.getElementById('people_container') let allContacts - async function renderAllContacts(){ + async function renderAllContacts() { allContacts = await compactIDB.readAllData('contacts') peopleContainer.innerHTML = `` - for(contact in allContacts){ + for (contact in allContacts) { frag.append(render.contact(contact, allContacts[contact].name, allContacts[contact].color)) } peopleContainer.append(frag) let addPersonButton = document.createElement('div') - addPersonButton.id="add_person_btn" + addPersonButton.id = "add_person_btn" addPersonButton.innerHTML = ` add Contact @@ -2244,7 +2304,7 @@ peopleContainer.prepend(addPersonButton) } - function setNameEditable(){ + function setNameEditable() { showPersonName.contentEditable = 'true' showPersonName.focus() document.execCommand('selectAll', false, null); @@ -2252,33 +2312,33 @@ personName = showPersonName.textContent } - async function changePersonName(){ + async function changePersonName() { let contact = await compactIDB.readData('contacts', person.dataset.floId) contact.name = showPersonName.textContent.trim() - if(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') - }) - } - - async function deletePerson(){ - if(await confirmation('Do you want to remove this person ?', 'No', 'Remove')){ - compactIDB.removeData('contacts', person.dataset.floId) .then(success => { - notify('Deleted person', 'success') - hidePopup() + notify('Changes saved', 'success') renderAllContacts() + personInitials.textContent = contact.name.charAt(0) }) .catch(error => { notify(error, 'error') }) + } + + async function deletePerson() { + if (await confirmation('Do you want to remove this person ?', 'No', 'Remove')) { + compactIDB.removeData('contacts', person.dataset.floId) + .then(success => { + notify('Deleted person', 'success') + hidePopup() + renderAllContacts() + }) + .catch(error => { + notify(error, 'error') + }) } } @@ -11720,15 +11780,15 @@ } function delay(t, v) { - return new Promise(function(resolve) { - setTimeout(resolve.bind(null, v), t); - }); + return new Promise(function (resolve) { + setTimeout(resolve.bind(null, v), t); + }); } - + function diff_hours(dt2, dt1) { - var diff =(dt2.getTime() - dt1.getTime()) / 1000; + var diff = (dt2.getTime() - dt1.getTime()) / 1000; diff /= (60 * 60); - return Math.abs(Math.round(diff)); + return Math.abs(Math.round(diff)); } function removeDuplicates(sample_object) { @@ -11739,19 +11799,19 @@ -${recvr_id}
through cashier UPI: ${cashier_upi}.

Once the cashier receives your payment, they will transfer it to intended receiver.`); - payCashierActivityContainer.prepend(render.activityCard({type: 'payCashier', amount: amount_to_pay, timeStamp: `${Date.now()}_${myFloID}`, receiver: recvr_id, receiverUPI: req_object.upi_txid})) + payCashierActivityContainer.prepend(render.activityCard({ type: 'payCashier', amount: amount_to_pay, timeStamp: `${Date.now()}_${myFloID}`, receiver: recvr_id, receiverUPI: req_object.upi_txid, pending: true })) } } catch (error) { @@ -12849,12 +12908,12 @@ } } - const sentActivityContainer = document.getElementById('sent_activity_container'), - receivedActivityContainer = document.getElementById('received_activity_container'), - depositActivityContainer = document.getElementById('deposit_activity_container'), - withdrawActivityContainer = document.getElementById('withdraw_activity_container'), - payCashierActivityContainer = document.getElementById('pay_cashier_activity_container'), - cashierMessageContainer = document.getElementById('cashier_message_container') + const sentActivityContainer = document.getElementById('sent_activity_container'), + receivedActivityContainer = document.getElementById('received_activity_container'), + depositActivityContainer = document.getElementById('deposit_activity_container'), + withdrawActivityContainer = document.getElementById('withdraw_activity_container'), + payCashierActivityContainer = document.getElementById('pay_cashier_activity_container'), + cashierMessageContainer = document.getElementById('cashier_message_container') async function show_all_user_activities() { try { @@ -12869,6 +12928,12 @@ const pay_thru_cashier_msg = removeDuplicates(floDapps.getNextGeneralData(token_app.master_configurations .TYPE_PAY_THROUGH_CASHIER, "0").reverse()); + const processed_deposits = removeDuplicates(floDapps.getNextGeneralData(token_app.master_configurations + .TYPE_PROCESSED_DEPOSITS, "0")); + + const processed_deposits_upis = Object.values(processed_deposits).map(m => m.message.user_upi_txid); + console.log(processed_deposits_upis) + console.log(deposit_msg, withdraw_msg, user_msg) for (usr_deposits of deposit_msg) { let { @@ -12876,30 +12941,71 @@ deposit_amount, cashier_upi } = usr_deposits.message; - frag.append(render.activityCard({type: 'deposit', amount: deposit_amount, timeStamp: usr_deposits.vectorClock, upi_txid, receiver: cashier_upi})) + let deposit_request_processed = false; + if (processed_deposits_upis.includes(upi_txid)) deposit_request_processed = true; + console.info(upi_txid, deposit_request_processed) + // SaiRajM: Use deposit_request_processed to display status of deposit + frag.append(render.activityCard({ + type: 'deposit', amount: deposit_amount, timeStamp: usr_deposits.vectorClock, + upi_txid, receiver: cashier_upi, deposit_request_processed, pending: deposit_request_processed + })) } depositActivityContainer.innerHTML = ``; depositActivityContainer.append(frag) + const processed_withdraws = removeDuplicates(floDapps.getNextGeneralData(token_app.master_configurations + .TYPE_PROCESSED_WITHDRAWS, "0")); + + const processed_withdraws_token_txid = Object.values(processed_withdraws).map(m => m.message.token_txid); + for (usr_withdraws of withdraw_msg) { + let withdraw_request_processed = false; + if (processed_withdraws_token_txid.includes(usr_withdraws.message.token_txid)) + withdraw_request_processed = true; + // SaiRajM: status for withdraw + console.log(usr_withdraws.message.token_txid, withdraw_request_processed); + let { token_txid, withdrawer_upi, withdraw_amount } = usr_withdraws.message; - frag.append(render.activityCard({type: 'withdraw', amount: withdraw_amount, timeStamp: usr_withdraws.vectorClock, token_txid, receiver: withdrawer_upi})) + frag.append(render.activityCard({ + type: 'withdraw', amount: withdraw_amount, + timeStamp: usr_withdraws.vectorClock, + token_txid, + receiver: withdrawer_upi, + pending: withdraw_request_processed + })) } withdrawActivityContainer.innerHTML = ``; withdrawActivityContainer.append(frag) + + const processed_pay_thru_cashiers = removeDuplicates(floDapps.getNextGeneralData(token_app.master_configurations + .TYPE_PROCESSED_PAY_THROUGH_CASHIER, "0")); + const processed_cashier_payments = Object.values(processed_pay_thru_cashiers) + .map(m => m.message.upi_txid).filter(f => f !== undefined); + for (cashier_message of pay_thru_cashier_msg) { + let ptc_request_processed = false; let { receiver_flo_id, upi_txid, amount } = cashier_message.message; - frag.append(render.activityCard({type: 'payCashier', amount, timeStamp: cashier_message.vectorClock, receiver: receiver_flo_id, receiverUPI: upi_txid})) + if (processed_cashier_payments.includes(upi_txid)) ptc_request_processed = true; + console.log(upi_txid, ptc_request_processed); + // SaiRajM status for pay through cashier + frag.append(render.activityCard({ + type: 'payCashier', + amount, + timeStamp: cashier_message.vectorClock, + receiver: receiver_flo_id, + receiverUPI: upi_txid, + pending: ptc_request_processed + })) } payCashierActivityContainer.innerHTML = ``; @@ -12916,16 +13022,16 @@ } } - async function show_specific_user_activities(req_type='') { + async function show_specific_user_activities(req_type = '') { try { - if(req_type.length<1) return; + if (req_type.length < 1) return; let request_args = {}; request_args.datatype = req_type; - request_args.options = {receiverID: cashier, senderIDs: [myFloID]}; + request_args.options = { receiverID: cashier, senderIDs: [myFloID] }; - if(req_type==token_app.master_configurations.TYPE_MSGES) - request_args.options = {receiverID: myFloID}; + if (req_type == token_app.master_configurations.TYPE_MSGES) + request_args.options = { receiverID: myFloID }; console.log(request_args); @@ -12934,7 +13040,7 @@ switch (req_type) { case token_app.master_configurations.TYPE_DEPOSITS: const deposit_msg = removeDuplicates(floDapps.getNextGeneralData(token_app.master_configurations.TYPE_DEPOSITS, "0") - .reverse()); + .reverse()); for (usr_deposits of deposit_msg) { let { @@ -12943,14 +13049,14 @@ } = usr_deposits.message; frag.append(render.depositActivity(usr_deposits.vectorClock, upi_txid, deposit_amount)) } - + depositActivityContainer.innerHTML = ``; depositActivityContainer.append(frag) break; - + case token_app.master_configurations.TYPE_WITHDRAWS: const withdraw_msg = removeDuplicates(floDapps.getNextGeneralData(token_app.master_configurations.TYPE_WITHDRAWS, - "0").reverse()); + "0").reverse()); for (usr_withdraws of withdraw_msg) { let { @@ -12967,7 +13073,7 @@ case token_app.master_configurations.TYPE_MSGES: const user_msg = removeDuplicates(floDapps.getNextGeneralData(token_app.master_configurations.TYPE_MSGES, "0") - .reverse()); + .reverse()); for (cashier_message of pay_thru_cashier_msg) { console.log(cashier_message) @@ -12983,10 +13089,10 @@ payCashierActivityContainer.innerHTML = ``; payCashierActivityContainer.append(frag) break; - + case token_app.master_configurations.TYPE_PAY_THROUGH_CASHIER: const pay_thru_cashier_msg = removeDuplicates(floDapps.getNextGeneralData(token_app.master_configurations - .TYPE_PAY_THROUGH_CASHIER, "0").reverse()); + .TYPE_PAY_THROUGH_CASHIER, "0").reverse()); for (msg of user_msg) { frag.append(render.cashierMessage(msg)) @@ -13175,7 +13281,7 @@ } } - async function get_unconfirmed_balance(flo_id='', token_balance) { + async function get_unconfirmed_balance(flo_id = '', token_balance) { try { let api = `https://ranchimallflo.duckdns.org/api/v1.0/getFloAddressTransactions?floAddress=${flo_id}`; let tokens_transfers_tx_list = await ajaxGet(api); @@ -13225,14 +13331,14 @@ try { let data = await ajaxGet(`https://ranchimallflo.duckdns.org/api/v1.0/getTokenTransactions?token=rupee&senderFloAddress=${myFloID}`) let transactions = data.transactions - let sortedTransactions = Object.values(transactions).sort((a,b) => b.transactionDetails.time - a.transactionDetails.time) - for(transaction of sortedTransactions){ - let {tokenAmount, flodata} = transaction.parsedFloData, + let sortedTransactions = Object.values(transactions).sort((a, b) => b.transactionDetails.time - a.transactionDetails.time) + for (transaction of sortedTransactions) { + let { tokenAmount, flodata } = transaction.parsedFloData, receiver = flodata.match(/\b\w{34,34}\b/), timeStamp = transaction.transactionDetails.time * 1000 - if(receiver === '' || typeof receiver === undefined || receiver === null) continue; - frag.append(render.activityCard({type: 'sent', amount: tokenAmount, receiver, timeStamp})) + if (receiver === '' || typeof receiver === undefined || receiver === null || token_app.master_configurations.cashiers[receiver]) continue; + frag.append(render.activityCard({ type: 'sent', amount: tokenAmount, receiver, timeStamp})) } sentActivityContainer.innerHTML = '' sentActivityContainer.append(frag) @@ -13243,19 +13349,20 @@ async function getReceivedRupeeList() { try { - let data = await ajaxGet(`https://ranchimallflo.duckdns.org/api/v1.0/getTokenTransactions?token=rupee&destFloAddress=${myFloID}`) - let transactions = data.transactions - let sortedTransactions = Object.values(transactions).sort((a,b) => b.transactionDetails.time - a.transactionDetails.time) - for(transaction of sortedTransactions){ - let {tokenAmount, flodata} = transaction.parsedFloData, - receiver = transaction.transactionDetails.vin[0].addr, - timeStamp = transaction.transactionDetails.time * 1000 - console.log(transaction) - if(receiver === '' || typeof receiver === undefined || receiver === null) continue; - frag.append(render.activityCard({type: 'received', amount: tokenAmount, receiver, timeStamp})) - } - receivedActivityContainer.innerHTML = '' - receivedActivityContainer.append(frag) + ajaxGet(`https://ranchimallflo.duckdns.org/api/v1.0/getTokenTransactions?token=rupee&destFloAddress=${myFloID}`).then(data => { + let transactions = data.transactions + let sortedTransactions = Object.values(transactions).sort((a, b) => b.transactionDetails.time - a.transactionDetails.time) + for (transaction of sortedTransactions) { + let { tokenAmount, flodata } = transaction.parsedFloData, + sender = transaction.transactionDetails.vin[0].addr, + timeStamp = transaction.transactionDetails.time * 1000 + + if (sender === '' || typeof sender === undefined || sender === null || token_app.master_configurations.cashiers[sender]) continue; + frag.append(render.activityCard({ type: 'received', amount: tokenAmount, receiver: sender, timeStamp })) + } + receivedActivityContainer.innerHTML = '' + receivedActivityContainer.append(frag) + }) } catch (error) { throw new Error(error); }