v1.1.0

css/main.css

@@ -10,7 +10,7 @@
 }
 
 body {
-  --primary-color: purple;
+  --primary-color: #1E88E5;
   --text: 17, 17, 17;
   --text-light: 85, 85, 85;
   --foreground: 255, 255, 255;
@@ -183,6 +183,18 @@ section .dark-background {
       grid-template-rows: auto 1fr;
 }
 
+ul {
+  list-style: none;
+}
+
+ul .balance {
+  margin-bottom: 2rem;
+}
+
+ul .balance:last-of-type {
+  margin-bottom: 0;
+}
+
 .padding {
   padding: 0 1.5rem;
 }
@@ -538,7 +550,7 @@ section .dark-background {
   padding: 1.5rem 0;
 }
 
-.page h2.heading {
+.page h3.heading {
   margin-top: 2rem;
   font-family: 'Montserrat', sans-serif;
 }
@@ -625,6 +637,39 @@ p {
   color: var(--primary-color);
 }
 
+.tabs {
+  position: relative;
+  margin-top: 2rem;
+  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;
+}
+
+.tabs .tab {
+  cursor: pointer;
+  font-family: 'Montserrat', sans-serif;
+  opacity: 0.6;
+  padding-bottom: 0.5rem;
+  margin-right: 1rem;
+}
+
+.tabs .tab:last-of-type {
+  margin-right: 0;
+}
+
+.tabs .tab.active {
+  opacity: 1;
+}
+
 @media only screen and (min-width: 640px) {
   .padding {
     padding: 0 6vw;

css/main.scss

@@ -8,7 +8,7 @@
     font-family: 'Roboto', sans-serif;
 } 
 body{
-    --primary-color: purple;
+    --primary-color: #1E88E5;
     --text: 17, 17, 17;
     --text-light: 85, 85, 85;
     --foreground: 255, 255, 255;
@@ -126,6 +126,15 @@ section{
         grid-template-rows: auto 1fr;
     }
 }
+ul{
+    list-style: none;
+    .balance{
+        margin-bottom: 2rem;
+        &:last-of-type{
+            margin-bottom: 0;
+        }
+    }
+}
 .padding{
    padding: 0 1.5rem;
 }
@@ -379,7 +388,7 @@ section{
 }
 .page{
     padding: 1.5rem 0;
-    h2.heading{
+    h3.heading{
         margin-top: 2rem;
         font-family: 'Montserrat', sans-serif;
     }
@@ -448,6 +457,31 @@ p{
     cursor: pointer;
     color: var(--primary-color);
 }
+.tabs{
+    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;
+    }
+    .tab{
+        cursor: pointer;
+        font-family: 'Montserrat', sans-serif;
+        opacity: 0.6;
+        padding-bottom: 0.5rem;
+        margin-right: 1rem;
+        &:last-of-type{
+            margin-right: 0;
+        }
+        &.active{
+            opacity: 1;
+        }
+    }
+}
 @media only screen and (min-width: 640px){
     .padding{
         padding: 0 6vw;

index.html

@@ -130,7 +130,7 @@
                     <h5 class="label">Nonce</h5>
                     <h4>29294481394</h4>
                 </div>
-                <h2 class="heading">Transactions</h2>
+                <h3 class="heading">Transactions</h3>
                 <div id="block_transaction_container" class="top-bottom-padding">
                     <div class="transaction">
                         <div class="transaction-header grid grid-2">
@@ -170,12 +170,12 @@
                     <h2>1.0006</h2><h4>FLO</h4>
                     <p class="breakable">FDhQizsksSHs4dyJBeLqGcbyuEg163jhXi</p>
                 </div>
-                <h2 class="heading">Transactions</h2>
+                <h3 class="heading">Transactions</h3>
                 <div id="address_transaction_container" class="top-bottom-padding">
 
                 </div>
             </div>
-            <div id="transaction_page" class="page">
+            <div id="transaction_page" class="page hide-completely">
                 <div class="grid grid-2">
                     <div>
                         <h5 class="label">Token Transfer</h5>
@@ -208,7 +208,37 @@
                     <h4>2527</h4>
                 </div>
             </div>
-        </div>       
+            <div id="token_page" class="page">
+                  <h2>RMT</h2>
+                  <div class="card">
+                    <h5 class="label">Supply</h5>
+                    <h4>21,000,000</h4>
+                    <h5 class="label">Incorporation Address</h5>
+                    <h4 class="breakable">F6EMAHjivqrcrdAHNABq2R1FLNkx8xfEaT</h4>
+                  </div> 
+                  <div class="tabs">
+                      <h4 class="tab active" data-target="token_balance_container">Top Balances</h4>
+                      <h4 class="tab" data-target="token_transaction_container">Top Transactions</h4>
+                      <div class="line"></div>
+                  </div>
+                  <ul id="token_balance_container" data-tab-group="token" class="card">
+                      <li class="balance" >
+                          <h5 class="breakable label">F6EMAHjivqrcrdAHNABq2R1FLNkx8xfEaT</h5>
+                          <h4>0.0000023333 RMT</h4>
+                      </li>
+                      <li class="balance">
+                          <h5 class="breakable label">F6EMAHjivqrcrdAHNABq2R1FLNkx8xfEaT</h5>
+                          <h4>0.0000023333 RMT</h4>
+                      </li>
+                  </ul>
+                  <ul id="token_transaction_container" data-tab-group="token" class="card hide-completely">
+                      <li class="balance" >
+                          <h5 class="breakable label">F6EMAHjivqrcrdAHNABq2R1FLNkx8xfEaT</h5>
+                          <h4>0.0000023333 RMT</h4>
+                      </li>
+                  </ul>
+            </div> 
+        </div>        
     </main>
     <script>
         let themeToggler = document.getElementById('theme_toggle'),
@@ -301,8 +331,29 @@
                     showPage("block_page")
                     pageTitle.textContent = 'Block'
                 }
+                if(e.target.closest('.tab')){
+                    showTab(e.target.closest('.tab'))
+                }
             })
         })
+
+        function showTab(tab){
+            let targetTab = tab.getAttribute('data-target'),
+                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')
+            tabGroupMembers.forEach(member => {
+                member.classList.add('hide-completely')
+            })
+            targetBody.classList.remove('hide-completely')
+            allTabs.forEach(thisTab => {
+                thisTab.classList.remove('active')
+            })
+            tab.classList.add('active')
+            line.setAttribute('style', `left: ${tab.offsetLeft}px; width: ${tab.getBoundingClientRect().width}px`);
+        }
     </script>
 </body>
 </html>