From c1fae039d085ec5f13b269f8be03a3fe6d1803a8 Mon Sep 17 00:00:00 2001 From: Vivek Teega Date: Thu, 10 Mar 2022 04:47:43 +0530 Subject: [PATCH] 1.0.0 Base template - worked on the distribution calcualtions --- .DS_Store | Bin 0 -> 6148 bytes README.md | 3 + css/main.css | 489 +++ css/main.css.map | 1 + css/main.min.css | 2 + css/main.min.css.map | 1 + css/main.scss | 404 ++ index.html | 9749 +++++++++++++++++++++++++++++++++++++++++ js/components.min.js | 6 + js/components1.min.js | 5 + js/main_UI.js | 305 ++ 11 files changed, 10965 insertions(+) create mode 100644 .DS_Store create mode 100644 README.md create mode 100644 css/main.css create mode 100644 css/main.css.map create mode 100644 css/main.min.css create mode 100644 css/main.min.css.map create mode 100644 css/main.scss create mode 100644 index.html create mode 100644 js/components.min.js create mode 100644 js/components1.min.js create mode 100644 js/main_UI.js diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..fcf00c9bc76ec9ac276e4f1ac3be7bbf9009ef24 GIT binary patch literal 6148 zcmeHK&2G~`5S~p!SyLe*REb`Y_QEZSY*h$2R5GC)daGmv2SBY|N5shSMzKREA;@>0 zpnZux2T#D`z_&jsN?i`UAXM#0v)}CO%xwI5v+E@yHkhRWQJ07~RAI|QbA_mJr44CW z&jyg`8j=bcLMtj8(a!NdGN9hweL5ydW167-^Zo+r!Imy(O!<0c_V7|pt2sOSepO5|FDLdF{zxWyR#v|M zleOBNTN}4I=bQX4e;GMX>Y4?}@;F_ISDU_=88m z?*7sEAAl$ADwt+6>r@gl}Fu z(v35N1+=CY9MM1~cjK z3mX?&tPPrUV)pXE?99yGP?(+_^@R>678-P|W56-6&OqCAyXyRZ`S<((dXnoo1{?!7 ziUHQyi}nV1Bzv|t9!{OL0(t~hqT*_U7b!6GQH)r16mLVdz%P^m3@z3M;eogh0ZoHz J90UK9f#2@Cfx-X) literal 0 HcmV?d00001 diff --git a/README.md b/README.md new file mode 100644 index 0000000..841f0d4 --- /dev/null +++ b/README.md @@ -0,0 +1,3 @@ +# flobnb inputform + +The input form to enter data reg actors in flobnb system \ No newline at end of file diff --git a/css/main.css b/css/main.css new file mode 100644 index 0000000..8111749 --- /dev/null +++ b/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 */ \ No newline at end of file diff --git a/css/main.css.map b/css/main.css.map new file mode 100644 index 0000000..cfa02bb --- /dev/null +++ b/css/main.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["main.scss","main.css"],"names":[],"mappings":"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","file":"main.css"} \ No newline at end of file diff --git a/css/main.min.css b/css/main.min.css new file mode 100644 index 0000000..258f878 --- /dev/null +++ b/css/main.min.css @@ -0,0 +1,2 @@ +*{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:.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 .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) .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}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:.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:.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:.5rem}.button__icon--right{margin-left:.5rem}#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}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:.5rem 1.5rem;border-bottom:1px solid rgba(var(--text-color), 0.1)}#side_nav_button{padding:.5rem;margin-left:-0.5rem}#logo{display:grid;align-items:center;width:100%;grid-template-columns:auto 1fr;gap: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:.9rem;letter-spacing:.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:.8rem}.nav-list__item{display:flex;padding:.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:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color), 0.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color), 0.5)}.nav-list__item:hover{background:rgba(var(--text-color), 0.1);cursor:pointer}} +/*# sourceMappingURL=main.min.css.map */ \ No newline at end of file diff --git a/css/main.min.css.map b/css/main.min.css.map new file mode 100644 index 0000000..786ddbb --- /dev/null +++ b/css/main.min.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["main.scss"],"names":[],"mappings":"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","file":"main.min.css"} \ No newline at end of file diff --git a/css/main.scss b/css/main.scss new file mode 100644 index 0000000..4d56bbb --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..3256ea4 --- /dev/null +++ b/index.html @@ -0,0 +1,9749 @@ + + + + + + + Flobnb form + + + + + + + + + + + +

