1178 lines
30 KiB
HTML
1178 lines
30 KiB
HTML
<html>
|
|
|
|
<head>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
|
|
<link href="https://fonts.googleapis.com/css?family=Titillium+Web" rel="stylesheet">
|
|
</head>
|
|
|
|
<!-- THIS IS A BEAUTIFUL SOLUTION -->
|
|
<style>
|
|
article,
|
|
aside,
|
|
details,
|
|
figcaption,
|
|
figure,
|
|
footer,
|
|
header,
|
|
hgroup,
|
|
main,
|
|
nav,
|
|
section,
|
|
summary {
|
|
display: block;
|
|
}
|
|
|
|
audio,
|
|
canvas,
|
|
video {
|
|
display: inline-block;
|
|
}
|
|
|
|
audio:not([controls]) {
|
|
display: none;
|
|
height: 0;
|
|
}
|
|
|
|
[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
html {
|
|
font-family: 'Titillium Web';
|
|
-ms-text-size-adjust: 100%;
|
|
-webkit-text-size-adjust: 100%;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
}
|
|
|
|
a:focus {
|
|
outline: thin dotted;
|
|
}
|
|
|
|
a:active,
|
|
a:hover {
|
|
outline: 0;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 2em;
|
|
margin: 0.67em 0;
|
|
}
|
|
|
|
abbr[title] {
|
|
border-bottom: 1px dotted;
|
|
}
|
|
|
|
b,
|
|
strong {
|
|
font-weight: bold;
|
|
}
|
|
|
|
dfn {
|
|
font-style: italic;
|
|
}
|
|
|
|
hr {
|
|
-moz-box-sizing: content-box;
|
|
box-sizing: content-box;
|
|
height: 0;
|
|
}
|
|
|
|
mark {
|
|
background: #ff0;
|
|
color: #000;
|
|
}
|
|
|
|
code,
|
|
kbd,
|
|
pre,
|
|
samp {
|
|
font-family: monospace, serif;
|
|
font-size: 1em;
|
|
}
|
|
|
|
pre {
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
q {
|
|
quotes: "\201C""\201D""\2018""\2019";
|
|
}
|
|
|
|
small {
|
|
font-size: 80%;
|
|
}
|
|
|
|
sub,
|
|
sup {
|
|
font-size: 75%;
|
|
line-height: 0;
|
|
position: relative;
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
sup {
|
|
top: -0.5em;
|
|
}
|
|
|
|
sub {
|
|
bottom: -0.25em;
|
|
}
|
|
|
|
img {
|
|
border: 0;
|
|
}
|
|
|
|
svg:not(:root) {
|
|
overflow: hidden;
|
|
}
|
|
|
|
figure {
|
|
margin: 0;
|
|
}
|
|
|
|
fieldset {
|
|
border: 1px solid #c0c0c0;
|
|
margin: 0 2px;
|
|
padding: 0.35em 0.625em 0.75em;
|
|
}
|
|
|
|
legend {
|
|
border: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
button,
|
|
input,
|
|
select,
|
|
textarea {
|
|
font-family: inherit;
|
|
font-size: 100%;
|
|
margin: 0;
|
|
}
|
|
|
|
button,
|
|
input {
|
|
line-height: normal;
|
|
}
|
|
|
|
button,
|
|
select {
|
|
text-transform: none;
|
|
}
|
|
|
|
button,
|
|
html input[type="button"],
|
|
input[type="reset"],
|
|
input[type="submit"] {
|
|
-webkit-appearance: button;
|
|
cursor: pointer;
|
|
}
|
|
|
|
button[disabled],
|
|
html input[disabled] {
|
|
cursor: default;
|
|
}
|
|
|
|
input[type="checkbox"],
|
|
input[type="radio"] {
|
|
box-sizing: border-box;
|
|
padding: 0;
|
|
}
|
|
|
|
input[type="search"] {
|
|
-webkit-appearance: textfield;
|
|
-moz-box-sizing: content-box;
|
|
-webkit-box-sizing: content-box;
|
|
box-sizing: content-box;
|
|
}
|
|
|
|
input[type="search"]::-webkit-search-cancel-button,
|
|
input[type="search"]::-webkit-search-decoration {
|
|
-webkit-appearance: none;
|
|
}
|
|
|
|
button::-moz-focus-inner,
|
|
input::-moz-focus-inner {
|
|
border: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
textarea {
|
|
overflow: auto;
|
|
vertical-align: top;
|
|
}
|
|
|
|
table {
|
|
border-collapse: collapse;
|
|
border-spacing: 0;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
/*font-family: Nunito,helvetica neue,Arial,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol;*/
|
|
font-size: 1em;
|
|
font-weight: 400;
|
|
line-height: 1.5;
|
|
/* color: #212529;*/
|
|
text-align: left;
|
|
background-color: #fff;
|
|
}
|
|
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
-webkit-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.maincontainer {
|
|
display: flex;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-box-direction: normal;
|
|
flex-direction: column;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.container {
|
|
width: 100%;
|
|
padding-right: 15px;
|
|
padding-left: 15px;
|
|
margin-right: auto;
|
|
margin-left: auto;
|
|
|
|
/* media query shiz */
|
|
max-width: 1140px;
|
|
}
|
|
|
|
.navbar {
|
|
background-color: #fff;
|
|
position: relative;
|
|
z-index: 100;
|
|
padding: 8 16 8 16;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
padding: .5rem 1rem;
|
|
box-shadow: 0 0 30px 0 rgba(21, 53, 80, .12);
|
|
|
|
/* media query shiz 992*/
|
|
flex-flow: row nowrap;
|
|
-webkit-box-pack: start;
|
|
-ms-flex-pack: start;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.navbar_container {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
-webkit-box-align: center;
|
|
align-items: center;
|
|
-webkit-box-pack: justify;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
padding-right: 15px;
|
|
padding-left: 15px;
|
|
margin-right: auto;
|
|
margin-left: auto;
|
|
|
|
/* media query shiz 1200*/
|
|
flex-wrap: nowrap;
|
|
max-width: 1140px;
|
|
}
|
|
|
|
.navbar_brand {
|
|
color: #fff;
|
|
margin-left: 0;
|
|
display: inline-block;
|
|
padding-top: .3125rem;
|
|
padding-bottom: .3125rem;
|
|
margin-right: 1rem;
|
|
font-size: 1.25rem;
|
|
line-height: inherit;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.navbar_container a {
|
|
text-decoration: none;
|
|
background-color: transparent;
|
|
-webkit-text-decoration-skip: objects;
|
|
}
|
|
|
|
.navbar_logo {
|
|
max-height: 28px;
|
|
width: auto;
|
|
}
|
|
|
|
.navbarmenu_search {
|
|
flex-grow: 1;
|
|
-webkit-box-align: center;
|
|
align-items: center;
|
|
|
|
/* media query shiz */
|
|
display: flex !important;
|
|
flex-basis: auto;
|
|
}
|
|
|
|
.searchform_container {
|
|
|
|
/* media query shiz 1200*/
|
|
height: 57px;
|
|
margin-bottom: -8px;
|
|
margin-top: -8px;
|
|
|
|
/* media query inherited shiz 992*/
|
|
display: flex !important;
|
|
box-sizing: border-box;
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
line-height: 1.5;
|
|
color: #212529;
|
|
text-align: left;
|
|
}
|
|
|
|
.search_form {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
-webkit-box-align: center;
|
|
align-items: center;
|
|
|
|
/* media query shiz */
|
|
margin-bottom: 0 !important;
|
|
margin-top: 0 !important;
|
|
}
|
|
|
|
.searchBar {
|
|
text-overflow: ellipsis !important;
|
|
width: 280px;
|
|
background: #f5f6fa;
|
|
border-color: #f5f6fa;
|
|
color: #828ba0;
|
|
font-size: 14px;
|
|
height: 50px;
|
|
padding-left: 38px;
|
|
padding-right: 8px;
|
|
position: relative;
|
|
z-index: 1;
|
|
overflow: visible;
|
|
margin: 0;
|
|
font-family: inherit;
|
|
box-sizing: border-box;
|
|
-webkit-appearance: textfield;
|
|
-webkit-rtl-ordering: logical;
|
|
cursor: text;
|
|
letter-spacing: normal;
|
|
word-spacing: normal;
|
|
text-transform: none;
|
|
text-indent: 0px;
|
|
text-shadow: none;
|
|
text-rendering: auto;
|
|
-webkit-box-direction: normal;
|
|
-webkit-tap-highlight-color: transparent;
|
|
text-align: center;
|
|
vertical-align: center;
|
|
|
|
}
|
|
|
|
.search_button {
|
|
border-radius: 2px;
|
|
border: none;
|
|
display: inline-block;
|
|
line-height: 1.2;
|
|
padding: 10px 16px;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
transition: all .4s ease-in-out;
|
|
white-space: nowrap;
|
|
|
|
color: #20b760;
|
|
background-color: transparent;
|
|
background-image: none;
|
|
|
|
position: absolute;
|
|
width: 1px;
|
|
text-transform: none;
|
|
|
|
/* media query shiz*/
|
|
margin-bottom: 0 !important;
|
|
margin-top: 0 !important;
|
|
}
|
|
|
|
.main {
|
|
flex-grow: 1;
|
|
background-color: #fbfafc;
|
|
padding-top: 3rem !important;
|
|
display: block;
|
|
}
|
|
|
|
.dashboard-banner-container {
|
|
background-image: linear-gradient(to bottom, #5c34a2, #673ab5);
|
|
background-color: #5c34a2;
|
|
box-shadow: 0 5px 40px -5px rgba(0, 0, 0, .25);
|
|
margin-top: -3rem;
|
|
margin-bottom: 3rem;
|
|
overflow: hidden;
|
|
padding: 0;
|
|
position: relative;
|
|
display: block;
|
|
}
|
|
|
|
.dashboard-container {
|
|
width: 100%;
|
|
padding-right: 15px;
|
|
padding-left: 15px;
|
|
margin-right: auto;
|
|
margin-left: auto;
|
|
|
|
/* media query shiz */
|
|
max-width: 1140px;
|
|
}
|
|
|
|
.dashboard-banner {
|
|
display: flex;
|
|
-webkit-box-pack: justify;
|
|
justify-content: space-between;
|
|
position: relative;
|
|
z-index: 9;
|
|
}
|
|
|
|
.dashboard-banner-network-graph {
|
|
-webkit-box-flex: 1;
|
|
flex-grow: 1;
|
|
padding: 15px 0 0;
|
|
}
|
|
|
|
.dashboard-banner-network-plain-container {
|
|
-webkit-box-align: center;
|
|
align-items: center;
|
|
align-self: flex-end;
|
|
background-color: #8258cd;
|
|
border-top-left-radius: 10px;
|
|
display: flex;
|
|
height: 205px;
|
|
-webkit-box-pack: center;
|
|
justify-content: center;
|
|
margin: 0 0 0 30px;
|
|
max-width: 100%;
|
|
padding: 30px 0 30px 60px;
|
|
width: 750px;
|
|
position: relative;
|
|
}
|
|
|
|
.dashboard-banner-network-plain-container::after {
|
|
background-color: #8258cd;
|
|
bottom: 0;
|
|
content: "";
|
|
display: block;
|
|
height: 205px;
|
|
left: 0;
|
|
position: absolute;
|
|
width: 9999px;
|
|
z-index: -1;
|
|
box-shadow: 0 0 35px 0 rgba(0, 0, 0, .2);
|
|
border-top-left-radius: 10px;
|
|
}
|
|
|
|
.dashboard-banner-network-stats {
|
|
column-gap: 25px;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr 1fr;
|
|
}
|
|
|
|
.dashboard-banner-network-stats-item {
|
|
display: flex;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-box-direction: normal;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
-webkit-box-pack: center;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
padding-left: calc(1rem + 4px);
|
|
padding-right: 1rem;
|
|
position: relative;
|
|
}
|
|
|
|
.dashboard-banner-network-stats-item::before {
|
|
background-color: #87e1a9;
|
|
border-radius: 2px;
|
|
content: "";
|
|
height: 100%;
|
|
left: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
width: 4px;
|
|
}
|
|
|
|
.dashboard-banner-network-stats-label {
|
|
color: #dcc8ff;
|
|
display: block;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.dashboard-banner-network-stats-value {
|
|
color: #fff;
|
|
display: block;
|
|
font-size: 1.5rem;
|
|
font-weight: 200;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.card-body {
|
|
padding: 30px;
|
|
-webkit-box-flex: 1;
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
.card-chain-transactions {
|
|
height: auto;
|
|
}
|
|
|
|
.footer {
|
|
background: #3c226a;
|
|
color: #bda6e7;
|
|
font-size: 12px;
|
|
line-height: 1.67;
|
|
margin: 0;
|
|
padding: 40px 0;
|
|
position: relative;
|
|
}
|
|
|
|
.row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin-right: -15px;
|
|
margin-left: -15px;
|
|
}
|
|
|
|
.footer-logo-row {
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.col-md-12 {
|
|
-webkit-box-flex: 0;
|
|
-ms-flex: 0 0 100%;
|
|
flex: 0 0 100%;
|
|
max-width: 100%;
|
|
}
|
|
|
|
|
|
/*Card Blocks Section */
|
|
|
|
.card {
|
|
background-color: #fff;
|
|
border: none;
|
|
box-shadow: 0 0 30px 0 rgba(202, 199, 226, .5);
|
|
margin-bottom: 50px;
|
|
position: relative;
|
|
}
|
|
|
|
|
|
/*Card Blocks Section */
|
|
|
|
.container1 {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-wrap: nowrap;
|
|
justify-content: center;
|
|
padding: 30px 15px 30px;
|
|
}
|
|
|
|
|
|
.box1class {
|
|
width: 240px;
|
|
height: 122px;
|
|
|
|
color: #828ba0;
|
|
|
|
font-size: 12px;
|
|
line-height: 1.4rem;
|
|
|
|
border-radius: 4px;
|
|
border: 1px solid #dee2e6;
|
|
border-left: 4px solid #5c34a2;
|
|
margin-right: 15px;
|
|
margin-left: 15px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding-top: 10px;
|
|
|
|
/* Animation */
|
|
animation-name: slidein;
|
|
animation-duration: 300ms;
|
|
animation-timing-function: ease-in-out;
|
|
animation-delay: 0s;
|
|
animation-iteration-count: 1;
|
|
animation-direction: normal;
|
|
animation-fill-mode: forwards;
|
|
|
|
}
|
|
|
|
|
|
@keyframes slidein {
|
|
from {
|
|
transform: scale(0);
|
|
}
|
|
|
|
to {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
|
|
.box1class a {
|
|
font-weight: 700;
|
|
font-size: 12px;
|
|
color: #5c34a2;
|
|
text-decoration: none;
|
|
background-color: transparent;
|
|
}
|
|
|
|
|
|
/* Card Transaction section */
|
|
.box2class {
|
|
width: 195px;
|
|
height: 122px;
|
|
border-radius: 4px;
|
|
border: 1px solid #dee2e6;
|
|
border-left: 4px solid #5c34a2;
|
|
margin-right: 15px;
|
|
margin-left: 15px;
|
|
flex-shrink: 0;
|
|
|
|
color: #a5b2cf;
|
|
|
|
font-size: 12px;
|
|
line-height: 1.4rem;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding-top: 10px;
|
|
}
|
|
|
|
.box3class {
|
|
width: auto;
|
|
height: 122px;
|
|
border-radius: 4px;
|
|
border: 1px solid #dee2e6;
|
|
border-left: 4px solid #5c34a2;
|
|
margin-right: 15px;
|
|
margin-left: 15px;
|
|
margin-top: 9px;
|
|
margin-bottom: 9px;
|
|
flex-shrink: 0;
|
|
|
|
color: #a5b2cf;
|
|
|
|
font-size: 12px;
|
|
line-height: 1.4rem;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding-top: 10px;
|
|
}
|
|
|
|
|
|
.color-block-token-transfer {
|
|
background-color: rgba(239, 154, 96, .1);
|
|
border-bottom: 1px solid #ef9a60;
|
|
border-right: 1px solid #ef9a60;
|
|
border-top: 1px solid #ef9a60;
|
|
color: #ef9a60;
|
|
|
|
height: 132px;
|
|
width: 172px;
|
|
|
|
margin-top: -1px;
|
|
margin-left: -4px;
|
|
border-radius: 4px 0px 0px 4px;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
flex-shrink: 0;
|
|
justify-content: center;
|
|
}
|
|
|
|
.color-block-token-creation {
|
|
background-color: rgba(239, 211, 96, .1);
|
|
border-bottom: 1px solid #FB0112;
|
|
border-right: 1px solid #FB0112;
|
|
border-top: 1px solid #FB0112;
|
|
color: #FB0112;
|
|
|
|
height: 132px;
|
|
width: 172px;
|
|
|
|
margin-top: -1px;
|
|
margin-left: -4px;
|
|
border-radius: 4px 0px 0px 4px;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
flex-shrink: 0;
|
|
justify-content: center;
|
|
}
|
|
|
|
.transactions {
|
|
width: auto;
|
|
border-radius: 4px;
|
|
border: 1px solid #dee2e6;
|
|
|
|
margin-right: 15px;
|
|
margin-left: 15px;
|
|
margin-top: 9px;
|
|
margin-bottom: 9px;
|
|
flex-shrink: 0;
|
|
|
|
color: #a5b2cf;
|
|
|
|
font-size: 12px;
|
|
line-height: 1.4rem;
|
|
}
|
|
|
|
.token-transfer {
|
|
height: 132px;
|
|
border-left: 4px solid #ef9a60;
|
|
}
|
|
|
|
.token-creation {
|
|
height: 132px;
|
|
border-left: 4px solid #FB0112;
|
|
}
|
|
|
|
.transaction {
|
|
height: 100px;
|
|
border-left: 4px solid #4786ff;
|
|
}
|
|
|
|
|
|
.color-block-transaction {
|
|
background-color: rgba(71, 134, 255, .1);
|
|
border-bottom: 1px solid #4786ff;
|
|
border-right: 1px solid #4786ff;
|
|
border-top: 1px solid #4786ff;
|
|
color: #4786ff;
|
|
|
|
height: 100px;
|
|
width: 172px;
|
|
|
|
margin-top: -1px;
|
|
margin-left: -4px;
|
|
border-radius: 4px 0px 0px 4px;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
flex-shrink: 0;
|
|
justify-content: center;
|
|
}
|
|
|
|
.transactions-content {
|
|
width: 100%;
|
|
max-width: 66.66666667%;
|
|
padding: 16px 0px 16px 15px;
|
|
|
|
display: flex;
|
|
align-items: flex-start;
|
|
flex-direction: column;
|
|
flex: 0 0 66.66666667%;
|
|
}
|
|
|
|
.transactions a {
|
|
color: #5c34a2;
|
|
text-decoration: none;
|
|
overflow: hidden;
|
|
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
|
|
font-size: 12px;
|
|
line-height: 1.4rem;
|
|
}
|
|
|
|
.transactions-token-transfer-content {
|
|
width: 100%;
|
|
max-width: 66.66666667%;
|
|
padding: 16px 0px 16px 15px;
|
|
|
|
display: flex;
|
|
align-items: flex-start;
|
|
flex-direction: column;
|
|
flex: 0 0 66.66666667%;
|
|
}
|
|
|
|
|
|
.blockinfo {
|
|
text-align: right;
|
|
padding: 16px 15px 16px 15px;
|
|
width: 100%;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center
|
|
}
|
|
|
|
.container2 {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-wrap: nowrap;
|
|
justify-content: center;
|
|
padding: 30px 15px 30px;
|
|
}
|
|
|
|
.viewall {
|
|
align-items: center;
|
|
background-color: #fff;
|
|
border-radius: 2px;
|
|
border: 1px solid #5c34a2;
|
|
color: #5c34a2;
|
|
display: flex;
|
|
font-size: 12px;
|
|
height: 36px;
|
|
justify-content: center;
|
|
outline: none;
|
|
padding: 0 15px;
|
|
text-decoration: none;
|
|
justify-content: center;
|
|
outline: none;
|
|
padding: 0 15px;
|
|
transition: all .4s ease-in-out;
|
|
white-space: nowrap;
|
|
width: fit-content;
|
|
font-weight: 400;
|
|
|
|
margin-right: 14px;
|
|
line-height: 1.2rem;
|
|
margin-bottom: 2rem;
|
|
margin-block-start: 0.83em;
|
|
margin-block-end: 0.83em;
|
|
}
|
|
|
|
/*Footer Section*/
|
|
|
|
.footerBar {
|
|
flex: 1 1 20%;
|
|
}
|
|
|
|
.footerBar a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
margin-right: 15px;
|
|
}
|
|
|
|
.footerBar h3 {
|
|
margin: 0px 0px 15px 0px;
|
|
padding: 0px;
|
|
}
|
|
|
|
.footerBar ul {
|
|
margin: 0px 0px 25px 12px;
|
|
padding: 0px;
|
|
list-style: none;
|
|
}
|
|
|
|
.footerBar li::before {
|
|
content: "\2022";
|
|
/* Add content: \2022 is the CSS Code/unicode for a bullet */
|
|
color: #87e1a9;
|
|
/* Change the color */
|
|
font-weight: bold;
|
|
/* If you want it to be bold */
|
|
display: inline-block;
|
|
/* Needed to add space between the bullet and the text */
|
|
width: 1em;
|
|
/* Also needed for space (tweak if needed) */
|
|
margin-left: -1em;
|
|
/* Also needed for space (tweak if needed) */
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.transfer-indicator {
|
|
background-color: rgba(71, 134, 255, .1);
|
|
border-bottom: 1px solid #4786ff;
|
|
border-right: 1px solid #4786ff;
|
|
border-top: 1px solid #4786ff;
|
|
color: #4786ff;
|
|
-webkit-box-align: center;
|
|
align-items: center;
|
|
bottom: -17px;
|
|
-webkit-box-pack: center;
|
|
justify-content: center;
|
|
margin-left: -1px;
|
|
margin-top: -34px;
|
|
padding: 0;
|
|
position: relative;
|
|
|
|
/* media query shiz */
|
|
-webkit-box-orient: vertical !important;
|
|
-webkit-box-direction: normal !important;
|
|
flex-direction: column !important;
|
|
display: flex !important;
|
|
-webkit-box-flex: 0;
|
|
flex: 0 0 16.66666667%;
|
|
max-width: 16.66666667%;
|
|
}
|
|
|
|
.card-tabs {
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
border-top-left-radius: 10px;
|
|
border-top-right-radius: 10px;
|
|
border-bottom: 1px solid #e2e5ec;
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-pack: start;
|
|
-ms-flex-pack: start;
|
|
justify-content: flex-start;
|
|
overflow: hidden;
|
|
}
|
|
</style>
|
|
|
|
<body>
|
|
|
|
<nav class="navbar">
|
|
<div class="navbar_container">
|
|
<a href="vscout2.html">
|
|
<img class="navbar-logo" style="vertical-align:middle; border-style:none;"
|
|
src="FLO_horizontal_text1.svg" alt="POA Core">
|
|
</a>
|
|
|
|
<div style="-webkit-box-direction: normal; align-items: center;flex-grow: 1; -webkit-box-align: center; -webkit-box-flex: 1; display: flex!important; flex-basis: auto;">
|
|
<ul style="margin-block-start: 1em; margin-block-end: 1em; margin-inline-start: 0px; margin-inline-end: 0px; padding-inline-start: 40px; margin-top: 0; margin-right: auto!important; padding-left: 0; margin-bottom: 0; list-style: none; display:flex; flex-direction: row; -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-grow: 1; -webkit-box-flex: 1;"></ul>
|
|
<div style="display: flex!important; height: 57px; margin-bottom: -8px; margin-top: -8px;">
|
|
<div style="height: 50px; width:300px; background-color: white;">
|
|
<form>
|
|
<button class="fa fa-search" aria-hidden="true" style="background: transparent; border:none;"></button>
|
|
<input type="text" id="name" name="user_name">
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</nav>
|
|
|
|
|
|
<script src="https://flosight.duckdns.org/socket.io/socket.io.js"></script>
|
|
<script>
|
|
eventToListenTo = 'block'
|
|
room = 'inv'
|
|
|
|
var socket = io("https://flosight.duckdns.org/");
|
|
socket.on('connect', function () {
|
|
// Join the room.
|
|
socket.emit('subscribe', room);
|
|
})
|
|
socket.on(eventToListenTo, function (data) {
|
|
console.log("New block received: " + data);
|
|
|
|
fetch(`https://flosight.duckdns.org/api/block/${data}`)
|
|
.then(function (response) {
|
|
return response.json();
|
|
})
|
|
.then(function (myJson) {
|
|
//console.log(JSON.stringify(myJson));
|
|
|
|
var blockdiv = document.createElement("div");
|
|
blockdiv.setAttribute("class", "box1class");
|
|
var blockno = document.createElement("div");
|
|
blockno.setAttribute("style", "flex:0 0 30px;text-align: left");
|
|
blockno.innerHTML = `<a href="#" style="padding:16px 16px 0px 16px; margin-bottom:12px;">${myJson["height"]}</a>`;
|
|
var blocktransaction = document.createElement("div");
|
|
blocktransaction.setAttribute("style", "background: #f6f7f9;flex:1 1 100px;text-align: left; padding:12.8px 16px 12.8px 16px");
|
|
blocktransaction.innerHTML = `<div>${myJson["tx"].length} Transaction</div>`;
|
|
blockdiv.appendChild(blockno);
|
|
blockdiv.appendChild(blocktransaction);
|
|
|
|
blocksCard_main = document.getElementById("blocks-card");
|
|
blocksCard_main.insertBefore(blockdiv, blocksCard_main.childNodes[0]);
|
|
blocksCard_main.removeChild(blocksCard_main.lastChild);
|
|
blocksCard_main.removeChild(blocksCard_main.lastChild);
|
|
});
|
|
})
|
|
</script>
|
|
|
|
<script>
|
|
eventToListenTo = 'tx'
|
|
room = 'inv'
|
|
|
|
var socket = io("https://flosight.duckdns.org/");
|
|
socket.on('connect', function () {
|
|
// Join the room.
|
|
socket.emit('subscribe', room);
|
|
})
|
|
socket.on(eventToListenTo, function (data) {
|
|
console.log("New transaction received: " + data.txid);
|
|
|
|
fetch(`https://flosight.duckdns.org/api/tx/${data.txid}`)
|
|
.then(function (response) {
|
|
return response.json();
|
|
})
|
|
.then(function (myJson) {
|
|
console.log(JSON.stringify(myJson));
|
|
console.log('going to encode now');
|
|
encoded_string = urlEncode(myJson['floData']);
|
|
parseFloData(encoded_string, myJson);
|
|
});
|
|
|
|
|
|
/*var blockdiv = document.createElement("div");
|
|
blockdiv.setAttribute("class", "box1class");
|
|
var blockno = document.createElement("div");
|
|
blockno.setAttribute("style", "flex:0 0 30px;text-align: left");
|
|
blockno.innerHTML = '<a href="#" style="padding:16px 16px 0px 16px; margin-bottom:12px;">345678</a>';
|
|
var blocktransaction = document.createElement("div");
|
|
blocktransaction.setAttribute("style", "background: #f6f7f9;flex:1 1 100px;text-align: left; padding:12.8px 16px 12.8px 16px");
|
|
blocktransaction.innerHTML = "<div>1 Transaction</div>";
|
|
blockdiv.appendChild(blockno);
|
|
blockdiv.appendChild(blocktransaction);
|
|
|
|
blocksCard_main = document.getElementById("blocks-card");
|
|
blocksCard_main.insertBefore(blockdiv, blocksCard_main.childNodes[0]);
|
|
blocksCard_main.removeChild(blocksCard_main.lastChild);*/
|
|
});
|
|
|
|
function urlEncode(text) {
|
|
urlEncodingDictionary = {
|
|
'%': '%25',
|
|
'!': '%21',
|
|
'#': '%23',
|
|
'$': '%24',
|
|
'&': '%26',
|
|
"'": '%27',
|
|
'(': '%28',
|
|
')': '%29',
|
|
'*': '%2A',
|
|
'+': '%2B',
|
|
'/': '%2C',
|
|
':': '%2F',
|
|
';': '%3A',
|
|
'=': '%3B',
|
|
'?': '%3D',
|
|
'@': '%3F',
|
|
'[': '%40',
|
|
']': '%5B',
|
|
'.': '%2E'
|
|
}
|
|
if (text != '') {
|
|
for (var key in urlEncodingDictionary) {
|
|
if (text.indexOf(key) > -1) {
|
|
text = text.replace(key, urlEncodingDictionary[key]);
|
|
}
|
|
}
|
|
}
|
|
return text;
|
|
}
|
|
|
|
|
|
function parseFloData(floData, txdata) {
|
|
fetch(`http://127.0.0.1:5010/api/v1.0/parseFloData?floData=${floData}&blockhash=${txdata["blockhash"]}`)
|
|
.then(function (response) {
|
|
return response.json();
|
|
})
|
|
.then(function (parsedFloData_json) {
|
|
console.log('Parsed Flo Data');
|
|
console.log(JSON.stringify(parsedFloData_json));
|
|
buildTransaction(parsedFloData_json, txdata);
|
|
});
|
|
}
|
|
|
|
|
|
// build transaction card
|
|
function buildTransaction(parsed_floData, txdata) {
|
|
transactionsCard_main = document.getElementById("transactions-card");
|
|
|
|
if (parsed_floData['type'] == 'noise') {
|
|
|
|
}
|
|
else if (parsed_floData['type'] == 'transfer' && parsed_floData['transferType'] == 'token') {
|
|
// create a token transfer block and append it to the transactions card
|
|
|
|
transactionType = document.createElement('div');
|
|
transactionType.setAttribute('class', 'transactions token-transfer');
|
|
|
|
// color block
|
|
color_block = document.createElement('div');
|
|
color_block.setAttribute('class', color - block - token - transfer);
|
|
|
|
span1 = document.createElement('div');
|
|
span1.setAttribute("style", "color:#ef9a60; font-size: 12px; font-weight: 700; line-height: 1.2; margin: 0 0 2px; text-align: center;");
|
|
span1.innerText = "Token Transfer";
|
|
|
|
span2 = document.createElement('div');
|
|
span2.setAttribute("style", "color:inherit; font-size: 12px; font-weight: 400; line-height: 1.2; text-align:center; padding: 0 5px;");
|
|
span2.innerText = parsed_flodata['tokenIdentification'].toUpperCase();
|
|
|
|
color_block.appendChild(span1);
|
|
color_block.appendChild(span2);
|
|
|
|
// transaction content
|
|
transactionContent = document.createElement('div');
|
|
transactionContent.setAttribute("class", "transactions-content");
|
|
|
|
transactionHash = document.createElement('a');
|
|
transactionHash.innerText = data.txid;
|
|
|
|
transaction_ipop = document.createElement('div');
|
|
transaction_ipop.setAttribute('style', 'display: inline-block');
|
|
ipAddress = document.createElement('a');
|
|
ipAddress.innerText = txdata['vin'][0].addr;
|
|
arrowSymbol = document.createElement('i');
|
|
arrowSymbol.setAttribute('class', 'fas fa-long-arrow-alt-right');
|
|
opAddress = document.createElement('a');
|
|
for (var i = 0; i < txdata['vout'].length; i++) {
|
|
if (txdata['vout'][i]['scriptPubKey']['type'] == 'pubkeyhash') {
|
|
if (txdata['vout'][i]['scriptPubKey']['addresses'][0] == ipAddress) {
|
|
continue;
|
|
}
|
|
opAddress.innerText = txdata['vout'][i]['scriptPubKey']['addresses'][0];
|
|
}
|
|
}
|
|
transaction_ipop.appendChild(ipAddress); arrowSymbol
|
|
transaction_ipop.appendChild(arrowSymbol);
|
|
transaction_ipop.appendChild(opAddress);
|
|
|
|
transferAmount = document.createElement('p');
|
|
transferAmount.setAttribute('style', 'margin:0; padding:0;color:#333');
|
|
transferAmount.innerText = `${tokenAmount} ${tokenIdentification}`;
|
|
|
|
floData_text = document.createElement('p');
|
|
floData_text.setAttribute('style', 'margin:0; padding:0;color:#333');
|
|
floData_text.innerText = `FLO Data : ${parsed_floData["floData"]}`;
|
|
|
|
transactionContent.appendChild(transactionHash);
|
|
transactionContent.appendChild(transaction_ipop);
|
|
transactionContent.appendChild(transferAmount);
|
|
transactionContent.appendChild(floData_text);
|
|
|
|
// block info
|
|
blockInfo = document.createElement('div');
|
|
blockInfo.setAttribute('class', 'blockinfo');
|
|
blockNumber = document.createElement('a');
|
|
blockNumber.setAttribute('style', 'color: #5c34a2; text-decoration:none;background-color: transparent; font-size: 12px; line-height: 1.4rem;');
|
|
blockNumber.innerText = `Block #${txdata['blockheight']}`;
|
|
timeElapsed = document.createElement('div');
|
|
timeElapsed.setAttribute('style', 'font-weight:400; color:#828ba0;');
|
|
timeElapsed.innerText = "1 min ago";
|
|
|
|
transactionType.appendChild(color_block);
|
|
transactionType.appendChild(transactionContent);
|
|
transactionType.appendChild(blockInfo);
|
|
|
|
transactionsCard_main.insertBefore(transactionType, transactionsCard_main.childNodes[1]);
|
|
}
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html> |