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

v1.0.3

Browse Source
This commit is contained in:
sairaj mote 2020-05-15 09:48:01 +05:30
parent b27d27c65b
commit d88557ca59
4 changed files with 116 additions and 143 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
css/main.css
View File

@ -1,4 +1,4 @@
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;1,700&family=Roboto:wght@400;500;700&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap");
*, *,
::before, ::before,
::after { ::after {
@ -21,6 +21,10 @@ body {
background: rgba(var(--foreground), 1); background: rgba(var(--foreground), 1);
} }
body h5 {
font-weight: 500;
}
body[data-theme='dark'] { body[data-theme='dark'] {
--text: 218, 218, 218; --text: 218, 218, 218;
--text-light: 170, 170, 170; --text-light: 170, 170, 170;
@ -29,13 +33,8 @@ body[data-theme='dark'] {
--dark-shade: #1a1a1a; --dark-shade: #1a1a1a;
} }
.transition { body[data-theme='dark'] h5 {
-webkit-transition: all 0.6s; font-weight: 400;
transition: all 0.6s;
}
h5 {
font-weight: 500;
} }
input[type=text]::-ms-clear { input[type=text]::-ms-clear {
@ -75,7 +74,7 @@ button {
border: none; border: none;
border-radius: 0.4em; border-radius: 0.4em;
text-transform: uppercase; text-transform: uppercase;
font-weight: 600; font-weight: 500;
letter-spacing: 0.06em; letter-spacing: 0.06em;
background: rgba(var(--text), 0.1); background: rgba(var(--text), 0.1);
cursor: pointer; cursor: pointer;
@ -86,6 +85,18 @@ button {
align-self: center; align-self: center;
} }
h1 {
font-size: 4rem;
}
h2 {
font-size: 2rem;
}
h3 {
font-size: 1.5rem;
}
.flex { .flex {
display: -webkit-box; display: -webkit-box;
display: -ms-flexbox; display: -ms-flexbox;
@ -212,15 +223,11 @@ ul .balance:last-of-type {
margin-bottom: 0; margin-bottom: 0;
} }
.padding {
padding: 0 1.5rem;
}
.top-bottom-padding { .top-bottom-padding {
padding: 1.5rem 0; padding: 1.5rem 0;
} }
.margin { .margin, .page {
margin: 0 1.5rem; margin: 0 1.5rem;
} }
@ -231,7 +238,7 @@ ul .balance:last-of-type {
.card { .card {
padding: 2rem 1.5rem; padding: 2rem 1.5rem;
border-radius: 0.5rem; border-radius: 0.5rem;
border: solid 1px rgba(var(--text), 0.16); background: rgba(var(--text), 0.06);
margin: 1.5rem 0; margin: 1.5rem 0;
} }
@ -242,10 +249,9 @@ ul .balance:last-of-type {
} }
.label { .label {
font-family: 'Montserrat' ,sans-serif;
text-transform: capitalize; text-transform: capitalize;
font-size: 0.8rem; font-size: 0.8rem;
margin-bottom: 0.4rem; margin-bottom: 0.3rem;
line-height: 1.4em; line-height: 1.4em;
opacity: 0.7; opacity: 0.7;
margin-top: 1.5rem; margin-top: 1.5rem;
@ -265,15 +271,6 @@ ul .balance:last-of-type {
padding: 2em 0; padding: 2em 0;
} }
.header h1 {
font-size: 1.2rem;
text-transform: capitalize;
}
.header .montserrat {
font-weight: 600;
}
#logo { #logo {
display: -webkit-inline-box; display: -webkit-inline-box;
display: -ms-inline-flexbox; display: -ms-inline-flexbox;
@ -335,6 +332,7 @@ ul .balance:last-of-type {
font-size: 4rem; font-size: 4rem;
text-align: left; text-align: left;
margin-top: 2rem; margin-top: 2rem;
font-weight: 500;
} }
#main_search .input { #main_search .input {
@ -404,8 +402,7 @@ ul .balance:last-of-type {
flex-direction: column; flex-direction: column;
padding: 1.5rem; padding: 1.5rem;
border-radius: 0.5rem; border-radius: 0.5rem;
background: rgba(var(--foreground), 1); background: rgba(var(--text), 0.06);
border: 1px solid rgba(var(--text), 0.2);
} }
#highlights .highlight-item .label { #highlights .highlight-item .label {
@ -458,12 +455,6 @@ ul .balance:last-of-type {
grid-area: contract; grid-area: contract;
} }
.montserrat {
font-family: 'montserrat', sans-serif;
font-weight: normal;
letter-spacing: 0.06em;
}
#top_transaction_container { #top_transaction_container {
display: -ms-grid; display: -ms-grid;
display: grid; display: grid;
@ -481,7 +472,7 @@ ul .balance:last-of-type {
flex-direction: column; flex-direction: column;
padding: 1.5rem; padding: 1.5rem;
border-radius: 0.5rem; border-radius: 0.5rem;
border: solid 1px rgba(var(--text), 0.1); background: rgba(var(--text), 0.06);
} }
.transaction .transaction-header { .transaction .transaction-header {
@ -561,7 +552,6 @@ ul .balance:last-of-type {
-webkit-box-align: center; -webkit-box-align: center;
-ms-flex-align: center; -ms-flex-align: center;
align-items: center; align-items: center;
font-family: 'Montserrat', sans-serif;
} }
#page_header h3 { #page_header h3 {
@ -574,7 +564,6 @@ ul .balance:last-of-type {
.page h3.heading { .page h3.heading {
margin-top: 2rem; margin-top: 2rem;
font-family: 'Montserrat', sans-serif;
} }
p { p {
@ -671,7 +660,6 @@ p {
.tabs .tab { .tabs .tab {
cursor: pointer; cursor: pointer;
font-family: 'Montserrat', sans-serif;
opacity: 0.6; opacity: 0.6;
padding-bottom: 0.5rem; padding-bottom: 0.5rem;
margin-right: 1rem; margin-right: 1rem;
@ -708,10 +696,7 @@ p {
} }
@media only screen and (min-width: 640px) { @media only screen and (min-width: 640px) {
.padding { .margin, .page {
padding: 0 6vw;
}
.margin {
margin: 0 6vw; margin: 0 6vw;
} }
#homepage { #homepage {
@ -759,10 +744,7 @@ p {
} }
@media only screen and (min-width: 1280px) { @media only screen and (min-width: 1280px) {
.padding { .margin, .page {
padding: 0 8vw;
}
.margin {
margin: 0 16vw; margin: 0 16vw;
} }
#homepage { #homepage {
@ -802,10 +784,7 @@ p {
body { body {
font-size: 24px; font-size: 24px;
} }
.padding { .margin, .page {
padding: 0 12vw;
}
.margin {
margin: 0 26vw; margin: 0 26vw;
} }
#homepage { #homepage {
@ -817,10 +796,7 @@ p {
body { body {
font-size: 24px; font-size: 24px;
} }
.padding { .margin, .page {
padding: 0 24vw;
}
.margin {
margin: 0 32vw; margin: 0 32vw;
} }
#homepage { #homepage {

2
css/main.css.map
View File

File diff suppressed because one or more lines are too long

80
css/main.scss
View File

@ -1,4 +1,4 @@
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;1,700&family=Roboto:wght@400;500;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');
*, *,
::before, ::before,
::after{ ::after{
@ -17,6 +17,9 @@ body{
font-size: 16px; font-size: 16px;
color: rgba(var(--text), 1); color: rgba(var(--text), 1);
background: rgba(var(--foreground), 1); background: rgba(var(--foreground), 1);
h5{
font-weight: 500;
}
} }
body[data-theme='dark']{ body[data-theme='dark']{
--text: 218, 218, 218; --text: 218, 218, 218;
@ -24,12 +27,9 @@ body[data-theme='dark']{
--foreground: 20, 20, 20; --foreground: 20, 20, 20;
--background: #111; --background: #111;
--dark-shade: #1a1a1a; --dark-shade: #1a1a1a;
} h5{
.transition{ font-weight: 400;
transition: all 0.6s; }
}
h5{
font-weight: 500;
} }
input[type=text]::-ms-clear { display: none; width : 0; height: 0; } input[type=text]::-ms-clear { display: none; width : 0; height: 0; }
input[type=text]::-ms-reveal { display: none; width : 0; height: 0; } input[type=text]::-ms-reveal { display: none; width : 0; height: 0; }
@ -51,7 +51,7 @@ button{
border: none; border: none;
border-radius: 0.4em; border-radius: 0.4em;
text-transform: uppercase; text-transform: uppercase;
font-weight: 600; font-weight: 500;
letter-spacing: 0.06em; letter-spacing: 0.06em;
background: rgba(var(--text), 0.1); background: rgba(var(--text), 0.1);
cursor: pointer; cursor: pointer;
@ -59,6 +59,15 @@ button{
color: rgba(var(--text), 1); color: rgba(var(--text), 1);
align-self: center; align-self: center;
} }
h1{
font-size: 4rem;
}
h2{
font-size: 2rem;
}
h3{
font-size: 1.5rem;
}
.flex{ .flex{
display: flex; display: flex;
} }
@ -150,13 +159,10 @@ ul{
} }
} }
} }
.padding{
padding: 0 1.5rem;
}
.top-bottom-padding{ .top-bottom-padding{
padding: 1.5rem 0; padding: 1.5rem 0;
} }
.margin{ .margin, .page{
margin: 0 1.5rem; margin: 0 1.5rem;
} }
.margin-left-auto{ .margin-left-auto{
@ -165,7 +171,8 @@ ul{
.card{ .card{
padding: 2rem 1.5rem; padding: 2rem 1.5rem;
border-radius: 0.5rem; border-radius: 0.5rem;
border: solid 1px rgba(var(--text), 0.16); //border: solid 1px rgba(var(--text), 0.16);
background: rgba(var(--text), 0.06);
margin: 1.5rem 0; margin: 1.5rem 0;
h4{ h4{
margin-bottom: 0.4rem; margin-bottom: 0.4rem;
@ -174,13 +181,13 @@ ul{
} }
} }
.label{ .label{
font-family: 'Montserrat' ,sans-serif;
text-transform: capitalize; text-transform: capitalize;
font-size: 0.8rem; font-size: 0.8rem;
margin-bottom: 0.4rem; margin-bottom: 0.3rem;
line-height: 1.4em; line-height: 1.4em;
opacity: 0.7; opacity: 0.7;
margin-top: 1.5rem; margin-top: 1.5rem;
&:first-of-type{ &:first-of-type{
margin-top: 0; margin-top: 0;
} }
@ -189,13 +196,6 @@ ul{
display: flex; display: flex;
align-items: center; align-items: center;
padding: 2em 0; padding: 2em 0;
h1{
font-size: 1.2rem;
text-transform: capitalize;
}
.montserrat{
font-weight: 600;
}
} }
#logo{ #logo{
display: inline-flex; display: inline-flex;
@ -235,6 +235,7 @@ ul{
font-size: 4rem; font-size: 4rem;
text-align: left; text-align: left;
margin-top: 2rem; margin-top: 2rem;
font-weight: 500;
} }
.input{ .input{
position: relative; position: relative;
@ -289,8 +290,8 @@ ul{
flex-direction: column; flex-direction: column;
padding: 1.5rem; padding: 1.5rem;
border-radius: 0.5rem; border-radius: 0.5rem;
background: rgba(var(--foreground), 1); background: rgba(var(--text), 0.06);
border: 1px solid rgba(var(--text), 0.2); //border: 1px solid rgba(var(--text), 0.2);
.label{ .label{
margin-top: auto; margin-top: auto;
} }
@ -324,11 +325,6 @@ ul{
} }
} }
} }
.montserrat{
font-family: 'montserrat', sans-serif;
font-weight: normal;
letter-spacing: 0.06em;
}
#top_transaction_container{ #top_transaction_container{
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
@ -340,7 +336,8 @@ ul{
flex-direction: column; flex-direction: column;
padding: 1.5rem; padding: 1.5rem;
border-radius: 0.5rem; border-radius: 0.5rem;
border: solid 1px rgba(var(--text), 0.1); //border: solid 1px rgba(var(--text), 0.1);
background: rgba(var(--text), 0.06);
.transaction-header{ .transaction-header{
margin-bottom: 2em; margin-bottom: 2em;
grid-template-columns: auto 1fr; grid-template-columns: auto 1fr;
@ -400,7 +397,6 @@ ul{
#page_header{ #page_header{
padding: 1.5rem 0; padding: 1.5rem 0;
align-items: center; align-items: center;
font-family: 'Montserrat', sans-serif;
h3{ h3{
font-weight: 500; font-weight: 500;
} }
@ -409,7 +405,6 @@ ul{
padding: 1.5rem 0; padding: 1.5rem 0;
h3.heading{ h3.heading{
margin-top: 2rem; margin-top: 2rem;
font-family: 'Montserrat', sans-serif;
} }
} }
p{ p{
@ -484,7 +479,6 @@ p{
overflow-x: auto; overflow-x: auto;
.tab{ .tab{
cursor: pointer; cursor: pointer;
font-family: 'Montserrat', sans-serif;
opacity: 0.6; opacity: 0.6;
padding-bottom: 0.5rem; padding-bottom: 0.5rem;
margin-right: 1rem; margin-right: 1rem;
@ -515,10 +509,7 @@ p{
margin: 0 1.5rem; margin: 0 1.5rem;
} }
@media only screen and (min-width: 640px){ @media only screen and (min-width: 640px){
.padding{ .margin, .page{
padding: 0 6vw;
}
.margin{
margin: 0 6vw; margin: 0 6vw;
} }
#homepage{ #homepage{
@ -564,10 +555,7 @@ p{
} }
} }
@media only screen and (min-width: 1280px){ @media only screen and (min-width: 1280px){
.padding{ .margin, .page{
padding: 0 8vw;
}
.margin{
margin: 0 16vw; margin: 0 16vw;
} }
#homepage{ #homepage{
@ -599,10 +587,7 @@ p{
body{ body{
font-size: 24px; font-size: 24px;
} }
.padding{ .margin, .page{
padding: 0 12vw;
}
.margin{
margin: 0 26vw; margin: 0 26vw;
} }
#homepage{ #homepage{
@ -613,10 +598,7 @@ p{
body{ body{
font-size: 24px; font-size: 24px;
} }
.padding{ .margin, .page{
padding: 0 24vw;
}
.margin{
margin: 0 32vw; margin: 0 32vw;
} }
#homepage{ #homepage{

93
index.html
View File

@ -8,8 +8,8 @@
</head> </head>
<body data-theme='dark'> <body data-theme='dark'>
<main> <main>
<div id="page_container" class="margin"> <div id="page_container">
<header id="page_header" class="flex"> <header id="page_header" class="flex margin">
<svg class="icon" onclick="render('homepage')" id="back_btn" viewBox="0 0 32.5 64"> <svg class="icon" onclick="render('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"/>
@ -71,7 +71,7 @@
</label> </label>
</header> </header>
<div id="main_search"> <div id="main_search">
<h1 class="montserrat">FLO SCOUT</h1> <h1>FLO SCOUT</h1>
<label class="input margin"> <label class="input margin">
<svg class="icon" viewBox="0 0 64 64"> <svg class="icon" viewBox="0 0 64 64">
@ -85,25 +85,25 @@
<div id="highlights"> <div id="highlights">
<div class="highlight-item"> <div class="highlight-item">
<h4 class="label">top token</h4> <h4 class="label">top token</h4>
<h1>${topToken}</h1> <h2 class="token">${topToken}</h2>
</div> </div>
<div class="highlight-item"> <div class="highlight-item">
<h4 class="label">total transactions</h4> <h4 class="label">total transactions</h4>
<h1>${totalTransactions}</h1> <h2>${totalTransactions}</h2>
</div> </div>
<div class="highlight-item"> <div class="highlight-item">
<h4 class="label">Wallet addresses</h4> <h4 class="label">Wallet addresses</h4>
<h1>${walletAddresses}</h1> <h2>${walletAddresses}</h2>
</div> </div>
<div class="highlight-item"> <div class="highlight-item">
<h4 class="label">top contract</h4> <h4 class="label">top contract</h4>
<h1>${topContract}</h1> <h2>${topContract}</h2>
</div> </div>
</div> </div>
</section> </section>
<section id="latest_transaction_section"> <section id="latest_transaction_section">
<header class="grid grid-2 header"> <header class="grid grid-2 header">
<h1 class="montserrat">Latest transactions</h1> <h3>Latest transactions</h3>
<button class="margin-left-auto">all</button> <button class="margin-left-auto">all</button>
</header> </header>
<div id="top_transaction_container"> <div id="top_transaction_container">
@ -227,7 +227,7 @@
page.classList.add('page') page.classList.add('page')
page.id = 'token_page' page.id = 'token_page'
page.innerHTML = ` page.innerHTML = `
<h2 class="capitalise">${token}</h2> <h2 class="uppercase">${token}</h2>
<div class="card"> <div class="card">
<h5 class="label">Supply</h5> <h5 class="label">Supply</h5>
<h4>${supply}</h4> <h4>${supply}</h4>
@ -335,6 +335,7 @@
pageContainer = document.getElementById('page_container'), pageContainer = document.getElementById('page_container'),
pageHeader = document.getElementById('page_header'); pageHeader = document.getElementById('page_header');
let currentPage = 'homepage' let currentPage = 'homepage'
function removePage(page){ function removePage(page){
document.getElementById(page).remove() document.getElementById(page).remove()
} }
@ -342,46 +343,62 @@
function render(pageId){ function render(pageId){
if(currentPage !== pageId) if(currentPage !== pageId)
removePage(currentPage) removePage(currentPage)
if(pageId === 'address_page'){ if(pageId === 'address_page'){
pageContainer.append(create.addressPage('0.0001', 'F91a5151a651d1adv56151avdadlkn')) pageContainer.append(create.addressPage('0.0001', 'F91a5151a651d1adv56151avdadlkn'))
pageTitle.textContent = 'Address' pageTitle.textContent = 'Address'
} }
if(pageId === 'transaction_page'){
let obj = {
type: 'Token Transfer',
name: 'RMT',
blockHeight: '4530254',
amount: '0.1FLO',
sender: 'F846EFefybwewe45avd5165adv16',
reciever: 'F846EFefybwewe45avd5165adv16',
floData: 'ansfer 100 rupee# to FJyz51JTnPuB3AMRjyYe3rbuLmnq4qErcc for FCuFeAa3Haqk9oKQWEKVSt4pwQQEooDAEm.',
hash: '1ab70a9de6a8deeb0ba8f6c4ca015d60659c90953a7c8a1f3215276fe57b1fb2',
confirmations: '22458'
}
pageContainer.append(create.transactionPage(obj))
pageTitle.textContent = 'Transaction'
}
if(pageId === 'token_page'){
pageContainer.append(create.tokenPage('rmt', '21,000,000', 'F6EMAHjivqrcrdAHNABq2R1FLNkx8xfEaT'))
pageTitle.textContent = 'Token'
}
if(pageId === 'homepage'){ if(pageId === 'homepage'){
pageHeader.classList.add('hide-completely') pageHeader.classList.add('hide-completely')
pageContainer.append(create.homepage({topToken: 'RMT', totalTransactions: '88', walletAddresses: '44', topContract: 'India Election 2019'})) pageContainer.append(create.homepage({topToken: 'RMT', totalTransactions: '88', walletAddresses: '44', topContract: 'India Election 2019'}))
let themeToggler = document.getElementById('theme_toggle'), let themeToggler = document.getElementById('theme_toggle'),
body = document.querySelector('body'); body = document.querySelector('body');
if(localStorage.theme === 'dark'){ if(localStorage.theme === 'dark'){
nightlight();
themeToggler.checked = true
}
else{
daylight()
themeToggler.checked = false
}
themeToggler.addEventListener('change', () => {
transition()
if(themeToggler.checked){
nightlight(); nightlight();
localStorage.setItem('theme', 'dark') themeToggler.checked = true
} }
else{ else{
daylight(); daylight()
localStorage.setItem('theme', 'light') themeToggler.checked = false
} }
}) function daylight(){
function daylight(){ body.setAttribute("data-theme", 'light');
body.setAttribute("data-theme", 'light'); }
} function nightlight(){
function nightlight(){ body.setAttribute('data-theme', 'dark');
body.setAttribute('data-theme', 'dark'); }
} themeToggler.addEventListener('change', () => {
function transition(){ if(themeToggler.checked){
body.classList.add('transition') nightlight();
setTimeout(() => { localStorage.setItem('theme', 'dark')
body.classList.remove('transition') }
}, 700) else{
} daylight();
localStorage.setItem('theme', 'light')
}
})
} }
else else
pageHeader.classList.remove('hide-completely') pageHeader.classList.remove('hide-completely')
@ -397,11 +414,9 @@
} }
if(e.target.closest('.token')){ if(e.target.closest('.token')){
render("token_page") render("token_page")
pageTitle.textContent = 'Token'
} }
if(e.target.closest('.hash')){ if(e.target.closest('.hash')){
render("transaction_page") render("transaction_page")
pageTitle.textContent = 'Transaction'
} }
if(e.target.closest('.block')){ if(e.target.closest('.block')){
render("block_page") render("block_page")