v1.0.4

css/main.css

@@ -12,17 +12,14 @@
 body {
   --primary-color: #1E88E5;
   --text: 17, 17, 17;
-  --text-light: 85, 85, 85;
+  --text-light: 100, 100, 100;
   --foreground: 255, 255, 255;
   --background: #efefef;
   --dark-shade: #dadada;
   font-size: 16px;
   color: rgba(var(--text), 1);
   background: rgba(var(--foreground), 1);
-}
+  background-size: cover;
-
-body h5 {
-  font-weight: 500;
 }
 
 body[data-theme='dark'] {
@@ -33,10 +30,6 @@ body[data-theme='dark'] {
   --dark-shade: #1a1a1a;
 }
 
-body[data-theme='dark'] h5 {
-  font-weight: 400;
-}
-
 input[type=text]::-ms-clear {
   display: none;
   width: 0;
@@ -91,6 +84,7 @@ h1 {
 
 h2 {
   font-size: 2rem;
+  font-weight: 500;
 }
 
 h3 {
@@ -129,7 +123,7 @@ h3 {
 }
 
 .uppercase {
-  text-transform: uppercase;
+  text-transform: uppercase !important;
 }
 
 .toggle {
@@ -248,23 +242,29 @@ ul .balance:last-of-type {
   text-transform: capitalize;
 }
 
+.card h2 {
+  margin-bottom: 1.5rem;
+}
+
 .label {
   text-transform: capitalize;
   font-size: 0.8rem;
   margin-bottom: 0.3rem;
   line-height: 1.4em;
-  opacity: 0.7;
+  color: rgba(var(--text-light), 1);
   margin-top: 1.5rem;
+  font-weight: 400;
 }
 
 .label:first-of-type {
   margin-top: 0;
 }
 
+.label + h4:not(.address) {
+  text-transform: capitalize;
+}
+
 .header {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
@@ -322,14 +322,7 @@ ul .balance:last-of-type {
   text-align: center;
 }
 
-#main_search p {
-  opacity: 0.6;
-  text-align: left;
-  margin: 1rem 1.5rem 1.5rem 1.5rem;
-}
-
 #main_search h1 {
-  font-size: 4rem;
   text-align: left;
   margin-top: 2rem;
   font-weight: 500;
@@ -349,7 +342,7 @@ ul .balance:last-of-type {
           align-items: center;
   padding: 1rem;
   gap: 1em;
-  border-radius: 0.5rem;
+  border-radius: 2rem;
   background: rgba(var(--text), 0.06);
 }
 
@@ -370,12 +363,8 @@ ul .balance:last-of-type {
   stroke: rgba(var(--text), 1);
   stroke-linecap: round;
   stroke-linejoin: round;
-  opacity: 0.5;
   stroke-width: 6;
-}
+  opacity: 0.8;
-
-.icon.search line {
-  stroke-width: 8;
 }
 
 .icon#back_btn {
@@ -417,10 +406,6 @@ ul .balance:last-of-type {
   overflow-wrap: break-word;
 }
 
-#highlights .highlight-item:first-of-type, #highlights .highlight-item:last-of-type {
-  cursor: pointer;
-}
-
 #highlights .highlight-item:first-of-type {
   text-transform: uppercase;
 }
@@ -455,100 +440,21 @@ ul .balance:last-of-type {
   grid-area: contract;
 }
 
-#top_transaction_container {
+#latest_transaction_section,
-  display: -ms-grid;
+#latest_blocks_section {
-  display: grid;
-  -ms-grid-columns: (minmax(20rem, 1fr))[auto-fill];
-      grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
-  gap: 1.5em;
-  padding-bottom: 2em;
-  padding-top: 2em;
-}
-
-.transaction {
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  padding: 1.5rem;
-  border-radius: 0.5rem;
-  background: rgba(var(--text), 0.06);
-}
-
-.transaction .transaction-header {
-  margin-bottom: 2em;
-  -ms-grid-columns: auto 1fr;
-      grid-template-columns: auto 1fr;
-}
-
-.transaction .transaction-header h5 {
-  text-transform: capitalize;
-}
-
-.transaction .transaction-header h2 {
-  text-transform: uppercase;
-  margin-top: 0.2em;
-  letter-spacing: 0.06em;
-}
-
-.transaction .transaction-header .icon {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.transaction .transaction-header .icon svg {
-  height: 1.5em;
-  width: 1.5em;
-  opacity: 0.6;
-  margin-left: auto;
-  cursor: pointer;
-  fill: rgba(var(--text), 1);
-}
-
-.transaction .transaction-header .icon svg:hover {
-  opacity: 1;
-}
-
-.transaction h5 {
-  text-transform: uppercase;
-  margin-bottom: 0.4em;
-  opacity: 0.8;
-  font-size: 0.8em;
-}
-
-.transaction h4 {
-  cursor: pointer;
-  margin-bottom: 1.5em;
-  font-weight: 500;
-}
-
-.transaction h4:hover {
-  -webkit-filter: brightness(150%);
-          filter: brightness(150%);
-}
-
-.transaction h3 {
-  margin-top: 2em;
-  text-align: right;
-}
-
-#latest_transaction_section {
   background: rgba(var(--foreground), 1);
 }
 
-#latest_transaction_section header {
+#latest_transaction_section header,
+#latest_blocks_section header {
   -ms-grid-columns: 1fr auto;
       grid-template-columns: 1fr auto;
-  position: -webkit-sticky;
-  position: sticky;
-  top: 0;
   background: inherit;
   z-index: 2;
 }
 
 #page_header {
-  padding: 1.5rem 0;
+  padding: 1rem 0;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
@@ -559,10 +465,17 @@ ul .balance:last-of-type {
 }
 
 .page {
-  padding: 1.5rem 0;
+  padding: 1rem 0;
+  -webkit-animation: fade 0.3s;
+          animation: fade 0.3s;
 }
 
 .page h3.heading {
+  text-transform: capitalize;
+  font-weight: 500;
+}
+
+.page > h3.heading {
   margin-top: 2rem;
 }
 
@@ -605,7 +518,12 @@ p {
   letter-spacing: 0.1em;
 }
 
-.status {
+.balance-card .label {
+  color: white;
+  opacity: 0.7;
+}
+
+.choice, .status {
   padding: 0.5rem 0.8rem;
   border-radius: 2rem;
   display: -webkit-inline-box;
@@ -614,10 +532,29 @@ p {
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  font-size: 0.8rem;
   margin-bottom: 0.5rem;
 }
 
+.choice-container {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+}
+
+.choice {
+  border: solid 1px rgba(var(--text), 0.2);
+}
+
+.choice:last-of-type {
+  margin-bottom: 0;
+}
+
+.status {
+  font-size: 0.8rem;
+}
+
 .status.done {
   background: #00C853;
   -ms-flex-item-align: center;
@@ -631,7 +568,6 @@ p {
   height: 1em;
   width: 1em;
   stroke: white;
-  opacity: 1;
 }
 
 .status.closed {
@@ -649,6 +585,11 @@ p {
   color: var(--primary-color);
 }
 
+.address {
+  text-transform: none !important;
+  word-break: break-all;
+}
+
 .tabs {
   position: relative;
   margin-top: 2rem;
@@ -695,6 +636,50 @@ p {
   margin: 0 1.5rem;
 }
 
+@-webkit-keyframes fade {
+  from {
+    opacity: 0;
+    -webkit-transform: translateY(1rem);
+            transform: translateY(1rem);
+  }
+  to {
+    opacity: 1;
+    -webkit-transform: none;
+            transform: none;
+  }
+}
+
+@keyframes fade {
+  from {
+    opacity: 0;
+    -webkit-transform: translateY(1rem);
+            transform: translateY(1rem);
+  }
+  to {
+    opacity: 1;
+    -webkit-transform: none;
+            transform: none;
+  }
+}
+
+#top_transaction_container {
+  display: -ms-grid;
+  display: grid;
+  gap: 1.5em;
+}
+
+.transaction {
+  padding: 1.5rem;
+  border-radius: 0.5rem;
+  background: rgba(var(--text), 0.06);
+}
+
+.transaction h4 {
+  cursor: pointer;
+  margin-bottom: 1.5em;
+  font-weight: 500;
+}
+
 @media only screen and (min-width: 640px) {
   .margin, .page {
     margin: 0 6vw;
@@ -741,6 +726,39 @@ p {
     -ms-grid-column: 2;
     grid-area: contract;
   }
+  #page_header {
+    padding: 1.5rem 0;
+  }
+  #top_transaction_container {
+    -ms-grid-columns: (1fr)[2];
+        grid-template-columns: repeat(2, 1fr);
+  }
+  .transaction {
+    width: 100%;
+    display: -ms-grid;
+    display: grid;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    gap: 1rem;
+    -ms-grid-columns: auto 1fr;
+        grid-template-columns: auto 1fr;
+    -ms-grid-rows: auto 1fr;
+        grid-template-rows: auto 1fr;
+        grid-template-areas: '. info '
 '. info';
+  }
+  .transaction .contract-type {
+    -ms-flex-item-align: start;
+        align-self: flex-start;
+  }
+  .transaction .contract-info {
+    padding-left: 1rem;
+    -ms-grid-row: 1;
+    -ms-grid-row-span: 2;
+    -ms-grid-column: 2;
+    grid-area: info;
+    border-left: 1px solid rgba(var(--text), 0.2);
+  }
 }
 
 @media only screen and (min-width: 1280px) {
@@ -778,6 +796,10 @@ p {
     -ms-grid-column: 4;
     grid-area: contract;
   }
+  #top_transaction_container {
+    -ms-grid-columns: (1fr)[3];
+        grid-template-columns: repeat(3, 1fr);
+  }
 }
 
 @media only screen and (min-width: 1920px) {
@@ -790,6 +812,13 @@ p {
   #homepage {
     margin: 0 12vw;
   }
+  .input {
+    width: 40vw !important;
+  }
+  #top_transaction_container {
+    -ms-grid-columns: (1fr)[4];
+        grid-template-columns: repeat(4, 1fr);
+  }
 }
 
 @media only screen and (min-width: 2048px) {
@@ -805,6 +834,13 @@ p {
   #first_section {
     min-height: auto;
   }
+  .input {
+    width: 30vw !important;
+  }
+  #top_transaction_container {
+    -ms-grid-columns: (1fr)[5];
+        grid-template-columns: repeat(5, 1fr);
+  }
 }
 
 @media only screen and (max-width: 320px) {
@@ -822,8 +858,15 @@ p {
     background: rgba(var(--text), 1);
     color: var(--background);
   }
-  #logo {
+  .hover {
     cursor: pointer;
   }
+  .tab {
+    -webkit-transition: opacity 0.3s;
+    transition: opacity 0.3s;
+  }
+  .tab:hover {
+    opacity: 1;
+  }
 }
 /*# sourceMappingURL=main.css.map */

css/main.scss

@@ -10,16 +10,14 @@
 body{
     --primary-color: #1E88E5;
     --text: 17, 17, 17;
-    --text-light: 85, 85, 85;
+    --text-light: 100, 100, 100;
     --foreground: 255, 255, 255;
     --background: #efefef;
     --dark-shade: #dadada;
     font-size: 16px;
     color: rgba(var(--text), 1);
     background: rgba(var(--foreground), 1);
-    h5{
+    background-size: cover;
-        font-weight: 500;
-    }
 }
 body[data-theme='dark']{
     --text: 218, 218, 218;
@@ -27,9 +25,6 @@ body[data-theme='dark']{
     --foreground: 20, 20, 20;
     --background: #111;
     --dark-shade: #1a1a1a;
-    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; }
@@ -64,6 +59,7 @@ h1{
 }
 h2{
     font-size: 2rem;
+    font-weight: 500;
 }
 h3{
     font-size: 1.5rem;
@@ -90,7 +86,7 @@ h3{
     letter-spacing: 0.06em;
 }
 .uppercase{
-    text-transform: uppercase;
+    text-transform: uppercase !important;
 }
 .toggle{
     position: relative;
@@ -179,21 +175,26 @@ ul{
         font-weight: 400;
         text-transform: capitalize;
     }
+    h2{
+        margin-bottom: 1.5rem;
+    }
 }
 .label{
     text-transform: capitalize;
     font-size: 0.8rem;
     margin-bottom: 0.3rem;
     line-height: 1.4em;
-    opacity: 0.7;
+    color: rgba(var(--text-light), 1);
     margin-top: 1.5rem;
-
+    font-weight: 400;
     &:first-of-type{
         margin-top: 0;
     }
+    &+h4:not(.address){
+        text-transform: capitalize;
+    }
 }
 .header{
-    display: flex;
     align-items: center;
     padding: 2em 0;
 }
@@ -226,13 +227,7 @@ ul{
     align-items: center;
     justify-content: center;
     text-align: center;
-    p{
-        opacity: 0.6;
-        text-align: left;
-        margin: 1rem 1.5rem 1.5rem 1.5rem;
-    }
     h1{
-        font-size: 4rem;
         text-align: left;
         margin-top: 2rem;
         font-weight: 500;
@@ -247,7 +242,7 @@ ul{
         align-items: center;
         padding: 1rem;
         gap: 1em;
-        border-radius: 0.5rem;
+        border-radius: 2rem;
         background: rgba(var(--text), 0.06);
         //border: solid 1px rgba(var(--text), 0.6);
     }
@@ -268,11 +263,8 @@ ul{
     stroke: rgba(var(--text), 1);
     stroke-linecap: round;
     stroke-linejoin: round;
-    opacity: 0.5;
     stroke-width: 6;
-    &.search line{
+    opacity: 0.8;
-        stroke-width: 8;
-    }
     &#back_btn{
         margin-right: 1rem;
     }
@@ -302,9 +294,6 @@ ul{
             text-transform: uppercase;
             overflow-wrap: break-word;
         }
-        &:first-of-type,&:last-of-type{
-            cursor: pointer;
-        }
         &:first-of-type{
             text-transform: uppercase;
         }
@@ -325,85 +314,30 @@ ul{
         }
     }
 }
-#top_transaction_container{
+#latest_transaction_section,
-    display: grid;
+#latest_blocks_section{
-    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
-    gap: 1.5em;
-    padding-bottom: 2em;
-    padding-top: 2em;
-}
-.transaction{
-    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-header{
-        margin-bottom: 2em;
-        grid-template-columns: auto 1fr;
-        h5{
-            text-transform: capitalize;
-        }
-        h2{
-            text-transform: uppercase;
-            margin-top: 0.2em;
-            letter-spacing: 0.06em;
-        }
-        .icon{
-            display: flex;
-            svg{
-                height: 1.5em;
-                width: 1.5em;
-                opacity: 0.6;
-                margin-left: auto;
-                cursor: pointer;
-                fill: rgba(var(--text), 1);
-                &:hover{
-                    opacity: 1;
-                }
-            }
-
-        }
-    } 
-    h5{
-        text-transform: uppercase;
-        margin-bottom: 0.4em;
-        opacity: 0.8;
-        font-size: 0.8em;
-    }  
-    h4{
-        cursor: pointer;
-        margin-bottom: 1.5em;
-        font-weight: 500;
-        &:hover{
-            filter: brightness(150%);
-        }
-    }
-    h3{
-        margin-top: 2em;
-        text-align: right;
-    }
-}
-#latest_transaction_section{
     background: rgba(var(--foreground), 1);
     header{
         grid-template-columns: 1fr auto;
-        position: sticky;
-        top: 0;
         background: inherit;
         z-index: 2;
     }
 }
 #page_header{
-    padding: 1.5rem 0;
+    padding: 1rem 0;
     align-items: center;
     h3{
         font-weight: 500;
     }
 }
 .page{
-    padding: 1.5rem 0;
+    padding: 1rem 0;
+    animation: fade 0.3s;
     h3.heading{
+        text-transform: capitalize;
+        font-weight: 500;
+    }
+    & > h3.heading{
         margin-top: 2rem;
     }
 }
