v1.0.1
This commit is contained in:
sairaj mote
parent
07e146a0f5
commit
09a3c0d3bf
67
css/main.css
67
css/main.css
@ -117,6 +117,10 @@ button {
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
|
||||
.uppercase {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.toggle {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
@ -183,6 +187,19 @@ section .dark-background {
|
||||
grid-template-rows: auto 1fr;
|
||||
}
|
||||
|
||||
ul[type='circle'] {
|
||||
padding: 1.5rem 2.5rem;
|
||||
list-style: circle;
|
||||
}
|
||||
|
||||
ul[type='circle'] li {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
ul[type='circle'] li:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
@ -221,6 +238,7 @@ ul .balance:last-of-type {
|
||||
.card h4 {
|
||||
margin-bottom: 0.4rem;
|
||||
font-weight: 400;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.label {
|
||||
@ -546,6 +564,10 @@ ul .balance:last-of-type {
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
}
|
||||
|
||||
#page_header h3 {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.page {
|
||||
padding: 1.5rem 0;
|
||||
}
|
||||
@ -604,6 +626,7 @@ p {
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
font-size: 0.8rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.status.done {
|
||||
@ -643,15 +666,7 @@ p {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.tabs .line {
|
||||
position: absolute;
|
||||
height: 0.1rem;
|
||||
background: rgba(var(--text), 0.8);
|
||||
bottom: 0;
|
||||
-webkit-transition: left 0.3s, width 0.3s;
|
||||
transition: left 0.3s, width 0.3s;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.tabs .tab {
|
||||
@ -660,6 +675,9 @@ p {
|
||||
opacity: 0.6;
|
||||
padding-bottom: 0.5rem;
|
||||
margin-right: 1rem;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
white-space: nowrap;
|
||||
border-bottom: transparent;
|
||||
}
|
||||
|
||||
.tabs .tab:last-of-type {
|
||||
@ -668,6 +686,25 @@ p {
|
||||
|
||||
.tabs .tab.active {
|
||||
opacity: 1;
|
||||
border-bottom: 0.1em solid rgba(var(--text), 0.8);
|
||||
}
|
||||
|
||||
.contract-choice {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.contract-choice:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.contract-choice h3 {
|
||||
text-transform: capitalize;
|
||||
font-weight: 400;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
#homepage {
|
||||
margin: 0 1.5rem;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 640px) {
|
||||
@ -677,6 +714,9 @@ p {
|
||||
.margin {
|
||||
margin: 0 6vw;
|
||||
}
|
||||
#homepage {
|
||||
margin: 0 4vw;
|
||||
}
|
||||
.input {
|
||||
width: 80vw !important;
|
||||
}
|
||||
@ -725,6 +765,9 @@ p {
|
||||
.margin {
|
||||
margin: 0 16vw;
|
||||
}
|
||||
#homepage {
|
||||
margin: 0 8vw;
|
||||
}
|
||||
.input {
|
||||
width: 50vw !important;
|
||||
}
|
||||
@ -765,6 +808,9 @@ p {
|
||||
.margin {
|
||||
margin: 0 26vw;
|
||||
}
|
||||
#homepage {
|
||||
margin: 0 12vw;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 2048px) {
|
||||
@ -777,6 +823,9 @@ p {
|
||||
.margin {
|
||||
margin: 0 32vw;
|
||||
}
|
||||
#homepage {
|
||||
margin: 0 24vw;
|
||||
}
|
||||
#first_section {
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -80,6 +80,9 @@ button{
|
||||
overflow-wrap: break-word;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
.uppercase{
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.toggle{
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
@ -127,11 +130,23 @@ section{
|
||||
}
|
||||
}
|
||||
ul{
|
||||
list-style: none;
|
||||
.balance{
|
||||
margin-bottom: 2rem;
|
||||
&:last-of-type{
|
||||
margin-bottom: 0;
|
||||
&[type='circle']{
|
||||
padding: 1.5rem 2.5rem;
|
||||
list-style: circle;
|
||||
li{
|
||||
margin-bottom: 1rem;
|
||||
&:last-of-type{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
&{
|
||||
list-style: none;
|
||||
.balance{
|
||||
margin-bottom: 2rem;
|
||||
&:last-of-type{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -155,6 +170,7 @@ ul{
|
||||
h4{
|
||||
margin-bottom: 0.4rem;
|
||||
font-weight: 400;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
}
|
||||
.label{
|
||||
@ -385,6 +401,9 @@ ul{
|
||||
padding: 1.5rem 0;
|
||||
align-items: center;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
h3{
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
.page{
|
||||
padding: 1.5rem 0;
|
||||
@ -431,6 +450,7 @@ p{
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
font-size: 0.8rem;
|
||||
margin-bottom: 0.5rem;
|
||||
&.done{
|
||||
background: #00C853;
|
||||
align-self: center;
|
||||
@ -461,27 +481,39 @@ p{
|
||||
position: relative;
|
||||
margin-top: 2rem;
|
||||
display: flex;
|
||||
.line{
|
||||
position: absolute;
|
||||
height: 0.1rem;
|
||||
background: rgba(var(--text), 0.8);
|
||||
bottom: 0;
|
||||
transition: left 0.3s, width 0.3s;
|
||||
}
|
||||
overflow-x: auto;
|
||||
.tab{
|
||||
cursor: pointer;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
opacity: 0.6;
|
||||
padding-bottom: 0.5rem;
|
||||
margin-right: 1rem;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
white-space: nowrap;
|
||||
border-bottom: transparent;
|
||||
&:last-of-type{
|
||||
margin-right: 0;
|
||||
}
|
||||
&.active{
|
||||
opacity: 1;
|
||||
border-bottom: 0.1em solid rgba(var(--text), 0.8);
|
||||
}
|
||||
}
|
||||
}
|
||||
.contract-choice{
|
||||
margin-bottom: 2rem;
|
||||
&:last-of-type{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
h3{
|
||||
text-transform: capitalize;
|
||||
font-weight: 400;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
}
|
||||
#homepage{
|
||||
margin: 0 1.5rem;
|
||||
}
|
||||
@media only screen and (min-width: 640px){
|
||||
.padding{
|
||||
padding: 0 6vw;
|
||||
@ -489,6 +521,9 @@ p{
|
||||
.margin{
|
||||
margin: 0 6vw;
|
||||
}
|
||||
#homepage{
|
||||
margin: 0 4vw;
|
||||
}
|
||||
.input{
|
||||
width: 80vw !important;
|
||||
}
|
||||
@ -535,7 +570,9 @@ p{
|
||||
.margin{
|
||||
margin: 0 16vw;
|
||||
}
|
||||
|
||||
#homepage{
|
||||
margin: 0 8vw;
|
||||
}
|
||||
.input{
|
||||
width: 50vw !important;
|
||||
}
|
||||
@ -568,6 +605,9 @@ p{
|
||||
.margin{
|
||||
margin: 0 26vw;
|
||||
}
|
||||
#homepage{
|
||||
margin: 0 12vw;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 2048px){
|
||||
body{
|
||||
@ -579,6 +619,9 @@ p{
|
||||
.margin{
|
||||
margin: 0 32vw;
|
||||
}
|
||||
#homepage{
|
||||
margin: 0 24vw;
|
||||
}
|
||||
#first_section{
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
56
index.html
56
index.html
@ -8,7 +8,7 @@
|
||||
</head>
|
||||
<body data-theme='dark'>
|
||||
<main>
|
||||
<div id="homepage" class="page hide-completely margin">
|
||||
<div id="homepage" class="page hide-completely">
|
||||
<section id="first_section">
|
||||
<header class="header">
|
||||
<div id="logo">
|
||||
@ -102,7 +102,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>
|
||||
<circle cx="25.34" cy="25.34" r="24.84"/>
|
||||
@ -208,7 +208,7 @@
|
||||
<h4>2527</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div id="token_page" class="page">
|
||||
<div id="token_page" class="page hide-completely">
|
||||
<h2>RMT</h2>
|
||||
<div class="card">
|
||||
<h5 class="label">Supply</h5>
|
||||
@ -238,6 +238,48 @@
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="contract_page" class="page">
|
||||
<div class="status closed">Closed</div>
|
||||
<h2 class="uppercase">India ELections 2019</h2>
|
||||
<div class="card">
|
||||
<h5 class="label">Contract Type</h5>
|
||||
<h4 class="breakable address">F6EMAHjivqrcrdAHNABq2R1FLNkx8xfEaT</h4>
|
||||
<h5 class="label">Expiration</h5>
|
||||
<h4>wed may 22 2019 21:00:00 gmt+05:30</h4>
|
||||
<h5 class="label">Token Used</h5>
|
||||
<h4>RMT</h4>
|
||||
<h5 class="label">Participation Amount</h5>
|
||||
<h4>0.001 RMT</h4>
|
||||
</div>
|
||||
<h3 class="heading">User Choices</h3>
|
||||
<ul class="card" type='circle'>
|
||||
<li>Narendra Modi Wins</li>
|
||||
<li>Narendra Modi Loses</li>
|
||||
</ul>
|
||||
<div class="tabs">
|
||||
<h4 class="tab active" data-target="participant_container">Participants</h4>
|
||||
<h4 class="tab" data-target="winners_container">Winners</h4>
|
||||
<div class="line"></div>
|
||||
</div>
|
||||
<ul id="participant_container" data-tab-group="token" class="card">
|
||||
<li class="contract-choice" >
|
||||
<h5 class="breakable label">F6EMAHjivqrcrdAHNABq2R1FLNkx8xfEaT</h5>
|
||||
<h3>narendra modi wins</h3>
|
||||
<h4>0.0000023333 RMT</h4>
|
||||
</li>
|
||||
<li class="balance">
|
||||
<h5 class="breakable label">F6EMAHjivqrcrdAHNABq2R1FLNkx8xfEaT</h5>
|
||||
<h4>0.0000023333 RMT</h4>
|
||||
</li>
|
||||
</ul>
|
||||
<ul id="winners_container" data-tab-group="token" class="card hide-completely">
|
||||
<li class="contract-choice winner" >
|
||||
<h5 class="breakable label">F6EMAHjivqrcrdAHNABq2R1FLNkx8xfEaT</h5>
|
||||
<h3>narendra modi wins</h3>
|
||||
<h4>0.0000023333 RMT</h4>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
@ -331,6 +373,10 @@
|
||||
showPage("block_page")
|
||||
pageTitle.textContent = 'Block'
|
||||
}
|
||||
if(e.target.closest('.block')){
|
||||
showPage("contract_page")
|
||||
pageTitle.textContent = 'Contract '
|
||||
}
|
||||
if(e.target.closest('.tab')){
|
||||
showTab(e.target.closest('.tab'))
|
||||
}
|
||||
@ -342,8 +388,7 @@
|
||||
targetBody = document.getElementById(targetTab),
|
||||
targetGroup = targetBody.getAttribute('data-tab-group'),
|
||||
tabGroupMembers = document.querySelectorAll(`[data-tab-group = '${targetGroup}']`),
|
||||
allTabs = tab.parentNode.querySelectorAll('.tab'),
|
||||
line = tab.closest('.tabs').querySelector('.line')
|
||||
allTabs = tab.parentNode.querySelectorAll('.tab')
|
||||
tabGroupMembers.forEach(member => {
|
||||
member.classList.add('hide-completely')
|
||||
})
|
||||
@ -352,7 +397,6 @@
|
||||
thisTab.classList.remove('active')
|
||||
})
|
||||
tab.classList.add('active')
|
||||
line.setAttribute('style', `left: ${tab.offsetLeft}px; width: ${tab.getBoundingClientRect().width}px`);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user