This commit is contained in:
sairaj mote 2020-05-13 20:51:29 +05:30
parent f269bc1092
commit ba2f79ade5
4 changed files with 177 additions and 10 deletions

View File

@ -204,6 +204,7 @@ section .dark-background {
.card h4 {
margin-bottom: 0.5rem;
font-weight: 400;
}
.label {
@ -434,7 +435,7 @@ section .dark-background {
-ms-flex-direction: column;
flex-direction: column;
padding: 1.5rem;
border-radius: 0.3em;
border-radius: 1rem;
border: solid 1px rgba(var(--text), 0.1);
}
@ -522,6 +523,76 @@ section .dark-background {
padding: 1.5rem 0;
}
.page h2.heading {
margin-top: 2rem;
font-family: 'Montserrat', sans-serif;
}
p {
overflow-wrap: break-word;
line-height: 1.6em;
text-transform: capitalize;
}
.balance-card {
background: linear-gradient(135deg, #5E35B1 60%, #7E57C2 10%, #311B92);
color: white;
border-radius: 1rem;
-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;
}
.balance-card .flo-logo {
fill: white;
height: 1.5rem;
width: 1.5rem;
opacity: 0.8;
margin-bottom: 1rem;
}
.balance-card h2, .balance-card h4 {
display: inline-block;
width: auto;
}
.balance-card h4 {
margin-left: 0.5rem;
font-weight: 400;
}
.balance-card p {
margin-top: 1.5rem;
opacity: 0.8;
letter-spacing: 0.1em;
}
.status {
padding: 0.5rem;
border-radius: 1rem;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.status.done {
background: #00C853;
}
.status.done svg {
margin-right: 0.5rem;
height: 1em;
width: 1em;
}
.status.closed {
background: rgba(var(--foreground), 1);
border: solid 1px rgba(var(--text), 0.1);
}
@media only screen and (min-width: 640px) {
.padding {
padding: 0 6vw;

File diff suppressed because one or more lines are too long

View File

@ -143,6 +143,7 @@ section{
margin: 1.5rem 0;
h4{
margin-bottom: 0.5rem;
font-weight: 400;
}
}
.label{
@ -306,7 +307,7 @@ section{
.transaction{
flex-direction: column;
padding: 1.5rem;
border-radius: 0.3em;
border-radius: 1rem;
border: solid 1px rgba(var(--text), 0.1);
.transaction-header{
margin-bottom: 2em;
@ -371,6 +372,60 @@ section{
}
.page{
padding: 1.5rem 0;
h2.heading{
margin-top: 2rem;
font-family: 'Montserrat', sans-serif;
}
}
p{
overflow-wrap: break-word;
line-height: 1.6em;
text-transform: capitalize;
}
.balance-card{
background: linear-gradient(135deg, #5E35B1 60%,#7E57C2 10%,#311B92);
color: white;
border-radius: 1rem;
box-shadow: 0 0.5rem 1rem rgba($color: #5E35B1, $alpha: 0.4);
padding: 2rem 1.5rem;
.flo-logo{
fill: white;
height: 1.5rem;
width: 1.5rem;
opacity: 0.8;
margin-bottom: 1rem;
}
h2,h4{
display: inline-block;
width: auto;
}
h4{
margin-left: 0.5rem;
font-weight: 400;
}
p{
margin-top: 1.5rem;
opacity: 0.8;
letter-spacing: 0.1em;
}
}
.status{
padding: 0.5rem;
border-radius: 1rem;
display: inline-flex;
align-items: center;
&.done{
background: #00C853;
svg{
margin-right: 0.5rem;
height: 1em;
width: 1em;
}
}
&.closed{
background: rgba(var(--foreground), 1);
border: solid 1px rgba(var(--text), 0.1);
}
}
@media only screen and (min-width: 640px){
.padding{

View File

@ -6,7 +6,7 @@
<title>FLO Scout</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body data-theme='dark'>
<body data-theme=''>
<main>
<div class="page hide-completely">
<section id="first_section">
@ -104,7 +104,7 @@
<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>
<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)"/>
@ -117,7 +117,7 @@
<div id="all_blocks" class="">
</div>
<div id="block_page" class="page">
<div id="block_page" class="page hide-completely">
<h5 class="label">Block Height</h5>
<h2>4008986</h2>
<div class="card">
@ -132,7 +132,7 @@
<h5 class="label">Nonce</h5>
<h4>29294481394</h4>
</div>
<h2>Transactions</h2>
<h2 class="heading">Transactions</h2>
<div id="block_transaction_container" class="top-bottom-padding">
<div class="transaction">
<div class="transaction-header grid grid-2">
@ -152,13 +152,54 @@
</div>
</div>
</div>
<div id="address_page">
<div id="address_page" class="page hide-completely">
<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
c-1.19,0.61-5.33,4.55-5.33,4.55s3.06-3.13,3.2-9.94c0.09-4.54-1.02-7.39-2.72-10.64C25.29,2.33,22.79,0,22.79,0l0.01,4.97
c0,0,4.35,2.84,4.35,11.84c0,6.52-4.35,11.02-4.35,11.02s-4.35-4.5-4.35-11.02c0-9.01,4.35-11.84,4.35-11.84L22.79,0
c0,0-2.48,2.33-4.23,5.67c-1.7,3.25-2.81,6.1-2.72,10.64c0.13,6.81,3.2,9.94,3.2,9.94s-4.14-3.95-5.33-4.55
c-1.35-0.69-2.67-2.31-13.71-1.68c0.34,1.86,1.03,5.54,3.99,8.52c3.66,3.68,7.41,3.86,7.41,3.86s-5.05-2.03-7.15-9.45
c0,0,5.76-0.7,9.63,1.87c2.52,1.67,4.86,4.26,6.79,6.01c0,0-2.58-0.04-6.81,1.88c-2.54,1.15-3.92,2.84-4.44,4.38
c-0.36,1.06-0.2,2.27-0.2,2.27s3.31,0.31,5.94,0c1.99-0.23,3.42-2.16,3.42-2.16s-2,0.78-3.95,0.78c-2.06,0-2.67-0.66-2.67-0.66
c0.98-3.64,8.68-5.19,8.68-5.19s-1.34,2.6-1.42,6.5c-0.1,4.79,3.57,8.52,3.57,8.45c0,0.07,3.67-3.66,3.57-8.45
c-0.08-3.9-1.42-6.5-1.42-6.5s7.71,1.55,8.68,5.19c0,0-0.61,0.66-2.67,0.66c-1.95,0-3.95-0.78-3.95-0.78s1.43,1.93,3.42,2.16
c2.63,0.31,5.94,0,5.94,0s0.16-1.21-0.2-2.27c-0.52-1.54-1.9-3.23-4.44-4.38c-4.23-1.92-6.81-1.88-6.81-1.88
c1.93-1.76,4.27-4.34,6.79-6.01c3.87-2.57,9.63-1.87,9.63-1.87C39.26,30.38,34.2,32.4,34.2,32.4z M22.8,43.06
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>
</div>
<h2 class="heading">Transactions</h2>
<div id="address_transaction_container" class="top-bottom-padding">
</div>
</div>
<div id="transaction_page">
<h5 class="label">Token Transfer</h5>
<h2>RUPEE </h2>
<div class="card">
<h4>Block</h4>
<h5 class="label">#40008986</h5>
<h5 class="label">Amount</h5>
<h4>3.1253FLO</h4>
<h5 class="label">Sender</h5>
<h4 class="breakable">F7HEAV9226tqXtRk34XrA9nZCb8ZcbVJt1</h4>
<h5 class="label">Reciever</h5>
<h4 class="breakable">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>
<h5 class="label">Block Confirmations</h5>
<h4>2527</h4>
</div>
</div>
</div>
</div>
</main>
<script>
let themeToggler = document.getElementById('theme_toggle'),