@@ -438,14 +372,30 @@ p{
         opacity: 0.8;
         letter-spacing: 0.1em;
     }
+    .label{
+        color: white;
+        opacity: 0.7;
     }
-.status{
+}
+.choice,.status{
     padding: 0.5rem 0.8rem;
     border-radius: 2rem;
     display: inline-flex;
     align-items: center;
-    font-size: 0.8rem;
     margin-bottom: 0.5rem;
+}
+.choice-container{
+    display: flex;
+    flex-wrap: wrap;
+}
+.choice{
+    border: solid 1px rgba(var(--text), 0.2);
+    &:last-of-type{
+        margin-bottom: 0;
+    }
+}
+.status{
+    font-size: 0.8rem;
     &.done{
         background: #00C853;
         align-self: center;
@@ -455,7 +405,6 @@ p{
             height: 1em;
             width: 1em;
             stroke: white;
-            opacity: 1;
         }
     }
     &.closed{
@@ -472,6 +421,10 @@ p{
     cursor: pointer;
     color: var(--primary-color);
 }
+.address{
+    text-transform: none !important;
+    word-break: break-all;
+}
 .tabs{
     position: relative;
     margin-top: 2rem;
@@ -508,6 +461,31 @@ p{
 #homepage{
     margin: 0 1.5rem;
 }
+@keyframes fade{
+    from{
+        opacity: 0;
+        transform: translateY(1rem);
+    }
+    to{
+        opacity: 1;
+        transform: none;
+    }
+}
+#top_transaction_container{
+    display: grid;
+    gap: 1.5em;
+}
+.transaction{
+    padding: 1.5rem;
+    border-radius: 0.5rem;
+    //border: solid 1px rgba(var(--text), 0.1);
+    background: rgba(var(--text), 0.06);
+    h4{
+        cursor: pointer;
+        margin-bottom: 1.5em;
+        font-weight: 500;
+    }
+}
 @media only screen and (min-width: 640px){
     .margin, .page{
         margin: 0 6vw;
@@ -553,6 +531,30 @@ p{
             }
         }
     }
+    #page_header{
+        padding: 1.5rem 0;
+    }
+    #top_transaction_container{
+        grid-template-columns: repeat(2, 1fr);
+    }
+    .transaction{
+        width: 100%;
+        display: grid;
+        align-items: center;
+        gap: 1rem;
+        grid-template-columns: auto 1fr;
+        grid-template-rows: auto 1fr;
+        grid-template-areas:    '. info '
+                                '. info';
+        .contract-type{
+            align-self: flex-start;
+        }
+        .contract-info{
+            padding-left: 1rem;
+            grid-area: info;
+            border-left: 1px solid rgba(var(--text), 0.2);
+        }
+    }
 }
 @media only screen and (min-width: 1280px){
     .margin, .page{
@@ -582,6 +584,9 @@ p{
             }
         }
     }
