1.0.0 Base template - worked on the distribution calcualtions

README.md

@@ -0,0 +1,3 @@
+# flobnb inputform
+
+The input form to enter data reg actors in flobnb system 

css/main.css

@@ -0,0 +1,489 @@
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+  font-family: "Roboto", sans-serif;
+}
+
+:root {
+  font-size: clamp(1rem, 1.2vmax, 3rem);
+}
+
+html, body {
+  height: 100%;
+  scroll-behavior: smooth;
+}
+
+body {
+  color: rgba(var(--text-color), 1);
+  background: rgba(var(--background-color), 1);
+}
+body,
+body * {
+  --accent-color: #0D7377;
+  --text-color: 17, 17, 17;
+  --background-color: 255, 255, 255;
+  --danger-color: red;
+}
+
+body[data-theme=dark],
+body[data-theme=dark] * {
+  --accent-color: #32E0C4;
+  --text-color: 240, 240, 240;
+  --text-color-light: 170, 170, 170;
+  --background-color: 10, 10, 10;
+  --danger-color: rgb(255, 106, 106);
+}
+
+p {
+  font-size: 0.8;
+  max-width: 65ch;
+  line-height: 1.7;
+  margin-bottom: 1.5rem;
+  color: rgba(var(--text-color), 0.8);
+}
+p:not(:last-of-type) {
+  margin-bottom: 1rem;
+}
+
+img {
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+a:focus-visible {
+  box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1) inset;
+}
+
+button {
+  display: inline-flex;
+  border: none;
+  background-color: inherit;
+}
+
+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;
+}
+
+sm-button {
+  --border-radius: 0.3rem;
+}
+
+sm-input {
+  --padding: 0.8rem 1rem;
+}
+
+ul {
+  list-style: none;
+}
+
+.flex {
+  display: flex;
+}
+
+.grid {
+  display: grid;
+}
+
+.hide {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.hide-completely {
+  display: none !important;
+}
+
+.no-transformations {
+  transform: none !important;
+}
+
+.overflow-ellipsis {
+  width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.breakable {
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  -ms-word-break: break-all;
+  word-break: break-word;
+  -ms-hyphens: auto;
+  -webkit-hyphens: auto;
+  hyphens: auto;
+}
+
+.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;
+}
+
+.uppercase {
+  text-transform: uppercase;
+}
+
+.capitalize {
+  text-transform: capitalize;
+}
+
+.flex {
+  display: flex;
+}
+
+.grid {
+  display: grid;
+}
+
+.grid-3 {
+  grid-template-columns: 1fr auto auto;
+}
+
+.flow-column {
+  grid-auto-flow: column;
+}
+
+.gap-0-5 {
+  gap: 0.5rem;
+}
+
+.gap-1 {
+  gap: 1rem;
+}
+
+.gap-1-5 {
+  gap: 1.5rem;
+}
+
+.gap-2 {
+  gap: 2rem;
+}
+
+.gap-3 {
+  gap: 3rem;
+}
+
+.text-align-right {
+  text-align: right;
+}
+
+.align-start {
+  align-items: flex-start;
+}
+
+.align-center {
+  align-items: center;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.justify-start {
+  justify-content: start;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.justify-right {
+  margin-left: auto;
+}
+
+.align-self-center {
+  align-self: center;
+}
+
+.justify-self-center {
+  justify-self: center;
+}
+
+.justify-self-start {
+  justify-self: start;
+}
+
+.justify-self-end {
+  justify-self: end;
+}
+
+.direction-column {
+  flex-direction: column;
+}
+
+.space-between {
+  justify-content: space-between;
+}
+
+.w-100 {
+  width: 100%;
+}
+
+.color-0-8 {
+  color: rgba(var(--text-color), 0.8);
+}
+
+.weight-400 {
+  font-weight: 400;
+}
+
+.weight-500 {
+  font-weight: 500;
+}
+
+.ripple {
+  position: absolute;
+  border-radius: 50%;
+  transform: scale(0);
+  background: rgba(var(--text-color), 0.16);
+  pointer-events: none;
+}
+
+.interact {
+  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;
+}
+
+.icon {
+  width: 1.5rem;
+  height: 1.5rem;
+  fill: rgba(var(--text-color), 0.9);
+}
+
+.button__icon {
+  height: 1.2rem;
+  width: 1.2rem;
+}
+.button__icon--left {
+  margin-right: 0.5rem;
+}
+.button__icon--right {
+  margin-left: 0.5rem;
+}
+
+#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;
+}
+
+h1, h2, h3, h4.h5 {
+  font-family: "Poppins", sans-serif;
+}
+
+h2 {
+  margin: 3rem 0 1rem 0;
+  text-transform: capitalize;
+}
+
+main {
+  display: grid;
+  height: 100%;
+}
+
+#main_header {
+  padding: 0.5rem 1.5rem;
+  border-bottom: 1px solid rgba(var(--text-color), 0.1);
+}
+
+#side_nav_button {
+  padding: 0.5rem;
+  margin-left: -0.5rem;
+}
+
+#logo {
+  display: grid;
+  align-items: center;
+  width: 100%;
+  grid-template-columns: auto 1fr;
+  gap: 0 0.5rem;
+  margin-right: 1rem;
+}
+#logo h4 {
+  text-transform: capitalize;
+  font-size: 1rem;
+  font-weight: 600;
+}
+#logo #main_logo {
+  height: 1.4rem;
+  width: 1.4rem;
+  fill: rgba(var(--text-color), 1);
+  stroke: none;
+}
+
+.right {
+  max-height: 100%;
+  overflow-y: auto;
+}
+
+#side_nav > :last-child {
+  padding-bottom: 3rem;
+}
+#side_nav h4 {
+  font-size: 0.9rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  padding: 1.5rem;
+}
+
+.right {
+  padding: 1.5rem;
+}
+.right h1 {
+  margin-bottom: 1.5rem;
+}
+
+.page {
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 3rem;
+}
+
+.nav-list {
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 0.8rem;
+}
+
+.nav-list__item {
+  display: flex;
+  padding: 0.8rem 1.5rem;
+  text-transform: capitalize;
+}
+.nav-list__item--active {
+  color: var(--accent-color);
+  background: rgba(var(--text-color), 0.06);
+}
+
+@media screen and (max-width: 640px) {
+  main {
+    grid-template-rows: auto 1fr;
+    grid-template-columns: 1fr;
+  }
+}
+@media screen and (min-width: 640px) {
+  sm-popup {
+    --width: 32rem;
+  }
+
+  #main_header {
+    padding: 1rem 1.5rem;
+    grid-area: main-header;
+  }
+
+  #side_nav_button {
+    display: none;
+  }
+
+  main {
+    grid-template-columns: 14rem minmax(0, 1fr);
+    grid-template-rows: auto 1fr;
+    grid-template-areas: "main-header main-header" ". .";
+  }
+
+  .right {
+    display: grid;
+    grid-template-columns: 1fr 90% 1fr;
+  }
+  .right > * {
+    grid-column: 2/3;
+  }
+
+  .page__title {
+    font-size: 2.5rem;
+  }
+
+  #overview_page {
+    display: grid;
+    gap: 1.5rem;
+    grid-template-columns: 1fr auto;
+  }
+  #overview_page > div:first-of-type {
+    grid-column: 2/3;
+    text-align: right;
+  }
+  #overview_page > div:nth-of-type(2) {
+    grid-row: 1/2;
+  }
+}
+@media (any-hover: hover) {
+  ::-webkit-scrollbar {
+    width: 0.5rem;
+    height: 0.5rem;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: rgba(var(--text-color), 0.3);
+    border-radius: 1rem;
+  }
+  ::-webkit-scrollbar-thumb:hover {
+    background: rgba(var(--text-color), 0.5);
+  }
+
+  .nav-list__item:hover {
+    background: rgba(var(--text-color), 0.1);
+    cursor: pointer;
+  }
+}
+/*# sourceMappingURL=main.css.map */