+

+
+ Cancel + OK +
+ + +

+

+ +
+ Cancel + OK +
+ +
+
+ + + +
+ + + +
+
+

Flobnb Details

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, sint. Aperiam ipsum expedita tenetur + quasi, repellat ea. Laboriosam, earum ratione!

+ + + + + + + + + + + + Submit + + + Select file + +
+ +
+

Settings

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi nihil distinctio dolore molestias + ullam architecto ipsam qui possimus aliquam. Odio.

+
+
+
+ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/js/components.min.js b/js/components.min.js new file mode 100644 index 0000000..3f8d07f --- /dev/null +++ b/js/components.min.js @@ -0,0 +1,6 @@ +const smButton=document.createElement("template");smButton.innerHTML="\n\n
\n \n
",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(e){e?this.setAttribute("disabled",""):this.removeAttribute("disabled")}handleKeyDown(e){this.hasAttribute("disabled")||"Enter"!==e.key&&"Space"!==e.code||(e.preventDefault(),this.click())}connectedCallback(){this.hasAttribute("disabled")||this.setAttribute("tabindex","0"),this.setAttribute("role","button"),this.addEventListener("keydown",this.handleKeyDown)}attributeChangedCallback(e,t,n){"disabled"===e?(this.removeAttribute("tabindex"),this.setAttribute("aria-disabled","true")):(this.setAttribute("tabindex","0"),this.setAttribute("aria-disabled","false"))}}); +const hamburgerMenu=document.createElement("template");hamburgerMenu.innerHTML='\n\n
\n\n';class HamburgerMenu extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(hamburgerMenu.content.cloneNode(!0)),this.resumeScrolling=this.resumeScrolling.bind(this),this.open=this.open.bind(this),this.close=this.close.bind(this),this.sideNav=this.shadowRoot.querySelector(".side-nav"),this.backdrop=this.shadowRoot.querySelector(".backdrop"),this.isOpen=!1,this.animeOptions={duration:300,easing:"ease"}}static get observedAttributes(){return["open"]}resumeScrolling(){const n=document.body.style.top;window.scrollTo(0,-1*parseInt(n||"0")),setTimeout(()=>{document.body.style.overflow="auto",document.body.style.top="initial"},300)}open(){this.isOpen||(document.body.style.overflow="hidden",document.body.style.top=`-${window.scrollY}px`,this.classList.remove("hide"),this.sideNav.classList.add("reveal"),this.backdrop.classList.remove("hide"),this.backdrop.animate([{opacity:0},{opacity:1}],this.animeOptions).onfinish=(()=>{this.isOpen=!0,this.setAttribute("open","")}))}close(){this.isOpen&&(this.sideNav.classList.remove("reveal"),this.backdrop.animate([{opacity:1},{opacity:0}],this.animeOptions).onfinish=(()=>{this.backdrop.classList.add("hide"),this.classList.add("hide"),this.isOpen=!1,this.removeAttribute("open")}))}connectedCallback(){this.backdrop.addEventListener("click",this.close);const n=new ResizeObserver(n=>{window.innerWidth<640&&this.isOpen?this.classList.remove("hide"):this.classList.add("hide"),window.innerWidth>640&&this.classList.remove("hide")});n.observe(this)}disconnectedCallback(){this.backdrop.removeEventListener("click",this.close)}attributeChangedCallback(n,e,t){"open"===n&&this.hasAttribute("open")&&this.open()}}window.customElements.define("hamburger-menu",HamburgerMenu); +const smMenu=document.createElement("template");smMenu.innerHTML='\n\n
\n
\n \n
\n
\n \n
\n
',customElements.define("sm-menu",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smMenu.content.cloneNode(!0)),this.isOpen=!1,this.availableOptions,this.containerDimensions,this.animOptions={duration:200,easing:"ease"},this.optionList=this.shadowRoot.querySelector(".options"),this.menu=this.shadowRoot.querySelector(".menu"),this.icon=this.shadowRoot.querySelector(".icon"),this.expand=this.expand.bind(this),this.collapse=this.collapse.bind(this),this.toggle=this.toggle.bind(this),this.handleKeyDown=this.handleKeyDown.bind(this),this.handleClickoutSide=this.handleClickoutSide.bind(this)}static get observedAttributes(){return["value"]}get value(){return this.getAttribute("value")}set value(n){this.setAttribute("value",n)}expand(){this.isOpen||(this.optionList.classList.remove("hide"),this.optionList.animate([{transform:window.innerWidth<640?"translateY(1.5rem)":"translateY(-1rem)",opacity:"0"},{transform:"none",opacity:"1"}],this.animOptions).onfinish=(()=>{this.isOpen=!0,this.icon.classList.add("focused")}))}collapse(){this.isOpen&&(this.optionList.animate([{transform:"none",opacity:"1"},{transform:window.innerWidth<640?"translateY(1.5rem)":"translateY(-1rem)",opacity:"0"}],this.animOptions).onfinish=(()=>{this.isOpen=!1,this.icon.classList.remove("focused"),this.optionList.classList.add("hide")}))}toggle(){this.isOpen?this.collapse():this.expand()}handleKeyDown(n){n.target===this?"ArrowDown"===n.code?(n.preventDefault(),this.availableOptions[0].focus()):"Enter"!==n.code&&"Space"!==n.code||(n.preventDefault(),this.toggle()):"ArrowUp"===n.code?(n.preventDefault(),document.activeElement.previousElementSibling?document.activeElement.previousElementSibling.focus():this.availableOptions[this.availableOptions.length-1].focus()):"ArrowDown"===n.code?(n.preventDefault(),document.activeElement.nextElementSibling?document.activeElement.nextElementSibling.focus():this.availableOptions[0].focus()):"Enter"!==n.code&&"Space"!==n.code||(n.preventDefault(),n.target.click())}handleClickoutSide(n){this.contains(n.target)||2===n.button||this.collapse()}connectedCallback(){this.setAttribute("role","listbox"),this.setAttribute("aria-label","dropdown menu");const n=this.shadowRoot.querySelector(".options slot");n.addEventListener("slotchange",n=>{this.availableOptions=n.target.assignedElements(),this.containerDimensions=this.optionList.getBoundingClientRect()}),this.addEventListener("click",this.toggle),this.addEventListener("keydown",this.handleKeyDown),document.addEventListener("mousedown",this.handleClickoutSide)}disconnectedCallback(){this.removeEventListener("click",this.toggle),this.removeEventListener("keydown",this.handleKeyDown),document.removeEventListener("mousedown",this.handleClickoutSide)}});const menuOption=document.createElement("template");menuOption.innerHTML='\n\n
\n \n
',customElements.define("menu-option",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(menuOption.content.cloneNode(!0))}connectedCallback(){this.setAttribute("role","option"),this.addEventListener("keyup",n=>{"Enter"!==n.code&&"Space"!==n.code||(n.preventDefault(),this.click())})}}); +const smNotifications=document.createElement("template");smNotifications.innerHTML='\n\n
\n',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)}randString(n){let t="";const i="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";for(let o=0;o${o}\n

