From 146d1dbba69118ca1b45942a186ed299fc5fd2e4 Mon Sep 17 00:00:00 2001 From: sairaj mote Date: Sat, 12 Sep 2020 17:47:44 +0530 Subject: [PATCH 01/42] 0.0.27 --- css/main.css | 78 +++-- css/main.min.css | 2 +- css/main.scss | 103 +++---- index.html | 719 +++++++++++++++++++++++++---------------------- 4 files changed, 460 insertions(+), 442 deletions(-) diff --git a/css/main.css b/css/main.css index 468bc5e..e5f56e9 100644 --- a/css/main.css +++ b/css/main.css @@ -178,7 +178,7 @@ input:invalid { } .light-text { - color: rgba(var(--text-color-light), 1); + opacity: 0.7; } .hide { @@ -627,15 +627,22 @@ form { #home_page { padding: 1rem 0 4rem 0; } -#home_page .left h4 { +#home_page .left { + padding: 1.5rem 0; + align-self: flex-start; + width: auto; + border-radius: 0.5rem; +} +#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; +} #home_page sm-carousel::part(carousel) { padding: 0 1.5rem; } -#home_page p { - margin-bottom: 3rem; -} #home_page .user-panel { margin: 0 1.5rem; } @@ -657,12 +664,17 @@ form { padding-bottom: 1rem; border-bottom: solid 1px rgba(var(--foreground-color), 0.3); } +.user-panel sm-button { + --text-color: rgba(var(--foreground-color), 1); + background: rgba(var(--foreground-color), 0.2); + border-radius: 2rem; +} .user-panel .grid { gap: 1.5rem; + grid-template-columns: 1fr 1fr; margin-top: 1rem; } .user-panel .grid h5 { - font-size: 1rem; font-weight: 500; } .user-panel .grid h4 { @@ -679,12 +691,6 @@ form { .balance { display: grid; gap: 0 1rem; - grid-template-columns: 1fr auto; - grid-template-areas: ". balance" ". balance"; - align-items: center; -} -.balance h4 { - grid-area: balance; } .user-type { @@ -693,6 +699,7 @@ form { .options-tab { margin: 1rem 0; + border-radius: 0.5reem; } .options-tab .option { position: relative; @@ -713,9 +720,7 @@ form { height: 3rem; width: 3rem; padding: 0.8rem; - border-radius: 4rem; - margin-bottom: 0.5rem; - stroke: rgba(var(--foreground-color), 1); + stroke: var(--accent-color); } .options-tab .option h4 { font-size: 0.9rem; @@ -724,20 +729,9 @@ form { .options-tab .option:active { transform: scale(0.95); } -.options-tab .option:nth-of-type(1) .icon { - background: linear-gradient(135deg, #D32F2F 50%, #B71C1C 50%); -} -.options-tab .option:nth-of-type(2) .icon { - background: linear-gradient(135deg, #7B1FA2 50%, #4A148C 50%); -} -.options-tab .option:nth-of-type(3) .icon { - background: linear-gradient(135deg, #1976D2 50%, #0D47A1 50%); -} -.options-tab .option:nth-of-type(4) .icon { - background: linear-gradient(135deg, #388E3C 50%, #1B5E20 50%); -} -.options-tab .option:nth-of-type(5) .icon { - background: linear-gradient(135deg, #F57C00 50%, #E65100 50%); + +.request-icon { + transform: rotate(180deg); } .notification-dot::after { @@ -1069,26 +1063,25 @@ sm-panel { border-right: solid 1px rgba(var(--text-color), 0.2); } #navbar .navbar-item { + border-radius: 0.5rem; width: auto; - padding: 1.4em 0; - margin: 0.6em; + padding: 0.5rem 0; + margin: 0.5rem 0.6rem; } #navbar .navbar-item .icon { height: 1.4rem; width: 1.4rem; } - #navbar .navbar-item:hover .icon { - stroke: rgba(var(--text-color), 1); + #navbar .navbar-item:hover { + background: rgba(var(--foreground-color), 0.2); } - #navbar .navbar-item:hover h5 { - color: rgba(var(--text-color), 1); - } - #navbar .navbar-item.active:hover .icon { - stroke: var(--accent-color); - } - #navbar .navbar-item.active:hover h5 { + #navbar .navbar-item.active { + background: rgba(var(--foreground-color), 1); color: var(--accent-color); } + #navbar .navbar-item.active .icon { + stroke: var(--accent-color); + } .page { padding-bottom: 2em; @@ -1175,4 +1168,9 @@ sm-panel { --background-color: #e8e8e8; --dark-shade: #dadada; } +} +@media (any-hover: hover) { + .option:hover { + background: rgba(var(--text-color), 0.1); + } } \ No newline at end of file diff --git a/css/main.min.css b/css/main.min.css index 30a4df0..98418d7 100644 --- a/css/main.min.css +++ b/css/main.min.css @@ -1 +1 @@ -.action,button{position:relative}.input,button,textarea{background:rgba(var(--text-color),.1)}#navbar .navbar-item,.input .placeholder,.options-tab .option,.request h5,button,sm-tab::part(tab){text-transform:capitalize}*{box-sizing:border-box;padding:0;margin:0;font-family:Roboto,sans-serif}button,h1,h2,h3,h4,h5{font-weight:600;font-family:Poppins,sans-serif}:root{scroll-behavior:smooth}body{--accent-color:#2237CD;--text-color:17,17,17;--text-color-light:85,85,85;--foreground-color:255,255,255;--background-color:#e8e8e8;--dark-shade:#dadada;background:var(--foreground-color);color:rgba(var(--text-color),1);font-size:16px}a{font-weight:600;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)}button{display:inline-flex;align-items:center;justify-content:center;padding:.6rem 1.2rem;cursor:pointer;border-radius:.3rem;color:var(--accent-color);transition:transform .3s;border:none;-webkit-tap-highlight-color:transparent}button:focus{outline:solid thin}button:disabled{cursor:default;background:rgba(var(--text-color),.5)}.action,.action[disabled] .primary-btn{background:0 0}button:disabled~.loader{opacity:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.request .flex,.request button,.top-margin{margin-top:1.5rem}input[type=text]::-ms-clear{display:none;width:0;height:0}input[type=text]::-ms-reveal{display:none;width:0;height:0}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{display:none}input[type=number]{-moz-appearance:textfield}input:invalid{outline:0;box-shadow:none}::-moz-focus-inner{border:none}.bottom-padding{padding-bottom:1.5rem}.top-padding{padding-top:1em}.bottom-margin{margin-bottom:1.5rem}.flex{display:flex}.grid{display:grid}.grid-2{grid-template-columns:auto auto;gap:1em}.align-center{align-items:center}.direction-column{flex-direction:column}.space-between{justify-content:space-between}.label{margin-bottom:.4rem}.light-text{color:rgba(var(--text-color-light),1)}.hide{opacity:0;pointer-events:none}.hide-completely{display:none!important}.action,.request{display:inline-flex}.breakable{word-break:break-all}.separator{padding:.1em}.no-transformations{transform:none!important}.loader{fill:none;stroke-width:10;stroke:var(--accent-color);height:2rem;width:2rem;overflow:visible;stroke-dashoffset:230;stroke-dasharray:230;padding:2px;justify-self:center}#logo,.action{align-items:center}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes load{50%{stroke-dashoffset:0}100%{stroke-dashoffset:-210}}.action{justify-content:center;padding:0}.action h4{padding:.5rem .8rem;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}.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:inline-grid;grid-template-columns:auto 1fr;gap:.6rem .4rem;margin-right:1rem}#logo h4{letter-spacing:.06rem;word-spacing:.12rem}#logo h5{font-weight:400}#logo #main_logo{height:1.6rem;width:1.6rem;fill:rgba(var(--text-color),1);stroke:none}textarea{width:100%;max-width:100%;border:none;border-radius:.2rem;resize:none;font-size:1rem;line-height:1.6;padding:.8rem}.input{display:flex;width:100%;align-items:center;position:relative;padding:.8em;margin-bottom:1.5em;border-radius:.2rem;border:.1em solid transparent;cursor:text}.input:last-of-type{margin-bottom:0}.input:focus-within{border:.1em solid var(--accent-color)}.input .placeholder{opacity:.6;font-weight:500;font-size:1em;position:absolute;transition:transform .3s ease;transform-origin:left;pointer-events:none;will-change:contents}.input input{flex:1;font-size:1rem;border:none;background:0 0;outline:0;color:rgba(var(--text-color),1)}.animate-label input{transform:translateY(.5em)}.animate-label .placeholder{transform:translateY(-60%) scale(.7);opacity:1;color:var(--accent-color)}.btn,.primary-btn{color:rgba(var(--foreground-color),1)}: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);padding:.4em 1em}.back-arrow{stroke:rgba(var(--text-color),1);stroke-width:6;fill:none;height:2rem;padding:.5rem .5rem .5rem 0;cursor:pointer}.card{border-radius:.6rem;padding:1.5em;background:rgba(var(--foreground-color),1)}.solid-background{background:rgba(var(--foreground-color),1)!important}form{width:100%}.popup-container{display:grid;position:fixed;top:0;bottom:0;left:0;right:0;place-items:center;background:rgba(0,0,0,.4);z-index:10;transition:opacity .3s ease}.popup-container .popup{flex-direction:column;align-self:flex-end;align-items:flex-start;flex-wrap:wrap;width:100%;border-radius:.5rem .5rem 0 0;padding:1.5rem;position:relative;display:flex;background:rgba(var(--foreground-color),1);transform:translateY(100%);transition:transform .3s;box-shadow:0 2rem 2rem rgba(0,0,0,.24);overflow-y:auto}.popup-container .popup h5{margin:.5rem 0}.popup-container .popup button:first-of-type{margin-left:auto}.popup-container .popup .container-header{display:flex;align-items:center;padding:0;margin-bottom:1rem}.popup-container .popup .container-header h4{flex:1}.popup-container .popup .container-header button{width:auto}.popup-container .popup .container-header .icon{cursor:pointer;padding-right:.4rem;margin-right:.3rem;stroke-width:8}.popup-container .popup p{margin-bottom:1.5rem!important}#confirmation,#prompt{flex-direction:column}#confirmation p,#prompt p{margin:1rem}#confirmation h4,#prompt h4{font-weight:500;margin-bottom:1.5rem}#confirmation .input,#prompt .input{margin-bottom:1rem}#confirmation .btns,#prompt .btns{display:flex;justify-content:right;width:100%}#confirmation .btns button,#prompt .btns button{background:0 0}#confirmation .btns button:first-of-type,#prompt .btns button:first-of-type{margin-right:.6em}.refresh{margin-top:.6em;margin-bottom:1em}#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}#sign_in_popup .input{background:rgba(var(--text-color),.1)}.primary-btn{background:var(--accent-color);justify-content:center}#main_header{align-items:center;padding:1rem;justify-content:space-between}.display-balance{gap:1rem;grid-auto-flow:row}.display-balance .balance{width:100%}.display-balance .icon{height:1.4rem;width:1.4rem;padding:.3rem;stroke-width:10;cursor:pointer}.icon{height:1.2rem;width:1.2rem;fill:none;stroke:rgba(var(--text-color),.8);stroke-width:6;overflow:visible;stroke-linecap:round;stroke-linejoin:round}#navbar .active .icon,.complaint button .icon{stroke:var(--accent-color)}#navbar{display:flex;flex-direction:row;align-items:center;justify-content:space-evenly;position:fixed;left:0;right:0;bottom:0;top:auto;border-top:solid 1px rgba(var(--text-color),.2);border-right:none;z-index:3;background:rgba(var(--foreground-color),1)}#navbar .navbar-item{position:relative;text-align:center;cursor:pointer;padding:.3em;margin:.3em;border-radius:.4em;color:rgba(var(--text-color),.8);font-size:.8em;width:100%;font-weight:600}#navbar .navbar-item h5{margin-top:.4em}#navbar .active{color:var(--accent-color)}.user-panel,.user-panel .grid P{color:rgba(var(--foreground-color),1)}.banking{stroke-width:4}.options-tab .option .icon,.user-panel .icon{stroke:rgba(var(--foreground-color),1)}#home_page{padding:1rem 0 4rem}#home_page .left h4,#home_page sm-carousel::part(carousel){padding:0 1.5rem}#home_page p{margin-bottom:3rem}#home_page .user-panel{margin:0 1.5rem}.user-panel{position:relative;padding:1.5rem;border-radius:.5rem;background:linear-gradient(135deg,var(--accent-color),#2F2B76);box-shadow:0 .1rem .1rem #00010,0 1rem 1rem -1rem #00010;align-self:flex-start}.request .action,.request button{align-self:flex-end}.user-panel .copy-row{margin-bottom:1rem;padding-bottom:1rem;border-bottom:solid 1px rgba(var(--foreground-color),.3)}.user-panel .grid{gap:1.5rem;margin-top:1rem}.user-panel .grid h5{font-size:1rem;font-weight:500}.user-panel .grid h4{font-size:1.2rem}.user-panel .grid P{font-size:.8rem;opacity:.9;margin-bottom:0!important;max-width:30ch}.balance{display:grid;gap:0 1rem;grid-template-columns:1fr auto;grid-template-areas:". balance" ". balance";align-items:center}.balance h4{grid-area:balance}.user-type{font-weight:500}.options-tab{margin:1rem 0}.options-tab .option{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;border-radius:.4rem;margin-right:1rem;margin-bottom:1rem;width:5rem;min-width:5rem;transition:transform .3s;cursor:pointer}.options-tab .option .icon{height:3rem;width:3rem;padding:.8rem;border-radius:4rem;margin-bottom:.5rem}.options-tab .option h4{font-size:.9rem;font-weight:500}.options-tab .option:active{transform:scale(.95)}.options-tab .option:nth-of-type(1) .icon{background:linear-gradient(135deg,#D32F2F 50%,#B71C1C 50%)}.options-tab .option:nth-of-type(2) .icon{background:linear-gradient(135deg,#7B1FA2 50%,#4A148C 50%)}.options-tab .option:nth-of-type(3) .icon{background:linear-gradient(135deg,#1976D2 50%,#0D47A1 50%)}.options-tab .option:nth-of-type(4) .icon{background:linear-gradient(135deg,#388E3C 50%,#1B5E20 50%)}.options-tab .option:nth-of-type(5) .icon{background:linear-gradient(135deg,#F57C00 50%,#E65100 50%)}.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)}.page .container-header,sm-tab-header{top:0;background:rgba(var(--foreground-color),1);z-index:2}sm-tab-header{position:sticky;margin-bottom:1rem;border-bottom:solid 1px rgba(var(--text-color),.2)}sm-tab::part(tab){padding:.8rem .4rem}sm-panel{width:100%}.request{flex-direction:column;padding:1.5em;border-radius:.4em;border:1px solid}.request h5{margin-bottom:.2rem}.request h3,.request h4{margin-bottom:1.5rem}.copy-row h4,.request button{margin-bottom:0}.request h4:last-of-type{margin-bottom:0}.request .amount{font-size:1.4em}.request button{width:auto}.request .copy-row{margin-bottom:1.5rem}.request .flex{align-items:center;justify-content:flex-end}.request .flex button,.request .flex h5{margin:0}.deposited{color:#007732}.deposited::before{content:"+ "}.decline-request{margin-right:.5rem!important}.withdrawn{color:#d43125}.withdrawn::before{content:"- "}.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:4rem}.page .container-header{grid-template-areas:". ." "search search";gap:1rem;will-change:auto}.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;font-weight:500;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}.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-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{box-shadow:none;background:0 0;text-align:center;align-items:center;flex-direction:column}#main_loader sm-button{margin-left:0;margin-top:1.5rem}#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}#main_loader h3{width:100%;font-weight:400;word-spacing:.16em}#upi_txId_section .copy-row{margin-bottom:1.5rem}#send_amount_to_deposit{margin-bottom:0!important}@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);align-items:flex-start}#deposit .left,#home_page .left{grid-area:left}sm-select{width:100%}}@media only screen and (min-width:640px){body{padding:0 2rem;margin-left:6rem}.popup-container .popup{transform:translateY(0) scale(.96);width:24rem;align-self:center;border-radius:.4rem;height:auto}#confirmation{width:24rem}#navbar{justify-content:center;flex-direction:column;align-items:stretch;left:0;bottom:0;top:0;right:auto;width:6rem;border-top:none;border-right:solid 1px rgba(var(--text-color),.2)}#navbar .navbar-item{width:auto;padding:1.4em 0;margin:.6em}#navbar .navbar-item .icon{height:1.4rem;width:1.4rem}#navbar .navbar-item:hover .icon{stroke:rgba(var(--text-color),1)}#navbar .navbar-item:hover h5{color:rgba(var(--text-color),1)}#navbar .navbar-item.active:hover .icon{stroke:var(--accent-color)}#navbar .navbar-item.active:hover h5{color:var(--accent-color)}.page{padding-bottom:2em}#sign_in_popup{width:24rem}#profile_page .copy-row{display:inline-flex}#deposit,#home_page{display:grid;gap:1.5rem;grid-template-columns:minmax(0,1fr) 24rem}}@media only screen and (min-width:800px){.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}.user-panel{position:sticky;top:1.5rem}}@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 (prefers-color-scheme:dark){:root{--text-color:238,238,238;--text-color-light:170,170,170;--foreground-color:26,26,26;--background-color:#111;--dark-shade:#1a1a1a}}@media (prefers-color-scheme:light){:root{--text-color:17,17,17;--text-color-light:85,85,85;--foreground-color:255,255,255;--background-color:#e8e8e8;--dark-shade:#dadada}}@media (prefers-color-scheme:no-preference){:root{--text-color:17,17,17;--text-color-light:85,85,85;--foreground-color:255,255,255;--background-color:#e8e8e8;--dark-shade:#dadada}} \ No newline at end of file +.input input,body{color:rgba(var(--text-color),1)}#navbar .navbar-item,.input .placeholder,.options-tab .option,.request h5,button,sm-tab::part(tab){text-transform:capitalize}.input,button,textarea{background:rgba(var(--text-color),.1)}.action,.input,button{position:relative}*{box-sizing:border-box;padding:0;margin:0;font-family:Roboto,sans-serif}button,h1,h2,h3,h4,h5{font-weight:600;font-family:Poppins,sans-serif}:root{scroll-behavior:smooth}body{--accent-color:#2237CD;--text-color:17,17,17;--text-color-light:85,85,85;--foreground-color:255,255,255;--background-color:#e8e8e8;--dark-shade:#dadada;background:var(--foreground-color);font-size:16px}a{font-weight:600;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)}button{display:inline-flex;align-items:center;justify-content:center;padding:.6rem 1.2rem;cursor:pointer;border-radius:.3rem;color:var(--accent-color);transition:transform .3s;border:none;-webkit-tap-highlight-color:transparent}button:focus{outline:solid thin}button:disabled{cursor:default;background:rgba(var(--text-color),.5)}.action,.action[disabled] .primary-btn{background:0 0}button:disabled~.loader{opacity:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=text]::-ms-clear{display:none;width:0;height:0}input[type=text]::-ms-reveal{display:none;width:0;height:0}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{display:none}input[type=number]{-moz-appearance:textfield}input:invalid{outline:0;box-shadow:none}::-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}.direction-column{flex-direction:column}.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}.loader{fill:none;stroke-width:10;stroke:var(--accent-color);height:2rem;width:2rem;overflow:visible;stroke-dashoffset:230;stroke-dasharray:230;padding:2px;justify-self:center}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes load{50%{stroke-dashoffset:0}100%{stroke-dashoffset:-210}}.action{display:inline-flex;align-items:center;justify-content:center;padding:0}#logo,.input{align-items:center}.action h4{padding:.5rem .8rem;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}.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:inline-grid;grid-template-columns:auto 1fr;gap:.6rem .4rem;margin-right:1rem}#logo h4{letter-spacing:.06rem;word-spacing:.12rem}#logo h5{font-weight:400}#logo #main_logo{height:1.6rem;width:1.6rem;fill:rgba(var(--text-color),1);stroke:none}textarea{width:100%;max-width:100%;border:none;border-radius:.2rem;resize:none;font-size:1rem;line-height:1.6;padding:.8rem}.input{display:flex;width:100%;padding:.8em;margin-bottom:1.5em;border-radius:.2rem;border:.1em solid transparent;cursor:text}.input:last-of-type{margin-bottom:0}.input:focus-within{border:.1em solid var(--accent-color)}.input .placeholder{opacity:.6;font-weight:500;font-size:1em;position:absolute;transition:transform .3s ease;transform-origin:left;pointer-events:none;will-change:contents}.input input{flex:1;font-size:1rem;border:none;background:0 0;outline:0}.animate-label input{transform:translateY(.5em)}.animate-label .placeholder{transform:translateY(-60%) scale(.7);opacity:1;color:var(--accent-color)}.btn,.primary-btn{color:rgba(var(--foreground-color),1)}: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);padding:.4em 1em}.back-arrow{stroke:rgba(var(--text-color),1);stroke-width:6;fill:none;height:2rem;padding:.5rem .5rem .5rem 0;cursor:pointer}.card{border-radius:.6rem;padding:1.5em;background:rgba(var(--foreground-color),1)}.solid-background{background:rgba(var(--foreground-color),1)!important}form{width:100%}.popup-container{display:grid;position:fixed;top:0;bottom:0;left:0;right:0;place-items:center;background:rgba(0,0,0,.4);z-index:10;transition:opacity .3s ease}.popup-container .popup{flex-direction:column;align-self:flex-end;align-items:flex-start;flex-wrap:wrap;width:100%;border-radius:.5rem .5rem 0 0;padding:1.5rem;position:relative;display:flex;background:rgba(var(--foreground-color),1);transform:translateY(100%);transition:transform .3s;box-shadow:0 2rem 2rem rgba(0,0,0,.24);overflow-y:auto}.popup-container .popup h5{margin:.5rem 0}.popup-container .popup button:first-of-type{margin-left:auto}.popup-container .popup .container-header{display:flex;align-items:center;padding:0;margin-bottom:1rem}.popup-container .popup .container-header h4{flex:1}#confirmation,#prompt,.options-tab .option{flex-direction:column}.popup-container .popup .container-header button{width:auto}.popup-container .popup .container-header .icon{cursor:pointer;padding-right:.4rem;margin-right:.3rem;stroke-width:8}.popup-container .popup p{margin-bottom:1.5rem!important}#confirmation p,#prompt p{margin:1rem}#confirmation h4,#prompt h4{font-weight:500;margin-bottom:1.5rem}#confirmation .input,#prompt .input{margin-bottom:1rem}#confirmation .btns,#prompt .btns{display:flex;justify-content:right;width:100%}#confirmation .btns button,#prompt .btns button{background:0 0}#confirmation .btns button:first-of-type,#prompt .btns button:first-of-type{margin-right:.6em}.refresh{margin-top:.6em;margin-bottom:1em}#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}#sign_in_popup .input{background:rgba(var(--text-color),.1)}.primary-btn{background:var(--accent-color);justify-content:center}#main_header{align-items:center;padding:1rem;justify-content:space-between}.display-balance{gap:1rem;grid-auto-flow:row}.display-balance .balance{width:100%}.display-balance .icon{height:1.4rem;width:1.4rem;padding:.3rem;stroke-width:10;cursor:pointer}.icon{height:1.2rem;width:1.2rem;fill:none;stroke:rgba(var(--text-color),.8);stroke-width:6;overflow:visible;stroke-linecap:round;stroke-linejoin:round}#navbar{display:flex;flex-direction:row;align-items:center;justify-content:space-evenly;position:fixed;left:0;right:0;bottom:0;top:auto;border-top:solid 1px rgba(var(--text-color),.2);border-right:none;z-index:3;background:rgba(var(--foreground-color),1)}#navbar .navbar-item{position:relative;text-align:center;cursor:pointer;padding:.3em;margin:.3em;border-radius:.4em;color:rgba(var(--text-color),.8);font-size:.8em;width:100%;font-weight:600}#home_page .left,.user-panel{border-radius:.5rem;align-self:flex-start}#navbar .navbar-item h5{margin-top:.4em}#navbar .active{color:var(--accent-color)}.user-panel,.user-panel .grid P{color:rgba(var(--foreground-color),1)}#navbar .active .icon{stroke:var(--accent-color)}.banking{stroke-width:4}#home_page{padding:1rem 0 4rem}#home_page .left{padding:1.5rem 0;width:auto}#home_page .left h3,#home_page .left h4,#home_page .left p,#home_page sm-carousel::part(carousel){padding:0 1.5rem}#home_page .left h3{font-size:2rem;margin-bottom:1rem}#home_page .user-panel{margin:0 1.5rem}.user-panel{position:relative;padding:1.5rem;background:linear-gradient(135deg,var(--accent-color),#2F2B76);box-shadow:0 .1rem .1rem #00010,0 1rem 1rem -1rem #00010}.request .action,.request button{align-self:flex-end}.user-panel .icon{stroke:rgba(var(--foreground-color),1)}.user-panel .copy-row{margin-bottom:1rem;padding-bottom:1rem;border-bottom:solid 1px rgba(var(--foreground-color),.3)}.user-panel sm-button{--text-color:rgba(var(--foreground-color), 1);background:rgba(var(--foreground-color),.2);border-radius:2rem}.user-panel .grid{gap:1.5rem;grid-template-columns:1fr 1fr;margin-top:1rem}.user-panel .grid h5{font-weight:500}.user-panel .grid h4{font-size:1.2rem}.user-panel .grid P{font-size:.8rem;opacity:.9;margin-bottom:0!important;max-width:30ch}.balance{display:grid;gap:0 1rem}.user-type{font-weight:500}.options-tab{margin:1rem 0;border-radius:.5reem}.options-tab .option{position:relative;display:flex;align-items:center;text-align:center;border-radius:.4rem;margin-right:1rem;margin-bottom:1rem;width:5rem;min-width:5rem;transition:transform .3s;cursor:pointer}.options-tab .option .icon{height:3rem;width:3rem;padding:.8rem;stroke:var(--accent-color)}.options-tab .option h4{font-size:.9rem;font-weight:500}.options-tab .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)}.page .container-header,sm-tab-header{top:0;background:rgba(var(--foreground-color),1);z-index:2}sm-tab-header{position:sticky;margin-bottom:1rem;border-bottom:solid 1px rgba(var(--text-color),.2)}sm-tab::part(tab){padding:.8rem .4rem}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}.request h3,.request h4{margin-bottom:1.5rem}.copy-row h4,.request button{margin-bottom:0}.request h4:last-of-type{margin-bottom:0}.request .amount{font-size:1.4em}.request button{width:auto;margin-top:1.5rem}.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}.deposited::before{content:"+ "}.decline-request{margin-right:.5rem!important}.withdrawn{color:#d43125}.withdrawn::before{content:"- "}.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:4rem}.page .container-header{grid-template-areas:". ." "search search";gap:1rem;will-change:auto}.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;font-weight:500;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}.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{box-shadow:none;background:0 0;text-align:center;align-items:center;flex-direction:column}#main_loader sm-button{margin-left:0;margin-top:1.5rem}#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}#main_loader h3{width:100%;font-weight:400;word-spacing:.16em}#upi_txId_section .copy-row{margin-bottom:1.5rem}#send_amount_to_deposit{margin-bottom:0!important}@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);align-items:flex-start}#deposit .left,#home_page .left{grid-area:left}sm-select{width:100%}}@media only screen and (min-width:640px){body{padding:0 2rem;margin-left:6rem}.popup-container .popup{transform:translateY(0) scale(.96);width:24rem;align-self:center;border-radius:.4rem;height:auto}#confirmation{width:24rem}#navbar{justify-content:center;flex-direction:column;align-items:stretch;left:0;bottom:0;top:0;right:auto;width:6rem;border-top:none;border-right:solid 1px rgba(var(--text-color),.2)}#navbar .navbar-item{border-radius:.5rem;width:auto;padding:.5rem 0;margin:.5rem .6rem}#navbar .navbar-item .icon{height:1.4rem;width:1.4rem}#navbar .navbar-item:hover{background:rgba(var(--foreground-color),.2)}#navbar .navbar-item.active{background:rgba(var(--foreground-color),1);color:var(--accent-color)}#navbar .navbar-item.active .icon{stroke:var(--accent-color)}.page{padding-bottom:2em}#sign_in_popup{width:24rem}#profile_page .copy-row{display:inline-flex}#deposit,#home_page{display:grid;gap:1.5rem;grid-template-columns:minmax(0,1fr) 24rem}}@media only screen and (min-width:800px){.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}.user-panel{position:sticky;top:1.5rem}}@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 (prefers-color-scheme:dark){:root{--text-color:238,238,238;--text-color-light:170,170,170;--foreground-color:26,26,26;--background-color:#111;--dark-shade:#1a1a1a}}@media (prefers-color-scheme:light){:root{--text-color:17,17,17;--text-color-light:85,85,85;--foreground-color:255,255,255;--background-color:#e8e8e8;--dark-shade:#dadada}}@media (prefers-color-scheme:no-preference){:root{--text-color:17,17,17;--text-color-light:85,85,85;--foreground-color:255,255,255;--background-color:#e8e8e8;--dark-shade:#dadada}}@media (any-hover:hover){.option:hover{background:rgba(var(--text-color),.1)}} \ No newline at end of file diff --git a/css/main.scss b/css/main.scss index ebe55cd..3cefefc 100644 --- a/css/main.scss +++ b/css/main.scss @@ -181,7 +181,7 @@ input:invalid { } .light-text { - color: rgba(var(--text-color-light), 1); + opacity: 0.7; } .hide { @@ -671,20 +671,23 @@ form { #home_page { padding: 1rem 0 4rem 0; - .left { - h4 { + padding: 1.5rem 0; + align-self: flex-start; + width: auto; + border-radius: 0.5rem; + h3, h4, p { padding: 0 1.5rem; } + h3{ + font-size: 2rem; + margin-bottom: 1rem; + } } sm-carousel::part(carousel) { padding: 0 1.5rem; } - - p { - margin-bottom: 3rem; - } .user-panel{ margin: 0 1.5rem; } @@ -706,11 +709,16 @@ form { padding-bottom: 1rem; border-bottom: solid 1px rgba(var(--foreground-color), 0.3); } + sm-button{ + --text-color: rgba(var(--foreground-color), 1); + background: rgba(var(--foreground-color), 0.2); + border-radius: 2rem; + } .grid { gap: 1.5rem; + grid-template-columns: 1fr 1fr; margin-top: 1rem; h5 { - font-size: 1rem; font-weight: 500; } h4{ @@ -728,12 +736,6 @@ form { .balance{ display: grid; gap: 0 1rem; - grid-template-columns: 1fr auto; - grid-template-areas: '. balance' '. balance'; - align-items: center; - h4{ - grid-area: balance; - } } .user-type { @@ -742,7 +744,7 @@ form { .options-tab { margin: 1rem 0; - + border-radius: 0.5reem; .option { position: relative; display: flex; @@ -757,14 +759,11 @@ form { text-transform: capitalize; transition: transform 0.3s; cursor: pointer; - .icon { height: 3rem; width: 3rem; padding: 0.8rem; - border-radius: 4rem; - margin-bottom: 0.5rem; - stroke: rgba(var(--foreground-color), 1); + stroke: var(--accent-color); } h4 { @@ -775,39 +774,13 @@ form { &:active { transform: scale(0.95); } - - &:nth-of-type(1) { - .icon { - background: linear-gradient(135deg, #D32F2F 50%, #B71C1C 50%); - } - } - - &:nth-of-type(2) { - .icon { - background: linear-gradient(135deg, #7B1FA2 50%, #4A148C 50%); - } - } - - &:nth-of-type(3) { - .icon { - background: linear-gradient(135deg, #1976D2 50%, #0D47A1 50%); - } - } - - &:nth-of-type(4) { - .icon { - background: linear-gradient(135deg, #388E3C 50%, #1B5E20 50%); - } - } - - &:nth-of-type(5) { - .icon { - background: linear-gradient(135deg, #F57C00 50%, #E65100 50%); - } - } } } +.request-icon{ + transform: rotate(180deg); +} + .notification-dot::after { content: ''; position: absolute; @@ -1178,34 +1151,24 @@ sm-panel{ width: 6rem; border-top: none; border-right: solid 1px rgba(var(--text-color), 0.2); - .navbar-item { + border-radius: 0.5rem; width: auto; - padding: 1.4em 0; - margin: 0.6em; - + padding: 0.5rem 0; + margin: 0.5rem 0.6rem; .icon { height: 1.4rem; width: 1.4rem; } &:hover { - .icon { - stroke: rgba(var(--text-color), 1); - } - - h5 { - color: rgba(var(--text-color), 1); - } + background: rgba(var(--foreground-color), 0.2); } - - &.active:hover { - .icon { + &.active{ + background: rgba(var(--foreground-color), 1); + color: var(--accent-color); + .icon{ stroke: var(--accent-color); } - - h5 { - color: var(--accent-color); - } } } } @@ -1309,4 +1272,8 @@ sm-panel{ } } -@media (any-hover: hover) {} +@media (any-hover: hover) { + .option:hover{ + background: rgba(var(--text-color), 0.1); + } +} diff --git a/index.html b/index.html index 2bc51e8..9390007 100644 --- a/index.html +++ b/index.html @@ -140,8 +140,8 @@ @@ -310,13 +310,8 @@
Home
- - request - - - + +
requests
@@ -364,46 +359,33 @@

Send

- - - - - - - - - - -

deposit

+ + deposit + + + + + + +

deposit

- - - - - - - - - - + + withdraw + + + + + + -

Withdraw

+

Withdraw

- - request - - - + + -

Request

+

Request

@@ -416,7 +398,7 @@
-

User

+
My FLO ID

@@ -427,26 +409,15 @@

Balance

- - refresh balance - - - + Check Balance
Rupee
-

Digital representation of Indian rupee

-

0

-
-
-
FLO
-

Your FLO blockchain balance

-

0

-
+

0

+
Unconfirmed Rupee
-

Rupee that is mid transaction. This represents rupee that is not proccesed yet.

0

@@ -656,25 +627,17 @@

Balance

- - refresh balance - - - + Check Balance
-
Rupee
+
Rupee

0

FLO

0

-
-
Unconfirmed Rupee
-

0

-
@@ -11146,310 +11109,300 @@ }); } + function diff_hours(dt2, dt1) { + var diff =(dt2.getTime() - dt1.getTime()) / 1000; + diff /= (60 * 60); + return Math.abs(Math.round(diff)); + } + - + @@ -1251,65 +1183,44 @@ zIndex = 10; function showPopup(popup, permission) { - document.body.setAttribute('style', `overflow: hidden; top: -${window.scrollY}px`) let thisPopup = document.getElementById(popup); - thisPopup.parentNode.classList.remove('hide'); - thisPopup.classList.add('no-transformations'); popupStack.push({ popup, permission }) - zIndex++; - thisPopup.parentNode.setAttribute('style', `z-index: ${zIndex}`) - document.getElementById('main_page') - setTimeout(() => { - thisPopup.querySelectorAll('.input').forEach(input => { - animateInput(input) - formValidation(input.firstElementChild) - }) - }, 100); - if (popup === 'main_loader') { - loader.classList.add('animate-loader') - document.querySelector('main').classList.add('hide-completely') - document.querySelector('#main_header').classList.add('hide-completely') - document.querySelector('#navbar').classList.add('hide-completely') - } + zIndex++ + thisPopup.setAttribute('style', `z-index: ${zIndex}`) + thisPopup.show(permission, popupStack) return thisPopup; } // hides the popup or modal function hidePopup() { - const scrollY = document.body.style.top; - window.scrollTo(0, parseInt(scrollY || '0') * -1); - setTimeout(() => { - document.body.setAttribute('style', `overflow: auto; top: initial`) - }, 300); if (popupStack.peek() === undefined) return; let { - popup, - permission + permission, popup } = popupStack.pop(); - thisPopup = document.getElementById(popup); - thisPopup.closest('.popup-container').classList.add('hide'); - thisPopup.closest('.popup').classList.remove('no-transformations'); + let thisPopup = document.getElementById(popup), + submitButton = thisPopup.querySelector('button[type="submit"]') + if(submitButton) + submitButton.disabled = true; + thisPopup.hide() + zIndex-- setTimeout(() => { - clearAllInputs(thisPopup) - zIndex--; - thisPopup.parentNode.setAttribute('style', `z-index: ${zIndex}`) if (thisPopup.querySelector('.action')) { btnLoading(thisPopup.querySelector('.action'), 'stop') thisPopup.querySelector("button[type='submit']").disabled = true; } }, 400) - if (popup === 'main_loader' || popup === 'sign_in_popup') { + if (popup === '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') } if (popup === 'prompt') { - if (thisPopup.querySelector('input').value == '') + if (thisPopup.querySelector('sm-input').value == '') thisPopup.querySelector('.cancel-btn').click() } if (popup === 'cash_transfer') { @@ -1326,13 +1237,6 @@ } } - addEventListener('mousedown', e => { - if (e.target.classList.contains('popup-container') && popupStack.peek() !== undefined && popupStack - .peek().permission !== 'no') { - hidePopup() - } - }) - function btnLoading(btn, option) { if (typeof btn === 'string') btn = document.getElementById(btn); @@ -1345,6 +1249,22 @@ } } + const loaderPage = document.getElementById('main_loader') + function showLoader(){ + loaderPage.classList.remove('hide-completely') + loader.classList.add('animate-loader') + document.querySelector('main').classList.add('hide-completely') + document.querySelector('#navbar').classList.add('hide-completely') + document.querySelector('#main_header').classList.add('hide-completely') + } + function hideLoader(){ + loaderPage.classList.add('hide-completely') + 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') + } + function setAttributes(el, attrs) { for (var key in attrs) { @@ -1353,12 +1273,6 @@ } function clearAllInputs(parent) { - parent.querySelectorAll("input").forEach((field) => { - field.value = ''; - if (field.closest('.input')) { - field.closest('.input').classList.remove('animate-label') - } - }) if (parent.querySelectorAll("textarea")) parent.querySelectorAll("textarea").forEach((field) => { field.value = ''; @@ -1389,11 +1303,11 @@ showPopup('confirmation') popup.querySelector('#confirm_message').textContent = message; popup.querySelector('.submit-btn').onclick = () => { - hidePopup() + popup.hide() resolve(true); } popup.querySelector('.cancel-btn').onclick = () => { - hidePopup() + popup.hide() resolve(false); } }) @@ -1403,7 +1317,7 @@ let askPrompt = function (message, defaultVal) { return new Promise(resolve => { let popup = document.getElementById('prompt'), - input = popup.querySelector('input'); + input = popup.querySelector('sm-input'); if (defaultVal) input.value = defaultVal; showPopup('prompt') @@ -1411,15 +1325,16 @@ input.addEventListener('keyup', e => { if (e.key === 'Enter') { resolve(input.value); - hidePopup() + popup.hide() } }) popup.querySelector('#prompt_message').textContent = message; popup.querySelector('.submit-btn').onclick = () => { + popup.hide() resolve(input.value); } popup.querySelector('.cancel-btn').onclick = () => { - hidePopup() + popup.hide() resolve(null); } }) @@ -1458,25 +1373,13 @@ notify('Copied', 'success') } - // prevents non numerical input on firefox - function preventNonNumericalInput(e) { - e = e || window.event; - let charCode = (typeof e.which == "undefined") ? e.keyCode : e.which, - charStr = String.fromCharCode(charCode); - - if (!charStr.match(/[+-]?([0-9]*[.])?[0-9]+/)) - e.preventDefault(); - } - function areInputsEmpty(parent) { - let allInputs = parent.querySelectorAll(".input input:not(:disabled)"); - return [...allInputs].every(input => input.checkValidity()) + let allInputs = parent.querySelectorAll("sm-input:not([disabled])"); + return [...allInputs].every(input => input.isValid) } - function formValidation(formElement, e) { - if (formElement.getAttribute('type') === 'number' && typeof e !== 'undefined') - preventNonNumericalInput(e); - let parent = formElement.closest('.popup'), + function formValidation(formElement) { + let parent = formElement.closest('sm-popup'), submitBtn = parent.querySelector("button[type='submit']"); if (!submitBtn) return; if (formElement.hasAttribute('floId')) { @@ -1484,6 +1387,7 @@ submitBtn.disabled = false; } else { submitBtn.disabled = true; + return } } if (areInputsEmpty(parent)) @@ -1492,44 +1396,24 @@ submitBtn.disabled = true; } - function animateInput(parent) { - if (parent.firstElementChild.value !== '') - parent.classList.add('animate-label') - else - parent.classList.remove('animate-label') - } - let allForms = document.querySelectorAll('form'), payingRequested = false, currentPaymentRequest; const tokenReceiver = document.getElementById('token_receiver'), tokenAmount = document.getElementById('token_amount') window.addEventListener('load', () => { - allForms.forEach((form) => { - form.addEventListener('input', (e) => { - if (e.target.closest('.input')) { - let parent = e.target.closest('.input'); - animateInput(parent) - formValidation(parent.firstElementChild, e) - } - }) - form.addEventListener('keyup', (e) => { - if (e.target.closest('.input')) { - if (e.key === 'Enter') { - e.target.closest('.popup').querySelector("button[type='submit']") - .click(); - } - } - }) + document.addEventListener('input', e => { + if (e.target.closest('sm-input')) { + formValidation(e.target.closest('sm-input')) + } }) - allForms.forEach((form) => { - form.addEventListener('blur', (e) => { - if (e.target.closest('.input')) { - let parent = e.target.closest('.input'); - if (parent.firstElementChild.value === '') - parent.classList.remove('animate-label') + document.addEventListener('keyup', (e) => { + if (e.target.closest('sm-input')) { + if (e.key === 'Enter') { + e.target.closest('sm-popup').querySelector("button[type='submit']") + .click(); } - }, true) + } }) // Function for confirming deposit requests @@ -1673,7 +1557,7 @@ function signIn() { return new Promise((resolve, reject) => { - hidePopup() + hideLoader() showPopup('sign_in_popup', 'no') let signInBtn = document.getElementById('sign_in_btn'), privateKeyInput = document.getElementById('get_priv_key_field') @@ -10699,7 +10583,7 @@ else { resolve(inputVal) hidePopup() - showPopup('main_loader', 'no') + showLoader() } }) } @@ -11307,7 +11191,7 @@ showPage(document.getElementById('home_page_btn'), 'home_page') } - hidePopup() + //Hide loader pay_through_cashier(); }, @@ -11662,14 +11546,12 @@ if (token_receiver.length < 1 || !floCrypto.validateAddr(token_receiver)) { err_msg = `Invalid receiver FLO address.`; notify(err_msg, 'error'); - hidePopup(); return false; } if (typeof sender_token_balance !== "object") { err_msg = `Failed to load Sender balance.`; notify(err_msg, 'error'); - hidePopup() return false; } @@ -11713,7 +11595,8 @@ async function refresh_balance(refreshButton) { try { - refreshButton.textContent = 'Checking...' + if (refreshButton) + refreshButton.textContent = 'Checking...' const current_token_balance = document.querySelector('.token-balance').textContent; if (typeof current_token_balance == "string") { const get_user_rupee_balance = await ajaxGet( @@ -11742,6 +11625,9 @@ } return true; } catch (error) { + if (refreshButton) + refreshButton.textContent = 'Check Balance' + notify('unable load balance') throw new Error(error); } } From 267372cff19fb18924297b73189ffea1c8af4aaf Mon Sep 17 00:00:00 2001 From: sairaj mote Date: Mon, 14 Sep 2020 18:51:15 +0530 Subject: [PATCH 03/42] 0.0.29 --- components.js | 9 +++++++++ index.html | 2 +- 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/components.js b/components.js index aded3a7..c52ae45 100644 --- a/components.js +++ b/components.js @@ -1772,6 +1772,8 @@ customElements.define('sm-popup', class extends HTMLElement { constructor() { super() this.attachShadow({ mode: 'open' }).append(smPopup.content.cloneNode(true)) + + this.allowClosing = false } resumeScrolling() { @@ -1783,6 +1785,9 @@ customElements.define('sm-popup', class extends HTMLElement { } show(pinned, popupStack) { + setTimeout(() => { + this.allowClosing = true + }, 300); this.setAttribute('open', '') this.pinned = pinned this.popupStack = popupStack @@ -1791,6 +1796,10 @@ customElements.define('sm-popup', class extends HTMLElement { document.body.setAttribute('style', `overflow: hidden; top: -${window.scrollY}px`) } hide() { + if (!this.allowClosing) return + setTimeout(() => { + this.allowClosing = false + }, 300); this.removeAttribute('open') if (window.innerWidth < 648) { this.popup.style.transform = 'translateY(100%)'; diff --git a/index.html b/index.html index 2a85028..0a47e5c 100644 --- a/index.html +++ b/index.html @@ -74,7 +74,7 @@ *Requires Rupee to be deposited first.

- +
From ec6fd0ba5a04665a199436808582fbece4ffb3a6 Mon Sep 17 00:00:00 2001 From: sairaj mote Date: Tue, 15 Sep 2020 04:25:48 +0530 Subject: [PATCH 04/42] 0.0.30 --- components.js | 183 ++++---- css/main.css | 71 ++- css/main.min.css | 2 +- css/main.scss | 77 +++- index.html | 1118 +++++++++++++++++++++++++++------------------- 5 files changed, 893 insertions(+), 558 deletions(-) diff --git a/components.js b/components.js index c52ae45..236b87a 100644 --- a/components.js +++ b/components.js @@ -204,6 +204,7 @@ border: none; .input { display: flex; align-items: center; + text-align: left; position: relative; gap: 1em; padding: 0.7em 1em; @@ -1666,72 +1667,79 @@ const smPopup = document.createElement('template') smPopup.innerHTML = ` - - Empty icon - - - - - - - - - + .d { + stroke-width: 3px; + } + + + Empty icon + + + + + + + + +

No deposit requests.

- + -
+
Load pending -
-
+
+
- - - + + Empty icon + + + + + + + + +

No withdraw requests.

-
+ -
+
- Load pending + Load pending -
-
+
+
- - - + + Empty icon + + + + + + + + +

No pay requests.

 @@ -563,7 +649,7 @@
-
Rupee
+
Rupee

0

@@ -626,7 +712,7 @@
-

Complaints +

Complaints

Select Cashier
@@ -652,16 +738,16 @@

Settings

-

My FLO ID

-
-

- - Copy - - - -
- +

My FLO ID

+
+

+ + Copy + + + +
+
@@ -11006,39 +11104,63 @@ master_configurations: {}, actions: {}, blocked_flo_ids: [], + personal_data: null, }; token_app.actions = { parse_flo_comments: async function () { - const num=3; + const num = 4; text = `masterFLOAddress=FD5hK9ryBogJ5AcSvCy1tW5as8jRTkMLky - #!#CURRENCY=INR - #!#TYPE_DEPOSITS=CASH_DEPOSITS_TEST${num} - #!#TYPE_WITHDRAWS=CASH_WITHDRAWS_TEST${num} - #!#TYPE_MSGES=USER_MESSAGES_TEST${num} - #!#TYPE_PROCESSED_DEPOSITS=PROCESSED_DEPOSITS_TEST${num} - #!#TYPE_PROCESSED_WITHDRAWS=PROCESSED_WITHDRAWS_TEST${num} - #!#TYPE_FILE_DEPOSITS_COMPLAINT=DEPOSITS_COMPLAINT_TEST${num} - #!#TYPE_PROCESSED_DEPOSITS_COMPLAINT=PROCESSED_DEPOSITS_COMPLAINT_TEST${num} - #!#TYPE_FILE_WITHDRAWS_COMPLAINT=WITHDRAWS_COMPLAINT_TEST${num} - #!#TYPE_PROCESSED_WITHDRAWS_COMPLAINT=PROCESSED_WITHDRAWS_COMPLAINT_TEST${num} - #!#TYPE_PAY_THROUGH_CASHIER=PAY_THRU_CASHIER_TEST${num} - #!#TYPE_FILE_PAY_THROUGH_CASHIER_COMPLAINT=PAY_THRU_CASHIER_COMPLAINT_TEST${num} - #!#TYPE_PROCESSED_PAY_THROUGH_CASHIER=PROCESSED_PAY_THROUGH_CASHIER_TEST${num} - #!#TYPE_PROCESSED_PAY_THROUGH_CASHIER_COMPLAINT=PROCESSED_PAY_THROUGH_CASHIER_COMPLAINT_TEST${num} - #!#TYPE_REQUEST_PAYMENT=REQUEST_PAYMENT_TEST${num} - #!#TYPE_REQUEST_PAYMENT_DECLINED=REQUEST_PAYMENT_DECLINED_TEST${num} - #!#TYPE_REQUEST_PAYMENT_APPROVED=REQUEST_PAYMENT_APPROVED_TEST${num} - #!#TYPE_UNCONFIRMED_BALANCE_CLAIM_REQUESTS=TYPE_UNCONFIRMED_BALANCE_CLAIM_REQUESTS_TEST${num} - #!#vendors=FGtPEBu2NFFYkqFrA9NDBJJLpVhyuPubDj, - #!#helplineFloId=F9MAyvT5b9aSfsuukAungrbt1L5fgmJmuK - #!#cashiers= - { - "FCja6sLv58e3RMy41T5AmWyvXEWesqBCkX": { - "upi_id": "8507742774@ybl" - } - }` + #!#CURRENCY=INR + #!#TYPE_UPI_APP=UPI_APP_TEST${num} + #!#TYPE_DEPOSITS=CASH_DEPOSITS_TEST${num} + #!#TYPE_WITHDRAWS=CASH_WITHDRAWS_TEST${num} + #!#TYPE_MSGES=USER_MESSAGES_TEST${num} + #!#TYPE_PROCESSED_DEPOSITS=PROCESSED_DEPOSITS_TEST${num} + #!#TYPE_PROCESSED_WITHDRAWS=PROCESSED_WITHDRAWS_TEST${num} + #!#TYPE_FILE_DEPOSITS_COMPLAINT=DEPOSITS_COMPLAINT_TEST${num} + #!#TYPE_PROCESSED_DEPOSITS_COMPLAINT=PROCESSED_DEPOSITS_COMPLAINT_TEST${num} + #!#TYPE_FILE_WITHDRAWS_COMPLAINT=WITHDRAWS_COMPLAINT_TEST${num} + #!#TYPE_PROCESSED_WITHDRAWS_COMPLAINT=PROCESSED_WITHDRAWS_COMPLAINT_TEST${num} + #!#TYPE_PAY_THROUGH_CASHIER=PAY_THRU_CASHIER_TEST${num} + #!#TYPE_FILE_PAY_THROUGH_CASHIER_COMPLAINT=PAY_THRU_CASHIER_COMPLAINT_TEST${num} + #!#TYPE_PROCESSED_PAY_THROUGH_CASHIER=PROCESSED_PAY_THROUGH_CASHIER_TEST${num} + #!#TYPE_PROCESSED_PAY_THROUGH_CASHIER_COMPLAINT=PROCESSED_PAY_THROUGH_CASHIER_COMPLAINT_TEST${num} + #!#TYPE_REQUEST_PAYMENT=REQUEST_PAYMENT_TEST${num} + #!#TYPE_REQUEST_PAYMENT_DECLINED=REQUEST_PAYMENT_DECLINED_TEST${num} + #!#TYPE_REQUEST_PAYMENT_APPROVED=REQUEST_PAYMENT_APPROVED_TEST${num} + #!#TYPE_UNCONFIRMED_BALANCE_CLAIM_REQUESTS=TYPE_UNCONFIRMED_BALANCE_CLAIM_REQUESTS_TEST${num} + #!#TYPE_SENT_TOKENS=TYPE_SENT_TOKENS_TEST${num} + #!#TYPE_MY_PERSONAL_DATA=TYPE_MY_PERSONAL_DATA_TEST${num} + #!#TYPE_UNCONFIRMED_RUPEE_DEPOSITS=TYPE_UNCONFIRMED_RUPEE_DEPOSITS_TEST${num} + #!#TYPE_PROCESSED_UNCONFIRMED_BALANCE_CLAIM_REQUESTS=TYPE_PROCESSED_UNCONFIRMED_BALANCE_CLAIM_REQUESTS_TEST${num} + #!#vendors=FGtPEBu2NFFYkqFrA9NDBJJLpVhyuPubDj, + #!#helplineFloId=F9MAyvT5b9aSfsuukAungrbt1L5fgmJmuK + #!#cashiers= + { + "FCja6sLv58e3RMy41T5AmWyvXEWesqBCkX": { + "upi_id": "8507742774@ybl" + } + }` + /* + , + "FHW2kgYEhDt85vjAiMMF7bQqdP74L7iwvQ": { + "upi_id": "8340617958@ybl" + }, + "FTmJ6QeBjDFjdqS6Zs4V5amac2X19AjXcF": { + "upi_id": "8902496422@ybl" + }, + "FBun3694ZdxmD66os9oL5DxMrif3vyVjT3": { + "upi_id": "7004801428@ybl" + }, + "FTpxFWdBDvYARGZuPWDhw9gke72J2pruvv": { + "upi_id": "aakriti1705sinha@okicici" + }, + "FQ6udJuTbGDa2kWZAkmNpwgHaUEeYLPAtt": { + "upi_id": "krishraj1012-2@okicici" + } + */ text = removeWhiteSpaces(text); return text; const master_data = await ajaxGet( @@ -11096,11 +11218,11 @@ Object.defineProperty( token_app.master_configurations, k[0], { - value: k[1], - writable: false, - configurable: false, - enumerable: true - } + value: k[1], + writable: false, + configurable: false, + enumerable: true + } ); } deepFreeze(token_app.master_configurations); @@ -11191,7 +11313,7 @@ showPage(document.getElementById('home_page_btn'), 'home_page') } - //Hide loader + hidePopup() pay_through_cashier(); }, @@ -11205,10 +11327,15 @@ }); if (Object.keys(token_app.master_configurations.cashiers).includes(myFloID)) { - await Promise.all([floCloudAPI.requestGeneralData(token_app.master_configurations + + await Promise.all([ + + create_root_structure(), + + floCloudAPI.requestGeneralData(token_app.master_configurations .TYPE_DEPOSITS, { - receiverID: myFloID - }), + receiverID: myFloID + }), floCloudAPI.requestGeneralData(token_app.master_configurations.TYPE_WITHDRAWS, { receiverID: myFloID @@ -11220,8 +11347,8 @@ floCloudAPI.requestGeneralData(token_app.master_configurations .TYPE_PAY_THROUGH_CASHIER, { - receiverID: myFloID - }) + receiverID: myFloID + }) ]) return true; @@ -11229,6 +11356,9 @@ await clearCashierData(); await Promise.all([ + + create_root_structure(), + floCloudAPI.requestGeneralData(token_app.master_configurations .TYPE_FILE_DEPOSITS_COMPLAINT), floCloudAPI.requestGeneralData(token_app.master_configurations @@ -11250,21 +11380,21 @@ for (let cashier in token_app.master_configurations.cashiers) { let p1 = { - func: floCloudAPI.requestGeneralData, + func: floCloudAPI.requestGeneralData, arg1: token_app.master_configurations.TYPE_DEPOSITS, - arg2: {receiverID: cashier, senderIDs: [myFloID]} + arg2: { receiverID: cashier, senderIDs: [myFloID] } } - let p2 = { + let p2 = { func: floCloudAPI.requestGeneralData, arg1: token_app.master_configurations.TYPE_WITHDRAWS, - arg2: {receiverID: cashier, senderIDs: [myFloID]} + arg2: { receiverID: cashier, senderIDs: [myFloID] } } let p3 = { func: floCloudAPI.requestGeneralData, arg1: token_app.master_configurations.TYPE_PAY_THROUGH_CASHIER, - arg2: {receiverID: cashier, senderIDs: [myFloID]} + arg2: { receiverID: cashier, senderIDs: [myFloID] } } promises.push(p1, p2, p3); @@ -11273,12 +11403,14 @@ let p4 = { func: floCloudAPI.requestGeneralData, arg1: token_app.master_configurations.TYPE_MSGES, - arg2: {receiverID: myFloID} + arg2: { receiverID: myFloID } } promises.push(p4); - await Promise.all(promises.map(prom => prom.func.call(floCloudAPI,prom.arg1, prom.arg2))); + await Promise.all(promises.map(prom => prom.func.call(floCloudAPI, prom.arg1, prom.arg2))); + + create_root_structure(); return promises; @@ -11290,20 +11422,37 @@ - + \ No newline at end of file From 983429d1692607fd08c11531841231cf46a4d3e4 Mon Sep 17 00:00:00 2001 From: sairaj mote Date: Thu, 17 Sep 2020 14:10:45 +0530 Subject: [PATCH 05/42] 0.0.31 --- components.js | 88 +++++++++------ css/main.css | 6 + css/main.min.css | 2 +- css/main.scss | 6 + index.html | 289 +++++++++++++++++++++++------------------------ 5 files changed, 207 insertions(+), 184 deletions(-) diff --git a/components.js b/components.js index 236b87a..843c779 100644 --- a/components.js +++ b/components.js @@ -211,6 +211,7 @@ border: none; border-radius: 0.3em; transition: opacity 0.3s; background: rgba(var(--text-color), 0.1); + box-shadow: 0 0 0 0.1em rgba(var(--text-color), 0.2) inset; font-family: var(--font-family); width: 100% outline: none; @@ -1495,7 +1496,7 @@ customElements.define('sm-strip-select', class extends HTMLElement { set value(val) { this.setAttribute('value', val) } - scrollLeft() { + scrollLeft = () => { this.select.scrollBy({ top: 0, left: -this.scrollDistance, @@ -1503,7 +1504,7 @@ customElements.define('sm-strip-select', class extends HTMLElement { }) } - scrollRight() { + scrollRight = () => { this.select.scrollBy({ top: 0, left: this.scrollDistance, @@ -1579,13 +1580,13 @@ customElements.define('sm-strip-select', class extends HTMLElement { previousOption = firstElement; } }); - this.nextArrow.addEventListener('click', this.scrollRight.bind(this)) - this.previousArrow.addEventListener('click', this.scrollLeft.bind(this)) + this.nextArrow.addEventListener('click', this.scrollRight) + this.previousArrow.addEventListener('click', this.scrollLeft) } disconnectedCallback() { - this.nextArrow.removeEventListener('click', this.scrollRight.bind(this)) - this.previousArrow.removeEventListener('click', this.scrollLeft.bind(this)) + this.nextArrow.removeEventListener('click', this.scrollRight) + this.previousArrow.removeEventListener('click', this.scrollLeft) } }) @@ -1687,7 +1688,7 @@ smPopup.innerHTML = ` transition: opacity 0.3s ease; } :host(.stacked) .popup{ - transform: scale(0.9) translateY(-1rem) !important; + transform: scale(0.9) translateY(-2rem) !important; } .popup{ margin-bottom: 0.5rem; @@ -1784,7 +1785,7 @@ customElements.define('sm-popup', class extends HTMLElement { this.allowClosing = false } - resumeScrolling() { + resumeScrolling = () => { const scrollY = document.body.style.top; window.scrollTo(0, parseInt(scrollY || '0') * -1); setTimeout(() => { @@ -1792,15 +1793,26 @@ customElements.define('sm-popup', class extends HTMLElement { }, 300); } - show(pinned, popupStack) { + show = (pinned, popupStack) => { + if(popupStack) + this.popupStack = popupStack + if (this.popupStack && !this.hasAttribute('open')) { + this.popupStack.push({ + popup: this, + permission: pinned + }) + if (this.popupStack.items.length > 1){ + this.popupStack.items[this.popupStack.items.length - 2].popup.classList.add('stacked') + } + } this.setAttribute('open', '') this.pinned = pinned - this.popupStack = popupStack this.popupContainer.classList.remove('hide') this.popup.style.transform = 'translateY(0)'; document.body.setAttribute('style', `overflow: hidden; top: -${window.scrollY}px`) + return this.popupStack } - hide() { + hide = () => { this.removeAttribute('open') if(window.innerWidth < 640) this.popup.style.transform = 'translateY(100%)'; @@ -1809,7 +1821,10 @@ customElements.define('sm-popup', class extends HTMLElement { this.popupContainer.classList.add('hide') if (typeof this.popupStack !== 'undefined') { this.popupStack.pop() - if (this.popupStack.items.length === 0) { + if (this.popupStack.items.length){ + this.popupStack.items[this.popupStack.items.length - 1].popup.classList.remove('stacked') + } + else { this.resumeScrolling() } } @@ -1831,19 +1846,20 @@ customElements.define('sm-popup', class extends HTMLElement { new CustomEvent("popupclosed", { bubbles: true, detail: { - popup: this + popup: this, + popupStack: this.popupStack } }) ) } - handleTouchStart(e) { + handleTouchStart = (e) => { this.touchStartY = e.changedTouches[0].clientY this.popup.style.transition = 'initial' this.touchStartTime = e.timeStamp } - handleTouchMove(e) { + handleTouchMove = (e) => { e.preventDefault() if (this.touchStartY < e.changedTouches[0].clientY) { this.offset = e.changedTouches[0].clientY - this.touchStartY; @@ -1854,8 +1870,8 @@ customElements.define('sm-popup', class extends HTMLElement { this.popup.style.transform = `translateY(-${this.offset}px)` }*/ } - - handleTouchEnd(e) { + + handleTouchEnd = (e) => { this.touchEndTime = e.timeStamp cancelAnimationFrame(this.touchEndAnimataion) this.touchEndY = e.changedTouches[0].clientY @@ -1874,7 +1890,7 @@ customElements.define('sm-popup', class extends HTMLElement { } } - movePopup() { + movePopup = () => { this.popup.style.transform = `translateY(${this.offset}px)` } @@ -1916,9 +1932,9 @@ customElements.define('sm-popup', class extends HTMLElement { }) } disconnectedCallback() { - this.popupHeader.removeEventListener('touchstart', this.handleTouchStart.bind(this)) - this.popupHeader.removeEventListener('touchmove', this.handleTouchMove.bind(this)) - this.popupHeader.removeEventListener('touchend', this.handleTouchEnd.bind(this)) + this.popupHeader.removeEventListener('touchstart', this.handleTouchStart) + this.popupHeader.removeEventListener('touchmove', this.handleTouchMove) + this.popupHeader.removeEventListener('touchend', this.handleTouchEnd) } }) @@ -2060,7 +2076,7 @@ customElements.define('sm-carousel', class extends HTMLElement { this.attachShadow({ mode: 'open' }).append(smCarousel.content.cloneNode(true)) } - scrollLeft() { + scrollLeft = () => { this.carousel.scrollBy({ top: 0, left: -this.scrollDistance, @@ -2068,7 +2084,7 @@ customElements.define('sm-carousel', class extends HTMLElement { }) } - scrollRight() { + scrollRight = () => { this.carousel.scrollBy({ top: 0, left: this.scrollDistance, @@ -2134,13 +2150,13 @@ customElements.define('sm-carousel', class extends HTMLElement { this.scrollRight() }) - this.nextArrow.addEventListener('click', this.scrollRight.bind(this)) - this.previousArrow.addEventListener('click', this.scrollLeft.bind(this)) + this.nextArrow.addEventListener('click', this.scrollRight) + this.previousArrow.addEventListener('click', this.scrollLeft) } disconnectedCallback() { - this.nextArrow.removeEventListener('click', this.scrollRight.bind(this)) - this.previousArrow.removeEventListener('click', this.scrollLeft.bind(this)) + this.nextArrow.removeEventListener('click', this.scrollRight) + this.previousArrow.removeEventListener('click', this.scrollLeft) } }) @@ -2285,14 +2301,14 @@ customElements.define('sm-notifications', class extends HTMLElement { this.shadow = this.attachShadow({ mode: 'open' }).append(smNotifications.content.cloneNode(true)) } - handleTouchStart(e) { + handleTouchStart =(e) => { this.notification = e.target.closest('.notification') this.touchStartX = e.changedTouches[0].clientX this.notification.style.transition = 'initial' this.touchStartTime = e.timeStamp } - handleTouchMove(e) { + handleTouchMove = (e) => { e.preventDefault() if (this.touchStartX < e.changedTouches[0].clientX) { this.offset = e.changedTouches[0].clientX - this.touchStartX; @@ -2304,7 +2320,7 @@ customElements.define('sm-notifications', class extends HTMLElement { } } - handleTouchEnd(e) { + handleTouchEnd = (e) => { this.notification.style.transition = 'transform 0.3s, opacity 0.3s' this.touchEndTime = e.timeStamp cancelAnimationFrame(this.touchEndAnimataion) @@ -2334,11 +2350,11 @@ customElements.define('sm-notifications', class extends HTMLElement { this.notification.style.transform = `translateX(${this.offset}px)` } - resetPosition() { + resetPosition = () => { this.notification.style.transform = `translateX(0)` } - push(messageBody, type, pinned) { + push = (messageBody, type, pinned) => { let notification = document.createElement('div'), composition = `` notification.classList.add('notification') @@ -2384,12 +2400,12 @@ customElements.define('sm-notifications', class extends HTMLElement { else { notification.setAttribute('style', `transform: translateY(0); opacity: 1`) } - notification.addEventListener('touchstart', this.handleTouchStart.bind(this)) - notification.addEventListener('touchmove', this.handleTouchMove.bind(this)) - notification.addEventListener('touchend', this.handleTouchEnd.bind(this)) + notification.addEventListener('touchstart', this.handleTouchStart) + notification.addEventListener('touchmove', this.handleTouchMove) + notification.addEventListener('touchend', this.handleTouchEnd) } - removeNotification(notification, toLeft) { + removeNotification = (notification, toLeft) => { if (!this.offset) this.offset = 0; diff --git a/css/main.css b/css/main.css index fe17e84..84f7b07 100644 --- a/css/main.css +++ b/css/main.css @@ -431,6 +431,12 @@ sm-popup sm-input:not(:last-of-type) { sm-popup p { margin-block-end: 1rem; } +sm-popup .action { + margin-top: 1.5rem; +} +sm-popup .action h4 { + padding: 0.8rem 1.6rem; +} .popup-header { padding: 1.5rem; diff --git a/css/main.min.css b/css/main.min.css index 5ff6c41..c7221fa 100644 --- a/css/main.min.css +++ b/css/main.min.css @@ -1 +1 @@ -.action,button{position:relative}.options-tab .option,button{transition:transform .3s;text-transform:capitalize}*{box-sizing:border-box;padding:0;margin:0;font-family:Roboto,sans-serif}button,h1,h2,h3,h4,h5{font-weight:600;font-family:Poppins,sans-serif}:root{scroll-behavior:smooth}body{--accent-color:#2237CD;--text-color:17,17,17;--text-color-light:85,85,85;--foreground-color:255,255,255;--background-color:#e8e8e8;--dark-shade:#dadada;background:var(--foreground-color);color:rgba(var(--text-color),1);font-size:16px}a{font-weight:600;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)}button{display:inline-flex;align-items:center;justify-content:center;padding:.6rem 1.2rem;cursor:pointer;border-radius:.3rem;color:var(--accent-color);border:none;background:rgba(var(--text-color),.1);-webkit-tap-highlight-color:transparent}.action,.align-center{align-items:center}button:focus{outline:solid thin}button:disabled{cursor:default;background:rgba(var(--text-color),.5)}.action,.action[disabled] .primary-btn{background:0 0}button:disabled~.loader{opacity:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=text]::-ms-clear{display:none;width:0;height:0}input[type=text]::-ms-reveal{display:none;width:0;height:0}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{display:none}input[type=number]{-moz-appearance:textfield}input:invalid{outline:0;box-shadow:none}::-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,.direction-column,.options-tab .option{flex-direction:column}.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}.loader{fill:none;stroke-width:10;stroke:var(--accent-color);height:2rem;width:2rem;overflow:visible;stroke-dashoffset:230;stroke-dasharray:230;padding:2px;justify-self:center}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes load{50%{stroke-dashoffset:0}100%{stroke-dashoffset:-210}}.action{display:inline-flex;justify-content:center;padding: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}.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:inline-grid;align-items:center;grid-template-columns:auto 1fr;gap:.6rem .4rem;margin-right:1rem}#logo h4{letter-spacing:.06rem;word-spacing:.12rem}#logo h5{font-weight:400}#logo #main_logo{height:1.6rem;width:1.6rem;fill:rgba(var(--text-color),1);stroke:none}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);stroke-width:6;fill:none;height:2rem;padding:.5rem .5rem .5rem 0;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 .btns,#prompt .btns{display:flex;justify-content:right;width:100%}#confirmation .btns button,#prompt .btns button{background:0 0}#confirmation .btns button:first-of-type,#prompt .btns button:first-of-type{margin-right:.6em}.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)}.complaint-placeholder h4,.complaint-placeholder h5,details p{border-radius:.2rem}sm-popup sm-input:not(:last-of-type){margin-bottom:1rem}sm-popup p{margin-block-end:1rem}.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}details p{padding:.5rem 1rem;background:rgba(var(--text-color),.06);margin-bottom:0}#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:1rem;justify-content:space-between}.display-balance{gap:1rem;grid-auto-flow:row}.display-balance .balance{width:100%}.display-balance .icon{height:1.4rem;width:1.4rem;padding:.3rem;stroke-width:10;cursor:pointer}.icon{height:1.2rem;width:1.2rem;fill:none;stroke:rgba(var(--text-color),.8);stroke-width:6;overflow:visible;stroke-linecap:round;stroke-linejoin:round}#navbar{display:flex;flex-direction:row;align-items:center;justify-content:space-evenly;position:fixed;left:0;right:0;bottom:0;top:auto;border-top:solid 1px rgba(var(--text-color),.2);border-right:none;z-index:3;background:rgba(var(--foreground-color),1)}#navbar .navbar-item{position:relative;text-align:center;cursor:pointer;padding:.3em;margin:.3em;border-radius:.4em;color:rgba(var(--text-color),.8);font-size:.8em;text-transform:capitalize;width:100%;font-weight:600}#navbar .navbar-item h5{margin-top:.4em}#navbar .active{color:var(--accent-color)}.user-panel,.user-panel .grid P{color:rgba(var(--foreground-color),1)}#navbar .active .icon{stroke:var(--accent-color)}.banking{stroke-width:4}#home_page{padding:1rem 0 4rem}#home_page .left{padding:1.5rem 0;width:auto;background:rgba(var(--text-color),.06);border-radius:.6rem}#home_page .left h3,#home_page .left h4,#home_page .left p,#home_page sm-carousel::part(carousel){padding:0 1.5rem}#home_page .left h3{font-size:2rem;margin-bottom:1rem}#home_page .user-panel{margin:0 1.5rem}.user-panel{position:relative;padding:1.5rem;border-radius:.6rem;background:linear-gradient(135deg,var(--accent-color),#2F2B76);box-shadow:0 .1rem .1rem #00010,0 1rem 1rem -1rem #00010;align-self:flex-start}.request .action,.request button{align-self:flex-end}.user-panel .icon{stroke:rgba(var(--foreground-color),1)}.user-panel .copy-row{margin-bottom:1rem;padding-bottom:1rem;border-bottom:solid 1px rgba(var(--foreground-color),.3)}.user-panel sm-button{--text-color:rgba(var(--foreground-color), 1);background:rgba(var(--foreground-color),.2);border-radius:2rem}.user-panel .grid{gap:1.5rem;grid-template-columns:1fr 1fr;margin-top:1rem}.user-panel .grid h5{font-weight:500}.user-panel .grid h4{font-size:1.2rem}.user-panel .grid P{font-size:.8rem;opacity:.9;margin-bottom:0!important;max-width:30ch}.balance{display:grid;gap:0 1rem}.user-type{font-weight:500}.options-tab{margin:1rem 0}.options-tab .option{position:relative;display:flex;align-items:center;text-align:center;border-radius:.4rem;margin-right:1rem;margin-bottom:1rem;width:5rem;min-width:5rem;cursor:pointer}.options-tab .option .icon{height:3rem;width:3rem;padding:.8rem;stroke:var(--accent-color)}.options-tab .option h4{font-size:.9rem;font-weight:500}.options-tab .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)}.page .container-header,sm-tab-header{top:0;background:rgba(var(--foreground-color),1);z-index:2}sm-tab-header{position:sticky;margin-bottom:1rem;border-bottom:solid 1px rgba(var(--text-color),.2)}sm-tab::part(tab){padding:.8rem .4rem;text-transform:capitalize}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;text-transform:capitalize}.request h3,.request h4{margin-bottom:1.5rem}.copy-row h4,.request button{margin-bottom:0}.request h4:last-of-type{margin-bottom:0}.request .amount{font-size:1.4em}.request button{width:auto;margin-top:1.5rem}.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}.deposited::before{content:"+ "}.decline-request{margin-right:.5rem!important}.withdrawn{color:#d43125}.withdrawn::before{content:"- "}.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:4rem}.page .container-header{grid-template-areas:". ." "search search";gap:1rem;will-change:auto}.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;font-weight:500;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}.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 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;position:fixed;left:0}#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}#main_loader h3{width:100%;font-weight:400;word-spacing:.16em}#upi_txId_section .copy-row{margin-bottom:1.5rem}#send_amount_to_deposit{margin-bottom:0!important}@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}}#failure_section h4,#success_section h4{text-align:center;margin-top:1rem}#failure_svg,#success_svg{height:5rem;width:5rem;stroke-width:4;align-self:center;stroke:none;stroke-dasharray:50;fill:rgba(var(--text-color),.06);animation:popup 2s forwards infinite cubic-bezier(.175,.885,.32,1.275)}#success_svg polyline{fill:none;stroke:#00C853}#failure_svg line{stroke:#EF5350}@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%}}@media only screen and (min-width:640px){body{padding:0 2rem;margin-left:6rem}#confirmation,sm-popup::part(popup){width:24rem}#navbar{justify-content:center;flex-direction:column;align-items:stretch;left:0;bottom:0;top:0;right:auto;width:6rem;border-top:none;border-right:solid 1px rgba(var(--text-color),.2)}#navbar .navbar-item{border-radius:.5rem;width:auto;padding:.5rem 0;margin:.5rem .6rem}#navbar .navbar-item .icon{height:1.4rem;width:1.4rem}#navbar .navbar-item:hover{background:rgba(var(--foreground-color),.2)}#navbar .navbar-item.active{background:rgba(var(--foreground-color),1);color:var(--accent-color)}#navbar .navbar-item.active .icon{stroke:var(--accent-color)}.page{padding-bottom:2em}#sign_in_popup{width:24rem}#profile_page .copy-row{display:inline-flex}#deposit,#home_page{display:grid;gap:1.5rem;grid-template-columns:minmax(0,1fr) 24rem}}@media only screen and (min-width:800px){.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}.user-panel{position:sticky;top:1.5rem}}@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 (prefers-color-scheme:dark){:root{--text-color:238,238,238;--text-color-light:170,170,170;--foreground-color:26,26,26;--background-color:#111;--dark-shade:#1a1a1a}}@media (prefers-color-scheme:light){:root{--text-color:17,17,17;--text-color-light:85,85,85;--foreground-color:255,255,255;--background-color:#e8e8e8;--dark-shade:#dadada}}@media (prefers-color-scheme:no-preference){:root{--text-color:17,17,17;--text-color-light:85,85,85;--foreground-color:255,255,255;--background-color:#e8e8e8;--dark-shade:#dadada}}@media (any-hover:hover){.option:hover{background:rgba(var(--text-color),.1)}} \ No newline at end of file +.options-tab .option,button{transition:transform .3s;text-transform:capitalize;cursor:pointer}.icon,.loader{overflow:visible;fill:none}.action,button{position:relative}*{box-sizing:border-box;padding:0;margin:0;font-family:Roboto,sans-serif}button,h1,h2,h3,h4,h5{font-weight:600;font-family:Poppins,sans-serif}:root{scroll-behavior:smooth}body{--accent-color:#2237CD;--text-color:17,17,17;--text-color-light:85,85,85;--foreground-color:255,255,255;--background-color:#e8e8e8;--dark-shade:#dadada;background:var(--foreground-color);color:rgba(var(--text-color),1);font-size:16px}a{font-weight:600;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)}button{display:inline-flex;align-items:center;justify-content:center;padding:.6rem 1.2rem;border-radius:.3rem;color:var(--accent-color);border:none;background:rgba(var(--text-color),.1);-webkit-tap-highlight-color:transparent}.action,.align-center{align-items:center}button:focus{outline:solid thin}button:disabled{cursor:default;background:rgba(var(--text-color),.5)}.action,.action[disabled] .primary-btn{background:0 0}button:disabled~.loader{opacity:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=text]::-ms-clear{display:none;width:0;height:0}input[type=text]::-ms-reveal{display:none;width:0;height:0}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{display:none}input[type=number]{-moz-appearance:textfield}input:invalid{outline:0;box-shadow:none}::-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,.direction-column,.options-tab .option{flex-direction:column}.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}.loader{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}}.action{display:inline-flex;justify-content:center;padding: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}.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:inline-grid;align-items:center;grid-template-columns:auto 1fr;gap:.6rem .4rem;margin-right:1rem}#logo h4{letter-spacing:.06rem;word-spacing:.12rem}#logo h5{font-weight:400}#logo #main_logo{height:1.6rem;width:1.6rem;fill:rgba(var(--text-color),1);stroke:none}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);stroke-width:6;fill:none;height:2rem;padding:.5rem .5rem .5rem 0;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 .btns,#prompt .btns{display:flex;justify-content:right;width:100%}#confirmation .btns button,#prompt .btns button{background:0 0}details p,sm-popup .illustration{background:rgba(var(--text-color),.06)}#confirmation .btns button:first-of-type,#prompt .btns button:first-of-type{margin-right:.6em}.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}.complaint-placeholder h4,.complaint-placeholder h5,details p{border-radius:.2rem}sm-popup sm-input:not(:last-of-type){margin-bottom:1rem}sm-popup p{margin-block-end:1rem}sm-popup .action{margin-top:1.5rem}sm-popup .action h4{padding:.8rem 1.6rem}.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}details p{padding:.5rem 1rem;margin-bottom:0}#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:1rem;justify-content:space-between}.display-balance{gap:1rem;grid-auto-flow:row}.display-balance .balance{width:100%}.display-balance .icon{height:1.4rem;width:1.4rem;padding:.3rem;stroke-width:10;cursor:pointer}.icon{height:1.2rem;width:1.2rem;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;position:fixed;left:0;right:0;bottom:0;top:auto;border-top:solid 1px rgba(var(--text-color),.2);border-right:none;z-index:3;background:rgba(var(--foreground-color),1)}#navbar .navbar-item{position:relative;text-align:center;cursor:pointer;padding:.3em;margin:.3em;border-radius:.4em;color:rgba(var(--text-color),.8);font-size:.8em;text-transform:capitalize;width:100%;font-weight:600}#navbar .navbar-item h5{margin-top:.4em}#navbar .active{color:var(--accent-color)}.user-panel,.user-panel .grid P{color:rgba(var(--foreground-color),1)}#navbar .active .icon{stroke:var(--accent-color)}.banking{stroke-width:4}#home_page{padding:1rem 0 4rem}#home_page .left{padding:1.5rem 0;width:auto;background:rgba(var(--text-color),.06);border-radius:.6rem}#home_page .left h3,#home_page .left h4,#home_page .left p,#home_page sm-carousel::part(carousel){padding:0 1.5rem}#home_page .left h3{font-size:2rem;margin-bottom:1rem}#home_page .user-panel{margin:0 1.5rem}.user-panel{position:relative;padding:1.5rem;border-radius:.6rem;background:linear-gradient(135deg,var(--accent-color),#2F2B76);box-shadow:0 .1rem .1rem #00010,0 1rem 1rem -1rem #00010;align-self:flex-start}.request .action,.request button{align-self:flex-end}.user-panel .icon{stroke:rgba(var(--foreground-color),1)}.user-panel .copy-row{margin-bottom:1rem;padding-bottom:1rem;border-bottom:solid 1px rgba(var(--foreground-color),.3)}.user-panel sm-button{--text-color:rgba(var(--foreground-color), 1);background:rgba(var(--foreground-color),.2);border-radius:2rem}.user-panel .grid{gap:1.5rem;grid-template-columns:1fr 1fr;margin-top:1rem}.user-panel .grid h5{font-weight:500}.user-panel .grid h4{font-size:1.2rem}.user-panel .grid P{font-size:.8rem;opacity:.9;margin-bottom:0!important;max-width:30ch}.balance{display:grid;gap:0 1rem}.user-type{font-weight:500}.options-tab{margin:1rem 0}.options-tab .option{position:relative;display:flex;align-items:center;text-align:center;border-radius:.4rem;margin-right:1rem;margin-bottom:1rem;width:5rem;min-width:5rem}.options-tab .option .icon{height:3rem;width:3rem;padding:.8rem;stroke:var(--accent-color)}.options-tab .option h4{font-size:.9rem;font-weight:500}.options-tab .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)}.page .container-header,sm-tab-header{top:0;background:rgba(var(--foreground-color),1);z-index:2}sm-tab-header{position:sticky;margin-bottom:1rem;border-bottom:solid 1px rgba(var(--text-color),.2)}sm-tab::part(tab){padding:.8rem .4rem;text-transform:capitalize}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;text-transform:capitalize}.request h3,.request h4{margin-bottom:1.5rem}.copy-row h4,.request button{margin-bottom:0}.request h4:last-of-type{margin-bottom:0}.request .amount{font-size:1.4em}.request button{width:auto;margin-top:1.5rem}.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}.deposited::before{content:"+ "}.decline-request{margin-right:.5rem!important}.withdrawn{color:#d43125}.withdrawn::before{content:"- "}.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:4rem}.page .container-header{grid-template-areas:". ." "search search";gap:1rem;will-change:auto}.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;font-weight:500;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}.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 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;position:fixed;left:0}#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}#main_loader h3{width:100%;font-weight:400;word-spacing:.16em}#upi_txId_section .copy-row{margin-bottom:1.5rem}#send_amount_to_deposit{margin-bottom:0!important}@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}}#failure_section h4,#success_section h4{text-align:center;margin-top:1rem}#failure_svg,#success_svg{height:5rem;width:5rem;stroke-width:4;align-self:center;stroke:none;stroke-dasharray:50;fill:rgba(var(--text-color),.06);animation:popup 2s forwards infinite cubic-bezier(.175,.885,.32,1.275)}#success_svg polyline{fill:none;stroke:#00C853}#failure_svg line{stroke:#EF5350}@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%}}@media only screen and (min-width:640px){body{padding:0 2rem;margin-left:6rem}#confirmation,sm-popup::part(popup){width:24rem}#navbar{justify-content:center;flex-direction:column;align-items:stretch;left:0;bottom:0;top:0;right:auto;width:6rem;border-top:none;border-right:solid 1px rgba(var(--text-color),.2)}#navbar .navbar-item{border-radius:.5rem;width:auto;padding:.5rem 0;margin:.5rem .6rem}#navbar .navbar-item .icon{height:1.4rem;width:1.4rem}#navbar .navbar-item:hover{background:rgba(var(--foreground-color),.2)}#navbar .navbar-item.active{background:rgba(var(--foreground-color),1);color:var(--accent-color)}#navbar .navbar-item.active .icon{stroke:var(--accent-color)}.page{padding-bottom:2em}#sign_in_popup{width:24rem}#profile_page .copy-row{display:inline-flex}#deposit,#home_page{display:grid;gap:1.5rem;grid-template-columns:minmax(0,1fr) 24rem}}@media only screen and (min-width:800px){.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}.user-panel{position:sticky;top:1.5rem}}@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 (prefers-color-scheme:dark){:root{--text-color:238,238,238;--text-color-light:170,170,170;--foreground-color:26,26,26;--background-color:#111;--dark-shade:#1a1a1a}}@media (prefers-color-scheme:light){:root{--text-color:17,17,17;--text-color-light:85,85,85;--foreground-color:255,255,255;--background-color:#e8e8e8;--dark-shade:#dadada}}@media (prefers-color-scheme:no-preference){:root{--text-color:17,17,17;--text-color-light:85,85,85;--foreground-color:255,255,255;--background-color:#e8e8e8;--dark-shade:#dadada}}@media (any-hover:hover){.option:hover{background:rgba(var(--text-color),.1)}} \ No newline at end of file diff --git a/css/main.scss b/css/main.scss index e29fe66..f98fb62 100644 --- a/css/main.scss +++ b/css/main.scss @@ -452,6 +452,12 @@ sm-popup{ p{ margin-block-end: 1rem; } + .action{ + margin-top: 1.5rem; + h4{ + padding: 0.8rem 1.6rem; + } + } } .popup-header{ diff --git a/index.html b/index.html index 24ff9cf..9f13fc2 100644 --- a/index.html +++ b/index.html @@ -53,7 +53,7 @@ Sign In - +
close @@ -61,14 +61,6 @@

Send Rupee

-
+

+ Send +

+ + + +
@@ -89,14 +89,6 @@

Deposit rupee

-
deposit @@ -128,6 +120,14 @@ +

+ Continue +

+ + + +
@@ -137,14 +137,6 @@

Withdraw rupee

-
withdraw @@ -163,6 +155,14 @@ +

+ withdraw +

+ + + +
@@ -172,15 +172,6 @@

Request rupee

-
+

+ request +

+ + + +
@@ -200,14 +200,6 @@

Pay through cashier

-
@@ -227,6 +219,14 @@ +

+ pay +

+ + + +
@@ -272,10 +272,10 @@

Report

-
+
@@ -789,9 +789,9 @@ console.log("Starting the app! Please Wait!") floDapps.launchStartUp().then(async result => { console.log(`Welcome ${myFloID}`) + refresh_balance() await token_app.actions.doShreeGanesh(); userFloIdContainers.forEach(container => container.textContent = myFloID) - refresh_balance() hideLoader() }).catch(error => console.error(error)) } @@ -1269,19 +1269,11 @@ zIndex = 10; function showPopup(popup, permission) { - console.log(popupStack.peek()) - if (popupStack.peek() !== undefined){ - let prevPopup = document.getElementById(popupStack.peek().popup) - prevPopup.classList.add('stacked') - } + console.log(popupStack) let thisPopup = document.getElementById(popup); - popupStack.push({ - popup, - permission - }) zIndex++ thisPopup.setAttribute('style', `z-index: ${zIndex}`) - thisPopup.show(permission, popupStack) + popupStack = thisPopup.show(permission, popupStack) return thisPopup; } @@ -1289,51 +1281,45 @@ function hidePopup() { if (popupStack.peek() === undefined) return; - let { - permission, popup - } = popupStack.pop(); - let thisPopup = document.getElementById(popup), + thisPopup.hide() + } + + document.addEventListener('popupclosed', e => { + popupStack = e.detail.popupStack + let thisPopup = e.detail.popup, submitButton = thisPopup.querySelector('button[type="submit"]') if (submitButton) submitButton.disabled = true; - thisPopup.hide() - zIndex-- setTimeout(() => { if (thisPopup.querySelector('.action')) { btnLoading(thisPopup.querySelector('.action'), 'stop') thisPopup.querySelector("button[type='submit']").disabled = true; } }, 400) - if (popup === 'prompt') { - if (thisPopup.querySelector('sm-input').value == '') - thisPopup.querySelector('.cancel-btn').click() - } - } - - document.addEventListener('popupclosed', e => { - if (popupStack.peek() !== undefined){ - let prevPopup = document.getElementById(popupStack.peek().popup) - prevPopup.classList.remove('stacked') - } + zIndex-- 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; + break; case 'cash_transfer' : payingRequested = false; tokenReceiver.disabled = false tokenAmount.disabled = false - break; + break; case 'deposit_rupee': depositRequested = 0; document.getElementById('upi_txId_section').classList.add('hide-completely') document.getElementById('deposit_amount_section').classList.remove('hide-completely') depositedRupeeTxId.disabled = true document.getElementById('request_tokens_btn').children[0].textContent = 'Continue' - break; + break; + case 'prompt': + if (thisPopup.querySelector('sm-input').value == '') + thisPopup.querySelector('.cancel-btn').click() + break } }) @@ -10572,6 +10558,8 @@ deposits_flo_txids: {}, cash_sent_details: {}, pay_thru_cashier: {}, + //user UPIs + userUpis: {} } //add other given objectStores for (o in this.appObs) @@ -11086,32 +11074,32 @@ } 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)); } - - @@ -1544,6 +1569,7 @@ } } }) + let currentRequest = null; document.getElementById('activity_page').addEventListener('click', (e) => { if (e.target.closest('.report')) { @@ -11132,10 +11158,7 @@ { "FCja6sLv58e3RMy41T5AmWyvXEWesqBCkX": { "upi_id": "8507742774@ybl" - } - }` - /* - , + }, "FHW2kgYEhDt85vjAiMMF7bQqdP74L7iwvQ": { "upi_id": "8340617958@ybl" }, @@ -11151,7 +11174,7 @@ "FQ6udJuTbGDa2kWZAkmNpwgHaUEeYLPAtt": { "upi_id": "krishraj1012-2@okicici" } - */ + }` text = removeWhiteSpaces(text); return text; const master_data = await ajaxGet( @@ -11233,14 +11256,6 @@ // fetch configs from master comment await this.fetch_configs(); - await this.retrieveLatestContent(); - - request_rupee_token(); - - withdraw_token_to_get_cash(); - - transferTokensManually(); - const allCashierOptions = document.querySelectorAll('.cashier-option'), allUserOptions = document.querySelectorAll('.user-option'), allHelplineOptions = document.querySelectorAll('.helpline-option'), @@ -11303,9 +11318,18 @@ userType.forEach(user => user.textContent = 'User') showPage(document.getElementById('home_page_btn'), 'home_page') } + hidePopup() + await this.retrieveLatestContent(); + + request_rupee_token(); + + withdraw_token_to_get_cash(); + + transferTokensManually(); + pay_through_cashier(); }, @@ -11602,7 +11626,6 @@ }); notify(`Transfer successful: ${flo_txid}`, 'success', true, true); - return true; } } catch (error) { @@ -12024,7 +12047,7 @@ document.getElementById('deposit_amount_section').classList.add('hide-completely') depositedRupeeTxId.disabled = false request_tokens_btn.disabled = true - request_tokens_btn.children[0].textContent = 'Deposit' + request_tokens_btn.children[0].textContent = 'Request' } if (depositRequested === 1) { btnLoading('request_tokens_btn', 'start') From 08a16aabcc3b709ade59d01473d9d2d9656dc479 Mon Sep 17 00:00:00 2001 From: sairaj mote Date: Sat, 19 Sep 2020 01:38:59 +0530 Subject: [PATCH 08/42] 0.0.34 --- components.js | 19 +++- css/Asset 1.svg | 1 + css/card-back.svg | 1 + css/main.css | 32 ++++++- css/main.min.css | 2 +- css/main.scss | 34 +++++-- index.html | 237 +++++++++++++++++++++++++--------------------- 7 files changed, 204 insertions(+), 122 deletions(-) create mode 100644 css/Asset 1.svg create mode 100644 css/card-back.svg diff --git a/components.js b/components.js index cb404b5..a4dcee8 100644 --- a/components.js +++ b/components.js @@ -368,7 +368,7 @@ customElements.define('sm-input', this.dispatchEvent(event); } - checkInput = () => { + checkInput = (e) => { if (!this.hasAttribute('placeholder') || this.getAttribute('placeholder') === '') return; if (this.input.value !== '') { @@ -397,6 +397,8 @@ customElements.define('sm-input', this.helperText = this.shadowRoot.querySelector('.helper-text') this.valueChanged = false; this.readonly = false + this.min + this.max this.animate = this.hasAttribute('animate') this.input = this.shadowRoot.querySelector('input') this.shadowRoot.querySelector('.label').textContent = this.getAttribute('placeholder') @@ -410,6 +412,12 @@ customElements.define('sm-input', if (this.hasAttribute('min')) { let minValue = this.getAttribute('min') this.input.setAttribute('min', minValue) + this.min = parseInt(minValue) + } + if (this.hasAttribute('max')) { + let maxValue = this.getAttribute('max') + this.input.setAttribute('max', maxValue) + this.max = parseInt(maxValue) } if (this.hasAttribute('pattern')) { this.input.setAttribute('pattern', this.getAttribute('pattern')) @@ -1817,6 +1825,15 @@ customElements.define('sm-popup', class extends HTMLElement { this.popupContainer.classList.remove('hide') this.popup.style.transform = 'translateY(0)'; document.body.setAttribute('style', `overflow: hidden; top: -${window.scrollY}px`) + this.dispatchEvent( + new CustomEvent("popupopened", { + bubbles: true, + detail: { + popup: this, + popupStack: this.popupStack + } + }) + ) return this.popupStack } hide = () => { diff --git a/css/Asset 1.svg b/css/Asset 1.svg new file mode 100644 index 0000000..c3fe1b0 --- /dev/null +++ b/css/Asset 1.svg @@ -0,0 +1 @@ +Asset 1 \ No newline at end of file diff --git a/css/card-back.svg b/css/card-back.svg new file mode 100644 index 0000000..729f67a --- /dev/null +++ b/css/card-back.svg @@ -0,0 +1 @@ +card-back \ No newline at end of file diff --git a/css/main.css b/css/main.css index 41fe967..13fc135 100644 --- a/css/main.css +++ b/css/main.css @@ -67,6 +67,10 @@ p { color: rgba(var(--text-color), 0.9); } +strong { + font-weight: 500; +} + button { position: relative; display: inline-flex; @@ -976,10 +980,26 @@ sm-panel { stroke-dashoffset: 0; } } -#success_section h4, #failure_section h4 { - text-align: center; +#transaction_result { + z-index: 12; +} +#transaction_result::part(popup) { + background-image: url(card-back.svg); + background-size: cover; + background-position-y: -4rem; + background-repeat: no-repeat; +} +#transaction_result .copy-row { margin-top: 1rem; } +#transaction_result h4, #transaction_result p { + text-align: center; +} +#transaction_result > h4 { + font-size: 1.2rem; + margin-top: 6rem; + margin-bottom: 0.5rem; +} #success_svg, #failure_svg { height: 5rem; @@ -988,8 +1008,8 @@ sm-panel { align-self: center; stroke: none; stroke-dasharray: 50; - fill: rgba(var(--text-color), 0.06); - animation: popup 2s forwards infinite cubic-bezier(0.175, 0.885, 0.32, 1.275); + fill: rgba(var(--foreground-color), 0.8); + animation: popup 2s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275); } #success_svg polyline { @@ -1007,6 +1027,10 @@ sm-panel { fill: rgba(var(--text-color), 0.5); } +#deposit_rupee .copy-row { + margin-bottom: 1rem; +} + @media only screen and (max-width: 640px) { #home_page, #deposit { display: grid; diff --git a/css/main.min.css b/css/main.min.css index c0397d7..08a44fe 100644 --- a/css/main.min.css +++ b/css/main.min.css @@ -1 +1 @@ -.options-tab .option,button{-webkit-tap-highlight-color:transparent;transition:transform .3s;text-transform:capitalize;cursor:pointer}.icon,.loader{overflow:visible;fill:none}.action,button{position:relative}*{box-sizing:border-box;padding:0;margin:0;font-family:Roboto,sans-serif}button,h1,h2,h3,h4,h5{font-weight:600;font-family:Poppins,sans-serif}:root{scroll-behavior:smooth}body{--accent-color:#2237CD;--text-color:17,17,17;--text-color-light:85,85,85;--foreground-color:255,255,255;--background-color:#e8e8e8;--dark-shade:#dadada;background:linear-gradient(rgba(var(--foreground-color),.1),rgba(var(--foreground-color),.3)),url(back.svg) no-repeat fixed;color:rgba(var(--text-color),1);font-size:16px;background-size:cover}a{font-weight:600;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)}button{display:inline-flex;align-items:center;justify-content:center;padding:.6rem 1.2rem;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}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=text]::-ms-clear{display:none;width:0;height:0}input[type=text]::-ms-reveal{display:none;width:0;height:0}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{display:none}input[type=number]{-moz-appearance:textfield}input:invalid{outline:0;box-shadow:none}::-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,.direction-column,.options-tab .option{flex-direction:column}.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}.loader{stroke-width:10;stroke:var(--accent-color);height:2rem;width:2rem;stroke-dashoffset:230;stroke-dasharray:230;padding:2px;justify-self:center}#logo,.action{align-items:center}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes load{50%{stroke-dashoffset:0}100%{stroke-dashoffset:-210}}.action{display:inline-flex;justify-content:center;padding:0;background:0 0}.action[disabled] .primary-btn{background:0 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}.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:inline-grid;grid-template-columns:auto 1fr;gap:.6rem .4rem;margin-right:1rem}#logo h4{letter-spacing:.06rem;word-spacing:.12rem}#logo h5{font-weight:400}#logo #main_logo{height:1.6rem;width:1.6rem;fill:rgba(var(--text-color),1);stroke:none}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);stroke-width:6;fill:none;height:2rem;padding:.5rem .5rem .5rem 0;cursor:pointer}#navbar .active .icon,sm-popup .illustration{stroke:var(--accent-color)}.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 .btns,#prompt .btns{display:flex;justify-content:right;width:100%}#confirmation .btns button,#prompt .btns button{background:0 0}details p,sm-popup .illustration{background:rgba(var(--text-color),.06)}#confirmation .btns button:first-of-type,#prompt .btns button:first-of-type{margin-right:.6em}.refresh{margin-top:.6em;margin-bottom:1em}sm-popup .illustration{position:relative;height:4rem;width:4rem;padding:1rem;margin-bottom:1rem;border-radius:5rem}.complaint-placeholder h4,.complaint-placeholder h5,details p{border-radius:.2rem}sm-popup sm-input:not(:last-of-type){margin-bottom:1rem}sm-popup p{margin-block-end:1rem}sm-popup .action{margin-top:1.5rem}sm-popup .action h4{padding:.8rem 1.6rem}.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}details p{padding:.5rem 1rem;margin-bottom:0}#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:1rem;justify-content:space-between}.display-balance{gap:1rem;grid-auto-flow:row}.display-balance .balance{width:100%}.display-balance .icon{height:1.4rem;width:1.4rem;padding:.3rem;stroke-width:10;cursor:pointer}.icon{height:1.2rem;width:1.2rem;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;position:fixed;left:0;right:0;bottom:0;top:auto;border-top:solid 1px rgba(var(--text-color),.2);border-right:none;z-index:3;background:rgba(var(--foreground-color),1)}#navbar .navbar-item{position:relative;text-align:center;cursor:pointer;padding:.3em;margin:.3em;border-radius:.4em;color:rgba(var(--text-color),.8);font-size:.8em;text-transform:capitalize;width:100%;font-weight:600}#navbar .navbar-item h5{margin-top:.4em}#navbar .active{color:var(--accent-color)}.user-panel,.user-panel .grid P{color:rgba(var(--foreground-color),1)}.banking{stroke-width:4}#home_page{padding:1rem 0 4rem}#home_page .left{padding:1.5rem 0;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}#home_page .user-panel{margin:0 1.5rem}.user-panel{position:relative;padding:1.5rem;border-radius:.6rem;background:linear-gradient(135deg,var(--accent-color),#2F2B76);box-shadow:0 .1rem .1rem #00010,0 1rem 1rem -1rem #00010;align-self:flex-start}.request .action,.request button{align-self:flex-end}.user-panel .icon{stroke:rgba(var(--foreground-color),1)}.user-panel .copy-row{margin-bottom:1rem;padding-bottom:1rem;border-bottom:solid 1px rgba(var(--foreground-color),.3)}.user-panel sm-button{--text-color:rgba(var(--foreground-color), 1);background:rgba(var(--foreground-color),.2);border-radius:2rem}.user-panel .grid{gap:1.5rem;grid-template-columns:1fr 1fr;margin-top:1rem}.user-panel .grid h5{font-weight:500}.user-panel .grid h4{font-size:1.2rem}.user-panel .grid P{font-size:.8rem;opacity:.9;margin-bottom:0!important;max-width:30ch}.balance{display:grid;gap:0 1rem}.user-type{font-weight:500}.options-tab{margin:1rem 0}.options-tab>.grid{min-width:100vw;padding:0 1.5rem;grid-auto-flow:column;gap:.2rem}.options-tab .option{position:relative;display:flex;align-items:center;text-align:center;border-radius:.4rem;margin-bottom:1rem;width:5rem;min-width:5rem}.options-tab .option .icon{height:3rem;width:3rem;padding:.8rem;stroke:var(--accent-color)}.options-tab .option h4{font-size:.9rem;font-weight:500}.options-tab .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)}.page .container-header,sm-tab-header{top:0;background:rgba(var(--foreground-color),1);z-index:2}sm-tab-header{position:sticky;margin-bottom:1rem;border-bottom:solid 1px rgba(var(--text-color),.2)}sm-tab::part(tab){padding:.8rem .4rem;text-transform:capitalize}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;text-transform:capitalize}.request h3,.request h4{margin-bottom:1.5rem}.copy-row h4,.request button{margin-bottom:0}.request h4:last-of-type{margin-bottom:0}.request .amount{font-size:1.4em}.request button{width:auto;margin-top:1.5rem}.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}.deposited::before{content:"+ "}.decline-request{margin-right:.5rem!important}.withdrawn{color:#d43125}.withdrawn::before{content:"- "}.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:4rem}.page .container-header{grid-template-areas:". ." "search search";gap:1rem;will-change:auto}.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;font-weight:500;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}.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 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;position:fixed;left:0}#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}#main_loader h3{width:100%;font-weight:400;word-spacing:.16em}#upi_txId_section .copy-row{margin-bottom:1.5rem}#send_amount_to_deposit{margin-bottom:0!important}@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}}#failure_section h4,#success_section h4{text-align:center;margin-top:1rem}#failure_svg,#success_svg{height:5rem;width:5rem;stroke-width:4;align-self:center;stroke:none;stroke-dasharray:50;fill:rgba(var(--text-color),.06);animation:popup 2s forwards infinite 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)}@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;background:rgba(var(--text-color),.06)}sm-select{width:100%}}@media only screen and (min-width:640px){body{padding:0 2rem;margin-left:6rem}sm-popup{background:rgba(var(--foreground-color),1)}#confirmation,sm-popup::part(popup){width:24rem}#navbar{justify-content:center;flex-direction:column;align-items:stretch;left:0;bottom:0;top:0;right:auto;width:6rem;border-top:none;border-right:solid 1px rgba(var(--text-color),.2)}#navbar .navbar-item{border-radius:.5rem;width:auto;padding:.5rem 0;margin:.5rem .6rem}#navbar .navbar-item .icon{height:1.4rem;width:1.4rem}#navbar .navbar-item:hover{background:rgba(var(--foreground-color),.2)}#navbar .navbar-item.active{background:rgba(var(--foreground-color),1);color:var(--accent-color)}#navbar .navbar-item.active .icon{stroke:var(--accent-color)}.page{padding-bottom:2em}#sign_in_popup{width:24rem}#profile_page .copy-row{display:inline-flex}.options-tab>.grid{gap:1rem;min-width:auto}.options-tab .grid:first-of-type{padding-right:0}.options-tab .grid:last-of-type{padding-left:0}}@media only screen and (min-width:800px){.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}.user-panel{position:sticky;top:1.5rem}#deposit,#home_page{display:grid;gap:1.5rem;grid-template-columns:minmax(0,1fr) 24rem}}@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 (prefers-color-scheme:dark){:root{--text-color:238,238,238;--text-color-light:170,170,170;--foreground-color:26,26,26;--background-color:#111;--dark-shade:#1a1a1a}}@media (prefers-color-scheme:light){:root{--text-color:17,17,17;--text-color-light:85,85,85;--foreground-color:255,255,255;--background-color:#e8e8e8;--dark-shade:#dadada}}@media (prefers-color-scheme:no-preference){:root{--text-color:17,17,17;--text-color-light:85,85,85;--foreground-color:255,255,255;--background-color:#e8e8e8;--dark-shade:#dadada}}@media (any-hover:hover){.option:hover{background:rgba(var(--text-color),.1)}} \ No newline at end of file +.action,button{position:relative}a,h1,h2,h3,h4,h5{font-weight:600}.options-tab .option,button{-webkit-tap-highlight-color:transparent;transition:transform .3s}.icon,.loader{overflow:visible;fill:none}*{box-sizing:border-box;padding:0;margin:0;font-family:Roboto,sans-serif}button,h1,h2,h3,h4,h5{font-family:Poppins,sans-serif}:root{scroll-behavior:smooth}body{--accent-color:#2237CD;--text-color:17,17,17;--text-color-light:85,85,85;--foreground-color:255,255,255;--background-color:#e8e8e8;--dark-shade:#dadada;background:linear-gradient(rgba(var(--foreground-color),.1),rgba(var(--foreground-color),.3)),url(back.svg) no-repeat fixed;color:rgba(var(--text-color),1);font-size:16px;background-size:cover}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}#navbar .navbar-item,button{font-weight:600;text-transform:capitalize}button{display:inline-flex;align-items:center;justify-content:center;padding:.6rem 1.2rem;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)}.action,.action[disabled] .primary-btn{background:0 0}button:disabled~.loader{opacity:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.top-margin,sm-popup .action{margin-top:1.5rem}input[type=text]::-ms-clear{display:none;width:0;height:0}input[type=text]::-ms-reveal{display:none;width:0;height:0}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{display:none}input[type=number]{-moz-appearance:textfield}input:invalid{outline:0;box-shadow:none}::-moz-focus-inner{border:none}.bottom-padding{padding-bottom:1.5rem}.top-padding{padding-top:1em}.bottom-margin{margin-bottom:1.5rem}.flex{display:flex}.grid{display:grid}.grid-2{grid-template-columns:auto auto;gap:1em}#confirmation,#prompt,.direction-column,.options-tab .option{flex-direction:column}.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}.loader{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}}.action{display:inline-flex;justify-content:center;padding: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}.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:inline-grid;align-items:center;grid-template-columns:auto 1fr;gap:.6rem .4rem;margin-right:1rem}#logo h4{letter-spacing:.06rem;word-spacing:.12rem}#logo h5{font-weight:400}#logo #main_logo{height:1.6rem;width:1.6rem;fill:rgba(var(--text-color),1);stroke:none}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);stroke-width:6;fill:none;height:2rem;padding:.5rem .5rem .5rem 0;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 .btns,#prompt .btns{display:flex;justify-content:right;width:100%}#confirmation .btns button,#prompt .btns button{background:0 0}details p,sm-popup .illustration{background:rgba(var(--text-color),.06)}#confirmation .btns button:first-of-type,#prompt .btns button:first-of-type{margin-right:.6em}.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}.complaint-placeholder h4,.complaint-placeholder h5,details p{border-radius:.2rem}sm-popup sm-input:not(:last-of-type){margin-bottom:1rem}sm-popup p{margin-block-end:1rem}sm-popup .action h4{padding:.8rem 1.6rem}.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}details p{padding:.5rem 1rem;margin-bottom:0}#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:1rem;justify-content:space-between}.display-balance{gap:1rem;grid-auto-flow:row}.display-balance .balance{width:100%}.display-balance .icon{height:1.4rem;width:1.4rem;padding:.3rem;stroke-width:10;cursor:pointer}.icon{height:1.2rem;width:1.2rem;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;position:fixed;left:0;right:0;bottom:0;top:auto;border-top:solid 1px rgba(var(--text-color),.2);border-right:none;z-index:3;background:rgba(var(--foreground-color),1)}#navbar .navbar-item{position:relative;text-align:center;cursor:pointer;padding:.3em;margin:.3em;border-radius:.4em;color:rgba(var(--text-color),.8);font-size:.8em;width:100%}#navbar .navbar-item h5{margin-top:.4em}#navbar .active{color:var(--accent-color)}.user-panel,.user-panel .grid P{color:rgba(var(--foreground-color),1)}#navbar .active .icon{stroke:var(--accent-color)}.banking{stroke-width:4}#home_page{padding:1rem 0 4rem}#home_page .left{padding:1.5rem 0;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}#home_page .user-panel{margin:0 1.5rem}.user-panel{position:relative;padding:1.5rem;border-radius:.6rem;background:linear-gradient(135deg,var(--accent-color),#2F2B76);box-shadow:0 .1rem .1rem #00010,0 1rem 1rem -1rem #00010;align-self:flex-start}.request .action,.request button{align-self:flex-end}.user-panel .icon{stroke:rgba(var(--foreground-color),1)}.user-panel .copy-row{margin-bottom:1rem;padding-bottom:1rem;border-bottom:solid 1px rgba(var(--foreground-color),.3)}.user-panel sm-button{--text-color:rgba(var(--foreground-color), 1);background:rgba(var(--foreground-color),.2);border-radius:2rem}.user-panel .grid{gap:1.5rem;grid-template-columns:1fr 1fr;margin-top:1rem}.user-panel .grid h5{font-weight:500}.user-panel .grid h4{font-size:1.2rem}.user-panel .grid P{font-size:.8rem;opacity:.9;margin-bottom:0!important;max-width:30ch}.balance{display:grid;gap:0 1rem}.user-type{font-weight:500}.options-tab{margin:1rem 0}.options-tab>.grid{min-width:100vw;padding:0 1.5rem;grid-auto-flow:column;gap:.2rem}.options-tab .option{position:relative;display:flex;align-items:center;text-align:center;border-radius:.4rem;margin-bottom:1rem;width:5rem;min-width:5rem;text-transform:capitalize;cursor:pointer}.options-tab .option .icon{height:3rem;width:3rem;padding:.8rem;stroke:var(--accent-color)}.options-tab .option h4{font-size:.9rem;font-weight:500}.options-tab .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)}.page .container-header,sm-tab-header{top:0;background:rgba(var(--foreground-color),1);z-index:2}sm-tab-header{position:sticky;margin-bottom:1rem;border-bottom:solid 1px rgba(var(--text-color),.2)}sm-tab::part(tab){padding:.8rem .4rem;text-transform:capitalize}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;text-transform:capitalize}.request h3,.request h4{margin-bottom:1.5rem}.copy-row h4,.request button{margin-bottom:0}.request h4:last-of-type{margin-bottom:0}.request .amount{font-size:1.4em}.request button{width:auto;margin-top:1.5rem}.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}.deposited::before{content:"+ "}.decline-request{margin-right:.5rem!important}.withdrawn{color:#d43125}.withdrawn::before{content:"- "}.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:4rem}.page .container-header{grid-template-areas:". ." "search search";gap:1rem;will-change:auto}.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;font-weight:500;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}.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 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;position:fixed;left:0}#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}#main_loader h3{width:100%;font-weight:400;word-spacing:.16em}#upi_txId_section .copy-row{margin-bottom:1.5rem}#send_amount_to_deposit{margin-bottom:0!important}@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}}#transaction_result{z-index:12}#transaction_result::part(popup){background-image:url(card-back.svg);background-size:cover;background-position-y:-4rem;background-repeat:no-repeat}#transaction_result .copy-row{margin-top:1rem}#transaction_result h4,#transaction_result p{text-align:center}#transaction_result>h4{font-size:1.2rem;margin-top:6rem;margin-bottom:.5rem}#failure_svg,#success_svg{height:5rem;width:5rem;stroke-width:4;align-self:center;stroke:none;stroke-dasharray:50;fill:rgba(var(--foreground-color),.8);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}@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;background:rgba(var(--text-color),.06)}sm-select{width:100%}}@media only screen and (min-width:640px){body{padding:0 2rem;margin-left:6rem}sm-popup{background:rgba(var(--foreground-color),1)}#confirmation,sm-popup::part(popup){width:24rem}#navbar{justify-content:center;flex-direction:column;align-items:stretch;left:0;bottom:0;top:0;right:auto;width:6rem;border-top:none;border-right:solid 1px rgba(var(--text-color),.2)}#navbar .navbar-item{border-radius:.5rem;width:auto;padding:.5rem 0;margin:.5rem .6rem}#navbar .navbar-item .icon{height:1.4rem;width:1.4rem}#navbar .navbar-item:hover{background:rgba(var(--foreground-color),.2)}#navbar .navbar-item.active{background:rgba(var(--foreground-color),1);color:var(--accent-color)}#navbar .navbar-item.active .icon{stroke:var(--accent-color)}.page{padding-bottom:2em}#sign_in_popup{width:24rem}#profile_page .copy-row{display:inline-flex}.options-tab>.grid{gap:1rem;min-width:auto}.options-tab .grid:first-of-type{padding-right:0}.options-tab .grid:last-of-type{padding-left:0}}@media only screen and (min-width:800px){.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}.user-panel{position:sticky;top:1.5rem}#deposit,#home_page{display:grid;gap:1.5rem;grid-template-columns:minmax(0,1fr) 24rem}}@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 (prefers-color-scheme:dark){:root{--text-color:238,238,238;--text-color-light:170,170,170;--foreground-color:26,26,26;--background-color:#111;--dark-shade:#1a1a1a}}@media (prefers-color-scheme:light){:root{--text-color:17,17,17;--text-color-light:85,85,85;--foreground-color:255,255,255;--background-color:#e8e8e8;--dark-shade:#dadada}}@media (prefers-color-scheme:no-preference){:root{--text-color:17,17,17;--text-color-light:85,85,85;--foreground-color:255,255,255;--background-color:#e8e8e8;--dark-shade:#dadada}}@media (any-hover:hover){.option:hover{background:rgba(var(--text-color),.1)}} \ No newline at end of file diff --git a/css/main.scss b/css/main.scss index 7956fe0..00d1473 100644 --- a/css/main.scss +++ b/css/main.scss @@ -66,7 +66,9 @@ p { max-width: 60ch; color: rgba(var(--text-color), 0.9); } - +strong{ + font-weight: 500; +} button { position: relative; display: inline-flex; @@ -1047,11 +1049,25 @@ sm-panel{ stroke-dashoffset: 0; } } -#success_section, #failure_section{ - h4{ - text-align: center; +#transaction_result{ + z-index: 12; + &::part(popup){ + background-image: url(card-back.svg); + background-size: cover; + background-position-y: -4rem; + background-repeat: no-repeat; + } + .copy-row{ margin-top: 1rem; } + h4, p{ + text-align: center; + } + & > h4{ + font-size: 1.2rem; + margin-top: 6rem; + margin-bottom: 0.5rem; + } } #success_svg, #failure_svg{ height: 5rem; @@ -1060,8 +1076,8 @@ sm-panel{ align-self: center; stroke: none; stroke-dasharray: 50; - fill: rgba(var(--text-color), 0.06); - animation: popup 2s forwards infinite cubic-bezier(0.175, 0.885, 0.32, 1.275); + fill: rgba(var(--foreground-color), 0.8); + animation: popup 2s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275); } #success_svg{ @@ -1082,6 +1098,12 @@ sm-panel{ fill: rgba(var(--text-color), 0.5); } +#deposit_rupee{ + .copy-row{ + margin-bottom: 1rem; + } +} + @media only screen and (max-width: 640px) { #home_page, #deposit{ display: grid; diff --git a/index.html b/index.html index 18be366..f8a280f 100644 --- a/index.html +++ b/index.html @@ -68,10 +68,10 @@

Send rupee to any FLO address.
- *Requires Rupee to be deposited first. + Make sure you hav enough balance.

- + rupee-symbol @@ -105,34 +105,30 @@ d="M54.39,32h6.08a3,3,0,0,1,3,3V44a3,3,0,0,1-3,3H54.39a7.49,7.49,0,0,1-7.49-7.49v0A7.49,7.49,0,0,1,54.39,32Z" /> - result -
-

- Add money through UPI. -

- - - rupee-symbol - - - -
-
-

-
-

- - Copy - - - -
- -
+

+ Add money through UPI. +

+ show +

Pay ₹0 to UPI Id below.

+
+

+ + Copy + + + +
+ + + rupee-symbol + + + +
-
+
success -

Transaction Successful

-
-

- - Copy - - - -
@@ -284,9 +271,17 @@ -

Transaction Failed

+

+
+

+ + Copy + + + +
@@ -356,7 +351,7 @@ -
Transactions
+
Activity
@@ -711,7 +706,7 @@
-

Transactions

+

Activity

*If your request isn't completed in 12hrs, use REPORT to get assistance from our helpline.

@@ -1308,10 +1303,18 @@ // hides the popup or modal function hidePopup() { if (popupStack.peek() === undefined) - return; - thisPopup.hide() + return; + popupStack.peek().popup.hide() } - + + document.addEventListener('popupopened', e => { + let thisPopup = e.detail.popup + switch(e.detail.popup.id){ + case 'deposit_rupee' : + request_rupee_token() + break; + } + }) document.addEventListener('popupclosed', e => { popupStack = e.detail.popupStack let thisPopup = e.detail.popup, @@ -1337,12 +1340,12 @@ tokenReceiver.disabled = false tokenAmount.disabled = false break; - case 'deposit_rupee': - depositRequested = 0; - document.getElementById('upi_txId_section').classList.add('hide-completely') - document.getElementById('deposit_amount_section').classList.remove('hide-completely') - depositedRupeeTxId.disabled = true - document.getElementById('request_tokens_btn').children[0].textContent = 'Continue' + case 'transaction_result' : + transactionHeading.textContent = '' + transactionMessage.innerHTML = '' + transactionSuccessId.textContent = '' + transactionSuccessSection.classList.add('hide-completely') + transactionFailedSection.classList.add('hide-completely') break; case 'prompt': if (thisPopup.querySelector('sm-input').value == '') @@ -1508,15 +1511,21 @@ submitBtn.disabled = true; } - let allForms = document.querySelectorAll('form'), - payingRequested = false, + let payingRequested = false, currentPaymentRequest; - const tokenReceiver = document.getElementById('token_receiver'), - tokenAmount = document.getElementById('token_amount') + const tokenReceiver = document.getElementById('token_receiver'), + tokenAmount = document.getElementById('token_amount'), + depositRupeeAmount = document.getElementById('token_amount_to_buy') + window.addEventListener('load', () => { document.addEventListener('input', e => { if (e.target.closest('sm-input')) { - formValidation(e.target.closest('sm-input')) + let input = e.target.closest('sm-input') + formValidation(input) + if(input.id === 'token_amount_to_buy'){ + let amount = input.value < 1 ? 0 : input.value + document.getElementById('send_amount_to_deposit').innerHTML = `Pay ₹${amount} to UPI Id below.`; + } } }) document.addEventListener('keyup', (e) => { @@ -1602,7 +1611,7 @@ senderAddress = parent.dataset.senderAddress, amount = parent.dataset.amount, paymentRequestId = parent.dataset.paymentRequestId;; - let popup = showPopup('cash_transfer'); + showPopup('cash_transfer'); payingRequested = true; currentPaymentRequest = { paymentRequest: parent, @@ -1648,6 +1657,27 @@ }) + 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 showTrasactionStatus(status, heading, message, transactionId){ + transactionHeading.textContent = heading + transactionMessage.innerHTML = message + transactionSuccessId.textContent = transactionId + if(status === 'success'){ + transactionSuccessSection.classList.remove('hide-completely') + transactionFailedSection.classList.add('hide-completely') + } + else{ + transactionSuccessSection.classList.add('hide-completely') + transactionFailedSection.classList.remove('hide-completely') + } + showPopup('transaction_result') + } + let allPages = document.querySelectorAll('.page'), allTabs = document.querySelectorAll('.navbar-item'); @@ -11158,7 +11188,10 @@ { "FCja6sLv58e3RMy41T5AmWyvXEWesqBCkX": { "upi_id": "8507742774@ybl" - }, + } + }` + /* + , "FHW2kgYEhDt85vjAiMMF7bQqdP74L7iwvQ": { "upi_id": "8340617958@ybl" }, @@ -11174,7 +11207,7 @@ "FQ6udJuTbGDa2kWZAkmNpwgHaUEeYLPAtt": { "upi_id": "krishraj1012-2@okicici" } - }` + */ text = removeWhiteSpaces(text); return text; const master_data = await ajaxGet( @@ -11318,9 +11351,6 @@ userType.forEach(user => user.textContent = 'User') showPage(document.getElementById('home_page_btn'), 'home_page') } - - - hidePopup() await this.retrieveLatestContent(); @@ -11709,14 +11739,12 @@ if (token_receiver.length < 1 || !floCrypto.validateAddr(token_receiver)) { err_msg = `Invalid receiver FLO address.`; notify(err_msg, 'error'); - hidePopup(); return false; } if (typeof sender_token_balance !== "object") { err_msg = `Failed to load Sender balance.`; notify(err_msg, 'error'); - hidePopup() return false; } @@ -11782,23 +11810,25 @@ } const get_user_unconfirmed_rupee_balance = await get_unconfirmed_balance(myFloID, get_user_rupee_balance.balance); - const get_user_flo_balance = await floBlockchainAPI.getBalance(myFloID) - console.log(get_user_flo_balance) if (typeof get_user_unconfirmed_rupee_balance == "number" && !isNaN(get_user_unconfirmed_rupee_balance)) { document.querySelectorAll('.uncnf-token-balance').forEach(elem => elem.textContent = get_user_unconfirmed_rupee_balance); } + /* + const get_user_flo_balance = await floBlockchainAPI.getBalance(myFloID) + console.log(get_user_flo_balance) if (typeof get_user_flo_balance !== "number" || isNaN(get_user_flo_balance)) { get_user_flo_balance = 0; } - document.querySelectorAll('.flo-balance').forEach(elem => elem.textContent = get_user_flo_balance); + document.querySelectorAll('.flo-balance').forEach(elem => elem.textContent = get_user_flo_balance);*/ } if (refreshButton) { notify('Balance Updated') - refreshButton.classList.remove('animate-loader') + refreshButton.textContent = 'Check Balance' } return true; } catch (error) { + notify("Unable to load balance", 'error') throw new Error(error); } } @@ -12030,48 +12060,37 @@ @@ -819,6 +844,7 @@ floDapps.launchStartUp().then(async result => { console.log(`Welcome ${myFloID}`) refresh_balance() + renderUserUPI() userFloIdContainers.forEach(container => container.textContent = myFloID) hideLoader() await token_app.actions.doShreeGanesh(); @@ -1559,14 +1585,19 @@ } function areInputsValid(parent) { - let allInputs = parent.querySelectorAll("sm-input:not([disabled])"); - return [...allInputs].every(input => { - if(input.hasAttribute('floId')){ - if(floCrypto.validateAddr(input.value.trim())) return true - } - else - return input.isValid - }) + let allInputs = parent.querySelectorAll("sm-input:not([disabled])"), + inputsFilled = [...allInputs].every(input => { + if(input.hasAttribute('floId')){ + if(floCrypto.validateAddr(input.value.trim())) return true + } + else + return input.isValid + }) + let allRadios = parent.querySelectorAll("input[type='radio']") + if(allRadios.length) + return inputsFilled && parent.querySelector('[checked]') + else + return inputsFilled } function formValidation(formElement) { @@ -1760,14 +1791,62 @@ }) document.getElementById(page).classList.remove('hide-completely') btn.classList.add('active', 'shrink') - if (page === 'activity_page') { - show_user_activities() - } if (page === 'request_page') { show_payment_requests() } } + const addUpiInput = document.getElementById('add_upi_input') + let defaultUPI = localStorage.getItem('defaultUPI') + + async function addUserUPI() { + userUPI = addUpiInput.value + compactIDB.addData('userUPIs', userUPI, userUPI) + .then( success => { + if(!defaultUPI) + setDefaultUPI(userUPI) + notify('UPI address added', 'success') + hidePopup() + renderUserUPI() + }) + .catch (error => { + notify('UPI address already added.', 'error') + throw new Error(error); + }) + } + + function setDefaultUPI(upiAddress){ + localStorage.setItem('defaultUPI', upiAddress) + defaultUPI = upiAddress + } + 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': '' + radios += ` + ' + } + container.innerHTML = `
Select UPI address
` + radios + }) + + } + function signIn() { return new Promise((resolve, reject) => { hideLoader() @@ -10688,7 +10767,7 @@ cash_sent_details: {}, pay_thru_cashier: {}, //user UPIs - userUpis: {} + userUPIs: {} } //add other given objectStores for (o in this.appObs) @@ -11416,19 +11495,20 @@ allUserOptions.forEach(option => { option.classList.remove('hide-completely') }) + userType.forEach(user => user.textContent = 'User') show_user_activities() show_payment_requests() - userType.forEach(user => user.textContent = 'User') showPage(document.getElementById('home_page_btn'), 'home_page') } - await this.retrieveLatestContent(); - + withdraw_token_to_get_cash(); - + transferTokensManually(); pay_through_cashier(); + + await this.retrieveLatestContent(); }, retrieveLatestContent: async function (receiverID = floGlobals.adminID, senderIDs = floGlobals @@ -12164,14 +12244,21 @@ } } + + const withdrawRupeePopup = document.getElementById('withdraw_rupee') function withdraw_token_to_get_cash() { try { const withdraw_cash_btn = document.getElementById('withdraw_cash_btn') const cashier = randomNoRepeats(Object.keys(token_app.master_configurations.cashiers))(); withdraw_cash_btn.onclick = async function () { + let selectedUPI = withdrawRupeePopup.querySelector('input[type="radio"]:checked'); + if(!selectedUPI){ + notify('Add an UPI address to withdraw money.', 'error') + return + } btnLoading('withdraw_cash_btn', 'start') const withdraw_cash_amount = Number(document.getElementById('withdraw_cash_amount').value); - const user_withdraw_upi = String(document.getElementById('user_withdraw_upi').value); + const user_withdraw_upi = selectedUPI.value const token_balance_url = `https://ranchimallflo.duckdns.org/api/v1.0/getFloAddressBalance?token=rupee&floAddress=${myFloID}`; const user_token_balance_object = await ajaxGet(token_balance_url); @@ -12226,6 +12313,7 @@ } } + const payCashierPopup = document.getElementById('pay_anyone') function pay_through_cashier() { try { const cashier = randomNoRepeats(Object.keys(token_app.master_configurations.cashiers))(); @@ -12238,11 +12326,16 @@ const cnf_cash_payment_btn = document.getElementById('cnf_cash_payment') cnf_cash_payment_btn.onclick = function () { + let selectedUPI = payCashierPopup.querySelector('input[type="radio"]:checked'); + if(!selectedUPI){ + notify('Add an UPI address to pay through cashier.', 'error') + return + } btnLoading('withdraw_cash_btn', 'start') const paying_amount_div = document.getElementById('recvr_amount_to_pay') const recvr_id = document.getElementById('recvr_id').value; let amount_to_pay = Number(paying_amount_div.value); - let paid_cashier_upi = document.getElementById('paid_cashier_upi').value; + let paid_cashier_upi = selectedUPI.value; paid_cashier_upi = toAlphanumeric(paid_cashier_upi); if (recvr_id.length < 1 || !floCrypto.validateAddr(recvr_id) || @@ -12261,9 +12354,10 @@ senderIDs: [myFloID] }); - notify(`You have sent cash to
${recvr_id}
through our cashier service (${cashier_upi}). - Once the cashier receives your payment, he will transfer it to ${recvr_id}.`, '', true, true); hidePopup() + showTrasactionStatus('success', 'Pay through cashier Request sent.', `Sent to: ${recvr_id}
+ through cashier UPI: ${cashier_upi}.

+ Once the cashier receives your payment, they will transfer it to intended receiver.`); } } catch (error) { @@ -12575,22 +12669,6 @@ } } - async function update_my_payment_details(userUpi='') { - try { - - compactIDB.writeData('userUpis', userUpi, userUpi) - - console.log(await compactIDB.readAllData('userUpis')) - - notify('Your payment details updated successfully.') - - return true; - - } catch (error) { - throw new Error(error); - } - } - From a5f4f8de0628241e1a118b012fe76a7a0c698329 Mon Sep 17 00:00:00 2001 From: sairaj mote Date: Tue, 22 Sep 2020 21:04:42 +0530 Subject: [PATCH 11/42] 0.0.37 --- css/main.css | 18 +- css/main.min.css | 2 +- css/main.scss | 16 +- index.html | 646 +++++++++++++++++++++++++---------------------- 4 files changed, 370 insertions(+), 312 deletions(-) diff --git a/css/main.css b/css/main.css index 4dd73a0..c048556 100644 --- a/css/main.css +++ b/css/main.css @@ -427,11 +427,13 @@ sm-popup sm-input:not(:last-of-type) { sm-popup p { margin-block-end: 1rem; } -sm-popup .action { - margin-top: 1.5rem; -} sm-popup .action h4 { - padding: 0.8rem 1.6rem; + padding: 0.5rem 1rem; + font-weight: 500; +} +sm-popup h5:not(.tag) { + margin-bottom: 0.4rem; + margin-top: 1rem; } .popup-header { @@ -1044,7 +1046,7 @@ sm-panel { padding: 1rem 1.2rem; gap: 0 1rem; grid-template-columns: auto 1fr auto; - grid-template-areas: "icon type amount" "icon time time"; + grid-template-areas: "icon type amount" "icon receiver time"; max-width: 70ch; } .activity .icon { @@ -1058,6 +1060,11 @@ sm-panel { .activity .activity-type { grid-area: type; text-transform: capitalize; + font-weight: 400; + font-size: 0.9rem; +} +.activity .activity-receiver { + grid-area: receiver; font-weight: 500; } .activity .activity-amount { @@ -1079,7 +1086,6 @@ sm-panel { padding: 0.8rem 1rem; border-radius: 0.3rem; background: rgba(var(--text-color), 0.1); - margin-top: 1rem; align-items: center; cursor: pointer; } diff --git a/css/main.min.css b/css/main.min.css index 33f9a07..157a8ea 100644 --- a/css/main.min.css +++ b/css/main.min.css @@ -1 +1 @@ -a,h1,h2,h3,h4,h5{font-weight:600}.options-tab .option,button{-webkit-tap-highlight-color:transparent;transition:transform .3s;text-transform:capitalize}*{box-sizing:border-box;padding:0;margin:0;font-family:Roboto,sans-serif}button,h1,h2,h3,h4,h5{font-family:Poppins,sans-serif}:root{scroll-behavior:smooth}body{--accent-color:#2237CD;--text-color:17,17,17;--text-color-light:85,85,85;--foreground-color:255,255,255;--background-color:#e8e8e8;--dark-shade:#dadada;background:linear-gradient(rgba(var(--foreground-color),.1),rgba(var(--foreground-color),.3)),url(back.svg) no-repeat fixed;color:rgba(var(--text-color),1);font-size:16px;background-size:cover}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{position:relative;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)}.action,.action[disabled] .primary-btn{background:0 0}button:disabled~.loader{opacity:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=text]::-ms-clear{display:none;width:0;height:0}input[type=text]::-ms-reveal{display:none;width:0;height:0}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{display:none}input[type=number]{-moz-appearance:textfield}input:invalid{outline:0;box-shadow:none}::-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,.direction-column,.options-tab .option{flex-direction:column}.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}.loader{fill:none;stroke-width:10;stroke:var(--accent-color);height:2rem;width:2rem;overflow:visible;stroke-dashoffset:230;stroke-dasharray:230;padding:2px;justify-self:center}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes load{50%{stroke-dashoffset:0}100%{stroke-dashoffset:-210}}.action{position:relative;display:inline-flex;justify-content:center;padding: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}.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:inline-grid;align-items:center;grid-template-columns:auto 1fr;gap:.6rem .4rem;margin-right:1rem}#logo h4{letter-spacing:.06rem;word-spacing:.12rem}#logo h5{font-weight:400}#logo #main_logo{height:1.6rem;width:1.6rem;fill:rgba(var(--text-color),1);stroke:none}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);stroke-width:6;fill:none;height:2rem;padding:.5rem .5rem .5rem 0;cursor:pointer}.card{border-radius:.6rem;padding:1.5em;background:rgba(var(--foreground-color),1)}.solid-background{background:rgba(var(--foreground-color),1)!important}.activity,.activity .icon,details p,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}sm-popup sm-input:not(:last-of-type){margin-bottom:1rem}sm-popup p{margin-block-end:1rem}sm-popup .action{margin-top:1.5rem}sm-popup .action h4{padding:.8rem 1.6rem}.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}details p{border-radius:.2rem;padding:.5rem 1rem;margin-bottom:0}#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:1rem;justify-content:space-between}.display-balance{gap:1rem;grid-auto-flow:row}.display-balance .balance{width:100%}.display-balance .icon{height:1.4rem;width:1.4rem;padding:.3rem;stroke-width:10;cursor:pointer}.icon,.select .radio{width:1.2rem;height:1.2rem;fill:none}.icon{stroke:rgba(var(--text-color),.8);stroke-width:6;overflow:visible;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;border-top:solid 1px rgba(var(--text-color),.2);border-right:none;z-index:3;background:rgba(var(--foreground-color),1)}#navbar .navbar-item{position:relative;text-align:center;cursor:pointer;padding:.3em;margin:.3em;border-radius:.4em;color:rgba(var(--text-color),.8);font-size:.8em;text-transform:capitalize;width:100%;font-weight:600}#navbar .navbar-item h5{margin-top:.4em}#navbar .active{color:var(--accent-color)}.user-panel,.user-panel .grid P{color:rgba(var(--foreground-color),1)}#navbar .active .icon{stroke:var(--accent-color)}.banking{stroke-width:4}#home_page{padding:1rem 0 4rem}#home_page .left{padding:1.5rem 0;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}#home_page .user-panel{margin:0 1.5rem}.user-panel{position:relative;padding:1.5rem;border-radius:.6rem;background:linear-gradient(135deg,var(--accent-color),#2F2B76);box-shadow:0 .1rem .1rem #00010,0 1rem 1rem -1rem #00010;align-self:flex-start}.user-panel .icon{stroke:rgba(var(--foreground-color),1)}.user-panel .copy-row{margin-bottom:1rem;padding-bottom:1rem;border-bottom:solid 1px rgba(var(--foreground-color),.3)}.user-panel sm-button{--text-color:rgba(var(--foreground-color), 1);background:rgba(var(--foreground-color),.2);border-radius:2rem}.user-panel .grid{gap:1.5rem;grid-template-columns:1fr 1fr;margin-top:1rem}.user-panel .grid h5{font-weight:500}.user-panel .grid h4{font-size:1.2rem}.user-panel .grid P{font-size:.8rem;opacity:.9;margin-bottom:0!important;max-width:30ch}.complaint .processed,.deposited{color:#007732}.balance{display:grid;gap:0 1rem}.user-type{font-weight:500}.options-tab{margin:1rem 0}.options-tab>.grid{min-width:100vw;padding:0 1.5rem;grid-auto-flow:column;gap:.2rem}.options-tab .option{position:relative;display:flex;align-items:center;text-align:center;border-radius:.4rem;margin-bottom:1rem;width:5rem;min-width:5rem;cursor:pointer}.options-tab .option .icon{height:3rem;width:3rem;padding:.8rem;stroke:var(--accent-color)}.options-tab .option h4{font-size:.9rem;font-weight:500}.options-tab .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)}.page .container-header,sm-tab-header{background:rgba(var(--foreground-color),1);z-index:2;top:0}sm-tab-header{position:sticky;margin-bottom:1rem;border-bottom:solid 1px rgba(var(--text-color),.2)}sm-tab::part(tab){padding:.8rem .4rem;text-transform:capitalize}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;text-transform:capitalize}.request h3,.request h4{margin-bottom:1.5rem}.copy-row h4,.request button{margin-bottom:0}.request h4:last-of-type{margin-bottom:0}.request .action{align-self:flex-end}.request .amount{font-size:1.4em}.request button{width:auto;align-self:flex-end;margin-top:1.5rem}.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::before{content:"+ "}.decline-request{margin-right:.5rem!important}.withdrawn{color:#d43125}.withdrawn::before{content:"- "}.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;will-change:auto}.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;font-weight:500;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 .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 .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}#main_loader h3{width:100%;font-weight:400;word-spacing:.16em}#upi_txId_section .copy-row{margin-bottom:1.5rem}#send_amount_to_deposit{margin-bottom:0!important}@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}}#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 .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:6rem;margin-bottom:.5rem}#failure_svg,#success_svg{height:5rem;width:5rem;stroke-width:4;align-self:center;stroke:none;stroke-dasharray:50;fill:rgba(var(--foreground-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 time time";max-width:70ch}.activity .icon{grid-area:icon;height:3rem;width:3rem;padding:.8rem;border-radius:2rem}.activity .activity-type{grid-area:type;text-transform:capitalize;font-weight:500}.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}.select{max-width:50ch;position:relative;display:flex;width:100%;padding:.8rem 1rem;border-radius:.3rem;background:rgba(var(--text-color),.1);margin-top:1rem;align-items:center;cursor:pointer}.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 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{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 .tag{opacity:.6;font-weight:500;margin-left:auto}.select h4{font-weight:400}.select .outer{position:absolute;left:0;right:0;top:0;bottom:0;pointer-events:none}.add-upi{margin-top:.4rem;justify-self:flex-start;width:max-content}@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;background:rgba(var(--text-color),.06)}sm-select{width:100%}}@media only screen and (min-width:640px){body{padding:0 2rem;margin-left:6rem}sm-popup{background:rgba(var(--foreground-color),1)}#confirmation,sm-popup::part(popup){width:24rem}#navbar{justify-content:center;flex-direction:column;align-items:stretch;left:0;bottom:0;top:0;right:auto;width:6rem;border-top:none;border-right:solid 1px rgba(var(--text-color),.2)}#navbar .navbar-item{border-radius:.5rem;width:auto;padding:.5rem 0;margin:.5rem .6rem}#navbar .navbar-item .icon{height:1.4rem;width:1.4rem}#navbar .navbar-item:hover{background:rgba(var(--foreground-color),.2)}#navbar .navbar-item.active{background:rgba(var(--foreground-color),1);color:var(--accent-color)}#navbar .navbar-item.active .icon{stroke:var(--accent-color)}.page{padding-bottom:2rem}#sign_in_popup{width:24rem}.options-tab>.grid{gap:1rem;min-width:auto}.options-tab .grid:first-of-type{padding-right:0}.options-tab .grid:last-of-type{padding-left:0}#settings_page .copy-row{display:inline-grid}}@media only screen and (min-width:800px){.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}.user-panel{position:sticky;top:1.5rem}#deposit,#home_page{display:grid;gap:1.5rem;grid-template-columns:minmax(0,1fr) 24rem}}@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 (prefers-color-scheme:dark){:root{--text-color:238,238,238;--text-color-light:170,170,170;--foreground-color:26,26,26;--background-color:#111;--dark-shade:#1a1a1a}}@media (prefers-color-scheme:light){:root{--text-color:17,17,17;--text-color-light:85,85,85;--foreground-color:255,255,255;--background-color:#e8e8e8;--dark-shade:#dadada}}@media (prefers-color-scheme:no-preference){:root{--text-color:17,17,17;--text-color-light:85,85,85;--foreground-color:255,255,255;--background-color:#e8e8e8;--dark-shade:#dadada}}@media (any-hover:hover){.option:hover{background:rgba(var(--text-color),.1)}} \ No newline at end of file +a,h1,h2,h3,h4,h5{font-weight:600}.options-tab .option,button{-webkit-tap-highlight-color:transparent;transition:transform .3s;text-transform:capitalize;cursor:pointer}*{box-sizing:border-box;padding:0;margin:0;font-family:Roboto,sans-serif}button,h1,h2,h3,h4,h5{font-family:Poppins,sans-serif}:root{scroll-behavior:smooth}body{--accent-color:#2237CD;--text-color:17,17,17;--text-color-light:85,85,85;--foreground-color:255,255,255;--background-color:#e8e8e8;--dark-shade:#dadada;background:linear-gradient(rgba(var(--foreground-color),.1),rgba(var(--foreground-color),.3)),url(back.svg) no-repeat fixed;color:rgba(var(--text-color),1);font-size:16px;background-size:cover}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{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:.6rem 1.2rem;font-weight:600;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)}.action,.action[disabled] .primary-btn{background:0 0}button:disabled~.loader{opacity:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=text]::-ms-clear{display:none;width:0;height:0}input[type=text]::-ms-reveal{display:none;width:0;height:0}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{display:none}input[type=number]{-moz-appearance:textfield}input:invalid{outline:0;box-shadow:none}::-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,.direction-column,.options-tab .option{flex-direction:column}.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}.loader{fill:none;stroke-width:10;stroke:var(--accent-color);height:2rem;width:2rem;overflow:visible;stroke-dashoffset:230;stroke-dasharray:230;padding:2px;justify-self:center}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes load{50%{stroke-dashoffset:0}100%{stroke-dashoffset:-210}}.action{position:relative;display:inline-flex;align-items:center;justify-content:center;padding: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}.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:inline-grid;align-items:center;grid-template-columns:auto 1fr;gap:.6rem .4rem;margin-right:1rem}#logo h4{letter-spacing:.06rem;word-spacing:.12rem}#logo h5{font-weight:400}#logo #main_logo{height:1.6rem;width:1.6rem;fill:rgba(var(--text-color),1);stroke:none}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);stroke-width:6;fill:none;height:2rem;padding:.5rem .5rem .5rem 0;cursor:pointer}.card{border-radius:.6rem;padding:1.5em;background:rgba(var(--foreground-color),1)}.solid-background{background:rgba(var(--foreground-color),1)!important}.activity,.activity .icon,details p,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}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 h5:not(.tag){margin-bottom:.4rem;margin-top:1rem}.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}details p{border-radius:.2rem;padding:.5rem 1rem;margin-bottom:0}#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:1rem;justify-content:space-between}.display-balance{gap:1rem;grid-auto-flow:row}.display-balance .balance{width:100%}.display-balance .icon{height:1.4rem;width:1.4rem;padding:.3rem;stroke-width:10;cursor:pointer}.icon,.select .radio{width:1.2rem;fill:none}.icon{height:1.2rem;stroke:rgba(var(--text-color),.8);stroke-width:6;overflow:visible;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;border-top:solid 1px rgba(var(--text-color),.2);border-right:none;z-index:3;background:rgba(var(--foreground-color),1)}#navbar .navbar-item{position:relative;text-align:center;cursor:pointer;padding:.3em;margin:.3em;border-radius:.4em;color:rgba(var(--text-color),.8);font-size:.8em;text-transform:capitalize;width:100%;font-weight:600}#navbar .navbar-item h5{margin-top:.4em}#navbar .active{color:var(--accent-color)}.user-panel,.user-panel .grid P{color:rgba(var(--foreground-color),1)}#navbar .active .icon{stroke:var(--accent-color)}.banking{stroke-width:4}#home_page{padding:1rem 0 4rem}#home_page .left{padding:1.5rem 0;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}#home_page .user-panel{margin:0 1.5rem}.user-panel{position:relative;padding:1.5rem;border-radius:.6rem;background:linear-gradient(135deg,var(--accent-color),#2F2B76);box-shadow:0 .1rem .1rem #00010,0 1rem 1rem -1rem #00010;align-self:flex-start}.user-panel .icon{stroke:rgba(var(--foreground-color),1)}.user-panel .copy-row{margin-bottom:1rem;padding-bottom:1rem;border-bottom:solid 1px rgba(var(--foreground-color),.3)}.user-panel sm-button{--text-color:rgba(var(--foreground-color), 1);background:rgba(var(--foreground-color),.2);border-radius:2rem}.user-panel .grid{gap:1.5rem;grid-template-columns:1fr 1fr;margin-top:1rem}.user-panel .grid h5{font-weight:500}.user-panel .grid h4{font-size:1.2rem}.user-panel .grid P{font-size:.8rem;opacity:.9;margin-bottom:0!important;max-width:30ch}.complaint .processed,.deposited{color:#007732}.balance{display:grid;gap:0 1rem}.user-type{font-weight:500}.options-tab{margin:1rem 0}.options-tab>.grid{min-width:100vw;padding:0 1.5rem;grid-auto-flow:column;gap:.2rem}.options-tab .option{position:relative;display:flex;align-items:center;text-align:center;border-radius:.4rem;margin-bottom:1rem;width:5rem;min-width:5rem}.options-tab .option .icon{height:3rem;width:3rem;padding:.8rem;stroke:var(--accent-color)}.options-tab .option h4{font-size:.9rem;font-weight:500}.options-tab .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)}.page .container-header,sm-tab-header{background:rgba(var(--foreground-color),1);z-index:2;top:0}sm-tab-header{position:sticky;margin-bottom:1rem;border-bottom:solid 1px rgba(var(--text-color),.2)}sm-tab::part(tab){padding:.8rem .4rem;text-transform:capitalize}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;text-transform:capitalize}.request h3,.request h4{margin-bottom:1.5rem}.copy-row h4,.request button{margin-bottom:0}.request h4:last-of-type{margin-bottom:0}.request .action{align-self:flex-end}.request .amount{font-size:1.4em}.request button{width:auto;align-self:flex-end;margin-top:1.5rem}.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::before{content:"+ "}.decline-request{margin-right:.5rem!important}.withdrawn{color:#d43125}.withdrawn::before{content:"- "}.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;will-change:auto}.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;font-weight:500;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 .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 .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}#main_loader h3{width:100%;font-weight:400;word-spacing:.16em}#upi_txId_section .copy-row{margin-bottom:1.5rem}#send_amount_to_deposit{margin-bottom:0!important}@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}}#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 .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:6rem;margin-bottom:.5rem}#failure_svg,#success_svg{height:5rem;width:5rem;stroke-width:4;align-self:center;stroke:none;stroke-dasharray:50;fill:rgba(var(--foreground-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";max-width:70ch}.activity .icon{grid-area:icon;height:3rem;width:3rem;padding:.8rem;border-radius:2rem}.activity .activity-type{grid-area:type;text-transform:capitalize;font-weight:400;font-size:.9rem}.activity .activity-receiver{grid-area:receiver;font-weight:500}.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}.select{max-width:50ch;position:relative;display:flex;width:100%;padding:.8rem 1rem;border-radius:.3rem;background:rgba(var(--text-color),.1);align-items:center;cursor:pointer}.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 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{height:1.2rem;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 .tag{opacity:.6;font-weight:500;margin-left:auto}.select h4{font-weight:400}.select .outer{position:absolute;left:0;right:0;top:0;bottom:0;pointer-events:none}.add-upi{margin-top:.4rem;justify-self:flex-start;width:max-content}@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;background:rgba(var(--text-color),.06)}sm-select{width:100%}}@media only screen and (min-width:640px){body{padding:0 2rem;margin-left:6rem}sm-popup{background:rgba(var(--foreground-color),1)}#confirmation,sm-popup::part(popup){width:24rem}#navbar{justify-content:center;flex-direction:column;align-items:stretch;left:0;bottom:0;top:0;right:auto;width:6rem;border-top:none;border-right:solid 1px rgba(var(--text-color),.2)}#navbar .navbar-item{border-radius:.5rem;width:auto;padding:.5rem 0;margin:.5rem .6rem}#navbar .navbar-item .icon{height:1.4rem;width:1.4rem}#navbar .navbar-item:hover{background:rgba(var(--foreground-color),.2)}#navbar .navbar-item.active{background:rgba(var(--foreground-color),1);color:var(--accent-color)}#navbar .navbar-item.active .icon{stroke:var(--accent-color)}.page{padding-bottom:2rem}#sign_in_popup{width:24rem}.options-tab>.grid{gap:1rem;min-width:auto}.options-tab .grid:first-of-type{padding-right:0}.options-tab .grid:last-of-type{padding-left:0}#settings_page .copy-row{display:inline-grid}}@media only screen and (min-width:800px){.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}.user-panel{position:sticky;top:1.5rem}#deposit,#home_page{display:grid;gap:1.5rem;grid-template-columns:minmax(0,1fr) 24rem}}@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 (prefers-color-scheme:dark){:root{--text-color:238,238,238;--text-color-light:170,170,170;--foreground-color:26,26,26;--background-color:#111;--dark-shade:#1a1a1a}}@media (prefers-color-scheme:light){:root{--text-color:17,17,17;--text-color-light:85,85,85;--foreground-color:255,255,255;--background-color:#e8e8e8;--dark-shade:#dadada}}@media (prefers-color-scheme:no-preference){:root{--text-color:17,17,17;--text-color-light:85,85,85;--foreground-color:255,255,255;--background-color:#e8e8e8;--dark-shade:#dadada}}@media (any-hover:hover){.option:hover{background:rgba(var(--text-color),.1)}} \ No newline at end of file diff --git a/css/main.scss b/css/main.scss index 2be36f2..5ee3879 100644 --- a/css/main.scss +++ b/css/main.scss @@ -448,11 +448,15 @@ sm-popup{ margin-block-end: 1rem; } .action{ - margin-top: 1.5rem; h4{ - padding: 0.8rem 1.6rem; + padding: 0.5rem 1rem; + font-weight: 500; } } + h5:not(.tag){ + margin-bottom: 0.4rem; + margin-top: 1rem; + } } .popup-header{ @@ -1115,7 +1119,7 @@ sm-panel{ padding: 1rem 1.2rem; gap: 0 1rem; grid-template-columns: auto 1fr auto; - grid-template-areas: 'icon type amount' 'icon time time'; + grid-template-areas: 'icon type amount' 'icon receiver time'; max-width: 70ch; .icon{ grid-area: icon; @@ -1128,6 +1132,11 @@ sm-panel{ .activity-type{ grid-area: type; text-transform: capitalize; + font-weight: 400; + font-size: 0.9rem; + } + .activity-receiver{ + grid-area: receiver; font-weight: 500; } .activity-amount{ @@ -1149,7 +1158,6 @@ sm-panel{ padding: 0.8rem 1rem; border-radius: 0.3rem; background: rgba(var(--text-color), 0.1); - margin-top: 1rem; align-items: center; cursor: pointer; &:first-of-type:not(:last-of-type){ diff --git a/index.html b/index.html index 35228d0..704bced 100644 --- a/index.html +++ b/index.html @@ -61,6 +61,14 @@

Send Rupee

+
-
@@ -94,6 +94,14 @@

Deposit

+
deposit @@ -125,14 +133,6 @@ -

- Deposit -

- - - -
@@ -142,6 +142,14 @@

Withdraw rupee

+
withdraw @@ -163,16 +171,10 @@ + +
Withdraw To
+ Add UPI address -
@@ -182,6 +184,15 @@

Request rupee

+
-
@@ -215,6 +217,14 @@

Pay through cashier

+
@@ -237,17 +247,10 @@ +
Send from
Add an UPI address for completing the transaction.
+ Add UPI address -
@@ -292,17 +295,17 @@

Add UPI address

+
- @@ -313,10 +316,10 @@

Report

+ -
@@ -747,11 +750,11 @@

You haven't deposited rupee yet.

-
+

You haven't withdrawn rupee yet.

 -
+

You haven't paid through cashier yet.

 @@ -844,8 +847,9 @@ floDapps.launchStartUp().then(async result => { console.log(`Welcome ${myFloID}`) refresh_balance() - renderUserUPI() userFloIdContainers.forEach(container => container.textContent = myFloID) + defaultUPI = localStorage.getItem(`defaultUPI${myFloID}`) + renderUserUPI() hideLoader() await token_app.actions.doShreeGanesh(); }).catch(error => console.error(error)) @@ -855,7 +859,8 @@ let frag = document.createDocumentFragment(), currentTimeout, notificationSound = document.getElementById('notification_sound'); - const render = { + let defaultUPI + const render = { depositRequest(txid, floId) { let card = document.createElement('div'); card.classList.add('request') @@ -911,11 +916,14 @@ `; return card; }, - activityCard(type, amount, timesStamp){ + activityCard(obj){ + console.log(obj) + let {type, amount, timeStamp, receiver} = obj; let card = document.createElement('div'), composition = ``, icon, - sign + sign, + transaction card.classList.add('activity') switch(type){ case 'sent': @@ -926,6 +934,7 @@ ` sign = '-' + transaction = 'Sent to' break; case 'deposit': icon = ` @@ -941,6 +950,7 @@ ` sign = '+' + transaction = 'Deposited' break; case 'withdraw': icon = ` @@ -957,111 +967,33 @@ ` sign = '-' + transaction = 'withdrawn to' + break; + case 'payCashier': + icon = ` + + + + + ` + sign = '-' + transaction = 'Paid to' break; } - composition = ` + composition += ` ${icon} -

${type}

+

${transaction}

` + if(receiver) + composition += ` +

${receiver}

+ ` + composition += `

${sign} ₹${amount}

-
${formatedTime(timesStamp)}
+
${formatedTime(timeStamp)}
` card.innerHTML = composition; return card; }, - depositActivity(vectorClock, txid, amount) { - let card = document.createElement('div'), - time = parseInt(vectorClock.split('_')[0]) - card.classList.add('request') - setAttributes(card, { - 'data-vector-clock': vectorClock, - 'data-type': 'deposit' - }) - card.innerHTML = `
${formatedTime(time)}
-
UPI Address
-
-

${txid}

- - Copy - - - -
-
Amount
-

₹${amount}

-
- -
`; - return card; - }, - withdrawActivity(vectorClock, txid, upi, amount) { - let card = document.createElement('div'), - time = parseInt(vectorClock.split('_')[0]) - card.classList.add('request') - let timeFrag = time.toString().split(' '); - setAttributes(card, { - 'data-vector-clock': vectorClock, - 'data-type': 'withdraw' - }) - card.innerHTML = `
${formatedTime(time)}
-
Transanction ID
-
-

${txid}

- - Copy - - - -
-
Withdrawn to
-

${upi}

-
Amount
-

₹${amount}

-
- -
`; - return card; - }, - payCashierActivity(vectorClock, receiver, upiTxid, amount) { - let card = document.createElement('div'), - time = parseInt(vectorClock.split('_')[0]) - card.classList.add('request') - let timeFrag = time.toString().split(' '); - setAttributes(card, { - 'data-vector-clock': vectorClock, - 'data-type': 'pay_thru_cashier' - }) - card.innerHTML = `
${formatedTime(time)}
-
UPI Address
-
-

${upiTxid}

- - Copy - - - -
-
Sent to
-
-

${receiver}

- - Copy - - - -
-
Amount
-

₹${amount}

-
- -
`; - return card; - }, paymentRequest(time, senderAddress, amount, id, enableActions) { let card = document.createElement('div') card.classList.add('request'), @@ -1550,6 +1482,8 @@ const currentYear = new Date().getFullYear() function formatedTime(time) { try { + if(time.indexOf('_')) + time = time.split('_')[0] let timeFrag = new Date(parseInt(time)).toString().split(' '), day = timeFrag[0], month = timeFrag[1], @@ -1797,7 +1731,7 @@ } const addUpiInput = document.getElementById('add_upi_input') - let defaultUPI = localStorage.getItem('defaultUPI') + async function addUserUPI() { userUPI = addUpiInput.value @@ -1816,7 +1750,7 @@ } function setDefaultUPI(upiAddress){ - localStorage.setItem('defaultUPI', upiAddress) + localStorage.setItem(`defaultUPI${myFloID}`, upiAddress) defaultUPI = upiAddress } const UPIContainers = document.querySelectorAll('.upi-container') @@ -1842,7 +1776,7 @@
Default
` radios += '' } - container.innerHTML = `
Select UPI address
` + radios + container.innerHTML = radios }) } @@ -11433,184 +11367,206 @@ return false; }, - doShreeGanesh: async function () { + doShreeGanesh: async function () { - // fetch configs from master comment - await this.fetch_configs(); + // fetch configs from master comment + await this.fetch_configs(); - const allCashierOptions = document.querySelectorAll('.cashier-option'), - allUserOptions = document.querySelectorAll('.user-option'), - allHelplineOptions = document.querySelectorAll('.helpline-option'), - userType = document.querySelectorAll('.user-type') + const allCashierOptions = document.querySelectorAll('.cashier-option'), + allUserOptions = document.querySelectorAll('.user-option'), + allHelplineOptions = document.querySelectorAll('.helpline-option'), + userType = document.querySelectorAll('.user-type') - //Cashier startup sequence - if (Object.keys(token_app.master_configurations.cashiers).includes(myFloID)) { - allCashierOptions.forEach(option => { - option.classList.remove('hide-completely') - }) - allUserOptions.forEach(option => { - option.classList.add('hide-completely') - }) - allHelplineOptions.forEach(option => { - option.classList.add('hide-completely') - }) - show_deposit_request() - show_withdraw_request() - showPayRequests() - userType.forEach(user => user.textContent = 'Cashier') - showPage(document.getElementById('deposit_page_btn'), 'deposit') - } + //Cashier startup sequence + if (Object.keys(token_app.master_configurations.cashiers).includes(myFloID)) { + allCashierOptions.forEach(option => { + option.classList.remove('hide-completely') + }) + allUserOptions.forEach(option => { + option.classList.add('hide-completely') + }) + allHelplineOptions.forEach(option => { + option.classList.add('hide-completely') + }) + show_deposit_request() + show_withdraw_request() + showPayRequests() + userType.forEach(user => user.textContent = 'Cashier') + showPage(document.getElementById('deposit_page_btn'), 'deposit') + } - //Helpline startup sequence - else if (token_app.master_configurations.helplineFloId === myFloID) { - allCashierOptions.forEach(option => { - option.classList.add('hide-completely') - }) - allHelplineOptions.forEach(option => { - option.classList.remove('hide-completely') - }) - allUserOptions.forEach(option => { - option.classList.add('hide-completely') - }) - let cashierList = ``, - cashierSelect = document.getElementById('select_cashier') - cashierList += `Select Cashier...`; - for (cashier in token_app.master_configurations.cashiers) - cashierList += `${cashier}` - cashierSelect.innerHTML = cashierList; - await Promise.all([load_deposit_complaints(cashierSelect.value), load_withdraw_complaints( - cashierSelect.value), load_pay_thru_cashier_complaints(cashierSelect.value)]) - userType.forEach(user => user.textContent = 'Cashier') - showPage(document.getElementById('helpline_page_btn'), 'helpline_page') - } + //Helpline startup sequence + else if (token_app.master_configurations.helplineFloId === myFloID) { + allCashierOptions.forEach(option => { + option.classList.add('hide-completely') + }) + allHelplineOptions.forEach(option => { + option.classList.remove('hide-completely') + }) + allUserOptions.forEach(option => { + option.classList.add('hide-completely') + }) + let cashierList = ``, + cashierSelect = document.getElementById('select_cashier') + cashierList += `Select Cashier...`; + for (cashier in token_app.master_configurations.cashiers) + cashierList += `${cashier}` + cashierSelect.innerHTML = cashierList; + await Promise.all([load_deposit_complaints(cashierSelect.value), load_withdraw_complaints( + cashierSelect.value), load_pay_thru_cashier_complaints(cashierSelect.value)]) + userType.forEach(user => user.textContent = 'Cashier') + showPage(document.getElementById('helpline_page_btn'), 'helpline_page') + } - //user startup sequence - else { - allCashierOptions.forEach(option => { - option.classList.add('hide-completely') - }) - allHelplineOptions.forEach(option => { - option.classList.add('hide-completely') - }) - allUserOptions.forEach(option => { - option.classList.remove('hide-completely') - }) - userType.forEach(user => user.textContent = 'User') - show_user_activities() - show_payment_requests() - showPage(document.getElementById('home_page_btn'), 'home_page') - } - - + //user startup sequence + else { + allCashierOptions.forEach(option => { + option.classList.add('hide-completely') + }) + allHelplineOptions.forEach(option => { + option.classList.add('hide-completely') + }) + allUserOptions.forEach(option => { + option.classList.remove('hide-completely') + }) + userType.forEach(user => user.textContent = 'User') + show_all_user_activities() + show_payment_requests() + showPage(document.getElementById('home_page_btn'), 'home_page') + withdraw_token_to_get_cash(); - + transferTokensManually(); pay_through_cashier(); + } + this.retrieveLatestContent(); + }, - await this.retrieveLatestContent(); - }, + retrieveLatestContent: async function (request_args='', receiverID = floGlobals.adminID, senderIDs = floGlobals + .subAdmins) { - retrieveLatestContent: async function (receiverID = floGlobals.adminID, senderIDs = floGlobals - .subAdmins) { + floCloudAPI.requestObjectData(floGlobals.application, { + receiverID, + senderIDs + }); - floCloudAPI.requestObjectData(floGlobals.application, { - receiverID, - senderIDs - }); + if (Object.keys(token_app.master_configurations.cashiers).includes(myFloID)) { - if (Object.keys(token_app.master_configurations.cashiers).includes(myFloID)) { + if(typeof request_args=='object' && typeof request_args.datatype=='string') { + return floCloudAPI.requestGeneralData(request_args.datatype, + request_args.options); + } - await Promise.all([ + await Promise.all([ + + create_root_structure(), + + floCloudAPI.requestGeneralData(token_app.master_configurations.TYPE_DEPOSITS, { + receiverID: myFloID + }), - create_root_structure(), + floCloudAPI.requestGeneralData(token_app.master_configurations.TYPE_WITHDRAWS, { + receiverID: myFloID + }), - floCloudAPI.requestGeneralData(token_app.master_configurations - .TYPE_DEPOSITS, { - receiverID: myFloID - }), + floCloudAPI.requestGeneralData(token_app.master_configurations.TYPE_MSGES, { + receiverID: myFloID + }), - floCloudAPI.requestGeneralData(token_app.master_configurations.TYPE_WITHDRAWS, { - receiverID: myFloID - }), + floCloudAPI.requestGeneralData(token_app.master_configurations.TYPE_PAY_THROUGH_CASHIER, { + receiverID: myFloID + }) + ]) - floCloudAPI.requestGeneralData(token_app.master_configurations.TYPE_MSGES, { - receiverID: myFloID - }), + return true; + } else if (token_app.master_configurations.helplineFloId === myFloID) { + await clearCashierData(); - floCloudAPI.requestGeneralData(token_app.master_configurations - .TYPE_PAY_THROUGH_CASHIER, { - receiverID: myFloID + if(typeof request_args=='object' && typeof request_args.datatype=='string') { + return floCloudAPI.requestGeneralData(request_args.datatype); + } + + await Promise.all([ + + create_root_structure(), + + floCloudAPI.requestGeneralData(token_app.master_configurations + .TYPE_FILE_DEPOSITS_COMPLAINT), + floCloudAPI.requestGeneralData(token_app.master_configurations + .TYPE_FILE_PAY_THROUGH_CASHIER_COMPLAINT), + floCloudAPI.requestGeneralData(token_app.master_configurations + .TYPE_FILE_WITHDRAWS_COMPLAINT), + floCloudAPI.requestGeneralData(token_app.master_configurations + .TYPE_PROCESSED_DEPOSITS_COMPLAINT), + floCloudAPI.requestGeneralData(token_app.master_configurations + .TYPE_PROCESSED_PAY_THROUGH_CASHIER_COMPLAINT), + floCloudAPI.requestGeneralData(token_app.master_configurations + .TYPE_PROCESSED_WITHDRAWS_COMPLAINT) + ]) + + return true; + } else { + + let promises = []; + + if(typeof request_args=='object' && typeof request_args.datatype=='string' + && request_args.datatype===token_app.master_configurations.TYPE_MSGES) { + await floCloudAPI.requestGeneralData(token_app.master_configurations.TYPE_MSGES, + {receiverID: myFloID}); + return true; + } else if(typeof request_args!=='object' || typeof request_args.datatype!=='string') { + let p4 = { + func: floCloudAPI.requestGeneralData, + arg1: token_app.master_configurations.TYPE_MSGES, + arg2: {receiverID: myFloID} + } + + promises.push(p4); + } + + for (let cashier in token_app.master_configurations.cashiers) { + if(typeof request_args=='object' && typeof request_args.datatype=='string') { + + promises.push({ + func: floCloudAPI.requestGeneralData, + arg1: request_args.datatype, + arg2: {receiverID: cashier, senderIDs: [myFloID]} }) - ]) - - return true; - } else if (token_app.master_configurations.helplineFloId === myFloID) { - await clearCashierData(); - - await Promise.all([ - - create_root_structure(), - - floCloudAPI.requestGeneralData(token_app.master_configurations - .TYPE_FILE_DEPOSITS_COMPLAINT), - floCloudAPI.requestGeneralData(token_app.master_configurations - .TYPE_FILE_PAY_THROUGH_CASHIER_COMPLAINT), - floCloudAPI.requestGeneralData(token_app.master_configurations - .TYPE_FILE_WITHDRAWS_COMPLAINT), - floCloudAPI.requestGeneralData(token_app.master_configurations - .TYPE_PROCESSED_DEPOSITS_COMPLAINT), - floCloudAPI.requestGeneralData(token_app.master_configurations - .TYPE_PROCESSED_PAY_THROUGH_CASHIER_COMPLAINT), - floCloudAPI.requestGeneralData(token_app.master_configurations - .TYPE_PROCESSED_WITHDRAWS_COMPLAINT) - ]) - - return true; - } else { - - let promises = []; - - for (let cashier in token_app.master_configurations.cashiers) { + + } else { let p1 = { - func: floCloudAPI.requestGeneralData, + func: floCloudAPI.requestGeneralData, arg1: token_app.master_configurations.TYPE_DEPOSITS, - arg2: { receiverID: cashier, senderIDs: [myFloID] } + arg2: {receiverID: cashier, senderIDs: [myFloID]} } - let p2 = { + let p2 = { func: floCloudAPI.requestGeneralData, arg1: token_app.master_configurations.TYPE_WITHDRAWS, - arg2: { receiverID: cashier, senderIDs: [myFloID] } + arg2: {receiverID: cashier, senderIDs: [myFloID]} } let p3 = { func: floCloudAPI.requestGeneralData, arg1: token_app.master_configurations.TYPE_PAY_THROUGH_CASHIER, - arg2: { receiverID: cashier, senderIDs: [myFloID] } + arg2: {receiverID: cashier, senderIDs: [myFloID]} } promises.push(p1, p2, p3); } - - let p4 = { - func: floCloudAPI.requestGeneralData, - arg1: token_app.master_configurations.TYPE_MSGES, - arg2: { receiverID: myFloID } - } - - promises.push(p4); - - await Promise.all(promises.map(prom => prom.func.call(floCloudAPI, prom.arg1, prom.arg2))); - - create_root_structure(); - - return promises; - } + await Promise.all(promises.map(prom => prom.func.call(floCloudAPI,prom.arg1, prom.arg2))); + + create_root_structure(); + + return promises; + } + } + } @@ -12370,9 +12326,9 @@ payCashierActivityContainer = document.getElementById('pay_cashier_activity_container'), cashierMessageContainer = document.getElementById('cashier_message_container') - async function show_user_activities() { + async function show_all_user_activities() { try { - await token_app.actions.retrieveLatestContent(); + //await token_app.actions.retrieveLatestContent(); const deposit_msg = floDapps.getNextGeneralData(token_app.master_configurations.TYPE_DEPOSITS, "0") .reverse(); @@ -12389,7 +12345,7 @@ upi_txid, deposit_amount } = usr_deposits.message; - frag.append(render.activityCard('deposit', deposit_amount, usr_deposits.vectorClock, upi_txid)) + frag.append(render.activityCard({type: 'deposit', amount: deposit_amount, timeStamp: usr_deposits.vectorClock, upi_txid})) } depositActivityContainer.innerHTML = ``; @@ -12401,7 +12357,7 @@ withdrawer_upi, withdraw_amount } = usr_withdraws.message; - frag.append(render.activityCard('withdraw', withdraw_amount, usr_withdraws.vectorClock, token_txid, withdrawer_upi)) + frag.append(render.activityCard({type: 'withdraw', amount: withdraw_amount, timeStamp: usr_withdraws.vectorClock, token_txid, receiver: withdrawer_upi})) } withdrawActivityContainer.innerHTML = ``; withdrawActivityContainer.append(frag) @@ -12413,8 +12369,7 @@ upi_txid, amount } = cashier_message.message; - frag.append(render.payCashierActivity(cashier_message.vectorClock, receiver_flo_id, upi_txid, - amount)) + frag.append(render.activityCard({type: 'payCashier', amount, timeStamp: cashier_message.vectorClock, receiver: receiver_flo_id, upi_txid})) } payCashierActivityContainer.innerHTML = ``; @@ -12431,6 +12386,95 @@ } } + async function show_specific_user_activities(req_type='') { + try { + if(req_type.length<1) return; + + let request_args = {}; + request_args.datatype = req_type; + request_args.options = {receiverID: cashier, senderIDs: [myFloID]}; + + if(req_type==token_app.master_configurations.TYPE_MSGES) + request_args.options = {receiverID: myFloID}; + + console.log(request_args); + + await token_app.actions.retrieveLatestContent(request_args); + + switch (req_type) { + case token_app.master_configurations.TYPE_DEPOSITS: + const deposit_msg = floDapps.getNextGeneralData(token_app.master_configurations.TYPE_DEPOSITS, "0") + .reverse(); + + for (usr_deposits of deposit_msg) { + let { + upi_txid, + deposit_amount + } = 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 = floDapps.getNextGeneralData(token_app.master_configurations.TYPE_WITHDRAWS, + "0").reverse(); + + for (usr_withdraws of withdraw_msg) { + let { + token_txid, + withdrawer_upi, + withdraw_amount + } = usr_withdraws.message; + frag.append(render.withdrawActivity(usr_withdraws.vectorClock, token_txid, withdrawer_upi, + withdraw_amount)) + } + withdrawActivityContainer.innerHTML = ``; + withdrawActivityContainer.append(frag) + break; + + case token_app.master_configurations.TYPE_MSGES: + const user_msg = floDapps.getNextGeneralData(token_app.master_configurations.TYPE_MSGES, "0") + .reverse(); + + for (cashier_message of pay_thru_cashier_msg) { + console.log(cashier_message) + let { + receiver_flo_id, + upi_txid, + amount + } = cashier_message.message; + frag.append(render.payCashierActivity(cashier_message.vectorClock, receiver_flo_id, upi_txid, + amount)) + } + + payCashierActivityContainer.innerHTML = ``; + payCashierActivityContainer.append(frag) + break; + + case token_app.master_configurations.TYPE_PAY_THROUGH_CASHIER: + const pay_thru_cashier_msg = floDapps.getNextGeneralData(token_app.master_configurations + .TYPE_PAY_THROUGH_CASHIER, "0").reverse(); + + for (msg of user_msg) { + frag.append(render.cashierMessage(msg)) + } + + cashierMessageContainer.innerHTML = ``; + cashierMessageContainer.append(frag) + + break; + default: + break; + } + + } catch (e) { + notify(e, 'error'); + } + } + async function file_complaint(order_type = '', order_vc = '', custom_msg = '') { try { let input_data = { From 2be4b84cc6a3af03500aec2bdc3e087f4074ed2d Mon Sep 17 00:00:00 2001 From: sairaj mote Date: Wed, 23 Sep 2020 01:22:10 +0530 Subject: [PATCH 12/42] 0.0.38 --- css/main.css | 14 +++++++------- css/main.min.css | 2 +- css/main.scss | 16 +++++++--------- index.html | 45 ++++++++++++++++++++++++++++++--------------- 4 files changed, 45 insertions(+), 32 deletions(-) diff --git a/css/main.css b/css/main.css index c048556..0658aae 100644 --- a/css/main.css +++ b/css/main.css @@ -759,9 +759,6 @@ sm-panel { .deposited { color: #007732; } -.deposited::before { - content: "+ "; -} .decline-request { margin-right: 0.5rem !important; @@ -770,9 +767,6 @@ sm-panel { .withdrawn { color: #d43125; } -.withdrawn::before { - content: "- "; -} .container { display: grid; @@ -1048,6 +1042,8 @@ sm-panel { grid-template-columns: auto 1fr auto; grid-template-areas: "icon type amount" "icon receiver time"; max-width: 70ch; + align-items: center; + cursor: pointer; } .activity .icon { grid-area: icon; @@ -1061,11 +1057,15 @@ sm-panel { grid-area: type; text-transform: capitalize; font-weight: 400; - font-size: 0.9rem; + font-size: 0.8rem; } .activity .activity-receiver { grid-area: receiver; font-weight: 500; + font-size: 0.9rem; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } .activity .activity-amount { text-align: right; diff --git a/css/main.min.css b/css/main.min.css index 157a8ea..2344284 100644 --- a/css/main.min.css +++ b/css/main.min.css @@ -1 +1 @@ -a,h1,h2,h3,h4,h5{font-weight:600}.options-tab .option,button{-webkit-tap-highlight-color:transparent;transition:transform .3s;text-transform:capitalize;cursor:pointer}*{box-sizing:border-box;padding:0;margin:0;font-family:Roboto,sans-serif}button,h1,h2,h3,h4,h5{font-family:Poppins,sans-serif}:root{scroll-behavior:smooth}body{--accent-color:#2237CD;--text-color:17,17,17;--text-color-light:85,85,85;--foreground-color:255,255,255;--background-color:#e8e8e8;--dark-shade:#dadada;background:linear-gradient(rgba(var(--foreground-color),.1),rgba(var(--foreground-color),.3)),url(back.svg) no-repeat fixed;color:rgba(var(--text-color),1);font-size:16px;background-size:cover}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{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:.6rem 1.2rem;font-weight:600;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)}.action,.action[disabled] .primary-btn{background:0 0}button:disabled~.loader{opacity:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=text]::-ms-clear{display:none;width:0;height:0}input[type=text]::-ms-reveal{display:none;width:0;height:0}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{display:none}input[type=number]{-moz-appearance:textfield}input:invalid{outline:0;box-shadow:none}::-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,.direction-column,.options-tab .option{flex-direction:column}.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}.loader{fill:none;stroke-width:10;stroke:var(--accent-color);height:2rem;width:2rem;overflow:visible;stroke-dashoffset:230;stroke-dasharray:230;padding:2px;justify-self:center}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes load{50%{stroke-dashoffset:0}100%{stroke-dashoffset:-210}}.action{position:relative;display:inline-flex;align-items:center;justify-content:center;padding: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}.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:inline-grid;align-items:center;grid-template-columns:auto 1fr;gap:.6rem .4rem;margin-right:1rem}#logo h4{letter-spacing:.06rem;word-spacing:.12rem}#logo h5{font-weight:400}#logo #main_logo{height:1.6rem;width:1.6rem;fill:rgba(var(--text-color),1);stroke:none}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);stroke-width:6;fill:none;height:2rem;padding:.5rem .5rem .5rem 0;cursor:pointer}.card{border-radius:.6rem;padding:1.5em;background:rgba(var(--foreground-color),1)}.solid-background{background:rgba(var(--foreground-color),1)!important}.activity,.activity .icon,details p,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}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 h5:not(.tag){margin-bottom:.4rem;margin-top:1rem}.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}details p{border-radius:.2rem;padding:.5rem 1rem;margin-bottom:0}#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:1rem;justify-content:space-between}.display-balance{gap:1rem;grid-auto-flow:row}.display-balance .balance{width:100%}.display-balance .icon{height:1.4rem;width:1.4rem;padding:.3rem;stroke-width:10;cursor:pointer}.icon,.select .radio{width:1.2rem;fill:none}.icon{height:1.2rem;stroke:rgba(var(--text-color),.8);stroke-width:6;overflow:visible;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;border-top:solid 1px rgba(var(--text-color),.2);border-right:none;z-index:3;background:rgba(var(--foreground-color),1)}#navbar .navbar-item{position:relative;text-align:center;cursor:pointer;padding:.3em;margin:.3em;border-radius:.4em;color:rgba(var(--text-color),.8);font-size:.8em;text-transform:capitalize;width:100%;font-weight:600}#navbar .navbar-item h5{margin-top:.4em}#navbar .active{color:var(--accent-color)}.user-panel,.user-panel .grid P{color:rgba(var(--foreground-color),1)}#navbar .active .icon{stroke:var(--accent-color)}.banking{stroke-width:4}#home_page{padding:1rem 0 4rem}#home_page .left{padding:1.5rem 0;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}#home_page .user-panel{margin:0 1.5rem}.user-panel{position:relative;padding:1.5rem;border-radius:.6rem;background:linear-gradient(135deg,var(--accent-color),#2F2B76);box-shadow:0 .1rem .1rem #00010,0 1rem 1rem -1rem #00010;align-self:flex-start}.user-panel .icon{stroke:rgba(var(--foreground-color),1)}.user-panel .copy-row{margin-bottom:1rem;padding-bottom:1rem;border-bottom:solid 1px rgba(var(--foreground-color),.3)}.user-panel sm-button{--text-color:rgba(var(--foreground-color), 1);background:rgba(var(--foreground-color),.2);border-radius:2rem}.user-panel .grid{gap:1.5rem;grid-template-columns:1fr 1fr;margin-top:1rem}.user-panel .grid h5{font-weight:500}.user-panel .grid h4{font-size:1.2rem}.user-panel .grid P{font-size:.8rem;opacity:.9;margin-bottom:0!important;max-width:30ch}.complaint .processed,.deposited{color:#007732}.balance{display:grid;gap:0 1rem}.user-type{font-weight:500}.options-tab{margin:1rem 0}.options-tab>.grid{min-width:100vw;padding:0 1.5rem;grid-auto-flow:column;gap:.2rem}.options-tab .option{position:relative;display:flex;align-items:center;text-align:center;border-radius:.4rem;margin-bottom:1rem;width:5rem;min-width:5rem}.options-tab .option .icon{height:3rem;width:3rem;padding:.8rem;stroke:var(--accent-color)}.options-tab .option h4{font-size:.9rem;font-weight:500}.options-tab .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)}.page .container-header,sm-tab-header{background:rgba(var(--foreground-color),1);z-index:2;top:0}sm-tab-header{position:sticky;margin-bottom:1rem;border-bottom:solid 1px rgba(var(--text-color),.2)}sm-tab::part(tab){padding:.8rem .4rem;text-transform:capitalize}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;text-transform:capitalize}.request h3,.request h4{margin-bottom:1.5rem}.copy-row h4,.request button{margin-bottom:0}.request h4:last-of-type{margin-bottom:0}.request .action{align-self:flex-end}.request .amount{font-size:1.4em}.request button{width:auto;align-self:flex-end;margin-top:1.5rem}.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::before{content:"+ "}.decline-request{margin-right:.5rem!important}.withdrawn{color:#d43125}.withdrawn::before{content:"- "}.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;will-change:auto}.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;font-weight:500;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 .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 .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}#main_loader h3{width:100%;font-weight:400;word-spacing:.16em}#upi_txId_section .copy-row{margin-bottom:1.5rem}#send_amount_to_deposit{margin-bottom:0!important}@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}}#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 .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:6rem;margin-bottom:.5rem}#failure_svg,#success_svg{height:5rem;width:5rem;stroke-width:4;align-self:center;stroke:none;stroke-dasharray:50;fill:rgba(var(--foreground-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";max-width:70ch}.activity .icon{grid-area:icon;height:3rem;width:3rem;padding:.8rem;border-radius:2rem}.activity .activity-type{grid-area:type;text-transform:capitalize;font-weight:400;font-size:.9rem}.activity .activity-receiver{grid-area:receiver;font-weight:500}.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}.select{max-width:50ch;position:relative;display:flex;width:100%;padding:.8rem 1rem;border-radius:.3rem;background:rgba(var(--text-color),.1);align-items:center;cursor:pointer}.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 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{height:1.2rem;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 .tag{opacity:.6;font-weight:500;margin-left:auto}.select h4{font-weight:400}.select .outer{position:absolute;left:0;right:0;top:0;bottom:0;pointer-events:none}.add-upi{margin-top:.4rem;justify-self:flex-start;width:max-content}@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;background:rgba(var(--text-color),.06)}sm-select{width:100%}}@media only screen and (min-width:640px){body{padding:0 2rem;margin-left:6rem}sm-popup{background:rgba(var(--foreground-color),1)}#confirmation,sm-popup::part(popup){width:24rem}#navbar{justify-content:center;flex-direction:column;align-items:stretch;left:0;bottom:0;top:0;right:auto;width:6rem;border-top:none;border-right:solid 1px rgba(var(--text-color),.2)}#navbar .navbar-item{border-radius:.5rem;width:auto;padding:.5rem 0;margin:.5rem .6rem}#navbar .navbar-item .icon{height:1.4rem;width:1.4rem}#navbar .navbar-item:hover{background:rgba(var(--foreground-color),.2)}#navbar .navbar-item.active{background:rgba(var(--foreground-color),1);color:var(--accent-color)}#navbar .navbar-item.active .icon{stroke:var(--accent-color)}.page{padding-bottom:2rem}#sign_in_popup{width:24rem}.options-tab>.grid{gap:1rem;min-width:auto}.options-tab .grid:first-of-type{padding-right:0}.options-tab .grid:last-of-type{padding-left:0}#settings_page .copy-row{display:inline-grid}}@media only screen and (min-width:800px){.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}.user-panel{position:sticky;top:1.5rem}#deposit,#home_page{display:grid;gap:1.5rem;grid-template-columns:minmax(0,1fr) 24rem}}@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 (prefers-color-scheme:dark){:root{--text-color:238,238,238;--text-color-light:170,170,170;--foreground-color:26,26,26;--background-color:#111;--dark-shade:#1a1a1a}}@media (prefers-color-scheme:light){:root{--text-color:17,17,17;--text-color-light:85,85,85;--foreground-color:255,255,255;--background-color:#e8e8e8;--dark-shade:#dadada}}@media (prefers-color-scheme:no-preference){:root{--text-color:17,17,17;--text-color-light:85,85,85;--foreground-color:255,255,255;--background-color:#e8e8e8;--dark-shade:#dadada}}@media (any-hover:hover){.option:hover{background:rgba(var(--text-color),.1)}} \ No newline at end of file +a,h1,h2,h3,h4,h5{font-weight:600}.options-tab .option,button{-webkit-tap-highlight-color:transparent;transition:transform .3s;text-transform:capitalize}.icon,.loader{overflow:visible}.action,button{position:relative}*{box-sizing:border-box;padding:0;margin:0;font-family:Roboto,sans-serif}button,h1,h2,h3,h4,h5{font-family:Poppins,sans-serif}:root{scroll-behavior:smooth}body{--accent-color:#2237CD;--text-color:17,17,17;--text-color-light:85,85,85;--foreground-color:255,255,255;--background-color:#e8e8e8;--dark-shade:#dadada;background:linear-gradient(rgba(var(--foreground-color),.1),rgba(var(--foreground-color),.3)),url(back.svg) no-repeat fixed;color:rgba(var(--text-color),1);font-size:16px;background-size:cover}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}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=text]::-ms-clear{display:none;width:0;height:0}input[type=text]::-ms-reveal{display:none;width:0;height:0}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{display:none}input[type=number]{-moz-appearance:textfield}input:invalid{outline:0;box-shadow:none}::-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,.direction-column,.options-tab .option{flex-direction:column}.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}.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}}.action{display:inline-flex;justify-content:center;padding:0;background:0 0}.action[disabled] .primary-btn{background:0 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}.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:inline-grid;align-items:center;grid-template-columns:auto 1fr;gap:.6rem .4rem;margin-right:1rem}#logo h4{letter-spacing:.06rem;word-spacing:.12rem}#logo h5{font-weight:400}#logo #main_logo{height:1.6rem;width:1.6rem;fill:rgba(var(--text-color),1);stroke:none}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);stroke-width:6;fill:none;height:2rem;padding:.5rem .5rem .5rem 0;cursor:pointer}.card{border-radius:.6rem;padding:1.5em;background:rgba(var(--foreground-color),1)}.solid-background{background:rgba(var(--foreground-color),1)!important}details p,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}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 h5:not(.tag){margin-bottom:.4rem;margin-top:1rem}.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}details p{border-radius:.2rem;padding:.5rem 1rem;margin-bottom:0}#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:1rem;justify-content:space-between}.display-balance{gap:1rem;grid-auto-flow:row}.display-balance .balance{width:100%}.display-balance .icon{height:1.4rem;width:1.4rem;padding:.3rem;stroke-width:10;cursor:pointer}.icon,.select .radio{width:1.2rem;fill:none}.icon{height:1.2rem;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;border-top:solid 1px rgba(var(--text-color),.2);border-right:none;z-index:3;background:rgba(var(--foreground-color),1)}#navbar .navbar-item{position:relative;text-align:center;cursor:pointer;padding:.3em;margin:.3em;border-radius:.4em;color:rgba(var(--text-color),.8);font-size:.8em;text-transform:capitalize;width:100%;font-weight:600}#navbar .navbar-item h5{margin-top:.4em}#navbar .active{color:var(--accent-color)}.user-panel,.user-panel .grid P{color:rgba(var(--foreground-color),1)}#navbar .active .icon{stroke:var(--accent-color)}.banking{stroke-width:4}#home_page{padding:1rem 0 4rem}#home_page .left{padding:1.5rem 0;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}#home_page .user-panel{margin:0 1.5rem}.user-panel{position:relative;padding:1.5rem;border-radius:.6rem;background:linear-gradient(135deg,var(--accent-color),#2F2B76);box-shadow:0 .1rem .1rem #00010,0 1rem 1rem -1rem #00010;align-self:flex-start}.user-panel .icon{stroke:rgba(var(--foreground-color),1)}.user-panel .copy-row{margin-bottom:1rem;padding-bottom:1rem;border-bottom:solid 1px rgba(var(--foreground-color),.3)}.user-panel sm-button{--text-color:rgba(var(--foreground-color), 1);background:rgba(var(--foreground-color),.2);border-radius:2rem}.user-panel .grid{gap:1.5rem;grid-template-columns:1fr 1fr;margin-top:1rem}.user-panel .grid h5{font-weight:500}.user-panel .grid h4{font-size:1.2rem}.user-panel .grid P{font-size:.8rem;opacity:.9;margin-bottom:0!important;max-width:30ch}.complaint .processed,.deposited{color:#007732}.balance{display:grid;gap:0 1rem}.user-type{font-weight:500}.options-tab{margin:1rem 0}.options-tab>.grid{min-width:100vw;padding:0 1.5rem;grid-auto-flow:column;gap:.2rem}.options-tab .option{position:relative;display:flex;align-items:center;text-align:center;border-radius:.4rem;margin-bottom:1rem;width:5rem;min-width:5rem;cursor:pointer}.options-tab .option .icon{height:3rem;width:3rem;padding:.8rem;stroke:var(--accent-color)}.options-tab .option h4{font-size:.9rem;font-weight:500}.options-tab .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)}.page .container-header,sm-tab-header{background:rgba(var(--foreground-color),1);z-index:2;top:0}sm-tab-header{position:sticky;margin-bottom:1rem;border-bottom:solid 1px rgba(var(--text-color),.2)}sm-tab::part(tab){padding:.8rem .4rem;text-transform:capitalize}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;text-transform:capitalize}.request h3,.request h4{margin-bottom:1.5rem}.copy-row h4,.request button{margin-bottom:0}.request h4:last-of-type{margin-bottom:0}.request .action{align-self:flex-end}.request .amount{font-size:1.4em}.request button{width:auto;align-self:flex-end;margin-top:1.5rem}.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}.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;will-change:auto}.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;font-weight:500;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 .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 .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}#main_loader h3{width:100%;font-weight:400;word-spacing:.16em}#upi_txId_section .copy-row{margin-bottom:1.5rem}#send_amount_to_deposit{margin-bottom:0!important}@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}}#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}.activity,.activity .icon{background:rgba(var(--text-color),.06)}#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:6rem;margin-bottom:.5rem}#failure_svg,#success_svg{height:5rem;width:5rem;stroke-width:4;align-self:center;stroke:none;stroke-dasharray:50;fill:rgba(var(--foreground-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";max-width:70ch;align-items:center;cursor:pointer}.activity .icon{grid-area:icon;height:3rem;width:3rem;padding:.8rem;border-radius:2rem}.activity .activity-type{grid-area:type;text-transform:capitalize;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}.select{max-width:50ch;position:relative;display:flex;width:100%;padding:.8rem 1rem;border-radius:.3rem;background:rgba(var(--text-color),.1);align-items:center;cursor:pointer}.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 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{height:1.2rem;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 .tag{opacity:.6;font-weight:500;margin-left:auto}.select h4{font-weight:400}.select .outer{position:absolute;left:0;right:0;top:0;bottom:0;pointer-events:none}.add-upi{margin-top:.4rem;justify-self:flex-start;width:max-content}@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;background:rgba(var(--text-color),.06)}sm-select{width:100%}}@media only screen and (min-width:640px){body{padding:0 2rem;margin-left:6rem}sm-popup{background:rgba(var(--foreground-color),1)}#confirmation,sm-popup::part(popup){width:24rem}#navbar{justify-content:center;flex-direction:column;align-items:stretch;left:0;bottom:0;top:0;right:auto;width:6rem;border-top:none;border-right:solid 1px rgba(var(--text-color),.2)}#navbar .navbar-item{border-radius:.5rem;width:auto;padding:.5rem 0;margin:.5rem .6rem}#navbar .navbar-item .icon{height:1.4rem;width:1.4rem}#navbar .navbar-item:hover{background:rgba(var(--foreground-color),.2)}#navbar .navbar-item.active{background:rgba(var(--foreground-color),1);color:var(--accent-color)}#navbar .navbar-item.active .icon{stroke:var(--accent-color)}.page{padding-bottom:2rem}#sign_in_popup{width:24rem}.options-tab>.grid{gap:1rem;min-width:auto}.options-tab .grid:first-of-type{padding-right:0}.options-tab .grid:last-of-type{padding-left:0}#settings_page .copy-row{display:inline-grid}}@media only screen and (min-width:800px){.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}.user-panel{position:sticky;top:1.5rem}#deposit,#home_page{display:grid;gap:1.5rem;grid-template-columns:minmax(0,1fr) 24rem}}@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 (prefers-color-scheme:dark){:root{--text-color:238,238,238;--text-color-light:170,170,170;--foreground-color:26,26,26;--background-color:#111;--dark-shade:#1a1a1a}}@media (prefers-color-scheme:light){:root{--text-color:17,17,17;--text-color-light:85,85,85;--foreground-color:255,255,255;--background-color:#e8e8e8;--dark-shade:#dadada}}@media (prefers-color-scheme:no-preference){:root{--text-color:17,17,17;--text-color-light:85,85,85;--foreground-color:255,255,255;--background-color:#e8e8e8;--dark-shade:#dadada}}@media (any-hover:hover){.option:hover{background:rgba(var(--text-color),.1)}} \ No newline at end of file diff --git a/css/main.scss b/css/main.scss index 5ee3879..066d6b8 100644 --- a/css/main.scss +++ b/css/main.scss @@ -801,10 +801,6 @@ sm-panel{ .deposited { color: #007732; - - &::before { - content: '+ '; - } } .decline-request { @@ -813,10 +809,6 @@ sm-panel{ .withdrawn { color: #d43125; - - &::before { - content: '- '; - } } .container { @@ -1121,6 +1113,8 @@ sm-panel{ grid-template-columns: auto 1fr auto; grid-template-areas: 'icon type amount' 'icon receiver time'; max-width: 70ch; + align-items: center; + cursor: pointer; .icon{ grid-area: icon; height: 3rem; @@ -1133,11 +1127,15 @@ sm-panel{ grid-area: type; text-transform: capitalize; font-weight: 400; - font-size: 0.9rem; + font-size: 0.8rem; } .activity-receiver{ grid-area: receiver; font-weight: 500; + font-size: 0.9rem; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } .activity-amount{ text-align: right; diff --git a/index.html b/index.html index 704bced..146991d 100644 --- a/index.html +++ b/index.html @@ -79,7 +79,7 @@ Make sure you have enough balance.

- + rupee-symbol @@ -125,7 +125,7 @@ - + rupee-symbol @@ -165,7 +165,7 @@

Withdraw or redeem your Rupee back to your specified UPI address.

- + rupee-symbol @@ -202,7 +202,7 @@ Request Rupee from other's using FLO address.

- + rupee-symbol @@ -241,7 +241,7 @@

- + rupee-symbol @@ -806,6 +806,9 @@
Add UPI address for easier access during various transactions.
+ Add UPI address +
+ +
@@ -886,7 +909,7 @@ 'data-user-flo-id': floId, 'data-txid': txid }) - card.innerHTML = `
FLO ID
+ card.innerHTML = `
FLO address

${floId}

UPI TXID

${txid}

@@ -903,7 +926,7 @@ 'data-user-flo-id': floId, 'data-upi': upiId }) - card.innerHTML = `
FLO ID
+ card.innerHTML = `
FLO address

${floId}

UPI ID

${upiId}

@@ -925,7 +948,7 @@ }) card.innerHTML = `
Transaction ID

${txid}

-
Receiver's FLO ID
+
Receiver's FLO address

${floId}

Amount

₹${amount}

@@ -943,6 +966,7 @@ transaction, className card.classList.add('activity') + setAttributes(card, {'data-type': type, 'data-vector-clock': timeStamp}) switch(type){ case 'sent': icon = ` @@ -1333,11 +1357,11 @@ let popupStack = new Stack(), zIndex = 10; - function showPopup(popup, permission) { + function showPopup(popup, pinned) { let thisPopup = document.getElementById(popup); zIndex++ thisPopup.setAttribute('style', `z-index: ${zIndex}`) - popupStack = thisPopup.show(permission, popupStack) + popupStack = thisPopup.show(pinned, popupStack) return thisPopup; } @@ -1647,9 +1671,9 @@ let currentRequest = null; document.getElementById('activity_page').addEventListener('click', (e) => { - if (e.target.closest('.report')) { - showPopup('report_popup') - currentRequest = e.target.closest('.request') + if (e.target.closest('.activity')) { + currentRequest = e.target.closest('.activity') + showTransactionDetails({type: currentRequest.dataset.type, timeStamp: currentRequest.dataset.vectorClock}) } }) // Function for reporting complain @@ -1657,7 +1681,7 @@ let customMsg = document.getElementById('complaint_field').value if (await confirmation( 'It may take upto 12hrs to complete your request, are you sure to report this issue?', - 'Cancel', 'Report' + 'No', 'Report' )) { file_complaint(currentRequest.dataset.type, currentRequest.dataset.vectorClock, customMsg) @@ -1740,7 +1764,7 @@ transactionHeading = document.getElementById('transaction_heading'), transactionMessage = document.getElementById('transaction_message') - function showTrasactionStatus(status, heading, message, transactionId){ + function showTransactionStatus(status, heading, message, transactionId){ transactionHeading.textContent = heading transactionMessage.innerHTML = message transactionSuccessId.textContent = transactionId @@ -1757,21 +1781,47 @@ showPopup('transaction_result') } + const transactionPage = document.getElementById('transaction_page'), + transactionType = document.getElementById('transaction_type'), + transactionTime = document.getElementById('transaction_time') + + function showTransactionDetails(obj){ + let {type, timeStamp, } = obj; + if(type === 'payCashier') + type = 'Pay through cashier' + transactionType.textContent = type + transactionTime.textContent = formatedTime(timeStamp) + showPage('transaction_page') + } + + let allPages = document.querySelectorAll('.page'), allTabs = document.querySelectorAll('.navbar-item'); - function showPage(btn, page) { + function showPage(page, btn) { allPages.forEach((page) => { page.classList.add('hide-completely') }) allTabs.forEach((tab) => { tab.classList.remove('active') }) + if(btn){ + if(typeof btn === 'string') + btn = document.getElementById(btn) + btn.classList.add('active', 'shrink') + } document.getElementById(page).classList.remove('hide-completely') - btn.classList.add('active', 'shrink') if (page === 'request_page') { show_payment_requests() } + if(page === 'transaction_page'){ + document.getElementById('navbar').classList.add('hide-on-mobile') + document.getElementById('main_header').classList.add('hide-on-mobile') + } + else{ + document.getElementById('navbar').classList.remove('hide-on-mobile') + document.getElementById('main_header').classList.remove('hide-on-mobile') + } } const addUpiInput = document.getElementById('add_upi_input') @@ -1844,7 +1894,7 @@ function signIn() { return new Promise((resolve, reject) => { hideLoader() - showPopup('sign_in_popup', 'no') + showPopup('sign_in_popup', true) let signInBtn = document.getElementById('sign_in_btn'), privateKeyInput = document.getElementById('get_priv_key_field') signInBtn.onclick = () => { @@ -11338,6 +11388,9 @@ { "FCja6sLv58e3RMy41T5AmWyvXEWesqBCkX": { "upi_id": "8507742774@ybl" + }, + "FPFeL5PXzW9bGosUjQYCxTHSMHidnygvvd": { + "upi_id": "7744023898@paytm" } }` /* @@ -11459,7 +11512,7 @@ show_withdraw_request() showPayRequests() userType.forEach(user => user.textContent = 'Cashier') - showPage(document.getElementById('deposit_page_btn'), 'deposit') + showPage('deposit', 'deposit_page_btn') } //Helpline startup sequence @@ -11482,7 +11535,7 @@ await Promise.all([load_deposit_complaints(cashierSelect.value), load_withdraw_complaints( cashierSelect.value), load_pay_thru_cashier_complaints(cashierSelect.value)]) userType.forEach(user => user.textContent = 'Cashier') - showPage(document.getElementById('helpline_page_btn'), 'helpline_page') + showPage('helpline_page', 'helpline_page_btn') } //user startup sequence @@ -11499,7 +11552,7 @@ userType.forEach(user => user.textContent = 'User') show_all_user_activities() show_payment_requests() - showPage(document.getElementById('home_page_btn'), 'transaction_page') + showPage('home_page', 'home_page_btn') withdraw_token_to_get_cash(); @@ -11931,11 +11984,14 @@ flo_comment) console.log(flo_txid); if (typeof flo_txid !== "string") { - showTrasactionStatus('failure', `Transaction failed.`); + showTransactionStatus('failure', `Transaction failed.`); hidePopup() return false; } else { - showTrasactionStatus('success', 'Rupee Sent', 'It may take upto 48 working hours for transaction to be completed.', flo_txid); + hidePopup() + showTransactionStatus('success', 'Rupee Sent', 'It may take upto 48 working hours for transaction to be completed.', flo_txid); + sentActivityContainer.prepend(render.activityCard({type: 'sent', amount: token_amount, timeStamp: `${Date.now()}_${myFloID}`, token_txid: flo_txid, receiver: token_receiver})) + refresh_balance() if (payingRequested === true) { const all_reqs = removeDuplicates(floDapps.getNextGeneralData(token_app.master_configurations .TYPE_REQUEST_PAYMENT, "0").reverse()); @@ -11954,7 +12010,6 @@ }; floCloudAPI.updateObjectData(token_app.master_configurations.TYPE_SENT_TOKENS, options = { receiverID }); } - hidePopup() return true; } } @@ -12255,12 +12310,12 @@ receiverID: cashier }).then(result => { hidePopup() - showTrasactionStatus('success', 'Deposit request sent.', 'It may take upto 48 hours for deposited amount to be reflected in your account.') + showTransactionStatus('success', 'Deposit request sent.', 'It may take upto 48 hours for deposited amount to be reflected in your account.') btnLoading('request_tokens_btn', 'stop') + depositActivityContainer.prepend(render.activityCard({type: 'deposit', amount: request_object.deposit_amount, timeStamp: `${Date.now()}_${myFloID}}`, upi_txid})) }) return true; } - hidePopup() return false; } } catch (error) { @@ -12288,15 +12343,14 @@ const user_token_balance_object = await ajaxGet(token_balance_url); if (typeof user_token_balance_object !== "object" || typeof user_token_balance_object .balance !== "number") { - notify('You do not have rupee balance yet. Please deposit rupee to get balance.', - 'error'); + showTransactionStatus('failure', 'Insufficient Balance', `You don't have any balance`) hidePopup() return; } const current_balance = Number(user_token_balance_object.balance); if (current_balance < withdraw_cash_amount) { hidePopup() - showTrasactionStatus('failure', 'Insufficient Balance', `You have only ₹${user_token_balance_object.balance} balance`) + showTransactionStatus('failure', 'Insufficient Balance', `You have only ₹${user_token_balance_object.balance} balance`) return; } @@ -12306,7 +12360,7 @@ console.log(flo_txid); if (typeof flo_txid !== "string") { hidePopup() - showTrasactionStatus('failure', 'Withdrawal failed') + showTransactionStatus('failure', 'Withdrawal failed') return false; } // TODO: Validate https://ranchimallflo.duckdns.org/api/v1.0/getTransactionDetails/${flo_txid} @@ -12325,10 +12379,11 @@ receiverID: cashier }); hidePopup() - showTrasactionStatus('success', 'Withdraw request sent.', 'It may take upto 48 working hours to process your withdrawal request.') + showTransactionStatus('success', 'Withdraw request sent.', 'It may take upto 48 working hours to process your withdrawal request.') + withdrawActivityContainer.prepend(render.activityCard({type: 'withdraw', amount: withdraw_cash_amount, timeStamp: `${Date.now()}_${myFloID}`, token_txid: flo_txid, receiver: user_withdraw_upi})) return true; } - showTrasactionStatus('failure', 'Failed to send withdraw request.'); + showTransactionStatus('failure', 'Failed to send withdraw request.'); return true; } @@ -12376,9 +12431,10 @@ }); hidePopup() - showTrasactionStatus('success', 'Pay through cashier Request sent.', `Sent to: ${recvr_id}
+ showTransactionStatus('success', 'Pay through cashier Request sent.', `Sent to: ${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, upi_txid: req_object.upi_txid})) } } catch (error) { @@ -12386,10 +12442,11 @@ } } - const 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'), + 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 { @@ -12594,9 +12651,8 @@ floCloudAPI.sendGeneralData(request_object, token_app.master_configurations.TYPE_REQUEST_PAYMENT, { receiverID: receiver_flo_id }).then(result => { - console.log(result); - notify('Request sent.', 'success'); hidePopup() + showTransactionStatus('success', 'Payment request sent.', 'Payment request will be approved or declined by the receiver.'); }); return true; From 398f14e85ef06502459473e16961c2264f05dffd Mon Sep 17 00:00:00 2001 From: sairaj mote Date: Wed, 30 Sep 2020 03:22:17 +0530 Subject: [PATCH 19/42] 0.0.45 --- css/main.css | 13 ++++++++++++- css/main.min.css | 2 +- css/main.scss | 13 ++++++++++++- index.html | 39 +++++++++++++++++++++++++++++++++++++-- 4 files changed, 62 insertions(+), 5 deletions(-) diff --git a/css/main.css b/css/main.css index f070cf5..656009f 100644 --- a/css/main.css +++ b/css/main.css @@ -30,6 +30,10 @@ body[data-theme=dark] { --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); } body[data-theme=dark] .balance:nth-of-type(3) { @@ -154,6 +158,10 @@ button:disabled ~ .loader { flex-direction: column; } +.justify-right { + margin-left: auto; +} + .space-between { justify-content: space-between; } @@ -1236,7 +1244,7 @@ sm-panel { #settings_page > h4 { margin-top: 2rem; - margin-bottom: 0.5rem; + margin-bottom: 0.4rem; } #settings_page p { color: rgba(var(--text-color), 0.7); @@ -1244,6 +1252,9 @@ sm-panel { #settings_page sm-button { margin-top: 0.8rem; } +#settings_page .flex { + max-width: 60ch; +} @media only screen and (max-width: 640px) { #home_page, #deposit { diff --git a/css/main.min.css b/css/main.min.css index b48b1bf..8ab6f09 100644 --- a/css/main.min.css +++ b/css/main.min.css @@ -1 +1 @@ -*,.activity .activity-amount,.balance h4{font-family:Roboto,sans-serif}a,h1,h2,h3,h4,h5{font-weight:600}.options-tab .option,button{-webkit-tap-highlight-color:transparent;transition:transform .3s;text-transform:capitalize}.balance h4,.breakable{word-break:break-all}.action,button{position:relative}.icon,.loader{overflow:visible}*{box-sizing:border-box;padding:0;margin:0}button,h1,h2,h3,h4,h5{font-family:Poppins,sans-serif}:root{scroll-behavior:smooth}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%;color:rgba(var(--text-color),1);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;background-color:var(--background-color)}body[data-theme=dark] .balance:nth-of-type(3){color:rgba(var(--text-color),1)}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)}.btn,.primary-btn{color:rgba(var(--foreground-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}.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}.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}}.action{display:inline-flex;justify-content:center;padding:0;background:0 0}.action[disabled] .primary-btn{background:0 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}.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);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}#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;color:rgba(var(--text-color),1);font-size:.8em;text-transform:capitalize;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}.user-panel .icon{stroke:rgba(var(--foreground-color),1)}.user-panel sm-button{border-radius:2rem}.display-balance{grid-template-columns:1fr 1fr;grid-template-areas:". ." "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:2.5rem;font-weight:500;text-shadow:1px .1rem .2rem #00040;flex:1}.balance h5{opacity:.8;margin-bottom:.2rem}.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),.1),rgba(var(--text-color),.2));background-size:cover}.balance:nth-of-type(1) .tooltip{box-shadow:0 0 0 .4rem rgba(var(--text-color),.1) inset}.balance:nth-of-type(2){background:url(bg-art1.svg),linear-gradient(135deg,#fd946a,#ff4857);background-size:cover}.balance:nth-of-type(2) .tooltip{box-shadow:0 0 0 .4rem #ff4857 inset}.balance:nth-of-type(3){grid-area:flo;color:rgba(var(--foreground-color),1);background:url(bg-art3.svg) bottom no-repeat,linear-gradient(270deg,#2f69e6,#1b0980);background-size:cover}.balance:nth-of-type(3) .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}.tooltip:hover{clip-path:circle(100%)}.user-type{font-weight:500}.options-tab{display:grid;grid-template-columns:repeat(4,1fr);padding:1.5rem;gap:2rem .2rem}.options-tab .option{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;border-radius:.4rem;width:5rem;cursor:pointer}.options-tab .option .icon{height:3rem;width:3rem;background:rgba(var(--text-color),.06);border-radius:2rem;padding:.8rem;margin-bottom:.6rem}.options-tab .option h4{font-size:.85rem;opacity:.8;font-weight:500}.options-tab .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{text-transform:capitalize}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;text-transform:capitalize}.request h3,.request h4{margin-bottom:1.5rem}.copy-row h4,.request button{margin-bottom:0}.request h4:last-of-type{margin-bottom:0}.request .action{align-self:flex-end}.request .amount{font-size:1.4em}.request button{width:auto;align-self:flex-end;margin-top:1.5rem}.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;font-weight:500;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 .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}.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}}#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}.activity,.activity .icon{background:rgba(var(--text-color),.06)}#transaction_result #transaction_heading{margin-bottom:2rem}#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:6rem;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(--foreground-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}.activity .activity-type{grid-area:type;text-transform:capitalize;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}.back-arrow{stroke-width:10;margin-right:.5rem;padding:.2rem}.select{max-width:50ch;position:relative;display:flex;width:100%;border-radius:.3rem;background:rgba(var(--text-color),.06)}.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}.select h4{font-weight:400}.add-upi{margin-top:.4rem;justify-self:flex-start;width:max-content}#transaction_page .grid:first-of-type{padding:.5rem 0;grid-template-columns:auto 1fr;grid-template-areas:"back ." "back ."}#transaction_page .grid:first-of-type .back-arrow{grid-area:back}#transaction_page .grid:first-of-type h4{text-transform:capitalize}#transaction_page .grid:first-of-type h5{font-weight:400;font-family:Roboto,sans-serif}#activity_page .empty-state,#request_page .empty-state,#settings_page .empty-state{justify-content:left}#settings_page>h4{margin-top:2rem;margin-bottom:.5rem}#settings_page sm-button{margin-top:.8rem}@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}}@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}.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 +*,.activity .activity-amount,.balance h4{font-family:Roboto,sans-serif}a,h1,h2,h3,h4,h5{font-weight:600}.select,button{border-radius:.3rem}.options-tab .option,button{-webkit-tap-highlight-color:transparent;text-transform:capitalize}.action,button{position:relative}.icon,.loader{overflow:visible}*{box-sizing:border-box;padding:0;margin:0}button,h1,h2,h3,h4,h5{font-family:Poppins,sans-serif}:root{scroll-behavior:smooth}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%;color:rgba(var(--text-color),1);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)}body[data-theme=dark] .balance:nth-of-type(3){color:rgba(var(--text-color),1)}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;color:var(--accent-color);transition:transform .3s;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)}.action,.action[disabled] .primary-btn{background:0 0}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,.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}.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}}.action{display:inline-flex;justify-content:center;padding:0}.container-header,.logo,.popup-header{align-items:center}.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}.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;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)}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;width:100%}.popup-header .icon{margin-right:1rem;padding:.2rem;stroke-width:10;cursor:pointer}.popup-header button{width:auto;margin-left:auto}#sign_in_popup button,sm-tab-header{margin:1rem 0}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 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;position:fixed;left:0;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;color:rgba(var(--text-color),1);font-size:.8em;text-transform:capitalize;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{align-self:flex-end}.user-panel .icon{stroke:rgba(var(--foreground-color),1)}.user-panel sm-button{border-radius:2rem}.display-balance{grid-template-columns:1fr 1fr;grid-template-areas:". ." "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;flex-direction:column;border-radius:1rem;padding:1rem;justify-content:flex-end}.balance h4{font-size:2.5rem;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;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),.1),rgba(var(--text-color),.2));background-size:cover}.balance:nth-of-type(1) .tooltip{box-shadow:0 0 0 .4rem rgba(var(--text-color),.1) inset}.balance:nth-of-type(2){background:url(bg-art1.svg),linear-gradient(135deg,#fd946a,#ff4857);background-size:cover}.balance:nth-of-type(2) .tooltip{box-shadow:0 0 0 .4rem #ff4857 inset}.balance:nth-of-type(3){grid-area:flo;color:rgba(var(--foreground-color),1);background:url(bg-art3.svg) bottom no-repeat,linear-gradient(270deg,#2f69e6,#1b0980);background-size:cover}.page .container-header,.tooltip{top:0;background:rgba(var(--foreground-color),1)}.balance:nth-of-type(3) .tooltip{box-shadow:0 0 0 .4rem #1b0980 inset}.tooltip{position:absolute;left:0;right:0;bottom:0;cursor:help;display:flex;flex-direction:column;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}.tooltip:hover{clip-path:circle(100%)}.user-type{font-weight:500}.options-tab{display:grid;grid-template-columns:repeat(4,1fr);padding:1.5rem;gap:2rem .2rem}.options-tab .option{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;border-radius:.4rem;width:5rem;transition:transform .3s;cursor:pointer}.options-tab .option .icon{height:3rem;width:3rem;background:rgba(var(--text-color),.06);border-radius:2rem;padding:.8rem;margin-bottom:.6rem}.options-tab .option h4{font-size:.85rem;opacity:.8;font-weight:500}.options-tab .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;border-radius:3rem}sm-tab{text-transform:capitalize}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;text-transform:capitalize}.request h3,.request h4{margin-bottom:1.5rem}.copy-row h4,.request button{margin-bottom:0}.request h4:last-of-type{margin-bottom:0}.request .amount{font-size:1.4em}.request button{width:auto;margin-top:1.5rem}.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;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;font-weight:500;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 .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}.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;position:fixed;left:0}#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}}#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}.activity,.activity .icon{background:rgba(var(--text-color),.06)}#transaction_result #transaction_heading{margin-bottom:2rem}#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:6rem;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(--foreground-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}.activity .activity-type{grid-area:type;text-transform:capitalize;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}.back-arrow{stroke-width:10;margin-right:.5rem;padding:.2rem}.select{max-width:50ch;position:relative;display:flex;width:100%;background:rgba(var(--text-color),.06)}.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}.select h4{font-weight:400}.add-upi{margin-top:.4rem;justify-self:flex-start;width:max-content}#transaction_page .grid:first-of-type{padding:.5rem 0;grid-template-columns:auto 1fr;grid-template-areas:"back ." "back ."}#transaction_page .grid:first-of-type .back-arrow{grid-area:back}#transaction_page .grid:first-of-type h4{text-transform:capitalize}#transaction_page .grid:first-of-type h5{font-weight:400;font-family:Roboto,sans-serif}#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}}@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}.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 74cbc92..59940db 100644 --- a/css/main.scss +++ b/css/main.scss @@ -29,6 +29,10 @@ body[data-theme="dark"]{ --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); .balance:nth-of-type(3){ color: rgba(var(--text-color), 1); @@ -153,6 +157,10 @@ button { flex-direction: column; } +.justify-right{ + margin-left: auto; +} + .space-between { justify-content: space-between; } @@ -1299,7 +1307,7 @@ sm-panel{ #settings_page{ & > h4{ margin-top: 2rem; - margin-bottom: 0.5rem; + margin-bottom: 0.4rem; } p{ color: rgba(var(--text-color), 0.7); @@ -1307,6 +1315,9 @@ sm-panel{ sm-button{ margin-top: 0.8rem; } + .flex{ + max-width: 60ch; + } } @media only screen and (max-width: 640px) { #home_page, #deposit{ diff --git a/index.html b/index.html index 3bcc6db..d340dc2 100644 --- a/index.html +++ b/index.html @@ -828,6 +828,11 @@ +

Theme

+
+

Toggle dark theme

+ +

My UPIs

Add UPI address for easier access during various transactions.

@@ -1337,6 +1342,35 @@ notifications.clearAll() notify('We are back online.', '', '', true) }) + + let themeSwitcher = document.getElementById('theme_switcher') + + if (localStorage.theme === "dark") { + nightlight() + themeSwitcher.checked = true; + } else { + 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){ + nightlight(); + localStorage.setItem("theme", "dark"); + } + else{ + daylight(); + localStorage.setItem("theme", "light"); + } + }) + // function required for popups or modals to appear class Stack { constructor() { @@ -1746,7 +1780,8 @@ }) document.getElementById('settings_page').addEventListener('change', e => { - setPrimaryUPI(e.target.value) + 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')){ @@ -1788,7 +1823,7 @@ function showTransactionDetails(obj){ let {type, timeStamp, } = obj; if(type === 'payCashier') - type = 'Pay through cashier' + type = 'Paid through cashier' transactionType.textContent = type transactionTime.textContent = formatedTime(timeStamp) showPage('transaction_page') From 70676538afd016e95d7cc3f8d566ad6300059299 Mon Sep 17 00:00:00 2001 From: sairaj mote Date: Thu, 1 Oct 2020 03:47:55 +0530 Subject: [PATCH 20/42] 0.0.46 --- css/main.css | 145 ++++++++++++++++++++--- css/main.min.css | 2 +- css/main.scss | 193 +++++++++++++++++++++++++------ index.html | 294 +++++++++++++++++++++++++++++++++++++++++++---- 4 files changed, 558 insertions(+), 76 deletions(-) diff --git a/css/main.css b/css/main.css index 656009f..587e74f 100644 --- a/css/main.css +++ b/css/main.css @@ -39,6 +39,9 @@ body[data-theme=dark] { body[data-theme=dark] .balance:nth-of-type(3) { 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; @@ -195,6 +198,10 @@ button:disabled ~ .loader { transform: none !important; } +sm-button[variant=outlined] { + --accent-color: rgba(var(--text-color), 1); +} + .loader { fill: none; stroke-width: 10; @@ -622,7 +629,7 @@ details p { box-shadow: 0 0 0 0.4rem rgba(var(--text-color), 0.1) inset; } .balance:nth-of-type(2) { - background: url(bg-art1.svg), linear-gradient(135deg, #fd946a, #ff4857); + background: url(bg-art1.svg) left bottom, linear-gradient(135deg, #fd946a, #ff4857); background-size: cover; } .balance:nth-of-type(2) .tooltip { @@ -631,7 +638,7 @@ details p { .balance:nth-of-type(3) { grid-area: flo; color: rgba(var(--foreground-color), 1); - background: url(bg-art3.svg) bottom no-repeat, linear-gradient(270deg, #2f69e6, #1b0980); + background: url(bg-art3.svg) center no-repeat, linear-gradient(270deg, #2f69e6, #1b0980); background-size: cover; } .balance:nth-of-type(3) .tooltip { @@ -689,7 +696,8 @@ details p { padding: 1.5rem; gap: 2rem 0.2rem; } -.options-tab .option { + +.option { position: relative; display: flex; flex-direction: column; @@ -702,7 +710,7 @@ details p { -webkit-tap-highlight-color: transparent; cursor: pointer; } -.options-tab .option .icon { +.option .icon { height: 3rem; width: 3rem; background: rgba(var(--text-color), 0.06); @@ -710,12 +718,12 @@ details p { padding: 0.8rem; margin-bottom: 0.6rem; } -.options-tab .option h4 { +.option h4 { font-size: 0.85rem; opacity: 0.8; font-weight: 500; } -.options-tab .option:active { +.option:active { transform: scale(0.95); } @@ -1102,6 +1110,10 @@ sm-panel { grid-template-areas: "icon type amount" "icon receiver time"; align-items: center; cursor: pointer; + transition: transform 0.3s; +} +.activity:active { + transform: scale(0.95); } .activity .icon { grid-area: icon; @@ -1220,20 +1232,124 @@ sm-panel { width: max-content; } -#transaction_page .grid:first-of-type { +#transaction_page header { padding: 0.5rem 0; - grid-template-columns: auto 1fr; - grid-template-areas: "back ." "back ."; } -#transaction_page .grid:first-of-type .back-arrow { +#transaction_page header .back-arrow { grid-area: back; } -#transaction_page .grid:first-of-type h4 { +#transaction_page header h4 { text-transform: capitalize; } -#transaction_page .grid:first-of-type h5 { +#transaction_page h5 { font-weight: 400; font-family: "Roboto", sans-serif; + opacity: 0.8; + margin-bottom: 0.2rem; + text-transform: capitalize; +} +#transaction_page #transaction_details { + position: relative; + margin: 1.5rem 0; + padding: 1.5rem; + background-color: rgba(var(--text-color), 0.06); + max-width: 50ch; + border-radius: 0.5rem; +} +#transaction_page #transaction_details .icon { + height: 4rem; + width: 4rem; + padding: 1.2rem; + border-radius: 4rem; + background: rgba(var(--text-color), 0.06); + margin-bottom: 2rem; +} +#transaction_page #transaction_details .flex { + margin-bottom: 1rem; + align-items: baseline; +} +#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 0.2rem; +} + +#add_person_btn { + cursor: pointer; + display: flex; + flex-direction: column; + text-align: center; + transition: transform 0.3s; + font-size: 0.85rem; + opacity: 0.8; + font-weight: 500; +} +#add_person_btn:active { + transform: scale(0.95); +} +#add_person_btn .icon { + height: 3rem; + width: 3rem; + border-radius: 2rem; + padding: 1rem; + background: rgba(var(--text-color), 0.06); + align-self: center; + margin-bottom: 0.4rem; +} + +.person { + display: flex; + flex-direction: column; + align-items: center; + cursor: pointer; + transition: transform 0.3s; + width: 5rem; +} +.person:active { + transform: scale(0.95); +} +.person .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 .person-name { + font-size: 0.85rem; + opacity: 0.8; + font-weight: 500; + text-transform: capitalize; + text-align: center; +} + +#person_popup h3 { + text-transform: capitalize; +} +#person_popup .copy-row { + margin-bottom: 1.5rem; } #activity_page .empty-state, @@ -1278,6 +1394,9 @@ sm-panel { #transaction_page { padding-top: 0; } + #transaction_page header { + padding: 1.5rem 0; + } } @media only screen and (min-width: 640px) { .hide-on-desktop { @@ -1358,7 +1477,7 @@ sm-panel { margin-top: 1rem; } - .options-tab { + .options-tab, #people_container { grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr)); gap: 2rem 0.8rem; } diff --git a/css/main.min.css b/css/main.min.css index 8ab6f09..25b0922 100644 --- a/css/main.min.css +++ b/css/main.min.css @@ -1 +1 @@ -*,.activity .activity-amount,.balance h4{font-family:Roboto,sans-serif}a,h1,h2,h3,h4,h5{font-weight:600}.select,button{border-radius:.3rem}.options-tab .option,button{-webkit-tap-highlight-color:transparent;text-transform:capitalize}.action,button{position:relative}.icon,.loader{overflow:visible}*{box-sizing:border-box;padding:0;margin:0}button,h1,h2,h3,h4,h5{font-family:Poppins,sans-serif}:root{scroll-behavior:smooth}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%;color:rgba(var(--text-color),1);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)}body[data-theme=dark] .balance:nth-of-type(3){color:rgba(var(--text-color),1)}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;color:var(--accent-color);transition:transform .3s;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)}.action,.action[disabled] .primary-btn{background:0 0}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,.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}.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}}.action{display:inline-flex;justify-content:center;padding:0}.container-header,.logo,.popup-header{align-items:center}.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}.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;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)}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;width:100%}.popup-header .icon{margin-right:1rem;padding:.2rem;stroke-width:10;cursor:pointer}.popup-header button{width:auto;margin-left:auto}#sign_in_popup button,sm-tab-header{margin:1rem 0}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 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;position:fixed;left:0;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;color:rgba(var(--text-color),1);font-size:.8em;text-transform:capitalize;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{align-self:flex-end}.user-panel .icon{stroke:rgba(var(--foreground-color),1)}.user-panel sm-button{border-radius:2rem}.display-balance{grid-template-columns:1fr 1fr;grid-template-areas:". ." "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;flex-direction:column;border-radius:1rem;padding:1rem;justify-content:flex-end}.balance h4{font-size:2.5rem;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;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),.1),rgba(var(--text-color),.2));background-size:cover}.balance:nth-of-type(1) .tooltip{box-shadow:0 0 0 .4rem rgba(var(--text-color),.1) inset}.balance:nth-of-type(2){background:url(bg-art1.svg),linear-gradient(135deg,#fd946a,#ff4857);background-size:cover}.balance:nth-of-type(2) .tooltip{box-shadow:0 0 0 .4rem #ff4857 inset}.balance:nth-of-type(3){grid-area:flo;color:rgba(var(--foreground-color),1);background:url(bg-art3.svg) bottom no-repeat,linear-gradient(270deg,#2f69e6,#1b0980);background-size:cover}.page .container-header,.tooltip{top:0;background:rgba(var(--foreground-color),1)}.balance:nth-of-type(3) .tooltip{box-shadow:0 0 0 .4rem #1b0980 inset}.tooltip{position:absolute;left:0;right:0;bottom:0;cursor:help;display:flex;flex-direction:column;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}.tooltip:hover{clip-path:circle(100%)}.user-type{font-weight:500}.options-tab{display:grid;grid-template-columns:repeat(4,1fr);padding:1.5rem;gap:2rem .2rem}.options-tab .option{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;border-radius:.4rem;width:5rem;transition:transform .3s;cursor:pointer}.options-tab .option .icon{height:3rem;width:3rem;background:rgba(var(--text-color),.06);border-radius:2rem;padding:.8rem;margin-bottom:.6rem}.options-tab .option h4{font-size:.85rem;opacity:.8;font-weight:500}.options-tab .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;border-radius:3rem}sm-tab{text-transform:capitalize}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;text-transform:capitalize}.request h3,.request h4{margin-bottom:1.5rem}.copy-row h4,.request button{margin-bottom:0}.request h4:last-of-type{margin-bottom:0}.request .amount{font-size:1.4em}.request button{width:auto;margin-top:1.5rem}.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;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;font-weight:500;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 .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}.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;position:fixed;left:0}#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}}#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}.activity,.activity .icon{background:rgba(var(--text-color),.06)}#transaction_result #transaction_heading{margin-bottom:2rem}#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:6rem;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(--foreground-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}.activity .activity-type{grid-area:type;text-transform:capitalize;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}.back-arrow{stroke-width:10;margin-right:.5rem;padding:.2rem}.select{max-width:50ch;position:relative;display:flex;width:100%;background:rgba(var(--text-color),.06)}.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}.select h4{font-weight:400}.add-upi{margin-top:.4rem;justify-self:flex-start;width:max-content}#transaction_page .grid:first-of-type{padding:.5rem 0;grid-template-columns:auto 1fr;grid-template-areas:"back ." "back ."}#transaction_page .grid:first-of-type .back-arrow{grid-area:back}#transaction_page .grid:first-of-type h4{text-transform:capitalize}#transaction_page .grid:first-of-type h5{font-weight:400;font-family:Roboto,sans-serif}#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}}@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}.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{font-family:Roboto,sans-serif}a,h1,h2,h3,h4,h5{font-weight:600}.action,button{display:inline-flex}.complaint-placeholder h5,button,textarea{background:rgba(var(--text-color),.1)}.option,button{-webkit-tap-highlight-color:transparent;transition:transform .3s;text-transform:capitalize}.icon,.loader{overflow:visible;fill:none}*{box-sizing:border-box;padding:0;margin:0}button,h1,h2,h3,h4,h5{font-family:Poppins,sans-serif}:root{scroll-behavior:smooth}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%;color:rgba(var(--text-color),1);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)}body[data-theme=dark] .balance:nth-of-type(3){color:rgba(var(--text-color),1)}body[data-theme=dark] .person .person-initials{color:rgba(var(--text-color),.9)!important}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{position:relative;align-items:center;justify-content:center;padding:.6rem 1.2rem;font-weight:600;cursor:pointer;border-radius:.3rem;color:var(--accent-color);border:none}.flex,.logo{display:flex}.btn,.primary-btn{color:rgba(var(--foreground-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}.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{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}}.action{position:relative;justify-content:center;padding:0;background:0 0}.action[disabled] .primary-btn{background:0 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}.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 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%;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);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}#main_header{align-items:center;padding:clamp(1rem,2vw,2rem) 1rem;justify-content:space-between}.icon{height:1.2rem;width:1.2rem;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;color:rgba(var(--text-color),1);font-size:.8em;text-transform:capitalize;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{align-self:flex-end}.user-panel .icon{stroke:rgba(var(--foreground-color),1)}.user-panel sm-button{border-radius:2rem}.display-balance{grid-template-columns:1fr 1fr;grid-template-areas:". ." "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:2.5rem;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;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),.1),rgba(var(--text-color),.2));background-size:cover}.balance:nth-of-type(1) .tooltip{box-shadow:0 0 0 .4rem rgba(var(--text-color),.1) inset}.balance:nth-of-type(2){background:url(bg-art1.svg) left bottom,linear-gradient(135deg,#fd946a,#ff4857);background-size:cover}.balance:nth-of-type(2) .tooltip{box-shadow:0 0 0 .4rem #ff4857 inset}.balance: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}.complaint .processed,.deposited{color:#007732}.page .container-header,.tooltip{top:0;background:rgba(var(--foreground-color),1)}.balance:nth-of-type(3) .tooltip{box-shadow:0 0 0 .4rem #1b0980 inset}.tooltip{position:absolute;left:0;right:0;bottom:0;cursor:help;display:flex;flex-direction:column;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}.tooltip:hover{clip-path:circle(100%)}.user-type{font-weight:500}.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;font-weight:500}.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{text-transform:capitalize}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;text-transform:capitalize}.request h3,.request h4{margin-bottom:1.5rem}.copy-row h4,.request button{margin-bottom:0}.request h4:last-of-type{margin-bottom:0}.request .amount{font-size:1.4em}.request button{width:auto;margin-top:1.5rem}.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}.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;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;font-weight:500;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 .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 .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{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}#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}}#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}.activity,.activity .icon{background:rgba(var(--text-color),.06)}#transaction_result #transaction_heading{margin-bottom:2rem}#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:6rem;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(--foreground-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;transition:transform .3s}.activity:active{transform:scale(.95)}.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,.select{background:rgba(var(--text-color),.06)}.activity .activity-type{grid-area:type;text-transform:capitalize;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}#add_person_btn,.person .person-name{text-align:center;opacity:.8;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)}#add_person_btn:active,.person:active{transform:scale(.95)}#add_person_btn,.person{cursor:pointer;transition:transform .3s}.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}.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 header h4{text-transform:capitalize}#transaction_page h5{font-weight:400;opacity:.8;margin-bottom:.2rem;text-transform:capitalize}#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}#transaction_page #transaction_details .flex{margin-bottom:1rem;align-items:baseline}#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;flex-direction:column;font-size:.85rem}#add_person_btn .icon{height:3rem;width:3rem;border-radius:2rem;padding:1rem;align-self:center;margin-bottom:.4rem}.person{display:flex;flex-direction:column;align-items:center;width:5rem}.person .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:.4rem!important;text-transform:uppercase}#person_popup h3,.person .person-name{text-transform:capitalize}.person .person-name{font-size:.85rem}#person_popup .copy-row{margin-bottom:1.5rem}#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}}@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 59940db..9b45d48 100644 --- a/css/main.scss +++ b/css/main.scss @@ -37,6 +37,11 @@ body[data-theme="dark"]{ .balance:nth-of-type(3){ color: rgba(var(--text-color), 1); } + .person{ + .person-initials{ + color: rgba(var(--text-color), 0.9) !important; + } + } } a { @@ -194,6 +199,10 @@ button { transform: none !important; } +sm-button[variant="outlined"]{ + --accent-color: rgba(var(--text-color), 1); +} + .loader { fill: none; stroke-width: 10; @@ -643,7 +652,7 @@ details{ } } &:nth-of-type(2){ - background: url(bg-art1.svg), linear-gradient(135deg, #fd946a, #ff4857); + 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; @@ -652,7 +661,7 @@ details{ &:nth-of-type(3){ grid-area: flo; color: rgba(var(--foreground-color), 1); - background: url(bg-art3.svg) bottom no-repeat, linear-gradient(270deg, #2f69e6, #1b0980); + background: 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; @@ -710,36 +719,36 @@ details{ grid-template-columns: repeat(4, 1fr); padding: 1.5rem; gap: 2rem 0.2rem; - .option { - position: relative; - display: flex; - flex-direction: column; - align-items: center; - text-align: center; - border-radius: 0.4rem; - width: 5rem; - text-transform: capitalize; - transition: transform 0.3s; - -webkit-tap-highlight-color: transparent; - cursor: pointer; - .icon { - height: 3rem; - width: 3rem; - background: rgba(var(--text-color), 0.06); - border-radius: 2rem; - padding: 0.8rem; - margin-bottom: 0.6rem; - } +} +.option { + position: relative; + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + border-radius: 0.4rem; + width: 5rem; + text-transform: capitalize; + transition: transform 0.3s; + -webkit-tap-highlight-color: transparent; + cursor: pointer; + .icon { + height: 3rem; + width: 3rem; + background: rgba(var(--text-color), 0.06); + border-radius: 2rem; + padding: 0.8rem; + margin-bottom: 0.6rem; + } - h4 { - font-size: 0.85rem; - opacity: 0.8; - font-weight: 500; - } + h4 { + font-size: 0.85rem; + opacity: 0.8; + font-weight: 500; + } - &:active { - transform: scale(0.95); - } + &:active { + transform: scale(0.95); } } @@ -1164,6 +1173,10 @@ sm-panel{ grid-template-areas: 'icon type amount' 'icon receiver time'; align-items: center; cursor: pointer; + transition: transform 0.3s; + &:active{ + transform: scale(0.95); + } .icon{ grid-area: icon; height: 3rem; @@ -1280,20 +1293,123 @@ sm-panel{ } #transaction_page{ - .grid:first-of-type{ + header{ padding: 0.5rem 0; - grid-template-columns: auto 1fr; - grid-template-areas: 'back .' 'back .'; .back-arrow{ grid-area: back; } h4{ text-transform: capitalize; } - h5{ - font-weight: 400; - font-family: 'Roboto', sans-serif; + } + h5{ + font-weight: 400; + font-family: 'Roboto', sans-serif; + opacity: 0.8; + margin-bottom: 0.2rem; + text-transform: capitalize; + } + #transaction_details{ + position: relative; + margin: 1.5rem 0; + padding: 1.5rem; + background-color: rgba(var(--text-color), 0.06); + max-width: 50ch; + border-radius: 0.5rem; + .icon{ + height: 4rem; + width: 4rem; + padding: 1.2rem; + border-radius: 4rem; + background: rgba(var(--text-color), 0.06); + margin-bottom: 2rem; } + .flex{ + margin-bottom: 1rem; + align-items: baseline; + } + strong{ + font-weight: 500; + } + strong:not(:last-of-type){ + margin-bottom: 1rem; + } + } + .transaction-amount{ + font-size: 2rem; + font-weight: 400; + } + #transaction_time{ + right: 0; + position: absolute; + margin: 1.5rem; + } +} +#people_container{ + display: grid; + grid-template-columns: repeat(4, 1fr); + padding: 1.5rem; + gap: 2rem 0.2rem; +} +#add_person_btn{ + cursor: pointer; + display: flex; + flex-direction: column; + text-align: center; + transition: transform 0.3s; + font-size: 0.85rem; + opacity: 0.8; + font-weight: 500; + &:active{ + transform: scale(0.95); + } + .icon{ + height: 3rem; + width: 3rem; + border-radius: 2rem; + padding: 1rem; + background: rgba(var(--text-color), 0.06); + align-self: center; + margin-bottom: 0.4rem; + } +} +.person{ + display: flex; + flex-direction: column; + align-items: center; + cursor: pointer; + transition: transform 0.3s; + width: 5rem; + &: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_popup{ + h3{ + text-transform: capitalize; + } + .copy-row{ + margin-bottom: 1.5rem; } } @@ -1337,6 +1453,9 @@ sm-panel{ } #transaction_page{ padding-top: 0; + header{ + padding: 1.5rem 0; + } } } @@ -1414,7 +1533,7 @@ sm-panel{ margin-top: 1rem; } } - .options-tab{ + .options-tab, #people_container{ grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr)); gap: 2rem 0.8rem; } diff --git a/index.html b/index.html index d340dc2..403bcc0 100644 --- a/index.html +++ b/index.html @@ -328,6 +328,7 @@ Done +
@@ -348,6 +349,67 @@ + + + +
+ + close + + + +

Add a person

+ +
+ + + + + + +
+ + close + + + +
+

+
FLO ID
+
+

+ + Copy + + + +
+
Rupee actions
+
+
+ + + +

Send

+
+
+ + + +

Request

+
+
+ +
@@ -492,6 +554,15 @@ +
+

People

+
+
+
+

S

+

Sairaj Mote

+
+
@@ -763,7 +834,7 @@ Sent Deposits Withdrawals - Pay through cashier + Paid through cashier System Notifications @@ -842,15 +913,15 @@ Sign out
-
- +
+ Go to activity page -

Transaction

-
1pm sep 29 2020
-
- Report
+

+
+
+ Report @@ -896,6 +967,7 @@ userFloIdContainers.forEach(container => container.textContent = myFloID) defaultUPI = localStorage.getItem(`defaultUPI${myFloID}`) renderUserUPI() + renderAllContacts() hideLoader() await token_app.actions.doShreeGanesh(); }).catch(error => console.error(error)) @@ -963,7 +1035,7 @@ return card; }, activityCard(obj){ - let {type, amount, timeStamp, receiver} = obj; + let {type, amount, timeStamp, receiver, upi_txid, receiverUPI} = obj; let card = document.createElement('div'), composition = ``, icon, @@ -971,7 +1043,14 @@ transaction, className card.classList.add('activity') - setAttributes(card, {'data-type': type, 'data-vector-clock': timeStamp}) + setAttributes(card, { + 'data-type': type, + 'data-vector-clock': timeStamp, + 'data-receiver': receiver, + 'data-amount': amount, + 'data-upi-txid': upi_txid, + 'data-receiver-upi': receiverUPI + }) switch(type){ case 'sent': icon = ` @@ -1329,6 +1408,18 @@

` return card; + }, + contact(floId, name){ + console.log(floId, name) + let card = document.createElement('div') + card.classList.add('person') + setAttributes(card, {'data-flo-id': floId, 'data-name': name}) + let color = randomHsl() + card.innerHTML = ` +

${name.charAt(0)}

+

${name}

+ ` + return card } } @@ -1494,6 +1585,15 @@ } } + function randomHsl(saturation = 90, lightness = 50) { + let hue = Math.random() * 360 + let color = { + primary: `hsla( ${hue}, ${saturation}%, ${lightness}%, 1)`, + light : `hsla( ${hue}, ${saturation}%, 90%, 0.6)` + } + return color; + } + function clearAllInputs(parent) { if (parent.querySelectorAll("textarea")) parent.querySelectorAll("textarea").forEach((field) => { @@ -1661,6 +1761,23 @@ } }) + //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') + showPersonName.textContent = person.dataset.name + showPersonFloId.textContent = person.dataset.floId + showPopup('person_popup') + } + if(e.target.closest('#add_person_btn')){ + showPopup('add_person_popup') + + } + }) + // Function for confirming deposit requests document.getElementById('pending_deposits_container').addEventListener('click', async (e) => { if (e.target.closest('.confirm-deposit-btn')) @@ -1707,7 +1824,14 @@ document.getElementById('activity_page').addEventListener('click', (e) => { if (e.target.closest('.activity')) { currentRequest = e.target.closest('.activity') - showTransactionDetails({type: currentRequest.dataset.type, timeStamp: currentRequest.dataset.vectorClock}) + showTransactionDetails({ + type: currentRequest.dataset.type, + timeStamp: currentRequest.dataset.vectorClock, + amount: currentRequest.dataset.amount, + receiver: currentRequest.dataset.receiver, + upiTxId: currentRequest.dataset.upiTxid, + receiverUPI: currentRequest.dataset.receiverUpi + }) } }) // Function for reporting complain @@ -1818,14 +1942,95 @@ const transactionPage = document.getElementById('transaction_page'), transactionType = document.getElementById('transaction_type'), - transactionTime = document.getElementById('transaction_time') + transactionDetails = document.getElementById('transaction_details') function showTransactionDetails(obj){ - let {type, timeStamp, } = obj; - if(type === 'payCashier') - type = 'Paid through cashier' + let {type, timeStamp, amount, receiver, upiTxId, receiverUPI} = obj; + let composition = ``, + icon, + transaction, + className + + switch(type){ + case 'sent': + icon = ` + + + + ` + transaction = 'Sent to' + break; + case 'deposit': + icon = ` + + deposit + + + + + + + ` + type = 'deposited' + transaction = 'Deposited to' + break; + case 'withdraw': + icon = ` + + withdraw + + + + + + + + ` + type = 'withdrawn' + transaction = 'withdrawn to' + break; + case 'payCashier': + icon = ` + + + + + ` + className = 'withdrawn' + transaction = 'Paid to' + type = 'Paid through cashier' + break; + } + + composition = `${icon} +
${type}
+
+ ₹ ${amount} +
` + + if(receiver !== 'undefined') + composition +=` +
${transaction}
${receiver}` + + if(upiTxId !== 'undefined') + composition += ` +
UPI transaction ID
+ ${upiTxId} + ` + + if(receiverUPI !== 'undefined') + composition += ` +
Sent to UPI ID
+ ${receiverUPI} + ` + composition += `
${formatedTime(timeStamp)}
` + transactionDetails.innerHTML = composition transactionType.textContent = type - transactionTime.textContent = formatedTime(timeStamp) showPage('transaction_page') } @@ -1926,6 +2131,41 @@ } + const contactFlo = document.getElementById('person_flo_id'), + contactName = document.getElementById('person_name') + async function addPerson(){ + compactIDB.addData('contacts', {name: contactName.value}, contactFlo.value) + .then(success => { + notify('Contact added', 'success') + renderAllContacts() + hidePopup() + }) + .catch(error => { + notify('Contact already added', 'error') + }) + } + + const peopleContainer = document.getElementById('people_container') + async function renderAllContacts(){ + const allContacts = await compactIDB.readAllData('contacts') + peopleContainer.innerHTML = `` + for(contact in allContacts){ + frag.append(render.contact(contact, allContacts[contact].name)) + } + peopleContainer.append(frag) + let addPersonButton = document.createElement('div') + addPersonButton.id="add_person_btn" + addPersonButton.innerHTML = ` + + add Contact + + + + Add + ` + peopleContainer.prepend(addPersonButton) + } + function signIn() { return new Promise((resolve, reject) => { hideLoader() @@ -1943,10 +2183,10 @@ document.querySelector('main').classList.add('hide-completely') document.getElementById('navbar').classList.add('hide-completely') document.getElementById('main_header').classList.add('hide-completely') - localStorage.removeItem(`defaultUPI${myFloID}`) floDapps.clearCredentials() compactIDB.deleteDB().then((message) => { delete token_app.master_configurations; + localStorage.removeItem(`defaultUPI${myFloID}`) onLoadStartUp() notifications.clearAll() notify('Logged out') @@ -9821,7 +10061,7 @@ } }); }, - addContact: function (id, floID, KB = this.supernodeKBucket) { + addPerson: function (id, floID, KB = this.supernodeKBucket) { const contact = { id: id, floID: floID @@ -9835,7 +10075,7 @@ } catch (e) { decodedId = address; } - this.addContact(decodedId, address, KB); + this.addPerson(decodedId, address, KB); }, isNodePresent: function (flo_id, KB = this.supernodeKBucket) { let kArray = KB.toArray(); @@ -10847,7 +11087,9 @@ cash_sent_details: {}, pay_thru_cashier: {}, //user UPIs - userUPIs: {} + userUPIs: {}, + //contacts + contacts: {} } //add other given objectStores for (o in this.appObs) @@ -12337,7 +12579,8 @@ let request_object = { user_flo_id: myFloID, upi_txid: upi_txid, - deposit_amount: token_amount_to_buy.value + deposit_amount: token_amount_to_buy.value, + cashier_upi } if (typeof upi_txid === "string" && upi_txid.length > 1) { floCloudAPI.sendGeneralData(request_object, token_app.master_configurations @@ -12347,7 +12590,7 @@ hidePopup() showTransactionStatus('success', 'Deposit request sent.', 'It may take upto 48 hours for deposited amount to be reflected in your account.') btnLoading('request_tokens_btn', 'stop') - depositActivityContainer.prepend(render.activityCard({type: 'deposit', amount: request_object.deposit_amount, timeStamp: `${Date.now()}_${myFloID}}`, upi_txid})) + depositActivityContainer.prepend(render.activityCard({type: 'deposit', amount: request_object.deposit_amount, timeStamp: `${Date.now()}_${myFloID}}`, upi_txid, receiver: cashier_upi})) }) return true; } @@ -12469,7 +12712,7 @@ showTransactionStatus('success', 'Pay through cashier Request sent.', `Sent to: ${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, upi_txid: 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})) } } catch (error) { @@ -12500,9 +12743,10 @@ for (usr_deposits of deposit_msg) { let { upi_txid, - deposit_amount + deposit_amount, + cashier_upi } = usr_deposits.message; - frag.append(render.activityCard({type: 'deposit', amount: deposit_amount, timeStamp: usr_deposits.vectorClock, upi_txid})) + frag.append(render.activityCard({type: 'deposit', amount: deposit_amount, timeStamp: usr_deposits.vectorClock, upi_txid, receiver: cashier_upi})) } depositActivityContainer.innerHTML = ``; @@ -12525,7 +12769,7 @@ upi_txid, amount } = cashier_message.message; - frag.append(render.activityCard({type: 'payCashier', amount, timeStamp: cashier_message.vectorClock, receiver: receiver_flo_id, upi_txid})) + frag.append(render.activityCard({type: 'payCashier', amount, timeStamp: cashier_message.vectorClock, receiver: receiver_flo_id, receiverUPI: upi_txid})) } payCashierActivityContainer.innerHTML = ``; From ae0ae51989b28e66442a3ce15a995024855e975a Mon Sep 17 00:00:00 2001 From: sairaj mote Date: Thu, 1 Oct 2020 23:05:44 +0530 Subject: [PATCH 21/42] 0.0.47 --- css/main.css | 147 +++++++++++++++++++++-------- css/main.min.css | 2 +- css/main.scss | 209 +++++++++++++++++++++++++++-------------- index.html | 240 ++++++++++++++++++++++++++++++----------------- 4 files changed, 401 insertions(+), 197 deletions(-) diff --git a/css/main.css b/css/main.css index 587e74f..9112c5e 100644 --- a/css/main.css +++ b/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 { diff --git a/css/main.min.css b/css/main.min.css index 25b0922..62b1158 100644 --- a/css/main.min.css +++ b/css/main.min.css @@ -1 +1 @@ -#transaction_page h5,*,.activity .activity-amount,.balance h4{font-family:Roboto,sans-serif}a,h1,h2,h3,h4,h5{font-weight:600}.action,button{display:inline-flex}.complaint-placeholder h5,button,textarea{background:rgba(var(--text-color),.1)}.option,button{-webkit-tap-highlight-color:transparent;transition:transform .3s;text-transform:capitalize}.icon,.loader{overflow:visible;fill:none}*{box-sizing:border-box;padding:0;margin:0}button,h1,h2,h3,h4,h5{font-family:Poppins,sans-serif}:root{scroll-behavior:smooth}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%;color:rgba(var(--text-color),1);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)}body[data-theme=dark] .balance:nth-of-type(3){color:rgba(var(--text-color),1)}body[data-theme=dark] .person .person-initials{color:rgba(var(--text-color),.9)!important}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{position:relative;align-items:center;justify-content:center;padding:.6rem 1.2rem;font-weight:600;cursor:pointer;border-radius:.3rem;color:var(--accent-color);border:none}.flex,.logo{display:flex}.btn,.primary-btn{color:rgba(var(--foreground-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}.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{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}}.action{position:relative;justify-content:center;padding:0;background:0 0}.action[disabled] .primary-btn{background:0 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}.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 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%;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);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}#main_header{align-items:center;padding:clamp(1rem,2vw,2rem) 1rem;justify-content:space-between}.icon{height:1.2rem;width:1.2rem;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;color:rgba(var(--text-color),1);font-size:.8em;text-transform:capitalize;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{align-self:flex-end}.user-panel .icon{stroke:rgba(var(--foreground-color),1)}.user-panel sm-button{border-radius:2rem}.display-balance{grid-template-columns:1fr 1fr;grid-template-areas:". ." "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:2.5rem;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;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),.1),rgba(var(--text-color),.2));background-size:cover}.balance:nth-of-type(1) .tooltip{box-shadow:0 0 0 .4rem rgba(var(--text-color),.1) inset}.balance:nth-of-type(2){background:url(bg-art1.svg) left bottom,linear-gradient(135deg,#fd946a,#ff4857);background-size:cover}.balance:nth-of-type(2) .tooltip{box-shadow:0 0 0 .4rem #ff4857 inset}.balance: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}.complaint .processed,.deposited{color:#007732}.page .container-header,.tooltip{top:0;background:rgba(var(--foreground-color),1)}.balance:nth-of-type(3) .tooltip{box-shadow:0 0 0 .4rem #1b0980 inset}.tooltip{position:absolute;left:0;right:0;bottom:0;cursor:help;display:flex;flex-direction:column;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}.tooltip:hover{clip-path:circle(100%)}.user-type{font-weight:500}.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;font-weight:500}.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{text-transform:capitalize}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;text-transform:capitalize}.request h3,.request h4{margin-bottom:1.5rem}.copy-row h4,.request button{margin-bottom:0}.request h4:last-of-type{margin-bottom:0}.request .amount{font-size:1.4em}.request button{width:auto;margin-top:1.5rem}.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}.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;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;font-weight:500;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 .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 .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{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}#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}}#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}.activity,.activity .icon{background:rgba(var(--text-color),.06)}#transaction_result #transaction_heading{margin-bottom:2rem}#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:6rem;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(--foreground-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;transition:transform .3s}.activity:active{transform:scale(.95)}.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,.select{background:rgba(var(--text-color),.06)}.activity .activity-type{grid-area:type;text-transform:capitalize;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}#add_person_btn,.person .person-name{text-align:center;opacity:.8;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)}#add_person_btn:active,.person:active{transform:scale(.95)}#add_person_btn,.person{cursor:pointer;transition:transform .3s}.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}.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 header h4{text-transform:capitalize}#transaction_page h5{font-weight:400;opacity:.8;margin-bottom:.2rem;text-transform:capitalize}#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}#transaction_page #transaction_details .flex{margin-bottom:1rem;align-items:baseline}#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;flex-direction:column;font-size:.85rem}#add_person_btn .icon{height:3rem;width:3rem;border-radius:2rem;padding:1rem;align-self:center;margin-bottom:.4rem}.person{display:flex;flex-direction:column;align-items:center;width:5rem}.person .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:.4rem!important;text-transform:uppercase}#person_popup h3,.person .person-name{text-transform:capitalize}.person .person-name{font-size:.85rem}#person_popup .copy-row{margin-bottom:1.5rem}#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}}@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}body,body[data-theme=dark] .flo-balance-card{color:rgba(var(--text-color),1)}a,h1,h2,h3,h4,h5{font-weight:600}#navbar .navbar-item,#transaction_page h5,#transaction_page header h4,.activity .activity-type,.capitalize,.option,.request h5,button,sm-tab{text-transform:capitalize}#navbar .navbar-item,.action,.balance,.user-panel,button,sm-popup .illustration{position:relative}.icon,.loader{overflow:visible}.balance h4,.breakable{word-break:break-all}.option,.person,button{-webkit-tap-highlight-color:transparent}*{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);transition:transform .3s;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,.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}.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{display:inline-flex;justify-content:center;padding:0;background:0 0}.action[disabled] .primary-btn{background:0 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{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{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{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}.balance,.tooltip{display:flex;flex-direction:column}.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;border-radius:1rem;padding:1rem;justify-content:flex-end}.balance h4{font-size:2.5rem;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;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}.activity,.option{transition:transform .3s;cursor:pointer}.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,.time,.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}.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}.copy-row h4,.request button{margin-bottom:0}.request h4:last-of-type{margin-bottom:0}.request button{width:auto;margin-top:1.5rem}.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 .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}#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"}.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,.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}.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}.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;opacity:.8;font-weight:500}#add_person_btn .icon{height:3rem;width:3rem;stroke-width:10;padding:1rem;align-self:center;margin-bottom:.4rem}.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:.4rem!important;text-transform:uppercase}#person_popup h3,.person-name{text-transform:capitalize}.person-name{font-size:.85rem;opacity:.8;font-weight:500;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 9b45d48..690a89f 100644 --- a/css/main.scss +++ b/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) { diff --git a/index.html b/index.html index 403bcc0..f4d52a2 100644 --- a/index.html +++ b/index.html @@ -53,7 +53,7 @@ Sign In - +
close @@ -381,7 +381,16 @@
-

+
+

+
+

+ + edit + + +
+
FLO ID

@@ -391,21 +400,20 @@
-
Rupee actions
-
+
-

Send

+

Send rupee

-

Request

+

Request rupee

@@ -504,7 +512,7 @@

Rupee actions

-
+
@@ -565,12 +573,19 @@
-
+

My Balances

- Check Balance +
-
+
?

Your wallet balance

@@ -578,7 +593,7 @@
Rupee

0

-
+
?

Money that is in-process after deposit.

@@ -586,7 +601,7 @@
In-process

0

-
+
?

FLO balance required for each transaction.

@@ -607,11 +622,9 @@ -
- - Load pending - -
+ + Load pending +
@@ -668,9 +681,7 @@
-
- Load pending -
+ Load pending
@@ -727,11 +738,9 @@
-
- - Load pending - -
+ + Load pending +
@@ -795,11 +804,11 @@ Check Balance
-
+
Rupee

0

-
+
FLO

0

@@ -904,10 +913,12 @@

Toggle dark theme

-

My UPIs

-
-

Add UPI address for easier access during various transactions.

- + Add UPI address +
+

My UPIs

+
+

Add UPI address for easier access during various transactions.

+ + Add UPI address +

Sign Out

Signing out will erase all the data stored in local storage and Indexed DB. This will remove saved private key, UPI addresses.

Sign out @@ -921,6 +932,7 @@

+

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.

Report @@ -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 @@

${floId}

UPI TXID

${txid}

+
Amount
+

₹${amount}

`; 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 = `
FLO address

${floId}

UPI ID
-

${upiId}

-
Transaction ID
-

${txid}

+

${upiId}

+
TAmount
+

₹${amount}

`; @@ -1115,7 +1126,7 @@

${transaction}

` if(receiver) composition += ` -

${receiver}

+

${allContacts[receiver] ? allContacts[receiver].name : receiver}

` composition += `

${sign} ₹${amount}

@@ -1136,16 +1147,9 @@ }) markup = `
${formatedTime(time)}
Request by
-
-

${senderAddress}

- - Copy - - - -
+

${allContacts[senderAddress] ? allContacts[senderAddress].name : senderAddress}

amount
-

₹ ${amount}

+

₹ ${amount}

`; if (enableActions) markup += ` @@ -1409,14 +1413,12 @@ ` 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 = ` -

${name.charAt(0)}

+

${name.charAt(0)}

${name}

` 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 +=` -
${transaction}
${receiver}` +
${transaction}
${allContacts[receiver] ? allContacts[receiver].name : receiver}` 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 += `Select Cashier...`; + cashierList += `Select Cashier`; for (cashier in token_app.master_configurations.cashiers) cashierList += `${cashier}` 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); } } From c654bc29a6fb6f8d917e00cb298f469b1f319b54 Mon Sep 17 00:00:00 2001 From: sairaj mote Date: Fri, 2 Oct 2020 01:53:56 +0530 Subject: [PATCH 22/42] 0..0.48 --- components.js | 4 ++++ css/main.css | 7 +++++-- css/main.min.css | 2 +- css/main.scss | 9 +++++---- index.html | 46 +++++++++++++++++++++++++++++++++++++++------- 5 files changed, 54 insertions(+), 14 deletions(-) diff --git a/components.js b/components.js index aa200e9..27943af 100644 --- a/components.js +++ b/components.js @@ -165,6 +165,10 @@ input[type=number]::-webkit-outer-spin-button { appearance: none; margin: 0; } +input::-ms-reveal, +input::-ms-clear { + display: none; +} input:invalid{ outline: none; box-shadow: none; diff --git a/css/main.css b/css/main.css index 9112c5e..d5851f2 100644 --- a/css/main.css +++ b/css/main.css @@ -241,9 +241,12 @@ sm-button[variant=outlined] { padding: 0; background: none; } -.action[disabled] .primary-btn { +.action:disabled .primary-btn { background: none; } +.action:focus { + outline: none; +} .action h4 { padding: 0.5rem 1.2rem; font-size: 0.9rem; @@ -639,7 +642,7 @@ details p { justify-content: flex-end; } .balance h4 { - font-size: 2.5rem; + font-size: 2rem; font-family: "Roboto", sans-serif; font-weight: 500; text-shadow: 1px 0.1rem 0.2rem #00000040; diff --git a/css/main.min.css b/css/main.min.css index 62b1158..6f99e59 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}#navbar .navbar-item,#transaction_page h5,#transaction_page header h4,.activity .activity-type,.capitalize,.option,.request h5,button,sm-tab{text-transform:capitalize}#navbar .navbar-item,.action,.balance,.user-panel,button,sm-popup .illustration{position:relative}.icon,.loader{overflow:visible}.balance h4,.breakable{word-break:break-all}.option,.person,button{-webkit-tap-highlight-color:transparent}*{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);transition:transform .3s;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,.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}.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{display:inline-flex;justify-content:center;padding:0;background:0 0}.action[disabled] .primary-btn{background:0 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{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{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{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}.balance,.tooltip{display:flex;flex-direction:column}.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;border-radius:1rem;padding:1rem;justify-content:flex-end}.balance h4{font-size:2.5rem;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;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}.activity,.option{transition:transform .3s;cursor:pointer}.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,.time,.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}.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}.copy-row h4,.request button{margin-bottom:0}.request h4:last-of-type{margin-bottom:0}.request button{width:auto;margin-top:1.5rem}.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 .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}#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"}.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,.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}.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}.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;opacity:.8;font-weight:500}#add_person_btn .icon{height:3rem;width:3rem;stroke-width:10;padding:1rem;align-self:center;margin-bottom:.4rem}.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:.4rem!important;text-transform:uppercase}#person_popup h3,.person-name{text-transform:capitalize}.person-name{font-size:.85rem;opacity:.8;font-weight:500;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 +#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}#navbar .navbar-item,#transaction_page h5,#transaction_page header h4,.activity .activity-type,.capitalize,.option,.request h5,button,sm-tab{text-transform:capitalize}#navbar .navbar-item,.action,.balance,.user-panel,button,sm-popup .illustration{position:relative}.icon,.loader{overflow:visible}.option,.person,button{-webkit-tap-highlight-color:transparent}*{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);transition:transform .3s;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,.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{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}.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{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{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{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}.balance,.tooltip{display:flex;flex-direction:column}.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;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;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}.activity,.option{transition:transform .3s;cursor:pointer}.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,.time,.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}.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}.copy-row h4,.request button{margin-bottom:0}.request h4:last-of-type{margin-bottom:0}.request button{width:auto;margin-top:1.5rem}.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 .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}#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"}.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,.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}.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}.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;opacity:.8;font-weight:500}#add_person_btn .icon{height:3rem;width:3rem;stroke-width:10;padding:1rem;align-self:center;margin-bottom:.4rem}.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:.4rem!important;text-transform:uppercase}#person_popup h3,.person-name{text-transform:capitalize}.person-name{font-size:.85rem;opacity:.8;font-weight:500;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 690a89f..e8151ec 100644 --- a/css/main.scss +++ b/css/main.scss @@ -114,7 +114,6 @@ button { ::-moz-focus-inner { border: none; } - .bottom-padding { padding-bottom: 1.5rem; } @@ -241,12 +240,14 @@ sm-button[variant="outlined"]{ justify-content: center; padding: 0; background: none; - &[disabled] { + &:disabled{ .primary-btn { background: none; } } - + &:focus{ + outline: none; + } h4 { padding: 0.5rem 1.2rem; font-size: 0.9rem; @@ -660,7 +661,7 @@ details{ padding: 1rem; justify-content: flex-end; h4{ - font-size: 2.5rem; + font-size: 2rem; font-family: 'Roboto', sans-serif; font-weight: 500; text-shadow: 1px 0.1rem 0.2rem #00000040; diff --git a/index.html b/index.html index f4d52a2..4b65884 100644 --- a/index.html +++ b/index.html @@ -48,7 +48,7 @@

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

- + @@ -383,12 +383,16 @@

+

-

- - edit + + + + + +
FLO ID
@@ -604,7 +608,7 @@
?
-

FLO balance required for each transaction.

+

Your FLO balance. This is required for every transaction.

FLO

0

@@ -805,10 +809,18 @@
+
+
?
+

Your wallet balance

+
Rupee
-

0

+

0

+
+
?
+

Your FLO balance. This is required for every transaction.

+
FLO

0

@@ -1523,6 +1535,9 @@ break; } }) + + let personPopupOpen = false; + document.addEventListener('popupclosed', e => { popupStack = e.detail.popupStack let thisPopup = e.detail.popup, @@ -1737,6 +1752,9 @@ 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 return input.isValid }) @@ -2211,7 +2229,7 @@ async function changePersonName(){ let contact = await compactIDB.readData('contacts', person.dataset.floId) - contact.name = showPersonName.textContent + contact.name = showPersonName.textContent.trim() if(showPersonName.textContent === '') contact.name = 'Unknown' compactIDB.writeData('contacts', contact, person.dataset.floId) @@ -2225,6 +2243,20 @@ }) } + 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') + }) + } + } + function signIn() { return new Promise((resolve, reject) => { hideLoader() From 9de4119272d00466afbbcea9161f9e76b8babdf2 Mon Sep 17 00:00:00 2001 From: sairaj mote Date: Fri, 2 Oct 2020 14:39:39 +0530 Subject: [PATCH 23/42] 0.0.49 --- components.js | 2467 ++++++++++++++++++++++++++-------------------- css/main.css | 9 +- css/main.min.css | 2 +- css/main.scss | 9 +- 4 files changed, 1420 insertions(+), 1067 deletions(-) diff --git a/components.js b/components.js index 27943af..2e62640 100644 --- a/components.js +++ b/components.js @@ -2,89 +2,112 @@ const smButton = document.createElement('template') smButton.innerHTML = `
@@ -93,7 +116,9 @@ customElements.define('sm-button', class extends HTMLElement { constructor() { super() - this.attachShadow({ mode: 'open' }).append(smButton.content.cloneNode(true)) + this.attachShadow({ + mode: 'open' + }).append(smButton.content.cloneNode(true)) } get disabled() { @@ -105,8 +130,7 @@ customElements.define('sm-button', this.isDisabled = true this.setAttribute('disabled', '') this.button.removeAttribute('tabindex') - } - else if (!value && this.isDisabled) { + } else if (!value && this.isDisabled) { this.isDisabled = false this.removeAttribute('disabled') } @@ -118,8 +142,7 @@ customElements.define('sm-button', bubbles: true, composed: true })) - } - else { + } else { this.dispatchEvent(new CustomEvent('clicked', { bubbles: true, composed: true @@ -149,7 +172,8 @@ smInput.innerHTML = ` *{ padding: 0; margin: 0; - box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; } input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button, @@ -171,12 +195,15 @@ input::-ms-clear { } input:invalid{ outline: none; - box-shadow: none; + -webkit-box-shadow: none; + box-shadow: none; } ::-moz-focus-inner{ border: none; } :host{ + display: -webkit-box; + display: -ms-flexbox; display: flex; } .hide{ @@ -204,18 +231,25 @@ border: none; border-radius: 10rem; } .input { + display: -webkit-box; + display: -ms-flexbox; display: flex; - align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; text-align: left; position: relative; gap: 1em; padding: 0.7em 1em; border-radius: 0.3em; + -webkit-transition: opacity 0.3s; + -o-transition: opacity 0.3s; transition: opacity 0.3s; background: rgba(var(--text-color), 0.06); - box-shadow: 0 0 0.2rem rgba(var(--text-color), 0.2) inset; + -webkit-box-shadow: 0 0 0.2rem rgba(var(--text-color), 0.2) inset; + box-shadow: 0 0 0.2rem rgba(var(--text-color), 0.2) inset; font-family: var(--font-family); - width: 100% + width: 100%; outline: none; min-width: 0; } @@ -230,26 +264,36 @@ input:focus{ caret-color: var(--accent-color); } .input:focus-within:not(.readonly){ - box-shadow: 0 0 0 0.1em var(--accent-color) inset; + -webkit-box-shadow: 0 0 0 0.1em var(--accent-color) inset; + box-shadow: 0 0 0 0.1em var(--accent-color) inset; } .disabled{ pointer-events: none; opacity: 0.6; } .label { - user-select: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; opacity: .7; font-weight: 400; font-size: 1em; position: absolute; top: 0; + -webkit-transition: -webkit-transform 0.3s; + transition: -webkit-transform 0.3s; + -o-transition: transform 0.3s; transition: transform 0.3s; + transition: transform 0.3s, -webkit-transform 0.3s; -webkit-transform-origin: left; - transform-origin: left; + -ms-transform-origin: left; + transform-origin: left; pointer-events: none; white-space: nowrap; overflow: hidden; - text-overflow: ellipsis; + -o-text-overflow: ellipsis; + text-overflow: ellipsis; width: 100%; will-change: transform; } @@ -259,10 +303,16 @@ input:focus{ } .container{ width: 100%; + display: -webkit-box; + display: -ms-flexbox; display: flex; position: relative; - align-items: center; - flex: 1; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; } input{ font-size: 1em; @@ -274,12 +324,14 @@ input{ } .animate-label .container input { -webkit-transform: translateY(0.6em); - transform: translateY(0.6em); + -ms-transform: translateY(0.6em); + transform: translateY(0.6em); } .animate-label .container .label { -webkit-transform: translateY(-0.6em) scale(0.8); - transform: translateY(-0.6em) scale(0.8); + -ms-transform: translateY(-0.6em) scale(0.8); + transform: translateY(-0.6em) scale(0.8); opacity: 1; color: var(--accent-color) } @@ -323,7 +375,9 @@ customElements.define('sm-input', class extends HTMLElement { constructor() { super() - this.attachShadow({ mode: 'open' }).append(smInput.content.cloneNode(true)) + this.attachShadow({ + mode: 'open' + }).append(smInput.content.cloneNode(true)) } static get observedAttributes() { return ['placeholder'] @@ -364,11 +418,10 @@ customElements.define('sm-input', set readOnly(value) { if (value) { this.shadowRoot.querySelector('input').setAttribute('readonly', '') - this.shadowRoot.querySelector('.input').classList.add('readonly') - } - else { + this.shadowRoot.querySelector('.input').classList.add('readonly') + } else { this.shadowRoot.querySelector('input').removeAttribute('readonly') - this.shadowRoot.querySelector('.input').classList.remove('readonly') + this.shadowRoot.querySelector('.input').classList.remove('readonly') } } @@ -406,8 +459,7 @@ customElements.define('sm-input', this.label.classList.add('hide') if (!this.readonly) this.clearBtn.classList.remove('hide') - } - else { + } else { if (this.animate) this.inputParent.classList.remove('animate-label') else @@ -460,7 +512,7 @@ customElements.define('sm-input', } if (this.hasAttribute('readonly')) { this.input.setAttribute('readonly', '') - this.readonly = true + this.readonly = true } if (this.hasAttribute('disabled')) { this.inputParent.classList.add('disabled') @@ -472,11 +524,9 @@ customElements.define('sm-input', if (this.getAttribute('type') === 'number') { this.input.setAttribute('inputmode', 'numeric') this.input.setAttribute('type', 'number') - } - else + } else this.input.setAttribute('type', this.getAttribute('type')) - } - else + } else this.input.setAttribute('type', 'text') this.input.addEventListener('keydown', e => { if (this.getAttribute('type') === 'number') @@ -507,12 +557,15 @@ smTextarea.innerHTML = ` *{ padding: 0; margin: 0; - box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; } ::-moz-focus-inner{ border: none; } :host{ + display: -webkit-box; + display: -ms-flexbox; display: flex; } .hide{ @@ -537,16 +590,24 @@ smTextarea.innerHTML = ` min-width: 0; } .input { - flex: 1; + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; + display: -webkit-box; + display: -ms-flexbox; display: flex; - align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; position: relative; padding: 0.7em 1em; border-radius: 0.3em; + -webkit-transition: opacity 0.3s; + -o-transition: opacity 0.3s; transition: opacity 0.3s; background: rgba(var(--text-color), 0.1); font-family: var(--font-family); - width: 100% + width: 100%; outline: none; min-width: 0; } @@ -555,23 +616,33 @@ textarea:focus{ caret-color: var(--accent-color); } .input:focus-within{ - box-shadow: 0 0 0 0.1em var(--accent-color) inset; + -webkit-box-shadow: 0 0 0 0.1em var(--accent-color) inset; + box-shadow: 0 0 0 0.1em var(--accent-color) inset; } .label { - user-select: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; opacity: .7; font-weight: 400; font-size: 1em; position: absolute; top: 0.9em; + -webkit-transition: -webkit-transform 0.3s; + transition: -webkit-transform 0.3s; + -o-transition: transform 0.3s; transition: transform 0.3s; + transition: transform 0.3s, -webkit-transform 0.3s; -webkit-transform-origin: left; - transform-origin: left; + -ms-transform-origin: left; + transform-origin: left; pointer-events: none; white-space: nowrap; overflow: hidden; - text-overflow: ellipsis; + -o-text-overflow: ellipsis; + text-overflow: ellipsis; width: 100%; will-change: transform; } @@ -587,17 +658,20 @@ textarea{ } .animate-label textarea { -webkit-transform: translateY(0.6em); - transform: translateY(0.6em); + -ms-transform: translateY(0.6em); + transform: translateY(0.6em); } .animate-label .label { -webkit-transform: translateY(-0.6em) scale(0.8); - transform: translateY(-0.6em) scale(0.8); + -ms-transform: translateY(-0.6em) scale(0.8); + transform: translateY(-0.6em) scale(0.8); opacity: 1; color: var(--accent-color) } .clear{ - align-self: flex-start; + -ms-flex-item-align: start; + align-self: flex-start; } @media (any-hover: hover){ .icon:hover{ @@ -619,7 +693,9 @@ customElements.define('sm-textarea', class extends HTMLElement { constructor() { super() - this.attachShadow({ mode: 'open' }).append(smTextarea.content.cloneNode(true)) + this.attachShadow({ + mode: 'open' + }).append(smTextarea.content.cloneNode(true)) } static get observedAttributes() { return ['placeholder'] @@ -660,8 +736,7 @@ customElements.define('sm-textarea', this.inputParent.classList.add('animate-label') else this.label.classList.add('hide') - } - else { + } else { if (this.animate) this.inputParent.classList.remove('animate-label') else @@ -722,42 +797,52 @@ customElements.define('sm-textarea', const smTab = document.createElement('template') smTab.innerHTML = `
@@ -767,7 +852,9 @@ opacity: 1 customElements.define('sm-tab', class extends HTMLElement { constructor() { super() - this.shadow = this.attachShadow({ mode: 'open' }).append(smTab.content.cloneNode(true)) + this.shadow = this.attachShadow({ + mode: 'open' + }).append(smTab.content.cloneNode(true)) } }) @@ -776,88 +863,99 @@ customElements.define('sm-tab', class extends HTMLElement { const smCheckbox = document.createElement('template') smCheckbox.innerHTML = ` ` customElements.define('sm-checkbox', class extends HTMLElement { constructor() { super() - this.attachShadow({ mode: 'open' }).append(smCheckbox.content.cloneNode(true)) + this.attachShadow({ + mode: 'open' + }).append(smCheckbox.content.cloneNode(true)) this.checkbox = this.shadowRoot.querySelector('.checkbox'); this.input = this.shadowRoot.querySelector('input') @@ -907,8 +1005,7 @@ customElements.define('sm-checkbox', class extends HTMLElement { if (newValue === 'true') { this.checkbox.classList.add('disabled') this.isDisabled = true - } - else { + } else { this.checkbox.classList.remove('disabled') this.isDisabled = false } @@ -918,8 +1015,7 @@ customElements.define('sm-checkbox', class extends HTMLElement { this.isChecked = true this.input.checked = true this.dispatch() - } - else { + } else { this.isChecked = false this.input.checked = false this.dispatch() @@ -935,101 +1031,129 @@ customElements.define('sm-checkbox', class extends HTMLElement { const smSwitch = document.createElement('template') smSwitch.innerHTML = ` ` customElements.define('sm-switch', class extends HTMLElement { constructor() { super() - this.attachShadow({ mode: 'open' }).append(smSwitch.content.cloneNode(true)) + this.attachShadow({ + mode: 'open' + }).append(smSwitch.content.cloneNode(true)) this.switch = this.shadowRoot.querySelector('.switch'); this.input = this.shadowRoot.querySelector('input') this.isChecked = false @@ -1045,8 +1169,7 @@ customElements.define('sm-switch', class extends HTMLElement { this.disabled = true this.setAttribute('disabled', '') this.switch.classList.add('disabled') - } - else { + } else { this.disabled = false this.removeAttribute('disabled') this.switch.classList.remove('disabled') @@ -1063,8 +1186,7 @@ customElements.define('sm-switch', class extends HTMLElement { this.setAttribute('checked', '') this.isChecked = true this.input.checked = true - } - else { + } else { this.removeAttribute('checked') this.isChecked = false this.input.checked = false @@ -1100,83 +1222,107 @@ customElements.define('sm-switch', class extends HTMLElement { const smSelect = document.createElement('template') smSelect.innerHTML = `
@@ -1192,7 +1338,9 @@ smSelect.innerHTML = ` customElements.define('sm-select', class extends HTMLElement { constructor() { super() - this.attachShadow({ mode: 'open' }).append(smSelect.content.cloneNode(true)) + this.attachShadow({ + mode: 'open' + }).append(smSelect.content.cloneNode(true)) } static get observedAttributes() { return ['value'] @@ -1218,13 +1366,19 @@ customElements.define('sm-select', class extends HTMLElement { selection = this.shadowRoot.querySelector('.selection'), previousOption this.open = false; - this.slideDown = [ - { transform: `translateY(-0.5rem)` }, - { transform: `translateY(0)` } - ], - this.slideUp = [ - { transform: `translateY(0)` }, - { transform: `translateY(-0.5rem)` } + this.slideDown = [{ + transform: `translateY(-0.5rem)` + }, + { + transform: `translateY(0)` + } + ], + this.slideUp = [{ + transform: `translateY(0)` + }, + { + transform: `translateY(-0.5rem)` + } ], this.animationOptions = { duration: 300, @@ -1313,54 +1467,61 @@ customElements.define('sm-select', class extends HTMLElement { const smOption = document.createElement('template') smOption.innerHTML = `
@@ -1371,7 +1532,9 @@ smOption.innerHTML = ` customElements.define('sm-option', class extends HTMLElement { constructor() { super() - this.attachShadow({ mode: 'open' }).append(smOption.content.cloneNode(true)) + this.attachShadow({ + mode: 'open' + }).append(smOption.content.cloneNode(true)) } sendDetails(switching) { @@ -1419,100 +1582,119 @@ customElements.define('sm-option', class extends HTMLElement { const smStripSelect = document.createElement('template') smStripSelect.innerHTML = `
@@ -1532,7 +1714,9 @@ smStripSelect.innerHTML = ` customElements.define('sm-strip-select', class extends HTMLElement { constructor() { super() - this.attachShadow({ mode: 'open' }).append(smStripSelect.content.cloneNode(true)) + this.attachShadow({ + mode: 'open' + }).append(smStripSelect.content.cloneNode(true)) } static get observedAttributes() { return ['value'] @@ -1573,8 +1757,7 @@ customElements.define('sm-strip-select', class extends HTMLElement { if (entries[0].isIntersecting) { this.previousArrow.classList.add('hide') this.previousGradient.classList.add('hide') - } - else { + } else { this.previousArrow.classList.remove('hide') this.previousGradient.classList.remove('hide') } @@ -1586,8 +1769,7 @@ customElements.define('sm-strip-select', class extends HTMLElement { if (entries[0].isIntersecting) { this.nextArrow.classList.add('hide') this.nextGradient.classList.add('hide') - } - else { + } else { this.nextArrow.classList.remove('hide') this.nextGradient.classList.remove('hide') } @@ -1608,7 +1790,11 @@ customElements.define('sm-strip-select', class extends HTMLElement { if (previousOption) previousOption.classList.remove('active') e.target.classList.add('active') - e.target.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' }) + e.target.scrollIntoView({ + behavior: 'smooth', + inline: 'center', + block: 'nearest' + }) this.setAttribute('value', e.detail.value) this.dispatchEvent(new CustomEvent('change', { bubbles: true, @@ -1641,36 +1827,41 @@ customElements.define('sm-strip-select', class extends HTMLElement { const smStripOption = document.createElement('template') smStripOption.innerHTML = `
@@ -1678,7 +1869,9 @@ smStripOption.innerHTML = ` customElements.define('sm-strip-option', class extends HTMLElement { constructor() { super() - this.attachShadow({ mode: 'open' }).append(smStripOption.content.cloneNode(true)) + this.attachShadow({ + mode: 'open' + }).append(smStripOption.content.cloneNode(true)) } sendDetails() { let optionSelected = new CustomEvent('optionSelected', { @@ -1717,14 +1910,17 @@ smPopup.innerHTML = ` *{ padding: 0; margin: 0; - box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; } :host{ position: fixed; + display: -ms-grid; display: grid; z-index: 10; } .popup-container{ + display: -ms-grid; display: grid; position: fixed; top: 0; @@ -1733,39 +1929,71 @@ smPopup.innerHTML = ` right: 0; place-items: center; background: rgba(0, 0, 0, 0.6); + -webkit-transition: opacity 0.3s ease; + -o-transition: opacity 0.3s ease; transition: opacity 0.3s ease; z-index: 10; } :host(.stacked) .popup{ - transform: scale(0.9) translateY(-2rem) !important; + -webkit-transform: scale(0.9) translateY(-2rem) !important; + -ms-transform: scale(0.9) translateY(-2rem) !important; + transform: scale(0.9) translateY(-2rem) !important; } .popup{ + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: column; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; position: relative; - align-self: flex-end; - align-items: flex-start; + -ms-flex-item-align: end; + align-self: flex-end; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; width: 100%; border-radius: 0.8rem 0.8rem 0 0; - transform: translateY(100%); + -webkit-transform: translateY(100%); + -ms-transform: translateY(100%); + transform: translateY(100%); + -webkit-transition: -webkit-transform 0.3s; + transition: -webkit-transform 0.3s; + -o-transition: transform 0.3s; transition: transform 0.3s; + transition: transform 0.3s, -webkit-transform 0.3s; background: rgba(var(--foreground-color), 1); - box-shadow: 0 -1rem 2rem #00000020; + -webkit-box-shadow: 0 -1rem 2rem #00000020; + box-shadow: 0 -1rem 2rem #00000020; max-height: 90vh; } .container-header{ + display: -webkit-box; + display: -ms-flexbox; display: flex; width: 100%; - align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; } .popup-top{ + display: -webkit-box; + display: -ms-flexbox; display: flex; width: 100%; } .popup-body{ + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: column; - flex: 1; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; width: 100%; padding: 1.5rem; overflow-y: auto; @@ -1782,18 +2010,30 @@ smPopup.innerHTML = ` } @media screen and (min-width: 640px){ .popup{ + width: -webkit-max-content; + width: -moz-max-content; width: max-content; - align-self: center; + -ms-flex-item-align: center; + -ms-grid-row-align: center; + align-self: center; border-radius: 0.4rem; height: auto; - transform: translateY(1rem); - box-shadow: 0 3rem 2rem -0.5rem #00000040; + -webkit-transform: translateY(1rem); + -ms-transform: translateY(1rem); + transform: translateY(1rem); + -webkit-box-shadow: 0 3rem 2rem -0.5rem #00000040; + box-shadow: 0 3rem 2rem -0.5rem #00000040; } } @media screen and (max-width: 640px){ .popup-top{ - flex-direction: column; - align-items: center; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; } .handle{ height: 0.3rem; @@ -1814,21 +2054,23 @@ smPopup.innerHTML = ` } `; customElements.define('sm-popup', class extends HTMLElement { constructor() { super() - this.attachShadow({ mode: 'open' }).append(smPopup.content.cloneNode(true)) + this.attachShadow({ + mode: 'open' + }).append(smPopup.content.cloneNode(true)) this.allowClosing = false } @@ -1842,14 +2084,14 @@ customElements.define('sm-popup', class extends HTMLElement { } show = (pinned, popupStack) => { - if(popupStack) + if (popupStack) this.popupStack = popupStack if (this.popupStack && !this.hasAttribute('open')) { this.popupStack.push({ popup: this, permission: pinned }) - if (this.popupStack.items.length > 1){ + if (this.popupStack.items.length > 1) { this.popupStack.items[this.popupStack.items.length - 2].popup.classList.add('stacked') } this.dispatchEvent( @@ -1860,7 +2102,7 @@ customElements.define('sm-popup', class extends HTMLElement { popupStack: this.popupStack } }) - ) + ) this.setAttribute('open', '') this.pinned = pinned this.popupContainer.classList.remove('hide') @@ -1870,7 +2112,7 @@ customElements.define('sm-popup', class extends HTMLElement { return this.popupStack } hide = () => { - if(window.innerWidth < 640) + if (window.innerWidth < 640) this.popup.style.transform = 'translateY(100%)'; else this.popup.style.transform = 'translateY(1rem)'; @@ -1878,14 +2120,12 @@ customElements.define('sm-popup', class extends HTMLElement { this.removeAttribute('open') if (typeof this.popupStack !== 'undefined') { this.popupStack.pop() - if (this.popupStack.items.length){ + if (this.popupStack.items.length) { this.popupStack.items[this.popupStack.items.length - 1].popup.classList.remove('stacked') - } - else { + } else { this.resumeScrolling() } - } - else { + } else { this.resumeScrolling() } @@ -1927,7 +2167,7 @@ customElements.define('sm-popup', class extends HTMLElement { this.popup.style.transform = `translateY(-${this.offset}px)` }*/ } - + handleTouchEnd = (e) => { this.touchEndTime = e.timeStamp cancelAnimationFrame(this.touchEndAnimataion) @@ -1938,20 +2178,17 @@ customElements.define('sm-popup', class extends HTMLElement { if (this.pinned) { this.show() return - } - else + } else this.hide() - } - else { + } else { this.show() } - } - else { + } else { if (this.touchEndY > this.touchStartY) - if (this.pinned) { - this.show() - return - } + if (this.pinned) { + this.show() + return + } else this.hide() } @@ -1983,8 +2220,7 @@ customElements.define('sm-popup', class extends HTMLElement { if (this.pinned) { this.show() return - } - else + } else this.hide() } }) @@ -2018,13 +2254,18 @@ smCarousel.innerHTML = ` *{ padding: 0; margin: 0; - box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; } :host{ + display: -webkit-box; + display: -ms-flexbox; display: flex; } .icon { position: absolute; + display: -webkit-box; + display: -ms-flexbox; display: flex; fill: none; height: 2.6rem; @@ -2039,10 +2280,14 @@ smCarousel.innerHTML = ` cursor: pointer; min-width: 0; background: rgba(var(--text-color), 1); - box-shadow: 0 0.2rem 0.2rem #00000020, + -webkit-box-shadow: 0 0.2rem 0.2rem #00000020, + 0 0.5rem 1rem #00000040; + box-shadow: 0 0.2rem 0.2rem #00000020, 0 0.5rem 1rem #00000040; -webkit-tap-highlight-color: transparent; - transform: scale(0); + -webkit-transform: scale(0); + -ms-transform: scale(0); + transform: scale(0); z-index: 1; } .hide{ @@ -2050,7 +2295,9 @@ smCarousel.innerHTML = ` opacity: 0; } .expand{ - transform: scale(1) + -webkit-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1) } .previous-item{ left: 1rem; @@ -2060,21 +2307,31 @@ smCarousel.innerHTML = ` } .carousel-container{ position: relative; + display: -webkit-box; + display: -ms-flexbox; display: flex; width: 100%; - align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; } .carousel{ + display: -webkit-box; + display: -ms-flexbox; display: flex; max-width: 100%; width: 100%; overflow: auto hidden; - scroll-snap-type: x mandatory; + -ms-scroll-snap-type: x mandatory; + scroll-snap-type: x mandatory; } .indicators{ + display: -ms-grid; display: grid; grid-auto-flow: column; - justify-content: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; position: absolute; bottom: -1rem; gap: 0.5rem; @@ -2085,10 +2342,14 @@ smCarousel.innerHTML = ` padding: 0.2rem; background: rgba(var(--text-color), 0.3); border-radius: 1rem; + -webkit-transition: 0.2s; + -o-transition: 0.2s; transition: 0.2s; } .dot.active{ - transform: scale(1.5); + -webkit-transform: scale(1.5); + -ms-transform: scale(1.5); + transform: scale(1.5); background: var(--accent-color); } slot::slotted(*){ @@ -2133,15 +2394,15 @@ scroll-snap-align: end;
- Previous - + Previous +
- +
- Next - + Next +
@@ -2150,7 +2411,9 @@ scroll-snap-align: end; customElements.define('sm-carousel', class extends HTMLElement { constructor() { super() - this.attachShadow({ mode: 'open' }).append(smCarousel.content.cloneNode(true)) + this.attachShadow({ + mode: 'open' + }).append(smCarousel.content.cloneNode(true)) } static get observedAttributes() { @@ -2187,37 +2450,37 @@ customElements.define('sm-carousel', class extends HTMLElement { let frag = document.createDocumentFragment(); if (this.hasAttribute('indicator')) this.showIndicator = true - - + + let firstVisible = false, lastVisible = false const allElementsObserver = new IntersectionObserver(entries => { entries.forEach(entry => { - if(this.showIndicator) + if (this.showIndicator) if (entry.isIntersecting) { this.indicators[parseInt(entry.target.attributes.rank.textContent)].classList.add('active') } - else - this.indicators[parseInt(entry.target.attributes.rank.textContent)].classList.remove('active') + else + this.indicators[parseInt(entry.target.attributes.rank.textContent)].classList.remove('active') if (!entry.target.previousElementSibling) - if(entry.isIntersecting) { + if (entry.isIntersecting) { this.previousArrow.classList.remove('expand') firstVisible = true } - else { - this.previousArrow.classList.add('expand') - firstVisible = false - } + else { + this.previousArrow.classList.add('expand') + firstVisible = false + } if (!entry.target.nextElementSibling) - if(entry.isIntersecting) { + if (entry.isIntersecting) { this.nextArrow.classList.remove('expand') lastVisible = true } - else { - this.nextArrow.classList.add('expand') + else { + this.nextArrow.classList.add('expand') - lastVisible = false - } + lastVisible = false + } if (firstVisible && lastVisible) this.indicatorsContainer.classList.add('hide') else @@ -2239,7 +2502,7 @@ customElements.define('sm-carousel', class extends HTMLElement { this.carouselSlot.addEventListener('slotchange', e => { this.carouselItems = this.carouselSlot.assignedElements() this.carouselItems.forEach(item => allElementsObserver.observe(item)) - if(this.showIndicator){ + if (this.showIndicator) { this.indicatorsContainer.innerHTML = `` this.carouselItems.forEach((item, index) => { let dot = document.createElement('div') @@ -2283,131 +2546,153 @@ customElements.define('sm-carousel', class extends HTMLElement { const smNotifications = document.createElement('template') smNotifications.innerHTML = `
@@ -2416,10 +2701,12 @@ stroke-width: 6; customElements.define('sm-notifications', class extends HTMLElement { constructor() { super() - this.shadow = this.attachShadow({ mode: 'open' }).append(smNotifications.content.cloneNode(true)) + this.shadow = this.attachShadow({ + mode: 'open' + }).append(smNotifications.content.cloneNode(true)) } - handleTouchStart =(e) => { + handleTouchStart = (e) => { this.notification = e.target.closest('.notification') this.touchStartX = e.changedTouches[0].clientX this.notification.style.transition = 'initial' @@ -2431,8 +2718,7 @@ customElements.define('sm-notifications', class extends HTMLElement { if (this.touchStartX < e.changedTouches[0].clientX) { this.offset = e.changedTouches[0].clientX - this.touchStartX; this.touchEndAnimataion = requestAnimationFrame(this.movePopup) - } - else { + } else { this.offset = -(this.touchStartX - e.changedTouches[0].clientX); this.touchEndAnimataion = requestAnimationFrame(this.movePopup) } @@ -2446,19 +2732,15 @@ customElements.define('sm-notifications', class extends HTMLElement { if (this.touchEndTime - this.touchStartTime > 200) { if (this.touchEndX - this.touchStartX > this.threshold) { this.removeNotification(this.notification) - } - else if (this.touchStartX - this.touchEndX > this.threshold) { + } else if (this.touchStartX - this.touchEndX > this.threshold) { this.removeNotification(this.notification, true) - } - else { + } else { this.resetPosition() } - } - else { + } else { if (this.touchEndX > this.touchStartX) { this.removeNotification(this.notification) - } - else { + } else { this.removeNotification(this.notification, true) } } @@ -2485,8 +2767,7 @@ customElements.define('sm-notifications', class extends HTMLElement { ` - } - else if (type === 'success') { + } else if (type === 'success') { composition += ` @@ -2502,8 +2783,7 @@ customElements.define('sm-notifications', class extends HTMLElement { notification.innerHTML = composition this.notificationPanel.prepend(notification) if (window.innerWidth > 640) { - notification.animate([ - { + notification.animate([{ transform: `translateX(1rem)`, opacity: '0' }, @@ -2514,8 +2794,7 @@ customElements.define('sm-notifications', class extends HTMLElement { ], this.animationOptions).onfinish = () => { notification.setAttribute('style', `transform: none;`); } - } - else { + } else { notification.setAttribute('style', `transform: translateY(0); opacity: 1`) } notification.addEventListener('touchstart', this.handleTouchStart) @@ -2528,8 +2807,7 @@ customElements.define('sm-notifications', class extends HTMLElement { this.offset = 0; if (toLeft) - notification.animate([ - { + notification.animate([{ transform: `translateX(${this.offset}px)`, opacity: '1' }, @@ -2541,8 +2819,7 @@ customElements.define('sm-notifications', class extends HTMLElement { notification.remove() } else { - notification.animate([ - { + notification.animate([{ transform: `translateX(${this.offset}px)`, opacity: '1' }, @@ -2580,7 +2857,7 @@ customElements.define('sm-notifications', class extends HTMLElement { this.touchEndAnimataion; this.notificationPanel.addEventListener('click', e => { - if (e.target.closest('.close')) ( + if (e.target.closest('.close'))( this.removeNotification(e.target.closest('.notification')) ) }) @@ -2597,8 +2874,7 @@ customElements.define('sm-notifications', class extends HTMLElement { this.notificationPanel.style.padding = '1.5rem 0 3rem 1.5rem'; else this.notificationPanel.style.padding = '1rem 1rem 2rem 1rem'; - } - else if (mutation.removedNodes.length && !this.notificationPanel.children.length) { + } else if (mutation.removedNodes.length && !this.notificationPanel.children.length) { this.notificationPanel.style.padding = 0; } } @@ -2617,92 +2893,121 @@ customElements.define('sm-notifications', class extends HTMLElement { const smMenu = document.createElement('template') smMenu.innerHTML = `
@@ -2720,7 +3025,9 @@ smMenu.innerHTML = ` customElements.define('sm-menu', class extends HTMLElement { constructor() { super() - this.attachShadow({ mode: 'open' }).append(smMenu.content.cloneNode(true)) + this.attachShadow({ + mode: 'open' + }).append(smMenu.content.cloneNode(true)) } static get observedAttributes() { return ['value'] @@ -2817,36 +3124,43 @@ customElements.define('sm-menu', class extends HTMLElement { const smMenuOption = document.createElement('template') smMenuOption.innerHTML = `
@@ -2854,7 +3168,9 @@ smMenuOption.innerHTML = ` customElements.define('sm-menu-option', class extends HTMLElement { constructor() { super() - this.attachShadow({ mode: 'open' }).append(smMenuOption.content.cloneNode(true)) + this.attachShadow({ + mode: 'open' + }).append(smMenuOption.content.cloneNode(true)) } connectedCallback() { @@ -2873,88 +3189,102 @@ customElements.define('sm-menu-option', class extends HTMLElement { const smTabHeader = document.createElement('template') smTabHeader.innerHTML = `
-
- -
-
+
+ +
+
`; customElements.define('sm-tab-header', class extends HTMLElement { constructor() { super() - this.attachShadow({ mode: 'open' }).append(smTabHeader.content.cloneNode(true)) + this.attachShadow({ + mode: 'open' + }).append(smTabHeader.content.cloneNode(true)) this.indicator = this.shadowRoot.querySelector('.indicator'); this.tabSlot = this.shadowRoot.querySelector('slot'); @@ -3006,7 +3336,11 @@ customElements.define('sm-tab-header', class extends HTMLElement { this.prevTab.classList.remove('active') e.target.classList.add('active') - e.target.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' }) + e.target.scrollIntoView({ + behavior: 'smooth', + block: 'nearest', + inline: 'center' + }) this.moveIndiactor(e.target.getBoundingClientRect()) this.sendDetails(e.target) this.prevTab = e.target; @@ -3028,8 +3362,7 @@ customElements.define('sm-tab-header', class extends HTMLElement { if (this.activeTab) { let tabDimensions = this.activeTab.getBoundingClientRect(); this.moveIndiactor(tabDimensions) - } - else { + } else { this.allTabs[0].classList.add('active') let tabDimensions = this.allTabs[0].getBoundingClientRect(); this.moveIndiactor(tabDimensions) @@ -3039,8 +3372,9 @@ customElements.define('sm-tab-header', class extends HTMLElement { } } }) - }, - { threshold: 1.0 }) + }, { + threshold: 1.0 + }) observer.observe(this) } }) @@ -3051,60 +3385,63 @@ const smTabPanels = document.createElement('template') smTabPanels.innerHTML = `
-Nothing to see here. + Nothing to see here.
`; customElements.define('sm-tab-panels', class extends HTMLElement { constructor() { super() - this.attachShadow({ mode: 'open' }).append(smTabPanels.content.cloneNode(true)) + this.attachShadow({ + mode: 'open' + }).append(smTabPanels.content.cloneNode(true)) this.panelSlot = this.shadowRoot.querySelector('slot'); } connectedCallback() { //animations - let flyInLeft = [ - { - opacity: 0, - transform: 'translateX(-1rem)' - }, - { - opacity: 1, - transform: 'none' - } - ], - flyInRight = [ + let flyInLeft = [{ + opacity: 0, + transform: 'translateX(-1rem)' + }, { + opacity: 1, + transform: 'none' + } + ], + flyInRight = [{ opacity: 0, transform: 'translateX(1rem)' }, @@ -3113,8 +3450,7 @@ customElements.define('sm-tab-panels', class extends HTMLElement { transform: 'none' } ], - flyOutLeft = [ - { + flyOutLeft = [{ opacity: 1, transform: 'none' }, @@ -3123,8 +3459,7 @@ customElements.define('sm-tab-panels', class extends HTMLElement { transform: 'translateX(-1rem)' } ], - flyOutRight = [ - { + flyOutRight = [{ opacity: 1, transform: 'none' }, @@ -3170,8 +3505,7 @@ customElements.define('sm-tab-panels', class extends HTMLElement { } else if (targetBody && !currentBody) { this._targetBodyFlyRight(targetBody) - } - else if (currentBody && targetBody) { + } else if (currentBody && targetBody) { currentBody.animate(flyOutLeft, animationOptions).onfinish = () => { currentBody.classList.add('hide-completely') this._targetBodyFlyRight(targetBody) @@ -3184,8 +3518,7 @@ customElements.define('sm-tab-panels', class extends HTMLElement { } else if (targetBody && !currentBody) { this._targetBodyFlyLeft(targetBody) - } - else if (currentBody && targetBody) { + } else if (currentBody && targetBody) { currentBody.animate(flyOutRight, animationOptions).onfinish = () => { currentBody.classList.add('hide-completely') this._targetBodyFlyLeft(targetBody) @@ -3206,32 +3539,39 @@ const slidingSection = document.createElement('template') slidingSection.innerHTML = `
- +
` customElements.define('sm-sliding-section', class extends HTMLElement { constructor() { super() - this.attachShadow({ mode: 'open' }).append(slidingSection.content.cloneNode(true)) + this.attachShadow({ + mode: 'open' + }).append(slidingSection.content.cloneNode(true)) } connectedCallback() { @@ -3242,27 +3582,30 @@ const section = document.createElement('template') section.innerHTML = `
- +
` customElements.define('sm-section', class extends HTMLElement { constructor() { super() - this.attachShadow({ mode: 'open' }).append(section.content.cloneNode(true)) + this.attachShadow({ + mode: 'open' + }).append(section.content.cloneNode(true)) } }) \ No newline at end of file diff --git a/css/main.css b/css/main.css index d5851f2..6c5f9ac 100644 --- a/css/main.css +++ b/css/main.css @@ -923,6 +923,7 @@ sm-panel { } .copy-row h4 { margin-bottom: 0; + font-weight: 400; } .copy-row .icon { cursor: pointer; @@ -1355,7 +1356,7 @@ sm-panel { padding: 1rem; background: rgba(var(--text-color), 0.06); align-self: center; - margin-bottom: 0.4rem; + margin-bottom: 0.6rem; box-shadow: 0 0.1rem 0.1rem #00000016, 0 0.1rem 0.3rem #00000040; } @@ -1381,7 +1382,7 @@ sm-panel { font-weight: 500; align-items: center; border-radius: 2rem; - margin-bottom: 0.4rem !important; + margin-bottom: 0.6rem !important; text-transform: uppercase; box-shadow: 0 0.1rem 0.1rem #00000016, 0 0.1rem 0.3rem #00000040; } @@ -1409,6 +1410,10 @@ sm-panel { #person_popup h3 { text-transform: capitalize; } +#person_popup h5 { + font-weight: 500; + opacity: 0.8; +} #person_popup .copy-row { margin-bottom: 1.5rem; } diff --git a/css/main.min.css b/css/main.min.css index 6f99e59..05cb45f 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}#navbar .navbar-item,#transaction_page h5,#transaction_page header h4,.activity .activity-type,.capitalize,.option,.request h5,button,sm-tab{text-transform:capitalize}#navbar .navbar-item,.action,.balance,.user-panel,button,sm-popup .illustration{position:relative}.icon,.loader{overflow:visible}.option,.person,button{-webkit-tap-highlight-color:transparent}*{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);transition:transform .3s;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,.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{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}.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{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{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{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}.balance,.tooltip{display:flex;flex-direction:column}.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;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;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}.activity,.option{transition:transform .3s;cursor:pointer}.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,.time,.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}.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}.copy-row h4,.request button{margin-bottom:0}.request h4:last-of-type{margin-bottom:0}.request button{width:auto;margin-top:1.5rem}.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 .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}#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"}.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,.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}.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}.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;opacity:.8;font-weight:500}#add_person_btn .icon{height:3rem;width:3rem;stroke-width:10;padding:1rem;align-self:center;margin-bottom:.4rem}.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:.4rem!important;text-transform:uppercase}#person_popup h3,.person-name{text-transform:capitalize}.person-name{font-size:.85rem;opacity:.8;font-weight:500;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 +#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 diff --git a/css/main.scss b/css/main.scss index e8151ec..285e36a 100644 --- a/css/main.scss +++ b/css/main.scss @@ -954,6 +954,7 @@ sm-panel{ width: auto; h4 { margin-bottom: 0; + font-weight: 400; } .icon { @@ -1407,7 +1408,7 @@ sm-panel{ padding: 1rem; background: rgba(var(--text-color), 0.06); align-self: center; - margin-bottom: 0.4rem; + margin-bottom: 0.6rem; box-shadow: 0 0.1rem 0.1rem #00000016, 0 0.1rem 0.3rem #00000040; } } @@ -1432,7 +1433,7 @@ sm-panel{ font-weight: 500; align-items: center; border-radius: 2rem; - margin-bottom: 0.4rem !important; + margin-bottom: 0.6rem !important; text-transform: uppercase; box-shadow: 0 0.1rem 0.1rem #00000016, 0 0.1rem 0.3rem #00000040; } @@ -1460,6 +1461,10 @@ sm-panel{ h3{ text-transform: capitalize; } + h5{ + font-weight: 500; + opacity: 0.8; + } .copy-row{ margin-bottom: 1.5rem; } From 2da8cb8ce885f743af32a1cd003a15638745313f Mon Sep 17 00:00:00 2001 From: sairaj mote Date: Fri, 2 Oct 2020 17:18:33 +0530 Subject: [PATCH 24/42] 0.0.50 --- index.html | 73 +++++++++++++++++++++++++++++++++++++++++++++--------- 1 file changed, 61 insertions(+), 12 deletions(-) diff --git a/index.html b/index.html index 4b65884..fc537cb 100644 --- a/index.html +++ b/index.html @@ -853,6 +853,7 @@

Activity

Sent + Received Deposits Withdrawals Paid through cashier @@ -863,6 +864,10 @@

You haven't sent any rupee yet.

+ +
+

You haven't sent any rupee yet.

+

You haven't deposited rupee yet.

@@ -1086,6 +1091,17 @@ className = 'withdrawn' transaction = 'Sent to' break; + case 'received': + icon = ` + + + + ` + sign = '+' + className = 'deposited' + transaction = 'Recieved from' + break; case 'deposit': icon = ` @@ -2013,6 +2029,15 @@ ` transaction = 'Sent to' break; + case 'received': + icon = ` + + + + ` + transaction = 'Received from' + break; case 'deposit': icon = ` @@ -11930,6 +11955,10 @@ transferTokensManually(); pay_through_cashier(); + + getSentRupeeList() + + getReceivedRupeeList() } this.retrieveLatestContent(); }, @@ -12821,6 +12850,7 @@ } 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'), @@ -13191,22 +13221,41 @@ } } - async function get_sent_rupee_list() { + async function getSentRupeeList() { try { - let senderIDs = [myFloID]; - floGlobals.appObjects[token_app.master_configurations.TYPE_SENT_TOKENS][flo_txid] = { - token_sender, token_receiver, token_amount, token_name_radio, - flo_txid, "datetime": + new Date() - }; - await floCloudAPI.requestObjectData(token_app.master_configurations.TYPE_SENT_TOKENS, - options = { myFloID, senderIDs }); + 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, + receiver = flodata.match(/\b\w{34,34}\b/), + timeStamp = transaction.transactionDetails.time * 1000 - const sent_tokens_list = Object.keys(floGlobals.appObjects - [token_app.master_configurations.TYPE_SENT_TOKENS]); + if(receiver === '' || typeof receiver === undefined || receiver === null) continue; + frag.append(render.activityCard({type: 'sent', amount: tokenAmount, receiver, timeStamp})) + } + sentActivityContainer.innerHTML = '' + sentActivityContainer.append(frag) + } catch (error) { + throw new Error(error); + } + } - console.log(sent_tokens_list); - // #todo: while displying validate senderIDs===myFloID + 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 = 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: 'received', amount: tokenAmount, receiver, timeStamp})) + } + receivedActivityContainer.innerHTML = '' + receivedActivityContainer.append(frag) } catch (error) { throw new Error(error); } From c9aba753ce6b0af0470f19761efeb4ebb63c5f03 Mon Sep 17 00:00:00 2001 From: sairaj mote Date: Fri, 2 Oct 2020 20:32:36 +0530 Subject: [PATCH 25/42] 0.0.51 --- index.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index fc537cb..1063543 100644 --- a/index.html +++ b/index.html @@ -2092,7 +2092,7 @@ if(receiver !== 'undefined') composition +=` -
${transaction}
${allContacts[receiver] ? allContacts[receiver].name : receiver}` +
${transaction}
${allContacts[receiver] ? allContacts[receiver].name : receiver}` if(upiTxId !== 'undefined') composition += ` @@ -13248,9 +13248,9 @@ 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/), + 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})) } From afc1ac087a1da3ba009b93eb1bbab874ebf8794a Mon Sep 17 00:00:00 2001 From: sairaj mote Date: Sat, 3 Oct 2020 02:00:12 +0530 Subject: [PATCH 26/42] 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 - + - +
@@ -174,20 +178,23 @@
Step 1

Enter amount you want to withdraw

Step 2
-

Select UPI address you want to withdraw rupee to. If you haven't added UPI address, add one using 'Add UPI address' button.

+

Select UPI address you want to withdraw rupee to. If you haven't added UPI address, add one using + 'Add UPI address' button.

Step 3

Press Withdraw button

rupee-symbol - +
Withdraw To
- + Add UPI address + + Add UPI + address
@@ -197,15 +204,15 @@

Request rupee

- +

Request rupee from other's using FLO address. @@ -224,7 +231,8 @@ rupee-symbol - + @@ -262,13 +270,15 @@

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

Enter the amount you sent to copied address

Step 4

Then enter the FLO address of person you want send rupee to.

Step 5
-

Select UPI address that you used when sending money copied UPI address. If you haven't added UPI address, add one using 'Add UPI address' button.

+

Select UPI address that you used when sending money copied UPI address. If you haven't added UPI + address, add one using 'Add UPI address' button.

Step 6

Press Pay button

@@ -284,13 +294,15 @@ rupee-symbol - +
Send from
-
- + Add UPI address +
+ + Add UPI + address
@@ -300,19 +312,19 @@
-
+
success - - + +
failure - - - + + +

@@ -346,8 +358,8 @@
- + + @@ -386,12 +398,15 @@

- + - - - + + +
@@ -479,7 +494,8 @@
requests
-
+
@@ -504,11 +520,11 @@
- + + c8.5,0.3,16.9-2,24.2-6.4c2.8,0,0.8-12.9-1.6-14c-5.9-2.6-13.9-5-16.4-9.7" /> -
Me
+
Me
@@ -579,12 +595,14 @@

My Balances

-
@@ -606,7 +624,7 @@

0

-
+
?

Your FLO balance. This is required for every transaction.

@@ -685,7 +703,8 @@
- Load pending + Load + pending
@@ -817,7 +836,7 @@

0

-
+
?

Your FLO balance. This is required for every transaction.

@@ -914,43 +933,45 @@

Settings

-
-

My FLO address

-
-

- - Copy - - - -
-
-

Theme

-
-

Toggle dark theme

- -
-
-

My UPIs

-
-

Add UPI address for easier access during various transactions.

- + Add UPI address -
-

Sign Out

-

Signing out will erase all the data stored in local storage and Indexed DB. This will remove saved private key, UPI addresses.

- Sign out +
+

My FLO address

+
+

+ + Copy + + + +
+
+

Theme

+
+

Toggle dark theme

+ +
+
+

My UPIs

+
+

Add UPI address for easier access during various transactions.

+ + Add UPI address + +
+

Sign Out

+

Signing out will erase all the data stored in local storage and Indexed DB. This will remove + saved private key, UPI addresses.

+ Sign out
Go to activity page - +

-

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.

- Report
+

+ Report
@@ -1003,8 +1024,8 @@ let frag = document.createDocumentFragment(), currentTimeout, notificationSound = document.getElementById('notification_sound'); - let defaultUPI - const render = { + let defaultUPI + const render = { depositRequest(txid, floId, amount) { let card = document.createElement('div'); card.classList.add('request') @@ -1062,8 +1083,8 @@ `; return card; }, - activityCard(obj){ - let {type, amount, timeStamp, receiver, upi_txid, receiverUPI} = obj; + activityCard(obj) { + let { type, amount, timeStamp, receiver, upi_txid, receiverUPI, pending } = obj; let card = document.createElement('div'), composition = ``, icon, @@ -1077,9 +1098,10 @@ 'data-receiver': receiver, 'data-amount': amount, 'data-upi-txid': upi_txid, - 'data-receiver-upi': receiverUPI + 'data-receiver-upi': receiverUPI, + 'data-pending': pending }) - switch(type){ + switch (type) { case 'sent': icon = ` @@ -1090,7 +1112,7 @@ sign = '-' className = 'withdrawn' transaction = 'Sent to' - break; + break; case 'received': icon = ` @@ -1101,7 +1123,7 @@ sign = '+' className = 'deposited' transaction = 'Recieved from' - break; + break; case 'deposit': icon = ` @@ -1118,7 +1140,9 @@ sign = '+' className = 'deposited' transaction = 'Deposited' - break; + if(pending) + transaction = 'deposit' + break; case 'withdraw': icon = ` @@ -1136,7 +1160,9 @@ sign = '-' className = 'withdrawn' transaction = 'withdrawn to' - break; + if(pending) + transaction = 'withdraw' + break; case 'payCashier': icon = ` @@ -1147,14 +1173,25 @@ sign = '-' className = 'withdrawn' transaction = 'Paid to' - break; + if(pending) + transaction = 'payment' + break; + } + let status = '' + if(pending){ + status = '
pending
' + icon = ` + pending + + + ` } composition += ` ${icon} -

${transaction}

` - if(receiver) +

${transaction} ${status}

` + if (receiver) composition += ` -

${allContacts[receiver] ? allContacts[receiver].name : receiver}

+

${allContacts[receiver] ? allContacts[receiver].name : receiver}

` composition += `

${sign} ₹${amount}

@@ -1175,7 +1212,7 @@ }) markup = `
${formatedTime(time)}
Request by
-

${allContacts[senderAddress] ? allContacts[senderAddress].name : senderAddress}

+

${allContacts[senderAddress] ? allContacts[senderAddress].name : senderAddress}

amount

₹ ${amount}

`; @@ -1441,10 +1478,10 @@
` 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); } From 3210b3d50c73daa983135440f7ae07671bb67a4b Mon Sep 17 00:00:00 2001 From: sairaj mote Date: Sat, 3 Oct 2020 13:32:53 +0530 Subject: [PATCH 27/42] 0.0.53 --- components.js | 2 +- css/main.css | 2 +- css/main.min.css | 2 +- css/main.scss | 2 +- index.html | 9 ++++++--- 5 files changed, 10 insertions(+), 7 deletions(-) diff --git a/components.js b/components.js index 2e62640..8e20eb2 100644 --- a/components.js +++ b/components.js @@ -44,7 +44,7 @@ smButton.innerHTML = ` display: -ms-flexbox; display: flex; width: 100%; - padding: 0.6rem 1rem; + padding: 0.6rem 1.2rem; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; diff --git a/css/main.css b/css/main.css index 5271eb3..8312b6c 100644 --- a/css/main.css +++ b/css/main.css @@ -107,7 +107,7 @@ button:focus { } button:disabled { cursor: default; - background: rgba(var(--text-color), 0.5); + background: rgba(var(--text-color), 0.4); } button:disabled ~ .loader { opacity: 0; diff --git a/css/main.min.css b/css/main.min.css index 1ca5a85..ab548c7 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}#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 +#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),.4)}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 be12468..1a1018f 100644 --- a/css/main.scss +++ b/css/main.scss @@ -104,7 +104,7 @@ button { &:disabled { cursor: default; - background: rgba(var(--text-color), 0.5); + background: rgba(var(--text-color), 0.4); } &:disabled~.loader { diff --git a/index.html b/index.html index eedda63..2992709 100644 --- a/index.html +++ b/index.html @@ -958,7 +958,7 @@

Sign Out

Signing out will erase all the data stored in local storage and Indexed DB. This will remove - saved private key, UPI addresses.

+ saved private key, UPI addresses and contacts.

Sign out
@@ -1640,9 +1640,11 @@ if (typeof btn === 'string') btn = document.getElementById(btn); if (option === 'start') { + btn.style.pointerEvents = 'none' btn.children[0].classList.add('clip') btn.children[1].classList.add('animate-loader') } else { + btn.style.pointerEvents = 'all' btn.children[0].classList.remove('clip') btn.children[1].classList.remove('animate-loader') } @@ -12775,6 +12777,7 @@ .TYPE_DEPOSITS, { receiverID: cashier }).then(result => { + console.log(result) hidePopup() showTransactionStatus('success', 'Deposit request sent.', 'It may take upto 48 hours for deposited amount to be reflected in your account.') btnLoading('request_tokens_btn', 'stop') @@ -13337,7 +13340,7 @@ receiver = flodata.match(/\b\w{34,34}\b/), timeStamp = transaction.transactionDetails.time * 1000 - if (receiver === '' || typeof receiver === undefined || receiver === null || token_app.master_configurations.cashiers[receiver]) continue; + 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 = '' @@ -13357,7 +13360,7 @@ 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; + 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 = '' From 1ed2a4f4626f879c17136b1dbe196258df8f9b21 Mon Sep 17 00:00:00 2001 From: sairaj mote Date: Sat, 3 Oct 2020 15:13:57 +0530 Subject: [PATCH 28/42] 0.0.54 --- index.html | 998 +++++++++++++++++++++++++++-------------------------- 1 file changed, 509 insertions(+), 489 deletions(-) diff --git a/index.html b/index.html index 2992709..3393a3d 100644 --- a/index.html +++ b/index.html @@ -522,7 +522,7 @@ + c8.5,0.3,16.9-2,24.2-6.4c2.8,0,0.8-12.9-1.6-14c-5.9-2.6-13.9-5-16.4-9.7" />
Me
@@ -761,7 +761,7 @@
- + Load pending
@@ -971,7 +971,8 @@

- Report
+ Report +
@@ -1034,14 +1035,14 @@ 'data-txid': txid }) card.innerHTML = `
FLO address
-

${floId}

-
UPI TXID
-

${txid}

-
Amount
-

₹${amount}

- `; +

${floId}

+
UPI TXID
+

${txid}

+
Amount
+

₹${amount}

+ `; return card; }, withdrawRequest(txid, upiId, floId, amount) { @@ -1053,14 +1054,14 @@ 'data-upi': upiId }) card.innerHTML = `
FLO address
-

${floId}

-
UPI ID
-

${upiId}

-
TAmount
-

₹${amount}

- `; +

${floId}

+
UPI ID
+

${upiId}

+
TAmount
+

₹${amount}

+ `; return card; }, payRequest(sender, txid, floId, amount) { @@ -1073,14 +1074,14 @@ 'data-amount': amount }) card.innerHTML = `
Transaction ID
-

${txid}

-
Receiver's FLO address
-

${floId}

-
Amount
-

₹${amount}

- `; +

${txid}

+
Receiver's FLO address
+

${floId}

+
Amount
+

₹${amount}

+ `; return card; }, activityCard(obj) { @@ -1104,99 +1105,99 @@ switch (type) { case 'sent': icon = ` - - - - ` + + + + ` sign = '-' className = 'withdrawn' transaction = 'Sent to' break; case 'received': icon = ` - - - - ` + + + + ` sign = '+' className = 'deposited' transaction = 'Recieved from' break; case 'deposit': icon = ` - - deposit - - - - - - - ` + + deposit + + + + + + + ` sign = '+' className = 'deposited' transaction = 'Deposited' - if(pending) + if (pending) transaction = 'deposit' break; case 'withdraw': icon = ` - - withdraw - - - - - - - - ` + + withdraw + + + + + + + + ` sign = '-' className = 'withdrawn' transaction = 'withdrawn to' - if(pending) + if (pending) transaction = 'withdraw' break; case 'payCashier': icon = ` - - - - - ` + + + + + ` sign = '-' className = 'withdrawn' transaction = 'Paid to' - if(pending) + if (pending) transaction = 'payment' break; } let status = '' - if(pending){ + if (pending) { status = '
pending
' icon = ` - pending - - - ` + pending + + + ` } composition += ` - ${icon} -

${transaction} ${status}

` + ${icon} +

${transaction} ${status}

` if (receiver) composition += ` -

${allContacts[receiver] ? allContacts[receiver].name : receiver}

- ` +

${allContacts[receiver] ? allContacts[receiver].name : receiver}

+ ` composition += ` -

${sign} ₹${amount}

-
${formatedTime(timeStamp, true)}
- ` +

${sign} ₹${amount}

+
${formatedTime(timeStamp, true)}
+ ` card.innerHTML = composition; return card; }, @@ -1211,21 +1212,21 @@ 'data-payment-request-id': id }) markup = `
${formatedTime(time)}
-
Request by
-

${allContacts[senderAddress] ? allContacts[senderAddress].name : senderAddress}

-
amount
-

₹ ${amount}

- `; +
Request by
+

${allContacts[senderAddress] ? allContacts[senderAddress].name : senderAddress}

+
amount
+

₹ ${amount}

+ `; if (enableActions) markup += ` -
- - -
` +
+ + +
` card.innerHTML = markup return card; }, @@ -1250,59 +1251,59 @@ 'data-udc': JSON.stringify(udc) }) composition = ` - -
-
Sender
-
-

${sender}

- - Copy - - - -
` + +
+
Sender
+
+

${sender}

+ + Copy + + + +
` if (customMsg && customMsg !== '') composition += `
Issue description
-

${customMsg}

` +

${customMsg}

` composition += `
Deposited
-

₹${depositedAmount}

-
Deposited on
-

${formatedTime(vectorClock.split('_')[0])}

+

₹${depositedAmount}

+
Deposited on
+

${formatedTime(vectorClock.split('_')[0])}

-
` +
` if (cashierData.processed) { let { time, floTxId } = cashierData composition += ` -
-

Cashier processed the request on ${formatedTime(time)}

-
Rupee Transaction ID
-
-

${floTxId}

- - Copy - - - -
-
`; +
+

Cashier processed the request on ${formatedTime(time)}

+
Rupee Transaction ID
+
+

${floTxId}

+ + Copy + + + +
+
`; } else { composition += ` -
-

Cashier hasn't processed the request

-
`; +
+

Cashier hasn't processed the request

+
`; } composition += ` -
- -
` +
+ +
` card.innerHTML = composition; return card; }, @@ -1321,58 +1322,58 @@ 'data-udc': JSON.stringify(udc) }) composition = ` -
-
Sender
-
-

${sender}

- - Copy - - - -
` +
+
Sender
+
+

${sender}

+ + Copy + + + +
` if (customMsg && customMsg !== '') composition += `
Issue description
-

${customMsg}

` +

${customMsg}

` composition += `
withdrawn
-

₹${withdrawnAmount}

-
Withdrawn on
-

${formatedTime(vectorClock.split('_')[0])}

+

₹${withdrawnAmount}

+
Withdrawn on
+

${formatedTime(vectorClock.split('_')[0])}

-
` +
` if (cashierData.processed) { let { time, floTxId } = cashierData composition += ` -
-

Cashier processed the request on ${formatedTime(time)}

-
Rupee Transaction ID
-
-

${floTxId}

- - Copy - - - -
-
`; +
+

Cashier processed the request on ${formatedTime(time)}

+
Rupee Transaction ID
+
+

${floTxId}

+ + Copy + + + +
+
`; } else { composition += ` -
-

Cashier hasn't processed the request

-
`; +
+

Cashier hasn't processed the request

+
`; } composition += ` -
- -
` +
+ +
` card.innerHTML = composition; return card; }, @@ -1392,67 +1393,67 @@ 'data-udc': JSON.stringify(udc) }) composition = ` -
-
Sender
-
-

${sender}

- - Copy - - - -
-
Receiver
-
-

${receiver}

- - Copy - - - -
` +
+
Sender
+
+

${sender}

+ + Copy + + + +
+
Receiver
+
+

${receiver}

+ + Copy + + + +
` if (customMsg && customMsg !== '') composition += `
Issue description
-

${customMsg}

` +

${customMsg}

` composition += `
Paid
-

₹${amount}

-
Paid on
-

${formatedTime(vectorClock.split('_')[0])}

+

₹${amount}

+
Paid on
+

${formatedTime(vectorClock.split('_')[0])}

-
` +
` if (cashierData.processed) { let { time, floTxId } = cashierData composition += ` -
-

Cashier processed the request on ${formatedTime(time)}

-
Rupee Transaction ID
-
-

${floTxId}

- - Copy - - - -
-
`; +
+

Cashier processed the request on ${formatedTime(time)}

+
Rupee Transaction ID
+
+

${floTxId}

+ + Copy + + + +
+
`; } else { composition += ` -
-

Cashier hasn't processed the request

-
`; +
+

Cashier hasn't processed the request

+
`; } composition += ` -
- -
` +
+ +
` card.innerHTML = composition; return card; }, @@ -1460,22 +1461,22 @@ let card = document.createElement('div'); card.classList.add('request', 'complaint', 'complaint-placeholder') card.innerHTML = ` -
-
-

-
-

-
-

-
-

-
-
-

-
-
-

-
` +
+
+

+
+

+
+

+
+

+
+
+

+
+
+

+
` return card; }, contact(floId, name, color) { @@ -1483,9 +1484,9 @@ card.classList.add('person') setAttributes(card, { 'data-flo-id': floId, 'data-name': name }) card.innerHTML = ` -

${name.charAt(0)}

-

${name}

- ` +

${name.charAt(0)}

+

${name}

+ ` return card } } @@ -2064,109 +2065,109 @@ switch (type) { case 'sent': icon = ` - - - - ` + + + + ` transaction = 'Sent to' break; case 'received': icon = ` - - - - ` + + + + ` transaction = 'Received from' break; case 'deposit': icon = ` - - deposit - - - - - - - ` + + deposit + + + + + + + ` type = 'deposited' - if(pending === 'true') + if (pending === 'true') type = 'deposit' transaction = 'Deposited to' break; case 'withdraw': icon = ` - - withdraw - - - - - - - - ` + + withdraw + + + + + + + + ` type = 'withdrawn' - if(pending === 'true') + if (pending === 'true') type = 'Withdraw' transaction = 'withdrawn to' break; case 'payCashier': icon = ` - - - - - ` + + + + + ` className = 'withdrawn' transaction = 'Paid to' type = 'Paid through cashier' - if(pending === 'true') + if (pending === 'true') type = 'Paying through cashier' break; } - if(pending === 'true'){ + if (pending === 'true') { icon = ` - pending - - - ` + 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') + 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') + showReportButton.classList.add('hide') composition = `${icon} -
${type}
-
- ₹ ${amount} -
` +
${type}
+
+ ₹ ${amount} +
` if (receiver !== 'undefined') composition += ` -
${transaction}
${allContacts[receiver] ? allContacts[receiver].name : receiver}` +
${transaction}
${allContacts[receiver] ? allContacts[receiver].name : receiver}` if (upiTxId !== 'undefined') composition += ` -
UPI transaction ID
- ${upiTxId} - ` +
UPI transaction ID
+ ${upiTxId} + ` if (receiverUPI !== 'undefined') composition += ` -
Sent to UPI ID
- ${receiverUPI} - ` +
Sent to UPI ID
+ ${receiverUPI} + ` composition += `
${formatedTime(timeStamp)}
` transactionDetails.innerHTML = composition transactionType.textContent = type @@ -2242,28 +2243,28 @@ for (upi in upis) { let checked = upi === defaultUPI ? 'checked' : '' radios += ` -
- - ` +
+ + ` if (upi === defaultUPI) radios += ` -
Primary
` +
Primary
` if (container.closest('#settings_page')) radios += ` - - Remove this UPI - - - ` + + Remove this UPI + + + ` radios += ` -
` +
` } container.innerHTML = radios }) @@ -2296,13 +2297,13 @@ let addPersonButton = document.createElement('div') addPersonButton.id = "add_person_btn" addPersonButton.innerHTML = ` - - add Contact - - - - Add - ` + + add Contact + + + + Add + ` peopleContainer.prepend(addPersonButton) } @@ -2413,22 +2414,22 @@ } /* Sample Usage - --Creating and defining the event-- - reactor.registerEvent(''); - reactor.addEventListener('', function(someObject){ + --Creating and defining the event-- + reactor.registerEvent(''); + reactor.addEventListener('', function(someObject){ do something... - }); - --Firing the event-- - reactor.dispatchEvent('',); + }); + --Firing the event-- + reactor.dispatchEvent('',); */ /*! - * Crypto-JS v2.5.4 Crypto.js - * http://code.google.com/p/crypto-js/ - * Copyright (c) 2009-2013, Jeff Mott. All rights reserved. - * http://code.google.com/p/crypto-js/wiki/License - */ + * Crypto-JS v2.5.4 Crypto.js + * http://code.google.com/p/crypto-js/ + * Copyright (c) 2009-2013, Jeff Mott. All rights reserved. + * http://code.google.com/p/crypto-js/wiki/License + */ if (typeof Crypto == "undefined" || !Crypto.util) { (function () { @@ -2578,11 +2579,11 @@ //Adding SHA1 to fix basic PKBDF2 /* - * Crypto-JS v2.5.4 - * http://code.google.com/p/crypto-js/ - * (c) 2009-2012 by Jeff Mott. All rights reserved. - * http://code.google.com/p/crypto-js/wiki/License - */ + * Crypto-JS v2.5.4 + * http://code.google.com/p/crypto-js/ + * (c) 2009-2012 by Jeff Mott. All rights reserved. + * http://code.google.com/p/crypto-js/wiki/License + */ (function () { // Shortcuts @@ -2671,11 +2672,11 @@ //Added to make PKBDF2 work /* - * Crypto-JS v2.5.4 - * http://code.google.com/p/crypto-js/ - * (c) 2009-2012 by Jeff Mott. All rights reserved. - * http://code.google.com/p/crypto-js/wiki/License - */ + * Crypto-JS v2.5.4 + * http://code.google.com/p/crypto-js/ + * (c) 2009-2012 by Jeff Mott. All rights reserved. + * http://code.google.com/p/crypto-js/wiki/License + */ (function () { // Shortcuts @@ -2723,11 +2724,11 @@ //crypto-sha256-hmac.js /* - * Crypto-JS v2.5.4 - * http://code.google.com/p/crypto-js/ - * (c) 2009-2012 by Jeff Mott. All rights reserved. - * http://code.google.com/p/crypto-js/wiki/License - */ + * Crypto-JS v2.5.4 + * http://code.google.com/p/crypto-js/ + * (c) 2009-2012 by Jeff Mott. All rights reserved. + * http://code.google.com/p/crypto-js/wiki/License + */ function ascii_to_hexa(str) { var arr1 = []; @@ -2909,15 +2910,15 @@ /*! - * Random number generator with ArcFour PRNG - * - * NOTE: For best results, put code like - * - * in your main HTML document. - * - * Copyright Tom Wu, bitaddress.org BSD License. - * http://www-cs-students.stanford.edu/~tjw/jsbn/LICENSE - */ + * Random number generator with ArcFour PRNG + * + * NOTE: For best results, put code like + * + * in your main HTML document. + * + * Copyright Tom Wu, bitaddress.org BSD License. + * http://www-cs-students.stanford.edu/~tjw/jsbn/LICENSE + */ (function () { // Constructor function of Global SecureRandom object @@ -3310,16 +3311,16 @@ // Follows 'jsbn' on Github: https://github.com/jasondavies/jsbn // Review and Testing: https://github.com/cryptocoinjs/bigi/ /*! - * Basic JavaScript BN library - subset useful for RSA encryption. v1.4 - * - * Copyright (c) 2005 Tom Wu - * All Rights Reserved. - * BSD License - * http://www-cs-students.stanford.edu/~tjw/jsbn/LICENSE - * - * Copyright Stephan Thomas - * Copyright pointbiz - */ + * Basic JavaScript BN library - subset useful for RSA encryption. v1.4 + * + * Copyright (c) 2005 Tom Wu + * All Rights Reserved. + * BSD License + * http://www-cs-students.stanford.edu/~tjw/jsbn/LICENSE + * + * Copyright Stephan Thomas + * Copyright pointbiz + */ (function () { @@ -4879,13 +4880,13 @@ //ellipticcurve.js /*! - * Basic Javascript Elliptic Curve implementation - * Ported loosely from BouncyCastle's Java EC code - * Only Fp curves implemented for now - * - * Copyright Tom Wu, bitaddress.org BSD License. - * http://www-cs-students.stanford.edu/~tjw/jsbn/LICENSE - */ + * Basic Javascript Elliptic Curve implementation + * Ported loosely from BouncyCastle's Java EC code + * Only Fp curves implemented for now + * + * Copyright Tom Wu, bitaddress.org BSD License. + * http://www-cs-students.stanford.edu/~tjw/jsbn/LICENSE + */ (function () { // Constructor function of Global EllipticCurve object @@ -4996,9 +4997,9 @@ return null; }; /*! - * Crypto-JS 2.5.4 BlockModes.js - * contribution from Simon Greatrix - */ + * Crypto-JS 2.5.4 BlockModes.js + * contribution from Simon Greatrix + */ (function (C) { @@ -5411,11 +5412,11 @@ })(Crypto); /*! - * Crypto-JS v2.5.4 PBKDF2.js - * http://code.google.com/p/crypto-js/ - * Copyright (c) 2009-2013, Jeff Mott. All rights reserved. - * http://code.google.com/p/crypto-js/wiki/License - */ + * Crypto-JS v2.5.4 PBKDF2.js + * http://code.google.com/p/crypto-js/ + * Copyright (c) 2009-2013, Jeff Mott. All rights reserved. + * http://code.google.com/p/crypto-js/wiki/License + */ (function () { // Shortcuts @@ -5468,26 +5469,26 @@ })(); /* - * Copyright (c) 2010-2011 Intalio Pte, All Rights Reserved - * - * Permission is hereby granted, free of charge, to any person obtaining a copy - * of this software and associated documentation files (the "Software"), to deal - * in the Software without restriction, including without limitation the rights - * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell - * copies of the Software, and to permit persons to whom the Software is - * furnished to do so, subject to the following conditions: - * - * The above copyright notice and this permission notice shall be included in - * all copies or substantial portions of the Software. - * - * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR - * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, - * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE - * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER - * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, - * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN - * THE SOFTWARE. - */ + * Copyright (c) 2010-2011 Intalio Pte, All Rights Reserved + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in + * all copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN + * THE SOFTWARE. + */ // https://github.com/cheongwy/node-scrypt-js (function () { @@ -5496,11 +5497,11 @@ //function scrypt(byte[] passwd, byte[] salt, int N, int r, int p, int dkLen) /* - * N = Cpu cost - * r = Memory cost - * p = parallelization cost - * - */ + * N = Cpu cost + * r = Memory cost + * p = parallelization cost + * + */ window.Crypto_scrypt = function (passwd, salt, N, r, p, dkLen, callback) { if (N == 0 || (N & (N - 1)) != 0) throw Error("N must be > 0 and a power of 2"); @@ -5845,11 +5846,11 @@ })(); /*! - * Crypto-JS v2.5.4 AES.js - * http://code.google.com/p/crypto-js/ - * Copyright (c) 2009-2013, Jeff Mott. All rights reserved. - * http://code.google.com/p/crypto-js/wiki/License - */ + * Crypto-JS v2.5.4 AES.js + * http://code.google.com/p/crypto-js/ + * Copyright (c) 2009-2013, Jeff Mott. All rights reserved. + * http://code.google.com/p/crypto-js/wiki/License + */ (function () { // Shortcuts @@ -6263,9 +6264,9 @@ })(); /* - * Copyright (c) 2000 - 2011 The Legion Of The Bouncy Castle (http://www.bouncycastle.org) - * Ported to JavaScript by bitaddress.org - */ + * Copyright (c) 2000 - 2011 The Legion Of The Bouncy Castle (http://www.bouncycastle.org) + * Ported to JavaScript by bitaddress.org + */ ec.FieldElementFp.fastLucasSequence = function (p, P, Q, k) { // TODO Research and apply "common-multiplicand multiplication here" @@ -6753,12 +6754,12 @@ }; /* - * Copyright (c) 2000 - 2011 The Legion Of The Bouncy Castle (http://www.bouncycastle.org) - * Ported to JavaScript by bitaddress.org - * - * Number yTilde - * BigInteger X1 - */ + * Copyright (c) 2000 - 2011 The Legion Of The Bouncy Castle (http://www.bouncycastle.org) + * Ported to JavaScript by bitaddress.org + * + * Number yTilde + * BigInteger X1 + */ ec.CurveFp.prototype.decompressPoint = function (yTilde, X1) { var x = this.fromBigInteger(X1); var alpha = x.multiply(x.square().add(this.getA())).add(this.getB()); @@ -8062,8 +8063,8 @@ }; /* - * Return public key as a byte array in DER encoding - */ + * Return public key as a byte array in DER encoding + */ ECKey.prototype.getPub = function () { if (this.compressed) { if (this.pubComp) return this.pubComp; @@ -8120,8 +8121,8 @@ }; /* - * Takes a public point as a hex string or byte array - */ + * Takes a public point as a hex string or byte array + */ ECKey.prototype.setPub = function (pub) { // byte array if (Bitcoin.Util.isArray(pub)) { @@ -9422,12 +9423,12 @@ /* var test = { - foo : { + foo : { bar : { - baz : null + baz : null } - }, - bar : 1 + }, + bar : 1 }; cleanse(test); @@ -11814,52 +11815,49 @@ parse_flo_comments: async function () { const num = 4; text = `masterFLOAddress=FD5hK9ryBogJ5AcSvCy1tW5as8jRTkMLky - #!#CURRENCY=INR - #!#TYPE_UPI_APP=UPI_APP_TEST${num} - #!#TYPE_DEPOSITS=CASH_DEPOSITS_TEST${num} - #!#TYPE_WITHDRAWS=CASH_WITHDRAWS_TEST${num} - #!#TYPE_MSGES=USER_MESSAGES_TEST${num} - #!#TYPE_PROCESSED_DEPOSITS=PROCESSED_DEPOSITS_TEST${num} - #!#TYPE_PROCESSED_WITHDRAWS=PROCESSED_WITHDRAWS_TEST${num} - #!#TYPE_FILE_DEPOSITS_COMPLAINT=DEPOSITS_COMPLAINT_TEST${num} - #!#TYPE_PROCESSED_DEPOSITS_COMPLAINT=PROCESSED_DEPOSITS_COMPLAINT_TEST${num} - #!#TYPE_FILE_WITHDRAWS_COMPLAINT=WITHDRAWS_COMPLAINT_TEST${num} - #!#TYPE_PROCESSED_WITHDRAWS_COMPLAINT=PROCESSED_WITHDRAWS_COMPLAINT_TEST${num} - #!#TYPE_PAY_THROUGH_CASHIER=PAY_THRU_CASHIER_TEST${num} - #!#TYPE_FILE_PAY_THROUGH_CASHIER_COMPLAINT=PAY_THRU_CASHIER_COMPLAINT_TEST${num} - #!#TYPE_PROCESSED_PAY_THROUGH_CASHIER=PROCESSED_PAY_THROUGH_CASHIER_TEST${num} - #!#TYPE_PROCESSED_PAY_THROUGH_CASHIER_COMPLAINT=PROCESSED_PAY_THROUGH_CASHIER_COMPLAINT_TEST${num} - #!#TYPE_REQUEST_PAYMENT=REQUEST_PAYMENT_TEST${num} - #!#TYPE_REQUEST_PAYMENT_DECLINED=REQUEST_PAYMENT_DECLINED_TEST${num} - #!#TYPE_REQUEST_PAYMENT_APPROVED=REQUEST_PAYMENT_APPROVED_TEST${num} - #!#TYPE_UNCONFIRMED_BALANCE_CLAIM_REQUESTS=TYPE_UNCONFIRMED_BALANCE_CLAIM_REQUESTS_TEST${num} - #!#TYPE_SENT_TOKENS=TYPE_SENT_TOKENS_TEST${num} - #!#TYPE_MY_PERSONAL_DATA=TYPE_MY_PERSONAL_DATA_TEST${num} - #!#TYPE_UNCONFIRMED_RUPEE_DEPOSITS=TYPE_UNCONFIRMED_RUPEE_DEPOSITS_TEST${num} - #!#TYPE_PROCESSED_UNCONFIRMED_BALANCE_CLAIM_REQUESTS=TYPE_PROCESSED_UNCONFIRMED_BALANCE_CLAIM_REQUESTS_TEST${num} - #!#vendors=FGtPEBu2NFFYkqFrA9NDBJJLpVhyuPubDj, - #!#helplineFloId=F9MAyvT5b9aSfsuukAungrbt1L5fgmJmuK - #!#cashiers= - { - "FPFeL5PXzW9bGosUjQYCxTHSMHidnygvvd": { - "upi_id": "7744023898@paytm" - }, - "FCja6sLv58e3RMy41T5AmWyvXEWesqBCkX": { - "upi_id": "8507742774@ybl" - }, - "FHW2kgYEhDt85vjAiMMF7bQqdP74L7iwvQ": { - "upi_id": "8340617958@ybl" - }, - "FTmJ6QeBjDFjdqS6Zs4V5amac2X19AjXcF": { - "upi_id": "8902496422@ybl" - }, - "FBun3694ZdxmD66os9oL5DxMrif3vyVjT3": { - "upi_id": "7004801428@ybl" - }, - "FTpxFWdBDvYARGZuPWDhw9gke72J2pruvv": { - "upi_id": "aakriti1705sinha@okicici" - } - }` + #!#CURRENCY=INR + #!#TYPE_UPI_APP=UPI_APP_TEST${num} + #!#TYPE_DEPOSITS=CASH_DEPOSITS_TEST${num} + #!#TYPE_WITHDRAWS=CASH_WITHDRAWS_TEST${num} + #!#TYPE_MSGES=USER_MESSAGES_TEST${num} + #!#TYPE_PROCESSED_DEPOSITS=PROCESSED_DEPOSITS_TEST${num} + #!#TYPE_PROCESSED_WITHDRAWS=PROCESSED_WITHDRAWS_TEST${num} + #!#TYPE_FILE_DEPOSITS_COMPLAINT=DEPOSITS_COMPLAINT_TEST${num} + #!#TYPE_PROCESSED_DEPOSITS_COMPLAINT=PROCESSED_DEPOSITS_COMPLAINT_TEST${num} + #!#TYPE_FILE_WITHDRAWS_COMPLAINT=WITHDRAWS_COMPLAINT_TEST${num} + #!#TYPE_PROCESSED_WITHDRAWS_COMPLAINT=PROCESSED_WITHDRAWS_COMPLAINT_TEST${num} + #!#TYPE_PAY_THROUGH_CASHIER=PAY_THRU_CASHIER_TEST${num} + #!#TYPE_FILE_PAY_THROUGH_CASHIER_COMPLAINT=PAY_THRU_CASHIER_COMPLAINT_TEST${num} + #!#TYPE_PROCESSED_PAY_THROUGH_CASHIER=PROCESSED_PAY_THROUGH_CASHIER_TEST${num} + #!#TYPE_PROCESSED_PAY_THROUGH_CASHIER_COMPLAINT=PROCESSED_PAY_THROUGH_CASHIER_COMPLAINT_TEST${num} + #!#TYPE_REQUEST_PAYMENT=REQUEST_PAYMENT_TEST${num} + #!#TYPE_REQUEST_PAYMENT_DECLINED=REQUEST_PAYMENT_DECLINED_TEST${num} + #!#TYPE_REQUEST_PAYMENT_APPROVED=REQUEST_PAYMENT_APPROVED_TEST${num} + #!#TYPE_UNCONFIRMED_BALANCE_CLAIM_REQUESTS=TYPE_UNCONFIRMED_BALANCE_CLAIM_REQUESTS_TEST${num} + #!#TYPE_SENT_TOKENS=TYPE_SENT_TOKENS_TEST${num} + #!#TYPE_MY_PERSONAL_DATA=TYPE_MY_PERSONAL_DATA_TEST${num} + #!#TYPE_UNCONFIRMED_RUPEE_DEPOSITS=TYPE_UNCONFIRMED_RUPEE_DEPOSITS_TEST${num} + #!#TYPE_PROCESSED_UNCONFIRMED_BALANCE_CLAIM_REQUESTS=TYPE_PROCESSED_UNCONFIRMED_BALANCE_CLAIM_REQUESTS_TEST${num} + #!#vendors=FGtPEBu2NFFYkqFrA9NDBJJLpVhyuPubDj, + #!#helplineFloId=F9MAyvT5b9aSfsuukAungrbt1L5fgmJmuK + #!#cashiers= + { + "FCja6sLv58e3RMy41T5AmWyvXEWesqBCkX": { + "upi_id": "8507742774@ybl" + }, + "FHW2kgYEhDt85vjAiMMF7bQqdP74L7iwvQ": { + "upi_id": "8340617958@ybl" + }, + "FTmJ6QeBjDFjdqS6Zs4V5amac2X19AjXcF": { + "upi_id": "8902496422@ybl" + }, + "FBun3694ZdxmD66os9oL5DxMrif3vyVjT3": { + "upi_id": "7004801428@ybl" + }, + "FTpxFWdBDvYARGZuPWDhw9gke72J2pruvv": { + "upi_id": "aakriti1705sinha@okicici" + } + }` /* "FQ6udJuTbGDa2kWZAkmNpwgHaUEeYLPAtt": { "upi_id": "krishraj1012-2@okicici" @@ -11964,7 +11962,7 @@ }) show_deposit_request() show_withdraw_request() - showPayRequests() + showPayThruCashierRequests() userType.forEach(user => user.textContent = 'Cashier') showPage('deposit', 'deposit_page_btn') } @@ -12134,7 +12132,25 @@ arg2: { receiverID: cashier, senderIDs: [myFloID] } } - promises.push(p1, p2, p3); + let p4 = { + func: floCloudAPI.requestGeneralData, + arg1: token_app.master_configurations.TYPE_PROCESSED_DEPOSITS, + arg2: { receiverID: cashier, senderIDs: [cashier] } + } + + let p5 = { + func: floCloudAPI.requestGeneralData, + arg1: token_app.master_configurations.TYPE_PROCESSED_WITHDRAWS, + arg2: { receiverID: cashier, senderIDs: [cashier] } + } + + let p6 = { + func: floCloudAPI.requestGeneralData, + arg1: token_app.master_configurations.TYPE_PROCESSED_PAY_THROUGH_CASHIER, + arg2: { receiverID: cashier, senderIDs: [cashier] } + } + + promises.push(p1, p2, p3, p4, p5, p6); } } @@ -12178,6 +12194,7 @@ let promises = []; promises.push(reset_cloud_object(token_app.master_configurations.TYPE_MY_PERSONAL_DATA)); promises.push(reset_cloud_object(token_app.master_configurations.TYPE_UNCONFIRMED_RUPEE_DEPOSITS)); + promises.push(reset_cloud_object(token_app.master_configurations.TYPE_SENT_TOKENS)); if (Object.keys(token_app.master_configurations.cashiers).includes(myFloID)) { promises.push(reset_cloud_object(token_app.master_configurations.TYPE_PROCESSED_UNCONFIRMED_BALANCE_CLAIM_REQUESTS)); } @@ -12189,10 +12206,10 @@ try { if (!Object.keys(token_app.master_configurations.cashiers).includes(myFloID)) return; - await floCloudAPI.requestGeneralData(token_app.master_configurations.TYPE_DEPOSITS, { + /*await floCloudAPI.requestGeneralData(token_app.master_configurations.TYPE_DEPOSITS, { receiverID: myFloID, senderIDs: [myFloID] - }); + });*/ let finished_tasks = await floCloudAPI.requestApplicationData({ type: token_app.master_configurations.TYPE_PROCESSED_DEPOSITS, @@ -12247,7 +12264,7 @@ if (typeof finished_tasks === "string") finished_tasks = JSON.parse(finished_tasks); - const processed_withdraws = Object.values(finished_tasks).map(m => m.message.user_upi_txid); + const processed_withdraws = Object.values(finished_tasks).map(m => m.message.token_txid) await floCloudAPI.requestGeneralData(token_app.master_configurations.TYPE_WITHDRAWS, { receiverID: myFloID @@ -12368,7 +12385,9 @@ let token_tx = await ajaxGet('https://ranchimallflo.duckdns.org/api/v1.0/getTransactionDetails/' + input_data["token_txid"]) - if (typeof token_tx !== "object") { + if (typeof token_tx !== "object" || typeof token_tx.parsedFloData !== "object" + || typeof token_tx.parsedFloData.flodata !== "string" + || token_tx.parsedFloData.flodata.length<1) { notify("Transaction not found"); return false; } @@ -12399,13 +12418,14 @@ }); floCloudAPI.sendGeneralData(`Your withdrawal request of INR ${amount_to_transfer} is approved. - Please check reference number ${transfer_upi_txid} in your UPI ${withdraw_upi}`, + Please check reference number ${transfer_upi_txid} in your UPI ${withdraw_upi}`, token_app.master_configurations.TYPE_MSGES, { receiverID: input_data['withdrawer_flo_id'] }) } catch (error) { - notify(error, 'error') + notify('Cash withdrawal failed.', 'error') + throw new Error(error, 'error') } } @@ -12466,7 +12486,7 @@ .map(m => m.message)[0]; payment_request_status(original_req, 'APPROVED') - showPayRequests(); + showPayThruCashierRequests(); } else if (payingRequested === false) { let receiverID = myFloID; floGlobals.appObjects[token_app.master_configurations.TYPE_SENT_TOKENS][flo_txid] = { @@ -12527,7 +12547,7 @@ } } - async function showPayRequests() { + async function showPayThruCashierRequests() { try { //if (!Object.keys(token_app.master_configurations.cashiers).includes(myFloID)) return; @@ -12628,7 +12648,7 @@ }); notify(`Transaction successful: ${flo_txid}. - INR ${amount_to_pay} sent to ${vendor_flo_id}`, 'success', '', true); + INR ${amount_to_pay} sent to ${vendor_flo_id}`, 'success', '', true); return true; } } @@ -12901,8 +12921,8 @@ hidePopup() showTransactionStatus('success', 'Pay through cashier Request sent.', `Sent to: ${recvr_id}
- through cashier UPI: ${cashier_upi}.

- Once the cashier receives your payment, they will transfer it to intended receiver.`); + 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, pending: true })) } @@ -12979,7 +12999,7 @@ timeStamp: usr_withdraws.vectorClock, token_txid, receiver: withdrawer_upi, - pending: withdraw_request_processed + pending: withdraw_request_processed })) } withdrawActivityContainer.innerHTML = ``; @@ -13341,7 +13361,7 @@ timeStamp = transaction.transactionDetails.time * 1000 if (receiver === '' || typeof receiver === 'undefined' || receiver === null || token_app.master_configurations.cashiers[receiver]) continue; - frag.append(render.activityCard({ type: 'sent', amount: tokenAmount, receiver, timeStamp})) + frag.append(render.activityCard({ type: 'sent', amount: tokenAmount, receiver, timeStamp })) } sentActivityContainer.innerHTML = '' sentActivityContainer.append(frag) From 22a5d1806a42f38cf2bdf170a5c3bdb40e73ddc0 Mon Sep 17 00:00:00 2001 From: sairaj mote Date: Sat, 3 Oct 2020 16:42:18 +0530 Subject: [PATCH 29/42] 0.0.55 --- components.js | 3 +- css/main.css | 36 +++++++++++++++++++- css/main.min.css | 2 +- css/main.scss | 37 +++++++++++++++++++-- index.html | 86 +++++++++++++++++++++++++++++++----------------- 5 files changed, 128 insertions(+), 36 deletions(-) diff --git a/components.js b/components.js index 8e20eb2..5542c05 100644 --- a/components.js +++ b/components.js @@ -254,8 +254,7 @@ border: none; min-width: 0; } .input.readonly .clear{ - opacity: 0 !important; - pointer-events: none !important; + display: none; } .readonly{ pointer-events: none; diff --git a/css/main.css b/css/main.css index 8312b6c..efa988c 100644 --- a/css/main.css +++ b/css/main.css @@ -854,7 +854,9 @@ sm-panel { .request .flex { align-items: center; justify-content: flex-end; - margin-top: 1.5rem; + margin-top: auto; + padding-top: 1.5rem; + justify-self: flex-end; } .request .flex h5 { margin: 0; @@ -1195,6 +1197,38 @@ sm-panel { width: max-content; margin-left: 0.4rem; } +.activity.placeholder { + animation: pulse infinite 0.6s alternate; +} +.activity.placeholder .activity-type, +.activity.placeholder .activity-receiver { + background: rgba(var(--text-color), 0.06); + padding: 0.5rem 0; +} +.activity.placeholder .activity-type { + width: 50%; +} +.activity.placeholder:nth-of-type(2) { + animation-delay: 0.1s; +} +.activity.placeholder:nth-of-type(3) { + animation-delay: 0.2s; +} +.activity.placeholder:nth-of-type(4) { + animation-delay: 0.3s; +} +.activity.placeholder:nth-of-type(5) { + animation-delay: 0.4s; +} +.activity.placeholder:nth-of-type(6) { + animation-delay: 0.5s; +} +.activity.placeholder:nth-of-type(7) { + animation-delay: 0.6s; +} +.activity.placeholder:nth-of-type(8) { + animation-delay: 0.7s; +} .back-arrow { stroke-width: 10; diff --git a/css/main.min.css b/css/main.min.css index ab548c7..c172f1b 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}#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),.4)}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 +#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}.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;fill:none}.action,button{position:relative}*{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,.logo{align-items:center}button:focus{outline:solid thin}button:disabled{cursor:default;background:rgba(var(--text-color),.4)}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}.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{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}.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}.empty-state svg,.icon{stroke:rgba(var(--text-color),.8)}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{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}#profile_page button,.user-panel{align-self:flex-start}.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)}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,.tooltip{bottom:0;display:flex;background:rgba(var(--foreground-color),1);left:0;right:0}#main_header{align-items:center;padding:clamp(1rem,2vw,2rem) 1rem;justify-content:space-between}.icon{height:1.2rem;width:1.2rem;stroke-width:6;stroke-linecap:round;stroke-linejoin:round}#navbar{flex-direction:row;align-items:center;justify-content:space-evenly;position:fixed;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}.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;top:0;cursor:help;flex-direction:column;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:auto;padding-top:1.5rem;justify-self:flex-end}.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}.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;position:fixed;left:0}#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}.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;background:rgba(var(--text-color),.06);border-radius:1rem;width:max-content;margin-left:.4rem}.activity.placeholder{animation:pulse infinite .6s alternate}.activity.placeholder .activity-receiver,.activity.placeholder .activity-type{background:rgba(var(--text-color),.06);padding:.5rem 0}.activity.placeholder .activity-type{width:50%}.activity.placeholder:nth-of-type(2){animation-delay:.1s}.activity.placeholder:nth-of-type(3){animation-delay:.2s}.activity.placeholder:nth-of-type(4){animation-delay:.3s}.activity.placeholder:nth-of-type(5){animation-delay:.4s}.activity.placeholder:nth-of-type(6){animation-delay:.5s}.activity.placeholder:nth-of-type(7){animation-delay:.6s}.activity.placeholder:nth-of-type(8){animation-delay:.7s}.back-arrow{stroke-width:10;margin-right:.5rem;padding:.2rem}.select{max-width:50ch;position:relative;display:flex;width:100%;border-radius:.3rem;background:rgba(var(--text-color),.06)}.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 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 1a1018f..efeb7a5 100644 --- a/css/main.scss +++ b/css/main.scss @@ -879,8 +879,9 @@ sm-panel{ .flex { align-items: center; justify-content: flex-end; - margin-top: 1.5rem; - + margin-top: auto; + padding-top: 1.5rem; + justify-self: flex-end; h5 { margin: 0; } @@ -1250,6 +1251,38 @@ sm-panel{ width: max-content; margin-left: 0.4rem; } + &.placeholder{ + animation: pulse infinite 0.6s alternate; + .activity-type, + .activity-receiver{ + background: rgba(var(--text-color), 0.06); + padding: 0.5rem 0; + } + .activity-type{ + width: 50%; + } + &:nth-of-type(2){ + animation-delay: 0.1s; + } + &:nth-of-type(3){ + animation-delay: 0.2s; + } + &:nth-of-type(4){ + animation-delay: 0.3s; + } + &:nth-of-type(5){ + animation-delay: 0.4s; + } + &:nth-of-type(6){ + animation-delay: 0.5s; + } + &:nth-of-type(7){ + animation-delay: 0.6s; + } + &:nth-of-type(8){ + animation-delay: 0.7s; + } + } } .back-arrow{ stroke-width: 10; diff --git a/index.html b/index.html index 3393a3d..a034353 100644 --- a/index.html +++ b/index.html @@ -358,7 +358,7 @@ - + @@ -1085,7 +1085,7 @@ return card; }, activityCard(obj) { - let { type, amount, timeStamp, receiver, upi_txid, receiverUPI, pending } = obj; + let { type, amount, timeStamp, receiver, upi_txid, receiverUPI, processed } = obj; let card = document.createElement('div'), composition = ``, icon, @@ -1100,7 +1100,7 @@ 'data-amount': amount, 'data-upi-txid': upi_txid, 'data-receiver-upi': receiverUPI, - 'data-pending': pending + 'data-pending': processed }) switch (type) { case 'sent': @@ -1141,7 +1141,7 @@ sign = '+' className = 'deposited' transaction = 'Deposited' - if (pending) + if (processed === false) transaction = 'deposit' break; case 'withdraw': @@ -1161,7 +1161,7 @@ sign = '-' className = 'withdrawn' transaction = 'withdrawn to' - if (pending) + if (processed === false) transaction = 'withdraw' break; case 'payCashier': @@ -1174,12 +1174,12 @@ sign = '-' className = 'withdrawn' transaction = 'Paid to' - if (pending) + if (processed === false) transaction = 'payment' break; } let status = '' - if (pending) { + if (processed === false) { status = '
pending
' icon = ` pending @@ -1201,6 +1201,18 @@ card.innerHTML = composition; return card; }, + activityPlaceholder(){ + let card = document.createElement('div'), + composition = `` + card.classList.add('activity', 'placeholder') + composition += ` +
+

+

+ ` + card.innerHTML = composition; + return card; + }, paymentRequest(time, senderAddress, amount, id, enableActions) { let card = document.createElement('div') card.classList.add('request'), @@ -1941,7 +1953,7 @@ receiver: currentRequest.dataset.receiver, upiTxId: currentRequest.dataset.upiTxid, receiverUPI: currentRequest.dataset.receiverUpi, - pending: currentRequest.dataset.pending + processed: currentRequest.dataset.pending }) } }) @@ -2056,7 +2068,7 @@ showReportButton = document.getElementById('show_report_btn') function showTransactionDetails(obj) { - let { type, timeStamp, amount, receiver, upiTxId, receiverUPI, pending } = obj; + let { type, timeStamp, amount, receiver, upiTxId, receiverUPI, processed } = obj; let composition = ``, icon, transaction, @@ -2095,7 +2107,7 @@ ` type = 'deposited' - if (pending === 'true') + if (processed === 'false') type = 'deposit' transaction = 'Deposited to' break; @@ -2114,7 +2126,7 @@ ` type = 'withdrawn' - if (pending === 'true') + if (processed === 'false') type = 'Withdraw' transaction = 'withdrawn to' break; @@ -2128,12 +2140,12 @@ className = 'withdrawn' transaction = 'Paid to' type = 'Paid through cashier' - if (pending === 'true') + if (processed === 'false') type = 'Paying through cashier' break; } - if (pending === 'true') { + if (processed === 'false') { icon = ` pending @@ -11856,13 +11868,11 @@ }, "FTpxFWdBDvYARGZuPWDhw9gke72J2pruvv": { "upi_id": "aakriti1705sinha@okicici" - } - }` - /* + }, "FQ6udJuTbGDa2kWZAkmNpwgHaUEeYLPAtt": { "upi_id": "krishraj1012-2@okicici" } - */ + }` text = removeWhiteSpaces(text); return text; const master_data = await ajaxGet( @@ -12005,19 +12015,19 @@ renderUserUPI() renderAllContacts() - show_all_user_activities() - show_payment_requests() showPage('home_page', 'home_page_btn') - + show_payment_requests() + withdraw_token_to_get_cash(); - + transferTokensManually(); - + pay_through_cashier(); - + getSentRupeeList() - + getReceivedRupeeList() + show_all_user_activities() } this.retrieveLatestContent(); }, @@ -12801,7 +12811,7 @@ hidePopup() showTransactionStatus('success', 'Deposit request sent.', 'It may take upto 48 hours for deposited amount to be reflected in your account.') btnLoading('request_tokens_btn', 'stop') - depositActivityContainer.prepend(render.activityCard({ type: 'deposit', amount: request_object.deposit_amount, timeStamp: `${Date.now()}_${myFloID}}`, upi_txid, receiver: cashier_upi, pending: true })) + depositActivityContainer.prepend(render.activityCard({ type: 'deposit', amount: request_object.deposit_amount, timeStamp: `${Date.now()}_${myFloID}}`, upi_txid, receiver: cashier_upi, processed: true })) }) return true; } @@ -12869,7 +12879,7 @@ }); hidePopup() showTransactionStatus('success', 'Withdraw request sent.', 'It may take upto 48 working hours to process your withdrawal request.') - withdrawActivityContainer.prepend(render.activityCard({ type: 'withdraw', amount: withdraw_cash_amount, timeStamp: `${Date.now()}_${myFloID}`, token_txid: flo_txid, receiver: user_withdraw_upi, pending: true })) + withdrawActivityContainer.prepend(render.activityCard({ type: 'withdraw', amount: withdraw_cash_amount, timeStamp: `${Date.now()}_${myFloID}`, token_txid: flo_txid, receiver: user_withdraw_upi, processed: true })) return true; } showTransactionStatus('failure', 'Failed to send withdraw request.'); @@ -12923,7 +12933,7 @@ showTransactionStatus('success', 'Pay through cashier Request sent.', `Sent to: ${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, pending: true })) + payCashierActivityContainer.prepend(render.activityCard({ type: 'payCashier', amount: amount_to_pay, timeStamp: `${Date.now()}_${myFloID}`, receiver: recvr_id, receiverUPI: req_object.upi_txid, processed: true })) } } catch (error) { @@ -12940,6 +12950,22 @@ async function show_all_user_activities() { try { + + depositActivityContainer.innerHTML = '' + withdrawActivityContainer.innerHTML = '' + payCashierActivityContainer.innerHTML = '' + + for(let i = 0; i < 8; i++){ + frag.append(render.activityPlaceholder()) + } + let frag1 = frag.cloneNode(true) + let frag2 = frag.cloneNode(true) + depositActivityContainer.append(frag) + + withdrawActivityContainer.append(frag1) + + payCashierActivityContainer.append(frag2) + await token_app.actions.retrieveLatestContent(); const deposit_msg = removeDuplicates(floDapps.getNextGeneralData(token_app.master_configurations.TYPE_DEPOSITS, "0") @@ -12970,7 +12996,7 @@ // 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 + upi_txid, receiver: cashier_upi, deposit_request_processed, processed: deposit_request_processed })) } @@ -12999,7 +13025,7 @@ timeStamp: usr_withdraws.vectorClock, token_txid, receiver: withdrawer_upi, - pending: withdraw_request_processed + processed: withdraw_request_processed })) } withdrawActivityContainer.innerHTML = ``; @@ -13027,7 +13053,7 @@ timeStamp: cashier_message.vectorClock, receiver: receiver_flo_id, receiverUPI: upi_txid, - pending: ptc_request_processed + processed: ptc_request_processed })) } From 1b98f4fffc3fdc75f6b2b829bd77afd9842272f8 Mon Sep 17 00:00:00 2001 From: sairaj mote Date: Sat, 3 Oct 2020 19:14:08 +0530 Subject: [PATCH 30/42] 0.0.56 --- components.js | 4 +- index.html | 114 ++++++++++++++++++++++-------------------- qrcode-scanner.min.js | 7 +++ qrcode.min.js | 1 + 4 files changed, 71 insertions(+), 55 deletions(-) create mode 100644 qrcode-scanner.min.js create mode 100644 qrcode.min.js diff --git a/components.js b/components.js index 5542c05..f6a0f6b 100644 --- a/components.js +++ b/components.js @@ -254,7 +254,9 @@ border: none; min-width: 0; } .input.readonly .clear{ - display: none; + opacity: 0 !important; + margin-right: -2em; + pointer-events: none !important; } .readonly{ pointer-events: none; diff --git a/index.html b/index.html index a034353..eda9b9a 100644 --- a/index.html +++ b/index.html @@ -933,33 +933,34 @@

Settings

-
-

My FLO address

-
-

- - Copy - - - -
-
-

Theme

-
-

Toggle dark theme

- -
-
-

My UPIs

-
-

Add UPI address for easier access during various transactions.

- + Add UPI address - -
-

Sign Out

-

Signing out will erase all the data stored in local storage and Indexed DB. This will remove - saved private key, UPI addresses and contacts.

- Sign out +
+
+

My FLO address

+
+

+ + Copy + + + +
+
+

Theme

+
+

Toggle dark theme

+ +
+
+

My UPIs

+
+

Add UPI address for easier access during various transactions.

+ + Add UPI address + +
+

Sign Out

+

Signing out will erase all the data stored in local storage and Indexed DB. This will remove + saved private key, UPI addresses and contacts.

+ Sign out
@@ -1977,24 +1978,19 @@ // Function for accepting payment request document.getElementById('payment_request_tab').addEventListener('click', async (e) => { if (e.target.closest('.send-rupee')) { - let parent = e.target.closest('.request'), - senderAddress = parent.dataset.senderAddress, - amount = parent.dataset.amount, - paymentRequestId = parent.dataset.paymentRequestId;; - showPopup('send_rupee_popup'); + currentPaymentRequest = e.target.closest('.request') + let senderAddress = currentPaymentRequest.dataset.senderAddress, + amount = currentPaymentRequest.dataset.amount payingRequested = true; - currentPaymentRequest = { - paymentRequest: parent, - requestId: paymentRequestId - } tokenReceiver.value = senderAddress; tokenAmount.value = amount; tokenReceiver.readOnly = true tokenAmount.readOnly = true + showPopup('send_rupee_popup'); } if (e.target.closest('.decline-request')) { - let parent = e.target.closest('.request'), - paymentRequestId = parent.dataset.paymentRequestId; + currentPaymentRequest = e.target.closest('.request') + let paymentRequestId = currentPaymentRequest.dataset.paymentRequestId; if (await confirmation(`Do want to decline this request?`, 'No', 'Decline')) { const all_reqs = removeDuplicates(floDapps.getNextGeneralData(token_app.master_configurations .TYPE_REQUEST_PAYMENT, "0").reverse()); @@ -2003,6 +1999,7 @@ .map(m => m.message)[0]; payment_request_status(original_req, 'DECLINED') + declinedPaymentRequestContainer.prepend(e.target.closest('.request')) e.target.closest('.request').remove() } } @@ -2387,6 +2384,8 @@ } } + + + - @@ -1630,6 +1631,7 @@ break; case 'person_popup': personPopupOpen = true + personName = showPersonName.textContent break; case 'send_rupee_popup': if (personPopupOpen) { @@ -2249,9 +2251,13 @@ ₹ ${amount}
` - if (receiver !== 'undefined') + if (receiver !== 'undefined'){ + transactionFloId = receiver composition += ` -
${transaction}
${allContacts[receiver] ? allContacts[receiver].name : receiver}` +
${transaction}
${allContacts[receiver] ? allContacts[receiver].name : receiver}` + if(floCrypto.validateAddr(receiver) && !allContacts[receiver]) + composition += `Save this FLO address` + } if (upiTxId !== 'undefined') composition += ` @@ -2261,7 +2267,7 @@ if (receiverUPI !== 'undefined') composition += ` -
Sent to UPI ID
+
Sent to cashier UPI ID
${receiverUPI} ` composition += `
${formatedTime(timeStamp)}
` @@ -2381,8 +2387,13 @@ }) } + function addPersonFromTransaction(){ + contactFlo.value = transactionFloId + showPopup('add_person_popup') + } + const peopleContainer = document.getElementById('people_container') - let allContacts + let allContacts, transactionFloId async function renderAllContacts() { allContacts = await compactIDB.readAllData('contacts') peopleContainer.innerHTML = `` @@ -11942,15 +11953,9 @@ "FCja6sLv58e3RMy41T5AmWyvXEWesqBCkX": { "upi_id": "8507742774@ybl" }, - "FHW2kgYEhDt85vjAiMMF7bQqdP74L7iwvQ": { - "upi_id": "8340617958@ybl" - }, "FTmJ6QeBjDFjdqS6Zs4V5amac2X19AjXcF": { "upi_id": "8902496422@ybl" }, - "FBun3694ZdxmD66os9oL5DxMrif3vyVjT3": { - "upi_id": "7004801428@ybl" - }, "FTpxFWdBDvYARGZuPWDhw9gke72J2pruvv": { "upi_id": "aakriti1705sinha@okicici" }, @@ -12099,7 +12104,10 @@ defaultUPI = localStorage.getItem(`defaultUPI${myFloID}`) renderUserUPI() renderAllContacts() - new QRCode(document.getElementById("my_qr_code"), myFloID); + + document.querySelectorAll('.my-qr-code').forEach(code => { + new QRCode(code, myFloID); + }) showPage('home_page', 'home_page_btn') show_payment_requests() From 90af3b04047ac8653e9c23e39401334506711da4 Mon Sep 17 00:00:00 2001 From: sairaj mote Date: Mon, 5 Oct 2020 03:03:12 +0530 Subject: [PATCH 38/42] 0.0.64 --- css/main.css | 131 ++++++++++++------ css/main.min.css | 2 +- css/main.scss | 139 ++++++++++++------- index.html | 352 ++++++++++++++++++++++++++++++----------------- 4 files changed, 400 insertions(+), 224 deletions(-) diff --git a/css/main.css b/css/main.css index 3cba05d..1309b75 100644 --- a/css/main.css +++ b/css/main.css @@ -452,7 +452,7 @@ sm-popup h5:not(.tag) { .my-qr-code { background: #fff; - border-radius: 1rem; + border-radius: 0.5rem; padding: 1rem; max-width: max-content; } @@ -652,6 +652,12 @@ details p { clip-path: circle(0 at 100% 0) !important; } +#deposit { + padding-top: 1.5rem; +} +#deposit .flex sm-button { + margin-bottom: 1.5rem; +} #deposit .user-panel { padding: 0 1rem; } @@ -855,27 +861,21 @@ sm-panel { } .request { - display: inline-flex; - flex-direction: column; + display: grid; + gap: 1rem; padding: 1.5em; - border-radius: 0.4em; - border: solid 1px rgba(var(--text-color), 0.2); + border-radius: 0.6rem; + background: rgba(var(--text-color), 0.06); } .request h4 { - font-weight: 500; + font-weight: 400; + font-size: 0.9rem; } .request h5 { - margin-bottom: 0.2rem; text-transform: capitalize; - font-weight: 500; + font-weight: 400; opacity: 0.8; -} -.request h3, -.request h4 { - margin-bottom: 1rem; -} -.request h4:last-of-type { - margin-bottom: 0; + margin-bottom: 0.2rem; } .request .action { align-self: flex-end; @@ -885,26 +885,46 @@ sm-panel { } .request button { width: auto; - align-self: flex-end; - 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: auto; - padding-top: 1.5rem; justify-self: flex-end; } -.request .flex h5 { - margin: 0; -} .request .flex button { margin: 0; } +.request.placeholder { + animation: pulse infinite 0.6s alternate; +} +.request.placeholder h4, .request.placeholder h5 { + padding: 0.5rem 0; + background: rgba(var(--text-color), 0.06); +} +.request.placeholder .btns { + display: grid; + gap: 0.5rem; + grid-auto-flow: column; + justify-content: flex-end; +} +.request.placeholder .btns h4 { + width: 6rem; +} +.request.placeholder h5 { + width: 50%; +} +.request.placeholder .time { + width: 3rem; +} +.request.placeholder:nth-of-type(2) { + animation-delay: 0.1s; +} +.request.placeholder:nth-of-type(3) { + animation-delay: 0.2s; +} +.request.placeholder:nth-of-type(4) { + animation-delay: 0.3s; +} .deposited { color: #007732; @@ -922,7 +942,6 @@ sm-panel { display: grid; gap: 1em; width: 100%; - grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); } .page { @@ -981,7 +1000,6 @@ sm-panel { } .time { - margin-bottom: 1.5rem !important; font-weight: 500; } @@ -1583,13 +1601,6 @@ sm-panel { video { height: 100vw; } - - #settings_page > h4:first-of-type { - text-align: center; - } - #settings_page .my-qr-code { - margin: 0 auto 3rem auto; - } } @media only screen and (min-width: 640px) { .hide-on-desktop { @@ -1679,6 +1690,28 @@ sm-panel { height: 9rem; } + .request { + grid-template-columns: minmax(0, auto) auto; + grid-template-areas: "time time" " . ." " . ."; + } + .request .time { + grid-area: time; + margin-bottom: 0 !important; + } + .request button { + width: max-content; + margin-left: auto; + } + .request .breakable { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + #deposit .user-panel { + padding-right: 0; + } + #settings_page .copy-row { display: inline-grid; } @@ -1731,18 +1764,32 @@ sm-panel { grid-template-columns: minmax(0, 1fr) 22rem; } + #deposit { + grid-template-columns: minmax(0, 1fr) 18rem; + } + #deposit .user-panel { + padding-right: 0; + } + .activity { width: 60ch; } -} -@media only screen and (min-width: 1920px) { - body { - font-size: 24px; + + .request { + grid-template-columns: minmax(0, auto) auto; + grid-template-areas: "time time" " . ." " . ."; } } -@media only screen and (min-width: 2048px) { - body { - font-size: 24px; +@media only screen and (min-width: 1280px) { + .request { + grid-template-areas: "time time time" ". . ."; + } + + #deposit { + grid-template-columns: minmax(0, 1fr) 20rem; + } + #deposit .request { + grid-template-areas: "time time time time" ". . . ."; } } @media only screen and (max-width: 320px) { diff --git a/css/main.min.css b/css/main.min.css index ebd5e2f..48ab734 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}.select,button{border-radius:.3rem}.option,.person,button{-webkit-tap-highlight-color:transparent}.action,button{position:relative}*{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}#navbar .navbar-item,button{font-weight:600;cursor:pointer;text-transform:capitalize}button{display:inline-flex;align-items:center;justify-content:center;padding:.6rem 1.2rem;color:var(--accent-color);transition:transform .3s;border:none;background:rgba(var(--text-color),.1)}button:focus{outline:solid thin}button:disabled{cursor:default;background:rgba(var(--text-color),.4)}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,.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}.capitalize{text-transform:capitalize}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;overflow:visible;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{display:inline-flex;justify-content:center;padding:0;background:0 0}.action:disabled .primary-btn{background:0 0}.complaint-placeholder h5,textarea{background:rgba(var(--text-color),.1)}.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}.empty-state svg,.icon{stroke:rgba(var(--text-color),.8)}textarea{width:100%;max-width:100%;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{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}#profile_page button,.user-panel{align-self:flex-start}.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 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)}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}#reader{overflow:hidden}.my-qr-code{background:#fff;border-radius:1rem;padding:1rem;max-width:max-content}#qr_code_popup::part(popup){height:90vh}#qr_code_popup::part(popup-body){padding:0}#qr_code_popup .popup-header{padding-bottom:1.5rem}#qr_code_popup sm-tab-header{margin:0 auto;transform:translateX(-1rem)}#qr_code_popup sm-panel{display:flex;flex-direction:column;align-items:center;text-align:center}#qr_code_popup video{width:100%!important;object-fit:cover}#qr_code_popup p{margin-top:1.5rem;opacity:.8;text-align:center;max-width:30ch}sm-input[type=number]{font-size:1.2rem}.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-width:6;overflow:visible;stroke-linecap:round;stroke-linejoin:round}#navbar{display:flex;flex-direction:row;align-items:center;justify-content:space-evenly;position:fixed;left:0;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;padding:.3rem;padding-top:.8rem;border-radius:.4em;opacity:.6;font-size:.8em;width:100%}#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}.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;flex-direction:column;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}.option,.tooltip{flex-direction:column}.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;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}.activity,.option{transition:transform .3s;cursor:pointer}.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;align-items:center;text-align:center;border-radius:.4rem;width:5rem;text-transform:capitalize}.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{text-transform:capitalize}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;text-transform:capitalize;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:auto;padding-top:1.5rem;justify-self:flex-end}.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}.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{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;position:fixed;left:0}#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}}#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"}.activity:active{transform:scale(.95)}.activity .icon{grid-area:icon;height:3rem;width:3rem;padding:.8rem;background-size:cover;border-radius:2rem}.activity .activity-type{grid-area:type;text-transform:capitalize;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;background:rgba(var(--text-color),.06);border-radius:1rem;width:max-content;margin-left:.4rem}.activity.placeholder{animation:pulse infinite .6s alternate}.activity.placeholder .activity-receiver,.activity.placeholder .activity-type{background:rgba(var(--text-color),.06);padding:.5rem 0}.activity.placeholder .activity-type{width:50%}.activity.placeholder:nth-of-type(2){animation-delay:.1s}.activity.placeholder:nth-of-type(3){animation-delay:.2s}.activity.placeholder:nth-of-type(4){animation-delay:.3s}.activity.placeholder:nth-of-type(5){animation-delay:.4s}.activity.placeholder:nth-of-type(6){animation-delay:.5s}.activity.placeholder:nth-of-type(7){animation-delay:.6s}.activity.placeholder:nth-of-type(8){animation-delay:.7s}.back-arrow{stroke-width:10;margin-right:.5rem;padding:.2rem}.select{max-width:50ch;position:relative;display:flex;width:100%;background:rgba(var(--text-color),.06)}.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)}#add_person_btn:active,.person:active{transform:scale(.95)}#add_person_btn,.person{transition:transform .3s;cursor:pointer}.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 header h4{text-transform:capitalize}#transaction_page h5{font-weight:400;opacity:.8;margin-bottom:.4rem;text-transform:capitalize}#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}#transaction_page #transaction_details .flex{margin-bottom:1.5rem;align-items:baseline}#transaction_page #transaction_details strong{font-weight:500}#transaction_page #transaction_details strong:not(:last-of-type)+sm-button{margin-bottom:1.5rem;margin-top:-.4rem}#transaction_page #transaction_details strong:not(:last-of-type){margin-bottom:1rem}#transaction_page #transaction_details sm-button{width:max-content;margin-top:.6rem}#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;flex-direction:column;width:5rem;text-align:center;font-size:.85rem}#add_person_btn .icon{height:3rem;width:3rem;border-radius:2rem;stroke-width:10;padding:1rem;background:rgba(var(--text-color),.06);align-self:center;margin-bottom:.6rem}.person{display:flex;flex-direction:column;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;border-radius:2rem;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;stroke-width:8}#person_popup>.flex:first-of-type .flex .icon:hover{background:rgba(var(--text-color),.06)}#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:.6rem}#settings_page .copy-row h4{margin:0}#settings_page sm-button{margin-top:.8rem}#settings_page .flex{max-width:60ch}#settings_page .my-qr-code{margin-bottom:1.5rem;height:14rem}#settings_page .my-qr-code img{height:100%}@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}video{height:100vw}#settings_page>h4:first-of-type{text-align:center}#settings_page .my-qr-code{margin:0 auto 3rem}}@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 +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{display:inline-flex;position:relative}.select,button{border-radius:.3rem}.option,.person,button{-webkit-tap-highlight-color:transparent}.balance h4,.breakable{word-break:break-all}*{box-sizing:border-box;padding:0;margin:0;font-family:Roboto,sans-serif}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;text-transform:capitalize;padding:.6rem 1.2rem;font-weight:600;cursor:pointer;color:var(--accent-color);transition:transform .3s;border:none;background:rgba(var(--text-color),.1)}.flex,.logo{display:flex}.btn,.flo-balance-card,.primary-btn{color:rgba(var(--foreground-color),1)}#transaction_page h5,.activity .activity-amount,.balance h4,.request .amount{font-family:Roboto,sans-serif}button:focus{outline:solid thin}button:disabled{cursor:default;background:rgba(var(--text-color),.4)}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}.grid{display:grid}.grid-2{grid-template-columns:auto auto;gap:1em}.align-center{align-items:center}#confirmation,#prompt,.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}.capitalize{text-transform:capitalize}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;overflow:visible;stroke-dashoffset:230;stroke-dasharray:230;padding:2px;justify-self:center}#reader,.copy-row .copy{overflow:hidden}.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}.complaint-placeholder h5,textarea{background:rgba(var(--text-color),.1)}.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 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%;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);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 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}#deposit .flex sm-button,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}.my-qr-code{background:#fff;border-radius:.5rem;padding:1rem;max-width:max-content}#qr_code_popup::part(popup){height:90vh}#qr_code_popup::part(popup-body){padding:0}#qr_code_popup .popup-header{padding-bottom:1.5rem}#qr_code_popup sm-tab-header{margin:0 auto;transform:translateX(-1rem)}#qr_code_popup sm-panel{display:flex;flex-direction:column;align-items:center;text-align:center}#qr_code_popup video{width:100%!important;object-fit:cover}#qr_code_popup p{margin-top:1.5rem;opacity:.8;text-align:center;max-width:30ch}sm-input[type=number]{font-size:1.2rem}.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}#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;overflow:visible;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;text-transform:capitalize;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,.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{padding-top:1.5rem}#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;flex-direction:column;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;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}.activity,.option{transition:transform .3s;cursor:pointer}.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,.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;text-transform:capitalize}.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{text-transform:capitalize}sm-tab::part(tab){padding:.4rem 1.2rem}sm-panel{width:100%}.request{display:grid;gap:1rem;padding:1.5em;border-radius:.6rem;background:rgba(var(--text-color),.06)}.request h4{font-weight:400;font-size:.9rem}.request h5{text-transform:capitalize;font-weight:400;opacity:.8;margin-bottom:.2rem}.request button{width:auto}.request .flex{align-items:center;justify-content:flex-end;justify-self:flex-end}.request .flex button{margin:0}.request.placeholder{animation:pulse infinite .6s alternate}.request.placeholder h4,.request.placeholder h5{padding:.5rem 0;background:rgba(var(--text-color),.06)}.request.placeholder .btns{display:grid;gap:.5rem;grid-auto-flow:column;justify-content:flex-end}.request.placeholder .btns h4{width:6rem}.request.placeholder h5{width:50%}.request.placeholder .time{width:3rem}.request.placeholder:nth-of-type(2){animation-delay:.1s}.request.placeholder:nth-of-type(3){animation-delay:.2s}.request.placeholder:nth-of-type(4){animation-delay:.3s}.activity.placeholder,.complaint-placeholder{animation:pulse infinite .6s alternate}.deposited{color:#007732}.decline-request{margin-right:.5rem!important}.withdrawn{color:#d43125}.container{display:grid;gap:1em;width:100%}.page{padding:1rem 1.5rem;padding-bottom:5rem}.page .container-header{display:grid;grid-template-columns:1fr auto;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;font-weight:500;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{display:grid;grid-template-columns:1fr auto;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;text-overflow:ellipsis}.time{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 h4,.complaint-placeholder h5{border-radius:.2rem}.complaint-placeholder h5{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}}#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"}.activity:active{transform:scale(.95)}.activity .icon{grid-area:icon;height:3rem;width:3rem;padding:.8rem;background-size:cover;border-radius:2rem}.activity .activity-type{grid-area:type;text-transform:capitalize;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;background:rgba(var(--text-color),.06);border-radius:1rem;width:max-content;margin-left:.4rem}.activity.placeholder .activity-receiver,.activity.placeholder .activity-type{background:rgba(var(--text-color),.06);padding:.5rem 0}.activity.placeholder .activity-type{width:50%}.activity.placeholder:nth-of-type(2){animation-delay:.1s}.activity.placeholder:nth-of-type(3){animation-delay:.2s}.activity.placeholder:nth-of-type(4){animation-delay:.3s}.activity.placeholder:nth-of-type(5){animation-delay:.4s}.activity.placeholder:nth-of-type(6){animation-delay:.5s}.activity.placeholder:nth-of-type(7){animation-delay:.6s}.activity.placeholder:nth-of-type(8){animation-delay:.7s}.back-arrow{stroke-width:10;margin-right:.5rem;padding:.2rem}.select{max-width:50ch;position:relative;display:flex;width:100%;background:rgba(var(--text-color),.06)}.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)}#add_person_btn:active,.person:active{transform:scale(.95)}#add_person_btn,.person{transition:transform .3s;cursor:pointer}.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 header h4{text-transform:capitalize}#transaction_page h5{font-weight:400;opacity:.8;margin-bottom:.4rem;text-transform:capitalize}#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}#transaction_page #transaction_details .flex{margin-bottom:1.5rem;align-items:baseline}#transaction_page #transaction_details strong{font-weight:500}#transaction_page #transaction_details strong:not(:last-of-type)+sm-button{margin-bottom:1.5rem;margin-top:-.4rem}#transaction_page #transaction_details strong:not(:last-of-type){margin-bottom:1rem}#transaction_page #transaction_details sm-button{width:max-content;margin-top:.6rem}#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;flex-direction:column;width:5rem;text-align:center;font-size:.85rem}#add_person_btn .icon{height:3rem;width:3rem;border-radius:2rem;stroke-width:10;padding:1rem;background:rgba(var(--text-color),.06);align-self:center;margin-bottom:.6rem}.person{display:flex;flex-direction:column;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;border-radius:2rem;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;stroke-width:8}#person_popup>.flex:first-of-type .flex .icon:hover{background:rgba(var(--text-color),.06)}#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:.6rem}#settings_page .copy-row h4{margin:0}#settings_page sm-button{margin-top:.8rem}#settings_page .flex{max-width:60ch}#settings_page .my-qr-code{margin-bottom:1.5rem;height:14rem}#settings_page .my-qr-code img{height:100%}@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}video{height:100vw}}@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}.request{grid-template-columns:minmax(0,auto) auto;grid-template-areas:"time time" " . ." " . ."}.request .time{grid-area:time;margin-bottom:0!important}.request button{width:max-content;margin-left:auto}.request .breakable{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#deposit .user-panel{padding-right:0}#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}#deposit{grid-template-columns:minmax(0,1fr) 18rem}#deposit .user-panel{padding-right:0}.activity{width:60ch}.request{grid-template-columns:minmax(0,auto) auto;grid-template-areas:"time time" " . ." " . ."}}@media only screen and (min-width:1280px){.request{grid-template-areas:"time time time" ". . ."}#deposit{grid-template-columns:minmax(0,1fr) 20rem}#deposit .request{grid-template-areas:"time time time time" ". . . ."}}@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 d3292a9..98abcaa 100644 --- a/css/main.scss +++ b/css/main.scss @@ -467,7 +467,7 @@ sm-popup{ } .my-qr-code{ background: #fff; - border-radius: 1rem; + border-radius: 0.5rem; padding: 1rem; max-width: max-content; } @@ -672,6 +672,12 @@ details{ } } #deposit{ + padding-top: 1.5rem; + .flex{ + sm-button{ + margin-bottom: 1.5rem; + } + } .user-panel{ padding: 0 1rem; } @@ -872,64 +878,69 @@ sm-panel{ } .request { - display: inline-flex; - flex-direction: column; + display: grid; + gap: 1rem; padding: 1.5em; - border-radius: 0.4em; - border: solid 1px rgba(var(--text-color), 0.2); - + border-radius: 0.6rem; + background: rgba(var(--text-color), 0.06); h4{ - font-weight: 500; + font-weight: 400; + font-size: 0.9rem; } h5 { - margin-bottom: 0.2rem; text-transform: capitalize; - font-weight: 500; + font-weight: 400; opacity: 0.8; + margin-bottom: 0.2rem; } - - h3, - h4 { - margin-bottom: 1rem; - } - - h4:last-of-type { - margin-bottom: 0; - } - .action { align-self: flex-end; } - .amount { font-family: 'Roboto', sans-serif; } - button { width: auto; - align-self: flex-end; - margin-top: 1.5rem; - margin-bottom: 0; } - - .copy-row { - margin-bottom: 1.5rem; - } - .flex { align-items: center; justify-content: flex-end; - margin-top: auto; - padding-top: 1.5rem; justify-self: flex-end; - h5 { - margin: 0; - } - button { margin: 0; } } + &.placeholder{ + h4, h5{ + padding: 0.5rem 0; + background: rgba(var(--text-color), 0.06); + } + .btns{ + display: grid; + gap: 0.5rem; + grid-auto-flow: column; + justify-content: flex-end; + h4{ + width: 6rem; + } + } + h5{ + width: 50%; + } + .time{ + width: 3rem; + } + animation: pulse infinite 0.6s alternate; + &:nth-of-type(2){ + animation-delay: 0.1s; + } + &:nth-of-type(3){ + animation-delay: 0.2s; + } + &:nth-of-type(4){ + animation-delay: 0.3s; + } + } } .deposited { @@ -948,7 +959,6 @@ sm-panel{ display: grid; gap: 1em; width: 100%; - grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); } .page { @@ -1013,7 +1023,6 @@ sm-panel{ } .time { - margin-bottom: 1.5rem !important; font-weight: 500; } @@ -1632,14 +1641,6 @@ sm-panel{ video{ height: 100vw; } - #settings_page{ - & > h4:first-of-type{ - text-align: center; - } - .my-qr-code{ - margin: 0 auto 3rem auto; - } - } } @media only screen and (min-width: 640px) { @@ -1725,6 +1726,28 @@ sm-panel{ height: 9rem; } } + .request{ + grid-template-columns: minmax(0, auto) auto; + grid-template-areas: 'time time' ' . .' ' . .'; + .time{ + grid-area: time; + margin-bottom: 0 !important; + } + button{ + width: max-content; + margin-left: auto; + } + .breakable{ + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + } + #deposit{ + .user-panel{ + padding-right: 0; + } + } #settings_page{ .copy-row{ display: inline-grid; @@ -1784,20 +1807,30 @@ sm-panel{ gap: 1.5rem; grid-template-columns: minmax(0, 1fr) 22rem; } + #deposit{ + grid-template-columns: minmax(0, 1fr) 18rem; + .user-panel{ + padding-right: 0; + } + } .activity{ width: 60ch; } -} - -@media only screen and (min-width: 1920px) { - body { - font-size: 24px; + .request{ + grid-template-columns: minmax(0, auto) auto; + grid-template-areas: 'time time' ' . .' ' . .'; } } -@media only screen and (min-width: 2048px) { - body { - font-size: 24px; +@media only screen and (min-width: 1280px) { + .request{ + grid-template-areas: 'time time time' '. . .'; + } + #deposit{ + grid-template-columns: minmax(0, 1fr) 20rem; + .request{ + grid-template-areas: 'time time time time' '. . . .'; + } } } diff --git a/index.html b/index.html index c92cf33..7cc5d51 100644 --- a/index.html +++ b/index.html @@ -671,17 +671,17 @@
-

Transaction Requests

+

Requests

Deposits Withdrawals Pay Through Cashier - - - Load pending - + +
+ Load pending +
@@ -738,8 +738,9 @@
- Load - pending +
+ Load pending +
@@ -796,9 +797,9 @@
- - Load pending - +
+ Load pending +
@@ -968,8 +969,6 @@

Settings

-

My QR Code

-

My FLO address

@@ -1064,25 +1063,33 @@ notificationSound = document.getElementById('notification_sound'); let defaultUPI const render = { - depositRequest(txid, floId, amount) { + depositRequest(txid, floId, amount, vectorClock) { let card = document.createElement('div'); card.classList.add('request') setAttributes(card, { 'data-user-flo-id': floId, 'data-txid': txid }) - card.innerHTML = `
FLO address
-

${floId}

-
UPI TXID
-

${txid}

-
Amount
-

₹${amount}

- `; + card.innerHTML = ` +
+
FLO address
+

${floId}

+
+
+
UPI TXID
+

${txid}

+
+
+
Amount
+

₹${amount}

+
+
${formatedTime(vectorClock, true)}
+ `; return card; }, - withdrawRequest(txid, upiId, floId, amount) { + withdrawRequest(txid, upiId, floId, amount, vectorClock) { let card = document.createElement('div'); card.classList.add('request') setAttributes(card, { @@ -1090,18 +1097,26 @@ 'data-user-flo-id': floId, 'data-upi': upiId }) - card.innerHTML = `
FLO address
-

${floId}

-
UPI ID
-

${upiId}

-
TAmount
-

₹${amount}

- `; + card.innerHTML = ` +
+
FLO address
+

${floId}

+
+
+
UPI ID
+

${upiId}

+
+
+
Amount
+

₹${amount}

+
+
${formatedTime(vectorClock, true)}
+ `; return card; }, - payRequest(sender, txid, floId, amount) { + payRequest(sender, txid, floId, amount, vectorClock) { let card = document.createElement('div'); card.classList.add('request') setAttributes(card, { @@ -1110,15 +1125,43 @@ 'data-txid': txid, 'data-amount': amount }) - card.innerHTML = `
Transaction ID
-

${txid}

-
Receiver's FLO address
-

${floId}

-
Amount
-

₹${amount}

- `; + card.innerHTML = ` +
+
Receiver's FLO address
+

${floId}

+
+
+
Transaction ID
+

${txid}

+
+
+
Amount
+

₹${amount}

+
+
${formatedTime(vectorClock, true)}
+ `; + return card; + }, + requestPlaceholder(){ + let card = document.createElement('div'); + card.classList.add('request', 'placeholder') + card.innerHTML = ` +
+
+

+
+
+
+

+
+
+
+

+
+
+

` return card; }, activityCard(obj) { @@ -1260,12 +1303,17 @@ 'data-amount': amount, 'data-payment-request-id': id }) - markup = `
${formatedTime(time)}
-
Request by
-

${allContacts[senderAddress] ? allContacts[senderAddress].name : senderAddress}

-
amount
-

₹ ${amount}

- `; + markup = ` +
${formatedTime(time)}
+
+
Request by
+

${allContacts[senderAddress] ? allContacts[senderAddress].name : senderAddress}

+
+
+
amount
+

₹ ${amount}

+
+ `; if (enableActions) markup += `
@@ -1279,6 +1327,25 @@ card.innerHTML = markup return card; }, + paymentRequestPlaceholder(){ + let card = document.createElement('div'); + card.classList.add('request', 'placeholder') + card.innerHTML = ` +
+
+
+

+
+
+
+

+
+
+

+

+
` + return card; + }, cashierMessage(message) { let card = document.createElement('div') card.classList.add('cashier-message') @@ -2034,7 +2101,7 @@ let currentRequest = null; document.getElementById('activity_page').addEventListener('click', (e) => { - if (e.target.closest('.activity')) { + if (e.target.closest('.activity:not(.placeholder)')) { currentRequest = e.target.closest('.activity') showTransactionDetails({ type: currentRequest.dataset.type, @@ -11961,6 +12028,9 @@ }, "FQ6udJuTbGDa2kWZAkmNpwgHaUEeYLPAtt": { "upi_id": "krishraj1012-2@okicici" + }, + "FPFeL5PXzW9bGosUjQYCxTHSMHidnygvvd": { + "upi_id": "7744023898@paytm" } }` text = removeWhiteSpaces(text); @@ -12060,8 +12130,8 @@ allHelplineOptions.forEach(option => { option.classList.add('hide-completely') }) - show_deposit_request() - show_withdraw_request() + showDepositRequests() + showWithdrawRequests() showPayThruCashierRequests() userType.forEach(user => user.textContent = 'Cashier') showPage('deposit', 'deposit_page_btn') @@ -12272,7 +12342,6 @@