v1.0.3
This commit is contained in:
sairaj mote
parent
b27d27c65b
commit
d88557ca59
84
css/main.css
84
css/main.css
@ -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,
|
||||
::after {
|
||||
@ -21,6 +21,10 @@ body {
|
||||
background: rgba(var(--foreground), 1);
|
||||
}
|
||||
|
||||
body h5 {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
body[data-theme='dark'] {
|
||||
--text: 218, 218, 218;
|
||||
--text-light: 170, 170, 170;
|
||||
@ -29,13 +33,8 @@ body[data-theme='dark'] {
|
||||
--dark-shade: #1a1a1a;
|
||||
}
|
||||
|
||||
.transition {
|
||||
-webkit-transition: all 0.6s;
|
||||
transition: all 0.6s;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-weight: 500;
|
||||
body[data-theme='dark'] h5 {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
input[type=text]::-ms-clear {
|
||||
@ -75,7 +74,7 @@ button {
|
||||
border: none;
|
||||
border-radius: 0.4em;
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.06em;
|
||||
background: rgba(var(--text), 0.1);
|
||||
cursor: pointer;
|
||||
@ -86,6 +85,18 @@ button {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 4rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
@ -212,15 +223,11 @@ ul .balance:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.padding {
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
|
||||
.top-bottom-padding {
|
||||
padding: 1.5rem 0;
|
||||
}
|
||||
|
||||
.margin {
|
||||
.margin, .page {
|
||||
margin: 0 1.5rem;
|
||||
}
|
||||
|
||||
@ -231,7 +238,7 @@ ul .balance:last-of-type {
|
||||
.card {
|
||||
padding: 2rem 1.5rem;
|
||||
border-radius: 0.5rem;
|
||||
border: solid 1px rgba(var(--text), 0.16);
|
||||
background: rgba(var(--text), 0.06);
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
|
||||
@ -242,10 +249,9 @@ ul .balance:last-of-type {
|
||||
}
|
||||
|
||||
.label {
|
||||
font-family: 'Montserrat' ,sans-serif;
|
||||
text-transform: capitalize;
|
||||
font-size: 0.8rem;
|
||||
margin-bottom: 0.4rem;
|
||||
margin-bottom: 0.3rem;
|
||||
line-height: 1.4em;
|
||||
opacity: 0.7;
|
||||
margin-top: 1.5rem;
|
||||
@ -265,15 +271,6 @@ ul .balance:last-of-type {
|
||||
padding: 2em 0;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
font-size: 1.2rem;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.header .montserrat {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
#logo {
|
||||
display: -webkit-inline-box;
|
||||
display: -ms-inline-flexbox;
|
||||
@ -335,6 +332,7 @@ ul .balance:last-of-type {
|
||||
font-size: 4rem;
|
||||
text-align: left;
|
||||
margin-top: 2rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
#main_search .input {
|
||||
@ -404,8 +402,7 @@ ul .balance:last-of-type {
|
||||
flex-direction: column;
|
||||
padding: 1.5rem;
|
||||
border-radius: 0.5rem;
|
||||
background: rgba(var(--foreground), 1);
|
||||
border: 1px solid rgba(var(--text), 0.2);
|
||||
background: rgba(var(--text), 0.06);
|
||||
}
|
||||
|
||||
#highlights .highlight-item .label {
|
||||
@ -458,12 +455,6 @@ ul .balance:last-of-type {
|
||||
grid-area: contract;
|
||||
}
|
||||
|
||||
.montserrat {
|
||||
font-family: 'montserrat', sans-serif;
|
||||
font-weight: normal;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
|
||||
#top_transaction_container {
|
||||
display: -ms-grid;
|
||||
display: grid;
|
||||
@ -481,7 +472,7 @@ ul .balance:last-of-type {
|
||||
flex-direction: column;
|
||||
padding: 1.5rem;
|
||||
border-radius: 0.5rem;
|
||||
border: solid 1px rgba(var(--text), 0.1);
|
||||
background: rgba(var(--text), 0.06);
|
||||
}
|
||||
|
||||
.transaction .transaction-header {
|
||||
@ -561,7 +552,6 @@ ul .balance:last-of-type {
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
}
|
||||
|
||||
#page_header h3 {
|
||||
@ -574,7 +564,6 @@ ul .balance:last-of-type {
|
||||
|
||||
.page h3.heading {
|
||||
margin-top: 2rem;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
}
|
||||
|
||||
p {
|
||||
@ -671,7 +660,6 @@ p {
|
||||
|
||||
.tabs .tab {
|
||||
cursor: pointer;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
opacity: 0.6;
|
||||
padding-bottom: 0.5rem;
|
||||
margin-right: 1rem;
|
||||
@ -708,10 +696,7 @@ p {
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 640px) {
|
||||
.padding {
|
||||
padding: 0 6vw;
|
||||
}
|
||||
.margin {
|
||||
.margin, .page {
|
||||
margin: 0 6vw;
|
||||
}
|
||||
#homepage {
|
||||
@ -759,10 +744,7 @@ p {
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1280px) {
|
||||
.padding {
|
||||
padding: 0 8vw;
|
||||
}
|
||||
.margin {
|
||||
.margin, .page {
|
||||
margin: 0 16vw;
|
||||
}
|
||||
#homepage {
|
||||
@ -802,10 +784,7 @@ p {
|
||||
body {
|
||||
font-size: 24px;
|
||||
}
|
||||
.padding {
|
||||
padding: 0 12vw;
|
||||
}
|
||||
.margin {
|
||||
.margin, .page {
|
||||
margin: 0 26vw;
|
||||
}
|
||||
#homepage {
|
||||
@ -817,10 +796,7 @@ p {
|
||||
body {
|
||||
font-size: 24px;
|
||||
}
|
||||
.padding {
|
||||
padding: 0 24vw;
|
||||
}
|
||||
.margin {
|
||||
.margin, .page {
|
||||
margin: 0 32vw;
|
||||
}
|
||||
#homepage {
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -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,
|
||||
::after{
|
||||
@ -17,6 +17,9 @@ body{
|
||||
font-size: 16px;
|
||||
color: rgba(var(--text), 1);
|
||||
background: rgba(var(--foreground), 1);
|
||||
h5{
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
body[data-theme='dark']{
|
||||
--text: 218, 218, 218;
|
||||
@ -24,12 +27,9 @@ body[data-theme='dark']{
|
||||
--foreground: 20, 20, 20;
|
||||
--background: #111;
|
||||
--dark-shade: #1a1a1a;
|
||||
}
|
||||
.transition{
|
||||
transition: all 0.6s;
|
||||
}
|
||||
h5{
|
||||
font-weight: 500;
|
||||
h5{
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
input[type=text]::-ms-clear { 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-radius: 0.4em;
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.06em;
|
||||
background: rgba(var(--text), 0.1);
|
||||
cursor: pointer;
|
||||
@ -59,6 +59,15 @@ button{
|
||||
color: rgba(var(--text), 1);
|
||||
align-self: center;
|
||||
}
|
||||
h1{
|
||||
font-size: 4rem;
|
||||
}
|
||||
h2{
|
||||
font-size: 2rem;
|
||||
}
|
||||
h3{
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
.flex{
|
||||
display: flex;
|
||||
}
|
||||
@ -150,13 +159,10 @@ ul{
|
||||
}
|
||||
}
|
||||
}
|
||||
.padding{
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
.top-bottom-padding{
|
||||
padding: 1.5rem 0;
|
||||
}
|
||||
.margin{
|
||||
.margin, .page{
|
||||
margin: 0 1.5rem;
|
||||
}
|
||||
.margin-left-auto{
|
||||
@ -165,7 +171,8 @@ ul{
|
||||
.card{
|
||||
padding: 2rem 1.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;
|
||||
h4{
|
||||
margin-bottom: 0.4rem;
|
||||
@ -174,13 +181,13 @@ ul{
|
||||
}
|
||||
}
|
||||
.label{
|
||||
font-family: 'Montserrat' ,sans-serif;
|
||||
text-transform: capitalize;
|
||||
font-size: 0.8rem;
|
||||
margin-bottom: 0.4rem;
|
||||
margin-bottom: 0.3rem;
|
||||
line-height: 1.4em;
|
||||
opacity: 0.7;
|
||||
margin-top: 1.5rem;
|
||||
|
||||
&:first-of-type{
|
||||
margin-top: 0;
|
||||
}
|
||||
@ -189,13 +196,6 @@ ul{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 2em 0;
|
||||
h1{
|
||||
font-size: 1.2rem;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
.montserrat{
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
#logo{
|
||||
display: inline-flex;
|
||||
@ -235,6 +235,7 @@ ul{
|
||||
font-size: 4rem;
|
||||
text-align: left;
|
||||
margin-top: 2rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
.input{
|
||||
position: relative;
|
||||
@ -289,8 +290,8 @@ ul{
|
||||
flex-direction: column;
|
||||
padding: 1.5rem;
|
||||
border-radius: 0.5rem;
|
||||
background: rgba(var(--foreground), 1);
|
||||
border: 1px solid rgba(var(--text), 0.2);
|
||||
background: rgba(var(--text), 0.06);
|
||||
//border: 1px solid rgba(var(--text), 0.2);
|
||||
.label{
|
||||
margin-top: auto;
|
||||
}
|
||||
@ -324,11 +325,6 @@ ul{
|
||||
}
|
||||
}
|
||||
}
|
||||
.montserrat{
|
||||
font-family: 'montserrat', sans-serif;
|
||||
font-weight: normal;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
#top_transaction_container{
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
|
||||
@ -340,7 +336,8 @@ ul{
|
||||
flex-direction: column;
|
||||
padding: 1.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{
|
||||
margin-bottom: 2em;
|
||||
grid-template-columns: auto 1fr;
|
||||
@ -400,7 +397,6 @@ ul{
|
||||
#page_header{
|
||||
padding: 1.5rem 0;
|
||||
align-items: center;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
h3{
|
||||
font-weight: 500;
|
||||
}
|
||||
@ -409,7 +405,6 @@ ul{
|
||||
padding: 1.5rem 0;
|
||||
h3.heading{
|
||||
margin-top: 2rem;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
}
|
||||
}
|
||||
p{
|
||||
@ -484,7 +479,6 @@ p{
|
||||
overflow-x: auto;
|
||||
.tab{
|
||||
cursor: pointer;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
opacity: 0.6;
|
||||
padding-bottom: 0.5rem;
|
||||
margin-right: 1rem;
|
||||
@ -515,10 +509,7 @@ p{
|
||||
margin: 0 1.5rem;
|
||||
}
|
||||
@media only screen and (min-width: 640px){
|
||||
.padding{
|
||||
padding: 0 6vw;
|
||||
}
|
||||
.margin{
|
||||
.margin, .page{
|
||||
margin: 0 6vw;
|
||||
}
|
||||
#homepage{
|
||||
@ -564,10 +555,7 @@ p{
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 1280px){
|
||||
.padding{
|
||||
padding: 0 8vw;
|
||||
}
|
||||
.margin{
|
||||
.margin, .page{
|
||||
margin: 0 16vw;
|
||||
}
|
||||
#homepage{
|
||||
@ -599,10 +587,7 @@ p{
|
||||
body{
|
||||
font-size: 24px;
|
||||
}
|
||||
.padding{
|
||||
padding: 0 12vw;
|
||||
}
|
||||
.margin{
|
||||
.margin, .page{
|
||||
margin: 0 26vw;
|
||||
}
|
||||
#homepage{
|
||||
@ -613,10 +598,7 @@ p{
|
||||
body{
|
||||
font-size: 24px;
|
||||
}
|
||||
.padding{
|
||||
padding: 0 24vw;
|
||||
}
|
||||
.margin{
|
||||
.margin, .page{
|
||||
margin: 0 32vw;
|
||||
}
|
||||
#homepage{
|
||||
|
||||
93
index.html
93
index.html
@ -8,8 +8,8 @@
|
||||
</head>
|
||||
<body data-theme='dark'>
|
||||
<main>
|
||||
<div id="page_container" class="margin">
|
||||
<header id="page_header" class="flex">
|
||||
<div id="page_container">
|
||||
<header id="page_header" class="flex margin">
|
||||
<svg class="icon" onclick="render('homepage')" id="back_btn" viewBox="0 0 32.5 64">
|
||||
<title>Back Button</title>
|
||||
<polyline points="32.15 0.35 0.7 31.8 32.15 63.72"/>
|
||||
@ -71,7 +71,7 @@
|
||||
</label>
|
||||
</header>
|
||||
<div id="main_search">
|
||||
<h1 class="montserrat">FLO SCOUT</h1>
|
||||
<h1>FLO SCOUT</h1>
|
||||
|
||||
<label class="input margin">
|
||||
<svg class="icon" viewBox="0 0 64 64">
|
||||
@ -85,25 +85,25 @@
|
||||
<div id="highlights">
|
||||
<div class="highlight-item">
|
||||
<h4 class="label">top token</h4>
|
||||
<h1>${topToken}</h1>
|
||||
<h2 class="token">${topToken}</h2>
|
||||
</div>
|
||||
<div class="highlight-item">
|
||||
<h4 class="label">total transactions</h4>
|
||||
<h1>${totalTransactions}</h1>
|
||||
<h2>${totalTransactions}</h2>
|
||||
</div>
|
||||
<div class="highlight-item">
|
||||
<h4 class="label">Wallet addresses</h4>
|
||||
<h1>${walletAddresses}</h1>
|
||||
<h2>${walletAddresses}</h2>
|
||||
</div>
|
||||
<div class="highlight-item">
|
||||
<h4 class="label">top contract</h4>
|
||||
<h1>${topContract}</h1>
|
||||
<h2>${topContract}</h2>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section id="latest_transaction_section">
|
||||
<header class="grid grid-2 header">
|
||||
<h1 class="montserrat">Latest transactions</h1>
|
||||
<h3>Latest transactions</h3>
|
||||
<button class="margin-left-auto">all</button>
|
||||
</header>
|
||||
<div id="top_transaction_container">
|
||||
@ -227,7 +227,7 @@
|
||||
page.classList.add('page')
|
||||
page.id = 'token_page'
|
||||
page.innerHTML = `
|
||||
<h2 class="capitalise">${token}</h2>
|
||||
<h2 class="uppercase">${token}</h2>
|
||||
<div class="card">
|
||||
<h5 class="label">Supply</h5>
|
||||
<h4>${supply}</h4>
|
||||
@ -335,6 +335,7 @@
|
||||
pageContainer = document.getElementById('page_container'),
|
||||
pageHeader = document.getElementById('page_header');
|
||||
let currentPage = 'homepage'
|
||||
|
||||
function removePage(page){
|
||||
document.getElementById(page).remove()
|
||||
}
|
||||
@ -342,46 +343,62 @@
|
||||
function render(pageId){
|
||||
if(currentPage !== pageId)
|
||||
removePage(currentPage)
|
||||
|
||||
if(pageId === 'address_page'){
|
||||
pageContainer.append(create.addressPage('0.0001', 'F91a5151a651d1adv56151avdadlkn'))
|
||||
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'){
|
||||
pageHeader.classList.add('hide-completely')
|
||||
pageContainer.append(create.homepage({topToken: 'RMT', totalTransactions: '88', walletAddresses: '44', topContract: 'India Election 2019'}))
|
||||
let themeToggler = document.getElementById('theme_toggle'),
|
||||
body = document.querySelector('body');
|
||||
if(localStorage.theme === 'dark'){
|
||||
nightlight();
|
||||
themeToggler.checked = true
|
||||
}
|
||||
else{
|
||||
daylight()
|
||||
themeToggler.checked = false
|
||||
}
|
||||
themeToggler.addEventListener('change', () => {
|
||||
transition()
|
||||
if(themeToggler.checked){
|
||||
body = document.querySelector('body');
|
||||
if(localStorage.theme === 'dark'){
|
||||
nightlight();
|
||||
localStorage.setItem('theme', 'dark')
|
||||
themeToggler.checked = true
|
||||
}
|
||||
else{
|
||||
daylight();
|
||||
localStorage.setItem('theme', 'light')
|
||||
daylight()
|
||||
themeToggler.checked = false
|
||||
}
|
||||
})
|
||||
function daylight(){
|
||||
body.setAttribute("data-theme", 'light');
|
||||
}
|
||||
function nightlight(){
|
||||
body.setAttribute('data-theme', 'dark');
|
||||
}
|
||||
function transition(){
|
||||
body.classList.add('transition')
|
||||
setTimeout(() => {
|
||||
body.classList.remove('transition')
|
||||
}, 700)
|
||||
}
|
||||
function daylight(){
|
||||
body.setAttribute("data-theme", 'light');
|
||||
}
|
||||
function nightlight(){
|
||||
body.setAttribute('data-theme', 'dark');
|
||||
}
|
||||
themeToggler.addEventListener('change', () => {
|
||||
if(themeToggler.checked){
|
||||
nightlight();
|
||||
localStorage.setItem('theme', 'dark')
|
||||
}
|
||||
else{
|
||||
daylight();
|
||||
localStorage.setItem('theme', 'light')
|
||||
}
|
||||
})
|
||||
}
|
||||
else
|
||||
pageHeader.classList.remove('hide-completely')
|
||||
@ -397,11 +414,9 @@
|
||||
}
|
||||
if(e.target.closest('.token')){
|
||||
render("token_page")
|
||||
pageTitle.textContent = 'Token'
|
||||
}
|
||||
if(e.target.closest('.hash')){
|
||||
render("transaction_page")
|
||||
pageTitle.textContent = 'Transaction'
|
||||
}
|
||||
if(e.target.closest('.block')){
|
||||
render("block_page")
|
||||
|
||||
Loading…
Reference in New Issue
Block a user