From 562a19acf5d6fad68809f64bb5ebea428d301201 Mon Sep 17 00:00:00 2001 From: sairaj mote Date: Sun, 27 Aug 2023 10:57:49 +0530 Subject: [PATCH] Reverted to old version --- css/main.css | 11 +- css/main.min.css | 2 +- css/main.scss | 28 ++--- index.html | 274 +++++++++++++++++++++++------------------------ 4 files changed, 152 insertions(+), 163 deletions(-) diff --git a/css/main.css b/css/main.css index 3e01e6a..1f0597e 100644 --- a/css/main.css +++ b/css/main.css @@ -6,7 +6,7 @@ } :root { - font-size: clamp(1rem, 1.2vmax, 1.2rem); + font-size: clamp(1rem, 1.2vmax, 1.5rem); } html, @@ -768,7 +768,7 @@ h3 { } #home_page > section { display: grid; - width: min(100% - 2rem, 42rem); + width: min(100% - 2rem, 36rem); margin: 0 auto; margin-bottom: 1rem; } @@ -818,16 +818,13 @@ h3 { overflow: visible; } -#file_upload_section fieldset { - padding: 0.5rem; -} -#file_upload_section label.interact { +label.interact { display: flex; align-items: center; border-radius: 0.3rem; padding: 0.5rem 1rem 0.5rem 0; } -#file_upload_section label.interact input { +label.interact input { height: 1.2em; width: 1.2em; accent-color: var(--accent-color); diff --git a/css/main.min.css b/css/main.min.css index 7c1e103..608f330 100644 --- a/css/main.min.css +++ b/css/main.min.css @@ -1 +1 @@ -*{padding:0;margin:0;box-sizing:border-box;font-family:"Roboto",sans-serif}:root{font-size:clamp(1rem,1.2vmax,1.2rem)}html,body{height:100%}body{--accent-color: #365eff;--text-color: 30, 30, 30;--background-color: 248, 248, 248;--foreground-color: 255, 255, 255;--danger-color: rgb(255, 75, 75);--green: #1cad59;scrollbar-width:thin;scrollbar-gutter:stable;color:rgba(var(--text-color), 1);background-color:rgba(var(--background-color), 1);transition:background-color .3s}body[data-theme=dark]{--accent-color: #86afff;--text-color: 220, 220, 220;--background-color: 10, 10, 10;--foreground-color: 24, 24, 24;--danger-color: rgb(255, 106, 106);--green: #00e676}body[data-theme=dark] sm-popup::part(popup){background-color:rgba(var(--foreground-color), 1)}body[data-theme=dark] ::-webkit-calendar-picker-indicator{filter:invert(1)}p,strong{font-size:.9rem;max-width:75ch;line-height:1.7;color:rgba(var(--text-color), 0.9)}p:not(:last-of-type),strong:not(:last-of-type){margin-bottom:1.5rem}a{text-decoration:none;color:var(--accent-color)}a:focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color), 1) inset}button,.button{-webkit-user-select:none;-moz-user-select:none;user-select:none;position:relative;display:inline-flex;border:none;background-color:rgba(0,0,0,0);overflow:hidden;color:inherit;-webkit-tap-highlight-color:rgba(0,0,0,0);align-items:center;font-size:inherit;font-weight:500;white-space:nowrap;padding:.6rem .9rem;border-radius:.3rem;justify-content:center}button:focus-visible,.button:focus-visible{outline:var(--accent-color) solid medium}button:not(:disabled),.button:not(:disabled){cursor:pointer}.button{background-color:rgba(var(--text-color), 0.02);border:solid thin rgba(var(--text-color), 0.06)}.button--primary{color:rgba(var(--background-color), 1);background-color:var(--accent-color)}.button--primary .icon{fill:rgba(var(--background-color), 1)}.button--colored{color:var(--accent-color)}.button--colored .icon{fill:var(--accent-color)}.button--danger{background-color:rgba(255,115,115,.062745098);color:var(--danger-color)}.button--danger .icon{fill:var(--danger-color)}.button--small{padding:.4rem .6rem}.button--outlined{border:solid rgba(var(--text-color), 0.3) .1rem;background-color:rgba(var(--foreground-color), 1)}.button--transparent{background-color:rgba(0,0,0,0)}button:disabled{opacity:.4;cursor:not-allowed;filter:saturate(0)}.cta{text-transform:uppercase;font-size:.9rem;font-weight:700;letter-spacing:.05em;padding:.8rem 1rem}.icon{width:1.2rem;height:1.2rem;fill:rgba(var(--text-color), 0.8);flex-shrink:0}.icon-only{padding:.5rem;border-radius:.3rem}.icon--big{width:3rem;height:3rem}a:-webkit-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:-moz-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}details{padding:1rem 0}details summary{display:flex;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:pointer;align-items:center;justify-content:space-between;color:var(--accent-color)}details[open] summary{margin-bottom:1rem}details[open]>summary .down-arrow{transform:rotate(180deg)}input[type=date]{display:flex;width:100%;padding:.8rem .6rem;border:none;border-radius:.5rem;font-weight:500;font-family:inherit;font-size:inherit;color:inherit;background-color:rgba(var(--text-color), 0.06)}input[type=date]:focus{outline:none;box-shadow:0 0 0 .1rem var(--accent-color)}sm-input,sm-textarea{font-size:.9rem;--border-radius: 0.5rem;--background-color: rgba(var(--foreground-color), 1)}sm-input button .icon,sm-textarea button .icon{fill:var(--accent-color)}sm-textarea{--max-height: auto}sm-spinner{--size: 1rem;--stroke-width: 0.1rem}sm-form{--gap: 1rem}sm-chips{--gap: 0.3rem}sm-chip{position:relative;font-size:.9rem;--border-radius: 0.5rem;--padding: 0.5rem 0.8rem;--background: rgba(var(--text-color), 0.06);-webkit-user-select:none;-moz-user-select:none;user-select:none}sm-select::part(options){max-height:40vh}sm-option{flex-shrink:0}sm-option::part(option){grid-template-columns:none}ul{list-style:none}ol li{margin-left:1rem;font-size:.9rem;max-width:75ch;line-height:1.7;color:rgba(var(--text-color), 0.9)}fieldset{display:grid;gap:.5rem;padding:1rem;border-radius:.5rem;border:solid 1px rgba(var(--text-color), 0.3)}fieldset legend{font-weight:500}input[type=radio]{height:1.1em;width:1.1em;margin-right:.5rem;accent-color:var(--accent-color)}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.wrap-around{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word}.full-bleed{grid-column:1/-1}.h1{font-size:1.5rem}.h2{font-size:1.2rem}h3{font-size:1.2rem;line-height:1.3}.h4{font-size:.9rem}.h5{font-size:.75rem}.uppercase{text-transform:uppercase}.capitalize::first-letter{text-transform:uppercase}.sticky{position:-webkit-sticky;position:sticky}.top-0{top:0}.flex{display:flex}.flex-1{flex:1}.flex-wrap{flex-wrap:wrap}.grid{display:grid}.flow-column{grid-auto-flow:column}.gap-0-3{gap:.3rem}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.text-align-right{text-align:right}.align-content-start{align-content:flex-start}.align-items-start{align-items:flex-start}.align-center{align-items:center}.align-end{align-items:flex-end}.align-content-center{align-content:center}.text-center{text-align:center}.justify-start{justify-content:start}.justify-content-center{justify-content:center}.justify-items-center{justify-items:center}.justify-right{margin-left:auto}.justify-items-center{justify-items:center}.align-self-center{align-self:center}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.flex-direction-column{flex-direction:column}.space-between{justify-content:space-between}.w-100{width:100%}.h-100{height:100%}.margin-left-0-5{margin-left:.5rem}.margin-left-auto{margin-left:auto}.margin-right-0-5{margin-right:.5rem}.margin-right-auto{margin-right:auto}.ripple{height:8rem;width:8rem;position:absolute;border-radius:50%;transform:scale(0);background:radial-gradient(circle, rgba(var(--text-color), 0.3) 0%, rgba(0, 0, 0, 0) 50%);pointer-events:none}.button--primary .ripple,.button--danger .ripple{background:radial-gradient(circle, rgba(var(--background-color), 0.3) 0%, rgba(0, 0, 0, 0) 50%)}.interact{position:relative;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0)}.empty-state{display:grid;width:100%;padding:1.5rem 0}.observe-empty-state:empty{display:none !important}.observe-empty-state:not(:empty)+.empty-state{display:none}.bullet-point{display:flex;align-items:center;justify-content:center;margin:0 .8ch}.bullet-point::after{content:"";height:.4ch;width:.4ch;border-radius:.5em;background-color:var(--accent-color)}.multi-state-button{display:grid;text-align:center;align-items:center;justify-items:center}.multi-state-button>*{grid-area:1/1/2/2}.multi-state-button button{z-index:1;width:100%}.password-field label{display:flex;justify-content:center}.password-field label input:checked~.visible{display:none}.password-field label input:not(:checked)~.invisible{display:none}#app_body{display:block;height:100%;width:100%}#confirmation_popup,#prompt_popup{flex-direction:column}#confirmation_popup h4,#prompt_popup h4{margin-bottom:.5rem}#confirmation_popup .flex,#prompt_popup .flex{margin-top:1rem}.popup__header{position:relative;display:grid;gap:.5rem;width:100%;padding:0 1.5rem 0 .5rem;align-items:center;grid-template-columns:auto 1fr}.popup__header>*{grid-row:1}.popup__header h3,.popup__header h4{grid-column:1/-1;justify-self:center;align-self:center}.popup__header__close{grid-column:1}#loading{position:fixed;display:grid;top:0;left:0;bottom:0;right:0;place-content:center;justify-items:center;background:rgba(var(--foreground-color), 1);z-index:10}#loading h4{margin-top:1.5rem;font-weight:500}#loading sm-spinner{--size: 1.5rem}#sign_in,#sign_up{display:grid;width:100%;height:100%;justify-items:center;align-content:center;padding:1.5rem}#sign_in section,#sign_up section{width:min(26rem,100%)}#sign_in sm-form,#sign_up sm-form{margin:2rem 0}.generated-keys-wrapper{padding:1rem;background-color:rgba(var(--foreground-color), 1);border-radius:.5rem}#flo_id_warning{padding-bottom:1.5rem}#flo_id_warning .icon{height:3rem;width:3rem;padding:.8rem;overflow:visible;background-color:#ffc107;border-radius:3rem;fill:rgba(0,0,0,.8)}#main_header{display:flex;gap:1rem;padding:max(1rem,1.5vw);width:100%;align-items:center}.app-brand{display:flex;gap:.3rem;align-items:center}.app-brand .icon{height:1.7rem;width:1.7rem}.app-name__company{font-size:.8rem;font-weight:500;color:rgba(var(--text-color), 0.8)}#kyc_status{display:flex;flex-direction:column;gap:.5rem;min-height:100%;padding-bottom:2rem}#kyc_status header{margin-bottom:3rem}#kyc_status sm-input{font-weight:500;font-size:1rem}#kyc_status .icon-only{width:3.2rem;height:3.2rem;border-radius:.5rem}#kyc_status>*:not(:first-child){margin:0 auto;width:min(100% - 2rem,40rem)}#search_illustration{height:12rem;justify-self:center;align-self:center;flex-shrink:0;padding:2rem 0}#verification_result{display:grid;gap:1rem;background-color:rgba(var(--text-color), 0.05);border-radius:.5rem;padding:max(1rem,2vw);line-height:1.7;width:100%}#verification_result:empty{display:none}#verification_result .icon{width:3rem;height:3rem}#verification_result[data-status=valid] .icon{fill:var(--green)}#verification_result[data-status=invalid] .icon{fill:var(--danger-color)}.info{font-size:.9rem;color:rgba(var(--text-color), 0.8);gap:.3rem 1.5rem}.info>:first-child{font-weight:500;min-width:5rem;text-align:end}.info:last-child{text-align:start}.info sm-copy{font-weight:500}#user_popup_button{background-color:rgba(var(--text-color), 0.06);border-radius:2rem;font-size:.9rem;text-overflow:ellipsis;overflow:hidden}#home_page{display:flex;flex-direction:column;gap:1rem}#home_page>section{display:grid;width:min(100% - 2rem,42rem);margin:0 auto;margin-bottom:1rem}.card{padding:1.5rem;border-radius:.5rem;box-shadow:0 0 0 1px rgba(var(--text-color), 0.1);background-color:rgba(var(--foreground-color), 1);transition:box-shadow .2s,background-color .2s}.drag-drop-container{text-align:center;cursor:pointer;align-items:center;justify-items:center;padding:3vmax 1rem}.drag-drop-container.drag-over,.drag-drop-container:hover{box-shadow:0 0 0 .1rem var(--accent-color)}.drag-drop-container .drag-drop-text{font-size:1.1rem;color:rgba(var(--text-color), 0.9)}.drag-drop-container p{max-width:100%;color:rgba(var(--text-color), 0.6)}.drag-drop-container strong{font-weight:500;color:rgba(var(--text-color), 0.8);background-color:rgba(var(--text-color), 0.06);border-radius:3rem;padding:.1rem .8rem}#upload_icon{width:8rem;height:8rem;margin-bottom:2rem;border-radius:5rem;padding:2rem;fill:rgba(var(--text-color), 0.5);background-color:rgba(var(--background-color), 1);overflow:visible}#file_upload_section fieldset{padding:.5rem}#file_upload_section label.interact{display:flex;align-items:center;border-radius:.3rem;padding:.5rem 1rem .5rem 0}#file_upload_section label.interact input{height:1.2em;width:1.2em;accent-color:var(--accent-color)}#verification_list{display:flex;flex-direction:column;gap:1rem}.verification-item{display:grid;grid-template-columns:1fr auto;grid-template-areas:"time status" "doc-info doc-info";align-items:center;justify-content:space-between;gap:1rem;padding:1rem;border-radius:.5rem;background-color:rgba(var(--foreground-color), 1)}.verification-item time{grid-area:time;font-size:.9rem;color:rgba(var(--text-color), 0.8)}.verification-item :nth-child(2){grid-area:doc-info}.verification-item :nth-child(3){grid-area:status}#verifier_wrapper>*{background-color:rgba(var(--foreground-color), 1);border-radius:.5rem;padding:1rem}#verifier_balance_container{width:100%}.kyc-request{display:grid;gap:1rem;padding:1rem;border-radius:.5rem;background-color:rgba(var(--background-color), 1)}.kyc-request time{font-size:.9rem;color:rgba(var(--text-color), 0.8)}.kyc-request h4{font-size:1.1rem}.kyc-request sm-copy{font-weight:500}.kyc-request button{text-transform:uppercase;padding:.4rem .6rem;font-size:.85rem;letter-spacing:.02em}.revoke-card{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;padding:1rem;border-radius:.5rem;background-color:rgba(var(--background-color), 1)}.revoke-card label{gap:1rem;font-weight:500;cursor:pointer;flex:1}.revoke-card input{accent-color:var(--accent-color);height:1.3em;width:1.3em}.revoke-card span:last-of-type{font-size:.9rem;color:rgba(var(--text-color), 0.8);font-weight:400}.revoke-card .button{padding:.5rem 1rem}#view_file_popup .button{padding:.5rem 1rem}#view_file_popup img{max-width:100%;max-height:100%;margin:auto}#commit_approvals{position:fixed;bottom:0;right:0;border-radius:.5rem;margin:1rem;padding:1rem 1.2rem}#commit_approvals[data-count="0"]{display:none}#commit_approvals::after{content:attr(data-count);display:flex;margin-left:.5rem;background-color:rgba(var(--background-color), 1);color:rgba(var(--text-color), 1);font-size:.9rem;font-weight:500;height:1.2rem;min-width:1.2rem;padding:.2rem;line-height:1;border-radius:1.5rem;align-items:center;justify-content:center;-webkit-animation:pulse .5s infinite alternate;animation:pulse .5s infinite alternate}#commit_approvals_popup{--width: min(32rem, 100%)}.kyc-to-commit{padding:1rem;border-radius:.5rem;background-color:rgba(var(--foreground-color), 1);justify-items:flex-start}@-webkit-keyframes pulse{0%{transform:scale(1)}100%{transform:scale(1.15)}}@keyframes pulse{0%{transform:scale(1)}100%{transform:scale(1.15)}}#verifiers_section{width:min(100%,40rem)}@media screen and (max-width: 40rem){theme-toggle{order:2}#user_popup_button{flex:1;order:1}.hide-on-small{display:none !important}}@media screen and (min-width: 64rem){h1{font-size:3vw}sm-popup{--width: 24rem}.popup__header{padding:1.5rem 1.5rem 0 .75rem}#verifier_wrapper{display:grid;grid-template-columns:16rem 1fr;width:min(64rem,100%);margin:0 auto;align-items:flex-start}#view_file_popup{--width: min(56rem, 100%)}#approve_verifier_popup{--width: min(32rem, 100%)}.verification-item{grid-template-columns:6rem 1fr auto;grid-template-areas:"time doc-info status"}}@media(any-hover: hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color), 0.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color), 0.5)}.interact:not([disabled]){transition:background-color .3s}.interact:not([disabled]):hover{background-color:rgba(var(--text-color), 0.06)}.button:not([disabled]){transition:background-color .3s,filter .3s}.button:not([disabled]):hover{filter:contrast(2)}}@supports(overflow: overlay){body{overflow:overlay}}.hidden{display:none !important}.progress{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:.3rem;border-radius:2rem;background-color:rgba(var(--text-color), 0.1);overflow:hidden}.progress__bar{position:absolute;top:0;left:0;width:0;height:100%;background-color:var(--accent-color);transition:width .3s ease-in-out} \ No newline at end of file +*{padding:0;margin:0;box-sizing:border-box;font-family:"Roboto",sans-serif}:root{font-size:clamp(1rem,1.2vmax,1.5rem)}html,body{height:100%}body{--accent-color: #365eff;--text-color: 30, 30, 30;--background-color: 248, 248, 248;--foreground-color: 255, 255, 255;--danger-color: rgb(255, 75, 75);--green: #1cad59;scrollbar-width:thin;scrollbar-gutter:stable;color:rgba(var(--text-color), 1);background-color:rgba(var(--background-color), 1);transition:background-color .3s}body[data-theme=dark]{--accent-color: #86afff;--text-color: 220, 220, 220;--background-color: 10, 10, 10;--foreground-color: 24, 24, 24;--danger-color: rgb(255, 106, 106);--green: #00e676}body[data-theme=dark] sm-popup::part(popup){background-color:rgba(var(--foreground-color), 1)}body[data-theme=dark] ::-webkit-calendar-picker-indicator{filter:invert(1)}p,strong{font-size:.9rem;max-width:75ch;line-height:1.7;color:rgba(var(--text-color), 0.9)}p:not(:last-of-type),strong:not(:last-of-type){margin-bottom:1.5rem}a{text-decoration:none;color:var(--accent-color)}a:focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color), 1) inset}button,.button{-webkit-user-select:none;-moz-user-select:none;user-select:none;position:relative;display:inline-flex;border:none;background-color:rgba(0,0,0,0);overflow:hidden;color:inherit;-webkit-tap-highlight-color:rgba(0,0,0,0);align-items:center;font-size:inherit;font-weight:500;white-space:nowrap;padding:.6rem .9rem;border-radius:.3rem;justify-content:center}button:focus-visible,.button:focus-visible{outline:var(--accent-color) solid medium}button:not(:disabled),.button:not(:disabled){cursor:pointer}.button{background-color:rgba(var(--text-color), 0.02);border:solid thin rgba(var(--text-color), 0.06)}.button--primary{color:rgba(var(--background-color), 1);background-color:var(--accent-color)}.button--primary .icon{fill:rgba(var(--background-color), 1)}.button--colored{color:var(--accent-color)}.button--colored .icon{fill:var(--accent-color)}.button--danger{background-color:rgba(255,115,115,.062745098);color:var(--danger-color)}.button--danger .icon{fill:var(--danger-color)}.button--small{padding:.4rem .6rem}.button--outlined{border:solid rgba(var(--text-color), 0.3) .1rem;background-color:rgba(var(--foreground-color), 1)}.button--transparent{background-color:rgba(0,0,0,0)}button:disabled{opacity:.4;cursor:not-allowed;filter:saturate(0)}.cta{text-transform:uppercase;font-size:.9rem;font-weight:700;letter-spacing:.05em;padding:.8rem 1rem}.icon{width:1.2rem;height:1.2rem;fill:rgba(var(--text-color), 0.8);flex-shrink:0}.icon-only{padding:.5rem;border-radius:.3rem}.icon--big{width:3rem;height:3rem}a:-webkit-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:-moz-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}details{padding:1rem 0}details summary{display:flex;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:pointer;align-items:center;justify-content:space-between;color:var(--accent-color)}details[open] summary{margin-bottom:1rem}details[open]>summary .down-arrow{transform:rotate(180deg)}input[type=date]{display:flex;width:100%;padding:.8rem .6rem;border:none;border-radius:.5rem;font-weight:500;font-family:inherit;font-size:inherit;color:inherit;background-color:rgba(var(--text-color), 0.06)}input[type=date]:focus{outline:none;box-shadow:0 0 0 .1rem var(--accent-color)}sm-input,sm-textarea{font-size:.9rem;--border-radius: 0.5rem;--background-color: rgba(var(--foreground-color), 1)}sm-input button .icon,sm-textarea button .icon{fill:var(--accent-color)}sm-textarea{--max-height: auto}sm-spinner{--size: 1rem;--stroke-width: 0.1rem}sm-form{--gap: 1rem}sm-chips{--gap: 0.3rem}sm-chip{position:relative;font-size:.9rem;--border-radius: 0.5rem;--padding: 0.5rem 0.8rem;--background: rgba(var(--text-color), 0.06);-webkit-user-select:none;-moz-user-select:none;user-select:none}sm-select::part(options){max-height:40vh}sm-option{flex-shrink:0}sm-option::part(option){grid-template-columns:none}ul{list-style:none}ol li{margin-left:1rem;font-size:.9rem;max-width:75ch;line-height:1.7;color:rgba(var(--text-color), 0.9)}fieldset{display:grid;gap:.5rem;padding:1rem;border-radius:.5rem;border:solid 1px rgba(var(--text-color), 0.3)}fieldset legend{font-weight:500}input[type=radio]{height:1.1em;width:1.1em;margin-right:.5rem;accent-color:var(--accent-color)}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.wrap-around{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word}.full-bleed{grid-column:1/-1}.h1{font-size:1.5rem}.h2{font-size:1.2rem}h3{font-size:1.2rem;line-height:1.3}.h4{font-size:.9rem}.h5{font-size:.75rem}.uppercase{text-transform:uppercase}.capitalize::first-letter{text-transform:uppercase}.sticky{position:-webkit-sticky;position:sticky}.top-0{top:0}.flex{display:flex}.flex-1{flex:1}.flex-wrap{flex-wrap:wrap}.grid{display:grid}.flow-column{grid-auto-flow:column}.gap-0-3{gap:.3rem}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.text-align-right{text-align:right}.align-content-start{align-content:flex-start}.align-items-start{align-items:flex-start}.align-center{align-items:center}.align-end{align-items:flex-end}.align-content-center{align-content:center}.text-center{text-align:center}.justify-start{justify-content:start}.justify-content-center{justify-content:center}.justify-items-center{justify-items:center}.justify-right{margin-left:auto}.justify-items-center{justify-items:center}.align-self-center{align-self:center}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.flex-direction-column{flex-direction:column}.space-between{justify-content:space-between}.w-100{width:100%}.h-100{height:100%}.margin-left-0-5{margin-left:.5rem}.margin-left-auto{margin-left:auto}.margin-right-0-5{margin-right:.5rem}.margin-right-auto{margin-right:auto}.ripple{height:8rem;width:8rem;position:absolute;border-radius:50%;transform:scale(0);background:radial-gradient(circle, rgba(var(--text-color), 0.3) 0%, rgba(0, 0, 0, 0) 50%);pointer-events:none}.button--primary .ripple,.button--danger .ripple{background:radial-gradient(circle, rgba(var(--background-color), 0.3) 0%, rgba(0, 0, 0, 0) 50%)}.interact{position:relative;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0)}.empty-state{display:grid;width:100%;padding:1.5rem 0}.observe-empty-state:empty{display:none !important}.observe-empty-state:not(:empty)+.empty-state{display:none}.bullet-point{display:flex;align-items:center;justify-content:center;margin:0 .8ch}.bullet-point::after{content:"";height:.4ch;width:.4ch;border-radius:.5em;background-color:var(--accent-color)}.multi-state-button{display:grid;text-align:center;align-items:center;justify-items:center}.multi-state-button>*{grid-area:1/1/2/2}.multi-state-button button{z-index:1;width:100%}.password-field label{display:flex;justify-content:center}.password-field label input:checked~.visible{display:none}.password-field label input:not(:checked)~.invisible{display:none}#app_body{display:block;height:100%;width:100%}#confirmation_popup,#prompt_popup{flex-direction:column}#confirmation_popup h4,#prompt_popup h4{margin-bottom:.5rem}#confirmation_popup .flex,#prompt_popup .flex{margin-top:1rem}.popup__header{position:relative;display:grid;gap:.5rem;width:100%;padding:0 1.5rem 0 .5rem;align-items:center;grid-template-columns:auto 1fr}.popup__header>*{grid-row:1}.popup__header h3,.popup__header h4{grid-column:1/-1;justify-self:center;align-self:center}.popup__header__close{grid-column:1}#loading{position:fixed;display:grid;top:0;left:0;bottom:0;right:0;place-content:center;justify-items:center;background:rgba(var(--foreground-color), 1);z-index:10}#loading h4{margin-top:1.5rem;font-weight:500}#loading sm-spinner{--size: 1.5rem}#sign_in,#sign_up{display:grid;width:100%;height:100%;justify-items:center;align-content:center;padding:1.5rem}#sign_in section,#sign_up section{width:min(26rem,100%)}#sign_in sm-form,#sign_up sm-form{margin:2rem 0}.generated-keys-wrapper{padding:1rem;background-color:rgba(var(--foreground-color), 1);border-radius:.5rem}#flo_id_warning{padding-bottom:1.5rem}#flo_id_warning .icon{height:3rem;width:3rem;padding:.8rem;overflow:visible;background-color:#ffc107;border-radius:3rem;fill:rgba(0,0,0,.8)}#main_header{display:flex;gap:1rem;padding:max(1rem,1.5vw);width:100%;align-items:center}.app-brand{display:flex;gap:.3rem;align-items:center}.app-brand .icon{height:1.7rem;width:1.7rem}.app-name__company{font-size:.8rem;font-weight:500;color:rgba(var(--text-color), 0.8)}#kyc_status{display:flex;flex-direction:column;gap:.5rem;min-height:100%;padding-bottom:2rem}#kyc_status header{margin-bottom:3rem}#kyc_status sm-input{font-weight:500;font-size:1rem}#kyc_status .icon-only{width:3.2rem;height:3.2rem;border-radius:.5rem}#kyc_status>*:not(:first-child){margin:0 auto;width:min(100% - 2rem,40rem)}#search_illustration{height:12rem;justify-self:center;align-self:center;flex-shrink:0;padding:2rem 0}#verification_result{display:grid;gap:1rem;background-color:rgba(var(--text-color), 0.05);border-radius:.5rem;padding:max(1rem,2vw);line-height:1.7;width:100%}#verification_result:empty{display:none}#verification_result .icon{width:3rem;height:3rem}#verification_result[data-status=valid] .icon{fill:var(--green)}#verification_result[data-status=invalid] .icon{fill:var(--danger-color)}.info{font-size:.9rem;color:rgba(var(--text-color), 0.8);gap:.3rem 1.5rem}.info>:first-child{font-weight:500;min-width:5rem;text-align:end}.info:last-child{text-align:start}.info sm-copy{font-weight:500}#user_popup_button{background-color:rgba(var(--text-color), 0.06);border-radius:2rem;font-size:.9rem;text-overflow:ellipsis;overflow:hidden}#home_page{display:flex;flex-direction:column;gap:1rem}#home_page>section{display:grid;width:min(100% - 2rem,36rem);margin:0 auto;margin-bottom:1rem}.card{padding:1.5rem;border-radius:.5rem;box-shadow:0 0 0 1px rgba(var(--text-color), 0.1);background-color:rgba(var(--foreground-color), 1);transition:box-shadow .2s,background-color .2s}.drag-drop-container{text-align:center;cursor:pointer;align-items:center;justify-items:center;padding:3vmax 1rem}.drag-drop-container.drag-over,.drag-drop-container:hover{box-shadow:0 0 0 .1rem var(--accent-color)}.drag-drop-container .drag-drop-text{font-size:1.1rem;color:rgba(var(--text-color), 0.9)}.drag-drop-container p{max-width:100%;color:rgba(var(--text-color), 0.6)}.drag-drop-container strong{font-weight:500;color:rgba(var(--text-color), 0.8);background-color:rgba(var(--text-color), 0.06);border-radius:3rem;padding:.1rem .8rem}#upload_icon{width:8rem;height:8rem;margin-bottom:2rem;border-radius:5rem;padding:2rem;fill:rgba(var(--text-color), 0.5);background-color:rgba(var(--background-color), 1);overflow:visible}label.interact{display:flex;align-items:center;border-radius:.3rem;padding:.5rem 1rem .5rem 0}label.interact input{height:1.2em;width:1.2em;accent-color:var(--accent-color)}#verification_list{display:flex;flex-direction:column;gap:1rem}.verification-item{display:grid;grid-template-columns:1fr auto;grid-template-areas:"time status" "doc-info doc-info";align-items:center;justify-content:space-between;gap:1rem;padding:1rem;border-radius:.5rem;background-color:rgba(var(--foreground-color), 1)}.verification-item time{grid-area:time;font-size:.9rem;color:rgba(var(--text-color), 0.8)}.verification-item :nth-child(2){grid-area:doc-info}.verification-item :nth-child(3){grid-area:status}#verifier_wrapper>*{background-color:rgba(var(--foreground-color), 1);border-radius:.5rem;padding:1rem}#verifier_balance_container{width:100%}.kyc-request{display:grid;gap:1rem;padding:1rem;border-radius:.5rem;background-color:rgba(var(--background-color), 1)}.kyc-request time{font-size:.9rem;color:rgba(var(--text-color), 0.8)}.kyc-request h4{font-size:1.1rem}.kyc-request sm-copy{font-weight:500}.kyc-request button{text-transform:uppercase;padding:.4rem .6rem;font-size:.85rem;letter-spacing:.02em}.revoke-card{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;padding:1rem;border-radius:.5rem;background-color:rgba(var(--background-color), 1)}.revoke-card label{gap:1rem;font-weight:500;cursor:pointer;flex:1}.revoke-card input{accent-color:var(--accent-color);height:1.3em;width:1.3em}.revoke-card span:last-of-type{font-size:.9rem;color:rgba(var(--text-color), 0.8);font-weight:400}.revoke-card .button{padding:.5rem 1rem}#view_file_popup .button{padding:.5rem 1rem}#view_file_popup img{max-width:100%;max-height:100%;margin:auto}#commit_approvals{position:fixed;bottom:0;right:0;border-radius:.5rem;margin:1rem;padding:1rem 1.2rem}#commit_approvals[data-count="0"]{display:none}#commit_approvals::after{content:attr(data-count);display:flex;margin-left:.5rem;background-color:rgba(var(--background-color), 1);color:rgba(var(--text-color), 1);font-size:.9rem;font-weight:500;height:1.2rem;min-width:1.2rem;padding:.2rem;line-height:1;border-radius:1.5rem;align-items:center;justify-content:center;-webkit-animation:pulse .5s infinite alternate;animation:pulse .5s infinite alternate}#commit_approvals_popup{--width: min(32rem, 100%)}.kyc-to-commit{padding:1rem;border-radius:.5rem;background-color:rgba(var(--foreground-color), 1);justify-items:flex-start}@-webkit-keyframes pulse{0%{transform:scale(1)}100%{transform:scale(1.15)}}@keyframes pulse{0%{transform:scale(1)}100%{transform:scale(1.15)}}#verifiers_section{width:min(100%,40rem)}@media screen and (max-width: 40rem){theme-toggle{order:2}#user_popup_button{flex:1;order:1}.hide-on-small{display:none !important}}@media screen and (min-width: 64rem){h1{font-size:3vw}sm-popup{--width: 24rem}.popup__header{padding:1.5rem 1.5rem 0 .75rem}#verifier_wrapper{display:grid;grid-template-columns:16rem 1fr;width:min(64rem,100%);margin:0 auto;align-items:flex-start}#view_file_popup{--width: min(56rem, 100%)}#approve_verifier_popup{--width: min(32rem, 100%)}.verification-item{grid-template-columns:6rem 1fr auto;grid-template-areas:"time doc-info status"}}@media(any-hover: hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color), 0.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color), 0.5)}.interact:not([disabled]){transition:background-color .3s}.interact:not([disabled]):hover{background-color:rgba(var(--text-color), 0.06)}.button:not([disabled]){transition:background-color .3s,filter .3s}.button:not([disabled]):hover{filter:contrast(2)}}@supports(overflow: overlay){body{overflow:overlay}}.hidden{display:none !important}.progress{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:.3rem;border-radius:2rem;background-color:rgba(var(--text-color), 0.1);overflow:hidden}.progress__bar{position:absolute;top:0;left:0;width:0;height:100%;background-color:var(--accent-color);transition:width .3s ease-in-out} \ No newline at end of file diff --git a/css/main.scss b/css/main.scss index e8632ec..1cab61b 100644 --- a/css/main.scss +++ b/css/main.scss @@ -6,7 +6,7 @@ } :root { - font-size: clamp(1rem, 1.2vmax, 1.2rem); + font-size: clamp(1rem, 1.2vmax, 1.5rem); } html, @@ -730,7 +730,7 @@ h3 { gap: 1rem; & > section { display: grid; - width: min(calc(100% - 2rem), 42rem); + width: min(calc(100% - 2rem), 36rem); margin: 0 auto; margin-bottom: 1rem; } @@ -779,21 +779,15 @@ h3 { background-color: rgba(var(--background-color), 1); overflow: visible; } - -#file_upload_section { - fieldset { - padding: 0.5rem; - } - label.interact { - display: flex; - align-items: center; - border-radius: 0.3rem; - padding: 0.5rem 1rem 0.5rem 0; - input { - height: 1.2em; - width: 1.2em; - accent-color: var(--accent-color); - } +label.interact { + display: flex; + align-items: center; + border-radius: 0.3rem; + padding: 0.5rem 1rem 0.5rem 0; + input { + height: 1.2em; + width: 1.2em; + accent-color: var(--accent-color); } } #verification_list { diff --git a/index.html b/index.html index fa11ca9..893a6f6 100644 --- a/index.html +++ b/index.html @@ -970,143 +970,141 @@ reader.readAsArrayBuffer(selectedFile); } + //
+ // A. Personal information + // + // + //
+ //
+ // B. Politically exposed person form (PEP'S) + //
+ //
+ //