+    #top_transaction_container{
+        grid-template-columns: repeat(3, 1fr);
+    }
 }
 @media only screen and (min-width: 1920px){
     body{
@@ -593,6 +598,12 @@ p{
     #homepage{
         margin: 0 12vw;
     }
+    .input{
+        width: 40vw !important;
+    }
+    #top_transaction_container{
+        grid-template-columns: repeat(4, 1fr);
+    }
 }
 @media only screen and (min-width: 2048px){
     body{
@@ -607,6 +618,12 @@ p{
     #first_section{
         min-height: auto;
     }
+    .input{
+        width: 30vw !important;
+    }
+    #top_transaction_container{
+        grid-template-columns: repeat(5, 1fr);
+    }
 }
 @media only screen and (max-width: 320px){
     body{
@@ -621,7 +638,13 @@ p{
             color: var(--background);
         }
     }
-    #logo{
+    .hover{
         cursor: pointer;
     }
+    .tab{
+        transition: opacity 0.3s;
+        &:hover{
+            opacity: 1;
+        }
+    }
 }

index.html

@@ -10,12 +10,12 @@
     <main>
         <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">
+                <svg class="icon hover" 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">
+                <svg class="icon 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"/>
@@ -40,7 +40,7 @@
                 page.id = 'homepage'
                 page.innerHTML = ` 
                 <section id="first_section">
-                <header class="header">
+                <header class="header flex">
                     <div id="logo">
                         <svg id="main_logo" viewBox="0 0 27.25 32">
                             <title>RanchiMall</title>
@@ -76,10 +76,10 @@
                     <label class="input margin">
                         <svg class="icon" 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)"/>
+                            <circle cx="25.34" cy="25.34" r="24.84"/>
-                            <line x1="63.35" y1="63.35" x2="39.86" y2="39.86"/>
+                            <line x1="63.65" y1="63.65" x2="42.91" y2="42.91"/>
                         </svg>
-                        <input type="search" placeholder="Search">
+                        <input type="search" placeholder="Search block, transactions, address, token or contract">
                     </label>
                 </div>
             <div id="highlights">
@@ -97,32 +97,24 @@
                 </div>
                 <div class="highlight-item">
                     <h4 class="label">top contract</h4>
-                    <h2>${topContract}</h2>
+                    <h2 class="contract">${topContract}</h2>
                 </div>
             </div>
         </section>
         <section id="latest_transaction_section">
             <header class="grid grid-2 header">
-                <h3>Latest transactions</h3>
+                <h3 class="heading">Latest transactions</h3>
-                <button class="margin-left-auto">all</button>
+                <button id='all_trans_btn' class="margin-left-auto">view all</button>
             </header>
             <div id="top_transaction_container">
-                <div class="transaction">
-                    <div class="transaction-header grid grid-2">
-                        <div>
-                            <h5>Token transfer</h5>
-                            <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 address">FDhQizsksSHs4dyJBeLqGcbyuEg163jhXi</h4>
-                    <h5>to</h5>
-                    <h4 class="breakable address">FDhQizsksSHs4dyJBeLqGcbyuEg163jhXi</h4>
-                    <h3>₹0.000000007</h3>
             </div>
+        </section>
+        <section id="latest_blocks_section">
+            <header class="grid grid-2 header">
+                <h3 class="heading">Latest blocks</h3>
+                <button id='all_blocks_btn' class="margin-left-auto">view all</button>
+            </header>
+            <div id="top_blocks_container">
             </div>
         </section>
                 `