css/main.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["main.scss","main.css"],"names":[],"mappings":"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","file":"main.css"}

css/main.min.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["main.scss"],"names":[],"mappings":"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","file":"main.min.css"}

css/main.scss

@@ -0,0 +1,404 @@
+*{
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+    font-family: 'Roboto', sans-serif;
+}
+:root{
+    font-size: clamp(1rem, 1.2vmax, 3rem);
+}
+html, body{
+    height: 100%;
+    scroll-behavior: smooth;
+}
+body {
+    &,
+    *{
+        --accent-color: #0D7377;
+        --text-color: 17, 17, 17;
+        --background-color: 255, 255, 255;
+        --danger-color: red;
+    }
+    color: rgba(var(--text-color), 1);
+    background: rgba(var(--background-color), 1);
+}
+body[data-theme='dark']{
+    &,
+    *{
+        --accent-color: #32E0C4;
+        --text-color: 240, 240, 240;
+        --text-color-light: 170, 170, 170;
+        --background-color: 10, 10, 10;
+        --danger-color: rgb(255, 106, 106);
+    }
+}
+p {
+    font-size: 0.8;
+    max-width: 65ch;
+    line-height: 1.7;
+    margin-bottom: 1.5rem;
+    color: rgba(var(--text-color), 0.8);
+    &:not(:last-of-type){
+        margin-bottom: 1rem;
+    }
+}
+img{
+    object-fit: cover;
+}
+
+a{
+    color: inherit;
+    text-decoration: none;
+    &:focus-visible{
+        box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1) inset;
+    }
+}
+
+button{
+    display: inline-flex;
+    border: none;
+    background-color: inherit;
+}
+
+a:any-link:focus-visible{
+    outline: rgba(var(--text-color), 1) 0.1rem solid;
+}
+sm-button{
+    --border-radius: 0.3rem;
+}
+sm-input{
+    --padding: 0.8rem 1rem;
+}
+ul{
+    list-style: none;
+}
+.flex{
+    display: flex;
+}
+.grid{
+    display: grid;
+}
+.hide{
+    opacity: 0;
+    pointer-events: none;
+}
+.hide-completely{
+    display: none !important;
+}
+.no-transformations{
+    transform: none !important;
+}
+.overflow-ellipsis{
+    width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+.breakable{
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    -ms-word-break: break-all;
+    word-break: break-word;
+    -ms-hyphens: auto;
+    -moz-hyphens: auto;
+    -webkit-hyphens: auto;
+    hyphens: auto;
+}
+.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;
+}
+
+.uppercase{
+    text-transform: uppercase;
+}
+.capitalize{
+    text-transform: capitalize;
+}
+.flex{
+    display: flex;
+}
+.grid{
+    display: grid;
+}
+.grid-3{
+    grid-template-columns: 1fr auto auto;
+}
+.flow-column{
+    grid-auto-flow: column;
+}
+.gap-0-5{
+    gap: 0.5rem;
+}
+.gap-1{
+    gap: 1rem;
+}
+.gap-1-5{
+    gap: 1.5rem;
+}
+.gap-2{
+    gap: 2rem;
+}
+.gap-3{
+    gap: 3rem;
+}
+.text-align-right{
+    text-align: right;
+}
+.align-start{
+    align-items: flex-start;
+}
+.align-center{
+    align-items: center;
+}
+.text-center{
+    text-align: center;
+}
+.justify-start{
+    justify-content: start;
+}
+.justify-center{
+    justify-content: center;
+}
+.justify-right{
+    margin-left: auto;
+}
+.align-self-center{
+    align-self: center;
+}
+.justify-self-center{
+    justify-self: center;
+}
+.justify-self-start{
+    justify-self: start;
+}
+.justify-self-end{
+    justify-self: end;
+}
+.direction-column{
+    flex-direction: column;
+}
+.space-between{
+    justify-content: space-between;
+}
+.w-100{
+    width: 100%;
+}
+.color-0-8{
+    color: rgba(var(--text-color), 0.8);
+}
+.weight-400{
+    font-weight: 400;
+}
+.weight-500{
+    font-weight: 500;
+}
+.ripple{
+    position: absolute;
+    border-radius: 50%;
+    transform: scale(0);
+    background: rgba(var(--text-color), 0.16);
+    pointer-events: none;
+}
+.interact{
+    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;
+}
+.icon{
+    width: 1.5rem;
+    height: 1.5rem;
+    fill: rgba(var(--text-color), 0.9);
+}
+.button__icon{
+    height: 1.2rem;
+    width: 1.2rem;
+    &--left{
+        margin-right: 0.5rem;
+    }
+    &--right{
+        margin-left: 0.5rem;
+    }
+}
+#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;
+        }
+    }
+}
+h1,h2,h3,h4.h5{
+    font-family: 'Poppins', sans-serif;
+}
+h2{
+  margin: 3rem 0 1rem 0;
+  text-transform: capitalize;
+}
+main{
+    display: grid;
+    height: 100%;
+}
+#main_header{
+    padding: 0.5rem 1.5rem;
+    border-bottom: 1px solid rgba(var(--text-color), .1);
+}
+#side_nav_button{
+    padding: 0.5rem;
+    margin-left: -0.5rem;
+}
+#logo{
+    display: grid;
+    align-items: center;
+    width: 100%;
+    grid-template-columns: auto 1fr;
+    gap: 0 0.5rem;
+    margin-right: 1rem;
+    h4{
+        text-transform: capitalize;
+        font-size: 1rem;
+        font-weight: 600;
+    }
+    #main_logo{
+        height: 1.4rem;
+        width: 1.4rem;
+        fill: rgba(var(--text-color), 1);
+        stroke: none;
+    }
+}
+.right{
+    max-height: 100%;
+    overflow-y: auto;
+}
+#side_nav{
+    & > :last-child{
+        padding-bottom: 3rem;
+    }
+    h4{
+        font-size: 0.9rem;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+        padding: 1.5rem;
+    }
+}
+.right{
+    padding: 1.5rem;
+    h1{
+        margin-bottom: 1.5rem;
+    }
+}
+.page{
+    display: flex;
+    flex-direction: column;
+    padding-bottom: 3rem;
+}    
+.nav-list{
+    list-style: none;
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 0.8rem;
+}
+.nav-list__item{
+    display: flex;
+    padding: 0.8rem 1.5rem;
+    text-transform: capitalize;
+    &--active{
+        color: var(--accent-color);
+        background: rgba(var(--text-color), .06);
+    }
+}
+@media screen and (max-width: 640px){
+    main{
+        grid-template-rows: auto 1fr;
+        grid-template-columns: 1fr;
+    }
+}
+@media screen and (min-width: 640px){
+    sm-popup{
+        --width: 32rem;
+    }
+    #main_header{
+        padding: 1rem 1.5rem;
+        grid-area: main-header;
+    }
+    #side_nav_button{
+        display: none;
+    }
+    main{
+        grid-template-columns: 14rem minmax(0, 1fr);
+        grid-template-rows: auto 1fr;
+        grid-template-areas: 'main-header main-header' '. .';
+    }   
+    .right{
+        display: grid;
+        grid-template-columns: 1fr 90% 1fr;
+        & > * {
+            grid-column: 2/3;
+        }
+    }
+    .page__title{
+        font-size: 2.5rem;
+    }
+    #overview_page{
+        display: grid;
+        gap: 1.5rem;
+        grid-template-columns: 1fr auto;
+        & > div:first-of-type{
+            grid-column: 2/3;
+            text-align: right;
+        }
+        & > div:nth-of-type(2){
+            grid-row: 1/2;
+        }
+    }
+}
+@media (any-hover: hover){
+    ::-webkit-scrollbar{
+        width: 0.5rem;
+        height: 0.5rem;
+    }
+    
+    ::-webkit-scrollbar-thumb{
+        background: rgba(var(--text-color), 0.3);
+        border-radius: 1rem;
+        &:hover{
+            background: rgba(var(--text-color), 0.5);
+        }
+    }
+    .nav-list__item:hover{
+        background: rgba(var(--text-color), .1);
+        cursor: pointer;
+    }
+}

