From c997335914c1d711f4c801536b7cef2afef43491 Mon Sep 17 00:00:00 2001 From: sairaj mote Date: Fri, 27 Nov 2020 00:43:00 +0530 Subject: [PATCH] 0.5.15 feat (user): add sign in with generated credentials option in sign up process fix (user): change UX writting in various places for better understanding --- css/main.css | 114 ++++++++++++---------------- css/main.min.css | 2 +- css/main.scss | 115 +++++++++++++--------------- index.html | 191 ++++++++++++++++++++++++++++------------------- 4 files changed, 214 insertions(+), 208 deletions(-) diff --git a/css/main.css b/css/main.css index d3e4dd7..39f6bfd 100644 --- a/css/main.css +++ b/css/main.css @@ -10,7 +10,7 @@ } body { - --accent-color: #4527A0; + --accent-color: #2752ca; --text-color: 17, 17, 17; --text-color-light: 85, 85, 85; --foreground-color: 255, 255, 255; @@ -25,7 +25,7 @@ body { } body[data-theme=dark] { - --accent-color: #8860ff; + --accent-color: #4d74e0; --text-color: 238, 238, 238; --text-color-light: 170, 170, 170; --foreground-color: 26, 26, 26; @@ -212,12 +212,20 @@ span.ripple { pointer-events: none; } +.highlight { + box-shadow: 0 0 0 0.2rem var(--accent-color); + transition: box-shadow 0.3s; +} + sm-button { color: rgba(var(--text-color), 1); } sm-button[variant=outlined] { --accent-color: rgba(var(--text-color), 1); } +sm-button[variant=primary]::part(button) { + color: white; +} .loader { fill: none; @@ -251,24 +259,9 @@ sm-button[variant=outlined] { stroke-dashoffset: 0; } 100% { - stroke-dashoffset: -220; + stroke-dashoffset: -200; } } -#focus_illu { - pointer-events: none; - height: 3rem; - width: 3rem; - position: absolute; - left: 0; - top: 0; - z-index: 10; - transition: transform 0.3s, opacity 0.3s; - fill: var(--accent-color); -} -#focus_illu path { - opacity: 0.3; -} - #on_boarding { position: absolute; left: 0; @@ -282,15 +275,6 @@ sm-button[variant=outlined] { transition: transform 0.3s, opacity 0.3s; width: 100%; } -#on_boarding::after { - content: ""; - position: absolute; - left: 0; - top: 1rem; - width: 1.5rem; - height: 2rem; - background: inherit; -} #on_boarding #total_tuts { opacity: 0.8; font-size: 0.85rem; @@ -334,13 +318,20 @@ sm-button[variant=outlined] { outline: none; } .action.start-loading { + align-items: center; pointer-events: none; } .action.start-loading h4 { - transform: translateX(0.6rem); + transform: translateX(1ch); background: inherit !important; color: rgba(var(--text-color), 0.9); } +.action.start-loading .loader-container { + transform: none; +} +.action.start-loading .loader { + animation: load-btn-loader 2.6s infinite, rotate 1s infinite linear; +} .action h4 { padding: 0.5rem 1.2rem; font-size: 0.9rem; @@ -353,21 +344,22 @@ sm-button[variant=outlined] { z-index: 2; } .action .loader { - position: absolute; - z-index: 1; height: 1.2rem; width: 1.2rem; - stroke-dashoffset: 220; - stroke-dasharray: 220; + stroke-dashoffset: 200; + stroke-dasharray: 200; margin: 0 !important; - left: 0; - transition: opacity 0.3s; } -.action .loader:not(.animate-loader) { +.action:not(.start-loading) .loader-container { opacity: 0; + transform: translateX(1rem); } -.action .animate-loader { - animation: load-btn-loader 2.6s infinite, rotate 1s infinite linear; + +.loader-container { + position: absolute; + z-index: 1; + left: 0; + transition: transform 0.3s, opacity 0.3s; } .animate-loader { @@ -409,6 +401,7 @@ sm-button[variant=outlined] { .logo { display: flex; align-items: center; + cursor: pointer; } .logo h4 { font-weight: 500; @@ -719,6 +712,9 @@ details p { padding-top: 1.5rem; animation: slide-down 0.3s forwards; } +#sign_in_page .sign-in-box #sign_in_with { + margin-top: 1.5rem; +} @keyframes slide-down { from { @@ -732,7 +728,7 @@ details p { padding: 0.6rem 1.2rem !important; background: var(--accent-color); justify-content: center; - color: rgba(var(--foreground-color), 1); + color: white; } #main_header { @@ -774,7 +770,7 @@ details p { cursor: pointer; padding: 0.3rem; padding-top: 0.85rem; - border-radius: 0.4rem; + border-radius: 0.5rem; opacity: 0.6; color: rgba(var(--text-color), 1); font-size: 0.85rem; @@ -978,18 +974,19 @@ details p { flex-direction: column; align-items: center; text-align: center; - border-radius: 0.4rem; + border-radius: 0.5rem; width: 5rem; text-transform: capitalize; -webkit-tap-highlight-color: transparent; cursor: pointer; overflow: hidden; + user-select: none; } .option .icon { height: 3rem; width: 3rem; background: rgba(var(--text-color), 0.06); - border-radius: 2rem; + border-radius: 1rem; padding: 0.85rem; margin-bottom: 0.6rem; } @@ -1012,7 +1009,7 @@ details p { height: 0.6rem; width: 0.6rem; background-color: #E53935; - border-radius: 0.4rem; + border-radius: 0.5rem; transition: transform 0.3s; } @@ -1718,19 +1715,24 @@ sm-panel { gap: 2rem 0.2rem; } -#add_person_btn { +#add_person_btn, +.person { position: relative; overflow: hidden; cursor: pointer; display: flex; flex-direction: column; width: 5rem; + -webkit-tap-highlight-color: transparent; + border-radius: 0.5rem; + user-select: none; +} + +#add_person_btn { text-align: center; - transition: transform 0.3s; font-size: 0.85rem; opacity: 0.8; font-weight: 500; - -webkit-tap-highlight-color: transparent; } #add_person_btn .icon { height: 3rem; @@ -1744,15 +1746,7 @@ sm-panel { } .person { - position: relative; - overflow: hidden; - display: flex; - flex-direction: column; align-items: center; - cursor: pointer; - transition: transform 0.3s; - width: 5rem; - -webkit-tap-highlight-color: transparent; } .person-initials, #person_initials { @@ -1804,7 +1798,7 @@ sm-panel { } #person_popup #show_person_name { padding: 0.5rem 1rem; - border-radius: 0.4rem; + border-radius: 0.5rem; max-width: 30ch; } #person_popup #show_person_name:focus { @@ -1913,17 +1907,6 @@ sm-panel { #on_boarding { width: 26rem; } - #on_boarding.indicating::before { - content: ""; - position: absolute; - transform: rotate(45deg); - top: 1rem; - left: -0.5rem; - width: 1rem; - height: 1rem; - background: inherit; - box-shadow: -0.1rem 0 1rem rgba(var(--text-color), 0.16); - } #navbar { justify-content: flex-start; @@ -1942,6 +1925,7 @@ sm-panel { display: flex; width: auto; padding: 0.85rem 1.2rem; + user-select: none; } #navbar .navbar-item .icon { height: 1.2rem; diff --git a/css/main.min.css b/css/main.min.css index fa76d6f..02022ba 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,#on_boarding sm-button[variant=no-outline]::part(button),.balance .tooltip,.user-panel .action h4,body,body[data-theme=dark] .flo-balance-card,sm-button{color:rgba(var(--text-color),1)}#navbar .navbar-item,.option,button{-webkit-tap-highlight-color:transparent;text-transform:capitalize}#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}#focus_illu,.action.start-loading,.activity.placeholder,.hide,.request.placeholder,span.ripple{pointer-events:none}*{box-sizing:border-box;padding:0;margin:0}button,h1,h2,h3,h4,h5{font-family:Poppins,sans-serif}:root{font-size:16px}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;--error-color:#E53935;--hue:255;--saturation:61%;--lightness:39%;background-size:cover}body[data-theme=dark]{--accent-color:#8860ff;--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] #focus_illu:not(.hide){opacity:.7;fill:rgba(var(--text-color),.5)}a{font-weight:500;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:.85rem}h1,h2,h3,h4,h5{font-weight:600}p{font-size:.95rem;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);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),.4)}button:disabled~.loader{opacity:0}::-moz-focus-inner{border:none}.bottom-padding{padding-bottom:1.5rem}.top-padding{padding-top:1rem}.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:1rem}#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}.hide-completely{display:none!important}.breakable{word-break:break-all}.separator{padding:.1rem}.no-transformations{transform:none!important}span.ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(var(--text-color),.2)}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;transition:opacity .3s}#reader,.action{overflow:hidden}#focus_illu,#on_boarding{z-index:10;transition:transform .3s,opacity .3s;position:absolute;left:0;top:0}@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}}#focus_illu{height:3rem;width:3rem;fill:var(--accent-color)}#focus_illu path{opacity:.3}#on_boarding{border-radius:.85rem;box-shadow:.1rem .2rem 1rem rgba(var(--text-color),.16);padding:1.5rem;color:#fff;background:var(--accent-color);width:100%}#on_boarding::after{content:"";position:absolute;left:0;top:1rem;width:1.5rem;height:2rem;background:inherit}#on_boarding #total_tuts{opacity:.8;font-size:.85rem}#on_boarding h4{margin-bottom:.5rem;font-size:1.2rem;transition:transform .3s}#on_boarding p{color:inherit;margin-bottom:1.5rem;transition:transform .3s}#on_boarding .icon{stroke-width:8;stroke:#fff;padding:.2rem;cursor:pointer}#on_boarding sm-button[variant=no-outline]::part(button){background:rgba(var(--foreground-color),1)}#on_boarding sm-button:not([variant=no-outline])::part(button){color:#fff}.action{position:relative;display:inline-flex;padding:0;background:0 0}.action:disabled .primary-btn{background:0 0}.action:focus{outline:0}.action.start-loading h4{transform:translateX(.6rem);background:inherit!important;color:rgba(var(--text-color),.9)}.action h4{padding:.5rem 1.2rem;font-size:.9rem;clip-path:circle(100%);border-radius:.2rem;transition:.3s transform}.action .btn{z-index:2}.action .loader{position:absolute;z-index:1;height:1.2rem;width:1.2rem;stroke-dashoffset:220;stroke-dasharray:220;margin:0!important;left:0;transition:opacity .3s}#main_loader,#navbar,#sign_in_page{position:fixed;left:0}.action .loader:not(.animate-loader){opacity:0}.action .animate-loader{animation:load-btn-loader 2.6s infinite,rotate 1s infinite linear}.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(-1rem)}to{opacity:1;transform:none}}@keyframes fadeleft{from{opacity:0;transform:translateX(1rem)}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);color:inherit;border:none;border-radius:.2rem;resize:none;font-size:1rem;line-height:1.6;padding:.85rem}:empty+.empty-state{display:grid}.empty-state{display:none;place-items:center;width:100%}.empty-state svg{height:12rem;width:12rem}.empty-state svg ellipse,.empty-state svg path,.empty-state svg polyline{stroke-linecap:round;stroke-linejoin:round;stroke:rgba(var(--text-color),.7);fill:none}.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:.4rem 1rem}.back-arrow{stroke:rgba(var(--text-color),1);fill:none;height:2rem;cursor:pointer}.card{border-radius:.6rem;padding:1.5rem;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:.6rem;margin-left:auto}#prompt .flex{margin-top:1rem}.refresh{margin-top:.6rem;margin-bottom:1rem}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}.my-qr-code{background:#fff;border-radius:.5rem;padding:1rem;max-width:max-content}#qr_code_popup::part(popup){height:80vh;max-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{font-size:1rem;cursor:pointer}details h5{line-height:.6;margin-bottom:0;margin-top:1.2rem!important}details p{line-height:1.4}#sign_in_page{gap:2rem;width:100vw;height:100vh;overflow-y:auto;top:0;align-items:center;justify-content:space-between;background:url(sign-in-bg.svg) center,rgba(var(--foreground-color),1);background-size:cover;z-index:5;padding:0 6vw}#sign_in_page .info{align-items:center}#sign_in_page .info h1{line-height:1.1;font-weight:800;font-size:clamp(1.5rem,8vw,4rem);margin-top:1rem}#sign_in_page .sign-in-box{width:100%;margin:0 -2rem;z-index:1;justify-self:center;padding:1.5rem;border-radius:.5rem;background:rgba(var(--foreground-color),1)}#person_initials,.person-initials,.primary-btn{justify-content:center;color:rgba(var(--foreground-color),1)}#sign_in_page .sign-in-box sm-input{text-align:left}#add_person_btn,#main_loader,#navbar .navbar-item,#transaction_result h4,#transaction_result h5,#transaction_result p,.option,.person-name{text-align:center}#sign_in_page .sign-in-box sm-panel{width:100%}#sign_in_page .sign-in-box sm-tab-header{margin:0;background:0 0;align-self:flex-start}#sign_in_page .sign-in-box sm-tab-header::part(tab-header){padding-bottom:.4rem;gap:1.5rem}#sign_in_page .sign-in-box sm-tab::part(tab){padding:.4rem 0}#sign_in_page .sign-in-box sm-tab-panels{margin-top:3rem}#sign_in_page .sign-in-box form{width:100%}#sign_in_page .sign-in-box h2{margin-bottom:.5rem}#sign_in_page .sign-in-box h3{font-weight:500}#sign_in_page .sign-in-box h4{font-weight:500;margin-bottom:1.5rem}#sign_in_page .sign-in-box h5{opacity:.8;font-weight:500}#sign_in_page .sign-in-box .copy-row h4{max-width:34ch}#sign_in_page .sign-in-box .copy-row:not(:last-of-type){margin-bottom:1rem}#sign_in_page .sign-in-box button{width:auto;margin-top:1rem;padding:.6rem 1.6rem}#sign_in_page .sign-in-box p{max-width:35ch;margin-top:.5rem;margin-bottom:1.5rem}#sign_in_page .sign-in-box #credentials_section{border-top:1px rgba(var(--text-color),.2) solid;margin-top:1rem;padding-top:1.5rem;animation:slide-down .3s forwards}@keyframes slide-down{from{transform:translateY(-1rem)}to{transform:none}}.primary-btn{padding:.6rem 1.2rem!important;background:var(--accent-color)}#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;overflow:hidden;cursor:pointer;padding:.3rem;padding-top:.85rem;border-radius:.4rem;opacity:.6;font-size:.85rem;width:100%;font-weight:600}#navbar .navbar-item h5{margin-top:.4rem}#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 .action{width:auto;justify-content:flex-end;border-radius:2rem}.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 .flex sm-button{margin-bottom:1.5rem}#deposit .user-panel{padding:0 1rem}#deposit .display-balance{grid-template-areas:"rupee rupee" "flo flo"}#deposit sm-tab-header{display:flex}.display-balance{grid-template-columns:1fr 1fr;grid-template-areas:"rupee ." "flo flo";gap:.85rem;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 span{font-size:.7em}.balance h4{font-size:1.8rem;font-weight:500;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(.85rem at calc(100% - 1.5rem) 1.4rem);scrollbar-width:thin}.activity,.option,.select{position:relative}#add_person_btn,.activity,.person{transition:transform .3s}.tooltip .tt-icon{font-size:.9rem;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{display:flex;flex-direction:column;align-items:center;border-radius:.4rem;width:5rem;cursor:pointer;overflow:hidden}.option .icon{height:3rem;width:3rem;background:rgba(var(--text-color),.06);border-radius:2rem;padding:.85rem;margin-bottom:.6rem}.option h4{font-size:.85rem;opacity:.8}.request-icon{transform:rotate(180deg)}.notification-dot::after{content:"";position:absolute;z-index:1;top:0;right:0;height:.6rem;width:.6rem;background-color:#E53935;border-radius:.4rem;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:grid;gap:1rem;padding:1.5rem;border-radius:.6rem;background:rgba(var(--text-color),.06)}.request h4{font-weight:400;font-size:.9rem}.request h5{font-weight:400;opacity:.8;margin-bottom:.2rem}.request .action{align-self:flex-end}.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}.request.placeholder:nth-of-type(5){animation-delay:.4s}.request.placeholder:nth-of-type(6){animation-delay:.5s}.deposited{color:#00C853}.decline-request{margin-right:.5rem!important}.withdrawn{color:#d43125}.container{display:grid;gap:1rem;width:100%}@keyframes fade-in{from{opacity:0}to{opacity:1}}.page{padding:1rem 1.5rem;padding-bottom:5rem;animation:fade-in .4s}.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:1rem;border:none;width:100%;background:var(--dark-shade);font-size:1rem;font-weight:500;color:rgba(var(--text-color),1);border-radius:.2rem}.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;overflow:hidden;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}.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:.85rem}.activity,.activity .icon{background:rgba(var(--text-color),.06)}.complaint-placeholder .demo-btn{padding:.85rem 3rem}@keyframes pulse{from{opacity:.4}to{opacity:1}}#main_loader{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:.16rem}#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;color:rgba(var(--text-color),.7)}#transaction_result>h4{font-size:1.2rem;margin-top:2rem;margin-bottom:.5rem}#transaction_result sm-button{align-self:center;width:auto}#failure_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_art{margin:1rem 0;height:14rem;width:100%;align-self:center}#success_art circle{transform-origin:center;transform:scale(.4);animation:explode 1.6s forwards cubic-bezier(.175,.885,.32,1.275)}#success_art polygon{transform-origin:center;transform:rotate(-20deg);animation:rotate-in-place 1s forwards cubic-bezier(.175,.885,.32,1.275)}#success_art polygon:nth-of-type(1){animation-delay:.1s}#success_art polygon:nth-of-type(2){animation-delay:.2s}#success_art polygon:nth-of-type(3){animation-delay:.3s}#success_art circle:nth-of-type(1){animation-delay:.1s}#success_art circle:nth-of-type(2){animation-delay:.2s}#success_art circle:nth-of-type(3){animation-delay:.3s}#success_art circle:nth-of-type(4){animation-delay:.4s}#success_art circle:nth-of-type(5){animation-delay:.5s}#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{overflow:hidden;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";align-items:center;cursor:pointer}.activity .icon{grid-area:icon;height:3rem;width:3rem;padding:.85rem;background-size:cover;border-radius:2rem}.activity .activity-type{grid-area:type;font-weight:400;font-size:.85rem}.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;white-space:nowrap}.activity .activity-time{text-align:right;grid-area:time;color:rgba(var(--text-color),.7);font-weight:500;white-space:nowrap}.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}.cashier-message{display:flex;flex-direction:column;background:rgba(var(--text-color),.06);border-radius:.6rem;padding:1rem 1.2rem}.cashier-message .time{margin-bottom:.5rem}.back-arrow{stroke-width:10;margin-right:.5rem;padding:.2rem}.select{max-width:50ch;display:flex;width:100%;border-radius:.3rem;background:rgba(var(--text-color),.06);align-items:center}.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:.85rem 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}#add_person_btn,.person{position:relative;overflow:hidden;-webkit-tap-highlight-color:transparent;cursor:pointer}.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;padding:.5rem;max-width:50ch;border-radius:.5rem}#transaction_page #transaction_details .icon{height:4rem;width:4rem;padding:1.2rem;border-radius:4rem;margin-top:1rem;margin-bottom:2rem;background:rgba(var(--text-color),.06)}#transaction_page #transaction_details .success{background:#00C853;stroke-width:8;stroke:var(--background-color)}#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}@keyframes explode{0%{transform:scale(.4)}80%{transform:scale(1)}100%{transform:scale(.9)}}@keyframes rotate-in-place{0%{transform:rotate(-20deg)}100%{transform:none}}#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;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;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-name{font-size:.85rem}#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:.85rem;cursor:pointer;stroke-width:8}#person_popup>.flex:first-of-type .flex .icon:hover{background:rgba(var(--text-color),.06)}#person_popup h3{text-transform:capitalize}#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 p{color:rgba(var(--text-color),.7)}#settings_page sm-button{margin-top:.85rem}#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}#sign_in_page{grid-auto-flow:column}#sign_in_page .sign-in-box{align-self:auto;width:26rem;padding:2rem;min-height:80vh;min-width:26rem;box-shadow:0 0 .3rem #00016,0 6rem 2rem -2rem #00016}sm-popup{background:rgba(var(--foreground-color),1)}#confirmation,sm-popup::part(popup){width:24rem}#on_boarding{width:26rem}#on_boarding.indicating::before{content:"";position:absolute;transform:rotate(45deg);top:1rem;left:-.5rem;width:1rem;height:1rem;background:inherit;box-shadow:-.1rem 0 1rem rgba(var(--text-color),.16)}#navbar,#navbar .active{background:rgba(var(--text-color),.06)}#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:.85rem 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}#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 .85rem}.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:.85rem}#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,.cashier-message{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" ". . . ."}#deposit #unconfirmed_requests_container .request{display:flex;flex-direction:column}}@media only screen and (min-width:1900px){:root{font-size:24px}}@media only screen and (min-width:2400px){:root{font-size:36px}}@media only screen and (max-width:320px){:root{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)}.capitalize,button{text-transform:capitalize}.icon,.loader{overflow:visible}*{box-sizing:border-box;padding:0;margin:0}button,h1,h2,h3,h4,h5{font-family:Poppins,sans-serif}:root{font-size:16px}body{--accent-color:#2752ca;--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;--error-color:#E53935;--hue:255;--saturation:61%;--lightness:39%;background-size:cover}body[data-theme=dark]{--accent-color:#4d74e0;--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] #focus_illu:not(.hide){opacity:.7;fill:rgba(var(--text-color),.5)}a{font-weight:500;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:.85rem}h1,h2,h3,h4,h5{font-weight:600}p{font-size:.95rem;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);transition:transform .3s;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),.4)}button:disabled~.loader{opacity:0}::-moz-focus-inner{border:none}.bottom-padding{padding-bottom:1.5rem}.top-padding{padding-top:1rem}.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:1rem}#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:.1rem}.no-transformations{transform:none!important}span.ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(var(--text-color),.2);pointer-events:none}.highlight{box-shadow:0 0 0 .2rem var(--accent-color);transition:box-shadow .3s}sm-button{color:rgba(var(--text-color),1)}sm-button[variant=outlined]{--accent-color:rgba(var(--text-color), 1)}sm-button[variant=primary]::part(button){color:#fff}.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;transition:opacity .3s}#reader,.action{overflow:hidden}#on_boarding h4,#on_boarding p,.activity{transition:transform .3s}@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:-200}}#on_boarding{position:absolute;left:0;top:0;border-radius:.85rem;box-shadow:.1rem .2rem 1rem rgba(var(--text-color),.16);padding:1.5rem;color:#fff;background:var(--accent-color);z-index:10;transition:transform .3s,opacity .3s;width:100%}#on_boarding #total_tuts{opacity:.8;font-size:.85rem}#on_boarding h4{margin-bottom:.5rem;font-size:1.2rem}#on_boarding p{color:inherit;margin-bottom:1.5rem}#on_boarding .icon{stroke-width:8;stroke:#fff;padding:.2rem;cursor:pointer}#on_boarding sm-button[variant=no-outline]::part(button){background:rgba(var(--foreground-color),1);color:rgba(var(--text-color),1)}#on_boarding sm-button:not([variant=no-outline])::part(button){color:#fff}.action{position:relative;display:inline-flex;padding:0;background:0 0}.action:disabled .primary-btn{background:0 0}.action:focus{outline:0}.action.start-loading{align-items:center;pointer-events:none}.action.start-loading h4{transform:translateX(1ch);background:inherit!important;color:rgba(var(--text-color),.9)}.action.start-loading .loader-container{transform:none}.action.start-loading .loader{animation:load-btn-loader 2.6s infinite,rotate 1s infinite linear}.action h4{padding:.5rem 1.2rem;font-size:.9rem;clip-path:circle(100%);border-radius:.2rem;transition:.3s transform}.action .btn{z-index:2}.action .loader{height:1.2rem;width:1.2rem;stroke-dashoffset:200;stroke-dasharray:200;margin:0!important}.action:not(.start-loading) .loader-container{opacity:0;transform:translateX(1rem)}.loader-container{position:absolute;z-index:1;left:0;transition:transform .3s,opacity .3s}.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(-1rem)}to{opacity:1;transform:none}}@keyframes fadeleft{from{opacity:0;transform:translateX(1rem)}to{opacity:1;transform:none}}.logo{display:flex;align-items:center;cursor:pointer}.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);color:inherit;border:none;border-radius:.2rem;resize:none;font-size:1rem;line-height:1.6;padding:.85rem}#person_initials,.btn,.flo-balance-card,.person-initials{color:rgba(var(--foreground-color),1)}:empty+.empty-state{display:grid}.empty-state{display:none;place-items:center;width:100%}.empty-state svg{height:12rem;width:12rem}.empty-state svg ellipse,.empty-state svg path,.empty-state svg polyline{stroke-linecap:round;stroke-linejoin:round;stroke:rgba(var(--text-color),.7);fill:none}.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:.4rem 1rem}.back-arrow{stroke:rgba(var(--text-color),1);fill:none;height:2rem;cursor:pointer}.card{border-radius:.6rem;padding:1.5rem;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:.6rem;margin-left:auto}#prompt .flex{margin-top:1rem}.refresh{margin-top:.6rem;margin-bottom:1rem}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}.my-qr-code{background:#fff;border-radius:.5rem;padding:1rem;max-width:max-content}#qr_code_popup::part(popup){height:80vh;max-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{font-size:1rem;cursor:pointer}details h5{line-height:.6;margin-bottom:0;margin-top:1.2rem!important}details p{line-height:1.4}#sign_in_page{position:fixed;gap:2rem;width:100vw;height:100vh;overflow-y:auto;left:0;top:0;align-items:center;justify-content:space-between;background:url(sign-in-bg.svg) center,rgba(var(--foreground-color),1);background-size:cover;z-index:5;padding:0 6vw}#sign_in_page .info{align-items:center}#sign_in_page .info h1{line-height:1.1;font-weight:800;font-size:clamp(1.5rem,8vw,4rem);margin-top:1rem}#sign_in_page .sign-in-box{width:100%;margin:0 -2rem;z-index:1;justify-self:center;padding:1.5rem;border-radius:.5rem;background:rgba(var(--foreground-color),1)}#sign_in_page .sign-in-box sm-input{text-align:left}#sign_in_page .sign-in-box sm-panel{width:100%}#sign_in_page .sign-in-box sm-tab-header{margin:0;background:0 0;align-self:flex-start}#sign_in_page .sign-in-box sm-tab-header::part(tab-header){padding-bottom:.4rem;gap:1.5rem}#sign_in_page .sign-in-box sm-tab::part(tab){padding:.4rem 0}#sign_in_page .sign-in-box sm-tab-panels{margin-top:3rem}#sign_in_page .sign-in-box form{width:100%}#sign_in_page .sign-in-box h2{margin-bottom:.5rem}#sign_in_page .sign-in-box h3{font-weight:500}#sign_in_page .sign-in-box h4{font-weight:500;margin-bottom:1.5rem}#sign_in_page .sign-in-box h5{opacity:.8;font-weight:500}#sign_in_page .sign-in-box .copy-row h4{max-width:34ch}#sign_in_page .sign-in-box .copy-row:not(:last-of-type){margin-bottom:1rem}#sign_in_page .sign-in-box button{width:auto;margin-top:1rem;padding:.6rem 1.6rem}#sign_in_page .sign-in-box p{max-width:35ch;margin-top:.5rem;margin-bottom:1.5rem}#sign_in_page .sign-in-box #credentials_section{border-top:1px rgba(var(--text-color),.2) solid;margin-top:1rem;padding-top:1.5rem;animation:slide-down .3s forwards}.complaint-placeholder,.request.placeholder{animation:pulse infinite .6s alternate}#sign_in_page .sign-in-box #sign_in_with{margin-top:1.5rem}@keyframes slide-down{from{transform:translateY(-1rem)}to{transform:none}}.primary-btn{padding:.6rem 1.2rem!important;background:var(--accent-color);justify-content:center;color:#fff}#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;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,.option{border-radius:.5rem;text-align:center;text-transform:capitalize;-webkit-tap-highlight-color:transparent}#navbar .navbar-item{position:relative;overflow:hidden;cursor:pointer;padding:.3rem;padding-top:.85rem;opacity:.6;font-size:.85rem;width:100%;font-weight:600}#navbar .navbar-item h5{margin-top:.4rem}#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 .action{width:auto;justify-content:flex-end;border-radius:2rem}.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 .flex sm-button{margin-bottom:1.5rem}#deposit .user-panel{padding:0 1rem}#deposit .display-balance{grid-template-areas:"rupee rupee" "flo flo"}#deposit sm-tab-header{display:flex}.display-balance{grid-template-columns:1fr 1fr;grid-template-areas:"rupee ." "flo flo";gap:.85rem;margin-top:1rem}#people_container,.options-tab{grid-template-columns:repeat(4,1fr)}.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 span{font-size:.7em}.balance h4{font-size:1.8rem;font-weight:500;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;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(.85rem at calc(100% - 1.5rem) 1.4rem);scrollbar-width:thin}.tooltip .tt-icon{font-size:.9rem;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;padding:1.5rem;gap:2rem .2rem}.option{position:relative;display:flex;align-items:center;width:5rem;cursor:pointer;overflow:hidden;user-select:none}.option .icon{height:3rem;width:3rem;background:rgba(var(--text-color),.06);border-radius:1rem;padding:.85rem;margin-bottom:.6rem}.option h4{font-size:.85rem;opacity:.8}.request-icon{transform:rotate(180deg)}.notification-dot::after{content:"";position:absolute;z-index:1;top:0;right:0;height:.6rem;width:.6rem;background-color:#E53935;border-radius:.5rem;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.5rem;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 .action{align-self:flex-end}.request button{width:auto}.request .flex{align-items:center;justify-content:flex-end;justify-self:flex-end}.request .flex button{margin:0}.request.placeholder{pointer-events:none}.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}.request.placeholder:nth-of-type(5){animation-delay:.4s}.request.placeholder:nth-of-type(6){animation-delay:.5s}.deposited{color:#00C853}.decline-request{margin-right:.5rem!important}.withdrawn{color:#d43125}.container{display:grid;gap:1rem;width:100%}@keyframes fade-in{from{opacity:0}to{opacity:1}}.page{padding:1rem 1.5rem;padding-bottom:5rem;animation:fade-in .4s}.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:1rem;border:none;width:100%;background:var(--dark-shade);font-size:1rem;font-weight:500;color:rgba(var(--text-color),1);border-radius:.2rem}.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;overflow:hidden;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}.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{background:rgba(var(--text-color),.1);padding:.5rem .6rem}.complaint-placeholder h4{background:rgba(var(--text-color),.2);padding:.85rem}.activity,.activity .icon{background:rgba(var(--text-color),.06)}.complaint-placeholder .demo-btn{padding:.85rem 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:.16rem}#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;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{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_art{margin:1rem 0;height:14rem;width:100%;align-self:center}#success_art circle{transform-origin:center;transform:scale(.4);animation:explode 1.6s forwards cubic-bezier(.175,.885,.32,1.275)}#success_art polygon{transform-origin:center;transform:rotate(-20deg);animation:rotate-in-place 1s forwards cubic-bezier(.175,.885,.32,1.275)}#success_art polygon:nth-of-type(1){animation-delay:.1s}#success_art polygon:nth-of-type(2){animation-delay:.2s}#success_art polygon:nth-of-type(3){animation-delay:.3s}#success_art circle:nth-of-type(1){animation-delay:.1s}#success_art circle:nth-of-type(2){animation-delay:.2s}#success_art circle:nth-of-type(3){animation-delay:.3s}#success_art circle:nth-of-type(4){animation-delay:.4s}#success_art circle:nth-of-type(5){animation-delay:.5s}#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{position:relative;overflow:hidden;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";align-items:center;cursor:pointer}.activity .icon{grid-area:icon;height:3rem;width:3rem;padding:.85rem;background-size:cover;border-radius:2rem}#add_person_btn .icon,#transaction_page #transaction_details .icon,.activity .pending,.activity.placeholder .activity-receiver,.activity.placeholder .activity-type,.cashier-message,.select{background:rgba(var(--text-color),.06)}.activity .activity-type{grid-area:type;text-transform:capitalize;font-weight:400;font-size:.85rem}.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;white-space:nowrap}.activity .activity-time{text-align:right;grid-area:time;color:rgba(var(--text-color),.7);font-weight:500;white-space:nowrap}.activity .pending{display:inline-flex;padding:.3rem .6rem;border-radius:1rem;width:max-content;margin-left:.4rem}.activity.placeholder{pointer-events:none;animation:pulse infinite .6s alternate}.activity.placeholder .activity-receiver,.activity.placeholder .activity-type{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}.cashier-message{display:flex;flex-direction:column;border-radius:.6rem;padding:1rem 1.2rem}.cashier-message .time{margin-bottom:.5rem}.back-arrow{stroke-width:10;margin-right:.5rem;padding:.2rem}.select{max-width:50ch;position:relative;display:flex;width:100%;border-radius:.3rem;align-items:center}.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:.85rem 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 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;padding:.5rem;max-width:50ch;border-radius:.5rem}#transaction_page #transaction_details .icon{height:4rem;width:4rem;padding:1.2rem;border-radius:4rem;margin-top:1rem;margin-bottom:2rem}#transaction_page #transaction_details .success{background:#00C853;stroke-width:8;stroke:var(--background-color)}#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}@keyframes explode{0%{transform:scale(.4)}80%{transform:scale(1)}100%{transform:scale(.9)}}@keyframes rotate-in-place{0%{transform:rotate(-20deg)}100%{transform:none}}#people_container{display:grid;padding:1.5rem;gap:2rem .2rem}#add_person_btn,.person{position:relative;overflow:hidden;cursor:pointer;display:flex;flex-direction:column;width:5rem;-webkit-tap-highlight-color:transparent;border-radius:.5rem;user-select:none}#add_person_btn{text-align:center;font-size:.85rem}#add_person_btn .icon{height:3rem;width:3rem;border-radius:2rem;stroke-width:10;padding:1rem;align-self:center;margin-bottom:.6rem}.person{align-items: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:.6rem!important;text-transform:uppercase}.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:.85rem;cursor:pointer;stroke-width:8}#person_popup>.flex:first-of-type .flex .icon:hover{background:rgba(var(--text-color),.06)}#person_popup h3{text-transform:capitalize}#person_popup .copy-row{margin-bottom:1.5rem}#person_popup #show_person_name{padding:.5rem 1rem;border-radius:.5rem;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 p{color:rgba(var(--text-color),.7)}#settings_page sm-button{margin-top:.85rem}#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}#sign_in_page{grid-auto-flow:column}#sign_in_page .sign-in-box{align-self:auto;width:26rem;padding:2rem;min-height:80vh;min-width:26rem;box-shadow:0 0 .3rem #00016,0 6rem 2rem -2rem #00016}sm-popup{background:rgba(var(--foreground-color),1)}#navbar,#navbar .active{background:rgba(var(--text-color),.06)}#confirmation,sm-popup::part(popup){width:24rem}#on_boarding{width:26rem}#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:.85rem 1.2rem;user-select:none}#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}#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 .85rem}.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:.85rem}#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,.cashier-message{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" ". . . ."}#deposit #unconfirmed_requests_container .request{display:flex;flex-direction:column}}@media only screen and (min-width:1900px){:root{font-size:24px}}@media only screen and (min-width:2400px){:root{font-size:36px}}@media only screen and (max-width:320px){:root{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 3e37323..deefab7 100644 --- a/css/main.scss +++ b/css/main.scss @@ -8,7 +8,7 @@ font-size: 16px; } body { - --accent-color: #4527A0; + --accent-color: #2752ca; --text-color: 17, 17, 17; --text-color-light: 85, 85, 85; --foreground-color: 255, 255, 255; @@ -22,7 +22,7 @@ body { background-size: cover; } body[data-theme="dark"]{ - --accent-color: #8860ff; + --accent-color: #4d74e0; --text-color: 238, 238, 238; --text-color-light: 170, 170, 170; --foreground-color: 26, 26, 26; @@ -207,11 +207,19 @@ span.ripple{ pointer-events: none; } +.highlight{ + box-shadow: 0 0 0 0.2rem var(--accent-color); + transition: box-shadow 0.3s; +} + sm-button{ color: rgba(var(--text-color), 1); &[variant="outlined"]{ --accent-color: rgba(var(--text-color), 1); } + &[variant="primary"]::part(button){ + color: white; + } } .loader { @@ -249,21 +257,7 @@ sm-button{ } 100% { - stroke-dashoffset: -220; - } -} -#focus_illu{ - pointer-events: none; - height: 3rem; - width: 3rem; - position: absolute; - left: 0; - top: 0; - z-index: 10; - transition: transform 0.3s, opacity 0.3s; - fill: var(--accent-color); - path{ - opacity: 0.3; + stroke-dashoffset: -200; } } #on_boarding{ @@ -278,15 +272,6 @@ sm-button{ z-index: 10; transition: transform 0.3s, opacity 0.3s; width: 100%; - &::after{ - content: ''; - position: absolute; - left: 0; - top: 1rem; - width: 1.5rem; - height: 2rem; - background: inherit; - } #total_tuts{ opacity: 0.8; font-size: 0.85rem; @@ -334,12 +319,19 @@ sm-button{ outline: none; } &.start-loading{ + align-items: center; pointer-events: none; h4{ - transform: translateX(0.6rem); + transform: translateX(1ch); background: inherit !important; color: rgba(var(--text-color), 0.9); } + .loader-container{ + transform: none; + } + .loader{ + animation: load-btn-loader 2.6s infinite, rotate 1s infinite linear; + } } h4 { padding: 0.5rem 1.2rem; @@ -355,24 +347,26 @@ sm-button{ } .loader { - position: absolute; - z-index: 1; height: 1.2rem; width: 1.2rem; - stroke-dashoffset: 220; - stroke-dasharray: 220; + stroke-dashoffset: 200; + stroke-dasharray: 200; margin: 0 !important; - left: 0; - transition: opacity 0.3s; } - .loader:not(.animate-loader){ + &:not(.start-loading) .loader-container{ opacity: 0; - } - .animate-loader { - animation: load-btn-loader 2.6s infinite, rotate 1s infinite linear; + transform: translateX(1rem); } } + +.loader-container{ + position: absolute; + z-index: 1; + left: 0; + transition: transform 0.3s, opacity 0.3s; +} + .animate-loader { animation: load 2.6s infinite, rotate 1s infinite linear; } @@ -416,6 +410,7 @@ sm-button{ .logo { display: flex; align-items: center; + cursor: pointer; h4{ font-weight: 500; font-size: clamp(1.1rem, 2vw, 1.2rem); @@ -733,6 +728,9 @@ details{ padding-top: 1.5rem; animation: slide-down 0.3s forwards; } + #sign_in_with{ + margin-top: 1.5rem; + } } } @keyframes slide-down{ @@ -748,7 +746,7 @@ details{ padding: 0.6rem 1.2rem !important; background: var(--accent-color); justify-content: center; - color: rgba(var(--foreground-color), 1); + color: white; } #main_header { @@ -789,7 +787,7 @@ details{ cursor: pointer; padding: 0.3rem; padding-top: 0.85rem; - border-radius: 0.4rem; + border-radius: 0.5rem; opacity: 0.6; color: rgba(var(--text-color), 1); font-size: 0.85rem; @@ -989,17 +987,18 @@ details{ flex-direction: column; align-items: center; text-align: center; - border-radius: 0.4rem; + border-radius: 0.5rem; width: 5rem; text-transform: capitalize; -webkit-tap-highlight-color: transparent; cursor: pointer; overflow: hidden; + user-select: none; .icon { height: 3rem; width: 3rem; background: rgba(var(--text-color), 0.06); - border-radius: 2rem; + border-radius: 1rem; padding: 0.85rem; margin-bottom: 0.6rem; } @@ -1024,7 +1023,7 @@ details{ height: 0.6rem; width: 0.6rem; background-color: #E53935; - border-radius: 0.4rem; + border-radius: 0.5rem; transition: transform 0.3s; } @@ -1754,19 +1753,23 @@ sm-panel{ padding: 1.5rem; gap: 2rem 0.2rem; } -#add_person_btn{ +#add_person_btn, +.person{ position: relative; overflow: hidden; cursor: pointer; display: flex; flex-direction: column; width: 5rem; + -webkit-tap-highlight-color: transparent; + border-radius: 0.5rem; + user-select: none; +} +#add_person_btn{ text-align: center; - transition: transform 0.3s; font-size: 0.85rem; opacity: 0.8; font-weight: 500; - -webkit-tap-highlight-color: transparent; .icon{ height: 3rem; width: 3rem; @@ -1779,15 +1782,7 @@ sm-panel{ } } .person{ - position: relative; - overflow: hidden; - display: flex; - flex-direction: column; align-items: center; - cursor: pointer; - transition: transform 0.3s; - width: 5rem; - -webkit-tap-highlight-color: transparent; } .person-initials, #person_initials{ display: flex; @@ -1838,7 +1833,7 @@ sm-panel{ } #show_person_name{ padding: 0.5rem 1rem; - border-radius: 0.4rem; + border-radius: 0.5rem; max-width: 30ch; &:focus{ outline: none; @@ -1943,17 +1938,6 @@ sm-panel{ #on_boarding{ width: 26rem; - &.indicating::before{ - content: ''; - position: absolute; - transform: rotate(45deg); - top: 1rem; - left: -0.5rem; - width: 1rem; - height: 1rem; - background: inherit; - box-shadow: -0.1rem 0 1rem rgba(var(--text-color), 0.16); - } } #navbar { @@ -1972,6 +1956,7 @@ sm-panel{ display: flex; width: auto; padding: 0.85rem 1.2rem; + user-select: none; .icon { height: 1.2rem; width: 1.2rem; diff --git a/index.html b/index.html index 0455058..d518cd7 100644 --- a/index.html +++ b/index.html @@ -41,10 +41,6 @@ - - - -
close @@ -117,6 +113,7 @@
+ Sign in with this private key @@ -162,9 +159,11 @@

Send

- - - +
+ + + +

@@ -202,9 +201,11 @@

Deposit

- - - +
+ + + +

@@ -259,13 +260,15 @@

withdraw

- - - +
+ + + +

- Withdraw or redeem money back to your specified UPI address. + Transfer wallet balance to your bank account using specified UPI address.

@@ -304,10 +307,12 @@

request

- - - +
+ + + +

@@ -345,9 +350,11 @@

pay

- - - +
+ + + +
@@ -495,9 +502,11 @@

Add address

- - - +
+ + + +
@@ -517,9 +526,11 @@

Add contact

- - - +
+ + + +
@@ -594,7 +605,7 @@
-
@@ -750,14 +761,16 @@

Refresh

- - - +
+ + + +
-
+
?

Your wallet balance

@@ -1009,10 +1022,12 @@

Refresh

- - - +
+ + + +
@@ -1150,7 +1165,7 @@

My UPIs

-

Add UPI address for easier access during various transactions.

+

Add your UPI addresses for withdrawing money from wallet back to your bank account.

+ Add UPI address
@@ -1207,7 +1222,7 @@ console.log("Starting the app! Please Wait!") floDapps.launchStartUp().then(async result => { console.log(`Welcome ${myFloID}`) - clearElements(['my_qr_code']) + clearElements(['#my_qr_code', '#people_container', '.upi-container']) userFloIdContainers.forEach(container => container.textContent = myFloID) await token_app.actions.doShreeGanesh(); @@ -1874,6 +1889,13 @@ } }) + window.addEventListener('popstate', e => { + if(!e.state) return + if(e.state.type === 'popup'){ + hidePopup() + } + }) + // function required for popups or modals to appear class Stack { constructor() { @@ -1932,6 +1954,10 @@ document.addEventListener('popupopened', async e => { let thisPopup = e.detail.popup, firstInput = thisPopup.querySelector('sm-input') + + //pushes popup as seprate entry in history + history.pushState({type: 'popup'}, null, null) + if (firstInput) firstInput.focusIn() switch (e.detail.popup.id) { @@ -2012,12 +2038,6 @@ }, 400) 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; case 'send_rupee_popup': payingRequested = false; tokenReceiver.readOnly = false @@ -2063,13 +2083,11 @@ btn = document.getElementById(btn); if (option === 'start') { btn.classList.add('start-loading') - btn.children[1].classList.add('animate-loader') - btn.children[0].textContent = btn.children[0].textContent.trim() + 'ing' + btn.children[0].textContent = btn.children[0].textContent.trim() + 'ing' } else { + btn.classList.remove('start-loading') if (btn.children[0].textContent.indexOf('ing')) btn.children[0].textContent = btn.children[0].textContent.trim().replace('ing', '') - btn.classList.remove('start-loading') - btn.children[1].classList.remove('animate-loader') } } @@ -2112,8 +2130,9 @@ } function clearElements(array = []) { + console.log(array) array.forEach(item => { - document.getElementById(item).innerHTML = `` + document.querySelectorAll(item).forEach(elem => elem.innerHTML = ``) }) } @@ -2535,26 +2554,31 @@ { id: '', title: 'Welcome', - details: 'We are glad that you chose our service.
RanchiMall Pay can be used throughout our ecosystem to pay/receive money.' + details: `We are glad that you chose our service.
RanchiMall Pay extends UPI's functionality into the blockchain.` + }, + { + id: 'wallet_balance', + title: 'Wallet', + details: 'This is RanchiMall Pay wallet. You need to deposit money through UPI in-order to user app functionalities.' }, { id: 'send_rupee_option', - title: 'Send money', - details: 'Click to send money to any FLO address. This uses wallet balance to send money.' + title: 'Send', + details: 'Click to send wallet money to any FLO address.' }, { id: 'deposit_rupee_option', - title: 'Deposit money', - details: 'Add balance to your RanchiMall pay wallet.' + title: 'Deposit', + details: 'Add balance to your RanchiMall Pay wallet.' }, { id: 'withdraw_rupee_option', - title: 'Withdraw money', - details: `Transfer money from wallet, back to your specified UPI address.` + title: 'Withdraw', + details: `Transfer wallet balance to your bank account using specified UPI address.` }, { id: 'request_rupee_option', - title: 'Request money', + title: 'Request', details: `Request money from others using their FLO address. Requested money will be stored in wallet balance.` }, { @@ -2569,18 +2593,18 @@ }, { id: 'request_page_btn', - title: `Request page`, + title: `Requests`, details: 'This will show all the payment requests you received from other users and shop keepers.' }, { id: 'activity_page_btn', - title: 'Activity page', + title: 'Activity', details: 'This page displays all the transactions such as sent, received money etc.' }, { id: 'profile_page_btn', - title: 'Profile page', - details: 'This page contains all the personal data as well as app settings.' + title: 'Profile', + details: 'This page contains your FLO ID as well as app settings.' } ] @@ -2589,11 +2613,11 @@ featureDetails = document.getElementById('feature_details'), nextTutButton = document.getElementById('next_tut_button'), prevTutButton = document.getElementById('prev_tut_button'), - totalTuts = document.getElementById('total_tuts'), - focusIllu = document.getElementById('focus_illu') + totalTuts = document.getElementById('total_tuts') - let currentFeatureIndex = 0; + let currentFeatureIndex = 0, + lastTargetOption; function startOnBoarding() { onBoardingPanel.classList.remove('hide') @@ -2602,8 +2626,7 @@ } function finishOnBoarding() { onBoardingPanel.classList.add('hide') - focusIllu.classList.add('hide') - + lastTargetOption.classList.remove('highlight') currentFeatureIndex = 0 } function nextTutorial() { @@ -2619,14 +2642,12 @@ index = (nextTutButton.textContent === 'Got it' && index > 0) ? 0 : Math.min(Math.max(index + currentFeatureIndex, 0), onBoarding.length - 1) if (index === 0){ prevTutButton.classList.add('hide') - focusIllu.classList.add('hide') onBoardingPanel.classList.remove('indicating') onBoardingPanel.setAttribute('style', `transform: translate(calc(50vw - ${onBoardingPanel.getBoundingClientRect().width/2}px), calc(50vh - ${onBoardingPanel.getBoundingClientRect().height/2}px))`) } else{ onBoardingPanel.classList.add('indicating') prevTutButton.classList.remove('hide') - focusIllu.classList.remove('hide') } if (index === onBoarding.length - 1) { nextTutButton.textContent = `Got it` @@ -2667,6 +2688,8 @@ featureDetails.animate(flyOut, options) } titleAnime.onfinish = () => { + if(lastTargetOption) + lastTargetOption.classList.remove('highlight') featureTitle.textContent = onBoarding[index].title featureDetails.innerHTML = onBoarding[index].details totalTuts.textContent = `${index + 1}/${onBoarding.length}` @@ -2674,7 +2697,10 @@ const targetOption = document.getElementById(onBoarding[index].id) let targetPosition = targetOption.getBoundingClientRect() if(window.innerWidth > 640){ - onBoardingPanel.setAttribute('style', `transform: translate(${targetPosition.left + targetPosition.width}px, ${targetPosition.top + Math.abs(document.body.getBoundingClientRect().top)}px)`) + if(targetPosition.left + targetPosition.width + onBoardingPanel.getBoundingClientRect().width < window.innerWidth) + onBoardingPanel.setAttribute('style', `transform: translate(calc(${targetPosition.left + targetPosition.width}px + 1.5rem), ${targetPosition.top + Math.abs(document.body.getBoundingClientRect().top)}px)`) + else + onBoardingPanel.setAttribute('style', `transform: translate(calc(${targetPosition.left - onBoardingPanel.getBoundingClientRect().width}px - 1.5rem), ${targetPosition.top + Math.abs(document.body.getBoundingClientRect().top)}px)`) } else{ if(targetPosition.bottom + onBoardingPanel.getBoundingClientRect().height < window.innerHeight) @@ -2685,8 +2711,10 @@ if(targetPosition.top + targetPosition.height > window.innerHeight){ targetOption.scrollIntoView({behavior: 'smooth', block: 'center', inline: 'start'}) } - focusIllu.setAttribute('style', `transform: translate(calc(${targetPosition.left + targetPosition.width/2}px - 1.5rem), ${targetPosition.top + Math.abs(document.body.getBoundingClientRect().top)}px)`) + //focusIllu.setAttribute('style', `transform: translate(calc(${targetPosition.left + targetPosition.width/2}px - 1.5rem), ${targetPosition.top + Math.abs(document.body.getBoundingClientRect().top)}px)`) } + targetOption.classList.add('highlight') + lastTargetOption = targetOption } if (currentFeatureIndex > index) { featureTitle.animate(flyOut, options).reverse() @@ -3020,7 +3048,10 @@ const credentialsSection = document.getElementById('credentials_section'), generateFloId = document.getElementById('generate_flo_id'), generatedId = document.getElementById('generated_id'), - generatedKey = document.getElementById('generated_key') + generatedKey = document.getElementById('generated_key'), + signInBtn = document.getElementById('sign_in_btn'), + signInWithBtn = document.getElementById('sign_in_with'), + privateKeyInput = document.getElementById('get_priv_key_field') function generateId() { generateFloId.classList.add('hide-completely') @@ -3028,19 +3059,23 @@ let { floID, privKey } = floCrypto.generateNewID() generatedId.textContent = floID generatedKey.textContent = privKey + privateKeyInput.value = privKey } const signIn = () => { return new Promise((resolve, reject) => { hideLoader() showSignIn() - let signInBtn = document.getElementById('sign_in_btn'), - privateKeyInput = document.getElementById('get_priv_key_field') signInBtn.onclick = () => { resolve(privateKeyInput.value) hideSignIn() showLoader() } + signInWithBtn.onclick = () => { + resolve(privateKeyInput.value) + hideSignIn() + showLoader() + } }) } @@ -3055,6 +3090,8 @@ } async function signOutSequence() { + generateFloId.classList.remove('hide-completely') + credentialsSection.classList.add('hide-completely') delete token_app.master_configurations; await floDapps.clearCredentials() document.querySelector('main').classList.add('hide-completely') @@ -12773,7 +12810,7 @@ option.classList.remove('hide-completely') }) refreshBalance() - userType.forEach(user => user.textContent = 'Me') + userType.forEach(user => user.textContent = 'Profile') defaultUPI = localStorage.getItem(`defaultUPI${myFloID}`) if (mobileCheck()) document.getElementById('scanner_icon').classList.remove('hide-completely')