diff --git a/components.js b/components.js
new file mode 100644
index 0000000..9cb3fb3
--- /dev/null
+++ b/components.js
@@ -0,0 +1,3580 @@
+//Button
+const smButton = document.createElement('template')
+smButton.innerHTML = `
+
+
+
+
`;
+customElements.define('sm-button',
+ class extends HTMLElement {
+ constructor() {
+ super()
+ this.attachShadow({
+ mode: 'open'
+ }).append(smButton.content.cloneNode(true))
+ }
+
+ get disabled() {
+ return this.isDisabled
+ }
+
+ set disabled(value) {
+ if (value && !this.isDisabled) {
+ this.isDisabled = true
+ this.setAttribute('disabled', '')
+ this.button.removeAttribute('tabindex')
+ } else if (!value && this.isDisabled) {
+ this.isDisabled = false
+ this.removeAttribute('disabled')
+ }
+ }
+
+ dispatch() {
+ if (this.isDisabled) {
+ this.dispatchEvent(new CustomEvent('disabled', {
+ bubbles: true,
+ composed: true
+ }))
+ } else {
+ this.dispatchEvent(new CustomEvent('clicked', {
+ bubbles: true,
+ composed: true
+ }))
+ }
+ }
+
+ connectedCallback() {
+ this.isDisabled = false
+ this.button = this.shadowRoot.querySelector('.button')
+ if (this.hasAttribute('disabled') && !this.isDisabled)
+ this.isDisabled = true
+ this.addEventListener('click', (e) => {
+ this.dispatch()
+ })
+ this.addEventListener('keyup', (e) => {
+ if (e.code === "Enter" || e.code === "Space")
+ this.dispatch()
+ })
+ }
+ })
+
+//Input
+const smInput = document.createElement('template')
+smInput.innerHTML = `
+
+
+
+
+
+`;
+customElements.define('sm-input',
+ class extends HTMLElement {
+ constructor() {
+ super()
+ this.attachShadow({
+ mode: 'open'
+ }).append(smInput.content.cloneNode(true))
+ }
+ static get observedAttributes() {
+ return ['placeholder']
+ }
+
+ get value() {
+ return this.shadowRoot.querySelector('input').value
+ }
+
+ set value(val) {
+ this.shadowRoot.querySelector('input').value = val;
+ this.checkInput()
+ this.fireEvent()
+ }
+
+ get placeholder() {
+ return this.getAttribute('placeholder')
+ }
+
+ set placeholder(val) {
+ this.setAttribute('placeholder', val)
+ }
+
+ get type() {
+ return this.getAttribute('type')
+ }
+
+ get isValid() {
+ return this.shadowRoot.querySelector('input').checkValidity()
+ }
+
+ get validity() {
+ return this.shadowRoot.querySelector('input').validity
+ }
+
+ set disabled(value) {
+ if (value)
+ this.shadowRoot.querySelector('.input').classList.add('disabled')
+ else
+ this.shadowRoot.querySelector('.input').classList.remove('disabled')
+ }
+ set readOnly(value) {
+ if (value) {
+ this.shadowRoot.querySelector('input').setAttribute('readonly', '')
+ this.shadowRoot.querySelector('.input').classList.add('readonly')
+ } else {
+ this.shadowRoot.querySelector('input').removeAttribute('readonly')
+ this.shadowRoot.querySelector('.input').classList.remove('readonly')
+ }
+ }
+
+ setValidity = (message) => {
+ this.feedbackText.textContent = message
+ }
+
+ showValidity = () => {
+ this.feedbackText.classList.remove('hide-completely')
+ }
+
+ hideValidity = () => {
+ this.feedbackText.classList.add('hide-completely')
+ }
+
+ focusIn = () => {
+ this.input.focus()
+ }
+
+ focusOut = () => {
+ this.input.blur()
+ }
+
+ fireEvent = () => {
+ let event = new Event('input', {
+ bubbles: true,
+ cancelable: true,
+ composed: true
+ });
+ this.dispatchEvent(event);
+ }
+
+ checkInput = (e) => {
+ if (!this.hasAttribute('placeholder') || this.getAttribute('placeholder') === '') return;
+ if (this.input.value !== '') {
+ if (this.animate)
+ this.inputParent.classList.add('animate-label')
+ else
+ this.label.classList.add('hide')
+ if (!this.readonly)
+ this.clearBtn.classList.remove('hide')
+ } else {
+ if (this.animate)
+ this.inputParent.classList.remove('animate-label')
+ else
+ this.label.classList.remove('hide')
+ if (!this.readonly)
+ this.clearBtn.classList.add('hide')
+ }
+ }
+
+
+ connectedCallback() {
+ this.inputParent = this.shadowRoot.querySelector('.input')
+ this.clearBtn = this.shadowRoot.querySelector('.clear')
+ this.label = this.shadowRoot.querySelector('.label')
+ this.feedbackText = this.shadowRoot.querySelector('.feedback-text')
+ this.valueChanged = false;
+ this.readonly = false
+ this.isNumeric = false
+ this.min
+ this.max
+ this.animate = this.hasAttribute('animate')
+ this.input = this.shadowRoot.querySelector('input')
+ this.shadowRoot.querySelector('.label').textContent = this.getAttribute('placeholder')
+ if (this.hasAttribute('value')) {
+ this.input.value = this.getAttribute('value')
+ this.checkInput()
+ }
+ if (this.hasAttribute('required')) {
+ this.input.setAttribute('required', '')
+ }
+ if (this.hasAttribute('min')) {
+ let minValue = this.getAttribute('min')
+ this.input.setAttribute('min', minValue)
+ this.min = parseInt(minValue)
+ }
+ if (this.hasAttribute('max')) {
+ let maxValue = this.getAttribute('max')
+ this.input.setAttribute('max', maxValue)
+ this.max = parseInt(maxValue)
+ }
+ if (this.hasAttribute('minlength')) {
+ let minValue = this.getAttribute('minlength')
+ this.input.setAttribute('minlength', minValue)
+ }
+ if (this.hasAttribute('maxlength')) {
+ let maxValue = this.getAttribute('maxlength')
+ this.input.setAttribute('maxlength', maxValue)
+ }
+ if (this.hasAttribute('pattern')) {
+ this.input.setAttribute('pattern', this.getAttribute('pattern'))
+ }
+ if (this.hasAttribute('readonly')) {
+ this.input.setAttribute('readonly', '')
+ this.readonly = true
+ }
+ if (this.hasAttribute('disabled')) {
+ this.inputParent.classList.add('disabled')
+ }
+ if (this.hasAttribute('error-text')) {
+ this.feedbackText.textContent = this.getAttribute('error-text')
+ }
+ if (this.hasAttribute('type')) {
+ if (this.getAttribute('type') === 'number') {
+ this.input.setAttribute('inputmode', 'numeric')
+ this.input.setAttribute('type', 'number')
+ this.isNumeric = true
+ } else
+ this.input.setAttribute('type', this.getAttribute('type'))
+ } else
+ this.input.setAttribute('type', 'text')
+ this.input.addEventListener('input', e => {
+ this.checkInput(e)
+ })
+ this.clearBtn.addEventListener('click', e => {
+ this.value = ''
+ })
+ }
+
+ attributeChangedCallback(name, oldValue, newValue) {
+ if (oldValue !== newValue) {
+ if (name === 'placeholder') {
+ this.shadowRoot.querySelector('.label').textContent = newValue;
+ this.setAttribute('aria-label', newValue);
+ }
+ }
+ }
+ })
+
+//textarea
+const smTextarea = document.createElement('template')
+smTextarea.innerHTML = `
+
+
+`;
+customElements.define('sm-textarea',
+ class extends HTMLElement {
+ constructor() {
+ super()
+ this.attachShadow({
+ mode: 'open'
+ }).append(smTextarea.content.cloneNode(true))
+ }
+ static get observedAttributes() {
+ return ['placeholder']
+ }
+
+ get value() {
+ return this.shadowRoot.querySelector('textarea').value
+ }
+
+ set value(val) {
+ this.shadowRoot.querySelector('textarea').value = val;
+ this.checkInput()
+ this.fireEvent()
+ }
+
+ get placeholder() {
+ return this.getAttribute('placeholder')
+ }
+
+ set placeholder(val) {
+ this.setAttribute('placeholder', val)
+ }
+
+ fireEvent() {
+ let event = new Event('input', {
+ bubbles: true,
+ cancelable: true,
+ composed: true
+ });
+ this.dispatchEvent(event);
+ }
+
+ checkInput() {
+ if (!this.hasAttribute('placeholder') || this.getAttribute('placeholder') === '')
+ return;
+ if (this.input.value !== '') {
+ this.clearBtn.classList.remove('hide')
+ if (this.animate)
+ this.inputParent.classList.add('animate-label')
+ else
+ this.label.classList.add('hide')
+ } else {
+ this.clearBtn.classList.add('hide')
+ if (this.animate)
+ this.inputParent.classList.remove('animate-label')
+ else
+ this.label.classList.remove('hide')
+ }
+
+ this.input.style.height = 'auto'
+ this.input.style.height = (this.input.scrollHeight) + 'px';
+ }
+
+
+ connectedCallback() {
+ this.inputParent = this.shadowRoot.querySelector('.input')
+ this.clearBtn = this.shadowRoot.querySelector('.clear')
+ this.label = this.shadowRoot.querySelector('.label')
+ this.valueChanged = false;
+ this.animate = this.hasAttribute('animate')
+ this.input = this.shadowRoot.querySelector('textarea')
+ this.shadowRoot.querySelector('.label').textContent = this.getAttribute('placeholder')
+
+ this.input.setAttribute('style', 'height:' + (this.input.scrollHeight) + 'px;overflow-y:hidden;');
+
+ if (this.hasAttribute('value')) {
+ this.input.value = this.getAttribute('value')
+ this.checkInput()
+ }
+ if (this.hasAttribute('required')) {
+ this.input.setAttribute('required', '')
+ }
+ if (this.hasAttribute('readonly')) {
+ this.input.setAttribute('readonly', '')
+ }
+ this.input.addEventListener('input', e => {
+ this.checkInput()
+ })
+ this.clearBtn.addEventListener('click', e => {
+ this.value = ''
+ })
+ }
+
+ attributeChangedCallback(name, oldValue, newValue) {
+ if (oldValue !== newValue) {
+ if (name === 'placeholder')
+ this.shadowRoot.querySelector('.label').textContent = newValue;
+ }
+ }
+ })
+
+// tab
+const smTab = document.createElement('template')
+smTab.innerHTML = `
+
+
+
+
+`;
+
+customElements.define('sm-tab', class extends HTMLElement {
+ constructor() {
+ super()
+ this.shadow = this.attachShadow({
+ mode: 'open'
+ }).append(smTab.content.cloneNode(true))
+ }
+})
+
+//chcekbox
+
+const smCheckbox = document.createElement('template')
+smCheckbox.innerHTML = `
+
+`
+customElements.define('sm-checkbox', class extends HTMLElement {
+ constructor() {
+ super()
+ this.attachShadow({
+ mode: 'open'
+ }).append(smCheckbox.content.cloneNode(true))
+
+ this.checkbox = this.shadowRoot.querySelector('.checkbox');
+ this.input = this.shadowRoot.querySelector('input')
+
+ this.isChecked = false
+ this.isDisabled = false
+ }
+
+ static get observedAttributes() {
+ return ['disabled', 'checked']
+ }
+
+ get disabled() {
+ return this.getAttribute('disabled')
+ }
+
+ set disabled(val) {
+ this.setAttribute('disabled', val)
+ }
+
+ get checked() {
+ return this.getAttribute('checked')
+ }
+
+ set checked(value) {
+ this.setAttribute('checked', value)
+ }
+
+ dispatch() {
+ this.dispatchEvent(new CustomEvent('change', {
+ bubbles: true,
+ composed: true
+ }))
+ }
+
+ connectedCallback() {
+ this.addEventListener('keyup', e => {
+ if ((e.code === "Enter" || e.code === "Space") && this.isDisabled == false) {
+ this.isChecked = !this.isChecked
+ this.setAttribute('checked', this.isChecked)
+ }
+ })
+ }
+ attributeChangedCallback(name, oldValue, newValue) {
+ if (oldValue !== newValue) {
+ if (name === 'disabled') {
+ if (newValue === 'true') {
+ this.checkbox.classList.add('disabled')
+ this.isDisabled = true
+ } else {
+ this.checkbox.classList.remove('disabled')
+ this.isDisabled = false
+ }
+ }
+ if (name === 'checked') {
+ if (newValue == 'true') {
+ this.isChecked = true
+ this.input.checked = true
+ this.dispatch()
+ } else {
+ this.isChecked = false
+ this.input.checked = false
+ this.dispatch()
+ }
+ }
+ }
+ }
+
+})
+
+//switch
+
+const smSwitch = document.createElement('template')
+smSwitch.innerHTML = `
+
+`
+
+customElements.define('sm-switch', class extends HTMLElement {
+ constructor() {
+ super()
+ this.attachShadow({
+ mode: 'open'
+ }).append(smSwitch.content.cloneNode(true))
+ this.switch = this.shadowRoot.querySelector('.switch');
+ this.input = this.shadowRoot.querySelector('input')
+ this.isChecked = false
+ this.isDisabled = false
+ }
+
+ get disabled() {
+ return this.getAttribute('disabled')
+ }
+
+ set disabled(val) {
+ if (val) {
+ this.disabled = true
+ this.setAttribute('disabled', '')
+ this.switch.classList.add('disabled')
+ } else {
+ this.disabled = false
+ this.removeAttribute('disabled')
+ this.switch.classList.remove('disabled')
+
+ }
+ }
+
+ get checked() {
+ return this.isChecked
+ }
+
+ set checked(value) {
+ if (value) {
+ this.setAttribute('checked', '')
+ this.isChecked = true
+ this.input.checked = true
+ } else {
+ this.removeAttribute('checked')
+ this.isChecked = false
+ this.input.checked = false
+ }
+ }
+
+ dispatch = () => {
+ this.dispatchEvent(new CustomEvent('change', {
+ bubbles: true,
+ composed: true
+ }))
+ }
+
+ connectedCallback() {
+ if (this.hasAttribute('disabled'))
+ this.switch.classList.add('disabled')
+ if (this.hasAttribute('checked'))
+ this.input.checked = true
+ this.addEventListener('keyup', e => {
+ if ((e.code === "Enter" || e.code === "Space") && !this.isDisabled) {
+ this.input.click()
+ }
+ })
+ this.input.addEventListener('click', e => {
+ if (this.input.checked)
+ this.checked = true
+ else
+ this.checked = false
+ this.dispatch()
+ })
+ }
+})
+
+// select
+const smSelect = document.createElement('template')
+smSelect.innerHTML = `
+
+`;
+customElements.define('sm-select', class extends HTMLElement {
+ constructor() {
+ super()
+ this.attachShadow({
+ mode: 'open'
+ }).append(smSelect.content.cloneNode(true))
+ }
+ static get observedAttributes() {
+ return ['value']
+ }
+ get value() {
+ return this.getAttribute('value')
+ }
+ set value(val) {
+ this.setAttribute('value', val)
+ }
+
+ collapse() {
+ this.optionList.animate(this.slideUp, this.animationOptions)
+ this.optionList.classList.add('hide')
+ this.chevron.classList.remove('rotate')
+ this.open = false
+ }
+ connectedCallback() {
+ this.availableOptions
+ this.optionList = this.shadowRoot.querySelector('.options')
+ this.chevron = this.shadowRoot.querySelector('.toggle')
+ let slot = this.shadowRoot.querySelector('.options slot'),
+ selection = this.shadowRoot.querySelector('.selection'),
+ previousOption
+ this.open = false;
+ this.slideDown = [{
+ transform: `translateY(-0.5rem)`
+ },
+ {
+ transform: `translateY(0)`
+ }
+ ],
+ this.slideUp = [{
+ transform: `translateY(0)`
+ },
+ {
+ transform: `translateY(-0.5rem)`
+ }
+ ],
+ this.animationOptions = {
+ duration: 300,
+ fill: "forwards",
+ easing: 'ease'
+ }
+ selection.addEventListener('click', e => {
+ if (!this.open) {
+ this.optionList.classList.remove('hide')
+ this.optionList.animate(this.slideDown, this.animationOptions)
+ this.chevron.classList.add('rotate')
+ this.open = true
+ } else {
+ this.collapse()
+ }
+ })
+ selection.addEventListener('keydown', e => {
+ if (e.code === 'ArrowDown' || e.code === 'ArrowRight') {
+ e.preventDefault()
+ this.availableOptions[0].focus()
+ }
+ if (e.code === 'Enter' || e.code === 'Space')
+ if (!this.open) {
+ this.optionList.classList.remove('hide')
+ this.optionList.animate(this.slideDown, this.animationOptions)
+ this.chevron.classList.add('rotate')
+ this.open = true
+ } else {
+ this.collapse()
+ }
+ })
+ this.optionList.addEventListener('keydown', e => {
+ if (e.code === 'ArrowUp' || e.code === 'ArrowRight') {
+ e.preventDefault()
+ if (document.activeElement.previousElementSibling) {
+ document.activeElement.previousElementSibling.focus()
+ }
+ }
+ if (e.code === 'ArrowDown' || e.code === 'ArrowLeft') {
+ e.preventDefault()
+ if (document.activeElement.nextElementSibling)
+ document.activeElement.nextElementSibling.focus()
+ }
+ })
+ this.addEventListener('optionSelected', e => {
+ if (previousOption !== e.target) {
+ this.setAttribute('value', e.detail.value)
+ this.shadowRoot.querySelector('.option-text').textContent = e.detail.text;
+ this.dispatchEvent(new CustomEvent('change', {
+ bubbles: true,
+ composed: true
+ }))
+ if (previousOption) {
+ previousOption.classList.remove('check-selected')
+ }
+ previousOption = e.target;
+ }
+ if (!e.detail.switching)
+ this.collapse()
+
+ e.target.classList.add('check-selected')
+ })
+ slot.addEventListener('slotchange', e => {
+ this.availableOptions = slot.assignedElements()
+ if (this.availableOptions[0]) {
+ let firstElement = this.availableOptions[0];
+ previousOption = firstElement;
+ firstElement.classList.add('check-selected')
+ this.setAttribute('value', firstElement.getAttribute('value'))
+ this.shadowRoot.querySelector('.option-text').textContent = firstElement.textContent
+ this.availableOptions.forEach((element, index) => {
+ element.setAttribute('data-rank', index + 1);
+ element.setAttribute('tabindex', "0");
+ })
+ }
+ });
+ document.addEventListener('mousedown', e => {
+ if (!this.contains(e.target) && this.open) {
+ this.collapse()
+ }
+ })
+ }
+})
+
+// option
+const smOption = document.createElement('template')
+smOption.innerHTML = `
+
+`;
+customElements.define('sm-option', class extends HTMLElement {
+ constructor() {
+ super()
+ this.attachShadow({
+ mode: 'open'
+ }).append(smOption.content.cloneNode(true))
+ }
+
+ sendDetails(switching) {
+ let optionSelected = new CustomEvent('optionSelected', {
+ bubbles: true,
+ composed: true,
+ detail: {
+ text: this.textContent,
+ value: this.getAttribute('value'),
+ switching: switching
+ }
+ })
+ this.dispatchEvent(optionSelected)
+ }
+
+ connectedCallback() {
+ let validKey = [
+ 'ArrowUp',
+ 'ArrowDown',
+ 'ArrowLeft',
+ 'ArrowRight'
+ ]
+ this.addEventListener('click', e => {
+ this.sendDetails()
+ })
+ this.addEventListener('keyup', e => {
+ if (e.code === 'Enter' || e.code === 'Space') {
+ e.preventDefault()
+ this.sendDetails(false)
+ }
+ if (validKey.includes(e.code)) {
+ e.preventDefault()
+ this.sendDetails(true)
+ }
+ })
+ if (this.hasAttribute('default')) {
+ setTimeout(() => {
+ this.sendDetails()
+ }, 0);
+ }
+ }
+})
+
+// select
+const smStripSelect = document.createElement('template')
+smStripSelect.innerHTML = `
+
+
+
+
+
+
+
+
+
+
`;
+customElements.define('sm-strip-select', class extends HTMLElement {
+ constructor() {
+ super()
+ this.attachShadow({
+ mode: 'open'
+ }).append(smStripSelect.content.cloneNode(true))
+ }
+ static get observedAttributes() {
+ return ['value']
+ }
+ get value() {
+ return this.getAttribute('value')
+ }
+ set value(val) {
+ this.setAttribute('value', val)
+ }
+ scrollLeft = () => {
+ this.select.scrollBy({
+ top: 0,
+ left: -this.scrollDistance,
+ behavior: 'smooth'
+ })
+ }
+
+ scrollRight = () => {
+ this.select.scrollBy({
+ top: 0,
+ left: this.scrollDistance,
+ behavior: 'smooth'
+ })
+ }
+ connectedCallback() {
+ let previousOption,
+ slot = this.shadowRoot.querySelector('slot');
+ this.selectContainer = this.shadowRoot.querySelector('.select-container')
+ this.select = this.shadowRoot.querySelector('.select')
+ this.nextArrow = this.shadowRoot.querySelector('.next-item')
+ this.previousArrow = this.shadowRoot.querySelector('.previous-item')
+ this.nextGradient = this.shadowRoot.querySelector('.right')
+ this.previousGradient = this.shadowRoot.querySelector('.left')
+ this.selectOptions
+ this.scrollDistance = this.selectContainer.getBoundingClientRect().width
+ const firstElementObserver = new IntersectionObserver(entries => {
+ if (entries[0].isIntersecting) {
+ this.previousArrow.classList.add('hide')
+ this.previousGradient.classList.add('hide')
+ } else {
+ this.previousArrow.classList.remove('hide')
+ this.previousGradient.classList.remove('hide')
+ }
+ }, {
+ root: this.selectContainer,
+ threshold: 0.95
+ })
+ const lastElementObserver = new IntersectionObserver(entries => {
+ if (entries[0].isIntersecting) {
+ this.nextArrow.classList.add('hide')
+ this.nextGradient.classList.add('hide')
+ } else {
+ this.nextArrow.classList.remove('hide')
+ this.nextGradient.classList.remove('hide')
+ }
+ }, {
+ root: this.selectContainer,
+ threshold: 0.95
+ })
+
+ const selectObserver = new IntersectionObserver(entries => {
+ if (entries[0].isIntersecting) {
+ this.scrollDistance = this.selectContainer.getBoundingClientRect().width
+ }
+ })
+
+ selectObserver.observe(this.selectContainer)
+ this.addEventListener('optionSelected', e => {
+ if (previousOption === e.target) return;
+ if (previousOption)
+ previousOption.classList.remove('active')
+ e.target.classList.add('active')
+ e.target.scrollIntoView({
+ behavior: 'smooth',
+ inline: 'center',
+ block: 'nearest'
+ })
+ this.setAttribute('value', e.detail.value)
+ this.dispatchEvent(new CustomEvent('change', {
+ bubbles: true,
+ composed: true
+ }))
+ previousOption = e.target;
+ })
+ slot.addEventListener('slotchange', e => {
+ this.selectOptions = slot.assignedElements()
+ firstElementObserver.observe(this.selectOptions[0])
+ lastElementObserver.observe(this.selectOptions[this.selectOptions.length - 1])
+ if (this.selectOptions[0]) {
+ let firstElement = this.selectOptions[0];
+ this.setAttribute('value', firstElement.getAttribute('value'))
+ firstElement.classList.add('active')
+ previousOption = firstElement;
+ }
+ });
+ this.nextArrow.addEventListener('click', this.scrollRight)
+ this.previousArrow.addEventListener('click', this.scrollLeft)
+ }
+
+ disconnectedCallback() {
+ this.nextArrow.removeEventListener('click', this.scrollRight)
+ this.previousArrow.removeEventListener('click', this.scrollLeft)
+ }
+})
+
+// option
+const smStripOption = document.createElement('template')
+smStripOption.innerHTML = `
+
+
+
+
`;
+customElements.define('sm-strip-option', class extends HTMLElement {
+ constructor() {
+ super()
+ this.attachShadow({
+ mode: 'open'
+ }).append(smStripOption.content.cloneNode(true))
+ }
+ sendDetails() {
+ let optionSelected = new CustomEvent('optionSelected', {
+ bubbles: true,
+ composed: true,
+ detail: {
+ text: this.textContent,
+ value: this.getAttribute('value')
+ }
+ })
+ this.dispatchEvent(optionSelected)
+ }
+
+ connectedCallback() {
+ this.addEventListener('click', e => {
+ this.sendDetails()
+ })
+ this.addEventListener('keyup', e => {
+ if (e.code === 'Enter' || e.code === 'Space') {
+ e.preventDefault()
+ this.sendDetails(false)
+ }
+ })
+ if (this.hasAttribute('default')) {
+ setTimeout(() => {
+ this.sendDetails()
+ }, 0);
+ }
+ }
+})
+
+//popup
+const smPopup = document.createElement('template')
+smPopup.innerHTML = `
+
+
+`;
+customElements.define('sm-popup', class extends HTMLElement {
+ constructor() {
+ super()
+ this.attachShadow({
+ mode: 'open'
+ }).append(smPopup.content.cloneNode(true))
+
+ this.allowClosing = false
+ }
+
+ resumeScrolling = () => {
+ const scrollY = document.body.style.top;
+ window.scrollTo(0, parseInt(scrollY || '0') * -1);
+ setTimeout(() => {
+ document.body.setAttribute('style', `overflow: auto; top: initial`)
+ }, 300);
+ }
+
+ show = (pinned, popupStack) => {
+ if (popupStack)
+ this.popupStack = popupStack
+ if (this.popupStack && !this.hasAttribute('open')) {
+ this.popupStack.push({
+ popup: this,
+ permission: pinned
+ })
+ if (this.popupStack.items.length > 1) {
+ this.popupStack.items[this.popupStack.items.length - 2].popup.classList.add('stacked')
+ }
+ this.dispatchEvent(
+ new CustomEvent("popupopened", {
+ bubbles: true,
+ detail: {
+ popup: this,
+ popupStack: this.popupStack
+ }
+ })
+ )
+ this.setAttribute('open', '')
+ this.pinned = pinned
+ }
+ this.popupContainer.classList.remove('hide')
+ this.popup.style.transform = 'none';
+ document.body.setAttribute('style', `overflow: hidden; top: -${window.scrollY}px`)
+ return this.popupStack
+ }
+ hide = () => {
+ if (window.innerWidth < 640)
+ this.popup.style.transform = 'translateY(100%)';
+ else
+ this.popup.style.transform = 'translateY(3rem)';
+ this.popupContainer.classList.add('hide')
+ this.removeAttribute('open')
+ if (typeof this.popupStack !== 'undefined') {
+ this.popupStack.pop()
+ if (this.popupStack.items.length) {
+ this.popupStack.items[this.popupStack.items.length - 1].popup.classList.remove('stacked')
+ } else {
+ this.resumeScrolling()
+ }
+ } else {
+ this.resumeScrolling()
+ }
+
+ if (this.inputFields.length) {
+ setTimeout(() => {
+ this.inputFields.forEach(field => {
+ if (field.type === 'radio' || field.tagName === 'SM-CHECKBOX')
+ field.checked = false
+ if (field.tagName === 'SM-INPUT' || field.tagName === 'TEXTAREA')
+ field.value = ''
+ })
+ }, 300);
+ }
+ this.dispatchEvent(
+ new CustomEvent("popupclosed", {
+ bubbles: true,
+ detail: {
+ popup: this,
+ popupStack: this.popupStack
+ }
+ })
+ )
+ }
+
+ handleTouchStart = (e) => {
+ this.touchStartY = e.changedTouches[0].clientY
+ this.popup.style.transition = 'transform 0.1s'
+ this.touchStartTime = e.timeStamp
+ }
+
+ handleTouchMove = (e) => {
+ e.preventDefault()
+ if (this.touchStartY < e.changedTouches[0].clientY) {
+ this.offset = e.changedTouches[0].clientY - this.touchStartY;
+ this.touchEndAnimataion = window.requestAnimationFrame(() => this.movePopup())
+ }
+ /*else {
+ this.offset = this.touchStartY - e.changedTouches[0].clientY;
+ this.popup.style.transform = `translateY(-${this.offset}px)`
+ }*/
+ }
+
+ handleTouchEnd = (e) => {
+ this.touchEndTime = e.timeStamp
+ cancelAnimationFrame(this.touchEndAnimataion)
+ this.touchEndY = e.changedTouches[0].clientY
+ this.popup.style.transition = 'transform 0.3s'
+ if (this.touchEndTime - this.touchStartTime > 200) {
+ if (this.touchEndY - this.touchStartY > this.threshold) {
+ if (this.pinned) {
+ this.show()
+ return
+ } else
+ this.hide()
+ } else {
+ this.show()
+ }
+ } else {
+ if (this.touchEndY > this.touchStartY)
+ if (this.pinned) {
+ this.show()
+ return
+ }
+ else
+ this.hide()
+ }
+ }
+
+ movePopup = () => {
+ this.popup.style.transform = `translateY(${this.offset}px)`
+ }
+
+ connectedCallback() {
+ this.pinned = false
+ this.popupStack
+ this.popupContainer = this.shadowRoot.querySelector('.popup-container')
+ this.popup = this.shadowRoot.querySelector('.popup')
+ this.popupBodySlot = this.shadowRoot.querySelector('.popup-body slot')
+ this.offset
+ this.popupHeader = this.shadowRoot.querySelector('.popup-top')
+ this.touchStartY = 0
+ this.touchEndY = 0
+ this.touchStartTime = 0
+ this.touchEndTime = 0
+ this.touchEndAnimataion;
+ this.threshold
+
+ if (this.hasAttribute('open'))
+ this.show()
+ this.popupContainer.addEventListener('mousedown', e => {
+ if (e.target === this.popupContainer && !this.pinned) {
+ if (this.pinned) {
+ this.show()
+ return
+ } else
+ this.hide()
+ }
+ })
+
+ this.popupBodySlot.addEventListener('slotchange', () => {
+ setTimeout(() => {
+ this.threshold = this.popup.getBoundingClientRect().height * 0.3
+ }, 200);
+ this.inputFields = this.querySelectorAll('sm-input', 'sm-checkbox', 'textarea', 'sm-textarea', 'radio')
+ })
+
+ this.popupHeader.addEventListener('touchstart', (e) => {
+ this.handleTouchStart(e)
+ })
+ this.popupHeader.addEventListener('touchmove', (e) => {
+ this.handleTouchMove(e)
+ })
+ this.popupHeader.addEventListener('touchend', (e) => {
+ this.handleTouchEnd(e)
+ })
+ }
+ disconnectedCallback() {
+ this.popupHeader.removeEventListener('touchstart', this.handleTouchStart)
+ this.popupHeader.removeEventListener('touchmove', this.handleTouchMove)
+ this.popupHeader.removeEventListener('touchend', this.handleTouchEnd)
+ }
+})
+
+//carousel
+
+const smCarousel = document.createElement('template')
+smCarousel.innerHTML = `
+
+
+
+
+
+
+
+
+
+`;
+
+customElements.define('sm-carousel', class extends HTMLElement {
+ constructor() {
+ super()
+ this.attachShadow({
+ mode: 'open'
+ }).append(smCarousel.content.cloneNode(true))
+ }
+
+ static get observedAttributes() {
+ return ['indicator']
+ }
+
+ scrollLeft = () => {
+ this.carousel.scrollBy({
+ top: 0,
+ left: -this.scrollDistance,
+ behavior: 'smooth'
+ })
+ }
+
+ scrollRight = () => {
+ this.carousel.scrollBy({
+ top: 0,
+ left: this.scrollDistance,
+ behavior: 'smooth'
+ })
+ }
+
+ connectedCallback() {
+ this.carousel = this.shadowRoot.querySelector('.carousel')
+ this.carouselContainer = this.shadowRoot.querySelector('.carousel-container')
+ this.carouselSlot = this.shadowRoot.querySelector('slot')
+ this.nextArrow = this.shadowRoot.querySelector('.next-item')
+ this.previousArrow = this.shadowRoot.querySelector('.previous-item')
+ this.indicatorsContainer = this.shadowRoot.querySelector('.indicators')
+ this.carouselItems
+ this.indicators
+ this.showIndicator = false
+ this.scrollDistance = this.carouselContainer.getBoundingClientRect().width / 3
+ let frag = document.createDocumentFragment();
+ if (this.hasAttribute('indicator'))
+ this.showIndicator = true
+
+
+ let firstVisible = false,
+ lastVisible = false
+ const allElementsObserver = new IntersectionObserver(entries => {
+ entries.forEach(entry => {
+ if (this.showIndicator)
+ if (entry.isIntersecting) {
+ this.indicators[parseInt(entry.target.attributes.rank.textContent)].classList.add('active')
+ }
+ else
+ this.indicators[parseInt(entry.target.attributes.rank.textContent)].classList.remove('active')
+ if (!entry.target.previousElementSibling)
+ if (entry.isIntersecting) {
+ this.previousArrow.classList.remove('expand')
+ firstVisible = true
+ }
+ else {
+ this.previousArrow.classList.add('expand')
+ firstVisible = false
+ }
+ if (!entry.target.nextElementSibling)
+ if (entry.isIntersecting) {
+ this.nextArrow.classList.remove('expand')
+ lastVisible = true
+ }
+ else {
+ this.nextArrow.classList.add('expand')
+
+ lastVisible = false
+ }
+ if (firstVisible && lastVisible)
+ this.indicatorsContainer.classList.add('hide')
+ else
+ this.indicatorsContainer.classList.remove('hide')
+ })
+ }, {
+ root: this.carouselContainer,
+ threshold: 0.9
+ })
+
+ const carouselObserver = new IntersectionObserver(entries => {
+ if (entries[0].isIntersecting) {
+ this.scrollDistance = this.carouselContainer.getBoundingClientRect().width / 3
+ }
+ })
+
+ carouselObserver.observe(this.carouselContainer)
+
+ this.carouselSlot.addEventListener('slotchange', e => {
+ this.carouselItems = this.carouselSlot.assignedElements()
+ this.carouselItems.forEach(item => allElementsObserver.observe(item))
+ if (this.showIndicator) {
+ this.indicatorsContainer.innerHTML = ``
+ this.carouselItems.forEach((item, index) => {
+ let dot = document.createElement('div')
+ dot.classList.add('dot')
+ frag.append(dot)
+ item.setAttribute('rank', index)
+ })
+ this.indicatorsContainer.append(frag)
+ this.indicators = this.indicatorsContainer.children
+ }
+ })
+
+ this.addEventListener('keyup', e => {
+ if (e.code === 'ArrowLeft')
+ this.scrollRight()
+ else
+ this.scrollRight()
+ })
+
+ this.nextArrow.addEventListener('click', this.scrollRight)
+ this.previousArrow.addEventListener('click', this.scrollLeft)
+ }
+
+ attributeChangedCallback(name, oldValue, newValue) {
+ if (name === 'indicator') {
+ if (this.hasAttribute('indicator'))
+ this.showIndicator = true
+ else
+ this.showIndicator = false
+ }
+ }
+
+ disconnectedCallback() {
+ this.nextArrow.removeEventListener('click', this.scrollRight)
+ this.previousArrow.removeEventListener('click', this.scrollLeft)
+ }
+})
+
+//notifications
+
+const smNotifications = document.createElement('template')
+smNotifications.innerHTML = `
+
+
+
+`
+
+customElements.define('sm-notifications', class extends HTMLElement {
+ constructor() {
+ super()
+ this.shadow = this.attachShadow({
+ mode: 'open'
+ }).append(smNotifications.content.cloneNode(true))
+ }
+
+ handleTouchStart = (e) => {
+ this.notification = e.target.closest('.notification')
+ this.touchStartX = e.changedTouches[0].clientX
+ this.notification.style.transition = 'initial'
+ this.touchStartTime = e.timeStamp
+ }
+
+ handleTouchMove = (e) => {
+ e.preventDefault()
+ if (this.touchStartX < e.changedTouches[0].clientX) {
+ this.offset = e.changedTouches[0].clientX - this.touchStartX;
+ this.touchEndAnimataion = requestAnimationFrame(this.movePopup)
+ } else {
+ this.offset = -(this.touchStartX - e.changedTouches[0].clientX);
+ this.touchEndAnimataion = requestAnimationFrame(this.movePopup)
+ }
+ }
+
+ handleTouchEnd = (e) => {
+ this.notification.style.transition = 'transform 0.3s, opacity 0.3s'
+ this.touchEndTime = e.timeStamp
+ cancelAnimationFrame(this.touchEndAnimataion)
+ this.touchEndX = e.changedTouches[0].clientX
+ if (this.touchEndTime - this.touchStartTime > 200) {
+ if (this.touchEndX - this.touchStartX > this.threshold) {
+ this.removeNotification(this.notification)
+ } else if (this.touchStartX - this.touchEndX > this.threshold) {
+ this.removeNotification(this.notification, true)
+ } else {
+ this.resetPosition()
+ }
+ } else {
+ if (this.touchEndX > this.touchStartX) {
+ this.removeNotification(this.notification)
+ } else {
+ this.removeNotification(this.notification, true)
+ }
+ }
+ }
+
+ movePopup = () => {
+ this.notification.style.transform = `translateX(${this.offset}px)`
+ }
+
+ resetPosition = () => {
+ this.notification.style.transform = `translateX(0)`
+ }
+
+ push = (messageBody, type, pinned) => {
+ let notification = document.createElement('div'),
+ composition = ``
+ notification.classList.add('notification')
+ if (pinned)
+ notification.classList.add('pinned')
+ if (type === 'error') {
+ composition += `
+ `
+ } else if (type === 'success') {
+ composition += `
+ `
+ }
+ composition += `
+ ${messageBody}
+ `
+ notification.innerHTML = composition
+ this.notificationPanel.prepend(notification)
+ if (window.innerWidth > 640) {
+ notification.animate([{
+ transform: `translateX(1rem)`,
+ opacity: '0'
+ },
+ {
+ transform: 'translateX(0)',
+ opacity: '1'
+ }
+ ], this.animationOptions).onfinish = () => {
+ notification.setAttribute('style', `transform: none;`);
+ }
+ } else {
+ notification.setAttribute('style', `transform: translateY(0); opacity: 1`)
+ }
+ notification.addEventListener('touchstart', this.handleTouchStart)
+ notification.addEventListener('touchmove', this.handleTouchMove)
+ notification.addEventListener('touchend', this.handleTouchEnd)
+ }
+
+ removeNotification = (notification, toLeft) => {
+ if (!this.offset)
+ this.offset = 0;
+
+ if (toLeft)
+ notification.animate([{
+ transform: `translateX(${this.offset}px)`,
+ opacity: '1'
+ },
+ {
+ transform: `translateX(-100%)`,
+ opacity: '0'
+ }
+ ], this.animationOptions).onfinish = () => {
+ notification.remove()
+ }
+ else {
+ notification.animate([{
+ transform: `translateX(${this.offset}px)`,
+ opacity: '1'
+ },
+ {
+ transform: `translateX(100%)`,
+ opacity: '0'
+ }
+ ], this.animationOptions).onfinish = () => {
+ notification.remove()
+ }
+ }
+ }
+
+ clearAll = () => {
+ Array.from(this.notificationPanel.children).forEach(child => {
+ this.removeNotification(child)
+ })
+ }
+
+ connectedCallback() {
+ this.notificationPanel = this.shadowRoot.querySelector('.notification-panel')
+ this.animationOptions = {
+ duration: 300,
+ fill: "forwards",
+ easing: "ease"
+ }
+ this.fontSize = Number(window.getComputedStyle(document.body).getPropertyValue('font-size').match(/\d+/)[0])
+ this.notification
+ this.offset
+ this.touchStartX = 0
+ this.touchEndX = 0
+ this.touchStartTime = 0
+ this.touchEndTime = 0
+ this.threshold = this.notificationPanel.getBoundingClientRect().width * 0.3
+ this.touchEndAnimataion;
+
+ this.notificationPanel.addEventListener('click', e => {
+ if (e.target.closest('.close'))(
+ this.removeNotification(e.target.closest('.notification'))
+ )
+ })
+
+ const observer = new MutationObserver(mutationList => {
+ mutationList.forEach(mutation => {
+ if (mutation.type === 'childList') {
+ if (mutation.addedNodes.length) {
+ if (!mutation.addedNodes[0].classList.contains('pinned'))
+ setTimeout(() => {
+ this.removeNotification(mutation.addedNodes[0])
+ }, 5000);
+ if (window.innerWidth > 640)
+ this.notificationPanel.style.padding = '1.5rem 0 3rem 1.5rem';
+ else
+ this.notificationPanel.style.padding = '1rem 1rem 2rem 1rem';
+ } else if (mutation.removedNodes.length && !this.notificationPanel.children.length) {
+ this.notificationPanel.style.padding = 0;
+ }
+ }
+ })
+ })
+ observer.observe(this.notificationPanel, {
+ attributes: true,
+ childList: true,
+ subtree: true
+ })
+ }
+})
+
+
+// sm-menu
+const smMenu = document.createElement('template')
+smMenu.innerHTML = `
+
+`;
+customElements.define('sm-menu', class extends HTMLElement {
+ constructor() {
+ super()
+ this.attachShadow({
+ mode: 'open'
+ }).append(smMenu.content.cloneNode(true))
+ }
+ static get observedAttributes() {
+ return ['value']
+ }
+ get value() {
+ return this.getAttribute('value')
+ }
+ set value(val) {
+ this.setAttribute('value', val)
+ }
+ expand = () => {
+ if (!this.open) {
+ this.optionList.classList.remove('hide')
+ this.optionList.classList.add('no-transformations')
+ this.open = true
+ this.icon.classList.add('focused')
+ }
+ }
+ collapse() {
+ if (this.open) {
+ this.open = false
+ this.icon.classList.remove('focused')
+ this.optionList.classList.add('hide')
+ this.optionList.classList.remove('no-transformations')
+ }
+ }
+ connectedCallback() {
+ this.availableOptions
+ this.containerDimensions
+ this.optionList = this.shadowRoot.querySelector('.options')
+ let slot = this.shadowRoot.querySelector('.options slot'),
+ menu = this.shadowRoot.querySelector('.menu')
+ this.icon = this.shadowRoot.querySelector('.icon')
+ this.open = false;
+ menu.addEventListener('click', e => {
+ if (!this.open) {
+ this.expand()
+ } else {
+ this.collapse()
+ }
+ })
+ menu.addEventListener('keydown', e => {
+ if (e.code === 'ArrowDown' || e.code === 'ArrowRight') {
+ e.preventDefault()
+ this.availableOptions[0].focus()
+ }
+ if (e.code === 'Enter' || e.code === 'Space') {
+ e.preventDefault()
+ if (!this.open) {
+ this.expand()
+ } else {
+ this.collapse()
+ }
+ }
+ })
+ this.optionList.addEventListener('keydown', e => {
+ if (e.code === 'ArrowUp' || e.code === 'ArrowRight') {
+ e.preventDefault()
+ if (document.activeElement.previousElementSibling) {
+ document.activeElement.previousElementSibling.focus()
+ }
+ }
+ if (e.code === 'ArrowDown' || e.code === 'ArrowLeft') {
+ e.preventDefault()
+ if (document.activeElement.nextElementSibling)
+ document.activeElement.nextElementSibling.focus()
+ }
+ })
+ this.optionList.addEventListener('click', e => {
+ this.collapse()
+ })
+ slot.addEventListener('slotchange', e => {
+ this.availableOptions = slot.assignedElements()
+ this.containerDimensions = this.optionList.getBoundingClientRect()
+ this.menuDimensions = menu.getBoundingClientRect()
+ });
+ window.addEventListener('mousedown', e => {
+ if (!this.contains(e.target) && e.button !== 2) {
+ this.collapse()
+ }
+ })
+ if (this.hasAttribute('set-context') && this.getAttribute('set-context') === 'true') {
+ this.parentNode.setAttribute('oncontextmenu', 'return false')
+ this.parentNode.addEventListener('mouseup', e => {
+ if (e.button === 2) {
+ this.expand()
+ }
+ })
+ }
+ }
+})
+
+// option
+const smMenuOption = document.createElement('template')
+smMenuOption.innerHTML = `
+
+
+
+
`;
+customElements.define('sm-menu-option', class extends HTMLElement {
+ constructor() {
+ super()
+ this.attachShadow({
+ mode: 'open'
+ }).append(smMenuOption.content.cloneNode(true))
+ }
+
+ connectedCallback() {
+ this.addEventListener('keyup', e => {
+ if (e.code === 'Enter' || e.code === 'Space') {
+ e.preventDefault()
+ this.click()
+ }
+ })
+ this.setAttribute('tabindex', '0')
+ }
+})
+
+// tab-header
+
+const smTabHeader = document.createElement('template')
+smTabHeader.innerHTML = `
+
+
+
+
+`;
+
+customElements.define('sm-tab-header', class extends HTMLElement {
+ constructor() {
+ super()
+ this.attachShadow({
+ mode: 'open'
+ }).append(smTabHeader.content.cloneNode(true))
+
+ this.indicator = this.shadowRoot.querySelector('.indicator');
+ this.tabSlot = this.shadowRoot.querySelector('slot');
+ this.tabHeader = this.shadowRoot.querySelector('.tab-header');
+ }
+
+ sendDetails(element) {
+ this.dispatchEvent(
+ new CustomEvent("switchtab", {
+ bubbles: true,
+ detail: {
+ target: this.target,
+ rank: parseInt(element.getAttribute('rank'))
+ }
+ })
+ )
+ }
+
+ moveIndiactor(tabDimensions) {
+ //if(this.isTab)
+ this.indicator.setAttribute('style', `width: ${tabDimensions.width}px; transform: translateX(${tabDimensions.left - this.tabHeader.getBoundingClientRect().left + this.tabHeader.scrollLeft}px)`)
+ //else
+ //this.indicator.setAttribute('style', `width: calc(${tabDimensions.width}px - 1.6rem); transform: translateX(calc(${ tabDimensions.left - this.tabHeader.getBoundingClientRect().left + this.tabHeader.scrollLeft}px + 0.8rem)`)
+ }
+
+ connectedCallback() {
+ if (!this.hasAttribute('target') || this.getAttribute('target').value === '') return;
+ this.prevTab
+ this.allTabs
+ this.activeTab
+ this.isTab = false
+ this.target = this.getAttribute('target')
+
+ if (this.hasAttribute('variant') && this.getAttribute('variant') === 'tab') {
+ this.isTab = true
+ }
+
+ this.tabSlot.addEventListener('slotchange', () => {
+ this.tabSlot.assignedElements().forEach((tab, index) => {
+ tab.setAttribute('rank', index)
+ })
+ })
+ this.allTabs = this.tabSlot.assignedElements();
+
+ this.tabSlot.addEventListener('click', e => {
+ if (e.target === this.prevTab || !e.target.closest('sm-tab'))
+ return
+ if (this.prevTab)
+ this.prevTab.classList.remove('active')
+ e.target.classList.add('active')
+
+ e.target.scrollIntoView({
+ behavior: 'smooth',
+ block: 'nearest',
+ inline: 'center'
+ })
+ this.moveIndiactor(e.target.getBoundingClientRect())
+ this.sendDetails(e.target)
+ this.prevTab = e.target;
+ this.activeTab = e.target;
+ })
+ let resizeObserver = new ResizeObserver(entries => {
+ entries.forEach((entry) => {
+ if (this.prevTab) {
+ let tabDimensions = this.activeTab.getBoundingClientRect();
+ this.moveIndiactor(tabDimensions)
+ }
+ })
+ })
+ resizeObserver.observe(this)
+ let observer = new IntersectionObserver((entries) => {
+ entries.forEach((entry) => {
+ if (entry.isIntersecting) {
+ this.indicator.style.transition = 'none'
+ if (this.activeTab) {
+ let tabDimensions = this.activeTab.getBoundingClientRect();
+ this.moveIndiactor(tabDimensions)
+ } else {
+ this.allTabs[0].classList.add('active')
+ let tabDimensions = this.allTabs[0].getBoundingClientRect();
+ this.moveIndiactor(tabDimensions)
+ this.sendDetails(this.allTabs[0])
+ this.prevTab = this.tabSlot.assignedElements()[0];
+ this.activeTab = this.prevTab;
+ }
+ }
+ })
+ }, {
+ threshold: 1.0
+ })
+ observer.observe(this)
+ }
+})
+
+// tab-panels
+
+const smTabPanels = document.createElement('template')
+smTabPanels.innerHTML = `
+
+
+ Nothing to see here.
+
+`;
+
+customElements.define('sm-tab-panels', class extends HTMLElement {
+ constructor() {
+ super()
+ this.attachShadow({
+ mode: 'open'
+ }).append(smTabPanels.content.cloneNode(true))
+ this.panelSlot = this.shadowRoot.querySelector('slot');
+ }
+ connectedCallback() {
+
+ //animations
+ let flyInLeft = [{
+ opacity: 0,
+ transform: 'translateX(-1rem)'
+ },
+ {
+ opacity: 1,
+ transform: 'none'
+ }
+ ],
+ flyInRight = [{
+ opacity: 0,
+ transform: 'translateX(1rem)'
+ },
+ {
+ opacity: 1,
+ transform: 'none'
+ }
+ ],
+ flyOutLeft = [{
+ opacity: 1,
+ transform: 'none'
+ },
+ {
+ opacity: 0,
+ transform: 'translateX(-1rem)'
+ }
+ ],
+ flyOutRight = [{
+ opacity: 1,
+ transform: 'none'
+ },
+ {
+ opacity: 0,
+ transform: 'translateX(1rem)'
+ }
+ ],
+ animationOptions = {
+ duration: 300,
+ fill: 'forwards',
+ easing: 'ease'
+ }
+ this.prevPanel
+ this.allPanels
+ this.previousRank
+
+ this.panelSlot.addEventListener('slotchange', () => {
+ this.panelSlot.assignedElements().forEach((panel) => {
+ panel.classList.add('hide-completely')
+ })
+ })
+ this.allPanels = this.panelSlot.assignedElements()
+ this._targetBodyFlyRight = (targetBody) => {
+ targetBody.classList.remove('hide-completely')
+ targetBody.animate(flyInRight, animationOptions)
+ }
+ this._targetBodyFlyLeft = (targetBody) => {
+ targetBody.classList.remove('hide-completely')
+ targetBody.animate(flyInLeft, animationOptions)
+ }
+ document.addEventListener('switchtab', e => {
+ if (e.detail.target !== this.id)
+ return
+
+ if (this.prevPanel) {
+ let targetBody = this.allPanels[e.detail.rank],
+ currentBody = this.prevPanel;
+ if (this.previousRank < e.detail.rank) {
+ if (currentBody && !targetBody)
+ currentBody.animate(flyOutLeft, animationOptions).onfinish = () => {
+ currentBody.classList.add('hide-completely')
+ }
+ else if (targetBody && !currentBody) {
+ this._targetBodyFlyRight(targetBody)
+ } else if (currentBody && targetBody) {
+ currentBody.animate(flyOutLeft, animationOptions).onfinish = () => {
+ currentBody.classList.add('hide-completely')
+ this._targetBodyFlyRight(targetBody)
+ }
+ }
+ } else {
+ if (currentBody && !targetBody)
+ currentBody.animate(flyOutRight, animationOptions).onfinish = () => {
+ currentBody.classList.add('hide-completely')
+ }
+ else if (targetBody && !currentBody) {
+ this._targetBodyFlyLeft(targetBody)
+ } else if (currentBody && targetBody) {
+ currentBody.animate(flyOutRight, animationOptions).onfinish = () => {
+ currentBody.classList.add('hide-completely')
+ this._targetBodyFlyLeft(targetBody)
+ }
+ }
+ }
+ } else {
+ this.allPanels[e.detail.rank].classList.remove('hide-completely')
+ }
+ this.previousRank = e.detail.rank
+ this.prevPanel = this.allPanels[e.detail.rank];
+ })
+ }
+})
+
+
+const slidingSection = document.createElement('template')
+slidingSection.innerHTML = `
+
+
+`
+
+customElements.define('sm-sliding-section', class extends HTMLElement {
+ constructor() {
+ super()
+ this.attachShadow({
+ mode: 'open'
+ }).append(slidingSection.content.cloneNode(true))
+ }
+ connectedCallback() {
+
+ }
+})
+
+const section = document.createElement('template')
+section.innerHTML = `
+
+
+`
+
+customElements.define('sm-section', class extends HTMLElement {
+ constructor() {
+ super()
+ this.attachShadow({
+ mode: 'open'
+ }).append(section.content.cloneNode(true))
+ }
+})
\ No newline at end of file
diff --git a/css/Artboard 1.svg b/css/Artboard 1.svg
new file mode 100644
index 0000000..c34b089
--- /dev/null
+++ b/css/Artboard 1.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/css/banner-bg1.svg b/css/banner-bg1.svg
new file mode 100644
index 0000000..9c3b621
--- /dev/null
+++ b/css/banner-bg1.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/css/banner-bg2.svg b/css/banner-bg2.svg
new file mode 100644
index 0000000..6e4a185
--- /dev/null
+++ b/css/banner-bg2.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/css/card-bg1.svg b/css/card-bg1.svg
new file mode 100644
index 0000000..c0585a5
--- /dev/null
+++ b/css/card-bg1.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/css/card-bg2.svg b/css/card-bg2.svg
new file mode 100644
index 0000000..9d0233b
--- /dev/null
+++ b/css/card-bg2.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/css/main.css b/css/main.css
new file mode 100644
index 0000000..7bba142
--- /dev/null
+++ b/css/main.css
@@ -0,0 +1,1123 @@
+@charset "UTF-8";
+* {
+ box-sizing: border-box;
+ padding: 0;
+ margin: 0;
+ font-family: "Roboto", sans-serif;
+}
+
+body {
+ --accent-color:#169685;
+ --text-color: 17, 17, 17;
+ --text-color-light: 85, 85, 85;
+ --foreground-color: 255, 255, 255;
+ --background-color: rgba(var(--foreground-color), 1);
+ --dark-shade: #f8f8f8;
+ --error-color: #E53935;
+ --hue: 172;
+ --saturation: 74%;
+ --lightness: 34%;
+ color: rgba(var(--text-color), 1);
+ font-size: 16px;
+ background: var(--dark-shade);
+ background-size: cover;
+}
+
+body[data-theme=dark] {
+ --accent-color: #00e2c4;
+ --text-color: 238, 238, 238;
+ --text-color-light: 170, 170, 170;
+ --foreground-color: 26, 26, 26;
+ --background-color: #111;
+ --dark-shade: #080808;
+ --hue: 172;
+ --saturation: 70%;
+ --lightness: 44%;
+}
+
+a {
+ font-weight: 600;
+ text-decoration: none;
+ color: var(--accent-color);
+}
+
+.dark-text {
+ color: #111;
+}
+
+h1 {
+ font-size: 3.5rem;
+}
+
+h2 {
+ font-size: 2rem;
+}
+
+h3 {
+ font-size: 1.5rem;
+}
+
+h4 {
+ font-size: 1rem;
+}
+
+h5 {
+ font-size: 0.8rem;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5 {
+ font-family: "Poppins", sans-serif;
+ font-weight: 600;
+}
+
+p {
+ line-height: 1.5;
+ max-width: 65ch;
+ color: rgba(var(--text-color), 0.9);
+}
+
+strong {
+ font-weight: 500;
+}
+
+::-moz-focus-inner {
+ border: none;
+}
+
+.bottom-padding {
+ padding-bottom: 1.5rem;
+}
+
+.top-padding {
+ padding-top: 1em;
+}
+
+.bottom-margin {
+ margin-bottom: 1.5rem;
+}
+
+.top-margin {
+ margin-top: 1.5rem;
+}
+
+.flex {
+ display: flex;
+}
+
+.grid {
+ display: grid;
+}
+
+.grid-2 {
+ grid-template-columns: auto auto;
+ gap: 1em;
+}
+
+.align-center {
+ align-items: center;
+}
+
+.direction-column {
+ flex-direction: column;
+}
+
+.justify-right {
+ margin-left: auto;
+}
+
+.space-between {
+ justify-content: space-between;
+}
+
+.label {
+ margin-bottom: 0.4rem;
+}
+
+.light-text {
+ opacity: 0.7;
+}
+
+.hide {
+ opacity: 0;
+ pointer-events: none;
+}
+
+.hide-completely {
+ display: none !important;
+}
+
+.breakable {
+ word-break: break-all;
+}
+
+.overflow-ellipsis {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.separator {
+ padding: 0.1em;
+}
+
+.no-transformations {
+ transform: none !important;
+}
+
+.capitalize {
+ text-transform: capitalize;
+}
+
+span.ripple {
+ position: absolute;
+ border-radius: 50%;
+ transform: scale(0);
+ animation: ripple 0.6s linear;
+ background: rgba(var(--text-color), 0.1);
+}
+
+@keyframes ripple {
+ to {
+ transform: scale(4);
+ opacity: 0;
+ }
+}
+.icon {
+ height: 1.2rem;
+ width: 1.2rem;
+ overflow: visible;
+ stroke: rgba(var(--text-color), 1);
+ opacity: 0.8;
+ fill: none;
+ stroke-width: 6;
+ stroke-linejoin: round;
+ stroke-linecap: round;
+}
+
+sm-popup > sm-input:not(:last-of-type) {
+ margin-bottom: 1rem;
+}
+sm-popup sm-textarea {
+ margin-top: 1rem;
+}
+
+.popup-header {
+ padding: 1.5rem;
+ padding-bottom: 0;
+ display: flex;
+ align-items: center;
+ width: 100%;
+}
+.popup-header .icon {
+ margin-right: 1rem;
+ padding: 0.2rem;
+ stroke-width: 10;
+ cursor: pointer;
+}
+.popup-header sm-button, .popup-header button {
+ width: auto;
+ margin-left: auto;
+}
+
+button {
+ position: relative;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ text-transform: capitalize;
+ padding: 0.6rem 1.2rem;
+ font-weight: 600;
+ cursor: pointer;
+ border-radius: 0.3rem;
+ color: var(--accent-color);
+ transition: transform 0.3s;
+ border: none;
+ background: rgba(var(--text-color), 0.1);
+ -webkit-tap-highlight-color: transparent;
+ font-family: "Poppins", sans-serif;
+}
+button:focus {
+ outline: thin solid rgba(var(--text-color-light), 0.4);
+}
+button:disabled {
+ cursor: default;
+ background: rgba(var(--text-color), 0.4);
+}
+
+.primary-btn {
+ background: var(--accent-color);
+ justify-content: center;
+ color: rgba(var(--foreground-color), 1);
+}
+
+#confirmation {
+ flex-direction: column;
+}
+#confirmation h4 {
+ font-weight: 500;
+ margin-bottom: 1.5rem;
+}
+#confirmation .flex {
+ margin-top: 1rem;
+}
+#confirmation .flex sm-button:first-of-type {
+ margin-right: 0.6em;
+ margin-left: auto;
+}
+
+#sign_in_page {
+ background: url(sign-in-bg.svg) no-repeat center, linear-gradient(rgba(var(--text-color), 0.04), rgba(var(--text-color), 0.04)), linear-gradient(rgba(var(--foreground-color), 1), rgba(var(--foreground-color), 1));
+ background-size: cover;
+ min-height: 100vh;
+ width: 100vw;
+ align-items: center;
+ padding: 0 6vw;
+}
+#sign_in_page .info h1 {
+ font-weight: 800;
+ font-size: clamp(1.5rem, 8vw, 4rem);
+}
+#sign_in_page .info h4 {
+ font-weight: 500;
+ font-family: "Roboto", sans-serif;
+ opacity: 0.8;
+}
+#sign_in_page .sign-in-box {
+ width: calc(100vw - 4rem);
+ z-index: 1;
+}
+#sign_in_page .sign-in-box sm-input {
+ text-align: left;
+}
+#sign_in_page .sign-in-box sm-panel {
+ width: 100%;
+}
+#sign_in_page .sign-in-box sm-tab-header {
+ background: none;
+ align-self: flex-start;
+}
+#sign_in_page .sign-in-box sm-tab-header::part(tab-header) {
+ padding-bottom: 0.4rem;
+ gap: 1.5rem;
+}
+#sign_in_page .sign-in-box sm-tab::part(tab) {
+ padding: 0.4rem 0;
+}
+#sign_in_page .sign-in-box sm-tab-panels {
+ margin-top: 3rem;
+}
+#sign_in_page .sign-in-box form {
+ width: 100%;
+}
+#sign_in_page .sign-in-box h2 {
+ margin-bottom: 0.5rem;
+}
+#sign_in_page .sign-in-box h3 {
+ font-weight: 500;
+}
+#sign_in_page .sign-in-box h4 {
+ font-weight: 500;
+ margin-bottom: 1.5rem;
+}
+#sign_in_page .sign-in-box h5 {
+ opacity: 0.8;
+ font-weight: 500;
+}
+#sign_in_page .sign-in-box .copy-row h4 {
+ max-width: 34ch;
+}
+#sign_in_page .sign-in-box .copy-row:not(:last-of-type) {
+ margin-bottom: 1rem;
+}
+#sign_in_page .sign-in-box button {
+ margin-top: 1rem;
+ padding: 0.6rem 1.6rem;
+}
+#sign_in_page .sign-in-box p {
+ margin-bottom: 0.5rem;
+ max-width: 35ch;
+ margin-top: 0.5rem;
+ margin-bottom: 1.5rem;
+}
+#sign_in_page .sign-in-box #credentials_section {
+ border-top: 1px rgba(var(--text-color), 0.2) solid;
+ margin-top: 1rem;
+ padding-top: 1.5rem;
+ animation: slide-down 0.3s forwards;
+}
+
+@keyframes slide-down {
+ from {
+ transform: translateY(-1rem);
+ }
+ to {
+ transform: none;
+ }
+}
+.copy-row {
+ display: grid;
+ grid-template-columns: 1fr auto;
+ align-items: center;
+ gap: 0.5rem;
+ width: auto;
+}
+.copy-row h4 {
+ font-family: "Roboto", sans-serif;
+ margin-bottom: 0;
+ font-weight: 400;
+ margin: 0 !important;
+}
+.copy-row .icon {
+ cursor: pointer;
+ padding: 0.4rem;
+ height: 1.8rem;
+ width: 1.8rem;
+}
+.copy-row .copy {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+#main_loader {
+ text-align: center;
+ place-content: center;
+ height: 100vh;
+ width: 100vw;
+ position: fixed;
+ left: 0;
+}
+#main_loader sm-button {
+ margin-left: 0;
+ margin-top: 1rem;
+ width: max-content;
+ justify-self: center;
+}
+#main_loader svg {
+ height: 2rem;
+ width: 2rem;
+ stroke: var(--accent-color);
+ stroke-width: 6;
+ fill: none;
+ overflow: visible;
+ stroke-linecap: round;
+ stroke-dashoffset: 210;
+ stroke-dasharray: 210;
+ justify-self: center;
+ align-self: center;
+ margin-bottom: 2rem;
+}
+#main_loader h3 {
+ width: 100%;
+ font-weight: 400;
+ word-spacing: 0.16em;
+}
+
+.loader {
+ fill: none;
+ stroke-width: 10;
+ stroke: var(--accent-color);
+ height: 2rem;
+ width: 2rem;
+ overflow: visible;
+ stroke-dashoffset: 230;
+ stroke-dasharray: 230;
+ padding: 2px;
+ justify-self: center;
+}
+
+.animate-loader {
+ animation: load 2.6s infinite, rotate 1s infinite linear;
+}
+
+@keyframes rotate {
+ 100% {
+ transform: rotate(360deg);
+ }
+}
+@keyframes load {
+ 50% {
+ stroke-dashoffset: 0;
+ }
+ 100% {
+ stroke-dashoffset: -210;
+ }
+}
+#main_header {
+ padding: 1rem;
+ box-shadow: 0 0.1rem 0.2rem #00000010;
+ background: rgba(var(--foreground-color), 1);
+}
+#main_header h5 {
+ font-weight: 500;
+ font-family: "Roboto", sans-serif;
+ opacity: 0.8;
+}
+#main_header h4 {
+ font-size: 1.2rem;
+}
+
+#home_page {
+ padding: 1rem 1.5rem;
+}
+
+.section-header {
+ position: sticky;
+ top: 0;
+ z-index: 1;
+ background: var(--dark-shade);
+ padding: 1rem 0;
+ margin-bottom: 1rem;
+}
+.section-header h4 {
+ font-size: 1.2rem;
+ opacity: 0.8;
+ font-weight: 500;
+}
+
+#main_section > header sm-input {
+ margin-left: 1rem;
+}
+
+#user_icon {
+ width: 2.4rem;
+ height: 2.4rem;
+ padding: 0.6rem;
+ cursor: pointer;
+ background: rgba(var(--text-color), 0.1);
+ border-radius: 2rem;
+}
+
+#sheets_container {
+ gap: 2rem 1.5rem;
+ grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
+ margin-bottom: 3rem;
+ animation: slide-up 0.6s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+@keyframes slide-up {
+ from {
+ transform: translateY(2rem);
+ }
+ to {
+ transform: none;
+ }
+}
+#add_new_sheet .icon {
+ height: 2rem;
+ width: 2rem;
+ stroke-width: 10;
+ stroke: #fff;
+ stroke-linecap: square;
+ opacity: 1;
+ top: 50%;
+ transform: translateY(-50%);
+ position: absolute;
+}
+#add_new_sheet .card {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ position: relative;
+ background: url(card-bg1.svg), #A7003E;
+ background-size: cover;
+}
+
+.sheet-card {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ cursor: pointer;
+}
+.sheet-card:active .card {
+ transform: scale(0.95);
+}
+.sheet-card .card {
+ position: relative;
+ border-radius: 0.4rem;
+ background: url(card-bg2.svg) center, rgba(var(--text-color), 0.06);
+ background-size: contain;
+ padding: 1rem;
+ padding-top: 66%;
+ width: 100%;
+ transition: box-shadow 0.3s, transform 0.3s;
+}
+.sheet-card h4 {
+ font-family: "Roboto", sans-serif;
+ font-weight: 400;
+ opacity: 0.9;
+ margin-top: 0.8rem;
+ text-align: center;
+ max-width: 90%;
+}
+.sheet-card h5 {
+ font-family: "Roboto", sans-serif;
+ background: rgba(var(--text-color), 0.1);
+ position: absolute;
+ top: 0;
+ right: 0;
+ margin: 0.5rem 0;
+ padding: 0.4rem 0.6rem;
+ border-radius: 0.2rem 0 0 0.2rem;
+ font-weight: 500;
+ opacity: 0.8;
+}
+
+#sheet_page {
+ width: 100vw;
+ height: 100vh;
+ overflow-x: hidden;
+}
+#sheet_page.toggle-side-bar #side_bar {
+ transition: transform 0.3s;
+ z-index: 10;
+ transform: none;
+}
+
+#sheet_heading {
+ font-weight: 600;
+ opacity: 0.9;
+}
+
+#sheet_type {
+ padding: 0.3rem 0.6rem;
+ border-radius: 0.3rem;
+ margin: 0 1rem;
+ font-weight: 500;
+ opacity: 0.8;
+ background: rgba(var(--text-color), 0.1);
+}
+
+#sheet_description {
+ margin-top: 0.8rem;
+ opacity: 0.8;
+}
+
+#sheet_editors {
+ gap: 0.5rem;
+ flex-wrap: wrap;
+ color: rgba(var(--text-color), 0.7);
+ font-size: 0.9rem;
+}
+#sheet_editors .editor {
+ padding: 0.4rem 0.6rem;
+ border-radius: 0.4rem;
+ background: rgba(var(--text-color), 0.06);
+}
+
+#toggle_details, #go_to_home {
+ height: 2.4rem;
+ width: 2.4rem;
+ padding: 0.7rem;
+ cursor: pointer;
+}
+
+#go_to_home, #go_to_home + h5 {
+ transform: translateX(-1rem);
+ cursor: pointer;
+}
+
+#go_to_home + h5 {
+ font-weight: 500;
+ opacity: 0.9;
+}
+
+#toggle_details {
+ transform: rotateX(180deg);
+ transition: transform 0.3s;
+}
+
+#sheet_details {
+ padding: 1rem;
+ margin-bottom: 1rem;
+}
+#sheet_details .flex:first-of-type {
+ margin-bottom: 1rem;
+}
+#sheet_details .flex:nth-of-type(2) {
+ margin-bottom: 1rem;
+}
+#sheet_details .flex:not(:first-of-type) {
+ margin-bottom: 0.3rem;
+}
+#sheet_details .flex:not(:first-of-type) .icon {
+ cursor: pointer;
+ margin-right: 1rem;
+ height: 100%;
+}
+#sheet_details.collapse {
+ padding: 0.5rem 1rem;
+ margin-bottom: 0;
+}
+#sheet_details.collapse .flex {
+ margin-bottom: 0;
+}
+#sheet_details.collapse #toggle_details {
+ transform: none;
+}
+#sheet_details.collapse #sheet_heading {
+ font-size: 1.2rem;
+ font-weight: 600;
+ opacity: 0.9;
+}
+#sheet_details.collapse #sheet_description,
+#sheet_details.collapse #sheet_editors,
+#sheet_details.collapse #sheet_type {
+ display: none;
+}
+
+#sheet_container {
+ position: relative;
+ overflow: auto;
+ max-height: 100%;
+ bottom: 0;
+ max-width: 100%;
+}
+
+sm-select::part(options) {
+ max-height: 50vh;
+}
+
+table {
+ border-collapse: collapse;
+ position: relative;
+}
+table input {
+ position: relative;
+ padding: 0.4rem;
+ border: thin solid rgba(var(--text-color), 0.3);
+ font-size: 1rem;
+ width: 100%;
+ border-radius: 0.3rem;
+ background: rgba(var(--text-color), 0.06);
+ color: inherit;
+}
+table input:disabled {
+ border: transparent;
+}
+
+th {
+ position: sticky;
+ top: 0;
+ background: linear-gradient(rgba(var(--text-color), 0.06), rgba(var(--text-color), 0.06)), rgba(var(--foreground-color), 1);
+ text-align: left;
+ line-height: 1;
+ vertical-align: middle;
+ font-weight: 500;
+ z-index: 1;
+ padding: 1rem 0.8rem;
+ white-space: nowrap;
+ box-shadow: 0 0.2rem 0.4rem #00000020;
+ cursor: pointer;
+}
+
+tr:nth-of-type(2n) {
+ background-color: rgba(var(--text-color), 0.04);
+}
+
+td {
+ padding: 0.4rem 0.8rem;
+ opacity: 0.9;
+}
+
+.text-field {
+ min-width: 20ch;
+ max-width: 30ch;
+}
+
+.grade-input {
+ width: 10ch;
+}
+
+th.descending::after,
+th.ascending::after {
+ display: inline-flex;
+ justify-self: flex-end;
+ position: relative;
+ margin-left: auto;
+ font-size: 0.8rem;
+}
+
+th.descending::after {
+ content: " â–¼";
+}
+
+th.ascending::after {
+ content: " â–²";
+}
+
+#group_by::part(popup) {
+ min-height: 80vh;
+}
+#group_by sm-select:last-of-type {
+ margin-left: 0.5rem;
+}
+
+#side_bar {
+ position: fixed;
+ transform: translateX(-100%);
+ background: var(--dark-shade);
+}
+#side_bar > .flex:first-of-type {
+ padding: 0 1rem;
+}
+#side_bar .section-header {
+ margin-bottom: 0;
+ background: inherit;
+}
+
+#right {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ overflow: auto;
+ max-height: 100vh;
+ background: rgba(var(--foreground-color), 1);
+ animation: slide-right 0.6s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+@keyframes slide-right {
+ from {
+ transform: translateX(-2rem);
+ }
+ to {
+ transform: translateX(0);
+ }
+}
+.placeholder {
+ animation: placeholder-loading 0.6s infinite alternate;
+ padding: 1.5rem 0;
+ width: 100%;
+ margin: 1.5rem;
+ border-radius: 0.5rem;
+ background: rgba(var(--text-color), 0.06);
+}
+.placeholder#sheet_container {
+ width: calc(100% - 3rem);
+ height: calc(100% - 3rem);
+}
+
+@keyframes placeholder-loading {
+ from {
+ opacity: 0.4;
+ }
+ to {
+ opacity: 1;
+ }
+}
+#people_container {
+ overflow: auto;
+ max-height: calc(100vh - 3.6rem);
+ gap: 1.5rem;
+}
+
+.person-card {
+ display: grid;
+ align-items: center;
+ grid-template-columns: auto 1fr;
+ grid-template-areas: "initials ." "initials .";
+ cursor: pointer;
+ padding: 0 1rem;
+ transition: transform 0.3s;
+ -webkit-tap-highlight-color: transparent;
+}
+.person-card:active {
+ transform: scale(0.95);
+}
+.person-card:first-of-type {
+ margin-top: 1.5rem;
+}
+.person-card:last-of-type {
+ margin-bottom: 2rem;
+}
+
+.person-initials {
+ grid-area: initials;
+ display: flex;
+ justify-content: center;
+ height: 2.6rem;
+ width: 2.6rem;
+ font-size: 1.2rem !important;
+ font-weight: 500;
+ align-items: center;
+ border-radius: 2rem;
+ margin-right: 1rem;
+ text-transform: uppercase;
+ opacity: 1 !important;
+ color: var(--accent-color);
+ background: rgba(var(--text-color), 0.06);
+}
+
+.person-name {
+ font-size: 0.9rem;
+ opacity: 0.9;
+ font-weight: 500;
+ text-transform: capitalize;
+}
+
+.person-flo-id {
+ opacity: 0.7;
+ font-weight: 400;
+}
+
+#user_popup sm-button {
+ margin-top: 0.5rem;
+}
+#user_popup section:not(:last-of-type) {
+ margin-bottom: 1.5rem;
+}
+
+#new_sheet_popup p {
+ font-size: 0.9rem;
+}
+
+#specify_columns,
+#specify_editors,
+#specify_details {
+ gap: 1rem;
+ margin-top: 1rem;
+ padding-top: 1rem;
+}
+#specify_columns h4,
+#specify_editors h4,
+#specify_details h4 {
+ font-weight: 500;
+ font-size: 0.9rem;
+ margin-bottom: 0.2rem;
+}
+
+#columns_container {
+ flex-wrap: wrap;
+}
+
+#editors_container,
+#columns_container,
+#additional_fields {
+ gap: 0.4rem;
+}
+
+#specify_editors {
+ border-top: solid 1px rgba(var(--text-color), 0.2);
+}
+
+#add_editor sm-input,
+#add_column sm-input,
+#add_detail sm-input {
+ width: 100%;
+}
+#add_editor .icon,
+#add_column .icon,
+#add_detail .icon {
+ height: 3rem;
+ width: 3rem;
+ padding: 1rem;
+ cursor: pointer;
+}
+
+#add_detail {
+ gap: 0.2rem;
+ grid-template-columns: 1fr auto;
+ grid-template-areas: ". add" ". add";
+}
+#add_detail .icon {
+ grid-area: add;
+ align-self: flex-end;
+}
+
+.editor-card,
+.column-card,
+.details-card {
+ border-radius: 0.3rem;
+ background: rgba(var(--text-color), 0.06);
+}
+.editor-card .icon,
+.column-card .icon,
+.details-card .icon {
+ padding: 0.3rem;
+ cursor: pointer;
+}
+.editor-card .editor-address,
+.column-card .editor-address,
+.details-card .editor-address {
+ font-family: "Roboto", sans-serif;
+ font-size: 0.9rem;
+ font-weight: 400;
+ opacity: 0.8;
+}
+
+.editor-card {
+ padding: 0.4rem 0.8rem;
+}
+
+.column-card {
+ padding: 0.4rem 0.6rem;
+}
+.column-card h5 {
+ font-weight: 500;
+ font-family: "Roboto", sans-serif;
+}
+.column-card .icon {
+ margin-left: 0.4rem;
+}
+
+.details-card {
+ gap: 0.2rem;
+ padding: 0.6rem 0.8rem;
+ grid-template-columns: 1fr auto;
+ grid-template-areas: ". close" ". close";
+}
+.details-card h4, .details-card h5 {
+ font-family: "Roboto", sans-serif;
+ margin: 0 !important;
+}
+.details-card h5 {
+ font-weight: 400;
+ opacity: 0.8;
+}
+.details-card h4 {
+ font-size: 1rem !important;
+}
+.details-card .icon {
+ grid-area: close;
+}
+
+#save_button {
+ position: fixed;
+ overflow: hidden;
+ bottom: 0;
+ left: 0;
+ width: calc(100% - 2rem);
+ padding: 1rem;
+ margin: 1rem;
+ border-radius: 0.4rem;
+ background: rgba(var(--foreground-color), 1);
+ z-index: 20;
+ box-shadow: 0 0.1rem 0.1rem #00000010, 0 0 1rem #00000016;
+ transform: translateY(1rem);
+ transition: transform 0.3s, opacity 0.3s;
+}
+#save_button #changes_indicator {
+ position: absolute;
+ left: 0;
+ width: 0.5rem;
+ height: 100%;
+ background: red;
+}
+#save_button sm-button {
+ margin-left: 1rem;
+}
+
+@media screen and (max-width: 640px) {
+ #group_by_view {
+ overflow: auto;
+ max-width: calc(100vw - 3rem);
+ }
+}
+@media screen and (min-width: 640px) {
+ .hide-on-desktop {
+ display: none;
+ }
+
+ sm-popup::part(popup) {
+ width: 24rem;
+ }
+
+ #sign_in_page {
+ grid-auto-flow: column;
+ }
+ #sign_in_page .sign-in-box {
+ width: 26rem;
+ padding: 2rem;
+ min-height: 80vh;
+ min-width: 26rem;
+ border-radius: 0.5rem;
+ box-shadow: 0 0 0.3rem #00000016, 0 6rem 2rem -2rem #00000016;
+ background: rgba(var(--foreground-color), 1);
+ }
+
+ #main_header {
+ padding: 1.2rem 3rem;
+ }
+
+ #home_page, #main_header {
+ grid-template-columns: 1fr 80vw 1fr;
+ grid-template-areas: ". main .";
+ }
+
+ #main_section,
+#main_header > div {
+ grid-area: main;
+ }
+
+ #sheets_container {
+ gap: 2rem;
+ grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
+ }
+
+ #sheet_page.toggle-side-bar {
+ grid-template-columns: 19rem 1fr;
+ }
+ #sheet_page.toggle-side-bar #side_bar {
+ z-index: initial;
+ }
+ #sheet_page:not(.toggle-side-bar) #side_bar {
+ grid-template-columns: 1fr;
+ position: fixed;
+ transform: translateX(-100%);
+ }
+
+ #side_bar {
+ position: relative;
+ transform: none;
+ }
+
+ #group_by::part(popup) {
+ width: 80vw;
+ }
+
+ #save_button {
+ width: auto;
+ }
+}
+@media screen and (min-width: 1920px) {
+ #home_page, #main_header {
+ grid-template-columns: 1fr 60vw 1fr;
+ grid-template-areas: ". main .";
+ }
+}
+@media (any-hover: hover) {
+ :root {
+ scrollbar-width: thin;
+ }
+
+ ::-webkit-scrollbar {
+ width: 0.7rem;
+ height: 0.7rem;
+ }
+
+ ::-webkit-scrollbar-track {
+ border-radius: 10px;
+ }
+
+ ::-webkit-scrollbar-thumb {
+ border-radius: 10px;
+ background: rgba(var(--text-color), 0.2);
+ }
+ ::-webkit-scrollbar-thumb:hover {
+ background: rgba(var(--text-color), 0.4);
+ }
+
+ #people_container::-webkit-scrollbar {
+ width: 0.4rem;
+ }
+
+ #right {
+ z-index: 1;
+ box-shadow: -0.5rem 0 0.5rem #00000010;
+ }
+}
\ No newline at end of file
diff --git a/css/main.min.css b/css/main.min.css
new file mode 100644
index 0000000..be2393d
--- /dev/null
+++ b/css/main.min.css
@@ -0,0 +1 @@
+@charset "UTF-8";.align-center,.popup-header{align-items:center}.capitalize,button{text-transform:capitalize}.person-card,button{transition:transform .3s;-webkit-tap-highlight-color:transparent}.copy-row .copy,.overflow-ellipsis{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}button,span.ripple{background:rgba(var(--text-color),.1)}*{box-sizing:border-box;padding:0;margin:0;font-family:Roboto,sans-serif}#confirmation h4,.bottom-margin{margin-bottom:1.5rem}button,h1,h2,h3,h4,h5{font-weight:600;font-family:Poppins,sans-serif}body{--accent-color:#169685;--text-color:17,17,17;--text-color-light:85,85,85;--foreground-color:255,255,255;--background-color:rgba(var(--foreground-color), 1);--dark-shade:#f8f8f8;--error-color:#E53935;--hue:172;--saturation:74%;--lightness:34%;color:rgba(var(--text-color),1);font-size:16px;background:var(--dark-shade);background-size:cover}body[data-theme=dark]{--accent-color:#00e2c4;--text-color:238,238,238;--text-color-light:170,170,170;--foreground-color:26,26,26;--background-color:#111;--dark-shade:#080808;--hue:172;--saturation:70%;--lightness:44%}a{font-weight:600;text-decoration:none;color:var(--accent-color)}.dark-text{color:#111}.person-initials,button{color:var(--accent-color)}h1{font-size:3.5rem}h2{font-size:2rem}h3{font-size:1.5rem}h4{font-size:1rem}h5{font-size:.8rem}p{line-height:1.5;max-width:65ch;color:rgba(var(--text-color),.9)}strong{font-weight:500}::-moz-focus-inner{border:none}.bottom-padding{padding-bottom:1.5rem}.top-padding{padding-top:1em}.top-margin{margin-top:1.5rem}#confirmation .flex,sm-popup sm-textarea{margin-top:1rem}.flex{display:flex}.grid{display:grid}.grid-2{grid-template-columns:auto auto;gap:1em}.direction-column{flex-direction:column}.justify-right{margin-left:auto}.space-between{justify-content:space-between}.label{margin-bottom:.4rem}.light-text{opacity:.7}.hide{opacity:0;pointer-events:none}.hide-completely{display:none!important}.breakable{word-break:break-all}.separator{padding:.1em}.no-transformations{transform:none!important}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple .6s linear}@keyframes ripple{to{transform:scale(4);opacity:0}}.icon{height:1.2rem;width:1.2rem;overflow:visible;stroke:rgba(var(--text-color),1);opacity:.8;fill:none;stroke-width:6;stroke-linejoin:round;stroke-linecap:round}sm-popup>sm-input:not(:last-of-type){margin-bottom:1rem}.popup-header{padding:1.5rem;padding-bottom:0;display:flex;width:100%}.popup-header .icon{margin-right:1rem;padding:.2rem;stroke-width:10;cursor:pointer}.popup-header button,.popup-header sm-button{width:auto;margin-left:auto}button{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:.6rem 1.2rem;cursor:pointer;border-radius:.3rem;border:none}#main_header h5,#sign_in_page .info h4,.column-card .editor-address,.column-card h5,.copy-row h4,.details-card .editor-address,.details-card h4,.details-card h5,.editor-card .editor-address,.sheet-card h4,.sheet-card h5{font-family:Roboto,sans-serif}button:focus{outline:solid thin}button:disabled{cursor:default;background:rgba(var(--text-color),.4)}.primary-btn{background:var(--accent-color);justify-content:center;color:rgba(var(--foreground-color),1)}#confirmation,.sheet-card{flex-direction:column}#confirmation h4{font-weight:500}#confirmation .flex sm-button:first-of-type{margin-right:.6em;margin-left:auto}#sign_in_page{background:url(sign-in-bg.svg) center no-repeat,linear-gradient(rgba(var(--text-color),.04),rgba(var(--text-color),.04)),linear-gradient(rgba(var(--foreground-color),1),rgba(var(--foreground-color),1));background-size:cover;min-height:100vh;width:100vw;align-items:center;padding:0 6vw}#sign_in_page .info h1{font-weight:800;font-size:clamp(1.5rem,8vw,4rem)}#sign_in_page .info h4{font-weight:500;opacity:.8}#sign_in_page .sign-in-box{width:calc(100vw - 4rem);z-index:1}#sign_in_page .sign-in-box form,#sign_in_page .sign-in-box sm-panel{width:100%}#sign_in_page .sign-in-box sm-input{text-align:left}#sign_in_page .sign-in-box sm-tab-header{background:0 0;align-self:flex-start}#sign_in_page .sign-in-box sm-tab-header::part(tab-header){padding-bottom:.4rem;gap:1.5rem}#sign_in_page .sign-in-box sm-tab::part(tab){padding:.4rem 0}#sign_in_page .sign-in-box sm-tab-panels{margin-top:3rem}#sign_in_page .sign-in-box h2{margin-bottom:.5rem}#sign_in_page .sign-in-box h3{font-weight:500}#sign_in_page .sign-in-box h4{font-weight:500;margin-bottom:1.5rem}#sign_in_page .sign-in-box h5{opacity:.8;font-weight:500}#sign_in_page .sign-in-box .copy-row h4{max-width:34ch}#sign_in_page .sign-in-box .copy-row:not(:last-of-type){margin-bottom:1rem}#sign_in_page .sign-in-box button{margin-top:1rem;padding:.6rem 1.6rem}#sign_in_page .sign-in-box p{max-width:35ch;margin-top:.5rem;margin-bottom:1.5rem}#sign_in_page .sign-in-box #credentials_section{border-top:1px rgba(var(--text-color),.2) solid;margin-top:1rem;padding-top:1.5rem;animation:slide-down .3s forwards}@keyframes slide-down{from{transform:translateY(-1rem)}to{transform:none}}.copy-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.5rem;width:auto}.copy-row h4{font-weight:400;margin:0!important}.copy-row .icon{cursor:pointer;padding:.4rem;height:1.8rem;width:1.8rem}#main_loader{text-align:center;place-content:center;height:100vh;width:100vw;position:fixed;left:0}#main_loader svg,.loader{fill:none;height:2rem;overflow:visible}#main_loader sm-button{margin-left:0;margin-top:1rem;width:max-content;justify-self:center}#main_loader svg{width:2rem;stroke:var(--accent-color);stroke-width:6;stroke-linecap:round;stroke-dashoffset:210;stroke-dasharray:210;justify-self:center;align-self:center;margin-bottom:2rem}#main_loader h3{width:100%;font-weight:400;word-spacing:.16em}.loader{stroke-width:10;stroke:var(--accent-color);width:2rem;stroke-dashoffset:230;stroke-dasharray:230;padding:2px;justify-self:center}.animate-loader{animation:load 2.6s infinite,rotate 1s infinite linear}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes load{50%{stroke-dashoffset:0}100%{stroke-dashoffset:-210}}#main_header{padding:1rem;box-shadow:0 .1rem .2rem #00010;background:rgba(var(--foreground-color),1)}#main_header h5{font-weight:500;opacity:.8}#main_header h4{font-size:1.2rem}#home_page{padding:1rem 1.5rem}.section-header{position:sticky;top:0;z-index:1;background:var(--dark-shade);padding:1rem 0;margin-bottom:1rem}.section-header h4{font-size:1.2rem;opacity:.8;font-weight:500}#main_section>header sm-input{margin-left:1rem}#user_icon{width:2.4rem;height:2.4rem;padding:.6rem;cursor:pointer;background:rgba(var(--text-color),.1);border-radius:2rem}#sheets_container{gap:2rem 1.5rem;grid-template-columns:repeat(auto-fill,minmax(9rem,1fr));margin-bottom:3rem;animation:slide-up .6s forwards cubic-bezier(.175,.885,.32,1.275)}@keyframes slide-up{from{transform:translateY(2rem)}to{transform:none}}#add_new_sheet .icon{height:2rem;width:2rem;stroke-width:10;stroke:#fff;stroke-linecap:square;opacity:1;top:50%;transform:translateY(-50%);position:absolute}#add_new_sheet .card{display:flex;align-items:center;justify-content:center;position:relative;background:url(card-bg1.svg),#A7003E;background-size:cover}.sheet-card{position:relative;display:flex;align-items:center;cursor:pointer}.sheet-card:active .card{transform:scale(.95)}.sheet-card .card{position:relative;border-radius:.4rem;background:url(card-bg2.svg) center,rgba(var(--text-color),.06);background-size:contain;padding:1rem;padding-top:66%;width:100%;transition:box-shadow .3s,transform .3s}#sheet_type,.sheet-card h5{background:rgba(var(--text-color),.1)}.sheet-card h4{font-weight:400;opacity:.9;margin-top:.8rem;text-align:center;max-width:90%}.sheet-card h5{position:absolute;top:0;right:0;margin:.5rem 0;padding:.4rem .6rem;border-radius:.2rem 0 0 .2rem;font-weight:500;opacity:.8}#sheet_editors .editor,table input{background:rgba(var(--text-color),.06)}#right,#sheet_container,table,table input{position:relative}#sheet_page{width:100vw;height:100vh;overflow-x:hidden}#sheet_page.toggle-side-bar #side_bar{transition:transform .3s;z-index:10;transform:none}#sheet_heading{font-weight:600;opacity:.9}#sheet_type{padding:.3rem .6rem;border-radius:.3rem;margin:0 1rem;font-weight:500;opacity:.8}#sheet_description{margin-top:.8rem;opacity:.8}#sheet_editors{gap:.5rem;flex-wrap:wrap;color:rgba(var(--text-color),.7);font-size:.9rem}#sheet_editors .editor{padding:.4rem .6rem;border-radius:.4rem}#go_to_home,#toggle_details{height:2.4rem;width:2.4rem;padding:.7rem;cursor:pointer}#go_to_home,#go_to_home+h5{transform:translateX(-1rem);cursor:pointer}#go_to_home+h5{font-weight:500;opacity:.9}#toggle_details{transform:rotateX(180deg);transition:transform .3s}#sheet_details{padding:1rem;margin-bottom:1rem}#sheet_details .flex:first-of-type{margin-bottom:1rem}#sheet_details .flex:nth-of-type(2){margin-bottom:1rem}#sheet_details .flex:not(:first-of-type){margin-bottom:.3rem}#sheet_details .flex:not(:first-of-type) .icon{cursor:pointer;margin-right:1rem;height:100%}#sheet_details.collapse{padding:.5rem 1rem;margin-bottom:0}#sheet_details.collapse .flex{margin-bottom:0}#sheet_details.collapse #toggle_details{transform:none}#sheet_details.collapse #sheet_heading{font-size:1.2rem;font-weight:600;opacity:.9}#sheet_details.collapse #sheet_description,#sheet_details.collapse #sheet_editors,#sheet_details.collapse #sheet_type{display:none}#sheet_container{overflow:auto;max-height:100%;bottom:0;max-width:100%}sm-select::part(options){max-height:50vh}table{border-collapse:collapse}table input{padding:.4rem;border:thin solid;font-size:1rem;width:100%;border-radius:.3rem;color:inherit}table input:disabled{border:transparent}th{position:sticky;top:0;background:linear-gradient(rgba(var(--text-color),.06),rgba(var(--text-color),.06)),rgba(var(--foreground-color),1);text-align:left;line-height:1;vertical-align:middle;font-weight:500;z-index:1;padding:1rem .8rem;white-space:nowrap;box-shadow:0 .2rem .4rem #00020;cursor:pointer}tr:nth-of-type(2n){background-color:rgba(var(--text-color),.04)}td{padding:.4rem .8rem;opacity:.9}.text-field{min-width:20ch;max-width:30ch}.grade-input{width:10ch}th.ascending::after,th.descending::after{display:inline-flex;justify-self:flex-end;position:relative;margin-left:auto;font-size:.8rem}th.descending::after{content:" â–¼"}th.ascending::after{content:" â–²"}#group_by::part(popup){min-height:80vh}#group_by sm-select:last-of-type{margin-left:.5rem}#side_bar{position:fixed;transform:translateX(-100%);background:var(--dark-shade)}#side_bar>.flex:first-of-type{padding:0 1rem}#side_bar .section-header{margin-bottom:0;background:inherit}#right{display:flex;flex-direction:column;overflow:auto;max-height:100vh;background:rgba(var(--foreground-color),1);animation:slide-right .6s forwards cubic-bezier(.175,.885,.32,1.275)}.column-card,.details-card,.editor-card,.person-initials,.placeholder{background:rgba(var(--text-color),.06)}@keyframes slide-right{from{transform:translateX(-2rem)}to{transform:translateX(0)}}.placeholder{animation:placeholder-loading .6s infinite alternate;padding:1.5rem 0;width:100%;margin:1.5rem;border-radius:.5rem}.placeholder#sheet_container{width:calc(100% - 3rem);height:calc(100% - 3rem)}@keyframes placeholder-loading{from{opacity:.4}to{opacity:1}}#people_container{overflow:auto;max-height:calc(100vh - 3.6rem);gap:1.5rem}.person-card{display:grid;align-items:center;grid-template-columns:auto 1fr;grid-template-areas:"initials ." "initials .";cursor:pointer;padding:0 1rem}.person-card:active{transform:scale(.95)}.person-card:first-of-type{margin-top:1.5rem}.person-card:last-of-type{margin-bottom:2rem}.person-initials{grid-area:initials;display:flex;justify-content:center;height:2.6rem;width:2.6rem;font-size:1.2rem!important;font-weight:500;align-items:center;border-radius:2rem;margin-right:1rem;text-transform:uppercase;opacity:1!important}.person-name{font-size:.9rem;opacity:.9;font-weight:500;text-transform:capitalize}.person-flo-id{opacity:.7;font-weight:400}#user_popup sm-button{margin-top:.5rem}#user_popup section:not(:last-of-type){margin-bottom:1.5rem}#new_sheet_popup p{font-size:.9rem}#specify_columns,#specify_details,#specify_editors{gap:1rem;margin-top:1rem;padding-top:1rem}#specify_columns h4,#specify_details h4,#specify_editors h4{font-weight:500;font-size:.9rem;margin-bottom:.2rem}#columns_container{flex-wrap:wrap}#additional_fields,#columns_container,#editors_container{gap:.4rem}#add_detail,.details-card{gap:.2rem;grid-template-columns:1fr auto}#specify_editors{border-top:solid 1px rgba(var(--text-color),.2)}#add_column sm-input,#add_detail sm-input,#add_editor sm-input{width:100%}#add_column .icon,#add_detail .icon,#add_editor .icon{height:3rem;width:3rem;padding:1rem;cursor:pointer}#add_detail{grid-template-areas:". add" ". add"}#add_detail .icon{grid-area:add;align-self:flex-end}.column-card,.details-card,.editor-card{border-radius:.3rem}.column-card .icon,.details-card .icon,.editor-card .icon{padding:.3rem;cursor:pointer}.column-card .editor-address,.details-card .editor-address,.editor-card .editor-address{font-size:.9rem;font-weight:400;opacity:.8}.editor-card{padding:.4rem .8rem}.column-card{padding:.4rem .6rem}.column-card h5{font-weight:500}.column-card .icon{margin-left:.4rem}.details-card{padding:.6rem .8rem;grid-template-areas:". close" ". close"}.details-card h4,.details-card h5{margin:0!important}.details-card h5{font-weight:400;opacity:.8}.details-card h4{font-size:1rem!important}.details-card .icon{grid-area:close}#save_button{position:fixed;overflow:hidden;bottom:0;left:0;width:calc(100% - 2rem);padding:1rem;margin:1rem;border-radius:.4rem;background:rgba(var(--foreground-color),1);z-index:20;box-shadow:0 .1rem .1rem #00010,0 0 1rem #00016;transform:translateY(1rem);transition:transform .3s,opacity .3s}#save_button #changes_indicator{position:absolute;left:0;width:.5rem;height:100%;background:red}#save_button sm-button{margin-left:1rem}@media screen and (max-width:640px){#group_by_view{overflow:auto;max-width:calc(100vw - 3rem)}}@media screen and (min-width:640px){.hide-on-desktop{display:none}sm-popup::part(popup){width:24rem}#sign_in_page{grid-auto-flow:column}#sign_in_page .sign-in-box{width:26rem;padding:2rem;min-height:80vh;min-width:26rem;border-radius:.5rem;box-shadow:0 0 .3rem #00016,0 6rem 2rem -2rem #00016;background:rgba(var(--foreground-color),1)}#main_header{padding:1.2rem 3rem}#home_page,#main_header{grid-template-columns:1fr 80vw 1fr;grid-template-areas:". main ."}#main_header>div,#main_section{grid-area:main}#sheets_container{gap:2rem;grid-template-columns:repeat(auto-fill,minmax(11rem,1fr))}#sheet_page.toggle-side-bar{grid-template-columns:19rem 1fr}#sheet_page.toggle-side-bar #side_bar{z-index:initial}#sheet_page:not(.toggle-side-bar) #side_bar{grid-template-columns:1fr;position:fixed;transform:translateX(-100%)}#side_bar{position:relative;transform:none}#group_by::part(popup){width:80vw}#save_button{width:auto}}@media screen and (min-width:1920px){#home_page,#main_header{grid-template-columns:1fr 60vw 1fr;grid-template-areas:". main ."}}@media (any-hover:hover){:root{scrollbar-width:thin}::-webkit-scrollbar{width:.7rem;height:.7rem}::-webkit-scrollbar-track{border-radius:10px}::-webkit-scrollbar-thumb{border-radius:10px;background:rgba(var(--text-color),.2)}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color),.4)}#people_container::-webkit-scrollbar{width:.4rem}#right{z-index:1;box-shadow:-.5rem 0 .5rem #00010}}
\ No newline at end of file
diff --git a/css/main.scss b/css/main.scss
new file mode 100644
index 0000000..9c225e0
--- /dev/null
+++ b/css/main.scss
@@ -0,0 +1,1091 @@
+* {
+ box-sizing: border-box;
+ padding: 0;
+ margin: 0;
+ font-family: 'Roboto', sans-serif;
+}
+body {
+ --accent-color:#169685;
+ --text-color: 17, 17, 17;
+ --text-color-light: 85, 85, 85;
+ --foreground-color: 255, 255, 255;
+ --background-color: rgba(var(--foreground-color), 1);
+ --dark-shade: #f8f8f8;
+ --error-color: #E53935;
+ --hue: 172;
+ --saturation: 74%;
+ --lightness: 34%;
+ color: rgba(var(--text-color), 1);
+ font-size: 16px;
+ background: var(--dark-shade);
+ background-size: cover;
+}
+body[data-theme="dark"]{
+ --accent-color: #00e2c4;
+ --text-color: 238, 238, 238;
+ --text-color-light: 170, 170, 170;
+ --foreground-color: 26, 26, 26;
+ --background-color: #111;
+ --dark-shade: #080808;
+ --hue: 172;
+ --saturation: 70%;
+ --lightness: 44%;
+}
+
+a {
+ font-weight: 600;
+ text-decoration: none;
+ color: var(--accent-color);
+}
+
+.dark-text {
+ color: #111;
+}
+
+h1 {
+ font-size: 3.5rem;
+}
+
+h2 {
+ font-size: 2rem;
+}
+
+h3 {
+ font-size: 1.5rem;
+}
+
+h4 {
+ font-size: 1rem;
+}
+
+h5 {
+ font-size: 0.8rem;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5 {
+ font-family: 'Poppins', sans-serif;
+ font-weight: 600;
+}
+
+p {
+ line-height: 1.5;
+ max-width: 65ch;
+ color: rgba(var(--text-color), 0.9);
+}
+strong{
+ font-weight: 500;
+}
+::-moz-focus-inner {
+ border: none;
+}
+.bottom-padding {
+ padding-bottom: 1.5rem;
+}
+
+.top-padding {
+ padding-top: 1em;
+}
+
+.bottom-margin {
+ margin-bottom: 1.5rem;
+}
+
+.top-margin {
+ margin-top: 1.5rem;
+}
+
+.flex {
+ display: flex;
+}
+
+.grid {
+ display: grid;
+}
+
+.grid-2 {
+ grid-template-columns: auto auto;
+ gap: 1em;
+}
+
+.align-center {
+ align-items: center;
+}
+
+.direction-column {
+ flex-direction: column;
+}
+
+.justify-right{
+ margin-left: auto;
+}
+
+.space-between {
+ justify-content: space-between;
+}
+
+.label {
+ margin-bottom: 0.4rem;
+}
+
+.light-text {
+ opacity: 0.7;
+}
+
+.hide {
+ opacity: 0;
+ pointer-events: none;
+}
+
+.hide-completely {
+ display: none !important;
+}
+
+.breakable {
+ word-break: break-all;
+}
+
+.overflow-ellipsis{
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.separator {
+ padding: .1em;
+}
+
+.no-transformations {
+ transform: none !important;
+}
+.capitalize{
+ text-transform: capitalize;
+}
+
+span.ripple {
+ position: absolute;
+ border-radius: 50%;
+ transform: scale(0);
+ animation: ripple 0.6s linear;
+ background: rgba(var(--text-color), 0.1);
+}
+@keyframes ripple {
+ to {
+ transform: scale(4);
+ opacity: 0;
+ }
+}
+.icon{
+ height: 1.2rem;
+ width: 1.2rem;
+ overflow: visible;
+ stroke: rgba(var(--text-color), 1);
+ opacity: 0.8;
+ fill: none;
+ stroke-width: 6;
+ stroke-linejoin: round;
+ stroke-linecap: round;
+}
+
+sm-popup{
+ & > sm-input:not(:last-of-type) {
+ margin-bottom: 1rem;
+ }
+ sm-textarea{
+ margin-top: 1rem;
+ }
+}
+
+.popup-header{
+ padding: 1.5rem;
+ padding-bottom: 0;
+ display: flex;
+ align-items: center;
+ width: 100%;
+ .icon{
+ margin-right: 1rem;
+ padding: 0.2rem;
+ stroke-width: 10;
+ cursor: pointer;
+ }
+ sm-button, button{
+ width: auto;
+ margin-left: auto;
+ }
+}
+button {
+ position: relative;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ text-transform: capitalize;
+ padding: 0.6rem 1.2rem;
+ font-weight: 600;
+ cursor: pointer;
+ border-radius: 0.3rem;
+ color: var(--accent-color);
+ transition: transform 0.3s;
+ border: none;
+ background: rgba(var(--text-color), 0.1);
+ -webkit-tap-highlight-color: transparent;
+ font-family: 'Poppins', sans-serif;
+ &:focus {
+ outline: thin solid rgba(var(--text-color-light), .4);
+ }
+ &:disabled {
+ cursor: default;
+ background: rgba(var(--text-color), 0.4);
+ }
+}
+.primary-btn {
+ background: var(--accent-color);
+ justify-content: center;
+ color: rgba(var(--foreground-color), 1);
+}
+#confirmation{
+ flex-direction: column;
+ h4 {
+ font-weight: 500;
+ margin-bottom: 1.5rem;
+ }
+
+ .flex {
+ margin-top: 1rem;
+ sm-button:first-of-type {
+ margin-right: 0.6em;
+ margin-left: auto;
+ }
+ }
+}
+#sign_in_page{
+ background: url(sign-in-bg.svg) no-repeat center, linear-gradient(rgba(var(--text-color), 0.04), rgba(var(--text-color), 0.04)), linear-gradient(rgba(var(--foreground-color), 1), rgba(var(--foreground-color), 1));
+ background-size: cover;
+ min-height: 100vh;
+ width: 100vw;
+ align-items: center;
+ padding: 0 6vw;
+ .info{
+ h1{
+ font-weight: 800;
+ font-size: clamp(1.5rem, 8vw, 4rem);
+ }
+ h4{
+ font-weight: 500;
+ font-family: 'Roboto', sans-serif;
+ opacity: 0.8;
+ }
+ }
+ .sign-in-box{
+ width: calc(100vw - 4rem);
+ z-index: 1;
+ sm-input{
+ text-align: left;
+ }
+ sm-panel{
+ width: 100%;
+ }
+ sm-tab-header{
+ background: none;
+ align-self: flex-start;
+ &::part(tab-header){
+ padding-bottom: 0.4rem;
+ gap: 1.5rem;
+ }
+ }
+ sm-tab::part(tab){
+ padding: 0.4rem 0;
+ }
+ sm-tab-panels{
+ margin-top: 3rem;
+ }
+ form{
+ width: 100%;
+ }
+ h2{
+ margin-bottom: 0.5rem;
+ }
+ h3{
+ font-weight: 500;
+ }
+ h4 {
+ font-weight: 500;
+ margin-bottom: 1.5rem;
+ }
+ h5{
+ opacity: 0.8;
+ font-weight: 500;
+ }
+ .copy-row{
+ h4{
+ max-width: 34ch;
+ }
+ }
+ .copy-row:not(:last-of-type){
+ margin-bottom: 1rem;
+ }
+ button {
+ margin-top: 1rem;
+ padding: 0.6rem 1.6rem;
+ }
+ p {
+ margin-bottom: 0.5rem;
+ max-width: 35ch;
+ margin-top: 0.5rem;
+ margin-bottom: 1.5rem;
+ }
+ #credentials_section{
+ border-top: 1px rgba(var(--text-color), 0.2) solid;
+ margin-top: 1rem;
+ padding-top: 1.5rem;
+ animation: slide-down 0.3s forwards;
+ }
+ }
+}
+@keyframes slide-down{
+ from{
+ transform: translateY(-1rem);
+ }
+ to{
+ transform: none;
+ }
+}
+.copy-row {
+ display: grid;
+ grid-template-columns: 1fr auto;
+ align-items: center;
+ gap: 0.5rem;
+ width: auto;
+ h4 {
+ font-family: 'Roboto', sans-serif;
+ margin-bottom: 0;
+ font-weight: 400;
+ margin: 0 !important;
+ }
+ .icon {
+ cursor: pointer;
+ padding: 0.4rem;
+ height: 1.8rem;
+ width: 1.8rem;
+ }
+
+ .copy {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+}
+
+#main_loader {
+ text-align: center;
+ place-content: center;
+ height: 100vh;
+ width: 100vw;
+ position: fixed;
+ left: 0;
+ sm-button {
+ margin-left: 0;
+ margin-top: 1rem;
+ width: max-content;
+ justify-self: center;
+ }
+
+ svg {
+ height: 2rem;
+ width: 2rem;
+ stroke: var(--accent-color);
+ stroke-width: 6;
+ fill: none;
+ overflow: visible;
+ stroke-linecap: round;
+ stroke-dashoffset: 210;
+ stroke-dasharray: 210;
+ justify-self: center;
+ align-self: center;
+ margin-bottom: 2rem;
+ }
+
+ h3 {
+ width: 100%;
+ font-weight: 400;
+ word-spacing: 0.16em;
+ }
+}
+
+.loader {
+ fill: none;
+ stroke-width: 10;
+ stroke: var(--accent-color);
+ height: 2rem;
+ width: 2rem;
+ overflow: visible;
+ stroke-dashoffset: 230;
+ stroke-dasharray: 230;
+ padding: 2px;
+ justify-self: center;
+}
+
+.animate-loader {
+ animation: load 2.6s infinite, rotate 1s infinite linear;
+}
+
+@keyframes rotate {
+ 100% {
+ transform: rotate(360deg);
+ }
+}
+
+@keyframes load {
+ 50% {
+ stroke-dashoffset: 0;
+ }
+
+ 100% {
+ stroke-dashoffset: -210;
+ }
+}
+
+#main_header{
+ padding: 1rem;
+ box-shadow: 0 0.1rem 0.2rem #00000010;
+ background: rgba(var(--foreground-color), 1);
+ h5{
+ font-weight: 500;
+ font-family: 'Roboto', sans-serif;
+ opacity: 0.8;
+ }
+ h4{
+ font-size: 1.2rem;
+ }
+}
+#home_page{
+ padding: 1rem 1.5rem;
+}
+.section-header{
+ position: sticky;
+ top: 0;
+ z-index: 1;
+ background: var(--dark-shade);
+ padding: 1rem 0;
+ margin-bottom: 1rem;
+ h4{
+ font-size: 1.2rem;
+ opacity: 0.8;
+ font-weight: 500;
+ }
+}
+
+#main_section{
+ & > header{
+ sm-input{
+ margin-left: 1rem;
+ }
+ }
+}
+
+#user_icon{
+ width: 2.4rem;
+ height: 2.4rem;
+ padding: 0.6rem;
+ cursor: pointer;
+ background: rgba(var(--text-color), 0.1);
+ border-radius: 2rem;
+}
+
+#sheets_container{
+ gap: 2rem 1.5rem;
+ grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
+ margin-bottom: 3rem;
+ animation: slide-up 0.6s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+@keyframes slide-up{
+ from{
+ transform: translateY(2rem);
+ }
+ to{
+ transform: none;
+ }
+}
+
+#add_new_sheet{
+ .icon{
+ height: 2rem;
+ width: 2rem;
+ stroke-width: 10;
+ stroke: #fff;
+ stroke-linecap: square;
+ opacity: 1;
+ top: 50%;
+ transform: translateY(-50%);
+ position: absolute;
+ }
+ .card{
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ position: relative;
+ background: url(card-bg1.svg), #A7003E;
+ background-size: cover;
+ }
+}
+
+.sheet-card{
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ cursor: pointer;
+ &:active .card{
+ transform: scale(0.95);
+ }
+ .card{
+ position: relative;
+ border-radius: 0.4rem;
+ background: url(card-bg2.svg) center, rgba(var(--text-color), 0.06);
+ background-size: contain;
+ padding: 1rem;
+ padding-top: 66%;
+ width: 100%;
+ transition: box-shadow 0.3s, transform 0.3s;
+ }
+ h4{
+ font-family: 'Roboto', sans-serif;
+ font-weight: 400;
+ opacity: 0.9;
+ margin-top: 0.8rem;
+ text-align: center;
+ max-width: 90%;
+ }
+ h5{
+ font-family: 'Roboto', sans-serif;
+ background: rgba(var(--text-color), 0.1);
+ position: absolute;
+ top: 0;
+ right: 0;
+ margin: 0.5rem 0;
+ padding: 0.4rem 0.6rem;
+ border-radius: .2rem 0 0 .2rem;
+ font-weight: 500;
+ opacity: 0.8;
+ }
+}
+
+#sheet_page{
+ width: 100vw;
+ height: 100vh;
+ overflow-x: hidden;
+ &.toggle-side-bar #side_bar{
+ transition: transform 0.3s;
+ z-index: 10;
+ transform: none;
+ }
+}
+#sheet_heading{
+ font-weight: 600;
+ opacity: 0.9;
+}
+#sheet_type{
+ padding: 0.3rem 0.6rem;
+ border-radius: 0.3rem;
+ margin: 0 1rem;
+ font-weight: 500;
+ opacity: 0.8;
+ background: rgba(var(--text-color), 0.1);
+}
+#sheet_description{
+ margin-top: 0.8rem;
+ opacity: 0.8;
+}
+#sheet_editors{
+ gap: 0.5rem;
+ flex-wrap: wrap;
+ color: rgba(var(--text-color), 0.7);
+ font-size: 0.9rem;
+ .editor{
+ padding: 0.4rem 0.6rem;
+ border-radius: 0.4rem;
+ background: rgba(var(--text-color), 0.06);
+ }
+}
+#toggle_details, #go_to_home{
+ height: 2.4rem;
+ width: 2.4rem;
+ padding: 0.7rem;
+ cursor: pointer;
+}
+#go_to_home, #go_to_home + h5{
+ transform: translateX(-1rem);
+ cursor: pointer;
+}
+#go_to_home + h5{
+ font-weight: 500;
+ opacity: 0.9;
+}
+#toggle_details{
+ transform: rotateX(180deg);
+ transition: transform 0.3s;
+}
+#sheet_details{
+ padding: 1rem;
+ margin-bottom: 1rem;
+ .flex:first-of-type{
+ margin-bottom: 1rem;
+ }
+ .flex:nth-of-type(2){
+ margin-bottom: 1rem;
+ }
+ .flex:not(:first-of-type){
+ margin-bottom: 0.3rem;
+ .icon{
+ cursor: pointer;
+ margin-right: 1rem;
+ height: 100%;
+ }
+ }
+ &.collapse{
+ padding: 0.5rem 1rem;
+ margin-bottom: 0;
+ .flex{
+ margin-bottom: 0;
+ }
+ #toggle_details{
+ transform: none;
+ }
+ #sheet_heading{
+ font-size: 1.2rem;
+ font-weight: 600;
+ opacity: 0.9;
+ }
+ #sheet_description,
+ #sheet_editors,
+ #sheet_type{
+ display: none;
+ }
+ }
+}
+#sheet_container{
+ position: relative;
+ overflow: auto;
+ max-height: 100%;
+ bottom: 0;
+ max-width: 100%;
+}
+sm-select::part(options){
+ max-height: 50vh;
+}
+table{
+ border-collapse: collapse;
+ position: relative;
+ input{
+ position: relative;
+ padding: 0.4rem;
+ border: thin solid rgba(var(--text-color), 0.3);
+ font-size: 1rem;
+ width: 100%;
+ border-radius: 0.3rem;
+ background: rgba(var(--text-color), 0.06);
+ color: inherit;
+ &:disabled{
+ border: transparent;
+ }
+ }
+}
+th{
+ position: sticky;
+ top: 0;
+ background: linear-gradient(rgba(var(--text-color), 0.06), rgba(var(--text-color), 0.06)), rgba(var(--foreground-color), 1);
+ text-align: left;
+ line-height: 1;
+ vertical-align: middle;
+ font-weight: 500;
+ z-index: 1;
+ padding: 1rem 0.8rem;
+ white-space: nowrap;
+ box-shadow: 0 0.2rem 0.4rem #00000020;
+ cursor: pointer;
+}
+tr{
+ &:nth-of-type(2n){
+ background-color: rgba(var(--text-color), 0.04);
+ }
+}
+td{
+ padding: 0.4rem 0.8rem;
+ opacity: 0.9;
+}
+.text-field{
+ min-width: 20ch;
+ max-width: 30ch;
+}
+.grade-input{
+ width: 10ch;
+}
+th.descending::after,
+th.ascending::after{
+ display: inline-flex;
+ justify-self: flex-end;
+ position: relative;
+ margin-left: auto;
+ font-size: 0.8rem;
+}
+th.descending::after{
+ content: " \25BC";
+}
+th.ascending::after{
+ content: ' \25B2';
+}
+
+#group_by{
+ &::part(popup){
+ min-height: 80vh;
+ }
+ sm-select:last-of-type{
+ margin-left: 0.5rem;
+ }
+}
+
+#side_bar{
+ position: fixed;
+ transform: translateX(-100%);
+ background: var(--dark-shade);
+ & > .flex:first-of-type{
+ padding: 0 1rem;
+ }
+ .section-header{
+ margin-bottom: 0;
+ background: inherit;
+ }
+}
+#right{
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ overflow: auto;
+ max-height: 100vh;
+ background: rgba(var(--foreground-color), 1);
+ animation: slide-right 0.6s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+@keyframes slide-right{
+ from{
+ transform: translateX(-2rem);
+ }
+ to{
+ transform: translateX(0);
+ }
+}
+
+.placeholder{
+ animation: placeholder-loading 0.6s infinite alternate;
+ padding: 1.5rem 0;
+ width: 100%;
+ margin: 1.5rem;
+ border-radius: 0.5rem;
+ background: rgba(var(--text-color), 0.06);
+ sheet_container{
+ width: calc(100% - 3rem);
+ height: calc(100% - 3rem);
+ }
+}
+
+@keyframes placeholder-loading{
+ from{
+ opacity: 0.4;
+ }
+ to{
+ opacity: 1;
+ }
+}
+
+#people_container{
+ overflow: auto;
+ max-height: calc(100vh - 3.6rem);
+ gap: 1.5rem;
+}
+
+.person-card{
+ display: grid;
+ align-items: center;
+ grid-template-columns: auto 1fr;
+ grid-template-areas: 'initials .' 'initials .';
+ cursor: pointer;
+ padding: 0 1rem;
+ transition: transform 0.3s;
+ -webkit-tap-highlight-color: transparent;
+ &:active{
+ transform: scale(0.95);
+ }
+ &:first-of-type{
+ margin-top: 1.5rem;
+ }
+ &:last-of-type{
+ margin-bottom: 2rem;
+ }
+}
+.person-initials{
+ grid-area: initials;
+ display: flex;
+ justify-content: center;
+ height: 2.6rem;
+ width: 2.6rem;
+ font-size: 1.2rem !important;
+ font-weight: 500;
+ align-items: center;
+ border-radius: 2rem;
+ margin-right: 1rem;
+ text-transform: uppercase;
+ opacity: 1 !important;
+ color: var(--accent-color);
+ background: rgba(var(--text-color), 0.06);
+}
+.person-name{
+ font-size: 0.9rem;
+ opacity: 0.9;
+ font-weight: 500;
+ text-transform: capitalize;
+}
+.person-flo-id{
+ opacity: 0.7;
+ font-weight: 400;
+}
+
+#user_popup{
+ sm-button{
+ margin-top: 0.5rem;
+ }
+ section:not(:last-of-type){
+ margin-bottom: 1.5rem;
+ }
+}
+
+#new_sheet_popup{
+ p{
+ font-size: 0.9rem;
+ }
+}
+
+#specify_columns,
+#specify_editors,
+#specify_details{
+ h4{
+ font-weight: 500;
+ font-size: 0.9rem;
+ margin-bottom: 0.2rem;
+ }
+ gap: 1rem;
+ margin-top: 1rem;
+ padding-top: 1rem;
+}
+#columns_container{
+ flex-wrap: wrap;
+}
+#editors_container,
+#columns_container,
+#additional_fields{
+ gap: 0.4rem;
+}
+#specify_editors{
+ border-top: solid 1px rgba(var(--text-color), 0.2);
+}
+#add_editor,
+#add_column,
+#add_detail{
+ sm-input{
+ width: 100%;
+ }
+ .icon{
+ height: 3rem;
+ width: 3rem;
+ padding: 1rem;
+ cursor: pointer;
+ }
+}
+#add_detail{
+ gap: 0.2rem;
+ grid-template-columns: 1fr auto;
+ grid-template-areas: '. add' '. add';
+ .icon{
+ grid-area: add;
+ align-self: flex-end;
+ }
+}
+.editor-card,
+.column-card,
+.details-card{
+ border-radius: 0.3rem;
+ background: rgba(var(--text-color), 0.06);
+ .icon{
+ padding: 0.3rem;
+ cursor: pointer;
+ }
+ .editor-address{
+ font-family: 'Roboto', sans-serif;
+ font-size: 0.9rem;
+ font-weight: 400;
+ opacity: 0.8;
+ }
+}
+.editor-card{
+ padding: 0.4rem 0.8rem;
+}
+.column-card{
+ padding: 0.4rem 0.6rem;
+ h5{
+ font-weight: 500;
+ font-family: 'Roboto', sans-serif;
+ }
+ .icon{
+ margin-left: 0.4rem;
+ }
+}
+.details-card{
+ gap: 0.2rem;
+ padding: 0.6rem 0.8rem;
+ grid-template-columns: 1fr auto;
+ grid-template-areas: '. close' '. close';
+ h4, h5{
+ font-family: 'Roboto', sans-serif;
+ margin: 0 !important;
+ }
+ h5{
+ font-weight: 400;
+ opacity: 0.8;
+ }
+ h4{
+ font-size: 1rem !important;
+ }
+ .icon{
+ grid-area: close;
+ }
+}
+
+#save_button{
+ position: fixed;
+ overflow: hidden;
+ bottom: 0;
+ left: 0;
+ width: calc(100% - 2rem);
+ padding: 1rem;
+ margin: 1rem;
+ border-radius: 0.4rem;
+ background: rgba(var(--foreground-color), 1);
+ z-index: 20;
+ box-shadow: 0 0.1rem 0.1rem #00000010, 0 0 1rem #00000016;
+ transform: translateY(1rem);
+ transition: transform 0.3s, opacity 0.3s;
+ #changes_indicator{
+ position: absolute;
+ left: 0;
+ width: 0.5rem;
+ height: 100%;
+ background: red;
+ }
+ sm-button{
+ margin-left: 1rem;
+ }
+}
+
+@media screen and (max-width: 640px){
+ #group_by_view{
+ overflow: auto;
+ max-width: calc(100vw - 3rem);
+ }
+}
+@media screen and (min-width: 640px){
+ .hide-on-desktop{
+ display: none;
+ }
+ sm-popup::part(popup){
+ width: 24rem;
+ }
+ #sign_in_page{
+ grid-auto-flow: column;
+ .sign-in-box{
+ width: 26rem;
+ padding: 2rem;
+ min-height: 80vh;
+ min-width: 26rem;
+ border-radius: 0.5rem;
+ box-shadow: 0 0 0.3rem #00000016, 0 6rem 2rem -2rem #00000016;
+ background: rgba(var(--foreground-color), 1);
+ }
+ }
+ #main_header{
+ padding: 1.2rem 3rem;
+ }
+ #home_page, #main_header{
+ grid-template-columns: 1fr 80vw 1fr;
+ grid-template-areas: '. main .';
+ }
+ #main_section,
+ #main_header > div{
+ grid-area: main;
+ }
+
+ #sheets_container{
+ gap: 2rem;
+ grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
+ }
+ #sheet_page{
+ &.toggle-side-bar{
+ grid-template-columns: 19rem 1fr;
+ #side_bar{
+ z-index: initial;
+ }
+ }
+ &:not(.toggle-side-bar) #side_bar{
+ grid-template-columns: 1fr;
+ position: fixed;
+ transform: translateX(-100%);
+ }
+ }
+ #side_bar{
+ position: relative;
+ transform: none;
+ }
+ #group_by{
+ &::part(popup){
+ width: 80vw;
+ }
+ }
+ #save_button{
+ width: auto;
+ }
+}
+@media screen and (min-width: 1920px){
+ #home_page, #main_header{
+ grid-template-columns: 1fr 60vw 1fr;
+ grid-template-areas: '. main .';
+ }
+}
+@media (any-hover: hover){
+ :root{
+ scrollbar-width: thin;
+ }
+ ::-webkit-scrollbar {
+ width: 0.7rem;
+ height: 0.7rem;
+ }
+
+ ::-webkit-scrollbar-track {
+ border-radius: 10px;
+ }
+
+ ::-webkit-scrollbar-thumb {
+ border-radius: 10px;
+ background: rgba(var(--text-color), 0.2);
+ &:hover{
+ background: rgba(var(--text-color), 0.4);
+ }
+ }
+ #people_container::-webkit-scrollbar{
+ width: 0.4rem;
+ }
+ #right{
+ z-index: 1;
+ box-shadow: -0.5rem 0 0.5rem #00000010;
+ }
+}
\ No newline at end of file
diff --git a/css/sign-in-bg.svg b/css/sign-in-bg.svg
new file mode 100644
index 0000000..7b1da05
--- /dev/null
+++ b/css/sign-in-bg.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/css/welcome.ai b/css/welcome.ai
new file mode 100644
index 0000000..6a416d7
--- /dev/null
+++ b/css/welcome.ai
@@ -0,0 +1,1938 @@
+%PDF-1.5
%âãÏÓ
+1 0 obj
<>/OCGs[5 0 R]>>/Pages 3 0 R/Type/Catalog>>
endobj
2 0 obj
<>stream
+
+
+
+
+ application/pdf
+
+
+ welcome
+
+
+ Adobe Illustrator CC 23.0 (Windows)
+ 2020-11-07T19:10:32+06:30
+ 2020-11-07T19:10:32+05:30
+ 2020-11-07T19:10:32+05:30
+
+
+
+ 108
+ 256
+ JPEG
+ /9j/4AAQSkZJRgABAgEASABIAAD/7QAsUGhvdG9zaG9wIDMuMAA4QklNA+0AAAAAABAASAAAAAEA
AQBIAAAAAQAB/+4ADkFkb2JlAGTAAAAAAf/bAIQABgQEBAUEBgUFBgkGBQYJCwgGBggLDAoKCwoK
DBAMDAwMDAwQDA4PEA8ODBMTFBQTExwbGxscHx8fHx8fHx8fHwEHBwcNDA0YEBAYGhURFRofHx8f
Hx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8f/8AAEQgBAABsAwER
AAIRAQMRAf/EAaIAAAAHAQEBAQEAAAAAAAAAAAQFAwIGAQAHCAkKCwEAAgIDAQEBAQEAAAAAAAAA
AQACAwQFBgcICQoLEAACAQMDAgQCBgcDBAIGAnMBAgMRBAAFIRIxQVEGE2EicYEUMpGhBxWxQiPB
UtHhMxZi8CRygvElQzRTkqKyY3PCNUQnk6OzNhdUZHTD0uIIJoMJChgZhJRFRqS0VtNVKBry4/PE
1OT0ZXWFlaW1xdXl9WZ2hpamtsbW5vY3R1dnd4eXp7fH1+f3OEhYaHiImKi4yNjo+Ck5SVlpeYmZ
qbnJ2en5KjpKWmp6ipqqusra6voRAAICAQIDBQUEBQYECAMDbQEAAhEDBCESMUEFURNhIgZxgZEy
obHwFMHR4SNCFVJicvEzJDRDghaSUyWiY7LCB3PSNeJEgxdUkwgJChgZJjZFGidkdFU38qOzwygp
0+PzhJSktMTU5PRldYWVpbXF1eX1RlZmdoaWprbG1ub2R1dnd4eXp7fH1+f3OEhYaHiImKi4yNjo
+DlJWWl5iZmpucnZ6fkqOkpaanqKmqq6ytrq+v/aAAwDAQACEQMRAD8A9U4q7FXYq7FXYq7FXYq7
FXYq7FUl85ebtF8oeW77zDrUpi0+xTk/EVd2YhUjRdqs7EKP6Yq+FfzM/wCchvzC8738wW/l0fQy
xFvpNlI0S8K7evIvF5mp15fDXooxVgGjeYtd0XU01TSdQuLHUY25rdQSMj1rU1IPxA9wdj3xV9rf
8rx1X/oWz/lYfpL+n/Q+qfZHp/XPrH1T1+NOPGv73j0/ZxV7birsVdirsVdirsVdirsVdirsVfKv
/ObvmlwfLnlWKSiES6neR167+hbmnt++xV5z/wA49flxpXmKbVNf1mAXNlpPpRWttIKxyXEpqWcH
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
+
+
+
+ proof:pdf
+ uuid:65E6390686CF11DBA6E2D887CEACB407
+ xmp.did:8aaddc4c-5d5a-6146-a290-a631ed4a3e5f
+ uuid:2f42cde9-fae8-4c45-bd5d-30812f7522bd
+
+ xmp.iid:2c6c07d1-7411-f943-85a6-2d0936bfe5bc
+ xmp.did:2c6c07d1-7411-f943-85a6-2d0936bfe5bc
+ uuid:65E6390686CF11DBA6E2D887CEACB407
+ proof:pdf
+
+
+
+
+ saved
+ xmp.iid:1ed94b36-3d55-8045-9bc7-dbfd034a0ff7
+ 2020-11-07T18:54:04+05:30
+ Adobe Illustrator CC 23.0 (Windows)
+ /
+
+
+ saved
+ xmp.iid:8aaddc4c-5d5a-6146-a290-a631ed4a3e5f
+ 2020-11-07T19:10:29+05:30
+ Adobe Illustrator CC 23.0 (Windows)
+ /
+
+
+
+ Web
+ Document
+ 1
+ False
+ False
+
+ 128.000000
+ 128.000000
+ Pixels
+
+
+
+ Cyan
+ Magenta
+ Yellow
+ Black
+
+
+
+
+
+ Default Swatch Group
+ 0
+
+
+
+ White
+ RGB
+ PROCESS
+ 255
+ 255
+ 255
+
+
+ Black
+ RGB
+ PROCESS
+ 0
+ 0
+ 0
+
+
+ RGB Red
+ RGB
+ PROCESS
+ 255
+ 0
+ 0
+
+
+ RGB Yellow
+ RGB
+ PROCESS
+ 255
+ 255
+ 0
+
+
+ RGB Green
+ RGB
+ PROCESS
+ 0
+ 255
+ 0
+
+
+ RGB Cyan
+ RGB
+ PROCESS
+ 0
+ 255
+ 255
+
+
+ RGB Blue
+ RGB
+ PROCESS
+ 0
+ 0
+ 255
+
+
+ RGB Magenta
+ RGB
+ PROCESS
+ 255
+ 0
+ 255
+
+
+ R=193 G=39 B=45
+ RGB
+ PROCESS
+ 193
+ 39
+ 45
+
+
+ R=237 G=28 B=36
+ RGB
+ PROCESS
+ 237
+ 28
+ 36
+
+
+ R=241 G=90 B=36
+ RGB
+ PROCESS
+ 241
+ 90
+ 36
+
+
+ R=247 G=147 B=30
+ RGB
+ PROCESS
+ 247
+ 147
+ 30
+
+
+ R=251 G=176 B=59
+ RGB
+ PROCESS
+ 251
+ 176
+ 59
+
+
+ R=252 G=238 B=33
+ RGB
+ PROCESS
+ 252
+ 238
+ 33
+
+
+ R=217 G=224 B=33
+ RGB
+ PROCESS
+ 217
+ 224
+ 33
+
+
+ R=140 G=198 B=63
+ RGB
+ PROCESS
+ 140
+ 198
+ 63
+
+
+ R=57 G=181 B=74
+ RGB
+ PROCESS
+ 57
+ 181
+ 74
+
+
+ R=0 G=146 B=69
+ RGB
+ PROCESS
+ 0
+ 146
+ 69
+
+
+ R=0 G=104 B=55
+ RGB
+ PROCESS
+ 0
+ 104
+ 55
+
+
+ R=34 G=181 B=115
+ RGB
+ PROCESS
+ 34
+ 181
+ 115
+
+
+ R=0 G=169 B=157
+ RGB
+ PROCESS
+ 0
+ 169
+ 157
+
+
+ R=41 G=171 B=226
+ RGB
+ PROCESS
+ 41
+ 171
+ 226
+
+
+ R=0 G=113 B=188
+ RGB
+ PROCESS
+ 0
+ 113
+ 188
+
+
+ R=46 G=49 B=146
+ RGB
+ PROCESS
+ 46
+ 49
+ 146
+
+
+ R=27 G=20 B=100
+ RGB
+ PROCESS
+ 27
+ 20
+ 100
+
+
+ R=102 G=45 B=145
+ RGB
+ PROCESS
+ 102
+ 45
+ 145
+
+
+ R=147 G=39 B=143
+ RGB
+ PROCESS
+ 147
+ 39
+ 143
+
+
+ R=158 G=0 B=93
+ RGB
+ PROCESS
+ 158
+ 0
+ 93
+
+
+ R=212 G=20 B=90
+ RGB
+ PROCESS
+ 212
+ 20
+ 90
+
+
+ R=237 G=30 B=121
+ RGB
+ PROCESS
+ 237
+ 30
+ 121
+
+
+ R=199 G=178 B=153
+ RGB
+ PROCESS
+ 199
+ 178
+ 153
+
+
+ R=153 G=134 B=117
+ RGB
+ PROCESS
+ 153
+ 134
+ 117
+
+
+ R=115 G=99 B=87
+ RGB
+ PROCESS
+ 115
+ 99
+ 87
+
+
+ R=83 G=71 B=65
+ RGB
+ PROCESS
+ 83
+ 71
+ 65
+
+
+ R=198 G=156 B=109
+ RGB
+ PROCESS
+ 198
+ 156
+ 109
+
+
+ R=166 G=124 B=82
+ RGB
+ PROCESS
+ 166
+ 124
+ 82
+
+
+ R=140 G=98 B=57
+ RGB
+ PROCESS
+ 140
+ 98
+ 57
+
+
+ R=117 G=76 B=36
+ RGB
+ PROCESS
+ 117
+ 76
+ 36
+
+
+ R=96 G=56 B=19
+ RGB
+ PROCESS
+ 96
+ 56
+ 19
+
+
+ R=66 G=33 B=11
+ RGB
+ PROCESS
+ 66
+ 33
+ 11
+
+
+
+
+
+ Grays
+ 1
+
+
+
+ R=0 G=0 B=0
+ RGB
+ PROCESS
+ 0
+ 0
+ 0
+
+
+ R=26 G=26 B=26
+ RGB
+ PROCESS
+ 26
+ 26
+ 26
+
+
+ R=51 G=51 B=51
+ RGB
+ PROCESS
+ 51
+ 51
+ 51
+
+
+ R=77 G=77 B=77
+ RGB
+ PROCESS
+ 77
+ 77
+ 77
+
+
+ R=102 G=102 B=102
+ RGB
+ PROCESS
+ 102
+ 102
+ 102
+
+
+ R=128 G=128 B=128
+ RGB
+ PROCESS
+ 128
+ 128
+ 128
+
+
+ R=153 G=153 B=153
+ RGB
+ PROCESS
+ 153
+ 153
+ 153
+
+
+ R=179 G=179 B=179
+ RGB
+ PROCESS
+ 179
+ 179
+ 179
+
+
+ R=204 G=204 B=204
+ RGB
+ PROCESS
+ 204
+ 204
+ 204
+
+
+ R=230 G=230 B=230
+ RGB
+ PROCESS
+ 230
+ 230
+ 230
+
+
+ R=242 G=242 B=242
+ RGB
+ PROCESS
+ 242
+ 242
+ 242
+
+
+
+
+
+ Web Color Group
+ 1
+
+
+
+ R=63 G=169 B=245
+ RGB
+ PROCESS
+ 63
+ 169
+ 245
+
+
+ R=122 G=201 B=67
+ RGB
+ PROCESS
+ 122
+ 201
+ 67
+
+
+ R=255 G=147 B=30
+ RGB
+ PROCESS
+ 255
+ 147
+ 30
+
+
+ R=255 G=29 B=37
+ RGB
+ PROCESS
+ 255
+ 29
+ 37
+
+
+ R=255 G=123 B=172
+ RGB
+ PROCESS
+ 255
+ 123
+ 172
+
+
+ R=189 G=204 B=212
+ RGB
+ PROCESS
+ 189
+ 204
+ 212
+
+
+
+
+
+
+ Adobe PDF library 15.00
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+endstream
endobj
3 0 obj
<>
endobj
7 0 obj
<>/Resources<>/ExtGState<>/Properties<>>>/Thumb 12 0 R/TrimBox[0.0 0.0 128.0 128.0]/Type/Page>>
endobj
8 0 obj
<>stream
+H‰ä–ÍnTI…÷÷)üí”ë¿¶ôŒ ¡,x€3ÁHL$x}>»H:ˆMÖDQßj×òÏ9Çîܼ=ËÍës’åøz$±<ãsòÇÿŽ÷òßqs¾Mr¹“¤3Wž½˜ÈÝ…W/yõïÝñÕ_ògRLKéU²&³!—/‡ï9òÒR»”¦n°Êlòí(IG“²´Ïì.j™R«ZëÖÔÞðwü´-gš|¾nÍø »UÂZsz 1êƒy9òÐ4¯¯+q[83+nfËb¶´®ÅikšÆ™uöL,#§Þ¥ícº›Z¤Œ¹WmË