@@ -183,7 +175,7 @@
                 return page;
             },
             transactionPage: function(obj){
-                let {type, name, blockHeight, amount, sender, reciever, floData, hash, confirmations} = obj,
+                let {type, name, blockHeight, amount, sender, receiver, floData, hash, confirmations} = obj,
                     page = document.createElement('div')
                 page.classList.add('page')
                 page.id = 'transaction_page'
@@ -207,9 +199,9 @@
                     <h5 class="label">Amount</h5>
                     <h4>${amount}</h4>
                     <h5 class="label">Sender</h5>
-                    <h4 class="breakable address">${sender}</h4>
+                    <h4 class="address">${sender}</h4>
                     <h5 class="label">Reciever</h5>
-                    <h4 class="breakable address">${reciever}</h4>
+                    <h4 class="address">${receiver}</h4>
                 </div>
                 <div class="card">
                     <h5 class="label">FLO Data</h5>
@@ -227,8 +219,8 @@
                 page.classList.add('page')
                 page.id = 'token_page'
                 page.innerHTML = ` 
-                <h2 class="uppercase">${token}</h2>
                   <div class="card">
+                    <h2 class="uppercase">${token}</h2>
                     <h5 class="label">Supply</h5>
                     <h4>${supply}</h4>
                     <h5 class="label">Incorporation Address</h5>
@@ -259,7 +251,7 @@
                 return page;
             },
             contractPage: function(obj){
-                let {contract, contractType, incAddress, expiration,token, participationFees} = obj,
+                let {status, contract, contractType, incAddress, expiration, token, participationFees} = obj,
                     page = document.createElement('div')
                 page.classList.add('page')
                 page.id = 'contract_page'
@@ -270,11 +262,11 @@
                     <h5 class="label">Contract Type</h5>
                     <h4>${contractType}</h4>
                     <h5 class="label">Incorporation Address</h5>
-                    <h4 class="breakable address">${incAddress}</h4>
+                    <h4 class="address">${incAddress}</h4>
                     <h5 class="label">Expiration</h5>
                     <h4>${expiration}</h4>
                     <h5 class="label">Token Used</h5>
-                    <h4>${token}</h4>
+                    <h4 class="uppercase">${token}</h4>
                     <h5 class="label">Participation Amount</h5>
                     <h4>${participationFees}</h4>
                 </div>
@@ -309,24 +301,129 @@
                 `
                 return page;
             },
