From 5a67beb249c34c926f09de54744151ce133d0568 Mon Sep 17 00:00:00 2001 From: sairaj mote Date: Mon, 4 Oct 2021 19:12:31 +0530 Subject: [PATCH] Added wallet deposit/withdraw UI --- args/config-sample.json | 11 -- public/components.js | 404 ++++++++++++++++++++++++++++++++++++- public/css/main.css | 146 +++++++++++--- public/css/main.min.css | 2 +- public/css/main.scss | 116 ++++++++--- public/index.html | 429 ++++++++++++++++++++++++++-------------- 6 files changed, 885 insertions(+), 223 deletions(-) delete mode 100644 args/config-sample.json diff --git a/args/config-sample.json b/args/config-sample.json deleted file mode 100644 index f380d30..0000000 --- a/args/config-sample.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "secret": "Secret_For_Session__Enter_A_Strong_String(Text/Password)", - "blockchain_id": "FLO_ID_of_the_admin", - "blockchain_private": "Private_Key_of_the_Admin", - "port": "8080", - - "sql_user": "mySQL_user", - "sql_pwd": "mySQL_password", - "sql_db": "supernode", - "sql_host": "localhost" -} \ No newline at end of file diff --git a/public/components.js b/public/components.js index 11fab0d..03baa75 100644 --- a/public/components.js +++ b/public/components.js @@ -418,7 +418,7 @@ input{ color: var(--accent-color) } :host([variant="outlined"]) .input { - box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 0.4) inset; + box-shadow: 0 0 0 0.1rem var(--border-color, rgba(var(--text-color), 0.4)) inset; background: rgba(var(--background-color), 1); } :host([variant="outlined"]) .label { @@ -2207,3 +2207,405 @@ class SlideButton extends HTMLElement { window.customElements.define('slide-button', SlideButton); +const smSelect = document.createElement('template') +smSelect.innerHTML = ` + +
+
+
+ +
+
+ +
+
`; +customElements.define('sm-select', class extends HTMLElement { + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(smSelect.content.cloneNode(true)) + + this.reset = this.reset.bind(this) + this.open = this.open.bind(this) + this.collapse = this.collapse.bind(this) + this.toggle = this.toggle.bind(this) + this.handleOptionsNavigation = this.handleOptionsNavigation.bind(this) + this.handleOptionSelection = this.handleOptionSelection.bind(this) + this.handleKeydown = this.handleKeydown.bind(this) + this.handleClickOutside = this.handleClickOutside.bind(this) + + this.availableOptions + this.previousOption + this.isOpen = false; + this.slideDown = [{ + transform: `translateY(-0.5rem)`, + opacity: 0 + }, + { + transform: `translateY(0)`, + opacity: 1 + } + ] + this.slideUp = [{ + transform: `translateY(0)`, + opacity: 1 + }, + { + transform: `translateY(-0.5rem)`, + opacity: 0 + } + ] + this.animationOptions = { + duration: 300, + fill: "forwards", + easing: 'ease' + } + + this.optionList = this.shadowRoot.querySelector('.options') + this.chevron = this.shadowRoot.querySelector('.toggle') + this.selection = this.shadowRoot.querySelector('.selection') + this.selectedOptionText = this.shadowRoot.querySelector('.selected-option-text') + } + static get observedAttributes() { + return ['value', 'disabled'] + } + get value() { + return this.getAttribute('value') + } + set value(val) { + this.setAttribute('value', val) + } + + reset(fire = true) { + if (this.availableOptions[0] && this.previousOption !== this.availableOptions[0]) { + const firstElement = this.availableOptions[0]; + if (this.previousOption) { + this.previousOption.classList.remove('check-selected') + } + firstElement.classList.add('check-selected') + this.value = firstElement.getAttribute('value') + this.selectedOptionText.textContent = firstElement.textContent + this.previousOption = firstElement; + if (fire) { + this.fireEvent() + } + } + } + + open() { + this.optionList.classList.remove('hide') + this.optionList.animate(this.slideDown, this.animationOptions) + this.chevron.classList.add('rotate') + this.isOpen = true + } + collapse() { + this.chevron.classList.remove('rotate') + this.optionList.animate(this.slideUp, this.animationOptions) + .onfinish = () => { + this.optionList.classList.add('hide') + this.isOpen = false + } + } + toggle() { + if (!this.isOpen && !this.hasAttribute('disabled')) { + this.open() + } else { + this.collapse() + } + } + + fireEvent() { + this.dispatchEvent(new CustomEvent('change', { + bubbles: true, + composed: true, + detail: { + value: this.value + } + })) + } + + handleOptionsNavigation(e) { + if (e.code === 'ArrowUp') { + e.preventDefault() + if (document.activeElement.previousElementSibling) { + document.activeElement.previousElementSibling.focus() + } else { + this.availableOptions[this.availableOptions.length - 1].focus() + } + } + else if (e.code === 'ArrowDown') { + e.preventDefault() + if (document.activeElement.nextElementSibling) { + document.activeElement.nextElementSibling.focus() + } else { + this.availableOptions[0].focus() + } + } + } + handleOptionSelection(e) { + if (this.previousOption !== document.activeElement) { + this.value = document.activeElement.getAttribute('value') + this.selectedOptionText.textContent = document.activeElement.textContent; + this.fireEvent() + if (this.previousOption) { + this.previousOption.classList.remove('check-selected') + } + document.activeElement.classList.add('check-selected') + this.previousOption = document.activeElement + } + } + handleClick(e) { + if (e.target === this) { + this.toggle() + } + else { + this.handleOptionSelection() + this.collapse() + } + } + handleKeydown(e) { + if (e.target === this) { + if (this.isOpen && e.code === 'ArrowDown') { + e.preventDefault() + this.availableOptions[0].focus() + this.handleOptionSelection(e) + } + else if (e.code === 'Enter' || e.code === 'Space') { + e.preventDefault() + this.toggle() + } + } + else { + this.handleOptionsNavigation(e) + this.handleOptionSelection(e) + if (e.code === 'Enter' || e.code === 'Space') { + e.preventDefault() + this.collapse() + } + } + } + handleClickOutside(e) { + if (this.isOpen && !this.contains(e.target)) { + this.collapse() + } + } + connectedCallback() { + this.setAttribute('role', 'listbox') + if (!this.hasAttribute('disabled')) { + this.selection.setAttribute('tabindex', '0') + } + let slot = this.shadowRoot.querySelector('slot') + slot.addEventListener('slotchange', e => { + this.availableOptions = slot.assignedElements() + this.reset(false) + }); + this.addEventListener('click', this.handleClick) + this.addEventListener('keydown', this.handleKeydown) + document.addEventListener('mousedown', this.handleClickOutside) + } + disconnectedCallback() { + this.removeEventListener('click', this.toggle) + this.removeEventListener('keydown', this.handleKeydown) + document.removeEventListener('mousedown', this.handleClickOutside) + } + attributeChangedCallback(name) { + if (name === "disabled") { + if (this.hasAttribute('disabled')) { + this.selection.removeAttribute('tabindex') + } else { + this.selection.setAttribute('tabindex', '0') + } + } + } +}) + +// option +const smOption = document.createElement('template') +smOption.innerHTML = ` + +
+ + +
`; +customElements.define('sm-option', class extends HTMLElement { + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(smOption.content.cloneNode(true)) + } + + connectedCallback() { + this.setAttribute('role', 'option') + this.setAttribute('tabindex', '0') + } +}) diff --git a/public/css/main.css b/public/css/main.css index 0618352..ae87c2c 100644 --- a/public/css/main.css +++ b/public/css/main.css @@ -376,24 +376,29 @@ ul { fill: var(--accent-color); } -#confirmation_popup { +#confirmation_popup, +#prompt_popup { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } -#confirmation_popup h4 { +#confirmation_popup h4, +#prompt_popup h4 { font-weight: 500; margin-bottom: 0.5rem; } -#confirmation_popup sm-button { +#confirmation_popup sm-button, +#prompt_popup sm-button { margin: 0; } -#confirmation_popup .flex { +#confirmation_popup .flex, +#prompt_popup .flex { padding: 0; margin-top: 1rem; } -#confirmation_popup .flex sm-button:first-of-type { +#confirmation_popup .flex sm-button:first-of-type, +#prompt_popup .flex sm-button:first-of-type { margin-right: 0.6rem; margin-left: auto; } @@ -405,6 +410,22 @@ button:active, transform: scale(0.96); } +.popup__header { + display: grid; + gap: 0.5rem; + width: 100%; + padding: 0 1.5rem 0 0.5rem; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + grid-template-columns: auto 1fr auto; +} + +.popup__header__close { + padding: 0.5rem; + cursor: pointer; +} + #main_page { padding: 1.5rem; } @@ -571,12 +592,11 @@ strip-option:last-of-type { #home { height: 100%; display: grid; - grid-template-rows: auto 1fr auto; grid-template-columns: minmax(0, 1fr); } #main_header { - padding: 1.5rem; + padding: 1.8rem 1.5rem; display: grid; gap: 1rem; -webkit-box-align: center; @@ -589,7 +609,7 @@ strip-option:last-of-type { --width: min(24rem, 100%); -ms-flex-item-align: start; align-self: flex-start; - padding: 0 1.5rem; + padding: 1rem 1.5rem; } #quantity_selector .button { @@ -611,22 +631,48 @@ strip-option:last-of-type { min-width: 8ch; } +#orders_section { + padding: 1.5rem; +} + #user_section { gap: 1.5rem; - padding: 0 1.5rem; + padding: 1.5rem; -ms-flex-line-pack: start; align-content: flex-start; } +.wallet_actions__wrapper { + grid-column: span 3; + gap: 0.5rem; + margin-top: 0.5rem; +} +.wallet_actions__wrapper .button { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; +} + .balance-card { display: grid; - grid-template-columns: auto 1fr auto; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 0.3rem 1rem; + padding: 0.5rem 0; border-radius: 0.5rem; } +.balance-card.is-locked { + grid-template-columns: auto 1fr; + gap: 1rem; +} +.balance-card.is-locked .label { + font-size: 0.8rem; + color: rgba(var(--text-color), 0.8); +} +.balance-card:not(.is-locked) { + grid-template-columns: auto 1fr auto; +} .balance-card__icon { display: -webkit-box; display: -ms-flexbox; @@ -649,27 +695,58 @@ strip-option:last-of-type { font-size: 0.9rem; font-weight: 500; } -.balance-card__amount { - font-size: 1rem; - font-weight: 700; +.balance-card__amount-wrapper { + grid-column: span 2; + gap: 0.3rem 1rem; + grid-template-columns: 1fr 1fr; } -.balance-card__actions { - grid-column: span 3; - gap: 0.5rem; - margin-top: 0.5rem; -} -.balance-card__actions .button { - -webkit-box-flex: 1; - -ms-flex: 1; - flex: 1; +.balance-card__amount-wrapper > :nth-child(even) { + text-align: right; } -@media screen and (max-width: 640px) { +.loader-button-wrapper { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + position: relative; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} +.loader-button-wrapper sm-button, +.loader-button-wrapper slide-button { + width: 100%; + z-index: 1; + -webkit-transition: -webkit-clip-path 0.3s; + transition: -webkit-clip-path 0.3s; + transition: clip-path 0.3s; + transition: clip-path 0.3s, -webkit-clip-path 0.3s; + -webkit-clip-path: circle(100%); + clip-path: circle(100%); +} +.loader-button-wrapper sm-button.clip, +.loader-button-wrapper slide-button.clip { + pointer-events: none; + -webkit-clip-path: circle(0); + clip-path: circle(0); +} +.loader-button-wrapper sm-spinner { + position: absolute; +} + +@media screen and (max-width: 40rem) { sm-button { --padding: 0.9rem 1.6rem; } } -@media screen and (min-width: 640px) { +@media screen and (min-width: 40rem) { + sm-popup { + --width: 24rem; + } + .h1 { font-size: 2rem; } @@ -686,6 +763,10 @@ strip-option:last-of-type { font-size: 1rem; } + .popup__header { + padding: 1rem 1.5rem 0 0.5rem; + } + #confirmation_popup { --width: 24rem; } @@ -694,25 +775,30 @@ strip-option:last-of-type { grid-template-columns: 1fr 90vw 1fr; } } -@media screen and (min-width: 1024px) { +@media screen and (min-width: 64rem) { .page-layout { grid-template-columns: 1fr 80vw 1fr; } #home { + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; + padding: 1.5vmax 3vmax; grid-template-columns: 24rem minmax(0, 1fr) 20rem; - grid-template-rows: auto 1fr; + gap: 1rem; } - - #main_header { - grid-column: span 3; + #home > * { + border-radius: 0.5rem; + background-color: var(--foreground-color); + border: solid thin rgba(var(--text-color), 0.1); } .hide-on-desktop { display: none; } } -@media screen and (min-width: 1920px) { +@media screen and (min-width: 120rem) { .page-layout { grid-template-columns: 1fr 70vw 1fr; } diff --git a/public/css/main.min.css b/public/css/main.min.css index 8f8ea9f..c14dcc3 100644 --- a/public/css/main.min.css +++ b/public/css/main.min.css @@ -1 +1 @@ -*{padding:0;margin:0;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:"Roboto",sans-serif}:root{font-size:clamp(1rem, 1.2vmax, 1.2rem)}html,body{height:100%;scroll-behavior:smooth}body{color:rgba(var(--text-color), 1);background:rgba(var(--background-color), 1)}body,body *{--accent-color: #504dff;--accent-color--light: #f4f4ff;--text-color: 36, 36, 36;--background-color: 255, 255, 255;--foreground-color: rgb(250, 252, 255);--danger-color: rgb(255, 75, 75);--green: #1cad59;--yellow: #f3a600;--loan-color: rgb(255, 171, 93);scrollbar-width:thin}body[data-theme=dark],body[data-theme=dark] *{--accent-color: #a3a1ff;--accent-color--light: rgba(142, 140, 255, 0.06);--text-color: 230, 230, 230;--text-color-light: 170, 170, 170;--background-color: 10, 10, 10;--foreground-color: rgb(20, 20, 20);--danger-color: rgb(255, 106, 106);--green: #00e676;--yellow: #ffd13a;--loan-color: rgb(255, 232, 170)}p,strong{font-size:.9rem;max-width:70ch;line-height:1.7;color:rgba(var(--text-color), 0.8)}p:not(:last-of-type),strong:not(:last-of-type){margin-bottom:1.5rem}a:where([class]){color:inherit;text-decoration:none}a:where([class]):focus-visible{-webkit-box-shadow:0 0 0 .1rem rgba(var(--text-color), 1) inset;box-shadow:0 0 0 .1rem rgba(var(--text-color), 1) inset}a{color:var(--accent-color)}button,.button{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;border:none;background-color:transparent;overflow:hidden;color:inherit;cursor:pointer;-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s, -webkit-transform .3s;-webkit-tap-highlight-color:transparent}.button{white-space:nowrap;padding:.6rem 1rem;border-radius:.3rem;font-weight:500;font-size:.8rem;background-color:var(--accent-color--light);color:var(--accent-color);-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.button--primary{background-color:var(--accent-color);color:rgba(var(--background-color), 1)}button:disabled{opacity:.5}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}sm-input{--border-radius: 0.5rem;--background: var(--accent-color--light)}sm-button{--padding: 0.7rem 1rem}sm-button[variant=primary] .icon{fill:rgba(var(--background-color), 1)}sm-button[disabled] .icon{fill:rgba(var(--text-color), 0.6)}ul{list-style:none}.flex{display:-webkit-box;display:-ms-flexbox;display:flex}.grid{display:grid}.hide{opacity:0;pointer-events:none}.hide-completely{display:none !important}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.breakable{overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-ms-hyphens:auto;-webkit-hyphens:auto;hyphens:auto}.full-bleed{grid-column:1/4}.h1{font-size:1.5rem}.h2{font-size:1.2rem}.h3{font-size:1rem}.h4{font-size:.9rem}.h5{font-size:.8rem}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.flex{display:-webkit-box;display:-ms-flexbox;display:flex}.grid{display:grid}.grid-3{grid-template-columns:1fr auto auto}.flow-column{grid-auto-flow:column}.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-start{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.align-center{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.text-center{text-align:center}.justify-start{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:start}.justify-center{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.justify-right{margin-left:auto}.align-self-center{-ms-flex-item-align:center;align-self:center}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.direction-column{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.space-between{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.stretch{-webkit-box-pack:stretch;-ms-flex-pack:stretch;justify-content:stretch;justify-items:stretch}.stretch>*{width:100%}.interact{position:relative;cursor:pointer;-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s, -webkit-transform .3s;-webkit-tap-highlight-color:transparent}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)~.empty-state{display:none}.icon{width:1.5rem;height:1.5rem;fill:rgba(var(--text-color), 0.8)}.button__icon{height:1.2rem;width:1.2rem}.button__icon--left{margin-right:.5rem}.button__icon--right{margin-left:.5rem}.icon-button{padding:.6rem;border-radius:.8rem;background-color:var(--accent-color--light);height:-webkit-max-content;height:-moz-max-content;height:max-content}.icon-button .icon{fill:var(--accent-color)}#confirmation_popup{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}#confirmation_popup h4{font-weight:500;margin-bottom:.5rem}#confirmation_popup sm-button{margin:0}#confirmation_popup .flex{padding:0;margin-top:1rem}#confirmation_popup .flex sm-button:first-of-type{margin-right:.6rem;margin-left:auto}button:active,.button:active,.interact:active{-webkit-transform:scale(0.96);transform:scale(0.96)}#main_page{padding:1.5rem}#main_page>section:nth-of-type(1){-ms-flex-line-pack:start;align-content:flex-start}.logo{display:grid;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;grid-template-columns:auto 1fr;gap:0 .3rem;margin-right:1rem}.logo h4{text-transform:capitalize;font-size:.9rem;font-weight:600}.logo .main-logo{height:1.4rem;width:1.4rem;fill:rgba(var(--text-color), 1);stroke:none}details summary{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}details[open]>summary{margin-bottom:1rem}details[open]>summary .icon{-webkit-transform:rotate(180deg);transform:rotate(180deg)}strip-select{--gap: 0;background-color:var(--accent-color--light);border-radius:.3rem}strip-option{text-transform:uppercase;font-weight:500;letter-spacing:.05em;font-size:.8rem;--border-radius: 0;--active-option-color: rgba(var(--background-color), 1);--active-option-background-color: var(--accent-color)}strip-option:first-of-type{--border-radius: 0.3rem 0 0 0.3rem}strip-option:last-of-type{--border-radius: 0 0.3rem 0.3rem 0}.warning{background-color:khaki;color:rgba(0,0,0,.7);padding:1rem;border-radius:.5rem;line-height:1.5}.page-layout{display:grid;grid-template-columns:1.5rem minmax(0, 1fr) 1.5rem}.page-layout>*{grid-column:2/3}.page{height:100%}.table__row{display:grid;grid-template-columns:repeat(var(--table-columns), auto)}.table__header{color:rgba(var(--text-color), 0.8);font-size:.8rem}#landing{grid-template-rows:auto 1fr}#landing header{padding:1.5rem 0}#landing>.grid{-ms-flex-line-pack:start;align-content:flex-start;text-align:center;gap:1rem}#sign_in,#sign_up{grid-template-rows:auto 1fr;-webkit-box-align:center;-ms-flex-align:center;align-items:center}#sign_in section,#sign_up section{margin-top:-6rem;justify-self:center;width:min(24rem, 100%)}#sign_in sm-form,#sign_up sm-form{margin:2rem 0}#sign_in header,#sign_up header{padding:1.5rem 0}#sign_up sm-copy{font-size:.9rem;--button-border-radius: 0.5rem}#sign_up .h2{margin-bottom:.5rem}#sign_up .card{margin:1.5rem 0}#sign_up h5{font-weight:500;color:rgba(var(--text-color), 0.8)}#sign_up .warning{margin-top:2rem}#loading{place-content:center;text-align:center}#loading sm-spinner{margin-bottom:1.5rem}#home{height:100%;display:grid;grid-template-rows:auto 1fr auto;grid-template-columns:minmax(0, 1fr)}#main_header{padding:1.5rem;display:grid;gap:1rem;-webkit-box-align:center;-ms-flex-align:center;align-items:center;grid-template-columns:1fr auto}#trade_form{--width: min(24rem, 100%);-ms-flex-item-align:start;align-self:flex-start;padding:0 1.5rem}#quantity_selector .button{-webkit-box-flex:1;-ms-flex:1;flex:1;padding:.5rem .6rem;margin-left:.5rem}#quantity_type{font-size:.8rem;padding-right:.5rem;border-right:thin solid rgba(var(--text-color), 0.3);margin-right:auto;color:rgba(var(--text-color), 0.8);line-height:1.5;font-weight:500;min-width:8ch}#user_section{gap:1.5rem;padding:0 1.5rem;-ms-flex-line-pack:start;align-content:flex-start}.balance-card{display:grid;grid-template-columns:auto 1fr auto;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:.3rem 1rem;border-radius:.5rem}.balance-card__icon{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-line-pack:center;align-content:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:.6rem;border-radius:.8rem;background-color:var(--accent-color--light)}.balance-card__icon .icon{height:1.3rem;width:1.3rem;fill:var(--accent-color)}.balance-card__token{font-size:.9rem;font-weight:500}.balance-card__amount{font-size:1rem;font-weight:700}.balance-card__actions{grid-column:span 3;gap:.5rem;margin-top:.5rem}.balance-card__actions .button{-webkit-box-flex:1;-ms-flex:1;flex:1}@media screen and (max-width: 640px){sm-button{--padding: 0.9rem 1.6rem}}@media screen and (min-width: 640px){.h1{font-size:2rem}.h2{font-size:1.8rem}.h3{font-size:1.3rem}.h4{font-size:1rem}#confirmation_popup{--width: 24rem}.page-layout{grid-template-columns:1fr 90vw 1fr}}@media screen and (min-width: 1024px){.page-layout{grid-template-columns:1fr 80vw 1fr}#home{grid-template-columns:24rem minmax(0, 1fr) 20rem;grid-template-rows:auto 1fr}#main_header{grid-column:span 3}.hide-on-desktop{display:none}}@media screen and (min-width: 1920px){.page-layout{grid-template-columns:1fr 70vw 1fr}}@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)}.nav-item,.interact{-webkit-transition:background-color .3s,-webkit-transform .3s;transition:background-color .3s,-webkit-transform .3s;transition:background-color .3s,transform .3s;transition:background-color .3s,transform .3s,-webkit-transform .3s}.nav-item:hover,.interact:hover{background-color:var(--accent-color--light)}} \ No newline at end of file +*{padding:0;margin:0;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:"Roboto",sans-serif}:root{font-size:clamp(1rem, 1.2vmax, 1.2rem)}html,body{height:100%;scroll-behavior:smooth}body{color:rgba(var(--text-color), 1);background:rgba(var(--background-color), 1)}body,body *{--accent-color: #504dff;--accent-color--light: #f4f4ff;--text-color: 36, 36, 36;--background-color: 255, 255, 255;--foreground-color: rgb(250, 252, 255);--danger-color: rgb(255, 75, 75);--green: #1cad59;--yellow: #f3a600;--loan-color: rgb(255, 171, 93);scrollbar-width:thin}body[data-theme=dark],body[data-theme=dark] *{--accent-color: #a3a1ff;--accent-color--light: rgba(142, 140, 255, 0.06);--text-color: 230, 230, 230;--text-color-light: 170, 170, 170;--background-color: 10, 10, 10;--foreground-color: rgb(20, 20, 20);--danger-color: rgb(255, 106, 106);--green: #00e676;--yellow: #ffd13a;--loan-color: rgb(255, 232, 170)}p,strong{font-size:.9rem;max-width:70ch;line-height:1.7;color:rgba(var(--text-color), 0.8)}p:not(:last-of-type),strong:not(:last-of-type){margin-bottom:1.5rem}a:where([class]){color:inherit;text-decoration:none}a:where([class]):focus-visible{-webkit-box-shadow:0 0 0 .1rem rgba(var(--text-color), 1) inset;box-shadow:0 0 0 .1rem rgba(var(--text-color), 1) inset}a{color:var(--accent-color)}button,.button{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;border:none;background-color:transparent;overflow:hidden;color:inherit;cursor:pointer;-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s, -webkit-transform .3s;-webkit-tap-highlight-color:transparent}.button{white-space:nowrap;padding:.6rem 1rem;border-radius:.3rem;font-weight:500;font-size:.8rem;background-color:var(--accent-color--light);color:var(--accent-color);-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.button--primary{background-color:var(--accent-color);color:rgba(var(--background-color), 1)}button:disabled{opacity:.5}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}sm-input{--border-radius: 0.5rem;--background: var(--accent-color--light)}sm-button{--padding: 0.7rem 1rem}sm-button[variant=primary] .icon{fill:rgba(var(--background-color), 1)}sm-button[disabled] .icon{fill:rgba(var(--text-color), 0.6)}ul{list-style:none}.flex{display:-webkit-box;display:-ms-flexbox;display:flex}.grid{display:grid}.hide{opacity:0;pointer-events:none}.hide-completely{display:none !important}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.breakable{overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-ms-hyphens:auto;-webkit-hyphens:auto;hyphens:auto}.full-bleed{grid-column:1/4}.h1{font-size:1.5rem}.h2{font-size:1.2rem}.h3{font-size:1rem}.h4{font-size:.9rem}.h5{font-size:.8rem}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.flex{display:-webkit-box;display:-ms-flexbox;display:flex}.grid{display:grid}.grid-3{grid-template-columns:1fr auto auto}.flow-column{grid-auto-flow:column}.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-start{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.align-center{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.text-center{text-align:center}.justify-start{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:start}.justify-center{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.justify-right{margin-left:auto}.align-self-center{-ms-flex-item-align:center;align-self:center}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.direction-column{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.space-between{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.stretch{-webkit-box-pack:stretch;-ms-flex-pack:stretch;justify-content:stretch;justify-items:stretch}.stretch>*{width:100%}.interact{position:relative;cursor:pointer;-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s, -webkit-transform .3s;-webkit-tap-highlight-color:transparent}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)~.empty-state{display:none}.icon{width:1.5rem;height:1.5rem;fill:rgba(var(--text-color), 0.8)}.button__icon{height:1.2rem;width:1.2rem}.button__icon--left{margin-right:.5rem}.button__icon--right{margin-left:.5rem}.icon-button{padding:.6rem;border-radius:.8rem;background-color:var(--accent-color--light);height:-webkit-max-content;height:-moz-max-content;height:max-content}.icon-button .icon{fill:var(--accent-color)}#confirmation_popup,#prompt_popup{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}#confirmation_popup h4,#prompt_popup h4{font-weight:500;margin-bottom:.5rem}#confirmation_popup sm-button,#prompt_popup sm-button{margin:0}#confirmation_popup .flex,#prompt_popup .flex{padding:0;margin-top:1rem}#confirmation_popup .flex sm-button:first-of-type,#prompt_popup .flex sm-button:first-of-type{margin-right:.6rem;margin-left:auto}button:active,.button:active,.interact:active{-webkit-transform:scale(0.96);transform:scale(0.96)}.popup__header{display:grid;gap:.5rem;width:100%;padding:0 1.5rem 0 .5rem;-webkit-box-align:center;-ms-flex-align:center;align-items:center;grid-template-columns:auto 1fr auto}.popup__header__close{padding:.5rem;cursor:pointer}#main_page{padding:1.5rem}#main_page>section:nth-of-type(1){-ms-flex-line-pack:start;align-content:flex-start}.logo{display:grid;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;grid-template-columns:auto 1fr;gap:0 .3rem;margin-right:1rem}.logo h4{text-transform:capitalize;font-size:.9rem;font-weight:600}.logo .main-logo{height:1.4rem;width:1.4rem;fill:rgba(var(--text-color), 1);stroke:none}details summary{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}details[open]>summary{margin-bottom:1rem}details[open]>summary .icon{-webkit-transform:rotate(180deg);transform:rotate(180deg)}strip-select{--gap: 0;background-color:var(--accent-color--light);border-radius:.3rem}strip-option{text-transform:uppercase;font-weight:500;letter-spacing:.05em;font-size:.8rem;--border-radius: 0;--active-option-color: rgba(var(--background-color), 1);--active-option-background-color: var(--accent-color)}strip-option:first-of-type{--border-radius: 0.3rem 0 0 0.3rem}strip-option:last-of-type{--border-radius: 0 0.3rem 0.3rem 0}.warning{background-color:khaki;color:rgba(0,0,0,.7);padding:1rem;border-radius:.5rem;line-height:1.5}.page-layout{display:grid;grid-template-columns:1.5rem minmax(0, 1fr) 1.5rem}.page-layout>*{grid-column:2/3}.page{height:100%}.table__row{display:grid;grid-template-columns:repeat(var(--table-columns), auto)}.table__header{color:rgba(var(--text-color), 0.8);font-size:.8rem}#landing{grid-template-rows:auto 1fr}#landing header{padding:1.5rem 0}#landing>.grid{-ms-flex-line-pack:start;align-content:flex-start;text-align:center;gap:1rem}#sign_in,#sign_up{grid-template-rows:auto 1fr;-webkit-box-align:center;-ms-flex-align:center;align-items:center}#sign_in section,#sign_up section{margin-top:-6rem;justify-self:center;width:min(24rem, 100%)}#sign_in sm-form,#sign_up sm-form{margin:2rem 0}#sign_in header,#sign_up header{padding:1.5rem 0}#sign_up sm-copy{font-size:.9rem;--button-border-radius: 0.5rem}#sign_up .h2{margin-bottom:.5rem}#sign_up .card{margin:1.5rem 0}#sign_up h5{font-weight:500;color:rgba(var(--text-color), 0.8)}#sign_up .warning{margin-top:2rem}#loading{place-content:center;text-align:center}#loading sm-spinner{margin-bottom:1.5rem}#home{height:100%;display:grid;grid-template-columns:minmax(0, 1fr)}#main_header{padding:1.8rem 1.5rem;display:grid;gap:1rem;-webkit-box-align:center;-ms-flex-align:center;align-items:center;grid-template-columns:1fr auto}#trade_form{--width: min(24rem, 100%);-ms-flex-item-align:start;align-self:flex-start;padding:1rem 1.5rem}#quantity_selector .button{-webkit-box-flex:1;-ms-flex:1;flex:1;padding:.5rem .6rem;margin-left:.5rem}#quantity_type{font-size:.8rem;padding-right:.5rem;border-right:thin solid rgba(var(--text-color), 0.3);margin-right:auto;color:rgba(var(--text-color), 0.8);line-height:1.5;font-weight:500;min-width:8ch}#orders_section{padding:1.5rem}#user_section{gap:1.5rem;padding:1.5rem;-ms-flex-line-pack:start;align-content:flex-start}.wallet_actions__wrapper{grid-column:span 3;gap:.5rem;margin-top:.5rem}.wallet_actions__wrapper .button{-webkit-box-flex:1;-ms-flex:1;flex:1}.balance-card{display:grid;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:.3rem 1rem;padding:.5rem 0;border-radius:.5rem}.balance-card.is-locked{grid-template-columns:auto 1fr;gap:1rem}.balance-card.is-locked .label{font-size:.8rem;color:rgba(var(--text-color), 0.8)}.balance-card:not(.is-locked){grid-template-columns:auto 1fr auto}.balance-card__icon{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-line-pack:center;align-content:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:.6rem;border-radius:.8rem;background-color:var(--accent-color--light)}.balance-card__icon .icon{height:1.3rem;width:1.3rem;fill:var(--accent-color)}.balance-card__token{font-size:.9rem;font-weight:500}.balance-card__amount-wrapper{grid-column:span 2;gap:.3rem 1rem;grid-template-columns:1fr 1fr}.balance-card__amount-wrapper>:nth-child(even){text-align:right}.loader-button-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.loader-button-wrapper sm-button,.loader-button-wrapper slide-button{width:100%;z-index:1;-webkit-transition:-webkit-clip-path .3s;transition:-webkit-clip-path .3s;transition:clip-path .3s;transition:clip-path .3s, -webkit-clip-path .3s;-webkit-clip-path:circle(100%);clip-path:circle(100%)}.loader-button-wrapper sm-button.clip,.loader-button-wrapper slide-button.clip{pointer-events:none;-webkit-clip-path:circle(0);clip-path:circle(0)}.loader-button-wrapper sm-spinner{position:absolute}@media screen and (max-width: 40rem){sm-button{--padding: 0.9rem 1.6rem}}@media screen and (min-width: 40rem){sm-popup{--width: 24rem}.h1{font-size:2rem}.h2{font-size:1.8rem}.h3{font-size:1.3rem}.h4{font-size:1rem}.popup__header{padding:1rem 1.5rem 0 .5rem}#confirmation_popup{--width: 24rem}.page-layout{grid-template-columns:1fr 90vw 1fr}}@media screen and (min-width: 64rem){.page-layout{grid-template-columns:1fr 80vw 1fr}#home{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;padding:1.5vmax 3vmax;grid-template-columns:24rem minmax(0, 1fr) 20rem;gap:1rem}#home>*{border-radius:.5rem;background-color:var(--foreground-color);border:solid thin rgba(var(--text-color), 0.1)}.hide-on-desktop{display:none}}@media screen and (min-width: 120rem){.page-layout{grid-template-columns:1fr 70vw 1fr}}@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)}.nav-item,.interact{-webkit-transition:background-color .3s,-webkit-transform .3s;transition:background-color .3s,-webkit-transform .3s;transition:background-color .3s,transform .3s;transition:background-color .3s,transform .3s,-webkit-transform .3s}.nav-item:hover,.interact:hover{background-color:var(--accent-color--light)}} \ No newline at end of file diff --git a/public/css/main.scss b/public/css/main.scss index 71b1e0c..e1bcd63 100644 --- a/public/css/main.scss +++ b/public/css/main.scss @@ -341,22 +341,19 @@ ul { fill: var(--accent-color); } } -#confirmation_popup { +#confirmation_popup, +#prompt_popup { flex-direction: column; - h4 { font-weight: 500; margin-bottom: 0.5rem; } - sm-button { margin: 0; } - .flex { padding: 0; margin-top: 1rem; - sm-button:first-of-type { margin-right: 0.6rem; margin-left: auto; @@ -370,6 +367,20 @@ button:active, transform: scale(0.96); } +.popup__header { + display: grid; + gap: 0.5rem; + width: 100%; + padding: 0 1.5rem 0 0.5rem; + align-items: center; + grid-template-columns: auto 1fr auto; +} + +.popup__header__close { + padding: 0.5rem; + cursor: pointer; +} + #main_page { padding: 1.5rem; @@ -517,12 +528,11 @@ strip-option { #home { height: 100%; display: grid; - grid-template-rows: auto 1fr auto; grid-template-columns: minmax(0, 1fr); } #main_header { - padding: 1.5rem; + padding: 1.8rem 1.5rem; display: grid; gap: 1rem; align-items: center; @@ -532,7 +542,7 @@ strip-option { #trade_form { --width: min(24rem, 100%); align-self: flex-start; - padding: 0 1.5rem; + padding: 1rem 1.5rem; } #quantity_selector { .button { @@ -551,19 +561,41 @@ strip-option { font-weight: 500; min-width: 8ch; } +#orders_section { + padding: 1.5rem; +} #user_section { gap: 1.5rem; - padding: 0 1.5rem; + padding: 1.5rem; align-content: flex-start; } .user_section__header { } +.wallet_actions__wrapper { + grid-column: span 3; + gap: 0.5rem; + margin-top: 0.5rem; + .button { + flex: 1; + } +} .balance-card { display: grid; - grid-template-columns: auto 1fr auto; align-items: center; gap: 0.3rem 1rem; + padding: 0.5rem 0; border-radius: 0.5rem; + &.is-locked { + grid-template-columns: auto 1fr; + gap: 1rem; + .label { + font-size: 0.8rem; + color: rgba(var(--text-color), 0.8); + } + } + &:not(.is-locked) { + grid-template-columns: auto 1fr auto; + } &__icon { display: flex; align-content: center; @@ -581,25 +613,44 @@ strip-option { font-size: 0.9rem; font-weight: 500; } - &__amount { - font-size: 1rem; - font-weight: 700; - } - &__actions { - grid-column: span 3; - gap: 0.5rem; - margin-top: 0.5rem; - .button { - flex: 1; + &__amount-wrapper { + grid-column: span 2; + gap: 0.3rem 1rem; + grid-template-columns: 1fr 1fr; + & > :nth-child(even) { + text-align: right; } } } -@media screen and (max-width: 640px) { +.loader-button-wrapper { + display: flex; + position: relative; + justify-content: center; + align-items: center; + sm-button, + slide-button { + width: 100%; + z-index: 1; + transition: clip-path 0.3s; + clip-path: circle(100%); + &.clip { + pointer-events: none; + clip-path: circle(0); + } + } + sm-spinner { + position: absolute; + } +} +@media screen and (max-width: 40rem) { sm-button { --padding: 0.9rem 1.6rem; } } -@media screen and (min-width: 640px) { +@media screen and (min-width: 40rem) { + sm-popup { + --width: 24rem; + } .h1 { font-size: 2rem; } @@ -615,6 +666,9 @@ strip-option { .h4 { font-size: 1rem; } + .popup__header { + padding: 1rem 1.5rem 0 0.5rem; + } #confirmation_popup { --width: 24rem; } @@ -622,24 +676,28 @@ strip-option { grid-template-columns: 1fr 90vw 1fr; } } -@media screen and (max-width: 1024px) { +@media screen and (max-width: 64rem) { } -@media screen and (min-width: 1024px) { +@media screen and (min-width: 64rem) { .page-layout { grid-template-columns: 1fr 80vw 1fr; } #home { + align-items: flex-start; + padding: 1.5vmax 3vmax; grid-template-columns: 24rem minmax(0, 1fr) 20rem; - grid-template-rows: auto 1fr; - } - #main_header { - grid-column: span 3; + gap: 1rem; + & > * { + border-radius: 0.5rem; + background-color: var(--foreground-color); + border: solid thin rgba(var(--text-color), 0.1); + } } .hide-on-desktop { display: none; } } -@media screen and (min-width: 1920px) { +@media screen and (min-width: 120rem) { .page-layout { grid-template-columns: 1fr 70vw 1fr; } diff --git a/public/index.html b/public/index.html index 726c31f..aaba03f 100644 --- a/public/index.html +++ b/public/index.html @@ -50,6 +50,15 @@ OK + +

+

+ +
+ Cancel + OK +
+
-
-
- + + + +
+

Trade FLO

+ + Buy + Sell + +
+ + + + +
+ Rupee + + + + +
+ BUY + + +
-

Trade FLO

- - Buy - Sell +

My orders

+ + Open + Completed
- - - - -
- Rupee - - - - -
- BUY - -
-

My orders

Quantity
At price
-
Order Placed
+
Order placed
@@ -195,44 +214,69 @@ My wallet -
-
- - - -
-
FLO
-
-
- -
-
-
- - - +
+

Balance

+
+
+ + + +
+
FLO
+
-
Rupee
-
₹15402
-
- - +
+
+ + + +
+
Rupee
+
+ +
+ +

+
+ + + + + +
+ +
+ +
Login @@ -247,8 +291,6 @@
Profile
- FLO:
- Rupee:

@@ -278,7 +320,7 @@ Select Quantity Min Price - Order Placed + Order placed @@ -360,6 +402,19 @@
+ +