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

101
index.html
View File

@ -6,11 +6,11 @@
<title>FLO Scout</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body data-theme=''>
<body data-theme='dark'>
<main>
<div class="page hide-completely">
<div id="homepage" class="page hide-completely margin">
<section id="first_section">
<header class="margin header">
<header class="header">
<div id="logo">
<svg id="main_logo" viewBox="0 0 27.25 32">
<title>RanchiMall</title>
@ -52,7 +52,7 @@
<input type="search" placeholder="Search">
</label>
</div>
<div id="highlights" class="margin">
<div id="highlights">
<div class="highlight-item">
<h4 class="label">top token</h4>
<h1>RMT</h1>
@ -72,27 +72,25 @@
</div>
</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>
<button class="margin-left-auto">all</button>
</header>
<div id="top_transaction_container" class="padding">
<div id="top_transaction_container">
<div class="transaction">
<div class="transaction-header grid grid-2">
<div>
<h5>Token transfer</h5>
<h2>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>
<h2 class="token">Rupee</h2>
</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>
<h4 class="breakable">FDhQizsksSHs4dyJBeLqGcbyuEg163jhXi</h4>
<h4 class="breakable address">FDhQizsksSHs4dyJBeLqGcbyuEg163jhXi</h4>
<h5>to</h5>
<h4 class="breakable">FDhQizsksSHs4dyJBeLqGcbyuEg163jhXi</h4>
<h4 class="breakable address">FDhQizsksSHs4dyJBeLqGcbyuEg163jhXi</h4>
<h3>₹0.000000007</h3>
</div>
</div>
@ -100,15 +98,15 @@
</div>
<div id="page_container" class="margin">
<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>
<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>
<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)"/>
<line x1="63.35" y1="63.35" x2="39.86" y2="39.86"/>
<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="">
@ -119,14 +117,14 @@
</div>
<div id="block_page" class="page hide-completely">
<h5 class="label">Block Height</h5>
<h2>4008986</h2>
<h2 class="block">4008986</h2>
<div class="card">
<h4>1 Transction</h4>
<h5 class="label">57465724.625 bytes</h5>
<h5 class="label">Reward</h5>
<h4>3.1253FLO</h4>
<h5 class="label">Hash</h5>
<h4 class="breakable">17779bedfe0c174eea678318adf30ff33f74c575ce7238efe339927832632fe1</h4>
<h4 class="breakable hash">17779bedfe0c174eea678318adf30ff33f74c575ce7238efe339927832632fe1</h4>
<h5 class="label">Difficulty</h5>
<h4>681</h4>
<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"/>
</svg>
</div>
<h4 class="breakable">FDhQizsksSHs4dyJBeLqGcbyuEg163jhXi</h4>
<h4 class="breakable address">FDhQizsksSHs4dyJBeLqGcbyuEg163jhXi</h4>
<h5>to</h5>
<h4 class="breakable">FDhQizsksSHs4dyJBeLqGcbyuEg163jhXi</h4>
<h4 class="breakable address">FDhQizsksSHs4dyJBeLqGcbyuEg163jhXi</h4>
<h3>₹0.000000007</h3>
</div>
</div>
@ -177,24 +175,35 @@
</div>
</div>
<div id="transaction_page">
<h5 class="label">Token Transfer</h5>
<h2>RUPEE </h2>
<div id="transaction_page" class="page">
<div class="grid grid-2">
<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">
<h4>Block</h4>
<h5 class="label">#40008986</h5>
<h5 class="label block">#40008986</h5>
<h5 class="label">Amount</h5>
<h4>3.1253FLO</h4>
<h5 class="label">Sender</h5>
<h4 class="breakable">F7HEAV9226tqXtRk34XrA9nZCb8ZcbVJt1</h4>
<h4 class="breakable address">F7HEAV9226tqXtRk34XrA9nZCb8ZcbVJt1</h4>
<h5 class="label">Reciever</h5>
<h4 class="breakable">F7HEAV9226tqXtRk34XrA9nZCb8ZcbVJt1</h4>
<h4 class="breakable address">F7HEAV9226tqXtRk34XrA9nZCb8ZcbVJt1</h4>
</div>
<div class="card">
<h5 class="label">FLO Data</h5>
<p>transfer 40000 rupee# to FJyz51JTnPuB3AMRjyYe3rbuLmnq4qErcc</p>
<h5 class="label">Hash</h5>
<h4 class="breakable">17779bedfe0c174eea678318adf30ff33f74c575ce7238efe339927832632fe1</h4>
<h4 class="breakable hash">17779bedfe0c174eea678318adf30ff33f74c575ce7238efe339927832632fe1</h4>
<h5 class="label">Block Confirmations</h5>
<h4>2527</h4>
</div>
@ -237,13 +246,18 @@
}
const allPages = document.querySelectorAll('.page'),
pageTitle = document.getElementById('page_title');
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 = {
@ -254,20 +268,41 @@
card.innerHTML = `<div class="transaction-header grid grid-2">
<div>
<h5>${type}</h5>
<h2>${name}</h2>
<h2 class="token">${name}</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">${sender}</h4>
<h4 class="breakable address">${sender}</h4>
<h5>to</h5>
<h4 class="breakable">${reciever}</h4>
<h4 class="breakable address">${reciever}</h4>
<h3>₹${amount}</h3>`;
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>
</body>
</html>