diff --git a/flologsheet/LICENCE b/flologsheet/LICENCE
new file mode 100644
index 0000000..d3f4c4c
--- /dev/null
+++ b/flologsheet/LICENCE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Sai Raj
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/flologsheet/README.md b/flologsheet/README.md
new file mode 100644
index 0000000..81647d8
--- /dev/null
+++ b/flologsheet/README.md
@@ -0,0 +1,28 @@
+# FLO LogSheet
+FLO Log Sheet is a blockchain-based spreadsheet like app to store data on a decentralized cloud storage. High-quality data can be curated using a blockchain-based scoring system. It is used to keep a record of accurate data. The highest quality or the most accurate data is scored the highest.
+
+There are two types of sheets:
+i) Public sheet
+ii) Private sheet
+
+### Live URL for FLO LogSheet:
+*https://ranchimall.github.io/flologsheet/*
+
+### Public sheet
+Anyone with a Bitcoin address or a FLO blockchain address can make entries to the sheet
+
+### Private sheet
+Only authorized Bitcoin or FLO addresses can make entries
+
+### Creation of a sheet
+• Currently this feature is kept to only authorized sub-admins of the RanchiMall ecosystem to avoid flooding of data and to maintain the quality of data
+• Sub-admins are approved FLO or BTC addresses that can make changes such as the creation of a sheet and scoring the entries inside a sheet
+
+### Scoring
+• Scoring is done to maintain the authenticity of the data
+• Unscored entries or entries with a score of 0 are automatically deleted from the cloud after 7 days
+• Scoring can only be done by the authorized FLO or BTC addresses
+
+#### Note:
+• Currently Flo LogSheet has sheets for various RanchiMall projects like Project B (Token Room) El Salvador, BIT Sindri Blockchain Project, blockchain-based Labour Market in Ranchi, and the token allocation & room nights data for Token Room
+• RanchiMall uses these sheets to maintain the quality and accuracy of these project's statistics
diff --git a/flologsheet/components.js b/flologsheet/components.js
new file mode 100644
index 0000000..90c7037
--- /dev/null
+++ b/flologsheet/components.js
@@ -0,0 +1,13 @@
+// Components downloaded: button,chips,form,input,notifications,popup,switch,select,spinner,textarea,theme-toggle
+const smButton = document.createElement("template"); smButton.innerHTML = "
", customElements.define("sm-button", class extends HTMLElement { constructor() { super(), this.attachShadow({ mode: "open" }).append(smButton.content.cloneNode(!0)) } static get observedAttributes() { return ["disabled"] } get disabled() { return this.hasAttribute("disabled") } set disabled(t) { t ? this.setAttribute("disabled", "") : this.removeAttribute("disabled") } focusIn() { this.focus() } handleKeyDown(t) { this.hasAttribute("disabled") || "Enter" !== t.key && " " !== t.key || (t.preventDefault(), this.click()) } connectedCallback() { this.hasAttribute("disabled") || this.setAttribute("tabindex", "0"), this.setAttribute("role", "button"), this.addEventListener("keydown", this.handleKeyDown) } attributeChangedCallback(t) { "disabled" === t && (this.hasAttribute("disabled") ? this.removeAttribute("tabindex") : this.setAttribute("tabindex", "0"), this.setAttribute("aria-disabled", this.hasAttribute("disabled"))) } });
+const smChips = document.createElement("template"); smChips.innerHTML = '', customElements.define("sm-chips", class extends HTMLElement { constructor() { super(), this.attachShadow({ mode: "open" }).append(smChips.content.cloneNode(!0)), this.chipsWrapper = this.shadowRoot.querySelector(".sm-chips"), this.coverLeft = this.shadowRoot.querySelector(".cover--left"), this.coverRight = this.shadowRoot.querySelector(".cover--right"), this.navButtonLeft = this.shadowRoot.querySelector(".nav-button--left"), this.navButtonRight = this.shadowRoot.querySelector(".nav-button--right"), this.slottedOptions = void 0, this._value = void 0, this.scrollDistance = 0, this.assignedElements = [], this.scrollLeft = this.scrollLeft.bind(this), this.scrollRight = this.scrollRight.bind(this), this.fireEvent = this.fireEvent.bind(this), this.setSelectedOption = this.setSelectedOption.bind(this) } get value() { return this._value } set value(t) { this.setSelectedOption(t) } scrollLeft() { this.chipsWrapper.scrollBy({ left: -this.scrollDistance, behavior: "smooth" }) } scrollRight() { this.chipsWrapper.scrollBy({ left: this.scrollDistance, behavior: "smooth" }) } setSelectedOption(t) { this._value !== t && (this._value = t, this.assignedElements.forEach(e => { e.value == t ? (e.setAttribute("selected", ""), e.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center" })) : e.removeAttribute("selected") })) } fireEvent() { this.dispatchEvent(new CustomEvent("change", { bubbles: !0, composed: !0, detail: { value: this._value } })) } connectedCallback() { this.setAttribute("role", "listbox"); const t = this.shadowRoot.querySelector("slot"); t.addEventListener("slotchange", e => { n.disconnect(), i.disconnect(), this.observeSelf.disconnect(), clearTimeout(this.slotChangeTimeout), this.slotChangeTimeout = setTimeout(() => { this.assignedElements = t.assignedElements(), this.assignedElements.forEach(t => { t.hasAttribute("selected") && (this._value = t.value) }), this.observeSelf.observe(this) }, 0) }); const e = new ResizeObserver(t => { t.forEach(t => { if (t.contentBoxSize) { const e = Array.isArray(t.contentBoxSize) ? t.contentBoxSize[0] : t.contentBoxSize; this.scrollDistance = .6 * e.inlineSize } else this.scrollDistance = .6 * t.contentRect.width }) }); e.observe(this), this.observeSelf = new IntersectionObserver((t, e) => { t.forEach(t => { t.isIntersecting && !this.hasAttribute("multiline") && this.assignedElements.length > 0 && (n.observe(this.assignedElements[0]), i.observe(this.assignedElements[this.assignedElements.length - 1]), e.unobserve(this)) }) }, { threshold: 1 }), this.chipsWrapper.addEventListener("option-clicked", t => { this._value !== t.target.value && (this.setSelectedOption(t.target.value), this.fireEvent()) }); const n = new IntersectionObserver(t => { t.forEach(t => { t.isIntersecting ? (this.navButtonLeft.classList.add("hide"), this.coverLeft.classList.add("hide")) : (this.navButtonLeft.classList.remove("hide"), this.coverLeft.classList.remove("hide")) }) }, { threshold: 1, root: this }), i = new IntersectionObserver(t => { t.forEach(t => { t.isIntersecting ? (this.navButtonRight.classList.add("hide"), this.coverRight.classList.add("hide")) : (this.navButtonRight.classList.remove("hide"), this.coverRight.classList.remove("hide")) }) }, { threshold: 1, root: this }); this.navButtonLeft.addEventListener("click", this.scrollLeft), this.navButtonRight.addEventListener("click", this.scrollRight) } disconnectedCallback() { this.navButtonLeft.removeEventListener("click", this.scrollLeft), this.navButtonRight.removeEventListener("click", this.scrollRight) } }); const smChip = document.createElement("template"); smChip.innerHTML = ' ', customElements.define("sm-chip", class extends HTMLElement { constructor() { super(), this.attachShadow({ mode: "open" }).append(smChip.content.cloneNode(!0)), this._value = void 0, this.radioButton = this.shadowRoot.querySelector("input"), this.fireEvent = this.fireEvent.bind(this), this.handleKeyDown = this.handleKeyDown.bind(this) } get value() { return this._value } fireEvent() { this.dispatchEvent(new CustomEvent("option-clicked", { bubbles: !0, composed: !0, detail: { value: this._value } })) } handleKeyDown(t) { "Enter" !== t.key && "Space" !== t.key || this.fireEvent() } connectedCallback() { this.setAttribute("role", "option"), this.setAttribute("tabindex", "0"), this._value = this.getAttribute("value"), this.addEventListener("click", this.fireEvent), this.addEventListener("keydown", this.handleKeyDown) } disconnectedCallback() { this.removeEventListener("click", this.fireEvent), this.removeEventListener("keydown", this.handleKeyDown) } });
+const smCopy = document.createElement("template"); smCopy.innerHTML = '', customElements.define("sm-copy", class extends HTMLElement { constructor() { super(), this.attachShadow({ mode: "open" }).append(smCopy.content.cloneNode(!0)), this.copyContent = this.shadowRoot.querySelector(".copy-content"), this.copyButton = this.shadowRoot.querySelector(".copy-button"), this.copy = this.copy.bind(this) } static get observedAttributes() { return ["value"] } set value(t) { this.setAttribute("value", t) } get value() { return this.getAttribute("value") } fireEvent() { this.dispatchEvent(new CustomEvent("copy", { composed: !0, bubbles: !0, cancelable: !0 })) } copy() { navigator.clipboard.writeText(this.getAttribute("value")).then(t => this.fireEvent()).catch(t => console.error(t)) } connectedCallback() { this.copyButton.addEventListener("click", this.copy) } attributeChangedCallback(t, n, o) { "value" === t && 0 === this.copyContent.querySelector("slot").assignedNodes().length && (this.copyContent.textContent = o) } disconnectedCallback() { this.copyButton.removeEventListener("click", this.copy) } });
+const smForm = document.createElement("template"); smForm.innerHTML = ' ', customElements.define("sm-form", class extends HTMLElement { constructor() { super(), this.attachShadow({ mode: "open" }).append(smForm.content.cloneNode(!0)), this.form = this.shadowRoot.querySelector("form"), this.invalidFieldsCount, this.skipSubmit = !1, this.isFormValid = void 0, this.supportedElements = "input, sm-input, sm-textarea, sm-checkbox, tags-input, file-input, sm-switch, sm-radio", this.formElements = [], this._requiredElements = [], this.debounce = this.debounce.bind(this), this._checkValidity = this._checkValidity.bind(this), this.handleKeydown = this.handleKeydown.bind(this), this.reset = this.reset.bind(this), this.elementsChanged = this.elementsChanged.bind(this) } static get observedAttributes() { return ["skip-submit"] } get validity() { return this.isFormValid } debounce(e, t) { let i = null; return (...s) => { window.clearTimeout(i), i = window.setTimeout((() => { e.apply(null, s) }), t) } } _checkValidity() { this.submitButton && 0 !== this._requiredElements.length && (this.invalidFieldsCount = 0, this._requiredElements.forEach((([e, t]) => { (!e.disabled && t && !e.isValid || !t && !e.checkValidity()) && this.invalidFieldsCount++ })), this.isFormValid !== (0 === this.invalidFieldsCount) && (this.isFormValid = 0 === this.invalidFieldsCount, this.dispatchEvent(new CustomEvent(this.isFormValid ? "valid" : "invalid", { bubbles: !0, composed: !0 })), this.skipSubmit || (this.submitButton.disabled = !this.isFormValid))) } handleKeydown(e) { if ("Enter" === e.key && e.target.tagName.includes("INPUT")) if (0 === this.invalidFieldsCount) this.submitButton && this.submitButton.click(), this.dispatchEvent(new CustomEvent("submit", { bubbles: !0, composed: !0 })); else for (const [e, t] of this._requiredElements) { if (t ? !e.isValid : !e.checkValidity()) { (e?.shadowRoot?.lastElementChild || e).animate([{ transform: "translateX(-1rem)" }, { transform: "translateX(1rem)" }, { transform: "translateX(-0.5rem)" }, { transform: "translateX(0.5rem)" }, { transform: "translateX(0)" }], { duration: 300, easing: "ease" }), t ? e.focusIn() : e.focus(); break } } } reset() { this.formElements.forEach((([e, t]) => { if (t) e.reset(); else switch (e.type) { case "checkbox": case "radio": e.checked = !1; break; default: e.value = "" } })), this._checkValidity() } elementsChanged() { this.formElements = [...this.querySelectorAll(this.supportedElements)].map((e => [e, e.tagName.includes("-")])), this._requiredElements = this.formElements.filter((([e]) => e.hasAttribute("required"))), this.submitButton = this.querySelector('[variant="primary"], [type="submit"]'), this.resetButton = this.querySelector('[type="reset"]'), this.resetButton && this.resetButton.addEventListener("click", this.reset), this._checkValidity() } connectedCallback() { const e = this.debounce(this.elementsChanged, 100); this.addEventListener("input", this.debounce(this._checkValidity, 100)), this.addEventListener("keydown", this.debounce(this.handleKeydown, 100)), this.shadowRoot.querySelector("slot").addEventListener("slotchange", e), this.mutationObserver = new MutationObserver((t => { t.forEach((t => { ("childList" === t.type && [...t.addedNodes].some((e => 1 === e.nodeType && e.querySelector(this.supportedElements))) || [...t.removedNodes].some((e => 1 === e.nodeType && e.querySelector(this.supportedElements)))) && e() })) })), this.mutationObserver.observe(this, { childList: !0, subtree: !0 }) } attributeChangedCallback(e, t, i) { "skip-submit" === e && (this.skipSubmit = null !== i) } disconnectedCallback() { this.removeEventListener("input", this.debounce(this._checkValidity, 100)), this.removeEventListener("keydown", this.debounce(this.handleKeydown, 100)), this.mutationObserver.disconnect() } });
+const smInput = document.createElement("template"); smInput.innerHTML = ' ', customElements.define("sm-input", class extends HTMLElement { constructor() { super(), this.attachShadow({ mode: "open" }).append(smInput.content.cloneNode(!0)), this.inputParent = this.shadowRoot.querySelector(".input"), this.input = this.shadowRoot.querySelector("input"), this.clearBtn = this.shadowRoot.querySelector(".clear"), this.label = this.shadowRoot.querySelector(".label"), this.feedbackText = this.shadowRoot.querySelector(".feedback-text"), this.outerContainer = this.shadowRoot.querySelector(".outer-container"), this.optionList = this.shadowRoot.querySelector(".datalist"), this._helperText = "", this._errorText = "", this.isRequired = !1, this.datalist = [], this.validationFunction = void 0, this.reflectedAttributes = ["value", "required", "disabled", "type", "inputmode", "readonly", "min", "max", "pattern", "minlength", "maxlength", "step", "list", "autocomplete"], this.reset = this.reset.bind(this), this.clear = this.clear.bind(this), this.focusIn = this.focusIn.bind(this), this.focusOut = this.focusOut.bind(this), this.fireEvent = this.fireEvent.bind(this), this.checkInput = this.checkInput.bind(this), this.showError = this.showError.bind(this), this.allowOnlyNum = this.allowOnlyNum.bind(this), this.handleOptionClick = this.handleOptionClick.bind(this), this.handleInputNavigation = this.handleInputNavigation.bind(this), this.handleDatalistNavigation = this.handleDatalistNavigation.bind(this), this.handleFocus = this.handleFocus.bind(this), this.handleBlur = this.handleBlur.bind(this) } static get observedAttributes() { return ["value", "placeholder", "required", "disabled", "type", "inputmode", "readonly", "min", "max", "pattern", "minlength", "maxlength", "step", "helper-text", "error-text", "list"] } get value() { return this.input.value } set value(t) { t !== this.input.value && (this.input.value = t, this.checkInput()) } get placeholder() { return this.getAttribute("placeholder") } set placeholder(t) { this.setAttribute("placeholder", t) } get type() { return this.getAttribute("type") } set type(t) { this.setAttribute("type", t) } get validity() { return this.input.validity } get disabled() { return this.hasAttribute("disabled") } set disabled(t) { t ? (this.inputParent.classList.add("disabled"), this.setAttribute("disabled", "")) : (this.inputParent.classList.remove("disabled"), this.removeAttribute("disabled")) } get readOnly() { return this.hasAttribute("readonly") } set readOnly(t) { t ? this.setAttribute("readonly", "") : this.removeAttribute("readonly") } set customValidation(t) { this.validationFunction = t } set errorText(t) { this._errorText = t } showError() { this.feedbackText.className = "feedback-text error", this.feedbackText.innerHTML = ` ${this._errorText}` } set helperText(t) { this._helperText = t } get isValid() { if ("" !== this.input.value) { const t = this.input.checkValidity(); let e = !0; return this.validationFunction && (e = Boolean(this.validationFunction(this.input.value))), t && e ? (this.feedbackText.className = "feedback-text success", this.feedbackText.textContent = "") : this._errorText && this.showError(), t && e } } reset() { this.value = "" } clear() { this.value = "", this.input.focus(), this.fireEvent() } focusIn() { this.input.focus() } focusOut() { this.input.blur() } fireEvent() { let t = new Event("input", { bubbles: !0, cancelable: !0, composed: !0 }); this.dispatchEvent(t) } searchDatalist(t) { const e = this.datalist.filter(e => e.toLowerCase().includes(t.toLowerCase())); if (e.sort((e, n) => { const i = e.toLowerCase().indexOf(t.toLowerCase()), s = n.toLowerCase().indexOf(t.toLowerCase()); return i - s }), e.length) { if (this.optionList.children.length > e.length) { const t = this.optionList.children.length - e.length; for (let e = 0; e < t; e++)this.optionList.removeChild(this.optionList.lastChild) } e.forEach((t, e) => { if (this.optionList.children[e]) this.optionList.children[e].textContent = t; else { const e = document.createElement("li"); e.textContent = t, e.classList.add("datalist-item"), e.setAttribute("tabindex", "0"), this.optionList.appendChild(e) } }), this.optionList.classList.remove("hidden") } else this.optionList.classList.add("hidden") } checkInput(t) { this.hasAttribute("readonly") || ("" !== this.input.value ? this.clearBtn.classList.remove("hidden") : this.clearBtn.classList.add("hidden")), this.hasAttribute("placeholder") && "" !== this.getAttribute("placeholder").trim() && ("" !== this.input.value ? (this.animate ? this.inputParent.classList.add("animate-placeholder") : this.label.classList.add("hidden"), this.datalist.length && (this.searchTimeout && clearTimeout(this.searchTimeout), this.searchTimeout = setTimeout(() => { this.searchDatalist(this.input.value.trim()) }, 100))) : (this.animate ? this.inputParent.classList.remove("animate-placeholder") : this.label.classList.remove("hidden"), this.feedbackText.textContent = "", this.datalist.length && (this.optionList.innerHTML = "", this.optionList.classList.add("hidden")))) } allowOnlyNum(t) { 1 === t.key.length && (("." !== t.key || !t.target.value.includes(".") && 0 !== t.target.value.length) && ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "."].includes(t.key) || t.preventDefault()) } handleOptionClick(t) { this.input.value = t.target.textContent, this.optionList.classList.add("hidden"), this.input.focus() } handleInputNavigation(t) { "ArrowDown" === t.key ? (t.preventDefault(), this.optionList.children.length && this.optionList.children[0].focus()) : "ArrowUp" === t.key && (t.preventDefault(), this.optionList.children.length && this.optionList.children[this.optionList.children.length - 1].focus()) } handleDatalistNavigation(t) { "ArrowUp" === t.key ? (t.preventDefault(), this.shadowRoot.activeElement.previousElementSibling ? this.shadowRoot.activeElement.previousElementSibling.focus() : this.input.focus()) : "ArrowDown" === t.key ? (t.preventDefault(), this.shadowRoot.activeElement.nextElementSibling ? this.shadowRoot.activeElement.nextElementSibling.focus() : this.input.focus()) : "Enter" !== t.key && " " !== t.key || (t.preventDefault(), this.input.value = t.target.textContent, this.optionList.classList.add("hidden"), this.input.focus()) } handleFocus(t) { this.datalist.length && this.searchDatalist(this.input.value.trim()) } handleBlur(t) { this.datalist.length && this.optionList.classList.add("hidden") } connectedCallback() { this.animate = this.hasAttribute("animate"), this.setAttribute("role", "textbox"), this.input.addEventListener("input", this.checkInput), this.clearBtn.addEventListener("click", this.clear), this.datalist.length && (this.optionList.addEventListener("click", this.handleOptionClick), this.input.addEventListener("keydown", this.handleInputNavigation), this.optionList.addEventListener("keydown", this.handleDatalistNavigation)), this.input.addEventListener("focusin", this.handleFocus), this.addEventListener("focusout", this.handleBlur) } attributeChangedCallback(t, e, n) { if (e !== n) switch (this.reflectedAttributes.includes(t) && (this.hasAttribute(t) ? this.input.setAttribute(t, this.getAttribute(t) ? this.getAttribute(t) : "") : this.input.removeAttribute(t)), t) { case "placeholder": this.label.textContent = n, this.setAttribute("aria-label", n); break; case "value": this.checkInput(); break; case "type": this.hasAttribute("type") && "number" === this.getAttribute("type") ? (this.input.setAttribute("inputmode", "decimal"), this.input.addEventListener("keydown", this.allowOnlyNum)) : this.input.removeEventListener("keydown", this.allowOnlyNum); break; case "helper-text": this._helperText = n; break; case "error-text": this._errorText = n; break; case "required": this.isRequired = this.hasAttribute("required"), this.isRequired ? this.setAttribute("aria-required", "true") : this.setAttribute("aria-required", "false"); break; case "readonly": this.hasAttribute("readonly") ? this.inputParent.classList.add("readonly") : this.inputParent.classList.remove("readonly"); break; case "disabled": this.hasAttribute("disabled") ? this.inputParent.classList.add("disabled") : this.inputParent.classList.remove("disabled"); break; case "list": this.hasAttribute("list") && "" !== this.getAttribute("list").trim() && (this.datalist = this.getAttribute("list").split(",")) } } disconnectedCallback() { this.input.removeEventListener("input", this.checkInput), this.clearBtn.removeEventListener("click", this.clear), this.input.removeEventListener("keydown", this.allowOnlyNum), this.optionList.removeEventListener("click", this.handleOptionClick), this.input.removeEventListener("keydown", this.handleInputNavigation), this.optionList.removeEventListener("keydown", this.handleDatalistNavigation), this.input.removeEventListener("focusin", this.handleFocus), this.removeEventListener("focusout", this.handleBlur) } });
+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(!0)), this.notificationPanel = this.shadowRoot.querySelector(".notification-panel"), this.animationOptions = { duration: 300, fill: "forwards", easing: "cubic-bezier(0.175, 0.885, 0.32, 1.275)" }, this.push = this.push.bind(this), this.createNotification = this.createNotification.bind(this), this.removeNotification = this.removeNotification.bind(this), this.clearAll = this.clearAll.bind(this), this.remove = this.remove.bind(this), this.handlePointerMove = this.handlePointerMove.bind(this), this.startX = 0, this.currentX = 0, this.endX = 0, this.swipeDistance = 0, this.swipeDirection = "", this.swipeThreshold = 0, this.startTime = 0, this.swipeTime = 0, this.swipeTimeThreshold = 200, this.currentTarget = null, this.mediaQuery = window.matchMedia("(min-width: 640px)"), this.handleOrientationChange = this.handleOrientationChange.bind(this), this.isLandscape = !1 } randString(n) { let t = ""; const e = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz"; for (let i = 0; i < n; i++)t += e.charAt(Math.floor(Math.random() * e.length)); return t } createNotification(n, t = {}) { const { pinned: e = !1, icon: i = "", action: o } = t, r = document.createElement("div"); r.id = this.randString(8), r.className = `notification ${e ? "pinned" : ""}`; const a = document.createElement("div"); a.className = "icon-container", a.innerHTML = i; const s = document.createElement("output"); if (s.textContent = n, r.append(a, s), o) { const n = document.createElement("button"); n.className = "action", n.innerText = o.label, n.addEventListener("click", o.callback) } if (e) { const n = document.createElement("button"); n.className = "close", n.innerHTML = ' ', n.addEventListener("click", () => { this.remove(r.id) }), r.append(n) } return r } push(n, t = {}) { const e = this.createNotification(n, t); return this.isLandscape ? this.notificationPanel.append(e) : this.notificationPanel.prepend(e), this.notificationPanel.animate([{ transform: `translateY(${this.isLandscape ? "" : "-"}${e.clientHeight}px)` }, { transform: "none" }], this.animationOptions), e.animate([{ transform: "translateY(-1rem)", opacity: "0" }, { transform: "none", opacity: "1" }], this.animationOptions).onfinish = (n => { n.target.commitStyles(), n.target.cancel() }), e.querySelector(".action") && e.querySelector(".action").addEventListener("click", t.action.callback), e.id } removeNotification(n, t = "left") { if (!n) return; const e = "left" === t ? "-" : "+"; n.animate([{ transform: this.currentX ? `translateX(${this.currentX}px)` : "none", opacity: "1" }, { transform: `translateX(calc(${e}${Math.abs(this.currentX)}px ${e} 1rem))`, opacity: "0" }], this.animationOptions).onfinish = (() => { n.remove() }) } remove(n) { const t = this.notificationPanel.querySelector(`#${n}`); t && this.removeNotification(t) } clearAll() { Array.from(this.notificationPanel.children).forEach(n => { this.removeNotification(n) }) } handlePointerMove(n) { this.currentX = n.clientX - this.startX, this.currentTarget.style.transform = `translateX(${this.currentX}px)` } handleOrientationChange(n) { this.isLandscape = n.matches, n.matches } connectedCallback() { this.handleOrientationChange(this.mediaQuery), this.mediaQuery.addEventListener("change", this.handleOrientationChange), this.notificationPanel.addEventListener("pointerdown", n => { n.target.closest(".close") ? this.removeNotification(n.target.closest(".notification")) : n.target.closest(".notification") && (this.swipeThreshold = n.target.closest(".notification").getBoundingClientRect().width / 2, this.currentTarget = n.target.closest(".notification"), this.currentTarget.setPointerCapture(n.pointerId), this.startTime = Date.now(), this.startX = n.clientX, this.startY = n.clientY, this.notificationPanel.addEventListener("pointermove", this.handlePointerMove)) }), this.notificationPanel.addEventListener("pointerup", n => { this.endX = n.clientX, this.endY = n.clientY, this.swipeDistance = Math.abs(this.endX - this.startX), this.swipeTime = Date.now() - this.startTime, this.endX > this.startX ? this.swipeDirection = "right" : this.swipeDirection = "left", this.swipeTime < this.swipeTimeThreshold ? this.swipeDistance > 50 && this.removeNotification(this.currentTarget, this.swipeDirection) : this.swipeDistance > this.swipeThreshold ? this.removeNotification(this.currentTarget, this.swipeDirection) : this.currentTarget.animate([{ transform: `translateX(${this.currentX}px)` }, { transform: "none" }], this.animationOptions).onfinish = (n => { n.target.commitStyles(), n.target.cancel() }), this.notificationPanel.removeEventListener("pointermove", this.handlePointerMove), this.notificationPanel.releasePointerCapture(n.pointerId), this.currentX = 0 }); const n = new MutationObserver(n => { n.forEach(n => { "childList" === n.type && n.addedNodes.length && !n.addedNodes[0].classList.contains("pinned") && setTimeout(() => { this.removeNotification(n.addedNodes[0]) }, 5e3) }) }); n.observe(this.notificationPanel, { childList: !0 }) } disconnectedCallback() { mediaQueryList.removeEventListener("change", handleOrientationChange) } });
+class Stack { constructor() { this.items = [] } push(t) { this.items.push(t) } pop() { return 0 == this.items.length ? "Underflow" : this.items.pop() } peek() { return this.items[this.items.length - 1] } } const popupStack = new Stack, smPopup = document.createElement("template"); smPopup.innerHTML = ` `, customElements.define("sm-popup", class extends HTMLElement { constructor() { super(), this.attachShadow({ mode: "open" }).append(smPopup.content.cloneNode(!0)), this.allowClosing = !1, this.isOpen = !1, this.offset = 0, this.touchStartY = 0, this.touchEndY = 0, this.touchStartTime = 0, this.touchEndTime = 0, this.touchEndAnimation = void 0, this.focusable, this.autoFocus, this.mutationObserver, this.popupContainer = this.shadowRoot.querySelector(".popup-container"), this.backdrop = this.shadowRoot.querySelector(".backdrop"), this.dialogBox = this.shadowRoot.querySelector(".popup"), this.popupBodySlot = this.shadowRoot.querySelector(".popup-body slot"), this.popupHeader = this.shadowRoot.querySelector(".popup-top"), this.resumeScrolling = this.resumeScrolling.bind(this), this.setStateOpen = this.setStateOpen.bind(this), this.show = this.show.bind(this), this.hide = this.hide.bind(this), this.handleTouchStart = this.handleTouchStart.bind(this), this.handleTouchMove = this.handleTouchMove.bind(this), this.handleTouchEnd = this.handleTouchEnd.bind(this), this.detectFocus = this.detectFocus.bind(this), this.handleSoftDismiss = this.handleSoftDismiss.bind(this), this.debounce = this.debounce.bind(this) } static get observedAttributes() { return ["open"] } get open() { return this.isOpen } animateTo(t, e, i) { let s = t.animate(e, { ...i, fill: "both" }); return s.finished.then(() => { s.commitStyles(), s.cancel() }), s } resumeScrolling() { let t = document.body.style.top; window.scrollTo(0, -1 * parseInt(t || "0")), document.body.style.overflow = "", document.body.style.top = "initial" } setStateOpen() { if (!this.isOpen || this.offset) { let t = window.innerWidth > 640 ? "scale(1.1)" : `translateY(${this.offset ? `${this.offset}px` : "100%"})`; this.animateTo(this.dialogBox, [{ opacity: this.offset ? 1 : 0, transform: t }, { opacity: 1, transform: "none" },], { duration: 300, easing: "ease" }) } } show(t = {}) { let { pinned: e = !1, payload: i } = t; if (this.isOpen) return; let s = { duration: 300, easing: "ease" }; return this.payload = i, popupStack.push({ popup: this, permission: e }), popupStack.items.length > 1 && this.animateTo(popupStack.items[popupStack.items.length - 2].popup.shadowRoot.querySelector(".popup"), [{ transform: "none" }, { transform: window.innerWidth > 640 ? "scale(0.95)" : "translateY(-1.5rem)" },], s), this.popupContainer.classList.remove("hide"), this.offset || (this.backdrop.animate([{ opacity: 0 }, { opacity: 1 },], s).onfinish = () => { this.resolveOpen(this.payload) }, this.dispatchEvent(new CustomEvent("popupopened", { bubbles: !0, composed: !0, detail: { payload: this.payload } })), document.body.style.overflow = "hidden", document.body.style.top = `-${window.scrollY}px`), this.setStateOpen(), this.pinned = e, this.isOpen = !0, setTimeout(() => { let t = this.autoFocus || this.focusable?.[0] || this.dialogBox; t && (t.tagName.includes("-") ? t.focusIn() : t.focus()) }, 0), this.hasAttribute("open") || (this.setAttribute("open", ""), this.addEventListener("keydown", this.detectFocus), this.resizeObserver.observe(this), this.mutationObserver.observe(this, { attributes: !0, childList: !0, subtree: !0 }), this.popupHeader.addEventListener("touchstart", this.handleTouchStart, { passive: !0 }), this.backdrop.addEventListener("mousedown", this.handleSoftDismiss)), { opened: new Promise(t => { this.resolveOpen = t }), closed: new Promise(t => { this.resolveClose = t }) } } hide(t = {}) { let { payload: e } = t, i = { duration: 150, easing: "ease" }; this.backdrop.animate([{ opacity: 1 }, { opacity: 0 }], i), this.animateTo(this.dialogBox, [{ opacity: 1, transform: window.innerWidth > 640 ? "none" : `translateY(${this.offset ? `${this.offset}px` : "0"})` }, { opacity: 0, transform: window.innerWidth > 640 ? "scale(1.1)" : "translateY(100%)" },], i).finished.finally(() => { this.popupContainer.classList.add("hide"), this.dialogBox.style = "", this.removeAttribute("open"), this.forms.length && this.forms.forEach(t => t.reset()), this.dispatchEvent(new CustomEvent("popupclosed", { bubbles: !0, composed: !0, detail: { payload: e || this.payload } })), this.resolveClose(e || this.payload), this.isOpen = !1 }), popupStack.pop(), popupStack.items.length ? this.animateTo(popupStack.items[popupStack.items.length - 1].popup.shadowRoot.querySelector(".popup"), [{ transform: window.innerWidth > 640 ? "scale(0.95)" : "translateY(-1.5rem)" }, { transform: "none" },], i) : this.resumeScrolling(), this.resizeObserver.disconnect(), this.mutationObserver.disconnect(), this.removeEventListener("keydown", this.detectFocus), this.popupHeader.removeEventListener("touchstart", this.handleTouchStart, { passive: !0 }), this.backdrop.removeEventListener("mousedown", this.handleSoftDismiss) } handleTouchStart(t) { this.offset = 0, this.popupHeader.addEventListener("touchmove", this.handleTouchMove, { passive: !0 }), this.popupHeader.addEventListener("touchend", this.handleTouchEnd, { passive: !0 }), this.touchStartY = t.changedTouches[0].clientY, this.touchStartTime = t.timeStamp } handleTouchMove(t) { this.touchStartY < t.changedTouches[0].clientY && (this.offset = t.changedTouches[0].clientY - this.touchStartY, this.touchEndAnimation = window.requestAnimationFrame(() => { this.dialogBox.style.transform = `translateY(${this.offset}px)` })) } handleTouchEnd(t) { if (this.touchEndTime = t.timeStamp, cancelAnimationFrame(this.touchEndAnimation), this.touchEndY = t.changedTouches[0].clientY, this.threshold = .3 * this.dialogBox.getBoundingClientRect().height, this.touchEndTime - this.touchStartTime > 200) { if (this.touchEndY - this.touchStartY > this.threshold) { if (this.pinned) { this.setStateOpen(); return } this.hide() } else this.setStateOpen() } else if (this.touchEndY > this.touchStartY) { if (this.pinned) { this.setStateOpen(); return } this.hide() } this.popupHeader.removeEventListener("touchmove", this.handleTouchMove, { passive: !0 }), this.popupHeader.removeEventListener("touchend", this.handleTouchEnd, { passive: !0 }) } detectFocus(t) { if ("Tab" === t.key && this.focusable.length) { if (!this.firstFocusable) { for (let e = 0; e < this.focusable.length; e++)if (!this.focusable[e].disabled) { this.firstFocusable = this.focusable[e]; break } } if (!this.lastFocusable) { for (let i = this.focusable.length - 1; i >= 0; i--)if (!this.focusable[i].disabled) { this.lastFocusable = this.focusable[i]; break } } t.shiftKey && document.activeElement === this.firstFocusable ? (t.preventDefault(), this.lastFocusable.tagName.includes("SM-") ? this.lastFocusable.focusIn() : this.lastFocusable.focus()) : t.shiftKey || document.activeElement !== this.lastFocusable || (t.preventDefault(), this.firstFocusable.tagName.includes("SM-") ? this.firstFocusable.focusIn() : this.firstFocusable.focus()) } } updateFocusableList() { this.focusable = this.querySelectorAll('sm-button:not([disabled]), button:not([disabled]), [href], sm-input, input:not([readonly]), sm-select, select, sm-checkbox, sm-textarea, textarea, [tabindex]:not([tabindex="-1"])'), this.autoFocus = this.querySelector("[autofocus]"), this.firstFocusable = null, this.lastFocusable = null } handleSoftDismiss() { this.pinned ? this.dialogBox.animate([{ transform: "translateX(-1rem)" }, { transform: "translateX(1rem)" }, { transform: "translateX(-0.5rem)" }, { transform: "translateX(0.5rem)" }, { transform: "translateX(0)" },], { duration: 300, easing: "ease" }) : this.hide() } debounce(t, e) { let i = null; return (...s) => { window.clearTimeout(i), i = window.setTimeout(() => { t.apply(null, s) }, e) } } connectedCallback() { this.popupBodySlot.addEventListener("slotchange", this.debounce(() => { this.forms = this.querySelectorAll("sm-form"), this.updateFocusableList() }, 0)), this.resizeObserver = new ResizeObserver(t => { t.forEach(t => { if (t.contentBoxSize) { let e = Array.isArray(t.contentBoxSize) ? t.contentBoxSize[0] : t.contentBoxSize; this.threshold = .3 * e.blockSize.height } else this.threshold = .3 * t.contentRect.height }) }), this.mutationObserver = new MutationObserver(t => { this.updateFocusableList() }) } disconnectedCallback() { this.resizeObserver.disconnect(), this.mutationObserver.disconnect(), this.removeEventListener("keydown", this.detectFocus), this.popupHeader.removeEventListener("touchstart", this.handleTouchStart, { passive: !0 }), this.backdrop.removeEventListener("mousedown", this.handleSoftDismiss) } attributeChangedCallback(t) { "open" === t && this.hasAttribute("open") && this.show() } });
+const smSwitch = document.createElement("template"); smSwitch.innerHTML = '\t ', customElements.define("sm-switch", class extends HTMLElement { constructor() { super(), this.attachShadow({ mode: "open" }).append(smSwitch.content.cloneNode(!0)), this.switch = this.shadowRoot.querySelector(".switch"), this.input = this.shadowRoot.querySelector("input"), this.isChecked = !1, this.isDisabled = !1, this.dispatch = this.dispatch.bind(this) } static get observedAttributes() { return ["disabled", "checked"] } get disabled() { return this.isDisabled } set disabled(e) { e ? this.setAttribute("disabled", "") : this.removeAttribute("disabled") } get checked() { return this.isChecked } set checked(e) { e ? this.setAttribute("checked", "") : this.removeAttribute("checked") } get value() { return this.isChecked } reset() { } dispatch() { this.dispatchEvent(new CustomEvent("change", { bubbles: !0, composed: !0, detail: { value: this.isChecked } })) } connectedCallback() { this.addEventListener("keydown", e => { " " !== e.key || this.isDisabled || (e.preventDefault(), this.input.click()) }), this.input.addEventListener("click", e => { this.input.checked ? this.checked = !0 : this.checked = !1, this.dispatch() }) } attributeChangedCallback(e, t, n) { t !== n && ("disabled" === e ? this.hasAttribute("disabled") ? this.disabled = !0 : this.disabled = !1 : "checked" === e && (this.hasAttribute("checked") ? (this.isChecked = !0, this.input.checked = !0) : (this.isChecked = !1, this.input.checked = !1))) } });
+const smSelect = document.createElement("template"); smSelect.innerHTML = '', customElements.define("sm-select", class extends HTMLElement { constructor() { super(), this.attachShadow({ mode: "open" }).append(smSelect.content.cloneNode(!0)), this.focusIn = this.focusIn.bind(this), this.reset = this.reset.bind(this), this.open = this.open.bind(this), this.collapse = this.collapse.bind(this), this.toggle = this.toggle.bind(this), this.handleOptionsNavigation = this.handleOptionsNavigation.bind(this), this.handleOptionSelection = this.handleOptionSelection.bind(this), this.handleKeydown = this.handleKeydown.bind(this), this.handleClickOutside = this.handleClickOutside.bind(this), this.selectOption = this.selectOption.bind(this), this.debounce = this.debounce.bind(this), this.elementsChanged = this.elementsChanged.bind(this), this.availableOptions = [], this.previousOption, this.isOpen = !1, this.label = "", this.defaultSelected = "", this.isUnderViewport = !1, this.animationOptions = { duration: 300, fill: "forwards", easing: "ease" }, this.optionList = this.shadowRoot.querySelector(".options"), this.selection = this.shadowRoot.querySelector(".selection"), this.selectedOptionText = this.shadowRoot.querySelector(".selected-option-text") } static get observedAttributes() { return ["disabled", "label", "readonly"] } get value() { return this.getAttribute("value") } set value(t) { const e = this.availableOptions.find(e => e.getAttribute("value") === t); e ? (this.setAttribute("value", t), this.selectOption(e)) : console.warn(`There is no option with ${t} as value`) } debounce(t, e) { let n = null; return (...i) => { window.clearTimeout(n), n = window.setTimeout(() => { t.apply(null, i) }, e) } } reset(t = !0) { if (this.availableOptions[0] && this.previousOption !== this.availableOptions[0]) { const e = this.availableOptions.find(t => t.hasAttribute("selected")) || this.availableOptions[0]; this.value = e.getAttribute("value"), t && this.fireEvent() } } selectOption(t) { this.previousOption !== t && (this.querySelectorAll("[selected]").forEach(t => t.removeAttribute("selected")), this.selectedOptionText.textContent = `${this.label}${t.textContent}`, t.setAttribute("selected", ""), this.previousOption = t) } focusIn() { this.selection.focus() } open() { this.availableOptions.forEach(t => t.setAttribute("tabindex", 0)), this.optionList.classList.remove("hidden"), this.isUnderViewport = this.getBoundingClientRect().bottom + this.optionList.getBoundingClientRect().height > window.innerHeight, this.isUnderViewport ? this.setAttribute("isUnder", "") : this.removeAttribute("isUnder"), this.optionList.animate([{ transform: `translateY(${this.isUnderViewport ? "" : "-"}0.5rem)`, opacity: 0 }, { transform: "translateY(0)", opacity: 1 }], this.animationOptions), this.setAttribute("open", ""), this.style.zIndex = 1e3, (this.availableOptions.find(t => t.hasAttribute("selected")) || this.availableOptions[0]).focus(), document.addEventListener("mousedown", this.handleClickOutside), this.isOpen = !0 } collapse() { this.removeAttribute("open"), this.optionList.animate([{ transform: "translateY(0)", opacity: 1 }, { transform: `translateY(${this.isUnderViewport ? "" : "-"}0.5rem)`, opacity: 0 }], this.animationOptions).onfinish = (() => { this.availableOptions.forEach(t => t.removeAttribute("tabindex")), document.removeEventListener("mousedown", this.handleClickOutside), this.optionList.classList.add("hidden"), this.isOpen = !1, this.style.zIndex = "auto" }) } toggle() { this.isOpen || this.hasAttribute("disabled") ? this.collapse() : this.open() } fireEvent() { this.dispatchEvent(new CustomEvent("change", { bubbles: !0, composed: !0, detail: { value: this.value } })) } handleOptionsNavigation(t) { "ArrowUp" === t.key ? (t.preventDefault(), document.activeElement.previousElementSibling ? document.activeElement.previousElementSibling.focus() : this.availableOptions[this.availableOptions.length - 1].focus()) : "ArrowDown" === t.key && (t.preventDefault(), document.activeElement.nextElementSibling ? document.activeElement.nextElementSibling.focus() : this.availableOptions[0].focus()) } handleOptionSelection(t) { this.previousOption !== document.activeElement && (this.value = document.activeElement.getAttribute("value"), this.fireEvent()) } handleClick(t) { t.target === this ? this.toggle() : (this.handleOptionSelection(), this.collapse()) } handleKeydown(t) { t.target === this ? this.isOpen && "ArrowDown" === t.key ? (t.preventDefault(), (this.availableOptions.find(t => t.hasAttribute("selected")) || this.availableOptions[0]).focus(), this.handleOptionSelection(t)) : " " === t.key && (t.preventDefault(), this.toggle()) : (this.handleOptionsNavigation(t), this.handleOptionSelection(t), ["Enter", " ", "Escape", "Tab"].includes(t.key) && (t.preventDefault(), this.collapse(), this.focusIn())) } handleClickOutside(t) { this.isOpen && !this.contains(t.target) && this.collapse() } elementsChanged() { this.availableOptions = [...this.querySelectorAll("sm-option")], this.reset(!1), this.defaultSelected = this.value } connectedCallback() { this.setAttribute("role", "listbox"), this.hasAttribute("disabled") || this.hasAttribute("readonly") || (this.selection.setAttribute("tabindex", "0"), this.addEventListener("click", this.handleClick), this.addEventListener("keydown", this.handleKeydown)); const t = this.debounce(this.elementsChanged, 100); this.shadowRoot.querySelector("slot").addEventListener("slotchange", t), this.mutationObserver = new MutationObserver(e => { let n = !1; if (e.forEach(e => { switch (e.type) { case "childList": t(); break; case "attributes": n = !0 } }), n) { const t = this.availableOptions.find(t => t.hasAttribute("selected")) || this.availableOptions[0]; this.selectedOptionText.textContent = `${this.label}${t.textContent}`, this.setAttribute("value", t.getAttribute("value")) } }), this.mutationObserver.observe(this, { subtree: !0, childList: !0, attributeFilter: ["selected"] }), new IntersectionObserver((t, e) => { t.forEach(t => { if (t.isIntersecting) { const t = this.selection.getBoundingClientRect().left; t < window.innerWidth / 2 ? this.setAttribute("align-select", "left") : this.setAttribute("align-select", "right") } }) }).observe(this) } disconnectedCallback() { this.removeEventListener("click", this.handleClick), this.removeEventListener("keydown", this.handleKeydown) } attributeChangedCallback(t) { "disabled" === t || "readonly" === t ? this.hasAttribute("disabled") || this.hasAttribute("readonly") ? (this.selection.removeAttribute("tabindex"), this.removeEventListener("click", this.handleClick), this.removeEventListener("keydown", this.handleKeydown)) : (this.selection.setAttribute("tabindex", "0"), this.addEventListener("click", this.handleClick), this.addEventListener("keydown", this.handleKeydown)) : "label" === t && (this.label = this.hasAttribute("label") ? `${this.getAttribute("label")} ` : "") } }); const smOption = document.createElement("template"); smOption.innerHTML = '
', customElements.define("sm-option", class extends HTMLElement { constructor() { super(), this.attachShadow({ mode: "open" }).append(smOption.content.cloneNode(!0)) } connectedCallback() { this.setAttribute("role", "option") } });
+const spinner = document.createElement("template"); spinner.innerHTML = ' '; class SpinnerLoader extends HTMLElement { constructor() { super(), this.attachShadow({ mode: "open" }).append(spinner.content.cloneNode(!0)) } } window.customElements.define("sm-spinner", SpinnerLoader);
+const smTextarea = document.createElement("template"); smTextarea.innerHTML = ' ', customElements.define("sm-textarea", class extends HTMLElement { constructor() { super(), this.attachShadow({ mode: "open" }).append(smTextarea.content.cloneNode(!0)), this.textarea = this.shadowRoot.querySelector("textarea"), this.textareaBox = this.shadowRoot.querySelector(".textarea"), this.placeholder = this.shadowRoot.querySelector(".placeholder"), this.reflectedAttributes = ["disabled", "required", "readonly", "rows", "minlength", "maxlength"], this.reset = this.reset.bind(this), this.focusIn = this.focusIn.bind(this), this.fireEvent = this.fireEvent.bind(this), this.checkInput = this.checkInput.bind(this) } static get observedAttributes() { return ["disabled", "value", "placeholder", "required", "readonly", "rows", "minlength", "maxlength"] } get value() { return this.textarea.value } set value(e) { this.setAttribute("value", e), this.fireEvent() } get disabled() { return this.hasAttribute("disabled") } set disabled(e) { e ? this.setAttribute("disabled", "") : this.removeAttribute("disabled") } get isValid() { return this.textarea.checkValidity() } reset() { this.setAttribute("value", "") } focusIn() { this.textarea.focus() } fireEvent() { let e = new Event("input", { bubbles: !0, cancelable: !0, composed: !0 }); this.dispatchEvent(e) } checkInput() { this.hasAttribute("placeholder") && "" !== this.getAttribute("placeholder") && ("" !== this.textarea.value ? this.placeholder.classList.add("hide") : this.placeholder.classList.remove("hide")) } connectedCallback() { this.textarea.addEventListener("input", e => { this.textareaBox.dataset.value = this.textarea.value, this.checkInput() }) } attributeChangedCallback(e, t, n) { this.reflectedAttributes.includes(e) ? this.hasAttribute(e) ? this.textarea.setAttribute(e, this.getAttribute(e) ? this.getAttribute(e) : "") : this.textContent.removeAttribute(e) : "placeholder" === e ? this.placeholder.textContent = this.getAttribute("placeholder") : "value" === e && (this.textarea.value = n, this.textareaBox.dataset.value = n, this.checkInput()) } });
+const themeToggle = document.createElement("template"); themeToggle.innerHTML = ' '; class ThemeToggle extends HTMLElement { constructor() { super(), this.attachShadow({ mode: "open" }).append(themeToggle.content.cloneNode(!0)), this.isChecked = !1, this.hasTheme = "light", this.toggleState = this.toggleState.bind(this), this.fireEvent = this.fireEvent.bind(this), this.handleThemeChange = this.handleThemeChange.bind(this) } static get observedAttributes() { return ["checked"] } daylight() { this.hasTheme = "light", document.body.dataset.theme = "light", this.setAttribute("aria-checked", "false") } nightlight() { this.hasTheme = "dark", document.body.dataset.theme = "dark", this.setAttribute("aria-checked", "true") } toggleState() { this.toggleAttribute("checked"), this.fireEvent() } handleKeyDown(e) { " " === e.key && this.toggleState() } handleThemeChange(e) { e.detail.theme !== this.hasTheme && ("dark" === e.detail.theme ? this.setAttribute("checked", "") : this.removeAttribute("checked")) } fireEvent() { this.dispatchEvent(new CustomEvent("themechange", { bubbles: !0, composed: !0, detail: { theme: this.hasTheme } })) } connectedCallback() { this.setAttribute("role", "switch"), this.setAttribute("aria-label", "theme toggle"), "dark" === localStorage.getItem(`${window.location.hostname}-theme`) ? (this.nightlight(), this.setAttribute("checked", "")) : "light" === localStorage.getItem(`${window.location.hostname}-theme`) ? (this.daylight(), this.removeAttribute("checked")) : window.matchMedia("(prefers-color-scheme: dark)").matches ? (this.nightlight(), this.setAttribute("checked", "")) : (this.daylight(), this.removeAttribute("checked")), this.addEventListener("click", this.toggleState), this.addEventListener("keydown", this.handleKeyDown), document.addEventListener("themechange", this.handleThemeChange) } disconnectedCallback() { this.removeEventListener("click", this.toggleState), this.removeEventListener("keydown", this.handleKeyDown), document.removeEventListener("themechange", this.handleThemeChange) } attributeChangedCallback(e, t, n) { "checked" === e && (this.hasAttribute("checked") ? (this.nightlight(), localStorage.setItem(`${window.location.hostname}-theme`, "dark")) : (this.daylight(), localStorage.setItem(`${window.location.hostname}-theme`, "light"))) } } window.customElements.define("theme-toggle", ThemeToggle);
\ No newline at end of file
diff --git a/flologsheet/css/Artboard 1.svg b/flologsheet/css/Artboard 1.svg
new file mode 100644
index 0000000..c34b089
--- /dev/null
+++ b/flologsheet/css/Artboard 1.svg
@@ -0,0 +1 @@
+Artboard 1
\ No newline at end of file
diff --git a/flologsheet/css/banner-bg1.svg b/flologsheet/css/banner-bg1.svg
new file mode 100644
index 0000000..9c3b621
--- /dev/null
+++ b/flologsheet/css/banner-bg1.svg
@@ -0,0 +1 @@
+banner-bg1
\ No newline at end of file
diff --git a/flologsheet/css/banner-bg2.svg b/flologsheet/css/banner-bg2.svg
new file mode 100644
index 0000000..6e4a185
--- /dev/null
+++ b/flologsheet/css/banner-bg2.svg
@@ -0,0 +1 @@
+spreadsheets
\ No newline at end of file
diff --git a/flologsheet/css/card-bg1.svg b/flologsheet/css/card-bg1.svg
new file mode 100644
index 0000000..c0585a5
--- /dev/null
+++ b/flologsheet/css/card-bg1.svg
@@ -0,0 +1 @@
+card-bg1
\ No newline at end of file
diff --git a/flologsheet/css/card-bg2.svg b/flologsheet/css/card-bg2.svg
new file mode 100644
index 0000000..9d0233b
--- /dev/null
+++ b/flologsheet/css/card-bg2.svg
@@ -0,0 +1 @@
+card-bg2
\ No newline at end of file
diff --git a/flologsheet/css/main.css b/flologsheet/css/main.css
new file mode 100644
index 0000000..cbdf528
--- /dev/null
+++ b/flologsheet/css/main.css
@@ -0,0 +1,1434 @@
+@charset "UTF-8";
+* {
+ padding: 0;
+ margin: 0;
+ box-sizing: border-box;
+ font-family: "Roboto", sans-serif;
+}
+
+:root {
+ font-size: clamp(1rem, 1.2vmax, 1.2rem);
+}
+
+html,
+body {
+ height: 100%;
+}
+
+body {
+ --accent-color: #3d5afe;
+ --secondary-color: #ffac2e;
+ --text-color: 20, 20, 20;
+ --foreground-color: 252, 253, 255;
+ --background-color: 241, 243, 248;
+ --danger-color: rgb(255, 75, 75);
+ --green: #1cad59;
+ --yellow: rgb(220, 165, 0);
+ color: rgba(var(--text-color), 1);
+ background-color: rgba(var(--background-color), 1);
+ overflow-y: hidden;
+}
+
+body[data-theme=dark] {
+ --accent-color: #6d83ff;
+ --secondary-color: #d60739;
+ --text-color: 220, 220, 220;
+ --foreground-color: 27, 28, 29;
+ --background-color: 21, 22, 22;
+ --danger-color: rgb(255, 106, 106);
+ --green: #00e676;
+ --yellow: rgb(255, 213, 5);
+}
+body[data-theme=dark] ::-webkit-calendar-picker-indicator {
+ filter: invert(1);
+}
+
+p,
+strong {
+ font-size: 0.9rem;
+ max-width: 65ch;
+ line-height: 1.7;
+ color: rgba(var(--text-color), 0.9);
+}
+
+img {
+ -o-object-fit: cover;
+ object-fit: cover;
+}
+
+a:where([class]) {
+ color: inherit;
+ text-decoration: none;
+}
+a:where([class]):focus-visible {
+ box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1) inset;
+}
+
+a {
+ color: var(--accent-color);
+}
+
+a:-webkit-any-link:focus-visible {
+ outline: rgba(var(--text-color), 1) 0.1rem solid;
+}
+
+a:-moz-any-link:focus-visible {
+ outline: rgba(var(--text-color), 1) 0.1rem solid;
+}
+
+a:any-link:focus-visible {
+ outline: rgba(var(--text-color), 1) 0.1rem solid;
+}
+
+a.button {
+ padding: 0.4rem 0.6rem;
+ border-radius: 0.3rem;
+ font-size: 0.9rem;
+ font-weight: 500;
+ color: inherit;
+}
+
+button,
+.button {
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ user-select: none;
+ position: relative;
+ display: inline-flex;
+ border: none;
+ background-color: transparent;
+ overflow: hidden;
+ color: inherit;
+ -webkit-tap-highlight-color: transparent;
+ align-items: center;
+ font-size: 0.9rem;
+ font-weight: 500;
+ white-space: nowrap;
+ padding: 0.8rem;
+ border-radius: 0.3rem;
+ justify-content: center;
+}
+button:focus-visible,
+.button:focus-visible {
+ outline: var(--accent-color) solid medium;
+}
+button:not(:disabled),
+.button:not(:disabled) {
+ cursor: pointer;
+}
+
+.button {
+ background-color: rgba(var(--text-color), 0.1);
+}
+.button--primary, .button--danger {
+ color: rgba(var(--background-color), 1) !important;
+}
+.button--primary .icon, .button--danger .icon {
+ fill: rgba(var(--background-color), 1);
+}
+.button--primary {
+ text-transform: capitalize;
+ background-color: var(--accent-color);
+}
+.button--danger {
+ background-color: var(--danger-color);
+}
+.button--small {
+ padding: 0.4rem 0.6rem;
+}
+.button--outlined {
+ border: solid rgba(var(--text-color), 0.5) 0.1rem;
+ background-color: rgba(var(--foreground-color), 1);
+}
+.button--transparent {
+ background-color: transparent;
+}
+
+.cta {
+ text-transform: uppercase;
+ font-size: 0.8rem;
+ font-weight: 700;
+ letter-spacing: 0.05em;
+ padding: 0.8rem 1rem;
+}
+
+.icon {
+ width: 1.2rem;
+ height: 1.2rem;
+ fill: rgba(var(--text-color), 0.8);
+ flex-shrink: 0;
+}
+
+.icon-only {
+ padding: 0.5rem;
+ border-radius: 0.3rem;
+ aspect-ratio: 1/1;
+}
+
+button:disabled {
+ opacity: 0.5;
+}
+
+a:-webkit-any-link:focus-visible {
+ outline: rgba(var(--text-color), 1) 0.1rem solid;
+}
+
+a:-moz-any-link:focus-visible {
+ outline: rgba(var(--text-color), 1) 0.1rem solid;
+}
+
+a:any-link:focus-visible {
+ outline: rgba(var(--text-color), 1) 0.1rem solid;
+}
+
+details summary {
+ display: flex;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ user-select: none;
+ cursor: pointer;
+ align-items: center;
+ justify-content: space-between;
+ color: var(--accent-color);
+}
+
+details[open] summary {
+ margin-bottom: 1rem;
+}
+details[open] > summary .down-arrow {
+ transform: rotate(180deg);
+}
+
+fieldset {
+ border: none;
+}
+
+input {
+ accent-color: var(--accent-color);
+}
+input[type=range]:active {
+ cursor: -webkit-grab;
+ cursor: grab;
+}
+
+sm-copy {
+ font-size: 0.9rem;
+}
+
+sm-input,
+sm-textarea {
+ font-size: 0.9rem;
+ --border-radius: 0.5rem;
+ --background-color: rgba(var(--foreground-color), 1);
+}
+sm-input button .icon,
+sm-textarea button .icon {
+ fill: var(--accent-color);
+}
+
+sm-textarea {
+ --max-height: 32ch;
+}
+
+sm-button {
+ --padding: 0.8rem;
+}
+sm-button[variant=primary] .icon {
+ fill: rgba(var(--background-color), 1);
+}
+sm-button[disabled] .icon {
+ fill: rgba(var(--text-color), 0.6);
+}
+sm-button.danger {
+ --background: var(--danger-color);
+ color: rgba(var(--background-color), 1);
+}
+
+sm-spinner {
+ --size: 1.5rem;
+ --stroke-width: 0.1rem;
+}
+
+sm-form {
+ --gap: 1rem;
+}
+
+sm-select {
+ --padding: 0.8rem;
+ font-size: 0.9rem;
+ --min-width: 8rem;
+ --border-radius: 0.5rem;
+}
+
+sm-option {
+ font-size: 0.9rem;
+ --border-radius: 0.3rem;
+}
+sm-option::part(option) {
+ grid-template-columns: none;
+}
+
+sm-chips {
+ --gap: 0;
+ background-color: rgba(var(--text-color), 0.06);
+ border-radius: 0.3rem;
+ padding: 0.3rem;
+}
+
+sm-chip {
+ position: relative;
+ font-size: 0.9rem;
+ --border-radius: 0.3rem;
+ --padding: 0.5rem 0.8rem;
+ --background: rgba(var(--text-color), 0.06);
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ user-select: none;
+}
+sm-chip[selected] {
+ --background: var(--accent-color);
+ color: rgba(var(--background-color), 1);
+}
+
+sm-button {
+ --border-radius: 0.3rem;
+}
+sm-button[variant=primary] .icon {
+ fill: rgba(var(--background-color), 1);
+}
+sm-button[disabled] .icon {
+ fill: rgba(var(--text-color), 0.6);
+}
+
+sm-select[open] {
+ z-index: 10;
+}
+
+ul {
+ list-style: none;
+}
+
+.overflow-ellipsis {
+ width: 100%;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+}
+
+.wrap-around {
+ overflow-wrap: break-word;
+ word-wrap: break-word;
+ word-break: break-word;
+}
+
+.full-bleed {
+ grid-column: 1/-1;
+}
+
+.uppercase {
+ text-transform: uppercase;
+}
+
+.capitalize::first-letter {
+ text-transform: uppercase;
+}
+
+.sticky {
+ position: -webkit-sticky;
+ position: sticky;
+}
+
+.top-0 {
+ top: 0;
+}
+
+.flex {
+ display: flex;
+}
+
+.flex-wrap {
+ flex-wrap: wrap;
+}
+
+.flex-1 {
+ flex: 1;
+}
+
+.grid {
+ display: grid;
+}
+
+.flow-column {
+ grid-auto-flow: column;
+}
+
+.gap-0-3 {
+ gap: 0.3rem;
+}
+
+.gap-0-5 {
+ gap: 0.5rem;
+}
+
+.gap-1 {
+ gap: 1rem;
+}
+
+.gap-1-5 {
+ gap: 1.5rem;
+}
+
+.gap-2 {
+ gap: 2rem;
+}
+
+.gap-3 {
+ gap: 3rem;
+}
+
+.text-align-right {
+ text-align: right;
+}
+
+.text-align-left {
+ text-align: left;
+}
+
+.align-items-start {
+ align-items: flex-start;
+}
+
+.align-content-start {
+ align-content: flex-start;
+}
+
+.align-start {
+ align-content: flex-start;
+}
+
+.align-center {
+ align-items: center;
+}
+
+.align-end {
+ align-items: flex-end;
+}
+
+.text-center {
+ text-align: center;
+}
+
+.justify-start {
+ justify-items: start;
+}
+
+.justify-content-start {
+ justify-content: start;
+}
+
+.justify-center {
+ justify-content: center;
+}
+
+.justify-right {
+ margin-left: auto;
+}
+
+.align-self-start {
+ align-self: start;
+}
+
+.align-self-center {
+ align-self: center;
+}
+
+.align-self-end {
+ align-self: end;
+}
+
+.justify-self-center {
+ justify-self: center;
+}
+
+.justify-self-start {
+ justify-self: start;
+}
+
+.justify-self-end {
+ justify-self: end;
+}
+
+.flex-direction-column {
+ flex-direction: column;
+}
+
+.space-between {
+ justify-content: space-between;
+}
+
+.w-100 {
+ width: 100%;
+}
+
+.h-100 {
+ height: 100%;
+}
+
+.margin-right-0-3 {
+ margin-right: 0.3rem;
+}
+
+.margin-right-0-5 {
+ margin-right: 0.5rem;
+}
+
+.margin-left-0-5 {
+ margin-left: 0.5rem;
+}
+
+.margin-left-auto {
+ margin-left: auto;
+}
+
+.margin-right-auto {
+ margin-right: auto;
+}
+
+.margin-top-1 {
+ margin-top: 1rem;
+}
+
+.margin-bottom-0-5 {
+ margin-bottom: 0.5rem;
+}
+
+.margin-bottom-1 {
+ margin-bottom: 1rem;
+}
+
+.margin-bottom-2 {
+ margin-bottom: 2rem;
+}
+
+.margin-block-0-5 {
+ margin-block: 0.5rem;
+}
+
+.margin-block-1 {
+ margin-block: 1rem;
+}
+
+.margin-block-1-5 {
+ margin-block: 1.5rem;
+}
+
+.margin-inline-1 {
+ margin-inline: 1rem;
+}
+
+.margin-inline-1-5 {
+ margin-inline: 1.5rem;
+}
+
+.hidden {
+ display: none !important;
+}
+
+.no-transformations {
+ transform: none !important;
+}
+
+.full-bleed {
+ grid-column: 1/4;
+}
+
+.h1 {
+ font-size: 2.5rem;
+}
+
+.h2 {
+ font-size: 2rem;
+}
+
+.h3 {
+ font-size: 1.4rem;
+}
+
+.h4 {
+ font-size: 1rem;
+}
+
+.h5 {
+ font-size: 0.8rem;
+}
+
+.grid-3 {
+ grid-template-columns: 1fr auto auto;
+}
+
+.flow-column {
+ grid-auto-flow: column;
+}
+
+.w-100 {
+ width: 100%;
+}
+
+.color-0-8 {
+ color: rgba(var(--text-color), 0.8);
+}
+
+.weight-400 {
+ font-weight: 400;
+}
+
+.weight-500 {
+ font-weight: 500;
+}
+
+.card {
+ background-color: rgba(var(--text-color), 0.06);
+ border-radius: 0.5rem;
+ padding: max(1rem, 3vw);
+}
+
+.ripple {
+ height: 8rem;
+ width: 8rem;
+ position: absolute;
+ border-radius: 50%;
+ transform: scale(0);
+ background: radial-gradient(circle, rgba(var(--text-color), 0.3) 0%, rgba(0, 0, 0, 0) 50%);
+ pointer-events: none;
+}
+
+.interactive {
+ position: relative;
+ overflow: hidden;
+ cursor: pointer;
+ -webkit-tap-highlight-color: transparent;
+}
+
+.observe-empty-state:empty {
+ display: none;
+}
+
+.observe-empty-state:not(:empty) ~ .empty-state {
+ display: none;
+}
+
+.button__icon {
+ height: 1.2rem;
+ width: 1.2rem;
+}
+.button__icon--left {
+ margin-right: 0.5rem;
+}
+.button__icon--right {
+ margin-left: 0.5rem;
+}
+
+[data-editable] {
+ transition: padding 0.2s;
+}
+[data-editable]:focus-within {
+ padding: 0.5em;
+ border-radius: 0.3rem;
+ outline: none;
+ background-color: rgba(var(--text-color), 0.06);
+ box-shadow: 0 0 0 0.1rem var(--accent-color) inset;
+}
+
+.multi-state-button {
+ display: grid;
+ text-align: center;
+ align-items: center;
+}
+.multi-state-button > * {
+ grid-area: 1/1/2/2;
+}
+.multi-state-button button {
+ z-index: 1;
+}
+
+#confirmation_popup,
+#prompt_popup {
+ flex-direction: column;
+}
+#confirmation_popup h4,
+#prompt_popup h4 {
+ font-weight: 500;
+ margin-bottom: 0.5rem;
+}
+#confirmation_popup sm-button,
+#prompt_popup sm-button {
+ margin: 0;
+}
+#confirmation_popup .flex,
+#prompt_popup .flex {
+ padding: 0;
+ margin-top: 1rem;
+}
+#confirmation_popup .flex sm-button:first-of-type,
+#prompt_popup .flex sm-button:first-of-type {
+ margin-right: 0.6rem;
+ margin-left: auto;
+}
+
+.popup__header {
+ display: grid;
+ gap: 0.5rem;
+ width: 100%;
+ padding: 0 1.5rem 0 0.5rem;
+ align-items: center;
+ grid-template-columns: auto 1fr auto;
+}
+
+.popup__header__close {
+ padding: 0.5rem;
+ cursor: pointer;
+}
+
+#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;
+ 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 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 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;
+ -webkit-animation: slide-down 0.3s forwards;
+ animation: slide-down 0.3s forwards;
+}
+
+@-webkit-keyframes slide-down {
+ from {
+ transform: translateY(-1rem);
+ }
+ to {
+ transform: none;
+ }
+}
+
+@keyframes slide-down {
+ from {
+ transform: translateY(-1rem);
+ }
+ to {
+ transform: none;
+ }
+}
+#main_loader {
+ text-align: center;
+ place-content: center;
+ justify-items: center;
+ height: 100vh;
+ width: 100vw;
+ position: fixed;
+ left: 0;
+ gap: 1rem;
+}
+#main_loader sm-button {
+ margin-left: 0;
+ margin-top: 1rem;
+ width: -webkit-max-content;
+ width: -moz-max-content;
+ width: max-content;
+ justify-self: center;
+}
+#main_loader h3 {
+ width: 100%;
+ font-weight: 400;
+ word-spacing: 0.16em;
+}
+
+#main_header {
+ align-items: center;
+ gap: 1rem;
+ padding: 1rem;
+ box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.062745098);
+ background: rgba(var(--foreground-color), 1);
+ grid-template-columns: 1fr auto;
+}
+#main_header h5 {
+ font-weight: 500;
+ opacity: 0.8;
+}
+#main_header h4 {
+ font-size: 1.2rem;
+}
+
+#user_profile_button {
+ background-color: rgba(var(--text-color), 0.06);
+ border-radius: 2rem;
+ font-size: 0.8rem;
+ padding: 0.6rem 0.8rem;
+}
+
+#home_page {
+ padding: 1rem;
+}
+
+.section-header {
+ position: -webkit-sticky;
+ position: sticky;
+ top: 0;
+ z-index: 1;
+ background: var(--dark-shade);
+ 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;
+ border-radius: 2rem;
+}
+
+#sheets_container {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
+ gap: 0.5rem;
+ margin-bottom: 3rem;
+ -webkit-animation: slide-up 0.6s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
+ animation: slide-up 0.6s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+@-webkit-keyframes slide-up {
+ from {
+ transform: translateY(2rem);
+ }
+ to {
+ transform: none;
+ }
+}
+
+@keyframes slide-up {
+ from {
+ transform: translateY(2rem);
+ }
+ to {
+ transform: none;
+ }
+}
+#add_new_sheet .sheet-card__icon {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ position: relative;
+ background: url(card-bg1.svg), #a7003e;
+ background-size: cover;
+}
+#add_new_sheet .icon {
+ fill: rgba(var(--foreground-color), 1);
+}
+
+.sheet-card {
+ position: relative;
+ display: grid;
+ color: inherit;
+ grid-template-columns: auto 1fr auto;
+ align-items: center;
+ gap: 0.8rem;
+ background-color: rgba(var(--foreground-color), 1);
+ padding: 1rem;
+ border-radius: 0.5rem;
+ transition: 0.2s;
+ border: solid thin rgba(var(--text-color), 0.1);
+}
+.sheet-card__icon {
+ display: flex;
+ padding: 0.6rem;
+ border-radius: 2rem;
+ background: rgba(var(--text-color), 0.06);
+}
+.sheet-card h4 {
+ font-size: 0.9rem;
+ font-weight: 500;
+}
+.sheet-card__type {
+ font-size: 0.8rem;
+ background: rgba(var(--text-color), 0.1);
+ padding: 0.3rem 0.6rem;
+ border-radius: 1rem;
+}
+
+#sheet_view {
+ width: 100vw;
+ height: 100vh;
+ overflow-x: hidden;
+}
+#sheet_view.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.5rem;
+ opacity: 0.8;
+}
+
+#sheet_editors {
+ gap: 0.5rem;
+ 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);
+}
+
+#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);
+ padding: 0.4rem;
+ background-color: rgba(var(--text-color), 0.1);
+}
+
+#sheet_details {
+ padding: 1rem;
+}
+#sheet_details .flex:nth-of-type(2) {
+ padding: 0.5rem 0;
+}
+#sheet_details .flex:nth-of-type(2) button:first-of-type {
+ margin-left: -0.7rem;
+}
+#sheet_details.collapse {
+ padding: 0.5rem 1rem;
+}
+#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%;
+}
+
+table {
+ border-collapse: collapse;
+ position: relative;
+ width: 100%;
+}
+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: -webkit-sticky;
+ 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;
+ cursor: pointer;
+}
+
+tr:nth-of-type(2n) {
+ background-color: rgba(var(--text-color), 0.04);
+}
+
+td {
+ padding: 0.4rem 0.8rem;
+ opacity: 0.9;
+}
+td:nth-of-type(n + 3) {
+ min-width: 12em;
+}
+
+.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: " ▲";
+}
+
+#sheet_processing_popup::part(popup) {
+ min-height: 80vh;
+}
+#sheet_processing_popup sm-select:last-of-type {
+ margin-left: 0.5rem;
+}
+#sheet_processing_popup th,
+#sheet_processing_popup td {
+ padding: 1rem;
+}
+
+#side_bar {
+ position: fixed;
+ transform: translateX(-100%);
+ background: rgba(var(--background-color), 1);
+ bottom: 0;
+ top: 0;
+ left: 0;
+ right: 0;
+ width: 100%;
+}
+#side_bar > .flex:first-of-type {
+ padding: 0.5rem 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);
+ -webkit-animation: slide-right 0.6s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
+ animation: slide-right 0.6s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+@-webkit-keyframes slide-right {
+ from {
+ transform: translateX(-2rem);
+ }
+ to {
+ transform: translateX(0);
+ }
+}
+
+@keyframes slide-right {
+ from {
+ transform: translateX(-2rem);
+ }
+ to {
+ transform: translateX(0);
+ }
+}
+.placeholder {
+ -webkit-animation: placeholder-loading 0.6s infinite alternate;
+ 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);
+}
+
+@-webkit-keyframes placeholder-loading {
+ from {
+ opacity: 0.4;
+ }
+ to {
+ opacity: 1;
+ }
+}
+
+@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: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;
+}
+
+#profile_popup section:not(:last-of-type) {
+ margin-bottom: 1.5rem;
+}
+
+#editors_container,
+#columns_container,
+#additional_fields {
+ gap: 0.4rem;
+}
+
+#specify_editors {
+ border-top: solid 1px rgba(var(--text-color), 0.2);
+ padding-top: 1rem;
+}
+
+#add_editor sm-input,
+#add_column sm-input,
+#add_detail sm-input {
+ width: 100%;
+}
+
+#add_detail {
+ gap: 0.2rem;
+ grid-template-columns: 1fr auto;
+ grid-template-areas: ". add" ". add";
+}
+#add_detail button {
+ 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 .editor-address,
+.column-card .editor-address,
+.details-card .editor-address {
+ 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;
+}
+.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 {
+ margin: 0 !important;
+}
+.details-card h5 {
+ font-weight: 400;
+ opacity: 0.8;
+}
+.details-card h4 {
+ font-size: 1rem !important;
+}
+.details-card button {
+ grid-area: close;
+}
+
+#save_button {
+ position: fixed;
+ overflow: hidden;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ width: min(100% - 2rem, 24rem);
+ padding: 1rem;
+ margin: 1rem;
+ border-radius: 0.5rem;
+ border: solid thin rgba(var(--text-color), 0.1);
+ background: rgba(var(--foreground-color), 1);
+ z-index: 20;
+ box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.16);
+}
+#save_button #changes_indicator {
+ position: absolute;
+ left: 0;
+ width: 0.3rem;
+ border-radius: 0 0.5rem 0.5rem 0;
+ height: 2em;
+ background: red;
+}
+#save_button sm-button {
+ margin-left: 1rem;
+}
+
+@media screen and (max-width: 640px) {
+ #processed_sheet_view {
+ overflow: auto;
+ max-width: calc(100vw - 3rem);
+ }
+ #user_profile_button {
+ grid-area: 1/1/2/2;
+ }
+ theme-toggle {
+ grid-area: 1/2/2/3;
+ }
+ .hide-on-mobile {
+ display: none;
+ }
+}
+@media screen and (min-width: 640px) {
+ .hide-on-desktop {
+ display: none;
+ }
+ sm-popup {
+ --width: 24rem;
+ }
+ .popup__header {
+ padding: 1.5rem 1.5rem 0 0.75rem;
+ }
+ #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 rgba(0, 0, 0, 0.0862745098), 0 6rem 2rem -2rem rgba(0, 0, 0, 0.0862745098);
+ background: rgba(var(--foreground-color), 1);
+ }
+ #main_header {
+ grid-template-columns: 1fr auto auto;
+ padding: 1.2rem 3rem;
+ }
+ #home_page {
+ grid-template-columns: 1fr 80vw 1fr;
+ grid-template-areas: ". main .";
+ }
+ #main_section {
+ grid-area: main;
+ }
+ #sheet_view.toggle-side-bar {
+ grid-template-columns: 19rem 1fr;
+ }
+ #sheet_view.toggle-side-bar #side_bar {
+ z-index: initial;
+ }
+ #sheet_view:not(.toggle-side-bar) #side_bar {
+ grid-template-columns: 1fr;
+ position: fixed;
+ transform: translateX(-100%);
+ }
+ #side_bar {
+ position: relative;
+ transform: none;
+ }
+ #sheet_processing_popup {
+ --width: 36rem;
+ }
+ #sheet_processing_popup[data-mode=group] {
+ --width: 80vw;
+ }
+ #save_button {
+ margin: 1rem auto;
+ }
+}
+@media screen and (min-width: 1920px) {
+ #home_page {
+ 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 rgba(0, 0, 0, 0.062745098);
+ }
+ .sheet-card:hover {
+ transform: scale(1.02);
+ box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
+ z-index: 1;
+ }
+}
+.hidden {
+ display: none;
+}
\ No newline at end of file
diff --git a/flologsheet/css/main.min.css b/flologsheet/css/main.min.css
new file mode 100644
index 0000000..8dfb7ce
--- /dev/null
+++ b/flologsheet/css/main.min.css
@@ -0,0 +1 @@
+*{padding:0;margin:0;box-sizing:border-box;font-family:"Roboto",sans-serif}:root{font-size:clamp(1rem,1.2vmax,1.2rem)}html,body{height:100%}body{--accent-color: #3d5afe;--secondary-color: #ffac2e;--text-color: 20, 20, 20;--foreground-color: 252, 253, 255;--background-color: 241, 243, 248;--danger-color: rgb(255, 75, 75);--green: #1cad59;--yellow: rgb(220, 165, 0);color:rgba(var(--text-color), 1);background-color:rgba(var(--background-color), 1);overflow-y:hidden}body[data-theme=dark]{--accent-color: #6d83ff;--secondary-color: #d60739;--text-color: 220, 220, 220;--foreground-color: 27, 28, 29;--background-color: 21, 22, 22;--danger-color: rgb(255, 106, 106);--green: #00e676;--yellow: rgb(255, 213, 5)}body[data-theme=dark] ::-webkit-calendar-picker-indicator{filter:invert(1)}p,strong{font-size:.9rem;max-width:65ch;line-height:1.7;color:rgba(var(--text-color), 0.9)}img{-o-object-fit:cover;object-fit:cover}a:where([class]){color:inherit;text-decoration:none}a:where([class]):focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color), 1) inset}a{color:var(--accent-color)}a:-webkit-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:-moz-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a.button{padding:.4rem .6rem;border-radius:.3rem;font-size:.9rem;font-weight:500;color:inherit}button,.button{-webkit-user-select:none;-moz-user-select:none;user-select:none;position:relative;display:inline-flex;border:none;background-color:rgba(0,0,0,0);overflow:hidden;color:inherit;-webkit-tap-highlight-color:rgba(0,0,0,0);align-items:center;font-size:.9rem;font-weight:500;white-space:nowrap;padding:.8rem;border-radius:.3rem;justify-content:center}button:focus-visible,.button:focus-visible{outline:var(--accent-color) solid medium}button:not(:disabled),.button:not(:disabled){cursor:pointer}.button{background-color:rgba(var(--text-color), 0.1)}.button--primary,.button--danger{color:rgba(var(--background-color), 1) !important}.button--primary .icon,.button--danger .icon{fill:rgba(var(--background-color), 1)}.button--primary{text-transform:capitalize;background-color:var(--accent-color)}.button--danger{background-color:var(--danger-color)}.button--small{padding:.4rem .6rem}.button--outlined{border:solid rgba(var(--text-color), 0.5) .1rem;background-color:rgba(var(--foreground-color), 1)}.button--transparent{background-color:rgba(0,0,0,0)}.cta{text-transform:uppercase;font-size:.8rem;font-weight:700;letter-spacing:.05em;padding:.8rem 1rem}.icon{width:1.2rem;height:1.2rem;fill:rgba(var(--text-color), 0.8);flex-shrink:0}.icon-only{padding:.5rem;border-radius:.3rem;aspect-ratio:1/1}button:disabled{opacity:.5}a:-webkit-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:-moz-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}details summary{display:flex;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:pointer;align-items:center;justify-content:space-between;color:var(--accent-color)}details[open] summary{margin-bottom:1rem}details[open]>summary .down-arrow{transform:rotate(180deg)}fieldset{border:none}input{accent-color:var(--accent-color)}input[type=range]:active{cursor:-webkit-grab;cursor:grab}sm-copy{font-size:.9rem}sm-input,sm-textarea{font-size:.9rem;--border-radius: 0.5rem;--background-color: rgba(var(--foreground-color), 1)}sm-input button .icon,sm-textarea button .icon{fill:var(--accent-color)}sm-textarea{--max-height: 32ch}sm-button{--padding: 0.8rem}sm-button[variant=primary] .icon{fill:rgba(var(--background-color), 1)}sm-button[disabled] .icon{fill:rgba(var(--text-color), 0.6)}sm-button.danger{--background: var(--danger-color);color:rgba(var(--background-color), 1)}sm-spinner{--size: 1.5rem;--stroke-width: 0.1rem}sm-form{--gap: 1rem}sm-select{--padding: 0.8rem;font-size:.9rem;--min-width: 8rem;--border-radius: 0.5rem}sm-option{font-size:.9rem;--border-radius: 0.3rem}sm-option::part(option){grid-template-columns:none}sm-chips{--gap: 0;background-color:rgba(var(--text-color), 0.06);border-radius:.3rem;padding:.3rem}sm-chip{position:relative;font-size:.9rem;--border-radius: 0.3rem;--padding: 0.5rem 0.8rem;--background: rgba(var(--text-color), 0.06);-webkit-user-select:none;-moz-user-select:none;user-select:none}sm-chip[selected]{--background: var(--accent-color);color:rgba(var(--background-color), 1)}sm-button{--border-radius: 0.3rem}sm-button[variant=primary] .icon{fill:rgba(var(--background-color), 1)}sm-button[disabled] .icon{fill:rgba(var(--text-color), 0.6)}sm-select[open]{z-index:10}ul{list-style:none}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.wrap-around{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word}.full-bleed{grid-column:1/-1}.uppercase{text-transform:uppercase}.capitalize::first-letter{text-transform:uppercase}.sticky{position:-webkit-sticky;position:sticky}.top-0{top:0}.flex{display:flex}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.grid{display:grid}.flow-column{grid-auto-flow:column}.gap-0-3{gap:.3rem}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.text-align-right{text-align:right}.text-align-left{text-align:left}.align-items-start{align-items:flex-start}.align-content-start{align-content:flex-start}.align-start{align-content:flex-start}.align-center{align-items:center}.align-end{align-items:flex-end}.text-center{text-align:center}.justify-start{justify-items:start}.justify-content-start{justify-content:start}.justify-center{justify-content:center}.justify-right{margin-left:auto}.align-self-start{align-self:start}.align-self-center{align-self:center}.align-self-end{align-self:end}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.flex-direction-column{flex-direction:column}.space-between{justify-content:space-between}.w-100{width:100%}.h-100{height:100%}.margin-right-0-3{margin-right:.3rem}.margin-right-0-5{margin-right:.5rem}.margin-left-0-5{margin-left:.5rem}.margin-left-auto{margin-left:auto}.margin-right-auto{margin-right:auto}.margin-top-1{margin-top:1rem}.margin-bottom-0-5{margin-bottom:.5rem}.margin-bottom-1{margin-bottom:1rem}.margin-bottom-2{margin-bottom:2rem}.margin-block-0-5{margin-block:.5rem}.margin-block-1{margin-block:1rem}.margin-block-1-5{margin-block:1.5rem}.margin-inline-1{margin-inline:1rem}.margin-inline-1-5{margin-inline:1.5rem}.hidden{display:none !important}.no-transformations{transform:none !important}.full-bleed{grid-column:1/4}.h1{font-size:2.5rem}.h2{font-size:2rem}.h3{font-size:1.4rem}.h4{font-size:1rem}.h5{font-size:.8rem}.grid-3{grid-template-columns:1fr auto auto}.flow-column{grid-auto-flow:column}.w-100{width:100%}.color-0-8{color:rgba(var(--text-color), 0.8)}.weight-400{font-weight:400}.weight-500{font-weight:500}.card{background-color:rgba(var(--text-color), 0.06);border-radius:.5rem;padding:max(1rem,3vw)}.ripple{height:8rem;width:8rem;position:absolute;border-radius:50%;transform:scale(0);background:radial-gradient(circle, rgba(var(--text-color), 0.3) 0%, rgba(0, 0, 0, 0) 50%);pointer-events:none}.interactive{position:relative;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0)}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)~.empty-state{display:none}.button__icon{height:1.2rem;width:1.2rem}.button__icon--left{margin-right:.5rem}.button__icon--right{margin-left:.5rem}[data-editable]{transition:padding .2s}[data-editable]:focus-within{padding:.5em;border-radius:.3rem;outline:none;background-color:rgba(var(--text-color), 0.06);box-shadow:0 0 0 .1rem var(--accent-color) inset}.multi-state-button{display:grid;text-align:center;align-items:center}.multi-state-button>*{grid-area:1/1/2/2}.multi-state-button button{z-index:1}#confirmation_popup,#prompt_popup{flex-direction:column}#confirmation_popup h4,#prompt_popup h4{font-weight:500;margin-bottom:.5rem}#confirmation_popup sm-button,#prompt_popup sm-button{margin:0}#confirmation_popup .flex,#prompt_popup .flex{padding:0;margin-top:1rem}#confirmation_popup .flex sm-button:first-of-type,#prompt_popup .flex sm-button:first-of-type{margin-right:.6rem;margin-left:auto}.popup__header{display:grid;gap:.5rem;width:100%;padding:0 1.5rem 0 .5rem;align-items:center;grid-template-columns:auto 1fr auto}.popup__header__close{padding:.5rem;cursor:pointer}#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;opacity:.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 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 p{margin-bottom:.5rem;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), 0.2) solid;margin-top:1rem;padding-top:1.5rem;-webkit-animation:slide-down .3s forwards;animation:slide-down .3s forwards}@-webkit-keyframes slide-down{from{transform:translateY(-1rem)}to{transform:none}}@keyframes slide-down{from{transform:translateY(-1rem)}to{transform:none}}#main_loader{text-align:center;place-content:center;justify-items:center;height:100vh;width:100vw;position:fixed;left:0;gap:1rem}#main_loader sm-button{margin-left:0;margin-top:1rem;width:-webkit-max-content;width:-moz-max-content;width:max-content;justify-self:center}#main_loader h3{width:100%;font-weight:400;word-spacing:.16em}#main_header{align-items:center;gap:1rem;padding:1rem;box-shadow:0 .1rem .2rem rgba(0,0,0,.062745098);background:rgba(var(--foreground-color), 1);grid-template-columns:1fr auto}#main_header h5{font-weight:500;opacity:.8}#main_header h4{font-size:1.2rem}#user_profile_button{background-color:rgba(var(--text-color), 0.06);border-radius:2rem;font-size:.8rem;padding:.6rem .8rem}#home_page{padding:1rem}.section-header{position:-webkit-sticky;position:sticky;top:0;z-index:1;background:var(--dark-shade);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;border-radius:2rem}#sheets_container{display:grid;grid-template-columns:repeat(auto-fill, minmax(20rem, 1fr));gap:.5rem;margin-bottom:3rem;-webkit-animation:slide-up .6s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);animation:slide-up .6s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275)}@-webkit-keyframes slide-up{from{transform:translateY(2rem)}to{transform:none}}@keyframes slide-up{from{transform:translateY(2rem)}to{transform:none}}#add_new_sheet .sheet-card__icon{display:flex;align-items:center;justify-content:center;position:relative;background:url(card-bg1.svg),#a7003e;background-size:cover}#add_new_sheet .icon{fill:rgba(var(--foreground-color), 1)}.sheet-card{position:relative;display:grid;color:inherit;grid-template-columns:auto 1fr auto;align-items:center;gap:.8rem;background-color:rgba(var(--foreground-color), 1);padding:1rem;border-radius:.5rem;transition:.2s;border:solid thin rgba(var(--text-color), 0.1)}.sheet-card__icon{display:flex;padding:.6rem;border-radius:2rem;background:rgba(var(--text-color), 0.06)}.sheet-card h4{font-size:.9rem;font-weight:500}.sheet-card__type{font-size:.8rem;background:rgba(var(--text-color), 0.1);padding:.3rem .6rem;border-radius:1rem}#sheet_view{width:100vw;height:100vh;overflow-x:hidden}#sheet_view.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;background:rgba(var(--text-color), 0.1)}#sheet_description{margin-top:.5rem;opacity:.8}#sheet_editors{gap:.5rem;color:rgba(var(--text-color), 0.7);font-size:.9rem}#sheet_editors .editor{padding:.4rem .6rem;border-radius:.4rem;background:rgba(var(--text-color), 0.06)}#go_to_home{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);padding:.4rem;background-color:rgba(var(--text-color), 0.1)}#sheet_details{padding:1rem}#sheet_details .flex:nth-of-type(2){padding:.5rem 0}#sheet_details .flex:nth-of-type(2) button:first-of-type{margin-left:-0.7rem}#sheet_details.collapse{padding:.5rem 1rem}#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{position:relative;overflow:auto;max-height:100%;bottom:0;max-width:100%}table{border-collapse:collapse;position:relative;width:100%}table input{position:relative;padding:.4rem;border:thin solid rgba(var(--text-color), 0.3);font-size:1rem;width:100%;border-radius:.3rem;background:rgba(var(--text-color), 0.06);color:inherit}table input:disabled{border:rgba(0,0,0,0)}th{position:-webkit-sticky;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 .8rem;white-space:nowrap;cursor:pointer}tr:nth-of-type(2n){background-color:rgba(var(--text-color), 0.04)}td{padding:.4rem .8rem;opacity:.9}td:nth-of-type(n + 3){/* min-width:12em; */}.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:.8rem}th.descending::after{content:" ▼"}th.ascending::after{content:" ▲"}#sheet_processing_popup::part(popup){min-height:80vh}#sheet_processing_popup sm-select:last-of-type{margin-left:.5rem}#sheet_processing_popup th,#sheet_processing_popup td{padding:1rem}#side_bar{position:fixed;transform:translateX(-100%);background:rgba(var(--background-color), 1);bottom:0;top:0;left:0;right:0;width:100%}#side_bar>.flex:first-of-type{padding:.5rem 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);-webkit-animation:slide-right .6s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);animation:slide-right .6s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275)}@-webkit-keyframes slide-right{from{transform:translateX(-2rem)}to{transform:translateX(0)}}@keyframes slide-right{from{transform:translateX(-2rem)}to{transform:translateX(0)}}.placeholder{-webkit-animation:placeholder-loading .6s infinite alternate;animation:placeholder-loading .6s infinite alternate;padding:1.5rem 0;width:100%;margin:1.5rem;border-radius:.5rem;background:rgba(var(--text-color), 0.06)}.placeholder#sheet_container{width:calc(100% - 3rem);height:calc(100% - 3rem)}@-webkit-keyframes placeholder-loading{from{opacity:.4}to{opacity:1}}@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;transition:transform .3s;-webkit-tap-highlight-color:rgba(0,0,0,0)}.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:.9rem;opacity:.9;font-weight:500;text-transform:capitalize}.person-flo-id{opacity:.7;font-weight:400}#profile_popup section:not(:last-of-type){margin-bottom:1.5rem}#editors_container,#columns_container,#additional_fields{gap:.4rem}#specify_editors{border-top:solid 1px rgba(var(--text-color), 0.2);padding-top:1rem}#add_editor sm-input,#add_column sm-input,#add_detail sm-input{width:100%}#add_detail{gap:.2rem;grid-template-columns:1fr auto;grid-template-areas:". add" ". add"}#add_detail button{grid-area:add;align-self:flex-end}.editor-card,.column-card,.details-card{border-radius:.3rem;background:rgba(var(--text-color), 0.06)}.editor-card .editor-address,.column-card .editor-address,.details-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{gap:.2rem;padding:.6rem .8rem;grid-template-columns:1fr auto;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 button{grid-area:close}#save_button{position:fixed;overflow:hidden;bottom:0;left:0;right:0;width:min(100% - 2rem,24rem);padding:1rem;margin:1rem;border-radius:.5rem;border:solid thin rgba(var(--text-color), 0.1);background:rgba(var(--foreground-color), 1);z-index:20;box-shadow:0 1rem 2rem rgba(0,0,0,.16)}#save_button #changes_indicator{position:absolute;left:0;width:.3rem;border-radius:0 .5rem .5rem 0;height:2em;background:red}#save_button sm-button{margin-left:1rem}@media screen and (max-width: 640px){#processed_sheet_view{overflow:auto;max-width:calc(100vw - 3rem)}#user_profile_button{grid-area:1/1/2/2}theme-toggle{grid-area:1/2/2/3}.hide-on-mobile{display:none}}@media screen and (min-width: 640px){.hide-on-desktop{display:none}sm-popup{--width: 24rem}.popup__header{padding:1.5rem 1.5rem 0 .75rem}#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 rgba(0,0,0,.0862745098),0 6rem 2rem -2rem rgba(0,0,0,.0862745098);background:rgba(var(--foreground-color), 1)}#main_header{grid-template-columns:1fr auto auto;padding:1.2rem 3rem}#home_page{grid-template-columns:1fr 80vw 1fr;grid-template-areas:". main ."}#main_section{grid-area:main}#sheet_view.toggle-side-bar{grid-template-columns:19rem 1fr}#sheet_view.toggle-side-bar #side_bar{z-index:initial}#sheet_view:not(.toggle-side-bar) #side_bar{grid-template-columns:1fr;position:fixed;transform:translateX(-100%)}#side_bar{position:relative;transform:none}#sheet_processing_popup{--width: 36rem}#sheet_processing_popup[data-mode=group]{--width: 80vw}#save_button{margin:1rem auto}}@media screen and (min-width: 1920px){#home_page{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), 0.2)}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color), 0.4)}#people_container::-webkit-scrollbar{width:.4rem}#right{z-index:1;box-shadow:-0.5rem 0 .5rem rgba(0,0,0,.062745098)}.sheet-card:hover{transform:scale(1.02);box-shadow:0 .5rem 1rem rgba(0,0,0,.1);z-index:1}}.hidden{display:none}
\ No newline at end of file
diff --git a/flologsheet/css/main.scss b/flologsheet/css/main.scss
new file mode 100644
index 0000000..fb22dc3
--- /dev/null
+++ b/flologsheet/css/main.scss
@@ -0,0 +1,1392 @@
+* {
+ padding: 0;
+ margin: 0;
+ box-sizing: border-box;
+ font-family: "Roboto", sans-serif;
+}
+
+:root {
+ font-size: clamp(1rem, 1.2vmax, 1.2rem);
+}
+
+html,
+body {
+ height: 100%;
+}
+
+body {
+ --accent-color: #3d5afe;
+ --secondary-color: #ffac2e;
+ --text-color: 20, 20, 20;
+ --foreground-color: 252, 253, 255;
+ --background-color: 241, 243, 248;
+ --danger-color: rgb(255, 75, 75);
+ --green: #1cad59;
+ --yellow: rgb(220, 165, 0);
+ color: rgba(var(--text-color), 1);
+ background-color: rgba(var(--background-color), 1);
+ overflow-y: hidden;
+}
+
+body[data-theme="dark"] {
+ --accent-color: #6d83ff;
+ --secondary-color: #d60739;
+ --text-color: 220, 220, 220;
+ --foreground-color: 27, 28, 29;
+ --background-color: 21, 22, 22;
+ --danger-color: rgb(255, 106, 106);
+ --green: #00e676;
+ --yellow: rgb(255, 213, 5);
+ ::-webkit-calendar-picker-indicator {
+ filter: invert(1);
+ }
+}
+
+p,
+strong {
+ font-size: 0.9rem;
+ max-width: 65ch;
+ line-height: 1.7;
+ color: rgba(var(--text-color), 0.9);
+}
+
+img {
+ object-fit: cover;
+}
+
+a:where([class]) {
+ color: inherit;
+ text-decoration: none;
+
+ &:focus-visible {
+ box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1) inset;
+ }
+}
+a {
+ color: var(--accent-color);
+}
+
+a:any-link:focus-visible {
+ outline: rgba(var(--text-color), 1) 0.1rem solid;
+}
+a.button {
+ padding: 0.4rem 0.6rem;
+ border-radius: 0.3rem;
+ font-size: 0.9rem;
+ font-weight: 500;
+ color: inherit;
+}
+
+button,
+.button {
+ user-select: none;
+ position: relative;
+ display: inline-flex;
+ border: none;
+ background-color: transparent;
+ overflow: hidden;
+ color: inherit;
+ -webkit-tap-highlight-color: transparent;
+ align-items: center;
+ font-size: 0.9rem;
+ font-weight: 500;
+ white-space: nowrap;
+ padding: 0.8rem;
+ border-radius: 0.3rem;
+ justify-content: center;
+
+ &:focus-visible {
+ outline: var(--accent-color) solid medium;
+ }
+
+ &:not(:disabled) {
+ cursor: pointer;
+ }
+}
+
+.button {
+ background-color: rgba(var(--text-color), 0.1);
+
+ &--primary,
+ &--danger {
+ color: rgba(var(--background-color), 1) !important;
+
+ .icon {
+ fill: rgba(var(--background-color), 1);
+ }
+ }
+
+ &--primary {
+ text-transform: capitalize;
+ background-color: var(--accent-color);
+ }
+
+ &--danger {
+ background-color: var(--danger-color);
+ }
+
+ &--small {
+ padding: 0.4rem 0.6rem;
+ }
+
+ &--outlined {
+ border: solid rgba(var(--text-color), 0.5) 0.1rem;
+ background-color: rgba(var(--foreground-color), 1);
+ }
+ &--transparent {
+ background-color: transparent;
+ }
+}
+
+.cta {
+ text-transform: uppercase;
+ font-size: 0.8rem;
+ font-weight: 700;
+ letter-spacing: 0.05em;
+ padding: 0.8rem 1rem;
+}
+
+.icon {
+ width: 1.2rem;
+ height: 1.2rem;
+ fill: rgba(var(--text-color), 0.8);
+ flex-shrink: 0;
+}
+
+.icon-only {
+ padding: 0.5rem;
+ border-radius: 0.3rem;
+ aspect-ratio: 1/1;
+}
+
+button:disabled {
+ opacity: 0.5;
+}
+
+a:any-link:focus-visible {
+ outline: rgba(var(--text-color), 1) 0.1rem solid;
+}
+
+details summary {
+ display: flex;
+ user-select: none;
+ cursor: pointer;
+ align-items: center;
+ justify-content: space-between;
+ color: var(--accent-color);
+}
+
+details[open] {
+ & summary {
+ margin-bottom: 1rem;
+ }
+
+ & > summary .down-arrow {
+ transform: rotate(180deg);
+ }
+}
+
+fieldset {
+ border: none;
+}
+
+input {
+ accent-color: var(--accent-color);
+
+ &[type="range"] {
+ &:active {
+ cursor: grab;
+ }
+ }
+}
+
+sm-copy {
+ font-size: 0.9rem;
+}
+
+sm-input,
+sm-textarea {
+ font-size: 0.9rem;
+ --border-radius: 0.5rem;
+ --background-color: rgba(var(--foreground-color), 1);
+
+ button {
+ .icon {
+ fill: var(--accent-color);
+ }
+ }
+}
+
+sm-textarea {
+ --max-height: 32ch;
+}
+
+sm-button {
+ --padding: 0.8rem;
+
+ &[variant="primary"] {
+ .icon {
+ fill: rgba(var(--background-color), 1);
+ }
+ }
+
+ &[disabled] {
+ .icon {
+ fill: rgba(var(--text-color), 0.6);
+ }
+ }
+
+ &.danger {
+ --background: var(--danger-color);
+ color: rgba(var(--background-color), 1);
+ }
+}
+
+sm-spinner {
+ --size: 1.5rem;
+ --stroke-width: 0.1rem;
+}
+
+sm-form {
+ --gap: 1rem;
+}
+
+sm-select {
+ --padding: 0.8rem;
+ font-size: 0.9rem;
+ --min-width: 8rem;
+ --border-radius: 0.5rem;
+}
+
+sm-option {
+ font-size: 0.9rem;
+ --border-radius: 0.3rem;
+ &::part(option) {
+ grid-template-columns: none;
+ }
+}
+
+sm-chips {
+ --gap: 0;
+ background-color: rgba(var(--text-color), 0.06);
+ border-radius: 0.3rem;
+ padding: 0.3rem;
+}
+
+sm-chip {
+ position: relative;
+ font-size: 0.9rem;
+ --border-radius: 0.3rem;
+ --padding: 0.5rem 0.8rem;
+ --background: rgba(var(--text-color), 0.06);
+ user-select: none;
+ &[selected] {
+ --background: var(--accent-color);
+ color: rgba(var(--background-color), 1);
+ }
+}
+
+sm-button {
+ --border-radius: 0.3rem;
+
+ &[variant="primary"] {
+ .icon {
+ fill: rgba(var(--background-color), 1);
+ }
+ }
+
+ &[disabled] {
+ .icon {
+ fill: rgba(var(--text-color), 0.6);
+ }
+ }
+}
+sm-select {
+ &[open] {
+ z-index: 10;
+ }
+}
+
+ul {
+ list-style: none;
+}
+
+.overflow-ellipsis {
+ width: 100%;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+}
+
+.wrap-around {
+ overflow-wrap: break-word;
+ word-wrap: break-word;
+ word-break: break-word;
+}
+
+.full-bleed {
+ grid-column: 1/-1;
+}
+
+.uppercase {
+ text-transform: uppercase;
+}
+
+.capitalize {
+ &::first-letter {
+ text-transform: uppercase;
+ }
+}
+
+.sticky {
+ position: sticky;
+}
+
+.top-0 {
+ top: 0;
+}
+
+.flex {
+ display: flex;
+}
+
+.flex-wrap {
+ flex-wrap: wrap;
+}
+
+.flex-1 {
+ flex: 1;
+}
+
+.grid {
+ display: grid;
+}
+
+.flow-column {
+ grid-auto-flow: column;
+}
+
+.gap-0-3 {
+ gap: 0.3rem;
+}
+
+.gap-0-5 {
+ gap: 0.5rem;
+}
+
+.gap-1 {
+ gap: 1rem;
+}
+
+.gap-1-5 {
+ gap: 1.5rem;
+}
+
+.gap-2 {
+ gap: 2rem;
+}
+
+.gap-3 {
+ gap: 3rem;
+}
+
+.text-align-right {
+ text-align: right;
+}
+.text-align-left {
+ text-align: left;
+}
+
+.align-items-start {
+ align-items: flex-start;
+}
+.align-content-start {
+ align-content: flex-start;
+}
+
+.align-start {
+ align-content: flex-start;
+}
+
+.align-center {
+ align-items: center;
+}
+
+.align-end {
+ align-items: flex-end;
+}
+
+.text-center {
+ text-align: center;
+}
+
+.justify-start {
+ justify-items: start;
+}
+.justify-content-start {
+ justify-content: start;
+}
+
+.justify-center {
+ justify-content: center;
+}
+
+.justify-right {
+ margin-left: auto;
+}
+
+.align-self-start {
+ align-self: start;
+}
+.align-self-center {
+ align-self: center;
+}
+
+.align-self-end {
+ align-self: end;
+}
+
+.justify-self-center {
+ justify-self: center;
+}
+
+.justify-self-start {
+ justify-self: start;
+}
+
+.justify-self-end {
+ justify-self: end;
+}
+
+.flex-direction-column {
+ flex-direction: column;
+}
+
+.space-between {
+ justify-content: space-between;
+}
+
+.w-100 {
+ width: 100%;
+}
+
+.h-100 {
+ height: 100%;
+}
+
+.margin-right-0-3 {
+ margin-right: 0.3rem;
+}
+.margin-right-0-5 {
+ margin-right: 0.5rem;
+}
+
+.margin-left-0-5 {
+ margin-left: 0.5rem;
+}
+
+.margin-left-auto {
+ margin-left: auto;
+}
+.margin-right-auto {
+ margin-right: auto;
+}
+.margin-top-1 {
+ margin-top: 1rem;
+}
+.margin-bottom-0-5 {
+ margin-bottom: 0.5rem;
+}
+.margin-bottom-1 {
+ margin-bottom: 1rem;
+}
+.margin-bottom-2 {
+ margin-bottom: 2rem;
+}
+
+.margin-block-0-5 {
+ margin-block: 0.5rem;
+}
+.margin-block-1 {
+ margin-block: 1rem;
+}
+
+.margin-block-1-5 {
+ margin-block: 1.5rem;
+}
+
+.margin-inline-1 {
+ margin-inline: 1rem;
+}
+
+.margin-inline-1-5 {
+ margin-inline: 1.5rem;
+}
+
+.hidden {
+ display: none !important;
+}
+
+.no-transformations {
+ transform: none !important;
+}
+
+.full-bleed {
+ grid-column: 1/4;
+}
+
+.h1 {
+ font-size: 2.5rem;
+}
+
+.h2 {
+ font-size: 2rem;
+}
+
+.h3 {
+ font-size: 1.4rem;
+}
+
+.h4 {
+ font-size: 1rem;
+}
+
+.h5 {
+ font-size: 0.8rem;
+}
+
+.grid-3 {
+ grid-template-columns: 1fr auto auto;
+}
+
+.flow-column {
+ grid-auto-flow: column;
+}
+.w-100 {
+ width: 100%;
+}
+
+.color-0-8 {
+ color: rgba(var(--text-color), 0.8);
+}
+
+.weight-400 {
+ font-weight: 400;
+}
+
+.weight-500 {
+ font-weight: 500;
+}
+
+.card {
+ background-color: rgba(var(--text-color), 0.06);
+ border-radius: 0.5rem;
+ padding: max(1rem, 3vw);
+}
+
+.ripple {
+ height: 8rem;
+ width: 8rem;
+ position: absolute;
+ border-radius: 50%;
+ transform: scale(0);
+ background: radial-gradient(
+ circle,
+ rgba(var(--text-color), 0.3) 0%,
+ rgba(0, 0, 0, 0) 50%
+ );
+ pointer-events: none;
+}
+.interactive {
+ position: relative;
+ overflow: hidden;
+ cursor: pointer;
+ -webkit-tap-highlight-color: transparent;
+}
+
+.observe-empty-state:empty {
+ display: none;
+}
+
+.observe-empty-state:not(:empty) ~ .empty-state {
+ display: none;
+}
+
+.button__icon {
+ height: 1.2rem;
+ width: 1.2rem;
+
+ &--left {
+ margin-right: 0.5rem;
+ }
+
+ &--right {
+ margin-left: 0.5rem;
+ }
+}
+
+[data-editable] {
+ transition: padding 0.2s;
+ &:focus-within {
+ padding: 0.5em;
+ border-radius: 0.3rem;
+ outline: none;
+ background-color: rgba(var(--text-color), 0.06);
+ box-shadow: 0 0 0 0.1rem var(--accent-color) inset;
+ }
+}
+.multi-state-button {
+ display: grid;
+ text-align: center;
+ align-items: center;
+
+ & > * {
+ grid-area: 1/1/2/2;
+ }
+
+ button {
+ z-index: 1;
+ }
+}
+
+#confirmation_popup,
+#prompt_popup {
+ flex-direction: column;
+
+ h4 {
+ font-weight: 500;
+ margin-bottom: 0.5rem;
+ }
+
+ sm-button {
+ margin: 0;
+ }
+
+ .flex {
+ padding: 0;
+ margin-top: 1rem;
+
+ sm-button:first-of-type {
+ margin-right: 0.6rem;
+ margin-left: auto;
+ }
+ }
+}
+
+.popup__header {
+ display: grid;
+ gap: 0.5rem;
+ width: 100%;
+ padding: 0 1.5rem 0 0.5rem;
+ align-items: center;
+ grid-template-columns: auto 1fr auto;
+}
+
+.popup__header__close {
+ padding: 0.5rem;
+ cursor: pointer;
+}
+
+#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;
+
+ opacity: 0.8;
+ }
+ }
+ .sign-in-box {
+ width: calc(100vw - 4rem);
+ z-index: 1;
+ sm-input {
+ text-align: left;
+ }
+ h2 {
+ margin-bottom: 0.5rem;
+ }
+ h3 {
+ font-weight: 500;
+ }
+ h4 {
+ font-weight: 500;
+ margin-bottom: 1.5rem;
+ }
+ h5 {
+ opacity: 0.8;
+ font-weight: 500;
+ }
+ 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;
+ }
+}
+
+#main_loader {
+ text-align: center;
+ place-content: center;
+ justify-items: center;
+ height: 100vh;
+ width: 100vw;
+ position: fixed;
+ left: 0;
+ gap: 1rem;
+ sm-button {
+ margin-left: 0;
+ margin-top: 1rem;
+ width: max-content;
+ justify-self: center;
+ }
+
+ h3 {
+ width: 100%;
+ font-weight: 400;
+ word-spacing: 0.16em;
+ }
+}
+
+#main_header {
+ align-items: center;
+ gap: 1rem;
+ padding: 1rem;
+ box-shadow: 0 0.1rem 0.2rem #00000010;
+ background: rgba(var(--foreground-color), 1);
+ grid-template-columns: 1fr auto;
+ h5 {
+ font-weight: 500;
+
+ opacity: 0.8;
+ }
+ h4 {
+ font-size: 1.2rem;
+ }
+}
+#user_profile_button {
+ background-color: rgba(var(--text-color), 0.06);
+ border-radius: 2rem;
+ font-size: 0.8rem;
+ padding: 0.6rem 0.8rem;
+}
+#home_page {
+ padding: 1rem;
+}
+.section-header {
+ position: sticky;
+ top: 0;
+ z-index: 1;
+ background: var(--dark-shade);
+ 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;
+ border-radius: 2rem;
+}
+
+#sheets_container {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
+ gap: 0.5rem;
+ 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 {
+ .sheet-card__icon {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ position: relative;
+ background: url(card-bg1.svg), #a7003e;
+ background-size: cover;
+ }
+ .icon {
+ fill: rgba(var(--foreground-color), 1);
+ }
+}
+
+.sheet-card {
+ position: relative;
+ display: grid;
+ color: inherit;
+ grid-template-columns: auto 1fr auto;
+ align-items: center;
+ gap: 0.8rem;
+ background-color: rgba(var(--foreground-color), 1);
+ padding: 1rem;
+ border-radius: 0.5rem;
+ transition: 0.2s;
+ border: solid thin rgba(var(--text-color), 0.1);
+ &__icon {
+ display: flex;
+ padding: 0.6rem;
+ border-radius: 2rem;
+ background: rgba(var(--text-color), 0.06);
+ }
+ h4 {
+ font-size: 0.9rem;
+ font-weight: 500;
+ }
+ &__type {
+ font-size: 0.8rem;
+ background: rgba(var(--text-color), 0.1);
+ padding: 0.3rem 0.6rem;
+ border-radius: 1rem;
+ }
+}
+
+#sheet_view {
+ 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.5rem;
+ opacity: 0.8;
+}
+#sheet_editors {
+ gap: 0.5rem;
+ 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);
+ }
+}
+#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);
+ padding: 0.4rem;
+ background-color: rgba(var(--text-color), 0.1);
+}
+#sheet_details {
+ padding: 1rem;
+ .flex:nth-of-type(2) {
+ padding: 0.5rem 0;
+ button:first-of-type {
+ margin-left: -0.7rem;
+ }
+ }
+ &.collapse {
+ padding: 0.5rem 1rem;
+ #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%;
+}
+table {
+ border-collapse: collapse;
+ position: relative;
+ width: 100%;
+ 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;
+ cursor: pointer;
+}
+tr {
+ &:nth-of-type(2n) {
+ background-color: rgba(var(--text-color), 0.04);
+ }
+}
+td {
+ padding: 0.4rem 0.8rem;
+ opacity: 0.9;
+ &:nth-of-type(n + 3) {
+ min-width: 12em;
+ }
+}
+.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";
+}
+
+#sheet_processing_popup {
+ &::part(popup) {
+ min-height: 80vh;
+ }
+ sm-select:last-of-type {
+ margin-left: 0.5rem;
+ }
+ th,
+ td {
+ padding: 1rem;
+ }
+}
+
+#side_bar {
+ position: fixed;
+ transform: translateX(-100%);
+ background: rgba(var(--background-color), 1);
+ bottom: 0;
+ top: 0;
+ left: 0;
+ right: 0;
+ width: 100%;
+ & > .flex:first-of-type {
+ padding: 0.5rem 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;
+ &: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;
+}
+
+#profile_popup {
+ section:not(:last-of-type) {
+ margin-bottom: 1.5rem;
+ }
+}
+#editors_container,
+#columns_container,
+#additional_fields {
+ gap: 0.4rem;
+}
+#specify_editors {
+ border-top: solid 1px rgba(var(--text-color), 0.2);
+ padding-top: 1rem;
+}
+#add_editor,
+#add_column,
+#add_detail {
+ sm-input {
+ width: 100%;
+ }
+}
+#add_detail {
+ gap: 0.2rem;
+ grid-template-columns: 1fr auto;
+ grid-template-areas: ". add" ". add";
+ button {
+ 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-address {
+ 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;
+ }
+ .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 {
+ margin: 0 !important;
+ }
+ h5 {
+ font-weight: 400;
+ opacity: 0.8;
+ }
+ h4 {
+ font-size: 1rem !important;
+ }
+ button {
+ grid-area: close;
+ }
+}
+
+#save_button {
+ position: fixed;
+ overflow: hidden;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ width: min(calc(100% - 2rem), 24rem);
+ padding: 1rem;
+ margin: 1rem;
+ border-radius: 0.5rem;
+ border: solid thin rgba(var(--text-color), 0.1);
+ background: rgba(var(--foreground-color), 1);
+ z-index: 20;
+ box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.16);
+ #changes_indicator {
+ position: absolute;
+ left: 0;
+ width: 0.3rem;
+ border-radius: 0 0.5rem 0.5rem 0;
+ height: 2em;
+ background: red;
+ }
+ sm-button {
+ margin-left: 1rem;
+ }
+}
+
+@media screen and (max-width: 640px) {
+ #processed_sheet_view {
+ overflow: auto;
+ max-width: calc(100vw - 3rem);
+ }
+ #user_profile_button {
+ grid-area: 1/1/2/2;
+ }
+ theme-toggle {
+ grid-area: 1/2/2/3;
+ }
+ .hide-on-mobile {
+ display: none;
+ }
+}
+@media screen and (min-width: 640px) {
+ .hide-on-desktop {
+ display: none;
+ }
+ sm-popup {
+ --width: 24rem;
+ }
+ .popup__header {
+ padding: 1.5rem 1.5rem 0 0.75rem;
+ }
+ #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 {
+ grid-template-columns: 1fr auto auto;
+ padding: 1.2rem 3rem;
+ }
+ #home_page {
+ grid-template-columns: 1fr 80vw 1fr;
+ grid-template-areas: ". main .";
+ }
+ #main_section {
+ grid-area: main;
+ }
+ #sheet_view {
+ &.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;
+ }
+ #sheet_processing_popup {
+ --width: 36rem;
+ &[data-mode="group"] {
+ --width: 80vw;
+ }
+ }
+ #save_button {
+ margin: 1rem auto;
+ }
+}
+@media screen and (min-width: 1920px) {
+ #home_page {
+ 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;
+ }
+ .sheet-card {
+ &:hover {
+ transform: scale(1.02);
+ box-shadow: 0 0.5rem 1rem rgba(0 0 0 /0.1);
+ z-index: 1;
+ }
+ }
+}
+.hidden {
+ display: none;
+}
diff --git a/flologsheet/css/sign-in-bg.svg b/flologsheet/css/sign-in-bg.svg
new file mode 100644
index 0000000..7b1da05
--- /dev/null
+++ b/flologsheet/css/sign-in-bg.svg
@@ -0,0 +1 @@
+sign-in-bg
\ No newline at end of file
diff --git a/flologsheet/css/welcome.ai b/flologsheet/css/welcome.ai
new file mode 100644
index 0000000..6a416d7
--- /dev/null
+++ b/flologsheet/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
+HnTI)뿶 ,x3HL$x}>H:MDQj9ܼ=sz$