-            transactionCard: function(block, type, name, sender, reciever, amount){
+            contractTransferCard: function(obj){
-                let card = document.createElement('div');
+                let {hash, blockHeight, token, sender, receiver, amount, contractName, userChoice} = obj,
-                card.classList.add('transaction')
+                    card = document.createElement('div');
-                card.id = block;
+                card.classList.add('transaction token-transfer')
-                card.innerHTML = `<div class="transaction-header grid grid-2">
+                card.id = hash;
-                                    <div>
+                card.innerHTML = `
-                                        <h5>${type}</h5>
+                                <h5 class="label block">${blockHeight}</h5>
-                                        <h2 class="token">${name}</h2>
+                                <div class="contract-type">
+                                    <h5 class="label">Smart Contract Transfer</h5>
+                                    <h2 class="token uppercase">${token}</h2>
                                 </div>
-                                    <svg class="icon margin-left-auto" viewBox="0 0 64 64">
+                                <div class="contract-info">
-                                        <title>More infomation icon</title>
+                                    <h5 class="label">Sender</h5>
-                                        <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"/>
+                                    <h4 class="address">${sender}</h4>
-                                    </svg>
+                                    <h5 class="label">receiver</h5>
+                                    <h4 class="address">${receiver}</h4>
+                                    <h5 class="label">amount</h5>
+                                    <h3>${amount} ${token}</h3>
+                                    <h5 class="label">Contract name</h5>
+                                    <h4>${contractName}</h4>`
+                if(userChoice)
+                    card.innerHTML += `
+                                    <h5 class="label">User Choice</h5>
+                                    <h4>${userChoice}</h4>`
+                
+                card.innerHTML += `</div>`;
+                return card;
+            },
+            tokenTransferCard: function(obj){
+                let {hash, blockHeight, token, sender, receiver, amount} = obj,
+                    card = document.createElement('div');
+                card.classList.add('transaction token-transfer')
+                card.id = hash;
+                card.innerHTML = `
+                                <h5 class="label block">${blockHeight}</h5>
+                                <div class="contract-type">
+                                    <h5 class="label">Token transfer</h5>
+                                    <h2 class="token uppercase">${token}</h2>
                                 </div>
-                                <h4 class="breakable address">${sender}</h4>
+                                <div class="contract-info">
-                                <h5>to</h5>
+                                    <h5 class="label">Sender</h5>
-                                <h4 class="breakable address">${reciever}</h4>
+                                    <h4 class="address">${sender}</h4>
-                                <h3>₹${amount}</h3>`;
+                                    <h5 class="label">receiver</h5>
+                                    <h4 class="address">${receiver}</h4>
+                                    <h5 class="label">amount</h5>
+                                    <h3>${amount} ${token}</h3>
+                                </div>`;
+                return card;
+            },
+            tokenCreationCard: function(obj){
+                let {hash, blockHeight, token, incAddress, supply} = obj,
+                    card = document.createElement('div');
+                card.classList.add('transaction token-creation')
+                card.id = hash;
+                card.innerHTML = `
+                                <h5 class="label block">${blockHeight}</h5>
+                                <div class="contract-type">
+                                    <h5 class="label">token creation</h5>
+                                    <h2 class="token uppercase">${token}</h2>
+                                </div>
+                                <div class="contract-info">
+                                    <h5 class="label">Incorporation address</h5>
+                                    <h4>${incAddress}</h4>
+                                    <h5 class="label">token name</h5>
+                                    <h4 class="uppercase">${token}</h4>
+                                    <h5 class="label">supply</h5>
+                                    <h4>${supply}</h4>
+                                </div>`;
+                return card;
+            },
+            contractTriggerCard: function(obj){
+                let {hash, blockHeight, contractName, contractAddress, winningChoice, committeeAddress} = obj,
+                    card = document.createElement('div');
+                card.classList.add('transaction contract-trigger')
+                card.id = hash;
+                card.innerHTML = `
+                                <h5 class="label block">${blockHeight}</h5>
+                                <div class="contract-type">
+                                    <h2 class="token uppercase">smart contract trigger</h2>
+                                </div>
+                                <div class="contract-info">
+                                    <h5 class="label">Contract name</h5>
+                                    <h4>${contractName}</h4>
+                                    <h5 class="label">contract address</h5>
+                                    <h4 class="address">${contractAddress}</h4>
+                                    <h5 class="label">Winning Choice</h5>
+                                    <h4>${winningChoice}</h4>
+                                    <h5 class="label">committee address</h5>
+                                    <h4>${committeeAddress}</h4>
+                                </div>`;
+                return card;
+            },
+            contractCreationCard: function(obj){
+                let {hash, blockHeight, token, contractName, incAddress, contractType, expiration, participationFees, availableChoices} = obj,
+                    card = document.createElement('div');
+                card.classList.add('transaction contract-creation')
+                card.id = hash;
+                card.innerHTML = `
+                                <h5 class="label block">${blockHeight}</h5>
+                                <div class="contract-type">
+                                    
+                                    <h2 class="token uppercase">${token}</h2>
+                                </div>
+                                <div class="contract-info">
+                                    <h5 class="label">Contract name</h5>
+                                    <h4>${contractName}</h4>
+                                    <h5 class="label">Incorporation address</h5>
+                                    <h4>${incAddress}</h4>
+                                    <h5 class="label">token used</h5>
+                                    <h4 class="uppercase">${token}</h4>
+                                    <h5 class="label">contract type</h5>
+                                    <h4>${contractType}</h4>
+                                    <h5 class="label">expiration</h5>
+                                    <h4 class="address">${expiration}</h4>
+                                    <h5 class="label">participation amount</h5>
+                                    <h4>${participationFees} ${token}</h4>
+                                    <h5 class="label">user Choices</h5>
+                                    <div class="choices-container">`;
+                availableChoices.forEach(choice => {
+                    card.innerHTML = `<div class="choice">${choice}</div>`
+                })
+                card.innerHTML +=`  </div>
+                                </div>`;
                 return card;
             }
         }
