v1.0.2
Replacing static HTML redering with dynamic JS rendering for better performance
This commit is contained in:
sairaj mote
parent
09a3c0d3bf
commit
b27d27c65b
316
index.html
316
index.html
@ -8,8 +8,38 @@
|
||||
</head>
|
||||
<body data-theme='dark'>
|
||||
<main>
|
||||
<div id="homepage" class="page hide-completely">
|
||||
<section id="first_section">
|
||||
<div id="page_container" class="margin">
|
||||
<header id="page_header" class="flex">
|
||||
<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"/>
|
||||
</svg>
|
||||
<h3 id="page_title">Block</h3>
|
||||
<svg class="icon search margin-left-auto" viewBox="0 0 64 64">
|
||||
<title>search icon</title>
|
||||
<circle cx="25.34" cy="25.34" r="24.84"/>
|
||||
<line x1="63.65" y1="63.65" x2="42.91" y2="42.91"/>
|
||||
</svg>
|
||||
</header>
|
||||
<div id="all_transations" class="">
|
||||
|
||||
</div>
|
||||
<div id="all_blocks" class="">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
|
||||
let frag = document.createDocumentFragment();
|
||||
const create = {
|
||||
homepage: function(obj){
|
||||
let {topToken, totalTransactions, walletAddresses, topContract} = obj,
|
||||
page = document.createElement('div');
|
||||
page.classList.add('page')
|
||||
page.id = 'homepage'
|
||||
page.innerHTML = `
|
||||
<section id="first_section">
|
||||
<header class="header">
|
||||
<div id="logo">
|
||||
<svg id="main_logo" viewBox="0 0 27.25 32">
|
||||
@ -55,19 +85,19 @@
|
||||
<div id="highlights">
|
||||
<div class="highlight-item">
|
||||
<h4 class="label">top token</h4>
|
||||
<h1>RMT</h1>
|
||||
<h1>${topToken}</h1>
|
||||
</div>
|
||||
<div class="highlight-item">
|
||||
<h4 class="label">total transactions</h4>
|
||||
<h1>88</h1>
|
||||
<h1>${totalTransactions}</h1>
|
||||
</div>
|
||||
<div class="highlight-item">
|
||||
<h4 class="label">Wallet addresses</h4>
|
||||
<h1>48</h1>
|
||||
<h1>${walletAddresses}</h1>
|
||||
</div>
|
||||
<div class="highlight-item">
|
||||
<h4 class="label">top contract</h4>
|
||||
<h1>India elections 2019</h1>
|
||||
<h1>${topContract}</h1>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@ -95,62 +125,39 @@
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div id="page_container" class="margin">
|
||||
<header id="page_header" class="flex">
|
||||
<svg class="icon" onclick="showPage('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"/>
|
||||
</svg>
|
||||
<h3 id="page_title">Block</h3>
|
||||
<svg class="icon search margin-left-auto" viewBox="0 0 64 64">
|
||||
<title>search icon</title>
|
||||
<circle cx="25.34" cy="25.34" r="24.84"/>
|
||||
<line x1="63.65" y1="63.65" x2="42.91" y2="42.91"/>
|
||||
</svg>
|
||||
</header>
|
||||
<div id="all_transations" class="">
|
||||
|
||||
</div>
|
||||
<div id="all_blocks" class="">
|
||||
|
||||
</div>
|
||||
<div id="block_page" class="page hide-completely">
|
||||
`
|
||||
return page;
|
||||
},
|
||||
blockPage: function(obj){
|
||||
let {blockHeight, size, transactions, reward, hash, difficulty, nonce} = obj,
|
||||
page = document.createElement('div');
|
||||
page.classList.add('page')
|
||||
page.id = 'block_page'
|
||||
page.innerHTML = `
|
||||
<h5 class="label">Block Height</h5>
|
||||
<h2 class="block">4008986</h2>
|
||||
<h2 class="block">${blockHeight}</h2>
|
||||
<div class="card">
|
||||
<h4>1 Transction</h4>
|
||||
<h5 class="label">57465724.625 bytes</h5>
|
||||
<h4>1 Transaction</h4>
|
||||
<h5 class="label">${size}</h5>
|
||||
<h5 class="label">Reward</h5>
|
||||
<h4>3.1253FLO</h4>
|
||||
<h4>${reward}</h4>
|
||||
<h5 class="label">Hash</h5>
|
||||
<h4 class="breakable hash">17779bedfe0c174eea678318adf30ff33f74c575ce7238efe339927832632fe1</h4>
|
||||
<h4 class="breakable hash">${hash}</h4>
|
||||
<h5 class="label">Difficulty</h5>
|
||||
<h4>681</h4>
|
||||
<h4>${difficulty}</h4>
|
||||
<h5 class="label">Nonce</h5>
|
||||
<h4>29294481394</h4>
|
||||
<h4>${nonce}</h4>
|
||||
</div>
|
||||
<h3 class="heading">Transactions</h3>
|
||||
<div id="block_transaction_container" class="top-bottom-padding">
|
||||
<div class="transaction">
|
||||
<div class="transaction-header grid grid-2">
|
||||
<div>
|
||||
<h5>Token transfer</h5>
|
||||
<h2>Rupee</h2>
|
||||
</div>
|
||||
<svg class="icon margin-left-auto" 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>
|
||||
<h4 class="breakable address">FDhQizsksSHs4dyJBeLqGcbyuEg163jhXi</h4>
|
||||
<h5>to</h5>
|
||||
<h4 class="breakable address">FDhQizsksSHs4dyJBeLqGcbyuEg163jhXi</h4>
|
||||
<h3>₹0.000000007</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="address_page" class="page hide-completely">
|
||||
</div>`
|
||||
return page;
|
||||
},
|
||||
addressPage: function(balance, address){
|
||||
let page = document.createElement('div')
|
||||
page.classList.add('page')
|
||||
page.id = 'address_page'
|
||||
page.innerHTML = `
|
||||
<div class="balance-card">
|
||||
<svg class="flo-logo" viewBox="0 0 48 48">
|
||||
<path d="M34.2,32.4c0,0,3.75-0.18,7.41-3.86c2.96-2.98,3.65-6.66,3.99-8.52c-11.04-0.63-12.36,0.99-13.71,1.68
|
||||
@ -167,19 +174,24 @@
|
||||
c-0.95-1.37-1.47-2.13-1.47-4.26c0-2.4,1.12-4.61,1.47-5.14c0.35,0.52,1.47,2.74,1.47,5.14C24.27,40.92,23.75,41.69,22.8,43.06z"/>
|
||||
</svg>
|
||||
<h5 class="label">Balance</h5>
|
||||
<h2>1.0006</h2><h4>FLO</h4>
|
||||
<p class="breakable">FDhQizsksSHs4dyJBeLqGcbyuEg163jhXi</p>
|
||||
<h2>${balance}</h2><h4>FLO</h4>
|
||||
<p class="breakable">${address}</p>
|
||||
</div>
|
||||
<h3 class="heading">Transactions</h3>
|
||||
<div id="address_transaction_container" class="top-bottom-padding">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div id="transaction_page" class="page hide-completely">
|
||||
</div>`;
|
||||
return page;
|
||||
},
|
||||
transactionPage: function(obj){
|
||||
let {type, name, blockHeight, amount, sender, reciever, floData, hash, confirmations} = obj,
|
||||
page = document.createElement('div')
|
||||
page.classList.add('page')
|
||||
page.id = 'transaction_page'
|
||||
page.innerHTML = `
|
||||
<div class="grid grid-2">
|
||||
<div>
|
||||
<h5 class="label">Token Transfer</h5>
|
||||
<h2 class="token">RUPEE </h2>
|
||||
<h5 class="label">${type}</h5>
|
||||
<h2 class="token">${name}</h2>
|
||||
</div>
|
||||
<div class="status done">
|
||||
<svg class="icon" viewBox="0 0 64 42">
|
||||
@ -191,30 +203,36 @@
|
||||
</div>
|
||||
<div class="card">
|
||||
<h4>Block</h4>
|
||||
<h5 class="label block">#40008986</h5>
|
||||
<h5 class="label block">${blockHeight}}</h5>
|
||||
<h5 class="label">Amount</h5>
|
||||
<h4>3.1253FLO</h4>
|
||||
<h4>${amount}</h4>
|
||||
<h5 class="label">Sender</h5>
|
||||
<h4 class="breakable address">F7HEAV9226tqXtRk34XrA9nZCb8ZcbVJt1</h4>
|
||||
<h4 class="breakable address">${sender}</h4>
|
||||
<h5 class="label">Reciever</h5>
|
||||
<h4 class="breakable address">F7HEAV9226tqXtRk34XrA9nZCb8ZcbVJt1</h4>
|
||||
<h4 class="breakable address">${reciever}</h4>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h5 class="label">FLO Data</h5>
|
||||
<p>transfer 40000 rupee# to FJyz51JTnPuB3AMRjyYe3rbuLmnq4qErcc</p>
|
||||
<p>${floData}</p>
|
||||
<h5 class="label">Hash</h5>
|
||||
<h4 class="breakable hash">17779bedfe0c174eea678318adf30ff33f74c575ce7238efe339927832632fe1</h4>
|
||||
<h4 class="breakable hash">${hash}</h4>
|
||||
<h5 class="label">Block Confirmations</h5>
|
||||
<h4>2527</h4>
|
||||
<h4>${confirmations}</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div id="token_page" class="page hide-completely">
|
||||
<h2>RMT</h2>
|
||||
`;
|
||||
return page;
|
||||
},
|
||||
tokenPage: function(token, supply, incAddress){
|
||||
let page = document.createElement('div')
|
||||
page.classList.add('page')
|
||||
page.id = 'token_page'
|
||||
page.innerHTML = `
|
||||
<h2 class="capitalise">${token}</h2>
|
||||
<div class="card">
|
||||
<h5 class="label">Supply</h5>
|
||||
<h4>21,000,000</h4>
|
||||
<h4>${supply}</h4>
|
||||
<h5 class="label">Incorporation Address</h5>
|
||||
<h4 class="breakable">F6EMAHjivqrcrdAHNABq2R1FLNkx8xfEaT</h4>
|
||||
<h4 class="breakable">${incAddress}</h4>
|
||||
</div>
|
||||
<div class="tabs">
|
||||
<h4 class="tab active" data-target="token_balance_container">Top Balances</h4>
|
||||
@ -237,19 +255,28 @@
|
||||
<h4>0.0000023333 RMT</h4>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="contract_page" class="page">
|
||||
`
|
||||
return page;
|
||||
},
|
||||
contractPage: function(obj){
|
||||
let {contract, contractType, incAddress, expiration,token, participationFees} = obj,
|
||||
page = document.createElement('div')
|
||||
page.classList.add('page')
|
||||
page.id = 'contract_page'
|
||||
page.innerHTML = `
|
||||
<div class="status closed">Closed</div>
|
||||
<h2 class="uppercase">India ELections 2019</h2>
|
||||
<h2 class="uppercase">${contract}</h2>
|
||||
<div class="card">
|
||||
<h5 class="label">Contract Type</h5>
|
||||
<h4 class="breakable address">F6EMAHjivqrcrdAHNABq2R1FLNkx8xfEaT</h4>
|
||||
<h4>${contractType}</h4>
|
||||
<h5 class="label">Incorporation Address</h5>
|
||||
<h4 class="breakable address">${incAddress}</h4>
|
||||
<h5 class="label">Expiration</h5>
|
||||
<h4>wed may 22 2019 21:00:00 gmt+05:30</h4>
|
||||
<h4>${expiration}</h4>
|
||||
<h5 class="label">Token Used</h5>
|
||||
<h4>RMT</h4>
|
||||
<h4>${token}</h4>
|
||||
<h5 class="label">Participation Amount</h5>
|
||||
<h4>0.001 RMT</h4>
|
||||
<h4>${participationFees}</h4>
|
||||
</div>
|
||||
<h3 class="heading">User Choices</h3>
|
||||
<ul class="card" type='circle'>
|
||||
@ -279,61 +306,10 @@
|
||||
<h4>0.0000023333 RMT</h4>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
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){
|
||||
nightlight();
|
||||
localStorage.setItem('theme', 'dark')
|
||||
}
|
||||
else{
|
||||
daylight();
|
||||
localStorage.setItem('theme', 'light')
|
||||
}
|
||||
})
|
||||
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)
|
||||
}
|
||||
|
||||
const allPages = document.querySelectorAll('.page'),
|
||||
pageTitle = document.getElementById('page_title'),
|
||||
pageContainer = document.getElementById('page_container');
|
||||
function showPage(pageId){
|
||||
let thisPage = document.getElementById(pageId);
|
||||
allPages.forEach(page => {
|
||||
page.classList.add('hide-completely')
|
||||
})
|
||||
thisPage.classList.remove('hide-completely')
|
||||
if(pageId === 'homepage')
|
||||
pageContainer.classList.add('hide-completely')
|
||||
else
|
||||
pageContainer.classList.remove('hide-completely')
|
||||
}
|
||||
|
||||
const create = {
|
||||
transaction: function(block, type, name, sender, reciever, amount){
|
||||
`
|
||||
return page;
|
||||
},
|
||||
transactionCard: function(block, type, name, sender, reciever, amount){
|
||||
let card = document.createElement('div');
|
||||
card.classList.add('transaction')
|
||||
card.id = block;
|
||||
@ -354,27 +330,85 @@
|
||||
return card;
|
||||
}
|
||||
}
|
||||
|
||||
const pageTitle = document.getElementById('page_title'),
|
||||
pageContainer = document.getElementById('page_container'),
|
||||
pageHeader = document.getElementById('page_header');
|
||||
let currentPage = 'homepage'
|
||||
function removePage(page){
|
||||
document.getElementById(page).remove()
|
||||
}
|
||||
|
||||
function render(pageId){
|
||||
if(currentPage !== pageId)
|
||||
removePage(currentPage)
|
||||
if(pageId === 'address_page'){
|
||||
pageContainer.append(create.addressPage('0.0001', 'F91a5151a651d1adv56151avdadlkn'))
|
||||
pageTitle.textContent = 'Address'
|
||||
}
|
||||
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){
|
||||
nightlight();
|
||||
localStorage.setItem('theme', 'dark')
|
||||
}
|
||||
else{
|
||||
daylight();
|
||||
localStorage.setItem('theme', 'light')
|
||||
}
|
||||
})
|
||||
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)
|
||||
}
|
||||
}
|
||||
else
|
||||
pageHeader.classList.remove('hide-completely')
|
||||
currentPage = pageId;
|
||||
}
|
||||
|
||||
window.addEventListener('load', () => {
|
||||
render('homepage')
|
||||
|
||||
document.querySelector('main').addEventListener('click', e => {
|
||||
if(e.target.closest('.address')){
|
||||
showPage("address_page")
|
||||
pageTitle.textContent = 'Address'
|
||||
render("address_page")
|
||||
}
|
||||
if(e.target.closest('.token')){
|
||||
showPage("token_page")
|
||||
render("token_page")
|
||||
pageTitle.textContent = 'Token'
|
||||
}
|
||||
if(e.target.closest('.hash')){
|
||||
showPage("transaction_page")
|
||||
render("transaction_page")
|
||||
pageTitle.textContent = 'Transaction'
|
||||
}
|
||||
if(e.target.closest('.block')){
|
||||
showPage("block_page")
|
||||
render("block_page")
|
||||
pageTitle.textContent = 'Block'
|
||||
}
|
||||
if(e.target.closest('.block')){
|
||||
showPage("contract_page")
|
||||
render("contract_page")
|
||||
pageTitle.textContent = 'Contract '
|
||||
}
|
||||
if(e.target.closest('.tab')){
|
||||
|
||||
Loading…
Reference in New Issue
Block a user