diff --git a/components.js b/components.js index 378a94c..aded3a7 100644 --- a/components.js +++ b/components.js @@ -281,6 +281,9 @@ input{ border: solid 1px rgba(var(--text-color), 0.2); padding: 0.6em 1em; } +.helper-text:empty{ + padding: 0; +} @media (any-hover: hover){ .icon:hover{ background: rgba(var(--text-color), 0.1); @@ -288,19 +291,19 @@ input{ }
- -
+ +
`; customElements.define('sm-input', @@ -402,6 +405,9 @@ customElements.define('sm-input', if (this.hasAttribute('required')) { this.input.setAttribute('required', '') } + if (this.hasAttribute('pattern')) { + this.input.setAttribute('pattern', this.getAttribute('pattern')) + } if (this.hasAttribute('readonly')) { this.input.setAttribute('readonly', '') this.readonly = true @@ -1675,7 +1681,7 @@ bottom: 0; left: 0; right: 0; place-items: center; -background: #00000060; +background: rgba(0, 0, 0, 0.6); z-index: 10; transition: opacity 0.3s ease; } @@ -1724,8 +1730,7 @@ pointer-events: none; align-self: center; border-radius: 0.4rem; height: auto; - transform: translateY(0) scale(0.9); - box-shadow: 0 2rem 2rem #00000040; + box-shadow: 0 3rem 2rem -0.5rem #00000040; } } @media screen and (max-width: 640px){ @@ -1782,28 +1787,29 @@ customElements.define('sm-popup', class extends HTMLElement { this.pinned = pinned this.popupStack = popupStack this.popupContainer.classList.remove('hide') - if (window.innerWidth < 648) - this.popup.style.transform = 'translateY(0)'; - else - this.popup.style.transform = 'scale(1)'; + this.popup.style.transform = 'translateY(0)'; document.body.setAttribute('style', `overflow: hidden; top: -${window.scrollY}px`) } hide() { this.removeAttribute('open') - if (window.innerWidth < 648) + if (window.innerWidth < 648) { this.popup.style.transform = 'translateY(100%)'; - else + } + else { this.popup.style.transform = 'scale(0.9)'; + setTimeout(() => { + this.popup.style.transform = 'translateY(100%) scale(1)' + }, 300) + } this.popupContainer.classList.add('hide') - if (typeof this.popupStack !== 'undefined') { - this.popupStack.pop() - if (this.popupStack.items.length === 0) { + /*if (typeof this.popupStack !== 'undefined') { + if (this.popupStack.items.length === 1) { this.resumeScrolling() } } - else { + else {*/ this.resumeScrolling() - } + //} if (this.inputFields.length) { setTimeout(() => { @@ -1815,6 +1821,7 @@ customElements.define('sm-popup', class extends HTMLElement { }) }, 300); } + return this; } handleTouchStart(e) { @@ -1882,7 +1889,7 @@ customElements.define('sm-popup', class extends HTMLElement { }) this.popupBodySlot.addEventListener('slotchange', () => { - this.inputFields = this.popupBodySlot.assignedElements().filter(element => element.tagName === 'SM-INPUT' || element.tagName === 'SM-CHECKBOX' || element.tagName === 'TEXTAREA' || element.type === 'radio') + this.inputFields = this.querySelectorAll('sm-input', 'sm-checkbox', 'textarea', 'radio') }) this.popupHeader.addEventListener('touchstart', (e) => { @@ -1945,24 +1952,25 @@ opacity: 0; transform: scale(1) } .previous-item{ -left: 1rem; + left: 1rem; } .next-item{ -right: 1rem; + right: 1rem; } .left,.right{ -position: absolute; -width: 3rem; -height: 100%; -transition: opacity 0.3s; -z-index: 1; + pointer-events: none; + position: absolute; + width: 3rem; + height: 100%; + transition: opacity 0.3s; + z-index: 1; } .left{ -background: linear-gradient(to left, transparent, rgba(var(--foreground-color), 0.6)) + background: radial-gradient(closest-corner circle at -50%, rgba(var(--text-color), 0.3), transparent); } .right{ -right: 0; -background: linear-gradient(to right, transparent, rgba(var(--foreground-color), 0.6)) + right: 0; + background: radial-gradient(farthest-side circle at 150%, rgba(var(--text-color), 0.3), transparent); } .carousel-container{ position: relative; diff --git a/css/main.css b/css/main.css index e5f56e9..f204369 100644 --- a/css/main.css +++ b/css/main.css @@ -328,53 +328,6 @@ textarea { padding: 0.8rem; } -.input { - display: flex; - width: 100%; - align-items: center; - position: relative; - padding: 0.8em; - margin-bottom: 1.5em; - border-radius: 0.2rem; - background: rgba(var(--text-color), 0.1); - border: 0.1em solid transparent; - cursor: text; -} -.input:last-of-type { - margin-bottom: 0; -} -.input:focus-within { - border: 0.1em solid var(--accent-color); -} -.input .placeholder { - opacity: 0.6; - font-weight: 500; - font-size: 1em; - position: absolute; - transition: transform 0.3s ease; - transform-origin: left; - pointer-events: none; - will-change: contents; - text-transform: capitalize; -} -.input input { - flex: 1; - font-size: 1rem; - border: none; - background: transparent; - outline: none; - color: rgba(var(--text-color), 1); -} - -.animate-label input { - transform: translateY(0.5em); -} -.animate-label .placeholder { - transform: translateY(-60%) scale(0.7); - opacity: 1; - color: var(--accent-color); -} - *:empty + .empty-state { display: grid; } @@ -433,62 +386,6 @@ 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, 0.4); - z-index: 10; - transition: opacity 0.3s ease; -} -.popup-container .popup { - flex-direction: column; - align-self: flex-end; - align-items: flex-start; - flex-wrap: wrap; - width: 100%; - border-radius: 0.5rem 0.5rem 0 0; - padding: 1.5rem; - position: relative; - display: flex; - background: rgba(var(--foreground-color), 1); - transform: translateY(100%); - transition: transform 0.3s; - box-shadow: 0 2rem 2rem rgba(0, 0, 0, 0.24); - overflow-y: auto; -} -.popup-container .popup h5 { - margin: 0.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: 0.4rem; - margin-right: 0.3rem; - stroke-width: 8; -} -.popup-container .popup p { - margin-bottom: 1.5rem !important; -} - #confirmation, #prompt { flex-direction: column; @@ -502,10 +399,6 @@ form { font-weight: 500; margin-bottom: 1.5rem; } -#confirmation .input, -#prompt .input { - margin-bottom: 1rem; -} #confirmation .btns, #prompt .btns { display: flex; @@ -526,6 +419,31 @@ form { margin-bottom: 1em; } +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: 0.2rem; + stroke-width: 10; + cursor: pointer; +} +.popup-header button { + width: auto; + margin-left: auto; +} + #sign_in_popup h3 { margin-top: 2rem; } @@ -540,9 +458,6 @@ form { margin-top: 1rem; margin-bottom: 0 !important; } -#sign_in_popup .input { - background: rgba(var(--text-color), 0.1); -} .primary-btn { background: var(--accent-color); @@ -629,9 +544,9 @@ form { } #home_page .left { padding: 1.5rem 0; - align-self: flex-start; width: auto; - border-radius: 0.5rem; + background: rgba(var(--text-color), 0.06); + border-radius: 0.6rem; } #home_page .left h3, #home_page .left h4, #home_page .left p { padding: 0 1.5rem; @@ -650,7 +565,7 @@ form { .user-panel { position: relative; padding: 1.5rem; - border-radius: 0.5rem; + border-radius: 0.6rem; background: linear-gradient(135deg, var(--accent-color), #2F2B76); color: rgba(var(--foreground-color), 1); box-shadow: 0 0.1rem 0.1rem #00000010, 0 1rem 1rem -1rem #00000010; @@ -699,7 +614,6 @@ form { .options-tab { margin: 1rem 0; - border-radius: 0.5reem; } .options-tab .option { position: relative; @@ -978,15 +892,16 @@ sm-panel { } } #main_loader { - box-shadow: none; - background: none; text-align: center; - align-items: center; - flex-direction: column; + place-content: center; + height: 100vh; + width: 100vw; + position: fixed; + left: 0; } #main_loader sm-button { margin-left: 0; - margin-top: 1.5rem; + margin-top: 1rem; } #main_loader svg { height: 2rem; @@ -1022,7 +937,6 @@ sm-panel { gap: 1.5rem; grid-template-areas: "." "left"; grid-template-columns: minmax(0, 1fr); - align-items: flex-start; } #home_page .left, #deposit .left { grid-area: left; @@ -1038,12 +952,8 @@ sm-panel { margin-left: 6rem; } - .popup-container .popup { - transform: translateY(0) scale(0.96); + sm-popup::part(popup) { width: 24rem; - align-self: center; - border-radius: 0.4rem; - height: auto; } #confirmation { diff --git a/css/main.min.css b/css/main.min.css index 98418d7..80414fe 100644 --- a/css/main.min.css +++ b/css/main.min.css @@ -1 +1 @@ -.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 +.icon,.loader{overflow:visible;fill:none}.action,button{position:relative}#main_loader svg,.container-header button{align-self:center}#navbar .navbar-item,.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;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 .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}#main_loader,#navbar{position:fixed;left:0}.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}.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}form{width:100%}#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 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}#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;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)}#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;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{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;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)}#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 3cefefc..f5c60aa 100644 --- a/css/main.scss +++ b/css/main.scss @@ -347,60 +347,6 @@ textarea { padding: 0.8rem; } -.input { - display: flex; - width: 100%; - align-items: center; - position: relative; - padding: 0.8em; - margin-bottom: 1.5em; - border-radius: 0.2rem; - background: rgba(var(--text-color), 0.1); - border: 0.1em solid transparent; - cursor: text; - - &:last-of-type { - margin-bottom: 0; - } - - &:focus-within { - border: 0.1em solid var(--accent-color); - } - - .placeholder { - opacity: .6; - font-weight: 500; - font-size: 1em; - position: absolute; - transition: transform 0.3s ease; - transform-origin: left; - pointer-events: none; - will-change: contents; - text-transform: capitalize; - } - - input { - flex: 1; - font-size: 1rem; - border: none; - background: transparent; - outline: none; - color: rgba(var(--text-color), 1); - } -} - -.animate-label { - input { - transform: translateY(0.5em); - } - - .placeholder { - transform: translateY(-60%) scale(0.7); - opacity: 1; - color: var(--accent-color); - } -} - *:empty + .empty-state { display: grid; } @@ -461,70 +407,6 @@ form { width: 100%; } -.popup-container { - display: grid; - position: fixed; - top: 0; - bottom: 0; - left: 0; - right: 0; - place-items: center; - background: rgba($color: #000000, $alpha: 0.4); - z-index: 10; - transition: opacity 0.3s ease; - - .popup { - flex-direction: column; - align-self: flex-end; - align-items: flex-start; - flex-wrap: wrap; - width: 100%; - border-radius: 0.5rem 0.5rem 0 0; - padding: 1.5rem; - position: relative; - display: flex; - background: rgba(var(--foreground-color), 1); - transform: translateY(100%); - transition: transform 0.3s; - box-shadow: 0 2rem 2rem rgba($color: #000000, $alpha: 0.24); - overflow-y: auto; - - h5 { - margin: 0.5rem 0; - } - - button:first-of-type { - margin-left: auto; - } - - .container-header { - display: flex; - align-items: center; - padding: 0; - margin-bottom: 1rem; - - h4 { - flex: 1; - } - - button { - width: auto; - } - - .icon { - cursor: pointer; - padding-right: 0.4rem; - margin-right: 0.3rem; - stroke-width: 8; - } - } - - p { - margin-bottom: 1.5rem !important; - } - } -} - #confirmation, #prompt { flex-direction: column; @@ -538,10 +420,6 @@ form { margin-bottom: 1.5rem; } - .input { - margin-bottom: 1rem; - } - .btns { display: flex; justify-content: right; @@ -562,6 +440,33 @@ form { margin-bottom: 1em; } +sm-popup{ + sm-input:not(:last-of-type) { + margin-bottom: 1rem; + } + p{ + margin-block-end: 1rem; + } +} + +.popup-header{ + padding: 1.5rem; + padding-bottom: 0; + display: flex; + align-items: center; + width: 100%; + .icon{ + margin-right: 1rem; + padding: 0.2rem; + stroke-width: 10; + cursor: pointer; + } + button{ + width: auto; + margin-left: auto; + } +} + #sign_in_popup { h3 { margin-top: 2rem; @@ -580,10 +485,6 @@ form { margin-top: 1rem; margin-bottom: 0 !important; } - - .input { - background: rgba(var(--text-color), 0.1); - } } .primary-btn { @@ -673,9 +574,9 @@ form { padding: 1rem 0 4rem 0; .left { padding: 1.5rem 0; - align-self: flex-start; width: auto; - border-radius: 0.5rem; + background: rgba(var(--text-color), 0.06); + border-radius: 0.6rem; h3, h4, p { padding: 0 1.5rem; } @@ -696,7 +597,7 @@ form { .user-panel { position: relative; padding: 1.5rem; - border-radius: 0.5rem; + border-radius: 0.6rem; background: linear-gradient(135deg, var(--accent-color), #2F2B76); color: rgba(var(--foreground-color), 1); box-shadow: 0 0.1rem 0.1rem #00000010, 0 1rem 1rem -1rem #00000010; @@ -742,9 +643,8 @@ form { font-weight: 500; } -.options-tab { +.options-tab { margin: 1rem 0; - border-radius: 0.5reem; .option { position: relative; display: flex; @@ -1062,15 +962,15 @@ sm-panel{ #main_loader { - box-shadow: none; - background: none; text-align: center; - align-items: center; - flex-direction: column; - + place-content: center; + height: 100vh; + width: 100vw; + position: fixed; + left: 0; sm-button { margin-left: 0; - margin-top: 1.5rem; + margin-top: 1rem; } svg { @@ -1109,7 +1009,6 @@ sm-panel{ gap: 1.5rem; grid-template-areas: '.''left'; grid-template-columns: minmax(0, 1fr); - align-items: flex-start; .left { grid-area: left; } @@ -1126,14 +1025,8 @@ sm-panel{ margin-left: 6rem; } - .popup-container { - .popup { - transform: translateY(0) scale(0.96); - width: 24rem; - align-self: center; - border-radius: 0.4rem; - height: auto; - } + sm-popup::part(popup){ + width: 24rem; } #confirmation { diff --git a/index.html b/index.html index 9390007..2a85028 100644 --- a/index.html +++ b/index.html @@ -14,262 +14,194 @@ -
- -
- + -
- -
+
+ + Loader + + +

Loading Blockchain UPI

+ Sign Out +
-
- -
- -
-
- -
-
- -
-
- -
-
- -
+ + +

+ Don't have enough Rupee balance? Pay to our cashier through UPI and your cash will be + sent as Rupee. +

+

+ + + + -
- -
+ +
+ + close + + + +

Report

+ +
+ +
@@ -395,7 +327,7 @@

pay through cashier

- +
My FLO ID
@@ -767,14 +699,14 @@ @@ -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); } }