@@ -340,6 +437,10 @@
             document.getElementById(page).remove()
         }
 
+        function replaceDash(string){
+            return string.replace(/-/g," ")
+        }
+
         function render(pageId){
             if(currentPage !== pageId)
                 removePage(currentPage)
@@ -356,8 +457,8 @@
                     blockHeight: '4530254',
                     amount: '0.1FLO',
                     sender: 'F846EFefybwewe45avd5165adv16',
-                    reciever: 'F846EFefybwewe45avd5165adv16',
+                    receiver: 'F846EFefybwewe45avd5165adv16',
-                    floData: 'ansfer 100 rupee# to FJyz51JTnPuB3AMRjyYe3rbuLmnq4qErcc for FCuFeAa3Haqk9oKQWEKVSt4pwQQEooDAEm.',
+                    floData: 'transfer 100 rupee# to FJyz51JTnPuB3AMRjyYe3rbuLmnq4qErcc for FCuFeAa3Haqk9oKQWEKVSt4pwQQEooDAEm.',
                     hash: '1ab70a9de6a8deeb0ba8f6c4ca015d60659c90953a7c8a1f3215276fe57b1fb2',
                     confirmations: '22458'
                 }
@@ -370,6 +471,22 @@
                 pageTitle.textContent = 'Token'
             }
 