${n}

\n `,i&&(e.classList.add("pinned"),a+='\n \n '),e.innerHTML=a,e}push(n,t={}){const i=this.createNotification(n,t);return this.notificationPanel.append(i),i.animate([{transform:"translateY(1rem)",opacity:"0"},{transform:"none",opacity:"1"}],this.animationOptions),i.id}removeNotification(n){n.animate([{transform:"none",opacity:"1"},{transform:"translateY(0.5rem)",opacity:"0"}],this.animationOptions).onfinish=(()=>{n.remove()})}clearAll(){Array.from(this.notificationPanel.children).forEach(n=>{this.removeNotification(n)})}connectedCallback(){this.notificationPanel.addEventListener("click",n=>{n.target.closest(".close")&&this.removeNotification(n.target.closest(".notification"))});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})}}); +const smPopup=document.createElement("template");smPopup.innerHTML='\n\n\n',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.pinned=!1,this.popupStack,this.offset,this.touchStartY=0,this.touchEndY=0,this.touchStartTime=0,this.touchEndTime=0,this.touchEndAnimataion,this.popupContainer=this.shadowRoot.querySelector(".popup-container"),this.popup=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.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.movePopup=this.movePopup.bind(this)}static get observedAttributes(){return["open"]}get open(){return this.isOpen}resumeScrolling(){const t=document.body.style.top;window.scrollTo(0,-1*parseInt(t||"0")),setTimeout(()=>{document.body.style.overflow="auto",document.body.style.top="initial"},300)}show(t={}){const{pinned:e=!1,popupStack:n}=t;return n&&(this.popupStack=n),this.popupStack&&!this.hasAttribute("open")&&(this.popupStack.push({popup:this,permission:e}),this.popupStack.items.length>1&&this.popupStack.items[this.popupStack.items.length-2].popup.classList.add("stacked"),this.dispatchEvent(new CustomEvent("popupopened",{bubbles:!0,detail:{popup:this,popupStack:this.popupStack}})),this.setAttribute("open",""),this.pinned=e,this.isOpen=!0),this.popupContainer.classList.remove("hide"),this.popup.style.transform="none",document.body.style.overflow="hidden",document.body.style.top=`-${window.scrollY}px`,this.popupStack}hide(){window.innerWidth<640?this.popup.style.transform="translateY(100%)":this.popup.style.transform="translateY(3rem)",this.popupContainer.classList.add("hide"),this.removeAttribute("open"),void 0!==this.popupStack?(this.popupStack.pop(),this.popupStack.items.length?this.popupStack.items[this.popupStack.items.length-1].popup.classList.remove("stacked"):this.resumeScrolling()):this.resumeScrolling(),this.forms.length&&setTimeout(()=>{this.forms.forEach(t=>t.reset())},300),setTimeout(()=>{this.dispatchEvent(new CustomEvent("popupclosed",{bubbles:!0,detail:{popup:this,popupStack:this.popupStack}})),this.isOpen=!1},300)}handleTouchStart(t){this.touchStartY=t.changedTouches[0].clientY,this.popup.style.transition="transform 0.1s",this.touchStartTime=t.timeStamp}handleTouchMove(t){this.touchStartYthis.movePopup()))}handleTouchEnd(t){if(this.touchEndTime=t.timeStamp,cancelAnimationFrame(this.touchEndAnimataion),this.touchEndY=t.changedTouches[0].clientY,this.popup.style.transition="transform 0.3s",this.threshold=.3*this.popup.getBoundingClientRect().height,this.touchEndTime-this.touchStartTime>200)if(this.touchEndY-this.touchStartY>this.threshold){if(this.pinned)return void this.show();this.hide()}else this.show();else if(this.touchEndY>this.touchStartY){if(this.pinned)return void this.show();this.hide()}}movePopup(){this.popup.style.transform=`translateY(${this.offset}px)`}connectedCallback(){this.popupBodySlot.addEventListener("slotchange",()=>{this.forms=this.querySelectorAll("sm-form")}),this.popupContainer.addEventListener("mousedown",t=>{t.target!==this.popupContainer||this.pinned||(this.pinned?this.show():this.hide())});const t=new ResizeObserver(t=>{for(let e of t)if(e.contentBoxSize){Array.isArray(e.contentBoxSize)?e.contentBoxSize[0]:e.contentBoxSize;this.threshold=.3*e.blockSize.height}else this.threshold=.3*e.contentRect.height});t.observe(this),this.popupHeader.addEventListener("touchstart",t=>{this.handleTouchStart(t)},{passive:!0}),this.popupHeader.addEventListener("touchmove",t=>{this.handleTouchMove(t)},{passive:!0}),this.popupHeader.addEventListener("touchend",t=>{this.handleTouchEnd(t)},{passive:!0})}disconnectedCallback(){this.popupHeader.removeEventListener("touchstart",this.handleTouchStart,{passive:!0}),this.popupHeader.removeEventListener("touchmove",this.handleTouchMove,{passive:!0}),this.popupHeader.removeEventListener("touchend",this.handleTouchEnd,{passive:!0}),resizeObserver.unobserve()}attributeChangedCallback(t,e,n){"open"===t&&this.hasAttribute("open")&&this.show()}}); +const themeToggle=document.createElement("template");themeToggle.innerHTML='\n \n \n';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){"Space"===e.code&&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.theme?(this.nightlight(),this.setAttribute("checked","")):"light"===localStorage.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("theme","dark")):(this.daylight(),localStorage.setItem("theme","light")))}}window.customElements.define("theme-toggle",ThemeToggle); diff --git a/js/components1.min.js b/js/components1.min.js new file mode 100644 index 0000000..f4b0a5e --- /dev/null +++ b/js/components1.min.js @@ -0,0 +1,5 @@ +const smCheckbox=document.createElement("template");smCheckbox.innerHTML='\n\n',customElements.define("sm-checkbox",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smCheckbox.content.cloneNode(!0)),this.defaultState,this.checkbox=this.shadowRoot.querySelector(".checkbox"),this.reset=this.reset.bind(this),this.dispatch=this.dispatch.bind(this),this.handleKeyDown=this.handleKeyDown.bind(this),this.handleClick=this.handleClick.bind(this)}static get observedAttributes(){return["value","disabled","checked"]}get disabled(){return this.hasAttribute("disabled")}set disabled(e){e?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get checked(){return this.hasAttribute("checked")}set checked(e){e?this.setAttribute("checked",""):this.removeAttribute("checked")}set value(e){this.setAttribute("value",e)}get value(){return this.getAttribute("value")}focusIn(){this.focus()}reset(){this.value=this.defaultState}dispatch(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0}))}handleKeyDown(e){" "===e.key&&(e.preventDefault(),this.click())}handleClick(e){this.toggleAttribute("checked")}connectedCallback(){this.hasAttribute("disabled")||this.setAttribute("tabindex","0"),this.setAttribute("role","checkbox"),this.defaultState=this.hasAttribute("checked"),this.hasAttribute("checked")||this.setAttribute("aria-checked","false"),this.addEventListener("keydown",this.handleKeyDown),this.addEventListener("click",this.handleClick)}attributeChangedCallback(e,t,n){t!==n&&("checked"===e?(this.setAttribute("aria-checked",this.hasAttribute("checked")),this.dispatch()):"disabled"===e&&(this.hasAttribute("disabled")?this.removeAttribute("tabindex"):this.setAttribute("tabindex","0")))}disconnectedCallback(){this.removeEventListener("keydown",this.handleKeyDown),this.removeEventListener("change",this.handleClick)}}); +const smCopy=document.createElement("template");smCopy.innerHTML='\n\n
\n

\n \n
\n',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(n){this.setAttribute("value",n)}get value(){return this.getAttribute("value")}fireEvent(){this.dispatchEvent(new CustomEvent("copy",{composed:!0,bubbles:!0,cancelable:!0}))}copy(){navigator.clipboard.writeText(this.copyContent.textContent).then(n=>this.fireEvent()).catch(n=>console.error(n))}connectedCallback(){this.copyButton.addEventListener("click",this.copy)}attributeChangedCallback(n,t,o){"value"===n&&(this.copyContent.textContent=o)}disconnectedCallback(){this.copyButton.removeEventListener("click",this.copy)}}); +const smForm=document.createElement("template");smForm.innerHTML='\n \n\t
\n\t\t\n\t
\n',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.formElements,this.requiredElements,this.submitButton,this.resetButton,this.allRequiredValid=!1,this.debounce=this.debounce.bind(this),this._checkValidity=this._checkValidity.bind(this),this.handleKeydown=this.handleKeydown.bind(this),this.reset=this.reset.bind(this),this.elementsChanged=this.elementsChanged.bind(this)}debounce(t,e){let i=null;return(...s)=>{window.clearTimeout(i),i=window.setTimeout(()=>{t.apply(null,s)},e)}}_checkValidity(){this.allRequiredValid=this.requiredElements.every(t=>t.isValid),this.submitButton&&(this.allRequiredValid?this.submitButton.disabled=!1:this.submitButton.disabled=!0)}handleKeydown(t){"Enter"===t.key&&"SM-TEXTAREA"!==t.target.tagName&&(this.allRequiredValid?(this.submitButton&&"SM-BUTTON"===this.submitButton.tagName&&this.submitButton.click(),this.dispatchEvent(new CustomEvent("submit",{bubbles:!0,composed:!0}))):this.requiredElements.find(t=>!t.isValid).vibrate())}reset(){this.formElements.forEach(t=>t.reset())}elementsChanged(){this.formElements=[...this.querySelectorAll("sm-input, sm-textarea, sm-checkbox, tags-input, file-input, sm-switch, sm-radio")],this.requiredElements=this.formElements.filter(t=>t.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 t=this.shadowRoot.querySelector("slot");t.addEventListener("slotchange",this.elementsChanged),this.addEventListener("input",this.debounce(this._checkValidity,100)),this.addEventListener("keydown",this.debounce(this.handleKeydown,100))}disconnectedCallback(){this.removeEventListener("input",this.debounce(this._checkValidity,100)),this.removeEventListener("keydown",this.debounce(this.handleKeydown,100))}}); +const smInput=document.createElement("template");smInput.innerHTML='\n\n
\n \n \n
\n',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._helperText="",this._errorText="",this.isRequired=!1,this.validationFunction=void 0,this.reflectedAttributes=["value","required","disabled","type","inputmode","readonly","min","max","pattern","minlength","maxlength","step"],this.reset=this.reset.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.vibrate=this.vibrate.bind(this)}static get observedAttributes(){return["value","placeholder","required","disabled","type","inputmode","readonly","min","max","pattern","minlength","maxlength","step","helper-text","error-text","hiderequired"]}get value(){return this.input.value}set value(t){this.input.value=t,this.checkInput(),this.fireEvent()}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.inputParent.classList.remove("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}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.classList.remove("error"),this.feedbackText.classList.add("success"),this.feedbackText.textContent=""):this._errorText&&(this.feedbackText.classList.add("error"),this.feedbackText.classList.remove("success"),this.feedbackText.innerHTML=`\n \n ${this._errorText}\n `),t&&e}}reset(){this.value=""}focusIn(){this.input.focus()}focusOut(){this.input.blur()}fireEvent(){let t=new Event("input",{bubbles:!0,cancelable:!0,composed:!0});this.dispatchEvent(t)}checkInput(t){this.hasAttribute("readonly")||(""!==this.input.value.trim()?this.clearBtn.classList.remove("hide"):this.clearBtn.classList.add("hide")),this.hasAttribute("placeholder")&&""!==this.getAttribute("placeholder").trim()&&(""!==this.input.value?this.animate?this.inputParent.classList.add("animate-label"):this.label.classList.add("hide"):this.animate?this.inputParent.classList.remove("animate-label"):this.label.classList.remove("hide"))}vibrate(){this.outerContainer.animate([{transform:"translateX(-1rem)"},{transform:"translateX(1rem)"},{transform:"translateX(-0.5rem)"},{transform:"translateX(0.5rem)"},{transform:"translateX(0)"}],{duration:300,easing:"ease"})}connectedCallback(){this.animate=this.hasAttribute("animate"),this.setAttribute("role","textbox"),this.input.addEventListener("input",this.checkInput),this.clearBtn.addEventListener("click",this.reset)}attributeChangedCallback(t,e,n){e!==n&&(this.reflectedAttributes.includes(t)&&(this.hasAttribute(t)?this.input.setAttribute(t,this.getAttribute(t)?this.getAttribute(t):""):this.input.removeAttribute(t)),"placeholder"===t?(this.label.textContent=n,this.setAttribute("aria-label",n)):this.hasAttribute("value")?this.checkInput():"type"===t?this.hasAttribute("type")&&"number"===this.getAttribute("type")&&this.input.setAttribute("inputmode","numeric"):"helper-text"===t?this._helperText=this.getAttribute("helper-text"):"error-text"===t?this._errorText=this.getAttribute("error-text"):"required"===t?(this.isRequired=this.hasAttribute("required"),this.isRequired?this.setAttribute("aria-required","true"):this.setAttribute("aria-required","false")):"readonly"===t?this.hasAttribute("readonly")?this.inputParent.classList.add("readonly"):this.inputParent.classList.remove("readonly"):"disabled"===t&&(this.hasAttribute("disabled")?this.inputParent.classList.add("disabled"):this.inputParent.classList.remove("disabled")))}disconnectedCallback(){this.input.removeEventListener("input",this.checkInput),this.clearBtn.removeEventListener("click",this.reset)}}); +const fileInput=document.createElement("template");fileInput.innerHTML='\n \t\n\t
    \n \t\n',customElements.define("file-input",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(fileInput.content.cloneNode(!0)),this.input=this.shadowRoot.querySelector("input"),this.fileInput=this.shadowRoot.querySelector(".file-input"),this.filesPreviewWrapper=this.shadowRoot.querySelector(".files-preview-wrapper"),this.reflectedAttributes=["accept","multiple","capture","type"],this.reset=this.reset.bind(this),this.formatBytes=this.formatBytes.bind(this),this.createFilePreview=this.createFilePreview.bind(this),this.handleChange=this.handleChange.bind(this),this.handleKeyDown=this.handleKeyDown.bind(this)}static get observedAttributes(){return["accept","multiple","capture","type"]}get files(){return this.input.files}set accept(t){this.setAttribute("accept",t)}set multiple(t){t?this.setAttribute("multiple",""):this.removeAttribute("multiple")}set capture(t){this.setAttribute("capture",t)}set value(t){this.input.value=t}get isValid(){return""!==this.input.value}reset(){this.input.value="",this.filesPreviewWrapper.innerHTML=""}formatBytes(t,e=2){if(0===t)return"0 Bytes";const n=0>e?0:e,i=Math.floor(Math.log(t)/Math.log(1024));return parseFloat((t/Math.pow(1024,i)).toFixed(n))+" "+["Bytes","KB","MB","GB","TB","PB","EB","ZB","YB"][i]}createFilePreview(t){const e=document.createElement("li"),{name:n,size:i}=t;return e.className="file-preview",e.innerHTML=`\n\t\t\t
    ${n}
    \n
    ${this.formatBytes(i)}
    \n\t\t`,e}handleChange(t){this.filesPreviewWrapper.innerHTML="";const e=document.createDocumentFragment();Array.from(t.target.files).forEach(t=>{e.append(this.createFilePreview(t))}),this.filesPreviewWrapper.append(e)}handleKeyDown(t){"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),this.input.click())}connectedCallback(){this.setAttribute("role","button"),this.setAttribute("aria-label","File upload"),this.input.addEventListener("change",this.handleChange),this.fileInput.addEventListener("keydown",this.handleKeyDown)}attributeChangedCallback(t){this.reflectedAttributes.includes(t)&&(this.hasAttribute(t)?this.input.setAttribute(t,this.getAttribute(t)?this.getAttribute(t):""):this.input.removeAttribute(t))}disconnectedCallback(){this.input.removeEventListener("change",this.handleChange),this.fileInput.removeEventListener("keydown",this.handleKeyDown)}}); \ No newline at end of file diff --git a/js/main_UI.js b/js/main_UI.js new file mode 100644 index 0000000..3afea42 --- /dev/null +++ b/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 = `` + break; + case 'error': + icon = `` + 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() + } +} \ No newline at end of file