Do you hold or have held any important public office? E.g. Minister, Mayor, Deputy, Other

+ //
{ setIsHoldingImpPubOffice(e.target.value === 'yes') }}> + // + // + //
+ // ${isHoldingImpPubOffice ? html` + // + //
+ // + // + // + //
+ // `: ''} + //
+ //
+ //

Does any family member (Husband, parents, siblings, in-laws, etc.) hold or have held any important public office?

+ //
{ setIsFamilyMemberHoldingImpPubOffice(e.target.value === 'yes') }}> + // + // + //
+ // ${isFamilyMemberHoldingImpPubOffice ? html` + // + // + // + // + // `: ''} + //
+ //
+ //

Does you have an associate holding a major public office?

+ //
{ setIsAssociatedWithImpPubOffice(e.target.value === 'yes') }}> + // + // + //
+ // ${isAssociatedWithImpPubOffice ? html` + // + // + //
+ // + // + // + //
+ // `: ''} + //
+ //

+ // Politically Exposed Persons (PEP'S): Those natural persons identified at the beginning or during the course of the contractual relationship, nationals or foreigners, who perform or have performed public functions in our country or in their country of origin, as well as their relatives in the first and second degree of consanguinity or affinity, life partners or commercial or business associates. + //

+ //
+ //
+ //
+ // C. Declaration of legal origin and accuracy of the information + //
    + //
  1. + // All the values that we (I) deliver will have an origin that in no way will be related to the cultivation, production, manufacture, storage or transport or illicit traffic of narcotic or psychotropic substances or any other related illegal activity, nor will we (I) admit that third parties make deposits in accounts in our (my) charge with funds coming from the above mentioned activities or those foreseen by the Anti-Money Laundering Law, allowing any investigation procedure by Project B El Salvador or the corresponding authorities. + //
    2. + //
  2. + // The information provided in this instrument to Project B El Salvador is true and may be verified at any time. + //
    3. + //
  3. + // We exempt Project B El Salvador from any liability arising from erroneous, false, or inaccurate information that we (I) have (would have) provided in this document or from the violation thereof. + //
    4. + //