+            if(pageId === 'contract_page'){
+                let obj = {
+                    stauts: 'closed',
+                    contract: 'india-elections-2019',
+                    contractType: 'one-time-event',
+                    incAddress: 'F7osBpjDDV1mSSnMNrLudEQQ3cwDJ2dPR1',
+                    expiration: 'wed may 22 2019 21:00:00 gmt+0530',
+                    token: 'rmt',
+                    participationFees: '0.001 RMT',
+                }
+                pageContainer.append(create.contractPage(obj))
+                pageTitle.textContent = 'Contract'
+            }
+
+
+
             if(pageId === 'homepage'){
                 pageHeader.classList.add('hide-completely')
                 pageContainer.append(create.homepage({topToken: 'RMT', totalTransactions: '88', walletAddresses: '44', topContract: 'India Election 2019'}))
@@ -405,6 +522,10 @@
             currentPage = pageId;
         }
 
+        function renderTransactions(){
+
+        }
+
         window.addEventListener('load', () => {
             render('homepage')
         
@@ -422,9 +543,8 @@
                     render("block_page")
                     pageTitle.textContent = 'Block'
                 }
-                if(e.target.closest('.block')){
+                if(e.target.closest('.contract')){
                     render("contract_page")
-                    pageTitle.textContent = 'Contract  '
                 }
                 if(e.target.closest('.tab')){
                     showTab(e.target.closest('.tab'))