Add files via upload
This commit is contained in:
Keerthana.A.V
GitHub
commit
fe86d14304
397
css/main.css
Normal file
397
css/main.css
Normal file
@ -0,0 +1,397 @@
|
|||||||
|
* {
|
||||||
|
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 {
|
||||||
|
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:any-link:focus-visible {
|
||||||
|
outline: rgba(var(--text-color), 1) 0.1rem solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
sm-button {
|
||||||
|
--border-radius: 0.3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
#main_header {
|
||||||
|
display: flex;
|
||||||
|
gap: 1rem;
|
||||||
|
align-items: center;
|
||||||
|
position: sticky;
|
||||||
|
padding: 1rem 1.5rem;
|
||||||
|
background: rgba(var(--background-color), 1);
|
||||||
|
border-bottom: solid 1px rgba(var(--text-color), 0.16);
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
#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;
|
||||||
|
margin-top: 0.2rem;
|
||||||
|
}
|
||||||
|
#logo h5 {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
font-family: "Roboto", sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
#logo #main_logo {
|
||||||
|
height: 1.4rem;
|
||||||
|
width: 1.4rem;
|
||||||
|
fill: rgba(var(--text-color), 1);
|
||||||
|
stroke: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
sm-tab-header {
|
||||||
|
padding: 0 1.5rem;
|
||||||
|
background-color: rgba(var(--text-color), 0.06);
|
||||||
|
}
|
||||||
|
|
||||||
|
sm-tab {
|
||||||
|
padding: 0.5rem 0.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
margin-top: 3rem;
|
||||||
|
padding: 0 1.5rem;
|
||||||
|
}
|
||||||
|
.section:first-of-type {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section__header {
|
||||||
|
display: flex;
|
||||||
|
padding: 1rem 0;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
padding: 1.5rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
min-width: 20rem;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
margin-right: 1.5rem;
|
||||||
|
background-color: rgba(var(--text-color), 0.06);
|
||||||
|
}
|
||||||
|
.card h3 {
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 640px) {
|
||||||
|
sm-popup {
|
||||||
|
--width: 24rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
9
css/main.css.map
Normal file
9
css/main.css.map
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
{
|
||||||
|
"version": 3,
|
||||||
|
"mappings": "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",
|
||||||
|
"sources": [
|
||||||
|
"main.scss"
|
||||||
|
],
|
||||||
|
"names": [],
|
||||||
|
"file": "main.css"
|
||||||
|
}
|
||||||
1
css/main.min.css
vendored
Normal file
1
css/main.min.css
vendored
Normal file
@ -0,0 +1 @@
|
|||||||
|
#logo h5,*{font-family:Roboto,sans-serif}*{padding:0;margin:0;box-sizing:border-box}:root{font-size:clamp(1rem,1.2vmax,3rem)}body,html{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),.8)}p:not(:last-of-type){margin-bottom:1rem}img{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:any-link:focus-visible{outline:solid rgba(var(--text-color),1)}sm-button{--border-radius:0.3rem}ul{list-style:none}.hide{opacity:0;pointer-events:none}.hide-completely{display:none!important}#main_header,.flex{display:flex}.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:.8rem}.uppercase{text-transform:uppercase}#logo h4,.capitalize{text-transform:capitalize}.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}#main_header,.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),.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),.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),.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}#main_header{gap:1rem;position:sticky;padding:1rem 1.5rem;background:rgba(var(--background-color),1);border-bottom:solid 1px rgba(var(--text-color),.16);z-index:2}#logo{display:grid;align-items:center;width:100%;grid-template-columns:auto 1fr;gap:0 .5rem;margin-right:1rem}#logo h4{font-size:1rem;font-weight:600;margin-top:.2rem}#logo h5{font-size:.8rem;font-weight:400}#logo #main_logo{height:1.4rem;width:1.4rem;fill:rgba(var(--text-color),1);stroke:none}sm-tab-header{padding:0 1.5rem;background-color:rgba(var(--text-color),.06)}sm-tab{padding:.5rem .8rem}.section{display:flex;flex-direction:column;margin-top:3rem;padding:0 1.5rem}.section:first-of-type{margin-top:0}.section__header{display:flex;padding:1rem 0;justify-content:space-between}.card{padding:1.5rem;display:flex;flex-direction:column;min-width:20rem;border-radius:.5rem;margin-right:1.5rem;background-color:rgba(var(--text-color),.06)}.card h3{font-weight:500}@media screen and (min-width:640px){sm-popup{--width:24rem}}
|
||||||
334
css/main.scss
Normal file
334
css/main.scss
Normal file
@ -0,0 +1,334 @@
|
|||||||
|
*{
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#main_header{
|
||||||
|
display: flex;
|
||||||
|
gap: 1rem;
|
||||||
|
align-items: center;
|
||||||
|
position: sticky;
|
||||||
|
padding: 1rem 1.5rem;
|
||||||
|
background: rgba(var(--background-color), 1);
|
||||||
|
border-bottom: solid 1px rgba(var(--text-color), 0.16);
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
#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;
|
||||||
|
margin-top: 0.2rem;
|
||||||
|
}
|
||||||
|
h5{
|
||||||
|
font-size: 0.8rem;
|
||||||
|
font-family: 'Roboto', sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
#main_logo{
|
||||||
|
height: 1.4rem;
|
||||||
|
width: 1.4rem;
|
||||||
|
fill: rgba(var(--text-color), 1);
|
||||||
|
stroke: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
sm-tab-header{
|
||||||
|
padding: 0 1.5rem;
|
||||||
|
background-color: rgba(var(--text-color), 0.06);
|
||||||
|
}
|
||||||
|
sm-tab{
|
||||||
|
padding: 0.5rem 0.8rem;
|
||||||
|
}
|
||||||
|
.section{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
margin-top: 3rem;
|
||||||
|
padding: 0 1.5rem;
|
||||||
|
&:first-of-type{
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.section__header{
|
||||||
|
display: flex;
|
||||||
|
padding: 1rem 0;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.card{
|
||||||
|
padding: 1.5rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
min-width: 20rem;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
margin-right: 1.5rem;
|
||||||
|
background-color: rgba(var(--text-color), 0.06);
|
||||||
|
h3{
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 640px) {
|
||||||
|
// for tablet and desktop
|
||||||
|
sm-popup{
|
||||||
|
--width: 24rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
85
css/style.css
Normal file
85
css/style.css
Normal file
@ -0,0 +1,85 @@
|
|||||||
|
.spinner{
|
||||||
|
margin-left:45%;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
#waiting{
|
||||||
|
margin-left: 35%;
|
||||||
|
font-weight: bold;
|
||||||
|
color: gray;
|
||||||
|
}
|
||||||
|
sm-input{
|
||||||
|
margin-left: 25%;
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
sm-button{
|
||||||
|
margin-left: 38%;
|
||||||
|
width: 20%;
|
||||||
|
}
|
||||||
|
.block{
|
||||||
|
display:block;
|
||||||
|
}
|
||||||
|
#otp,#otp3{
|
||||||
|
margin-left: 20%;
|
||||||
|
margin-right: 20%;
|
||||||
|
}
|
||||||
|
.otpstyle{
|
||||||
|
color: gray;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
#otp2 {
|
||||||
|
margin-left: 25%;
|
||||||
|
margin-right: 25%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.otpver{
|
||||||
|
margin-left: 20%;margin-right: 20%;
|
||||||
|
}
|
||||||
|
#otp1.scroll {
|
||||||
|
margin:4px, 4px;
|
||||||
|
padding:4px;
|
||||||
|
width: 800px;
|
||||||
|
height: 300px;
|
||||||
|
margin-left: 15%;
|
||||||
|
margin-right: 15%;
|
||||||
|
overflow-x: hidden;
|
||||||
|
overflow-y: auto;
|
||||||
|
text-align:justify;
|
||||||
|
}
|
||||||
|
/* width */
|
||||||
|
.scroll::-webkit-scrollbar {
|
||||||
|
width: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Track */
|
||||||
|
.scroll::-webkit-scrollbar-track {
|
||||||
|
background: #f1f1f1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Handle */
|
||||||
|
.scroll::-webkit-scrollbar-thumb {
|
||||||
|
background: #888;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Handle on hover */
|
||||||
|
.scroll::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: #555;
|
||||||
|
}
|
||||||
|
@media screen and (max-width:900px){
|
||||||
|
sm-button{
|
||||||
|
width:fit-content;
|
||||||
|
|
||||||
|
}
|
||||||
|
sm-input{
|
||||||
|
width:100%;
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
.spinner{
|
||||||
|
margin-left:35%;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
#waiting{
|
||||||
|
margin-left:10%;
|
||||||
|
font-weight: bold;
|
||||||
|
color: gray;
|
||||||
|
}
|
||||||
|
}
|
||||||
10273
index.html
Normal file
10273
index.html
Normal file
File diff suppressed because it is too large
Load Diff
11
js/components.min.js
vendored
Normal file
11
js/components.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
305
js/main_UI.js
Normal file
305
js/main_UI.js
Normal file
@ -0,0 +1,305 @@
|
|||||||
|
// Global variables
|
||||||
|
const appPages = ['dashboard', '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 = 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()
|
||||||
|
}
|
||||||
|
}
|
||||||
263
js/script.js
Normal file
263
js/script.js
Normal file
@ -0,0 +1,263 @@
|
|||||||
|
//check the constraints
|
||||||
|
let trlist;
|
||||||
|
let tree;
|
||||||
|
path=new Array();
|
||||||
|
|
||||||
|
document.getElementById("trbtn").addEventListener('click',()=>{
|
||||||
|
|
||||||
|
document.getElementById("otp").innerHTML="<br><span class='spinner'><sm-spinner></sm-spinner></span><br>";
|
||||||
|
document.getElementById("waiting").innerHTML="<br>Please wait until the tree is constructed!!<br>Tree will be constructed within 5 minutes!!"
|
||||||
|
let flag=0;
|
||||||
|
let i=0;
|
||||||
|
|
||||||
|
var minutesToAdd=60;
|
||||||
|
currentDate=new Date();
|
||||||
|
futureDate = new Date(currentDate.getTime() + minutesToAdd*1000);
|
||||||
|
setTimeout(()=>{if(futureDate<=new Date()){
|
||||||
|
merkletreepath()
|
||||||
|
}},60000);
|
||||||
|
|
||||||
|
let trid=document.getElementById("trid").value;
|
||||||
|
trlist=trid.split(",");
|
||||||
|
if(trlist.length>="6"){
|
||||||
|
merkletreepath();
|
||||||
|
|
||||||
|
} })
|
||||||
|
|
||||||
|
|
||||||
|
function merkletreepath(){
|
||||||
|
|
||||||
|
let trid=document.getElementById("trid").value;
|
||||||
|
let trlist=trid.split(",");
|
||||||
|
tree=new MerkleTree(trlist);
|
||||||
|
tree.createTree();
|
||||||
|
rootHash=tree.getRootHash();
|
||||||
|
document.getElementById("waiting").innerHTML=" ";
|
||||||
|
document.getElementById("otp").innerHTML="<br><b style='color:black'>Root : </b>";
|
||||||
|
var id1=document.querySelector("#otp");
|
||||||
|
var newdiv= document.createElement('sm-copy')
|
||||||
|
newdiv.value=rootHash;
|
||||||
|
id1.appendChild(newdiv);
|
||||||
|
|
||||||
|
|
||||||
|
//path
|
||||||
|
for(let i=0;i<trlist.length;i++){
|
||||||
|
//let path[i] = tree.getHashPathToRoot(trlist[i]);
|
||||||
|
path.push(tree.getHashPathToRoot(trlist[i]));
|
||||||
|
}
|
||||||
|
otp1.classList.add("scroll");
|
||||||
|
|
||||||
|
for(let i=0;i<trlist.length;i++){
|
||||||
|
|
||||||
|
var id1=document.querySelector("#otp1");
|
||||||
|
var newdiv1= document.createElement('div')
|
||||||
|
newdiv1.innerHTML="<br><b style='color:black'>path["+trlist[i]+"] =</b> ";
|
||||||
|
id1.appendChild(newdiv1);
|
||||||
|
|
||||||
|
var id1=document.querySelector("#otp1");
|
||||||
|
var newdiv= document.createElement('sm-copy')
|
||||||
|
newdiv.value=path[i];
|
||||||
|
id1.appendChild(newdiv);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//writing into cloud
|
||||||
|
options={receiverID:"FKAEdnPfjXLHSYwrXQu377ugN4tXU7VGdf",comment:"Storing roothash in cloud",application:"Tree_root"}
|
||||||
|
floCloudAPI.sendApplicationData("Merkle_Tree",rootHash,options).then(
|
||||||
|
function(value){
|
||||||
|
let val=value;
|
||||||
|
let arr=new Array();
|
||||||
|
arr=Object.entries(val);
|
||||||
|
document.getElementById('otp3').innerHTML="<b style='color:black'>Unique ID : ";
|
||||||
|
var id1=document.querySelector("#otp3");
|
||||||
|
var newdiv= document.createElement('sm-copy')
|
||||||
|
newdiv.value=arr[0][0];
|
||||||
|
id1.appendChild(newdiv);
|
||||||
|
|
||||||
|
console.log("Written into Cloud");
|
||||||
|
|
||||||
|
},
|
||||||
|
function(error){
|
||||||
|
console.log(error);
|
||||||
|
})
|
||||||
|
|
||||||
|
}
|
||||||
|
//verify path
|
||||||
|
|
||||||
|
document.getElementById("vrbtn").addEventListener('click',()=>{
|
||||||
|
document.getElementById('otp2').innerHTML='<sm-spinner class="spinner"></sm-spinner>'
|
||||||
|
let roothash=document.getElementById("roothash1").value;
|
||||||
|
floCloudAPI.requestApplicationData(roothash,{message:"Merkle_Tree",receiverID:"FKAEdnPfjXLHSYwrXQu377ugN4tXU7VGdf",application:"Tree_root"}).then(
|
||||||
|
function(value){
|
||||||
|
let unqid=document.getElementById('uniqid').value;
|
||||||
|
let val=value;
|
||||||
|
let res=0;
|
||||||
|
let ab=Object.getOwnPropertyNames(val);
|
||||||
|
if(ab.length==0){
|
||||||
|
res=0;
|
||||||
|
}
|
||||||
|
for(i=0;i<ab.length;i++){
|
||||||
|
if(ab[i]==unqid){
|
||||||
|
res=1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if(res==1){
|
||||||
|
document.getElementById("otp2").innerHTML="<span class='otpver'><b style='color:black;'>The Root ' " +roothash+" present in the cloud!!</span>";
|
||||||
|
let veripath=document.getElementById('path11').value;
|
||||||
|
let elem=document.getElementById('ele').value;
|
||||||
|
let trlists=veripath.split(",");
|
||||||
|
tree2=new MerkleTree(trlists);
|
||||||
|
tree2.createTree();
|
||||||
|
path2=tree2.verifyMerkleMembership(elem,roothash,trlists);
|
||||||
|
|
||||||
|
if(path2==true){
|
||||||
|
document.getElementById("otp4").innerHTML="<span class='otpver'><b style='color:black;'>The <b>PATH</b> exists for the Root</span>";
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
document.getElementById("otp4").innerHTML="<span class='otpver'><b style='color:black;'>The <b>PATH </b>does not exists for the Root</span>";
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}else{
|
||||||
|
document.getElementById("otp2").innerHTML="<span class='otpver'><b style='color:black;'>The Root ' " +roothash+" ' is not present in the cloud!!</span>";
|
||||||
|
}
|
||||||
|
},
|
||||||
|
function(error){
|
||||||
|
console.log(error)
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
/* function getfrmcloud(){
|
||||||
|
let i=0;
|
||||||
|
let res=0;
|
||||||
|
let unqid=document.getElementById('uniqid').value;
|
||||||
|
let d=new Array();
|
||||||
|
let y=new Array();
|
||||||
|
let w={};
|
||||||
|
w=floDapps.getNextGeneralData(roothash)
|
||||||
|
d=(Object.getOwnPropertyNames(w));
|
||||||
|
// y= Object.values(d);
|
||||||
|
|
||||||
|
for(i=0;i<d.length;i++){
|
||||||
|
if(d[i]==unqid){
|
||||||
|
res=1;
|
||||||
|
}else{
|
||||||
|
res=0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.then(
|
||||||
|
function(value){
|
||||||
|
q=floGlobals.generalData;
|
||||||
|
w=new Array();
|
||||||
|
w= Object.entries(q);
|
||||||
|
console.log(w);
|
||||||
|
let checker=roothash.concat("|FKAEdnPfjXLHSYwrXQu377ugN4tXU7VGdf|Tree_root")
|
||||||
|
for(let i=0;i<w.length;i++){
|
||||||
|
for(let j=0;j<w[i].length;j++){
|
||||||
|
if(w[i][j]==checker){
|
||||||
|
alert("Did it")
|
||||||
|
console.log(w[i][j])
|
||||||
|
}}
|
||||||
|
}*/
|
||||||
|
/* let hash="|";
|
||||||
|
let rid=hash.concat("FKAEdnPfjXLHSYwrXQu377ugN4tXU7VGdf");
|
||||||
|
let ty=hash.concat("Tree_root");
|
||||||
|
let checker=roothash.concat(rid,ty);
|
||||||
|
for(let i=0;i<q.length;i++){
|
||||||
|
if(Object.getOwnPropertyNames(value)==checker){
|
||||||
|
console.log(checker);
|
||||||
|
console.log("Available")
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
console.log(checker);
|
||||||
|
console.log("Not Available")
|
||||||
|
}
|
||||||
|
|
||||||
|
}*/
|
||||||
|
}/*,
|
||||||
|
function(error){
|
||||||
|
console.log(error)
|
||||||
|
}
|
||||||
|
)
|
||||||
|
}*/)
|
||||||
|
|
||||||
|
/*document.getElementById("vrbtn").addEventListener('click',()=>{
|
||||||
|
let roothash=document.getElementById("roothash1").value;
|
||||||
|
floCloudAPI.requestGeneralData(roothash,{message:"Merkle_Tree",receiverID:"FKAEdnPfjXLHSYwrXQu377ugN4tXU7VGdf",application:"Tree_root"}).then(
|
||||||
|
function (value){
|
||||||
|
let hash="|";
|
||||||
|
let rid=hash.concat("FKAEdnPfjXLHSYwrXQu377ugN4tXU7VGdf");
|
||||||
|
// alert(rid);
|
||||||
|
let ty=hash.concat("Tree_root");
|
||||||
|
// alert(ty);
|
||||||
|
let checker=roothash.concat(rid,ty);
|
||||||
|
// alert(checker);
|
||||||
|
let q=floGlobals.generalData;
|
||||||
|
console.log(checker);
|
||||||
|
if(Object.getOwnPropertyNames(q).includes(checker)){
|
||||||
|
alert("This is the index : "+Object.getOwnPropertyNames(q).indexOf(checker))
|
||||||
|
pathchecker()
|
||||||
|
console.log("Available");
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
document.getElementById("otp2").innerHTML="<span class='otpver'><b style='color:black;'>The Root ' " +roothash+" is not present in the cloud!!</span>";
|
||||||
|
console.log("Not available");
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
function(error)
|
||||||
|
{
|
||||||
|
console.log(error);
|
||||||
|
}
|
||||||
|
|
||||||
|
);
|
||||||
|
|
||||||
|
//To check the path can be constructed using the roothash
|
||||||
|
function pathchecker(){
|
||||||
|
let ele=document.getElementById("ele").value;
|
||||||
|
tree=new MerkleTree(trlist);
|
||||||
|
path_string=document.getElementById("path11").value;
|
||||||
|
path1=path_string.split(',')
|
||||||
|
let verification=tree.verifyMerkleMembership(ele,roothash,path1);
|
||||||
|
if(verification==true){
|
||||||
|
document.getElementById("otp2").innerHTML="<span class='otpver'><b style='color:black;'>TRUE!, '"+ele+"' is PRESENT in</b>' "+roothash+" ' !</span>";
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
document.getElementById("otp2").innerHTML="<span class='otpver'><b style='color:black;'>FALSE!, ' "+ele+" ' is NOT PRESENT in</b> ' "+roothash+" ' !</span>";
|
||||||
|
|
||||||
|
}}
|
||||||
|
})*/
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
p=floDapps.getNextGeneralData("b7ad912a7ab69b1330110f374079630e0b89c3c4b360ed741640126a9833614f")
|
||||||
|
p["1631861808914_FLRWYmzuew3Xr9cayG94PzgDD9WSBJvqde"]
|
||||||
|
p[9]
|
||||||
|
r=Object.getOwnPropertyNames(p)
|
||||||
|
r[0]
|
||||||
|
*/
|
||||||
|
/*
|
||||||
|
To check the presence of the roothash
|
||||||
|
Object.getOwnPropertyNames(q["b7da912a7ab69b1330110f374079630e0b89c3c4b360ed741640126a9833614f|FKAEdnPfjXLHSYwrXQu377ugN4tXU7VGdf|Tree_root"])
|
||||||
|
*/
|
||||||
|
|
||||||
|
/*if(Object.getOwnPropertyNames(q["Merkle_Tree|FKAEdnPfjXLHSYwrXQu377ugN4tXU7VGdf|TEST_MODE"])!=null){alert(q["Merkle_Tree|FKAEdnPfjXLHSYwrXQu377ugN4tXU7VGdf|TEST_MODE"])}
|
||||||
|
undefined
|
||||||
|
if(Object.getOwnPropertyNames(q["Merkle_Tree|FKAEdnPfjXLHSYwrXQu377ugN4tXU7VGdf|TEST_MODE"])!=null){console.log(q["Merkle_Tree|FKAEdnPfjXLHSYwrXQu377ugN4tXU7VGdf|TEST_MODE"])}
|
||||||
|
|
||||||
|
FLO Dapps
|
||||||
|
|
||||||
|
p=floDapps.getNextGeneralData("b7ad912a7ab69b1330110f374079630e0b89c3c4b360ed741640126a9833614f")
|
||||||
|
{}
|
||||||
|
Object.getOwnPropertyNames(p)
|
||||||
|
[]length: 0[[Prototype]]: Array(0)
|
||||||
|
floDapps.getNextGeneralData("b7ad912a7ab69b1330110f374079630e0b89c3c4b360ed741640126a9833614f").hasOwnProperty("b7ad912a7ab69b1330110f374079630e0b89c3c4b360ed741640126a9833614f")
|
||||||
|
false
|
||||||
|
floDapps.getNextGeneralData().hasOwnProperty("b7ad912a7ab69b1330110f374079630e0b89c3c4b360ed741640126a9833614f")
|
||||||
|
*/
|
||||||
Loading…
Reference in New Issue
Block a user