diff --git a/components.js b/components.js
new file mode 100644
index 0000000..73ec987
--- /dev/null
+++ b/components.js
@@ -0,0 +1,3103 @@
+/*jshint esversion: 6 */
+const smButton = document.createElement('template')
+smButton.innerHTML = `
+
+
+
+
`;
+customElements.define('sm-button',
+ class extends HTMLElement {
+ constructor() {
+ super();
+ this.attachShadow({
+ mode: 'open'
+ }).append(smButton.content.cloneNode(true));
+ }
+ static get observedAttributes() {
+ return ['disabled'];
+ }
+
+ get disabled() {
+ return this.hasAttribute('disabled');
+ }
+
+ set disabled(value) {
+ if (value) {
+ this.setAttribute('disabled', '');
+ } else {
+ this.removeAttribute('disabled');
+ }
+ }
+ focusIn() {
+ this.focus();
+ }
+
+ handleKeyDown(e) {
+ if (!this.hasAttribute('disabled') && (e.key === 'Enter' || e.key === ' ')) {
+ e.preventDefault();
+ this.click();
+ }
+ }
+
+ connectedCallback() {
+ if (!this.hasAttribute('disabled')) {
+ this.setAttribute('tabindex', '0');
+ }
+ this.setAttribute('role', 'button');
+ this.addEventListener('keydown', this.handleKeyDown);
+ }
+ attributeChangedCallback(name) {
+ if (name === 'disabled') {
+ if (this.hasAttribute('disabled')) {
+ this.removeAttribute('tabindex');
+ } else {
+ this.setAttribute('tabindex', '0');
+ }
+ this.setAttribute('aria-disabled', this.hasAttribute('disabled'));
+ }
+ }
+ })
+const smForm = document.createElement('template');
+smForm.innerHTML = `
+
+
+`;
+
+customElements.define('sm-form', class extends HTMLElement {
+ constructor() {
+ super()
+ this.attachShadow({
+ mode: 'open'
+ }).append(smForm.content.cloneNode(true))
+
+ this.form = this.shadowRoot.querySelector('form');
+ this.formElements
+ this.requiredElements
+ this.submitButton
+ this.resetButton
+ this.invalidFields = false;
+
+ this.debounce = this.debounce.bind(this)
+ this._checkValidity = this._checkValidity.bind(this)
+ this.handleKeydown = this.handleKeydown.bind(this)
+ this.reset = this.reset.bind(this)
+ this.elementsChanged = this.elementsChanged.bind(this)
+ }
+ debounce(callback, wait) {
+ let timeoutId = null;
+ return (...args) => {
+ window.clearTimeout(timeoutId);
+ timeoutId = window.setTimeout(() => {
+ callback.apply(null, args);
+ }, wait);
+ };
+ }
+ _checkValidity() {
+ if (!this.submitButton) return;
+ this.invalidFields = this.requiredElements.filter(elem => !elem.isValid)
+ this.submitButton.disabled = this.invalidFields.length;
+ }
+ handleKeydown(e) {
+ if (e.key === 'Enter' && !e.target.tagName.includes('TEXTAREA')) {
+ if (!this.invalidFields.length) {
+ if (this.submitButton) {
+ this.submitButton.click()
+ }
+ this.dispatchEvent(new CustomEvent('submit', {
+ bubbles: true,
+ composed: true,
+ }))
+ } else {
+ this.requiredElements.forEach(elem => { if (!elem.isValid) elem.vibrate() })
+ }
+ }
+ }
+ reset() {
+ this.formElements.forEach(elem => elem.reset())
+ }
+ elementsChanged() {
+ this.formElements = [...this.querySelectorAll('sm-input, sm-textarea, sm-checkbox, tags-input, file-input, sm-switch, sm-radio')]
+ this.requiredElements = this.formElements.filter(elem => elem.hasAttribute('required'));
+ this.submitButton = this.querySelector('[variant="primary"], [type="submit"]');
+ this.resetButton = this.querySelector('[type="reset"]');
+ if (this.resetButton) {
+ this.resetButton.addEventListener('click', this.reset);
+ }
+ this._checkValidity()
+ }
+ connectedCallback() {
+ this.shadowRoot.querySelector('slot').addEventListener('slotchange', this.elementsChanged)
+ this.addEventListener('input', this.debounce(this._checkValidity, 100));
+ this.addEventListener('keydown', this.debounce(this.handleKeydown, 100));
+ const mutationObserver = new MutationObserver(mutations => {
+ mutations.forEach(mutation => {
+ if (mutation.type === 'childList') {
+ this.elementsChanged()
+ }
+ })
+ })
+ mutationObserver.observe(this, { childList: true, subtree: true })
+ }
+ disconnectedCallback() {
+ this.removeEventListener('input', this.debounce(this._checkValidity, 100));
+ this.removeEventListener('keydown', this.debounce(this.handleKeydown, 100));
+ mutationObserver.disconnect()
+ }
+})
+
+//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));
+
+ this.inputParent = this.shadowRoot.querySelector('.input');
+ this.input = this.shadowRoot.querySelector('input');
+ this.clearBtn = this.shadowRoot.querySelector('.clear');
+ this.label = this.shadowRoot.querySelector('.label');
+ this.feedbackText = this.shadowRoot.querySelector('.feedback-text');
+ this.outerContainer = this.shadowRoot.querySelector('.outer-container');
+ this._helperText = '';
+ this._errorText = '';
+ this.isRequired = false;
+ this.validationFunction = undefined;
+ this.reflectedAttributes = ['value', 'required', 'disabled', 'type', 'inputmode', 'readonly', 'min', 'max', 'pattern', 'minlength', 'maxlength', 'step'];
+
+ this.reset = this.reset.bind(this);
+ this.clear = this.clear.bind(this);
+ this.focusIn = this.focusIn.bind(this);
+ this.focusOut = this.focusOut.bind(this);
+ this.fireEvent = this.fireEvent.bind(this);
+ this.checkInput = this.checkInput.bind(this);
+ this.handleKeydown = this.handleKeydown.bind(this);
+ this.vibrate = this.vibrate.bind(this);
+ }
+
+ static get observedAttributes() {
+ return ['value', 'placeholder', 'required', 'disabled', 'type', 'inputmode', 'readonly', 'min', 'max', 'pattern', 'minlength', 'maxlength', 'step', 'helper-text', 'error-text', 'hiderequired'];
+ }
+
+ get value() {
+ return this.input.value;
+ }
+
+ set value(val) {
+ this.input.value = val;
+ this.checkInput();
+ this.fireEvent();
+ }
+
+ get placeholder() {
+ return this.getAttribute('placeholder');
+ }
+
+ set placeholder(val) {
+ this.setAttribute('placeholder', val);
+ }
+
+ get type() {
+ return this.getAttribute('type');
+ }
+
+ set type(val) {
+ this.setAttribute('type', val);
+ }
+
+ get validity() {
+ return this.input.validity;
+ }
+
+ get disabled() {
+ return this.hasAttribute('disabled');
+ }
+ set disabled(value) {
+ if (value)
+ this.inputParent.classList.add('disabled');
+ else
+ this.inputParent.classList.remove('disabled');
+ }
+ get readOnly() {
+ return this.hasAttribute('readonly');
+ }
+ set readOnly(value) {
+ if (value) {
+ this.setAttribute('readonly', '');
+ } else {
+ this.removeAttribute('readonly');
+ }
+ }
+ set customValidation(val) {
+ this.validationFunction = val;
+ }
+ set errorText(val) {
+ this._errorText = val;
+ }
+ set helperText(val) {
+ this._helperText = val;
+ }
+ get isValid() {
+ if (this.input.value !== '') {
+ const _isValid = this.input.checkValidity();
+ let _customValid = true;
+ if (this.validationFunction) {
+ _customValid = Boolean(this.validationFunction(this.input.value));
+ }
+ if (_isValid && _customValid) {
+ this.feedbackText.classList.remove('error');
+ this.feedbackText.classList.add('success');
+ this.feedbackText.textContent = '';
+ } else {
+ if (this._errorText) {
+ this.feedbackText.classList.add('error');
+ this.feedbackText.classList.remove('success');
+ this.feedbackText.innerHTML = `
+
+ ${this._errorText}
+ `;
+ }
+ }
+ return (_isValid && _customValid);
+ }
+ }
+ reset() {
+ this.value = '';
+ }
+ clear() {
+ this.value = '';
+ this.input.focus();
+ }
+
+ focusIn() {
+ this.input.focus();
+ }
+
+ focusOut() {
+ this.input.blur();
+ }
+
+ fireEvent() {
+ let event = new Event('input', {
+ bubbles: true,
+ cancelable: true,
+ composed: true
+ });
+ this.dispatchEvent(event);
+ }
+
+ checkInput(e) {
+ if (!this.hasAttribute('readonly')) {
+ if (this.input.value.trim() !== '') {
+ this.clearBtn.classList.remove('hide');
+ } else {
+ this.clearBtn.classList.add('hide');
+ }
+ }
+ if (!this.hasAttribute('placeholder') || this.getAttribute('placeholder').trim() === '') return;
+ if (this.input.value !== '') {
+ if (this.animate)
+ this.inputParent.classList.add('animate-placeholder');
+ else
+ this.label.classList.add('hide');
+ } else {
+ if (this.animate)
+ this.inputParent.classList.remove('animate-placeholder');
+ else
+ this.label.classList.remove('hide');
+ this.feedbackText.textContent = '';
+ }
+ }
+ handleKeydown(e) {
+ if (e.key.length === 1) {
+ if (!['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '.'].includes(e.key)) {
+ e.preventDefault();
+ } else if (e.key === '.' && e.target.value.includes('.')) {
+ e.preventDefault();
+ }
+ }
+ }
+ vibrate() {
+ this.outerContainer.animate([
+ { transform: 'translateX(-1rem)' },
+ { transform: 'translateX(1rem)' },
+ { transform: 'translateX(-0.5rem)' },
+ { transform: 'translateX(0.5rem)' },
+ { transform: 'translateX(0)' },
+ ], {
+ duration: 300,
+ easing: 'ease'
+ });
+ }
+
+
+ connectedCallback() {
+ this.animate = this.hasAttribute('animate');
+ this.setAttribute('role', 'textbox');
+ this.input.addEventListener('input', this.checkInput);
+ this.clearBtn.addEventListener('click', this.clear);
+ }
+
+ attributeChangedCallback(name, oldValue, newValue) {
+ if (oldValue !== newValue) {
+ if (this.reflectedAttributes.includes(name)) {
+ if (this.hasAttribute(name)) {
+ this.input.setAttribute(name, this.getAttribute(name) ? this.getAttribute(name) : '');
+ }
+ else {
+ this.input.removeAttribute(name);
+ }
+ }
+ if (name === 'placeholder') {
+ this.label.textContent = newValue;
+ this.setAttribute('aria-label', newValue);
+ }
+ else if (this.hasAttribute('value')) {
+ this.checkInput();
+ }
+ else if (name === 'type') {
+ if (this.hasAttribute('type') && this.getAttribute('type') === 'number') {
+ this.input.setAttribute('inputmode', 'decimal');
+ this.input.addEventListener('keydown', this.handleKeydown);
+ } else {
+ this.input.removeEventListener('keydown', this.handleKeydown);
+
+ }
+ }
+ else if (name === 'helper-text') {
+ this._helperText = this.getAttribute('helper-text');
+ }
+ else if (name === 'error-text') {
+ this._errorText = this.getAttribute('error-text');
+ }
+ else if (name === 'required') {
+ this.isRequired = this.hasAttribute('required');
+ if (this.isRequired) {
+ this.setAttribute('aria-required', 'true');
+ }
+ else {
+ this.setAttribute('aria-required', 'false');
+ }
+ }
+ else if (name === 'readonly') {
+ if (this.hasAttribute('readonly')) {
+ this.inputParent.classList.add('readonly');
+ } else {
+ this.inputParent.classList.remove('readonly');
+ }
+ }
+ else if (name === 'disabled') {
+ if (this.hasAttribute('disabled')) {
+ this.inputParent.classList.add('disabled');
+ }
+ else {
+ this.inputParent.classList.remove('disabled');
+ }
+ }
+ }
+ }
+ disconnectedCallback() {
+ this.input.removeEventListener('input', this.checkInput);
+ this.clearBtn.removeEventListener('click', this.clear);
+ this.input.removeEventListener('keydown', this.handleKeydown);
+ }
+ })
+
+const smTextarea = document.createElement('template')
+smTextarea.innerHTML = `
+
+
+ `;
+customElements.define('sm-textarea',
+ class extends HTMLElement {
+ constructor() {
+ super()
+ this.attachShadow({
+ mode: 'open'
+ }).append(smTextarea.content.cloneNode(true))
+
+ this.textarea = this.shadowRoot.querySelector('textarea')
+ this.textareaBox = this.shadowRoot.querySelector('.textarea')
+ this.placeholder = this.shadowRoot.querySelector('.placeholder')
+ this.reflectedAttributes = ['disabled', 'required', 'readonly', 'rows', 'minlength', 'maxlength']
+
+ this.reset = this.reset.bind(this)
+ this.focusIn = this.focusIn.bind(this)
+ this.fireEvent = this.fireEvent.bind(this)
+ this.checkInput = this.checkInput.bind(this)
+ }
+ static get observedAttributes() {
+ return ['disabled', 'value', 'placeholder', 'required', 'readonly', 'rows', 'minlength', 'maxlength']
+ }
+ get value() {
+ return this.textarea.value
+ }
+ set value(val) {
+ this.setAttribute('value', val)
+ this.fireEvent()
+ }
+ get disabled() {
+ return this.hasAttribute('disabled')
+ }
+ set disabled(val) {
+ if (val) {
+ this.setAttribute('disabled', '')
+ } else {
+ this.removeAttribute('disabled')
+ }
+ }
+ get isValid() {
+ return this.textarea.checkValidity()
+ }
+ reset() {
+ this.setAttribute('value', '')
+ }
+ focusIn() {
+ this.textarea.focus()
+ }
+ fireEvent() {
+ let event = new Event('input', {
+ bubbles: true,
+ cancelable: true,
+ composed: true
+ });
+ this.dispatchEvent(event);
+ }
+ checkInput() {
+ if (!this.hasAttribute('placeholder') || this.getAttribute('placeholder') === '')
+ return;
+ if (this.textarea.value !== '') {
+ this.placeholder.classList.add('hide')
+ } else {
+ this.placeholder.classList.remove('hide')
+ }
+ }
+ connectedCallback() {
+ this.textarea.addEventListener('input', e => {
+ this.textareaBox.dataset.value = this.textarea.value
+ this.checkInput()
+ })
+ }
+ attributeChangedCallback(name, oldValue, newValue) {
+ if (this.reflectedAttributes.includes(name)) {
+ if (this.hasAttribute(name)) {
+ this.textarea.setAttribute(name, this.getAttribute(name) ? this.getAttribute(name) : '')
+ }
+ else {
+ this.textContent.removeAttribute(name)
+ }
+ }
+ else if (name === 'placeholder') {
+ this.placeholder.textContent = this.getAttribute('placeholder')
+ }
+ else if (name === 'value') {
+ this.textarea.value = newValue;
+ this.textareaBox.dataset.value = newValue
+ this.checkInput()
+ }
+ }
+ })
+const smNotifications = document.createElement('template')
+smNotifications.innerHTML = `
+
+
+ `;
+customElements.define('sm-notifications', class extends HTMLElement {
+ constructor() {
+ super();
+ this.shadow = this.attachShadow({
+ mode: 'open'
+ }).append(smNotifications.content.cloneNode(true))
+
+ this.notificationPanel = this.shadowRoot.querySelector('.notification-panel')
+ this.animationOptions = {
+ duration: 300,
+ fill: "forwards",
+ easing: "cubic-bezier(0.175, 0.885, 0.32, 1.275)"
+ }
+
+ this.push = this.push.bind(this)
+ this.createNotification = this.createNotification.bind(this)
+ this.removeNotification = this.removeNotification.bind(this)
+ this.clearAll = this.clearAll.bind(this)
+ this.handlePointerMove = this.handlePointerMove.bind(this)
+
+
+ this.startX = 0;
+ this.currentX = 0;
+ this.endX = 0;
+ this.swipeDistance = 0;
+ this.swipeDirection = '';
+ this.swipeThreshold = 0;
+ this.startTime = 0;
+ this.swipeTime = 0;
+ this.swipeTimeThreshold = 200;
+ this.currentTarget = null;
+
+ this.mediaQuery = window.matchMedia('(min-width: 640px)')
+ this.handleOrientationChange = this.handleOrientationChange.bind(this)
+ this.isLandscape = false
+ }
+
+ randString(length) {
+ let result = '';
+ const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+ for (let i = 0; i < length; i++)
+ result += characters.charAt(Math.floor(Math.random() * characters.length));
+ return result;
+ }
+
+ createNotification(message, options = {}) {
+ const { pinned = false, icon = '', action } = options;
+ const notification = document.createElement('output')
+ notification.id = this.randString(8)
+ notification.classList.add('notification');
+ let composition = ``;
+ composition += `
+ ${icon}
+ ${message}
+ `;
+ if (action) {
+ composition += `
+
+ `
+ }
+ if (pinned) {
+ notification.classList.add('pinned');
+ composition += `
+
+ `;
+ }
+ notification.innerHTML = composition;
+ return notification;
+ }
+
+ push(message, options = {}) {
+ const notification = this.createNotification(message, options);
+ if (this.isLandscape)
+ this.notificationPanel.append(notification);
+ else
+ this.notificationPanel.prepend(notification);
+ this.notificationPanel.animate(
+ [
+ {
+ transform: `translateY(${this.isLandscape ? '' : '-'}${notification.clientHeight}px)`,
+ },
+ {
+ transform: `none`,
+ },
+ ], this.animationOptions
+ )
+ notification.animate([
+ {
+ transform: `translateY(-1rem)`,
+ opacity: '0'
+ },
+ {
+ transform: `none`,
+ opacity: '1'
+ },
+ ], this.animationOptions).onfinish = (e) => {
+ e.target.commitStyles()
+ e.target.cancel()
+ }
+ if (notification.querySelector('.action'))
+ notification.querySelector('.action').addEventListener('click', options.action.callback)
+ return notification.id;
+ }
+
+ removeNotification(notification, direction = 'left') {
+ const sign = direction === 'left' ? '-' : '+';
+ notification.animate([
+ {
+ transform: this.currentX ? `translateX(${this.currentX}px)` : `none`,
+ opacity: '1'
+ },
+ {
+ transform: `translateX(calc(${sign}${Math.abs(this.currentX)}px ${sign} 1rem))`,
+ opacity: '0'
+ }
+ ], this.animationOptions).onfinish = () => {
+ notification.remove();
+ };
+ }
+
+ clearAll() {
+ Array.from(this.notificationPanel.children).forEach(child => {
+ this.removeNotification(child);
+ });
+ }
+
+ handlePointerMove(e) {
+ this.currentX = e.clientX - this.startX;
+ this.currentTarget.style.transform = `translateX(${this.currentX}px)`;
+ }
+
+ handleOrientationChange(e) {
+ this.isLandscape = e.matches
+ if (e.matches) {
+ // landscape
+
+ } else {
+ // portrait
+ }
+ }
+ connectedCallback() {
+
+ this.handleOrientationChange(this.mediaQuery);
+
+ this.mediaQuery.addEventListener('change', this.handleOrientationChange);
+ this.notificationPanel.addEventListener('pointerdown', e => {
+ if (e.target.closest('.notification')) {
+ this.swipeThreshold = this.clientWidth / 2;
+ this.currentTarget = e.target.closest('.notification');
+ this.currentTarget.setPointerCapture(e.pointerId);
+ this.startTime = Date.now();
+ this.startX = e.clientX;
+ this.startY = e.clientY;
+ this.notificationPanel.addEventListener('pointermove', this.handlePointerMove);
+ }
+ });
+ this.notificationPanel.addEventListener('pointerup', e => {
+ this.endX = e.clientX;
+ this.endY = e.clientY;
+ this.swipeDistance = Math.abs(this.endX - this.startX);
+ this.swipeTime = Date.now() - this.startTime;
+ if (this.endX > this.startX) {
+ this.swipeDirection = 'right';
+ } else {
+ this.swipeDirection = 'left';
+ }
+ if (this.swipeTime < this.swipeTimeThreshold) {
+ if (this.swipeDistance > 50)
+ this.removeNotification(this.currentTarget, this.swipeDirection);
+ } else {
+ if (this.swipeDistance > this.swipeThreshold) {
+ this.removeNotification(this.currentTarget, this.swipeDirection);
+ } else {
+ this.currentTarget.animate([
+ {
+ transform: `translateX(${this.currentX}px)`,
+ },
+ {
+ transform: `none`,
+ },
+ ], this.animationOptions).onfinish = (e) => {
+ e.target.commitStyles()
+ e.target.cancel()
+ }
+ }
+ }
+ this.notificationPanel.removeEventListener('pointermove', this.handlePointerMove)
+ this.notificationPanel.releasePointerCapture(e.pointerId);
+ this.currentX = 0;
+ });
+ this.notificationPanel.addEventListener('click', e => {
+ if (e.target.closest('.close')) {
+ this.removeNotification(e.target.closest('.notification'));
+ }
+ });
+
+ const observer = new MutationObserver(mutationList => {
+ mutationList.forEach(mutation => {
+ if (mutation.type === 'childList') {
+ if (mutation.addedNodes.length && !mutation.addedNodes[0].classList.contains('pinned')) {
+ setTimeout(() => {
+ this.removeNotification(mutation.addedNodes[0]);
+ }, 5000);
+ }
+ }
+ });
+ });
+ observer.observe(this.notificationPanel, {
+ childList: true,
+ });
+ }
+ disconnectedCallback() {
+ mediaQueryList.removeEventListener('change', handleOrientationChange);
+ }
+});
+class Stack {
+ constructor() {
+ this.items = [];
+ }
+ push(element) {
+ this.items.push(element);
+ }
+ pop() {
+ if (this.items.length == 0)
+ return "Underflow";
+ return this.items.pop();
+ }
+ peek() {
+ return this.items[this.items.length - 1];
+ }
+}
+const popupStack = new Stack();
+
+const smPopup = document.createElement('template');
+smPopup.innerHTML = `
+
+
+`;
+customElements.define('sm-popup', class extends HTMLElement {
+ constructor() {
+ super();
+ this.attachShadow({
+ mode: 'open'
+ }).append(smPopup.content.cloneNode(true));
+
+ this.allowClosing = false;
+ this.isOpen = false;
+ this.pinned = false;
+ this.offset = 0;
+ this.touchStartY = 0;
+ this.touchEndY = 0;
+ this.touchStartTime = 0;
+ this.touchEndTime = 0;
+ this.touchEndAnimation = undefined;
+ this.focusable
+ this.autoFocus
+ this.mutationObserver
+
+ this.popupContainer = this.shadowRoot.querySelector('.popup-container');
+ this.backdrop = this.shadowRoot.querySelector('.background');
+ this.dialogBox = this.shadowRoot.querySelector('.popup');
+ this.popupBodySlot = this.shadowRoot.querySelector('.popup-body slot');
+ this.popupHeader = this.shadowRoot.querySelector('.popup-top');
+
+ this.resumeScrolling = this.resumeScrolling.bind(this);
+ this.setStateOpen = this.setStateOpen.bind(this);
+ this.show = this.show.bind(this);
+ this.hide = this.hide.bind(this);
+ this.handleTouchStart = this.handleTouchStart.bind(this);
+ this.handleTouchMove = this.handleTouchMove.bind(this);
+ this.handleTouchEnd = this.handleTouchEnd.bind(this);
+ this.detectFocus = this.detectFocus.bind(this);
+ }
+
+ static get observedAttributes() {
+ return ['open'];
+ }
+
+ get open() {
+ return this.isOpen;
+ }
+
+ animateTo(element, keyframes, options) {
+ const anime = element.animate(keyframes, { ...options, fill: 'both' })
+ anime.finished.then(() => {
+ anime.commitStyles()
+ anime.cancel()
+ })
+ return anime
+ }
+
+ resumeScrolling() {
+ const scrollY = document.body.style.top;
+ window.scrollTo(0, parseInt(scrollY || '0') * -1);
+ document.body.style.overflow = '';
+ document.body.style.top = 'initial';
+ }
+
+ setStateOpen() {
+ if (!this.isOpen || this.offset) {
+ const animOptions = {
+ duration: 300,
+ easing: 'ease'
+ }
+ const initialAnimation = (window.innerWidth > 640) ? 'scale(1.1)' : `translateY(${this.offset ? `${this.offset}px` : '100%'})`
+ this.animateTo(this.dialogBox, [
+ {
+ opacity: this.offset ? 1 : 0,
+ transform: initialAnimation
+ },
+ {
+ opacity: 1,
+ transform: 'none'
+ },
+ ], animOptions)
+
+ }
+ }
+
+ show(options = {}) {
+ const { pinned = false } = options;
+ if (!this.isOpen) {
+ const animOptions = {
+ duration: 300,
+ easing: 'ease'
+ }
+ popupStack.push({
+ popup: this,
+ permission: pinned
+ });
+ if (popupStack.items.length > 1) {
+ this.animateTo(popupStack.items[popupStack.items.length - 2].popup.shadowRoot.querySelector('.popup'), [
+ { transform: 'none' },
+ { transform: (window.innerWidth > 640) ? 'scale(0.95)' : 'translateY(-1.5rem)' },
+ ], animOptions)
+ }
+ this.popupContainer.classList.remove('hide');
+ if (!this.offset)
+ this.backdrop.animate([
+ { opacity: 0 },
+ { opacity: 1 },
+ ], animOptions)
+ this.setStateOpen()
+ this.dispatchEvent(
+ new CustomEvent("popupopened", {
+ bubbles: true,
+ detail: {
+ popup: this,
+ }
+ })
+ );
+ this.pinned = pinned;
+ this.isOpen = true;
+ document.body.style.overflow = 'hidden';
+ document.body.style.top = `-${window.scrollY}px`;
+ const elementToFocus = this.autoFocus || this.focusable[0];
+ elementToFocus.tagName.includes('SM-') ? elementToFocus.focusIn() : elementToFocus.focus();
+ if (!this.hasAttribute('open'))
+ this.setAttribute('open', '');
+ }
+ }
+ hide() {
+ const animOptions = {
+ duration: 150,
+ easing: 'ease'
+ }
+ this.backdrop.animate([
+ { opacity: 1 },
+ { opacity: 0 }
+ ], animOptions)
+ this.animateTo(this.dialogBox, [
+ {
+ opacity: 1,
+ transform: (window.innerWidth > 640) ? 'none' : `translateY(${this.offset ? `${this.offset}px` : '0'})`
+ },
+ {
+ opacity: 0,
+ transform: (window.innerWidth > 640) ? 'scale(1.1)' : 'translateY(100%)'
+ },
+ ], animOptions).finished
+ .finally(() => {
+ this.popupContainer.classList.add('hide');
+ this.dialogBox.style = ''
+ this.removeAttribute('open');
+
+ if (this.forms.length) {
+ this.forms.forEach(form => form.reset());
+ }
+ this.dispatchEvent(
+ new CustomEvent("popupclosed", {
+ bubbles: true,
+ detail: {
+ popup: this,
+ }
+ })
+ );
+ this.isOpen = false;
+ })
+ popupStack.pop();
+ if (popupStack.items.length) {
+ this.animateTo(popupStack.items[popupStack.items.length - 1].popup.shadowRoot.querySelector('.popup'), [
+ { transform: (window.innerWidth > 640) ? 'scale(0.95)' : 'translateY(-1.5rem)' },
+ { transform: 'none' },
+ ], animOptions)
+
+ } else {
+ this.resumeScrolling();
+ }
+ }
+
+ handleTouchStart(e) {
+ this.offset = 0
+ this.popupHeader.addEventListener('touchmove', this.handleTouchMove, { passive: true });
+ this.popupHeader.addEventListener('touchend', this.handleTouchEnd, { passive: true });
+ this.touchStartY = e.changedTouches[0].clientY;
+ this.touchStartTime = e.timeStamp;
+ }
+
+ handleTouchMove(e) {
+ if (this.touchStartY < e.changedTouches[0].clientY) {
+ this.offset = e.changedTouches[0].clientY - this.touchStartY;
+ this.touchEndAnimation = window.requestAnimationFrame(() => {
+ this.dialogBox.style.transform = `translateY(${this.offset}px)`;
+ });
+ }
+ }
+
+ handleTouchEnd(e) {
+ this.touchEndTime = e.timeStamp;
+ cancelAnimationFrame(this.touchEndAnimation);
+ this.touchEndY = e.changedTouches[0].clientY;
+ this.threshold = this.dialogBox.getBoundingClientRect().height * 0.3;
+ if (this.touchEndTime - this.touchStartTime > 200) {
+ if (this.touchEndY - this.touchStartY > this.threshold) {
+ if (this.pinned) {
+ this.setStateOpen();
+ return;
+ } else
+ this.hide();
+ } else {
+ this.setStateOpen();
+ }
+ } else {
+ if (this.touchEndY > this.touchStartY)
+ if (this.pinned) {
+ this.setStateOpen();
+ return;
+ }
+ else
+ this.hide();
+ }
+ this.popupHeader.removeEventListener('touchmove', this.handleTouchMove, { passive: true });
+ this.popupHeader.removeEventListener('touchend', this.handleTouchEnd, { passive: true });
+ }
+
+
+ detectFocus(e) {
+ if (e.key === 'Tab') {
+ const lastElement = this.focusable[this.focusable.length - 1];
+ const firstElement = this.focusable[0];
+ if (e.shiftKey && document.activeElement === firstElement) {
+ e.preventDefault();
+ lastElement.tagName.includes('SM-') ? lastElement.focusIn() : lastElement.focus();
+ } else if (!e.shiftKey && document.activeElement === lastElement) {
+ e.preventDefault();
+ firstElement.tagName.includes('SM-') ? firstElement.focusIn() : firstElement.focus();
+ }
+ }
+ }
+
+ updateFocusableList() {
+ this.focusable = this.querySelectorAll('sm-button:not([disabled]), button:not([disabled]), [href], sm-input, input:not([readonly]), sm-select, select, sm-checkbox, sm-textarea, textarea, [tabindex]:not([tabindex="-1"])')
+ this.autoFocus = this.querySelector('[autofocus]')
+ }
+
+ connectedCallback() {
+ this.popupBodySlot.addEventListener('slotchange', () => {
+ this.forms = this.querySelectorAll('sm-form');
+ this.updateFocusableList()
+ });
+ this.popupContainer.addEventListener('mousedown', e => {
+ if (e.target === this.popupContainer && !this.pinned) {
+ if (this.pinned) {
+ this.setStateOpen();
+ } else
+ this.hide();
+ }
+ });
+
+ const resizeObserver = new ResizeObserver(entries => {
+ for (let entry of entries) {
+ if (entry.contentBoxSize) {
+ // Firefox implements `contentBoxSize` as a single content rect, rather than an array
+ const contentBoxSize = Array.isArray(entry.contentBoxSize) ? entry.contentBoxSize[0] : entry.contentBoxSize;
+ this.threshold = contentBoxSize.blockSize.height * 0.3;
+ } else {
+ this.threshold = entry.contentRect.height * 0.3;
+ }
+ }
+ });
+ resizeObserver.observe(this);
+
+ this.mutationObserver = new MutationObserver(entries => {
+ this.updateFocusableList()
+ })
+ this.mutationObserver.observe(this, { attributes: true, childList: true, subtree: true })
+
+ this.addEventListener('keydown', this.detectFocus);
+ this.popupHeader.addEventListener('touchstart', this.handleTouchStart, { passive: true });
+ }
+ disconnectedCallback() {
+ this.removeEventListener('keydown', this.detectFocus);
+ resizeObserver.unobserve();
+ this.mutationObserver.disconnect()
+ this.popupHeader.removeEventListener('touchstart', this.handleTouchStart, { passive: true });
+ }
+ attributeChangedCallback(name) {
+ if (name === 'open') {
+ if (this.hasAttribute('open')) {
+ this.show();
+ }
+ }
+ }
+});
+const smSwitch = document.createElement('template')
+smSwitch.innerHTML = `
+
+`
+
+customElements.define('sm-switch', class extends HTMLElement {
+ constructor() {
+ super()
+ this.attachShadow({
+ mode: 'open'
+ }).append(smSwitch.content.cloneNode(true))
+ this.switch = this.shadowRoot.querySelector('.switch');
+ this.input = this.shadowRoot.querySelector('input')
+ this.isChecked = false
+ this.isDisabled = false
+
+ this.dispatch = this.dispatch.bind(this)
+ }
+
+ static get observedAttributes() {
+ return ['disabled', 'checked']
+ }
+
+ get disabled() {
+ return this.isDisabled
+ }
+
+ set disabled(val) {
+ if (val) {
+ this.setAttribute('disabled', '')
+ } else {
+ this.removeAttribute('disabled')
+ }
+ }
+
+ get checked() {
+ return this.isChecked
+ }
+
+ set checked(value) {
+ if (value) {
+ this.setAttribute('checked', '')
+ } else {
+ this.removeAttribute('checked')
+ }
+ }
+ get value() {
+ return this.isChecked
+ }
+
+ reset() {
+
+ }
+
+ dispatch() {
+ this.dispatchEvent(new CustomEvent('change', {
+ bubbles: true,
+ composed: true,
+ detail: {
+ value: this.isChecked
+ }
+ }))
+ }
+
+ connectedCallback() {
+ this.addEventListener('keydown', e => {
+ if (e.key === ' ' && !this.isDisabled) {
+ e.preventDefault()
+ this.input.click()
+ }
+ })
+ this.input.addEventListener('click', e => {
+ if (this.input.checked)
+ this.checked = true
+ else
+ this.checked = false
+ this.dispatch()
+ })
+ }
+ attributeChangedCallback(name, oldValue, newValue) {
+ if (oldValue !== newValue) {
+ if (name === 'disabled') {
+ if (this.hasAttribute('disabled')) {
+ this.disabled = true
+ }
+ else {
+ this.disabled = false
+ }
+ }
+ else if (name === 'checked') {
+ if (this.hasAttribute('checked')) {
+ this.isChecked = true
+ this.input.checked = true
+ }
+ else {
+ this.isChecked = false
+ this.input.checked = false
+ }
+ }
+ }
+ }
+
+})
+const themeToggle = document.createElement('template');
+themeToggle.innerHTML = `
+
+
+`;
+
+class ThemeToggle extends HTMLElement {
+ constructor() {
+ super();
+
+ this.attachShadow({
+ mode: 'open'
+ }).append(themeToggle.content.cloneNode(true));
+
+ this.isChecked = false;
+ this.hasTheme = 'light';
+
+ this.toggleState = this.toggleState.bind(this);
+ this.fireEvent = this.fireEvent.bind(this);
+ this.handleThemeChange = this.handleThemeChange.bind(this);
+ }
+ static get observedAttributes() {
+ return ['checked'];
+ }
+
+ daylight() {
+ this.hasTheme = 'light';
+ document.body.dataset.theme = 'light';
+ this.setAttribute('aria-checked', 'false');
+ }
+
+ nightlight() {
+ this.hasTheme = 'dark';
+ document.body.dataset.theme = 'dark';
+ this.setAttribute('aria-checked', 'true');
+ }
+
+ toggleState() {
+ this.toggleAttribute('checked');
+ this.fireEvent();
+ }
+ handleKeyDown(e) {
+ if (e.key === ' ') {
+ this.toggleState();
+ }
+ }
+ handleThemeChange(e) {
+ if (e.detail.theme !== this.hasTheme) {
+ if (e.detail.theme === 'dark') {
+ this.setAttribute('checked', '');
+ }
+ else {
+ this.removeAttribute('checked');
+ }
+ }
+ }
+
+ fireEvent() {
+ this.dispatchEvent(
+ new CustomEvent('themechange', {
+ bubbles: true,
+ composed: true,
+ detail: {
+ theme: this.hasTheme
+ }
+ })
+ );
+ }
+
+ connectedCallback() {
+ this.setAttribute('role', 'switch');
+ this.setAttribute('aria-label', 'theme toggle');
+ if (localStorage.getItem(`${window.location.hostname}-theme`) === "dark") {
+ this.nightlight();
+ this.setAttribute('checked', '');
+ } else if (localStorage.getItem(`${window.location.hostname}-theme`) === "light") {
+ this.daylight();
+ this.removeAttribute('checked');
+ }
+ else {
+ if (window.matchMedia(`(prefers-color-scheme: dark)`).matches) {
+ this.nightlight();
+ this.setAttribute('checked', '');
+ } else {
+ this.daylight();
+ this.removeAttribute('checked');
+ }
+ }
+ this.addEventListener("click", this.toggleState);
+ this.addEventListener("keydown", this.handleKeyDown);
+ document.addEventListener('themechange', this.handleThemeChange);
+ }
+
+ disconnectedCallback() {
+ this.removeEventListener("click", this.toggleState);
+ this.removeEventListener("keydown", this.handleKeyDown);
+ document.removeEventListener('themechange', this.handleThemeChange);
+ }
+
+ attributeChangedCallback(name, oldVal, newVal) {
+ if (name === 'checked') {
+ if (this.hasAttribute('checked')) {
+ this.nightlight();
+ localStorage.setItem(`${window.location.hostname}-theme`, "dark");
+ } else {
+ this.daylight();
+ localStorage.setItem(`${window.location.hostname}-theme`, "light");
+ }
+ }
+ }
+}
+
+window.customElements.define('theme-toggle', ThemeToggle);
+
+const smCopy = document.createElement('template');
+smCopy.innerHTML = `
+
+
+`;
+customElements.define('sm-copy',
+ class extends HTMLElement {
+ constructor() {
+ super();
+ this.attachShadow({
+ mode: 'open'
+ }).append(smCopy.content.cloneNode(true));
+
+ this.copyContent = this.shadowRoot.querySelector('.copy-content');
+ this.copyButton = this.shadowRoot.querySelector('.copy-button');
+
+ this.copy = this.copy.bind(this);
+ }
+ static get observedAttributes() {
+ return ['value'];
+ }
+ set value(val) {
+ this.setAttribute('value', val);
+ }
+ get value() {
+ return this.getAttribute('value');
+ }
+ fireEvent() {
+ this.dispatchEvent(
+ new CustomEvent('copy', {
+ composed: true,
+ bubbles: true,
+ cancelable: true,
+ })
+ );
+ }
+ copy() {
+ navigator.clipboard.writeText(this.copyContent.textContent)
+ .then(res => this.fireEvent())
+ .catch(err => console.error(err));
+ }
+ connectedCallback() {
+ this.copyButton.addEventListener('click', this.copy);
+ }
+ attributeChangedCallback(name, oldValue, newValue) {
+ if (name === 'value') {
+ this.copyContent.textContent = newValue;
+ }
+ }
+ disconnectedCallback() {
+ this.copyButton.removeEventListener('click', this.copy);
+ }
+ });
+const spinner = document.createElement('template');
+spinner.innerHTML = `
+
+
+
+`;
+class SpinnerLoader extends HTMLElement {
+ constructor() {
+ super();
+ this.attachShadow({
+ mode: 'open'
+ }).append(spinner.content.cloneNode(true));
+ }
+}
+window.customElements.define('sm-spinner', SpinnerLoader);
+
+const stripSelect = document.createElement('template');
+stripSelect.innerHTML = `
+
+
+
+`;
+customElements.define('strip-select', class extends HTMLElement {
+ constructor() {
+ super();
+ this.attachShadow({
+ mode: 'open'
+ }).append(stripSelect.content.cloneNode(true));
+ this.stripSelect = this.shadowRoot.querySelector('.strip-select');
+ this.slottedOptions = undefined;
+ this._value = undefined;
+ this.scrollDistance = 0;
+ this.assignedElements = [];
+
+ this.scrollLeft = this.scrollLeft.bind(this);
+ this.scrollRight = this.scrollRight.bind(this);
+ this.fireEvent = this.fireEvent.bind(this);
+ this.setSelectedOption = this.setSelectedOption.bind(this);
+ }
+ get value() {
+ return this._value;
+ }
+ set value(val) {
+ this.setSelectedOption(val);
+ }
+ scrollLeft() {
+ this.stripSelect.scrollBy({
+ left: -this.scrollDistance,
+ behavior: 'smooth'
+ });
+ }
+
+ scrollRight() {
+ this.stripSelect.scrollBy({
+ left: this.scrollDistance,
+ behavior: 'smooth'
+ });
+ }
+ setSelectedOption(value) {
+ if (this._value === value) return
+ this._value = value;
+ this.assignedElements.forEach(elem => {
+ if (elem.value === value) {
+ elem.setAttribute('active', '');
+ elem.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center" });
+ }
+ else
+ elem.removeAttribute('active')
+ });
+ }
+
+ fireEvent() {
+ this.dispatchEvent(
+ new CustomEvent("change", {
+ bubbles: true,
+ composed: true,
+ detail: {
+ value: this._value
+ }
+ })
+ );
+ }
+ connectedCallback() {
+ this.setAttribute('role', 'listbox');
+
+ const slot = this.shadowRoot.querySelector('slot');
+ const coverLeft = this.shadowRoot.querySelector('.cover--left');
+ const coverRight = this.shadowRoot.querySelector('.cover--right');
+ const navButtonLeft = this.shadowRoot.querySelector('.nav-button--left');
+ const navButtonRight = this.shadowRoot.querySelector('.nav-button--right');
+ slot.addEventListener('slotchange', e => {
+ this.assignedElements = slot.assignedElements();
+ this.assignedElements.forEach(elem => {
+ if (elem.hasAttribute('selected')) {
+ elem.setAttribute('active', '');
+ this._value = elem.value;
+ }
+ });
+ if (!this.hasAttribute('multiline')) {
+ if (this.assignedElements.length > 0) {
+ firstOptionObserver.observe(this.assignedElements[0]);
+ lastOptionObserver.observe(this.assignedElements[this.assignedElements.length - 1]);
+ }
+ else {
+ navButtonLeft.classList.add('hide');
+ navButtonRight.classList.add('hide');
+ coverLeft.classList.add('hide');
+ coverRight.classList.add('hide');
+ firstOptionObserver.disconnect();
+ lastOptionObserver.disconnect();
+ }
+ }
+ });
+ const resObs = new ResizeObserver(entries => {
+ entries.forEach(entry => {
+ if (entry.contentBoxSize) {
+ // Firefox implements `contentBoxSize` as a single content rect, rather than an array
+ const contentBoxSize = Array.isArray(entry.contentBoxSize) ? entry.contentBoxSize[0] : entry.contentBoxSize;
+
+ this.scrollDistance = contentBoxSize.inlineSize * 0.6;
+ } else {
+ this.scrollDistance = entry.contentRect.width * 0.6;
+ }
+ });
+ });
+ resObs.observe(this);
+ this.stripSelect.addEventListener('option-clicked', e => {
+ if (this._value !== e.target.value) {
+ this.setSelectedOption(e.target.value);
+ this.fireEvent();
+ }
+ });
+ const firstOptionObserver = new IntersectionObserver(entries => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ navButtonLeft.classList.add('hide');
+ coverLeft.classList.add('hide');
+ }
+ else {
+ navButtonLeft.classList.remove('hide');
+ coverLeft.classList.remove('hide');
+ }
+ });
+ },
+ {
+ threshold: 0.9,
+ root: this
+ });
+ const lastOptionObserver = new IntersectionObserver(entries => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ navButtonRight.classList.add('hide');
+ coverRight.classList.add('hide');
+ }
+ else {
+ navButtonRight.classList.remove('hide');
+ coverRight.classList.remove('hide');
+ }
+ });
+ },
+ {
+ threshold: 0.9,
+ root: this
+ });
+ navButtonLeft.addEventListener('click', this.scrollLeft);
+ navButtonRight.addEventListener('click', this.scrollRight);
+ }
+ disconnectedCallback() {
+ navButtonLeft.removeEventListener('click', this.scrollLeft);
+ navButtonRight.removeEventListener('click', this.scrollRight);
+ }
+});
+
+//Strip option
+const stripOption = document.createElement('template');
+stripOption.innerHTML = `
+
+
+`;
+customElements.define('strip-option', class extends HTMLElement {
+ constructor() {
+ super();
+ this.attachShadow({
+ mode: 'open'
+ }).append(stripOption.content.cloneNode(true));
+ this._value = undefined;
+ this.radioButton = this.shadowRoot.querySelector('input');
+
+ this.fireEvent = this.fireEvent.bind(this);
+ this.handleKeyDown = this.handleKeyDown.bind(this);
+ }
+ get value() {
+ return this._value;
+ }
+ fireEvent() {
+ this.dispatchEvent(
+ new CustomEvent("option-clicked", {
+ bubbles: true,
+ composed: true,
+ detail: {
+ value: this._value
+ }
+ })
+ );
+ }
+ handleKeyDown(e) {
+ if (e.key === 'Enter' || e.key === 'Space') {
+ this.fireEvent();
+ }
+ }
+ connectedCallback() {
+ this.setAttribute('role', 'option');
+ this.setAttribute('tabindex', '0');
+ this._value = this.getAttribute('value');
+ this.addEventListener('click', this.fireEvent);
+ this.addEventListener('keydown', this.handleKeyDown);
+ }
+ disconnectedCallback() {
+ this.removeEventListener('click', this.fireEvent);
+ this.removeEventListener('keydown', this.handleKeyDown);
+ }
+});
+
+const smSelect = document.createElement('template')
+smSelect.innerHTML = `
+
+`;
+customElements.define('sm-select', class extends HTMLElement {
+ constructor() {
+ super()
+ this.attachShadow({
+ mode: 'open'
+ }).append(smSelect.content.cloneNode(true))
+
+ this.focusIn = this.focusIn.bind(this)
+ this.reset = this.reset.bind(this)
+ this.open = this.open.bind(this)
+ this.collapse = this.collapse.bind(this)
+ this.toggle = this.toggle.bind(this)
+ this.handleOptionsNavigation = this.handleOptionsNavigation.bind(this)
+ this.handleOptionSelection = this.handleOptionSelection.bind(this)
+ this.handleKeydown = this.handleKeydown.bind(this)
+ this.handleClickOutside = this.handleClickOutside.bind(this)
+
+ this.availableOptions
+ this.previousOption
+ this.isOpen = false;
+ this.label = ''
+ this.slideDown = [{
+ transform: `translateY(-0.5rem)`,
+ opacity: 0
+ },
+ {
+ transform: `translateY(0)`,
+ opacity: 1
+ }
+ ]
+ this.slideUp = [{
+ transform: `translateY(0)`,
+ opacity: 1
+ },
+ {
+ transform: `translateY(-0.5rem)`,
+ opacity: 0
+ }
+ ]
+ this.animationOptions = {
+ duration: 300,
+ fill: "forwards",
+ easing: 'ease'
+ }
+
+ this.optionList = this.shadowRoot.querySelector('.options')
+ this.chevron = this.shadowRoot.querySelector('.toggle')
+ this.selection = this.shadowRoot.querySelector('.selection')
+ this.selectedOptionText = this.shadowRoot.querySelector('.selected-option-text')
+ }
+ static get observedAttributes() {
+ return ['disabled', 'label']
+ }
+ get value() {
+ return this.getAttribute('value')
+ }
+ set value(val) {
+ const selectedOption = this.availableOptions.find(option => option.getAttribute('value') === val)
+ if (selectedOption) {
+ this.setAttribute('value', val)
+ this.selectedOptionText.textContent = `${this.label}${selectedOption.textContent}`;
+ if (this.previousOption) {
+ this.previousOption.classList.remove('check-selected')
+ }
+ selectedOption.classList.add('check-selected')
+ this.previousOption = selectedOption
+ } else {
+ console.warn(`There is no option with ${val} as value`)
+ }
+ }
+
+ reset(fire = true) {
+ if (this.availableOptions[0] && this.previousOption !== this.availableOptions[0]) {
+ const firstElement = this.availableOptions[0];
+ if (this.previousOption) {
+ this.previousOption.classList.remove('check-selected')
+ }
+ firstElement.classList.add('check-selected')
+ this.value = firstElement.getAttribute('value')
+ this.selectedOptionText.textContent = `${this.label}${firstElement.textContent}`
+ this.previousOption = firstElement;
+ if (fire) {
+ this.fireEvent()
+ }
+ }
+ }
+
+ focusIn() {
+ this.selection.focus()
+ }
+
+ open() {
+ this.optionList.classList.remove('hide')
+ this.optionList.animate(this.slideDown, this.animationOptions)
+ this.chevron.classList.add('rotate')
+ this.isOpen = true
+ }
+ collapse() {
+ this.chevron.classList.remove('rotate')
+ this.optionList.animate(this.slideUp, this.animationOptions)
+ .onfinish = () => {
+ this.optionList.classList.add('hide')
+ this.isOpen = false
+ }
+ }
+ toggle() {
+ if (!this.isOpen && !this.hasAttribute('disabled')) {
+ this.open()
+ } else {
+ this.collapse()
+ }
+ }
+
+ fireEvent() {
+ this.dispatchEvent(new CustomEvent('change', {
+ bubbles: true,
+ composed: true,
+ detail: {
+ value: this.value
+ }
+ }))
+ }
+
+ handleOptionsNavigation(e) {
+ if (e.key === 'ArrowUp') {
+ e.preventDefault()
+ if (document.activeElement.previousElementSibling) {
+ document.activeElement.previousElementSibling.focus()
+ } else {
+ this.availableOptions[this.availableOptions.length - 1].focus()
+ }
+ }
+ else if (e.key === 'ArrowDown') {
+ e.preventDefault()
+ if (document.activeElement.nextElementSibling) {
+ document.activeElement.nextElementSibling.focus()
+ } else {
+ this.availableOptions[0].focus()
+ }
+ }
+ }
+ handleOptionSelection(e) {
+ if (this.previousOption !== document.activeElement) {
+ this.value = document.activeElement.getAttribute('value')
+ this.fireEvent()
+ }
+ }
+ handleClick(e) {
+ if (e.target === this) {
+ this.toggle()
+ }
+ else {
+ this.handleOptionSelection()
+ this.collapse()
+ }
+ }
+ handleKeydown(e) {
+ if (e.target === this) {
+ if (this.isOpen && e.key === 'ArrowDown') {
+ e.preventDefault()
+ this.availableOptions[0].focus()
+ this.handleOptionSelection(e)
+ }
+ else if (e.key === 'Enter' || e.key === ' ') {
+ e.preventDefault()
+ this.toggle()
+ }
+ }
+ else {
+ this.handleOptionsNavigation(e)
+ this.handleOptionSelection(e)
+ if (e.key === 'Enter' || e.key === ' ') {
+ e.preventDefault()
+ this.collapse()
+ }
+ }
+ }
+ handleClickOutside(e) {
+ if (this.isOpen && !this.contains(e.target)) {
+ this.collapse()
+ }
+ }
+ connectedCallback() {
+ this.setAttribute('role', 'listbox')
+ if (!this.hasAttribute('disabled')) {
+ this.selection.setAttribute('tabindex', '0')
+ }
+ let slot = this.shadowRoot.querySelector('slot')
+ slot.addEventListener('slotchange', e => {
+ this.availableOptions = slot.assignedElements()
+ this.reset(false)
+ });
+ this.addEventListener('click', this.handleClick)
+ this.addEventListener('keydown', this.handleKeydown)
+ document.addEventListener('mousedown', this.handleClickOutside)
+ }
+ disconnectedCallback() {
+ this.removeEventListener('click', this.toggle)
+ this.removeEventListener('keydown', this.handleKeydown)
+ document.removeEventListener('mousedown', this.handleClickOutside)
+ }
+ attributeChangedCallback(name) {
+ if (name === "disabled") {
+ if (this.hasAttribute('disabled')) {
+ this.selection.removeAttribute('tabindex')
+ } else {
+ this.selection.setAttribute('tabindex', '0')
+ }
+ } else if (name === 'label') {
+ this.label = this.hasAttribute('label') ? `${this.getAttribute('label')} ` : ''
+ }
+ }
+})
+
+// option
+const smOption = document.createElement('template')
+smOption.innerHTML = `
+
+`;
+customElements.define('sm-option', class extends HTMLElement {
+ constructor() {
+ super()
+ this.attachShadow({
+ mode: 'open'
+ }).append(smOption.content.cloneNode(true))
+ }
+
+ connectedCallback() {
+ this.setAttribute('role', 'option')
+ this.setAttribute('tabindex', '0')
+ }
+})
\ No newline at end of file
diff --git a/css/main.css b/css/main.css
new file mode 100644
index 0000000..c74c9ae
--- /dev/null
+++ b/css/main.css
@@ -0,0 +1,1065 @@
+* {
+ padding: 0;
+ margin: 0;
+ box-sizing: border-box;
+ font-family: "Roboto", sans-serif;
+}
+
+:root {
+ font-size: clamp(1rem, 1.2vmax, 1.2rem);
+}
+
+html,
+body {
+ height: 100%;
+}
+
+body {
+ --accent-color: #4d77ff;
+ --text-color: 20, 20, 20;
+ --foreground-color: 252, 253, 255;
+ --background-color: 241, 243, 248;
+ --danger-color: rgb(255, 75, 75);
+ --green: #1cad59;
+ --yellow: rgb(220, 165, 0);
+ scrollbar-width: thin;
+ scrollbar-gutter: stable;
+ color: rgba(var(--text-color), 1);
+ background-color: rgba(var(--background-color), 1);
+ transition: background-color 0.3s;
+ position: relative;
+ display: flex;
+ flex-direction: column;
+}
+
+body[data-theme=dark] {
+ --accent-color: #a0b6ff;
+ --text-color: 220, 220, 220;
+ --foreground-color: 27, 28, 29;
+ --background-color: 21, 22, 22;
+ --danger-color: rgb(255, 106, 106);
+ --green: #00e676;
+ --yellow: rgb(255, 213, 5);
+}
+body[data-theme=dark] sm-popup::part(popup) {
+ background-color: rgba(var(--foreground-color), 1);
+}
+
+h1, h1 > *,
+h2,
+h2 > *,
+h3,
+h3 > *,
+h4,
+h4 > *,
+h5,
+h5 > *,
+h6,
+h6 > * {
+ font-weight: 400;
+ font-family: "Calistoga", cursive;
+}
+
+p,
+strong {
+ font-size: 0.9rem;
+ max-width: 65ch;
+ line-height: 1.7;
+ color: rgba(var(--text-color), 0.9);
+}
+
+.warning {
+ line-height: normal;
+ padding: 1rem;
+ background-color: khaki;
+ border-radius: 0.5rem;
+ font-weight: 500;
+ color: rgba(0, 0, 0, 0.7);
+}
+
+a {
+ text-decoration: none;
+ color: var(--accent-color);
+}
+a:focus-visible {
+ box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1) inset;
+}
+
+a.button {
+ padding: 0.4rem 0.6rem;
+ border-radius: 0.3rem;
+ font-size: 0.9rem;
+ font-weight: 500;
+ color: inherit;
+}
+
+button {
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ user-select: none;
+ position: relative;
+ display: inline-flex;
+ border: none;
+ background-color: transparent;
+ overflow: hidden;
+ -webkit-tap-highlight-color: transparent;
+ align-items: center;
+ font-size: 0.9rem;
+ font-weight: 500;
+ white-space: nowrap;
+ padding: 0.8rem;
+ border-radius: 0.3rem;
+ justify-content: center;
+}
+button:focus-visible {
+ outline: var(--accent-color) solid medium;
+}
+button:not(:disabled) {
+ color: var(--accent-color);
+ cursor: pointer;
+}
+button .icon {
+ fill: var(--accent-color);
+}
+
+.button {
+ background-color: rgba(var(--text-color), 0.06);
+}
+.button--primary, .button--danger {
+ color: rgba(var(--background-color), 1) !important;
+}
+.button--primary .icon, .button--danger .icon {
+ fill: rgba(var(--background-color), 1);
+}
+.button--primary {
+ background-color: var(--accent-color);
+}
+.button--danger {
+ background-color: var(--danger-color);
+}
+.button--small {
+ padding: 0.4rem 0.5rem;
+}
+
+.cta {
+ text-transform: uppercase;
+ font-size: 0.8rem;
+ font-weight: 700;
+ letter-spacing: 0.05em;
+ padding: 0.8rem 1rem;
+}
+
+.icon {
+ width: 1.2rem;
+ height: 1.2rem;
+ fill: rgba(var(--text-color), 0.8);
+ flex-shrink: 0;
+}
+
+.icon-only {
+ padding: 0.5rem;
+ border-radius: 0.3rem;
+}
+
+button:disabled {
+ opacity: 0.5;
+}
+
+a:-webkit-any-link:focus-visible {
+ outline: rgba(var(--text-color), 1) 0.1rem solid;
+}
+
+a:-moz-any-link:focus-visible {
+ outline: rgba(var(--text-color), 1) 0.1rem solid;
+}
+
+a:any-link:focus-visible {
+ outline: rgba(var(--text-color), 1) 0.1rem solid;
+}
+
+details summary {
+ display: flex;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ user-select: none;
+ cursor: pointer;
+ align-items: center;
+ justify-content: space-between;
+ color: var(--accent-color);
+}
+
+details[open] summary {
+ margin-bottom: 1rem;
+}
+details[open] > summary .down-arrow {
+ transform: rotate(180deg);
+}
+
+sm-input,
+sm-textarea {
+ width: 100%;
+ --border-radius: 0.4rem;
+ --background-color: rgba(var(--foreground-color), 1);
+}
+sm-input button .icon,
+sm-textarea button .icon {
+ fill: var(--accent-color);
+}
+
+sm-button {
+ --padding: 0.8rem;
+}
+sm-button[variant=primary] .icon {
+ fill: rgba(var(--background-color), 1);
+}
+sm-button[disabled] .icon {
+ fill: rgba(var(--text-color), 0.6);
+}
+sm-button.danger {
+ --background: var(--danger-color);
+ color: rgba(var(--background-color), 1);
+}
+
+sm-spinner {
+ --size: 1rem;
+ --stroke-width: 0.1rem;
+}
+
+sm-form {
+ --gap: 1rem;
+}
+
+sm-select {
+ font-size: 0.9rem;
+ --padding: 0.6rem 0.3rem 0.6rem 0.6rem;
+}
+
+sm-option {
+ font-size: 0.9rem;
+}
+
+strip-select {
+ --gap: 0;
+ background-color: rgba(var(--text-color), 0.06);
+ border-radius: 0.3rem;
+ padding: 0.3rem;
+}
+
+strip-option {
+ font-size: 0.8rem;
+ --border-radius: 0.2rem;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ user-select: none;
+}
+
+ul,
+ol {
+ list-style: none;
+}
+
+ol {
+ counter-reset: item;
+}
+ol li {
+ position: relative;
+ display: flex;
+ align-items: flex-start;
+ counter-increment: item;
+}
+ol li:not(:last-of-type) {
+ padding-bottom: 1.5rem;
+}
+ol li:not(:last-of-type)::after {
+ content: "";
+ position: absolute;
+ width: 0.1rem;
+ height: calc(100% - 2.2rem);
+ background: var(--accent-color);
+ margin-left: 0.7rem;
+ margin-top: 2rem;
+}
+ol li::before {
+ content: counter(item);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ font-size: 0.8rem;
+ font-weight: 500;
+ margin-top: 0.15rem;
+ margin-right: 1rem;
+ line-height: 1;
+ width: 1.5rem;
+ height: 1.5rem;
+ border-radius: 100%;
+ flex-shrink: 0;
+ color: rgba(var(--text-color), 0.8);
+ background: rgba(var(--text-color), 0.1);
+}
+
+.overflow-ellipsis {
+ width: 100%;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+}
+
+.breakable {
+ overflow-wrap: break-word;
+ word-wrap: break-word;
+ word-break: break-word;
+ -webkit-hyphens: auto;
+ hyphens: auto;
+}
+
+.full-bleed {
+ grid-column: 1/-1;
+}
+
+.uppercase {
+ text-transform: uppercase;
+}
+
+.capitalize {
+ text-transform: capitalize;
+}
+
+.sticky {
+ position: -webkit-sticky;
+ position: sticky;
+}
+
+.top-0 {
+ top: 0;
+}
+
+.flex {
+ display: flex;
+}
+
+.flex-wrap {
+ flex-wrap: wrap;
+}
+
+.flex-1 {
+ flex: 1;
+}
+
+.grid {
+ display: grid;
+}
+
+.flow-column {
+ grid-auto-flow: column;
+}
+
+.gap-0-3 {
+ gap: 0.3rem;
+}
+
+.gap-0-5 {
+ gap: 0.5rem;
+}
+
+.gap-1 {
+ gap: 1rem;
+}
+
+.gap-1-5 {
+ gap: 1.5rem;
+}
+
+.gap-2 {
+ gap: 2rem;
+}
+
+.gap-3 {
+ gap: 3rem;
+}
+
+.text-align-right {
+ text-align: right;
+}
+
+.align-start {
+ align-content: flex-start;
+}
+
+.align-center {
+ align-items: center;
+}
+
+.align-end {
+ align-items: flex-end;
+}
+
+.text-center {
+ text-align: center;
+}
+
+.justify-start {
+ justify-items: start;
+}
+
+.justify-center {
+ justify-content: center;
+}
+
+.justify-right {
+ margin-left: auto;
+}
+
+.align-self-center {
+ align-self: center;
+}
+
+.align-self-end {
+ align-self: end;
+}
+
+.justify-self-center {
+ justify-self: center;
+}
+
+.justify-self-start {
+ justify-self: start;
+}
+
+.justify-self-end {
+ justify-self: end;
+}
+
+.flex-direction-column {
+ flex-direction: column;
+}
+
+.space-between {
+ justify-content: space-between;
+}
+
+.w-100 {
+ width: 100%;
+}
+
+.h-100 {
+ height: 100%;
+}
+
+.label {
+ font-size: 0.8rem;
+ color: rgba(var(--text-color), 0.8);
+ font-weight: 500;
+ margin-bottom: 0.2rem;
+}
+
+.button--primary .ripple,
+.button--danger .ripple {
+ background: radial-gradient(circle, rgba(var(--background-color), 0.3) 0%, rgba(0, 0, 0, 0) 50%);
+}
+
+.ripple {
+ height: 8rem;
+ width: 8rem;
+ position: absolute;
+ border-radius: 50%;
+ transform: scale(0);
+ background: radial-gradient(circle, rgba(var(--text-color), 0.3) 0%, rgba(0, 0, 0, 0) 50%);
+ pointer-events: none;
+}
+
+.interactive {
+ position: relative;
+ overflow: hidden;
+ cursor: pointer;
+ -webkit-tap-highlight-color: transparent;
+}
+
+.empty-state {
+ display: grid;
+ width: 100%;
+ padding: 1.5rem 0;
+}
+
+.observe-empty-state:empty {
+ display: none !important;
+}
+
+.observe-empty-state:not(:empty) + .empty-state {
+ display: none !important;
+}
+
+.bullet-point {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin: 0 0.8ch;
+}
+.bullet-point::after {
+ content: "";
+ height: 0.4ch;
+ width: 0.4ch;
+ border-radius: 0.5em;
+ background-color: var(--accent-color);
+}
+
+.margin-right-0-3 {
+ margin-right: 0.3rem;
+}
+
+.margin-right-0-5 {
+ margin-right: 0.5rem;
+}
+
+.margin-left-0-5 {
+ margin-left: 0.5rem;
+}
+
+.margin-top-1-5 {
+ margin-top: 1.5rem;
+}
+
+.margin-bottom-0-5 {
+ margin-bottom: 0.5rem;
+}
+
+.margin-bottom-1 {
+ margin-bottom: 1rem;
+}
+
+.margin-bottom-1-5 {
+ margin-bottom: 1.5rem;
+}
+
+.margin-bottom-2 {
+ margin-bottom: 2rem;
+}
+
+.icon-button {
+ padding: 0.6rem;
+ border-radius: 0.8rem;
+ background-color: rgba(var(--text-color), 0.1);
+ height: -webkit-max-content;
+ height: -moz-max-content;
+ height: max-content;
+}
+.icon-button .icon {
+ fill: var(--accent-color);
+}
+
+.page {
+ height: 100%;
+}
+.page__header {
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 1.5rem;
+ min-height: 8rem;
+}
+.page__header .grid {
+ margin-top: auto;
+}
+.page__header h1 {
+ margin-top: auto;
+ font-size: 2rem;
+}
+
+#confirmation_popup,
+#prompt_popup {
+ flex-direction: column;
+}
+#confirmation_popup h4,
+#prompt_popup h4 {
+ margin-bottom: 0.5rem;
+}
+#confirmation_popup sm-button,
+#prompt_popup sm-button {
+ margin: 0;
+}
+#confirmation_popup .flex,
+#prompt_popup .flex {
+ padding: 0;
+ margin-top: 1rem;
+}
+#confirmation_popup .flex sm-button:first-of-type,
+#prompt_popup .flex sm-button:first-of-type {
+ margin-right: 0.6rem;
+ margin-left: auto;
+}
+
+#prompt_message {
+ margin-bottom: 1.5rem;
+}
+
+.popup__header {
+ display: grid;
+ gap: 0.5rem;
+ width: 100%;
+ padding: 0 1.5rem;
+ align-items: center;
+}
+
+.popup__header__close {
+ padding: 0.5rem;
+ margin-left: -0.5rem;
+}
+
+.flo-icon {
+ margin-right: 0.3rem;
+ height: 1.5rem;
+ width: 1.5rem;
+}
+
+#secondary_pages {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+}
+#secondary_pages header {
+ padding: 1.5rem;
+}
+#secondary_pages .inner-page {
+ height: 100%;
+}
+
+#landing > section {
+ justify-content: center;
+ justify-items: center;
+ align-items: center;
+ text-align: center;
+ padding: 8vw 0;
+}
+#landing h1 {
+ font-size: clamp(2rem, 5vw, 5rem);
+}
+
+#main_header {
+ padding: 1.5rem;
+}
+
+#main_card {
+ display: grid;
+ grid-template-columns: minmax(0, 1fr);
+ grid-template-rows: auto 1fr;
+ height: 100%;
+ width: 100%;
+ transition: background-color 0.3s;
+ background-color: rgba(var(--foreground-color), 1);
+}
+
+#main_navbar {
+ display: flex;
+ background: rgba(var(--text-color), 0.03);
+}
+#main_navbar.hide-away {
+ position: absolute;
+}
+#main_navbar ul {
+ display: flex;
+ height: 100%;
+ width: 100%;
+}
+#main_navbar ul li {
+ width: 100%;
+}
+
+.nav-item {
+ position: relative;
+ display: flex;
+ flex: 1;
+ width: 100%;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: 0.5rem 0.3rem;
+ color: var(--text-color);
+ font-size: 0.8rem;
+ border-radius: 0.3rem;
+ font-weight: 500;
+}
+.nav-item .icon {
+ transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+.nav-item__title {
+ margin-top: 0.3rem;
+ transition: opacity 0.2s, transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+.nav-item--active {
+ color: var(--accent-color);
+}
+.nav-item--active .icon {
+ fill: var(--accent-color);
+ transform: translateY(50%);
+}
+.nav-item--active .nav-item__title {
+ transform: translateY(100%);
+ opacity: 0;
+}
+.nav-item__indicator {
+ position: absolute;
+ bottom: 0;
+ width: 2rem;
+ height: 0.3rem;
+ background: var(--accent-color);
+ border-radius: 1rem 1rem 0 0;
+ z-index: 1;
+}
+
+.inner-page {
+ padding: 0 1.5rem;
+ flex: 1;
+ overflow-y: auto;
+ align-content: start;
+}
+
+.password-field label {
+ display: flex;
+}
+.password-field label input:checked ~ .visible {
+ display: none;
+}
+.password-field label input:not(:checked) ~ .invisible {
+ display: none;
+}
+
+.multi-state-button {
+ display: grid;
+ text-align: center;
+ align-items: center;
+}
+.multi-state-button > * {
+ grid-area: 1/1/2/2;
+}
+.multi-state-button button {
+ z-index: 1;
+}
+
+.scrolling-wrapper {
+ overflow-y: auto;
+}
+
+#pages_container {
+ overflow-y: auto;
+ padding: 0 1rem;
+}
+
+.primary-action {
+ display: flex;
+ padding: 0.8rem 1rem;
+ gap: 0.5rem;
+ white-space: normal;
+ font-size: 0.8rem;
+ border-radius: 0.5rem;
+ background-color: transparent;
+ border: thin solid rgba(var(--text-color), 0.3);
+ text-align: left;
+}
+.primary-action .icon {
+ fill: var(--accent-color);
+}
+.primary-action:not(:last-of-type) {
+ margin-right: 0.5rem;
+}
+
+#flo_id_warning {
+ padding-bottom: 1.5rem;
+ border-bottom: thin solid rgba(var(--text-color), 0.3);
+}
+#flo_id_warning .icon {
+ height: 4rem;
+ width: 4rem;
+ padding: 1rem;
+ background-color: #ffc107;
+ border-radius: 3rem;
+ fill: rgba(0, 0, 0, 0.8);
+ margin-bottom: 1.5rem;
+}
+
+.generated-id-card {
+ display: grid;
+ gap: 1rem;
+}
+.generated-id-card h5 {
+ margin-bottom: 0.3rem;
+}
+
+#address_balance_card {
+ padding: 1rem;
+ background-color: rgba(var(--text-color), 0.06);
+ border-radius: 0.5rem;
+ margin-top: 0.5rem;
+ margin-bottom: 1.5rem;
+}
+
+.card {
+ padding: 0.5rem 0;
+ border: none;
+}
+.card:not(:last-of-type) {
+ border-bottom: solid thin rgba(var(--text-color), 0.3);
+}
+
+.remove-card-wrapper {
+ min-height: 2rem;
+}
+
+.sender-card {
+ display: grid;
+ gap: 0.5rem;
+ margin-bottom: 0.5rem;
+}
+
+.receiver-card {
+ display: grid;
+ gap: 0.5rem;
+}
+
+.balance-wrapper {
+ padding-bottom: 0.5rem;
+ border-bottom: thin solid rgba(var(--text-color), 0.3);
+}
+
+#transactions_list {
+ display: grid;
+ gap: 2rem;
+ padding-bottom: 4rem;
+}
+
+.transaction {
+ grid-template-columns: auto 1fr auto;
+ gap: 0.5rem 1rem;
+ align-items: center;
+ grid-template-areas: "icon receiver receiver" "icon time amount";
+}
+.transaction__amount {
+ white-space: nowrap;
+}
+.transaction.out .icon {
+ fill: var(--danger-color);
+}
+.transaction.out .transaction__amount {
+ color: var(--danger-color);
+}
+.transaction.out .transaction__amount::before {
+ content: "- ";
+}
+.transaction.in .icon {
+ fill: var(--green);
+}
+.transaction.in .transaction__amount {
+ color: var(--green);
+}
+.transaction.in .transaction__amount::before {
+ content: "+ ";
+}
+.transaction__icon {
+ grid-area: icon;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 2.5rem;
+ height: 2.5rem;
+ background-color: rgba(var(--text-color), 0.03);
+ border-radius: 2rem;
+}
+.transaction__receiver {
+ grid-area: receiver;
+ font-weight: 500;
+}
+.transaction__time {
+ grid-area: time;
+ font-size: 0.8rem;
+ color: rgba(var(--text-color), 0.8);
+}
+.transaction__amount {
+ grid-area: amount;
+ font-size: 1rem;
+ font-weight: 700;
+}
+
+.fab {
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ margin: 1.5rem;
+ box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
+ z-index: 2;
+}
+
+#scroll_to_top {
+ border-radius: 3rem;
+ background-color: rgba(var(--foreground-color), 1);
+}
+
+.user-action-result__icon {
+ justify-self: center;
+ height: 4rem;
+ width: 4rem;
+ border-radius: 5rem;
+ margin-bottom: 2rem;
+ -webkit-animation: popup 1s;
+ animation: popup 1s;
+}
+.user-action-result__icon.success {
+ fill: rgba(var(--background-color), 1);
+ padding: 1rem;
+ background-color: #0bbe56;
+}
+.user-action-result__icon.failed {
+ background-color: rgba(var(--text-color), 0.03);
+ fill: var(--danger-color);
+}
+
+@-webkit-keyframes popup {
+ 0% {
+ opacity: 0;
+ transform: scale(0.2) translateY(600%);
+ }
+ 10% {
+ transform: scale(0.2) translateY(5rem);
+ opacity: 1;
+ }
+ 40% {
+ transform: scale(0.2) translateY(0);
+ }
+ 80% {
+ transform: scale(1.1) translateY(0);
+ }
+ 100% {
+ transform: scale(1) translateY(0);
+ }
+}
+
+@keyframes popup {
+ 0% {
+ opacity: 0;
+ transform: scale(0.2) translateY(600%);
+ }
+ 10% {
+ transform: scale(0.2) translateY(5rem);
+ opacity: 1;
+ }
+ 40% {
+ transform: scale(0.2) translateY(0);
+ }
+ 80% {
+ transform: scale(1.1) translateY(0);
+ }
+ 100% {
+ transform: scale(1) translateY(0);
+ }
+}
+@media screen and (max-width: 40rem) {
+ #main_navbar.hide-away {
+ bottom: 0;
+ left: 0;
+ right: 0;
+ }
+}
+@media screen and (min-width: 40rem) {
+ sm-popup {
+ --width: 24rem;
+ }
+ .popup__header {
+ grid-column: 1/-1;
+ padding: 1rem 1.5rem 0 1.5rem;
+ }
+ body {
+ align-items: center;
+ justify-content: center;
+ }
+ #main_card {
+ grid-template-areas: "header" ".";
+ position: relative;
+ overflow: hidden;
+ box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.05), 0 1rem 3rem rgba(0, 0, 0, 0.2);
+ }
+ #main_card:not(.nav-hidden) {
+ grid-template-columns: auto 1fr;
+ grid-template-rows: auto 1fr;
+ grid-template-areas: "nav header" "nav .";
+ }
+ #main_header {
+ grid-area: header;
+ }
+ #main_navbar {
+ grid-area: nav;
+ border-top: none;
+ flex-direction: column;
+ background-color: rgba(37, 110, 255, 0.03);
+ }
+ #main_navbar ul {
+ flex-direction: column;
+ gap: 0.5rem;
+ padding: 0.3rem;
+ }
+ .nav-item {
+ aspect-ratio: 1/1;
+ }
+ .nav-item__indicator {
+ width: 0.25rem;
+ height: 50%;
+ left: 0;
+ border-radius: 0 1rem 1rem 0;
+ bottom: auto;
+ }
+ body[data-theme=dark] #main_navbar {
+ background-color: rgba(0, 0, 0, 0.2);
+ }
+ #pages_container {
+ padding: 0 4vw;
+ }
+ #generate_btc_addr_popup,
+#retrieve_btc_addr_popup {
+ --width: 28rem;
+ }
+}
+@media screen and (min-width: 48rem) {
+ .sender-card,
+.receiver-card {
+ grid-template-columns: 1fr 1fr;
+ }
+}
+@media screen and (min-width: 56rem) {
+ #main_card {
+ margin: 2rem 12vw;
+ width: calc(100% - 24vw);
+ height: calc(100% - 4rem);
+ border-radius: 0.5rem;
+ }
+}
+@media (any-hover: hover) {
+ ::-webkit-scrollbar {
+ width: 0.5rem;
+ height: 0.5rem;
+ }
+ ::-webkit-scrollbar-thumb {
+ background: rgba(var(--text-color), 0.3);
+ border-radius: 1rem;
+ }
+ ::-webkit-scrollbar-thumb:hover {
+ background: rgba(var(--text-color), 0.5);
+ }
+ .interactive:not([disabled]) {
+ transition: background-color 0.3s;
+ }
+ .interactive:not([disabled]):hover {
+ background-color: rgba(var(--text-color), 0.06);
+ }
+ button:not([disabled]),
+.button:not([disabled]) {
+ transition: background-color 0.3s, filter 0.3s;
+ }
+ button:not([disabled]):hover,
+.button:not([disabled]):hover {
+ filter: contrast(2);
+ }
+}
+@supports (overflow: overlay) {
+ body {
+ overflow: overlay;
+ }
+}
+.hidden {
+ display: none !important;
+}
\ No newline at end of file
diff --git a/css/main.min.css b/css/main.min.css
new file mode 100644
index 0000000..19faada
--- /dev/null
+++ b/css/main.min.css
@@ -0,0 +1 @@
+*{padding:0;margin:0;box-sizing:border-box;font-family:"Roboto",sans-serif}:root{font-size:clamp(1rem,1.2vmax,1.2rem)}html,body{height:100%}body{--accent-color: #4d77ff;--text-color: 20, 20, 20;--foreground-color: 252, 253, 255;--background-color: 241, 243, 248;--danger-color: rgb(255, 75, 75);--green: #1cad59;--yellow: rgb(220, 165, 0);scrollbar-width:thin;scrollbar-gutter:stable;color:rgba(var(--text-color), 1);background-color:rgba(var(--background-color), 1);transition:background-color .3s;position:relative;display:flex;flex-direction:column}body[data-theme=dark]{--accent-color: #a0b6ff;--text-color: 220, 220, 220;--foreground-color: 27, 28, 29;--background-color: 21, 22, 22;--danger-color: rgb(255, 106, 106);--green: #00e676;--yellow: rgb(255, 213, 5)}body[data-theme=dark] sm-popup::part(popup){background-color:rgba(var(--foreground-color), 1)}h1,h1>*,h2,h2>*,h3,h3>*,h4,h4>*,h5,h5>*,h6,h6>*{font-weight:400;font-family:"Calistoga",cursive}p,strong{font-size:.9rem;max-width:65ch;line-height:1.7;color:rgba(var(--text-color), 0.9)}.warning{line-height:normal;padding:1rem;background-color:khaki;border-radius:.5rem;font-weight:500;color:rgba(0,0,0,.7)}a{text-decoration:none;color:var(--accent-color)}a:focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color), 1) inset}a.button{padding:.4rem .6rem;border-radius:.3rem;font-size:.9rem;font-weight:500;color:inherit}button{-webkit-user-select:none;-moz-user-select:none;user-select:none;position:relative;display:inline-flex;border:none;background-color:rgba(0,0,0,0);overflow:hidden;-webkit-tap-highlight-color:rgba(0,0,0,0);align-items:center;font-size:.9rem;font-weight:500;white-space:nowrap;padding:.8rem;border-radius:.3rem;justify-content:center}button:focus-visible{outline:var(--accent-color) solid medium}button:not(:disabled){color:var(--accent-color);cursor:pointer}button .icon{fill:var(--accent-color)}.button{background-color:rgba(var(--text-color), 0.06)}.button--primary,.button--danger{color:rgba(var(--background-color), 1) !important}.button--primary .icon,.button--danger .icon{fill:rgba(var(--background-color), 1)}.button--primary{background-color:var(--accent-color)}.button--danger{background-color:var(--danger-color)}.button--small{padding:.4rem .5rem}.cta{text-transform:uppercase;font-size:.8rem;font-weight:700;letter-spacing:.05em;padding:.8rem 1rem}.icon{width:1.2rem;height:1.2rem;fill:rgba(var(--text-color), 0.8);flex-shrink:0}.icon-only{padding:.5rem;border-radius:.3rem}button:disabled{opacity:.5}a:-webkit-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:-moz-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}details summary{display:flex;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:pointer;align-items:center;justify-content:space-between;color:var(--accent-color)}details[open] summary{margin-bottom:1rem}details[open]>summary .down-arrow{transform:rotate(180deg)}sm-input,sm-textarea{width:100%;--border-radius: 0.4rem;--background-color: rgba(var(--foreground-color), 1)}sm-input button .icon,sm-textarea button .icon{fill:var(--accent-color)}sm-button{--padding: 0.8rem}sm-button[variant=primary] .icon{fill:rgba(var(--background-color), 1)}sm-button[disabled] .icon{fill:rgba(var(--text-color), 0.6)}sm-button.danger{--background: var(--danger-color);color:rgba(var(--background-color), 1)}sm-spinner{--size: 1rem;--stroke-width: 0.1rem}sm-form{--gap: 1rem}sm-select{font-size:.9rem;--padding: 0.6rem 0.3rem 0.6rem 0.6rem}sm-option{font-size:.9rem}strip-select{--gap: 0;background-color:rgba(var(--text-color), 0.06);border-radius:.3rem;padding:.3rem}strip-option{font-size:.8rem;--border-radius: 0.2rem;-webkit-user-select:none;-moz-user-select:none;user-select:none}ul,ol{list-style:none}ol{counter-reset:item}ol li{position:relative;display:flex;align-items:flex-start;counter-increment:item}ol li:not(:last-of-type){padding-bottom:1.5rem}ol li:not(:last-of-type)::after{content:"";position:absolute;width:.1rem;height:calc(100% - 2.2rem);background:var(--accent-color);margin-left:.7rem;margin-top:2rem}ol li::before{content:counter(item);display:flex;align-items:center;justify-content:center;text-align:center;font-size:.8rem;font-weight:500;margin-top:.15rem;margin-right:1rem;line-height:1;width:1.5rem;height:1.5rem;border-radius:100%;flex-shrink:0;color:rgba(var(--text-color), 0.8);background:rgba(var(--text-color), 0.1)}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.breakable{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;hyphens:auto}.full-bleed{grid-column:1/-1}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.sticky{position:-webkit-sticky;position:sticky}.top-0{top:0}.flex{display:flex}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.grid{display:grid}.flow-column{grid-auto-flow:column}.gap-0-3{gap:.3rem}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.text-align-right{text-align:right}.align-start{align-content:flex-start}.align-center{align-items:center}.align-end{align-items:flex-end}.text-center{text-align:center}.justify-start{justify-items:start}.justify-center{justify-content:center}.justify-right{margin-left:auto}.align-self-center{align-self:center}.align-self-end{align-self:end}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.flex-direction-column{flex-direction:column}.space-between{justify-content:space-between}.w-100{width:100%}.h-100{height:100%}.label{font-size:.8rem;color:rgba(var(--text-color), 0.8);font-weight:500;margin-bottom:.2rem}.button--primary .ripple,.button--danger .ripple{background:radial-gradient(circle, rgba(var(--background-color), 0.3) 0%, rgba(0, 0, 0, 0) 50%)}.ripple{height:8rem;width:8rem;position:absolute;border-radius:50%;transform:scale(0);background:radial-gradient(circle, rgba(var(--text-color), 0.3) 0%, rgba(0, 0, 0, 0) 50%);pointer-events:none}.interactive{position:relative;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0)}.empty-state{display:grid;width:100%;padding:1.5rem 0}.observe-empty-state:empty{display:none !important}.observe-empty-state:not(:empty)+.empty-state{display:none !important}.bullet-point{display:flex;align-items:center;justify-content:center;margin:0 .8ch}.bullet-point::after{content:"";height:.4ch;width:.4ch;border-radius:.5em;background-color:var(--accent-color)}.margin-right-0-3{margin-right:.3rem}.margin-right-0-5{margin-right:.5rem}.margin-left-0-5{margin-left:.5rem}.margin-top-1-5{margin-top:1.5rem}.margin-bottom-0-5{margin-bottom:.5rem}.margin-bottom-1{margin-bottom:1rem}.margin-bottom-1-5{margin-bottom:1.5rem}.margin-bottom-2{margin-bottom:2rem}.icon-button{padding:.6rem;border-radius:.8rem;background-color:rgba(var(--text-color), 0.1);height:-webkit-max-content;height:-moz-max-content;height:max-content}.icon-button .icon{fill:var(--accent-color)}.page{height:100%}.page__header{display:flex;justify-content:space-between;margin-bottom:1.5rem;min-height:8rem}.page__header .grid{margin-top:auto}.page__header h1{margin-top:auto;font-size:2rem}#confirmation_popup,#prompt_popup{flex-direction:column}#confirmation_popup h4,#prompt_popup h4{margin-bottom:.5rem}#confirmation_popup sm-button,#prompt_popup sm-button{margin:0}#confirmation_popup .flex,#prompt_popup .flex{padding:0;margin-top:1rem}#confirmation_popup .flex sm-button:first-of-type,#prompt_popup .flex sm-button:first-of-type{margin-right:.6rem;margin-left:auto}#prompt_message{margin-bottom:1.5rem}.popup__header{display:grid;gap:.5rem;width:100%;padding:0 1.5rem;align-items:center}.popup__header__close{padding:.5rem;margin-left:-0.5rem}.flo-icon{margin-right:.3rem;height:1.5rem;width:1.5rem}#secondary_pages{display:flex;flex-direction:column;width:100%}#secondary_pages header{padding:1.5rem}#secondary_pages .inner-page{height:100%}#landing>section{justify-content:center;justify-items:center;align-items:center;text-align:center;padding:8vw 0}#landing h1{font-size:clamp(2rem,5vw,5rem)}#main_header{padding:1.5rem}#main_card{display:grid;grid-template-columns:minmax(0, 1fr);grid-template-rows:auto 1fr;height:100%;width:100%;transition:background-color .3s;background-color:rgba(var(--foreground-color), 1)}#main_navbar{display:flex;background:rgba(var(--text-color), 0.03)}#main_navbar.hide-away{position:absolute}#main_navbar ul{display:flex;height:100%;width:100%}#main_navbar ul li{width:100%}.nav-item{position:relative;display:flex;flex:1;width:100%;flex-direction:column;align-items:center;justify-content:center;padding:.5rem .3rem;color:var(--text-color);font-size:.8rem;border-radius:.3rem;font-weight:500}.nav-item .icon{transition:transform .2s cubic-bezier(0.175, 0.885, 0.32, 1.275)}.nav-item__title{margin-top:.3rem;transition:opacity .2s,transform .2s cubic-bezier(0.175, 0.885, 0.32, 1.275)}.nav-item--active{color:var(--accent-color)}.nav-item--active .icon{fill:var(--accent-color);transform:translateY(50%)}.nav-item--active .nav-item__title{transform:translateY(100%);opacity:0}.nav-item__indicator{position:absolute;bottom:0;width:2rem;height:.3rem;background:var(--accent-color);border-radius:1rem 1rem 0 0;z-index:1}.inner-page{padding:0 1.5rem;flex:1;overflow-y:auto;align-content:start}.password-field label{display:flex}.password-field label input:checked~.visible{display:none}.password-field label input:not(:checked)~.invisible{display:none}.multi-state-button{display:grid;text-align:center;align-items:center}.multi-state-button>*{grid-area:1/1/2/2}.multi-state-button button{z-index:1}.scrolling-wrapper{overflow-y:auto}#pages_container{overflow-y:auto;padding:0 1rem}.primary-action{display:flex;padding:.8rem 1rem;gap:.5rem;white-space:normal;font-size:.8rem;border-radius:.5rem;background-color:rgba(0,0,0,0);border:thin solid rgba(var(--text-color), 0.3);text-align:left}.primary-action .icon{fill:var(--accent-color)}.primary-action:not(:last-of-type){margin-right:.5rem}#flo_id_warning{padding-bottom:1.5rem;border-bottom:thin solid rgba(var(--text-color), 0.3)}#flo_id_warning .icon{height:4rem;width:4rem;padding:1rem;background-color:#ffc107;border-radius:3rem;fill:rgba(0,0,0,.8);margin-bottom:1.5rem}.generated-id-card{display:grid;gap:1rem}.generated-id-card h5{margin-bottom:.3rem}#address_balance_card{padding:1rem;background-color:rgba(var(--text-color), 0.06);border-radius:.5rem;margin-top:.5rem;margin-bottom:1.5rem}.card{padding:.5rem 0;border:none}.card:not(:last-of-type){border-bottom:solid thin rgba(var(--text-color), 0.3)}.remove-card-wrapper{min-height:2rem}.sender-card{display:grid;gap:.5rem;margin-bottom:.5rem}.receiver-card{display:grid;gap:.5rem}.balance-wrapper{padding-bottom:.5rem;border-bottom:thin solid rgba(var(--text-color), 0.3)}#transactions_list{display:grid;gap:2rem;padding-bottom:4rem}.transaction{grid-template-columns:auto 1fr auto;gap:.5rem 1rem;align-items:center;grid-template-areas:"icon receiver receiver" "icon time amount"}.transaction__amount{white-space:nowrap}.transaction.out .icon{fill:var(--danger-color)}.transaction.out .transaction__amount{color:var(--danger-color)}.transaction.out .transaction__amount::before{content:"- "}.transaction.in .icon{fill:var(--green)}.transaction.in .transaction__amount{color:var(--green)}.transaction.in .transaction__amount::before{content:"+ "}.transaction__icon{grid-area:icon;display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;background-color:rgba(var(--text-color), 0.03);border-radius:2rem}.transaction__receiver{grid-area:receiver;font-weight:500}.transaction__time{grid-area:time;font-size:.8rem;color:rgba(var(--text-color), 0.8)}.transaction__amount{grid-area:amount;font-size:1rem;font-weight:700}.fab{position:absolute;right:0;bottom:0;margin:1.5rem;box-shadow:0 .5rem 1rem rgba(0,0,0,.2);z-index:2}#scroll_to_top{border-radius:3rem;background-color:rgba(var(--foreground-color), 1)}.user-action-result__icon{justify-self:center;height:4rem;width:4rem;border-radius:5rem;margin-bottom:2rem;-webkit-animation:popup 1s;animation:popup 1s}.user-action-result__icon.success{fill:rgba(var(--background-color), 1);padding:1rem;background-color:#0bbe56}.user-action-result__icon.failed{background-color:rgba(var(--text-color), 0.03);fill:var(--danger-color)}@-webkit-keyframes popup{0%{opacity:0;transform:scale(0.2) translateY(600%)}10%{transform:scale(0.2) translateY(5rem);opacity:1}40%{transform:scale(0.2) translateY(0)}80%{transform:scale(1.1) translateY(0)}100%{transform:scale(1) translateY(0)}}@keyframes popup{0%{opacity:0;transform:scale(0.2) translateY(600%)}10%{transform:scale(0.2) translateY(5rem);opacity:1}40%{transform:scale(0.2) translateY(0)}80%{transform:scale(1.1) translateY(0)}100%{transform:scale(1) translateY(0)}}@media screen and (max-width: 40rem){#main_navbar.hide-away{bottom:0;left:0;right:0}}@media screen and (min-width: 40rem){sm-popup{--width: 24rem}.popup__header{grid-column:1/-1;padding:1rem 1.5rem 0 1.5rem}body{align-items:center;justify-content:center}#main_card{grid-template-areas:"header" ".";position:relative;overflow:hidden;box-shadow:0 .1rem .2rem rgba(0,0,0,.05),0 1rem 3rem rgba(0,0,0,.2)}#main_card:not(.nav-hidden){grid-template-columns:auto 1fr;grid-template-rows:auto 1fr;grid-template-areas:"nav header" "nav ."}#main_header{grid-area:header}#main_navbar{grid-area:nav;border-top:none;flex-direction:column;background-color:rgba(37,110,255,.03)}#main_navbar ul{flex-direction:column;gap:.5rem;padding:.3rem}.nav-item{aspect-ratio:1/1}.nav-item__indicator{width:.25rem;height:50%;left:0;border-radius:0 1rem 1rem 0;bottom:auto}body[data-theme=dark] #main_navbar{background-color:rgba(0,0,0,.2)}#pages_container{padding:0 4vw}#generate_btc_addr_popup,#retrieve_btc_addr_popup{--width: 28rem}}@media screen and (min-width: 48rem){.sender-card,.receiver-card{grid-template-columns:1fr 1fr}}@media screen and (min-width: 56rem){#main_card{margin:2rem 12vw;width:calc(100% - 24vw);height:calc(100% - 4rem);border-radius:.5rem}}@media(any-hover: hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color), 0.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color), 0.5)}.interactive:not([disabled]){transition:background-color .3s}.interactive:not([disabled]):hover{background-color:rgba(var(--text-color), 0.06)}button:not([disabled]),.button:not([disabled]){transition:background-color .3s,filter .3s}button:not([disabled]):hover,.button:not([disabled]):hover{filter:contrast(2)}}@supports(overflow: overlay){body{overflow:overlay}}.hidden{display:none !important}
\ No newline at end of file
diff --git a/css/main.scss b/css/main.scss
new file mode 100644
index 0000000..65521ea
--- /dev/null
+++ b/css/main.scss
@@ -0,0 +1,992 @@
+* {
+ padding: 0;
+ margin: 0;
+ box-sizing: border-box;
+ font-family: "Roboto", sans-serif;
+}
+:root {
+ font-size: clamp(1rem, 1.2vmax, 1.2rem);
+}
+
+html,
+body {
+ height: 100%;
+}
+
+body {
+ --accent-color: #4d77ff;
+ --text-color: 20, 20, 20;
+ --foreground-color: 252, 253, 255;
+ --background-color: 241, 243, 248;
+ --danger-color: rgb(255, 75, 75);
+ --green: #1cad59;
+ --yellow: rgb(220, 165, 0);
+ scrollbar-width: thin;
+ scrollbar-gutter: stable;
+ color: rgba(var(--text-color), 1);
+ background-color: rgba(var(--background-color), 1);
+ transition: background-color 0.3s;
+ position: relative;
+ display: flex;
+ flex-direction: column;
+}
+
+body[data-theme="dark"] {
+ --accent-color: #a0b6ff;
+ --text-color: 220, 220, 220;
+ --foreground-color: 27, 28, 29;
+ --background-color: 21, 22, 22;
+ --danger-color: rgb(255, 106, 106);
+ --green: #00e676;
+ --yellow: rgb(255, 213, 5);
+ sm-popup::part(popup) {
+ background-color: rgba(var(--foreground-color), 1);
+ }
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ &,
+ & > * {
+ font-weight: 400;
+ font-family: "Calistoga", cursive;
+ }
+}
+
+p,
+strong {
+ font-size: 0.9rem;
+ max-width: 65ch;
+ line-height: 1.7;
+ color: rgba(var(--text-color), 0.9);
+}
+.warning {
+ line-height: normal;
+ padding: 1rem;
+ background-color: khaki;
+ border-radius: 0.5rem;
+ font-weight: 500;
+ color: rgba(0, 0, 0, 0.7);
+}
+a {
+ text-decoration: none;
+ color: var(--accent-color);
+ &:focus-visible {
+ box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1) inset;
+ }
+}
+a.button {
+ padding: 0.4rem 0.6rem;
+ border-radius: 0.3rem;
+ font-size: 0.9rem;
+ font-weight: 500;
+ color: inherit;
+}
+
+button {
+ user-select: none;
+ position: relative;
+ display: inline-flex;
+ border: none;
+ background-color: transparent;
+ overflow: hidden;
+ -webkit-tap-highlight-color: transparent;
+ align-items: center;
+ font-size: 0.9rem;
+ font-weight: 500;
+ white-space: nowrap;
+ padding: 0.8rem;
+ border-radius: 0.3rem;
+ justify-content: center;
+ &:focus-visible {
+ outline: var(--accent-color) solid medium;
+ }
+ &:not(:disabled) {
+ color: var(--accent-color);
+ cursor: pointer;
+ }
+ .icon {
+ fill: var(--accent-color);
+ }
+}
+.button {
+ background-color: rgba(var(--text-color), 0.06);
+ &--primary,
+ &--danger {
+ color: rgba(var(--background-color), 1) !important;
+ .icon {
+ fill: rgba(var(--background-color), 1);
+ }
+ }
+ &--primary {
+ background-color: var(--accent-color);
+ }
+ &--danger {
+ background-color: var(--danger-color);
+ }
+ &--small {
+ padding: 0.4rem 0.5rem;
+ }
+}
+.cta {
+ text-transform: uppercase;
+ font-size: 0.8rem;
+ font-weight: 700;
+ letter-spacing: 0.05em;
+ padding: 0.8rem 1rem;
+}
+.icon {
+ width: 1.2rem;
+ height: 1.2rem;
+ fill: rgba(var(--text-color), 0.8);
+ flex-shrink: 0;
+}
+.icon-only {
+ padding: 0.5rem;
+ border-radius: 0.3rem;
+}
+
+button:disabled {
+ opacity: 0.5;
+}
+
+a:any-link:focus-visible {
+ outline: rgba(var(--text-color), 1) 0.1rem solid;
+}
+
+details summary {
+ display: flex;
+ user-select: none;
+ cursor: pointer;
+ align-items: center;
+ justify-content: space-between;
+ color: var(--accent-color);
+}
+
+details[open] {
+ & summary {
+ margin-bottom: 1rem;
+ }
+ & > summary .down-arrow {
+ transform: rotate(180deg);
+ }
+}
+
+sm-input,
+sm-textarea {
+ width: 100%;
+ --border-radius: 0.4rem;
+ --background-color: rgba(var(--foreground-color), 1);
+ button {
+ .icon {
+ fill: var(--accent-color);
+ }
+ }
+}
+sm-button {
+ --padding: 0.8rem;
+ &[variant="primary"] {
+ .icon {
+ fill: rgba(var(--background-color), 1);
+ }
+ }
+
+ &[disabled] {
+ .icon {
+ fill: rgba(var(--text-color), 0.6);
+ }
+ }
+ &.danger {
+ --background: var(--danger-color);
+ color: rgba(var(--background-color), 1);
+ }
+}
+sm-spinner {
+ --size: 1rem;
+ --stroke-width: 0.1rem;
+}
+sm-form {
+ --gap: 1rem;
+}
+sm-select {
+ font-size: 0.9rem;
+ --padding: 0.6rem 0.3rem 0.6rem 0.6rem;
+}
+sm-option {
+ font-size: 0.9rem;
+}
+strip-select {
+ --gap: 0;
+ background-color: rgba(var(--text-color), 0.06);
+ border-radius: 0.3rem;
+ padding: 0.3rem;
+}
+strip-option {
+ font-size: 0.8rem;
+ --border-radius: 0.2rem;
+ user-select: none;
+}
+ul,
+ol {
+ list-style: none;
+}
+ol {
+ counter-reset: item;
+ li {
+ position: relative;
+ display: flex;
+ align-items: flex-start;
+ counter-increment: item;
+ &:not(:last-of-type) {
+ padding-bottom: 1.5rem;
+ &::after {
+ content: "";
+ position: absolute;
+ width: 0.1rem;
+ height: calc(100% - 2.2rem);
+ background: var(--accent-color);
+ margin-left: 0.7rem;
+ margin-top: 2rem;
+ }
+ }
+ }
+ li::before {
+ content: counter(item);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ font-size: 0.8rem;
+ font-weight: 500;
+ margin-top: 0.15rem;
+ margin-right: 1rem;
+ line-height: 1;
+ width: 1.5rem;
+ height: 1.5rem;
+ border-radius: 100%;
+ flex-shrink: 0;
+ color: rgba(var(--text-color), 0.8);
+ background: rgba(var(--text-color), 0.1);
+ }
+}
+
+.overflow-ellipsis {
+ width: 100%;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+}
+
+.breakable {
+ overflow-wrap: break-word;
+ word-wrap: break-word;
+ word-break: break-word;
+ hyphens: auto;
+}
+
+.full-bleed {
+ grid-column: 1/-1;
+}
+.uppercase {
+ text-transform: uppercase;
+}
+
+.capitalize {
+ text-transform: capitalize;
+}
+
+.sticky {
+ position: sticky;
+}
+.top-0 {
+ top: 0;
+}
+
+.flex {
+ display: flex;
+}
+.flex-wrap {
+ flex-wrap: wrap;
+}
+.flex-1 {
+ flex: 1;
+}
+
+.grid {
+ display: grid;
+}
+.flow-column {
+ grid-auto-flow: column;
+}
+
+.gap-0-3 {
+ gap: 0.3rem;
+}
+.gap-0-5 {
+ gap: 0.5rem;
+}
+
+.gap-1 {
+ gap: 1rem;
+}
+
+.gap-1-5 {
+ gap: 1.5rem;
+}
+
+.gap-2 {
+ gap: 2rem;
+}
+
+.gap-3 {
+ gap: 3rem;
+}
+
+.text-align-right {
+ text-align: right;
+}
+
+.align-start {
+ align-content: flex-start;
+}
+
+.align-center {
+ align-items: center;
+}
+.align-end {
+ align-items: flex-end;
+}
+
+.text-center {
+ text-align: center;
+}
+
+.justify-start {
+ justify-items: start;
+}
+
+.justify-center {
+ justify-content: center;
+}
+
+.justify-right {
+ margin-left: auto;
+}
+
+.align-self-center {
+ align-self: center;
+}
+.align-self-end {
+ align-self: end;
+}
+
+.justify-self-center {
+ justify-self: center;
+}
+
+.justify-self-start {
+ justify-self: start;
+}
+
+.justify-self-end {
+ justify-self: end;
+}
+
+.flex-direction-column {
+ flex-direction: column;
+}
+
+.space-between {
+ justify-content: space-between;
+}
+
+.w-100 {
+ width: 100%;
+}
+.h-100 {
+ height: 100%;
+}
+.label {
+ font-size: 0.8rem;
+ color: rgba(var(--text-color), 0.8);
+ font-weight: 500;
+ margin-bottom: 0.2rem;
+}
+
+.button--primary,
+.button--danger {
+ .ripple {
+ background: radial-gradient(
+ circle,
+ rgba(var(--background-color), 0.3) 0%,
+ rgba(0, 0, 0, 0) 50%
+ );
+ }
+}
+.ripple {
+ height: 8rem;
+ width: 8rem;
+ position: absolute;
+ border-radius: 50%;
+ transform: scale(0);
+ background: radial-gradient(
+ circle,
+ rgba(var(--text-color), 0.3) 0%,
+ rgba(0, 0, 0, 0) 50%
+ );
+ pointer-events: none;
+}
+.interactive {
+ position: relative;
+ overflow: hidden;
+ cursor: pointer;
+ -webkit-tap-highlight-color: transparent;
+}
+.empty-state {
+ display: grid;
+ width: 100%;
+ padding: 1.5rem 0;
+}
+
+.observe-empty-state:empty {
+ display: none !important;
+}
+
+.observe-empty-state:not(:empty) + .empty-state {
+ display: none !important;
+}
+
+.bullet-point {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin: 0 0.8ch;
+ &::after {
+ content: "";
+ height: 0.4ch;
+ width: 0.4ch;
+ border-radius: 0.5em;
+ background-color: var(--accent-color);
+ }
+}
+.margin-right-0-3 {
+ margin-right: 0.3rem;
+}
+.margin-right-0-5 {
+ margin-right: 0.5rem;
+}
+
+.margin-left-0-5 {
+ margin-left: 0.5rem;
+}
+.margin-top-1-5 {
+ margin-top: 1.5rem;
+}
+.margin-bottom-0-5 {
+ margin-bottom: 0.5rem;
+}
+.margin-bottom-1 {
+ margin-bottom: 1rem;
+}
+.margin-bottom-1-5 {
+ margin-bottom: 1.5rem;
+}
+.margin-bottom-2 {
+ margin-bottom: 2rem;
+}
+
+.icon-button {
+ padding: 0.6rem;
+ border-radius: 0.8rem;
+ background-color: rgba(var(--text-color), 0.1);
+ height: max-content;
+ .icon {
+ fill: var(--accent-color);
+ }
+}
+.page {
+ height: 100%;
+ &__header {
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 1.5rem;
+ min-height: 8rem;
+ .grid {
+ margin-top: auto;
+ }
+ h1 {
+ margin-top: auto;
+ font-size: 2rem;
+ }
+ }
+}
+#confirmation_popup,
+#prompt_popup {
+ flex-direction: column;
+ h4 {
+ margin-bottom: 0.5rem;
+ }
+ sm-button {
+ margin: 0;
+ }
+ .flex {
+ padding: 0;
+ margin-top: 1rem;
+ sm-button:first-of-type {
+ margin-right: 0.6rem;
+ margin-left: auto;
+ }
+ }
+}
+#prompt_message {
+ margin-bottom: 1.5rem;
+}
+
+.popup__header {
+ display: grid;
+ gap: 0.5rem;
+ width: 100%;
+ padding: 0 1.5rem;
+ align-items: center;
+}
+
+.popup__header__close {
+ padding: 0.5rem;
+ margin-left: -0.5rem;
+}
+.flo-icon {
+ margin-right: 0.3rem;
+ height: 1.5rem;
+ width: 1.5rem;
+}
+#secondary_pages {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ header {
+ padding: 1.5rem;
+ }
+ .inner-page {
+ height: 100%;
+ }
+}
+#landing {
+ & > section {
+ justify-content: center;
+ justify-items: center;
+ align-items: center;
+ text-align: center;
+ padding: 8vw 0;
+ }
+ h1 {
+ font-size: clamp(2rem, 5vw, 5rem);
+ }
+}
+#main_header {
+ padding: 1.5rem;
+}
+#main_card {
+ display: grid;
+ grid-template-columns: minmax(0, 1fr);
+ grid-template-rows: auto 1fr;
+ height: 100%;
+ width: 100%;
+ transition: background-color 0.3s;
+ background-color: rgba(var(--foreground-color), 1);
+}
+
+#main_navbar {
+ display: flex;
+ background: rgba(var(--text-color), 0.03);
+ &.hide-away {
+ position: absolute;
+ }
+ ul {
+ display: flex;
+ height: 100%;
+ width: 100%;
+ li {
+ width: 100%;
+ }
+ }
+}
+.nav-item {
+ position: relative;
+ display: flex;
+ flex: 1;
+ width: 100%;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: 0.5rem 0.3rem;
+ color: var(--text-color);
+ font-size: 0.8rem;
+ border-radius: 0.3rem;
+ font-weight: 500;
+ .icon {
+ transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+ }
+ &__title {
+ margin-top: 0.3rem;
+ transition: opacity 0.2s,
+ transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+ }
+ &--active {
+ color: var(--accent-color);
+ .icon {
+ fill: var(--accent-color);
+ transform: translateY(50%);
+ }
+ .nav-item__title {
+ transform: translateY(100%);
+ opacity: 0;
+ }
+ }
+ &__indicator {
+ position: absolute;
+ bottom: 0;
+ width: 2rem;
+ height: 0.3rem;
+ background: var(--accent-color);
+ border-radius: 1rem 1rem 0 0;
+ z-index: 1;
+ }
+}
+.inner-page {
+ padding: 0 1.5rem;
+ flex: 1;
+ overflow-y: auto;
+ align-content: start;
+}
+
+.password-field {
+ label {
+ display: flex;
+ input:checked ~ .visible {
+ display: none;
+ }
+ input:not(:checked) ~ .invisible {
+ display: none;
+ }
+ }
+}
+.multi-state-button {
+ display: grid;
+ text-align: center;
+ align-items: center;
+ & > * {
+ grid-area: 1/1/2/2;
+ }
+ button {
+ z-index: 1;
+ }
+}
+.scrolling-wrapper {
+ overflow-y: auto;
+}
+#pages_container {
+ overflow-y: auto;
+ padding: 0 1rem;
+}
+.primary-action {
+ display: flex;
+ padding: 0.8rem 1rem;
+ gap: 0.5rem;
+ white-space: normal;
+ font-size: 0.8rem;
+ border-radius: 0.5rem;
+ background-color: transparent;
+ border: thin solid rgba(var(--text-color), 0.3);
+ text-align: left;
+ .icon {
+ fill: var(--accent-color);
+ }
+ &:not(:last-of-type) {
+ margin-right: 0.5rem;
+ }
+}
+#flo_id_warning {
+ padding-bottom: 1.5rem;
+ border-bottom: thin solid rgba(var(--text-color), 0.3);
+ .icon {
+ height: 4rem;
+ width: 4rem;
+ padding: 1rem;
+ background-color: #ffc107;
+ border-radius: 3rem;
+ fill: rgba(0, 0, 0, 0.8);
+ margin-bottom: 1.5rem;
+ }
+}
+.generated-id-card {
+ display: grid;
+ gap: 1rem;
+ h5 {
+ margin-bottom: 0.3rem;
+ }
+}
+#address_balance_card {
+ padding: 1rem;
+ background-color: rgba(var(--text-color), 0.06);
+ border-radius: 0.5rem;
+ margin-top: 0.5rem;
+ margin-bottom: 1.5rem;
+}
+.card {
+ padding: 0.5rem 0;
+ border: none;
+ &:not(:last-of-type) {
+ border-bottom: solid thin rgba(var(--text-color), 0.3);
+ }
+}
+.remove-card-wrapper {
+ min-height: 2rem;
+}
+.sender-card {
+ display: grid;
+ gap: 0.5rem;
+ margin-bottom: 0.5rem;
+}
+.receiver-card {
+ display: grid;
+ gap: 0.5rem;
+}
+.balance-wrapper {
+ padding-bottom: 0.5rem;
+ border-bottom: thin solid rgba(var(--text-color), 0.3);
+}
+
+#transactions_list {
+ display: grid;
+ gap: 2rem;
+ padding-bottom: 4rem;
+}
+.transaction {
+ grid-template-columns: auto 1fr auto;
+ gap: 0.5rem 1rem;
+ align-items: center;
+ grid-template-areas: "icon receiver receiver" "icon time amount";
+ &__amount {
+ white-space: nowrap;
+ }
+ &.out {
+ .icon {
+ fill: var(--danger-color);
+ }
+ .transaction__amount {
+ color: var(--danger-color);
+ &::before {
+ content: "- ";
+ }
+ }
+ }
+ &.in {
+ .icon {
+ fill: var(--green);
+ }
+ .transaction__amount {
+ color: var(--green);
+ &::before {
+ content: "+ ";
+ }
+ }
+ }
+ &__icon {
+ grid-area: icon;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 2.5rem;
+ height: 2.5rem;
+ background-color: rgba(var(--text-color), 0.03);
+ border-radius: 2rem;
+ }
+ &__receiver {
+ grid-area: receiver;
+ font-weight: 500;
+ }
+ &__time {
+ grid-area: time;
+ font-size: 0.8rem;
+ color: rgba(var(--text-color), 0.8);
+ }
+ &__amount {
+ grid-area: amount;
+ font-size: 1rem;
+ font-weight: 700;
+ }
+}
+.fab {
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ margin: 1.5rem;
+ box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
+ z-index: 2;
+}
+#scroll_to_top {
+ border-radius: 3rem;
+ background-color: rgba(var(--foreground-color), 1);
+}
+.user-action-result__icon {
+ justify-self: center;
+ height: 4rem;
+ width: 4rem;
+ border-radius: 5rem;
+ margin-bottom: 2rem;
+ animation: popup 1s;
+ &.success {
+ fill: rgba(var(--background-color), 1);
+ padding: 1rem;
+ background-color: #0bbe56;
+ }
+ &.failed {
+ background-color: rgba(var(--text-color), 0.03);
+ fill: var(--danger-color);
+ }
+}
+@keyframes popup {
+ 0% {
+ opacity: 0;
+ transform: scale(0.2) translateY(600%);
+ }
+ 10% {
+ transform: scale(0.2) translateY(5rem);
+ opacity: 1;
+ }
+ 40% {
+ transform: scale(0.2) translateY(0);
+ }
+ 80% {
+ transform: scale(1.1) translateY(0);
+ }
+ 100% {
+ transform: scale(1) translateY(0);
+ }
+}
+@media screen and (max-width: 40rem) {
+ #main_navbar {
+ &.hide-away {
+ bottom: 0;
+ left: 0;
+ right: 0;
+ }
+ }
+}
+@media screen and (min-width: 40rem) {
+ sm-popup {
+ --width: 24rem;
+ }
+ .popup__header {
+ grid-column: 1/-1;
+ padding: 1rem 1.5rem 0 1.5rem;
+ }
+ body {
+ align-items: center;
+ justify-content: center;
+ }
+
+ #main_card {
+ grid-template-areas: "header" ".";
+ &:not(.nav-hidden) {
+ grid-template-columns: auto 1fr;
+ grid-template-rows: auto 1fr;
+ grid-template-areas: "nav header" "nav .";
+ }
+ position: relative;
+ overflow: hidden;
+ box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.05),
+ 0 1rem 3rem rgba(0, 0, 0, 0.2);
+ }
+ #main_header {
+ grid-area: header;
+ }
+ #main_navbar {
+ grid-area: nav;
+ border-top: none;
+ flex-direction: column;
+ background-color: rgba(37 110 255/ 0.03);
+ ul {
+ flex-direction: column;
+ gap: 0.5rem;
+ padding: 0.3rem;
+ }
+ }
+ .nav-item {
+ aspect-ratio: 1/1;
+ &__indicator {
+ width: 0.25rem;
+ height: 50%;
+ left: 0;
+ border-radius: 0 1rem 1rem 0;
+ bottom: auto;
+ }
+ }
+ body[data-theme="dark"] {
+ #main_navbar {
+ background-color: rgba(0 0 0/ 0.2);
+ }
+ }
+ #pages_container {
+ padding: 0 4vw;
+ }
+ #generate_btc_addr_popup,
+ #retrieve_btc_addr_popup {
+ --width: 28rem;
+ }
+}
+@media screen and (min-width: 48rem) {
+ .sender-card,
+ .receiver-card {
+ grid-template-columns: 1fr 1fr;
+ }
+}
+@media screen and (min-width: 56rem) {
+ #main_card {
+ margin: 2rem 12vw;
+ width: calc(100% - 24vw);
+ height: calc(100% - 4rem);
+ border-radius: 0.5rem;
+ }
+}
+@media (any-hover: hover) {
+ ::-webkit-scrollbar {
+ width: 0.5rem;
+ height: 0.5rem;
+ }
+
+ ::-webkit-scrollbar-thumb {
+ background: rgba(var(--text-color), 0.3);
+ border-radius: 1rem;
+ &:hover {
+ background: rgba(var(--text-color), 0.5);
+ }
+ }
+ .interactive:not([disabled]) {
+ transition: background-color 0.3s;
+ &:hover {
+ background-color: rgba(var(--text-color), 0.06);
+ }
+ }
+ button:not([disabled]),
+ .button:not([disabled]) {
+ transition: background-color 0.3s, filter 0.3s;
+ &:hover {
+ filter: contrast(2);
+ }
+ }
+}
+
+@supports (overflow: overlay) {
+ body {
+ overflow: overlay;
+ }
+}
+
+.hidden {
+ display: none !important;
+}
diff --git a/index.html b/index.html
index 52ebd36..0e2bdf4 100644
--- a/index.html
+++ b/index.html
@@ -2,7 +2,7 @@
- BTC webWallet
+ Bitcoin Web Wallet
-
-
-
-
+
+
+
+
+
+
-