diff --git a/components.js b/components.js new file mode 100644 index 0000000..4bc3422 --- /dev/null +++ b/components.js @@ -0,0 +1,3088 @@ +//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() + } + + focusIn() { + this.shadowRoot.querySelector('input').focus() + } + + focusOut() { + this.shadowRoot.querySelector('input').blur() + } + + preventNonNumericalInput(e) { + let keyCode = e.keyCode; + if (!((keyCode > 47 && keyCode < 56) || (keyCode > 36 && keyCode < 39) || (keyCode > 95 && keyCode < 104) || keyCode === 110 || (keyCode > 7 && keyCode < 19))) { + e.preventDefault(); + } + } + + 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 !== '') { + 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.helperText = this.shadowRoot.querySelector('.helper-text') + this.valueChanged = false; + this.readonly = false + 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() + } + if (this.hasAttribute('required')) { + this.input.setAttribute('required', '') + } + if (this.hasAttribute('readonly')) { + this.input.setAttribute('readonly', '') + this.readonly = true + } + if (this.hasAttribute('helper-text')) { + this.helperText.textContent = this.getAttribute('helper-text') + } + if (this.hasAttribute('type')) { + if (this.getAttribute('type') === 'number') { + this.input.setAttribute('inputmode', 'numeric') + } + else + this.input.setAttribute('type', this.getAttribute('type')) + } + else + this.input.setAttribute('type', 'text') + this.input.addEventListener('keydown', e => { + if (this.getAttribute('type') === 'number') + this.preventNonNumericalInput(e); + }) + 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; + } + } + }) + +//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 !== '') { + 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') + } + + 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.helperText = this.shadowRoot.querySelector('.helper-text') + this.valueChanged = false; + this.readonly = 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.readonly = true + } + if (this.hasAttribute('helper-text')) { + this.helperText.textContent = this.getAttribute('helper-text') + } + this.input.addEventListener('keydown', e => { + if (this.getAttribute('type') === 'number') + this.preventNonNumericalInput(e); + }) + 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') + 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.bind(this)) + this.previousArrow.addEventListener('click', this.scrollLeft.bind(this)) + } + + disconnectedCallback() { + this.nextArrow.removeEventListener('click', this.scrollRight.bind(this)) + this.previousArrow.removeEventListener('click', this.scrollLeft.bind(this)) + } +}) + +// 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)) + } + + 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) { + this.setAttribute('open', '') + this.pinned = pinned + this.popupStack = popupStack + this.popupContainer.classList.remove('hide') + if (window.innerWidth < 648) + this.popup.style.transform = 'translateY(0)'; + else + this.popup.style.transform = 'scale(1)'; + document.body.setAttribute('style', `overflow: hidden; top: -${window.scrollY}px`) + } + hide() { + this.removeAttribute('open') + if (window.innerWidth < 648) + this.popup.style.transform = 'translateY(100%)'; + else + this.popup.style.transform = 'scale(0.9)'; + this.popupContainer.classList.add('hide') + if (typeof this.popupStack !== 'undefined') { + this.popupStack.pop() + if (this.popupStack.items.length === 0) { + 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); + } + } + + handleTouchStart(e) { + this.touchStartY = e.changedTouches[0].clientY + this.popup.style.transition = 'initial' + 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) { + this.hide() + } + else { + this.show() + } + } + else { + if (this.touchEndY > this.touchStartY) + 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.threshold = this.popup.getBoundingClientRect().height * 0.3 + this.touchEndAnimataion; + + if (this.hasAttribute('open')) + this.show() + this.popupContainer.addEventListener('mousedown', e => { + if (e.target === this.popupContainer && !this.pinned) { + this.hide() + } + }) + + this.popupBodySlot.addEventListener('slotchange', () => { + this.inputFields = this.popupBodySlot.assignedElements().filter(element => element.tagName === 'SM-INPUT' || element.tagName === 'SM-CHECKBOX' || element.tagName === 'TEXTAREA' || element.type === 'radio') + }) + + this.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.bind(this)) + this.popupHeader.removeEventListener('touchmove', this.handleTouchMove.bind(this)) + this.popupHeader.removeEventListener('touchend', this.handleTouchEnd.bind(this)) + } +}) + +//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)) + } + + 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.nextGradient = this.shadowRoot.querySelector('.right') + this.previousGradient = this.shadowRoot.querySelector('.left') + this.carouselItems + this.scrollDistance = this.carouselContainer.getBoundingClientRect().width / 3 + const firstElementObserver = new IntersectionObserver(entries => { + if (entries[0].isIntersecting) { + this.previousArrow.classList.remove('expand') + this.previousGradient.classList.add('hide') + } + else { + this.previousArrow.classList.add('expand') + this.previousGradient.classList.remove('hide') + } + }, { + root: this.carouselContainer, + threshold: 0.9 + }) + const lastElementObserver = new IntersectionObserver(entries => { + if (entries[0].isIntersecting) { + this.nextArrow.classList.remove('expand') + this.nextGradient.classList.add('hide') + } + else { + this.nextArrow.classList.add('expand') + this.nextGradient.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() + firstElementObserver.observe(this.carouselItems[0]) + lastElementObserver.observe(this.carouselItems[this.carouselItems.length - 1]) + }) + + this.addEventListener('keyup', e => { + if (e.code === 'ArrowLeft') + this.scrollRight() + else + this.scrollRight() + }) + + this.nextArrow.addEventListener('click', this.scrollRight.bind(this)) + this.previousArrow.addEventListener('click', this.scrollLeft.bind(this)) + } + + disconnectedCallback() { + this.nextArrow.removeEventListener('click', this.scrollRight.bind(this)) + this.previousArrow.removeEventListener('click', this.scrollLeft.bind(this)) + } +}) + +//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.bind(this)) + notification.addEventListener('touchmove', this.handleTouchMove.bind(this)) + notification.addEventListener('touchend', this.handleTouchEnd.bind(this)) + } + + 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/css/main.css b/css/main.css index 1d8e0aa..d211a2f 100644 --- a/css/main.css +++ b/css/main.css @@ -19,7 +19,6 @@ body { background: var(--foreground-color); color: rgba(var(--text-color), 1); font-size: 16px; - margin: 1.5rem; } a { @@ -52,9 +51,13 @@ h5 { font-size: 0.8rem; } -h1, h2, h3, h4, h5 { - font-family: "Manrope", sans-serif; - font-weight: 700; +h1, +h2, +h3, +h4, +h5 { + font-family: "Poppins", sans-serif; + font-weight: 600; } p { @@ -70,7 +73,7 @@ button { justify-content: center; text-transform: capitalize; padding: 0.6rem 1.2rem; - font-weight: 700; + font-weight: 600; cursor: pointer; border-radius: 0.3rem; color: var(--accent-color); @@ -78,7 +81,7 @@ button { border: none; background: rgba(var(--text-color), 0.1); -webkit-tap-highlight-color: transparent; - font-family: "Manrope", sans-serif; + font-family: "Poppins", sans-serif; } button:focus { outline: thin solid rgba(var(--text-color-light), 0.4); @@ -158,6 +161,18 @@ input:invalid { gap: 1em; } +.align-center { + align-items: center; +} + +.direction-column { + flex-direction: column; +} + +.space-between { + justify-content: space-between; +} + .label { margin-bottom: 0.4rem; } @@ -474,28 +489,35 @@ form { margin-bottom: 1.5rem !important; } -#confirmation, #prompt { +#confirmation, +#prompt { flex-direction: column; } -#confirmation p, #prompt p { +#confirmation p, +#prompt p { margin: 1rem; } -#confirmation h4, #prompt h4 { +#confirmation h4, +#prompt h4 { font-weight: 500; margin-bottom: 1.5rem; } -#confirmation .input, #prompt .input { +#confirmation .input, +#prompt .input { margin-bottom: 1rem; } -#confirmation .btns, #prompt .btns { +#confirmation .btns, +#prompt .btns { display: flex; justify-content: right; width: 100%; } -#confirmation .btns button, #prompt .btns button { +#confirmation .btns button, +#prompt .btns button { background: none; } -#confirmation .btns button:first-of-type, #prompt .btns button:first-of-type { +#confirmation .btns button:first-of-type, +#prompt .btns button:first-of-type { margin-right: 0.6em; } @@ -530,21 +552,11 @@ form { #main_header { align-items: center; - padding: 1em 0; + padding: 1rem; justify-content: space-between; } -#main_header #display_balance { - display: grid; - grid-template-columns: 1fr auto; - grid-template-areas: "title title" " . ."; - gap: 0.3rem 0.5rem; - align-items: center; - text-align: right; -} -#main_header #display_balance h5 { - grid-area: title; -} -#main_header #display_balance .icon { + +#display_balance .icon { height: 1.4rem; width: 1.4rem; padding: 0.3rem; @@ -607,66 +619,114 @@ form { stroke-width: 4; } -#home_page h1 { - margin-bottom: 0; - font-weight: 800; +#home_page { + padding: 1rem 0 4rem 0; +} +#home_page .left h4 { + padding: 0 1.5rem; +} +#home_page sm-carousel::part(carousel) { + padding: 0 1.5rem; } #home_page p { margin-bottom: 3rem; } -#home_page h2 { - margin-bottom: 1rem; + +#user_panel { + position: relative; + padding: 1.5rem; + margin: 0 1.5rem; + border-radius: 0.6rem; + background: linear-gradient(160deg, #ffffff10 50%, #00000040 80%), linear-gradient(-120deg, #ffffff10 50%, #00000040 10%), rgba(var(--text-color), 0.8); + box-shadow: 0 0.1rem 0.6rem #00000020; + color: rgba(var(--foreground-color), 1); +} +#user_panel .icon { + stroke: rgba(var(--foreground-color), 1); +} +#user_panel::before, #user_panel::after { + content: ""; + position: absolute; + height: 2rem; + bottom: 0.8rem; + box-shadow: 0 1rem 0.2rem #00000030; + z-index: -1; + border-radius: 0.4rem; +} +#user_panel::before { + left: 0; + right: 50%; + transform: rotate(-3deg); +} +#user_panel::after { + left: 50%; + right: 0; + transform: rotate(3deg); +} +#user_panel .copy-row { + margin-bottom: 1.5rem; +} +#user_panel .grid { + margin-top: 0.5rem; + grid-template-columns: 1fr 1fr; +} +#user_panel .grid h5 { + font-weight: 500; + color: rgba(var(--foreground-color), 0.8); +} + +#user_type { + font-weight: 500; + color: rgba(var(--foreground-color), 0.9); } .options-tab { - display: flex; - margin-top: 1rem; - margin-bottom: 1rem; - flex-wrap: wrap; + margin: 1rem 0; } .options-tab .option { - display: inline-flex; + position: relative; + display: flex; flex-direction: column; + align-items: center; + text-align: center; border-radius: 0.4rem; - padding: 1.5rem; margin-right: 1rem; margin-bottom: 1rem; - width: 10rem; - box-shadow: 0 1px 0.1rem #00000030, 0 0 0.4rem #00000016; + width: 5rem; + min-width: 5rem; text-transform: capitalize; transition: transform 0.3s; cursor: pointer; } .options-tab .option .icon { - height: 2.8rem; - width: 2.8rem; + height: 3rem; + width: 3rem; padding: 0.8rem; - border-radius: 2rem; - margin-bottom: 1rem; - stroke: rgba(var(--text-color), 0.4); + border-radius: 4rem; + margin-bottom: 0.5rem; + stroke: rgba(var(--foreground-color), 1); +} +.options-tab .option h4 { + font-size: 0.9rem; + font-weight: 500; } .options-tab .option:active { transform: scale(0.95); } .options-tab .option:nth-of-type(1) .icon { - background: #ffe5ea; - stroke: #af0f2c; + background: #D32F2F; } .options-tab .option:nth-of-type(2) .icon { - background: #fff9d5; - stroke: #e69620; + background: #7B1FA2; } .options-tab .option:nth-of-type(3) .icon { - background: #e5ffe3; - stroke: #189b0f; + background: #303F9F; } .options-tab .option:nth-of-type(4) .icon { - background: #e4fbff; - stroke: #0b8ea5; + background: #1976D2; } .options-tab .option:nth-of-type(5) .icon { - background: #efe5ff; - stroke: #10359b; + background: #388E3C; } .notification-dot::after { @@ -686,7 +746,8 @@ form { transform: scale(0); } -#deposit .container-header, #withdraw .container-header { +#deposit .container-header, +#withdraw .container-header { background: linear-gradient(rgba(var(--foreground-color), 1) 90%, transparent); } @@ -708,7 +769,8 @@ sm-tab-header { margin-bottom: 0.2rem; text-transform: capitalize; } -.request h3, .request h4 { +.request h3, +.request h4 { margin-bottom: 1.5rem; } .request h4:last-of-type { @@ -763,11 +825,11 @@ sm-tab-header { display: grid; gap: 1em; width: 100%; - grid-template-columns: 1fr; + grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); } .page { - padding: 2rem 0; + padding: 1rem 1.5rem; padding-bottom: 4rem; } .page .container-header { @@ -850,7 +912,8 @@ sm-tab-header { .complaint .unprocessed { color: #d43125; } -.complaint .processed, .complaint .unprocessed { +.complaint .processed, +.complaint .unprocessed { margin-bottom: 1.5rem; } .complaint button .icon { @@ -874,7 +937,8 @@ sm-tab-header { .complaint-placeholder { animation: pulse infinite 0.6s alternate; } -.complaint-placeholder h4, .complaint-placeholder h5 { +.complaint-placeholder h4, +.complaint-placeholder h5 { border-radius: 0.2rem; } .complaint-placeholder h5 { @@ -897,14 +961,56 @@ sm-tab-header { opacity: 1; } } +#main_loader { + box-shadow: none; + background: none; + text-align: center; + align-items: center; + flex-direction: column; +} +#main_loader button { + margin-left: 0; + margin-top: 1.5rem; +} +#main_loader svg { + height: 2rem; + width: 2rem; + stroke: var(--accent-color); + stroke-width: 6; + fill: none; + overflow: visible; + stroke-linecap: round; + stroke-dashoffset: 210; + stroke-dasharray: 210; + justify-self: center; + align-self: center; + margin-bottom: 2rem; +} +#main_loader h3 { + width: 100%; + text-transform: uppercase; + font-weight: 400; + word-spacing: 0.16em; +} + @media only screen and (max-width: 640px) { + #home_page { + display: grid; + gap: 1.5rem; + grid-template-areas: "." "left"; + grid-template-columns: minmax(0, 1fr); + } + #home_page .left { + grid-area: left; + } + sm-select { width: 100%; } } @media only screen and (min-width: 640px) { body { - padding: 1rem 6vw; + padding: 0 2rem; margin-left: 6rem; } @@ -920,10 +1026,6 @@ sm-tab-header { width: 24rem; } - .container { - grid-template-columns: repeat(2, 1fr); - } - #navbar { justify-content: center; flex-direction: column; @@ -968,52 +1070,21 @@ sm-tab-header { #sign_in_popup { width: 24rem; } -} -#profile_page .copy-row { - display: inline-flex; -} -#main_loader { - box-shadow: none; - background: none; - text-align: center; - align-items: center; - flex-direction: column; -} -#main_loader button { - margin-left: 0; - margin-top: 1.5rem; -} -#main_loader svg { - height: 2rem; - width: 2rem; - stroke: var(--accent-color); - stroke-width: 6; - fill: none; - overflow: visible; - stroke-linecap: round; - stroke-dashoffset: 210; - stroke-dasharray: 210; - justify-self: center; - align-self: center; - margin-bottom: 2rem; -} -#main_loader h3 { - width: 100%; - text-transform: uppercase; - font-weight: 400; - word-spacing: 0.16em; -} - -#activity_page sm-tab-header { - margin-bottom: 1rem; -} - -@media only screen and (min-width: 800px) { - .container { - grid-template-columns: repeat(3, 1fr); + #profile_page .copy-row { + display: inline-flex; } + #home_page { + display: grid; + gap: 1.5rem; + grid-template-columns: minmax(0, 1fr) 24rem; + } + #activity_page sm-tab-header { + margin-bottom: 1rem; + } +} +@media only screen and (min-width: 800px) { .complaint { gap: 0 1.5rem; grid-template-columns: 1fr 1fr; @@ -1034,25 +1105,14 @@ sm-tab-header { flex-direction: column; } } -@media only screen and (min-width: 1280px) { - body { - padding: 1rem 12vw; - } -} @media only screen and (min-width: 1920px) { body { font-size: 24px; - padding: 2rem 20vw; - } - - .container { - grid-template-columns: repeat(4, 1fr); } } @media only screen and (min-width: 2048px) { body { font-size: 24px; - padding: 2rem 30vw; } } @media only screen and (max-width: 320px) { diff --git a/css/main.min.css b/css/main.min.css index ba4667a..4cca7e7 100644 --- a/css/main.min.css +++ b/css/main.min.css @@ -1 +1 @@ -#main_loader svg,.icon,.loader{fill:none;overflow:visible}.action,button{position:relative}*{box-sizing:border-box;padding:0;margin:0;font-family:Roboto,sans-serif}button,h1,h2,h3,h4,h5{font-family:Manrope,sans-serif}:root{scroll-behavior:smooth}body{--accent-color:#303F9F;--text-color:17,17,17;--text-color-light:85,85,85;--foreground-color:255,255,255;--background-color:#e8e8e8;--dark-shade:#dadada;background:var(--foreground-color);color:rgba(var(--text-color),1);font-size:16px;margin:1.5rem}a{font-weight:600;text-decoration:none;color:var(--accent-color)}.dark-text{color:#111}h1{font-size:3.5rem}h2{font-size:2rem}h3{font-size:1.5rem}h4{font-size:1rem}h5{font-size:.8rem}h1,h2,h3,h4,h5{font-weight:700}p{line-height:1.5;max-width:60ch;color:rgba(var(--text-color),.9)}button{display:inline-flex;align-items:center;justify-content:center;text-transform:capitalize;padding:.6rem 1.2rem;font-weight:700;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),.5)}.action,.action[disabled] .primary-btn{background:0 0}button:disabled~.loader{opacity:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.request .flex,.request button,.top-margin{margin-top:1.5rem}input[type=text]::-ms-clear{display:none;width:0;height:0}input[type=text]::-ms-reveal{display:none;width:0;height:0}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{display:none}input[type=number]{-moz-appearance:textfield}input:invalid{outline:0;box-shadow:none}::-moz-focus-inner{border:none}.bottom-padding{padding-bottom:1.5rem}.top-padding{padding-top:1em}.bottom-margin{margin-bottom:1.5rem}.flex{display:flex}.grid{display:grid}.grid-2{grid-template-columns:auto auto;gap:1em}.label{margin-bottom:.4rem}.light-text{color:rgba(var(--text-color-light),1)}.hide{opacity:0;pointer-events:none}.hide-completely{display:none!important}.breakable{word-break:break-all}.separator{padding:.1em}.no-transformations{transform:none!important}.loader{stroke-width:10;stroke:var(--accent-color);height:2rem;width:2rem;stroke-dashoffset:230;stroke-dasharray:230;padding:2px;justify-self:center}#logo,.action{align-items:center}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes load{50%{stroke-dashoffset:0}100%{stroke-dashoffset:-210}}.action{display:inline-flex;justify-content:center;padding:0}#sign_in_popup .input,.input,textarea{background:rgba(var(--text-color),.1)}.action h4{padding:.5rem .8rem;font-size:.9rem;clip-path:circle(100%);transition:clip-path .3s;border-radius:.2rem}.action .btn{z-index:2}.action .loader{position:absolute;z-index:1;padding:.4em}.clip{clip-path:circle(0)!important}.animate-loader{animation:load 2.6s infinite,rotate 1s infinite linear}.expand{width:100%}.fade-left{animation:fadeleft .3s}.fade-right{animation:faderight .3s}@keyframes faderight{from{opacity:0;transform:translateX(-1em)}to{opacity:1;transform:none}}@keyframes fadeleft{from{opacity:0;transform:translateX(1em)}to{opacity:1;transform:none}}#logo{display:inline-grid;grid-template-columns:auto 1fr;gap:.6rem .4rem;margin-right:1rem}#logo h4{letter-spacing:.06rem;word-spacing:.12rem}#logo h5{font-weight:400}#logo #main_logo{height:1.6rem;width:1.6rem;fill:rgba(var(--text-color),1);stroke:none}textarea{width:100%;max-width:100%;border:none;border-radius:.2rem;resize:none;font-size:1rem;line-height:1.6;padding:.8rem}.input{display:flex;width:100%;align-items:center;position:relative;padding:.8em;margin-bottom:1.5em;border-radius:.2rem;border:.1em solid transparent;cursor:text}.input:last-of-type{margin-bottom:0}.input:focus-within{border:.1em solid var(--accent-color)}.input .placeholder{opacity:.6;font-weight:500;font-size:1em;position:absolute;transition:transform .3s ease;transform-origin:left;pointer-events:none;will-change:contents;text-transform:capitalize}.input input{flex:1;font-size:1rem;border:none;background:0 0;outline:0;color:rgba(var(--text-color),1)}.animate-label input{transform:translateY(.5em)}.animate-label .placeholder{transform:translateY(-60%) scale(.7);opacity:1;color:var(--accent-color)}.btn,.primary-btn{color:rgba(var(--foreground-color),1)}.container:empty~.empty{display:grid}.empty{display:none;place-items:center;width:100%}.empty svg{stroke:rgba(var(--text-color),.8);height:12em;width:12em}.container-header{display:flex;align-items:center;flex-direction:row;width:100%;padding:1rem 0}.container-header h2{flex:1}.container-header button{align-self:center}.btn{background:var(--accent-color);padding:.4em 1em}.back-arrow{stroke:rgba(var(--text-color),1);stroke-width:6;fill:none;height:2rem;padding:.5rem .5rem .5rem 0;cursor:pointer}.card{border-radius:.6rem;padding:1.5em;background:rgba(var(--foreground-color),1)}.solid-background{background:rgba(var(--foreground-color),1)!important}form{width:100%}.popup-container{display:grid;position:fixed;top:0;bottom:0;left:0;right:0;place-items:center;background:rgba(0,0,0,.4);z-index:10;transition:opacity .3s ease}.popup-container .popup{flex-direction:column;align-self:flex-end;align-items:flex-start;flex-wrap:wrap;width:100%;border-radius:.5rem .5rem 0 0;padding:1.5rem;position:relative;display:flex;background:rgba(var(--foreground-color),1);transform:translateY(100%);transition:transform .3s;box-shadow:0 2rem 2rem rgba(0,0,0,.24);overflow-y:auto}.popup-container .popup h5{margin:.5rem 0}.popup-container .popup button:first-of-type{margin-left:auto}.popup-container .popup .container-header{display:flex;align-items:center;padding:0;margin-bottom:1rem}.popup-container .popup .container-header h4{flex:1}.popup-container .popup .container-header button{width:auto}.popup-container .popup .container-header .icon{cursor:pointer;padding-right:.4rem;margin-right:.3rem;stroke-width:8}.popup-container .popup p{margin-bottom:1.5rem!important}#confirmation,#prompt{flex-direction:column}#confirmation p,#prompt p{margin:1rem}#confirmation h4,#prompt h4{font-weight:500;margin-bottom:1.5rem}#confirmation .input,#prompt .input{margin-bottom:1rem}#confirmation .btns,#prompt .btns{display:flex;justify-content:right;width:100%}#confirmation .btns button,#prompt .btns button{background:0 0}#confirmation .btns button:first-of-type,#prompt .btns button:first-of-type{margin-right:.6em}.refresh{margin-top:.6em;margin-bottom:1em}#sign_in_popup h1{margin-top:2rem}#sign_in_popup h4{font-weight:500;margin-bottom:3rem}#sign_in_popup button{margin:1rem 0}#sign_in_popup p{margin-top:1rem;margin-bottom:0!important}.primary-btn{background:var(--accent-color);justify-content:center}#main_header{align-items:center;padding:1em 0;justify-content:space-between}#main_header #display_balance{display:grid;grid-template-columns:1fr auto;grid-template-areas:"title title" " . .";gap:.3rem .5rem;align-items:center;text-align:right}#main_header #display_balance h5{grid-area:title}#main_header #display_balance .icon{height:1.4rem;width:1.4rem;padding:.3rem;stroke-width:10;cursor:pointer}.icon{height:1.2rem;width:1.2rem;stroke:rgba(var(--text-color),.8);stroke-width:6;stroke-linecap:round;stroke-linejoin:round}#navbar{display:flex;flex-direction:row;align-items:center;justify-content:space-evenly;position:fixed;left:0;right:0;bottom:0;top:auto;border-top:solid 1px rgba(var(--text-color),.2);border-right:none;z-index:3;background:rgba(var(--foreground-color),1)}#navbar .navbar-item{position:relative;text-align:center;cursor:pointer;padding:.3em;margin:.3em;border-radius:.4em;color:rgba(var(--text-color),.8);font-size:.9em;text-transform:uppercase;width:100%;letter-spacing:.08em}#navbar .navbar-item h5{font-size:.6em;margin-top:.4em;font-weight:700}#navbar .active{color:var(--accent-color)}#navbar .active .icon{stroke:var(--accent-color)}.banking{stroke-width:4}#home_page h1{margin-bottom:0;font-weight:800}#home_page p{margin-bottom:3rem}#home_page h2{margin-bottom:1rem}.options-tab{display:flex;margin-top:1rem;margin-bottom:1rem;flex-wrap:wrap}.options-tab .option{display:inline-flex;flex-direction:column;border-radius:.4rem;padding:1.5rem;margin-right:1rem;margin-bottom:1rem;width:10rem;box-shadow:0 1px .1rem #00030,0 0 .4rem #00016;text-transform:capitalize;transition:transform .3s;cursor:pointer}.options-tab .option .icon{height:2.8rem;width:2.8rem;padding:.8rem;border-radius:2rem;margin-bottom:1rem;stroke:rgba(var(--text-color),.4)}.options-tab .option:active{transform:scale(.95)}.options-tab .option:nth-of-type(1) .icon{background:#ffe5ea;stroke:#af0f2c}.options-tab .option:nth-of-type(2) .icon{background:#fff9d5;stroke:#e69620}.options-tab .option:nth-of-type(3) .icon{background:#e5ffe3;stroke:#189b0f}.options-tab .option:nth-of-type(4) .icon{background:#e4fbff;stroke:#0b8ea5}.options-tab .option:nth-of-type(5) .icon{background:#efe5ff;stroke:#10359b}.notification-dot::after{content:"";position:absolute;z-index:1;top:0;right:0;height:.6em;width:.6em;background-color:#E53935;border-radius:.4em;transition:transform .3s}.shrink.notification-dot::after{transform:scale(0)}#deposit .container-header,#withdraw .container-header{background:linear-gradient(rgba(var(--foreground-color),1) 90%,transparent)}.page .container-header,sm-tab-header{top:0;background:rgba(var(--foreground-color),1)}sm-tab-header{position:sticky;z-index:1}.request{display:inline-flex;flex-direction:column;padding:1.5em;border-radius:.4em;border:1px solid}.request h5{margin-bottom:.2rem;text-transform:capitalize}.request h3,.request h4{margin-bottom:1.5rem}.copy-row h4,.request button{margin-bottom:0}.request h4:last-of-type{margin-bottom:0}.request .action{align-self:flex-end}.request .amount{font-size:1.4em}.request button{width:auto;align-self:flex-end}.request .copy-row{margin-bottom:1.5rem}.request .flex{align-items:center;justify-content:flex-end}.request .flex button,.request .flex h5{margin:0}.deposited{color:#007732}.deposited::before{content:"+ "}.decline-request{margin-right:.5rem!important}.withdrawn{color:#d43125}.withdrawn::before{content:"- "}.container{display:grid;gap:1em;width:100%;grid-template-columns:1fr}.copy-row,.page .container-header{display:grid;grid-template-columns:1fr auto}.page{padding:2rem 0;padding-bottom:4rem}.page .container-header{grid-template-areas:". ." "search search";gap:1rem;will-change:auto;z-index:2}.page .container-header .search{grid-area:search}.page .container-header .search input{padding:1em;border:none;width:100%;background:var(--dark-shade);font-size:1rem;font-weight:500;color:rgba(var(--text-color),1);border-radius:.2em}.page .container-header .search input:focus{outline:0;background:rgba(var(--text-color-light),.2)}.copy-row{align-items:center;gap:.5rem}.copy-row .icon{cursor:pointer;padding:.4rem;height:1.8rem;width:1.8rem}.copy-row .copy{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.time{margin-bottom:1.5rem!important;font-weight:500}#report_popup{width:32rem}#profile_page{display:flex;flex-direction:column}#profile_page button{align-self:flex-start}.complaint{display:grid;gap:1.5rem 0}.complaint .complaint-actions{align-items:center;margin:1.5rem 0 0}#helpline_page sm-select,.complaint .processed,.complaint .unprocessed{margin-bottom:1.5rem}.complaint .processed{color:#007732}.complaint .unprocessed{color:#d43125}.complaint button .icon{padding:.2rem;margin-right:.5rem;stroke:var(--accent-color);stroke-width:8}.complaints-container{padding-top:1.5rem;display:grid;align-items:flex-start;gap:1.5rem}.complaint-placeholder{animation:pulse infinite .6s alternate}.complaint-placeholder h4,.complaint-placeholder h5{border-radius:.2rem}.complaint-placeholder h5{background:rgba(var(--text-color),.1);padding:.5rem .6rem}.complaint-placeholder h4{background:rgba(var(--text-color),.2);padding:.8rem}.complaint-placeholder .demo-btn{padding:.8rem 3rem}@keyframes pulse{from{opacity:.4}to{opacity:1}}@media only screen and (max-width:640px){sm-select{width:100%}}@media only screen and (min-width:640px){body{padding:1rem 6vw;margin-left:6rem}.popup-container .popup{transform:translateY(0) scale(.96);width:24rem;align-self:center;border-radius:.4rem;height:auto}#confirmation{width:24rem}.container{grid-template-columns:repeat(2,1fr)}#navbar{justify-content:center;flex-direction:column;align-items:stretch;left:0;bottom:0;top:0;right:auto;width:6rem;border-top:none;border-right:solid 1px rgba(var(--text-color),.2)}#navbar .navbar-item{width:auto;padding:1.4em 0;margin:.6em}#navbar .navbar-item .icon{height:1.4rem;width:1.4rem}#navbar .navbar-item h5{font-size:.8em}#navbar .navbar-item:hover .icon{stroke:rgba(var(--text-color),1)}#navbar .navbar-item:hover h5{color:rgba(var(--text-color),1)}#navbar .navbar-item.active:hover .icon{stroke:var(--accent-color)}#navbar .navbar-item.active:hover h5{color:var(--accent-color)}.page{padding-bottom:2em}#sign_in_popup{width:24rem}}#profile_page .copy-row{display:inline-flex}#main_loader{box-shadow:none;background:0 0;text-align:center;align-items:center;flex-direction:column}#main_loader button{margin-left:0;margin-top:1.5rem}#main_loader svg{height:2rem;width:2rem;stroke:var(--accent-color);stroke-width:6;stroke-linecap:round;stroke-dashoffset:210;stroke-dasharray:210;justify-self:center;align-self:center;margin-bottom:2rem}#main_loader h3{width:100%;text-transform:uppercase;font-weight:400;word-spacing:.16em}#activity_page sm-tab-header{margin-bottom:1rem}@media only screen and (min-width:800px){.container{grid-template-columns:repeat(3,1fr)}.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}}@media only screen and (min-width:1280px){body{padding:1rem 12vw}}@media only screen and (min-width:1920px){body{font-size:24px;padding:2rem 20vw}.container{grid-template-columns:repeat(4,1fr)}}@media only screen and (min-width:2048px){body{font-size:24px;padding:2rem 30vw}}@media only screen and (max-width:320px){body{font-size:14px}}@media (prefers-color-scheme:dark){:root{--text-color:238,238,238;--text-color-light:170,170,170;--foreground-color:26,26,26;--background-color:#111;--dark-shade:#1a1a1a}}@media (prefers-color-scheme:light){:root{--text-color:17,17,17;--text-color-light:85,85,85;--foreground-color:255,255,255;--background-color:#e8e8e8;--dark-shade:#dadada}}@media (prefers-color-scheme:no-preference){:root{--text-color:17,17,17;--text-color-light:85,85,85;--foreground-color:255,255,255;--background-color:#e8e8e8;--dark-shade:#dadada}} \ No newline at end of file +.input input,body{color:rgba(var(--text-color),1)}.input,button,textarea{background:rgba(var(--text-color),.1)}.action,.input,button{position:relative}.input .placeholder,.options-tab .option,.request h5,button{text-transform:capitalize}*{box-sizing:border-box;padding:0;margin:0;font-family:Roboto,sans-serif}button,h1,h2,h3,h4,h5{font-weight:600;font-family:Poppins,sans-serif}:root{scroll-behavior:smooth}body{--accent-color:#303F9F;--text-color:17,17,17;--text-color-light:85,85,85;--foreground-color:255,255,255;--background-color:#e8e8e8;--dark-shade:#dadada;background:var(--foreground-color);font-size:16px}a{font-weight:600;text-decoration:none;color:var(--accent-color)}.dark-text{color:#111}h1{font-size:3.5rem}h2{font-size:2rem}h3{font-size:1.5rem}h4{font-size:1rem}h5{font-size:.8rem}p{line-height:1.5;max-width:60ch;color:rgba(var(--text-color),.9)}button{display:inline-flex;align-items:center;justify-content:center;padding:.6rem 1.2rem;cursor:pointer;border-radius:.3rem;color:var(--accent-color);transition:transform .3s;border:none;-webkit-tap-highlight-color:transparent}button:focus{outline:solid thin}button:disabled{cursor:default;background:rgba(var(--text-color),.5)}.action,.action[disabled] .primary-btn{background:0 0}button:disabled~.loader{opacity:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=text]::-ms-clear{display:none;width:0;height:0}input[type=text]::-ms-reveal{display:none;width:0;height:0}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{display:none}input[type=number]{-moz-appearance:textfield}input:invalid{outline:0;box-shadow:none}::-moz-focus-inner{border:none}.bottom-padding{padding-bottom:1.5rem}.top-padding{padding-top:1em}.bottom-margin{margin-bottom:1.5rem}.top-margin{margin-top:1.5rem}.flex{display:flex}.grid{display:grid}.grid-2{grid-template-columns:auto auto;gap:1em}.align-center{align-items:center}.direction-column{flex-direction:column}.space-between{justify-content:space-between}.label{margin-bottom:.4rem}.light-text{color:rgba(var(--text-color-light),1)}.hide{opacity:0;pointer-events:none}.hide-completely{display:none!important}.action,.request{display:inline-flex}.breakable{word-break:break-all}.separator{padding:.1em}.no-transformations{transform:none!important}.loader{fill:none;stroke-width:10;stroke:var(--accent-color);height:2rem;width:2rem;overflow:visible;stroke-dashoffset:230;stroke-dasharray:230;padding:2px;justify-self:center}#logo,.action{align-items:center}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes load{50%{stroke-dashoffset:0}100%{stroke-dashoffset:-210}}.action{justify-content:center;padding:0}.action h4{padding:.5rem .8rem;font-size:.9rem;clip-path:circle(100%);transition:clip-path .3s;border-radius:.2rem}.action .btn{z-index:2}.action .loader{position:absolute;z-index:1;padding:.4em}.clip{clip-path:circle(0)!important}.animate-loader{animation:load 2.6s infinite,rotate 1s infinite linear}.expand{width:100%}.fade-left{animation:fadeleft .3s}.fade-right{animation:faderight .3s}@keyframes faderight{from{opacity:0;transform:translateX(-1em)}to{opacity:1;transform:none}}@keyframes fadeleft{from{opacity:0;transform:translateX(1em)}to{opacity:1;transform:none}}#logo{display:inline-grid;grid-template-columns:auto 1fr;gap:.6rem .4rem;margin-right:1rem}#logo h4{letter-spacing:.06rem;word-spacing:.12rem}#logo h5{font-weight:400}#logo #main_logo{height:1.6rem;width:1.6rem;fill:rgba(var(--text-color),1);stroke:none}textarea{width:100%;max-width:100%;border:none;border-radius:.2rem;resize:none;font-size:1rem;line-height:1.6;padding:.8rem}.input{display:flex;width:100%;align-items:center;padding:.8em;margin-bottom:1.5em;border-radius:.2rem;border:.1em solid transparent;cursor:text}.input:last-of-type{margin-bottom:0}.input:focus-within{border:.1em solid var(--accent-color)}.input .placeholder{opacity:.6;font-weight:500;font-size:1em;position:absolute;transition:transform .3s ease;transform-origin:left;pointer-events:none;will-change:contents}.input input{flex:1;font-size:1rem;border:none;background:0 0;outline:0}.animate-label input{transform:translateY(.5em)}.animate-label .placeholder{transform:translateY(-60%) scale(.7);opacity:1;color:var(--accent-color)}.btn,.primary-btn{color:rgba(var(--foreground-color),1)}.container:empty~.empty{display:grid}.empty{display:none;place-items:center;width:100%}.empty svg{stroke:rgba(var(--text-color),.8);height:12em;width:12em}.container-header{display:flex;align-items:center;flex-direction:row;width:100%;padding:1rem 0}.container-header h2{flex:1}.container-header button{align-self:center}.btn{background:var(--accent-color);padding:.4em 1em}.back-arrow{stroke:rgba(var(--text-color),1);stroke-width:6;fill:none;height:2rem;padding:.5rem .5rem .5rem 0;cursor:pointer}.card{border-radius:.6rem;padding:1.5em;background:rgba(var(--foreground-color),1)}.solid-background{background:rgba(var(--foreground-color),1)!important}form{width:100%}.popup-container{display:grid;position:fixed;top:0;bottom:0;left:0;right:0;place-items:center;background:rgba(0,0,0,.4);z-index:10;transition:opacity .3s ease}.popup-container .popup{flex-direction:column;align-self:flex-end;align-items:flex-start;flex-wrap:wrap;width:100%;border-radius:.5rem .5rem 0 0;padding:1.5rem;position:relative;display:flex;background:rgba(var(--foreground-color),1);transform:translateY(100%);transition:transform .3s;box-shadow:0 2rem 2rem rgba(0,0,0,.24);overflow-y:auto}.popup-container .popup h5{margin:.5rem 0}.popup-container .popup button:first-of-type{margin-left:auto}.popup-container .popup .container-header{display:flex;align-items:center;padding:0;margin-bottom:1rem}.popup-container .popup .container-header h4{flex:1}.popup-container .popup .container-header button{width:auto}.popup-container .popup .container-header .icon{cursor:pointer;padding-right:.4rem;margin-right:.3rem;stroke-width:8}.popup-container .popup p{margin-bottom:1.5rem!important}#confirmation,#prompt{flex-direction:column}#confirmation p,#prompt p{margin:1rem}#confirmation h4,#prompt h4{font-weight:500;margin-bottom:1.5rem}#confirmation .input,#prompt .input{margin-bottom:1rem}#confirmation .btns,#prompt .btns{display:flex;justify-content:right;width:100%}#confirmation .btns button,#prompt .btns button{background:0 0}#confirmation .btns button:first-of-type,#prompt .btns button:first-of-type{margin-right:.6em}.refresh{margin-top:.6em;margin-bottom:1em}#sign_in_popup h1{margin-top:2rem}#sign_in_popup h4{font-weight:500;margin-bottom:3rem}#sign_in_popup button{margin:1rem 0}#sign_in_popup p{margin-top:1rem;margin-bottom:0!important}#sign_in_popup .input{background:rgba(var(--text-color),.1)}.primary-btn{background:var(--accent-color);justify-content:center}#main_header{align-items:center;padding:1rem;justify-content:space-between}#display_balance .icon{height:1.4rem;width:1.4rem;padding:.3rem;stroke-width:10;cursor:pointer}.icon{height:1.2rem;width:1.2rem;fill:none;stroke:rgba(var(--text-color),.8);stroke-width:6;overflow:visible;stroke-linecap:round;stroke-linejoin:round}#navbar{display:flex;flex-direction:row;align-items:center;justify-content:space-evenly;position:fixed;left:0;right:0;bottom:0;top:auto;border-top:solid 1px rgba(var(--text-color),.2);border-right:none;z-index:3;background:rgba(var(--foreground-color),1)}#navbar .navbar-item{position:relative;text-align:center;cursor:pointer;padding:.3em;margin:.3em;border-radius:.4em;color:rgba(var(--text-color),.8);font-size:.9em;text-transform:uppercase;width:100%;letter-spacing:.08em}#navbar .navbar-item h5{font-size:.6em;margin-top:.4em;font-weight:700}#navbar .active{color:var(--accent-color)}#navbar .active .icon{stroke:var(--accent-color)}.banking{stroke-width:4}#user_panel .icon,.options-tab .option .icon{stroke:rgba(var(--foreground-color),1)}#home_page{padding:1rem 0 4rem}#home_page .left h4,#home_page sm-carousel::part(carousel){padding:0 1.5rem}#home_page p{margin-bottom:3rem}#user_panel{position:relative;padding:1.5rem;margin:0 1.5rem;border-radius:.6rem;background:linear-gradient(160deg,#fff10 50%,#00040 80%),linear-gradient(-120deg,#fff10 50%,#00040 10%),rgba(var(--text-color),.8);box-shadow:0 .1rem .6rem #00020;color:rgba(var(--foreground-color),1)}#user_panel::after,#user_panel::before{content:"";position:absolute;height:2rem;bottom:.8rem;box-shadow:0 1rem .2rem #00030;z-index:-1;border-radius:.4rem}#user_panel::before{left:0;right:50%;transform:rotate(-3deg)}#user_panel::after{left:50%;right:0;transform:rotate(3deg)}#user_panel .copy-row{margin-bottom:1.5rem}#user_panel .grid{margin-top:.5rem;grid-template-columns:1fr 1fr}#user_panel .grid h5{font-weight:500;color:rgba(var(--foreground-color),.8)}#user_type{font-weight:500;color:rgba(var(--foreground-color),.9)}.options-tab{margin:1rem 0}.options-tab .option{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;border-radius:.4rem;margin-right:1rem;margin-bottom:1rem;width:5rem;min-width:5rem;transition:transform .3s;cursor:pointer}.options-tab .option .icon{height:3rem;width:3rem;padding:.8rem;border-radius:4rem;margin-bottom:.5rem}.options-tab .option h4{font-size:.9rem;font-weight:500}.options-tab .option:active{transform:scale(.95)}.options-tab .option:nth-of-type(1) .icon{background:#D32F2F}.options-tab .option:nth-of-type(2) .icon{background:#7B1FA2}.options-tab .option:nth-of-type(3) .icon{background:#303F9F}.options-tab .option:nth-of-type(4) .icon{background:#1976D2}.options-tab .option:nth-of-type(5) .icon{background:#388E3C}.notification-dot::after{content:"";position:absolute;z-index:1;top:0;right:0;height:.6em;width:.6em;background-color:#E53935;border-radius:.4em;transition:transform .3s}.shrink.notification-dot::after{transform:scale(0)}#deposit .container-header,#withdraw .container-header{background:linear-gradient(rgba(var(--foreground-color),1) 90%,transparent)}.page .container-header,sm-tab-header{top:0;background:rgba(var(--foreground-color),1)}sm-tab-header{position:sticky;z-index:1}.request{flex-direction:column;padding:1.5em;border-radius:.4em;border:1px solid}.request h5{margin-bottom:.2rem}.request h3,.request h4{margin-bottom:1.5rem}.copy-row h4,.request button{margin-bottom:0}.request h4:last-of-type{margin-bottom:0}.request .action{align-self:flex-end}.request .amount{font-size:1.4em}.request button{width:auto;align-self:flex-end;margin-top:1.5rem}.request .copy-row{margin-bottom:1.5rem}.request .flex{align-items:center;justify-content:flex-end;margin-top:1.5rem}.request .flex button,.request .flex h5{margin:0}.deposited{color:#007732}.deposited::before{content:"+ "}.decline-request{margin-right:.5rem!important}.withdrawn{color:#d43125}.withdrawn::before{content:"- "}.container{display:grid;gap:1em;width:100%;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr))}.copy-row,.page .container-header{display:grid;grid-template-columns:1fr auto}.page{padding:1rem 1.5rem;padding-bottom:4rem}.page .container-header{grid-template-areas:". ." "search search";gap:1rem;will-change:auto;z-index:2}.page .container-header .search{grid-area:search}.page .container-header .search input{padding:1em;border:none;width:100%;background:var(--dark-shade);font-size:1rem;font-weight:500;color:rgba(var(--text-color),1);border-radius:.2em}.page .container-header .search input:focus{outline:0;background:rgba(var(--text-color-light),.2)}.copy-row{align-items:center;gap:.5rem}.copy-row .icon{cursor:pointer;padding:.4rem;height:1.8rem;width:1.8rem}.copy-row .copy{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.time{margin-bottom:1.5rem!important;font-weight:500}#report_popup{width:32rem}#profile_page{display:flex;flex-direction:column}#profile_page button{align-self:flex-start}.complaint{display:grid;gap:1.5rem 0}.complaint .complaint-actions{align-items:center;margin:1.5rem 0 0}#helpline_page sm-select,.complaint .processed,.complaint .unprocessed{margin-bottom:1.5rem}.complaint .processed{color:#007732}.complaint .unprocessed{color:#d43125}.complaint button .icon{padding:.2rem;margin-right:.5rem;stroke:var(--accent-color);stroke-width:8}.complaints-container{padding-top:1.5rem;display:grid;align-items:flex-start;gap:1.5rem}.complaint-placeholder{animation:pulse infinite .6s alternate}.complaint-placeholder h4,.complaint-placeholder h5{border-radius:.2rem}.complaint-placeholder h5{background:rgba(var(--text-color),.1);padding:.5rem .6rem}.complaint-placeholder h4{background:rgba(var(--text-color),.2);padding:.8rem}.complaint-placeholder .demo-btn{padding:.8rem 3rem}@keyframes pulse{from{opacity:.4}to{opacity:1}}#main_loader{box-shadow:none;background:0 0;text-align:center;align-items:center;flex-direction:column}#main_loader button{margin-left:0;margin-top:1.5rem}#main_loader svg{height:2rem;width:2rem;stroke:var(--accent-color);stroke-width:6;fill:none;overflow:visible;stroke-linecap:round;stroke-dashoffset:210;stroke-dasharray:210;justify-self:center;align-self:center;margin-bottom:2rem}#main_loader h3{width:100%;text-transform:uppercase;font-weight:400;word-spacing:.16em}@media only screen and (max-width:640px){#home_page{display:grid;gap:1.5rem;grid-template-areas:"." "left";grid-template-columns:minmax(0,1fr)}#home_page .left{grid-area:left}sm-select{width:100%}}@media only screen and (min-width:640px){body{padding:0 2rem;margin-left:6rem}.popup-container .popup{transform:translateY(0) scale(.96);width:24rem;align-self:center;border-radius:.4rem;height:auto}#confirmation{width:24rem}#navbar{justify-content:center;flex-direction:column;align-items:stretch;left:0;bottom:0;top:0;right:auto;width:6rem;border-top:none;border-right:solid 1px rgba(var(--text-color),.2)}#navbar .navbar-item{width:auto;padding:1.4em 0;margin:.6em}#navbar .navbar-item .icon{height:1.4rem;width:1.4rem}#navbar .navbar-item h5{font-size:.8em}#navbar .navbar-item:hover .icon{stroke:rgba(var(--text-color),1)}#navbar .navbar-item:hover h5{color:rgba(var(--text-color),1)}#navbar .navbar-item.active:hover .icon{stroke:var(--accent-color)}#navbar .navbar-item.active:hover h5{color:var(--accent-color)}.page{padding-bottom:2em}#sign_in_popup{width:24rem}#profile_page .copy-row{display:inline-flex}#home_page{display:grid;gap:1.5rem;grid-template-columns:minmax(0,1fr) 24rem}#activity_page sm-tab-header{margin-bottom:1rem}}@media only screen and (min-width:800px){.complaint{gap:0 1.5rem;grid-template-columns:1fr 1fr;grid-template-areas:". . " "header header"}.complaint .complaint-actions{grid-area:header}.complaint .left{border-right:1px solid rgba(var(--text-color),.2);padding-right:1.5rem}.complaint .right{display:flex;justify-content:center;flex-direction:column}}@media only screen and (min-width:1920px){body{font-size:24px}}@media only screen and (min-width:2048px){body{font-size:24px}}@media only screen and (max-width:320px){body{font-size:14px}}@media (prefers-color-scheme:dark){:root{--text-color:238,238,238;--text-color-light:170,170,170;--foreground-color:26,26,26;--background-color:#111;--dark-shade:#1a1a1a}}@media (prefers-color-scheme:light){:root{--text-color:17,17,17;--text-color-light:85,85,85;--foreground-color:255,255,255;--background-color:#e8e8e8;--dark-shade:#dadada}}@media (prefers-color-scheme:no-preference){:root{--text-color:17,17,17;--text-color-light:85,85,85;--foreground-color:255,255,255;--background-color:#e8e8e8;--dark-shade:#dadada}} \ No newline at end of file diff --git a/css/main.scss b/css/main.scss index f06e3e1..30178f2 100644 --- a/css/main.scss +++ b/css/main.scss @@ -1,13 +1,15 @@ -*{ +* { box-sizing: border-box; padding: 0; margin: 0; font-family: 'Roboto', sans-serif; } -:root{ + +:root { scroll-behavior: smooth; } -body{ + +body { --accent-color: #303F9F; --text-color: 17, 17, 17; --text-color-light: 85, 85, 85; @@ -17,48 +19,61 @@ body{ background: var(--foreground-color); color: rgba(var(--text-color), 1); font-size: 16px; - margin: 1.5rem; } -a{ + +a { font-weight: 600; text-decoration: none; color: var(--accent-color); } -.dark-text{ + +.dark-text { color: #111; } -h1{ + +h1 { font-size: 3.5rem; } -h2{ + +h2 { font-size: 2rem; } -h3{ + +h3 { font-size: 1.5rem; } -h4{ + +h4 { font-size: 1rem; } -h5{ + +h5 { font-size: 0.8rem; } -h1,h2,h3,h4,h5{ - font-family: 'Manrope', sans-serif; - font-weight: 700; -} -p{ + +h1, +h2, +h3, +h4, +h5 { + font-family: 'Poppins', sans-serif; + font-weight: 600; +} + +p { line-height: 1.5; max-width: 60ch; color: rgba(var(--text-color), 0.9); } -button{ + +button { position: relative; display: inline-flex; align-items: center; justify-content: center; text-transform: capitalize; padding: 0.6rem 1.2rem; - font-weight: 700; + font-weight: 600; cursor: pointer; border-radius: 0.3rem; color: var(--accent-color); @@ -66,84 +81,131 @@ button{ border: none; background: rgba(var(--text-color), 0.1); -webkit-tap-highlight-color: transparent; - font-family: 'Manrope', sans-serif; - &:focus{ + font-family: 'Poppins', sans-serif; + + &:focus { outline: thin solid rgba(var(--text-color-light), .4); } - &:disabled{ + + &:disabled { cursor: default; background: rgba(var(--text-color), 0.5); } - &:disabled ~ .loader{ + + &:disabled~.loader { opacity: 0; } } -input[type=number]::-webkit-inner-spin-button, -input[type=number]::-webkit-outer-spin-button { - -webkit-appearance: none; - margin: 0; + +input[type=number]::-webkit-inner-spin-button, +input[type=number]::-webkit-outer-spin-button { + -webkit-appearance: none; + margin: 0; } -input[type=text]::-ms-clear { display: none; width : 0; height: 0; } -input[type=text]::-ms-reveal { display: none; width : 0; height: 0; } + +input[type=text]::-ms-clear { + display: none; + width: 0; + height: 0; +} + +input[type=text]::-ms-reveal { + display: none; + width: 0; + height: 0; +} + input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button, -input[type="search"]::-webkit-search-results-decoration { display: none; } -input[type=number] { - -moz-appearance:textfield; +input[type="search"]::-webkit-search-results-decoration { + display: none; } -input:invalid{ + +input[type=number] { + -moz-appearance: textfield; +} + +input:invalid { outline: none; box-shadow: none; } -::-moz-focus-inner{ + +::-moz-focus-inner { border: none; } -.bottom-padding{ + +.bottom-padding { padding-bottom: 1.5rem; } -.top-padding{ + +.top-padding { padding-top: 1em; } -.bottom-margin{ + +.bottom-margin { margin-bottom: 1.5rem; } -.top-margin{ + +.top-margin { margin-top: 1.5rem; } -.flex{ + +.flex { display: flex; } -.grid{ + +.grid { display: grid; } -.grid-2{ + +.grid-2 { grid-template-columns: auto auto; gap: 1em; } -.label{ + +.align-center { + align-items: center; +} + +.direction-column { + flex-direction: column; +} + +.space-between { + justify-content: space-between; +} + +.label { margin-bottom: 0.4rem; } -.light-text{ + +.light-text { color: rgba(var(--text-color-light), 1); } -.hide{ + +.hide { opacity: 0; pointer-events: none; } -.hide-completely{ + +.hide-completely { display: none !important; } -.breakable{ + +.breakable { word-break: break-all; } -.separator{ + +.separator { padding: .1em; } -.no-transformations{ + +.no-transformations { transform: none !important; } -.loader{ + +.loader { fill: none; stroke-width: 10; stroke: var(--accent-color); @@ -155,103 +217,125 @@ input:invalid{ padding: 2px; justify-self: center; } -@keyframes rotate{ - 100%{ + +@keyframes rotate { + 100% { transform: rotate(360deg); } } -@keyframes load{ - 50%{ + +@keyframes load { + 50% { stroke-dashoffset: 0; } - 100%{ + + 100% { stroke-dashoffset: -210; } } -.action{ + +.action { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 0; background: none; - &[disabled]{ - .primary-btn{ + + &[disabled] { + .primary-btn { background: none; } } - h4{ + + h4 { padding: 0.5rem 0.8rem; font-size: 0.9rem; clip-path: circle(100%); transition: clip-path 0.3s; border-radius: 0.2rem; } - .btn{ + + .btn { z-index: 2; } - .loader{ + + .loader { position: absolute; z-index: 1; padding: 0.4em; } } -.clip{ + +.clip { clip-path: circle(0) !important; } -.animate-loader{ + +.animate-loader { animation: load 2.6s infinite, rotate 1s infinite linear; } -.expand{ + +.expand { width: 100%; } -.fade-left{ + +.fade-left { animation: fadeleft 0.3s; } -.fade-right{ + +.fade-right { animation: faderight 0.3s; } -@keyframes faderight{ - from{ + +@keyframes faderight { + from { opacity: 0; transform: translateX(-1em); } - to{ + + to { opacity: 1; transform: none; } } -@keyframes fadeleft{ - from{ + +@keyframes fadeleft { + from { opacity: 0; transform: translateX(1em); } - to{ + + to { opacity: 1; transform: none; } } -#logo{ + +#logo { display: inline-grid; align-items: center; grid-template-columns: auto 1fr; gap: 0.6rem 0.4rem; margin-right: 1rem; - h4{ + + h4 { letter-spacing: 0.06rem; word-spacing: 0.12rem; } - h5{ + + h5 { font-weight: 400; } - #main_logo{ + + #main_logo { height: 1.6rem; width: 1.6rem; fill: rgba(var(--text-color), 1); stroke: none; } } -textarea{ + +textarea { width: 100%; max-width: 100%; background: rgba(var(--text-color), 0.1); @@ -262,7 +346,8 @@ textarea{ line-height: 1.6; padding: 0.8rem; } -.input{ + +.input { display: flex; width: 100%; align-items: center; @@ -273,13 +358,16 @@ textarea{ background: rgba(var(--text-color), 0.1); border: 0.1em solid transparent; cursor: text; - &:last-of-type{ + + &:last-of-type { margin-bottom: 0; } - &:focus-within{ + + &:focus-within { border: 0.1em solid var(--accent-color); } - .placeholder{ + + .placeholder { opacity: .6; font-weight: 500; font-size: 1em; @@ -290,7 +378,8 @@ textarea{ will-change: contents; text-transform: capitalize; } - input{ + + input { flex: 1; font-size: 1rem; border: none; @@ -299,48 +388,58 @@ textarea{ color: rgba(var(--text-color), 1); } } -.animate-label{ - input{ + +.animate-label { + input { transform: translateY(0.5em); } - .placeholder{ - transform: translateY(-60%) scale(0.7); + + .placeholder { + transform: translateY(-60%) scale(0.7); opacity: 1; color: var(--accent-color); } } -.container:empty ~ .empty{ + +.container:empty~.empty { display: grid; } -.empty{ + +.empty { display: none; place-items: center; width: 100%; - svg{ + + svg { stroke: rgba(var(--text-color), 0.8); height: 12em; width: 12em; } } -.container-header{ + +.container-header { display: flex; align-items: center; flex-direction: row; width: 100%; padding: 1rem 0; - h2{ + + h2 { flex: 1; } - button{ + + button { align-self: center; } } -.btn{ + +.btn { background: var(--accent-color); color: rgba(var(--foreground-color), 1); padding: 0.4em 1em; } -.back-arrow{ + +.back-arrow { stroke: rgba(var(--text-color), 1); stroke-width: 6; fill: none; @@ -348,18 +447,22 @@ textarea{ padding: 0.5rem 0.5rem 0.5rem 0; cursor: pointer; } -.card{ + +.card { border-radius: 0.6rem; padding: 1.5em; background: rgba(var(--foreground-color), 1); } -.solid-background{ + +.solid-background { background: rgba(var(--foreground-color), 1) !important; } -form{ + +form { width: 100%; } -.popup-container{ + +.popup-container { display: grid; position: fixed; top: 0; @@ -370,7 +473,8 @@ form{ background: rgba($color: #000000, $alpha: 0.4); z-index: 10; transition: opacity 0.3s ease; - .popup{ + + .popup { flex-direction: column; align-self: flex-end; align-items: flex-start; @@ -385,112 +489,127 @@ form{ transition: transform 0.3s; box-shadow: 0 2rem 2rem rgba($color: #000000, $alpha: 0.24); overflow-y: auto; - h5{ + + h5 { margin: 0.5rem 0; } - button:first-of-type{ + + button:first-of-type { margin-left: auto; } - .container-header{ + + .container-header { display: flex; align-items: center; padding: 0; margin-bottom: 1rem; - h4{ + + h4 { flex: 1; } - button{ + + button { width: auto; } - .icon{ + + .icon { cursor: pointer; padding-right: 0.4rem; margin-right: 0.3rem; stroke-width: 8; } } - p{ + + p { margin-bottom: 1.5rem !important; } } } -#confirmation,#prompt{ + +#confirmation, +#prompt { flex-direction: column; - p{ + + p { margin: 1rem; } - h4{ + + h4 { font-weight: 500; margin-bottom: 1.5rem; } - .input{ + + .input { margin-bottom: 1rem; } - .btns{ + + .btns { display: flex; justify-content: right; width: 100%; - button{ + + button { background: none; } - button:first-of-type{ + + button:first-of-type { margin-right: 0.6em; } } } -.refresh{ + +.refresh { margin-top: 0.6em; margin-bottom: 1em; } -#sign_in_popup{ - h1{ + +#sign_in_popup { + h1 { margin-top: 2rem; } - h4{ + + h4 { font-weight: 500; margin-bottom: 3rem; } - button{ + + button { margin: 1rem 0; } - p{ + + p { margin-top: 1rem; margin-bottom: 0 !important; } - .input{ + + .input { background: rgba(var(--text-color), 0.1); } } -.primary-btn{ + +.primary-btn { background: var(--accent-color); justify-content: center; color: rgba(var(--foreground-color), 1); } -#main_header{ + +#main_header { align-items: center; - padding: 1em 0; + padding: 1rem; justify-content: space-between; - #display_balance{ - display: grid; - grid-template-columns: 1fr auto; - grid-template-areas: 'title title' - ' . .'; - gap: 0.3rem 0.5rem; - align-items: center; - text-align: right; - h5{ - grid-area: title; - } - .icon{ - height: 1.4rem; - width: 1.4rem; - padding: 0.3rem; - stroke-width: 10; - cursor: pointer; - } +} + +#display_balance { + .icon { + height: 1.4rem; + width: 1.4rem; + padding: 0.3rem; + stroke-width: 10; + cursor: pointer; } } -.icon{ + +.icon { height: 1.2rem; width: 1.2rem; fill: none; @@ -500,7 +619,8 @@ form{ stroke-linecap: round; stroke-linejoin: round; } -#navbar{ + +#navbar { display: flex; flex-direction: row; align-items: center; @@ -514,7 +634,8 @@ form{ border-right: none; z-index: 3; background: rgba(var(--foreground-color), 1); - .navbar-item{ + + .navbar-item { position: relative; text-align: center; cursor: pointer; @@ -526,95 +647,170 @@ form{ text-transform: uppercase; width: 100%; letter-spacing: 0.08em; - h5{ + + h5 { font-size: 0.6em; margin-top: 0.4em; font-weight: 700; } } - .active{ + + .active { color: var(--accent-color); - .icon{ + + .icon { stroke: var(--accent-color); } } } -.banking{ + +.banking { stroke-width: 4; } -#home_page{ - h1{ - margin-bottom: 0; - font-weight: 800; + +#home_page { + padding: 1rem 0 4rem 0; + + .left { + h4 { + padding: 0 1.5rem; + } } - p{ + + sm-carousel::part(carousel) { + padding: 0 1.5rem; + } + + p { margin-bottom: 3rem; } - h2{ - margin-bottom: 1rem; +} + +#user_panel { + position: relative; + padding: 1.5rem; + margin: 0 1.5rem; + border-radius: 0.6rem; + background: linear-gradient(160deg, #ffffff10 50%, #00000040 80%), linear-gradient(-120deg, #ffffff10 50%, #00000040 10%), rgba(var(--text-color), 0.8); + box-shadow: 0 0.1rem 0.6rem #00000020; + color: rgba(var(--foreground-color), 1); + + .icon { + stroke: rgba(var(--foreground-color), 1); + } + + &::before, + &::after { + content: ''; + position: absolute; + height: 2rem; + bottom: 0.8rem; + box-shadow: 0 1rem 0.2rem #00000030; + z-index: -1; + border-radius: 0.4rem; + } + + &::before { + left: 0; + right: 50%; + transform: rotate(-3deg); + } + + &::after { + left: 50%; + right: 0; + transform: rotate(3deg); + } + + .copy-row { + margin-bottom: 1.5rem; + } + + .grid { + margin-top: 0.5rem; + grid-template-columns: 1fr 1fr; + + h5 { + font-weight: 500; + color: rgba(var(--foreground-color), 0.8); + } } } -.options-tab{ - display: flex; - margin-top: 1rem; - margin-bottom: 1rem; - flex-wrap: wrap; - .option{ - display: inline-flex; + +#user_type { + font-weight: 500; + color: rgba(var(--foreground-color), 0.9); +} + +.options-tab { + margin: 1rem 0; + + .option { + position: relative; + display: flex; flex-direction: column; + align-items: center; + text-align: center; border-radius: 0.4rem; - padding: 1.5rem; margin-right: 1rem; margin-bottom: 1rem; - width: 10rem; - box-shadow: 0 1px 0.1rem #00000030, 0 0 0.4rem #00000016; + width: 5rem; + min-width: 5rem; text-transform: capitalize; transition: transform 0.3s; cursor: pointer; - .icon{ - height: 2.8rem; - width: 2.8rem; + + .icon { + height: 3rem; + width: 3rem; padding: 0.8rem; - border-radius: 2rem; - margin-bottom: 1rem; - stroke: rgba(var(--text-color), 0.4); + border-radius: 4rem; + margin-bottom: 0.5rem; + stroke: rgba(var(--foreground-color), 1); } - &:active{ + + h4 { + font-size: 0.9rem; + font-weight: 500; + } + + &:active { transform: scale(0.95); } - &:nth-of-type(1){ - .icon{ - background: rgb(255, 229, 234); - stroke: rgb(175, 15, 44); + + &:nth-of-type(1) { + .icon { + background: #D32F2F; } } - &:nth-of-type(2){ - .icon{ - background: rgb(255, 249, 213); - stroke: rgb(230, 150, 32); + + &:nth-of-type(2) { + .icon { + background: #7B1FA2; } } - &:nth-of-type(3){ - .icon{ - background: rgb(229, 255, 227); - stroke: rgb(24, 155, 15); + + &:nth-of-type(3) { + .icon { + background: #303F9F; } } - &:nth-of-type(4){ - .icon{ - background: rgb(228, 251, 255); - stroke: rgb(11, 142, 165); + + &:nth-of-type(4) { + .icon { + background: #1976D2; } } - &:nth-of-type(5){ - .icon{ - background: rgb(239, 229, 255); - stroke: rgb(16, 53, 155); + + &:nth-of-type(5) { + .icon { + background: #388E3C; } } } } -.notification-dot::after{ + +.notification-dot::after { content: ''; position: absolute; z-index: 1; @@ -626,100 +822,126 @@ form{ border-radius: 0.4em; transition: transform 0.3s; } -.shrink.notification-dot::after{ - transform: scale(0); + +.shrink.notification-dot::after { + transform: scale(0); } -#deposit, #withdraw{ - .container-header{ + +#deposit, +#withdraw { + .container-header { background: linear-gradient(rgba(var(--foreground-color), 1) 90%, transparent); } } -sm-tab-header{ + +sm-tab-header { position: sticky; top: 0; background: rgba(var(--foreground-color), 1); z-index: 1; } -.request{ + +.request { display: inline-flex; flex-direction: column; padding: 1.5em; border-radius: 0.4em; border: solid 1px rgba(var(--text-color), 0.2); - h5{ + + h5 { margin-bottom: 0.2rem; text-transform: capitalize; } - h3,h4{ + + h3, + h4 { margin-bottom: 1.5rem; } - h4:last-of-type{ + + h4:last-of-type { margin-bottom: 0; } - .action{ + + .action { align-self: flex-end; } - .amount{ + + .amount { font-size: 1.4em; } - button{ + + button { width: auto; align-self: flex-end; margin-top: 1.5rem; margin-bottom: 0; } - .copy-row{ + + .copy-row { margin-bottom: 1.5rem; } - .flex{ + + .flex { align-items: center; justify-content: flex-end; margin-top: 1.5rem; - h5{ + + h5 { margin: 0; } - button{ + + button { margin: 0; } } } -.deposited{ + +.deposited { color: #007732; - &::before{ + + &::before { content: '+ '; } } -.decline-request{ + +.decline-request { margin-right: 0.5rem !important; } -.withdrawn{ + +.withdrawn { color: #d43125; - &::before{ + + &::before { content: '- '; } } -.container{ + +.container { display: grid; gap: 1em; width: 100%; - grid-template-columns: 1fr; + grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); } -.page{ - padding: 2rem 0; + +.page { + padding: 1rem 1.5rem; padding-bottom: 4rem; - .container-header{ + + .container-header { display: grid; grid-template-columns: 1fr auto; grid-template-areas: '. .' - 'search search'; + 'search search'; gap: 1rem; top: 0; background: rgba(var(--foreground-color), 1); will-change: auto; z-index: 2; - .search{ + + .search { grid-area: search; - input{ + + input { padding: 1em; border: none; width: 100%; @@ -728,66 +950,82 @@ sm-tab-header{ font-weight: 500; color: rgba(var(--text-color), 1); border-radius: 0.2em; - &:focus{ + + &:focus { outline: none; background: rgba(var(--text-color-light), 0.2); } } - } + } } } -.copy-row{ + +.copy-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.5rem; - h4{ + + h4 { margin-bottom: 0; } - .icon{ + + .icon { cursor: pointer; padding: 0.4rem; height: 1.8rem; width: 1.8rem; } - .copy{ + + .copy { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } -.time{ + +.time { margin-bottom: 1.5rem !important; font-weight: 500; } -#report_popup{ + +#report_popup { width: 32rem; } -#profile_page{ + +#profile_page { display: flex; flex-direction: column; - button{ + + button { align-self: flex-start; } } -.complaint{ + +.complaint { display: grid; gap: 1.5rem 0; - .complaint-actions{ + + .complaint-actions { align-items: center; margin: 1.5rem 0 0 0; } - .processed{ + + .processed { color: #007732; } - .unprocessed{ + + .unprocessed { color: #d43125; } - .processed, .unprocessed{ + + .processed, + .unprocessed { margin-bottom: 1.5rem; } - button{ - .icon{ + + button { + .icon { padding: 0.2rem; margin-right: 0.5rem; stroke: var(--accent-color); @@ -795,130 +1033,67 @@ sm-tab-header{ } } } -.complaints-container{ + +.complaints-container { padding-top: 1.5rem; display: grid; align-items: flex-start; gap: 1.5rem; } -#helpline_page{ - sm-select{ + +#helpline_page { + sm-select { margin-bottom: 1.5rem; } } -.complaint-placeholder{ + +.complaint-placeholder { animation: pulse infinite 0.6s alternate; - h4, h5{ + + h4, + h5 { border-radius: 0.2rem; } - h5{ + + h5 { background: rgba(var(--text-color), 0.1); padding: 0.5rem 0.6rem; } - h4{ + + h4 { background: rgba(var(--text-color), 0.2); padding: 0.8rem 0.8rem; } - .demo-btn{ + + .demo-btn { padding: 0.8rem 3rem; } } -@keyframes pulse{ - from{ + +@keyframes pulse { + from { opacity: 0.4; } - to{ + + to { opacity: 1; } } -@media only screen and (max-width: 640px){ - sm-select{ - width: 100%; - } -} -@media only screen and (min-width: 640px){ - body{ - padding: 1rem 6vw; - margin-left: 6rem; - } - .popup-container{ - .popup{ - transform: translateY(0) scale(0.96); - width: 24rem; - align-self: center; - border-radius: 0.4rem; - height: auto; - } - } - #confirmation{ - width: 24rem; - } - .container{ - grid-template-columns: repeat(2, 1fr); - } - #navbar{ - justify-content: center; - flex-direction: column; - align-items: stretch; - left: 0; - bottom: 0; - top: 0; - right: auto; - width: 6rem; - border-top: none; - border-right: solid 1px rgba(var(--text-color), 0.2); - .navbar-item{ - width: auto; - padding: 1.4em 0; - margin: 0.6em; - .icon{ - height: 1.4rem; - width: 1.4rem; - } - h5{ - font-size: 0.8em; - } - &:hover{ - .icon{ - stroke: rgba(var(--text-color), 1); - } - h5{ - color: rgba(var(--text-color), 1); - } - } - &.active:hover{ - .icon{ - stroke: var(--accent-color); - } - h5{ - color: var(--accent-color); - } - } - } - } - .page{ - padding-bottom: 2em; - } - #sign_in_popup{ - width: 24rem; - } -} -#profile_page{ - .copy-row{ - display: inline-flex; - } -} -#main_loader{ + + +#main_loader { box-shadow: none; background: none; text-align: center; align-items: center; flex-direction: column; - button{ + + button { margin-left: 0; margin-top: 1.5rem; } - svg{ + + svg { height: 2rem; width: 2rem; stroke: var(--accent-color); @@ -932,69 +1107,175 @@ sm-tab-header{ align-self: center; margin-bottom: 2rem; } - h3{ + + h3 { width: 100%; text-transform: uppercase; font-weight: 400; word-spacing: 0.16em; } } -#activity_page{ - sm-tab-header{ - margin-bottom: 1rem; + +@media only screen and (max-width: 640px) { + #home_page { + display: grid; + gap: 1.5rem; + grid-template-areas: '.''left'; + grid-template-columns: minmax(0, 1fr); + + .left { + grid-area: left; + } + } + + sm-select { + width: 100%; } } -@media only screen and (min-width: 800px){ - .container{ - grid-template-columns: repeat(3, 1fr); + +@media only screen and (min-width: 640px) { + body { + padding: 0 2rem; + margin-left: 6rem; } - .complaint{ + + .popup-container { + .popup { + transform: translateY(0) scale(0.96); + width: 24rem; + align-self: center; + border-radius: 0.4rem; + height: auto; + } + } + + #confirmation { + width: 24rem; + } + + #navbar { + justify-content: center; + flex-direction: column; + align-items: stretch; + left: 0; + bottom: 0; + top: 0; + right: auto; + width: 6rem; + border-top: none; + border-right: solid 1px rgba(var(--text-color), 0.2); + + .navbar-item { + width: auto; + padding: 1.4em 0; + margin: 0.6em; + + .icon { + height: 1.4rem; + width: 1.4rem; + } + + h5 { + font-size: 0.8em; + } + + &:hover { + .icon { + stroke: rgba(var(--text-color), 1); + } + + h5 { + color: rgba(var(--text-color), 1); + } + } + + &.active:hover { + .icon { + stroke: var(--accent-color); + } + + h5 { + color: var(--accent-color); + } + } + } + } + + .page { + padding-bottom: 2em; + } + + #sign_in_popup { + width: 24rem; + } + + #profile_page { + .copy-row { + display: inline-flex; + } + } + + #home_page { + display: grid; + gap: 1.5rem; + grid-template-columns: minmax(0, 1fr) 24rem; + + .left {} + } + + #activity_page { + sm-tab-header { + margin-bottom: 1rem; + } + } +} + +@media only screen and (min-width: 800px) { + .complaint { gap: 0 1.5rem; grid-template-columns: 1fr 1fr; - grid-template-areas: '. . ' 'header header'; - .complaint-actions{ + grid-template-areas: '. . ''header header'; + + .complaint-actions { grid-area: header; } - .left{ + + .left { border-right: 1px solid rgba(var(--text-color), 0.2); } - .left{ + + .left { padding-right: 1.5rem; } - .right{ + + .right { display: flex; justify-content: center; flex-direction: column; } } } -@media only screen and (min-width: 1280px){ - body{ - padding: 1rem 12vw; - } -} -@media only screen and (min-width: 1920px){ - body{ + +@media only screen and (min-width: 1920px) { + body { font-size: 24px; - padding: 2rem 20vw; - } - .container{ - grid-template-columns: repeat(4, 1fr); } } -@media only screen and (min-width: 2048px){ - body{ + +@media only screen and (min-width: 2048px) { + body { font-size: 24px; - padding: 2rem 30vw; } } -@media only screen and (max-width: 320px){ - body{ + +@media only screen and (max-width: 320px) { + body { font-size: 14px; } } -@media (prefers-color-scheme: dark){ - :root{ + +@media (prefers-color-scheme: dark) { + :root { --text-color: 238, 238, 238; --text-color-light: 170, 170, 170; --foreground-color: 26, 26, 26; @@ -1002,8 +1283,9 @@ sm-tab-header{ --dark-shade: #1a1a1a; } } -@media (prefers-color-scheme: light){ - :root{ + +@media (prefers-color-scheme: light) { + :root { --text-color: 17, 17, 17; --text-color-light: 85, 85, 85; --foreground-color: 255, 255, 255; @@ -1011,15 +1293,15 @@ sm-tab-header{ --dark-shade: #dadada; } } -@media (prefers-color-scheme: no-preference){ - :root{ - --text-color: 17, 17, 17; - --text-color-light: 85, 85, 85; - --foreground-color: 255, 255, 255; - --background-color: #e8e8e8; - --dark-shade: #dadada; - } -} -@media (any-hover: hover){ -} +@media (prefers-color-scheme: no-preference) { + :root { + --text-color: 17, 17, 17; + --text-color-light: 85, 85, 85; + --foreground-color: 255, 255, 255; + --background-color: #e8e8e8; + --dark-shade: #dadada; + } +} + +@media (any-hover: hover) {} diff --git a/index.html b/index.html index d3986d8..106c754 100644 --- a/index.html +++ b/index.html @@ -5,9 +5,7 @@ Blockchain UPI - + @@ -45,7 +43,7 @@ Loader -

Loading BLOCKCHAIN UPI

+

Loading Blockchain UPI

@@ -76,10 +74,10 @@ -

Transfer Rupee

+

Send Rupee

-

- Deposit rupee through UPI to use as Digital currency powered by blockchain. -

-