+ //
+ //
+ // D. Provided documents + //
return html` -
- A. Personal information - - +
{ setSelectedIdProof(e.target.value) }}> + Select ID proof + +
-
- B. Politically exposed person form (PEP'S) -
-
-

Do you hold or have held any important public office? E.g. Minister, Mayor, Deputy, Other

-
{ setIsHoldingImpPubOffice(e.target.value === 'yes') }}> - - -
- ${isHoldingImpPubOffice ? html` - -
- - - -
- `: ''} + ${selectedIdProof ? html` +
-
- C. Declaration of legal origin and accuracy of the information -
    -
  1. - All the values that we (I) deliver will have an origin that in no way will be related to the cultivation, production, manufacture, storage or transport or illicit traffic of narcotic or psychotropic substances or any other related illegal activity, nor will we (I) admit that third parties make deposits in accounts in our (my) charge with funds coming from the above mentioned activities or those foreseen by the Anti-Money Laundering Law, allowing any investigation procedure by Project B El Salvador or the corresponding authorities. -
    2. -
  2. - The information provided in this instrument to Project B El Salvador is true and may be verified at any time. -
    3. -
  3. - We exempt Project B El Salvador from any liability arising from erroneous, false, or inaccurate information that we (I) have (would have) provided in this document or from the violation thereof. -
    4. -
-
-
- D. Provided documents -
{ setSelectedIdProof(e.target.value) }}> - Select ID proof - - -
- ${selectedIdProof ? html` - - `: ''} - ${selectedFile ? html` -
- ${!isUploading ? html` -
- -

${selectedFile?.name}

-
- - -
-
- `: ''} -
- `: ''} -
+ `: ''} ${selectedFile ? html`
{ setSelectedVerifier(e.target.value) }}> Select KYC verifier @@ -1225,16 +1223,16 @@ // user KYC home page const selectedCountry = getRef('country_selector')?.value; const { renderedRequests, concurrentRequests, isVerified } = render.userRequests() + //
+ //
Select country
+ // renderHome()}> + // El Salvador + // India + // + //
const fileUploadSection = html`

KYC verification

-
-
Select country
- renderHome()}> - El Salvador - India - -
${render.countrySpecificForm(selectedCountry)}
`;