js/main_UI.js

@@ -0,0 +1,305 @@
+// Global variables
+const appPages = ['dashboard', 'updates', 'settings'];
+const domRefs = {};
+let timerId;
+const currentYear = new Date().getFullYear();
+
+//Checks for internet connection status
+if (!navigator.onLine)
+    notify(
+        "There seems to be a problem connecting to the internet, Please check you internet connection.",
+        "error",
+        { sound: true }
+    );
+window.addEventListener("offline", () => {
+    notify(
+        "There seems to be a problem connecting to the internet, Please check you internet connection.",
+        "error",
+        { pinned: true, sound: true }
+    );
+});
+window.addEventListener("online", () => {
+    getRef("notification_drawer").clearAll();
+    notify("We are back online.", "success");
+});
+
+// Use instead of document.getElementById
+function getRef(elementId) {
+    if (!domRefs.hasOwnProperty(elementId)) {
+        domRefs[elementId] = {
+            count: 1,
+            ref: null,
+        };
+        return document.getElementById(elementId);
+    } else {
+        if (domRefs[elementId].count < 3) {
+            domRefs[elementId].count = domRefs[elementId].count + 1;
+            return document.getElementById(elementId);
+        } else {
+            if (!domRefs[elementId].ref)
+                domRefs[elementId].ref = document.getElementById(elementId);
+            return domRefs[elementId].ref;
+        }
+    }
+}
+
+// returns dom with specified element
+function createElement(tagName, options) {
+    const { className, textContent, innerHTML, attributes = {} } = options
+    const elem = document.createElement(tagName)
+    for (let attribute in attributes) {
+        elem.setAttribute(attribute, attributes[attribute])
+    }
+    if (className)
+        elem.className = className
+    if (textContent)
+        elem.textContent = textContent
+    if (innerHTML)
+        elem.innerHTML = innerHTML
+    return elem
+}
+
+// Use when a function needs to be executed after user finishes changes
+const debounce = (callback, wait) => {
+    let timeoutId = null;
+    return (...args) => {
+        window.clearTimeout(timeoutId);
+        timeoutId = window.setTimeout(() => {
+            callback.apply(null, args);
+        }, wait);
+    };
+}
+
+// Limits the rate of function execution
+function throttle(func, delay) {
+    // If setTimeout is already scheduled, no need to do anything
+    if (timerId) {
+        return;
+    }
+
+    // Schedule a setTimeout after delay seconds
+    timerId = setTimeout(function () {
+        func();
+
+        // Once setTimeout function execution is finished, timerId = undefined so that in
+        // the next scroll event function execution can be scheduled by the setTimeout
+        timerId = undefined;
+    }, delay);
+}
+
+class Stack {
+    constructor() {
+        this.items = [];
+    }
+    push(element) {
+        this.items.push(element);
+    }
+    pop() {
+        if (this.items.length == 0)
+        return "Underflow";
+        return this.items.pop();
+    }
+    peek() {
+        return this.items[this.items.length - 1];
+    }
+}
+
+// function required for popups or modals to appear
+function showPopup(popupId, pinned) {
+    zIndex++
+    getRef(popupId).setAttribute('style', `z-index: ${zIndex}`)
+    popupStack = getRef(popupId).show({ pinned, popupStack })
+    return getRef(popupId);
+}
+
+// hides the popup or modal 
+function hidePopup() {
+    if (popupStack.peek() === undefined)
+        return;
+    popupStack.peek().popup.hide()
+}
+
+// displays a popup for asking permission. Use this instead of JS confirm
+const getConfirmation = (title, message, cancelText = 'Cancel', confirmText = 'OK') => {
+    return new Promise(resolve => {
+        showPopup('confirmation_popup', true)
+        getRef('confirm_title').textContent = title;
+        getRef('confirm_message').textContent = message;
+        let cancelButton = getRef('confirmation_popup').children[2].children[0],
+            submitButton = getRef('confirmation_popup').children[2].children[1]
+        submitButton.textContent = confirmText
+        cancelButton.textContent = cancelText
+        submitButton.onclick = () => {
+            hidePopup()
+            resolve(true);
+        }
+        cancelButton.onclick = () => {
+            hidePopup()
+            resolve(false);
+        }
+    })
+}
+
+// displays a popup for asking user input. Use this instead of JS prompt
+async function getPromptInput(title, message = '', isPassword = true, cancelText = 'Cancel', confirmText = 'OK') {
+    showPopup('prompt_popup', true)
+    getRef('prompt_title').textContent = title;
+    let input = getRef('prompt_input');
+    input.setAttribute("placeholder", message)
+    let buttons = getRef('prompt_popup').querySelectorAll("sm-button");
+    if (isPassword)
+        input.setAttribute("type", "text")
+    else
+        input.setAttribute("type", "password")
+    input.focusIn()
+    buttons[0].textContent = cancelText;
+    buttons[1].textContent = confirmText;
+    return new Promise((resolve, reject) => {
+        buttons[0].onclick = () => {
+            hidePopup()
+            return;
+        }
+        buttons[1].onclick = () => {
+            let value = input.value;
+            hidePopup()
+            resolve(value)
+        }
+    })
+}
+
+//Function for displaying toast notifications. pass in error for mode param if you want to show an error.
+function notify(message, mode, options = {}) {
+    const { pinned = false, sound = false } = options
+    let icon
+    switch (mode) {
+        case 'success':
+            icon = `<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M10 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z"/></svg>`
+            break;
+        case 'error':
+            icon = `<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-7v2h2v-2h-2zm0-8v6h2V7h-2z"/></svg>`
+            break;
+    }
+    getRef("notification_drawer").push(message, { pinned, icon });
+    if (navigator.onLine && sound) {
+        getRef("notification_sound").currentTime = 0;
+        getRef("notification_sound").play();
+    }
+}
+
+function getFormatedTime(time, relative) {
+    try {
+        if (String(time).indexOf("_")) time = String(time).split("_")[0];
+        const intTime = parseInt(time);
+        if (String(intTime).length < 13) time *= 1000;
+        let timeFrag = new Date(intTime).toString().split(" "),
+            day = timeFrag[0],
+            month = timeFrag[1],
+            date = timeFrag[2],
+            year = timeFrag[3],
+            minutes = new Date(intTime).getMinutes(),
+            hours = new Date(intTime).getHours(),
+            currentTime = new Date().toString().split(" ");
+
+        minutes = minutes < 10 ? `0${minutes}` : minutes;
+        let finalHours = ``;
+        if (hours > 12) finalHours = `${hours - 12}:${minutes}`;
+        else if (hours === 0) finalHours = `12:${minutes}`;
+        else finalHours = `${hours}:${minutes}`;
+
+        finalHours = hours >= 12 ? `${finalHours} PM` : `${finalHours} AM`;
+        if (relative) {
+            return `${date} ${month} ${year}`;
+        } else return `${finalHours} ${month} ${date} ${year}`;
+    } catch (e) {
+        console.error(e);
+        return time;
+    }
+}
+
+window.addEventListener('hashchange', e => showPage(window.location.hash))
+window.addEventListener("load", () => {
+    document.body.classList.remove('hide-completely')
+    showPage(window.location.hash)
+    document.querySelectorAll('sm-input[data-flo-id]').forEach(input => input.customValidation = floCrypto.validateAddr)
+    document.addEventListener('keyup', (e) => {
+        if (e.code === 'Escape') {
+            hidePopup()
+        }
+    })
+    document.addEventListener("pointerdown", (e) => {
+        if (e.target.closest("button, sm-button:not([disabled]), .interact")) {
+            createRipple(e, e.target.closest("button, sm-button, .interact"));
+        }
+    });
+    document.addEventListener('copy', () => {
+        notify('copied', 'success')
+    })
+});
+
+function createRipple(event, target) {
+    const circle = document.createElement("span");
+    const diameter = Math.max(target.clientWidth, target.clientHeight);
+    const radius = diameter / 2;
+    const targetDimensions = target.getBoundingClientRect();
+    circle.style.width = circle.style.height = `${diameter}px`;
+    circle.style.left = `${event.clientX - (targetDimensions.left + radius)}px`;
+    circle.style.top = `${event.clientY - (targetDimensions.top + radius)}px`;
+    circle.classList.add("ripple");
+    const rippleAnimation = circle.animate(
+        [
+            {
+                transform: "scale(3)",
+                opacity: 0,
+            },
+        ],
+        {
+            duration: 1000,
+            fill: "forwards",
+            easing: "ease-out",
+        }
+    );
+    target.append(circle);
+    rippleAnimation.onfinish = () => {
+        circle.remove();
+    };
+}
+
+function showPage(targetPage, options = {}) {
+    const { firstLoad, hashChange } = options
+    let pageId
+    if (targetPage === '') {
+        pageId = 'overview_page'
+    }
+    else {
+        pageId = targetPage.includes('#') ? targetPage.split('#')[1] : targetPage
+    }
+    if(!appPages.includes(pageId)) return
+    document.querySelector('.page:not(.hide-completely)').classList.add('hide-completely')
+    document.querySelector('.nav-list__item--active').classList.remove('nav-list__item--active')
+    getRef(pageId).classList.remove('hide-completely')
+    getRef(pageId).animate([
+        {
+            opacity: 0,
+            transform: 'translateX(-1rem)'
+        },
+        {
+            opacity: 1,
+            transform: 'none'
+        },
+    ],
+        {
+            duration: 300,
+            easing: 'ease'
+        })
+    const targetListItem = document.querySelector(`.nav-list__item[href="#${pageId}"]`)
+    targetListItem.classList.add('nav-list__item--active')
+    if (firstLoad && window.innerWidth > 640 && targetListItem.getBoundingClientRect().top > getRef('side_nav').getBoundingClientRect().height) {
+        getRef('side_nav').scrollTo({
+            top: (targetListItem.getBoundingClientRect().top - getRef('side_nav').getBoundingClientRect().top + getRef('side_nav').scrollTop),
+            behavior: 'smooth'
+        })
+    }
+    if (hashChange && window.innerWidth < 640) {
+        getRef('side_nav').close()
+    }
+}