RanchiMall/floscout-testnet
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v1.0.0

Browse Source
This commit is contained in:
sairaj mote 2020-05-14 10:12:16 +05:30
parent ba2f79ade5
commit 3f8652a124
4 changed files with 180 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
css/main.css
View File

@ -10,7 +10,7 @@
} }
body { body {
--primary-color: #F5F51A; --primary-color: purple;
--text: 17, 17, 17; --text: 17, 17, 17;
--text-light: 85, 85, 85; --text-light: 85, 85, 85;
--foreground: 255, 255, 255; --foreground: 255, 255, 255;
@ -22,7 +22,7 @@ body {
} }
body[data-theme='dark'] { body[data-theme='dark'] {
--text: 238, 238, 238; --text: 218, 218, 218;
--text-light: 170, 170, 170; --text-light: 170, 170, 170;
--foreground: 20, 20, 20; --foreground: 20, 20, 20;
--background: #111; --background: #111;
@ -72,15 +72,18 @@ input:invalid {
} }
button { button {
border: 1px solid rgba(var(--text), 0.2); border: none;
border-radius: 0.2em; border-radius: 0.4em;
text-transform: uppercase; text-transform: uppercase;
font-weight: 600; font-weight: 600;
letter-spacing: 0.06em; letter-spacing: 0.06em;
background: transparent; background: rgba(var(--text), 0.1);
cursor: pointer; cursor: pointer;
padding: 1em 1.5em; padding: 0.8rem 1.5rem;
color: rgba(var(--text), 1); color: rgba(var(--text), 1);
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
} }
.flex { .flex {
@ -110,7 +113,8 @@ button {
} }
.breakable { .breakable {
word-break: break-all; overflow-wrap: break-word;
letter-spacing: 0.06em;
} }
.toggle { .toggle {
@ -136,12 +140,12 @@ button {
padding: 0.2rem; padding: 0.2rem;
min-height: 1.6rem; min-height: 1.6rem;
max-height: 1.6rem; max-height: 1.6rem;
border-radius: 1rem; border-radius: 0.5rem;
position: relative; position: relative;
} }
.toggle .circle { .toggle .circle {
border-radius: 1rem; border-radius: 0.5rem;
-webkit-transition: -webkit-transform 0.3s; -webkit-transition: -webkit-transform 0.3s;
transition: -webkit-transform 0.3s; transition: -webkit-transform 0.3s;
transition: transform 0.3s; transition: transform 0.3s;
@ -197,13 +201,13 @@ section .dark-background {
.card { .card {
padding: 2rem 1.5rem; padding: 2rem 1.5rem;
border-radius: 1rem; border-radius: 0.5rem;
border: solid 1px rgba(var(--text), 0.1); border: solid 1px rgba(var(--text), 0.16);
margin: 1.5rem 0; margin: 1.5rem 0;
} }
.card h4 { .card h4 {
margin-bottom: 0.5rem; margin-bottom: 0.4rem;
font-weight: 400; font-weight: 400;
} }
@ -211,9 +215,9 @@ section .dark-background {
font-family: 'Montserrat' ,sans-serif; font-family: 'Montserrat' ,sans-serif;
text-transform: capitalize; text-transform: capitalize;
font-size: 0.8rem; font-size: 0.8rem;
margin-bottom: 0.5rem; margin-bottom: 0.4rem;
line-height: 1.4em; line-height: 1.4em;
opacity: 0.6; opacity: 0.7;
margin-top: 1.5rem; margin-top: 1.5rem;
} }
@ -261,6 +265,10 @@ section .dark-background {
fill: rgba(var(--text), 1); fill: rgba(var(--text), 1);
} }
#homepage {
padding-top: 0;
}
#first_section { #first_section {
display: -ms-grid; display: -ms-grid;
display: grid; display: grid;
@ -295,7 +303,6 @@ section .dark-background {
#main_search h1 { #main_search h1 {
font-size: 4rem; font-size: 4rem;
padding: 0 1.5rem;
text-align: left; text-align: left;
margin-top: 2rem; margin-top: 2rem;
} }
@ -307,14 +314,14 @@ section .dark-background {
-ms-grid-columns: auto 1fr; -ms-grid-columns: auto 1fr;
grid-template-columns: auto 1fr; grid-template-columns: auto 1fr;
z-index: 1; z-index: 1;
width: calc(100% - 3rem); width: 100%;
margin: 1rem; margin: 1rem;
-webkit-box-align: center; -webkit-box-align: center;
-ms-flex-align: center; -ms-flex-align: center;
align-items: center; align-items: center;
padding: 1rem; padding: 1rem;
gap: 1em; gap: 1em;
border-radius: 1rem; border-radius: 0.5rem;
background: rgba(var(--text), 0.06); background: rgba(var(--text), 0.06);
} }
@ -358,14 +365,21 @@ section .dark-background {
} }
#highlights .highlight-item { #highlights .highlight-item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
padding: 1.5rem; padding: 1.5rem;
border-radius: 1rem; border-radius: 0.5rem;
background: rgba(var(--foreground), 1); background: rgba(var(--foreground), 1);
border: 1px solid rgba(var(--text), 0.2); border: 1px solid rgba(var(--text), 0.2);
} }
#highlights .highlight-item .label { #highlights .highlight-item .label {
margin-top: 3rem; margin-top: auto;
} }
#highlights .highlight-item h1 { #highlights .highlight-item h1 {
@ -373,9 +387,10 @@ section .dark-background {
letter-spacing: 0.1rem; letter-spacing: 0.1rem;
font-weight: 500; font-weight: 500;
text-transform: uppercase; text-transform: uppercase;
overflow-wrap: break-word;
} }
#highlights .highlight-item:first-of-type, #highlights .highlight-item:nth-of-type(2) { #highlights .highlight-item:first-of-type, #highlights .highlight-item:last-of-type {
cursor: pointer; cursor: pointer;
} }
@ -435,7 +450,7 @@ section .dark-background {
-ms-flex-direction: column; -ms-flex-direction: column;
flex-direction: column; flex-direction: column;
padding: 1.5rem; padding: 1.5rem;
border-radius: 1rem; border-radius: 0.5rem;
border: solid 1px rgba(var(--text), 0.1); border: solid 1px rgba(var(--text), 0.1);
} }
@ -535,9 +550,9 @@ p {
} }
.balance-card { .balance-card {
background: linear-gradient(135deg, #5E35B1 60%, #7E57C2 10%, #311B92); background: linear-gradient(135deg, #5E35B1, #311B92);
color: white; color: white;
border-radius: 1rem; border-radius: 0.5rem;
-webkit-box-shadow: 0 0.5rem 1rem rgba(94, 53, 177, 0.4); -webkit-box-shadow: 0 0.5rem 1rem rgba(94, 53, 177, 0.4);
box-shadow: 0 0.5rem 1rem rgba(94, 53, 177, 0.4); box-shadow: 0 0.5rem 1rem rgba(94, 53, 177, 0.4);
padding: 2rem 1.5rem; padding: 2rem 1.5rem;
@ -568,24 +583,31 @@ p {
} }
.status { .status {
padding: 0.5rem; padding: 0.5rem 0.8rem;
border-radius: 1rem; border-radius: 2rem;
display: -webkit-inline-box; display: -webkit-inline-box;
display: -ms-inline-flexbox; display: -ms-inline-flexbox;
display: inline-flex; display: inline-flex;
-webkit-box-align: center; -webkit-box-align: center;
-ms-flex-align: center; -ms-flex-align: center;
align-items: center; align-items: center;
font-size: 0.8rem;
} }
.status.done { .status.done {
background: #00C853; background: #00C853;
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
color: white;
} }
.status.done svg { .status.done .icon {
margin-right: 0.5rem; margin-right: 0.5rem;
height: 1em; height: 1em;
width: 1em; width: 1em;
stroke: white;
opacity: 1;
} }
.status.closed { .status.closed {
@ -593,6 +615,16 @@ p {
border: solid 1px rgba(var(--text), 0.1); border: solid 1px rgba(var(--text), 0.1);
} }
#transaction_page .grid-2 {
-ms-grid-columns: 1fr auto;
grid-template-columns: 1fr auto;
}
.address, .token, .hash, .contract, .block {
cursor: pointer;
color: var(--primary-color);
}
@media only screen and (min-width: 640px) { @media only screen and (min-width: 640px) {
.padding { .padding {
padding: 0 6vw; padding: 0 6vw;
@ -603,10 +635,6 @@ p {
.input { .input {
width: 80vw !important; width: 80vw !important;
} }
.watermark {
font-size: 16vw !important;
line-height: 0.6em;
}
section header h1 { section header h1 {
font-size: 2rem; font-size: 2rem;
} }
@ -650,7 +678,7 @@ p {
padding: 0 8vw; padding: 0 8vw;
} }
.margin { .margin {
margin: 0 8vw; margin: 0 16vw;
} }
.input { .input {
width: 50vw !important; width: 50vw !important;
@ -690,7 +718,7 @@ p {
padding: 0 12vw; padding: 0 12vw;
} }
.margin { .margin {
margin: 0 12vw; margin: 0 26vw;
} }
} }
@ -702,7 +730,7 @@ p {
padding: 0 24vw; padding: 0 24vw;
} }
.margin { .margin {
margin: 0 24vw; margin: 0 32vw;
} }
#first_section { #first_section {
min-height: auto; min-height: auto;

2
css/main.css.map
View File

File diff suppressed because one or more lines are too long

86
css/main.scss
View File

@ -8,7 +8,7 @@
font-family: 'Roboto', sans-serif; font-family: 'Roboto', sans-serif;
} }
body{ body{
--primary-color: #F5F51A; --primary-color: purple;
--text: 17, 17, 17; --text: 17, 17, 17;
--text-light: 85, 85, 85; --text-light: 85, 85, 85;
--foreground: 255, 255, 255; --foreground: 255, 255, 255;
@ -19,7 +19,7 @@ body{
background: rgba(var(--foreground), 1); background: rgba(var(--foreground), 1);
} }
body[data-theme='dark']{ body[data-theme='dark']{
--text: 238, 238, 238; --text: 218, 218, 218;
--text-light: 170, 170, 170; --text-light: 170, 170, 170;
--foreground: 20, 20, 20; --foreground: 20, 20, 20;
--background: #111; --background: #111;
@ -48,15 +48,16 @@ input:invalid{
border: none; border: none;
} }
button{ button{
border: 1px solid rgba(var(--text), 0.2); border: none;
border-radius: 0.2em; border-radius: 0.4em;
text-transform: uppercase; text-transform: uppercase;
font-weight: 600; font-weight: 600;
letter-spacing: 0.06em; letter-spacing: 0.06em;
background: transparent; background: rgba(var(--text), 0.1);
cursor: pointer; cursor: pointer;
padding: 1em 1.5em; padding: 0.8rem 1.5rem;
color: rgba(var(--text), 1); color: rgba(var(--text), 1);
align-self: center;
} }
.flex{ .flex{
display: flex; display: flex;
@ -76,7 +77,8 @@ button{
display: none !important; display: none !important;
} }
.breakable{ .breakable{
word-break: break-all; overflow-wrap: break-word;
letter-spacing: 0.06em;
} }
.toggle{ .toggle{
position: relative; position: relative;
@ -93,11 +95,11 @@ button{
padding: 0.2rem; padding: 0.2rem;
min-height: 1.6rem; min-height: 1.6rem;
max-height: 1.6rem; max-height: 1.6rem;
border-radius: 1rem; border-radius: 0.5rem;
position: relative; position: relative;
} }
.circle{ .circle{
border-radius: 1rem; border-radius: 0.5rem;
transition: transform 0.3s; transition: transform 0.3s;
&:first-of-type{ &:first-of-type{
margin-bottom: 0.4rem; margin-bottom: 0.4rem;
@ -138,11 +140,11 @@ section{
} }
.card{ .card{
padding: 2rem 1.5rem; padding: 2rem 1.5rem;
border-radius: 1rem; border-radius: 0.5rem;
border: solid 1px rgba(var(--text), 0.1); border: solid 1px rgba(var(--text), 0.16);
margin: 1.5rem 0; margin: 1.5rem 0;
h4{ h4{
margin-bottom: 0.5rem; margin-bottom: 0.4rem;
font-weight: 400; font-weight: 400;
} }
} }
@ -150,9 +152,9 @@ section{
font-family: 'Montserrat' ,sans-serif; font-family: 'Montserrat' ,sans-serif;
text-transform: capitalize; text-transform: capitalize;
font-size: 0.8rem; font-size: 0.8rem;
margin-bottom: 0.5rem; margin-bottom: 0.4rem;
line-height: 1.4em; line-height: 1.4em;
opacity: 0.6; opacity: 0.7;
margin-top: 1.5rem; margin-top: 1.5rem;
&:first-of-type{ &:first-of-type{
margin-top: 0; margin-top: 0;
@ -184,6 +186,9 @@ section{
fill: rgba(var(--text), 1); fill: rgba(var(--text), 1);
} }
} }
#homepage{
padding-top: 0;
}
#first_section{ #first_section{
display: grid; display: grid;
grid-template-rows: auto 1fr auto; grid-template-rows: auto 1fr auto;
@ -203,7 +208,6 @@ section{
} }
h1{ h1{
font-size: 4rem; font-size: 4rem;
padding: 0 1.5rem;
text-align: left; text-align: left;
margin-top: 2rem; margin-top: 2rem;
} }
@ -212,12 +216,12 @@ section{
display: grid; display: grid;
grid-template-columns: auto 1fr; grid-template-columns: auto 1fr;
z-index: 1; z-index: 1;
width: calc(100% - 3rem); width: 100%;
margin: 1rem; margin: 1rem;
align-items: center; align-items: center;
padding: 1rem; padding: 1rem;
gap: 1em; gap: 1em;
border-radius: 1rem; border-radius: 0.5rem;
background: rgba(var(--text), 0.06); background: rgba(var(--text), 0.06);
//border: solid 1px rgba(var(--text), 0.6); //border: solid 1px rgba(var(--text), 0.6);
} }
@ -256,20 +260,23 @@ section{
'contract contract'; 'contract contract';
gap: 1.5rem; gap: 1.5rem;
.highlight-item{ .highlight-item{
display: flex;
flex-direction: column;
padding: 1.5rem; padding: 1.5rem;
border-radius: 1rem; border-radius: 0.5rem;
background: rgba(var(--foreground), 1); background: rgba(var(--foreground), 1);
border: 1px solid rgba(var(--text), 0.2); border: 1px solid rgba(var(--text), 0.2);
.label{ .label{
margin-top: 3rem; margin-top: auto;
} }
h1{ h1{
font-size: 2rem; font-size: 2rem;
letter-spacing: 0.1rem; letter-spacing: 0.1rem;
font-weight: 500; font-weight: 500;
text-transform: uppercase; text-transform: uppercase;
overflow-wrap: break-word;
} }
&:first-of-type,&:nth-of-type(2){ &:first-of-type,&:last-of-type{
cursor: pointer; cursor: pointer;
} }
&:first-of-type{ &:first-of-type{
@ -307,7 +314,7 @@ section{
.transaction{ .transaction{
flex-direction: column; flex-direction: column;
padding: 1.5rem; padding: 1.5rem;
border-radius: 1rem; border-radius: 0.5rem;
border: solid 1px rgba(var(--text), 0.1); border: solid 1px rgba(var(--text), 0.1);
.transaction-header{ .transaction-header{
margin-bottom: 2em; margin-bottom: 2em;
@ -383,9 +390,9 @@ p{
text-transform: capitalize; text-transform: capitalize;
} }
.balance-card{ .balance-card{
background: linear-gradient(135deg, #5E35B1 60%,#7E57C2 10%,#311B92); background: linear-gradient(135deg, #5E35B1,#311B92);
color: white; color: white;
border-radius: 1rem; border-radius: 0.5rem;
box-shadow: 0 0.5rem 1rem rgba($color: #5E35B1, $alpha: 0.4); box-shadow: 0 0.5rem 1rem rgba($color: #5E35B1, $alpha: 0.4);
padding: 2rem 1.5rem; padding: 2rem 1.5rem;
.flo-logo{ .flo-logo{
@ -410,16 +417,21 @@ p{
} }
} }
.status{ .status{
padding: 0.5rem; padding: 0.5rem 0.8rem;
border-radius: 1rem; border-radius: 2rem;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
font-size: 0.8rem;
&.done{ &.done{
background: #00C853; background: #00C853;
svg{ align-self: center;
color: white;
.icon{
margin-right: 0.5rem; margin-right: 0.5rem;
height: 1em; height: 1em;
width: 1em; width: 1em;
stroke: white;
opacity: 1;
} }
} }
&.closed{ &.closed{
@ -427,6 +439,15 @@ p{
border: solid 1px rgba(var(--text), 0.1); border: solid 1px rgba(var(--text), 0.1);
} }
} }
#transaction_page{
.grid-2{
grid-template-columns: 1fr auto;
}
}
.address, .token, .hash, .contract, .block{
cursor: pointer;
color: var(--primary-color);
}
@media only screen and (min-width: 640px){ @media only screen and (min-width: 640px){
.padding{ .padding{
padding: 0 6vw; padding: 0 6vw;
@ -437,10 +458,6 @@ p{
.input{ .input{
width: 80vw !important; width: 80vw !important;
} }
.watermark{
font-size: 16vw !important;
line-height: 0.6em;
}
section{ section{
header{ header{
h1{ h1{
@ -476,16 +493,13 @@ p{
} }
} }
} }
}
.page{
} }
@media only screen and (min-width: 1280px){ @media only screen and (min-width: 1280px){
.padding{ .padding{
padding: 0 8vw; padding: 0 8vw;
} }
.margin{ .margin{
margin: 0 8vw; margin: 0 16vw;
} }
.input{ .input{
@ -518,7 +532,7 @@ p{
padding: 0 12vw; padding: 0 12vw;
} }
.margin{ .margin{
margin: 0 12vw; margin: 0 26vw;
} }
} }
@media only screen and (min-width: 2048px){ @media only screen and (min-width: 2048px){
@ -529,7 +543,7 @@ p{
padding: 0 24vw; padding: 0 24vw;
} }
.margin{ .margin{
margin: 0 24vw; margin: 0 32vw;
} }
#first_section{ #first_section{
min-height: auto; min-height: auto;

101
index.html
View File

@ -6,11 +6,11 @@
<title>FLO Scout</title> <title>FLO Scout</title>
<link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/main.css">
</head> </head>
<body data-theme=''> <body data-theme='dark'>
<main> <main>
<div class="page hide-completely"> <div id="homepage" class="page hide-completely margin">
<section id="first_section"> <section id="first_section">
<header class="margin header"> <header class="header">
<div id="logo"> <div id="logo">
<svg id="main_logo" viewBox="0 0 27.25 32"> <svg id="main_logo" viewBox="0 0 27.25 32">
<title>RanchiMall</title> <title>RanchiMall</title>
@ -52,7 +52,7 @@
<input type="search" placeholder="Search"> <input type="search" placeholder="Search">
</label> </label>
</div> </div>
<div id="highlights" class="margin"> <div id="highlights">
<div class="highlight-item"> <div class="highlight-item">
<h4 class="label">top token</h4> <h4 class="label">top token</h4>
<h1>RMT</h1> <h1>RMT</h1>
@ -72,27 +72,25 @@
</div> </div>
</section> </section>
<section id="latest_transaction_section"> <section id="latest_transaction_section">
<header class="margin grid grid-2 header"> <header class="grid grid-2 header">
<h1 class="montserrat">Latest transactions</h1> <h1 class="montserrat">Latest transactions</h1>
<button class="margin-left-auto">all</button> <button class="margin-left-auto">all</button>
</header> </header>
<div id="top_transaction_container" class="padding"> <div id="top_transaction_container">
<div class="transaction"> <div class="transaction">
<div class="transaction-header grid grid-2"> <div class="transaction-header grid grid-2">
<div> <div>
<h5>Token transfer</h5> <h5>Token transfer</h5>
<h2>Rupee</h2> <h2 class="token">Rupee</h2>
</div>
<div class="icon">
<svg viewBox="0 0 64 64">
<title>More infomation icon</title>
<path d="M32,0A32,32,0,1,0,64,32,32,32,0,0,0,32,0Zm3.07,47.91a3.1,3.1,0,0,1-6.19,0V26.55a3.1,3.1,0,0,1,6.19,0Zm-.49-29.27a3.46,3.46,0,0,1-2.59.93,3.46,3.46,0,0,1-2.59-.93,3.22,3.22,0,0,1-.9-2.33,3.3,3.3,0,0,1,.9-2.37A3.43,3.43,0,0,1,32,13a3.43,3.43,0,0,1,2.59.94,3.27,3.27,0,0,1,.92,2.37A3.2,3.2,0,0,1,34.58,18.64Z"/>
</svg>
</div> </div>
<svg class="icon" viewBox="0 0 64 64">
<title>More infomation icon</title>
<path d="M32,0A32,32,0,1,0,64,32,32,32,0,0,0,32,0Zm3.07,47.91a3.1,3.1,0,0,1-6.19,0V26.55a3.1,3.1,0,0,1,6.19,0Zm-.49-29.27a3.46,3.46,0,0,1-2.59.93,3.46,3.46,0,0,1-2.59-.93,3.22,3.22,0,0,1-.9-2.33,3.3,3.3,0,0,1,.9-2.37A3.43,3.43,0,0,1,32,13a3.43,3.43,0,0,1,2.59.94,3.27,3.27,0,0,1,.92,2.37A3.2,3.2,0,0,1,34.58,18.64Z"/>
</svg>
</div> </div>
<h4 class="breakable">FDhQizsksSHs4dyJBeLqGcbyuEg163jhXi</h4> <h4 class="breakable address">FDhQizsksSHs4dyJBeLqGcbyuEg163jhXi</h4>
<h5>to</h5> <h5>to</h5>
<h4 class="breakable">FDhQizsksSHs4dyJBeLqGcbyuEg163jhXi</h4> <h4 class="breakable address">FDhQizsksSHs4dyJBeLqGcbyuEg163jhXi</h4>
<h3>₹0.000000007</h3> <h3>₹0.000000007</h3>
</div> </div>
</div> </div>
@ -100,15 +98,15 @@
</div> </div>
<div id="page_container" class="margin"> <div id="page_container" class="margin">
<header id="page_header" class="flex"> <header id="page_header" class="flex">
<svg class="icon" id="back_btn" viewBox="0 0 32.5 64"> <svg class="icon" onclick="showPage('homepage')" id="back_btn" viewBox="0 0 32.5 64">
<title>Back Button</title> <title>Back Button</title>
<polyline points="32.15 0.35 0.7 31.8 32.15 63.72"/> <polyline points="32.15 0.35 0.7 31.8 32.15 63.72"/>
</svg> </svg>
<h3 id="page_title">Block</h3> <h3 id="page_title">Block</h3>
<svg class="icon search margin-left-auto" viewBox="0 0 64 64"> <svg class="icon search margin-left-auto" viewBox="0 0 64 64">
<title>search icon</title> <title>search icon</title>
<path d="M24,1.58A22.15,22.15,0,0,1,39.68,39.39,22.15,22.15,0,0,1,8.36,8.07,22,22,0,0,1,24,1.58M24,0A23.73,23.73,0,1,0,40.8,7,23.65,23.65,0,0,0,24,0Z" transform="translate(-0.3 0)"/> <circle cx="25.34" cy="25.34" r="24.84"/>
<line x1="63.35" y1="63.35" x2="39.86" y2="39.86"/> <line x1="63.65" y1="63.65" x2="42.91" y2="42.91"/>
</svg> </svg>
</header> </header>
<div id="all_transations" class=""> <div id="all_transations" class="">
@ -119,14 +117,14 @@
</div> </div>
<div id="block_page" class="page hide-completely"> <div id="block_page" class="page hide-completely">
<h5 class="label">Block Height</h5> <h5 class="label">Block Height</h5>
<h2>4008986</h2> <h2 class="block">4008986</h2>
<div class="card"> <div class="card">
<h4>1 Transction</h4> <h4>1 Transction</h4>
<h5 class="label">57465724.625 bytes</h5> <h5 class="label">57465724.625 bytes</h5>
<h5 class="label">Reward</h5> <h5 class="label">Reward</h5>
<h4>3.1253FLO</h4> <h4>3.1253FLO</h4>
<h5 class="label">Hash</h5> <h5 class="label">Hash</h5>
<h4 class="breakable">17779bedfe0c174eea678318adf30ff33f74c575ce7238efe339927832632fe1</h4> <h4 class="breakable hash">17779bedfe0c174eea678318adf30ff33f74c575ce7238efe339927832632fe1</h4>
<h5 class="label">Difficulty</h5> <h5 class="label">Difficulty</h5>
<h4>681</h4> <h4>681</h4>
<h5 class="label">Nonce</h5> <h5 class="label">Nonce</h5>
@ -145,9 +143,9 @@
<path d="M32,0A32,32,0,1,0,64,32,32,32,0,0,0,32,0Zm3.07,47.91a3.1,3.1,0,0,1-6.19,0V26.55a3.1,3.1,0,0,1,6.19,0Zm-.49-29.27a3.46,3.46,0,0,1-2.59.93,3.46,3.46,0,0,1-2.59-.93,3.22,3.22,0,0,1-.9-2.33,3.3,3.3,0,0,1,.9-2.37A3.43,3.43,0,0,1,32,13a3.43,3.43,0,0,1,2.59.94,3.27,3.27,0,0,1,.92,2.37A3.2,3.2,0,0,1,34.58,18.64Z"/> <path d="M32,0A32,32,0,1,0,64,32,32,32,0,0,0,32,0Zm3.07,47.91a3.1,3.1,0,0,1-6.19,0V26.55a3.1,3.1,0,0,1,6.19,0Zm-.49-29.27a3.46,3.46,0,0,1-2.59.93,3.46,3.46,0,0,1-2.59-.93,3.22,3.22,0,0,1-.9-2.33,3.3,3.3,0,0,1,.9-2.37A3.43,3.43,0,0,1,32,13a3.43,3.43,0,0,1,2.59.94,3.27,3.27,0,0,1,.92,2.37A3.2,3.2,0,0,1,34.58,18.64Z"/>
</svg> </svg>
</div> </div>
<h4 class="breakable">FDhQizsksSHs4dyJBeLqGcbyuEg163jhXi</h4> <h4 class="breakable address">FDhQizsksSHs4dyJBeLqGcbyuEg163jhXi</h4>
<h5>to</h5> <h5>to</h5>
<h4 class="breakable">FDhQizsksSHs4dyJBeLqGcbyuEg163jhXi</h4> <h4 class="breakable address">FDhQizsksSHs4dyJBeLqGcbyuEg163jhXi</h4>
<h3>₹0.000000007</h3> <h3>₹0.000000007</h3>
</div> </div>
</div> </div>
@ -177,24 +175,35 @@
</div> </div>
</div> </div>
<div id="transaction_page"> <div id="transaction_page" class="page">
<h5 class="label">Token Transfer</h5> <div class="grid grid-2">
<h2>RUPEE </h2> <div>
<h5 class="label">Token Transfer</h5>
<h2 class="token">RUPEE </h2>
</div>
<div class="status done">
<svg class="icon" viewBox="0 0 64 42">
<title>Success</title>
<polyline points="0.35 19.41 22.4 41.29 63.65 0.35"/>
</svg>
Success
</div>
</div>
<div class="card"> <div class="card">
<h4>Block</h4> <h4>Block</h4>
<h5 class="label">#40008986</h5> <h5 class="label block">#40008986</h5>
<h5 class="label">Amount</h5> <h5 class="label">Amount</h5>
<h4>3.1253FLO</h4> <h4>3.1253FLO</h4>
<h5 class="label">Sender</h5> <h5 class="label">Sender</h5>
<h4 class="breakable">F7HEAV9226tqXtRk34XrA9nZCb8ZcbVJt1</h4> <h4 class="breakable address">F7HEAV9226tqXtRk34XrA9nZCb8ZcbVJt1</h4>
<h5 class="label">Reciever</h5> <h5 class="label">Reciever</h5>
<h4 class="breakable">F7HEAV9226tqXtRk34XrA9nZCb8ZcbVJt1</h4> <h4 class="breakable address">F7HEAV9226tqXtRk34XrA9nZCb8ZcbVJt1</h4>
</div> </div>
<div class="card"> <div class="card">
<h5 class="label">FLO Data</h5> <h5 class="label">FLO Data</h5>
<p>transfer 40000 rupee# to FJyz51JTnPuB3AMRjyYe3rbuLmnq4qErcc</p> <p>transfer 40000 rupee# to FJyz51JTnPuB3AMRjyYe3rbuLmnq4qErcc</p>
<h5 class="label">Hash</h5> <h5 class="label">Hash</h5>
<h4 class="breakable">17779bedfe0c174eea678318adf30ff33f74c575ce7238efe339927832632fe1</h4> <h4 class="breakable hash">17779bedfe0c174eea678318adf30ff33f74c575ce7238efe339927832632fe1</h4>
<h5 class="label">Block Confirmations</h5> <h5 class="label">Block Confirmations</h5>
<h4>2527</h4> <h4>2527</h4>
</div> </div>
@ -237,13 +246,18 @@
} }
const allPages = document.querySelectorAll('.page'), const allPages = document.querySelectorAll('.page'),
pageTitle = document.getElementById('page_title'); pageTitle = document.getElementById('page_title'),
pageContainer = document.getElementById('page_container');
function showPage(pageId){ function showPage(pageId){
let thisPage = document.getElementById(pageId); let thisPage = document.getElementById(pageId);
allPages.forEach(page => { allPages.forEach(page => {
page.classList.add('hide-completely') page.classList.add('hide-completely')
}) })
thisPage.classList.remove('hide-completely') thisPage.classList.remove('hide-completely')
if(pageId === 'homepage')
pageContainer.classList.add('hide-completely')
else
pageContainer.classList.remove('hide-completely')
} }
const create = { const create = {
@ -254,20 +268,41 @@
card.innerHTML = `<div class="transaction-header grid grid-2"> card.innerHTML = `<div class="transaction-header grid grid-2">
<div> <div>
<h5>${type}</h5> <h5>${type}</h5>
<h2>${name}</h2> <h2 class="token">${name}</h2>
</div> </div>
<svg class="icon margin-left-auto" viewBox="0 0 64 64"> <svg class="icon margin-left-auto" viewBox="0 0 64 64">
<title>More infomation icon</title> <title>More infomation icon</title>
<path d="M32,0A32,32,0,1,0,64,32,32,32,0,0,0,32,0Zm3.07,47.91a3.1,3.1,0,0,1-6.19,0V26.55a3.1,3.1,0,0,1,6.19,0Zm-.49-29.27a3.46,3.46,0,0,1-2.59.93,3.46,3.46,0,0,1-2.59-.93,3.22,3.22,0,0,1-.9-2.33,3.3,3.3,0,0,1,.9-2.37A3.43,3.43,0,0,1,32,13a3.43,3.43,0,0,1,2.59.94,3.27,3.27,0,0,1,.92,2.37A3.2,3.2,0,0,1,34.58,18.64Z"/> <path d="M32,0A32,32,0,1,0,64,32,32,32,0,0,0,32,0Zm3.07,47.91a3.1,3.1,0,0,1-6.19,0V26.55a3.1,3.1,0,0,1,6.19,0Zm-.49-29.27a3.46,3.46,0,0,1-2.59.93,3.46,3.46,0,0,1-2.59-.93,3.22,3.22,0,0,1-.9-2.33,3.3,3.3,0,0,1,.9-2.37A3.43,3.43,0,0,1,32,13a3.43,3.43,0,0,1,2.59.94,3.27,3.27,0,0,1,.92,2.37A3.2,3.2,0,0,1,34.58,18.64Z"/>
</svg> </svg>
</div> </div>
<h4 class="breakable">${sender}</h4> <h4 class="breakable address">${sender}</h4>
<h5>to</h5> <h5>to</h5>
<h4 class="breakable">${reciever}</h4> <h4 class="breakable address">${reciever}</h4>
<h3>₹${amount}</h3>`; <h3>₹${amount}</h3>`;
return card; return card;
} }
} }
window.addEventListener('load', () => {
document.querySelector('main').addEventListener('click', e => {
if(e.target.closest('.address')){
showPage("address_page")
pageTitle.textContent = 'Address'
}
if(e.target.closest('.token')){
showPage("token_page")
pageTitle.textContent = 'Token'
}
if(e.target.closest('.hash')){
showPage("transaction_page")
pageTitle.textContent = 'Transaction'
}
if(e.target.closest('.block')){
showPage("block_page")
pageTitle.textContent = 'Block'
}
})
})
</script> </script>
</body> </body>
</html> </html>