diff --git a/components.js b/components.js deleted file mode 100644 index b17a68c..0000000 --- a/components.js +++ /dev/null @@ -1,3589 +0,0 @@ -//Button -const smButton = document.createElement('template') -smButton.innerHTML = ` - -
- -
`; -customElements.define('sm-button', - class extends HTMLElement { - constructor() { - super() - this.attachShadow({ - mode: 'open' - }).append(smButton.content.cloneNode(true)) - } - - get disabled() { - return this.isDisabled - } - - set disabled(value) { - if (value && !this.isDisabled) { - this.isDisabled = true - this.setAttribute('disabled', '') - this.button.removeAttribute('tabindex') - } else if (!value && this.isDisabled) { - this.isDisabled = false - this.removeAttribute('disabled') - } - } - - dispatch() { - if (this.isDisabled) { - this.dispatchEvent(new CustomEvent('disabled', { - bubbles: true, - composed: true - })) - } else { - this.dispatchEvent(new CustomEvent('clicked', { - bubbles: true, - composed: true - })) - } - } - - connectedCallback() { - this.isDisabled = false - this.button = this.shadowRoot.querySelector('.button') - if (this.hasAttribute('disabled') && !this.isDisabled) - this.isDisabled = true - this.addEventListener('click', (e) => { - this.dispatch() - }) - this.addEventListener('keyup', (e) => { - if (e.code === "Enter" || e.code === "Space") - this.dispatch() - }) - } - }) - -//Input -const smInput = document.createElement('template') -smInput.innerHTML = ` - -
- -
-
-`; -customElements.define('sm-input', - class extends HTMLElement { - constructor() { - super() - this.attachShadow({ - mode: 'open' - }).append(smInput.content.cloneNode(true)) - } - static get observedAttributes() { - return ['placeholder'] - } - - get value() { - return this.shadowRoot.querySelector('input').value - } - - set value(val) { - this.shadowRoot.querySelector('input').value = val; - this.checkInput() - this.fireEvent() - } - - get placeholder() { - return this.getAttribute('placeholder') - } - - set placeholder(val) { - this.setAttribute('placeholder', val) - } - - get type() { - return this.getAttribute('type') - } - - get isValid() { - return this.shadowRoot.querySelector('input').checkValidity() - } - - get validity() { - return this.shadowRoot.querySelector('input').validity - } - - set disabled(value) { - if (value) - this.shadowRoot.querySelector('.input').classList.add('disabled') - else - this.shadowRoot.querySelector('.input').classList.remove('disabled') - } - set readOnly(value) { - if (value) { - this.shadowRoot.querySelector('input').setAttribute('readonly', '') - this.shadowRoot.querySelector('.input').classList.add('readonly') - } else { - this.shadowRoot.querySelector('input').removeAttribute('readonly') - this.shadowRoot.querySelector('.input').classList.remove('readonly') - } - } - - setValidity = (message) => { - this.feedbackText.textContent = message - } - - showValidity = () => { - this.feedbackText.classList.remove('hide-completely') - } - - hideValidity = () => { - this.feedbackText.classList.add('hide-completely') - } - - focusIn = () => { - this.input.focus() - } - - focusOut = () => { - this.input.blur() - } - - fireEvent = () => { - let event = new Event('input', { - bubbles: true, - cancelable: true, - composed: true - }); - this.dispatchEvent(event); - } - - checkInput = (e) => { - if (!this.hasAttribute('placeholder') || this.getAttribute('placeholder') === '') return; - if (this.input.value !== '') { - if (this.animate) - this.inputParent.classList.add('animate-label') - else - this.label.classList.add('hide') - if (!this.readonly) - this.clearBtn.classList.remove('hide') - } else { - if (this.animate) - this.inputParent.classList.remove('animate-label') - else - this.label.classList.remove('hide') - if (!this.readonly) - this.clearBtn.classList.add('hide') - } - } - - - connectedCallback() { - this.inputParent = this.shadowRoot.querySelector('.input') - this.clearBtn = this.shadowRoot.querySelector('.clear') - this.label = this.shadowRoot.querySelector('.label') - this.feedbackText = this.shadowRoot.querySelector('.feedback-text') - this.valueChanged = false; - this.readonly = false - this.isNumeric = false - this.min - this.max - this.animate = this.hasAttribute('animate') - this.input = this.shadowRoot.querySelector('input') - this.shadowRoot.querySelector('.label').textContent = this.getAttribute('placeholder') - if (this.hasAttribute('value')) { - this.input.value = this.getAttribute('value') - this.checkInput(e) - } - if (this.hasAttribute('required')) { - this.input.setAttribute('required', '') - } - if (this.hasAttribute('min')) { - let minValue = this.getAttribute('min') - this.input.setAttribute('min', minValue) - this.min = parseInt(minValue) - } - if (this.hasAttribute('max')) { - let maxValue = this.getAttribute('max') - this.input.setAttribute('max', maxValue) - this.max = parseInt(maxValue) - } - if (this.hasAttribute('minlength')) { - let minValue = this.getAttribute('minlength') - this.input.setAttribute('minlength', minValue) - } - if (this.hasAttribute('maxlength')) { - let maxValue = this.getAttribute('maxlength') - this.input.setAttribute('maxlength', maxValue) - } - if (this.hasAttribute('pattern')) { - this.input.setAttribute('pattern', this.getAttribute('pattern')) - } - if (this.hasAttribute('readonly')) { - this.input.setAttribute('readonly', '') - this.readonly = true - } - if (this.hasAttribute('disabled')) { - this.inputParent.classList.add('disabled') - } - if (this.hasAttribute('error-text')) { - this.feedbackText.textContent = this.getAttribute('error-text') - } - if (this.hasAttribute('type')) { - if (this.getAttribute('type') === 'number') { - this.input.setAttribute('inputmode', 'numeric') - this.input.setAttribute('type', 'number') - this.isNumeric = true - } else - this.input.setAttribute('type', this.getAttribute('type')) - } else - this.input.setAttribute('type', 'text') - this.input.addEventListener('input', e => { - this.checkInput(e) - }) - this.clearBtn.addEventListener('click', e => { - this.value = '' - }) - } - - attributeChangedCallback(name, oldValue, newValue) { - if (oldValue !== newValue) { - if (name === 'placeholder') { - this.shadowRoot.querySelector('.label').textContent = newValue; - this.setAttribute('aria-label', newValue); - } - } - } - }) - -//textarea -const smTextarea = document.createElement('template') -smTextarea.innerHTML = ` - - -`; -customElements.define('sm-textarea', - class extends HTMLElement { - constructor() { - super() - this.attachShadow({ - mode: 'open' - }).append(smTextarea.content.cloneNode(true)) - } - static get observedAttributes() { - return ['placeholder'] - } - - get value() { - return this.shadowRoot.querySelector('textarea').value - } - - set value(val) { - this.shadowRoot.querySelector('textarea').value = val; - this.checkInput() - this.fireEvent() - } - - get placeholder() { - return this.getAttribute('placeholder') - } - - set placeholder(val) { - this.setAttribute('placeholder', val) - } - - fireEvent() { - let event = new Event('input', { - bubbles: true, - cancelable: true, - composed: true - }); - this.dispatchEvent(event); - } - - checkInput() { - if (!this.hasAttribute('placeholder') || this.getAttribute('placeholder') === '') - return; - if (this.input.value !== '') { - this.clearBtn.classList.remove('hide') - if (this.animate) - this.inputParent.classList.add('animate-label') - else - this.label.classList.add('hide') - } else { - this.clearBtn.classList.add('hide') - if (this.animate) - this.inputParent.classList.remove('animate-label') - else - this.label.classList.remove('hide') - } - - this.input.style.height = 'auto' - this.input.style.height = (this.input.scrollHeight) + 'px'; - } - - - connectedCallback() { - this.inputParent = this.shadowRoot.querySelector('.input') - this.clearBtn = this.shadowRoot.querySelector('.clear') - this.label = this.shadowRoot.querySelector('.label') - this.valueChanged = false; - this.animate = this.hasAttribute('animate') - this.input = this.shadowRoot.querySelector('textarea') - this.shadowRoot.querySelector('.label').textContent = this.getAttribute('placeholder') - - this.input.setAttribute('style', 'height:' + (this.input.scrollHeight) + 'px;overflow-y:hidden;'); - - if (this.hasAttribute('value')) { - this.input.value = this.getAttribute('value') - this.checkInput() - } - if (this.hasAttribute('required')) { - this.input.setAttribute('required', '') - } - if (this.hasAttribute('readonly')) { - this.input.setAttribute('readonly', '') - } - this.input.addEventListener('input', e => { - this.checkInput() - }) - this.clearBtn.addEventListener('click', e => { - this.value = '' - }) - } - - attributeChangedCallback(name, oldValue, newValue) { - if (oldValue !== newValue) { - if (name === 'placeholder') - this.shadowRoot.querySelector('.label').textContent = newValue; - } - } - }) - -// tab -const smTab = document.createElement('template') -smTab.innerHTML = ` - -
- -
-`; - -customElements.define('sm-tab', class extends HTMLElement { - constructor() { - super() - this.shadow = this.attachShadow({ - mode: 'open' - }).append(smTab.content.cloneNode(true)) - } -}) - -//chcekbox - -const smCheckbox = document.createElement('template') -smCheckbox.innerHTML = ` - -` -customElements.define('sm-checkbox', class extends HTMLElement { - constructor() { - super() - this.attachShadow({ - mode: 'open' - }).append(smCheckbox.content.cloneNode(true)) - - this.checkbox = this.shadowRoot.querySelector('.checkbox'); - this.input = this.shadowRoot.querySelector('input') - - this.isChecked = false - this.isDisabled = false - } - - static get observedAttributes() { - return ['disabled', 'checked'] - } - - get disabled() { - return this.getAttribute('disabled') - } - - set disabled(val) { - this.setAttribute('disabled', val) - } - - get checked() { - return this.getAttribute('checked') - } - - set checked(value) { - this.setAttribute('checked', value) - } - - dispatch() { - this.dispatchEvent(new CustomEvent('change', { - bubbles: true, - composed: true - })) - } - - connectedCallback() { - this.addEventListener('keyup', e => { - if ((e.code === "Enter" || e.code === "Space") && this.isDisabled == false) { - this.isChecked = !this.isChecked - this.setAttribute('checked', this.isChecked) - } - }) - } - attributeChangedCallback(name, oldValue, newValue) { - if (oldValue !== newValue) { - if (name === 'disabled') { - if (newValue === 'true') { - this.checkbox.classList.add('disabled') - this.isDisabled = true - } else { - this.checkbox.classList.remove('disabled') - this.isDisabled = false - } - } - if (name === 'checked') { - if (newValue == 'true') { - this.isChecked = true - this.input.checked = true - this.dispatch() - } else { - this.isChecked = false - this.input.checked = false - this.dispatch() - } - } - } - } - -}) - -//switch - -const smSwitch = document.createElement('template') -smSwitch.innerHTML = ` - -` - -customElements.define('sm-switch', class extends HTMLElement { - constructor() { - super() - this.attachShadow({ - mode: 'open' - }).append(smSwitch.content.cloneNode(true)) - this.switch = this.shadowRoot.querySelector('.switch'); - this.input = this.shadowRoot.querySelector('input') - this.isChecked = false - this.isDisabled = false - } - - get disabled() { - return this.getAttribute('disabled') - } - - set disabled(val) { - if (val) { - this.disabled = true - this.setAttribute('disabled', '') - this.switch.classList.add('disabled') - } else { - this.disabled = false - this.removeAttribute('disabled') - this.switch.classList.remove('disabled') - - } - } - - get checked() { - return this.isChecked - } - - set checked(value) { - if (value) { - this.setAttribute('checked', '') - this.isChecked = true - this.input.checked = true - } else { - this.removeAttribute('checked') - this.isChecked = false - this.input.checked = false - } - } - - dispatch = () => { - this.dispatchEvent(new CustomEvent('change', { - bubbles: true, - composed: true - })) - } - - connectedCallback() { - if (this.hasAttribute('disabled')) - this.switch.classList.add('disabled') - if (this.hasAttribute('checked')) - this.input.checked = true - this.addEventListener('keyup', e => { - if ((e.code === "Enter" || e.code === "Space") && !this.isDisabled) { - this.input.click() - } - }) - this.input.addEventListener('click', e => { - if (this.input.checked) - this.checked = true - else - this.checked = false - this.dispatch() - }) - } -}) - -// select -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)) - } - static get observedAttributes() { - return ['value'] - } - get value() { - return this.getAttribute('value') - } - set value(val) { - this.setAttribute('value', val) - } - - collapse() { - this.optionList.animate(this.slideUp, this.animationOptions) - this.optionList.classList.add('hide') - this.chevron.classList.remove('rotate') - this.open = false - } - connectedCallback() { - this.availableOptions - this.optionList = this.shadowRoot.querySelector('.options') - this.chevron = this.shadowRoot.querySelector('.toggle') - let slot = this.shadowRoot.querySelector('.options slot'), - selection = this.shadowRoot.querySelector('.selection'), - previousOption - this.open = false; - this.slideDown = [{ - transform: `translateY(-0.5rem)` - }, - { - transform: `translateY(0)` - } - ], - this.slideUp = [{ - transform: `translateY(0)` - }, - { - transform: `translateY(-0.5rem)` - } - ], - this.animationOptions = { - duration: 300, - fill: "forwards", - easing: 'ease' - } - selection.addEventListener('click', e => { - if (!this.open) { - this.optionList.classList.remove('hide') - this.optionList.animate(this.slideDown, this.animationOptions) - this.chevron.classList.add('rotate') - this.open = true - } else { - this.collapse() - } - }) - selection.addEventListener('keydown', e => { - if (e.code === 'ArrowDown' || e.code === 'ArrowRight') { - e.preventDefault() - this.availableOptions[0].focus() - } - if (e.code === 'Enter' || e.code === 'Space') - if (!this.open) { - this.optionList.classList.remove('hide') - this.optionList.animate(this.slideDown, this.animationOptions) - this.chevron.classList.add('rotate') - this.open = true - } else { - this.collapse() - } - }) - this.optionList.addEventListener('keydown', e => { - if (e.code === 'ArrowUp' || e.code === 'ArrowRight') { - e.preventDefault() - if (document.activeElement.previousElementSibling) { - document.activeElement.previousElementSibling.focus() - } - } - if (e.code === 'ArrowDown' || e.code === 'ArrowLeft') { - e.preventDefault() - if (document.activeElement.nextElementSibling) - document.activeElement.nextElementSibling.focus() - } - }) - this.addEventListener('optionSelected', e => { - if (previousOption !== e.target) { - this.setAttribute('value', e.detail.value) - this.shadowRoot.querySelector('.option-text').textContent = e.detail.text; - this.dispatchEvent(new CustomEvent('change', { - bubbles: true, - composed: true - })) - if (previousOption) { - previousOption.classList.remove('check-selected') - } - previousOption = e.target; - } - if (!e.detail.switching) - this.collapse() - - e.target.classList.add('check-selected') - }) - slot.addEventListener('slotchange', e => { - this.availableOptions = slot.assignedElements() - if (this.availableOptions[0]) { - let firstElement = this.availableOptions[0]; - previousOption = firstElement; - firstElement.classList.add('check-selected') - this.setAttribute('value', firstElement.getAttribute('value')) - this.shadowRoot.querySelector('.option-text').textContent = firstElement.textContent - this.availableOptions.forEach((element, index) => { - element.setAttribute('data-rank', index + 1); - element.setAttribute('tabindex', "0"); - }) - } - }); - document.addEventListener('mousedown', e => { - if (!this.contains(e.target) && this.open) { - this.collapse() - } - }) - } -}) - -// 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)) - } - - sendDetails(switching) { - let optionSelected = new CustomEvent('optionSelected', { - bubbles: true, - composed: true, - detail: { - text: this.textContent, - value: this.getAttribute('value'), - switching: switching - } - }) - this.dispatchEvent(optionSelected) - } - - connectedCallback() { - let validKey = [ - 'ArrowUp', - 'ArrowDown', - 'ArrowLeft', - 'ArrowRight' - ] - this.addEventListener('click', e => { - this.sendDetails() - }) - this.addEventListener('keyup', e => { - if (e.code === 'Enter' || e.code === 'Space') { - e.preventDefault() - this.sendDetails(false) - } - if (validKey.includes(e.code)) { - e.preventDefault() - this.sendDetails(true) - } - }) - if (this.hasAttribute('default')) { - setTimeout(() => { - this.sendDetails() - }, 0); - } - } -}) - -// select -const smStripSelect = document.createElement('template') -smStripSelect.innerHTML = ` - -
-
- - Previous - - -
- -
- - Next - - -
-
`; -customElements.define('sm-strip-select', class extends HTMLElement { - constructor() { - super() - this.attachShadow({ - mode: 'open' - }).append(smStripSelect.content.cloneNode(true)) - } - static get observedAttributes() { - return ['value'] - } - get value() { - return this.getAttribute('value') - } - set value(val) { - this.setAttribute('value', val) - } - scrollLeft = () => { - this.select.scrollBy({ - top: 0, - left: -this.scrollDistance, - behavior: 'smooth' - }) - } - - scrollRight = () => { - this.select.scrollBy({ - top: 0, - left: this.scrollDistance, - behavior: 'smooth' - }) - } - connectedCallback() { - let previousOption, - slot = this.shadowRoot.querySelector('slot'); - this.selectContainer = this.shadowRoot.querySelector('.select-container') - this.select = this.shadowRoot.querySelector('.select') - this.nextArrow = this.shadowRoot.querySelector('.next-item') - this.previousArrow = this.shadowRoot.querySelector('.previous-item') - this.nextGradient = this.shadowRoot.querySelector('.right') - this.previousGradient = this.shadowRoot.querySelector('.left') - this.selectOptions - this.scrollDistance = this.selectContainer.getBoundingClientRect().width - const firstElementObserver = new IntersectionObserver(entries => { - if (entries[0].isIntersecting) { - this.previousArrow.classList.add('hide') - this.previousGradient.classList.add('hide') - } else { - this.previousArrow.classList.remove('hide') - this.previousGradient.classList.remove('hide') - } - }, { - root: this.selectContainer, - threshold: 0.95 - }) - const lastElementObserver = new IntersectionObserver(entries => { - if (entries[0].isIntersecting) { - this.nextArrow.classList.add('hide') - this.nextGradient.classList.add('hide') - } else { - this.nextArrow.classList.remove('hide') - this.nextGradient.classList.remove('hide') - } - }, { - root: this.selectContainer, - threshold: 0.95 - }) - - const selectObserver = new IntersectionObserver(entries => { - if (entries[0].isIntersecting) { - this.scrollDistance = this.selectContainer.getBoundingClientRect().width - } - }) - - selectObserver.observe(this.selectContainer) - this.addEventListener('optionSelected', e => { - if (previousOption === e.target) return; - if (previousOption) - previousOption.classList.remove('active') - e.target.classList.add('active') - e.target.scrollIntoView({ - behavior: 'smooth', - inline: 'center', - block: 'nearest' - }) - this.setAttribute('value', e.detail.value) - this.dispatchEvent(new CustomEvent('change', { - bubbles: true, - composed: true - })) - previousOption = e.target; - }) - slot.addEventListener('slotchange', e => { - this.selectOptions = slot.assignedElements() - firstElementObserver.observe(this.selectOptions[0]) - lastElementObserver.observe(this.selectOptions[this.selectOptions.length - 1]) - if (this.selectOptions[0]) { - let firstElement = this.selectOptions[0]; - this.setAttribute('value', firstElement.getAttribute('value')) - firstElement.classList.add('active') - previousOption = firstElement; - } - }); - this.nextArrow.addEventListener('click', this.scrollRight) - this.previousArrow.addEventListener('click', this.scrollLeft) - } - - disconnectedCallback() { - this.nextArrow.removeEventListener('click', this.scrollRight) - this.previousArrow.removeEventListener('click', this.scrollLeft) - } -}) - -// option -const smStripOption = document.createElement('template') -smStripOption.innerHTML = ` - -
- -
`; -customElements.define('sm-strip-option', class extends HTMLElement { - constructor() { - super() - this.attachShadow({ - mode: 'open' - }).append(smStripOption.content.cloneNode(true)) - } - sendDetails() { - let optionSelected = new CustomEvent('optionSelected', { - bubbles: true, - composed: true, - detail: { - text: this.textContent, - value: this.getAttribute('value') - } - }) - this.dispatchEvent(optionSelected) - } - - connectedCallback() { - this.addEventListener('click', e => { - this.sendDetails() - }) - this.addEventListener('keyup', e => { - if (e.code === 'Enter' || e.code === 'Space') { - e.preventDefault() - this.sendDetails(false) - } - }) - if (this.hasAttribute('default')) { - setTimeout(() => { - this.sendDetails() - }, 0); - } - } -}) - -//popup -const smPopup = document.createElement('template') -smPopup.innerHTML = ` - - -`; -customElements.define('sm-popup', class extends HTMLElement { - constructor() { - super() - this.attachShadow({ - mode: 'open' - }).append(smPopup.content.cloneNode(true)) - - this.allowClosing = false - } - - resumeScrolling = () => { - const scrollY = document.body.style.top; - window.scrollTo(0, parseInt(scrollY || '0') * -1); - setTimeout(() => { - document.body.setAttribute('style', `overflow: auto; top: initial`) - }, 300); - } - - show = (pinned, popupStack) => { - if (popupStack) - this.popupStack = popupStack - if (this.popupStack && !this.hasAttribute('open')) { - this.popupStack.push({ - popup: this, - permission: pinned - }) - if (this.popupStack.items.length > 1) { - this.popupStack.items[this.popupStack.items.length - 2].popup.classList.add('stacked') - } - this.dispatchEvent( - new CustomEvent("popupopened", { - bubbles: true, - detail: { - popup: this, - popupStack: this.popupStack - } - }) - ) - this.setAttribute('open', '') - this.pinned = pinned - } - this.popupContainer.classList.remove('hide') - this.popup.style.transform = 'translateY(0)'; - document.body.setAttribute('style', `overflow: hidden; top: -${window.scrollY}px`) - return this.popupStack - } - hide = () => { - if (window.innerWidth < 640) - this.popup.style.transform = 'translateY(100%)'; - else - this.popup.style.transform = 'translateY(1rem)'; - this.popupContainer.classList.add('hide') - this.removeAttribute('open') - if (typeof this.popupStack !== 'undefined') { - this.popupStack.pop() - if (this.popupStack.items.length) { - this.popupStack.items[this.popupStack.items.length - 1].popup.classList.remove('stacked') - } else { - this.resumeScrolling() - } - } else { - this.resumeScrolling() - } - - if (this.inputFields.length) { - setTimeout(() => { - this.inputFields.forEach(field => { - if (field.type === 'radio' || field.tagName === 'SM-CHECKBOX') - field.checked = false - if (field.tagName === 'SM-INPUT' || field.tagName === 'TEXTAREA') - field.value = '' - }) - }, 300); - } - this.dispatchEvent( - new CustomEvent("popupclosed", { - bubbles: true, - detail: { - popup: this, - popupStack: this.popupStack - } - }) - ) - } - - handleTouchStart = (e) => { - this.touchStartY = e.changedTouches[0].clientY - this.popup.style.transition = 'transform 0.1s' - this.touchStartTime = e.timeStamp - } - - handleTouchMove = (e) => { - e.preventDefault() - if (this.touchStartY < e.changedTouches[0].clientY) { - this.offset = e.changedTouches[0].clientY - this.touchStartY; - this.touchEndAnimataion = window.requestAnimationFrame(() => this.movePopup()) - } - /*else { - this.offset = this.touchStartY - e.changedTouches[0].clientY; - this.popup.style.transform = `translateY(-${this.offset}px)` - }*/ - } - - handleTouchEnd = (e) => { - this.touchEndTime = e.timeStamp - cancelAnimationFrame(this.touchEndAnimataion) - this.touchEndY = e.changedTouches[0].clientY - this.popup.style.transition = 'transform 0.3s' - if (this.touchEndTime - this.touchStartTime > 200) { - if (this.touchEndY - this.touchStartY > this.threshold) { - if (this.pinned) { - this.show() - return - } else - this.hide() - } else { - this.show() - } - } else { - if (this.touchEndY > this.touchStartY) - if (this.pinned) { - this.show() - return - } - else - this.hide() - } - } - - movePopup = () => { - this.popup.style.transform = `translateY(${this.offset}px)` - } - - connectedCallback() { - this.pinned = false - this.popupStack - this.popupContainer = this.shadowRoot.querySelector('.popup-container') - this.popup = this.shadowRoot.querySelector('.popup') - this.popupBodySlot = this.shadowRoot.querySelector('.popup-body slot') - this.offset - this.popupHeader = this.shadowRoot.querySelector('.popup-top') - this.touchStartY = 0 - this.touchEndY = 0 - this.touchStartTime = 0 - this.touchEndTime = 0 - this.touchEndAnimataion; - this.threshold - - if (this.hasAttribute('open')) - this.show() - this.popupContainer.addEventListener('mousedown', e => { - if (e.target === this.popupContainer && !this.pinned) { - if (this.pinned) { - this.show() - return - } else - this.hide() - } - }) - - this.popupBodySlot.addEventListener('slotchange', () => { - setTimeout(() => { - this.threshold = this.popup.getBoundingClientRect().height * 0.3 - }, 200); - this.inputFields = this.querySelectorAll('sm-input', 'sm-checkbox', 'textarea', 'sm-textarea', 'radio') - }) - - this.popupHeader.addEventListener('touchstart', (e) => { - this.handleTouchStart(e) - }) - this.popupHeader.addEventListener('touchmove', (e) => { - this.handleTouchMove(e) - }) - this.popupHeader.addEventListener('touchend', (e) => { - this.handleTouchEnd(e) - }) - } - disconnectedCallback() { - this.popupHeader.removeEventListener('touchstart', this.handleTouchStart) - this.popupHeader.removeEventListener('touchmove', this.handleTouchMove) - this.popupHeader.removeEventListener('touchend', this.handleTouchEnd) - } -}) - -//carousel - -const smCarousel = document.createElement('template') -smCarousel.innerHTML = ` - -
- - Previous - - -
- -
- - Next - - -
-
-`; - -customElements.define('sm-carousel', class extends HTMLElement { - constructor() { - super() - this.attachShadow({ - mode: 'open' - }).append(smCarousel.content.cloneNode(true)) - } - - static get observedAttributes() { - return ['indicator'] - } - - scrollLeft = () => { - this.carousel.scrollBy({ - top: 0, - left: -this.scrollDistance, - behavior: 'smooth' - }) - } - - scrollRight = () => { - this.carousel.scrollBy({ - top: 0, - left: this.scrollDistance, - behavior: 'smooth' - }) - } - - connectedCallback() { - this.carousel = this.shadowRoot.querySelector('.carousel') - this.carouselContainer = this.shadowRoot.querySelector('.carousel-container') - this.carouselSlot = this.shadowRoot.querySelector('slot') - this.nextArrow = this.shadowRoot.querySelector('.next-item') - this.previousArrow = this.shadowRoot.querySelector('.previous-item') - this.indicatorsContainer = this.shadowRoot.querySelector('.indicators') - this.carouselItems - this.indicators - this.showIndicator = false - this.scrollDistance = this.carouselContainer.getBoundingClientRect().width / 3 - let frag = document.createDocumentFragment(); - if (this.hasAttribute('indicator')) - this.showIndicator = true - - - let firstVisible = false, - lastVisible = false - const allElementsObserver = new IntersectionObserver(entries => { - entries.forEach(entry => { - if (this.showIndicator) - if (entry.isIntersecting) { - this.indicators[parseInt(entry.target.attributes.rank.textContent)].classList.add('active') - } - else - this.indicators[parseInt(entry.target.attributes.rank.textContent)].classList.remove('active') - if (!entry.target.previousElementSibling) - if (entry.isIntersecting) { - this.previousArrow.classList.remove('expand') - firstVisible = true - } - else { - this.previousArrow.classList.add('expand') - firstVisible = false - } - if (!entry.target.nextElementSibling) - if (entry.isIntersecting) { - this.nextArrow.classList.remove('expand') - lastVisible = true - } - else { - this.nextArrow.classList.add('expand') - - lastVisible = false - } - if (firstVisible && lastVisible) - this.indicatorsContainer.classList.add('hide') - else - this.indicatorsContainer.classList.remove('hide') - }) - }, { - root: this.carouselContainer, - threshold: 0.9 - }) - - const carouselObserver = new IntersectionObserver(entries => { - if (entries[0].isIntersecting) { - this.scrollDistance = this.carouselContainer.getBoundingClientRect().width / 3 - } - }) - - carouselObserver.observe(this.carouselContainer) - - this.carouselSlot.addEventListener('slotchange', e => { - this.carouselItems = this.carouselSlot.assignedElements() - this.carouselItems.forEach(item => allElementsObserver.observe(item)) - if (this.showIndicator) { - this.indicatorsContainer.innerHTML = `` - this.carouselItems.forEach((item, index) => { - let dot = document.createElement('div') - dot.classList.add('dot') - frag.append(dot) - item.setAttribute('rank', index) - }) - this.indicatorsContainer.append(frag) - this.indicators = this.indicatorsContainer.children - } - }) - - this.addEventListener('keyup', e => { - if (e.code === 'ArrowLeft') - this.scrollRight() - else - this.scrollRight() - }) - - this.nextArrow.addEventListener('click', this.scrollRight) - this.previousArrow.addEventListener('click', this.scrollLeft) - } - - attributeChangedCallback(name, oldValue, newValue) { - if (name === 'indicator') { - if (this.hasAttribute('indicator')) - this.showIndicator = true - else - this.showIndicator = false - } - } - - disconnectedCallback() { - this.nextArrow.removeEventListener('click', this.scrollRight) - this.previousArrow.removeEventListener('click', this.scrollLeft) - } -}) - -//notifications - -const smNotifications = document.createElement('template') -smNotifications.innerHTML = ` - -
-
-` - -customElements.define('sm-notifications', class extends HTMLElement { - constructor() { - super() - this.shadow = this.attachShadow({ - mode: 'open' - }).append(smNotifications.content.cloneNode(true)) - } - - handleTouchStart = (e) => { - this.notification = e.target.closest('.notification') - this.touchStartX = e.changedTouches[0].clientX - this.notification.style.transition = 'initial' - this.touchStartTime = e.timeStamp - } - - handleTouchMove = (e) => { - e.preventDefault() - if (this.touchStartX < e.changedTouches[0].clientX) { - this.offset = e.changedTouches[0].clientX - this.touchStartX; - this.touchEndAnimataion = requestAnimationFrame(this.movePopup) - } else { - this.offset = -(this.touchStartX - e.changedTouches[0].clientX); - this.touchEndAnimataion = requestAnimationFrame(this.movePopup) - } - } - - handleTouchEnd = (e) => { - this.notification.style.transition = 'transform 0.3s, opacity 0.3s' - this.touchEndTime = e.timeStamp - cancelAnimationFrame(this.touchEndAnimataion) - this.touchEndX = e.changedTouches[0].clientX - if (this.touchEndTime - this.touchStartTime > 200) { - if (this.touchEndX - this.touchStartX > this.threshold) { - this.removeNotification(this.notification) - } else if (this.touchStartX - this.touchEndX > this.threshold) { - this.removeNotification(this.notification, true) - } else { - this.resetPosition() - } - } else { - if (this.touchEndX > this.touchStartX) { - this.removeNotification(this.notification) - } else { - this.removeNotification(this.notification, true) - } - } - } - - movePopup = () => { - this.notification.style.transform = `translateX(${this.offset}px)` - } - - resetPosition = () => { - this.notification.style.transform = `translateX(0)` - } - - push = (messageBody, type, pinned) => { - let notification = document.createElement('div'), - composition = `` - notification.classList.add('notification') - if (pinned) - notification.classList.add('pinned') - if (type === 'error') { - composition += ` - - - - - ` - } else if (type === 'success') { - composition += ` - - - ` - } - composition += ` -

${messageBody}

- - Close - - - ` - notification.innerHTML = composition - this.notificationPanel.prepend(notification) - if (window.innerWidth > 640) { - notification.animate([{ - transform: `translateX(1rem)`, - opacity: '0' - }, - { - transform: 'translateX(0)', - opacity: '1' - } - ], this.animationOptions).onfinish = () => { - notification.setAttribute('style', `transform: none;`); - } - } else { - notification.setAttribute('style', `transform: translateY(0); opacity: 1`) - } - notification.addEventListener('touchstart', this.handleTouchStart) - notification.addEventListener('touchmove', this.handleTouchMove) - notification.addEventListener('touchend', this.handleTouchEnd) - } - - removeNotification = (notification, toLeft) => { - if (!this.offset) - this.offset = 0; - - if (toLeft) - notification.animate([{ - transform: `translateX(${this.offset}px)`, - opacity: '1' - }, - { - transform: `translateX(-100%)`, - opacity: '0' - } - ], this.animationOptions).onfinish = () => { - notification.remove() - } - else { - notification.animate([{ - transform: `translateX(${this.offset}px)`, - opacity: '1' - }, - { - transform: `translateX(100%)`, - opacity: '0' - } - ], this.animationOptions).onfinish = () => { - notification.remove() - } - } - } - - clearAll = () => { - Array.from(this.notificationPanel.children).forEach(child => { - this.removeNotification(child) - }) - } - - connectedCallback() { - this.notificationPanel = this.shadowRoot.querySelector('.notification-panel') - this.animationOptions = { - duration: 300, - fill: "forwards", - easing: "ease" - } - this.fontSize = Number(window.getComputedStyle(document.body).getPropertyValue('font-size').match(/\d+/)[0]) - this.notification - this.offset - this.touchStartX = 0 - this.touchEndX = 0 - this.touchStartTime = 0 - this.touchEndTime = 0 - this.threshold = this.notificationPanel.getBoundingClientRect().width * 0.3 - this.touchEndAnimataion; - - this.notificationPanel.addEventListener('click', e => { - if (e.target.closest('.close'))( - this.removeNotification(e.target.closest('.notification')) - ) - }) - - const observer = new MutationObserver(mutationList => { - mutationList.forEach(mutation => { - if (mutation.type === 'childList') { - if (mutation.addedNodes.length) { - if (!mutation.addedNodes[0].classList.contains('pinned')) - setTimeout(() => { - this.removeNotification(mutation.addedNodes[0]) - }, 5000); - if (window.innerWidth > 640) - this.notificationPanel.style.padding = '1.5rem 0 3rem 1.5rem'; - else - this.notificationPanel.style.padding = '1rem 1rem 2rem 1rem'; - } else if (mutation.removedNodes.length && !this.notificationPanel.children.length) { - this.notificationPanel.style.padding = 0; - } - } - }) - }) - observer.observe(this.notificationPanel, { - attributes: true, - childList: true, - subtree: true - }) - } -}) - - -// sm-menu -const smMenu = document.createElement('template') -smMenu.innerHTML = ` - -
-
- - options - - - - -
-
- -
-
`; -customElements.define('sm-menu', class extends HTMLElement { - constructor() { - super() - this.attachShadow({ - mode: 'open' - }).append(smMenu.content.cloneNode(true)) - } - static get observedAttributes() { - return ['value'] - } - get value() { - return this.getAttribute('value') - } - set value(val) { - this.setAttribute('value', val) - } - expand = () => { - if (!this.open) { - this.optionList.classList.remove('hide') - this.optionList.classList.add('no-transformations') - this.open = true - this.icon.classList.add('focused') - } - } - collapse() { - if (this.open) { - this.open = false - this.icon.classList.remove('focused') - this.optionList.classList.add('hide') - this.optionList.classList.remove('no-transformations') - } - } - connectedCallback() { - this.availableOptions - this.containerDimensions - this.optionList = this.shadowRoot.querySelector('.options') - let slot = this.shadowRoot.querySelector('.options slot'), - menu = this.shadowRoot.querySelector('.menu') - this.icon = this.shadowRoot.querySelector('.icon') - this.open = false; - menu.addEventListener('click', e => { - if (!this.open) { - this.expand() - } else { - this.collapse() - } - }) - menu.addEventListener('keydown', e => { - if (e.code === 'ArrowDown' || e.code === 'ArrowRight') { - e.preventDefault() - this.availableOptions[0].focus() - } - if (e.code === 'Enter' || e.code === 'Space') { - e.preventDefault() - if (!this.open) { - this.expand() - } else { - this.collapse() - } - } - }) - this.optionList.addEventListener('keydown', e => { - if (e.code === 'ArrowUp' || e.code === 'ArrowRight') { - e.preventDefault() - if (document.activeElement.previousElementSibling) { - document.activeElement.previousElementSibling.focus() - } - } - if (e.code === 'ArrowDown' || e.code === 'ArrowLeft') { - e.preventDefault() - if (document.activeElement.nextElementSibling) - document.activeElement.nextElementSibling.focus() - } - }) - this.optionList.addEventListener('click', e => { - this.collapse() - }) - slot.addEventListener('slotchange', e => { - this.availableOptions = slot.assignedElements() - this.containerDimensions = this.optionList.getBoundingClientRect() - this.menuDimensions = menu.getBoundingClientRect() - }); - window.addEventListener('mousedown', e => { - if (!this.contains(e.target) && e.button !== 2) { - this.collapse() - } - }) - if (this.hasAttribute('set-context') && this.getAttribute('set-context') === 'true') { - this.parentNode.setAttribute('oncontextmenu', 'return false') - this.parentNode.addEventListener('mouseup', e => { - if (e.button === 2) { - this.expand() - } - }) - } - } -}) - -// option -const smMenuOption = document.createElement('template') -smMenuOption.innerHTML = ` - -
- -
`; -customElements.define('sm-menu-option', class extends HTMLElement { - constructor() { - super() - this.attachShadow({ - mode: 'open' - }).append(smMenuOption.content.cloneNode(true)) - } - - connectedCallback() { - this.addEventListener('keyup', e => { - if (e.code === 'Enter' || e.code === 'Space') { - e.preventDefault() - this.click() - } - }) - this.setAttribute('tabindex', '0') - } -}) - -// tab-header - -const smTabHeader = document.createElement('template') -smTabHeader.innerHTML = ` - -
-
- -
-
-
-`; - -customElements.define('sm-tab-header', class extends HTMLElement { - constructor() { - super() - this.attachShadow({ - mode: 'open' - }).append(smTabHeader.content.cloneNode(true)) - - this.indicator = this.shadowRoot.querySelector('.indicator'); - this.tabSlot = this.shadowRoot.querySelector('slot'); - this.tabHeader = this.shadowRoot.querySelector('.tab-header'); - } - - sendDetails(element) { - this.dispatchEvent( - new CustomEvent("switchtab", { - bubbles: true, - detail: { - target: this.target, - rank: parseInt(element.getAttribute('rank')) - } - }) - ) - } - - moveIndiactor(tabDimensions) { - //if(this.isTab) - this.indicator.setAttribute('style', `width: ${tabDimensions.width}px; transform: translateX(${tabDimensions.left - this.tabHeader.getBoundingClientRect().left + this.tabHeader.scrollLeft}px)`) - //else - //this.indicator.setAttribute('style', `width: calc(${tabDimensions.width}px - 1.6rem); transform: translateX(calc(${ tabDimensions.left - this.tabHeader.getBoundingClientRect().left + this.tabHeader.scrollLeft}px + 0.8rem)`) - } - - connectedCallback() { - if (!this.hasAttribute('target') || this.getAttribute('target').value === '') return; - this.prevTab - this.allTabs - this.activeTab - this.isTab = false - this.target = this.getAttribute('target') - - if (this.hasAttribute('variant') && this.getAttribute('variant') === 'tab') { - this.isTab = true - } - - this.tabSlot.addEventListener('slotchange', () => { - this.tabSlot.assignedElements().forEach((tab, index) => { - tab.setAttribute('rank', index) - }) - }) - this.allTabs = this.tabSlot.assignedElements(); - - this.tabSlot.addEventListener('click', e => { - if (e.target === this.prevTab || !e.target.closest('sm-tab')) - return - if (this.prevTab) - this.prevTab.classList.remove('active') - e.target.classList.add('active') - - e.target.scrollIntoView({ - behavior: 'smooth', - block: 'nearest', - inline: 'center' - }) - this.moveIndiactor(e.target.getBoundingClientRect()) - this.sendDetails(e.target) - this.prevTab = e.target; - this.activeTab = e.target; - }) - let resizeObserver = new ResizeObserver(entries => { - entries.forEach((entry) => { - if (this.prevTab) { - let tabDimensions = this.activeTab.getBoundingClientRect(); - this.moveIndiactor(tabDimensions) - } - }) - }) - resizeObserver.observe(this) - let observer = new IntersectionObserver((entries) => { - entries.forEach((entry) => { - if (entry.isIntersecting) { - this.indicator.style.transition = 'none' - if (this.activeTab) { - let tabDimensions = this.activeTab.getBoundingClientRect(); - this.moveIndiactor(tabDimensions) - } else { - this.allTabs[0].classList.add('active') - let tabDimensions = this.allTabs[0].getBoundingClientRect(); - this.moveIndiactor(tabDimensions) - this.sendDetails(this.allTabs[0]) - this.prevTab = this.tabSlot.assignedElements()[0]; - this.activeTab = this.prevTab; - } - } - }) - }, { - threshold: 1.0 - }) - observer.observe(this) - } -}) - -// tab-panels - -const smTabPanels = document.createElement('template') -smTabPanels.innerHTML = ` - -
- Nothing to see here. -
-`; - -customElements.define('sm-tab-panels', class extends HTMLElement { - constructor() { - super() - this.attachShadow({ - mode: 'open' - }).append(smTabPanels.content.cloneNode(true)) - this.panelSlot = this.shadowRoot.querySelector('slot'); - } - connectedCallback() { - - //animations - let flyInLeft = [{ - opacity: 0, - transform: 'translateX(-1rem)' - }, - { - opacity: 1, - transform: 'none' - } - ], - flyInRight = [{ - opacity: 0, - transform: 'translateX(1rem)' - }, - { - opacity: 1, - transform: 'none' - } - ], - flyOutLeft = [{ - opacity: 1, - transform: 'none' - }, - { - opacity: 0, - transform: 'translateX(-1rem)' - } - ], - flyOutRight = [{ - opacity: 1, - transform: 'none' - }, - { - opacity: 0, - transform: 'translateX(1rem)' - } - ], - animationOptions = { - duration: 300, - fill: 'forwards', - easing: 'ease' - } - this.prevPanel - this.allPanels - this.previousRank - - this.panelSlot.addEventListener('slotchange', () => { - this.panelSlot.assignedElements().forEach((panel) => { - panel.classList.add('hide-completely') - }) - }) - this.allPanels = this.panelSlot.assignedElements() - this._targetBodyFlyRight = (targetBody) => { - targetBody.classList.remove('hide-completely') - targetBody.animate(flyInRight, animationOptions) - } - this._targetBodyFlyLeft = (targetBody) => { - targetBody.classList.remove('hide-completely') - targetBody.animate(flyInLeft, animationOptions) - } - document.addEventListener('switchtab', e => { - if (e.detail.target !== this.id) - return - - if (this.prevPanel) { - let targetBody = this.allPanels[e.detail.rank], - currentBody = this.prevPanel; - if (this.previousRank < e.detail.rank) { - if (currentBody && !targetBody) - currentBody.animate(flyOutLeft, animationOptions).onfinish = () => { - currentBody.classList.add('hide-completely') - } - else if (targetBody && !currentBody) { - this._targetBodyFlyRight(targetBody) - } else if (currentBody && targetBody) { - currentBody.animate(flyOutLeft, animationOptions).onfinish = () => { - currentBody.classList.add('hide-completely') - this._targetBodyFlyRight(targetBody) - } - } - } else { - if (currentBody && !targetBody) - currentBody.animate(flyOutRight, animationOptions).onfinish = () => { - currentBody.classList.add('hide-completely') - } - else if (targetBody && !currentBody) { - this._targetBodyFlyLeft(targetBody) - } else if (currentBody && targetBody) { - currentBody.animate(flyOutRight, animationOptions).onfinish = () => { - currentBody.classList.add('hide-completely') - this._targetBodyFlyLeft(targetBody) - } - } - } - } else { - this.allPanels[e.detail.rank].classList.remove('hide-completely') - } - this.previousRank = e.detail.rank - this.prevPanel = this.allPanels[e.detail.rank]; - }) - } -}) - - -const slidingSection = document.createElement('template') -slidingSection.innerHTML = ` - -
- -
-` - -customElements.define('sm-sliding-section', class extends HTMLElement { - constructor() { - super() - this.attachShadow({ - mode: 'open' - }).append(slidingSection.content.cloneNode(true)) - } - connectedCallback() { - - } -}) - -const section = document.createElement('template') -section.innerHTML = ` - -
- -
-` - -customElements.define('sm-section', class extends HTMLElement { - constructor() { - super() - this.attachShadow({ - mode: 'open' - }).append(section.content.cloneNode(true)) - } -}) \ No newline at end of file diff --git a/components.ts b/components.ts deleted file mode 100644 index e69de29..0000000 diff --git a/css/main.css b/css/main.css index fb6844b..0f86350 100644 --- a/css/main.css +++ b/css/main.css @@ -1,2099 +1,919 @@ * { - box-sizing: border-box; padding: 0; margin: 0; + box-sizing: border-box; font-family: "Roboto", sans-serif; } :root { - font-size: clamp(16px, 1.2vmax, 40px); + font-size: clamp(1rem, 1.2vmax, 1.2rem); +} + +html, +body { + height: 100%; } body { - --accent-color: #2752ca; - --text-color: 17, 17, 17; - --text-color-light: 85, 85, 85; - --foreground-color: 255, 255, 255; - --background-color: rgba(var(--foreground-color), 1); - --dark-shade: #f4f4f4; - --error-color: #E53935; - --hue: 255; - --saturation: 61%; - --lightness: 39%; + --accent-color: #256eff; + --text-color: 20, 20, 20; + --background-color: 240, 240, 240; + --foreground-color: 250, 250, 250; + --danger-color: rgb(255, 75, 75); + --green: #1cad59; + scrollbar-width: thin; + scrollbar-gutter: stable; color: rgba(var(--text-color), 1); - background-size: cover; -} - -body[data-theme=dark] { - --accent-color: #4d74e0; - --text-color: 238, 238, 238; - --text-color-light: 170, 170, 170; - --foreground-color: 26, 26, 26; - --background-color: #111; - --dark-shade: #222; - --hue: 255; - --saturation: 39%; - --lightness: 70%; - background-color: var(--background-color); -} -body[data-theme=dark] .flo-balance-card { - color: rgba(var(--text-color), 1); -} -body[data-theme=dark] #focus_illu:not(.hide) { - opacity: 0.7; - fill: rgba(var(--text-color), 0.5); -} - -a { - font-weight: 500; - text-decoration: none; - color: var(--accent-color); -} - -.dark-text { - color: #111; -} - -h1 { - font-size: 3.5rem; -} - -h2 { - font-size: 2rem; -} - -h3 { - font-size: 1.5rem; -} - -h4 { - font-size: 1rem; -} - -h5 { - font-size: 0.85rem; -} - -h1, -h2, -h3, -h4, -h5 { - font-family: "Poppins", sans-serif; - font-weight: 600; -} - -p { - font-size: 0.95rem; - line-height: 1.5; - max-width: 60ch; - color: rgba(var(--text-color), 0.9); -} - -strong { - font-weight: 700; -} - -button { - position: relative; - display: inline-flex; - align-items: center; - justify-content: center; - text-transform: capitalize; - padding: 0.6rem 1.2rem; - font-weight: 600; - cursor: pointer; - border-radius: 0.3rem; - color: var(--accent-color); - transition: transform 0.3s; - border: none; - background: rgba(var(--text-color), 0.1); - -webkit-tap-highlight-color: transparent; - font-family: "Poppins", sans-serif; -} -button:focus { - outline: thin solid rgba(var(--text-color-light), 0.4); -} -button:disabled { - cursor: default; - background: rgba(var(--text-color), 0.4); -} -button:disabled ~ .loader { - opacity: 0; -} - -::-moz-focus-inner { - border: none; -} - -.bottom-padding { - padding-bottom: 1.5rem; -} - -.top-padding { - padding-top: 1rem; -} - -.bottom-margin { - margin-bottom: 1.5rem; -} - -.top-margin { - margin-top: 1.5rem; -} - -.flex { + background-color: rgba(var(--background-color), 1); + transition: background-color 0.3s; display: flex; -} - -.grid { - display: grid; -} - -.grid-2 { - grid-template-columns: auto auto; - gap: 1rem; -} - -.align-center { - align-items: center; -} - -.direction-column { flex-direction: column; } -.justify-right { - margin-left: auto; +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); } -.space-between { +p, +strong { + font-size: 0.9rem; + max-width: 65ch; + 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 0.1rem rgba(var(--text-color), 1) inset; +} + +button { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + position: relative; + display: inline-flex; + border: none; + background-color: transparent; + overflow: hidden; + color: inherit; + -webkit-tap-highlight-color: transparent; + align-items: center; + font-size: 0.9rem; + font-weight: 500; + white-space: nowrap; + padding: 0.8rem; + border-radius: 0.3rem; + justify-content: center; +} +button:focus-visible { + outline: var(--accent-color) solid medium; +} +button:not(:disabled) { + cursor: pointer; +} + +.button { + background-color: rgba(var(--text-color), 0.06); +} + +.button--primary, +.button--danger { + color: rgba(var(--background-color), 1); +} +.button--primary .icon, +.button--danger .icon { + fill: rgba(var(--background-color), 1); +} + +.button--primary { + background-color: var(--accent-color); +} + +.button--danger { + background-color: var(--danger-color); +} + +.cta { + text-transform: uppercase; + font-size: 0.8rem; + font-weight: 700; + letter-spacing: 0.05em; + padding: 1rem; +} + +.icon-only { + padding: 0.5rem; + border-radius: 0.3rem; +} + +button:disabled { + opacity: 0.5; +} + +a:-webkit-any-link:focus-visible { + outline: rgba(var(--text-color), 1) 0.1rem solid; +} + +a:-moz-any-link:focus-visible { + outline: rgba(var(--text-color), 1) 0.1rem solid; +} + +a:any-link:focus-visible { + outline: rgba(var(--text-color), 1) 0.1rem solid; +} + +details { + padding: 1rem 0; +} + +details summary { + display: flex; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + cursor: pointer; + align-items: center; justify-content: space-between; + color: var(--accent-color); } -.label { - margin-bottom: 0.4rem; +details[open] summary { + margin-bottom: 1rem; +} +details[open] > summary .down-arrow { + transform: rotate(180deg); } -.light-text { - opacity: 0.7; +sm-input, +sm-textarea { + font-size: 0.9rem; + --border-radius: 0.3rem; + --background-color: rgba(var(--foreground-color), 1); +} +sm-input button .icon, +sm-textarea button .icon { + fill: var(--accent-color); } -.hide { - opacity: 0; - pointer-events: none; +sm-button { + --padding: 0.6rem 0.8rem; +} +sm-button[variant=primary] .icon { + fill: rgba(var(--background-color), 1); +} +sm-button[disabled] .icon { + fill: rgba(var(--text-color), 0.6); +} +sm-button.danger { + --background: var(--danger-color); + color: rgba(var(--background-color), 1); } -.hide-completely { - display: none !important; +sm-spinner { + --size: 1rem; + --stroke-width: 0.1rem; +} + +sm-form { + --gap: 1rem; +} + +strip-select { + --gap: 0; + background-color: rgba(var(--text-color), 0.06); + border-radius: 0.3rem; + padding: 0.3rem; +} + +strip-option { + font-size: 0.8rem; + --border-radius: 0.2rem; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +ul { + list-style: none; +} + +.overflow-ellipsis { + width: 100%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; } .breakable { - word-break: break-all; + overflow-wrap: break-word; + word-wrap: break-word; + word-break: break-word; + -webkit-hyphens: auto; + -ms-hyphens: auto; + hyphens: auto; } -.separator { - padding: 0.1rem; +.full-bleed { + grid-column: 1/-1; } -.no-transformations { - transform: none !important; +.h1 { + font-size: 1.5rem; +} + +.h2 { + font-size: 1.2rem; +} + +h3 { + font-size: 1.2rem; + line-height: 1.3; +} + +.h4 { + font-size: 0.9rem; +} + +.h5 { + font-size: 0.75rem; +} + +.uppercase { + text-transform: uppercase; } .capitalize { text-transform: capitalize; } -span.ripple { - position: absolute; - border-radius: 50%; - transform: scale(0); - background: rgba(var(--text-color), 0.2); - pointer-events: none; +.sticky { + position: -webkit-sticky; + position: sticky; } -.highlight { - box-shadow: 0 0 0 0.2rem var(--accent-color) inset; - transition: box-shadow 0.3s; -} - -sm-button { - color: rgba(var(--text-color), 1); -} -sm-button[variant=outlined] { - --accent-color: rgba(var(--text-color), 1); -} -sm-button[variant=primary]::part(button) { - color: white; -} - -.loader { - fill: none; - stroke-width: 10; - stroke: var(--accent-color); - height: 2rem; - width: 2rem; - overflow: visible; - stroke-dashoffset: 230; - stroke-dasharray: 230; - padding: 2px; - justify-self: center; - transition: opacity 0.3s; -} - -@keyframes rotate { - 100% { - transform: rotate(360deg); - } -} -@keyframes load { - 50% { - stroke-dashoffset: 0; - } - 100% { - stroke-dashoffset: -210; - } -} -@keyframes load-btn-loader { - 50% { - stroke-dashoffset: 0; - } - 100% { - stroke-dashoffset: -200; - } -} -#on_boarding { - position: absolute; - left: 0; +.top-0 { top: 0; - border-radius: 0.85rem; - box-shadow: 0.1rem 0.2rem 1rem rgba(var(--text-color), 0.16); - padding: 1.5rem; - color: white; - background: var(--accent-color); - z-index: 10; - transition: transform 0.3s, opacity 0.3s; - width: 100%; -} -#on_boarding #total_tuts { - opacity: 0.8; - font-size: 0.85rem; -} -#on_boarding h4 { - margin-bottom: 0.5rem; - font-size: 1.2rem; - transition: transform 0.3s; -} -#on_boarding p { - color: inherit; - margin-bottom: 1.5rem; - transition: transform 0.3s; -} -#on_boarding .icon { - stroke-width: 8; - stroke: white; - padding: 0.2rem; - cursor: pointer; -} -#on_boarding sm-button[variant=no-outline]::part(button) { - background: rgba(var(--foreground-color), 1); - color: rgba(var(--text-color), 1); -} -#on_boarding sm-button:not([variant=no-outline])::part(button) { - color: white; } -.action { - position: relative; - overflow: hidden; - display: inline-flex; - align-items: center; - padding: 0; - background: none; -} -.action:disabled .primary-btn { - background: none; -} -.action:focus { - outline: none; -} -.action.start-loading { - align-items: center; - pointer-events: none; -} -.action.start-loading h4 { - transform: translateX(1ch); - background: inherit !important; - color: rgba(var(--text-color), 0.9); -} -.action.start-loading .loader-container { - transform: none; -} -.action.start-loading .loader { - animation: load-btn-loader 2.6s infinite, rotate 1s infinite linear; -} -.action h4 { - padding: 0.5rem 1.2rem; - font-size: 0.9rem; - clip-path: circle(100%); - transition: clip-path 0.3s; - border-radius: 0.2rem; - transition: 0.3s transform; -} -.action .btn { - z-index: 2; -} -.action .loader { - height: 1.2rem; - width: 1.2rem; - stroke-dashoffset: 200; - stroke-dasharray: 200; - margin: 0 !important; -} -.action:not(.start-loading) .loader-container { - opacity: 0; - transform: translateX(1rem); -} - -.loader-container { - position: absolute; - z-index: 1; - left: 0; - transition: transform 0.3s, opacity 0.3s; -} - -.animate-loader { - animation: load 2.6s infinite, rotate 1s infinite linear; -} - -.expand { - width: 100%; -} - -.fade-left { - animation: fadeleft 0.3s; -} - -.fade-right { - animation: faderight 0.3s; -} - -@keyframes faderight { - from { - opacity: 0; - transform: translateX(-1rem); - } - to { - opacity: 1; - transform: none; - } -} -@keyframes fadeleft { - from { - opacity: 0; - transform: translateX(1rem); - } - to { - opacity: 1; - transform: none; - } -} -.logo { +.flex { display: flex; - align-items: center; - cursor: pointer; -} -.logo h4 { - font-weight: 500; - font-size: clamp(1.1rem, 2vw, 1.2rem); -} -.logo .main-logo { - height: clamp(1.4rem, 2vw, 1.6rem); - width: clamp(1.4rem, 2vw, 1.6rem); - fill: rgba(var(--text-color), 1); - stroke: none; - margin-right: 0.2rem; } -textarea { - width: 100%; - max-width: 100%; - background: rgba(var(--text-color), 0.1); - color: inherit; - border: none; - border-radius: 0.2rem; - resize: none; - font-size: 1rem; - line-height: 1.6; - padding: 0.85rem; +.flex-wrap { + flex-wrap: wrap; } -*:empty + .empty-state { +.flex-1 { + flex: 1; +} + +.grid { display: grid; } -.empty-state { - display: none; - place-items: center; - width: 100%; -} -.empty-state svg { - height: 12rem; - width: 12rem; -} -.empty-state svg polyline, -.empty-state svg path, -.empty-state svg ellipse { - stroke-linecap: round; - stroke-linejoin: round; - stroke: rgba(var(--text-color), 0.7); - fill: none; +.flow-column { + grid-auto-flow: column; } -.container-header { - display: flex; +.gap-0-5 { + gap: 0.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 { + align-content: flex-start; +} + +.align-center { align-items: center; - flex-direction: row; - width: 100%; - padding: 1rem 0; } -.container-header h2 { - flex: 1; + +.align-end { + align-items: flex-end; } -.container-header button { + +.text-center { + text-align: center; +} + +.justify-start { + justify-content: start; +} + +.justify-center { + justify-content: center; +} + +.justify-right { + margin-left: auto; +} + +.align-self-center { align-self: center; } -.btn { - background: var(--accent-color); - color: rgba(var(--foreground-color), 1); - padding: 0.4rem 1rem; +.justify-self-center { + justify-self: center; } -.back-arrow { - stroke: rgba(var(--text-color), 1); - stroke-width: 6; - fill: none; - height: 2rem; - padding: 0.5rem 0.5rem 0.5rem 0; - cursor: pointer; +.justify-self-start { + justify-self: start; } -.card { - border-radius: 0.6rem; - padding: 1.5rem; - background: rgba(var(--foreground-color), 1); +.justify-self-end { + justify-self: end; } -.solid-background { - background: rgba(var(--foreground-color), 1) !important; -} - -#confirmation, -#prompt { +.direction-column { flex-direction: column; } -#confirmation h4, -#prompt h4 { - font-weight: 500; - margin-bottom: 1.5rem; + +.space-between { + justify-content: space-between; } -#confirmation .flex sm-button:first-of-type, -#prompt .flex sm-button:first-of-type { + +.w-100 { + width: 100%; +} + +.h-100 { + height: 100%; +} + +.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: transparent; +} + +.empty-state { + display: grid; + width: 100%; + padding: 1.5rem 0; +} + +.observe-empty-state:empty { + display: none; +} + +.observe-empty-state:not(:empty) + .empty-state { + display: none; +} + +.bullet-point { + display: flex; + align-items: center; + justify-content: center; + margin: 0 0.8ch; +} +.bullet-point::after { + content: ""; + height: 0.4ch; + width: 0.4ch; + border-radius: 0.5em; + background-color: var(--accent-color); +} + +.icon { + width: 1.2rem; + height: 1.2rem; + fill: rgba(var(--text-color), 0.8); + flex-shrink: 0; +} + +.margin-right-0-5 { + margin-right: 0.5rem; +} + +.margin-left-0-5 { + margin-left: 0.5rem; +} + +.icon-button { + padding: 0.6rem; + border-radius: 0.8rem; + background-color: rgba(var(--text-color), 0.1); + height: -webkit-max-content; + height: -moz-max-content; + height: max-content; +} +.icon-button .icon { + fill: var(--accent-color); +} + +#confirmation_popup, +#prompt_popup { + flex-direction: column; +} +#confirmation_popup h4, +#prompt_popup h4 { + font-weight: 500; + margin-bottom: 0.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: 0.6rem; margin-left: auto; } -#prompt .flex { - margin-top: 1rem; -} - -.refresh { - margin-top: 0.6rem; - margin-bottom: 1rem; -} - -sm-popup sm-input:not(:last-of-type) { - margin-bottom: 1rem; -} -sm-popup p { - margin-block-end: 1rem; -} -sm-popup .action h4 { - padding: 0.5rem 1rem; - font-weight: 500; -} -sm-popup .message { - margin-bottom: 0.2rem; -} -sm-popup .message + .copy-row { +#prompt_message { margin-bottom: 1.5rem; } -sm-popup h5:not(.tag) { - font-family: "Roboto", sans-serif; - margin-bottom: 0.4rem; - margin-top: 1rem; - font-weight: 500; -} -#reader { - overflow: hidden; -} - -.my-qr-code { - background: #fff; - border-radius: 0.5rem; - padding: 1rem; - max-width: max-content; -} - -#qr_code_popup::part(popup) { - height: 80vh; - max-height: 90vh; -} -#qr_code_popup::part(popup-body) { - padding: 0; -} -#qr_code_popup .popup-header { - padding-bottom: 1.5rem; -} -#qr_code_popup sm-tab-header { - margin: 0 auto; - transform: translateX(-1rem); -} -#qr_code_popup sm-panel { - display: flex; - flex-direction: column; - align-items: center; - text-align: center; -} -#qr_code_popup video { - width: 100% !important; - object-fit: cover; -} -#qr_code_popup p { - margin-top: 1.5rem; - opacity: 0.8; - text-align: center; - max-width: 30ch; -} - -sm-input[type=number] { - font-size: 1.2rem; -} - -.popup-header { - padding: 1.5rem; - padding-bottom: 0; - display: flex; - align-items: center; +.popup__header { + display: grid; + gap: 0.5rem; width: 100%; + padding: 0 1.5rem; + align-items: center; + grid-auto-flow: column; } -.popup-header .icon { - margin-right: 1rem; - padding: 0.2rem; - stroke-width: 10; + +.popup__header__close { + padding: 0.5rem; + margin-left: -0.5rem; cursor: pointer; } -.popup-header button { - width: auto; - margin-left: auto; -} - -details, summary { - margin-bottom: 1rem; -} - -summary { - font-size: 1rem; - cursor: pointer; -} - -details h5 { - line-height: 0.6; - margin-bottom: 0; - margin-top: 1.2rem !important; -} -details p { - line-height: 1.4; -} - -#sign_in_page { - position: fixed; - gap: 2rem; - width: 100vw; - height: 100vh; - overflow-y: auto; - left: 0; - top: 0; - align-items: center; - justify-content: space-between; - background: url(sign-in-bg.svg) center, rgba(var(--foreground-color), 1); - background-size: cover; - z-index: 5; -} -#sign_in_page .info { - padding: 1.5rem; - align-items: center; -} -#sign_in_page .info h1 { - line-height: 1.1; - font-weight: 800; - font-size: clamp(1.5rem, 8vw, 4rem); - margin-top: 1rem; -} -#sign_in_page .sign-in-box { - width: 100%; - z-index: 1; - margin-top: auto; - justify-self: center; - padding: 1.5rem; - padding-bottom: 3rem; - border-radius: 0.5rem; - background: rgba(var(--foreground-color), 1); -} -#sign_in_page .sign-in-box sm-input { - text-align: left; -} -#sign_in_page .sign-in-box sm-panel { - width: 100%; -} -#sign_in_page .sign-in-box sm-tab-header { - margin: 0; - background: none; - align-self: flex-start; -} -#sign_in_page .sign-in-box sm-tab-header::part(tab-header) { - padding-bottom: 0.4rem; - gap: 1.5rem; -} -#sign_in_page .sign-in-box sm-tab::part(tab) { - padding: 0.4rem 0; -} -#sign_in_page .sign-in-box sm-tab-panels { - margin-top: 3rem; -} -#sign_in_page .sign-in-box form { - width: 100%; -} -#sign_in_page .sign-in-box h2 { - margin-bottom: 0.5rem; -} -#sign_in_page .sign-in-box h3 { - font-weight: 500; -} -#sign_in_page .sign-in-box h4 { - font-weight: 500; - margin-bottom: 1.5rem; -} -#sign_in_page .sign-in-box h5 { - opacity: 0.8; - font-weight: 500; -} -#sign_in_page .sign-in-box .copy-row h4 { - max-width: 34ch; -} -#sign_in_page .sign-in-box .copy-row:not(:last-of-type) { - margin-bottom: 1rem; -} -#sign_in_page .sign-in-box button { - width: auto; - margin-top: 1rem; - padding: 0.6rem 1.6rem; -} -#sign_in_page .sign-in-box p { - margin-bottom: 0.5rem; - max-width: 35ch; - margin-top: 0.5rem; - margin-bottom: 1.5rem; -} -#sign_in_page .sign-in-box #credentials_section { - border-top: 1px rgba(var(--text-color), 0.2) solid; - margin-top: 1rem; - padding-top: 1.5rem; - animation: slide-down 0.3s forwards; -} -#sign_in_page .sign-in-box #sign_in_with { - margin-top: 2rem; -} - -@keyframes slide-down { - from { - transform: translateY(-1rem); - } - to { - transform: none; - } -} -.primary-btn { - padding: 0.6rem 1.2rem !important; - background: var(--accent-color); - justify-content: center; - color: white; -} #main_header { - align-items: center; - padding: 1.5rem 1rem; - justify-content: space-between; + padding: 1rem 1.5rem; } -.icon { - height: 1.2rem; - width: 1.2rem; - fill: none; - stroke: rgba(var(--text-color), 0.8); - stroke-width: 6; - overflow: visible; - stroke-linecap: round; - stroke-linejoin: round; -} - -#navbar { +#main_card { display: flex; - flex-direction: row; - align-items: center; - justify-content: space-evenly; - position: fixed; - left: 0; - right: 0; - bottom: 0; - top: auto; - z-index: 3; - background: rgba(var(--foreground-color), 1); - box-shadow: 0 -0.5rem 1rem #00000010; - border-radius: 1rem 1rem 0 0; -} -#navbar .navbar-item { - position: relative; - overflow: hidden; - text-align: center; - cursor: pointer; - padding: 0.3rem; - padding-top: 0.85rem; - border-radius: 0.5rem; - opacity: 0.6; - color: rgba(var(--text-color), 1); - font-size: 0.85rem; - text-transform: capitalize; + flex-direction: column; + height: 100%; width: 100%; - font-weight: 600; - -webkit-tap-highlight-color: transparent; -} -#navbar .navbar-item h5 { - margin-top: 0.4rem; -} -#navbar .navbar-item .icon { - stroke: rgba(var(--text-color), 1); -} -#navbar .active { - opacity: 1; + background-color: rgba(var(--foreground-color), 1); + transition: background-color 0.3s; } -.banking { - stroke-width: 4; -} - -#home_page { - padding: 0 0 4rem 0; -} -#home_page .left { - width: auto; - border-radius: 0.6rem; -} -#home_page .left h3, #home_page .left h4, #home_page .left p { - padding: 0 1.5rem; -} -#home_page .left h3 { - font-size: 2rem; - margin-bottom: 1rem; -} - -.user-panel { - position: relative; - padding: 1.5rem; - padding-top: 1rem; - align-self: flex-start; -} -.user-panel .icon { - stroke: rgba(var(--foreground-color), 1); -} -.user-panel .action { - width: auto; - justify-content: flex-end; - border-radius: 2rem; -} -.user-panel .action h4 { - border-radius: 2rem; - background-color: rgba(var(--text-color), 0.1); - color: rgba(var(--text-color), 1); - width: auto; -} -.user-panel .action .clip { - clip-path: circle(0 at 100% 0) !important; -} - -#deposit { - padding-top: 1.5rem; -} -#deposit .flex sm-button { - margin-bottom: 1.5rem; -} -#deposit .user-panel { - padding: 0 1rem; -} -#deposit .display-balance { - grid-template-areas: "rupee rupee" "flo flo"; -} -#deposit sm-tab-header { - display: flex; -} - -.display-balance { - grid-template-columns: 1fr 1fr; - grid-template-areas: "rupee ." "flo flo"; - gap: 0.85rem; - margin-top: 1rem; -} -.display-balance .icon { - height: 1.4rem; - width: 1.4rem; - padding: 0.3rem; - stroke-width: 10; - cursor: pointer; -} - -.balance { - height: 10rem; - position: relative; - display: flex; - flex-direction: column; - border-radius: 1rem; - padding: 1rem; - justify-content: flex-end; -} -.balance span { - font-size: 0.7em; -} -.balance h4 { - font-size: 1.8rem; - font-family: "Roboto", sans-serif; - font-weight: 500; - word-break: break-all; +#pages_container { flex: 1; -} -.balance h5 { - opacity: 0.8; - margin-bottom: 0.2rem; -} -.balance .tooltip { - border-radius: 1rem; - color: rgba(var(--text-color), 1); - margin-left: auto; + overflow-y: auto; } -.rupee-balance-card { - grid-area: rupee; - background: url("data:image/svg+xml,%3Csvg width='512' height='512' viewBox='0 0 512 512' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)'%3E%3Cg filter='url(%23filter0_d)'%3E%3Crect x='312' y='323' width='240' height='140' rx='18' transform='rotate(30 312 323)' fill='%231C783B'/%3E%3C/g%3E%3Cg filter='url(%23filter1_d)'%3E%3Crect x='431.283' y='302' width='240' height='140' rx='18' transform='rotate(50.0235 431.283 302)' fill='%232DBD5E'/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d' x='225' y='320' width='301.846' height='265.244' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dx='-5' dy='9'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3Cfilter id='filter1_d' x='307' y='299' width='285.477' height='297.86' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dx='-5' dy='9'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3CclipPath id='clip0'%3E%3Crect width='512' height='512' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A") bottom right no-repeat, linear-gradient(200deg, rgba(var(--text-color), 0.1), rgba(var(--text-color), 0.2)); - background-size: 9rem, cover; -} -.rupee-balance-card .tooltip { - box-shadow: 0 0 0 0.4rem rgba(var(--text-color), 0.1) inset; -} - -.in-process-balance { - background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920' height='1080' viewBox='0 0 1920 1080'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:%231b1464;%7D.b%7Bfill:%2309083f;%7D.c%7Bfill:%2329abe2;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3Ebg-art1%3C/title%3E%3Cpolygon class='a' points='0 957.24 232 957.24 357 828 434 899 485 867 594 959 843 957 889 925 938 953 1301 953 1447 807 1555 915 1590 880 1623 913 1673 856 1744 957 1920 957.24 1920 1080 0 1080 0 957.24'/%3E%3Cpolygon class='b' points='495 959 594 959 485 867 434 899 495 959'/%3E%3Cpolygon class='c' points='232 957 357 828 247 957 232 957'/%3E%3Cpolygon class='c' points='1301 953 1447 807 1318.32 953 1301 953'/%3E%3C/svg%3E") left bottom, linear-gradient(135deg, #fd946a, #ff4857); - background-size: cover; -} -.in-process-balance .tooltip { - box-shadow: 0 0 0 0.4rem #ff4857 inset; -} - -.flo-balance-card { - grid-area: flo; - color: rgba(var(--foreground-color), 1); - background: url("data:image/svg+xml,%3Csvg width='1920' height='1080' viewBox='0 0 1920 1080' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)'%3E%3Cg filter='url(%23filter0_d)'%3E%3Ccircle cx='1814.5' cy='977.5' r='437.5' fill='white'/%3E%3C/g%3E%3Cg filter='url(%23filter1_d)'%3E%3Ccircle cx='1814.5' cy='977.5' r='243.5' fill='%231B0980'/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d' x='1344' y='515' width='913' height='913' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dx='-14' dy='-6'/%3E%3CfeGaussianBlur stdDeviation='9.5'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3Cfilter id='filter1_d' x='1538' y='709' width='525' height='525' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dx='-14' dy='-6'/%3E%3CfeGaussianBlur stdDeviation='9.5'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3CclipPath id='clip0'%3E%3Crect width='1920' height='1080' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A") center no-repeat, linear-gradient(270deg, #2f69e6, #1b0980); - background-size: cover; -} -.flo-balance-card .tooltip { - box-shadow: 0 0 0 0.4rem #1b0980 inset; -} - -.tooltip { - position: absolute; - left: 0; - right: 0; - top: 0; - bottom: 0; - cursor: help; +#main_navbar { display: flex; - flex-direction: column; - background: rgba(var(--foreground-color), 1); - z-index: 1; - transition: clip-path 0.4s ease-out; - clip-path: circle(0.85rem at calc(100% - 1.5rem) 1.4rem); - scrollbar-width: thin; + background: rgba(var(--text-color), 0.03); } -.tooltip .tt-icon { - font-size: 0.9rem; - display: inline-flex; - width: 3rem; - height: 3rem; +#main_navbar.hide-away { + position: absolute; +} +#main_navbar ul { + display: flex; + height: 100%; + width: 100%; +} +#main_navbar ul li { + width: 100%; +} + +.nav-item { + position: relative; + display: flex; + flex: 1; + width: 100%; + flex-direction: column; align-items: center; justify-content: center; - margin-left: auto; - font-weight: 600; + padding: 0.5rem 0.3rem; + color: var(--text-color); + font-size: 0.7rem; + border-radius: 0.3rem; } -.tooltip .tooltip-text { - padding: 1rem; - padding-top: 0; - line-height: 1.4; - font-size: 0.9rem; - font-weight: normal; - overflow-y: auto; - max-height: calc(100% - 3rem); - max-width: 30ch; +.nav-item .icon { + transition: transform 0.2s; } -.tooltip:hover { - clip-path: circle(100%); +.nav-item__title { + margin-top: 0.3rem; + transition: opacity 0.2s, transform 0.2s; +} +.nav-item--active { + color: var(--accent-color); +} +.nav-item--active .icon { + fill: var(--accent-color); + transform: translateY(50%); +} +.nav-item--active .nav-item__title { + transform: translateY(100%); + opacity: 0; +} +.nav-item__indicator { + position: absolute; + bottom: 0; + width: 2rem; + height: 0.3rem; + background: var(--accent-color); + border-radius: 1rem 1rem 0 0; + z-index: 1; } -.user-type { - font-weight: 500; +.password-field label { + display: flex; +} +.password-field label input:checked ~ .visible { + display: none; +} +.password-field label input:not(:checked) ~ .invisible { + display: none; } -.options-tab { +.multi-state-button { display: grid; - grid-template-columns: repeat(4, 1fr); - padding: 1.5rem; - gap: 2rem 0.2rem; + text-align: center; + align-items: center; +} +.multi-state-button > * { + grid-area: 1/1/2/2; +} +.multi-state-button button { + z-index: 1; } -.option { +.clip { + -webkit-clip-path: circle(0); + clip-path: circle(0); +} + +.primary-action { + display: flex; + padding: 0.8rem 1rem; + gap: 0.5rem; + white-space: normal; + font-size: 0.8rem; + border-radius: 0.5rem; + background-color: transparent; + border: thin solid rgba(var(--text-color), 0.3); +} +.primary-action .icon { + fill: var(--accent-color); +} +.primary-action:not(:last-of-type) { + margin-right: 0.5rem; +} + +.page { position: relative; display: flex; flex-direction: column; - align-items: center; - text-align: center; - border-radius: 0.5rem; - width: 5rem; - text-transform: capitalize; - -webkit-tap-highlight-color: transparent; - cursor: pointer; - overflow: hidden; - user-select: none; -} -.option .icon { - height: 3rem; - width: 3rem; - background: rgba(var(--text-color), 0.06); - border-radius: 1rem; - padding: 0.85rem; - margin-bottom: 0.6rem; -} -.option h4 { - font-size: 0.85rem; - opacity: 0.8; - font-weight: 500; -} - -.notification-dot::after { - content: ""; - position: absolute; - z-index: 1; - top: 0; - right: 0; - height: 0.6rem; - width: 0.6rem; - background-color: #E53935; - border-radius: 0.5rem; - transition: transform 0.3s; -} - -.shrink.notification-dot::after { - transform: scale(0); -} - -#deposit .container-header, -#withdraw .container-header { - background: linear-gradient(rgba(var(--foreground-color), 1) 90%, transparent); -} - -sm-tab-header { - position: sticky; - top: 0; - display: inline-flex; - background-color: var(--dark-shade); - z-index: 2; - padding: 0.3rem; - margin: 1rem 0; - border-radius: 3rem; -} - -sm-tab { - text-transform: capitalize; -} -sm-tab::part(tab) { - padding: 0.4rem 1.2rem; -} - -sm-panel { - width: 100%; -} - -.request { - display: grid; - gap: 1rem; + overflow-y: auto; + align-content: flex-start; padding: 1.5rem; - border-radius: 0.6rem; - background: rgba(var(--text-color), 0.06); } -.request h4 { - font-weight: 400; - font-size: 0.9rem; + +#wallet_section { + background-color: rgba(var(--text-color), 0.03); + border-radius: 0.5rem; + padding: 1.5rem; } -.request h5 { - text-transform: capitalize; - font-weight: 400; - opacity: 0.8; - margin-bottom: 0.2rem; + +#transactions_list { + flex-direction: column; + padding-bottom: 4rem; } -.request .action { - align-self: flex-end; -} -.request .amount { - font-family: "Roboto", sans-serif; -} -.request button { - width: auto; -} -.request .flex { + +.transaction { + grid-template-columns: auto 1fr auto; + gap: 0.5rem 1rem; + padding: 0.8rem; align-items: center; - justify-content: flex-end; - justify-self: flex-end; + background-color: rgba(var(--text-color), 0.03); + border-radius: 0.3rem; } -.request .flex button { - margin: 0; +.transaction:not(:last-of-type) { + margin-bottom: 0.5rem; } -.request.placeholder { - pointer-events: none; - animation: pulse infinite 0.6s alternate; +.transaction__icon { + display: flex; + align-items: center; + justify-content: center; + grid-area: 1/1/3/2; + width: 2.5rem; + height: 2.5rem; + background-color: rgba(var(--text-color), 0.03); + border-radius: 0.5rem; } -.request.placeholder h4, .request.placeholder h5 { - padding: 0.5rem 0; - background: rgba(var(--text-color), 0.06); +.transaction__icon .icon { + fill: var(--accent-color); } -.request.placeholder .btns { - display: grid; - gap: 0.5rem; - grid-auto-flow: column; - justify-content: flex-end; +.transaction__receiver { + font-size: 0.9rem; + font-weight: 500; + color: rgba(var(--text-color), 0.8); } -.request.placeholder .btns h4 { - width: 6rem; +.transaction__time { + font-size: 0.8rem; + color: rgba(var(--text-color), 0.8); } -.request.placeholder h5 { - width: 50%; +.transaction__amount { + font-size: 1rem; + font-weight: 700; + grid-area: 1/3/3/4; } -.request.placeholder .time { - width: 3rem; +.transaction__amount.sent::before { + content: "-"; } -.request.placeholder:nth-of-type(2) { - animation-delay: 0.1s; -} -.request.placeholder:nth-of-type(3) { - animation-delay: 0.2s; -} -.request.placeholder:nth-of-type(4) { - animation-delay: 0.3s; -} -.request.placeholder:nth-of-type(5) { - animation-delay: 0.4s; -} -.request.placeholder:nth-of-type(6) { - animation-delay: 0.5s; +.transaction__amount.received::before { + content: "+"; } -.deposited { - color: #00C853; -} - -.decline-request { - margin-right: 0.5rem !important; -} - -.withdrawn { - color: #d43125; -} - -.container { - display: grid; - gap: 1rem; - width: 100%; -} - -@keyframes fade-in { - from { - opacity: 0; - } - to { - opacity: 1; - } -} -.page { - padding: 1rem 1.5rem; - padding-bottom: 5rem; - animation: fade-in 0.4s; -} -.page .container-header { - display: grid; - grid-template-columns: 1fr auto; - grid-template-areas: ". ." "search search"; - gap: 1rem; - top: 0; - background: rgba(var(--foreground-color), 1); - will-change: auto; +.fab { + position: absolute; + right: 0; + bottom: 0; + margin: 1.5rem; + box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2); z-index: 2; } -.page .container-header .search { - grid-area: search; -} -.page .container-header .search input { - padding: 1rem; - border: none; - width: 100%; - background: var(--dark-shade); - font-size: 1rem; - font-weight: 500; - color: rgba(var(--text-color), 1); - border-radius: 0.2rem; -} -.page .container-header .search input:focus { - outline: none; - background: rgba(var(--text-color-light), 0.2); + +#scroll_to_top { + border-radius: 3rem; + background-color: rgba(var(--foreground-color), 1); } -.copy-row { +#transaction_result { display: grid; - grid-template-columns: 1fr auto; - align-items: center; gap: 0.5rem; - width: auto; -} -.copy-row h4 { - margin-bottom: 0 !important; - font-weight: 400; -} -.copy-row .icon { - cursor: pointer; - padding: 0.4rem; - height: 1.8rem; - width: 1.8rem; -} -.copy-row .copy { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -.time { - font-weight: 500; -} - -#report_popup { - width: 32rem; -} - -#profile_page { - display: flex; - flex-direction: column; -} -#profile_page button { - align-self: flex-start; -} - -.complaint { - display: grid; - gap: 1.5rem 0; -} -.complaint .complaint-actions { + height: max(40vh, 24rem); align-items: center; - margin: 1.5rem 0 0 0; + justify-content: center; + text-align: center; + align-content: center; } -.complaint .processed { - color: #007732; +#transaction_result.success .icon--failed { + display: none; } -.complaint .unprocessed { - color: #d43125; +#transaction_result.failed .icon--success { + display: none; } -.complaint .processed, -.complaint .unprocessed { - margin-bottom: 1.5rem; +#transaction_result h3 { + text-align: center; + width: 100%; } -.complaint button .icon { - padding: 0.2rem; - margin-right: 0.5rem; - stroke: var(--accent-color); - stroke-width: 8; +#transaction_result .icon { + justify-self: center; + height: 4rem; + width: 4rem; + border-radius: 5rem; + margin-bottom: 1rem; + -webkit-animation: popup 1s; + animation: popup 1s; +} +#transaction_result .icon--success { + fill: rgba(var(--background-color), 1); + padding: 1rem; + background-color: #0bbe56; +} +#transaction_result .icon--failed { + background-color: rgba(var(--text-color), 0.03); + fill: var(--danger-color); +} +#transaction_result sm-copy { + font-size: 0.8rem; } -.complaints-container { - padding-top: 1.5rem; - display: grid; - align-items: flex-start; - gap: 1.5rem; -} - -#helpline_page sm-select { - margin-bottom: 1.5rem; -} - -.complaint-placeholder { - animation: pulse infinite 0.6s alternate; -} -.complaint-placeholder h4, -.complaint-placeholder h5 { - border-radius: 0.2rem; -} -.complaint-placeholder h5 { - background: rgba(var(--text-color), 0.1); - padding: 0.5rem 0.6rem; -} -.complaint-placeholder h4 { - background: rgba(var(--text-color), 0.2); - padding: 0.85rem 0.85rem; -} -.complaint-placeholder .demo-btn { - padding: 0.85rem 3rem; -} - -@keyframes pulse { - from { - opacity: 0.4; +@-webkit-keyframes popup { + 0% { + opacity: 0; + transform: scale(0.2) translateY(600%); } - to { + 10% { + transform: scale(0.2) translateY(5rem); opacity: 1; } -} -#main_loader { - text-align: center; - place-content: center; - height: 100vh; - width: 100vw; - position: fixed; - left: 0; -} -#main_loader sm-button { - margin-left: 0; - margin-top: 1rem; -} -#main_loader svg { - height: 2rem; - width: 2rem; - stroke: var(--accent-color); - stroke-width: 6; - fill: none; - overflow: visible; - stroke-linecap: round; - stroke-dashoffset: 210; - stroke-dasharray: 210; - justify-self: center; - align-self: center; - margin-bottom: 2rem; -} -#main_loader h3 { - width: 100%; - font-weight: 400; - word-spacing: 0.16rem; -} - -#upi_txId_section .copy-row { - margin-bottom: 1.5rem; + 40% { + transform: scale(0.2) translateY(0); + } + 80% { + transform: scale(1.1) translateY(0); + } + 100% { + transform: scale(1) translateY(0); + } } @keyframes popup { 0% { - stroke-dashoffset: 50; - transform: translateY(4rem) scale(0.2, 0.6); + opacity: 0; + transform: scale(0.2) translateY(600%); } - 40% { - transform: translateY(0) scale(0.2); - } - 41% { - transform: translateY(0) scale(0.2); - } - 50% { - stroke-dashoffset: 50; - transform: translateY(0) scale(1); - } - 100% { - stroke-dashoffset: 0; - } -} -#transaction_result { - z-index: 12; -} -#transaction_result #transaction_heading { - margin-bottom: 1rem; -} -#transaction_result .copy-row { - grid-template-areas: "label label" ". ."; - margin-top: 1rem; - gap: 0 1rem; -} -#transaction_result .copy-row h4 { - font-weight: 500; -} -#transaction_result h5 { - grid-area: label; - color: rgba(var(--text-color), 0.7); -} -#transaction_result h4, #transaction_result h5, #transaction_result p { - text-align: center; -} -#transaction_result > h4 { - font-size: 1.2rem; - margin-top: 2rem; - margin-bottom: 0.5rem; -} -#transaction_result sm-button { - align-self: center; - width: auto; -} - -#failure_svg { - height: 5rem; - width: 5rem; - stroke-width: 4; - align-self: center; - stroke: none; - stroke-dasharray: 50; - fill: rgba(var(--text-color), 0.1); - animation: popup 2s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275); -} - -#success_art { - margin: 1rem 0; - height: 14rem; - width: 100%; - align-self: center; -} -#success_art circle { - transform-origin: center; - transform: scale(0.4); - animation: explode 1.6s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275); -} -#success_art polygon { - transform-origin: center; - transform: rotate(-20deg); - animation: rotate-in-place 1s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275); -} -#success_art polygon:nth-of-type(1) { - animation-delay: 0.1s; -} -#success_art polygon:nth-of-type(2) { - animation-delay: 0.2s; -} -#success_art polygon:nth-of-type(3) { - animation-delay: 0.3s; -} -#success_art circle:nth-of-type(1) { - animation-delay: 0.1s; -} -#success_art circle:nth-of-type(2) { - animation-delay: 0.2s; -} -#success_art circle:nth-of-type(3) { - animation-delay: 0.3s; -} -#success_art circle:nth-of-type(4) { - animation-delay: 0.4s; -} -#success_art circle:nth-of-type(5) { - animation-delay: 0.5s; -} - -#failure_svg line { - stroke: #EF5350; -} - -.rupee-symbol { - height: 1rem; - width: 1rem; - fill: rgba(var(--text-color), 0.5); -} - -#deposit_rupee .copy-row { - margin-bottom: 1rem; -} - -.activity-container { - display: grid; - gap: 1rem; -} - -.activity { - position: relative; - overflow: hidden; - display: grid; - background: rgba(var(--text-color), 0.06); - border-radius: 0.6rem; - padding: 1rem 1.2rem; - gap: 0 1rem; - grid-template-columns: auto 1fr auto; - grid-template-areas: "icon type amount" "icon receiver time"; - align-items: center; - cursor: pointer; - transition: transform 0.3s; -} -.activity .icon { - grid-area: icon; - height: 3rem; - width: 3rem; - padding: 0.85rem; - background: rgba(var(--text-color), 0.06); - background-size: cover; - border-radius: 2rem; -} -.activity .activity-type { - grid-area: type; - text-transform: capitalize; - font-weight: 400; - font-size: 0.85rem; -} -.activity .activity-receiver { - grid-area: receiver; - font-weight: 500; - font-size: 0.9rem; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} -.activity .activity-amount { - text-align: right; - grid-area: amount; - font-family: "Roboto", sans-serif; - white-space: nowrap; -} -.activity .activity-time { - text-align: right; - grid-area: time; - color: rgba(var(--text-color), 0.7); - font-weight: 500; - white-space: nowrap; -} -.activity .pending { - display: inline-flex; - padding: 0.3rem 0.6rem; - background: rgba(var(--text-color), 0.06); - border-radius: 1rem; - width: max-content; - margin-left: 0.4rem; -} -.activity.placeholder { - pointer-events: none; - animation: pulse infinite 0.6s alternate; -} -.activity.placeholder .activity-type, -.activity.placeholder .activity-receiver { - background: rgba(var(--text-color), 0.06); - padding: 0.5rem 0; -} -.activity.placeholder .activity-type { - width: 50%; -} -.activity.placeholder:nth-of-type(2) { - animation-delay: 0.1s; -} -.activity.placeholder:nth-of-type(3) { - animation-delay: 0.2s; -} -.activity.placeholder:nth-of-type(4) { - animation-delay: 0.3s; -} -.activity.placeholder:nth-of-type(5) { - animation-delay: 0.4s; -} -.activity.placeholder:nth-of-type(6) { - animation-delay: 0.5s; -} -.activity.placeholder:nth-of-type(7) { - animation-delay: 0.6s; -} -.activity.placeholder:nth-of-type(8) { - animation-delay: 0.7s; -} - -.cashier-message { - display: flex; - flex-direction: column; - background: rgba(var(--text-color), 0.06); - border-radius: 0.6rem; - padding: 1rem 1.2rem; -} -.cashier-message .time { - margin-bottom: 0.5rem; -} - -.back-arrow { - stroke-width: 10; - margin-right: 0.5rem; - padding: 0.2rem; -} - -.select { - max-width: 50ch; - position: relative; - display: flex; - width: 100%; - border-radius: 0.3rem; - background: rgba(var(--text-color), 0.06); - align-items: center; -} -.select:first-of-type:not(:last-of-type) { - border-radius: 0.3rem 0.3rem 0 0; -} -.select + .select { - margin-top: 0; - border-radius: 0 0 0.3rem 0.3rem; - border-top: solid 1px rgba(var(--text-color), 0.16); -} -.select label { - display: flex; - align-items: center; - cursor: pointer; - flex: 1; - padding: 0.85rem 1rem; -} -.select input[type=radio] { - display: none; -} -.select input:checked ~ .radio .outer-ring { - stroke: var(--accent-color); -} -.select input:checked ~ .radio .inner-disc { - transform: none; -} -.select .radio { - width: 1.2rem; - height: 1.2rem; - fill: none; - overflow: visible; - margin-right: 0.6rem; -} -.select .radio .outer-ring { - stroke-width: 8; - stroke: rgba(var(--text-color), 0.5); -} -.select .radio .inner-disc { - transform-origin: center; - fill: var(--accent-color); - transform: scale(0); - transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); -} -.select .remove { - width: 3rem; - height: 2rem; - padding: 0.7rem; - cursor: pointer; - stroke-width: 10; -} -.select .tag { - grid-area: tag; - opacity: 0.6; - font-weight: 500; - border: solid 1px rgba(var(--text-color), 0.4); - padding: 0.2rem 0.4rem; - border-radius: 0.3rem; - margin-right: 0.5rem; -} -.select h4 { - font-weight: 400; -} - -.add-upi { - margin-top: 0.4rem; - justify-self: flex-start; - width: max-content; -} - -#transaction_page header { - padding: 0.5rem 0; -} -#transaction_page header .back-arrow { - grid-area: back; -} -#transaction_page header h4 { - text-transform: capitalize; -} -#transaction_page h5 { - font-weight: 400; - font-family: "Roboto", sans-serif; - opacity: 0.8; - margin-bottom: 0.4rem; - text-transform: capitalize; -} -#transaction_page p:last-of-type { - margin: 2rem 0 1rem 0; - font-size: 0.9rem; - opacity: 0.8; -} -#transaction_page #transaction_details { - position: relative; - padding: 0.5rem; - max-width: 50ch; - border-radius: 0.5rem; -} -#transaction_page #transaction_details .icon { - height: 4rem; - width: 4rem; - padding: 1.2rem; - border-radius: 4rem; - margin-top: 1rem; - margin-bottom: 2rem; - background: rgba(var(--text-color), 0.06); -} -#transaction_page #transaction_details .success { - background: #00C853; - stroke-width: 8; - stroke: var(--background-color); -} -#transaction_page #transaction_details .flex { - margin-bottom: 1.5rem; - align-items: baseline; -} -#transaction_page #transaction_details strong { - font-weight: 500; -} -#transaction_page #transaction_details strong:not(:last-of-type) + sm-button { - margin-bottom: 1.5rem; - margin-top: -0.4rem; -} -#transaction_page #transaction_details strong:not(:last-of-type) { - margin-bottom: 1rem; -} -#transaction_page #transaction_details sm-button { - width: max-content; - margin-top: 0.6rem; -} -#transaction_page .transaction-amount { - font-size: 2rem; - font-weight: 400; -} -#transaction_page #transaction_time { - right: 0; - position: absolute; - margin: 1.5rem; -} - -@keyframes explode { - 0% { - transform: scale(0.4); - } - 80% { - transform: scale(1); - } - 100% { - transform: scale(0.9); - } -} -@keyframes rotate-in-place { - 0% { - transform: rotate(-20deg); - } - 100% { - transform: none; - } -} -#people_container { - display: grid; - grid-template-columns: repeat(4, 1fr); - padding: 1.5rem; - gap: 2rem 0.2rem; -} - -#add_person_btn, -.person { - position: relative; - overflow: hidden; - cursor: pointer; - display: flex; - flex-direction: column; - width: 5rem; - -webkit-tap-highlight-color: transparent; - border-radius: 0.5rem; - user-select: none; -} - -#add_person_btn { - text-align: center; - font-size: 0.85rem; - opacity: 0.8; - font-weight: 500; -} -#add_person_btn .icon { - height: 3rem; - width: 3rem; - border-radius: 2rem; - stroke-width: 10; - padding: 1rem; - background: rgba(var(--text-color), 0.06); - align-self: center; - margin-bottom: 0.6rem; -} - -.person { - align-items: center; -} - -.person-initials, #person_initials { - display: flex; - justify-content: center; - height: 3rem; - width: 3rem; - font-size: 1.2rem !important; - font-weight: 500; - align-items: center; - border-radius: 2rem; - margin-bottom: 0.6rem !important; - text-transform: uppercase; - color: white; -} - -.person-name { - font-size: 0.85rem; - opacity: 0.8; - font-weight: 500; - text-align: center; -} - -#person_popup > .flex:first-of-type { - margin: 1rem 0; -} -#person_popup > .flex:first-of-type .flex { - margin-top: 0.5rem; -} -#person_popup > .flex:first-of-type .flex .icon { - height: 2.6rem; - width: 2.6rem; - padding: 0.85rem; - cursor: pointer; - stroke-width: 8; -} -#person_popup > .flex:first-of-type .flex .icon:hover { - background: rgba(var(--text-color), 0.06); -} -#person_popup h3 { - text-transform: capitalize; -} -#person_popup h5 { - font-weight: 500; - opacity: 0.8; -} -#person_popup .copy-row { - margin-bottom: 1.5rem; -} -#person_popup #show_person_name { - padding: 0.5rem 1rem; - border-radius: 0.5rem; - max-width: 30ch; -} -#person_popup #show_person_name:focus { - outline: none; - background: rgba(var(--text-color), 0.1); -} - -#activity_page .empty-state, -#request_page .empty-state, -#settings_page .empty-state { - justify-content: left; -} - -#settings_page h4 { - margin-top: 2rem; - margin-bottom: 0.6rem; -} -#settings_page .copy-row h4 { - margin: 0; -} -#settings_page p { - color: rgba(var(--text-color), 0.7); -} -#settings_page sm-button { - margin-top: 0.85rem; -} -#settings_page .flex { - max-width: 60ch; -} -#settings_page .my-qr-code { - margin-bottom: 1.5rem; - height: 14rem; -} -#settings_page .my-qr-code img { - height: 100%; -} - -@media only screen and (max-width: 640px) { - #home_page, #deposit { - display: grid; - gap: 1.5rem; - grid-template-areas: "." "left"; - grid-template-columns: minmax(0, 1fr); - } - #home_page .left, #deposit .left { - grid-area: left; - } - - sm-select { - width: 100%; - } - - .hide-on-mobile { - display: none !important; - } - - #transaction_page { - padding-top: 0; - } - #transaction_page header { - padding: 1.5rem 0; - } - - #deposit .user-panel { - padding: 0; - } - - video { - height: 100vw; - } -} -@media only screen and (min-width: 640px) { - .hide-on-desktop { - display: none !important; - } - - body { - padding: 0 2rem; - margin-left: 4rem; - } - - #sign_in_page { - padding: 0 6vw; - grid-auto-flow: column; - } - #sign_in_page .info { - padding: 0; - } - #sign_in_page .sign-in-box { - align-self: auto; - width: 26rem; - padding: 2rem; - margin-top: unset; - min-height: 80vh; - min-width: 26rem; - box-shadow: 0 0 0.3rem #00000016, 0 6rem 2rem -2rem #00000016; - } - - sm-popup { - background: rgba(var(--foreground-color), 1); - } - - sm-popup::part(popup) { - width: 24rem; - } - - #confirmation { - width: 24rem; - } - - #on_boarding { - width: 26rem; - } - - #navbar { - justify-content: flex-start; - flex-direction: column; - align-items: stretch; - left: 0; - bottom: 0; - top: 0; - right: auto; - border-top: none; - border-radius: 0; - background: rgba(var(--text-color), 0.06); - box-shadow: -0.5rem 0 0.5rem #00000008 inset; - } - #navbar .navbar-item { - display: flex; - width: auto; - padding: 0.85rem 1.2rem; - user-select: none; - } - #navbar .navbar-item .icon { - height: 1.2rem; - width: 1.2rem; - } - #navbar .navbar-item h5 { - display: none; - } - #navbar .navbar-item:hover { + 10% { + transform: scale(0.2) translateY(5rem); opacity: 1; } - #navbar .logo { - margin: 1.5rem 1rem; + 40% { + transform: scale(0.2) translateY(0); } - #navbar .logo h4 { - display: none; + 80% { + transform: scale(1.1) translateY(0); } - #navbar .logo .main-logo { - height: 1.2rem; - width: 1.2rem; - } - #navbar .active { - background: rgba(var(--text-color), 0.06); - } - - .page { - padding-bottom: 2rem; - } - - #home_page { - padding-top: 0.5rem; - } - #home_page .left { - margin-top: 1rem; - } - - .options-tab, #people_container { - grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr)); - gap: 2rem 0.85rem; - } - - .display-balance .balance { - height: 9rem; - } - - .request { - grid-template-columns: minmax(0, auto) auto; - grid-template-areas: "time time" " . ." " . ."; - } - .request .time { - grid-area: time; - margin-bottom: 0 !important; - } - .request button { - width: max-content; - margin-left: auto; - } - .request .breakable { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - - #deposit .user-panel { - padding-right: 0; - } - - #settings_page .copy-row { - display: inline-grid; + 100% { + transform: scale(1) translateY(0); } } -@media only screen and (min-width: 800px) { - body { - margin-left: 11rem; +.cashier-request, +.wallet-request, +.payment-request { + display: flex; + gap: 1rem; + align-items: center; + padding: 0.8rem; + border-radius: 0.3rem; + background-color: rgba(var(--text-color), 0.06); +} +.cashier-request:not(:last-of-type), +.wallet-request:not(:last-of-type), +.payment-request:not(:last-of-type) { + margin-bottom: 1rem; +} +.cashier-request__time, +.wallet-request__time, +.payment-request__time { + font-size: 0.8rem; +} + +.payment-request { + display: grid; + grid-template-columns: 1fr auto; +} +.payment-request__amount { + font-weight: 700; + text-align: right; +} + +@media screen and (min-width: 40rem) { + sm-popup { + --width: 24rem; } - .complaint { - gap: 0 1.5rem; - grid-template-columns: 1fr 1fr; - grid-template-areas: ". . " "header header"; + .popup__header { + grid-column: 1/-1; + padding: 1rem 1.5rem 0 1.5rem; } - .complaint .complaint-actions { + + body { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + } + + #main_card { + display: grid; + grid-template-columns: auto 1fr; + grid-template-rows: auto 1fr; + grid-template-areas: "nav header" "nav main"; + position: relative; + border-radius: 0.5rem; + overflow: hidden; + box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.05), 0 1rem 3rem rgba(0, 0, 0, 0.2); + background-color: rgba(var(--foreground-color), 0.9); + } + + #main_header { grid-area: header; } - .complaint .left { - border-right: 1px solid rgba(var(--text-color), 0.2); - padding-right: 1.5rem; + + #pages_container { + grid-area: main; } - .complaint .right { - display: flex; - justify-content: center; + + #main_navbar { + grid-area: nav; + border-top: none; flex-direction: column; + height: 100%; + } + #main_navbar ul { + flex-direction: column; + gap: 0.5rem; + padding: 0.3rem; + } + #main_navbar ul li:last-of-type { + margin-top: auto; } - #navbar .navbar-item h5 { - font-size: 0.9rem; - margin: 0; - display: block; + .nav-item { + aspect-ratio: 1/1; } - #navbar .icon { - margin-right: 0.85rem; - } - #navbar .logo h4 { - display: block; - font-size: 1rem; + .nav-item__indicator { + width: 0.25rem; + height: 50%; + left: 0; + border-radius: 0 1rem 1rem 0; + bottom: auto; } - .user-panel { - position: sticky; - top: 1.5rem; - padding-top: 1.5rem; - } - - #home_page, #deposit { - display: grid; - gap: 1.5rem; - grid-template-columns: minmax(0, 1fr) 22rem; - } - - #deposit { - grid-template-columns: minmax(0, 1fr) 18rem; - } - #deposit .user-panel { - padding-right: 0; - } - - .activity, .cashier-message { - width: 60ch; - } - - .request { - grid-template-columns: minmax(0, auto) auto; - grid-template-areas: "time time" " . ." " . ."; + #user { + grid-template-columns: 1fr 20rem; + align-content: flex-start; + align-items: flex-start; } } -@media only screen and (min-width: 1280px) { - .request { - grid-template-areas: "time time time" ". . ."; - } - - #deposit { - grid-template-columns: minmax(0, 1fr) 20rem; - } - #deposit .request { - grid-template-areas: "time time time time" ". . . ."; - } - #deposit #unconfirmed_requests_container .request { - display: flex; - flex-direction: column; - } -} -@media only screen and (max-width: 320px) { - :root { - font-size: 14px; +@media screen and (min-width: 56rem) { + #main_card { + height: 80vh; + width: 56rem; } } @media (any-hover: hover) { - .navbar-item:hover { - background: rgba(var(--text-color), 0.06); + ::-webkit-scrollbar { + width: 0.5rem; + height: 0.5rem; } - .remove { - opacity: 0.6; + ::-webkit-scrollbar-thumb { + background: rgba(var(--text-color), 0.3); + border-radius: 1rem; + } + ::-webkit-scrollbar-thumb:hover { + background: rgba(var(--text-color), 0.5); } - .remove:hover { - opacity: 1; + .interact:not([disabled]) { + transition: background-color 0.3s; } + .interact:not([disabled]):hover { + background-color: rgba(var(--text-color), 0.06); + } + + .button:not([disabled]) { + transition: background-color 0.3s, filter 0.3s; + } + .button:not([disabled]):hover { + filter: contrast(2); + } +} +@supports (overflow: overlay) { + body { + overflow: overlay; + } +} +.hide { + display: none !important; } \ No newline at end of file diff --git a/css/main.css.map b/css/main.css.map deleted file mode 100644 index b51315e..0000000 --- a/css/main.css.map +++ /dev/null @@ -1,9 +0,0 @@ -{ - "version": 3, - "mappings": "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", - "sources": [ - "main.scss" - ], - "names": [], - "file": "main.css" -} \ No newline at end of file diff --git a/css/main.min.css b/css/main.min.css index 9c6c5f2..d950434 100644 --- a/css/main.min.css +++ b/css/main.min.css @@ -1 +1 @@ -#transaction_page h5,*,.activity .activity-amount,.balance h4,.request .amount{font-family:Roboto,sans-serif}#on_boarding sm-button[variant=no-outline]::part(button),body,body[data-theme=dark] .flo-balance-card,sm-button{color:rgba(var(--text-color),1)}.action,button{display:inline-flex}.capitalize,button{text-transform:capitalize}.icon,.loader{overflow:visible}*{box-sizing:border-box;padding:0;margin:0}button,h1,h2,h3,h4,h5{font-family:Poppins,sans-serif}:root{font-size:clamp(16px,1.2vmax,40px)}body{--accent-color:#2752ca;--text-color:17,17,17;--text-color-light:85,85,85;--foreground-color:255,255,255;--background-color:rgba(var(--foreground-color), 1);--dark-shade:#f4f4f4;--error-color:#E53935;--hue:255;--saturation:61%;--lightness:39%;background-size:cover}body[data-theme=dark]{--accent-color:#4d74e0;--text-color:238,238,238;--text-color-light:170,170,170;--foreground-color:26,26,26;--background-color:#111;--dark-shade:#222;--hue:255;--saturation:39%;--lightness:70%;background-color:var(--background-color)}body[data-theme=dark] #focus_illu:not(.hide){opacity:.7;fill:rgba(var(--text-color),.5)}a{font-weight:500;text-decoration:none;color:var(--accent-color)}.dark-text{color:#111}h1{font-size:3.5rem}h2{font-size:2rem}h3{font-size:1.5rem}h4{font-size:1rem}h5{font-size:.85rem}h1,h2,h3,h4,h5{font-weight:600}p{font-size:.95rem;line-height:1.5;max-width:60ch;color:rgba(var(--text-color),.9)}strong{font-weight:700}button{position:relative;align-items:center;justify-content:center;padding:.6rem 1.2rem;font-weight:600;cursor:pointer;border-radius:.3rem;color:var(--accent-color);transition:transform .3s;border:none;background:rgba(var(--text-color),.1);-webkit-tap-highlight-color:transparent}button:focus{outline:solid thin}button:disabled{cursor:default;background:rgba(var(--text-color),.4)}button:disabled~.loader{opacity:0}::-moz-focus-inner{border:none}.bottom-padding{padding-bottom:1.5rem}.top-padding{padding-top:1rem}.bottom-margin{margin-bottom:1.5rem}.top-margin{margin-top:1.5rem}.flex{display:flex}.grid{display:grid}.grid-2{grid-template-columns:auto auto;gap:1rem}.align-center{align-items:center}#confirmation,#prompt,.direction-column{flex-direction:column}.justify-right{margin-left:auto}.space-between{justify-content:space-between}.label{margin-bottom:.4rem}.light-text{opacity:.7}.hide{opacity:0;pointer-events:none}.hide-completely{display:none!important}.breakable{word-break:break-all}.separator{padding:.1rem}.no-transformations{transform:none!important}span.ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(var(--text-color),.2);pointer-events:none}.highlight{box-shadow:0 0 0 .2rem var(--accent-color) inset;transition:box-shadow .3s}sm-button[variant=outlined]{--accent-color:rgba(var(--text-color), 1)}sm-button[variant=primary]::part(button){color:#fff}.loader{fill:none;stroke-width:10;stroke:var(--accent-color);height:2rem;width:2rem;stroke-dashoffset:230;stroke-dasharray:230;padding:2px;justify-self:center;transition:opacity .3s}#reader,.action{overflow:hidden}#on_boarding h4,#on_boarding p,.activity{transition:transform .3s}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes load{50%{stroke-dashoffset:0}100%{stroke-dashoffset:-210}}@keyframes load-btn-loader{50%{stroke-dashoffset:0}100%{stroke-dashoffset:-200}}#on_boarding{position:absolute;left:0;top:0;border-radius:.85rem;box-shadow:.1rem .2rem 1rem rgba(var(--text-color),.16);padding:1.5rem;color:#fff;background:var(--accent-color);z-index:10;transition:transform .3s,opacity .3s;width:100%}#on_boarding #total_tuts{opacity:.8;font-size:.85rem}#on_boarding h4{margin-bottom:.5rem;font-size:1.2rem}#on_boarding p{color:inherit;margin-bottom:1.5rem}#on_boarding .icon{stroke-width:8;stroke:#fff;padding:.2rem;cursor:pointer}#on_boarding sm-button[variant=no-outline]::part(button){background:rgba(var(--foreground-color),1)}#on_boarding sm-button:not([variant=no-outline])::part(button){color:#fff}.action{position:relative;align-items:center;padding:0;background:0 0}.action:disabled .primary-btn{background:0 0}.action:focus{outline:0}.action.start-loading{align-items:center;pointer-events:none}.action.start-loading h4{transform:translateX(1ch);background:inherit!important;color:rgba(var(--text-color),.9)}.action.start-loading .loader-container{transform:none}.action.start-loading .loader{animation:load-btn-loader 2.6s infinite,rotate 1s infinite linear}.action h4{padding:.5rem 1.2rem;font-size:.9rem;clip-path:circle(100%);border-radius:.2rem;transition:.3s transform}.action .btn{z-index:2}.action .loader{height:1.2rem;width:1.2rem;stroke-dashoffset:200;stroke-dasharray:200;margin:0!important}.action:not(.start-loading) .loader-container{opacity:0;transform:translateX(1rem)}.loader-container{position:absolute;z-index:1;left:0;transition:transform .3s,opacity .3s}.animate-loader{animation:load 2.6s infinite,rotate 1s infinite linear}.expand{width:100%}.fade-left{animation:fadeleft .3s}.fade-right{animation:faderight .3s}@keyframes faderight{from{opacity:0;transform:translateX(-1rem)}to{opacity:1;transform:none}}@keyframes fadeleft{from{opacity:0;transform:translateX(1rem)}to{opacity:1;transform:none}}.logo{display:flex;align-items:center;cursor:pointer}.logo h4{font-weight:500;font-size:clamp(1.1rem,2vw,1.2rem)}.logo .main-logo{height:clamp(1.4rem,2vw,1.6rem);width:clamp(1.4rem,2vw,1.6rem);fill:rgba(var(--text-color),1);stroke:none;margin-right:.2rem}textarea{width:100%;max-width:100%;background:rgba(var(--text-color),.1);color:inherit;border:none;border-radius:.2rem;resize:none;font-size:1rem;line-height:1.6;padding:.85rem}.btn,.flo-balance-card{color:rgba(var(--foreground-color),1)}:empty+.empty-state{display:grid}.empty-state{display:none;place-items:center;width:100%}.empty-state svg{height:12rem;width:12rem}.empty-state svg ellipse,.empty-state svg path,.empty-state svg polyline{stroke-linecap:round;stroke-linejoin:round;stroke:rgba(var(--text-color),.7);fill:none}.container-header{display:flex;align-items:center;flex-direction:row;width:100%;padding:1rem 0}.container-header h2{flex:1}.container-header button{align-self:center}.btn{background:var(--accent-color);padding:.4rem 1rem}.back-arrow{stroke:rgba(var(--text-color),1);fill:none;height:2rem;cursor:pointer}.card{border-radius:.6rem;padding:1.5rem;background:rgba(var(--foreground-color),1)}.solid-background{background:rgba(var(--foreground-color),1)!important}#confirmation h4,#prompt h4{font-weight:500;margin-bottom:1.5rem}#confirmation .flex sm-button:first-of-type,#prompt .flex sm-button:first-of-type{margin-right:.6rem;margin-left:auto}#prompt .flex{margin-top:1rem}.refresh{margin-top:.6rem;margin-bottom:1rem}sm-popup sm-input:not(:last-of-type){margin-bottom:1rem}sm-popup p{margin-block-end:1rem}sm-popup .action h4{padding:.5rem 1rem;font-weight:500}sm-popup .message{margin-bottom:.2rem}sm-popup .message+.copy-row{margin-bottom:1.5rem}sm-popup h5:not(.tag){font-family:Roboto,sans-serif;margin-bottom:.4rem;margin-top:1rem;font-weight:500}.my-qr-code{background:#fff;border-radius:.5rem;padding:1rem;max-width:max-content}#qr_code_popup::part(popup){height:80vh;max-height:90vh}#qr_code_popup::part(popup-body){padding:0}#qr_code_popup .popup-header{padding-bottom:1.5rem}#qr_code_popup sm-tab-header{margin:0 auto;transform:translateX(-1rem)}#qr_code_popup sm-panel{display:flex;flex-direction:column;align-items:center;text-align:center}#qr_code_popup video{width:100%!important;object-fit:cover}#qr_code_popup p{margin-top:1.5rem;opacity:.8;text-align:center;max-width:30ch}sm-input[type=number]{font-size:1.2rem}.popup-header{padding:1.5rem;padding-bottom:0;display:flex;align-items:center;width:100%}.popup-header .icon{margin-right:1rem;padding:.2rem;stroke-width:10;cursor:pointer}.popup-header button{width:auto;margin-left:auto}details,summary{margin-bottom:1rem}summary{font-size:1rem;cursor:pointer}details h5{line-height:.6;margin-bottom:0;margin-top:1.2rem!important}details p{line-height:1.4}#sign_in_page{position:fixed;gap:2rem;width:100vw;height:100vh;overflow-y:auto;left:0;top:0;align-items:center;justify-content:space-between;background:url(sign-in-bg.svg) center,rgba(var(--foreground-color),1);background-size:cover;z-index:5}#sign_in_page .info{padding:1.5rem;align-items:center}#sign_in_page .info h1{line-height:1.1;font-weight:800;font-size:clamp(1.5rem,8vw,4rem);margin-top:1rem}#sign_in_page .sign-in-box{width:100%;z-index:1;margin-top:auto;justify-self:center;padding:1.5rem;padding-bottom:3rem;border-radius:.5rem;background:rgba(var(--foreground-color),1)}#sign_in_page .sign-in-box sm-input{text-align:left}#sign_in_page .sign-in-box sm-panel{width:100%}#sign_in_page .sign-in-box sm-tab-header{margin:0;background:0 0;align-self:flex-start}#sign_in_page .sign-in-box sm-tab-header::part(tab-header){padding-bottom:.4rem;gap:1.5rem}#sign_in_page .sign-in-box sm-tab::part(tab){padding:.4rem 0}#sign_in_page .sign-in-box sm-tab-panels{margin-top:3rem}#sign_in_page .sign-in-box form{width:100%}#sign_in_page .sign-in-box h2{margin-bottom:.5rem}#sign_in_page .sign-in-box h3{font-weight:500}#sign_in_page .sign-in-box h4{font-weight:500;margin-bottom:1.5rem}#sign_in_page .sign-in-box h5{opacity:.8;font-weight:500}#sign_in_page .sign-in-box .copy-row h4{max-width:34ch}#sign_in_page .sign-in-box .copy-row:not(:last-of-type){margin-bottom:1rem}#sign_in_page .sign-in-box button{width:auto;margin-top:1rem;padding:.6rem 1.6rem}#sign_in_page .sign-in-box p{max-width:35ch;margin-top:.5rem;margin-bottom:1.5rem}#sign_in_page .sign-in-box #credentials_section{border-top:1px rgba(var(--text-color),.2) solid;margin-top:1rem;padding-top:1.5rem;animation:slide-down .3s forwards}#sign_in_page .sign-in-box #sign_in_with{margin-top:2rem}@keyframes slide-down{from{transform:translateY(-1rem)}to{transform:none}}.primary-btn{padding:.6rem 1.2rem!important;background:var(--accent-color);justify-content:center;color:#fff}#navbar .navbar-item,.balance .tooltip,.user-panel .action h4{color:rgba(var(--text-color),1)}#main_header{align-items:center;padding:1.5rem 1rem;justify-content:space-between}.icon{height:1.2rem;width:1.2rem;fill:none;stroke:rgba(var(--text-color),.8);stroke-width:6;stroke-linecap:round;stroke-linejoin:round}#navbar{display:flex;flex-direction:row;align-items:center;justify-content:space-evenly;position:fixed;left:0;right:0;bottom:0;top:auto;z-index:3;background:rgba(var(--foreground-color),1);box-shadow:0 -.5rem 1rem #00010;border-radius:1rem 1rem 0 0}#navbar .navbar-item,.option{border-radius:.5rem;text-align:center;text-transform:capitalize;-webkit-tap-highlight-color:transparent}#navbar .navbar-item{position:relative;overflow:hidden;cursor:pointer;padding:.3rem;padding-top:.85rem;opacity:.6;font-size:.85rem;width:100%;font-weight:600}#navbar .navbar-item h5{margin-top:.4rem}#navbar .navbar-item .icon{stroke:rgba(var(--text-color),1)}#navbar .active{opacity:1}.banking{stroke-width:4}#home_page{padding:0 0 4rem}#home_page .left{width:auto;border-radius:.6rem}#home_page .left h3,#home_page .left h4,#home_page .left p{padding:0 1.5rem}#home_page .left h3{font-size:2rem;margin-bottom:1rem}.user-panel{position:relative;padding:1.5rem;padding-top:1rem;align-self:flex-start}.user-panel .icon{stroke:rgba(var(--foreground-color),1)}.user-panel .action{width:auto;justify-content:flex-end;border-radius:2rem}.user-panel .action h4{border-radius:2rem;background-color:rgba(var(--text-color),.1);width:auto}.user-panel .action .clip{clip-path:circle(0 at 100% 0)!important}#deposit{padding-top:1.5rem}#deposit .flex sm-button{margin-bottom:1.5rem}#deposit .user-panel{padding:0 1rem}#deposit .display-balance{grid-template-areas:"rupee rupee" "flo flo"}#deposit sm-tab-header{display:flex}.display-balance{grid-template-columns:1fr 1fr;grid-template-areas:"rupee ." "flo flo";gap:.85rem;margin-top:1rem}#people_container,.options-tab{grid-template-columns:repeat(4,1fr);gap:2rem .2rem}.display-balance .icon{height:1.4rem;width:1.4rem;padding:.3rem;stroke-width:10;cursor:pointer}.balance{height:10rem;position:relative;display:flex;flex-direction:column;border-radius:1rem;padding:1rem;justify-content:flex-end}.balance span{font-size:.7em}.balance h4{font-size:1.8rem;font-weight:500;word-break:break-all;flex:1}.option,.tooltip{flex-direction:column}.balance h5{opacity:.8;margin-bottom:.2rem}.balance .tooltip{border-radius:1rem;margin-left:auto}.rupee-balance-card{grid-area:rupee;background:url("data:image/svg+xml,%3Csvg width='512' height='512' viewBox='0 0 512 512' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)'%3E%3Cg filter='url(%23filter0_d)'%3E%3Crect x='312' y='323' width='240' height='140' rx='18' transform='rotate(30 312 323)' fill='%231C783B'/%3E%3C/g%3E%3Cg filter='url(%23filter1_d)'%3E%3Crect x='431.283' y='302' width='240' height='140' rx='18' transform='rotate(50.0235 431.283 302)' fill='%232DBD5E'/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d' x='225' y='320' width='301.846' height='265.244' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dx='-5' dy='9'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3Cfilter id='filter1_d' x='307' y='299' width='285.477' height='297.86' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dx='-5' dy='9'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3CclipPath id='clip0'%3E%3Crect width='512' height='512' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A") bottom right no-repeat,linear-gradient(200deg,rgba(var(--text-color),.1),rgba(var(--text-color),.2));background-size:9rem,cover}.rupee-balance-card .tooltip{box-shadow:0 0 0 .4rem rgba(var(--text-color),.1) inset}.in-process-balance{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920' height='1080' viewBox='0 0 1920 1080'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:%231b1464;%7D.b%7Bfill:%2309083f;%7D.c%7Bfill:%2329abe2;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3Ebg-art1%3C/title%3E%3Cpolygon class='a' points='0 957.24 232 957.24 357 828 434 899 485 867 594 959 843 957 889 925 938 953 1301 953 1447 807 1555 915 1590 880 1623 913 1673 856 1744 957 1920 957.24 1920 1080 0 1080 0 957.24'/%3E%3Cpolygon class='b' points='495 959 594 959 485 867 434 899 495 959'/%3E%3Cpolygon class='c' points='232 957 357 828 247 957 232 957'/%3E%3Cpolygon class='c' points='1301 953 1447 807 1318.32 953 1301 953'/%3E%3C/svg%3E") left bottom,linear-gradient(135deg,#fd946a,#ff4857);background-size:cover}.in-process-balance .tooltip{box-shadow:0 0 0 .4rem #ff4857 inset}.flo-balance-card{grid-area:flo;background:url("data:image/svg+xml,%3Csvg width='1920' height='1080' viewBox='0 0 1920 1080' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)'%3E%3Cg filter='url(%23filter0_d)'%3E%3Ccircle cx='1814.5' cy='977.5' r='437.5' fill='white'/%3E%3C/g%3E%3Cg filter='url(%23filter1_d)'%3E%3Ccircle cx='1814.5' cy='977.5' r='243.5' fill='%231B0980'/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d' x='1344' y='515' width='913' height='913' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dx='-14' dy='-6'/%3E%3CfeGaussianBlur stdDeviation='9.5'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3Cfilter id='filter1_d' x='1538' y='709' width='525' height='525' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dx='-14' dy='-6'/%3E%3CfeGaussianBlur stdDeviation='9.5'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3CclipPath id='clip0'%3E%3Crect width='1920' height='1080' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A") center no-repeat,linear-gradient(270deg,#2f69e6,#1b0980);background-size:cover}.flo-balance-card .tooltip{box-shadow:0 0 0 .4rem #1b0980 inset}.tooltip{position:absolute;left:0;right:0;top:0;bottom:0;cursor:help;display:flex;background:rgba(var(--foreground-color),1);z-index:1;transition:clip-path .4s ease-out;clip-path:circle(.85rem at calc(100% - 1.5rem) 1.4rem);scrollbar-width:thin}.tooltip .tt-icon{font-size:.9rem;display:inline-flex;width:3rem;height:3rem;align-items:center;justify-content:center;margin-left:auto;font-weight:600}.tooltip .tooltip-text{padding:1rem;padding-top:0;line-height:1.4;font-size:.9rem;font-weight:400;overflow-y:auto;max-height:calc(100% - 3rem);max-width:30ch}.option h4,.user-type{font-weight:500}.tooltip:hover{clip-path:circle(100%)}.options-tab{display:grid;padding:1.5rem}.option{position:relative;display:flex;align-items:center;width:5rem;cursor:pointer;overflow:hidden;user-select:none}.option .icon{height:3rem;width:3rem;background:rgba(var(--text-color),.06);border-radius:1rem;padding:.85rem;margin-bottom:.6rem}.option h4{font-size:.85rem;opacity:.8}.notification-dot::after{content:"";position:absolute;z-index:1;top:0;right:0;height:.6rem;width:.6rem;background-color:#E53935;border-radius:.5rem;transition:transform .3s}.shrink.notification-dot::after{transform:scale(0)}#deposit .container-header,#withdraw .container-header{background:linear-gradient(rgba(var(--foreground-color),1) 90%,transparent)}sm-tab-header{position:sticky;top:0;display:inline-flex;background-color:var(--dark-shade);z-index:2;padding:.3rem;margin:1rem 0;border-radius:3rem}sm-tab{text-transform:capitalize}sm-tab::part(tab){padding:.4rem 1.2rem}sm-panel{width:100%}.request{display:grid;gap:1rem;padding:1.5rem;border-radius:.6rem;background:rgba(var(--text-color),.06)}.request h4{font-weight:400;font-size:.9rem}.request h5{text-transform:capitalize;font-weight:400;opacity:.8;margin-bottom:.2rem}.request .action{align-self:flex-end}.request button{width:auto}.request .flex{align-items:center;justify-content:flex-end;justify-self:flex-end}.request .flex button{margin:0}.request.placeholder{pointer-events:none;animation:pulse infinite .6s alternate}.request.placeholder h4,.request.placeholder h5{padding:.5rem 0;background:rgba(var(--text-color),.06)}.request.placeholder .btns{display:grid;gap:.5rem;grid-auto-flow:column;justify-content:flex-end}.request.placeholder .btns h4{width:6rem}.request.placeholder h5{width:50%}.request.placeholder .time{width:3rem}.request.placeholder:nth-of-type(2){animation-delay:.1s}.request.placeholder:nth-of-type(3){animation-delay:.2s}.request.placeholder:nth-of-type(4){animation-delay:.3s}.request.placeholder:nth-of-type(5){animation-delay:.4s}.request.placeholder:nth-of-type(6){animation-delay:.5s}.deposited{color:#00C853}.decline-request{margin-right:.5rem!important}.withdrawn{color:#d43125}.container{display:grid;gap:1rem;width:100%}@keyframes fade-in{from{opacity:0}to{opacity:1}}.page{padding:1rem 1.5rem;padding-bottom:5rem;animation:fade-in .4s}.page .container-header{display:grid;grid-template-columns:1fr auto;grid-template-areas:". ." "search search";gap:1rem;top:0;background:rgba(var(--foreground-color),1);will-change:auto;z-index:2}.page .container-header .search{grid-area:search}.page .container-header .search input{padding:1rem;border:none;width:100%;background:var(--dark-shade);font-size:1rem;font-weight:500;color:rgba(var(--text-color),1);border-radius:.2rem}.page .container-header .search input:focus{outline:0;background:rgba(var(--text-color-light),.2)}.copy-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.5rem;width:auto}.copy-row h4{margin-bottom:0!important;font-weight:400}.copy-row .icon{cursor:pointer;padding:.4rem;height:1.8rem;width:1.8rem}.copy-row .copy{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.time{font-weight:500}#report_popup{width:32rem}#profile_page{display:flex;flex-direction:column}#profile_page button{align-self:flex-start}.complaint{display:grid;gap:1.5rem 0}.complaint .complaint-actions{align-items:center;margin:1.5rem 0 0}#helpline_page sm-select,.complaint .processed,.complaint .unprocessed{margin-bottom:1.5rem}.complaint .processed{color:#007732}.complaint .unprocessed{color:#d43125}.complaint button .icon{padding:.2rem;margin-right:.5rem;stroke:var(--accent-color);stroke-width:8}.complaints-container{padding-top:1.5rem;display:grid;align-items:flex-start;gap:1.5rem}.complaint-placeholder{animation:pulse infinite .6s alternate}.complaint-placeholder h4,.complaint-placeholder h5{border-radius:.2rem}.complaint-placeholder h5{background:rgba(var(--text-color),.1);padding:.5rem .6rem}.complaint-placeholder h4{background:rgba(var(--text-color),.2);padding:.85rem}.activity,.activity .icon{background:rgba(var(--text-color),.06)}.complaint-placeholder .demo-btn{padding:.85rem 3rem}@keyframes pulse{from{opacity:.4}to{opacity:1}}#main_loader{text-align:center;place-content:center;height:100vh;width:100vw;position:fixed;left:0}#main_loader sm-button{margin-left:0;margin-top:1rem}#main_loader svg{height:2rem;width:2rem;stroke:var(--accent-color);stroke-width:6;fill:none;overflow:visible;stroke-linecap:round;stroke-dashoffset:210;stroke-dasharray:210;justify-self:center;align-self:center;margin-bottom:2rem}#main_loader h3{width:100%;font-weight:400;word-spacing:.16rem}#upi_txId_section .copy-row{margin-bottom:1.5rem}@keyframes popup{0%{stroke-dashoffset:50;transform:translateY(4rem) scale(.2,.6)}40%,41%{transform:translateY(0) scale(.2)}50%{stroke-dashoffset:50;transform:translateY(0) scale(1)}100%{stroke-dashoffset:0}}#transaction_result{z-index:12}#transaction_result #transaction_heading{margin-bottom:1rem}#transaction_result .copy-row{grid-template-areas:"label label" ". .";margin-top:1rem;gap:0 1rem}#transaction_result .copy-row h4{font-weight:500}#transaction_result h5{grid-area:label;color:rgba(var(--text-color),.7)}#transaction_result h4,#transaction_result h5,#transaction_result p{text-align:center}#transaction_result>h4{font-size:1.2rem;margin-top:2rem;margin-bottom:.5rem}#transaction_result sm-button{align-self:center;width:auto}#failure_svg{height:5rem;width:5rem;stroke-width:4;align-self:center;stroke:none;stroke-dasharray:50;fill:rgba(var(--text-color),.1);animation:popup 2s forwards cubic-bezier(.175,.885,.32,1.275)}#success_art{margin:1rem 0;height:14rem;width:100%;align-self:center}#success_art circle{transform-origin:center;transform:scale(.4);animation:explode 1.6s forwards cubic-bezier(.175,.885,.32,1.275)}#success_art polygon{transform-origin:center;transform:rotate(-20deg);animation:rotate-in-place 1s forwards cubic-bezier(.175,.885,.32,1.275)}#success_art polygon:nth-of-type(1){animation-delay:.1s}#success_art polygon:nth-of-type(2){animation-delay:.2s}#success_art polygon:nth-of-type(3){animation-delay:.3s}#success_art circle:nth-of-type(1){animation-delay:.1s}#success_art circle:nth-of-type(2){animation-delay:.2s}#success_art circle:nth-of-type(3){animation-delay:.3s}#success_art circle:nth-of-type(4){animation-delay:.4s}#success_art circle:nth-of-type(5){animation-delay:.5s}#failure_svg line{stroke:#EF5350}.rupee-symbol{height:1rem;width:1rem;fill:rgba(var(--text-color),.5)}#deposit_rupee .copy-row{margin-bottom:1rem}.activity-container{display:grid;gap:1rem}.activity{position:relative;overflow:hidden;display:grid;border-radius:.6rem;padding:1rem 1.2rem;gap:0 1rem;grid-template-columns:auto 1fr auto;grid-template-areas:"icon type amount" "icon receiver time";align-items:center;cursor:pointer}.activity .icon{grid-area:icon;height:3rem;width:3rem;padding:.85rem;background-size:cover;border-radius:2rem}#add_person_btn .icon,#transaction_page #transaction_details .icon,.activity .pending,.activity.placeholder .activity-receiver,.activity.placeholder .activity-type,.cashier-message,.select{background:rgba(var(--text-color),.06)}.activity .activity-type{grid-area:type;text-transform:capitalize;font-weight:400;font-size:.85rem}.activity .activity-receiver{grid-area:receiver;font-weight:500;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.activity .activity-amount{text-align:right;grid-area:amount;white-space:nowrap}.activity .activity-time{text-align:right;grid-area:time;color:rgba(var(--text-color),.7);font-weight:500;white-space:nowrap}.activity .pending{display:inline-flex;padding:.3rem .6rem;border-radius:1rem;width:max-content;margin-left:.4rem}.activity.placeholder{pointer-events:none;animation:pulse infinite .6s alternate}.activity.placeholder .activity-receiver,.activity.placeholder .activity-type{padding:.5rem 0}.activity.placeholder .activity-type{width:50%}.activity.placeholder:nth-of-type(2){animation-delay:.1s}.activity.placeholder:nth-of-type(3){animation-delay:.2s}.activity.placeholder:nth-of-type(4){animation-delay:.3s}.activity.placeholder:nth-of-type(5){animation-delay:.4s}.activity.placeholder:nth-of-type(6){animation-delay:.5s}.activity.placeholder:nth-of-type(7){animation-delay:.6s}.activity.placeholder:nth-of-type(8){animation-delay:.7s}.cashier-message{display:flex;flex-direction:column;border-radius:.6rem;padding:1rem 1.2rem}.cashier-message .time{margin-bottom:.5rem}.back-arrow{stroke-width:10;margin-right:.5rem;padding:.2rem}.select{max-width:50ch;position:relative;display:flex;width:100%;border-radius:.3rem;align-items:center}.select:first-of-type:not(:last-of-type){border-radius:.3rem .3rem 0 0}.select+.select{margin-top:0;border-radius:0 0 .3rem .3rem;border-top:solid 1px rgba(var(--text-color),.16)}.select label{display:flex;align-items:center;cursor:pointer;flex:1;padding:.85rem 1rem}.select input[type=radio]{display:none}.select input:checked~.radio .outer-ring{stroke:var(--accent-color)}.select input:checked~.radio .inner-disc{transform:none}.select .radio{width:1.2rem;height:1.2rem;fill:none;overflow:visible;margin-right:.6rem}.select .radio .outer-ring{stroke-width:8;stroke:rgba(var(--text-color),.5)}.select .radio .inner-disc{transform-origin:center;fill:var(--accent-color);transform:scale(0);transition:transform .3s cubic-bezier(.175,.885,.32,1.275)}.select .remove{width:3rem;height:2rem;padding:.7rem;cursor:pointer;stroke-width:10}.select .tag{grid-area:tag;opacity:.6;font-weight:500;border:1px solid;padding:.2rem .4rem;border-radius:.3rem;margin-right:.5rem}#add_person_btn,#person_popup h5,.person-name{opacity:.8;font-weight:500}.select h4{font-weight:400}.add-upi{margin-top:.4rem;justify-self:flex-start;width:max-content}#transaction_page header{padding:.5rem 0}#transaction_page header .back-arrow{grid-area:back}#transaction_page header h4{text-transform:capitalize}#transaction_page h5{font-weight:400;opacity:.8;margin-bottom:.4rem;text-transform:capitalize}#transaction_page p:last-of-type{margin:2rem 0 1rem;font-size:.9rem;opacity:.8}#transaction_page #transaction_details{position:relative;padding:.5rem;max-width:50ch;border-radius:.5rem}#transaction_page #transaction_details .icon{height:4rem;width:4rem;padding:1.2rem;border-radius:4rem;margin-top:1rem;margin-bottom:2rem}#transaction_page #transaction_details .success{background:#00C853;stroke-width:8;stroke:var(--background-color)}#transaction_page #transaction_details .flex{margin-bottom:1.5rem;align-items:baseline}#transaction_page #transaction_details strong{font-weight:500}#transaction_page #transaction_details strong:not(:last-of-type)+sm-button{margin-bottom:1.5rem;margin-top:-.4rem}#transaction_page #transaction_details strong:not(:last-of-type){margin-bottom:1rem}#transaction_page #transaction_details sm-button{width:max-content;margin-top:.6rem}#transaction_page .transaction-amount{font-size:2rem;font-weight:400}#transaction_page #transaction_time{right:0;position:absolute;margin:1.5rem}@keyframes explode{0%{transform:scale(.4)}80%{transform:scale(1)}100%{transform:scale(.9)}}@keyframes rotate-in-place{0%{transform:rotate(-20deg)}100%{transform:none}}#people_container{display:grid;padding:1.5rem}#add_person_btn,.person{position:relative;overflow:hidden;cursor:pointer;display:flex;flex-direction:column;width:5rem;-webkit-tap-highlight-color:transparent;border-radius:.5rem;user-select:none}#add_person_btn{text-align:center;font-size:.85rem}#add_person_btn .icon{height:3rem;width:3rem;border-radius:2rem;stroke-width:10;padding:1rem;align-self:center;margin-bottom:.6rem}.person{align-items:center}#person_initials,.person-initials{display:flex;justify-content:center;height:3rem;width:3rem;font-size:1.2rem!important;font-weight:500;align-items:center;border-radius:2rem;margin-bottom:.6rem!important;text-transform:uppercase;color:#fff}.person-name{font-size:.85rem;text-align:center}#person_popup>.flex:first-of-type{margin:1rem 0}#person_popup>.flex:first-of-type .flex{margin-top:.5rem}#person_popup>.flex:first-of-type .flex .icon{height:2.6rem;width:2.6rem;padding:.85rem;cursor:pointer;stroke-width:8}#person_popup>.flex:first-of-type .flex .icon:hover{background:rgba(var(--text-color),.06)}#person_popup h3{text-transform:capitalize}#person_popup .copy-row{margin-bottom:1.5rem}#person_popup #show_person_name{padding:.5rem 1rem;border-radius:.5rem;max-width:30ch}#person_popup #show_person_name:focus{outline:0;background:rgba(var(--text-color),.1)}#activity_page .empty-state,#request_page .empty-state,#settings_page .empty-state{justify-content:left}#settings_page h4{margin-top:2rem;margin-bottom:.6rem}#settings_page .copy-row h4{margin:0}#settings_page p{color:rgba(var(--text-color),.7)}#settings_page sm-button{margin-top:.85rem}#settings_page .flex{max-width:60ch}#settings_page .my-qr-code{margin-bottom:1.5rem;height:14rem}#settings_page .my-qr-code img{height:100%}@media only screen and (max-width:640px){#deposit,#home_page{display:grid;gap:1.5rem;grid-template-areas:"." "left";grid-template-columns:minmax(0,1fr)}#deposit .left,#home_page .left{grid-area:left}sm-select{width:100%}.hide-on-mobile{display:none!important}#transaction_page{padding-top:0}#transaction_page header{padding:1.5rem 0}#deposit .user-panel{padding:0}video{height:100vw}}@media only screen and (min-width:640px){.hide-on-desktop{display:none!important}body{padding:0 2rem;margin-left:4rem}#sign_in_page{padding:0 6vw;grid-auto-flow:column}#sign_in_page .info{padding:0}#sign_in_page .sign-in-box{align-self:auto;width:26rem;padding:2rem;margin-top:unset;min-height:80vh;min-width:26rem;box-shadow:0 0 .3rem #00016,0 6rem 2rem -2rem #00016}sm-popup{background:rgba(var(--foreground-color),1)}#navbar,#navbar .active{background:rgba(var(--text-color),.06)}#confirmation,sm-popup::part(popup){width:24rem}#on_boarding{width:26rem}#navbar{justify-content:flex-start;flex-direction:column;align-items:stretch;left:0;bottom:0;top:0;right:auto;border-top:none;border-radius:0;box-shadow:-.5rem 0 .5rem #00008 inset}#navbar .navbar-item{display:flex;width:auto;padding:.85rem 1.2rem;user-select:none}#navbar .logo h4,#navbar .navbar-item h5{display:none}#navbar .logo .main-logo,#navbar .navbar-item .icon{height:1.2rem;width:1.2rem}#navbar .navbar-item:hover{opacity:1}#navbar .logo{margin:1.5rem 1rem}.page{padding-bottom:2rem}#home_page{padding-top:.5rem}#home_page .left{margin-top:1rem}#people_container,.options-tab{grid-template-columns:repeat(auto-fill,minmax(5rem,1fr));gap:2rem .85rem}.display-balance .balance{height:9rem}.request{grid-template-columns:minmax(0,auto) auto;grid-template-areas:"time time" " . ." " . ."}.request .time{grid-area:time;margin-bottom:0!important}.request button{width:max-content;margin-left:auto}.request .breakable{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#deposit .user-panel{padding-right:0}#settings_page .copy-row{display:inline-grid}}@media only screen and (min-width:800px){body{margin-left:11rem}.complaint{gap:0 1.5rem;grid-template-columns:1fr 1fr;grid-template-areas:". . " "header header"}.complaint .complaint-actions{grid-area:header}.complaint .left{border-right:1px solid rgba(var(--text-color),.2);padding-right:1.5rem}.complaint .right{display:flex;justify-content:center;flex-direction:column}#navbar .navbar-item h5{font-size:.9rem;margin:0;display:block}#navbar .icon{margin-right:.85rem}#navbar .logo h4{display:block;font-size:1rem}.user-panel{position:sticky;top:1.5rem;padding-top:1.5rem}#deposit,#home_page{display:grid;gap:1.5rem;grid-template-columns:minmax(0,1fr) 22rem}#deposit{grid-template-columns:minmax(0,1fr) 18rem}#deposit .user-panel{padding-right:0}.activity,.cashier-message{width:60ch}.request{grid-template-columns:minmax(0,auto) auto;grid-template-areas:"time time" " . ." " . ."}}@media only screen and (min-width:1280px){.request{grid-template-areas:"time time time" ". . ."}#deposit{grid-template-columns:minmax(0,1fr) 20rem}#deposit .request{grid-template-areas:"time time time time" ". . . ."}#deposit #unconfirmed_requests_container .request{display:flex;flex-direction:column}}@media only screen and (max-width:320px){:root{font-size:14px}}@media (any-hover:hover){.navbar-item:hover{background:rgba(var(--text-color),.06)}.remove{opacity:.6}.remove:hover{opacity:1}} \ No newline at end of file +*{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: #256eff;--text-color: 20, 20, 20;--background-color: 240, 240, 240;--foreground-color: 250, 250, 250;--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;display:flex;flex-direction:column}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)}p,strong{font-size:.9rem;max-width:65ch;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{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:inline-flex;border:none;background-color:transparent;overflow:hidden;color:inherit;-webkit-tap-highlight-color:transparent;align-items:center;font-size:.9rem;font-weight:500;white-space:nowrap;padding:.8rem;border-radius:.3rem;justify-content:center}button:focus-visible{outline:var(--accent-color) solid medium}button:not(:disabled){cursor:pointer}.button{background-color:rgba(var(--text-color), 0.06)}.button--primary,.button--danger{color:rgba(var(--background-color), 1)}.button--primary .icon,.button--danger .icon{fill:rgba(var(--background-color), 1)}.button--primary{background-color:var(--accent-color)}.button--danger{background-color:var(--danger-color)}.cta{text-transform:uppercase;font-size:.8rem;font-weight:700;letter-spacing:.05em;padding:1rem}.icon-only{padding:.5rem;border-radius:.3rem}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}details{padding:1rem 0}details summary{display:flex;-webkit-user-select:none;-moz-user-select:none;-ms-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)}sm-input,sm-textarea{font-size:.9rem;--border-radius: 0.3rem;--background-color: rgba(var(--foreground-color), 1)}sm-input button .icon,sm-textarea button .icon{fill:var(--accent-color)}sm-button{--padding: 0.6rem 0.8rem}sm-button[variant=primary] .icon{fill:rgba(var(--background-color), 1)}sm-button[disabled] .icon{fill:rgba(var(--text-color), 0.6)}sm-button.danger{--background: var(--danger-color);color:rgba(var(--background-color), 1)}sm-spinner{--size: 1rem;--stroke-width: 0.1rem}sm-form{--gap: 1rem}strip-select{--gap: 0;background-color:rgba(var(--text-color), 0.06);border-radius:.3rem;padding:.3rem}strip-option{font-size:.8rem;--border-radius: 0.2rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}ul{list-style:none}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.breakable{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}.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{text-transform:capitalize}.sticky{position:-webkit-sticky;position:sticky}.top-0{top:0}.flex{display:flex}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.grid{display:grid}.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{align-content:flex-start}.align-center{align-items:center}.align-end{align-items:flex-end}.text-center{text-align:center}.justify-start{justify-content:start}.justify-center{justify-content:center}.justify-right{margin-left:auto}.align-self-center{align-self:center}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.direction-column{flex-direction:column}.space-between{justify-content:space-between}.w-100{width:100%}.h-100{height:100%}.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:transparent}.empty-state{display:grid;width:100%;padding:1.5rem 0}.observe-empty-state:empty{display:none}.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)}.icon{width:1.2rem;height:1.2rem;fill:rgba(var(--text-color), 0.8);flex-shrink:0}.margin-right-0-5{margin-right:.5rem}.margin-left-0-5{margin-left:.5rem}.icon-button{padding:.6rem;border-radius:.8rem;background-color:rgba(var(--text-color), 0.1);height:-webkit-max-content;height:-moz-max-content;height:max-content}.icon-button .icon{fill:var(--accent-color)}#confirmation_popup,#prompt_popup{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}#prompt_message{margin-bottom:1.5rem}.popup__header{display:grid;gap:.5rem;width:100%;padding:0 1.5rem;align-items:center;grid-auto-flow:column}.popup__header__close{padding:.5rem;margin-left:-0.5rem;cursor:pointer}#main_header{padding:1rem 1.5rem}#main_card{display:flex;flex-direction:column;height:100%;width:100%;background-color:rgba(var(--foreground-color), 1);transition:background-color .3s}#pages_container{flex:1;overflow-y:auto}#main_navbar{display:flex;background:rgba(var(--text-color), 0.03)}#main_navbar.hide-away{position:absolute}#main_navbar ul{display:flex;height:100%;width:100%}#main_navbar ul li{width:100%}.nav-item{position:relative;display:flex;flex:1;width:100%;flex-direction:column;align-items:center;justify-content:center;padding:.5rem .3rem;color:var(--text-color);font-size:.7rem;border-radius:.3rem}.nav-item .icon{transition:transform .2s}.nav-item__title{margin-top:.3rem;transition:opacity .2s,transform .2s}.nav-item--active{color:var(--accent-color)}.nav-item--active .icon{fill:var(--accent-color);transform:translateY(50%)}.nav-item--active .nav-item__title{transform:translateY(100%);opacity:0}.nav-item__indicator{position:absolute;bottom:0;width:2rem;height:.3rem;background:var(--accent-color);border-radius:1rem 1rem 0 0;z-index:1}.password-field label{display:flex}.password-field label input:checked~.visible{display:none}.password-field label input:not(:checked)~.invisible{display:none}.multi-state-button{display:grid;text-align:center;align-items:center}.multi-state-button>*{grid-area:1/1/2/2}.multi-state-button button{z-index:1}.clip{-webkit-clip-path:circle(0);clip-path:circle(0)}.primary-action{display:flex;padding:.8rem 1rem;gap:.5rem;white-space:normal;font-size:.8rem;border-radius:.5rem;background-color:transparent;border:thin solid rgba(var(--text-color), 0.3)}.primary-action .icon{fill:var(--accent-color)}.primary-action:not(:last-of-type){margin-right:.5rem}.page{position:relative;display:flex;flex-direction:column;overflow-y:auto;align-content:flex-start;padding:1.5rem}#wallet_section{background-color:rgba(var(--text-color), 0.03);border-radius:.5rem;padding:1.5rem}#transactions_list{flex-direction:column;padding-bottom:4rem}.transaction{grid-template-columns:auto 1fr auto;gap:.5rem 1rem;padding:.8rem;align-items:center;background-color:rgba(var(--text-color), 0.03);border-radius:.3rem}.transaction:not(:last-of-type){margin-bottom:.5rem}.transaction__icon{display:flex;align-items:center;justify-content:center;grid-area:1/1/3/2;width:2.5rem;height:2.5rem;background-color:rgba(var(--text-color), 0.03);border-radius:.5rem}.transaction__icon .icon{fill:var(--accent-color)}.transaction__receiver{font-size:.9rem;font-weight:500;color:rgba(var(--text-color), 0.8)}.transaction__time{font-size:.8rem;color:rgba(var(--text-color), 0.8)}.transaction__amount{font-size:1rem;font-weight:700;grid-area:1/3/3/4}.transaction__amount.sent::before{content:"-"}.transaction__amount.received::before{content:"+"}.fab{position:absolute;right:0;bottom:0;margin:1.5rem;box-shadow:0 .5rem 1rem rgba(0,0,0,.2);z-index:2}#scroll_to_top{border-radius:3rem;background-color:rgba(var(--foreground-color), 1)}#transaction_result{display:grid;gap:.5rem;height:max(40vh,24rem);align-items:center;justify-content:center;text-align:center;align-content:center}#transaction_result.success .icon--failed{display:none}#transaction_result.failed .icon--success{display:none}#transaction_result h3{text-align:center;width:100%}#transaction_result .icon{justify-self:center;height:4rem;width:4rem;border-radius:5rem;margin-bottom:1rem;-webkit-animation:popup 1s;animation:popup 1s}#transaction_result .icon--success{fill:rgba(var(--background-color), 1);padding:1rem;background-color:#0bbe56}#transaction_result .icon--failed{background-color:rgba(var(--text-color), 0.03);fill:var(--danger-color)}#transaction_result sm-copy{font-size:.8rem}@-webkit-keyframes popup{0%{opacity:0;transform:scale(0.2) translateY(600%)}10%{transform:scale(0.2) translateY(5rem);opacity:1}40%{transform:scale(0.2) translateY(0)}80%{transform:scale(1.1) translateY(0)}100%{transform:scale(1) translateY(0)}}@keyframes popup{0%{opacity:0;transform:scale(0.2) translateY(600%)}10%{transform:scale(0.2) translateY(5rem);opacity:1}40%{transform:scale(0.2) translateY(0)}80%{transform:scale(1.1) translateY(0)}100%{transform:scale(1) translateY(0)}}.cashier-request,.wallet-request,.payment-request{display:flex;gap:1rem;align-items:center;padding:.8rem;border-radius:.3rem;background-color:rgba(var(--text-color), 0.06)}.cashier-request:not(:last-of-type),.wallet-request:not(:last-of-type),.payment-request:not(:last-of-type){margin-bottom:1rem}.cashier-request__time,.wallet-request__time,.payment-request__time{font-size:.8rem}.payment-request{display:grid;grid-template-columns:1fr auto}.payment-request__amount{font-weight:700;text-align:right}@media screen and (min-width: 40rem){sm-popup{--width: 24rem}.popup__header{grid-column:1/-1;padding:1rem 1.5rem 0 1.5rem}body{display:flex;align-items:center;justify-content:center;overflow:hidden}#main_card{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr;grid-template-areas:"nav header" "nav main";position:relative;border-radius:.5rem;overflow:hidden;box-shadow:0 .1rem .2rem rgba(0,0,0,.05),0 1rem 3rem rgba(0,0,0,.2);background-color:rgba(var(--foreground-color), 0.9)}#main_header{grid-area:header}#pages_container{grid-area:main}#main_navbar{grid-area:nav;border-top:none;flex-direction:column;height:100%}#main_navbar ul{flex-direction:column;gap:.5rem;padding:.3rem}#main_navbar ul li:last-of-type{margin-top:auto}.nav-item{aspect-ratio:1/1}.nav-item__indicator{width:.25rem;height:50%;left:0;border-radius:0 1rem 1rem 0;bottom:auto}#user{grid-template-columns:1fr 20rem;align-content:flex-start;align-items:flex-start}}@media screen and (min-width: 56rem){#main_card{height:80vh;width:56rem}}@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}}.hide{display:none !important} \ No newline at end of file diff --git a/css/main.scss b/css/main.scss index 0888844..a9cd50d 100644 --- a/css/main.scss +++ b/css/main.scss @@ -1,2135 +1,855 @@ * { - box-sizing: border-box; - padding: 0; - margin: 0; - font-family: 'Roboto', sans-serif; + padding: 0; + margin: 0; + box-sizing: border-box; + font-family: "Roboto", sans-serif; } -:root{ - font-size: clamp(16px, 1.2vmax, 40px); + +:root { + font-size: clamp(1rem, 1.2vmax, 1.2rem); } + +html, body { - --accent-color: #2752ca; - --text-color: 17, 17, 17; - --text-color-light: 85, 85, 85; - --foreground-color: 255, 255, 255; - --background-color: rgba(var(--foreground-color), 1); - --dark-shade: #f4f4f4; - --error-color: #E53935; - --hue: 255; - --saturation: 61%; - --lightness: 39%; - color: rgba(var(--text-color), 1); - background-size: cover; -} -body[data-theme="dark"]{ - --accent-color: #4d74e0; - --text-color: 238, 238, 238; - --text-color-light: 170, 170, 170; - --foreground-color: 26, 26, 26; - --background-color: #111; - --dark-shade: #222; - --hue: 255; - --saturation: 39%; - --lightness: 70%; - background-color: var(--background-color); - .flo-balance-card{ - color: rgba(var(--text-color), 1); - } - #focus_illu:not(.hide){ - opacity: 0.7; - fill: rgba(var(--text-color), 0.5); - } + height: 100%; } -a { - font-weight: 500; - text-decoration: none; - color: var(--accent-color); +body { + --accent-color: #256eff; + --text-color: 20, 20, 20; + --background-color: 240, 240, 240; + --foreground-color: 250, 250, 250; + --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 0.3s; + display: flex; + flex-direction: column; } -.dark-text { - color: #111; +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; + sm-popup::part(popup) { + background-color: rgba(var(--foreground-color), 1); + } } -h1 { - font-size: 3.5rem; -} +p, +strong { + font-size: 0.9rem; + max-width: 65ch; + line-height: 1.7; + color: rgba(var(--text-color), 0.9); -h2 { - font-size: 2rem; -} - -h3 { - font-size: 1.5rem; -} - -h4 { - font-size: 1rem; -} - -h5 { - font-size: 0.85rem; -} - -h1, -h2, -h3, -h4, -h5 { - font-family: 'Poppins', sans-serif; - font-weight: 600; -} - -p { - font-size: 0.95rem; - line-height: 1.5; - max-width: 60ch; - color: rgba(var(--text-color), 0.9); -} -strong{ - font-weight: 700; -} -button { - position: relative; - display: inline-flex; - align-items: center; - justify-content: center; - text-transform: capitalize; - padding: 0.6rem 1.2rem; - font-weight: 600; - cursor: pointer; - border-radius: 0.3rem; - color: var(--accent-color); - transition: transform 0.3s; - border: none; - background: rgba(var(--text-color), 0.1); - -webkit-tap-highlight-color: transparent; - font-family: 'Poppins', sans-serif; - - &:focus { - outline: thin solid rgba(var(--text-color-light), .4); - } - - &:disabled { - cursor: default; - background: rgba(var(--text-color), 0.4); - } - - &:disabled~.loader { - opacity: 0; - } -} -::-moz-focus-inner { - border: none; -} -.bottom-padding { - padding-bottom: 1.5rem; -} - -.top-padding { - padding-top: 1rem; -} - -.bottom-margin { + &:not(:last-of-type) { margin-bottom: 1.5rem; + } +} +a { + text-decoration: none; + color: var(--accent-color); + &:focus-visible { + box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1) inset; + } } -.top-margin { - margin-top: 1.5rem; +button { + user-select: none; + position: relative; + display: inline-flex; + border: none; + background-color: transparent; + overflow: hidden; + color: inherit; + -webkit-tap-highlight-color: transparent; + align-items: center; + font-size: 0.9rem; + font-weight: 500; + white-space: nowrap; + padding: 0.8rem; + border-radius: 0.3rem; + justify-content: center; + &:focus-visible { + outline: var(--accent-color) solid medium; + } + &:not(:disabled) { + cursor: pointer; + } +} +.button { + background-color: rgba(var(--text-color), 0.06); +} +.button--primary, +.button--danger { + color: rgba(var(--background-color), 1); + .icon { + fill: rgba(var(--background-color), 1); + } +} +.button--primary { + background-color: var(--accent-color); +} +.button--danger { + background-color: var(--danger-color); +} +.cta { + text-transform: uppercase; + font-size: 0.8rem; + font-weight: 700; + letter-spacing: 0.05em; + padding: 1rem; +} +.icon-only { + padding: 0.5rem; + border-radius: 0.3rem; } -.flex { - display: flex; +button:disabled { + opacity: 0.5; } -.grid { - display: grid; +a:any-link:focus-visible { + outline: rgba(var(--text-color), 1) 0.1rem solid; +} +details { + padding: 1rem 0; } -.grid-2 { - grid-template-columns: auto auto; - gap: 1rem; +details summary { + display: flex; + user-select: none; + cursor: pointer; + align-items: center; + justify-content: space-between; + color: var(--accent-color); } -.align-center { - align-items: center; +details[open] { + & summary { + margin-bottom: 1rem; + } + & > summary .down-arrow { + transform: rotate(180deg); + } } -.direction-column { - flex-direction: column; +sm-input, +sm-textarea { + font-size: 0.9rem; + --border-radius: 0.3rem; + --background-color: rgba(var(--foreground-color), 1); + button { + .icon { + fill: var(--accent-color); + } + } +} +sm-button { + --padding: 0.6rem 0.8rem; + &[variant="primary"] { + .icon { + fill: rgba(var(--background-color), 1); + } + } + + &[disabled] { + .icon { + fill: rgba(var(--text-color), 0.6); + } + } + &.danger { + --background: var(--danger-color); + color: rgba(var(--background-color), 1); + } +} +sm-spinner { + --size: 1rem; + --stroke-width: 0.1rem; +} +sm-form { + --gap: 1rem; +} +strip-select { + --gap: 0; + background-color: rgba(var(--text-color), 0.06); + border-radius: 0.3rem; + padding: 0.3rem; +} +strip-option { + font-size: 0.8rem; + --border-radius: 0.2rem; + user-select: none; +} +ul { + list-style: none; } -.justify-right{ - margin-left: auto; -} - -.space-between { - justify-content: space-between; -} - -.label { - margin-bottom: 0.4rem; -} - -.light-text { - opacity: 0.7; -} - -.hide { - opacity: 0; - pointer-events: none; -} - -.hide-completely { - display: none !important; +.overflow-ellipsis { + width: 100%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; } .breakable { - word-break: break-all; + overflow-wrap: break-word; + word-wrap: break-word; + word-break: break-word; + hyphens: auto; } -.separator { - padding: .1rem; +.full-bleed { + grid-column: 1/-1; } -.no-transformations { - transform: none !important; -} -.capitalize{ - text-transform: capitalize; +.h1 { + font-size: 1.5rem; } -span.ripple{ - position: absolute; - border-radius: 50%; - transform: scale(0); - background: rgba(var(--text-color), 0.2); - pointer-events: none; +.h2 { + font-size: 1.2rem; } -.highlight{ - box-shadow: 0 0 0 0.2rem var(--accent-color) inset; - transition: box-shadow 0.3s; +h3 { + font-size: 1.2rem; + line-height: 1.3; } -sm-button{ - color: rgba(var(--text-color), 1); - &[variant="outlined"]{ - --accent-color: rgba(var(--text-color), 1); - } - &[variant="primary"]::part(button){ - color: white; - } +.h4 { + font-size: 0.9rem; } -.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; - transition: opacity 0.3s; +.h5 { + font-size: 0.75rem; +} +.uppercase { + text-transform: uppercase; } -@keyframes rotate { - 100% { - transform: rotate(360deg); - } +.capitalize { + text-transform: capitalize; } -@keyframes load { - 50% { - stroke-dashoffset: 0; - } - - 100% { - stroke-dashoffset: -210; - } +.sticky { + position: sticky; } -@keyframes load-btn-loader { - 50% { - stroke-dashoffset: 0; - } - - 100% { - stroke-dashoffset: -200; - } -} -#on_boarding{ - position: absolute; - left: 0; - top: 0; - border-radius: 0.85rem; - box-shadow: 0.1rem 0.2rem 1rem rgba(var(--text-color), 0.16); - padding: 1.5rem; - color: white; - background: var(--accent-color); - z-index: 10; - transition: transform 0.3s, opacity 0.3s; - width: 100%; - #total_tuts{ - opacity: 0.8; - font-size: 0.85rem; - } - h4{ - margin-bottom: 0.5rem; - font-size: 1.2rem; - transition: transform 0.3s; - } - p{ - color: inherit; - margin-bottom: 1.5rem; - transition: transform 0.3s; - } - .icon{ - stroke-width: 8; - stroke: white; - padding: 0.2rem; - cursor: pointer; - } - sm-button{ - &[variant="no-outline"]::part(button){ - background: rgba(var(--foreground-color), 1); - color: rgba(var(--text-color), 1); - } - &:not([variant="no-outline"])::part(button){ - color: white; - } - } +.top-0 { + top: 0; } -.action { - position: relative; - overflow: hidden; - display: inline-flex; - align-items: center; - padding: 0; - background: none; - &:disabled{ - .primary-btn { - background: none; - } - } - &:focus{ - outline: none; - } - &.start-loading{ - align-items: center; - pointer-events: none; - h4{ - transform: translateX(1ch); - background: inherit !important; - color: rgba(var(--text-color), 0.9); - } - .loader-container{ - transform: none; - } - .loader{ - animation: load-btn-loader 2.6s infinite, rotate 1s infinite linear; - } - } - h4 { - padding: 0.5rem 1.2rem; - font-size: 0.9rem; - clip-path: circle(100%); - transition: clip-path 0.3s; - border-radius: 0.2rem; - transition: 0.3s transform; - } - - .btn { - z-index: 2; - } - - .loader { - height: 1.2rem; - width: 1.2rem; - stroke-dashoffset: 200; - stroke-dasharray: 200; - margin: 0 !important; - } - &:not(.start-loading) .loader-container{ - opacity: 0; - transform: translateX(1rem); - } - +.flex { + display: flex; +} +.flex-wrap { + flex-wrap: wrap; +} +.flex-1 { + flex: 1; } -.loader-container{ - position: absolute; - z-index: 1; - left: 0; - transition: transform 0.3s, opacity 0.3s; +.grid { + display: grid; +} +.flow-column { + grid-auto-flow: column; } -.animate-loader { - animation: load 2.6s infinite, rotate 1s infinite linear; +.gap-0-5 { + gap: 0.5rem; } -.expand { - width: 100%; +.gap-1 { + gap: 1rem; } -.fade-left { - animation: fadeleft 0.3s; +.gap-1-5 { + gap: 1.5rem; } -.fade-right { - animation: faderight 0.3s; +.gap-2 { + gap: 2rem; } -@keyframes faderight { - from { - opacity: 0; - transform: translateX(-1rem); - } - - to { - opacity: 1; - transform: none; - } +.gap-3 { + gap: 3rem; } -@keyframes fadeleft { - from { - opacity: 0; - transform: translateX(1rem); - } - - to { - opacity: 1; - transform: none; - } +.text-align-right { + text-align: right; } -.logo { - display: flex; - align-items: center; - cursor: pointer; - h4{ - font-weight: 500; - font-size: clamp(1.1rem, 2vw, 1.2rem); - } - .main-logo { - height: clamp(1.4rem, 2vw, 1.6rem); - width: clamp(1.4rem, 2vw, 1.6rem); - fill: rgba(var(--text-color), 1); - stroke: none; - margin-right: 0.2rem; - } +.align-start { + align-content: flex-start; } -textarea { - width: 100%; - max-width: 100%; - background: rgba(var(--text-color), 0.1); - color: inherit; - border: none; - border-radius: 0.2rem; - resize: none; - font-size: 1rem; - line-height: 1.6; - padding: 0.85rem; +.align-center { + align-items: center; +} +.align-end { + align-items: flex-end; } -*:empty + .empty-state { - display: grid; +.text-center { + text-align: center; } +.justify-start { + justify-content: start; +} + +.justify-center { + justify-content: center; +} + +.justify-right { + margin-left: auto; +} + +.align-self-center { + align-self: center; +} + +.justify-self-center { + justify-self: center; +} + +.justify-self-start { + justify-self: start; +} + +.justify-self-end { + justify-self: end; +} + +.direction-column { + flex-direction: column; +} + +.space-between { + justify-content: space-between; +} + +.w-100 { + width: 100%; +} +.h-100 { + height: 100%; +} + +.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, +.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: transparent; +} .empty-state { - display: none; - place-items: center; - width: 100%; - svg { - height: 12rem; - width: 12rem; - polyline, - path, - ellipse{ - stroke-linecap: round; - stroke-linejoin: round; - stroke: rgba(var(--text-color), 0.7); - fill: none; - } - } + display: grid; + width: 100%; + padding: 1.5rem 0; } -.container-header { - display: flex; - align-items: center; - flex-direction: row; - width: 100%; - padding: 1rem 0; - - h2 { - flex: 1; - } - - button { - align-self: center; - } +.observe-empty-state:empty { + display: none; } -.btn { - background: var(--accent-color); - color: rgba(var(--foreground-color), 1); - padding: 0.4rem 1rem; +.observe-empty-state:not(:empty) + .empty-state { + display: none; } -.back-arrow { - stroke: rgba(var(--text-color), 1); - stroke-width: 6; - fill: none; - height: 2rem; - padding: 0.5rem 0.5rem 0.5rem 0; - cursor: pointer; +.bullet-point { + display: flex; + align-items: center; + justify-content: center; + margin: 0 0.8ch; + &::after { + content: ""; + height: 0.4ch; + width: 0.4ch; + border-radius: 0.5em; + background-color: var(--accent-color); + } } - -.card { - border-radius: 0.6rem; - padding: 1.5rem; - background: rgba(var(--foreground-color), 1); -} - -.solid-background { - background: rgba(var(--foreground-color), 1) !important; -} - -#confirmation, -#prompt { - flex-direction: column; - h4 { - font-weight: 500; - margin-bottom: 1.5rem; - } - - .flex { - sm-button:first-of-type { - margin-right: 0.6rem; - margin-left: auto; - } - } -} -#prompt{ - .flex{ - margin-top: 1rem; - } -} - -.refresh { - margin-top: 0.6rem; - margin-bottom: 1rem; -} - -sm-popup{ - sm-input:not(:last-of-type) { - margin-bottom: 1rem; - } - p{ - margin-block-end: 1rem; - } - .action{ - h4{ - padding: 0.5rem 1rem; - font-weight: 500; - } - } - .message{ - margin-bottom: 0.2rem; - } - .message + .copy-row{ - margin-bottom: 1.5rem; - } - h5:not(.tag){ - font-family: 'Roboto', sans-serif; - margin-bottom: 0.4rem; - margin-top: 1rem; - font-weight: 500; - } -} - -#reader{ - overflow: hidden; -} -.my-qr-code{ - background: #fff; - border-radius: 0.5rem; - padding: 1rem; - max-width: max-content; -} -#qr_code_popup{ - &::part(popup){ - height: 80vh; - max-height: 90vh; - } - &::part(popup-body){ - padding: 0; - } - .popup-header{ - padding-bottom: 1.5rem; - } - sm-tab-header{ - margin: 0 auto; - transform: translateX(-1rem); - } - sm-panel{ - display: flex; - flex-direction: column; - align-items: center; - text-align: center; - } - video{ - width: 100% !important; - object-fit: cover; - } - p{ - margin-top: 1.5rem; - opacity: 0.8; - text-align: center; - max-width: 30ch; - } -} -sm-input[type="number"]{ - font-size: 1.2rem; -} - -.popup-header{ - padding: 1.5rem; - padding-bottom: 0; - display: flex; - align-items: center; - width: 100%; - .icon{ - margin-right: 1rem; - padding: 0.2rem; - stroke-width: 10; - cursor: pointer; - } - button{ - width: auto; - margin-left: auto; - } -} - -details, summary{ - margin-bottom: 1rem; -} -summary{ - font-size: 1rem; - cursor: pointer; -} -details{ - h5{ - line-height: 0.6; - margin-bottom: 0; - margin-top: 1.2rem !important; - } - p{ - line-height: 1.4; - } -} - -#sign_in_page { - position: fixed; - gap: 2rem; - width: 100vw; - height: 100vh; - overflow-y: auto; - left: 0; - top: 0; - align-items: center; - justify-content: space-between; - background: url(sign-in-bg.svg) center, rgba(var(--foreground-color), 1); - background-size: cover; - z-index: 5; - .info{ - padding: 1.5rem; - align-items: center; - h1{ - line-height: 1.1; - font-weight: 800; - font-size: clamp(1.5rem, 8vw, 4rem); - margin-top: 1rem; - } - } - .sign-in-box{ - width: 100%; - z-index: 1; - margin-top: auto; - justify-self: center; - padding: 1.5rem; - padding-bottom: 3rem; - border-radius: 0.5rem; - background: rgba(var(--foreground-color), 1); - sm-input{ - text-align: left; - } - sm-panel{ - width: 100%; - } - sm-tab-header{ - margin: 0; - background: none; - align-self: flex-start; - &::part(tab-header){ - padding-bottom: 0.4rem; - gap: 1.5rem; - } - } - sm-tab::part(tab){ - padding: 0.4rem 0; - } - sm-tab-panels{ - margin-top: 3rem; - } - form{ - width: 100%; - } - h2{ - margin-bottom: 0.5rem; - } - h3{ - font-weight: 500; - } - h4 { - font-weight: 500; - margin-bottom: 1.5rem; - } - h5{ - opacity: 0.8; - font-weight: 500; - } - .copy-row{ - h4{ - max-width: 34ch; - } - } - .copy-row:not(:last-of-type){ - margin-bottom: 1rem; - } - button { - width: auto; - margin-top: 1rem; - padding: 0.6rem 1.6rem; - } - p { - margin-bottom: 0.5rem; - max-width: 35ch; - margin-top: 0.5rem; - margin-bottom: 1.5rem; - } - #credentials_section{ - border-top: 1px rgba(var(--text-color), 0.2) solid; - margin-top: 1rem; - padding-top: 1.5rem; - animation: slide-down 0.3s forwards; - } - #sign_in_with{ - margin-top: 2rem; - } - } -} -@keyframes slide-down{ - from{ - transform: translateY(-1rem); - } - to{ - transform: none; - } -} - -.primary-btn { - padding: 0.6rem 1.2rem !important; - background: var(--accent-color); - justify-content: center; - color: white; -} - -#main_header { - align-items: center; - padding: 1.5rem 1rem; - justify-content: space-between; -} - .icon { - height: 1.2rem; - width: 1.2rem; - fill: none; - stroke: rgba(var(--text-color), 0.8); - stroke-width: 6; - overflow: visible; - stroke-linecap: round; - stroke-linejoin: round; + width: 1.2rem; + height: 1.2rem; + fill: rgba(var(--text-color), 0.8); + flex-shrink: 0; +} +.margin-right-0-5 { + margin-right: 0.5rem; } -#navbar { - display: flex; - flex-direction: row; - align-items: center; - justify-content: space-evenly; - position: fixed; - left: 0; - right: 0; - bottom: 0; - top: auto; - z-index: 3; - background: rgba(var(--foreground-color), 1); - box-shadow: 0 -0.5rem 1rem #00000010; - border-radius: 1rem 1rem 0 0; - .navbar-item { - position: relative; - overflow: hidden; - text-align: center; - cursor: pointer; - padding: 0.3rem; - padding-top: 0.85rem; - border-radius: 0.5rem; - opacity: 0.6; - color: rgba(var(--text-color), 1); - font-size: 0.85rem; - text-transform: capitalize; - width: 100%; - font-weight: 600; - -webkit-tap-highlight-color: transparent; - h5 { - margin-top: 0.4rem; - } - .icon{ - stroke: rgba(var(--text-color), 1); - } - } - .active{ - opacity: 1; - } +.margin-left-0-5 { + margin-left: 0.5rem; } -.banking { - stroke-width: 4; +.icon-button { + padding: 0.6rem; + border-radius: 0.8rem; + background-color: rgba(var(--text-color), 0.1); + height: max-content; + .icon { + fill: var(--accent-color); + } } - -#home_page { - padding: 0 0 4rem 0; - .left { - width: auto; - border-radius: 0.6rem; - h3, h4, p { - padding: 0 1.5rem; - } - h3{ - font-size: 2rem; - margin-bottom: 1rem; - } - } -} - -.user-panel { - position: relative; - padding: 1.5rem; - padding-top: 1rem; - align-self: flex-start; - .icon{ - stroke: rgba(var(--foreground-color), 1); - } - .action{ - width: auto; - justify-content: flex-end; - border-radius: 2rem; - h4{ - border-radius: 2rem; - background-color: rgba(var(--text-color), 0.1); - color: rgba(var(--text-color), 1); - width: auto ; - } - .clip{ - clip-path: circle(0 at 100% 0) !important; - } - } -} -#deposit{ - padding-top: 1.5rem; - .flex{ - sm-button{ - margin-bottom: 1.5rem; - } - } - .user-panel{ - padding: 0 1rem; - } - .display-balance { - grid-template-areas: 'rupee rupee' 'flo flo'; - } - sm-tab-header{ - display: flex; - } -} -.display-balance { - grid-template-columns: 1fr 1fr; - grid-template-areas: 'rupee .' 'flo flo'; - gap: 0.85rem; - margin-top: 1rem; - .icon { - height: 1.4rem; - width: 1.4rem; - padding: 0.3rem; - stroke-width: 10; - cursor: pointer; - } -} -.balance{ - height: 10rem; - position: relative; - display: flex; - flex-direction: column; - border-radius: 1rem; - padding: 1rem; - justify-content: flex-end; - span{ - font-size: 0.7em; - } - h4{ - font-size: 1.8rem; - font-family: 'Roboto', sans-serif; - font-weight: 500; - word-break: break-all; - flex: 1; - } - h5{ - opacity: 0.8; - margin-bottom: 0.2rem; - } - .tooltip{ - border-radius: 1rem; - color: rgba(var(--text-color), 1); - margin-left: auto; - } -} -.rupee-balance-card{ - grid-area: rupee; - background: url("data:image/svg+xml,%3Csvg width='512' height='512' viewBox='0 0 512 512' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)'%3E%3Cg filter='url(%23filter0_d)'%3E%3Crect x='312' y='323' width='240' height='140' rx='18' transform='rotate(30 312 323)' fill='%231C783B'/%3E%3C/g%3E%3Cg filter='url(%23filter1_d)'%3E%3Crect x='431.283' y='302' width='240' height='140' rx='18' transform='rotate(50.0235 431.283 302)' fill='%232DBD5E'/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d' x='225' y='320' width='301.846' height='265.244' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dx='-5' dy='9'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3Cfilter id='filter1_d' x='307' y='299' width='285.477' height='297.86' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dx='-5' dy='9'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3CclipPath id='clip0'%3E%3Crect width='512' height='512' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A") bottom right no-repeat, linear-gradient(200deg, rgba(var(--text-color), 0.1), rgba(var(--text-color), 0.2)); - background-size: 9rem, cover; - .tooltip{ - box-shadow: 0 0 0 0.4rem rgba(var(--text-color), 0.1) inset; - } -} -.in-process-balance{ - background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920' height='1080' viewBox='0 0 1920 1080'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:%231b1464;%7D.b%7Bfill:%2309083f;%7D.c%7Bfill:%2329abe2;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3Ebg-art1%3C/title%3E%3Cpolygon class='a' points='0 957.24 232 957.24 357 828 434 899 485 867 594 959 843 957 889 925 938 953 1301 953 1447 807 1555 915 1590 880 1623 913 1673 856 1744 957 1920 957.24 1920 1080 0 1080 0 957.24'/%3E%3Cpolygon class='b' points='495 959 594 959 485 867 434 899 495 959'/%3E%3Cpolygon class='c' points='232 957 357 828 247 957 232 957'/%3E%3Cpolygon class='c' points='1301 953 1447 807 1318.32 953 1301 953'/%3E%3C/svg%3E") left bottom, linear-gradient(135deg, #fd946a, #ff4857); - background-size: cover; - .tooltip{ - box-shadow: 0 0 0 0.4rem #ff4857 inset; - } -} -.flo-balance-card{ - grid-area: flo; - color: rgba(var(--foreground-color), 1); - background: url("data:image/svg+xml,%3Csvg width='1920' height='1080' viewBox='0 0 1920 1080' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)'%3E%3Cg filter='url(%23filter0_d)'%3E%3Ccircle cx='1814.5' cy='977.5' r='437.5' fill='white'/%3E%3C/g%3E%3Cg filter='url(%23filter1_d)'%3E%3Ccircle cx='1814.5' cy='977.5' r='243.5' fill='%231B0980'/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d' x='1344' y='515' width='913' height='913' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dx='-14' dy='-6'/%3E%3CfeGaussianBlur stdDeviation='9.5'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3Cfilter id='filter1_d' x='1538' y='709' width='525' height='525' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dx='-14' dy='-6'/%3E%3CfeGaussianBlur stdDeviation='9.5'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3CclipPath id='clip0'%3E%3Crect width='1920' height='1080' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A") center no-repeat, linear-gradient(270deg, #2f69e6, #1b0980); - background-size: cover; - .tooltip{ - box-shadow: 0 0 0 0.4rem#1b0980 inset; - } -} - -.tooltip{ - position: absolute; - left: 0; - right: 0; - top: 0; - bottom: 0; - cursor: help; - display: flex; - flex-direction: column; - background: rgba(var(--foreground-color), 1); - z-index: 1; - transition: clip-path 0.4s ease-out; - clip-path: circle(0.85rem at calc(100% - 1.5rem) 1.4rem); - scrollbar-width: thin; - .tt-icon{ - font-size: 0.9rem; - display: inline-flex; - width: 3rem; - height: 3rem; - align-items: center; - justify-content: center; - margin-left: auto; - font-weight: 600; - } - .tooltip-text{ - padding: 1rem; - padding-top: 0; - line-height: 1.4; - font-size: 0.9rem; - font-weight: normal; - overflow-y: auto; - max-height: calc(100% - 3rem); - max-width: 30ch; - } - &:hover{ - clip-path: circle(100%); - } -} - -.user-type { +#confirmation_popup, +#prompt_popup { + flex-direction: column; + h4 { font-weight: 500; -} - -.options-tab { - display: grid; - grid-template-columns: repeat(4, 1fr); - padding: 1.5rem; - gap: 2rem 0.2rem; -} -.option { - position: relative; - display: flex; - flex-direction: column; - align-items: center; - text-align: center; - border-radius: 0.5rem; - width: 5rem; - text-transform: capitalize; - -webkit-tap-highlight-color: transparent; - cursor: pointer; - overflow: hidden; - user-select: none; - .icon { - height: 3rem; - width: 3rem; - background: rgba(var(--text-color), 0.06); - border-radius: 1rem; - padding: 0.85rem; - margin-bottom: 0.6rem; - } - - h4 { - font-size: 0.85rem; - opacity: 0.8; - 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; } + } +} +#prompt_message { + margin-bottom: 1.5rem; } -.notification-dot::after { - content: ''; +.popup__header { + display: grid; + gap: 0.5rem; + width: 100%; + padding: 0 1.5rem; + align-items: center; + grid-auto-flow: column; +} + +.popup__header__close { + padding: 0.5rem; + margin-left: -0.5rem; + cursor: pointer; +} +#main_header { + padding: 1rem 1.5rem; +} +#main_card { + display: flex; + flex-direction: column; + height: 100%; + width: 100%; + background-color: rgba(var(--foreground-color), 1); + transition: background-color 0.3s; +} +#pages_container { + flex: 1; + overflow-y: auto; +} + +#main_navbar { + display: flex; + background: rgba(var(--text-color), 0.03); + &.hide-away { position: absolute; + } + ul { + display: flex; + height: 100%; + width: 100%; + li { + width: 100%; + } + } +} +.nav-item { + position: relative; + display: flex; + flex: 1; + width: 100%; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 0.5rem 0.3rem; + color: var(--text-color); + font-size: 0.7rem; + border-radius: 0.3rem; + .icon { + transition: transform 0.2s; + } + &__title { + margin-top: 0.3rem; + transition: opacity 0.2s, transform 0.2s; + } + &--active { + color: var(--accent-color); + .icon { + fill: var(--accent-color); + transform: translateY(50%); + } + .nav-item__title { + transform: translateY(100%); + opacity: 0; + } + } + &__indicator { + position: absolute; + bottom: 0; + width: 2rem; + height: 0.3rem; + background: var(--accent-color); + border-radius: 1rem 1rem 0 0; z-index: 1; - top: 0; - right: 0; - height: 0.6rem; - width: 0.6rem; - background-color: #E53935; - border-radius: 0.5rem; - transition: transform 0.3s; + } } -.shrink.notification-dot::after { - transform: scale(0); +.password-field { + label { + display: flex; + input:checked ~ .visible { + display: none; + } + input:not(:checked) ~ .invisible { + display: none; + } + } } - -#deposit, -#withdraw { - .container-header { - background: linear-gradient(rgba(var(--foreground-color), 1) 90%, transparent); - } +.multi-state-button { + display: grid; + text-align: center; + align-items: center; + & > * { + grid-area: 1/1/2/2; + } + button { + z-index: 1; + } } - -sm-tab-header { - position: sticky; - top: 0; - display: inline-flex; - background-color: var(--dark-shade); - z-index: 2; - padding: 0.3rem; - margin: 1rem 0; - border-radius: 3rem; +.clip { + clip-path: circle(0); } -sm-tab{ - text-transform: capitalize; - &::part(tab){ - padding: 0.4rem 1.2rem; - } -} -sm-panel{ - width: 100%; -} - -.request { - display: grid; - gap: 1rem; - padding: 1.5rem; - border-radius: 0.6rem; - background: rgba(var(--text-color), 0.06); - h4{ - font-weight: 400; - font-size: 0.9rem; - } - h5 { - text-transform: capitalize; - font-weight: 400; - opacity: 0.8; - margin-bottom: 0.2rem; - } - .action { - align-self: flex-end; - } - .amount { - font-family: 'Roboto', sans-serif; - } - button { - width: auto; - } - .flex { - align-items: center; - justify-content: flex-end; - justify-self: flex-end; - button { - margin: 0; - } - } - &.placeholder{ - pointer-events: none; - h4, h5{ - padding: 0.5rem 0; - background: rgba(var(--text-color), 0.06); - } - .btns{ - display: grid; - gap: 0.5rem; - grid-auto-flow: column; - justify-content: flex-end; - h4{ - width: 6rem; - } - } - h5{ - width: 50%; - } - .time{ - width: 3rem; - } - animation: pulse infinite 0.6s alternate; - &:nth-of-type(2){ - animation-delay: 0.1s; - } - &:nth-of-type(3){ - animation-delay: 0.2s; - } - &:nth-of-type(4){ - animation-delay: 0.3s; - } - &:nth-of-type(5){ - animation-delay: 0.4s; - } - &:nth-of-type(6){ - animation-delay: 0.5s; - } - } -} - -.deposited { - color: #00C853; -} - -.decline-request { - margin-right: 0.5rem !important; -} - -.withdrawn { - color: #d43125; -} - -.container { - display: grid; - gap: 1rem; - width: 100%; -} - -@keyframes fade-in{ - from{ - opacity: 0; - } - to{ - opacity: 1; - } +.primary-action { + display: flex; + padding: 0.8rem 1rem; + gap: 0.5rem; + white-space: normal; + font-size: 0.8rem; + border-radius: 0.5rem; + background-color: transparent; + border: thin solid rgba(var(--text-color), 0.3); + .icon { + fill: var(--accent-color); + } + &:not(:last-of-type) { + margin-right: 0.5rem; + } } .page { - padding: 1rem 1.5rem; - padding-bottom: 5rem; - animation: fade-in 0.4s; - .container-header { - display: grid; - grid-template-columns: 1fr auto; - grid-template-areas: '. .' - 'search search'; - gap: 1rem; - top: 0; - background: rgba(var(--foreground-color), 1); - will-change: auto; - z-index: 2; - - .search { - grid-area: search; - - input { - padding: 1rem; - border: none; - width: 100%; - background: var(--dark-shade); - font-size: 1rem; - font-weight: 500; - color: rgba(var(--text-color), 1); - border-radius: 0.2rem; - - &:focus { - outline: none; - background: rgba(var(--text-color-light), 0.2); - } - } - } - } + position: relative; + display: flex; + flex-direction: column; + overflow-y: auto; + align-content: flex-start; + padding: 1.5rem; } -.copy-row { - display: grid; - grid-template-columns: 1fr auto; +#wallet_section { + background-color: rgba(var(--text-color), 0.03); + border-radius: 0.5rem; + padding: 1.5rem; +} + +#transactions_list { + flex-direction: column; + padding-bottom: 4rem; +} +.transaction { + grid-template-columns: auto 1fr auto; + gap: 0.5rem 1rem; + padding: 0.8rem; + align-items: center; + background-color: rgba(var(--text-color), 0.03); + border-radius: 0.3rem; + &:not(:last-of-type) { + margin-bottom: 0.5rem; + } + &__icon { + display: flex; align-items: center; - gap: 0.5rem; - width: auto; - h4 { - margin-bottom: 0 !important; - font-weight: 400; - } - - .icon { - cursor: pointer; - padding: 0.4rem; - height: 1.8rem; - width: 1.8rem; - } - - .copy { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } -} - -.time { - font-weight: 500; -} - -#report_popup { - width: 32rem; -} - -#profile_page { - display: flex; - flex-direction: column; - - button { - align-self: flex-start; - } -} - -.complaint { - display: grid; - gap: 1.5rem 0; - - .complaint-actions { - align-items: center; - margin: 1.5rem 0 0 0; - } - - .processed { - color: #007732; - } - - .unprocessed { - color: #d43125; - } - - .processed, - .unprocessed { - margin-bottom: 1.5rem; - } - - button { - .icon { - padding: 0.2rem; - margin-right: 0.5rem; - stroke: var(--accent-color); - stroke-width: 8; - } - } -} - -.complaints-container { - padding-top: 1.5rem; - display: grid; - align-items: flex-start; - gap: 1.5rem; -} - -#helpline_page { - sm-select { - margin-bottom: 1.5rem; - } -} - -.complaint-placeholder { - animation: pulse infinite 0.6s alternate; - - h4, - h5 { - border-radius: 0.2rem; - } - - h5 { - background: rgba(var(--text-color), 0.1); - padding: 0.5rem 0.6rem; - } - - h4 { - background: rgba(var(--text-color), 0.2); - padding: 0.85rem 0.85rem; - } - - .demo-btn { - padding: 0.85rem 3rem; - } -} - -@keyframes pulse { - from { - opacity: 0.4; - } - - to { - opacity: 1; - } -} - - -#main_loader { - text-align: center; - place-content: center; - height: 100vh; - width: 100vw; - position: fixed; - left: 0; - sm-button { - margin-left: 0; - margin-top: 1rem; - } - - 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; - } - - h3 { - width: 100%; - font-weight: 400; - word-spacing: 0.16rem; - } -} -#upi_txId_section{ - .copy-row{ - margin-bottom: 1.5rem; - } -} - -@keyframes popup{ - 0%{ - stroke-dashoffset: 50; - transform: translateY(4rem) scale(0.2, 0.6); - } - 40%{ - transform: translateY(0) scale(0.2); - } - 41%{ - transform: translateY(0) scale(0.2); - } - 50%{ - stroke-dashoffset: 50; - transform: translateY(0) scale(1); - } - 100%{ - stroke-dashoffset: 0; - } -} -#transaction_result{ - z-index: 12; - #transaction_heading{ - margin-bottom: 1rem; - } - .copy-row{ - grid-template-areas: 'label label' '. .'; - margin-top: 1rem; - gap: 0 1rem; - h4{ - font-weight: 500; - } - } - h5{ - grid-area: label; - color: rgba(var(--text-color), 0.7); - } - h4, h5, p{ - text-align: center; - } - & > h4{ - font-size: 1.2rem; - margin-top: 2rem; - margin-bottom: 0.5rem; - } - sm-button{ - align-self: center; - width: auto; - } -} -#failure_svg{ - height: 5rem; - width: 5rem; - stroke-width: 4; - align-self: center; - stroke: none; - stroke-dasharray: 50; - fill: rgba(var(--text-color), 0.1); - animation: popup 2s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275); -} - -#success_art{ - margin: 1rem 0; - height: 14rem; - width: 100%; - align-self: center; - circle{ - transform-origin: center; - transform: scale(0.4); - animation: explode 1.6s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275); - } - polygon{ - transform-origin: center; - transform: rotate(-20deg); - animation: rotate-in-place 1s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275); - } - polygon:nth-of-type(1){ - animation-delay: 0.1s; - } - polygon:nth-of-type(2){ - animation-delay: 0.2s; - } - polygon:nth-of-type(3){ - animation-delay: 0.3s; - } - circle:nth-of-type(1){ - animation-delay: 0.1s; - } - circle:nth-of-type(2){ - animation-delay: 0.2s; - } - circle:nth-of-type(3){ - animation-delay: 0.3s; - } - circle:nth-of-type(4){ - animation-delay: 0.4s; - } - circle:nth-of-type(5){ - animation-delay: 0.5s; - } -} -#failure_svg{ - line{ - stroke: #EF5350; - } -} - -.rupee-symbol{ - height: 1rem; - width: 1rem; - fill: rgba(var(--text-color), 0.5); -} - -#deposit_rupee{ - .copy-row{ - margin-bottom: 1rem; - } -} -.activity-container{ - display: grid; - gap: 1rem; -} -.activity{ - position: relative; - overflow: hidden; - display: grid; - background: rgba(var(--text-color), 0.06); - border-radius: 0.6rem; - padding: 1rem 1.2rem; - gap: 0 1rem; - grid-template-columns: auto 1fr auto; - grid-template-areas: 'icon type amount' 'icon receiver time'; - align-items: center; - cursor: pointer; - transition: transform 0.3s; - .icon{ - grid-area: icon; - height: 3rem; - width: 3rem; - padding: 0.85rem; - background: rgba(var(--text-color), 0.06); - background-size: cover; - border-radius: 2rem; - } - .activity-type{ - grid-area: type; - text-transform: capitalize; - font-weight: 400; - font-size: 0.85rem; - } - .activity-receiver{ - grid-area: receiver; - font-weight: 500; - font-size: 0.9rem; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - .activity-amount{ - text-align: right; - grid-area: amount; - font-family: 'Roboto', sans-serif; - white-space: nowrap; - } - .activity-time{ - text-align: right; - grid-area: time; - color: rgba(var(--text-color), 0.7); - font-weight: 500; - white-space: nowrap; - } - .pending{ - display: inline-flex; - padding: 0.3rem 0.6rem; - background: rgba(var(--text-color), 0.06); - border-radius: 1rem; - width: max-content; - margin-left: 0.4rem; - } - &.placeholder{ - pointer-events: none; - animation: pulse infinite 0.6s alternate; - .activity-type, - .activity-receiver{ - background: rgba(var(--text-color), 0.06); - padding: 0.5rem 0; - } - .activity-type{ - width: 50%; - } - &:nth-of-type(2){ - animation-delay: 0.1s; - } - &:nth-of-type(3){ - animation-delay: 0.2s; - } - &:nth-of-type(4){ - animation-delay: 0.3s; - } - &:nth-of-type(5){ - animation-delay: 0.4s; - } - &:nth-of-type(6){ - animation-delay: 0.5s; - } - &:nth-of-type(7){ - animation-delay: 0.6s; - } - &:nth-of-type(8){ - animation-delay: 0.7s; - } - } -} -.cashier-message{ - display: flex; - flex-direction: column; - background: rgba(var(--text-color), 0.06); - border-radius: 0.6rem; - padding: 1rem 1.2rem; - .time{ - margin-bottom: 0.5rem; - } -} -.back-arrow{ - stroke-width: 10; - margin-right: 0.5rem; - padding: 0.2rem; -} -.select{ - max-width: 50ch; - position: relative; - display: flex; - width: 100%; - border-radius: 0.3rem; - background: rgba(var(--text-color), 0.06); - align-items: center; - &:first-of-type:not(:last-of-type){ - border-radius: 0.3rem 0.3rem 0 0; - } - & + &{ - margin-top: 0; - border-radius: 0 0 0.3rem 0.3rem; - border-top: solid 1px rgba(var(--text-color), 0.16); - } - label{ - display: flex; - align-items: center; - cursor: pointer; - flex: 1; - padding: 0.85rem 1rem; - } - input[type="radio"]{ - display: none; - } - input:checked ~ .radio .outer-ring{ - stroke: var(--accent-color); - } - input:checked ~ .radio .inner-disc{ - transform: none; - } - .radio{ - width: 1.2rem; - height: 1.2rem; - fill: none; - overflow: visible; - margin-right: 0.6rem; - .outer-ring{ - stroke-width: 8; - stroke: rgba(var(--text-color), 0.5); - } - .inner-disc{ - transform-origin: center; - fill: var(--accent-color); - transform: scale(0); - transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); - } - } - .remove{ - width: 3rem; - height: 2rem; - padding: 0.7rem; - cursor: pointer; - stroke-width: 10; - } - .tag{ - grid-area: tag; - opacity: 0.6; - font-weight: 500; - border: solid 1px rgba(var(--text-color), 0.4); - padding: 0.2rem 0.4rem; - border-radius: 0.3rem; - margin-right: 0.5rem; - } - h4{ - font-weight: 400; - } -} -.add-upi{ - margin-top: 0.4rem; - justify-self: flex-start; - width: max-content; -} - -#transaction_page{ - header{ - padding: 0.5rem 0; - .back-arrow{ - grid-area: back; - } - h4{ - text-transform: capitalize; - } - } - h5{ - font-weight: 400; - font-family: 'Roboto', sans-serif; - opacity: 0.8; - margin-bottom: 0.4rem; - text-transform: capitalize; - } - p:last-of-type{ - margin: 2rem 0 1rem 0; - font-size: 0.9rem; - opacity: 0.8; - } - #transaction_details{ - position: relative; - padding: .5rem; - //background-color: rgba(var(--text-color), 0.06); - max-width: 50ch; - border-radius: 0.5rem; - .icon{ - height: 4rem; - width: 4rem; - padding: 1.2rem; - border-radius: 4rem; - margin-top: 1rem; - margin-bottom: 2rem; - background: rgba(var(--text-color), 0.06); - } - .success{ - background: #00C853; - stroke-width: 8; - stroke: var(--background-color); - } - .flex{ - margin-bottom: 1.5rem; - align-items: baseline; - } - strong{ - font-weight: 500; - &:not(:last-of-type) + sm-button{ - margin-bottom: 1.5rem; - margin-top: -0.4rem; - } - } - strong:not(:last-of-type){ - margin-bottom: 1rem; - } - sm-button{ - width: max-content; - margin-top: 0.6rem; - } - } - .transaction-amount{ - font-size: 2rem; - font-weight: 400; - } - #transaction_time{ - right: 0; - position: absolute; - margin: 1.5rem; - } -} -@keyframes explode{ - 0%{ - transform: scale(0.4); - } - 80%{ - transform: scale(1); - } - 100%{ - transform: scale(0.9); - } -} -@keyframes rotate-in-place{ - 0%{ - transform: rotate(-20deg); - } - 100%{ - transform: none; - } -} -#people_container{ - display: grid; - grid-template-columns: repeat(4, 1fr); - padding: 1.5rem; - gap: 2rem 0.2rem; -} -#add_person_btn, -.person{ - position: relative; - overflow: hidden; - cursor: pointer; - display: flex; - flex-direction: column; - width: 5rem; - -webkit-tap-highlight-color: transparent; - border-radius: 0.5rem; - user-select: none; -} -#add_person_btn{ - text-align: center; - font-size: 0.85rem; - opacity: 0.8; - font-weight: 500; - .icon{ - height: 3rem; - width: 3rem; - border-radius: 2rem; - stroke-width: 10; - padding: 1rem; - background: rgba(var(--text-color), 0.06); - align-self: center; - margin-bottom: 0.6rem; - } -} -.person{ - align-items: center; -} -.person-initials, #person_initials{ - display: flex; justify-content: center; - height: 3rem; - width: 3rem; - font-size: 1.2rem !important; + grid-area: 1/1/3/2; + width: 2.5rem; + height: 2.5rem; + background-color: rgba(var(--text-color), 0.03); + border-radius: 0.5rem; + .icon { + fill: var(--accent-color); + } + } + &__receiver { + font-size: 0.9rem; font-weight: 500; - align-items: center; - border-radius: 2rem; - margin-bottom: 0.6rem !important; - text-transform: uppercase; - color: white; + color: rgba(var(--text-color), 0.8); + } + &__time { + font-size: 0.8rem; + color: rgba(var(--text-color), 0.8); + } + &__amount { + font-size: 1rem; + font-weight: 700; + grid-area: 1/3/3/4; + &.sent { + &::before { + content: "-"; + } + } + &.received { + &::before { + content: "+"; + } + } + } } -.person-name{ - font-size: 0.85rem; - opacity: 0.8; - font-weight: 500; +.fab { + position: absolute; + right: 0; + bottom: 0; + margin: 1.5rem; + box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2); + z-index: 2; +} +#scroll_to_top { + border-radius: 3rem; + background-color: rgba(var(--foreground-color), 1); +} + +#transaction_result { + display: grid; + gap: 0.5rem; + height: max(40vh, 24rem); + align-items: center; + justify-content: center; + text-align: center; + align-content: center; + &.success { + .icon--failed { + display: none; + } + } + &.failed { + .icon--success { + display: none; + } + } + h3 { text-align: center; + width: 100%; + } + .icon { + justify-self: center; + height: 4rem; + width: 4rem; + border-radius: 5rem; + margin-bottom: 1rem; + animation: popup 1s; + &--success { + fill: rgba(var(--background-color), 1); + padding: 1rem; + background-color: #0bbe56; + } + &--failed { + background-color: rgba(var(--text-color), 0.03); + fill: var(--danger-color); + } + } + sm-copy { + font-size: 0.8rem; + } +} +@keyframes popup { + 0% { + opacity: 0; + transform: scale(0.2) translateY(600%); + } + 10% { + transform: scale(0.2) translateY(5rem); + opacity: 1; + } + 40% { + transform: scale(0.2) translateY(0); + } + 80% { + transform: scale(1.1) translateY(0); + } + 100% { + transform: scale(1) translateY(0); + } } -#person_popup{ - & > .flex:first-of-type{ - margin: 1rem 0; - .flex{ - margin-top: 0.5rem; - .icon{ - height: 2.6rem; - width: 2.6rem; - padding: 0.85rem; - cursor: pointer; - stroke-width: 8; - &:hover{ - background: rgba(var(--text-color), 0.06); - } - } - } - } - h3{ - text-transform: capitalize; - } - h5{ - font-weight: 500; - opacity: 0.8; - } - .copy-row{ - margin-bottom: 1.5rem; - } - #show_person_name{ - padding: 0.5rem 1rem; - border-radius: 0.5rem; - max-width: 30ch; - &:focus{ - outline: none; - background: rgba(var(--text-color), 0.1); - } - } +#settings { } -#activity_page, -#request_page, -#settings_page{ - .empty-state{ - justify-content: left; - } +.cashier-request, +.wallet-request, +.payment-request { + display: flex; + gap: 1rem; + align-items: center; + padding: 0.8rem; + border-radius: 0.3rem; + background-color: rgba(var(--text-color), 0.06); + &:not(:last-of-type) { + margin-bottom: 1rem; + } + &__time { + font-size: 0.8rem; + } } -#settings_page{ - h4{ - margin-top: 2rem; - margin-bottom: 0.6rem; - } - .copy-row h4{ - margin: 0; - } - p{ - color: rgba(var(--text-color), 0.7); - } - sm-button{ - margin-top: 0.85rem; - } - .flex{ - max-width: 60ch; - } - .my-qr-code{ - margin-bottom: 1.5rem; - height: 14rem; - img{ - height: 100%; - } - } +.payment-request { + display: grid; + grid-template-columns: 1fr auto; + &__amount { + font-weight: 700; + text-align: right; + } } -@media only screen and (max-width: 640px) { - #home_page, #deposit{ - display: grid; - gap: 1.5rem; - grid-template-areas: '.''left'; - grid-template-columns: minmax(0, 1fr); - .left { - grid-area: left; - } +@media screen and (min-width: 40rem) { + sm-popup { + --width: 24rem; + } + .popup__header { + grid-column: 1/-1; + padding: 1rem 1.5rem 0 1.5rem; + } + body { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + } + #main_card { + display: grid; + grid-template-columns: auto 1fr; + grid-template-rows: auto 1fr; + grid-template-areas: "nav header" "nav main"; + position: relative; + border-radius: 0.5rem; + overflow: hidden; + box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.05), + 0 1rem 3rem rgba(0, 0, 0, 0.2); + // backdrop-filter: blur(2rem); + background-color: rgba(var(--foreground-color), 0.9); + } + #main_header { + grid-area: header; + } + #pages_container { + grid-area: main; + } + + #main_navbar { + grid-area: nav; + border-top: none; + flex-direction: column; + height: 100%; + ul { + flex-direction: column; + gap: 0.5rem; + padding: 0.3rem; + + li:last-of-type { + margin-top: auto; + } } - sm-select { - width: 100%; - } - .hide-on-mobile{ - display: none !important; - } - #transaction_page{ - padding-top: 0; - header{ - padding: 1.5rem 0; - } - } - #deposit{ - .user-panel{ - padding: 0; - } - } - video{ - height: 100vw; + } + .nav-item { + aspect-ratio: 1/1; + &__indicator { + width: 0.25rem; + height: 50%; + left: 0; + border-radius: 0 1rem 1rem 0; + bottom: auto; } + } + #user { + grid-template-columns: 1fr 20rem; + align-content: flex-start; + align-items: flex-start; + } } - -@media only screen and (min-width: 640px) { - .hide-on-desktop{ - display: none !important; - } - body { - padding: 0 2rem; - margin-left: 4rem; - } - #sign_in_page{ - padding: 0 6vw; - grid-auto-flow: column; - .info{ - padding: 0; - } - .sign-in-box{ - align-self: auto; - width: 26rem; - padding: 2rem; - margin-top: unset; - min-height: 80vh; - min-width: 26rem; - box-shadow: 0 0 0.3rem #00000016, 0 6rem 2rem -2rem #00000016; - } - } - sm-popup{ - background: rgba(var(--foreground-color), 1); - } - sm-popup::part(popup){ - width: 24rem; - } - - #confirmation { - width: 24rem; - } - - #on_boarding{ - width: 26rem; - } - - #navbar { - justify-content: flex-start; - flex-direction: column; - align-items: stretch; - left: 0; - bottom: 0; - top: 0; - right: auto; - border-top: none; - border-radius: 0; - background: rgba(var(--text-color), 0.06); - box-shadow: -0.5rem 0 0.5rem #00000008 inset; - .navbar-item { - display: flex; - width: auto; - padding: 0.85rem 1.2rem; - user-select: none; - .icon { - height: 1.2rem; - width: 1.2rem; - } - h5{ - display: none; - } - &:hover { - opacity: 1; - } - } - .logo{ - margin: 1.5rem 1rem; - h4{ - display: none; - } - .main-logo{ - height: 1.2rem; - width: 1.2rem; - } - } - .active{ - background: rgba(var(--text-color), 0.06); - } - } - - .page { - padding-bottom: 2rem; - } - #home_page { - padding-top: 0.5rem; - .left { - margin-top: 1rem; - } - } - .options-tab, #people_container{ - grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr)); - gap: 2rem 0.85rem; - } - .display-balance{ - .balance{ - height: 9rem; - } - } - .request{ - grid-template-columns: minmax(0, auto) auto; - grid-template-areas: 'time time' ' . .' ' . .'; - .time{ - grid-area: time; - margin-bottom: 0 !important; - } - button{ - width: max-content; - margin-left: auto; - } - .breakable{ - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - } - #deposit{ - .user-panel{ - padding-right: 0; - } - } - #settings_page{ - .copy-row{ - display: inline-grid; - } - } -} - -@media only screen and (min-width: 800px) { - body { - margin-left: 11rem; - } - .complaint { - gap: 0 1.5rem; - grid-template-columns: 1fr 1fr; - grid-template-areas: '. . ''header header'; - - .complaint-actions { - grid-area: header; - } - - .left { - border-right: 1px solid rgba(var(--text-color), 0.2); - padding-right: 1.5rem; - } - - .right { - display: flex; - justify-content: center; - flex-direction: column; - } - } - #navbar{ - .navbar-item { - h5{ - font-size: 0.9rem; - margin: 0; - display: block; - } - } - .icon{ - margin-right: 0.85rem; - } - .logo{ - h4{ - display: block; - font-size: 1rem; - } - } - } - .user-panel{ - position: sticky; - top: 1.5rem; - padding-top: 1.5rem; - } - #home_page, #deposit { - display: grid; - gap: 1.5rem; - grid-template-columns: minmax(0, 1fr) 22rem; - } - #deposit{ - grid-template-columns: minmax(0, 1fr) 18rem; - .user-panel{ - padding-right: 0; - } - } - .activity, .cashier-message{ - width: 60ch; - } - .request{ - grid-template-columns: minmax(0, auto) auto; - grid-template-areas: 'time time' ' . .' ' . .'; - } -} - -@media only screen and (min-width: 1280px) { - .request{ - grid-template-areas: 'time time time' '. . .'; - } - #deposit{ - grid-template-columns: minmax(0, 1fr) 20rem; - .request{ - grid-template-areas: 'time time time time' '. . . .'; - } - #unconfirmed_requests_container .request{ - display: flex; - flex-direction: column; - } - } - -} - -@media only screen and (max-width: 320px) { - :root{ - font-size: 14px; - } +@media screen and (min-width: 56rem) { + #main_card { + height: 80vh; + width: 56rem; + } } @media (any-hover: hover) { - .navbar-item:hover{ - background: rgba(var(--text-color), 0.06); + ::-webkit-scrollbar { + width: 0.5rem; + height: 0.5rem; + } + + ::-webkit-scrollbar-thumb { + background: rgba(var(--text-color), 0.3); + border-radius: 1rem; + + &:hover { + background: rgba(var(--text-color), 0.5); } - .remove{ - opacity: 0.6; + } + .interact:not([disabled]) { + transition: background-color 0.3s; + &:hover { + background-color: rgba(var(--text-color), 0.06); } - .remove:hover{ - opacity: 1; + } + .button:not([disabled]) { + transition: background-color 0.3s, filter 0.3s; + &:hover { + filter: contrast(2); } + } +} + +@supports (overflow: overlay) { + body { + overflow: overlay; + } +} + +.hide { + display: none !important; } diff --git a/fn_ui.js b/fn_ui.js deleted file mode 100644 index a8fd0b3..0000000 --- a/fn_ui.js +++ /dev/null @@ -1,244 +0,0 @@ -const userUI = {}; - -userUI.requestTokenFromCashier = function() { - let cashier = User.findCashier(); - if (!cashier) - return alert("No cashier online"); - let amount = parseFloat(document.forms['request-cashier']['amount'].value); - //get UPI txid from user - let upiTxID = prompt(`Send Rs. ${amount} to ${cashierUPI[cashier]} and enter UPI txid`); - if (!upiTxID) - return alert("Cancelled"); - User.cashToToken(cashier, amount, upiTxID).then(result => { - console.log(result); - alert("Requested cashier. please wait!"); - }).catch(error => console.error(error)) -} - -userUI.withdrawCashFromCashier = function() { - let cashier = User.findCashier(); - if (!cashier) - return alert("No cashier online"); - let amount = parseFloat(document.forms['request-cashier']['amount'].value); - //get confirmation from user - let upiID = prompt(`${amount} ${floGlobals.currency}# will be sent to ${cashier}. Enter UPI ID`); - if (!upiID) - return alert("Cancelled"); - User.sendToken(cashier, amount, 'for token-to-cash').then(txid => { - console.warn(`Withdraw ${amount} from cashier ${cashier}`, txid); - User.tokenToCash(cashier, amount, txid, upiID).then(result => { - console.log(result); - alert("Requested cashier. please wait!"); - }).catch(error => console.error(error)) - }).catch(error => console.error(error)) -} - -userUI.sendMoneyToUser = function() { - let form = document.forms['user-money']; - let floID = form['flo-id'].value, - amount = parseFloat(form['amount'].value), - remark = form['remark'].value; - let confirmation = confirm(`Do you want to SEND ${amount} to ${floID}?`); - if (!confirmation) - return alert("Cancelled"); - User.sendToken(floID, amount, "|" + remark).then(txid => { - console.warn(`Sent ${amount} to ${floID}`, txid); - alert(`Sent ${amount} to ${floID}. It may take a few mins to reflect in their wallet`); - }).catch(error => console.error(error)); -} - -userUI.requestMoneyFromUser = function() { - let form = document.forms['user-money']; - let floID = form['flo-id'].value, - amount = parseFloat(form['amount'].value), - remark = form['remark'].value; - let confirmation = confirm(`Do you want to REQUEST ${amount} from ${floID}?`); - if (!confirmation) - return alert("Cancelled"); - User.requestToken(floID, amount, remark).then(result => { - console.log(`Requested ${amount} from ${floID}`, result); - alert(`Requested ${amount} from ${floID}`); - }).catch(error => console.error(error)); -} - -userUI.renderCashierRequests = function(requests, error = null) { - if (error) - return console.error(error); - else if (typeof requests !== "object" || requests === null) - return; - let table = document.getElementById('user-cashier-requests').getElementsByTagName('tbody')[0]; - for (let r in requests) { - let oldCard = document.getElementById(r); - if (oldCard) oldCard.remove(); - let row = table.insertRow(); - renderUser_cashierRequestCard(requests[r], row); - } -} - -function renderUser_cashierRequestCard(request, row) { - row.id = request.vectorClock; - row.insertCell().textContent = request.time; - row.insertCell().textContent = request.receiverID; - row.insertCell().textContent = request.message.mode; - let status = request.tag ? (request.tag + ":" + request.note) : (request.note || "PENDING"); - row.insertCell().textContent = status; //Status -} - -userUI.renderMoneyRequests = function(requests, error = null) { - if (error) - return console.error(error); - else if (typeof requests !== "object" || requests === null) - return; - let table = document.getElementById('user-money-requests').getElementsByTagName('tbody')[0]; - for (let r in requests) { - let oldCard = document.getElementById(r); - if (oldCard) oldCard.remove(); - let row = table.insertRow(); - renderUser_moneyRequestCard(requests[r], row); - } -} - -function renderUser_moneyRequestCard(request, row) { - row.id = request.vectorClock; - row.insertCell().textContent = request.time; - row.insertCell().textContent = request.senderID; - row.insertCell().textContent = request.message.amount; - row.insertCell().textContent = request.message.remark; - let status = request.note; - if (status) - row.insertCell().textContent = request.note; - else - row.insertCell().innerHTML = - `` + - ``; -} - -userUI.payRequest = function(reqID) { - let request = User.moneyRequests[reqID]; - let confirmation = confirm(`Do you want to SEND ${request.message.amount} to ${request.senderID}?`); - if (!confirmation) - return alert("Cancelled"); - User.sendToken(request.senderID, request.message.amount, "|" + request.message.remark).then(txid => { - console.warn(`Sent ${request.message.amount} to ${request.senderID}`, txid); - alert(`Sent ${request.message.amount} to ${request.senderID}. It may take a few mins to reflect in their wallet`); - User.decideRequest(request, 'PAID: ' + txid) - .then(result => console.log(result)) - .catch(error => console.error(error)) - }).catch(error => console.error(error)); -} - -userUI.declineRequest = function(reqID) { - let request = User.moneyRequests[reqID]; - User.decideRequest(request, "DECLINED").then(result => { - console.log(result); - alert("Declined request"); - }).catch(error => console.error(error)) -} - -//Cashier -const cashierUI = {}; - -cashierUI.renderRequests = function(requests, error = null) { - if (error) - return console.error(error); - else if (typeof requests !== "object" || requests === null) - return; - let table = document.getElementById('cashier-request-list').getElementsByTagName('tbody')[0]; - for (let r in requests) { - let oldCard = document.getElementById(r); - if (oldCard) oldCard.remove(); - let row = table.insertRow(); - renderCashier_requestCard(requests[r], row); - } -} - -function renderCashier_requestCard(request, row) { - row.id = request.vectorClock; - row.insertCell().textContent = request.senderID; - row.insertCell().textContent = request.time; - row.insertCell().textContent = request.message.mode; - let status = request.tag || request.note; //status tag for completed, note for rejected - if (status) - row.insertCell().textContent = status; - else - row.insertCell().innerHTML = `` -} - -cashierUI.completeRequest = function(reqID) { - let request = Cashier.Requests[reqID]; - if (request.message.mode === "cash-to-token") - completeCashToTokenRequest(request); - else if (request.message.mode === "token-to-cash") - completeTokenToCashRequest(request); -} - -function completeCashToTokenRequest(request) { - Cashier.checkIfUpiTxIsValid(request.message.upi_txid).then(_ => { - let confirmation = confirm(`Check if you have received UPI transfer\ntxid:${request.message.upi_txid}\namount:${request.message.amount}`); - if (!confirmation) - return alert("Cancelled"); - User.sendToken(request.senderID, request.message.amount, 'for cash-to-token').then(txid => { - console.warn(`${request.message.amount} cash-to-token for ${request.senderID}`, txid); - Cashier.finishRequest(request, txid).then(result => { - console.log(result); - console.info('Completed cash-to-token request:', request.vectorClock); - alert("Completed request"); - }).catch(error => console.error(error)) - }).catch(error => console.error(error)) - }).catch(error => { - console.error(error); - alert(error); - if (Array.isArray(error) && error[0] === true && typeof error[1] === 'string') - Cashier.rejectRequest(request, error[1]).then(result => { - console.log(result); - console.info('Rejected cash-to-token request:', request.vectorClock); - }).catch(error => console.error(error)) - }) -} - -function completeTokenToCashRequest(request) { - Cashier.checkIfTokenTxIsValid(request.message.token_txid, request.senderID, request.message.amount).then(result => { - let upiTxID = prompt(`Token transfer is verified!\n Send ${request.message.amount} to ${request.message.upi_id} and Enter UPI txid`); - if (!upiTxID) - return alert("Cancelled"); - Cashier.finishRequest(request, upiTxID).then(result => { - console.log(result); - console.info('Completed token-to-cash request:', request.vectorClock); - alert("Completed request"); - }).catch(error => console.error(error)) - }).catch(error => { - console.error(error); - alert(error); - if (Array.isArray(error) && error[0] === true && typeof error[1] === 'string') - Cashier.rejectRequest(request, error[1]).then(result => { - console.log(result); - console.info('Rejected token-to-cash request:', request.vectorClock); - }).catch(error => console.error(error)) - }) -} - -function renderAllTokenTransactions() { - let table = document.getElementById('token-transactions').getElementsByTagName('tbody')[0]; - tokenAPI.getAllTxs(myFloID).then(result => { - for (let txid in result.transactions) { - let row = table.insertRow(); - renderTransactionCard(row, txid, tokenAPI.util.parseTxData(result.transactions[txid])); - } - }).catch(error => console.error(error)) -} - -function renderTransactionCard(row, txid, tx) { - row.setAttribute('title', txid); - row.insertCell().textContent = tx.time; - if (tx.sender === myFloID) { - row.insertCell().textContent = 'Sent'; - row.insertCell().textContent = tx.receiver || 'Myself'; - } else if (tx.receiver === myFloID) { - row.insertCell().textContent = 'Recieved'; - row.insertCell().textContent = tx.sender; - } else { //This should not happen unless API returns transaction that doesnot involve myFloID - row.insertCell().textContent = tx.sender; - row.insertCell().textContent = tx.receiver; - } - row.insertCell().textContent = tx.tokenAmount; -} \ No newline at end of file diff --git a/new.html b/new.html index f5aa4df..4fae6fc 100644 --- a/new.html +++ b/new.html @@ -3,13 +3,14 @@ RanchiMall Pay - + + + + + - - - + + + + + +

+

+
+ Cancel + OK +
+ +
+
+
+ + + +

RanchiMall Pay

+
+ +
+
+
+
+
+ + +
+
+

+ + + + + + + + + Wallet +

+
+
Balance
+

+
+
+ + +
+ + +
+
+
+
+
+

Requests

+
    +
    +

    No requests to process

    +
    +
    +
    +
    +

    Transactions history

    +
      +
    +
    +

    No transactions

    +
    +
    +
    +

    Activity

    + + Wallet transactions + Payment requests + + +
    +
      +
      +

      No transactions

      +
      +
      +
      +
        +
        +

        No requests

        +
        +
        +         +
        +
        +

        Settings

        +
        +
        +
        My FLO ID
        + +
        + Sign out +
        +
        +
        + +
        + + +
        + +
        +
        +

        + + + + + + + + + + + + + + + + + + +
        +         + + + + + + + + + + + - - - - - - -
        -
        - Transactions - - - - - - - - - - -
        TimeFLO IDAmount
        -
        -
        \ No newline at end of file diff --git a/scripts/components.js b/scripts/components.js new file mode 100644 index 0000000..85d5d80 --- /dev/null +++ b/scripts/components.js @@ -0,0 +1,3079 @@ +/*jshint esversion: 6 */ +const smButton = document.createElement('template') +smButton.innerHTML = ` + +
        + +
        `; +customElements.define('sm-button', + class extends HTMLElement { + constructor() { + super(); + this.attachShadow({ + mode: 'open' + }).append(smButton.content.cloneNode(true)); + } + static get observedAttributes() { + return ['disabled']; + } + + get disabled() { + return this.hasAttribute('disabled'); + } + + set disabled(value) { + if (value) { + this.setAttribute('disabled', ''); + } else { + this.removeAttribute('disabled'); + } + } + focusIn() { + this.focus(); + } + + handleKeyDown(e) { + if (!this.hasAttribute('disabled') && (e.key === 'Enter' || e.key === ' ')) { + e.preventDefault(); + this.click(); + } + } + + connectedCallback() { + if (!this.hasAttribute('disabled')) { + this.setAttribute('tabindex', '0'); + } + this.setAttribute('role', 'button'); + this.addEventListener('keydown', this.handleKeyDown); + } + attributeChangedCallback(name) { + if (name === 'disabled') { + if (this.hasAttribute('disabled')) { + this.removeAttribute('tabindex'); + } else { + this.setAttribute('tabindex', '0'); + } + this.setAttribute('aria-disabled', this.hasAttribute('disabled')); + } + } + }) +const smForm = document.createElement('template'); +smForm.innerHTML = ` + +
        + +
        +`; + +customElements.define('sm-form', class extends HTMLElement { + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(smForm.content.cloneNode(true)) + + this.form = this.shadowRoot.querySelector('form'); + this.formElements + this.requiredElements + this.submitButton + this.resetButton + this.allRequiredValid = false; + + this.debounce = this.debounce.bind(this) + this._checkValidity = this._checkValidity.bind(this) + this.handleKeydown = this.handleKeydown.bind(this) + this.reset = this.reset.bind(this) + this.elementsChanged = this.elementsChanged.bind(this) + } + debounce(callback, wait) { + let timeoutId = null; + return (...args) => { + window.clearTimeout(timeoutId); + timeoutId = window.setTimeout(() => { + callback.apply(null, args); + }, wait); + }; + } + _checkValidity() { + this.allRequiredValid = this.requiredElements.every(elem => elem.isValid) + if (!this.submitButton) return; + if (this.allRequiredValid) { + this.submitButton.disabled = false; + } + else { + this.submitButton.disabled = true; + } + } + handleKeydown(e) { + if (e.key === 'Enter' && !e.target.tagName.includes('TEXTAREA')) { + if (this.allRequiredValid) { + if (this.submitButton) { + this.submitButton.click() + } + this.dispatchEvent(new CustomEvent('submit', { + bubbles: true, + composed: true, + })) + } + else { + this.requiredElements.find(elem => !elem.isValid).vibrate() + } + } + } + reset() { + this.formElements.forEach(elem => elem.reset()) + } + elementsChanged() { + this.formElements = [...this.querySelectorAll('sm-input, sm-textarea, sm-checkbox, tags-input, file-input, sm-switch, sm-radio')] + this.requiredElements = this.formElements.filter(elem => elem.hasAttribute('required')); + this.submitButton = this.querySelector('[variant="primary"], [type="submit"]'); + this.resetButton = this.querySelector('[type="reset"]'); + if (this.resetButton) { + this.resetButton.addEventListener('click', this.reset); + } + this._checkValidity() + } + connectedCallback() { + const slot = this.shadowRoot.querySelector('slot') + slot.addEventListener('slotchange', this.elementsChanged) + this.addEventListener('input', this.debounce(this._checkValidity, 100)); + this.addEventListener('keydown', this.debounce(this.handleKeydown, 100)); + } + disconnectedCallback() { + this.removeEventListener('input', this.debounce(this._checkValidity, 100)); + this.removeEventListener('keydown', this.debounce(this.handleKeydown, 100)); + } +}) + +const smInput = document.createElement('template') +smInput.innerHTML = ` + +
        + +

        +
        +`; +customElements.define('sm-input', + class extends HTMLElement { + + constructor() { + super(); + this.attachShadow({ + mode: 'open' + }).append(smInput.content.cloneNode(true)); + + this.inputParent = this.shadowRoot.querySelector('.input'); + this.input = this.shadowRoot.querySelector('input'); + this.clearBtn = this.shadowRoot.querySelector('.clear'); + this.label = this.shadowRoot.querySelector('.label'); + this.feedbackText = this.shadowRoot.querySelector('.feedback-text'); + this.outerContainer = this.shadowRoot.querySelector('.outer-container'); + this._helperText = ''; + this._errorText = ''; + this.isRequired = false; + this.validationFunction = undefined; + this.reflectedAttributes = ['value', 'required', 'disabled', 'type', 'inputmode', 'readonly', 'min', 'max', 'pattern', 'minlength', 'maxlength', 'step']; + + this.reset = this.reset.bind(this); + this.clear = this.clear.bind(this); + this.focusIn = this.focusIn.bind(this); + this.focusOut = this.focusOut.bind(this); + this.fireEvent = this.fireEvent.bind(this); + this.checkInput = this.checkInput.bind(this); + this.vibrate = this.vibrate.bind(this); + } + + static get observedAttributes() { + return ['value', 'placeholder', 'required', 'disabled', 'type', 'inputmode', 'readonly', 'min', 'max', 'pattern', 'minlength', 'maxlength', 'step', 'helper-text', 'error-text', 'hiderequired']; + } + + get value() { + return this.input.value; + } + + set value(val) { + this.input.value = val; + this.checkInput(); + this.fireEvent(); + } + + get placeholder() { + return this.getAttribute('placeholder'); + } + + set placeholder(val) { + this.setAttribute('placeholder', val); + } + + get type() { + return this.getAttribute('type'); + } + + set type(val) { + this.setAttribute('type', val); + } + + get validity() { + return this.input.validity; + } + + get disabled() { + return this.hasAttribute('disabled'); + } + set disabled(value) { + if (value) + this.inputParent.classList.add('disabled'); + else + this.inputParent.classList.remove('disabled'); + } + get readOnly() { + return this.hasAttribute('readonly'); + } + set readOnly(value) { + if (value) { + this.setAttribute('readonly', ''); + } else { + this.removeAttribute('readonly'); + } + } + set customValidation(val) { + this.validationFunction = val; + } + set errorText(val) { + this._errorText = val; + } + set helperText(val) { + this._helperText = val; + } + get isValid() { + if (this.input.value !== '') { + const _isValid = this.input.checkValidity(); + let _customValid = true; + if (this.validationFunction) { + _customValid = Boolean(this.validationFunction(this.input.value)); + } + if (_isValid && _customValid) { + this.feedbackText.classList.remove('error'); + this.feedbackText.classList.add('success'); + this.feedbackText.textContent = ''; + } else { + if (this._errorText) { + this.feedbackText.classList.add('error'); + this.feedbackText.classList.remove('success'); + this.feedbackText.innerHTML = ` + + ${this._errorText} + `; + } + } + return (_isValid && _customValid); + } + } + reset() { + this.value = ''; + } + clear() { + this.value = ''; + this.input.focus(); + } + + focusIn() { + this.input.focus(); + } + + focusOut() { + this.input.blur(); + } + + fireEvent() { + let event = new Event('input', { + bubbles: true, + cancelable: true, + composed: true + }); + this.dispatchEvent(event); + } + + checkInput(e) { + if (!this.hasAttribute('readonly')) { + if (this.input.value.trim() !== '') { + this.clearBtn.classList.remove('hide'); + } else { + this.clearBtn.classList.add('hide'); + } + } + if (!this.hasAttribute('placeholder') || this.getAttribute('placeholder').trim() === '') return; + if (this.input.value !== '') { + if (this.animate) + this.inputParent.classList.add('animate-placeholder'); + else + this.label.classList.add('hide'); + } else { + if (this.animate) + this.inputParent.classList.remove('animate-placeholder'); + else + this.label.classList.remove('hide'); + this.feedbackText.textContent = ''; + } + } + vibrate() { + this.outerContainer.animate([ + { transform: 'translateX(-1rem)' }, + { transform: 'translateX(1rem)' }, + { transform: 'translateX(-0.5rem)' }, + { transform: 'translateX(0.5rem)' }, + { transform: 'translateX(0)' }, + ], { + duration: 300, + easing: 'ease' + }); + } + + + connectedCallback() { + this.animate = this.hasAttribute('animate'); + this.setAttribute('role', 'textbox'); + this.input.addEventListener('input', this.checkInput); + this.clearBtn.addEventListener('click', this.clear); + } + + attributeChangedCallback(name, oldValue, newValue) { + if (oldValue !== newValue) { + if (this.reflectedAttributes.includes(name)) { + if (this.hasAttribute(name)) { + this.input.setAttribute(name, this.getAttribute(name) ? this.getAttribute(name) : ''); + } + else { + this.input.removeAttribute(name); + } + } + if (name === 'placeholder') { + this.label.textContent = newValue; + this.setAttribute('aria-label', newValue); + } + else if (this.hasAttribute('value')) { + this.checkInput(); + } + else if (name === 'type') { + if (this.hasAttribute('type') && this.getAttribute('type') === 'number') { + this.input.setAttribute('inputmode', 'numeric'); + } + } + else if (name === 'helper-text') { + this._helperText = this.getAttribute('helper-text'); + } + else if (name === 'error-text') { + this._errorText = this.getAttribute('error-text'); + } + else if (name === 'required') { + this.isRequired = this.hasAttribute('required'); + if (this.isRequired) { + this.setAttribute('aria-required', 'true'); + } + else { + this.setAttribute('aria-required', 'false'); + } + } + else if (name === 'readonly') { + if (this.hasAttribute('readonly')) { + this.inputParent.classList.add('readonly'); + } else { + this.inputParent.classList.remove('readonly'); + } + } + else if (name === 'disabled') { + if (this.hasAttribute('disabled')) { + this.inputParent.classList.add('disabled'); + } + else { + this.inputParent.classList.remove('disabled'); + } + } + } + } + disconnectedCallback() { + this.input.removeEventListener('input', this.checkInput); + this.clearBtn.removeEventListener('click', this.clear); + } + }) +const smNotifications = document.createElement('template') +smNotifications.innerHTML = ` + +
        +`; + + +customElements.define('sm-notifications', class extends HTMLElement { + constructor() { + super(); + this.shadow = this.attachShadow({ + mode: 'open' + }).append(smNotifications.content.cloneNode(true)) + + this.notificationPanel = this.shadowRoot.querySelector('.notification-panel') + this.animationOptions = { + duration: 300, + fill: "forwards", + easing: "cubic-bezier(0.175, 0.885, 0.32, 1.275)" + } + + this.push = this.push.bind(this) + this.createNotification = this.createNotification.bind(this) + this.removeNotification = this.removeNotification.bind(this) + this.clearAll = this.clearAll.bind(this) + + } + + randString(length) { + let result = ''; + const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; + for (let i = 0; i < length; i++) + result += characters.charAt(Math.floor(Math.random() * characters.length)); + return result; + } + + createNotification(message, options = {}) { + const { pinned = false, icon = '' } = options; + const notification = document.createElement('output') + notification.id = this.randString(8) + notification.classList.add('notification'); + let composition = ``; + composition += ` +
        ${icon}
        +

        ${message}

        + `; + if (pinned) { + notification.classList.add('pinned'); + composition += ` + + `; + } + notification.innerHTML = composition; + return notification; + } + + push(message, options = {}) { + const notification = this.createNotification(message, options); + this.notificationPanel.append(notification); + notification.animate([ + { + transform: `translateY(1rem)`, + opacity: '0' + }, + { + transform: `none`, + opacity: '1' + }, + ], this.animationOptions); + return notification.id; + } + + removeNotification(notification) { + notification.animate([ + { + transform: `none`, + opacity: '1' + }, + { + transform: `translateY(0.5rem)`, + opacity: '0' + } + ], this.animationOptions).onfinish = () => { + notification.remove(); + }; + } + + clearAll() { + Array.from(this.notificationPanel.children).forEach(child => { + this.removeNotification(child); + }); + } + + connectedCallback() { + this.notificationPanel.addEventListener('click', e => { + if (e.target.closest('.close')) { + this.removeNotification(e.target.closest('.notification')); + } + }); + + const observer = new MutationObserver(mutationList => { + mutationList.forEach(mutation => { + if (mutation.type === 'childList') { + if (mutation.addedNodes.length && !mutation.addedNodes[0].classList.contains('pinned')) { + setTimeout(() => { + this.removeNotification(mutation.addedNodes[0]); + }, 5000); + } + } + }); + }); + observer.observe(this.notificationPanel, { + childList: true, + }); + } +}); + +class Stack { + constructor() { + this.items = []; + } + push(element) { + this.items.push(element); + } + pop() { + if (this.items.length == 0) + return "Underflow"; + return this.items.pop(); + } + peek() { + return this.items[this.items.length - 1]; + } +} +const popupStack = new Stack(); + +const smPopup = document.createElement('template'); +smPopup.innerHTML = ` + + +`; +customElements.define('sm-popup', class extends HTMLElement { + constructor() { + super(); + this.attachShadow({ + mode: 'open' + }).append(smPopup.content.cloneNode(true)); + + this.allowClosing = false; + this.isOpen = false; + this.pinned = false; + this.offset = 0; + this.touchStartY = 0; + this.touchEndY = 0; + this.touchStartTime = 0; + this.touchEndTime = 0; + this.touchEndAnimation = undefined; + this.focusable + this.autoFocus + this.mutationObserver + + this.popupContainer = this.shadowRoot.querySelector('.popup-container'); + this.backdrop = this.shadowRoot.querySelector('.background'); + this.popup = this.shadowRoot.querySelector('.popup'); + this.popupBodySlot = this.shadowRoot.querySelector('.popup-body slot'); + this.popupHeader = this.shadowRoot.querySelector('.popup-top'); + + this.resumeScrolling = this.resumeScrolling.bind(this); + this.setStateOpen = this.setStateOpen.bind(this); + this.show = this.show.bind(this); + this.hide = this.hide.bind(this); + this.handleTouchStart = this.handleTouchStart.bind(this); + this.handleTouchMove = this.handleTouchMove.bind(this); + this.handleTouchEnd = this.handleTouchEnd.bind(this); + this.detectFocus = this.detectFocus.bind(this); + } + + static get observedAttributes() { + return ['open']; + } + + get open() { + return this.isOpen; + } + + animateTo(element, keyframes, options) { + const anime = element.animate(keyframes, { ...options, fill: 'both' }) + anime.finished.then(() => { + anime.commitStyles() + anime.cancel() + }) + return anime + } + + resumeScrolling() { + const scrollY = document.body.style.top; + window.scrollTo(0, parseInt(scrollY || '0') * -1); + document.body.style.overflow = ''; + document.body.style.top = 'initial'; + } + + setStateOpen() { + if (!this.isOpen || this.offset) { + const animOptions = { + duration: 300, + easing: 'ease' + } + const initialAnimation = (window.innerWidth > 640) ? 'scale(1.1)' : `translateY(${this.offset ? `${this.offset}px` : '100%'})` + this.animateTo(this.popup, [ + { + opacity: this.offset ? 1 : 0, + transform: initialAnimation + }, + { + opacity: 1, + transform: 'none' + }, + ], animOptions) + + } + } + + show(options = {}) { + const { pinned = false } = options; + if (!this.isOpen) { + const animOptions = { + duration: 300, + easing: 'ease' + } + popupStack.push({ + popup: this, + permission: pinned + }); + if (popupStack.items.length > 1) { + this.animateTo(popupStack.items[popupStack.items.length - 2].popup.shadowRoot.querySelector('.popup'), [ + { transform: 'none' }, + { transform: (window.innerWidth > 640) ? 'scale(0.95)' : 'translateY(-1.5rem)' }, + ], animOptions) + } + this.popupContainer.classList.remove('hide'); + if (!this.offset) + this.backdrop.animate([ + { opacity: 0 }, + { opacity: 1 }, + ], animOptions) + this.setStateOpen() + this.dispatchEvent( + new CustomEvent("popupopened", { + bubbles: true, + detail: { + popup: this, + } + }) + ); + this.pinned = pinned; + this.isOpen = true; + document.body.style.overflow = 'hidden'; + document.body.style.top = `-${window.scrollY}px`; + const elementToFocus = this.autoFocus || this.focusable[0]; + elementToFocus.tagName.includes('SM-') ? elementToFocus.focusIn() : elementToFocus.focus(); + if (!this.hasAttribute('open')) + this.setAttribute('open', ''); + } + } + hide() { + const animOptions = { + duration: 150, + easing: 'ease' + } + this.backdrop.animate([ + { opacity: 1 }, + { opacity: 0 } + ], animOptions) + this.animateTo(this.popup, [ + { + opacity: 1, + transform: (window.innerWidth > 640) ? 'none' : `translateY(${this.offset ? `${this.offset}px` : '0'})` + }, + { + opacity: 0, + transform: (window.innerWidth > 640) ? 'scale(1.1)' : 'translateY(100%)' + }, + ], animOptions).finished + .finally(() => { + this.popupContainer.classList.add('hide'); + this.popup.style = '' + this.removeAttribute('open'); + + if (this.forms.length) { + this.forms.forEach(form => form.reset()); + } + this.dispatchEvent( + new CustomEvent("popupclosed", { + bubbles: true, + detail: { + popup: this, + } + }) + ); + this.isOpen = false; + }) + popupStack.pop(); + if (popupStack.items.length) { + this.animateTo(popupStack.items[popupStack.items.length - 1].popup.shadowRoot.querySelector('.popup'), [ + { transform: (window.innerWidth > 640) ? 'scale(0.95)' : 'translateY(-1.5rem)' }, + { transform: 'none' }, + ], animOptions) + + } else { + this.resumeScrolling(); + } + } + + handleTouchStart(e) { + this.offset = 0 + this.popupHeader.addEventListener('touchmove', this.handleTouchMove, { passive: true }); + this.popupHeader.addEventListener('touchend', this.handleTouchEnd, { passive: true }); + this.touchStartY = e.changedTouches[0].clientY; + this.touchStartTime = e.timeStamp; + } + + handleTouchMove(e) { + if (this.touchStartY < e.changedTouches[0].clientY) { + this.offset = e.changedTouches[0].clientY - this.touchStartY; + this.touchEndAnimation = window.requestAnimationFrame(() => { + this.popup.style.transform = `translateY(${this.offset}px)`; + }); + } + } + + handleTouchEnd(e) { + this.touchEndTime = e.timeStamp; + cancelAnimationFrame(this.touchEndAnimation); + this.touchEndY = e.changedTouches[0].clientY; + this.threshold = this.popup.getBoundingClientRect().height * 0.3; + if (this.touchEndTime - this.touchStartTime > 200) { + if (this.touchEndY - this.touchStartY > this.threshold) { + if (this.pinned) { + this.setStateOpen(); + return; + } else + this.hide(); + } else { + this.setStateOpen(); + } + } else { + if (this.touchEndY > this.touchStartY) + if (this.pinned) { + this.setStateOpen(); + return; + } + else + this.hide(); + } + this.popupHeader.removeEventListener('touchmove', this.handleTouchMove, { passive: true }); + this.popupHeader.removeEventListener('touchend', this.handleTouchEnd, { passive: true }); + } + + + detectFocus(e) { + if (e.key === 'Tab') { + const lastElement = this.focusable[this.focusable.length - 1]; + const firstElement = this.focusable[0]; + if (e.shiftKey && document.activeElement === firstElement) { + e.preventDefault(); + lastElement.tagName.includes('SM-') ? lastElement.focusIn() : lastElement.focus(); + } else if (!e.shiftKey && document.activeElement === lastElement) { + e.preventDefault(); + firstElement.tagName.includes('SM-') ? firstElement.focusIn() : firstElement.focus(); + } + } + } + + updateFocusableList() { + this.focusable = this.querySelectorAll('sm-button:not([disabled]), button:not([disabled]), [href], sm-input, input:not([readonly]), sm-select, select, sm-checkbox, sm-textarea, textarea, [tabindex]:not([tabindex="-1"])') + this.autoFocus = this.querySelector('[autofocus]') + } + + connectedCallback() { + this.popupBodySlot.addEventListener('slotchange', () => { + this.forms = this.querySelectorAll('sm-form'); + this.updateFocusableList() + }); + this.popupContainer.addEventListener('mousedown', e => { + if (e.target === this.popupContainer && !this.pinned) { + if (this.pinned) { + this.setStateOpen(); + } else + this.hide(); + } + }); + + const resizeObserver = new ResizeObserver(entries => { + for (let entry of entries) { + if (entry.contentBoxSize) { + // Firefox implements `contentBoxSize` as a single content rect, rather than an array + const contentBoxSize = Array.isArray(entry.contentBoxSize) ? entry.contentBoxSize[0] : entry.contentBoxSize; + this.threshold = contentBoxSize.blockSize.height * 0.3; + } else { + this.threshold = entry.contentRect.height * 0.3; + } + } + }); + resizeObserver.observe(this); + + this.mutationObserver = new MutationObserver(entries => { + this.updateFocusableList() + }) + this.mutationObserver.observe(this, { attributes: true, childList: true, subtree: true }) + + this.addEventListener('keydown', this.detectFocus); + this.popupHeader.addEventListener('touchstart', this.handleTouchStart, { passive: true }); + } + disconnectedCallback() { + this.removeEventListener('keydown', this.detectFocus); + resizeObserver.unobserve(); + this.mutationObserver.disconnect() + this.popupHeader.removeEventListener('touchstart', this.handleTouchStart, { passive: true }); + } + attributeChangedCallback(name) { + if (name === 'open') { + if (this.hasAttribute('open')) { + this.show(); + } + } + } +}); +const smSwitch = document.createElement('template') +smSwitch.innerHTML = ` + +` + +customElements.define('sm-switch', class extends HTMLElement { + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(smSwitch.content.cloneNode(true)) + this.switch = this.shadowRoot.querySelector('.switch'); + this.input = this.shadowRoot.querySelector('input') + this.isChecked = false + this.isDisabled = false + + this.dispatch = this.dispatch.bind(this) + } + + static get observedAttributes() { + return ['disabled', 'checked'] + } + + get disabled() { + return this.isDisabled + } + + set disabled(val) { + if (val) { + this.setAttribute('disabled', '') + } else { + this.removeAttribute('disabled') + } + } + + get checked() { + return this.isChecked + } + + set checked(value) { + if (value) { + this.setAttribute('checked', '') + } else { + this.removeAttribute('checked') + } + } + + reset() { + + } + + dispatch() { + this.dispatchEvent(new CustomEvent('change', { + bubbles: true, + composed: true, + detail: { + value: this.isChecked + } + })) + } + + connectedCallback() { + this.addEventListener('keydown', e => { + if (e.key === ' ' && !this.isDisabled) { + e.preventDefault() + this.input.click() + } + }) + this.input.addEventListener('click', e => { + if (this.input.checked) + this.checked = true + else + this.checked = false + this.dispatch() + }) + } + attributeChangedCallback(name, oldValue, newValue) { + if (oldValue !== newValue) { + if (name === 'disabled') { + if (this.hasAttribute('disabled')) { + this.disabled = true + } + else { + this.disabled = false + } + } + else if (name === 'checked') { + if (this.hasAttribute('checked')) { + this.isChecked = true + this.input.checked = true + } + else { + this.isChecked = false + this.input.checked = false + } + } + } + } + +}) +const themeToggle = document.createElement('template'); +themeToggle.innerHTML = ` + + +`; + +class ThemeToggle extends HTMLElement { + constructor() { + super(); + + this.attachShadow({ + mode: 'open' + }).append(themeToggle.content.cloneNode(true)); + + this.isChecked = false; + this.hasTheme = 'light'; + + this.toggleState = this.toggleState.bind(this); + this.fireEvent = this.fireEvent.bind(this); + this.handleThemeChange = this.handleThemeChange.bind(this); + } + static get observedAttributes() { + return ['checked']; + } + + daylight() { + this.hasTheme = 'light'; + document.body.dataset.theme = 'light'; + this.setAttribute('aria-checked', 'false'); + } + + nightlight() { + this.hasTheme = 'dark'; + document.body.dataset.theme = 'dark'; + this.setAttribute('aria-checked', 'true'); + } + + toggleState() { + this.toggleAttribute('checked'); + this.fireEvent(); + } + handleKeyDown(e) { + if (e.key === ' ') { + this.toggleState(); + } + } + handleThemeChange(e) { + if (e.detail.theme !== this.hasTheme) { + if (e.detail.theme === 'dark') { + this.setAttribute('checked', ''); + } + else { + this.removeAttribute('checked'); + } + } + } + + fireEvent() { + this.dispatchEvent( + new CustomEvent('themechange', { + bubbles: true, + composed: true, + detail: { + theme: this.hasTheme + } + }) + ); + } + + connectedCallback() { + this.setAttribute('role', 'switch'); + this.setAttribute('aria-label', 'theme toggle'); + if (localStorage.getItem(`${window.location.hostname}-theme`) === "dark") { + this.nightlight(); + this.setAttribute('checked', ''); + } else if (localStorage.getItem(`${window.location.hostname}-theme`) === "light") { + this.daylight(); + this.removeAttribute('checked'); + } + else { + if (window.matchMedia(`(prefers-color-scheme: dark)`).matches) { + this.nightlight(); + this.setAttribute('checked', ''); + } else { + this.daylight(); + this.removeAttribute('checked'); + } + } + this.addEventListener("click", this.toggleState); + this.addEventListener("keydown", this.handleKeyDown); + document.addEventListener('themechange', this.handleThemeChange); + } + + disconnectedCallback() { + this.removeEventListener("click", this.toggleState); + this.removeEventListener("keydown", this.handleKeyDown); + document.removeEventListener('themechange', this.handleThemeChange); + } + + attributeChangedCallback(name, oldVal, newVal) { + if (name === 'checked') { + if (this.hasAttribute('checked')) { + this.nightlight(); + localStorage.setItem(`${window.location.hostname}-theme`, "dark"); + } else { + this.daylight(); + localStorage.setItem(`${window.location.hostname}-theme`, "light"); + } + } + } +} + +window.customElements.define('theme-toggle', ThemeToggle); + +const smCopy = document.createElement('template'); +smCopy.innerHTML = ` + +
        +

        + +
        +`; +customElements.define('sm-copy', + class extends HTMLElement { + constructor() { + super(); + this.attachShadow({ + mode: 'open' + }).append(smCopy.content.cloneNode(true)); + + this.copyContent = this.shadowRoot.querySelector('.copy-content'); + this.copyButton = this.shadowRoot.querySelector('.copy-button'); + + this.copy = this.copy.bind(this); + } + static get observedAttributes() { + return ['value']; + } + set value(val) { + this.setAttribute('value', val); + } + get value() { + return this.getAttribute('value'); + } + fireEvent() { + this.dispatchEvent( + new CustomEvent('copy', { + composed: true, + bubbles: true, + cancelable: true, + }) + ); + } + copy() { + navigator.clipboard.writeText(this.copyContent.textContent) + .then(res => this.fireEvent()) + .catch(err => console.error(err)); + } + connectedCallback() { + this.copyButton.addEventListener('click', this.copy); + } + attributeChangedCallback(name, oldValue, newValue) { + if (name === 'value') { + this.copyContent.textContent = newValue; + } + } + disconnectedCallback() { + this.copyButton.removeEventListener('click', this.copy); + } + }); +const spinner = document.createElement('template'); +spinner.innerHTML = ` + + + +`; +class SpinnerLoader extends HTMLElement { + constructor() { + super(); + this.attachShadow({ + mode: 'open' + }).append(spinner.content.cloneNode(true)); + } +} +window.customElements.define('sm-spinner', SpinnerLoader); + +//Color Grid +const colorGrid = document.createElement('template'); +colorGrid.innerHTML = ` + +
        +
        `; + +customElements.define('color-grid', + class extends HTMLElement { + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(colorGrid.content.cloneNode(true)) + + this.colorArray = [] + this.container = this.shadowRoot.querySelector('.color-tile-container') + this.handleChange = this.handleChange.bind(this) + this.setCheckMark = this.setCheckMark.bind(this) + } + + set colors(arr) { + this.colorArray = arr + this.renderTiles() + } + + set selectedColor(color) { + if (this.colorArray.includes(color) && this.container.querySelector(`[data-color="${color}"]`)) { + const selectedTile = this.container.querySelector(`[data-color="${color}"]`) + if (selectedTile) { + selectedTile.querySelector('input').checked = true + this.setCheckMark(selectedTile) + } + } + } + + randString(length) { + let result = ''; + let characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; + + for (let i = 0; i < length; i++) + result += characters.charAt(Math.floor(Math.random() * characters.length)); + return result; + } + + renderTiles() { + this.container.innerHTML = '' + const frag = document.createDocumentFragment() + const groupName = this.randString(6) + this.colorArray.forEach(color => { + const label = document.createElement('label') + label.classList.add('color-tile') + label.setAttribute('data-color', color) + if (color.includes('--')) + label.setAttribute('style', `background-color: var(${color})`) + else + label.setAttribute('style', `background-color: ${color}`) + label.innerHTML = ` + + ` + frag.append(label) + }) + this.container.append(frag) + } + setCheckMark(target) { + target.parentNode.querySelectorAll('.checkmark').forEach(checkmark => checkmark.remove()) + const checkMark = document.createElement('div') + checkMark.classList.add('checkmark') + checkMark.innerHTML = ` + + ` + target.append(checkMark) + } + + handleChange(e) { + const clickedTile = e.target.closest('.color-tile') + this.setCheckMark(clickedTile) + const clickedTileColor = clickedTile.dataset.color + const tileSelected = new CustomEvent('colorselected', { + bubbles: true, + composed: true, + detail: { + value: clickedTileColor, + } + }) + this.dispatchEvent(tileSelected) + } + + connectedCallback() { + this.container.addEventListener('change', this.handleChange) + } + + disconnectedCallback() { + this.container.removeEventListener('change', this.handleChange) + } + }) +const stripSelect = document.createElement('template'); +stripSelect.innerHTML = ` + +
        +
        + +
        + +
        + +
        +
        + +`; +customElements.define('strip-select', class extends HTMLElement { + constructor() { + super(); + this.attachShadow({ + mode: 'open' + }).append(stripSelect.content.cloneNode(true)); + this.stripSelect = this.shadowRoot.querySelector('.strip-select'); + this.slottedOptions = undefined; + this._value = undefined; + this.scrollDistance = 0; + + this.scrollLeft = this.scrollLeft.bind(this); + this.scrollRight = this.scrollRight.bind(this); + this.fireEvent = this.fireEvent.bind(this); + } + get value() { + return this._value; + } + scrollLeft() { + this.stripSelect.scrollBy({ + left: -this.scrollDistance, + behavior: 'smooth' + }); + } + + scrollRight() { + this.stripSelect.scrollBy({ + left: this.scrollDistance, + behavior: 'smooth' + }); + } + fireEvent() { + this.dispatchEvent( + new CustomEvent("change", { + bubbles: true, + composed: true, + detail: { + value: this._value + } + }) + ); + } + connectedCallback() { + this.setAttribute('role', 'listbox'); + + const slot = this.shadowRoot.querySelector('slot'); + const coverLeft = this.shadowRoot.querySelector('.cover--left'); + const coverRight = this.shadowRoot.querySelector('.cover--right'); + const navButtonLeft = this.shadowRoot.querySelector('.nav-button--left'); + const navButtonRight = this.shadowRoot.querySelector('.nav-button--right'); + slot.addEventListener('slotchange', e => { + const assignedElements = slot.assignedElements(); + assignedElements.forEach(elem => { + if (elem.hasAttribute('selected')) { + elem.setAttribute('active', ''); + this._value = elem.value; + } + }); + if (!this.hasAttribute('multiline')) { + if (assignedElements.length > 0) { + firstOptionObserver.observe(slot.assignedElements()[0]); + lastOptionObserver.observe(slot.assignedElements()[slot.assignedElements().length - 1]); + } + else { + navButtonLeft.classList.add('hide'); + navButtonRight.classList.add('hide'); + coverLeft.classList.add('hide'); + coverRight.classList.add('hide'); + firstOptionObserver.disconnect(); + lastOptionObserver.disconnect(); + } + } + }); + const resObs = new ResizeObserver(entries => { + entries.forEach(entry => { + if (entry.contentBoxSize) { + // Firefox implements `contentBoxSize` as a single content rect, rather than an array + const contentBoxSize = Array.isArray(entry.contentBoxSize) ? entry.contentBoxSize[0] : entry.contentBoxSize; + + this.scrollDistance = contentBoxSize.inlineSize * 0.6; + } else { + this.scrollDistance = entry.contentRect.width * 0.6; + } + }); + }); + resObs.observe(this); + this.stripSelect.addEventListener('option-clicked', e => { + if (this._value !== e.target.value) { + this._value = e.target.value; + slot.assignedElements().forEach(elem => elem.removeAttribute('active')); + e.target.setAttribute('active', ''); + e.target.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center" }); + this.fireEvent(); + } + }); + const firstOptionObserver = new IntersectionObserver(entries => { + entries.forEach(entry => { + if (entry.isIntersecting) { + navButtonLeft.classList.add('hide'); + coverLeft.classList.add('hide'); + } + else { + navButtonLeft.classList.remove('hide'); + coverLeft.classList.remove('hide'); + } + }); + }, + { + threshold: 0.9, + root: this + }); + const lastOptionObserver = new IntersectionObserver(entries => { + entries.forEach(entry => { + if (entry.isIntersecting) { + navButtonRight.classList.add('hide'); + coverRight.classList.add('hide'); + } + else { + navButtonRight.classList.remove('hide'); + coverRight.classList.remove('hide'); + } + }); + }, + { + threshold: 0.9, + root: this + }); + navButtonLeft.addEventListener('click', this.scrollLeft); + navButtonRight.addEventListener('click', this.scrollRight); + } + disconnectedCallback() { + navButtonLeft.removeEventListener('click', this.scrollLeft); + navButtonRight.removeEventListener('click', this.scrollRight); + } +}); + +//Strip option +const stripOption = document.createElement('template'); +stripOption.innerHTML = ` + + +`; +customElements.define('strip-option', class extends HTMLElement { + constructor() { + super(); + this.attachShadow({ + mode: 'open' + }).append(stripOption.content.cloneNode(true)); + this._value = undefined; + this.radioButton = this.shadowRoot.querySelector('input'); + + this.fireEvent = this.fireEvent.bind(this); + this.handleKeyDown = this.handleKeyDown.bind(this); + } + get value() { + return this._value; + } + fireEvent() { + this.dispatchEvent( + new CustomEvent("option-clicked", { + bubbles: true, + composed: true, + detail: { + value: this._value + } + }) + ); + } + handleKeyDown(e) { + if (e.key === 'Enter' || e.key === 'Space') { + this.fireEvent(); + } + } + connectedCallback() { + this.setAttribute('role', 'option'); + this.setAttribute('tabindex', '0'); + this._value = this.getAttribute('value'); + this.addEventListener('click', this.fireEvent); + this.addEventListener('keydown', this.handleKeyDown); + } + disconnectedCallback() { + this.removeEventListener('click', this.fireEvent); + this.removeEventListener('keydown', this.handleKeyDown); + } +}); +const smTextarea = document.createElement('template') +smTextarea.innerHTML = ` + + +`; +customElements.define('sm-textarea', + class extends HTMLElement { + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(smTextarea.content.cloneNode(true)) + + this.textarea = this.shadowRoot.querySelector('textarea') + this.textareaBox = this.shadowRoot.querySelector('.textarea') + this.placeholder = this.shadowRoot.querySelector('.placeholder') + this.reflectedAttributes = ['disabled', 'required', 'readonly', 'rows', 'minlength', 'maxlength'] + + this.reset = this.reset.bind(this) + this.focusIn = this.focusIn.bind(this) + this.fireEvent = this.fireEvent.bind(this) + this.checkInput = this.checkInput.bind(this) + } + static get observedAttributes() { + return ['disabled', 'value', 'placeholder', 'required', 'readonly', 'rows', 'minlength', 'maxlength'] + } + get value() { + return this.textarea.value + } + set value(val) { + this.setAttribute('value', val) + this.fireEvent() + } + get disabled() { + return this.hasAttribute('disabled') + } + set disabled(val) { + if (val) { + this.setAttribute('disabled', '') + } else { + this.removeAttribute('disabled') + } + } + get isValid() { + return this.textarea.checkValidity() + } + reset() { + this.setAttribute('value', '') + } + focusIn() { + this.textarea.focus() + } + fireEvent() { + let event = new Event('input', { + bubbles: true, + cancelable: true, + composed: true + }); + this.dispatchEvent(event); + } + checkInput() { + if (!this.hasAttribute('placeholder') || this.getAttribute('placeholder') === '') + return; + if (this.textarea.value !== '') { + if (this.hasAttribute('animate')) + this.textareaBox.classList.add('animate-placeholder') + else + this.placeholder.classList.add('hide') + + } else { + if (this.hasAttribute('animate')) + this.textareaBox.classList.remove('animate-placeholder') + else + this.placeholder.classList.remove('hide') + } + } + connectedCallback() { + this.textarea.addEventListener('input', e => { + this.textareaBox.dataset.value = this.textarea.value + this.checkInput() + }) + } + attributeChangedCallback(name, oldValue, newValue) { + if (this.reflectedAttributes.includes(name)) { + if (this.hasAttribute(name)) { + this.textarea.setAttribute(name, this.getAttribute(name) ? this.getAttribute(name) : '') + } + else { + this.textContent.removeAttribute(name) + } + } + else if (name === 'placeholder') { + this.placeholder.textContent = this.getAttribute('placeholder') + } + else if (name === 'value') { + this.textarea.value = newValue; + this.textareaBox.dataset.value = newValue + this.checkInput() + } + } + }) + +const smTabHeader = document.createElement('template') +smTabHeader.innerHTML = ` + +
        +
        + +
        +
        +
        +`; + +customElements.define('tab-header', class extends HTMLElement { + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(smTabHeader.content.cloneNode(true)) + + this.prevTab + this.allTabs + this.activeTab + + this.indicator = this.shadowRoot.querySelector('.indicator'); + this.tabSlot = this.shadowRoot.querySelector('slot'); + this.tabHeader = this.shadowRoot.querySelector('.tab-header'); + + this.changeTab = this.changeTab.bind(this) + this.handleClick = this.handleClick.bind(this) + this.handlePanelChange = this.handlePanelChange.bind(this) + this.moveIndiactor = this.moveIndiactor.bind(this) + } + + fireEvent(index) { + this.dispatchEvent( + new CustomEvent(`switchedtab${this.target}`, { + bubbles: true, + detail: { + index: parseInt(index) + } + }) + ) + } + + moveIndiactor(tabDimensions) { + this.indicator.setAttribute('style', `width: ${tabDimensions.width}px; transform: translateX(${tabDimensions.left - this.tabHeader.getBoundingClientRect().left + this.tabHeader.scrollLeft}px)`) + } + + + changeTab(target) { + if (target === this.prevTab || !target.closest('sm-tab')) + return + if (this.prevTab) + this.prevTab.classList.remove('active') + target.classList.add('active') + + this.tabHeader.scrollTo({ + behavior: 'smooth', + left: target.getBoundingClientRect().left - this.tabHeader.getBoundingClientRect().left + this.tabHeader.scrollLeft + }) + this.moveIndiactor(target.getBoundingClientRect()) + this.prevTab = target; + this.activeTab = target; + } + handleClick(e) { + if (e.target.closest('sm-tab')) { + this.changeTab(e.target) + this.fireEvent(e.target.dataset.index) + } + } + + handlePanelChange(e) { + this.changeTab(this.allTabs[e.detail.index]) + } + + connectedCallback() { + if (!this.hasAttribute('target') || this.getAttribute('target').value === '') return; + this.target = this.getAttribute('target') + + this.tabSlot.addEventListener('slotchange', () => { + this.allTabs = this.tabSlot.assignedElements(); + this.allTabs.forEach((tab, index) => { + tab.dataset.index = index + }) + }) + + this.addEventListener('click', this.handleClick) + document.addEventListener(`switchedpanel${this.target}`, this.handlePanelChange) + + let resizeObserver = new ResizeObserver(entries => { + entries.forEach((entry) => { + if (this.prevTab) { + let tabDimensions = this.activeTab.getBoundingClientRect(); + this.moveIndiactor(tabDimensions) + } + }) + }) + resizeObserver.observe(this) + let observer = new IntersectionObserver((entries) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + this.indicator.style.transition = 'none' + if (this.activeTab) { + let tabDimensions = this.activeTab.getBoundingClientRect(); + this.moveIndiactor(tabDimensions) + } else { + this.allTabs[0].classList.add('active') + let tabDimensions = this.allTabs[0].getBoundingClientRect(); + this.moveIndiactor(tabDimensions) + this.fireEvent(0) + this.prevTab = this.tabSlot.assignedElements()[0]; + this.activeTab = this.prevTab; + } + } + }) + }, { + threshold: 1.0 + }) + observer.observe(this) + } + disconnectedCallback() { + this.removeEventListener('click', this.handleClick) + document.removeEventListener(`switchedpanel${this.target}`, this.handlePanelChange) + } +}) + +// tab +const smTab = document.createElement('template') +smTab.innerHTML = ` + +
        + +
        +`; + +customElements.define('sm-tab', class extends HTMLElement { + constructor() { + super() + this.shadow = this.attachShadow({ + mode: 'open' + }).append(smTab.content.cloneNode(true)) + } +}) + +// tab-panels + +const smTabPanels = document.createElement('template') +smTabPanels.innerHTML = ` + +
        + Nothing to see here. +
        +`; + +customElements.define('tab-panels', class extends HTMLElement { + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(smTabPanels.content.cloneNode(true)) + + this.isTransitioning = false + + this.panelContainer = this.shadowRoot.querySelector('.panel-container'); + this.handleTabChange = this.handleTabChange.bind(this) + } + handleTabChange(e) { + this.isTransitioning = true + this.panelContainer.scrollTo({ + left: this.allPanels[e.detail.index].getBoundingClientRect().left - this.panelContainer.getBoundingClientRect().left + this.panelContainer.scrollLeft, + behavior: 'smooth' + }) + setTimeout(() => { + this.isTransitioning = false + }, 300); + } + fireEvent(index) { + this.dispatchEvent( + new CustomEvent(`switchedpanel${this.id}`, { + bubbles: true, + detail: { + index: parseInt(index) + } + }) + ) + } + connectedCallback() { + const slot = this.shadowRoot.querySelector('slot'); + slot.addEventListener('slotchange', (e) => { + this.allPanels = e.target.assignedElements() + this.allPanels.forEach((panel, index) => { + panel.dataset.index = index + intersectionObserver.observe(panel) + }) + }) + document.addEventListener(`switchedtab${this.id}`, this.handleTabChange) + + const intersectionObserver = new IntersectionObserver(entries => { + + entries.forEach(entry => { + if (!this.isTransitioning && entry.isIntersecting) { + this.fireEvent(entry.target.dataset.index) + } + }) + }, { + threshold: 0.6 + }) + } + disconnectedCallback() { + intersectionObserver.disconnect() + document.removeEventListener(`switchedtab${this.id}`, this.handleTabChange) + } +}) \ No newline at end of file diff --git a/fn_pay.js b/scripts/fn_pay.js similarity index 81% rename from fn_pay.js rename to scripts/fn_pay.js index e778494..c9f7c9c 100644 --- a/fn_pay.js +++ b/scripts/fn_pay.js @@ -1,3 +1,4 @@ +/*jshint esversion: 6 */ const TYPE_MONEY_REQUEST = "MoneyRequests", TYPE_CASHIER_REQUEST = "CashierRequests", TYPE_CASHIER_UPI = "CashierUPI"; @@ -8,7 +9,7 @@ const cashierUPI = {}; const User = {}; const cashierStatus = {}; -User.init = function() { +User.init = function () { return new Promise((resolve, reject) => { let promises; //Request cashier for token-cash exchange @@ -44,7 +45,7 @@ User.init = function() { }) } -User.getCashierUPI = function() { +User.getCashierUPI = function () { return new Promise((resolve) => { Promise.allSettled(floGlobals.subAdmins.map(cashierID => floCloudAPI.requestApplicationData(TYPE_CASHIER_UPI, { senderID: cashierID, @@ -59,7 +60,7 @@ User.getCashierUPI = function() { } Object.defineProperty(User, 'cashierRequests', { - get: function() { + get: function () { let fk = floCloudAPI.util.filterKey(TYPE_CASHIER_REQUEST, { senderID: myFloID, group: "Cashiers", @@ -69,7 +70,7 @@ Object.defineProperty(User, 'cashierRequests', { }); Object.defineProperty(User, 'moneyRequests', { - get: function() { + get: function () { let fk = floCloudAPI.util.filterKey(TYPE_MONEY_REQUEST, { receiverID: myFloID, }); @@ -77,7 +78,7 @@ Object.defineProperty(User, 'moneyRequests', { } }); -User.findCashier = function() { +User.findCashier = function () { let online = []; for (let c in cashierStatus) if (cashierStatus[c] && cashierUPI[c]) @@ -88,38 +89,38 @@ User.findCashier = function() { return online[floCrypto.randInt(0, online.length)]; } -User.cashToToken = function(cashier, amount, upiTxID) { +User.cashToToken = function (cashier, amount, upiTxID) { return new Promise((resolve, reject) => { if (!floGlobals.subAdmins.includes(cashier)) return reject("Invalid cashier"); floCloudAPI.sendGeneralData({ - mode: "cash-to-token", - amount: amount, - upi_txid: upiTxID - }, TYPE_CASHIER_REQUEST, { - receiverID: cashier - }).then(result => resolve(result)) + mode: "cash-to-token", + amount: amount, + upi_txid: upiTxID + }, TYPE_CASHIER_REQUEST, { + receiverID: cashier + }).then(result => resolve(result)) .catch(error => reject(error)) }) } -User.tokenToCash = function(cashier, amount, blkTxID, upiID) { +User.tokenToCash = function (cashier, amount, blkTxID, upiID) { return new Promise((resolve, reject) => { if (!floGlobals.subAdmins.includes(cashier)) return reject("Invalid cashier"); floCloudAPI.sendGeneralData({ - mode: "token-to-cash", - amount: amount, - token_txid: blkTxID, - upi_id: upiID - }, TYPE_CASHIER_REQUEST, { - receiverID: cashier - }).then(result => resolve(result)) + mode: "token-to-cash", + amount: amount, + token_txid: blkTxID, + upi_id: upiID + }, TYPE_CASHIER_REQUEST, { + receiverID: cashier + }).then(result => resolve(result)) .catch(error => reject(error)) }) } -User.sendToken = function(receiverID, amount, remark = '') { +User.sendToken = function (receiverID, amount, remark = '') { return new Promise((resolve, reject) => { tokenAPI.sendToken(myPrivKey, amount, receiverID, remark) .then(result => resolve(result)) @@ -127,30 +128,30 @@ User.sendToken = function(receiverID, amount, remark = '') { }) } -User.requestToken = function(floID, amount, remark = '') { +User.requestToken = function (floID, amount, remark = '') { return new Promise((resolve, reject) => { floCloudAPI.sendGeneralData({ - amount: amount, - remark: remark - }, TYPE_MONEY_REQUEST, { - receiverID: floID - }).then(result => resolve(result)) + amount: amount, + remark: remark + }, TYPE_MONEY_REQUEST, { + receiverID: floID + }).then(result => resolve(result)) .catch(error => reject(error)) }) } -User.decideRequest = function(request, note) { +User.decideRequest = function (request, note) { return new Promise((resolve, reject) => { floCloudAPI.noteApplicationData(request.vectorClock, note, { - receiverID: myFloID - }).then(result => resolve(result)) + receiverID: myFloID + }).then(result => resolve(result)) .catch(error => reject(error)) }) } const Cashier = {}; -Cashier.init = function() { +Cashier.init = function () { return new Promise((resolve, reject) => { let promises = []; //Requests from user to cashier(self) for token-cash exchange @@ -171,18 +172,18 @@ Cashier.init = function() { }) } -Cashier.updateUPI = function(upi_id) { +Cashier.updateUPI = function (upi_id) { return new Promise((resolve, reject) => { floCloudAPI.sendApplicationData({ - upi: upi_id - }, TYPE_CASHIER_UPI) + upi: upi_id + }, TYPE_CASHIER_UPI) .then(result => resolve(result)) .catch(error => reject(error)) }) } Object.defineProperty(Cashier, 'Requests', { - get: function() { + get: function () { let fk = floCloudAPI.util.filterKey(TYPE_CASHIER_REQUEST, { receiverID: myFloID }); @@ -191,29 +192,29 @@ Object.defineProperty(Cashier, 'Requests', { } }); -Cashier.finishRequest = function(request, txid) { +Cashier.finishRequest = function (request, txid) { return new Promise((resolve, reject) => { floCloudAPI.tagApplicationData(request.vectorClock, 'COMPLETED', { receiverID: myFloID }).then(result => { floCloudAPI.noteApplicationData(request.vectorClock, txid, { - receiverID: myFloID - }).then(result => resolve(result)) + receiverID: myFloID + }).then(result => resolve(result)) .catch(error => reject(error)) }).catch(error => reject(error)) }) } -Cashier.rejectRequest = function(request, reason) { +Cashier.rejectRequest = function (request, reason) { return new Promise((resolve, reject) => { floCloudAPI.noteApplicationData(request.vectorClock, "REJECTED:" + reason, { - receiverID: myFloID - }).then(result => resolve(result)) + receiverID: myFloID + }).then(result => resolve(result)) .catch(error => reject(error)) }) } -Cashier.checkIfUpiTxIsValid = function(upiTxID) { +Cashier.checkIfUpiTxIsValid = function (upiTxID) { return new Promise((resolve, reject) => { let requests = Cashier.Requests; for (let r in requests) @@ -224,7 +225,7 @@ Cashier.checkIfUpiTxIsValid = function(upiTxID) { }) } -Cashier.checkIfTokenTxIsValid = function(tokenTxID, sender, amount) { +Cashier.checkIfTokenTxIsValid = function (tokenTxID, sender, amount) { return new Promise((resolve, reject) => { let requests = Cashier.Requests; for (let r in requests) diff --git a/scripts/fn_ui.js b/scripts/fn_ui.js new file mode 100644 index 0000000..0e4e671 --- /dev/null +++ b/scripts/fn_ui.js @@ -0,0 +1,296 @@ +/*jshint esversion: 6 */ +const userUI = {}; + +userUI.requestTokenFromCashier = function () { + let cashier = User.findCashier(); + if (!cashier) + return alert("No cashier online"); + let amount = parseFloat(getRef('request_cashier_amount').value.trim()); + //get UPI txid from user + let upiTxID = prompt(`Send Rs. ${amount} to ${cashierUPI[cashier]} and enter UPI txid`); + if (!upiTxID) + return alert("Cancelled"); + User.cashToToken(cashier, amount, upiTxID).then(result => { + console.log(result); + alert("Requested cashier. please wait!"); + }).catch(error => console.error(error)) +} + +userUI.withdrawCashFromCashier = function () { + let cashier = User.findCashier(); + if (!cashier) + return alert("No cashier online"); + let amount = parseFloat(getRef('request_cashier_amount').value.trim()); + //get confirmation from user + let upiID = prompt(`${amount} ${floGlobals.currency}# will be sent to ${cashier}. Enter UPI ID`); + if (!upiID) + return alert("Cancelled"); + User.sendToken(cashier, amount, 'for token-to-cash').then(txid => { + console.warn(`Withdraw ${amount} from cashier ${cashier}`, txid); + User.tokenToCash(cashier, amount, txid, upiID).then(result => { + console.log(result); + alert("Requested cashier. please wait!"); + }).catch(error => console.error(error)) + }).catch(error => console.error(error)) +} + +userUI.sendMoneyToUser = function (floID, amount, remark) { + getConfirmation('Confirm', { message: `Do you want to SEND ${amount} to ${floID}?` }).then(confirmation => { + if (confirmation) { + User.sendToken(floID, amount, "|" + remark).then(txid => { + console.warn(`Sent ${amount} to ${floID}`, txid); + notify(`Sent ${amount} to ${floID}. It may take a few mins to reflect in their wallet`, 'success'); + hidePopup() + }).catch(error => console.error(error)); + } + }) +} + +userUI.requestMoneyFromUser = function (floID, amount, remark) { + getConfirmation('Confirm', { message: `Do you want to REQUEST ${amount} from ${floID}?` }).then(confirmation => { + if (confirmation) { + User.requestToken(floID, amount, remark).then(result => { + console.log(`Requested ${amount} from ${floID}`, result); + notify(`Requested ${amount} from ${floID}`, 'success'); + hidePopup() + }).catch(error => console.error(error)); + } + }) +} + +userUI.renderCashierRequests = function (requests, error = null) { + if (error) + return console.error(error); + else if (typeof requests !== "object" || requests === null) + return; + const frag = document.createDocumentFragment() + for (let r in requests) { + let oldCard = document.getElementById(r); + if (oldCard) oldCard.remove(); + frag.append(render.walletRequestCard(requests[r])) + } + getRef('user-cashier-requests').append(frag) +} + +userUI.renderMoneyRequests = function (requests, error = null) { + if (error) + return console.error(error); + else if (typeof requests !== "object" || requests === null) + return; + const frag = document.createDocumentFragment() + for (let r in requests) { + let oldCard = document.getElementById(r); + if (oldCard) oldCard.remove(); + frag.append(render.paymentRequestCard(requests[r])) + } + getRef('user-money-requests').append(frag) +} + +userUI.payRequest = function (reqID) { + let request = User.moneyRequests[reqID]; + getConfirmation('Pay?', { message: `Do you want to pay ${request.message.amount} to ${request.senderID}?` }).then(confirmation => { + if (confirmation) { + User.sendToken(request.senderID, request.message.amount, "|" + request.message.remark).then(txid => { + console.warn(`Sent ${request.message.amount} to ${request.senderID}`, txid); + notify(`Sent ${request.message.amount} to ${request.senderID}. It may take a few mins to reflect in their wallet`, 'success'); + User.decideRequest(request, 'PAID: ' + txid) + .then(result => console.log(result)) + .catch(error => console.error(error)) + }).catch(error => console.error(error)); + } + }) +} + +userUI.declineRequest = function (reqID) { + let request = User.moneyRequests[reqID]; + getConfirmation('Decline payment?').then(confirmation => { + if (confirmation) { + User.decideRequest(request, "DECLINED").then(result => { + console.log(result); + notify("Request declined", 'success'); + }).catch(error => console.error(error)) + } + }) +} + +//Cashier +const cashierUI = {}; + +cashierUI.renderRequests = function (requests, error = null) { + if (error) + return console.error(error); + else if (typeof requests !== "object" || requests === null) + return; + const frag = document.createDocumentFragment(); + for (let r in requests) { + const oldCard = document.getElementById(r); + if (oldCard) oldCard.remove(); + frag.append(render.cashierRequestCard(requests[r])); + } + getRef('cashier_request_list').append(frag) +} + +cashierUI.completeRequest = function (reqID) { + let request = Cashier.Requests[reqID]; + if (request.message.mode === "cash-to-token") + completeCashToTokenRequest(request); + else if (request.message.mode === "token-to-cash") + completeTokenToCashRequest(request); +} + +function completeCashToTokenRequest(request) { + Cashier.checkIfUpiTxIsValid(request.message.upi_txid).then(_ => { + let confirmation = confirm(`Check if you have received UPI transfer\ntxid:${request.message.upi_txid}\namount:${request.message.amount}`); + if (!confirmation) + return alert("Cancelled"); + User.sendToken(request.senderID, request.message.amount, 'for cash-to-token').then(txid => { + console.warn(`${request.message.amount} cash-to-token for ${request.senderID}`, txid); + Cashier.finishRequest(request, txid).then(result => { + console.log(result); + console.info('Completed cash-to-token request:', request.vectorClock); + alert("Completed request"); + }).catch(error => console.error(error)) + }).catch(error => console.error(error)) + }).catch(error => { + console.error(error); + alert(error); + if (Array.isArray(error) && error[0] === true && typeof error[1] === 'string') + Cashier.rejectRequest(request, error[1]).then(result => { + console.log(result); + console.info('Rejected cash-to-token request:', request.vectorClock); + }).catch(error => console.error(error)) + }) +} + +function completeTokenToCashRequest(request) { + Cashier.checkIfTokenTxIsValid(request.message.token_txid, request.senderID, request.message.amount).then(result => { + let upiTxID = prompt(`Token transfer is verified!\n Send ${request.message.amount} to ${request.message.upi_id} and Enter UPI txid`); + if (!upiTxID) + return alert("Cancelled"); + Cashier.finishRequest(request, upiTxID).then(result => { + console.log(result); + console.info('Completed token-to-cash request:', request.vectorClock); + alert("Completed request"); + }).catch(error => console.error(error)) + }).catch(error => { + console.error(error); + alert(error); + if (Array.isArray(error) && error[0] === true && typeof error[1] === 'string') + Cashier.rejectRequest(request, error[1]).then(result => { + console.log(result); + console.info('Rejected token-to-cash request:', request.vectorClock); + }).catch(error => console.error(error)) + }) +} + +function renderAllTokenTransactions() { + tokenAPI.getAllTxs(myFloID).then(result => { + getRef('token_transactions').innerHTML = '' + const frag = document.createDocumentFragment(); + for (let txid in result.transactions) { + frag.append(render.transactionCard(txid, tokenAPI.util.parseTxData(result.transactions[txid]))) + } + getRef('token_transactions').append(frag) + }).catch(error => console.error(error)) +} + +const render = { + transactionCard(txid, transactionDetails) { + const { time, sender, receiver, tokenAmount } = transactionDetails + const clone = getRef('transaction_template').content.cloneNode(true).firstElementChild; + clone.dataset.txid = txid + clone.querySelector('.transaction__time').textContent = getFormattedTime(time * 1000) + clone.querySelector('.transaction__amount').textContent = tokenAmount + if (sender === myFloID) { + clone.querySelector('.transaction__amount').classList.add('sent') + clone.querySelector('.transaction__receiver').textContent = `Sent to ${receiver || 'Myself'}` + clone.querySelector('.transaction__icon').innerHTML = `` + } else if (receiver === myFloID) { + clone.querySelector('.transaction__amount').classList.add('received') + clone.querySelector('.transaction__receiver').textContent = `Received from ${sender}` + clone.querySelector('.transaction__icon').innerHTML = `` + } else { //This should not happen unless API returns transaction that does not involve myFloID + row.insertCell().textContent = tx.sender; + row.insertCell().textContent = tx.receiver; + } + return clone + }, + cashierRequestCard(details) { + const { time, senderID, message: { mode }, note, tag, vectorClock } = details; + const clone = getRef('cashier_request_template').content.cloneNode(true).firstElementChild; + clone.id = vectorClock + const status = tag || note; //status tag for completed, note for rejected + clone.querySelector('.cashier-request__requestor').textContent = senderID + clone.querySelector('.cashier-request__time').textContent = getFormattedTime(time) + clone.querySelector('.cashier-request__mode').textContent = mode + if (status) + clone.querySelector('.cashier-request__status').textContent = status + else + clone.querySelector('.cashier-request__status').innerHTML = `` + return clone + }, + walletRequestCard(details) { + const { time, receiverID, message: { mode }, note, tag, vectorClock } = details; + const clone = getRef('wallet_request_template').content.cloneNode(true).firstElementChild; + clone.id = vectorClock + clone.querySelector('.wallet-request__requestor').textContent = receiverID + clone.querySelector('.wallet-request__time').textContent = getFormattedTime(time) + clone.querySelector('.wallet-request__mode').textContent = mode === 'cash-to-token' ? 'Deposit' : 'Withdraw' + let status = tag ? (tag + ":" + note) : (note || "PENDING"); + clone.querySelector('.wallet-request__status').textContent = status + return clone + }, + paymentRequestCard(details) { + const { time, senderID, message: { amount, remark }, note, vectorClock } = details; + const clone = getRef('payment_request_template').content.cloneNode(true).firstElementChild; + clone.id = vectorClock + clone.querySelector('.payment-request__requestor').textContent = senderID + clone.querySelector('.payment-request__time').textContent = getFormattedTime(time) + clone.querySelector('.payment-request__amount').textContent = amount.toLocaleString(`en-IN`, { style: 'currency', currency: 'INR' }) + clone.querySelector('.payment-request__remark').textContent = remark + + let status = note; + if (status) + clone.querySelector('.payment-request__actions').textContent = note; + else + clone.querySelector('.payment-request__actions').innerHTML = + ` + `; + + return clone + }, +} + +let currentUserAction +function showTokenTransfer(type) { + getRef('tt_button').textContent = type; + currentUserAction = type + if (type === 'send') { + getRef('token_transfer__title').textContent = 'Send money to FLO ID'; + } else { + getRef('token_transfer__title').textContent = 'Request money from FLO ID'; + } + showPopup('token_transfer_popup') +} + +function executeUserAction() { + const floID = getRef('tt_flo_id').value.trim(), + amount = parseFloat(getRef('tt_amount').value), + remark = getRef('tt_remark').value.trim(); + if (currentUserAction === 'send') { + userUI.sendMoneyToUser(floID, amount, remark) + + } else { + userUI.requestMoneyFromUser(floID, amount, remark) + } +} + +function signOut() { + getConfirmation('Sign out?', 'You are about to sign out of the app, continue?', 'Stay', 'Leave') + .then(async (res) => { + if (res) { + await floDapps.clearCredentials() + location.reload() + } + }) +} \ No newline at end of file diff --git a/qrcode-scanner.min.js b/scripts/qrcode-scanner.min.js similarity index 99% rename from qrcode-scanner.min.js rename to scripts/qrcode-scanner.min.js index 898fb1a..b275c07 100644 --- a/qrcode-scanner.min.js +++ b/scripts/qrcode-scanner.min.js @@ -1,7 +1,7 @@ -function getLazarSoftScanner(){var e={};function t(e,t){this.count=e,this.dataCodewords=t,this.__defineGetter__("Count",function(){return this.count}),this.__defineGetter__("DataCodewords",function(){return this.dataCodewords})}function n(e,t,n){this.ecCodewordsPerBlock=e,this.ecBlocks=n?new Array(t,n):new Array(t),this.__defineGetter__("ECCodewordsPerBlock",function(){return this.ecCodewordsPerBlock}),this.__defineGetter__("TotalECCodewords",function(){return this.ecCodewordsPerBlock*this.NumBlocks}),this.__defineGetter__("NumBlocks",function(){for(var e=0,t=0;t6&&(t.setRegion(e-11,0,3,6),t.setRegion(0,e-11,6,3)),t},this.getECBlocksForLevel=function(e){return this.ecBlocks[e.ordinal()]}}function i(e,t,n,r,a,o,s,h,w){this.a11=e,this.a12=r,this.a13=s,this.a21=t,this.a22=a,this.a23=h,this.a31=n,this.a32=o,this.a33=w,this.transformPoints1=function(e){for(var t=e.length,n=this.a11,r=this.a12,i=this.a13,a=this.a21,o=this.a22,s=this.a23,h=this.a31,w=this.a32,f=this.a33,u=0;uMath.abs(n-e);if(i){var a=e;e=t,t=a,a=n,n=r,r=a}for(var o=Math.abs(n-e),s=Math.abs(r-t),h=-o>>1,w=t0){if(l==r)break;l+=w,h-=o}}var b=n-e,y=r-t;return Math.sqrt(b*b+y*y)},this.sizeOfBlackWhiteBlackRunBothWays=function(e,t,n,r){var i=this.sizeOfBlackWhiteBlackRun(e,t,n,r),a=1,o=e-(n-e);o<0?(a=e/(e-o),o=0):o>=A.width&&(a=(A.width-1-e)/(o-e),o=A.width-1);var s=Math.floor(t-(r-t)*a);return a=1,s<0?(a=t/(t-s),s=0):s>=A.height&&(a=(A.height-1-t)/(s-t),s=A.height-1),o=Math.floor(e+(o-e)*a),(i+=this.sizeOfBlackWhiteBlackRun(e,t,o,s))-1},this.calculateModuleSizeOneWay=function(e,t){var n=this.sizeOfBlackWhiteBlackRunBothWays(Math.floor(e.X),Math.floor(e.Y),Math.floor(t.X),Math.floor(t.Y)),r=this.sizeOfBlackWhiteBlackRunBothWays(Math.floor(t.X),Math.floor(t.Y),Math.floor(e.X),Math.floor(e.Y));return isNaN(n)?r/7:isNaN(r)?n/7:(n+r)/14},this.calculateModuleSize=function(e,t,n){return(this.calculateModuleSizeOneWay(e,t)+this.calculateModuleSizeOneWay(e,n))/2},this.distance=function(e,t){var n=e.X-t.X,r=e.Y-t.Y;return Math.sqrt(n*n+r*r)},this.computeDimension=function(e,t,n,r){var i=7+(Math.round(this.distance(e,t)/r)+Math.round(this.distance(e,n)/r)>>1);switch(3&i){case 0:i++;break;case 2:i--;break;case 3:throw"Error"}return i},this.findAlignmentInRegion=function(e,t,n,r){var i=Math.floor(r*e),a=Math.max(0,t-i),o=Math.min(A.width-1,t+i);if(o-a<3*e)throw"Error";var s=Math.max(0,n-i),h=Math.min(A.height-1,n+i);return new F(this.image,a,s,o-a,h-s,e,this.resultPointCallback).find()},this.createTransform=function(e,t,n,r,a){var o,s,h,w,f=a-3.5;return null!=r?(o=r.X,s=r.Y,h=w=f-3):(o=t.X-e.X+n.X,s=t.Y-e.Y+n.Y,h=w=f),i.quadrilateralToQuadrilateral(3.5,3.5,f,3.5,h,w,3.5,f,e.X,e.Y,t.X,t.Y,o,s,n.X,n.Y)},this.sampleGrid=function(t,n,r){return e.sampleGrid3(t,r,n)},this.processFinderPatternInfo=function(e){var t=e.TopLeft,n=e.TopRight,i=e.BottomLeft,o=this.calculateModuleSize(t,n,i);if(o<1)throw"Error";var s=this.computeDimension(t,n,i,o),h=r.getProvisionalVersionForDimension(s),w=h.DimensionForVersion-7,f=null;if(h.AlignmentPatternCenters.length>0)for(var u=n.X-t.X+i.X,d=n.Y-t.Y+i.Y,l=1-3/w,c=Math.floor(t.X+l*(u-t.X)),g=Math.floor(t.Y+l*(d-t.Y)),v=4;v<=16;v<<=1){f=this.findAlignmentInRegion(o,c,g,v);break}var m=this.createTransform(t,n,i,f,s);return new a(this.sampleGrid(this.image,m,s),null==f?new Array(i,t,n):new Array(i,t,n,f))},this.detect=function(){var e=(new D).findFinderPattern(this.image);return this.processFinderPatternInfo(e)}}e.checkAndNudgePoints=function(e,t){for(var n=A.width,r=A.height,i=!0,a=0;an||s<-1||s>r)throw"Error.checkAndNudgePoints ";i=!1,-1==o?(t[a]=0,i=!0):o==n&&(t[a]=n-1,i=!0),-1==s?(t[a+1]=0,i=!0):s==r&&(t[a+1]=r-1,i=!0)}i=!0;for(a=t.length-2;a>=0&&i;a-=2){o=Math.floor(t[a]),s=Math.floor(t[a+1]);if(o<-1||o>n||s<-1||s>r)throw"Error.checkAndNudgePoints ";i=!1,-1==o?(t[a]=0,i=!0):o==n&&(t[a]=n-1,i=!0),-1==s?(t[a+1]=0,i=!0):s==r&&(t[a+1]=r-1,i=!0)}},e.sampleGrid3=function(t,n,r){for(var i=new v(n),a=new Array(n<<1),o=0;o>1),a[w+1]=h;r.transformPoints1(a),e.checkAndNudgePoints(t,a);try{for(w=0;w>1,o)}}catch(e){throw"Error.checkAndNudgePoints"}}return i},e.sampleGridx=function(t,n,r,a,o,s,h,w,f,u,d,l,c,g,v,m,b,y){var C=i.quadrilateralToQuadrilateral(r,a,o,s,h,w,f,u,d,l,c,g,v,m,b,y);return e.sampleGrid3(t,n,C)},r.VERSION_DECODE_INFO=new Array(31892,34236,39577,42195,48118,51042,55367,58893,63784,68472,70749,76311,79154,84390,87683,92361,96236,102084,102881,110507,110734,117786,119615,126325,127568,133589,136944,141498,145311,150283,152622,158308,161089,167017),r.VERSIONS=new Array(new r(1,new Array,new n(7,new t(1,19)),new n(10,new t(1,16)),new n(13,new t(1,13)),new n(17,new t(1,9))),new r(2,new Array(6,18),new n(10,new t(1,34)),new n(16,new t(1,28)),new n(22,new t(1,22)),new n(28,new t(1,16))),new r(3,new Array(6,22),new n(15,new t(1,55)),new n(26,new t(1,44)),new n(18,new t(2,17)),new n(22,new t(2,13))),new r(4,new Array(6,26),new n(20,new t(1,80)),new n(18,new t(2,32)),new n(26,new t(2,24)),new n(16,new t(4,9))),new r(5,new Array(6,30),new n(26,new t(1,108)),new n(24,new t(2,43)),new n(18,new t(2,15),new t(2,16)),new n(22,new t(2,11),new t(2,12))),new r(6,new Array(6,34),new n(18,new t(2,68)),new n(16,new t(4,27)),new n(24,new t(4,19)),new n(28,new t(4,15))),new r(7,new Array(6,22,38),new n(20,new t(2,78)),new n(18,new t(4,31)),new n(18,new t(2,14),new t(4,15)),new n(26,new t(4,13),new t(1,14))),new r(8,new Array(6,24,42),new n(24,new t(2,97)),new n(22,new t(2,38),new t(2,39)),new n(22,new t(4,18),new t(2,19)),new n(26,new t(4,14),new t(2,15))),new r(9,new Array(6,26,46),new n(30,new t(2,116)),new n(22,new t(3,36),new t(2,37)),new n(20,new t(4,16),new t(4,17)),new n(24,new t(4,12),new t(4,13))),new r(10,new Array(6,28,50),new n(18,new t(2,68),new t(2,69)),new n(26,new t(4,43),new t(1,44)),new n(24,new t(6,19),new t(2,20)),new n(28,new t(6,15),new t(2,16))),new r(11,new Array(6,30,54),new n(20,new t(4,81)),new n(30,new t(1,50),new t(4,51)),new n(28,new t(4,22),new t(4,23)),new n(24,new t(3,12),new t(8,13))),new r(12,new Array(6,32,58),new n(24,new t(2,92),new t(2,93)),new n(22,new t(6,36),new t(2,37)),new n(26,new t(4,20),new t(6,21)),new n(28,new t(7,14),new t(4,15))),new r(13,new Array(6,34,62),new n(26,new t(4,107)),new n(22,new t(8,37),new t(1,38)),new n(24,new t(8,20),new t(4,21)),new n(22,new t(12,11),new t(4,12))),new r(14,new Array(6,26,46,66),new n(30,new t(3,115),new t(1,116)),new n(24,new t(4,40),new t(5,41)),new n(20,new t(11,16),new t(5,17)),new n(24,new t(11,12),new t(5,13))),new r(15,new Array(6,26,48,70),new n(22,new t(5,87),new t(1,88)),new n(24,new t(5,41),new t(5,42)),new n(30,new t(5,24),new t(7,25)),new n(24,new t(11,12),new t(7,13))),new r(16,new Array(6,26,50,74),new n(24,new t(5,98),new t(1,99)),new n(28,new t(7,45),new t(3,46)),new n(24,new t(15,19),new t(2,20)),new n(30,new t(3,15),new t(13,16))),new r(17,new Array(6,30,54,78),new n(28,new t(1,107),new t(5,108)),new n(28,new t(10,46),new t(1,47)),new n(28,new t(1,22),new t(15,23)),new n(28,new t(2,14),new t(17,15))),new r(18,new Array(6,30,56,82),new n(30,new t(5,120),new t(1,121)),new n(26,new t(9,43),new t(4,44)),new n(28,new t(17,22),new t(1,23)),new n(28,new t(2,14),new t(19,15))),new r(19,new Array(6,30,58,86),new n(28,new t(3,113),new t(4,114)),new n(26,new t(3,44),new t(11,45)),new n(26,new t(17,21),new t(4,22)),new n(26,new t(9,13),new t(16,14))),new r(20,new Array(6,34,62,90),new n(28,new t(3,107),new t(5,108)),new n(26,new t(3,41),new t(13,42)),new n(30,new t(15,24),new t(5,25)),new n(28,new t(15,15),new t(10,16))),new r(21,new Array(6,28,50,72,94),new n(28,new t(4,116),new t(4,117)),new n(26,new t(17,42)),new n(28,new t(17,22),new t(6,23)),new n(30,new t(19,16),new t(6,17))),new r(22,new Array(6,26,50,74,98),new n(28,new t(2,111),new t(7,112)),new n(28,new t(17,46)),new n(30,new t(7,24),new t(16,25)),new n(24,new t(34,13))),new r(23,new Array(6,30,54,74,102),new n(30,new t(4,121),new t(5,122)),new n(28,new t(4,47),new t(14,48)),new n(30,new t(11,24),new t(14,25)),new n(30,new t(16,15),new t(14,16))),new r(24,new Array(6,28,54,80,106),new n(30,new t(6,117),new t(4,118)),new n(28,new t(6,45),new t(14,46)),new n(30,new t(11,24),new t(16,25)),new n(30,new t(30,16),new t(2,17))),new r(25,new Array(6,32,58,84,110),new n(26,new t(8,106),new t(4,107)),new n(28,new t(8,47),new t(13,48)),new n(30,new t(7,24),new t(22,25)),new n(30,new t(22,15),new t(13,16))),new r(26,new Array(6,30,58,86,114),new n(28,new t(10,114),new t(2,115)),new n(28,new t(19,46),new t(4,47)),new n(28,new t(28,22),new t(6,23)),new n(30,new t(33,16),new t(4,17))),new r(27,new Array(6,34,62,90,118),new n(30,new t(8,122),new t(4,123)),new n(28,new t(22,45),new t(3,46)),new n(30,new t(8,23),new t(26,24)),new n(30,new t(12,15),new t(28,16))),new r(28,new Array(6,26,50,74,98,122),new n(30,new t(3,117),new t(10,118)),new n(28,new t(3,45),new t(23,46)),new n(30,new t(4,24),new t(31,25)),new n(30,new t(11,15),new t(31,16))),new r(29,new Array(6,30,54,78,102,126),new n(30,new t(7,116),new t(7,117)),new n(28,new t(21,45),new t(7,46)),new n(30,new t(1,23),new t(37,24)),new n(30,new t(19,15),new t(26,16))),new r(30,new Array(6,26,52,78,104,130),new n(30,new t(5,115),new t(10,116)),new n(28,new t(19,47),new t(10,48)),new n(30,new t(15,24),new t(25,25)),new n(30,new t(23,15),new t(25,16))),new r(31,new Array(6,30,56,82,108,134),new n(30,new t(13,115),new t(3,116)),new n(28,new t(2,46),new t(29,47)),new n(30,new t(42,24),new t(1,25)),new n(30,new t(23,15),new t(28,16))),new r(32,new Array(6,34,60,86,112,138),new n(30,new t(17,115)),new n(28,new t(10,46),new t(23,47)),new n(30,new t(10,24),new t(35,25)),new n(30,new t(19,15),new t(35,16))),new r(33,new Array(6,30,58,86,114,142),new n(30,new t(17,115),new t(1,116)),new n(28,new t(14,46),new t(21,47)),new n(30,new t(29,24),new t(19,25)),new n(30,new t(11,15),new t(46,16))),new r(34,new Array(6,34,62,90,118,146),new n(30,new t(13,115),new t(6,116)),new n(28,new t(14,46),new t(23,47)),new n(30,new t(44,24),new t(7,25)),new n(30,new t(59,16),new t(1,17))),new r(35,new Array(6,30,54,78,102,126,150),new n(30,new t(12,121),new t(7,122)),new n(28,new t(12,47),new t(26,48)),new n(30,new t(39,24),new t(14,25)),new n(30,new t(22,15),new t(41,16))),new r(36,new Array(6,24,50,76,102,128,154),new n(30,new t(6,121),new t(14,122)),new n(28,new t(6,47),new t(34,48)),new n(30,new t(46,24),new t(10,25)),new n(30,new t(2,15),new t(64,16))),new r(37,new Array(6,28,54,80,106,132,158),new n(30,new t(17,122),new t(4,123)),new n(28,new t(29,46),new t(14,47)),new n(30,new t(49,24),new t(10,25)),new n(30,new t(24,15),new t(46,16))),new r(38,new Array(6,32,58,84,110,136,162),new n(30,new t(4,122),new t(18,123)),new n(28,new t(13,46),new t(32,47)),new n(30,new t(48,24),new t(14,25)),new n(30,new t(42,15),new t(32,16))),new r(39,new Array(6,26,54,82,110,138,166),new n(30,new t(20,117),new t(4,118)),new n(28,new t(40,47),new t(7,48)),new n(30,new t(43,24),new t(22,25)),new n(30,new t(10,15),new t(67,16))),new r(40,new Array(6,30,58,86,114,142,170),new n(30,new t(19,118),new t(6,119)),new n(28,new t(18,47),new t(31,48)),new n(30,new t(34,24),new t(34,25)),new n(30,new t(20,15),new t(61,16)))),r.getVersionForNumber=function(e){if(e<1||e>40)throw"ArgumentException";return r.VERSIONS[e-1]},r.getProvisionalVersionForDimension=function(e){if(e%4!=1)throw"Error getProvisionalVersionForDimension";try{return r.getVersionForNumber(e-17>>2)}catch(e){throw"Error getVersionForNumber"}},r.decodeVersionInformation=function(e){for(var t=4294967295,n=0,i=0;i>3&3),this.dataMask=7&e,this.__defineGetter__("ErrorCorrectionLevel",function(){return this.errorCorrectionLevel}),this.__defineGetter__("DataMask",function(){return this.dataMask}),this.GetHashCode=function(){return this.errorCorrectionLevel.ordinal()<<3|this.dataMask},this.Equals=function(e){var t=e;return this.errorCorrectionLevel==t.errorCorrectionLevel&&this.dataMask==t.dataMask}}function f(e,t,n){this.ordinal_Renamed_Field=e,this.bits=t,this.name=n,this.__defineGetter__("Bits",function(){return this.bits}),this.__defineGetter__("Name",function(){return this.name}),this.ordinal=function(){return this.ordinal_Renamed_Field}}w.numBitsDiffering=function(e,t){return h[15&(e^=t)]+h[15&M(e,4)]+h[15&M(e,8)]+h[15&M(e,12)]+h[15&M(e,16)]+h[15&M(e,20)]+h[15&M(e,24)]+h[15&M(e,28)]},w.decodeFormatInformation=function(e){var t=w.doDecodeFormatInformation(e);return null!=t?t:w.doDecodeFormatInformation(21522^e)},w.doDecodeFormatInformation=function(e){for(var t=4294967295,n=0,r=0;r=g.length)throw"ArgumentException";return g[e]};var u=new f(0,1,"L"),d=new f(1,0,"M"),l=new f(2,3,"Q"),c=new f(3,2,"H"),g=new Array(d,u,c,l);function v(e,t){if(t||(t=e),e<1||t<1)throw"Both dimensions must be greater than 0";this.width=e,this.height=t;var n=e>>5;0!=(31&e)&&n++,this.rowSize=n,this.bits=new Array(n*t);for(var r=0;r>5);return 0!=(1&M(this.bits[n],31&e))},this.set_Renamed=function(e,t){var n=t*this.rowSize+(e>>5);this.bits[n]|=1<<(31&e)},this.flip=function(e,t){var n=t*this.rowSize+(e>>5);this.bits[n]^=1<<(31&e)},this.clear=function(){for(var e=this.bits.length,t=0;tthis.height||i>this.width)throw"The region must fit inside the matrix";for(var o=t;o>5)]|=1<<(31&h)}}function m(e,t){this.numDataCodewords=e,this.codewords=t,this.__defineGetter__("NumDataCodewords",function(){return this.numDataCodewords}),this.__defineGetter__("Codewords",function(){return this.codewords})}function b(e){var t=e.Dimension;if(t<21||1!=(3&t))throw"Error BitMatrixParser";this.bitMatrix=e,this.parsedVersion=null,this.parsedFormatInfo=null,this.copyBit=function(e,t,n){return this.bitMatrix.get_Renamed(e,t)?n<<1|1:n<<1},this.readFormatInformation=function(){if(null!=this.parsedFormatInfo)return this.parsedFormatInfo;for(var e=0,t=0;t<6;t++)e=this.copyBit(t,8,e);e=this.copyBit(7,8,e),e=this.copyBit(8,8,e),e=this.copyBit(8,7,e);for(var n=5;n>=0;n--)e=this.copyBit(8,n,e);if(this.parsedFormatInfo=w.decodeFormatInformation(e),null!=this.parsedFormatInfo)return this.parsedFormatInfo;var r=this.bitMatrix.Dimension;e=0;var i=r-8;for(t=r-1;t>=i;t--)e=this.copyBit(t,8,e);for(n=r-7;n>2;if(t<=6)return r.getVersionForNumber(t);for(var n=0,i=e-11,a=5;a>=0;a--)for(var o=e-9;o>=i;o--)n=this.copyBit(o,a,n);if(this.parsedVersion=r.decodeVersionInformation(n),null!=this.parsedVersion&&this.parsedVersion.DimensionForVersion==e)return this.parsedVersion;n=0;for(o=5;o>=0;o--)for(a=e-9;a>=i;a--)n=this.copyBit(o,a,n);if(this.parsedVersion=r.decodeVersionInformation(n),null!=this.parsedVersion&&this.parsedVersion.DimensionForVersion==e)return this.parsedVersion;throw"Error readVersion"},this.readCodewords=function(){var e=this.readFormatInformation(),t=this.readVersion(),n=y.forReference(e.DataMask),r=this.bitMatrix.Dimension;n.unmaskBitMatrix(this.bitMatrix,r);for(var i=t.buildFunctionPattern(),a=!0,o=new Array(t.TotalCodewords),s=0,h=0,w=0,f=r-1;f>0;f-=2){6==f&&f--;for(var u=0;u=0;){if(s[c].codewords.length==l)break;c--}c++;var g=l-r.ECCodewordsPerBlock,v=0;for(o=0;o1&&0==t[0]){for(var r=1;rr.length){var i=n;n=r,r=i}for(var a=new Array(r.length),o=r.length-n.length,s=0;s=e.Degree&&!n.Zero;){var a=n.Degree-e.Degree,o=this.field.multiply(n.getCoefficient(n.Degree),i),s=e.multiplyByMonomial(a,o),h=this.field.buildMonomial(a,o);t=t.addOrSubtract(h),n=n.addOrSubtract(s)}return new Array(t,n)}}function _(e){this.expTable=new Array(256),this.logTable=new Array(256);for(var t=1,n=0;n<256;n++)this.expTable[n]=t,(t<<=1)>=256&&(t^=e);for(n=0;n<255;n++)this.logTable[this.expTable[n]]=n;var r=new Array(1);r[0]=0,this.zero=new C(this,new Array(r));var i=new Array(1);i[0]=1,this.one=new C(this,new Array(i)),this.__defineGetter__("Zero",function(){return this.zero}),this.__defineGetter__("One",function(){return this.one}),this.buildMonomial=function(e,t){if(e<0)throw"System.ArgumentException";if(0==t)return this.zero;for(var n=new Array(e+1),r=0;r7)throw"System.ArgumentException";return y.DATA_MASKS[e]},y.DATA_MASKS=new Array(new function(){this.unmaskBitMatrix=function(e,t){for(var n=0;n=Math.floor(n/2);){var f=i,u=o,d=h;if(o=s,h=w,(i=a).Zero)throw"r_{i-1} was zero";a=f;for(var l=this.field.Zero,c=i.getCoefficient(i.Degree),g=this.field.inverse(c);a.Degree>=i.Degree&&!a.Zero;){var v=a.Degree-i.Degree,m=this.field.multiply(a.getCoefficient(a.Degree),g);l=l.addOrSubtract(this.field.buildMonomial(v,m)),a=a.addOrSubtract(i.multiplyByMonomial(v,m))}s=l.multiply1(o).addOrSubtract(u),w=l.multiply1(h).addOrSubtract(d)}var b=w.getCoefficient(0);if(0==b)throw"ReedSolomonException sigmaTilde(0) was zero";var y=this.field.inverse(b),C=w.multiply2(y),_=a.multiply2(y);return new Array(C,_)},this.findErrorLocations=function(e){var t=e.Degree;if(1==t)return new Array(e.getCoefficient(1));for(var n=new Array(t),r=0,i=1;i<256&&r=0?e>>t:(e>>t)+(2<<~t)}A.imagedata=null,A.width=0,A.height=0,A.qrCodeSymbol=null,A.debug=!1,A.maxImgSize=1048576,A.sizeOfDataLengthInfo=[[10,9,8,8],[12,11,16,10],[14,13,16,12]],A.callback=null,A.vidSuccess=function(e){A.localstream=e,A.webkit?A.video.src=window.webkitURL.createObjectURL(e):A.moz?(A.video.mozSrcObject=e,A.video.play()):A.video.src=e,A.gUM=!0,A.canvas_qr2=document.createElement("canvas"),A.canvas_qr2.id="qr-canvas",A.qrcontext2=A.canvas_qr2.getContext("2d"),A.canvas_qr2.width=A.video.videoWidth,A.canvas_qr2.height=A.video.videoHeight,setTimeout(A.captureToCanvas,500)},A.vidError=function(e){A.gUM=!1},A.captureToCanvas=function(){if(A.gUM)try{if(0==A.video.videoWidth)return void setTimeout(A.captureToCanvas,500);A.canvas_qr2.width=A.video.videoWidth,A.canvas_qr2.height=A.video.videoHeight,A.qrcontext2.drawImage(A.video,0,0);try{A.decode()}catch(e){console.log(e),setTimeout(A.captureToCanvas,500)}}catch(e){console.log(e),setTimeout(A.captureToCanvas,500)}},A.setWebcam=function(e){var t=navigator;A.video=document.getElementById(e);var n=!0;if(navigator.mediaDevices&&navigator.mediaDevices.enumerateDevices)try{navigator.mediaDevices.enumerateDevices().then(function(e){e.forEach(function(e){console.log("deb1"),"videoinput"===e.kind&&e.label.toLowerCase().search("back")>-1&&(n=[{sourceId:e.deviceId}]),console.log(e.kind+": "+e.label+" id = "+e.deviceId)})})}catch(e){console.log(e)}else console.log("no navigator.mediaDevices.enumerateDevices");t.getUserMedia?t.getUserMedia({video:n,audio:!1},A.vidSuccess,A.vidError):t.webkitGetUserMedia?(A.webkit=!0,t.webkitGetUserMedia({video:n,audio:!1},A.vidSuccess,A.vidError)):t.mozGetUserMedia&&(A.moz=!0,t.mozGetUserMedia({video:n,audio:!1},A.vidSuccess,A.vidError))},A.decode=function(e){if(0==arguments.length){if(A.canvas_qr2)var t=A.canvas_qr2,n=A.qrcontext2;else n=(t=document.getElementById("qr-canvas")).getContext("2d");return A.width=t.width,A.height=t.height,A.imagedata=n.getImageData(0,0,A.width,A.height),A.result=A.process(n),null!=A.callback&&A.callback(A.result),A.result}var r=new Image;r.crossOrigin="Anonymous",r.onload=function(){var e=document.getElementById("out-canvas");if(null!=e){var t=e.getContext("2d");t.clearRect(0,0,320,240),t.drawImage(r,0,0,320,240)}var n=document.createElement("canvas"),i=n.getContext("2d"),a=r.height,o=r.width;if(r.width*r.height>A.maxImgSize){var s=r.width/r.height;o=s*(a=Math.sqrt(A.maxImgSize/s))}n.width=o,n.height=a,i.drawImage(r,0,0,n.width,n.height),A.width=n.width,A.height=n.height;try{A.imagedata=i.getImageData(0,0,n.width,n.height)}catch(e){return A.result="Cross domain image reading not supported in your browser! Save it to your computer then drag and drop the file!",void(null!=A.callback&&A.callback(A.result))}try{A.result=A.process(i)}catch(e){console.log(e),A.result="error decoding QR Code"}null!=A.callback&&A.callback(A.result)},r.onerror=function(){null!=A.callback&&A.callback("Failed to load the image")},r.src=e},A.isUrl=function(e){return/(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/.test(e)},A.decode_url=function(e){var t="";try{t=escape(e)}catch(n){console.log(n),t=e}var n="";try{n=decodeURIComponent(t)}catch(e){console.log(e),n=t}return n},A.decode_utf8=function(e){return A.isUrl(e)?A.decode_url(e):e},A.process=function(e){var t=(new Date).getTime(),n=A.grayScaleToBitmap(A.grayscale());if(A.debug){for(var r=0;rr[s][o][1]&&(r[s][o][1]=f)}}for(var u=new Array(4),d=0;d<4;d++)u[d]=new Array(4);for(o=0;o<4;o++)for(s=0;s<4;s++)u[s][o]=Math.floor((r[s][o][0]+r[s][o][1])/2);return u},A.grayScaleToBitmap=function(e){for(var t=A.getMiddleBrightnessPerArea(e),n=t.length,r=Math.floor(A.width/n),i=Math.floor(A.height/n),a=new ArrayBuffer(A.width*A.height),o=new Uint8Array(a),s=0;s=0&&i[t+s*A.width];)o[2]++,s--;if(s<0)return NaN;for(;s>=0&&!i[t+s*A.width]&&o[1]<=n;)o[1]++,s--;if(s<0||o[1]>n)return NaN;for(;s>=0&&i[t+s*A.width]&&o[0]<=n;)o[0]++,s--;if(o[0]>n)return NaN;for(s=e+1;s=n)return NaN;for(;s=n)return NaN;var h=o[0]+o[1]+o[2]+o[3]+o[4];return 5*Math.abs(h-r)>=2*r?NaN:this.foundPatternCross(o)?this.centerFromEnd(o,s):NaN},this.crossCheckHorizontal=function(e,t,n,r){for(var i=this.image,a=A.width,o=this.CrossCheckStateCount,s=e;s>=0&&i[s+t*A.width];)o[2]++,s--;if(s<0)return NaN;for(;s>=0&&!i[s+t*A.width]&&o[1]<=n;)o[1]++,s--;if(s<0||o[1]>n)return NaN;for(;s>=0&&i[s+t*A.width]&&o[0]<=n;)o[0]++,s--;if(o[0]>n)return NaN;for(s=e+1;s=n)return NaN;for(;s=n)return NaN;var h=o[0]+o[1]+o[2]+o[3]+o[4];return 5*Math.abs(h-r)>=r?NaN:this.foundPatternCross(o)?this.centerFromEnd(o,s):NaN},this.handlePossibleCenter=function(e,t,n){var r=e[0]+e[1]+e[2]+e[3]+e[4],i=this.centerFromEnd(e,n),a=this.crossCheckVertical(t,Math.floor(i),e[2],r);if(!isNaN(a)&&(i=this.crossCheckHorizontal(Math.floor(i),Math.floor(a),e[2],r),!isNaN(i))){for(var o=r/7,s=!1,h=this.possibleCenters.length,w=0;w3){for(var t=0,n=0,r=0;r=0;r--){var h=this.possibleCenters[r];Math.abs(h.EstimatedModuleSize-a)>s&&this.possibleCenters.splice(r,1)}}return this.possibleCenters.length>3&&this.possibleCenters.sort(function(e,t){return e.count>t.count?-1:e.count=B){if(null!=t)return this.hasSkipped=!0,Math.floor((Math.abs(t.X-r.X)-Math.abs(t.Y-r.Y))/2);t=r}}return 0},this.haveMultiplyConfirmedCenters=function(){for(var e=0,t=0,n=this.possibleCenters.length,r=0;r=B&&(e++,t+=i.EstimatedModuleSize)}if(e<3)return!1;var a=t/n,o=0;for(r=0;ra[2]&&(o+=w-a[2]-r,h=n-1)}else{do{h++}while(h=n)return!1;return!0},this.crossCheckVertical=function(e,t,n,r){var i=this.image,a=A.height,o=this.crossCheckStateCount;o[0]=0,o[1]=0,o[2]=0;for(var s=e;s>=0&&i[t+s*A.width]&&o[1]<=n;)o[1]++,s--;if(s<0||o[1]>n)return NaN;for(;s>=0&&!i[t+s*A.width]&&o[0]<=n;)o[0]++,s--;if(o[0]>n)return NaN;for(s=e+1;sn)return NaN;for(;sn)return NaN;var h=o[0]+o[1]+o[2];return 5*Math.abs(h-r)>=2*r?NaN:this.foundPatternCross(o)?this.centerFromEnd(o,s):NaN},this.handlePossibleCenter=function(e,t,n){var r=e[0]+e[1]+e[2],i=this.centerFromEnd(e,n),a=this.crossCheckVertical(t,Math.floor(i),2*e[1],r);if(!isNaN(a)){for(var o=(e[0]+e[1]+e[2])/3,s=this.possibleCenters.length,h=0;h>1),s=new Array(0,0,0),h=0;h>1:-(h+1>>1));s[0]=0,s[1]=0,s[2]=0;for(var f=t;f=10&&t<=26?this.dataLengthMode=1:t>=27&&t<=40&&(this.dataLengthMode=2),this.getNextBits=function(e){var t=0;if(e>this.bitPointer-e+1,this.bitPointer-=e,t}if(e>8-(e-(this.bitPointer+1)),this.bitPointer=this.bitPointer-e%8,this.bitPointer<0&&(this.bitPointer=8+this.bitPointer),t}if(e>8-(e-(this.bitPointer+1+8))),this.bitPointer=this.bitPointer-(e-8)%8,this.bitPointer<0&&(this.bitPointer=8+this.bitPointer),t}return 0},this.NextMode=function(){return this.blockPointer>this.blocks.length-this.numErrorCorrectionCode-2?0:this.getNextBits(4)},this.getDataLength=function(e){for(var t=0;e>>t!=1;)t++;return this.getNextBits(A.sizeOfDataLengthInfo[this.dataLengthMode][t])},this.getRomanAndFigureString=function(e){var t=e,n=0,r="",i=new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"," ","$","%","*","+","-",".","/",":");do{if(t>1){var a=(n=this.getNextBits(11))%45;r+=i[Math.floor(n/45)],r+=i[a],t-=2}else 1==t&&(r+=i[n=this.getNextBits(6)],t-=1)}while(t>0);return r},this.getFigureString=function(e){var t=e,n=0,r="";do{t>=3?((n=this.getNextBits(10))<100&&(r+="0"),n<10&&(r+="0"),t-=3):2==t?((n=this.getNextBits(7))<10&&(r+="0"),t-=2):1==t&&(n=this.getNextBits(4),t-=1),r+=n}while(t>0);return r},this.get8bitByteArray=function(e){var t=e,n=0,r=new Array;do{n=this.getNextBits(8),r.push(n),t--}while(t>0);return r},this.getKanjiString=function(e){var t=e,n=0,r="";do{var i=((n=this.getNextBits(13))/192<<8)+n%192,a=0;a=i+33088<=40956?i+33088:i+49472,r+=String.fromCharCode(a),t--}while(t>0);return r},this.parseECIValue=function(){var e=0,t=this.getNextBits(8);(0==(128&t)&&(e=127&t),128==(192&t))&&(e=(63&t)<<8|this.getNextBits(8));192==(224&t)&&(e=(31&t)<<16|this.getNextBits(8));return e},this.__defineGetter__("DataByte",function(){for(var e=new Array;;){var t=this.NextMode();if(0==t){if(e.length>0)break;throw"Empty data block"}if(1!=t&&2!=t&&4!=t&&8!=t&&7!=t)throw"Invalid mode: "+t+" in (block:"+this.blockPointer+" bit:"+this.bitPointer+")";if(7==t)var n=this.parseECIValue();else{var r=this.getDataLength(t);if(r<1)throw"Invalid data length: "+r;switch(t){case 1:for(var i=this.getFigureString(r),a=new Array(i.length),o=0;o=a&&o>=s?(r=e[0],n=e[1],i=e[2]):s>=o&&s>=a?(r=e[1],n=e[0],i=e[2]):(r=e[2],n=e[0],i=e[1]),function(e,t,n){var r=t.x,i=t.y;return(n.x-r)*(e.y-i)-(n.y-i)*(e.x-r)}(n,r,i)<0){var h=n;n=i,i=h}e[0]=n,e[1]=r,e[2]=i},A} - -/** Html5Qrcode From here */ -"use strict";function _typeof(a){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(a){return typeof a}:function(a){return a&&"function"==typeof Symbol&&a.constructor===Symbol&&a!==Symbol.prototype?"symbol":typeof a},_typeof(a)}function _classCallCheck(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")}function _defineProperties(a,b){for(var c,d=0;dk)throw"'config.qrbox' should not be greater than the width of the HTML element."}var m=function(a,b){var c=h.qrbox;c>b&&console.warn("[Html5Qrcode] config.qrboxsize is greater than video height. Shading will be ignored");var d=i&&c<=b,e=d?f._getShadedRegionBounds(a,b,c):{x:0,y:0,width:a,height:b},k=f._createCanvasElement(e.width,e.height),l=k.getContext("2d");l.canvas.width=e.width,l.canvas.height=e.height,j.append(k),d&&f._possiblyInsertShadingElement(j,b,e),g._qrRegion=e,g._context=l,g._canvasElement=k},n=function(){try{return g.qrcode.decode(),f._possiblyUpdateShaders(!0),!0}catch(a){return f._possiblyUpdateShaders(!1),e("QR code parse error, error = ".concat(a)),!1}},o=function b(){if(g._shouldScan){if(g._localMediaStream){var c=g._videoElement,d=c.videoWidth/c.clientWidth,e=c.videoHeight/c.clientHeight,i=g._qrRegion.width*d,j=g._qrRegion.height*e,k=g._qrRegion.x*d,l=g._qrRegion.y*e;g._context.drawImage(g._videoElement,k,l,i,j,0,0,g._qrRegion.width,g._qrRegion.height),n()||!0===h.disableFlip||(f._context.translate(f._context.canvas.width,0),f._context.scale(-1,1),n())}g._foreverScanTimeout=setTimeout(b,a._getTimeoutFps(h.fps))}},p=function(a){return new Promise(function(b,c){var d=function(){var d=f._createVideoElement(k);g._element.append(d),d.onabort=c,d.onerror=c,d.onplaying=function(){var a=d.clientWidth,c=d.clientHeight;m(a,c),o(),b()},d.srcObject=a,d.play(),g._videoElement=d};if(g._localMediaStream=a,!h.aspectRatio)d();else{var e={aspectRatio:h.aspectRatio},i=a.getVideoTracks()[0];i.applyConstraints(e).then(function(){return d()})["catch"](function(a){console.log("[Warning] [Html5Qrcode] Constriants could not be satisfied, ignoring constraints",a),d()})}})};return new Promise(function(a,c){if(navigator.mediaDevices&&navigator.mediaDevices.getUserMedia){var d=g._createVideoConstraints(b);navigator.mediaDevices.getUserMedia({audio:!1,video:d}).then(function(b){p(b).then(function(){g._isScanning=!0,a()})["catch"](c)})["catch"](function(a){c("Error getting userMedia, error = ".concat(a))})}else if(navigator.getUserMedia){if("string"!=typeof b)throw"The device doesn't support navigator.mediaDevices, only supported cameraIdOrConfig in this case is deviceId parameter (string).";navigator.getUserMedia({video:{optional:[{sourceId:b}]}},function(b){p(b).then(function(){g._isScanning=!0,a()})["catch"](c)},function(a){c("Error getting userMedia, error = ".concat(a))})}else c("Web camera streaming not supported by the browser.")})}},{key:"stop",value:function(){this._shouldScan=!1,clearTimeout(this._foreverScanTimeout);var b=this;return new Promise(function(c){b.qrcode.callback=null;var d=b._localMediaStream.getVideoTracks().length,e=0,f=function(){for(;b._element.getElementsByClassName(a.SHADED_REGION_CLASSNAME).length;){var c=b._element.getElementsByClassName(a.SHADED_REGION_CLASSNAME)[0];b._element.removeChild(c)}},g=function(){b._localMediaStream=null,b._element.removeChild(b._videoElement),b._element.removeChild(b._canvasElement),f(),b._isScanning=!1,b._qrRegion&&(b._qrRegion=null),b._context&&(b._context=null),c(!0)};b._localMediaStream.getVideoTracks().forEach(function(a){a.stop(),++e,e>=d&&g()})})}},{key:"scanFile",value:function(b,c){var d=this;if(!b||!(b instanceof File))throw"imageFile argument is mandatory and should be instance of File. Use 'event.target.files[0]'";if(c=void 0===c||c,d._isScanning)throw"Close ongoing scan before scanning a file.";var e=function b(c,d,e,f){if(c<=e&&d<=f){var g=(e-c)/2,h=(f-d)/2;return{x:g,y:h,width:c,height:d}}var i=c,j=d;return c>e&&(d=e/c*d,c=e),d>f&&(c=f/d*c,d=f),a._log("Image downsampled from "+"".concat(i,"X").concat(j)+" to ".concat(c,"X").concat(d,".")),b(c,d,e,f)};return new Promise(function(f,g){d._possiblyCloseLastScanImageFile(),d._clearElement(),d._lastScanImageFile=b;var h=new Image;h.onload=function(){var b=Math.max,i=h.width,j=h.height,k=document.getElementById(d._elementId),l=k.clientWidth?k.clientWidth:a.DEFAULT_WIDTH,m=b(k.clientHeight?k.clientHeight:j,a.FILE_SCAN_MIN_HEIGHT),n=e(i,j,l,m);if(c){var o=d._createCanvasElement(l,m,"qr-canvas-visible");o.style.display="inline-block",k.appendChild(o);var p=o.getContext("2d");p.canvas.width=l,p.canvas.height=m,p.drawImage(h,0,0,i,j,n.x,n.y,n.width,n.height)}var q=d._createCanvasElement(n.width,n.height);k.appendChild(q);var r=q.getContext("2d");r.canvas.width=n.width,r.canvas.height=n.height,r.drawImage(h,0,0,i,j,0,0,n.width,n.height);try{f(d.qrcode.decode())}catch(a){g("QR code parse error, error = ".concat(a))}},h.onerror=g,h.onabort=g,h.onstalled=g,h.onsuspend=g,h.src=URL.createObjectURL(b)})}},{key:"clear",value:function(){this._clearElement()}},{key:"_clearElement",value:function(){if(this._isScanning)throw"Cannot clear while scan is ongoing, close it first.";var a=document.getElementById(this._elementId);a.innerHTML=""}},{key:"_createCanvasElement",value:function(a,b,c){var d=document.createElement("canvas");return d.style.width="".concat(a,"px"),d.style.height="".concat(b,"px"),d.style.display="none",d.id=null==c?"qr-canvas":c,d}},{key:"_createVideoElement",value:function(a){var b=document.createElement("video");return b.style.width="".concat(a,"px"),b.muted=!0,b.playsInline=!0,b}},{key:"_getShadedRegionBounds",value:function(a,b,c){if(c>a||c>b)throw"'config.qrbox' should not be greater than the width and height of the HTML element.";return{x:(a-c)/2,y:(b-c)/2,width:c,height:c}}},{key:"_possiblyInsertShadingElement",value:function(b,c,d){var e=this;if(0!=d.x||0!=d.y){var f={};f[a.SHADED_LEFT]=this._createShadedElement(c,d,a.SHADED_LEFT),f[a.SHADED_RIGHT]=this._createShadedElement(c,d,a.SHADED_RIGHT),f[a.SHADED_TOP]=this._createShadedElement(c,d,a.SHADED_TOP),f[a.SHADED_BOTTOM]=this._createShadedElement(c,d,a.SHADED_BOTTOM),Object.keys(f).forEach(function(a){return b.append(f[a])}),10>d.x||10>d.y?this.hasBorderShaders=!1:(Object.keys(f).forEach(function(a){return e._insertShaderBorders(f[a],d,a)}),this.hasBorderShaders=!0)}}},{key:"_createShadedElement",value:function(b,c,d){var e=document.createElement("div");switch(e.style.position="absolute",e.style.height="".concat(b,"px"),e.className=a.SHADED_REGION_CLASSNAME,e.id="".concat(a.SHADED_REGION_CLASSNAME,"_").concat(d),e.style.background="#0000007a",d){case a.SHADED_LEFT:e.style.top="0px",e.style.left="0px",e.style.width="".concat(c.x,"px"),e.style.height="".concat(b,"px");break;case a.SHADED_RIGHT:e.style.top="0px",e.style.right="0px",e.style.width="".concat(c.x,"px"),e.style.height="".concat(b,"px");break;case a.SHADED_TOP:e.style.top="0px",e.style.left="".concat(c.x,"px"),e.style.width="".concat(c.width,"px"),e.style.height="".concat(c.y,"px");break;case a.SHADED_BOTTOM:var f=c.y+c.height;e.style.top="".concat(f,"px"),e.style.left="".concat(c.x,"px"),e.style.width="".concat(c.width,"px"),e.style.height="".concat(c.y,"px");break;default:throw"Unsupported shadingPosition";}return e}},{key:"_insertShaderBorders",value:function(b,c,d){d=parseInt(d);var e=this,f=5,g=5,h=40,i=function(){var b=document.createElement("div");switch(b.style.position="absolute",b.style.backgroundColor=a.BORDER_SHADER_DEFAULT_COLOR,d){case a.SHADED_LEFT:case a.SHADED_RIGHT:b.style.width="".concat(g,"px"),b.style.height="".concat(h+f,"px");break;case a.SHADED_TOP:case a.SHADED_BOTTOM:b.style.width="".concat(h+f,"px"),b.style.height="".concat(g,"px");break;default:throw"Unsupported shadingPosition";}return b},j=function(a,c){if(null===a||null===c)throw"Shaders should have defined positions";var d=i();d.style.top="".concat(a,"px"),d.style.left="".concat(c,"px"),b.appendChild(d),e.borderShaders||(e.borderShaders=[]),e.borderShaders.push(d)},k=null,l=null,m=null,n=null;switch(d){case a.SHADED_LEFT:k=c.y-f,l=c.x-g,m=c.y+c.height-h,n=l;break;case a.SHADED_RIGHT:k=c.y-f,l=0,m=c.y+c.height-h,n=l;break;case a.SHADED_TOP:k=c.y-f,l=-g,m=k,n=c.width-h;break;case a.SHADED_BOTTOM:k=0,l=-g,m=k,n=c.width-h;break;default:throw"Unsupported shadingPosition";}j(k,l),j(m,n)}},{key:"_possiblyUpdateShaders",value:function(b){this.qrMatch===b||(this.hasBorderShaders&&this.borderShaders&&this.borderShaders.length&&this.borderShaders.forEach(function(c){c.style.backgroundColor=b?a.BORDER_SHADER_MATCH_COLOR:a.BORDER_SHADER_DEFAULT_COLOR}),this.qrMatch=b)}},{key:"_possiblyCloseLastScanImageFile",value:function(){this._lastScanImageFile&&(URL.revokeObjectURL(this._lastScanImageFile),this._lastScanImageFile=null)}},{key:"_createVideoConstraints",value:function(a){if("string"==typeof a)return{deviceId:{exact:a}};if("object"==_typeof(a)){var b={user:!0,environment:!0},c=function(a){if(a in b)return!0;throw"config has invalid 'facingMode' value = "+"'".concat(a,"'")},d=Object.keys(a);if(1!=d.length)throw"'cameraIdOrConfig' object should have exactly 1 key,"+" if passed as an object, found ".concat(d.length," keys");var e=Object.keys(a)[0];if("facingMode"!=e&&"deviceId"!=e)throw"Only '".concat("facingMode","' and '").concat("deviceId","' ")+" are supported for 'cameraIdOrConfig'";if("facingMode"==e){var f=a[e];if("string"==typeof f){if(c(f))return{facingMode:f};}else if("object"!=_typeof(f)){var g=_typeof(f);throw"Invalid type of 'facingMode' = ".concat(g)}else if(!("exact"in f))throw"'facingMode' should be string or object with"+" ".concat("exact"," as key.");else if(c(f.exact))return{facingMode:{exact:f.exact}}}else{var h=a[e];if("string"==typeof h)return{deviceId:h};if("object"==_typeof(h)){if("exact"in h)return{deviceId:{exact:h.exact}};throw"'deviceId' should be string or object with"+" ".concat("exact"," as key.")}else{var i=_typeof(h);throw"Invalid type of 'deviceId' = ".concat(i)}}}else{var j=_typeof(a);throw"Invalid type of 'cameraIdOrConfig' = ".concat(j)}}}],[{key:"getCameras",value:function(){var a=this;return new Promise(function(b,c){if(navigator.mediaDevices&&navigator.mediaDevices.enumerateDevices&&navigator.mediaDevices.getUserMedia)a._log("navigator.mediaDevices used"),navigator.mediaDevices.getUserMedia({audio:!1,video:!0}).then(function(d){d.oninactive=function(){return a._log("All streams closed")};var e=function(a){for(var b,c=a.getVideoTracks(),d=0;d6&&(t.setRegion(e-11,0,3,6),t.setRegion(0,e-11,6,3)),t},this.getECBlocksForLevel=function(e){return this.ecBlocks[e.ordinal()]}}function i(e,t,n,r,a,o,s,h,w){this.a11=e,this.a12=r,this.a13=s,this.a21=t,this.a22=a,this.a23=h,this.a31=n,this.a32=o,this.a33=w,this.transformPoints1=function(e){for(var t=e.length,n=this.a11,r=this.a12,i=this.a13,a=this.a21,o=this.a22,s=this.a23,h=this.a31,w=this.a32,f=this.a33,u=0;uMath.abs(n-e);if(i){var a=e;e=t,t=a,a=n,n=r,r=a}for(var o=Math.abs(n-e),s=Math.abs(r-t),h=-o>>1,w=t0){if(l==r)break;l+=w,h-=o}}var b=n-e,y=r-t;return Math.sqrt(b*b+y*y)},this.sizeOfBlackWhiteBlackRunBothWays=function(e,t,n,r){var i=this.sizeOfBlackWhiteBlackRun(e,t,n,r),a=1,o=e-(n-e);o<0?(a=e/(e-o),o=0):o>=A.width&&(a=(A.width-1-e)/(o-e),o=A.width-1);var s=Math.floor(t-(r-t)*a);return a=1,s<0?(a=t/(t-s),s=0):s>=A.height&&(a=(A.height-1-t)/(s-t),s=A.height-1),o=Math.floor(e+(o-e)*a),(i+=this.sizeOfBlackWhiteBlackRun(e,t,o,s))-1},this.calculateModuleSizeOneWay=function(e,t){var n=this.sizeOfBlackWhiteBlackRunBothWays(Math.floor(e.X),Math.floor(e.Y),Math.floor(t.X),Math.floor(t.Y)),r=this.sizeOfBlackWhiteBlackRunBothWays(Math.floor(t.X),Math.floor(t.Y),Math.floor(e.X),Math.floor(e.Y));return isNaN(n)?r/7:isNaN(r)?n/7:(n+r)/14},this.calculateModuleSize=function(e,t,n){return(this.calculateModuleSizeOneWay(e,t)+this.calculateModuleSizeOneWay(e,n))/2},this.distance=function(e,t){var n=e.X-t.X,r=e.Y-t.Y;return Math.sqrt(n*n+r*r)},this.computeDimension=function(e,t,n,r){var i=7+(Math.round(this.distance(e,t)/r)+Math.round(this.distance(e,n)/r)>>1);switch(3&i){case 0:i++;break;case 2:i--;break;case 3:throw"Error"}return i},this.findAlignmentInRegion=function(e,t,n,r){var i=Math.floor(r*e),a=Math.max(0,t-i),o=Math.min(A.width-1,t+i);if(o-a<3*e)throw"Error";var s=Math.max(0,n-i),h=Math.min(A.height-1,n+i);return new F(this.image,a,s,o-a,h-s,e,this.resultPointCallback).find()},this.createTransform=function(e,t,n,r,a){var o,s,h,w,f=a-3.5;return null!=r?(o=r.X,s=r.Y,h=w=f-3):(o=t.X-e.X+n.X,s=t.Y-e.Y+n.Y,h=w=f),i.quadrilateralToQuadrilateral(3.5,3.5,f,3.5,h,w,3.5,f,e.X,e.Y,t.X,t.Y,o,s,n.X,n.Y)},this.sampleGrid=function(t,n,r){return e.sampleGrid3(t,r,n)},this.processFinderPatternInfo=function(e){var t=e.TopLeft,n=e.TopRight,i=e.BottomLeft,o=this.calculateModuleSize(t,n,i);if(o<1)throw"Error";var s=this.computeDimension(t,n,i,o),h=r.getProvisionalVersionForDimension(s),w=h.DimensionForVersion-7,f=null;if(h.AlignmentPatternCenters.length>0)for(var u=n.X-t.X+i.X,d=n.Y-t.Y+i.Y,l=1-3/w,c=Math.floor(t.X+l*(u-t.X)),g=Math.floor(t.Y+l*(d-t.Y)),v=4;v<=16;v<<=1){f=this.findAlignmentInRegion(o,c,g,v);break}var m=this.createTransform(t,n,i,f,s);return new a(this.sampleGrid(this.image,m,s),null==f?new Array(i,t,n):new Array(i,t,n,f))},this.detect=function(){var e=(new D).findFinderPattern(this.image);return this.processFinderPatternInfo(e)}}e.checkAndNudgePoints=function(e,t){for(var n=A.width,r=A.height,i=!0,a=0;an||s<-1||s>r)throw"Error.checkAndNudgePoints ";i=!1,-1==o?(t[a]=0,i=!0):o==n&&(t[a]=n-1,i=!0),-1==s?(t[a+1]=0,i=!0):s==r&&(t[a+1]=r-1,i=!0)}i=!0;for(a=t.length-2;a>=0&&i;a-=2){o=Math.floor(t[a]),s=Math.floor(t[a+1]);if(o<-1||o>n||s<-1||s>r)throw"Error.checkAndNudgePoints ";i=!1,-1==o?(t[a]=0,i=!0):o==n&&(t[a]=n-1,i=!0),-1==s?(t[a+1]=0,i=!0):s==r&&(t[a+1]=r-1,i=!0)}},e.sampleGrid3=function(t,n,r){for(var i=new v(n),a=new Array(n<<1),o=0;o>1),a[w+1]=h;r.transformPoints1(a),e.checkAndNudgePoints(t,a);try{for(w=0;w>1,o)}}catch(e){throw"Error.checkAndNudgePoints"}}return i},e.sampleGridx=function(t,n,r,a,o,s,h,w,f,u,d,l,c,g,v,m,b,y){var C=i.quadrilateralToQuadrilateral(r,a,o,s,h,w,f,u,d,l,c,g,v,m,b,y);return e.sampleGrid3(t,n,C)},r.VERSION_DECODE_INFO=new Array(31892,34236,39577,42195,48118,51042,55367,58893,63784,68472,70749,76311,79154,84390,87683,92361,96236,102084,102881,110507,110734,117786,119615,126325,127568,133589,136944,141498,145311,150283,152622,158308,161089,167017),r.VERSIONS=new Array(new r(1,new Array,new n(7,new t(1,19)),new n(10,new t(1,16)),new n(13,new t(1,13)),new n(17,new t(1,9))),new r(2,new Array(6,18),new n(10,new t(1,34)),new n(16,new t(1,28)),new n(22,new t(1,22)),new n(28,new t(1,16))),new r(3,new Array(6,22),new n(15,new t(1,55)),new n(26,new t(1,44)),new n(18,new t(2,17)),new n(22,new t(2,13))),new r(4,new Array(6,26),new n(20,new t(1,80)),new n(18,new t(2,32)),new n(26,new t(2,24)),new n(16,new t(4,9))),new r(5,new Array(6,30),new n(26,new t(1,108)),new n(24,new t(2,43)),new n(18,new t(2,15),new t(2,16)),new n(22,new t(2,11),new t(2,12))),new r(6,new Array(6,34),new n(18,new t(2,68)),new n(16,new t(4,27)),new n(24,new t(4,19)),new n(28,new t(4,15))),new r(7,new Array(6,22,38),new n(20,new t(2,78)),new n(18,new t(4,31)),new n(18,new t(2,14),new t(4,15)),new n(26,new t(4,13),new t(1,14))),new r(8,new Array(6,24,42),new n(24,new t(2,97)),new n(22,new t(2,38),new t(2,39)),new n(22,new t(4,18),new t(2,19)),new n(26,new t(4,14),new t(2,15))),new r(9,new Array(6,26,46),new n(30,new t(2,116)),new n(22,new t(3,36),new t(2,37)),new n(20,new t(4,16),new t(4,17)),new n(24,new t(4,12),new t(4,13))),new r(10,new Array(6,28,50),new n(18,new t(2,68),new t(2,69)),new n(26,new t(4,43),new t(1,44)),new n(24,new t(6,19),new t(2,20)),new n(28,new t(6,15),new t(2,16))),new r(11,new Array(6,30,54),new n(20,new t(4,81)),new n(30,new t(1,50),new t(4,51)),new n(28,new t(4,22),new t(4,23)),new n(24,new t(3,12),new t(8,13))),new r(12,new Array(6,32,58),new n(24,new t(2,92),new t(2,93)),new n(22,new t(6,36),new t(2,37)),new n(26,new t(4,20),new t(6,21)),new n(28,new t(7,14),new t(4,15))),new r(13,new Array(6,34,62),new n(26,new t(4,107)),new n(22,new t(8,37),new t(1,38)),new n(24,new t(8,20),new t(4,21)),new n(22,new t(12,11),new t(4,12))),new r(14,new Array(6,26,46,66),new n(30,new t(3,115),new t(1,116)),new n(24,new t(4,40),new t(5,41)),new n(20,new t(11,16),new t(5,17)),new n(24,new t(11,12),new t(5,13))),new r(15,new Array(6,26,48,70),new n(22,new t(5,87),new t(1,88)),new n(24,new t(5,41),new t(5,42)),new n(30,new t(5,24),new t(7,25)),new n(24,new t(11,12),new t(7,13))),new r(16,new Array(6,26,50,74),new n(24,new t(5,98),new t(1,99)),new n(28,new t(7,45),new t(3,46)),new n(24,new t(15,19),new t(2,20)),new n(30,new t(3,15),new t(13,16))),new r(17,new Array(6,30,54,78),new n(28,new t(1,107),new t(5,108)),new n(28,new t(10,46),new t(1,47)),new n(28,new t(1,22),new t(15,23)),new n(28,new t(2,14),new t(17,15))),new r(18,new Array(6,30,56,82),new n(30,new t(5,120),new t(1,121)),new n(26,new t(9,43),new t(4,44)),new n(28,new t(17,22),new t(1,23)),new n(28,new t(2,14),new t(19,15))),new r(19,new Array(6,30,58,86),new n(28,new t(3,113),new t(4,114)),new n(26,new t(3,44),new t(11,45)),new n(26,new t(17,21),new t(4,22)),new n(26,new t(9,13),new t(16,14))),new r(20,new Array(6,34,62,90),new n(28,new t(3,107),new t(5,108)),new n(26,new t(3,41),new t(13,42)),new n(30,new t(15,24),new t(5,25)),new n(28,new t(15,15),new t(10,16))),new r(21,new Array(6,28,50,72,94),new n(28,new t(4,116),new t(4,117)),new n(26,new t(17,42)),new n(28,new t(17,22),new t(6,23)),new n(30,new t(19,16),new t(6,17))),new r(22,new Array(6,26,50,74,98),new n(28,new t(2,111),new t(7,112)),new n(28,new t(17,46)),new n(30,new t(7,24),new t(16,25)),new n(24,new t(34,13))),new r(23,new Array(6,30,54,74,102),new n(30,new t(4,121),new t(5,122)),new n(28,new t(4,47),new t(14,48)),new n(30,new t(11,24),new t(14,25)),new n(30,new t(16,15),new t(14,16))),new r(24,new Array(6,28,54,80,106),new n(30,new t(6,117),new t(4,118)),new n(28,new t(6,45),new t(14,46)),new n(30,new t(11,24),new t(16,25)),new n(30,new t(30,16),new t(2,17))),new r(25,new Array(6,32,58,84,110),new n(26,new t(8,106),new t(4,107)),new n(28,new t(8,47),new t(13,48)),new n(30,new t(7,24),new t(22,25)),new n(30,new t(22,15),new t(13,16))),new r(26,new Array(6,30,58,86,114),new n(28,new t(10,114),new t(2,115)),new n(28,new t(19,46),new t(4,47)),new n(28,new t(28,22),new t(6,23)),new n(30,new t(33,16),new t(4,17))),new r(27,new Array(6,34,62,90,118),new n(30,new t(8,122),new t(4,123)),new n(28,new t(22,45),new t(3,46)),new n(30,new t(8,23),new t(26,24)),new n(30,new t(12,15),new t(28,16))),new r(28,new Array(6,26,50,74,98,122),new n(30,new t(3,117),new t(10,118)),new n(28,new t(3,45),new t(23,46)),new n(30,new t(4,24),new t(31,25)),new n(30,new t(11,15),new t(31,16))),new r(29,new Array(6,30,54,78,102,126),new n(30,new t(7,116),new t(7,117)),new n(28,new t(21,45),new t(7,46)),new n(30,new t(1,23),new t(37,24)),new n(30,new t(19,15),new t(26,16))),new r(30,new Array(6,26,52,78,104,130),new n(30,new t(5,115),new t(10,116)),new n(28,new t(19,47),new t(10,48)),new n(30,new t(15,24),new t(25,25)),new n(30,new t(23,15),new t(25,16))),new r(31,new Array(6,30,56,82,108,134),new n(30,new t(13,115),new t(3,116)),new n(28,new t(2,46),new t(29,47)),new n(30,new t(42,24),new t(1,25)),new n(30,new t(23,15),new t(28,16))),new r(32,new Array(6,34,60,86,112,138),new n(30,new t(17,115)),new n(28,new t(10,46),new t(23,47)),new n(30,new t(10,24),new t(35,25)),new n(30,new t(19,15),new t(35,16))),new r(33,new Array(6,30,58,86,114,142),new n(30,new t(17,115),new t(1,116)),new n(28,new t(14,46),new t(21,47)),new n(30,new t(29,24),new t(19,25)),new n(30,new t(11,15),new t(46,16))),new r(34,new Array(6,34,62,90,118,146),new n(30,new t(13,115),new t(6,116)),new n(28,new t(14,46),new t(23,47)),new n(30,new t(44,24),new t(7,25)),new n(30,new t(59,16),new t(1,17))),new r(35,new Array(6,30,54,78,102,126,150),new n(30,new t(12,121),new t(7,122)),new n(28,new t(12,47),new t(26,48)),new n(30,new t(39,24),new t(14,25)),new n(30,new t(22,15),new t(41,16))),new r(36,new Array(6,24,50,76,102,128,154),new n(30,new t(6,121),new t(14,122)),new n(28,new t(6,47),new t(34,48)),new n(30,new t(46,24),new t(10,25)),new n(30,new t(2,15),new t(64,16))),new r(37,new Array(6,28,54,80,106,132,158),new n(30,new t(17,122),new t(4,123)),new n(28,new t(29,46),new t(14,47)),new n(30,new t(49,24),new t(10,25)),new n(30,new t(24,15),new t(46,16))),new r(38,new Array(6,32,58,84,110,136,162),new n(30,new t(4,122),new t(18,123)),new n(28,new t(13,46),new t(32,47)),new n(30,new t(48,24),new t(14,25)),new n(30,new t(42,15),new t(32,16))),new r(39,new Array(6,26,54,82,110,138,166),new n(30,new t(20,117),new t(4,118)),new n(28,new t(40,47),new t(7,48)),new n(30,new t(43,24),new t(22,25)),new n(30,new t(10,15),new t(67,16))),new r(40,new Array(6,30,58,86,114,142,170),new n(30,new t(19,118),new t(6,119)),new n(28,new t(18,47),new t(31,48)),new n(30,new t(34,24),new t(34,25)),new n(30,new t(20,15),new t(61,16)))),r.getVersionForNumber=function(e){if(e<1||e>40)throw"ArgumentException";return r.VERSIONS[e-1]},r.getProvisionalVersionForDimension=function(e){if(e%4!=1)throw"Error getProvisionalVersionForDimension";try{return r.getVersionForNumber(e-17>>2)}catch(e){throw"Error getVersionForNumber"}},r.decodeVersionInformation=function(e){for(var t=4294967295,n=0,i=0;i>3&3),this.dataMask=7&e,this.__defineGetter__("ErrorCorrectionLevel",function(){return this.errorCorrectionLevel}),this.__defineGetter__("DataMask",function(){return this.dataMask}),this.GetHashCode=function(){return this.errorCorrectionLevel.ordinal()<<3|this.dataMask},this.Equals=function(e){var t=e;return this.errorCorrectionLevel==t.errorCorrectionLevel&&this.dataMask==t.dataMask}}function f(e,t,n){this.ordinal_Renamed_Field=e,this.bits=t,this.name=n,this.__defineGetter__("Bits",function(){return this.bits}),this.__defineGetter__("Name",function(){return this.name}),this.ordinal=function(){return this.ordinal_Renamed_Field}}w.numBitsDiffering=function(e,t){return h[15&(e^=t)]+h[15&M(e,4)]+h[15&M(e,8)]+h[15&M(e,12)]+h[15&M(e,16)]+h[15&M(e,20)]+h[15&M(e,24)]+h[15&M(e,28)]},w.decodeFormatInformation=function(e){var t=w.doDecodeFormatInformation(e);return null!=t?t:w.doDecodeFormatInformation(21522^e)},w.doDecodeFormatInformation=function(e){for(var t=4294967295,n=0,r=0;r=g.length)throw"ArgumentException";return g[e]};var u=new f(0,1,"L"),d=new f(1,0,"M"),l=new f(2,3,"Q"),c=new f(3,2,"H"),g=new Array(d,u,c,l);function v(e,t){if(t||(t=e),e<1||t<1)throw"Both dimensions must be greater than 0";this.width=e,this.height=t;var n=e>>5;0!=(31&e)&&n++,this.rowSize=n,this.bits=new Array(n*t);for(var r=0;r>5);return 0!=(1&M(this.bits[n],31&e))},this.set_Renamed=function(e,t){var n=t*this.rowSize+(e>>5);this.bits[n]|=1<<(31&e)},this.flip=function(e,t){var n=t*this.rowSize+(e>>5);this.bits[n]^=1<<(31&e)},this.clear=function(){for(var e=this.bits.length,t=0;tthis.height||i>this.width)throw"The region must fit inside the matrix";for(var o=t;o>5)]|=1<<(31&h)}}function m(e,t){this.numDataCodewords=e,this.codewords=t,this.__defineGetter__("NumDataCodewords",function(){return this.numDataCodewords}),this.__defineGetter__("Codewords",function(){return this.codewords})}function b(e){var t=e.Dimension;if(t<21||1!=(3&t))throw"Error BitMatrixParser";this.bitMatrix=e,this.parsedVersion=null,this.parsedFormatInfo=null,this.copyBit=function(e,t,n){return this.bitMatrix.get_Renamed(e,t)?n<<1|1:n<<1},this.readFormatInformation=function(){if(null!=this.parsedFormatInfo)return this.parsedFormatInfo;for(var e=0,t=0;t<6;t++)e=this.copyBit(t,8,e);e=this.copyBit(7,8,e),e=this.copyBit(8,8,e),e=this.copyBit(8,7,e);for(var n=5;n>=0;n--)e=this.copyBit(8,n,e);if(this.parsedFormatInfo=w.decodeFormatInformation(e),null!=this.parsedFormatInfo)return this.parsedFormatInfo;var r=this.bitMatrix.Dimension;e=0;var i=r-8;for(t=r-1;t>=i;t--)e=this.copyBit(t,8,e);for(n=r-7;n>2;if(t<=6)return r.getVersionForNumber(t);for(var n=0,i=e-11,a=5;a>=0;a--)for(var o=e-9;o>=i;o--)n=this.copyBit(o,a,n);if(this.parsedVersion=r.decodeVersionInformation(n),null!=this.parsedVersion&&this.parsedVersion.DimensionForVersion==e)return this.parsedVersion;n=0;for(o=5;o>=0;o--)for(a=e-9;a>=i;a--)n=this.copyBit(o,a,n);if(this.parsedVersion=r.decodeVersionInformation(n),null!=this.parsedVersion&&this.parsedVersion.DimensionForVersion==e)return this.parsedVersion;throw"Error readVersion"},this.readCodewords=function(){var e=this.readFormatInformation(),t=this.readVersion(),n=y.forReference(e.DataMask),r=this.bitMatrix.Dimension;n.unmaskBitMatrix(this.bitMatrix,r);for(var i=t.buildFunctionPattern(),a=!0,o=new Array(t.TotalCodewords),s=0,h=0,w=0,f=r-1;f>0;f-=2){6==f&&f--;for(var u=0;u=0;){if(s[c].codewords.length==l)break;c--}c++;var g=l-r.ECCodewordsPerBlock,v=0;for(o=0;o1&&0==t[0]){for(var r=1;rr.length){var i=n;n=r,r=i}for(var a=new Array(r.length),o=r.length-n.length,s=0;s=e.Degree&&!n.Zero;){var a=n.Degree-e.Degree,o=this.field.multiply(n.getCoefficient(n.Degree),i),s=e.multiplyByMonomial(a,o),h=this.field.buildMonomial(a,o);t=t.addOrSubtract(h),n=n.addOrSubtract(s)}return new Array(t,n)}}function _(e){this.expTable=new Array(256),this.logTable=new Array(256);for(var t=1,n=0;n<256;n++)this.expTable[n]=t,(t<<=1)>=256&&(t^=e);for(n=0;n<255;n++)this.logTable[this.expTable[n]]=n;var r=new Array(1);r[0]=0,this.zero=new C(this,new Array(r));var i=new Array(1);i[0]=1,this.one=new C(this,new Array(i)),this.__defineGetter__("Zero",function(){return this.zero}),this.__defineGetter__("One",function(){return this.one}),this.buildMonomial=function(e,t){if(e<0)throw"System.ArgumentException";if(0==t)return this.zero;for(var n=new Array(e+1),r=0;r7)throw"System.ArgumentException";return y.DATA_MASKS[e]},y.DATA_MASKS=new Array(new function(){this.unmaskBitMatrix=function(e,t){for(var n=0;n=Math.floor(n/2);){var f=i,u=o,d=h;if(o=s,h=w,(i=a).Zero)throw"r_{i-1} was zero";a=f;for(var l=this.field.Zero,c=i.getCoefficient(i.Degree),g=this.field.inverse(c);a.Degree>=i.Degree&&!a.Zero;){var v=a.Degree-i.Degree,m=this.field.multiply(a.getCoefficient(a.Degree),g);l=l.addOrSubtract(this.field.buildMonomial(v,m)),a=a.addOrSubtract(i.multiplyByMonomial(v,m))}s=l.multiply1(o).addOrSubtract(u),w=l.multiply1(h).addOrSubtract(d)}var b=w.getCoefficient(0);if(0==b)throw"ReedSolomonException sigmaTilde(0) was zero";var y=this.field.inverse(b),C=w.multiply2(y),_=a.multiply2(y);return new Array(C,_)},this.findErrorLocations=function(e){var t=e.Degree;if(1==t)return new Array(e.getCoefficient(1));for(var n=new Array(t),r=0,i=1;i<256&&r=0?e>>t:(e>>t)+(2<<~t)}A.imagedata=null,A.width=0,A.height=0,A.qrCodeSymbol=null,A.debug=!1,A.maxImgSize=1048576,A.sizeOfDataLengthInfo=[[10,9,8,8],[12,11,16,10],[14,13,16,12]],A.callback=null,A.vidSuccess=function(e){A.localstream=e,A.webkit?A.video.src=window.webkitURL.createObjectURL(e):A.moz?(A.video.mozSrcObject=e,A.video.play()):A.video.src=e,A.gUM=!0,A.canvas_qr2=document.createElement("canvas"),A.canvas_qr2.id="qr-canvas",A.qrcontext2=A.canvas_qr2.getContext("2d"),A.canvas_qr2.width=A.video.videoWidth,A.canvas_qr2.height=A.video.videoHeight,setTimeout(A.captureToCanvas,500)},A.vidError=function(e){A.gUM=!1},A.captureToCanvas=function(){if(A.gUM)try{if(0==A.video.videoWidth)return void setTimeout(A.captureToCanvas,500);A.canvas_qr2.width=A.video.videoWidth,A.canvas_qr2.height=A.video.videoHeight,A.qrcontext2.drawImage(A.video,0,0);try{A.decode()}catch(e){console.log(e),setTimeout(A.captureToCanvas,500)}}catch(e){console.log(e),setTimeout(A.captureToCanvas,500)}},A.setWebcam=function(e){var t=navigator;A.video=document.getElementById(e);var n=!0;if(navigator.mediaDevices&&navigator.mediaDevices.enumerateDevices)try{navigator.mediaDevices.enumerateDevices().then(function(e){e.forEach(function(e){console.log("deb1"),"videoinput"===e.kind&&e.label.toLowerCase().search("back")>-1&&(n=[{sourceId:e.deviceId}]),console.log(e.kind+": "+e.label+" id = "+e.deviceId)})})}catch(e){console.log(e)}else console.log("no navigator.mediaDevices.enumerateDevices");t.getUserMedia?t.getUserMedia({video:n,audio:!1},A.vidSuccess,A.vidError):t.webkitGetUserMedia?(A.webkit=!0,t.webkitGetUserMedia({video:n,audio:!1},A.vidSuccess,A.vidError)):t.mozGetUserMedia&&(A.moz=!0,t.mozGetUserMedia({video:n,audio:!1},A.vidSuccess,A.vidError))},A.decode=function(e){if(0==arguments.length){if(A.canvas_qr2)var t=A.canvas_qr2,n=A.qrcontext2;else n=(t=document.getElementById("qr-canvas")).getContext("2d");return A.width=t.width,A.height=t.height,A.imagedata=n.getImageData(0,0,A.width,A.height),A.result=A.process(n),null!=A.callback&&A.callback(A.result),A.result}var r=new Image;r.crossOrigin="Anonymous",r.onload=function(){var e=document.getElementById("out-canvas");if(null!=e){var t=e.getContext("2d");t.clearRect(0,0,320,240),t.drawImage(r,0,0,320,240)}var n=document.createElement("canvas"),i=n.getContext("2d"),a=r.height,o=r.width;if(r.width*r.height>A.maxImgSize){var s=r.width/r.height;o=s*(a=Math.sqrt(A.maxImgSize/s))}n.width=o,n.height=a,i.drawImage(r,0,0,n.width,n.height),A.width=n.width,A.height=n.height;try{A.imagedata=i.getImageData(0,0,n.width,n.height)}catch(e){return A.result="Cross domain image reading not supported in your browser! Save it to your computer then drag and drop the file!",void(null!=A.callback&&A.callback(A.result))}try{A.result=A.process(i)}catch(e){console.log(e),A.result="error decoding QR Code"}null!=A.callback&&A.callback(A.result)},r.onerror=function(){null!=A.callback&&A.callback("Failed to load the image")},r.src=e},A.isUrl=function(e){return/(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/.test(e)},A.decode_url=function(e){var t="";try{t=escape(e)}catch(n){console.log(n),t=e}var n="";try{n=decodeURIComponent(t)}catch(e){console.log(e),n=t}return n},A.decode_utf8=function(e){return A.isUrl(e)?A.decode_url(e):e},A.process=function(e){var t=(new Date).getTime(),n=A.grayScaleToBitmap(A.grayscale());if(A.debug){for(var r=0;rr[s][o][1]&&(r[s][o][1]=f)}}for(var u=new Array(4),d=0;d<4;d++)u[d]=new Array(4);for(o=0;o<4;o++)for(s=0;s<4;s++)u[s][o]=Math.floor((r[s][o][0]+r[s][o][1])/2);return u},A.grayScaleToBitmap=function(e){for(var t=A.getMiddleBrightnessPerArea(e),n=t.length,r=Math.floor(A.width/n),i=Math.floor(A.height/n),a=new ArrayBuffer(A.width*A.height),o=new Uint8Array(a),s=0;s=0&&i[t+s*A.width];)o[2]++,s--;if(s<0)return NaN;for(;s>=0&&!i[t+s*A.width]&&o[1]<=n;)o[1]++,s--;if(s<0||o[1]>n)return NaN;for(;s>=0&&i[t+s*A.width]&&o[0]<=n;)o[0]++,s--;if(o[0]>n)return NaN;for(s=e+1;s=n)return NaN;for(;s=n)return NaN;var h=o[0]+o[1]+o[2]+o[3]+o[4];return 5*Math.abs(h-r)>=2*r?NaN:this.foundPatternCross(o)?this.centerFromEnd(o,s):NaN},this.crossCheckHorizontal=function(e,t,n,r){for(var i=this.image,a=A.width,o=this.CrossCheckStateCount,s=e;s>=0&&i[s+t*A.width];)o[2]++,s--;if(s<0)return NaN;for(;s>=0&&!i[s+t*A.width]&&o[1]<=n;)o[1]++,s--;if(s<0||o[1]>n)return NaN;for(;s>=0&&i[s+t*A.width]&&o[0]<=n;)o[0]++,s--;if(o[0]>n)return NaN;for(s=e+1;s=n)return NaN;for(;s=n)return NaN;var h=o[0]+o[1]+o[2]+o[3]+o[4];return 5*Math.abs(h-r)>=r?NaN:this.foundPatternCross(o)?this.centerFromEnd(o,s):NaN},this.handlePossibleCenter=function(e,t,n){var r=e[0]+e[1]+e[2]+e[3]+e[4],i=this.centerFromEnd(e,n),a=this.crossCheckVertical(t,Math.floor(i),e[2],r);if(!isNaN(a)&&(i=this.crossCheckHorizontal(Math.floor(i),Math.floor(a),e[2],r),!isNaN(i))){for(var o=r/7,s=!1,h=this.possibleCenters.length,w=0;w3){for(var t=0,n=0,r=0;r=0;r--){var h=this.possibleCenters[r];Math.abs(h.EstimatedModuleSize-a)>s&&this.possibleCenters.splice(r,1)}}return this.possibleCenters.length>3&&this.possibleCenters.sort(function(e,t){return e.count>t.count?-1:e.count=B){if(null!=t)return this.hasSkipped=!0,Math.floor((Math.abs(t.X-r.X)-Math.abs(t.Y-r.Y))/2);t=r}}return 0},this.haveMultiplyConfirmedCenters=function(){for(var e=0,t=0,n=this.possibleCenters.length,r=0;r=B&&(e++,t+=i.EstimatedModuleSize)}if(e<3)return!1;var a=t/n,o=0;for(r=0;ra[2]&&(o+=w-a[2]-r,h=n-1)}else{do{h++}while(h=n)return!1;return!0},this.crossCheckVertical=function(e,t,n,r){var i=this.image,a=A.height,o=this.crossCheckStateCount;o[0]=0,o[1]=0,o[2]=0;for(var s=e;s>=0&&i[t+s*A.width]&&o[1]<=n;)o[1]++,s--;if(s<0||o[1]>n)return NaN;for(;s>=0&&!i[t+s*A.width]&&o[0]<=n;)o[0]++,s--;if(o[0]>n)return NaN;for(s=e+1;sn)return NaN;for(;sn)return NaN;var h=o[0]+o[1]+o[2];return 5*Math.abs(h-r)>=2*r?NaN:this.foundPatternCross(o)?this.centerFromEnd(o,s):NaN},this.handlePossibleCenter=function(e,t,n){var r=e[0]+e[1]+e[2],i=this.centerFromEnd(e,n),a=this.crossCheckVertical(t,Math.floor(i),2*e[1],r);if(!isNaN(a)){for(var o=(e[0]+e[1]+e[2])/3,s=this.possibleCenters.length,h=0;h>1),s=new Array(0,0,0),h=0;h>1:-(h+1>>1));s[0]=0,s[1]=0,s[2]=0;for(var f=t;f=10&&t<=26?this.dataLengthMode=1:t>=27&&t<=40&&(this.dataLengthMode=2),this.getNextBits=function(e){var t=0;if(e>this.bitPointer-e+1,this.bitPointer-=e,t}if(e>8-(e-(this.bitPointer+1)),this.bitPointer=this.bitPointer-e%8,this.bitPointer<0&&(this.bitPointer=8+this.bitPointer),t}if(e>8-(e-(this.bitPointer+1+8))),this.bitPointer=this.bitPointer-(e-8)%8,this.bitPointer<0&&(this.bitPointer=8+this.bitPointer),t}return 0},this.NextMode=function(){return this.blockPointer>this.blocks.length-this.numErrorCorrectionCode-2?0:this.getNextBits(4)},this.getDataLength=function(e){for(var t=0;e>>t!=1;)t++;return this.getNextBits(A.sizeOfDataLengthInfo[this.dataLengthMode][t])},this.getRomanAndFigureString=function(e){var t=e,n=0,r="",i=new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"," ","$","%","*","+","-",".","/",":");do{if(t>1){var a=(n=this.getNextBits(11))%45;r+=i[Math.floor(n/45)],r+=i[a],t-=2}else 1==t&&(r+=i[n=this.getNextBits(6)],t-=1)}while(t>0);return r},this.getFigureString=function(e){var t=e,n=0,r="";do{t>=3?((n=this.getNextBits(10))<100&&(r+="0"),n<10&&(r+="0"),t-=3):2==t?((n=this.getNextBits(7))<10&&(r+="0"),t-=2):1==t&&(n=this.getNextBits(4),t-=1),r+=n}while(t>0);return r},this.get8bitByteArray=function(e){var t=e,n=0,r=new Array;do{n=this.getNextBits(8),r.push(n),t--}while(t>0);return r},this.getKanjiString=function(e){var t=e,n=0,r="";do{var i=((n=this.getNextBits(13))/192<<8)+n%192,a=0;a=i+33088<=40956?i+33088:i+49472,r+=String.fromCharCode(a),t--}while(t>0);return r},this.parseECIValue=function(){var e=0,t=this.getNextBits(8);(0==(128&t)&&(e=127&t),128==(192&t))&&(e=(63&t)<<8|this.getNextBits(8));192==(224&t)&&(e=(31&t)<<16|this.getNextBits(8));return e},this.__defineGetter__("DataByte",function(){for(var e=new Array;;){var t=this.NextMode();if(0==t){if(e.length>0)break;throw"Empty data block"}if(1!=t&&2!=t&&4!=t&&8!=t&&7!=t)throw"Invalid mode: "+t+" in (block:"+this.blockPointer+" bit:"+this.bitPointer+")";if(7==t)var n=this.parseECIValue();else{var r=this.getDataLength(t);if(r<1)throw"Invalid data length: "+r;switch(t){case 1:for(var i=this.getFigureString(r),a=new Array(i.length),o=0;o=a&&o>=s?(r=e[0],n=e[1],i=e[2]):s>=o&&s>=a?(r=e[1],n=e[0],i=e[2]):(r=e[2],n=e[0],i=e[1]),function(e,t,n){var r=t.x,i=t.y;return(n.x-r)*(e.y-i)-(n.y-i)*(e.x-r)}(n,r,i)<0){var h=n;n=i,i=h}e[0]=n,e[1]=r,e[2]=i},A} + +/** Html5Qrcode From here */ +"use strict";function _typeof(a){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(a){return typeof a}:function(a){return a&&"function"==typeof Symbol&&a.constructor===Symbol&&a!==Symbol.prototype?"symbol":typeof a},_typeof(a)}function _classCallCheck(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")}function _defineProperties(a,b){for(var c,d=0;dk)throw"'config.qrbox' should not be greater than the width of the HTML element."}var m=function(a,b){var c=h.qrbox;c>b&&console.warn("[Html5Qrcode] config.qrboxsize is greater than video height. Shading will be ignored");var d=i&&c<=b,e=d?f._getShadedRegionBounds(a,b,c):{x:0,y:0,width:a,height:b},k=f._createCanvasElement(e.width,e.height),l=k.getContext("2d");l.canvas.width=e.width,l.canvas.height=e.height,j.append(k),d&&f._possiblyInsertShadingElement(j,b,e),g._qrRegion=e,g._context=l,g._canvasElement=k},n=function(){try{return g.qrcode.decode(),f._possiblyUpdateShaders(!0),!0}catch(a){return f._possiblyUpdateShaders(!1),e("QR code parse error, error = ".concat(a)),!1}},o=function b(){if(g._shouldScan){if(g._localMediaStream){var c=g._videoElement,d=c.videoWidth/c.clientWidth,e=c.videoHeight/c.clientHeight,i=g._qrRegion.width*d,j=g._qrRegion.height*e,k=g._qrRegion.x*d,l=g._qrRegion.y*e;g._context.drawImage(g._videoElement,k,l,i,j,0,0,g._qrRegion.width,g._qrRegion.height),n()||!0===h.disableFlip||(f._context.translate(f._context.canvas.width,0),f._context.scale(-1,1),n())}g._foreverScanTimeout=setTimeout(b,a._getTimeoutFps(h.fps))}},p=function(a){return new Promise(function(b,c){var d=function(){var d=f._createVideoElement(k);g._element.append(d),d.onabort=c,d.onerror=c,d.onplaying=function(){var a=d.clientWidth,c=d.clientHeight;m(a,c),o(),b()},d.srcObject=a,d.play(),g._videoElement=d};if(g._localMediaStream=a,!h.aspectRatio)d();else{var e={aspectRatio:h.aspectRatio},i=a.getVideoTracks()[0];i.applyConstraints(e).then(function(){return d()})["catch"](function(a){console.log("[Warning] [Html5Qrcode] Constriants could not be satisfied, ignoring constraints",a),d()})}})};return new Promise(function(a,c){if(navigator.mediaDevices&&navigator.mediaDevices.getUserMedia){var d=g._createVideoConstraints(b);navigator.mediaDevices.getUserMedia({audio:!1,video:d}).then(function(b){p(b).then(function(){g._isScanning=!0,a()})["catch"](c)})["catch"](function(a){c("Error getting userMedia, error = ".concat(a))})}else if(navigator.getUserMedia){if("string"!=typeof b)throw"The device doesn't support navigator.mediaDevices, only supported cameraIdOrConfig in this case is deviceId parameter (string).";navigator.getUserMedia({video:{optional:[{sourceId:b}]}},function(b){p(b).then(function(){g._isScanning=!0,a()})["catch"](c)},function(a){c("Error getting userMedia, error = ".concat(a))})}else c("Web camera streaming not supported by the browser.")})}},{key:"stop",value:function(){this._shouldScan=!1,clearTimeout(this._foreverScanTimeout);var b=this;return new Promise(function(c){b.qrcode.callback=null;var d=b._localMediaStream.getVideoTracks().length,e=0,f=function(){for(;b._element.getElementsByClassName(a.SHADED_REGION_CLASSNAME).length;){var c=b._element.getElementsByClassName(a.SHADED_REGION_CLASSNAME)[0];b._element.removeChild(c)}},g=function(){b._localMediaStream=null,b._element.removeChild(b._videoElement),b._element.removeChild(b._canvasElement),f(),b._isScanning=!1,b._qrRegion&&(b._qrRegion=null),b._context&&(b._context=null),c(!0)};b._localMediaStream.getVideoTracks().forEach(function(a){a.stop(),++e,e>=d&&g()})})}},{key:"scanFile",value:function(b,c){var d=this;if(!b||!(b instanceof File))throw"imageFile argument is mandatory and should be instance of File. Use 'event.target.files[0]'";if(c=void 0===c||c,d._isScanning)throw"Close ongoing scan before scanning a file.";var e=function b(c,d,e,f){if(c<=e&&d<=f){var g=(e-c)/2,h=(f-d)/2;return{x:g,y:h,width:c,height:d}}var i=c,j=d;return c>e&&(d=e/c*d,c=e),d>f&&(c=f/d*c,d=f),a._log("Image downsampled from "+"".concat(i,"X").concat(j)+" to ".concat(c,"X").concat(d,".")),b(c,d,e,f)};return new Promise(function(f,g){d._possiblyCloseLastScanImageFile(),d._clearElement(),d._lastScanImageFile=b;var h=new Image;h.onload=function(){var b=Math.max,i=h.width,j=h.height,k=document.getElementById(d._elementId),l=k.clientWidth?k.clientWidth:a.DEFAULT_WIDTH,m=b(k.clientHeight?k.clientHeight:j,a.FILE_SCAN_MIN_HEIGHT),n=e(i,j,l,m);if(c){var o=d._createCanvasElement(l,m,"qr-canvas-visible");o.style.display="inline-block",k.appendChild(o);var p=o.getContext("2d");p.canvas.width=l,p.canvas.height=m,p.drawImage(h,0,0,i,j,n.x,n.y,n.width,n.height)}var q=d._createCanvasElement(n.width,n.height);k.appendChild(q);var r=q.getContext("2d");r.canvas.width=n.width,r.canvas.height=n.height,r.drawImage(h,0,0,i,j,0,0,n.width,n.height);try{f(d.qrcode.decode())}catch(a){g("QR code parse error, error = ".concat(a))}},h.onerror=g,h.onabort=g,h.onstalled=g,h.onsuspend=g,h.src=URL.createObjectURL(b)})}},{key:"clear",value:function(){this._clearElement()}},{key:"_clearElement",value:function(){if(this._isScanning)throw"Cannot clear while scan is ongoing, close it first.";var a=document.getElementById(this._elementId);a.innerHTML=""}},{key:"_createCanvasElement",value:function(a,b,c){var d=document.createElement("canvas");return d.style.width="".concat(a,"px"),d.style.height="".concat(b,"px"),d.style.display="none",d.id=null==c?"qr-canvas":c,d}},{key:"_createVideoElement",value:function(a){var b=document.createElement("video");return b.style.width="".concat(a,"px"),b.muted=!0,b.playsInline=!0,b}},{key:"_getShadedRegionBounds",value:function(a,b,c){if(c>a||c>b)throw"'config.qrbox' should not be greater than the width and height of the HTML element.";return{x:(a-c)/2,y:(b-c)/2,width:c,height:c}}},{key:"_possiblyInsertShadingElement",value:function(b,c,d){var e=this;if(0!=d.x||0!=d.y){var f={};f[a.SHADED_LEFT]=this._createShadedElement(c,d,a.SHADED_LEFT),f[a.SHADED_RIGHT]=this._createShadedElement(c,d,a.SHADED_RIGHT),f[a.SHADED_TOP]=this._createShadedElement(c,d,a.SHADED_TOP),f[a.SHADED_BOTTOM]=this._createShadedElement(c,d,a.SHADED_BOTTOM),Object.keys(f).forEach(function(a){return b.append(f[a])}),10>d.x||10>d.y?this.hasBorderShaders=!1:(Object.keys(f).forEach(function(a){return e._insertShaderBorders(f[a],d,a)}),this.hasBorderShaders=!0)}}},{key:"_createShadedElement",value:function(b,c,d){var e=document.createElement("div");switch(e.style.position="absolute",e.style.height="".concat(b,"px"),e.className=a.SHADED_REGION_CLASSNAME,e.id="".concat(a.SHADED_REGION_CLASSNAME,"_").concat(d),e.style.background="#0000007a",d){case a.SHADED_LEFT:e.style.top="0px",e.style.left="0px",e.style.width="".concat(c.x,"px"),e.style.height="".concat(b,"px");break;case a.SHADED_RIGHT:e.style.top="0px",e.style.right="0px",e.style.width="".concat(c.x,"px"),e.style.height="".concat(b,"px");break;case a.SHADED_TOP:e.style.top="0px",e.style.left="".concat(c.x,"px"),e.style.width="".concat(c.width,"px"),e.style.height="".concat(c.y,"px");break;case a.SHADED_BOTTOM:var f=c.y+c.height;e.style.top="".concat(f,"px"),e.style.left="".concat(c.x,"px"),e.style.width="".concat(c.width,"px"),e.style.height="".concat(c.y,"px");break;default:throw"Unsupported shadingPosition";}return e}},{key:"_insertShaderBorders",value:function(b,c,d){d=parseInt(d);var e=this,f=5,g=5,h=40,i=function(){var b=document.createElement("div");switch(b.style.position="absolute",b.style.backgroundColor=a.BORDER_SHADER_DEFAULT_COLOR,d){case a.SHADED_LEFT:case a.SHADED_RIGHT:b.style.width="".concat(g,"px"),b.style.height="".concat(h+f,"px");break;case a.SHADED_TOP:case a.SHADED_BOTTOM:b.style.width="".concat(h+f,"px"),b.style.height="".concat(g,"px");break;default:throw"Unsupported shadingPosition";}return b},j=function(a,c){if(null===a||null===c)throw"Shaders should have defined positions";var d=i();d.style.top="".concat(a,"px"),d.style.left="".concat(c,"px"),b.appendChild(d),e.borderShaders||(e.borderShaders=[]),e.borderShaders.push(d)},k=null,l=null,m=null,n=null;switch(d){case a.SHADED_LEFT:k=c.y-f,l=c.x-g,m=c.y+c.height-h,n=l;break;case a.SHADED_RIGHT:k=c.y-f,l=0,m=c.y+c.height-h,n=l;break;case a.SHADED_TOP:k=c.y-f,l=-g,m=k,n=c.width-h;break;case a.SHADED_BOTTOM:k=0,l=-g,m=k,n=c.width-h;break;default:throw"Unsupported shadingPosition";}j(k,l),j(m,n)}},{key:"_possiblyUpdateShaders",value:function(b){this.qrMatch===b||(this.hasBorderShaders&&this.borderShaders&&this.borderShaders.length&&this.borderShaders.forEach(function(c){c.style.backgroundColor=b?a.BORDER_SHADER_MATCH_COLOR:a.BORDER_SHADER_DEFAULT_COLOR}),this.qrMatch=b)}},{key:"_possiblyCloseLastScanImageFile",value:function(){this._lastScanImageFile&&(URL.revokeObjectURL(this._lastScanImageFile),this._lastScanImageFile=null)}},{key:"_createVideoConstraints",value:function(a){if("string"==typeof a)return{deviceId:{exact:a}};if("object"==_typeof(a)){var b={user:!0,environment:!0},c=function(a){if(a in b)return!0;throw"config has invalid 'facingMode' value = "+"'".concat(a,"'")},d=Object.keys(a);if(1!=d.length)throw"'cameraIdOrConfig' object should have exactly 1 key,"+" if passed as an object, found ".concat(d.length," keys");var e=Object.keys(a)[0];if("facingMode"!=e&&"deviceId"!=e)throw"Only '".concat("facingMode","' and '").concat("deviceId","' ")+" are supported for 'cameraIdOrConfig'";if("facingMode"==e){var f=a[e];if("string"==typeof f){if(c(f))return{facingMode:f};}else if("object"!=_typeof(f)){var g=_typeof(f);throw"Invalid type of 'facingMode' = ".concat(g)}else if(!("exact"in f))throw"'facingMode' should be string or object with"+" ".concat("exact"," as key.");else if(c(f.exact))return{facingMode:{exact:f.exact}}}else{var h=a[e];if("string"==typeof h)return{deviceId:h};if("object"==_typeof(h)){if("exact"in h)return{deviceId:{exact:h.exact}};throw"'deviceId' should be string or object with"+" ".concat("exact"," as key.")}else{var i=_typeof(h);throw"Invalid type of 'deviceId' = ".concat(i)}}}else{var j=_typeof(a);throw"Invalid type of 'cameraIdOrConfig' = ".concat(j)}}}],[{key:"getCameras",value:function(){var a=this;return new Promise(function(b,c){if(navigator.mediaDevices&&navigator.mediaDevices.enumerateDevices&&navigator.mediaDevices.getUserMedia)a._log("navigator.mediaDevices used"),navigator.mediaDevices.getUserMedia({audio:!1,video:!0}).then(function(d){d.oninactive=function(){return a._log("All streams closed")};var e=function(a){for(var b,c=a.getVideoTracks(),d=0;d",c.appendChild(b.cameraScanImage)},this.cameraScanImage.width=64,this.cameraScanImage.style.opacity=.3,this.cameraScanImage.src=a.ASSET_CAMERA_SCAN)}},{key:"__insertFileScanImageToScanRegion",value:function(){var b=this,c=document.getElementById(this.__getScanRegionId());return this.fileScanImage?(c.innerHTML="
        ",void c.appendChild(this.fileScanImage)):void(this.fileScanImage=new Image,this.fileScanImage.onload=function(){c.innerHTML="
        ",c.appendChild(b.fileScanImage)},this.fileScanImage.width=64,this.fileScanImage.style.opacity=.3,this.fileScanImage.src=a.ASSET_FILE_SCAN)}},{key:"__clearScanRegion",value:function(){var a=document.getElementById(this.__getScanRegionId());a.innerHTML=""}},{key:"__getDashboardSectionId",value:function(){return"".concat(this.elementId,"__dashboard_section")}},{key:"__getDashboardSectionCameraScanRegionId",value:function(){return"".concat(this.elementId,"__dashboard_section_csr")}},{key:"__getDashboardSectionFileScanRegionId",value:function(){return"".concat(this.elementId,"__dashboard_section_fsr")}},{key:"__getDashboardSectionSwapLinkId",value:function(){return"".concat(this.elementId,"__dashboard_section_swaplink")}},{key:"__getScanRegionId",value:function(){return"".concat(this.elementId,"__scan_region")}},{key:"__getDashboardId",value:function(){return"".concat(this.elementId,"__dashboard")}},{key:"__getFileScanInputId",value:function(){return"".concat(this.elementId,"__filescan_input")}},{key:"__getStatusSpanId",value:function(){return"".concat(this.elementId,"__status_span")}},{key:"__getHeaderMessageContainerId",value:function(){return"".concat(this.elementId,"__header_message")}},{key:"__getCameraSelectionId",value:function(){return"".concat(this.elementId,"__camera_selection")}},{key:"__getCameraScanRegion",value:function(){return document.getElementById(this.__getDashboardSectionCameraScanRegionId())}},{key:"__getFileScanRegion",value:function(){return document.getElementById(this.__getDashboardSectionFileScanRegionId())}},{key:"__getFileScanInput",value:function(){return document.getElementById(this.__getFileScanInputId())}},{key:"__getDashboardSectionSwapLink",value:function(){return document.getElementById(this.__getDashboardSectionSwapLinkId())}}]),a}();_defineProperty(Html5QrcodeScanner,"SCAN_TYPE_CAMERA","SCAN_TYPE_CAMERA"),_defineProperty(Html5QrcodeScanner,"SCAN_TYPE_FILE","SCAN_TYPE_FILE"),_defineProperty(Html5QrcodeScanner,"STATUS_SUCCESS","STATUS_SUCCESS"),_defineProperty(Html5QrcodeScanner,"STATUS_WARNING","STATUS_WARNING"),_defineProperty(Html5QrcodeScanner,"STATUS_DEFAULT","STATUS_DEFAULT"),_defineProperty(Html5QrcodeScanner,"ASSET_FILE_SCAN","https://raw.githubusercontent.com/mebjas/html5-qrcode/master/assets/file-scan.gif"),_defineProperty(Html5QrcodeScanner,"ASSET_CAMERA_SCAN","https://raw.githubusercontent.com/mebjas/html5-qrcode/master/assets/camera-scan.gif"); \ No newline at end of file diff --git a/qrcode.min.js b/scripts/qrcode.min.js similarity index 100% rename from qrcode.min.js rename to scripts/qrcode.min.js diff --git a/std_op.js b/scripts/std_op.js similarity index 100% rename from std_op.js rename to scripts/std_op.js diff --git a/scripts/std_ui.js b/scripts/std_ui.js new file mode 100644 index 0000000..1985074 --- /dev/null +++ b/scripts/std_ui.js @@ -0,0 +1,507 @@ +/*jshint esversion: 6 */ +// Global variables +const domRefs = {}; +const currentYear = new Date().getFullYear(); + +//Checks for internet connection status +if (!navigator.onLine) + notify( + "There seems to be a problem connecting to the internet, Please check you internet connection.", + "error" + ); +window.addEventListener("offline", () => { + notify( + "There seems to be a problem connecting to the internet, Please check you internet connection.", + "error", + { pinned: true } + ); +}); +window.addEventListener("online", () => { + getRef("notification_drawer").clearAll(); + notify("We are back online.", "success"); +}); + +// Use instead of document.getElementById +function getRef(elementId) { + if (!domRefs.hasOwnProperty(elementId)) { + domRefs[elementId] = { + count: 1, + ref: null, + }; + return document.getElementById(elementId); + } else { + if (domRefs[elementId].count < 3) { + domRefs[elementId].count = domRefs[elementId].count + 1; + return document.getElementById(elementId); + } else { + if (!domRefs[elementId].ref) + domRefs[elementId].ref = document.getElementById(elementId); + return domRefs[elementId].ref; + } + } +} + +// returns dom with specified element +function createElement(tagName, options = {}) { + const { className, textContent, innerHTML, attributes = {} } = options + const elem = document.createElement(tagName) + for (let attribute in attributes) { + elem.setAttribute(attribute, attributes[attribute]) + } + if (className) + elem.className = className + if (textContent) + elem.textContent = textContent + if (innerHTML) + elem.innerHTML = innerHTML + return elem +} + +// Use when a function needs to be executed after user finishes changes +const debounce = (callback, wait) => { + let timeoutId = null; + return (...args) => { + window.clearTimeout(timeoutId); + timeoutId = window.setTimeout(() => { + callback.apply(null, args); + }, wait); + }; +} + +let zIndex = 10 +// function required for popups or modals to appear +function showPopup(popupId, pinned) { + zIndex++ + getRef(popupId).setAttribute('style', `z-index: ${zIndex}`) + getRef(popupId).show({ pinned }) + return getRef(popupId); +} + +// hides the popup or modal +function hidePopup() { + if (popupStack.peek() === undefined) + return; + popupStack.peek().popup.hide() +} + +document.addEventListener('popupopened', async e => { + switch (e.target.id) { + case 'saved_ids_popup': + const frag = document.createDocumentFragment() + const allSavedIds = await getArrayOfSavedIds() + allSavedIds.forEach(({ floID, name }) => { + frag.append(render.savedIdPickerCard(floID, name)) + }) + getRef('saved_ids_picker_list').innerHTML = '' + getRef('saved_ids_picker_list').append(frag) + getRef('search_saved_ids_picker').focusIn() + break; + case 'get_private_key_popup': + break; + } +}) +document.addEventListener('popupclosed', e => { + zIndex-- + switch (e.target.id) { + case 'saved_ids_popup': + getRef('saved_ids_picker_list').innerHTML = '' + getRef('search_saved_ids_picker').value = '' + break; + case 'get_private_key_popup': + getRef('get_private_key').classList.remove('hide') + getRef('transaction_result').classList.add('hide') + getRef('confirm_transaction_button').classList.remove('hide') + getRef('confirm_transaction_button').nextElementSibling.classList.add('hide') + break; + case 'retrieve_flo_id_popup': + getRef('recovered_flo_id_wrapper').classList.add('hide') + break; + } +}) + +// displays a popup for asking permission. Use this instead of JS confirm +const getConfirmation = (title, options = {}) => { + return new Promise(resolve => { + const { message, cancelText = 'Cancel', confirmText = 'OK' } = options + showPopup('confirmation_popup', true) + getRef('confirm_title').textContent = title; + getRef('confirm_message').textContent = message; + let cancelButton = getRef('confirmation_popup').children[2].children[0], + submitButton = getRef('confirmation_popup').children[2].children[1] + submitButton.textContent = confirmText + cancelButton.textContent = cancelText + submitButton.onclick = () => { + hidePopup() + resolve(true); + } + cancelButton.onclick = () => { + hidePopup() + resolve(false); + } + }) +} + +//Function for displaying toast notifications. pass in error for mode param if you want to show an error. +function notify(message, mode, options = {}) { + const { pinned = false, sound = false } = options + let icon + switch (mode) { + case 'success': + icon = `` + break; + case 'error': + icon = `` + break; + } + getRef("notification_drawer").push(message, { pinned, icon }); + if (mode === 'error') { + console.error(message) + } +} + +function getFormattedTime(time, format) { + try { + if (String(time).indexOf('_')) + time = String(time).split('_')[0] + const intTime = parseInt(time) + if (String(intTime).length < 13) + time *= 1000 + let [day, month, date, year] = new Date(intTime).toString().split(' '), + minutes = new Date(intTime).getMinutes(), + hours = new Date(intTime).getHours(), + currentTime = new Date().toString().split(' ') + + minutes = minutes < 10 ? `0${minutes}` : minutes + let finalHours = ``; + if (hours > 12) + finalHours = `${hours - 12}:${minutes}` + else if (hours === 0) + finalHours = `12:${minutes}` + else + finalHours = `${hours}:${minutes}` + + finalHours = hours >= 12 ? `${finalHours} PM` : `${finalHours} AM` + switch (format) { + case 'date-only': + return `${month} ${date}, ${year}`; + break; + default: + return `${month} ${date} ${year}, ${finalHours}`; + } + } catch (e) { + console.error(e); + return time; + } +} +// implement event delegation +function delegate(el, event, selector, fn) { + el.addEventListener(event, function (e) { + const potentialTarget = e.target.closest(selector) + if (potentialTarget) { + e.delegateTarget = potentialTarget + fn.call(this, e) + } + }) +} + +window.addEventListener('hashchange', e => showPage(window.location.hash)) +window.addEventListener("load", () => { + document.body.classList.remove('hide') + document.querySelectorAll('sm-input[data-flo-id]').forEach(input => input.customValidation = floCrypto.validateAddr) + document.querySelectorAll('sm-input[data-private-key]').forEach(input => input.customValidation = floCrypto.getPubKeyHex) + document.addEventListener('keyup', (e) => { + if (e.key === 'Escape') { + hidePopup() + } + }) + document.addEventListener('copy', () => { + notify('copied', 'success') + }) + document.addEventListener("pointerdown", (e) => { + if (e.target.closest("button:not([disabled]), sm-button:not([disabled]), .interact")) { + createRipple(e, e.target.closest("button, sm-button, .interact")); + } + }); + +}); +function createRipple(event, target) { + const circle = document.createElement("span"); + const diameter = Math.max(target.clientWidth, target.clientHeight); + const radius = diameter / 2; + const targetDimensions = target.getBoundingClientRect(); + circle.style.width = circle.style.height = `${diameter}px`; + circle.style.left = `${event.clientX - (targetDimensions.left + radius)}px`; + circle.style.top = `${event.clientY - (targetDimensions.top + radius)}px`; + circle.classList.add("ripple"); + const rippleAnimation = circle.animate( + [ + { + transform: "scale(4)", + opacity: 0, + }, + ], + { + duration: 600, + fill: "forwards", + easing: "ease-out", + } + ); + target.append(circle); + rippleAnimation.onfinish = () => { + circle.remove(); + }; +} + +const pagesData = { + params: {} +} + +let tempData +async function showPage(targetPage, options = {}) { + const { firstLoad, hashChange, isPreview } = options + let pageId + let params = {} + let searchParams + if (targetPage === '') { + pageId = 'home' + } else { + if (targetPage.includes('/')) { + if (targetPage.includes('?')) { + const splitAddress = targetPage.split('?') + searchParams = splitAddress.pop() + const pages = splitAddress.pop().split('/') + pageId = pages[1] + subPageId = pages[2] + } else { + const pages = targetPage.split('/') + pageId = pages[1] + subPageId = pages[2] + } + } else { + pageId = targetPage + } + } + if (searchParams) { + const urlSearchParams = new URLSearchParams('?' + searchParams); + params = Object.fromEntries(urlSearchParams.entries()); + } + if (pagesData.lastPage !== pageId) { + pagesData.lastPage = pageId + } + if (params) + pagesData.params = params + switch (pageId) { + case 'transactions': + break; + default: + + } + const animOptions = { + duration: 100, + fill: 'forwards', + } + let previousActiveElement = getRef('main_navbar').querySelector('.nav-item--active') + const currentActiveElement = document.querySelector(`.nav-item[href="#/${pageId}"]`) + if (currentActiveElement) { + if (getRef('main_navbar').classList.contains('hide')) { + getRef('main_navbar').classList.remove('hide-away') + getRef('main_navbar').classList.remove('hide') + getRef('main_navbar').animate([ + { + transform: isMobileView ? `translateY(100%)` : `translateX(-100%)`, + opacity: 0, + }, + { + transform: `none`, + opacity: 1, + }, + ], { + duration: 100, + fill: 'forwards', + easing: 'ease' + }) + } + getRef('main_header').classList.remove('hide') + const previousActiveElementIndex = [...getRef('main_navbar').querySelectorAll('.nav-item')].indexOf(previousActiveElement) + const currentActiveElementIndex = [...getRef('main_navbar').querySelectorAll('.nav-item')].indexOf(currentActiveElement) + const isOnTop = previousActiveElementIndex < currentActiveElementIndex + const currentIndicator = createElement('div', { className: 'nav-item__indicator' }); + let previousIndicator = getRef('main_navbar').querySelector('.nav-item__indicator') + if (!previousIndicator) { + previousIndicator = currentIndicator.cloneNode(true) + previousActiveElement = currentActiveElement + previousActiveElement.append(previousIndicator) + } else if (currentActiveElementIndex !== previousActiveElementIndex) { + const indicatorDimensions = previousIndicator.getBoundingClientRect() + const currentActiveElementDimensions = currentActiveElement.getBoundingClientRect() + let moveBy + if (isMobileView) { + moveBy = ((currentActiveElementDimensions.width - indicatorDimensions.width) / 2) + indicatorDimensions.width + } else { + moveBy = ((currentActiveElementDimensions.height - indicatorDimensions.height) / 2) + indicatorDimensions.height + } + indicatorObserver.observe(previousIndicator) + previousIndicator.animate([ + { + transform: 'none', + opacity: 1, + }, + { + transform: `translate${isMobileView ? 'X' : 'Y'}(${isOnTop ? `${moveBy}px` : `-${moveBy}px`})`, + opacity: 0, + }, + ], { ...animOptions, easing: 'ease-in' }).onfinish = () => { + previousIndicator.remove() + } + tempData = { + currentActiveElement, + currentIndicator, + isOnTop, + animOptions, + moveBy + } + } + previousActiveElement.classList.remove('nav-item--active'); + currentActiveElement.classList.add('nav-item--active') + } else { + if (!getRef('main_navbar').classList.contains('hide')) { + getRef('main_navbar').classList.add('hide-away') + getRef('main_navbar').animate([ + { + transform: `none`, + opacity: 1, + }, + { + transform: isMobileView ? `translateY(100%)` : `translateX(-100%)`, + opacity: 0, + }, + ], { + duration: 200, + fill: 'forwards', + easing: 'ease' + }).onfinish = () => { + getRef('main_navbar').classList.add('hide') + } + getRef('main_header').classList.add('hide') + } + } + document.querySelectorAll('.page').forEach(page => page.classList.add('hide')) + getRef(pageId).classList.remove('hide') + getRef(pageId).animate([{ opacity: 0 }, { opacity: 1 }], { duration: 300, fill: 'forwards', easing: 'ease' }) +} + +const indicatorObserver = new IntersectionObserver(entries => { + entries.forEach(entry => { + if (!entry.isIntersecting) { + const { currentActiveElement, currentIndicator, isOnTop, animOptions, moveBy } = tempData + currentActiveElement.append(currentIndicator) + currentIndicator.animate([ + { + transform: `translate${isMobileView ? 'X' : 'Y'}(${isOnTop ? `-${moveBy}px` : `${moveBy}px`})`, + opacity: 0, + }, + { + transform: 'none', + opacity: 1 + }, + ], { ...animOptions, easing: 'ease-out' }) + } + }) +}, { + threshold: 1 +}) + +// class based lazy loading +class LazyLoader { + constructor(container, elementsToRender, renderFn, options = {}) { + const { batchSize = 10, freshRender } = options + + this.elementsToRender = elementsToRender + this.arrayOfElements = (typeof elementsToRender === 'function') ? this.elementsToRender() : elementsToRender || [] + this.renderFn = renderFn + this.intersectionObserver + + this.batchSize = batchSize + this.freshRender = freshRender + + this.lazyContainer = document.querySelector(container) + + this.update = this.update.bind(this) + this.render = this.render.bind(this) + this.init = this.init.bind(this) + this.clear = this.clear.bind(this) + } + init() { + this.intersectionObserver = new IntersectionObserver((entries, observer) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + observer.disconnect() + this.render({ lazyLoad: true }) + } + }) + }, { + threshold: 0.3 + }) + this.mutationObserver = new MutationObserver(mutationList => { + mutationList.forEach(mutation => { + if (mutation.type === 'childList') { + if (mutation.addedNodes.length) { + this.intersectionObserver.observe(this.lazyContainer.lastElementChild) + } + } + }) + }) + this.mutationObserver.observe(this.lazyContainer, { + childList: true, + }) + this.render() + } + update(elementsToRender) { + this.arrayOfElements = (typeof elementsToRender === 'function') ? this.elementsToRender() : elementsToRender || [] + this.render() + } + render(options = {}) { + let { lazyLoad = false } = options + const frag = document.createDocumentFragment(); + if (lazyLoad) { + this.updateStartIndex = this.updateEndIndex + this.updateEndIndex = this.arrayOfElements.length > this.updateEndIndex + this.batchSize ? this.updateEndIndex + this.batchSize : this.arrayOfElements.length + } else { + this.intersectionObserver.disconnect() + this.lazyContainer.innerHTML = ``; + this.updateStartIndex = 0 + this.updateEndIndex = this.arrayOfElements.length > this.batchSize ? this.batchSize : this.arrayOfElements.length + } + for (let index = this.updateStartIndex; index < this.updateEndIndex; index++) { + frag.append(this.renderFn(this.arrayOfElements[index])) + } + this.lazyContainer.append(frag) + // Callback to be called if elements are updated or rendered for first time + if (!lazyLoad && this.freshRender) + this.freshRender() + } + clear() { + this.intersectionObserver.disconnect() + this.mutationObserver.disconnect() + this.lazyContainer.innerHTML = ``; + } + reset() { + this.arrayOfElements = (typeof this.elementsToRender === 'function') ? this.elementsToRender() : this.elementsToRender || [] + this.render() + } +} +function animateTo(element, keyframes, options) { + const anime = element.animate(keyframes, { ...options, fill: 'both' }) + anime.finished.then(() => { + anime.commitStyles() + anime.cancel() + }) + return anime +} +let isMobileView = false +const mobileQuery = window.matchMedia('(max-width: 40rem)') +function handleMobileChange(e) { + isMobileView = e.matches +} +mobileQuery.addEventListener('change', handleMobileChange) +handleMobileChange(mobileQuery) \ No newline at end of file