Update bob'sfund.html

updated bobs fund new url

assets/css/main.css

@@ -1,6 +1,7 @@
 * :not(ol) {
   padding: 0;
   margin: 0;
+  -webkit-box-sizing: border-box;
   box-sizing: border-box;
   font-family: "Roboto Slab", serif;
 }
@@ -10,19 +11,19 @@
 }
 
 body {
-  --accent-color: #e72c37;
+  --accent-color: #E72C37;
   --light-shade: rgba(var(--text-color), 0.06);
   --text-color: 17, 17, 17;
   --text-color-light: 100, 100, 100;
   --foreground-color: 255, 255, 255;
-  --background-color: #f6f6f6;
+  --background-color: #F6f6f6;
-  --danger-color: red;
+  --error-color: red;
   --green: #007936;
-  --banner-color: #1e88e5;
+  --banner-color: #1E88E5;
   --secondary-text-color: #034baa;
   --font-weight-factor: 1;
   color: rgba(var(--text-color), 1);
-  height: 100%;
+  height: calc(100%);
   background: var(--background-color);
 }
 
@@ -33,7 +34,7 @@ body[data-theme=dark] {
   --text-color-light: 170, 170, 170;
   --foreground-color: 20, 20, 20;
   --background-color: #0a0a0a;
-  --danger-color: rgb(255, 106, 106);
+  --error-color: rgb(255, 106, 106);
   --banner-color: #0166be;
   --secondary-text-color: #4393fc;
   --font-weight-factor: 0.9;
@@ -88,8 +89,7 @@ p {
 }
 
 img {
-  -o-object-fit: cover;
+  object-fit: cover;
-     object-fit: cover;
 }
 
 a {
@@ -171,10 +171,6 @@ ol[type="1"] {
   display: flex;
 }
 
-.flex-wrap {
-  flex-wrap: wrap;
-}
-
 .grid {
   display: grid;
 }
@@ -339,6 +335,8 @@ ol[type="1"] {
   word-wrap: break-word;
   -ms-word-break: break-all;
   word-break: break-word;
+  -ms-hyphens: auto;
+  -moz-hyphens: auto;
   -webkit-hyphens: auto;
   hyphens: auto;
 }
@@ -352,8 +350,8 @@ ol[type="1"] {
 }
 
 .icon {
-  width: 1.2rem;
+  width: 1.5rem;
-  height: 1.2rem;
+  height: 1.5rem;
   fill: rgba(var(--text-color), 0.9);
 }
 
@@ -454,7 +452,7 @@ ol[type="1"] {
 }
 
 #elevator_popup {
-  position: fixed;
+  position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
@@ -467,7 +465,6 @@ ol[type="1"] {
 }
 
 .elevator__header {
-  position: -webkit-sticky;
   position: sticky;
   top: 0;
   padding: 1.2rem 1.5rem;
@@ -499,7 +496,6 @@ ol[type="1"] {
 }
 
 .floor_list__header {
-  position: -webkit-sticky;
   position: sticky;
   top: 0;
   padding-bottom: 0.5rem;
@@ -527,9 +523,7 @@ ol[type="1"] {
 
 .outlet-list__item {
   display: grid;
-  -webkit-user-select: none;
+  user-select: none;
-     -moz-user-select: none;
-          user-select: none;
   width: min(50ch, 100%);
   counter-increment: outlet-counter;
 }
@@ -584,31 +578,46 @@ ol[type="1"] {
 }
 
 #main_header {
-  position: -webkit-sticky;
+  position: relative;
-  position: sticky;
-  top: 0;
-  z-index: 1;
-  background: var(--background-color);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
   padding: 1rem;
+  grid-template-columns: repeat(3, 1fr);
 }
 
 #elevator_button {
   justify-self: flex-start;
   margin-left: -1rem;
 }
-
+#elevator_button .icon {
-.main-logo {
+  width: 1.7rem;
-  position: absolute;
+  height: 1.7rem;
-  left: 50%;
-  transform: translateX(-50%);
 }
 
 #main_header__logo {
-  height: 1.5rem;
+  height: 1.8rem;
+  width: 1.8rem;
+}
+
+.theme-switcher {
+  position: relative;
+  justify-self: flex-end;
   width: 1.5rem;
+  height: 1.5rem;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+.theme-switcher .icon {
+  position: absolute;
+  transition: transform 0.6s;
+}
+
+.theme-switcher__checkbox {
+  display: none;
+}
+.theme-switcher__checkbox:checked ~ .moon-icon {
+  transform: scale(0) rotate(90deg);
+}
+.theme-switcher__checkbox:not(:checked) ~ .sun-icon {
+  transform: scale(0) rotate(-90deg);
 }
 
 .page,
@@ -633,11 +642,13 @@ ol[type="1"] {
 
 #home_page {
   will-change: scroll-position;
+  overflow-y: auto;
+  max-height: calc(100vh - 5.2rem);
+  grid-template-columns: 2rem 1fr;
   scroll-behavior: smooth;
 }
 
 #floor_line_map {
-  position: -webkit-sticky;
   position: sticky;
   top: 1rem;
   height: 40vh;
@@ -686,9 +697,7 @@ ol[type="1"] {
   align-items: center;
   left: 0.2rem;
   margin-top: -1rem;
-  -webkit-user-select: none;
+  user-select: none;
-     -moz-user-select: none;
-          user-select: none;
   transition: transform 0.3s;
 }
 
@@ -719,6 +728,10 @@ ol[type="1"] {
   transition: box-shadow 0.3s, opacity 0.3s;
 }
 
+#floor_container {
+  width: calc(100% - 1rem);
+}
+
 .floor {
   padding-bottom: 3rem;
   width: 100%;
@@ -886,8 +899,7 @@ ol[type="1"] {
   border-radius: 0.5rem;
   height: 10rem;
   width: 10rem;
-  -o-object-position: top;
+  object-position: top;
-     object-position: top;
   border-radius: 50%;
 }
 
@@ -932,12 +944,12 @@ ol[type="1"] {
 
 .motivated {
   color: black;
-  background-color: #ffca28;
+  background-color: #FFCA28;
 }
 
 .passionate {
   color: black;
-  background-color: #00e676;
+  background-color: #00E676;
 }
 
 #intern_level_popup {
@@ -999,6 +1011,8 @@ ol[type="1"] {
 }
 .outlet-label .icon {
   grid-area: icon;
+  height: 1.6rem;
+  width: 1.6rem;
   fill: var(--accent-color);
   justify-self: flex-end;
 }
@@ -1156,7 +1170,6 @@ ol[type="1"] {
 }
 #performance_preview > * {
   padding: 0;
-  box-shadow: none;
 }
 
 #expanding_tile {
@@ -1185,7 +1198,6 @@ ol[type="1"] {
 
 .room-container__header {
   display: flex;
-  position: -webkit-sticky;
   position: sticky;
   top: 0;
   z-index: 2;
@@ -1208,10 +1220,22 @@ ol[type="1"] {
   font-weight: calc(700 * var(--font-weight-factor));
 }
 
+/* .room-carousel{
+    display: flex;
+    overflow-x: auto;
+    scroll-snap-type: x mandatory;
+    height: 100%;
+    scroll-behavior: smooth;
+    & > *{
+        min-width: 100%;
+        scroll-snap-align: start;
+
+    }
+} */
 .room-container__footer {
-  position: -webkit-sticky;
   position: sticky;
   display: flex;
+  gap: 1rem;
   bottom: 0;
   z-index: 2;
   overflow-x: auto;
@@ -1220,9 +1244,6 @@ ol[type="1"] {
   margin-left: -3rem;
   background: linear-gradient(0deg, var(--background-color) 70%, rgba(0, 0, 0, 0) 100%);
 }
-.room-container__footer > h4 {
-  margin-right: 1rem;
-}
 
 #room_switcher {
   display: grid;
@@ -1258,7 +1279,7 @@ ol[type="1"] {
 }
 
 .tile__brief {
-  margin-top: 1rem;
+  margin-top: 0.5rem;
   z-index: 1;
   color: rgba(var(--text-color), 0.7);
 }
@@ -1360,60 +1381,56 @@ ol[type="1"] {
   color: rgba(var(--text-color), 0.8);
 }
 
-#line_sample {
-  width: 2rem;
-  height: 0.2rem;
-  margin-right: 1rem;
-  background: linear-gradient(90deg, #f49080, #80b6f4);
-}
-
 .graph-container {
-  min-height: 16rem;
   margin: 1rem 0 4rem 0;
 }
 
-.link-container {
-  display: grid;
-  gap: 1rem;
-  justify-items: flex-start;
-  align-items: center;
-}
-
 @media only screen and (max-width: 640px) {
   .hide-on-mobile {
     display: none;
   }
+
   .outlet-preview {
     gap: 1.5rem;
   }
+
   .outlet-preview__number-container {
     grid-row: 1/2;
   }
+
   .outlet-preview__number::after {
     left: 0;
   }
+
   .outlet-preview__number,
 .outlet-label__no {
     font-size: 5rem;
   }
+
   #outlet_switcher {
     width: calc(100% - 2rem);
   }
+
   .outlet-label {
     grid-row: 1/2;
   }
+
   .outlet-hero-section {
     margin-top: 2rem;
   }
+
   .outlet-label__no {
     margin-bottom: 2rem;
   }
+
   .series-container {
     gap: 1rem;
   }
+
   .outlet-list__item .icon {
     margin-left: auto;
   }
+
   .rooms__header {
     flex-direction: column;
     align-items: flex-start;
@@ -1421,6 +1438,7 @@ ol[type="1"] {
   .rooms__header scroll-tab-header {
     width: calc(100vw - 2rem);
   }
+
   .room-tile {
     padding-top: 100%;
   }
@@ -1432,51 +1450,62 @@ ol[type="1"] {
     padding: 1rem;
     position: absolute;
   }
+
   .room-tile__icon {
     height: 4rem;
     width: 4rem;
   }
+
   .investors-icon {
     height: 6rem;
     width: 6rem;
   }
+
   #hero_title {
     margin-top: 2rem;
   }
+
   .ext-link-tile {
     padding: 1rem;
     flex-direction: column;
     align-items: flex-start;
   }
-  .link-container {
+
-    margin-top: 1.5rem;
+  .round {
+    margin-top: 1rem;
   }
 }
 @media only screen and (min-width: 640px) {
-  #home_page,
+  #home_page, .page,
-.page,
 .page-layout {
     grid-template-columns: 1fr 90vw 1fr;
   }
+
   .h1 {
     font-size: 4rem;
   }
+
   .h2 {
     font-size: 2.5rem;
   }
+
   .h3 {
     font-size: 1.5rem;
   }
+
   .h4 {
     font-size: 1.1rem;
   }
+
   #main_header {
     padding: 1.2rem 2rem;
   }
+
   #floor_list {
     gap: 8vw;
     padding: 0 8vw 4rem 8vw;
   }
+
   .floor_list__item {
     position: relative;
     grid-template-columns: 1fr 1fr;
@@ -1507,6 +1536,7 @@ ol[type="1"] {
     grid-row: 1/2;
     grid-column: 1/2;
   }
+
   .floor__header::before {
     left: -10%;
     width: 10%;
@@ -1515,9 +1545,11 @@ ol[type="1"] {
     right: -10%;
     width: 10%;
   }
+
   .outlets-container {
     gap: 1.5rem;
   }
+
   .outlet-preview {
     gap: 1rem;
     padding: 5rem 4rem;
@@ -1545,77 +1577,88 @@ ol[type="1"] {
   .outlet-preview:nth-of-type(odd) .outlet-preview__number::after {
     right: 0;
   }
+
   .outlet__title {
     font-size: 2.5rem;
   }
+
   #outlet_switcher {
     padding: 1rem 1.5rem;
   }
+
   .outlet-label {
     grid-column: 2/3;
     justify-self: right;
   }
+
   .outlet-label__no {
     justify-content: flex-end;
   }
+
   .outlet-hero-section {
     position: relative;
     grid-template-columns: 1fr auto;
     gap: 1.5rem;
     margin-top: 4rem;
   }
+
   .auto-grid-layout {
     grid-template-columns: auto 1fr;
   }
+
   .rooms-layout {
     grid-template-rows: 1fr 1fr;
   }
+
   .room-container__header {
     padding: 1.5rem 0;
   }
+
   .people-grid {
     gap: 5rem 3rem;
   }
+
   #hero_title {
     font-size: 3rem;
   }
+
   .feature__title {
     font-size: 1.5rem;
   }
+
   .features-grid {
     grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
   }
+
   .graph-container {
     width: 80%;
-    min-height: 60vh;
     justify-self: center;
   }
 }
 @media only screen and (min-width: 1280px) {
-  #home_page,
+  #home_page, .page,
-.page,
 .page-layout {
     grid-template-columns: 1fr 85vw 1fr;
   }
+
   .grid-3 {
     justify-content: center;
   }
   .grid-3 > .grid {
     width: 100%;
   }
+
   .rooms-layout {
     grid-template-columns: repeat(3, 1fr);
     grid-auto-flow: column;
   }
-  .link-container {
-    grid-template-columns: auto auto;
-  }
 }
 @media (any-hover: hover) {
   ::-webkit-scrollbar {
     width: 0.5rem;
     height: 0.5rem;
   }
+
   ::-webkit-scrollbar-thumb {
     background: rgba(var(--text-color), 0.3);
     border-radius: 1rem;
@@ -1623,6 +1666,7 @@ ol[type="1"] {
   ::-webkit-scrollbar-thumb:hover {
     background: rgba(var(--text-color), 0.5);
   }
+
   .page-link {
     cursor: pointer;
     transition: color 0.3s;
@@ -1633,9 +1677,11 @@ ol[type="1"] {
   .page-link:hover .icon {
     fill: var(--accent-color);
   }
+
   .floor__button:hover {
     background: var(--background-color);
   }
+
   .outlet-list__item .icon {
     fill: var(--accent-color);
     opacity: 0;
@@ -1647,6 +1693,7 @@ ol[type="1"] {
     opacity: 1;
     transform: translateX(0);
   }
+
   .intern__level {
     transition: transform 0.3s;
   }

assets/js/index.js

@@ -1,18 +1,5 @@
-
-"use strict";
-// Global variables
-const { html, render: renderElem } = uhtml;
-//Checks for internet connection status
-if (!navigator.onLine)
-  floGlobals.connectionErrorNotification = notify('There seems to be a problem connecting to the internet, Please check you internet connection.', 'error')
-window.addEventListener('offline', () => {
-  floGlobals.connectionErrorNotification = notify('There seems to be a problem connecting to the internet, Please check you internet connection.', 'error')
-})
-window.addEventListener('online', () => {
-  getRef('notification_drawer').remove(floGlobals.connectionErrorNotification)
-  notify('We are back online.', 'success')
-})
 const domRefs = {};
+
 function getRef(elementId) {
   if (!domRefs.hasOwnProperty(elementId)) {
     domRefs[elementId] = {
@@ -33,13 +20,70 @@ function getRef(elementId) {
 }
 
 function create(tagName, obj) {
-  const { className, text } = obj
+  const {className, text} = obj
   const elem = document.createElement(tagName)
   elem.className = className
   elem.textContent = text
   return elem
 }
 
+//Checks for internet connection status
+if (!navigator.onLine)
+  notify(
+    "There seems to be a problem connecting to the internet, Please check you internet connection.",
+    "error",
+    "",
+    true
+  );
+window.addEventListener("offline", () => {
+  notify(
+    "There seems to be a problem connecting to the internet, Please check you internet connection.",
+    "error",
+    true,
+    true
+  );
+});
+window.addEventListener("online", () => {
+  getRef("notification_drawer").clearAll();
+  notify("We are back online.", "success");
+});
+
+if (getRef("theme_switcher")) {
+  if (localStorage.theme === "dark") {
+    nightlight();
+    getRef("theme_switcher").checked = true;
+  } else if (localStorage.theme === "light"){
+    daylight();
+    getRef("theme_switcher").checked = false;
+  }
+  else {
+    if (window.matchMedia(`(prefers-color-scheme: dark)`).matches) {
+      nightlight();
+      getRef("theme_switcher").checked = true;
+    } else {
+      daylight();
+      getRef("theme_switcher").checked = false;
+    }
+  }
+
+  function daylight() {
+    document.body.setAttribute("data-theme", "light");
+  }
+
+  function nightlight() {
+    document.body.setAttribute("data-theme", "dark");
+  }
+  getRef("theme_switcher").addEventListener("change", function (e) {
+    if (this.checked) {
+      nightlight();
+      localStorage.setItem("theme", "dark");
+    } else {
+      daylight();
+      localStorage.setItem("theme", "light");
+    }
+  });
+}
+
 function setAttributes(el, attrs) {
   for (key in attrs) {
     el.setAttribute(key, attrs[key]);
@@ -77,21 +121,14 @@ function randomColor() {
 }
 
 //Function for displaying toast notifications. pass in error for mode param if you want to show an error.
-function notify(message, mode, options = {}) {
+function notify(message, mode, pinned, sound) {
-  let icon
+  if (mode === "error") console.error(message);
-  switch (mode) {
+  else console.log(message);
-    case 'success':
+  getRef("notification_drawer").push(message, mode, pinned);
-      icon = `<svg class="icon icon--success" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M10 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z"/></svg>`
+  if (navigator.onLine && sound) {
-      break;
+    getRef("notification_sound").currentTime = 0;
-    case 'error':
+    getRef("notification_sound").play();
-      icon = `<svg class="icon icon--error" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-7v2h2v-2h-2zm0-8v6h2V7h-2z"/></svg>`
-      options.pinned = true
-      break;
   }
-  if (mode === 'error') {
-    console.error(message)
-  }
-  return getRef("notification_drawer").push(message, { icon, ...options });
 }
 
 const currentYear = new Date().getFullYear();
@@ -212,40 +249,27 @@ const siteMap = [
     outlets: [
       {
         name: "Bitcoin Bonds",
-        outletLinks: [
+        url: "bitcoinbonds.html",
-          {
-            label: "Explore",
-            url: "bitcoinbonds.html",
-          }
-        ],
         brief: `Bondholders get a minimum guarantee of 13% interest per annum during the lock-in period or 50% of all Bitcoin price gains whichever is higher. It offers full capital protection if
         Bitcoin prices fall below acquisition price.`,
+        // isSold: true,
+        buyUrl: `purchase_room`,
         status: `We are servicing current customers only. A new Blockchain-based version of Bitcoin Bonds will be available soon.`
       },
       {
         name: `Bob's Fund`,
-        outletLinks: [
+        url: `bob'sfund.html`,
-          {
-            label: "Explore",
-            url: "bob'sfund.html",
-          }
-        ],
         brief: `Bobs Fund is a 20 year long term Bitcoin price linked product. Investors are entitled to 100% of Bitcoin price gains, but they must hold for 20 years.`,
+        // isSold: true,
+        buyUrl: `purchase_room`,
         status: `We are servicing current customers only. A new Blockchain-based version of Bob's Fund will be available soon.`
       },
       {
         name: "Initial Coin Offering",
-        outletLinks: [
+        url: "ico",
-          {
-            label: "Explore",
-            url: "ico.html",
-          },
-          {
-            label: "Buy",
-            url: "ico.html#purchase_room",
-          },
-        ],
         brief: `The Initial Coin Offering (ICO) of RanchiMall was launched in 2017. It was envisioned to sell 21 million tokens over 14 phases over 3 years.`,
+        isSold: true,
+        buyUrl: `purchase_room`
       },
     ],
   },
@@ -333,207 +357,191 @@ const siteMap = [
         }
       ],
     }, */
-  {
-    floor: 'Internship',
-    brief: ``,
-    outlets: [
-      {
-        name: "RanchiMall Internship Blockchain contract",
-        brief: `This outlet has the list of all active projects being executed through our internship program. Interns can apply or they can join active projects here.`,
-        outletLinks: [
-          {
-            label: "Explore",
-            url: "https://ranchimall.github.io/ribc/",
-            outbound: true,
-          }
-        ],
-      },
-      {
-        name: `Certificates`,
-        brief: `This outlet has access to blockchain verification to all of RanchiMall issued Internship & Employment  certificates`,
-        outletLinks: [
-          {
-            label: "Certificate list",
-            url: "https://www.ranchimall.net/certify/",
-            outbound: true,
-          },
-          {
-            label: "Verify Certificate",
-            url: "verify.html",
-          },
-          {
-            label: "See Intern Payments",
-            url: "https://ranchimall.github.io/ribcpayments/",
-            outbound: true,
-          },
-        ],
-      }
-    ],
-  }, {
-    floor: 'El Salvador',
-    brief: ``,
-    outlets: [
-      {
-        name: 'Token Room',
-        brief: `Token Room offers tokenized room rentals in El Salvador's Bitcoin Beach, El Zonte. Buy room nights without specifying dates and receive tokens in return. As the tokens appreciate, you can get more room nights or even resell your nights to other buyers. Join the Bitcoin revolution with Token Room.`,
-        outletLinks: [
-          {
-            label: "Explore",
-            url: "https://ranchimall.github.io/reale/",
-            outbound: true,
-          }
-        ],
-      }
-    ]
-  }
 ];
+// templates
+
+const bitBondRowTemplate = document.createElement('template')
+bitBondRowTemplate.innerHTML = `
+<div class="bit-bond-series__row grid">
+    <div class="grid">
+        <h5 class="label color-0-8 weight-500">Series</h5>
+        <h3 class="value original-value"></h3>
+    </div>
+    <div class="flex align-center space-between">
+        <div class="grid">
+            <h5 class="label color-0-8 weight-500">Invested</h5>
+            <h3 class="value">$100</h3>
+        </div>
+        <div class="grid justify-right text-align-right">
+            <h5 class="label color-0-8 weight-500">Current value</h5>
+            <h3 class="value current-value" style="color: var(--green)"></h3>
+            <div class="flex align-center">
+                <svg class="icon up-arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M13 7.828V20h-2V7.828l-5.364 5.364-1.414-1.414L12 4l7.778 7.778-1.414 1.414L13 7.828z"/></svg>
+                <span class="percent-gain"></span>
+                <span class="time-elapsed"></span>
+            </div>
+        </div>
+    </div>
+
+</div>
+`
+
+const bobsFundRowTemplate = document.createElement('template')
+bobsFundRowTemplate.innerHTML = `
+<div class="bob-fund__row grid">
+    <div class="grid">
+        <h5 class="label color-0-8 weight-500">FLO ID</h5>
+        <h3 class="person__name breakable"></h3>
+    </div>
+    <div class="flex">
+        <div class="grid">
+            <h5 class="label color-0-8 weight-500">Invested</h5>
+            <h3 class="value original-value"></h3>
+        </div>
+        <div class="grid justify-right text-align-right">
+            <h4 class="label color-0-8 weight-500">Current value</h4>
+            <h3 class="value current-value" style="color: var(--green)"></h3>
+            <div class="flex align-center">
+              <svg class="icon up-arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M13 7.828V20h-2V7.828l-5.364 5.364-1.414-1.414L12 4l7.778 7.778-1.414 1.414L13 7.828z"/></svg>
+              <span class="percent-gain"></span>
+              <span class="time-elapsed"></span>
+            </div>
+        </div>
+    </div>
+</div>
+`
+
+
+const floorListitemTemplate = document.createElement('template')
+floorListitemTemplate.innerHTML = `
+<li class="floor_list__item">
+  <button class="floor_list__header floor__button">
+      <h2 class="h2 floor-num">Floor</h2>
+      <h3 class="h3 accent-color"></h3>
+  </button>
+  <ul class="outlet-list grid"></ul>
+</li>
+`
+
+const outletListitemTemplate = document.createElement('template')
+outletListitemTemplate.innerHTML = `
+  <li class="outlet-list__item interact">
+    <a class="grid align-center flow-column gap-1 justify-start">
+      <div>
+        <h4 class="outlet-title"></h4>
+        <p class="outlet-brief"></p>
+      </div>
+      <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z"/></svg>
+    </a>
+  </li>
+`
+
 
-function formatAmount(amount, currency = 'USD') {
-  return amount.toLocaleString(currency === 'USD' ? 'en-US' : 'en-IN', { style: 'currency', currency });
-}
 
 
 const render = {
   bitBondRow(obj) {
     const { series, currentValue, timeElapsed, percentGain } = obj;
-    return html`
+    const row = bitBondRowTemplate.content.cloneNode(true);
-            <div class="bit-bond-series__row grid">
+    row.querySelector(".original-value").textContent = series.toLocaleString(`en-US`, { style: 'currency', currency: 'USD' });
-                <div class="grid">
+    row.querySelector(".current-value").textContent = currentValue.toLocaleString(`en-US`, { style: 'currency', currency: 'USD' });
-                    <h5 class="label color-0-8 weight-500">Series</h5>
+    row.querySelector(".time-elapsed").textContent = `In last ${timeElapsed} years`;
-                    <h3 class="value original-value">${formatAmount(series)}</h3>
+    row.querySelector(".percent-gain").textContent = `${percentGain}%`;
-                </div>
+    return row;
-                <div class="flex align-center space-between">
-                    <div class="grid">
-                        <h5 class="label color-0-8 weight-500">Invested</h5>
-                        <h3 class="value">$100</h3>
-                    </div>
-                    <div class="grid justify-right text-align-right">
-                        <h5 class="label color-0-8 weight-500">Current value</h5>
-                        <h3 class="value current-value" style="color: var(--green)">${formatAmount(currentValue)}</h3>
-                        <div class="flex align-center">
-                            <svg class="icon up-arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M13 7.828V20h-2V7.828l-5.364 5.364-1.414-1.414L12 4l7.778 7.778-1.414 1.414L13 7.828z"/></svg>
-                            <span class="percent-gain">${`${percentGain}%`}</span>
-                            <span class="time-elapsed">${`In last ${timeElapsed} years`}</span>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        `;
   },
   bobFundRow(obj) {
-    console.log(obj);
+    const { investorName, invested, floId, currentValue, timeElapsed, gain } = obj;
-    const { invested, floId, currentValue, timeElapsed, gain } = obj;
+    const row = bobsFundRowTemplate.content.cloneNode(true);
-    return html`
+    row.querySelector(".person__name").textContent = floId;
-            <div class="bob-fund__row grid">
+    row.querySelector(".original-value").textContent = `${invested.toLocaleString(`en-IN`, { style: 'currency', currency: 'INR' })}`;
-                <div class="grid">
+    row.querySelector(".current-value").textContent = `${currentValue.toLocaleString(`en-IN`, { style: 'currency', currency: 'INR' })}`;
-                    <h5 class="label color-0-8 weight-500">FLO ID</h5>
+    row.querySelector(".percent-gain").textContent = `${gain}%`;
-                    <h3 class="person__name breakable">${floId}</h3>
+    row.querySelector(".time-elapsed").textContent = `In last ${timeElapsed} years`;
-                </div>
+    return row;
-                <div class="flex">
-                    <div class="grid">
-                        <h5 class="label color-0-8 weight-500">Invested</h5>
-                        <h3 class="value original-value">${formatAmount(invested, 'INR')}</h3>
-                    </div>
-                    <div class="grid justify-right text-align-right">
-                        <h4 class="label color-0-8 weight-500">Current value</h4>
-                        <h3 class="value current-value" style="color: var(--green)">${formatAmount(currentValue, 'INR')}</h3>
-                        <div class="flex align-center">
-                            <svg class="icon up-arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M13 7.828V20h-2V7.828l-5.364 5.364-1.414-1.414L12 4l7.778 7.778-1.414 1.414L13 7.828z"/></svg>
-                            <span class="percent-gain">${`${gain}%`}</span>
-                            <span class="time-elapsed">${`In last ${timeElapsed} years`}</span>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        `;
   },
   icoInvestorRow(obj, options) {
     const { extension, investorName, bio, contribution } = obj;
     const { thumbnail } = options;
+    const row = getRef("ico_investor_row").content.cloneNode(true);
+    const card = row.querySelector(".person-card");
     const folder = thumbnail ? "investors-thumbnail" : "investors";
-    return html`
+    const investorImage = row.querySelector(".person__image");
-        <div class=${`person-card investor-card grid gap-1-5 ${thumbnail ? 'person-card--small' : 'person-card--big'}`} >
+    if (thumbnail) card.classList.add("person-card--small");
-            <img class="person__image" src=${`assets/${folder}/${investorName}.${extension}`} alt=${`${investorName} profile picture`} loading="lazy">
+    else card.classList.add("person-card--big");
-            <div class="grid">
+    investorImage.src = `assets/${folder}/${investorName}.${extension}`;
-                <h3 class="person__name value capitalize">${investorName}</h3>
+    investorImage.setAttribute("alt", `${investorName} profile picture`);
-                <p class="investor__bio color-0-8">${bio}</p>
+    row.querySelector(".person__name").textContent = investorName;
-            </div>
+    row.querySelector(".investor__bio").textContent = bio;
-            <div class="grid investor__contribution-container">
+    row.querySelector(".investor__contribution").textContent = contribution;
-                <p class="investor__contribution weight-700">${contribution}</p>
+    return row;
-            </div>
+  },
-        </div>
+  internCard(obj) {
-    `;
+    const { extension, internName, level, floId, project } = obj;
+    const card = getRef("intern_card_template").content.cloneNode(true).firstElementChild;
+    const investorImage = card.querySelector(".person__image");
+    investorImage.src = `assets/interns/${internName}.${extension}`;
+    investorImage.setAttribute("alt", `${internName} profile picture`);
+    card.querySelector(".intern__level").classList.add(level.toLowerCase())
+    card.querySelector(".intern__level").textContent = level;
+    card.querySelector(".person__name").textContent = internName;
+    card.querySelector(".intern-flo-id").textContent = floId;
+    card.querySelector(".intern__project").textContent = project;
+    return card;
   },
-  //   internCard(obj) {
-  //     const { extension, internName, level, floId, project } = obj;
-  //     const card = getRef("intern_card_template").content.cloneNode(true).firstElementChild;
-  //     const investorImage = card.querySelector(".person__image");
-  //     investorImage.src = `assets/interns/${internName}.${extension}`;
-  //     investorImage.setAttribute("alt", `${internName} profile picture`);
-  //     card.querySelector(".intern__level").classList.add(level.toLowerCase())
-  //     card.querySelector(".intern__level").textContent = level;
-  //     card.querySelector(".person__name").textContent = internName;
-  //     card.querySelector(".intern-flo-id").textContent = floId;
-  //     card.querySelector(".intern__project").textContent = project;
-  //     return card;
-  //   },
   floorLabel(floorNumber, offsetTop) {
-    return html`
+    const floorLabel = getRef("floor_indicator_template").content.cloneNode(
-        <div class="floor-label interact" style=${`top: ${offsetTop}px`} data-target=${`floor_${floorNumber}`}>
+      true
-            <span class="floor-circle"></span>
+    ).firstElementChild;
-        </div>
+    floorLabel.setAttribute("style", `top: ${offsetTop}px`);
-    `;
+    floorLabel.dataset.target = `floor_${floorNumber}`;
+    return floorLabel;
   },
   outletListItem(outletObj) {
-    const { name, brief, outletLinks } = outletObj
+    const { name, brief, url } = outletObj
-    return html`
+    const li = outletListitemTemplate.content.cloneNode(true).firstElementChild
-      <li class="outlet-list__item interact">
+    li.querySelector('a').href = `${url}`
-        <a href=${outletLinks[0].url} class="grid align-center flow-column gap-1 justify-start">
+    li.querySelector('.outlet-title').textContent = name
-          <div>
+    // li.querySelector('.outlet-brief').textContent = brief ? brief : ''
-            <h4 class="outlet-title">${name}</h4>
+    return li
-            ${brief ? html`<p class="outlet-brief">${brief}</p>` : ''}
-          </div>
-          <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z"/></svg>
-        </a>
-      </li>
-    `;
   },
-  floorListItem(floorObj, index) {
+  floorListitem(floorObj, index) {
     const { floor, outlets } = floorObj
-    const li = html`
+    const li = floorListitemTemplate.content.cloneNode(true).firstElementChild
-    <li class="floor_list__item">
+    li.firstElementChild.dataset.target = `floor_${index + 1}`;
-      <button class="floor_list__header floor__button" data-target=${`floor_${index + 1}`}>
+    li.querySelector('.h3').textContent = floor
-          <h2 class="h2 floor-num">${`floor ${index + 1}`}</h2>
+    li.querySelector('.floor-num').textContent = `floor ${index + 1}`
-          <h3 class="h3 accent-color">${floor}</h3>
+
-      </button>
+    const h3 = document.createElement('h3')
-      <ul class="outlet-list grid">
+    h3.classList.add('h3', 'weight-900', 'floor-list__outlet')
-        <h3 class="h3 weight-900 floor-list__outlet">Outlets</h3>
+    h3.textContent = 'Outlets'
-        ${outlets.map(outlet => render.outletListItem(outlet))}
+
-      </ul>
+    const frag = document.createDocumentFragment()
-    </li>
+    outlets.forEach(outlet => frag.append(render.outletListItem(outlet)))
-    `;
+
+    li.querySelector('.outlet-list').append(h3, frag)
     return li
   },
   outletSwitcherButton(outletObj, activeOutlet) {
-    const { name, outletLinks } = outletObj
+    const { name, url } = outletObj
     const button = document.createElement('a')
     button.classList.add('outlet_switcher__button')
-    if (activeOutlet === outletLinks[0].url) {
+    if (activeOutlet === url) {
       button.classList.add('outlet_switcher__button--active')
     }
-    button.href = outletLinks[0].url
+    button.href = url
     button.textContent = name
     return button;
   },
   statusBanner(bannerMsg) {
-    return html.node`
+    const banner = document.createElement('section')
-        <section class="banner">
+    banner.classList.add('banner')
-            <p class="banner__text">${bannerMsg}</p>
+    banner.innerHTML = `
-            <button class="close-button" onclick="this.parentNode.remove()">
+      <p class="banner__text">${bannerMsg}</p>
-                <svg class="icon icon-only close-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></svg>
+      <button class="close-button" onclick="this.parentNode.remove()">
-            </button>
+          <svg class="icon icon-only close-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></svg>
-        </section>
+      </button>
     `
+    return banner
   }
 };
 
@@ -731,23 +739,44 @@ function hideOutletSwitcher() {
 
 let currentPage
 function renderSiteMap() {
-  getRef('floor_list').append(html.node`${siteMap.map((floor, index) => render.floorListItem(floor, index))}`)
+  const frag = document.createDocumentFragment()
+  siteMap.forEach((floor, index) => frag.append(render.floorListitem(floor, index)))
+  getRef('floor_list').append(frag)
   const pathArray = location.pathname.split('/')
-  siteMap.forEach((floor) => {
+  for (floor of siteMap) {
-    const matchedOutlet = floor.outlets.find(outlet => pathArray[pathArray.length - 1].includes(outlet.outletLinks[0].url))
+    for (outlet of floor.outlets) {
-    if (matchedOutlet)
+      currentPage = pathArray[pathArray.length - 1]
-      renderFloorOutlets(floor, matchedOutlet.outletLinks[0].url)
+      if (pathArray[pathArray.length - 1].includes(outlet.url)) {
-  })
+        renderFloorOutlets(floor, outlet.url)
+        break;
+      }
+    }
+  }
 }
 renderSiteMap()
 
 function renderFloorOutlets(floorObj, activeOutlet) {
   const { floor, outlets } = floorObj
+  console.log(floor)
   const frag = document.createDocumentFragment()
   outlets.forEach(outlet => frag.append(render.outletSwitcherButton(outlet, activeOutlet)))
   getRef('outlet_switcher__outlet_container').append(frag)
   getRef('outlet_switcher__floor_num').textContent = floor
-  const outletNum = outlets.findIndex(o => o.outletLinks[0].url === activeOutlet)
+  let floorNum = -1
+  let outletNum = -1
+  for (let i = 0; i < siteMap.length; i++) {
+    if (siteMap[i].floor === floor) {
+      floorNum = i
+      break
+    }
+  }
+  for (let i = 0; i < outlets.length; i++) {
+    if (outlets[i].url === activeOutlet) {
+      outletNum = i
+      break
+    }
+  }
+  // document.querySelector('.outlet-label__name').textContent = floorNum > -1 ? `Floor ${floorNum + 1} outlet ${outletNum + 1}` : ''
   document.querySelector('.outlet-label__no').textContent = outletNum + 1
   document.querySelector('.outlet-label__no').dataset.number = outletNum + 1
   if (outlets[outletNum].hasOwnProperty('status')) {
@@ -871,10 +900,10 @@ function showRoom(roomId, animate = false) {
     roomContainer.classList.remove('hide-completely')
     if (animate && !isRoomOpen) {
       roomContainer.animate(slideInDown, animeInOptions)
-        .onfinish = () => {
+      .onfinish = () => {
-          getRef('expanding_tile').classList.add('hide-completely')
+        getRef('expanding_tile').classList.add('hide-completely')
-          isRoomOpen = true
+        isRoomOpen = true
-        }
+      }
     }
     else {
       isRoomOpen = true
@@ -918,7 +947,7 @@ function renderRoomShorcuts() {
     if (room.href.split('#').pop() !== window.location.hash.split('#').pop()) {
       const clone = room.cloneNode(true)
       clone.classList.remove('room-tile', 'room-tile--main')
-      if (clone.querySelector('img, svg, #performance_preview'))
+      if(clone.querySelector('img, svg, #performance_preview'))
         clone.querySelectorAll('img, svg, #performance_preview').forEach(elem => elem.remove())
       clone.classList.add('room-shortcut')
       frag.append(clone)
@@ -935,19 +964,19 @@ const heroTitleObserver = new IntersectionObserver(entries => {
   entries.forEach(entry => {
     if (entry.isIntersecting) {
       getRef('room_title').animate(slideOutDown, animeInOptions)
-        .onfinish = () => {
+      .onfinish = () => {
-          getRef('room_title').classList.add('hide-completely')
+        getRef('room_title').classList.add('hide-completely')
-        }
+      }
     }
     else {
-      if (isRoomOpen)
+        if (isRoomOpen)
-        getRef('room_title').classList.remove('hide-completely')
+      getRef('room_title').classList.remove('hide-completely')
       getRef('room_title').animate(slideInUp, animeInOptions)
     }
   })
 },
   {
-    threshold: 1
+  threshold: 1
   }
 )
 
@@ -955,6 +984,6 @@ if (getRef('hero_title')) {
   heroTitleObserver.observe(getRef('hero_title'))
 }
 
-function getRandom(min, max) {
+function getRandom(min, max){
   return Math.floor(Math.random() * (max - min + 1) + min);
 }

bitcoinbonds.html

@@ -30,22 +30,20 @@
     </section>
     <header id="main_header" class="grid align-center full-bleed">
         <button id="elevator_button" class="button" onclick="showSiteMap()">
-            <svg class="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <svg class="icon button__icon--left" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 3L16.3301 10.5H7.66987L12 3Z"/><path d="M12 21L7.66987 13.5L16.3301 13.5L12 21Z"/></svg>
-                <path d="M12 3L16.3301 10.5H7.66987L12 3Z" />
-                <path d="M12 21L7.66987 13.5L16.3301 13.5L12 21Z" />
-            </svg>
             <span class="button__label">
                 Elevator
             </span>
         </button>
         <a href="index.html" class="main-logo flex align-center page-link justify-self-center" data-target="home_page">
-            <svg id="main_header__logo" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+            <svg id="main_header__logo" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.46,21.32C20,19.78,18.6,18.59,15.3,17a12.67,12.67,0,0,1-2.64-1.56,4.27,4.27,0,0,1-.79-1,2.6,2.6,0,0,1,0-1.41c.24-.68.49-1,2.43-2.85a7.18,7.18,0,0,0,2.09-2.92,4.25,4.25,0,0,0,0-1.77,6.52,6.52,0,0,0-2.85-3.11c-.56-.36-.81-.4-.81-.15a2.33,2.33,0,0,1-.18.45L12.4,3l-.53-.36c-.28-.21-.64-.41-.77-.49s-.46-.11-.46,0a6.21,6.21,0,0,1-.37.83s-.08,0-.17-.08c-1.15-.83-1.64-1-1.64-.73A7.33,7.33,0,0,1,7.7,3.65C6.48,5.68,5.24,6.7,4,6.7c-.56,0-.54,0-.37.64s.2.58.68.43a3.37,3.37,0,0,0,1.09-.54.86.86,0,0,1,.3-.17,1.34,1.34,0,0,1,.13.39.79.79,0,0,0,.17.4A3.5,3.5,0,0,0,7.37,7.3L7.8,7l.09.34c.12.45.19.51.62.39a4.25,4.25,0,0,0,2.17-1.54l.38-.45,0,.39A5.92,5.92,0,0,1,8.89,9.54L7.67,10.71c-2,1.93-1.89,3.51.37,5a27.41,27.41,0,0,0,2.89,1.51c.17.07.62.32,1,.54C14,19,15,20.23,15,21.48a2,2,0,0,0,0,.49h0c0,.05,0,.05.56-.1a1.89,1.89,0,0,0,.53-.21,2.41,2.41,0,0,0-.34-1.15,7.05,7.05,0,0,0-1.68-1.77,21.91,21.91,0,0,0-3.2-1.83A9.53,9.53,0,0,1,8.16,15.2a2.18,2.18,0,0,1-.74-1.55C7.42,12.79,7.86,12,9,11c1.77-1.64,2.45-2.45,2.92-3.55a2.28,2.28,0,0,0,.26-1.26A2,2,0,0,0,12,5.06l-.2-.45L12,4.3l.28-.49.09-.18L12.6,4a3.69,3.69,0,0,1,.61,1.76A3.47,3.47,0,0,1,12.94,7l-.09.25s-.21.37-.41.69A17.78,17.78,0,0,1,9.91,10.6c-1.07,1-1.43,1.62-1.47,2.47a2.05,2.05,0,0,0,.7,1.73,10.47,10.47,0,0,0,3.28,2.08c2.28,1.13,3.26,1.81,4,2.73a2.94,2.94,0,0,1,.74,1.75,1.26,1.26,0,0,0,.09.57.48.48,0,0,0,.26,0l.51-.13.29-.08,0-.28c-.13-1-1-2-2.47-3a25.52,25.52,0,0,0-3.26-1.77,8.59,8.59,0,0,1-2.23-1.43,2.09,2.09,0,0,1-.5-2.62c.26-.53.5-.83,2.35-2.6,1.51-1.45,2.15-2.58,2.15-3.79A3.67,3.67,0,0,0,13,3.48a3,3,0,0,1-.4-.42A1.85,1.85,0,0,1,13,2.33a6.74,6.74,0,0,1,1.83,1.73,2.62,2.62,0,0,1,.47,1.68,3,3,0,0,1-.55,1.84c-.45.78-.79,1.14-2.67,2.93a5.56,5.56,0,0,0-1.3,1.64,1.77,1.77,0,0,0-.21,1,1.76,1.76,0,0,0,.19.92,6.28,6.28,0,0,0,2.9,2.34,21.6,21.6,0,0,1,3.66,2c1.35,1,2,2,2,3a1.06,1.06,0,0,0,.05.47,2.83,2.83,0,0,0,1-.24C20.56,21.68,20.56,21.66,20.46,21.32ZM7.29,6.4h0a2.23,2.23,0,0,1-.9.28L6,6.72l.43-.53a15.22,15.22,0,0,0,1.89-3,3.52,3.52,0,0,1,.38-.67c.07-.08.49.2,1,.64l.39.35L9.66,4A6.7,6.7,0,0,1,7.29,6.4Zm3.58-1.11A5.8,5.8,0,0,1,9.25,6.51h0a3.3,3.3,0,0,1-.74.17l-.35,0,.39-.49a15.64,15.64,0,0,0,1.32-2,4.63,4.63,0,0,1,.28-.49c.06-.08.33.26.57.77l.28.57Zm1-1.4a1.63,1.63,0,0,1-.28.4A6.63,6.63,0,0,1,11,3.72l-.53-.56.12-.29c.2-.49.24-.51.64-.19a5.57,5.57,0,0,1,.85.78A2.78,2.78,0,0,1,11.87,3.89Z"/></svg>
-                <path
-                    d="M20.46,21.32C20,19.78,18.6,18.59,15.3,17a12.67,12.67,0,0,1-2.64-1.56,4.27,4.27,0,0,1-.79-1,2.6,2.6,0,0,1,0-1.41c.24-.68.49-1,2.43-2.85a7.18,7.18,0,0,0,2.09-2.92,4.25,4.25,0,0,0,0-1.77,6.52,6.52,0,0,0-2.85-3.11c-.56-.36-.81-.4-.81-.15a2.33,2.33,0,0,1-.18.45L12.4,3l-.53-.36c-.28-.21-.64-.41-.77-.49s-.46-.11-.46,0a6.21,6.21,0,0,1-.37.83s-.08,0-.17-.08c-1.15-.83-1.64-1-1.64-.73A7.33,7.33,0,0,1,7.7,3.65C6.48,5.68,5.24,6.7,4,6.7c-.56,0-.54,0-.37.64s.2.58.68.43a3.37,3.37,0,0,0,1.09-.54.86.86,0,0,1,.3-.17,1.34,1.34,0,0,1,.13.39.79.79,0,0,0,.17.4A3.5,3.5,0,0,0,7.37,7.3L7.8,7l.09.34c.12.45.19.51.62.39a4.25,4.25,0,0,0,2.17-1.54l.38-.45,0,.39A5.92,5.92,0,0,1,8.89,9.54L7.67,10.71c-2,1.93-1.89,3.51.37,5a27.41,27.41,0,0,0,2.89,1.51c.17.07.62.32,1,.54C14,19,15,20.23,15,21.48a2,2,0,0,0,0,.49h0c0,.05,0,.05.56-.1a1.89,1.89,0,0,0,.53-.21,2.41,2.41,0,0,0-.34-1.15,7.05,7.05,0,0,0-1.68-1.77,21.91,21.91,0,0,0-3.2-1.83A9.53,9.53,0,0,1,8.16,15.2a2.18,2.18,0,0,1-.74-1.55C7.42,12.79,7.86,12,9,11c1.77-1.64,2.45-2.45,2.92-3.55a2.28,2.28,0,0,0,.26-1.26A2,2,0,0,0,12,5.06l-.2-.45L12,4.3l.28-.49.09-.18L12.6,4a3.69,3.69,0,0,1,.61,1.76A3.47,3.47,0,0,1,12.94,7l-.09.25s-.21.37-.41.69A17.78,17.78,0,0,1,9.91,10.6c-1.07,1-1.43,1.62-1.47,2.47a2.05,2.05,0,0,0,.7,1.73,10.47,10.47,0,0,0,3.28,2.08c2.28,1.13,3.26,1.81,4,2.73a2.94,2.94,0,0,1,.74,1.75,1.26,1.26,0,0,0,.09.57.48.48,0,0,0,.26,0l.51-.13.29-.08,0-.28c-.13-1-1-2-2.47-3a25.52,25.52,0,0,0-3.26-1.77,8.59,8.59,0,0,1-2.23-1.43,2.09,2.09,0,0,1-.5-2.62c.26-.53.5-.83,2.35-2.6,1.51-1.45,2.15-2.58,2.15-3.79A3.67,3.67,0,0,0,13,3.48a3,3,0,0,1-.4-.42A1.85,1.85,0,0,1,13,2.33a6.74,6.74,0,0,1,1.83,1.73,2.62,2.62,0,0,1,.47,1.68,3,3,0,0,1-.55,1.84c-.45.78-.79,1.14-2.67,2.93a5.56,5.56,0,0,0-1.3,1.64,1.77,1.77,0,0,0-.21,1,1.76,1.76,0,0,0,.19.92,6.28,6.28,0,0,0,2.9,2.34,21.6,21.6,0,0,1,3.66,2c1.35,1,2,2,2,3a1.06,1.06,0,0,0,.05.47,2.83,2.83,0,0,0,1-.24C20.56,21.68,20.56,21.66,20.46,21.32ZM7.29,6.4h0a2.23,2.23,0,0,1-.9.28L6,6.72l.43-.53a15.22,15.22,0,0,0,1.89-3,3.52,3.52,0,0,1,.38-.67c.07-.08.49.2,1,.64l.39.35L9.66,4A6.7,6.7,0,0,1,7.29,6.4Zm3.58-1.11A5.8,5.8,0,0,1,9.25,6.51h0a3.3,3.3,0,0,1-.74.17l-.35,0,.39-.49a15.64,15.64,0,0,0,1.32-2,4.63,4.63,0,0,1,.28-.49c.06-.08.33.26.57.77l.28.57Zm1-1.4a1.63,1.63,0,0,1-.28.4A6.63,6.63,0,0,1,11,3.72l-.53-.56.12-.29c.2-.49.24-.51.64-.19a5.57,5.57,0,0,1,.85.78A2.78,2.78,0,0,1,11.87,3.89Z" />
-            </svg>
             <h4 class="h4 header__company-name">RanchiMall</h4>
         </a>
-        <theme-toggle></theme-toggle>
+        <label class="theme-switcher" title="Change theme">
+            <input id="theme_switcher" class="theme-switcher__checkbox" type="checkbox">
+            <svg class="icon moon-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M10 6a8 8 0 0 0 11.955 6.956C21.474 18.03 17.2 22 12 22 6.477 22 2 17.523 2 12c0-5.2 3.97-9.474 9.044-9.955A7.963 7.963 0 0 0 10 6zm-6 6a8 8 0 0 0 8 8 8.006 8.006 0 0 0 6.957-4.045c-.316.03-.636.045-.957.045-5.523 0-10-4.477-10-10 0-.321.015-.64.045-.957A8.006 8.006 0 0 0 4 12zm14.164-9.709L19 2.5v1l-.836.209a2 2 0 0 0-1.455 1.455L16.5 6h-1l-.209-.836a2 2 0 0 0-1.455-1.455L13 3.5v-1l.836-.209A2 2 0 0 0 15.29.836L15.5 0h1l.209.836a2 2 0 0 0 1.455 1.455zm5 5L24 7.5v1l-.836.209a2 2 0 0 0-1.455 1.455L21.5 11h-1l-.209-.836a2 2 0 0 0-1.455-1.455L18 8.5v-1l.836-.209a2 2 0 0 0 1.455-1.455L20.5 5h1l.209.836a2 2 0 0 0 1.455 1.455z"/></svg>
+            <svg class="icon sun-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636 5.636 7.05 3.515 4.93zM16.95 18.364l1.414-1.414 2.121 2.121-1.414 1.414-2.121-2.121zm2.121-14.85l1.414 1.415-2.121 2.121-1.414-1.414 2.121-2.121zM5.636 16.95l1.414 1.414-2.121 2.121-1.414-1.414 2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z"/></svg>
+        </label>
     </header>
     <div id="outlet_switcher" class="grid gap-1-5 hide-completely">
         <span id="outlet_switcher__floor_num" class="weight-500 color-0-8"></span>
@@ -57,12 +55,16 @@
                 <h2 class="h2 weight-700 margin-bottom-2r">Bitcoin Bonds</h2>
                 <h4 class="margin-bottom-1r">How does it work?</h4>
                 <p class="margin-bottom-3r">
-                    Bondholders get a minimum guarantee of 13% interest per annum during the lock-in period or 50% of
+                    Bondholders get a minimum guarantee of 13% interest per annum during the lock-in period or 50% of all Bitcoin price gains whichever is higher.
-                    all Bitcoin price gains whichever is higher.
                     It offers full capital protection if Bitcoin prices fall below acquisition price.
                 </p>
             </div>
             <button class="outlet-label">
+<!--                 <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+                    <path fill="none" d="M0 0h24v24H0z" />
+                    <path
+                        d="M21 13.242V20h1v2H2v-2h1v-6.758A4.496 4.496 0 0 1 1 9.5c0-.827.224-1.624.633-2.303L4.345 2.5a1 1 0 0 1 .866-.5H18.79a1 1 0 0 1 .866.5l2.702 4.682A4.496 4.496 0 0 1 21 13.242zm-2 .73a4.496 4.496 0 0 1-3.75-1.36A4.496 4.496 0 0 1 12 14.001a4.496 4.496 0 0 1-3.25-1.387A4.496 4.496 0 0 1 5 13.973V20h14v-6.027zM5.789 4L3.356 8.213a2.5 2.5 0 0 0 4.466 2.216c.335-.837 1.52-.837 1.856 0a2.5 2.5 0 0 0 4.644 0c.335-.837 1.52-.837 1.856 0a2.5 2.5 0 1 0 4.457-2.232L18.21 4H5.79z" />
+                </svg> -->
                 <span class="outlet-label__name">Outlet</span>
                 <span class="outlet-label__no"></span>
                 <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
@@ -79,38 +81,23 @@
             <a class="room-tile room-tile--main" href="#performance_room">
                 <div class="tile-content">
                     <div class="grid flow-column gap-1 justify-start align-center">
-                        <svg class="room-tile__icon" id="b23be00b-0d64-4bed-9d99-6f7aaf421af4" data-name="Layer 1"
+                        <svg class="room-tile__icon" id="b23be00b-0d64-4bed-9d99-6f7aaf421af4" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M44.53,26.6a7.17,7.17,0,1,1,5.07-2.1h0A7.16,7.16,0,0,1,44.53,26.6Zm0-11.47a4.31,4.31,0,1,0,3,1.26A4.31,4.31,0,0,0,44.53,15.13Z"/><path d="M62.58,1.38A4.7,4.7,0,0,0,58.35.09L45.09,2.66a14.61,14.61,0,0,0-7.56,4L19.92,24.29l-9,2.23a8.75,8.75,0,0,0-4.1,2.31L.46,35.2a1.43,1.43,0,0,0,1,2.44h.08L10,37.2l1.67,1.68L6.85,41.23a1.43,1.43,0,0,0-.38,2.3l14,14a1.44,1.44,0,0,0,1,.42l.24,0a1.47,1.47,0,0,0,1.05-.78l2.35-4.79,1.61,1.6-.45,8.58a1.43,1.43,0,0,0,.85,1.38,1.51,1.51,0,0,0,.58.12,1.44,1.44,0,0,0,1-.42l6.37-6.36a8.75,8.75,0,0,0,2.31-4.1l2.23-9,17.7-17.7a14.5,14.5,0,0,0,4-7.56L63.87,5.61A4.7,4.7,0,0,0,62.58,1.38ZM21,54.05,9.91,42.92,13.78,41,23,50.18ZM8.85,30.86a5.82,5.82,0,0,1,2.76-1.56L16,28.21,10.23,34l-.37.37-4.74.25ZM34.58,52.43A5.89,5.89,0,0,1,33,55.19l-3.74,3.73.25-4.74,6.13-6.13Zm20.68-28-18,18h0l-9,9-7.85-7.86-5.31-5.3h0l-2.55-2.54,27-27a11.72,11.72,0,0,1,5.38-3L58.3,19A11.64,11.64,0,0,1,55.26,24.41Zm5.8-19.34L59,15.68,48.28,5,58.89,2.9a1.85,1.85,0,0,1,2.17,2.17Z"/><path d="M2.63,62.76a1.41,1.41,0,0,1-1-.41,1.44,1.44,0,0,1,0-2l8.12-8.13a1.44,1.44,0,0,1,2,2L3.64,62.35A1.42,1.42,0,0,1,2.63,62.76Z"/><path d="M10.75,62.76a1.43,1.43,0,0,1-1-2.44l4.06-4.07a1.43,1.43,0,0,1,2,2l-4.06,4.06A1.43,1.43,0,0,1,10.75,62.76Z"/><path d="M2.63,54.64a1.43,1.43,0,0,1-1-2.44l4.07-4.06a1.43,1.43,0,0,1,2,2L3.65,54.22A1.44,1.44,0,0,1,2.63,54.64Z"/></svg>
-                            xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
-                            <path
-                                d="M44.53,26.6a7.17,7.17,0,1,1,5.07-2.1h0A7.16,7.16,0,0,1,44.53,26.6Zm0-11.47a4.31,4.31,0,1,0,3,1.26A4.31,4.31,0,0,0,44.53,15.13Z" />
-                            <path
-                                d="M62.58,1.38A4.7,4.7,0,0,0,58.35.09L45.09,2.66a14.61,14.61,0,0,0-7.56,4L19.92,24.29l-9,2.23a8.75,8.75,0,0,0-4.1,2.31L.46,35.2a1.43,1.43,0,0,0,1,2.44h.08L10,37.2l1.67,1.68L6.85,41.23a1.43,1.43,0,0,0-.38,2.3l14,14a1.44,1.44,0,0,0,1,.42l.24,0a1.47,1.47,0,0,0,1.05-.78l2.35-4.79,1.61,1.6-.45,8.58a1.43,1.43,0,0,0,.85,1.38,1.51,1.51,0,0,0,.58.12,1.44,1.44,0,0,0,1-.42l6.37-6.36a8.75,8.75,0,0,0,2.31-4.1l2.23-9,17.7-17.7a14.5,14.5,0,0,0,4-7.56L63.87,5.61A4.7,4.7,0,0,0,62.58,1.38ZM21,54.05,9.91,42.92,13.78,41,23,50.18ZM8.85,30.86a5.82,5.82,0,0,1,2.76-1.56L16,28.21,10.23,34l-.37.37-4.74.25ZM34.58,52.43A5.89,5.89,0,0,1,33,55.19l-3.74,3.73.25-4.74,6.13-6.13Zm20.68-28-18,18h0l-9,9-7.85-7.86-5.31-5.3h0l-2.55-2.54,27-27a11.72,11.72,0,0,1,5.38-3L58.3,19A11.64,11.64,0,0,1,55.26,24.41Zm5.8-19.34L59,15.68,48.28,5,58.89,2.9a1.85,1.85,0,0,1,2.17,2.17Z" />
-                            <path
-                                d="M2.63,62.76a1.41,1.41,0,0,1-1-.41,1.44,1.44,0,0,1,0-2l8.12-8.13a1.44,1.44,0,0,1,2,2L3.64,62.35A1.42,1.42,0,0,1,2.63,62.76Z" />
-                            <path
-                                d="M10.75,62.76a1.43,1.43,0,0,1-1-2.44l4.06-4.07a1.43,1.43,0,0,1,2,2l-4.06,4.06A1.43,1.43,0,0,1,10.75,62.76Z" />
-                            <path
-                                d="M2.63,54.64a1.43,1.43,0,0,1-1-2.44l4.07-4.06a1.43,1.43,0,0,1,2,2L3.65,54.22A1.44,1.44,0,0,1,2.63,54.64Z" />
-                        </svg>
                         <h4 class="room-tile__title">Performance</h4>
                     </div>
+
                     <div id="performance_preview"></div>
                 </div>
             </a>
             <a class="room-tile" href="#product_room">
                 <div class="tile-content">
                     <div class="grid flow-column gap-1 justify-start align-center">
-                        <svg class="room-tile__icon" id="b76bf456-6b89-4220-8b44-f4f7d833bad6" data-name="Layer 1"
+                        <svg class="room-tile__icon" id="b76bf456-6b89-4220-8b44-f4f7d833bad6" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M61.28,22.11c0-.05,0-.09,0-.14L58.62,6A1.68,1.68,0,0,0,57,4.6H7A1.68,1.68,0,0,0,5.38,6L2.72,22c0,.05,0,.09,0,.14s0,.09,0,.14V57.72A1.68,1.68,0,0,0,4.38,59.4H59.62a1.68,1.68,0,0,0,1.68-1.68V22.25C61.3,22.2,61.28,22.16,61.28,22.11Zm-3.64-1.54H39.34L38.51,8h17ZM27.92,23.93h8.16v6.64L33,28.41a1.7,1.7,0,0,0-1.9,0l-3.13,2.16ZM35.15,8,36,20.57H28L28.91,8ZM8.46,8H25.55l-.88,12.61H6.36ZM57.94,56H6.06V23.93h18.5v9.84a1.67,1.67,0,0,0,2.63,1.38L32,31.84l4.81,3.31a1.65,1.65,0,0,0,.95.3,1.76,1.76,0,0,0,.78-.19,1.68,1.68,0,0,0,.9-1.49V23.93h18.5Z"/></svg>
-                            xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
-                            <path
-                                d="M61.28,22.11c0-.05,0-.09,0-.14L58.62,6A1.68,1.68,0,0,0,57,4.6H7A1.68,1.68,0,0,0,5.38,6L2.72,22c0,.05,0,.09,0,.14s0,.09,0,.14V57.72A1.68,1.68,0,0,0,4.38,59.4H59.62a1.68,1.68,0,0,0,1.68-1.68V22.25C61.3,22.2,61.28,22.16,61.28,22.11Zm-3.64-1.54H39.34L38.51,8h17ZM27.92,23.93h8.16v6.64L33,28.41a1.7,1.7,0,0,0-1.9,0l-3.13,2.16ZM35.15,8,36,20.57H28L28.91,8ZM8.46,8H25.55l-.88,12.61H6.36ZM57.94,56H6.06V23.93h18.5v9.84a1.67,1.67,0,0,0,2.63,1.38L32,31.84l4.81,3.31a1.65,1.65,0,0,0,.95.3,1.76,1.76,0,0,0,.78-.19,1.68,1.68,0,0,0,.9-1.49V23.93h18.5Z" />
-                        </svg>
                         <h4 class="room-tile__title">Product</h4>
                     </div>
 
                 </div>
             </a>
-            <!--             <a class="room-tile" href="#purchase_room">
+<!--             <a class="room-tile" href="#purchase_room">
                 <div class="tile-content">
                     <svg class="room-tile__icon" id="bb329e59-3d30-49a7-ac0d-b164d3b3b631" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M42.74,64a14,14,0,1,1,14-14A14,14,0,0,1,42.74,64Zm0-24.73A10.7,10.7,0,1,0,53.44,50,10.71,10.71,0,0,0,42.74,39.27Z"/><path d="M28.7,50H14.08a3.43,3.43,0,0,1-3.42-3.58l1.4-31.51h4.85V17.8a1.71,1.71,0,1,0,3.42,0V14.88H33V17.8a1.71,1.71,0,1,0,3.42,0V14.88h4.84L42.2,36c.18,0,.35,0,.54,0a13.92,13.92,0,0,1,2.9.31l-1.1-24.8H36.42V9.76a9.76,9.76,0,1,0-19.51,0v1.69H8.79L7.24,46.24a6.85,6.85,0,0,0,6.84,7.15H29.14A14.24,14.24,0,0,1,28.7,50ZM20.33,9.76A6.34,6.34,0,1,1,33,9.76v1.69H20.33Z"/><path d="M41.23,54.65a1.69,1.69,0,0,1-1.18-.49l-3-3a1.67,1.67,0,0,1,2.35-2.36l1.84,1.84,4.85-4.85a1.66,1.66,0,0,1,2.35,2.35l-6,6A1.67,1.67,0,0,1,41.23,54.65Z"/></svg>
                     <h4 class="room-tile__title">Buy</h4>
@@ -120,20 +107,13 @@
         <section class="room-container hide-completely page-layout">
             <header class="room-container__header">
                 <button class="grid flow-column gap-1 align-center" onclick="hideRoom()">
-                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M7.828 11H20v2H7.828l5.364 5.364-1.414 1.414L4 12l7.778-7.778 1.414 1.414z"/></svg>
-                        <path fill="none" d="M0 0h24v24H0z" />
-                        <path d="M7.828 11H20v2H7.828l5.364 5.364-1.414 1.414L4 12l7.778-7.778 1.414 1.414z" />
-                    </svg>
                     <h3 id="room_title" class="section-header hide-completely"></h3>
                 </button>
             </header>
             <h1 id="hero_title"></h1>
             <section class="room-carousel">
                 <section id="performance_room" class="grid room">
-                    <div class="legend-container flex align-center justify-center margin-bottom-1r">
-                        <div id="line_sample" class="hide-completely"></div>
-                        <h4 id="graph_legend"></h4>
-                    </div>
                     <section class="graph-container">
                         <canvas id="performance_graph"></canvas>
                     </section>
@@ -144,129 +124,85 @@
                     <section class="features-grid">
                         <div class="feature">
                             <div class="feature__icon">
-                                <svg class="icon" id="f47905c4-be19-4535-912c-ac0a41d5362d" data-name="Layer 1"
+                                <svg class="icon" id="f47905c4-be19-4535-912c-ac0a41d5362d" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M55.59,38a10.43,10.43,0,0,0-3.09-4.19,12.61,12.61,0,0,0-5.4-2.46,11.57,11.57,0,0,0,5.75-4.7,13.39,13.39,0,0,0,1.86-7q0-7.62-5.86-11.46c-3.64-2.39-8.62-3.65-14.91-3.82V0H25.38V4.28H21.7V0H13.14V4.28H7.42v7.84l5.75,1.22V50.7L7.42,51.91v7.81h6.69V64h8.56V59.72h3.68V64h8.56V59.72h.42q10.37,0,15.8-4.15t5.45-12.3A14.09,14.09,0,0,0,55.59,38ZM41.35,21.11A5.14,5.14,0,0,1,39,25.77q-2.34,1.52-7.07,1.51h-5.4V14.48h6q4.45,0,6.65,1.58A5.81,5.81,0,0,1,41.35,21.11ZM41.29,48q-2,1.56-6,1.56H26.54V36.11H36a9.61,9.61,0,0,1,4.19.78,5,5,0,0,1,2.36,2.36,9.14,9.14,0,0,1,.76,4A5.66,5.66,0,0,1,41.29,48Z"/></svg>
-                                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
-                                    <path
-                                        d="M55.59,38a10.43,10.43,0,0,0-3.09-4.19,12.61,12.61,0,0,0-5.4-2.46,11.57,11.57,0,0,0,5.75-4.7,13.39,13.39,0,0,0,1.86-7q0-7.62-5.86-11.46c-3.64-2.39-8.62-3.65-14.91-3.82V0H25.38V4.28H21.7V0H13.14V4.28H7.42v7.84l5.75,1.22V50.7L7.42,51.91v7.81h6.69V64h8.56V59.72h3.68V64h8.56V59.72h.42q10.37,0,15.8-4.15t5.45-12.3A14.09,14.09,0,0,0,55.59,38ZM41.35,21.11A5.14,5.14,0,0,1,39,25.77q-2.34,1.52-7.07,1.51h-5.4V14.48h6q4.45,0,6.65,1.58A5.81,5.81,0,0,1,41.35,21.11ZM41.29,48q-2,1.56-6,1.56H26.54V36.11H36a9.61,9.61,0,0,1,4.19.78,5,5,0,0,1,2.36,2.36,9.14,9.14,0,0,1,.76,4A5.66,5.66,0,0,1,41.29,48Z" />
-                                </svg>
                             </div>
                             <h4 class="feature__title">Bitcoin linked</h4>
                             <p class="feature__brief">Bitcoin Bonds is a Bitcoin price linked product of RanchiMall</p>
                         </div>
                         <div class="feature feature--wide">
                             <div class="feature__icon">
-                                <svg class="icon" id="a9cf0968-17a3-4e2e-8dcf-10d366d12d28" data-name="Layer 1"
+                                <svg class="icon" id="a9cf0968-17a3-4e2e-8dcf-10d366d12d28" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M17.28,29a16.35,16.35,0,0,1-7.63-1.64,11.32,11.32,0,0,1-4.77-4.54,13.17,13.17,0,0,1-1.63-6.61V12.88A13.3,13.3,0,0,1,4.88,6.25,11.52,11.52,0,0,1,9.6,1.67,15.9,15.9,0,0,1,17.2,0a15.94,15.94,0,0,1,7.63,1.67,11.43,11.43,0,0,1,4.71,4.55,13.5,13.5,0,0,1,1.6,6.66v3.29a13.36,13.36,0,0,1-1.6,6.61,11.33,11.33,0,0,1-4.68,4.54A16,16,0,0,1,17.28,29Zm0-8a3.94,3.94,0,0,0,3.21-1.39,5.13,5.13,0,0,0,1.16-3.4V12.88a5.31,5.31,0,0,0-1.16-3.47A4,4,0,0,0,17.2,8a3.94,3.94,0,0,0-3.27,1.41,5.35,5.35,0,0,0-1.14,3.47v3.29A5.11,5.11,0,0,0,14,19.59,4.09,4.09,0,0,0,17.28,21Zm3,37.61-6.93-3.43L43.76,6.46,50.7,9.88ZM46.89,64a16.15,16.15,0,0,1-7.64-1.67,11.75,11.75,0,0,1-4.81-4.58,13,13,0,0,1-1.67-6.58V47.91a13.19,13.19,0,0,1,1.63-6.58,11.41,11.41,0,0,1,4.77-4.58,16.11,16.11,0,0,1,7.63-1.67,16,16,0,0,1,7.6,1.65,11.39,11.39,0,0,1,4.72,4.55,13.3,13.3,0,0,1,1.63,6.63v3.26a13.5,13.5,0,0,1-1.61,6.63,11.29,11.29,0,0,1-4.68,4.55A15.87,15.87,0,0,1,46.89,64Zm0-8c1.68,0,2.81-.42,3.4-1.26a6.33,6.33,0,0,0,.88-3.61V47.91a5.31,5.31,0,0,0-1.12-3.42,3.88,3.88,0,0,0-3.25-1.41,4,4,0,0,0-3.33,1.41,5.31,5.31,0,0,0-1.12,3.42v3.26a4.93,4.93,0,0,0,1.33,3.42A4.17,4.17,0,0,0,46.89,56Z"/></svg>
-                                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
-                                    <path
-                                        d="M17.28,29a16.35,16.35,0,0,1-7.63-1.64,11.32,11.32,0,0,1-4.77-4.54,13.17,13.17,0,0,1-1.63-6.61V12.88A13.3,13.3,0,0,1,4.88,6.25,11.52,11.52,0,0,1,9.6,1.67,15.9,15.9,0,0,1,17.2,0a15.94,15.94,0,0,1,7.63,1.67,11.43,11.43,0,0,1,4.71,4.55,13.5,13.5,0,0,1,1.6,6.66v3.29a13.36,13.36,0,0,1-1.6,6.61,11.33,11.33,0,0,1-4.68,4.54A16,16,0,0,1,17.28,29Zm0-8a3.94,3.94,0,0,0,3.21-1.39,5.13,5.13,0,0,0,1.16-3.4V12.88a5.31,5.31,0,0,0-1.16-3.47A4,4,0,0,0,17.2,8a3.94,3.94,0,0,0-3.27,1.41,5.35,5.35,0,0,0-1.14,3.47v3.29A5.11,5.11,0,0,0,14,19.59,4.09,4.09,0,0,0,17.28,21Zm3,37.61-6.93-3.43L43.76,6.46,50.7,9.88ZM46.89,64a16.15,16.15,0,0,1-7.64-1.67,11.75,11.75,0,0,1-4.81-4.58,13,13,0,0,1-1.67-6.58V47.91a13.19,13.19,0,0,1,1.63-6.58,11.41,11.41,0,0,1,4.77-4.58,16.11,16.11,0,0,1,7.63-1.67,16,16,0,0,1,7.6,1.65,11.39,11.39,0,0,1,4.72,4.55,13.3,13.3,0,0,1,1.63,6.63v3.26a13.5,13.5,0,0,1-1.61,6.63,11.29,11.29,0,0,1-4.68,4.55A15.87,15.87,0,0,1,46.89,64Zm0-8c1.68,0,2.81-.42,3.4-1.26a6.33,6.33,0,0,0,.88-3.61V47.91a5.31,5.31,0,0,0-1.12-3.42,3.88,3.88,0,0,0-3.25-1.41,4,4,0,0,0-3.33,1.41,5.31,5.31,0,0,0-1.12,3.42v3.26a4.93,4.93,0,0,0,1.33,3.42A4.17,4.17,0,0,0,46.89,56Z" />
-                                </svg>
                             </div>
                             <h4 class="feature__title">Guaranteed interest</h4>
-                            <p class="feature__brief">Get a minimum guarantee of 13% interest per annum during the
+                            <p class="feature__brief">Get a minimum guarantee of 13% interest per annum during the lock-in period or 50% of all Bitcoin price gains whichever is higher.</p>
-                                lock-in period or 50% of all Bitcoin price gains whichever is higher.</p>
                         </div>
                         <div class="feature">
                             <div class="feature__icon">
-                                <svg class="icon" id="b08df049-bfa0-4c18-bc06-ef2129dc9a6e" data-name="Layer 1"
+                                <svg class="icon" id="b08df049-bfa0-4c18-bc06-ef2129dc9a6e" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M32,0,5.42,5.93v31A55.62,55.62,0,0,0,32,64,55.62,55.62,0,0,0,58.58,36.94v-31ZM42.5,24.9,30.76,36.64a2.53,2.53,0,0,1-1.77.73,2.49,2.49,0,0,1-1.76-.73L21.5,30.91A2.5,2.5,0,1,1,25,27.38L29,31.33l10-10A2.5,2.5,0,1,1,42.5,24.9Z"/></svg>
-                                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
-                                    <path
-                                        d="M32,0,5.42,5.93v31A55.62,55.62,0,0,0,32,64,55.62,55.62,0,0,0,58.58,36.94v-31ZM42.5,24.9,30.76,36.64a2.53,2.53,0,0,1-1.77.73,2.49,2.49,0,0,1-1.76-.73L21.5,30.91A2.5,2.5,0,1,1,25,27.38L29,31.33l10-10A2.5,2.5,0,1,1,42.5,24.9Z" />
-                                </svg>
                             </div>
                             <h4 class="feature__title">Full capital protection</h4>
-                            <p class="feature__brief"> It offers full capital protection if Bitcoin prices fall below
+                            <p class="feature__brief"> It offers full capital protection if Bitcoin prices fall below acquisition price</p>
-                                acquisition price</p>
                         </div>
                     </section>
                     <h4 class="h4 margin-bottom-1r">Description of different bonds</h4>
                     <ol type="1" class="margin-bottom-3r">
                         <li>
                             <p>
-                                Bitcoin Bonds is a Bitcoin price linked product of RanchiMall in which the customer will
+                                Bitcoin Bonds is a Bitcoin price linked product of RanchiMall in which the customer will never
-                                never
+                                see value of his asset go down even if the prices of Bitcoin falls. Its been targeted to first time
-                                see value of his asset go down even if the prices of Bitcoin falls. Its been targeted to
+                                Bitcoin enthusiasts who are afraid of losing money with Bitcoins. RanchiMall absorbs all the potential
-                                first time
+                                losses of the customer. It also guarantees the customer a minimum rate of annual appreciation. If the
-                                Bitcoin enthusiasts who are afraid of losing money with Bitcoins. RanchiMall absorbs all
-                                the potential
-                                losses of the customer. It also guarantees the customer a minimum rate of annual
-                                appreciation. If the
                                 price of Bitcoin appreciates, the customer is entitled to 50% of all the gains.
                             </p>
                         </li>
                         <li>
                             <p>
-                                RanchiMall has released two types of Bitcoin Bonds as per the price of Bitcoin as on
+                                RanchiMall has released two types of Bitcoin Bonds as per the price of Bitcoin as on issue date. In the
-                                issue date. In the
+                                first type, the customer is guaranteed first 12% per gains per annum for 3 years, and 50% of all gains
-                                first type, the customer is guaranteed first 12% per gains per annum for 3 years, and
+                                there after. Customer must hold the bond for 3 years since bond issue date. In second type, the
-                                50% of all gains
+                                customer is guaranteed 13% per annum for 5 years, and the customer is entitled to 50% of all gains.
-                                there after. Customer must hold the bond for 3 years since bond issue date. In second
-                                type, the
-                                customer is guaranteed 13% per annum for 5 years, and the customer is entitled to 50% of
-                                all gains.
                                 Customer must hold the bond for at least 3 years since date of issue.
                             </p>
                         </li>
                         <li>
                             <p>
-                                Example of Type 1 Bitcoin Bond is Bitcoin Bonds USD 975 Series issued on 2nd February
+                                Example of Type 1 Bitcoin Bond is Bitcoin Bonds USD 975 Series issued on 2nd February 2017.
-                                2017.
+                                Customer funds are invested at Bitcoin prices of 975 USD as on 2nd February 2017. If the prices of
-                                Customer funds are invested at Bitcoin prices of 975 USD as on 2nd February 2017. If the
+                                Bitcoins fall below 975 USD, the customer bond value will continue to be 975 USD, and will get an
-                                prices of
+                                increment of 12% per annum. If the prices of Bitcoin go beyond 975 USD, the customer will getat
-                                Bitcoins fall below 975 USD, the customer bond value will continue to be 975 USD, and
+                                least 12% per annum, and 50% of all price gains beyond it. The customer must hold thebond for 3
-                                will get an
-                                increment of 12% per annum. If the prices of Bitcoin go beyond 975 USD, the customer
-                                will get at
-                                least 12% per annum, and 50% of all price gains beyond it. The customer must hold
-                                thebond for 3
                                 years.
                             </p>
                         </li>
                         <li>
                             <p>
-                                Example of Type 2 Bitcoin Bond is Bitcoin Bonds USD 1205 Series issued on 2nd March
+                                Example of Type 2 Bitcoin Bond is Bitcoin Bonds USD 1205 Series issued on 2nd March 2017.
-                                2017.
+                                Customer funds are invested at Bitcoin prices of 1205 USD as on 2nd March 2017. If the prices of
-                                Customer funds are invested at Bitcoin prices of 1205 USD as on 2nd March 2017. If the
+                                Bitcoins fall below 1205 USD, the customer bond value will continue to be 1205 USD will full loss
-                                prices of
+                                protection, and will get an increment of 13% per annum for 5 years on top. If the price gains is more
-                                Bitcoins fall below 1205 USD, the customer bond value will continue to be 1205 USD will
+                                than 13% in any year for first 5 years, the customer will be entitled to 50% of the gains. The customer
-                                full loss
-                                protection, and will get an increment of 13% per annum for 5 years on top. If the price
-                                gains is more
-                                than 13% in any year for first 5 years, the customer will be entitled to 50% of the
-                                gains. The customer
                                 must hold the bond for 3 years.
                             </p>
                         </li>
                         <li>
                             <p>
-                                Bond 1 Bondholders entitlement for Bitcoin Bonds ($975, $1057 and $1064 series) -
+                                Bond 1 Bondholders entitlement for Bitcoin Bonds ($975, $1057 and $1064 series) - Bondholders have a
-                                Bondholders have a
+                                3 year lock-in period. In the lockin period they are guaranteed 12 percent per annum. If the price
-                                3 year lock-in period. In the lockin period they are guaranteed 12 percent per annum. If
+                                appreciates more than 12 percent, they will be paid 50 percent of additional return over and above
-                                the price
+                                12 percent. After 3 years, bondholders can cash out anytime they like. Bond 2 Bondholder entitlement
-                                appreciates more than 12 percent, they will be paid 50 percent of additional return over
+                                ($1205 series)Bondholders are entitled to 50% of Bitcoin and Bitcoin Cash price gains at all times with
-                                and above
+                                a minimum guarantee of 13 percent per annum for 5 years from date of issue. There is a 3 year lockin
-                                12 percent. After 3 years, bondholders can cash out anytime they like. Bond 2 Bondholder
-                                entitlement
-                                ($1205 series)Bondholders are entitled to 50% of Bitcoin and Bitcoin Cash price gains at
-                                all times with
-                                a minimum guarantee of 13 percent per annum for 5 years from date of issue. There is a 3
-                                year lockin
                                 period. After 3 years, bondholders can cash out anytime they like.
                             </p>
                         </li>
                         <li>
                             <p>
-                                Bond 3 Bondholders Entitlement ($1285 series) - Bondholders are entitled to 50% of
+                                Bond 3 Bondholders Entitlement ($1285 series) - Bondholders are entitled to 50% of Bitcoinand Bitcoin
-                                Bitcoinand Bitcoin
+                                Cash price gains at all times with a minimum guarantee of 13 percent per annum for 5 years from
-                                Cash price gains at all times with a minimum guarantee of 13 percent per annum for 5
+                                date of issue. There is a 3 year lockin period. After 3 years, bondholders can cash out anytime they
-                                years from
+                                like.Bond 4Bondholder Entitlement ($2513 series)Bondholders are entitled to 50% of Bitcoin and
-                                date of issue. There is a 3 year lockin period. After 3 years, bondholders can cash out
+                                Bitcoin Cash price gains at all times with a minimum guarantee of 13 percent per annum for 5 years
-                                anytime they
+                                from date of issue. There is a 3 year lockin period. After 3 years, bondholders can cash out anytime
-                                like.Bond 4Bondholder Entitlement ($2513 series)Bondholders are entitled to 50% of
-                                Bitcoin and
-                                Bitcoin Cash price gains at all times with a minimum guarantee of 13 percent per annum
-                                for 5 years
-                                from date of issue. There is a 3 year lockin period. After 3 years, bondholders can cash
-                                out anytime
                                 they like.
                             </p>
                         </li>
@@ -274,49 +210,38 @@
                     <h4 class="h4 margin-bottom-1r section-header">Risk Management</h4>
                     <p class="margin-bottom-3r">
                         This is a high risk product for RanchiMall. We guarantee protection from losses
-                        and a minimum rate of return.To control our risks, we limit the total aggregate amount of
+                        and a minimum rate of return.To control our risks, we limit the total aggregate amount of guarantee
-                        guarantee
+                        we give to a comfortable level. We also limit maximum amount of Bitcoin Bonds aperson can buy so
-                        we give to a comfortable level. We also limit maximum amount of Bitcoin Bonds person can buy so
                         that we do not have sudden redemption pressure.RanchiMall needs to have long term confidence
-                        in asset price growth, which we do have for Bitcoin currently. We cannot offer these guarantees
+                        in asset price growth, which we do have for Bitcoin scurrently. We cannot offer these guarantees on
-                        on
+                        any other crypto or non-crypto asset other than Bitcoin as we cannot make definite predictions on
-                        any other crypto or non-crypto asset other than Bitcoin as we cannot make definite predictions
-                        on
                         their long term prices.The maximum amount of aggregate guarantee amount for this product should
-                        be lower than 20 percent of RanchiMall assets to protect against catastrophic Bitcoin price
+                        be lower than 20 percent of RanchiMall assets to protect against catastrophic Bitcoin price fall.
-                        fall.
                     </p>
                     <h4 class="h4 margin-bottom-1r section-header">Founder Notes</h4>
                     <ol type="1">
                         <li>
                             <p>
-                                RanchiMall Bitcoin Bonds was the first product that met our 2 fundamental criteria that
+                                RanchiMall Bitcoin Bonds was the first product that met our 2 fundamental criteria that we have for
-                                we have for
+                                RanchiMall products. First every product must beinnovative and absolutely new. Secondly it should
-                                RanchiMall products. First every product must innovative and absolutely new. Secondly
+                                be created, marketedand delivered purely on Internet withoutany physical elements.
-                                it should
-                                be created, marketed and delivered purely on Internet without any physical elements.
                             </p>
                         </li>
                         <li>
                             <p>
-                                This product also reflects our philosophy that we should have impactful products,fewer
+                                This product also reflects our philosophy that we should have impactful products,fewer number of customers, and very deep relationship with those customers.
-                                number of customers, and very deep relationship with those customers.
                             </p>
                         </li>
                         <li>
                             <p>
-                                This product is a compounding product which means both our customers and us will see
+                                This product is a compounding product which means both our customers and us will see higher returns as wheels of time move forward.
-                                higher returns as wheels of time move forward.
                             </p>
                         </li>
                         <li>
                             <p>
-                                Since RanchiMall gets roughly 50 percent of price gains and our costs of operations are
+                                Since RanchiMall gets roughly 50 percent of price gains and our costs of operations are very low on
-                                very low on
+                                this product, RanchiMall Bitcoin Bonds has helped RanchiMall to become self sufficient without
-                                this product, RanchiMall Bitcoin Bonds has helped RanchiMall to become self sufficient
+                                needing large capital investment. Doing good risk management is a very important dimension here.
-                                without
-                                needing large capital investment. Doing good risk management is a very important
-                                dimension here.
                                 And that will be our challenge in the continued offerings of this product.
                             </p>
                         </li>
@@ -325,13 +250,9 @@
                 <section id="purchase_room" class="grid room">
                     <p>
                         The purchase of this product is open only during specified time when we are confident we can
-                        give guarantees. It was last open from February 2017 to June 2017.Currently we are doing
+                        give guarantees. It was last open from February 2017 to June 2017.Currently we are doing blockchain
-                        blockchain
+                        version of the product in test mode.If you are interested, please generate your FLO ID while keeping
-                        version of the product in test mode.If you are interested, please generate your FLO ID while
+                        your private key very safe.FLO ID can be generated <a href="https://ranchimall.github.io/flo-webwallet/" target="_blank">here</a> in a single click.We can message
-                        keeping
-                        your private key very safe.FLO ID can be generated <a
-                            href="https://ranchimall.github.io/flowallet/" target="_blank">here</a> in a single
-                        click.We can message
                         directly on that FLO ID. Please drop your name and phone number along with FLO ID.
                     </p>
                 </section>
@@ -342,26 +263,21 @@
             </footer>
         </section>
         <section>
-            <div class="ext-link-tile">
+            <a class="ext-link-tile" href="https://ranchimall.github.io/blockchain-bonds/" target="_blank" >
                 <div class="grid">
                     <h4 class="tile__title">See Bitcoin Bonds in action</h4>
                     <p class="tile__brief">Visit the website to see investors and asset performance</p>
                 </div>
-                <div class="link-container">
+                <button class="round">Visit</button>
-                    <a class="round" href="https://www.ranchimall.net/BitBonds/" target="_blank">2017 release</a>
+            </a>
-                    <a class="round" href="https://ranchimall.github.io/blockchainbonds/" target="_blank">Blockchain
-                        version</a>
-                </div>
-            </div>
         </section>
     </main>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/chart.js@3.3.2/dist/chart.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>
     <script src="assets/js/components.js"></script>
-    <script src="https://unpkg.com/uhtml@3.0.1/es.js"></script>
     <script src="assets/js/index.js"></script>
     <script>
-        const bitBondSeries = [
+        const bitBondSerieses = [
             {
                 series: 975,
                 startDate: 1485993600000
@@ -387,7 +303,7 @@
                 startDate: 1496880000000
             },
         ]
-
+                
         function getCurrentRates() {
             let fetchData = api => new Promise((resolve, reject) => {
                 fetch(api).then(response => {
@@ -418,7 +334,7 @@
             BTC_current = rates.BTC_USD;
             renderAllSeries()
         }).catch(error => console.error(error))
-
+        
         function yrDiff(d1 = null, d2 = null) {
             d1 = d1 ? new Date(d1) : new Date();
             d2 = d2 ? new Date(d2) : new Date();
@@ -428,33 +344,35 @@
             //need to implement leap yr
             return tmp
         }
-
+        
         function calcNetValue(obj) {
-            let { isHistorical = false, BTC_base, startDate, minIpa, maxPeriod, cut, amount, USD_base, histBtc, histUsd } = obj
+            let {isHistorical = false, BTC_base, startDate, minIpa, maxPeriod, cut, amount, USD_base, histBtc, histUsd} = obj
             let gain, interest, net;
-            if (isHistorical) {
+            if(isHistorical){
                 gain = (histBtc - BTC_base) / BTC_base;
             }
-            else {
+            else{
                 gain = (BTC_current - BTC_base) / BTC_base;
             }
             interest = Math.max(cut * gain, minIpa * Math.min(yrDiff(startDate), maxPeriod));
             net = amount / USD_base;
             net += net * interest;
-            if (isHistorical) {
+            if(isHistorical){
                 currentValue = net * histUsd
             }
-            else {
+            else{
                 currentValue = net * USD_current
             }
             const percentGain = ((currentValue - amount) / amount) * 100
+            //console.info(gain, interest, net)
             return [currentValue, percentGain];
         }
 
-        function renderAllSeries() {
+        function renderAllSeries(){
-            const allSeries = []
+            const frag = document.createDocumentFragment()
-            const randIndex = getRandom(0, bitBondSeries.length - 1)
+            getRef('bit_bond_series__container').innerHTML = ''
-            bitBondSeries.forEach((series, index) => {
+            const randIndex = getRandom(0, bitBondSerieses.length - 1)
+            bitBondSerieses.forEach((series, index) => {
                 let obj = {
                     BTC_base: series.series,
                     startDate: series.startDate,
@@ -472,19 +390,21 @@
                     currentValue,
                     percentGain: percentGain.toFixed(0)
                 }
-                const timelineItem = html`
+                const timelineItem = create('li', {className: 'timeline-item'})
-                    <li class="timeline-item">
+                
-                        <h4 class="timeline-item__header">${getFormatedTime(series.startDate, true)}</h4>
+                const tilelineItemHeader = create('header', {
-                        ${render.bitBondRow(bondObj)}
+                    className: 'timeline-item__header',
-                    </li>
+                    text: getFormatedTime(series.startDate, true)
-                `;
+                })
-                if (randIndex === index) {
+                if(randIndex === index){
                     renderGraph(obj)
-                    renderElem(getRef('performance_preview'), render.bitBondRow(bondObj))
+                    getRef('performance_preview').append(render.bitBondRow(bondObj))
                 }
-                allSeries.push(timelineItem)
+
+                timelineItem.append(tilelineItemHeader, render.bitBondRow(bondObj))
+                frag.append(timelineItem)
             })
-            renderElem(getRef('bit_bond_series__container'), html`${allSeries}`)
+            getRef('bit_bond_series__container').append(frag)
 
         }
         async function getPrices() {
@@ -497,7 +417,7 @@
         let dates = []
         let historicalData = []
         let tableOfData = []
-
+            
         async function getData(obj) {
             let [btcPrices, inrPrices] = await getPrices()
             btcPrices = btcPrices['Time Series (Digital Currency Monthly)']
@@ -521,7 +441,7 @@
                     let histBtc = parseFloat(allBtcPrices[index])
                     let histUsd = parseFloat(inrPrices[dataPoint]['1. open'])
                     obj.isHistorical = true
-                    let [currentValue, gain] = calcNetValue({ ...obj, histBtc, histUsd })
+                    let [currentValue, gain] = calcNetValue({...obj, histBtc, histUsd})
                     // console.log(currentValue)
                     historicalData.push(currentValue)
                     index++
@@ -535,36 +455,30 @@
 
         let gradientFill
         let lineColor
-        let myChart
 
-        function selectGraphColors() {
+        function selectGraphColors(){
             gradientFill = ctx.createLinearGradient(200, 0, 200, 400);
             let cssTextColor = getComputedStyle(document.body).getPropertyValue('--text-color')
             gradientFill.addColorStop(0, `rgba(${cssTextColor}, 0.2)`);
             gradientFill.addColorStop(1, "transparent");
-            if (myChart) {
+            lineColor = ctx.createLinearGradient(500, 0, 100, 0)
-                lineColor = ctx.createLinearGradient(0, 0, myChart.chartArea.width, 0)
+            lineColor.addColorStop(0, "#80b6f4");
-            } else {
+            lineColor.addColorStop(1, "#f49080");
-                lineColor = ctx.createLinearGradient(0, 0, 500, 0)
-            }
-            lineColor.addColorStop(0, "#f49080");
-            lineColor.addColorStop(1, "#80b6f4");
             // lineColor = getComputedStyle(document.body).getPropertyValue('--secondary-text-color');
-            textColor = `rgba(${cssTextColor}, 0.7)`
+            textColor = `rgba(${cssTextColor}, 0.8)`
         }
+        selectGraphColors()
 
+        let myChart
         async function renderGraph(obj) {
             await getData(obj)
-            selectGraphColors()
+            
-            getRef('line_sample').classList.remove('hide-completely')
-            getRef('graph_legend').textContent = `Growth of $100 in $${obj.BTC_base} series`
-
             myChart = new Chart(ctx, {
                 type: 'line',
                 data: {
                     labels: dates.reverse(),
                     datasets: [{
-                        labels: '',
+                        label: `$${obj.BTC_base} series performace($)`,
                         data: historicalData.reverse(),
                         borderColor: lineColor,
                         fill: true,
@@ -580,12 +494,6 @@
                 },
                 options: {
                     responsive: true,
-                    maintainAspectRatio: false,
-                    plugins: {
-                        legend: {
-                            display: false,
-                        }
-                    },
                     scales: {
                         y: {
                             ticks: {
@@ -607,16 +515,14 @@
                 }
             });
         }
-        document.addEventListener("themechange", function (e) {
+        getRef("theme_switcher").addEventListener("change", function (e) {
             selectGraphColors()
             myChart.data.datasets[0].borderColor = lineColor
             myChart.data.datasets[0].backgroundColor = gradientFill
             myChart.options.scales.x.ticks.color = textColor;
             myChart.options.scales.y.ticks.color = textColor;
-            myChart.options.plugins.legend.labels.color = textColor;
             myChart.update()
         });
     </script>
 </body>
-
 </html>

bob'sfund.html

@@ -28,25 +28,22 @@
         </header>
         <ul id="floor_list" class="grid"></ul>
     </section>
-    <header id="main_header" class="full-bleed">
+    <header id="main_header" class="grid align-center full-bleed">
         <button id="elevator_button" class="button" onclick="showSiteMap()">
-            <svg class="icon button__icon--left" width="24" height="24" viewBox="0 0 24 24" fill="none"
+            <svg class="icon button__icon--left" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 3L16.3301 10.5H7.66987L12 3Z"/><path d="M12 21L7.66987 13.5L16.3301 13.5L12 21Z"/></svg>
-                xmlns="http://www.w3.org/2000/svg">
-                <path d="M12 3L16.3301 10.5H7.66987L12 3Z" />
-                <path d="M12 21L7.66987 13.5L16.3301 13.5L12 21Z" />
-            </svg>
             <span class="button__label">
                 Elevator
             </span>
         </button>
         <a href="index.html" class="main-logo flex align-center page-link justify-self-center" data-target="home_page">
-            <svg id="main_header__logo" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+            <svg id="main_header__logo" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.46,21.32C20,19.78,18.6,18.59,15.3,17a12.67,12.67,0,0,1-2.64-1.56,4.27,4.27,0,0,1-.79-1,2.6,2.6,0,0,1,0-1.41c.24-.68.49-1,2.43-2.85a7.18,7.18,0,0,0,2.09-2.92,4.25,4.25,0,0,0,0-1.77,6.52,6.52,0,0,0-2.85-3.11c-.56-.36-.81-.4-.81-.15a2.33,2.33,0,0,1-.18.45L12.4,3l-.53-.36c-.28-.21-.64-.41-.77-.49s-.46-.11-.46,0a6.21,6.21,0,0,1-.37.83s-.08,0-.17-.08c-1.15-.83-1.64-1-1.64-.73A7.33,7.33,0,0,1,7.7,3.65C6.48,5.68,5.24,6.7,4,6.7c-.56,0-.54,0-.37.64s.2.58.68.43a3.37,3.37,0,0,0,1.09-.54.86.86,0,0,1,.3-.17,1.34,1.34,0,0,1,.13.39.79.79,0,0,0,.17.4A3.5,3.5,0,0,0,7.37,7.3L7.8,7l.09.34c.12.45.19.51.62.39a4.25,4.25,0,0,0,2.17-1.54l.38-.45,0,.39A5.92,5.92,0,0,1,8.89,9.54L7.67,10.71c-2,1.93-1.89,3.51.37,5a27.41,27.41,0,0,0,2.89,1.51c.17.07.62.32,1,.54C14,19,15,20.23,15,21.48a2,2,0,0,0,0,.49h0c0,.05,0,.05.56-.1a1.89,1.89,0,0,0,.53-.21,2.41,2.41,0,0,0-.34-1.15,7.05,7.05,0,0,0-1.68-1.77,21.91,21.91,0,0,0-3.2-1.83A9.53,9.53,0,0,1,8.16,15.2a2.18,2.18,0,0,1-.74-1.55C7.42,12.79,7.86,12,9,11c1.77-1.64,2.45-2.45,2.92-3.55a2.28,2.28,0,0,0,.26-1.26A2,2,0,0,0,12,5.06l-.2-.45L12,4.3l.28-.49.09-.18L12.6,4a3.69,3.69,0,0,1,.61,1.76A3.47,3.47,0,0,1,12.94,7l-.09.25s-.21.37-.41.69A17.78,17.78,0,0,1,9.91,10.6c-1.07,1-1.43,1.62-1.47,2.47a2.05,2.05,0,0,0,.7,1.73,10.47,10.47,0,0,0,3.28,2.08c2.28,1.13,3.26,1.81,4,2.73a2.94,2.94,0,0,1,.74,1.75,1.26,1.26,0,0,0,.09.57.48.48,0,0,0,.26,0l.51-.13.29-.08,0-.28c-.13-1-1-2-2.47-3a25.52,25.52,0,0,0-3.26-1.77,8.59,8.59,0,0,1-2.23-1.43,2.09,2.09,0,0,1-.5-2.62c.26-.53.5-.83,2.35-2.6,1.51-1.45,2.15-2.58,2.15-3.79A3.67,3.67,0,0,0,13,3.48a3,3,0,0,1-.4-.42A1.85,1.85,0,0,1,13,2.33a6.74,6.74,0,0,1,1.83,1.73,2.62,2.62,0,0,1,.47,1.68,3,3,0,0,1-.55,1.84c-.45.78-.79,1.14-2.67,2.93a5.56,5.56,0,0,0-1.3,1.64,1.77,1.77,0,0,0-.21,1,1.76,1.76,0,0,0,.19.92,6.28,6.28,0,0,0,2.9,2.34,21.6,21.6,0,0,1,3.66,2c1.35,1,2,2,2,3a1.06,1.06,0,0,0,.05.47,2.83,2.83,0,0,0,1-.24C20.56,21.68,20.56,21.66,20.46,21.32ZM7.29,6.4h0a2.23,2.23,0,0,1-.9.28L6,6.72l.43-.53a15.22,15.22,0,0,0,1.89-3,3.52,3.52,0,0,1,.38-.67c.07-.08.49.2,1,.64l.39.35L9.66,4A6.7,6.7,0,0,1,7.29,6.4Zm3.58-1.11A5.8,5.8,0,0,1,9.25,6.51h0a3.3,3.3,0,0,1-.74.17l-.35,0,.39-.49a15.64,15.64,0,0,0,1.32-2,4.63,4.63,0,0,1,.28-.49c.06-.08.33.26.57.77l.28.57Zm1-1.4a1.63,1.63,0,0,1-.28.4A6.63,6.63,0,0,1,11,3.72l-.53-.56.12-.29c.2-.49.24-.51.64-.19a5.57,5.57,0,0,1,.85.78A2.78,2.78,0,0,1,11.87,3.89Z"/></svg>
-                <path
-                    d="M20.46,21.32C20,19.78,18.6,18.59,15.3,17a12.67,12.67,0,0,1-2.64-1.56,4.27,4.27,0,0,1-.79-1,2.6,2.6,0,0,1,0-1.41c.24-.68.49-1,2.43-2.85a7.18,7.18,0,0,0,2.09-2.92,4.25,4.25,0,0,0,0-1.77,6.52,6.52,0,0,0-2.85-3.11c-.56-.36-.81-.4-.81-.15a2.33,2.33,0,0,1-.18.45L12.4,3l-.53-.36c-.28-.21-.64-.41-.77-.49s-.46-.11-.46,0a6.21,6.21,0,0,1-.37.83s-.08,0-.17-.08c-1.15-.83-1.64-1-1.64-.73A7.33,7.33,0,0,1,7.7,3.65C6.48,5.68,5.24,6.7,4,6.7c-.56,0-.54,0-.37.64s.2.58.68.43a3.37,3.37,0,0,0,1.09-.54.86.86,0,0,1,.3-.17,1.34,1.34,0,0,1,.13.39.79.79,0,0,0,.17.4A3.5,3.5,0,0,0,7.37,7.3L7.8,7l.09.34c.12.45.19.51.62.39a4.25,4.25,0,0,0,2.17-1.54l.38-.45,0,.39A5.92,5.92,0,0,1,8.89,9.54L7.67,10.71c-2,1.93-1.89,3.51.37,5a27.41,27.41,0,0,0,2.89,1.51c.17.07.62.32,1,.54C14,19,15,20.23,15,21.48a2,2,0,0,0,0,.49h0c0,.05,0,.05.56-.1a1.89,1.89,0,0,0,.53-.21,2.41,2.41,0,0,0-.34-1.15,7.05,7.05,0,0,0-1.68-1.77,21.91,21.91,0,0,0-3.2-1.83A9.53,9.53,0,0,1,8.16,15.2a2.18,2.18,0,0,1-.74-1.55C7.42,12.79,7.86,12,9,11c1.77-1.64,2.45-2.45,2.92-3.55a2.28,2.28,0,0,0,.26-1.26A2,2,0,0,0,12,5.06l-.2-.45L12,4.3l.28-.49.09-.18L12.6,4a3.69,3.69,0,0,1,.61,1.76A3.47,3.47,0,0,1,12.94,7l-.09.25s-.21.37-.41.69A17.78,17.78,0,0,1,9.91,10.6c-1.07,1-1.43,1.62-1.47,2.47a2.05,2.05,0,0,0,.7,1.73,10.47,10.47,0,0,0,3.28,2.08c2.28,1.13,3.26,1.81,4,2.73a2.94,2.94,0,0,1,.74,1.75,1.26,1.26,0,0,0,.09.57.48.48,0,0,0,.26,0l.51-.13.29-.08,0-.28c-.13-1-1-2-2.47-3a25.52,25.52,0,0,0-3.26-1.77,8.59,8.59,0,0,1-2.23-1.43,2.09,2.09,0,0,1-.5-2.62c.26-.53.5-.83,2.35-2.6,1.51-1.45,2.15-2.58,2.15-3.79A3.67,3.67,0,0,0,13,3.48a3,3,0,0,1-.4-.42A1.85,1.85,0,0,1,13,2.33a6.74,6.74,0,0,1,1.83,1.73,2.62,2.62,0,0,1,.47,1.68,3,3,0,0,1-.55,1.84c-.45.78-.79,1.14-2.67,2.93a5.56,5.56,0,0,0-1.3,1.64,1.77,1.77,0,0,0-.21,1,1.76,1.76,0,0,0,.19.92,6.28,6.28,0,0,0,2.9,2.34,21.6,21.6,0,0,1,3.66,2c1.35,1,2,2,2,3a1.06,1.06,0,0,0,.05.47,2.83,2.83,0,0,0,1-.24C20.56,21.68,20.56,21.66,20.46,21.32ZM7.29,6.4h0a2.23,2.23,0,0,1-.9.28L6,6.72l.43-.53a15.22,15.22,0,0,0,1.89-3,3.52,3.52,0,0,1,.38-.67c.07-.08.49.2,1,.64l.39.35L9.66,4A6.7,6.7,0,0,1,7.29,6.4Zm3.58-1.11A5.8,5.8,0,0,1,9.25,6.51h0a3.3,3.3,0,0,1-.74.17l-.35,0,.39-.49a15.64,15.64,0,0,0,1.32-2,4.63,4.63,0,0,1,.28-.49c.06-.08.33.26.57.77l.28.57Zm1-1.4a1.63,1.63,0,0,1-.28.4A6.63,6.63,0,0,1,11,3.72l-.53-.56.12-.29c.2-.49.24-.51.64-.19a5.57,5.57,0,0,1,.85.78A2.78,2.78,0,0,1,11.87,3.89Z" />
-            </svg>
             <h4 class="h4 header__company-name">RanchiMall</h4>
         </a>
-        <theme-toggle></theme-toggle>
+        <label class="theme-switcher" title="Change theme">
+            <input id="theme_switcher" class="theme-switcher__checkbox" type="checkbox">
+            <svg class="icon moon-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M10 6a8 8 0 0 0 11.955 6.956C21.474 18.03 17.2 22 12 22 6.477 22 2 17.523 2 12c0-5.2 3.97-9.474 9.044-9.955A7.963 7.963 0 0 0 10 6zm-6 6a8 8 0 0 0 8 8 8.006 8.006 0 0 0 6.957-4.045c-.316.03-.636.045-.957.045-5.523 0-10-4.477-10-10 0-.321.015-.64.045-.957A8.006 8.006 0 0 0 4 12zm14.164-9.709L19 2.5v1l-.836.209a2 2 0 0 0-1.455 1.455L16.5 6h-1l-.209-.836a2 2 0 0 0-1.455-1.455L13 3.5v-1l.836-.209A2 2 0 0 0 15.29.836L15.5 0h1l.209.836a2 2 0 0 0 1.455 1.455zm5 5L24 7.5v1l-.836.209a2 2 0 0 0-1.455 1.455L21.5 11h-1l-.209-.836a2 2 0 0 0-1.455-1.455L18 8.5v-1l.836-.209a2 2 0 0 0 1.455-1.455L20.5 5h1l.209.836a2 2 0 0 0 1.455 1.455z"/></svg>
+            <svg class="icon sun-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636 5.636 7.05 3.515 4.93zM16.95 18.364l1.414-1.414 2.121 2.121-1.414 1.414-2.121-2.121zm2.121-14.85l1.414 1.415-2.121 2.121-1.414-1.414 2.121-2.121zM5.636 16.95l1.414 1.414-2.121 2.121-1.414-1.414 2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z"/></svg>
+        </label>
     </header>
     <div id="outlet_switcher" class="grid gap-1-5 hide-completely">
         <span id="outlet_switcher__floor_num" class="weight-500 color-0-8"></span>
@@ -58,10 +55,8 @@
                 <h2 class="h2 weight-700 margin-bottom-1r">Bob's Fund</h2>
                 <p>
                     Bobs Fund is a 20 year long term Bitcoin price linked product. Investors are entitled to 100 percent
-                    of Bitcoin price gains, but they must hold for 20 years. Over a very long time period, investor
+                    of Bitcoin price gains, but they must hold for 20 years. Over a very long time period, investor returns
-                    returns
+                    on an asset like Bitcoin should outstrip returns on conventional assets like real estate and stocks. The
-                    on an asset like Bitcoin should outstrip returns on conventional assets like real estate and stocks.
-                    The
                     management fees on this product is zero. RanchiMall earns by having invested an equal amount as
                     every investor, thus the interests of fund manager, and fund investors are totally aligned.
                 </p>
@@ -69,10 +64,7 @@
             <button class="outlet-label">
                 <span class="outlet-label__name">Outlet</span>
                 <span class="outlet-label__no"></span>
-                <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+                <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z"/></svg>
-                    <path fill="none" d="M0 0h24v24H0z" />
-                    <path d="M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z" />
-                </svg>
             </button>
         </section>
         <div class="rooms__header">
@@ -83,19 +75,7 @@
             <a class="room-tile room-tile--main" href="#performance_room">
                 <div class="tile-content">
                     <div class="grid flow-column gap-1 justify-start align-center">
-                        <svg class="room-tile__icon" id="b23be00b-0d64-4bed-9d99-6f7aaf421af4" data-name="Layer 1"
+                        <svg class="room-tile__icon" id="b23be00b-0d64-4bed-9d99-6f7aaf421af4" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M44.53,26.6a7.17,7.17,0,1,1,5.07-2.1h0A7.16,7.16,0,0,1,44.53,26.6Zm0-11.47a4.31,4.31,0,1,0,3,1.26A4.31,4.31,0,0,0,44.53,15.13Z"/><path d="M62.58,1.38A4.7,4.7,0,0,0,58.35.09L45.09,2.66a14.61,14.61,0,0,0-7.56,4L19.92,24.29l-9,2.23a8.75,8.75,0,0,0-4.1,2.31L.46,35.2a1.43,1.43,0,0,0,1,2.44h.08L10,37.2l1.67,1.68L6.85,41.23a1.43,1.43,0,0,0-.38,2.3l14,14a1.44,1.44,0,0,0,1,.42l.24,0a1.47,1.47,0,0,0,1.05-.78l2.35-4.79,1.61,1.6-.45,8.58a1.43,1.43,0,0,0,.85,1.38,1.51,1.51,0,0,0,.58.12,1.44,1.44,0,0,0,1-.42l6.37-6.36a8.75,8.75,0,0,0,2.31-4.1l2.23-9,17.7-17.7a14.5,14.5,0,0,0,4-7.56L63.87,5.61A4.7,4.7,0,0,0,62.58,1.38ZM21,54.05,9.91,42.92,13.78,41,23,50.18ZM8.85,30.86a5.82,5.82,0,0,1,2.76-1.56L16,28.21,10.23,34l-.37.37-4.74.25ZM34.58,52.43A5.89,5.89,0,0,1,33,55.19l-3.74,3.73.25-4.74,6.13-6.13Zm20.68-28-18,18h0l-9,9-7.85-7.86-5.31-5.3h0l-2.55-2.54,27-27a11.72,11.72,0,0,1,5.38-3L58.3,19A11.64,11.64,0,0,1,55.26,24.41Zm5.8-19.34L59,15.68,48.28,5,58.89,2.9a1.85,1.85,0,0,1,2.17,2.17Z"/><path d="M2.63,62.76a1.41,1.41,0,0,1-1-.41,1.44,1.44,0,0,1,0-2l8.12-8.13a1.44,1.44,0,0,1,2,2L3.64,62.35A1.42,1.42,0,0,1,2.63,62.76Z"/><path d="M10.75,62.76a1.43,1.43,0,0,1-1-2.44l4.06-4.07a1.43,1.43,0,0,1,2,2l-4.06,4.06A1.43,1.43,0,0,1,10.75,62.76Z"/><path d="M2.63,54.64a1.43,1.43,0,0,1-1-2.44l4.07-4.06a1.43,1.43,0,0,1,2,2L3.65,54.22A1.44,1.44,0,0,1,2.63,54.64Z"/></svg>
-                            xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
-                            <path
-                                d="M44.53,26.6a7.17,7.17,0,1,1,5.07-2.1h0A7.16,7.16,0,0,1,44.53,26.6Zm0-11.47a4.31,4.31,0,1,0,3,1.26A4.31,4.31,0,0,0,44.53,15.13Z" />
-                            <path
-                                d="M62.58,1.38A4.7,4.7,0,0,0,58.35.09L45.09,2.66a14.61,14.61,0,0,0-7.56,4L19.92,24.29l-9,2.23a8.75,8.75,0,0,0-4.1,2.31L.46,35.2a1.43,1.43,0,0,0,1,2.44h.08L10,37.2l1.67,1.68L6.85,41.23a1.43,1.43,0,0,0-.38,2.3l14,14a1.44,1.44,0,0,0,1,.42l.24,0a1.47,1.47,0,0,0,1.05-.78l2.35-4.79,1.61,1.6-.45,8.58a1.43,1.43,0,0,0,.85,1.38,1.51,1.51,0,0,0,.58.12,1.44,1.44,0,0,0,1-.42l6.37-6.36a8.75,8.75,0,0,0,2.31-4.1l2.23-9,17.7-17.7a14.5,14.5,0,0,0,4-7.56L63.87,5.61A4.7,4.7,0,0,0,62.58,1.38ZM21,54.05,9.91,42.92,13.78,41,23,50.18ZM8.85,30.86a5.82,5.82,0,0,1,2.76-1.56L16,28.21,10.23,34l-.37.37-4.74.25ZM34.58,52.43A5.89,5.89,0,0,1,33,55.19l-3.74,3.73.25-4.74,6.13-6.13Zm20.68-28-18,18h0l-9,9-7.85-7.86-5.31-5.3h0l-2.55-2.54,27-27a11.72,11.72,0,0,1,5.38-3L58.3,19A11.64,11.64,0,0,1,55.26,24.41Zm5.8-19.34L59,15.68,48.28,5,58.89,2.9a1.85,1.85,0,0,1,2.17,2.17Z" />
-                            <path
-                                d="M2.63,62.76a1.41,1.41,0,0,1-1-.41,1.44,1.44,0,0,1,0-2l8.12-8.13a1.44,1.44,0,0,1,2,2L3.64,62.35A1.42,1.42,0,0,1,2.63,62.76Z" />
-                            <path
-                                d="M10.75,62.76a1.43,1.43,0,0,1-1-2.44l4.06-4.07a1.43,1.43,0,0,1,2,2l-4.06,4.06A1.43,1.43,0,0,1,10.75,62.76Z" />
-                            <path
-                                d="M2.63,54.64a1.43,1.43,0,0,1-1-2.44l4.07-4.06a1.43,1.43,0,0,1,2,2L3.65,54.22A1.44,1.44,0,0,1,2.63,54.64Z" />
-                        </svg>
                         <h4 class="room-tile__title">Performance</h4>
                     </div>
                     <div id="performance_preview"></div>
@@ -104,17 +84,13 @@
             <a class="room-tile" href="#product_room">
                 <div class="tile-content">
                     <div class="grid flow-column gap-1 justify-start align-center">
-                        <svg class="room-tile__icon" id="b76bf456-6b89-4220-8b44-f4f7d833bad6" data-name="Layer 1"
+                        <svg class="room-tile__icon" id="b76bf456-6b89-4220-8b44-f4f7d833bad6" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M61.28,22.11c0-.05,0-.09,0-.14L58.62,6A1.68,1.68,0,0,0,57,4.6H7A1.68,1.68,0,0,0,5.38,6L2.72,22c0,.05,0,.09,0,.14s0,.09,0,.14V57.72A1.68,1.68,0,0,0,4.38,59.4H59.62a1.68,1.68,0,0,0,1.68-1.68V22.25C61.3,22.2,61.28,22.16,61.28,22.11Zm-3.64-1.54H39.34L38.51,8h17ZM27.92,23.93h8.16v6.64L33,28.41a1.7,1.7,0,0,0-1.9,0l-3.13,2.16ZM35.15,8,36,20.57H28L28.91,8ZM8.46,8H25.55l-.88,12.61H6.36ZM57.94,56H6.06V23.93h18.5v9.84a1.67,1.67,0,0,0,2.63,1.38L32,31.84l4.81,3.31a1.65,1.65,0,0,0,.95.3,1.76,1.76,0,0,0,.78-.19,1.68,1.68,0,0,0,.9-1.49V23.93h18.5Z"/></svg>
-                            xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
-                            <path
-                                d="M61.28,22.11c0-.05,0-.09,0-.14L58.62,6A1.68,1.68,0,0,0,57,4.6H7A1.68,1.68,0,0,0,5.38,6L2.72,22c0,.05,0,.09,0,.14s0,.09,0,.14V57.72A1.68,1.68,0,0,0,4.38,59.4H59.62a1.68,1.68,0,0,0,1.68-1.68V22.25C61.3,22.2,61.28,22.16,61.28,22.11Zm-3.64-1.54H39.34L38.51,8h17ZM27.92,23.93h8.16v6.64L33,28.41a1.7,1.7,0,0,0-1.9,0l-3.13,2.16ZM35.15,8,36,20.57H28L28.91,8ZM8.46,8H25.55l-.88,12.61H6.36ZM57.94,56H6.06V23.93h18.5v9.84a1.67,1.67,0,0,0,2.63,1.38L32,31.84l4.81,3.31a1.65,1.65,0,0,0,.95.3,1.76,1.76,0,0,0,.78-.19,1.68,1.68,0,0,0,.9-1.49V23.93h18.5Z" />
-                        </svg>
                         <h4 class="room-tile__title">Product</h4>
                     </div>
 
                 </div>
             </a>
-            <!--             <a class="room-tile" href="#purchase_room">
+<!--             <a class="room-tile" href="#purchase_room">
                 <div class="tile-content">
                     <svg class="room-tile__icon" id="bb329e59-3d30-49a7-ac0d-b164d3b3b631" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M42.74,64a14,14,0,1,1,14-14A14,14,0,0,1,42.74,64Zm0-24.73A10.7,10.7,0,1,0,53.44,50,10.71,10.71,0,0,0,42.74,39.27Z"/><path d="M28.7,50H14.08a3.43,3.43,0,0,1-3.42-3.58l1.4-31.51h4.85V17.8a1.71,1.71,0,1,0,3.42,0V14.88H33V17.8a1.71,1.71,0,1,0,3.42,0V14.88h4.84L42.2,36c.18,0,.35,0,.54,0a13.92,13.92,0,0,1,2.9.31l-1.1-24.8H36.42V9.76a9.76,9.76,0,1,0-19.51,0v1.69H8.79L7.24,46.24a6.85,6.85,0,0,0,6.84,7.15H29.14A14.24,14.24,0,0,1,28.7,50ZM20.33,9.76A6.34,6.34,0,1,1,33,9.76v1.69H20.33Z"/><path d="M41.23,54.65a1.69,1.69,0,0,1-1.18-.49l-3-3a1.67,1.67,0,0,1,2.35-2.36l1.84,1.84,4.85-4.85a1.66,1.66,0,0,1,2.35,2.35l-6,6A1.67,1.67,0,0,1,41.23,54.65Z"/></svg>
                     <h4 class="room-tile__title">Buy</h4>
@@ -124,20 +100,13 @@
         <section class="room-container hide-completely page-layout">
             <header class="room-container__header">
                 <button class="grid flow-column gap-1 align-center" onclick="hideRoom()">
-                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M7.828 11H20v2H7.828l5.364 5.364-1.414 1.414L4 12l7.778-7.778 1.414 1.414z"/></svg>
-                        <path fill="none" d="M0 0h24v24H0z" />
-                        <path d="M7.828 11H20v2H7.828l5.364 5.364-1.414 1.414L4 12l7.778-7.778 1.414 1.414z" />
-                    </svg>
                     <h3 id="room_title" class="hide-completely"></h3>
                 </button>
             </header>
             <h1 id="hero_title"></h1>
             <section class="room-carousel">
                 <section id="performance_room" class="grid room">
-                    <div class="legend-container flex align-center justify-center margin-bottom-1r">
-                        <div id="line_sample" class="hide-completely"></div>
-                        <h4 id="graph_legend"></h4>
-                    </div>
                     <section class="graph-container">
                         <canvas id="performance_graph"></canvas>
                     </section>
@@ -148,79 +117,51 @@
                     <section class="features-grid">
                         <div class="feature">
                             <div class="feature__icon">
-                                <svg class="icon" id="f47905c4-be19-4535-912c-ac0a41d5362d" data-name="Layer 1"
+                                <svg class="icon" id="f47905c4-be19-4535-912c-ac0a41d5362d" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M55.59,38a10.43,10.43,0,0,0-3.09-4.19,12.61,12.61,0,0,0-5.4-2.46,11.57,11.57,0,0,0,5.75-4.7,13.39,13.39,0,0,0,1.86-7q0-7.62-5.86-11.46c-3.64-2.39-8.62-3.65-14.91-3.82V0H25.38V4.28H21.7V0H13.14V4.28H7.42v7.84l5.75,1.22V50.7L7.42,51.91v7.81h6.69V64h8.56V59.72h3.68V64h8.56V59.72h.42q10.37,0,15.8-4.15t5.45-12.3A14.09,14.09,0,0,0,55.59,38ZM41.35,21.11A5.14,5.14,0,0,1,39,25.77q-2.34,1.52-7.07,1.51h-5.4V14.48h6q4.45,0,6.65,1.58A5.81,5.81,0,0,1,41.35,21.11ZM41.29,48q-2,1.56-6,1.56H26.54V36.11H36a9.61,9.61,0,0,1,4.19.78,5,5,0,0,1,2.36,2.36,9.14,9.14,0,0,1,.76,4A5.66,5.66,0,0,1,41.29,48Z"/></svg>
-                                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
-                                    <path
-                                        d="M55.59,38a10.43,10.43,0,0,0-3.09-4.19,12.61,12.61,0,0,0-5.4-2.46,11.57,11.57,0,0,0,5.75-4.7,13.39,13.39,0,0,0,1.86-7q0-7.62-5.86-11.46c-3.64-2.39-8.62-3.65-14.91-3.82V0H25.38V4.28H21.7V0H13.14V4.28H7.42v7.84l5.75,1.22V50.7L7.42,51.91v7.81h6.69V64h8.56V59.72h3.68V64h8.56V59.72h.42q10.37,0,15.8-4.15t5.45-12.3A14.09,14.09,0,0,0,55.59,38ZM41.35,21.11A5.14,5.14,0,0,1,39,25.77q-2.34,1.52-7.07,1.51h-5.4V14.48h6q4.45,0,6.65,1.58A5.81,5.81,0,0,1,41.35,21.11ZM41.29,48q-2,1.56-6,1.56H26.54V36.11H36a9.61,9.61,0,0,1,4.19.78,5,5,0,0,1,2.36,2.36,9.14,9.14,0,0,1,.76,4A5.66,5.66,0,0,1,41.29,48Z" />
-                                </svg>
                             </div>
                             <h4 class="feature__title">Bitcoin linked</h4>
                             <p class="feature__brief">Bob's Fund is a 20 year long term Bitcoin price linked product</p>
                         </div>
                         <div class="feature feature--wide">
                             <div class="feature__icon">
-                                <svg class="icon" id="a0972e55-309b-4721-ab64-f0e363b1245c" data-name="Layer 1"
+                                <svg class="icon" id="a0972e55-309b-4721-ab64-f0e363b1245c" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M32,11.86a18.06,18.06,0,1,0,18,18.06A18.08,18.08,0,0,0,32,11.86Zm8.45,14.45-9.57,9.57a1.65,1.65,0,0,1-1.17.48,1.67,1.67,0,0,1-1.18-.48l-5-5a1.66,1.66,0,0,1,2.35-2.35l3.81,3.8L38.1,24a1.66,1.66,0,1,1,2.35,2.35Z"/><path d="M59.42,26.2a5.89,5.89,0,0,0-3.05-9.4h0a5.89,5.89,0,0,1-4.37-6A5.89,5.89,0,0,0,44,5a5.89,5.89,0,0,1-7.07-2.29h0a5.88,5.88,0,0,0-9.88,0A5.89,5.89,0,0,1,20,5a5.89,5.89,0,0,0-8,5.81h0a5.89,5.89,0,0,1-4.37,6,5.89,5.89,0,0,0-3,9.4h0a5.91,5.91,0,0,1,0,7.43A5.89,5.89,0,0,0,7.63,43,5.88,5.88,0,0,1,12,48.94L6.37,58.68a.34.34,0,0,0,.29.51l5.14.05a.34.34,0,0,1,.29.17l2.61,4.42a.33.33,0,0,0,.58,0l5.28-9.14a5.87,5.87,0,0,1,6.5,2.45h0a5.88,5.88,0,0,0,9.88,0h0a5.87,5.87,0,0,1,6.5-2.45l5.28,9.14a.33.33,0,0,0,.58,0l2.61-4.42a.34.34,0,0,1,.29-.17l5.14-.05a.34.34,0,0,0,.29-.51L52,48.94A5.88,5.88,0,0,1,56.37,43a5.89,5.89,0,0,0,3.05-9.4A5.91,5.91,0,0,1,59.42,26.2ZM32,50A20.06,20.06,0,1,1,52.06,29.92,20.08,20.08,0,0,1,32,50Z"/></svg>
-                                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
-                                    <path
-                                        d="M32,11.86a18.06,18.06,0,1,0,18,18.06A18.08,18.08,0,0,0,32,11.86Zm8.45,14.45-9.57,9.57a1.65,1.65,0,0,1-1.17.48,1.67,1.67,0,0,1-1.18-.48l-5-5a1.66,1.66,0,0,1,2.35-2.35l3.81,3.8L38.1,24a1.66,1.66,0,1,1,2.35,2.35Z" />
-                                    <path
-                                        d="M59.42,26.2a5.89,5.89,0,0,0-3.05-9.4h0a5.89,5.89,0,0,1-4.37-6A5.89,5.89,0,0,0,44,5a5.89,5.89,0,0,1-7.07-2.29h0a5.88,5.88,0,0,0-9.88,0A5.89,5.89,0,0,1,20,5a5.89,5.89,0,0,0-8,5.81h0a5.89,5.89,0,0,1-4.37,6,5.89,5.89,0,0,0-3,9.4h0a5.91,5.91,0,0,1,0,7.43A5.89,5.89,0,0,0,7.63,43,5.88,5.88,0,0,1,12,48.94L6.37,58.68a.34.34,0,0,0,.29.51l5.14.05a.34.34,0,0,1,.29.17l2.61,4.42a.33.33,0,0,0,.58,0l5.28-9.14a5.87,5.87,0,0,1,6.5,2.45h0a5.88,5.88,0,0,0,9.88,0h0a5.87,5.87,0,0,1,6.5-2.45l5.28,9.14a.33.33,0,0,0,.58,0l2.61-4.42a.34.34,0,0,1,.29-.17l5.14-.05a.34.34,0,0,0,.29-.51L52,48.94A5.88,5.88,0,0,1,56.37,43a5.89,5.89,0,0,0,3.05-9.4A5.91,5.91,0,0,1,59.42,26.2ZM32,50A20.06,20.06,0,1,1,52.06,29.92,20.08,20.08,0,0,1,32,50Z" />
-                                </svg>
                             </div>
                             <h4 class="feature__title">Better returns than conventional assets</h4>
-                            <p class="feature__brief">Over a very long time period, Bitcoin returns should outstrip
+                            <p class="feature__brief">Over a very long time period, Bitcoin returns should outstrip returns on conventional assets like real estate and stocks</p>
-                                returns on conventional assets like real estate and stocks</p>
                         </div>
                         <div class="feature feature--wide">
                             <div class="feature__icon">
-                                <svg class="icon" id="a9cf0968-17a3-4e2e-8dcf-10d366d12d28" data-name="Layer 1"
+                                <svg class="icon" id="a9cf0968-17a3-4e2e-8dcf-10d366d12d28" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M17.28,29a16.35,16.35,0,0,1-7.63-1.64,11.32,11.32,0,0,1-4.77-4.54,13.17,13.17,0,0,1-1.63-6.61V12.88A13.3,13.3,0,0,1,4.88,6.25,11.52,11.52,0,0,1,9.6,1.67,15.9,15.9,0,0,1,17.2,0a15.94,15.94,0,0,1,7.63,1.67,11.43,11.43,0,0,1,4.71,4.55,13.5,13.5,0,0,1,1.6,6.66v3.29a13.36,13.36,0,0,1-1.6,6.61,11.33,11.33,0,0,1-4.68,4.54A16,16,0,0,1,17.28,29Zm0-8a3.94,3.94,0,0,0,3.21-1.39,5.13,5.13,0,0,0,1.16-3.4V12.88a5.31,5.31,0,0,0-1.16-3.47A4,4,0,0,0,17.2,8a3.94,3.94,0,0,0-3.27,1.41,5.35,5.35,0,0,0-1.14,3.47v3.29A5.11,5.11,0,0,0,14,19.59,4.09,4.09,0,0,0,17.28,21Zm3,37.61-6.93-3.43L43.76,6.46,50.7,9.88ZM46.89,64a16.15,16.15,0,0,1-7.64-1.67,11.75,11.75,0,0,1-4.81-4.58,13,13,0,0,1-1.67-6.58V47.91a13.19,13.19,0,0,1,1.63-6.58,11.41,11.41,0,0,1,4.77-4.58,16.11,16.11,0,0,1,7.63-1.67,16,16,0,0,1,7.6,1.65,11.39,11.39,0,0,1,4.72,4.55,13.3,13.3,0,0,1,1.63,6.63v3.26a13.5,13.5,0,0,1-1.61,6.63,11.29,11.29,0,0,1-4.68,4.55A15.87,15.87,0,0,1,46.89,64Zm0-8c1.68,0,2.81-.42,3.4-1.26a6.33,6.33,0,0,0,.88-3.61V47.91a5.31,5.31,0,0,0-1.12-3.42,3.88,3.88,0,0,0-3.25-1.41,4,4,0,0,0-3.33,1.41,5.31,5.31,0,0,0-1.12,3.42v3.26a4.93,4.93,0,0,0,1.33,3.42A4.17,4.17,0,0,0,46.89,56Z"/></svg>
-                                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
-                                    <path
-                                        d="M17.28,29a16.35,16.35,0,0,1-7.63-1.64,11.32,11.32,0,0,1-4.77-4.54,13.17,13.17,0,0,1-1.63-6.61V12.88A13.3,13.3,0,0,1,4.88,6.25,11.52,11.52,0,0,1,9.6,1.67,15.9,15.9,0,0,1,17.2,0a15.94,15.94,0,0,1,7.63,1.67,11.43,11.43,0,0,1,4.71,4.55,13.5,13.5,0,0,1,1.6,6.66v3.29a13.36,13.36,0,0,1-1.6,6.61,11.33,11.33,0,0,1-4.68,4.54A16,16,0,0,1,17.28,29Zm0-8a3.94,3.94,0,0,0,3.21-1.39,5.13,5.13,0,0,0,1.16-3.4V12.88a5.31,5.31,0,0,0-1.16-3.47A4,4,0,0,0,17.2,8a3.94,3.94,0,0,0-3.27,1.41,5.35,5.35,0,0,0-1.14,3.47v3.29A5.11,5.11,0,0,0,14,19.59,4.09,4.09,0,0,0,17.28,21Zm3,37.61-6.93-3.43L43.76,6.46,50.7,9.88ZM46.89,64a16.15,16.15,0,0,1-7.64-1.67,11.75,11.75,0,0,1-4.81-4.58,13,13,0,0,1-1.67-6.58V47.91a13.19,13.19,0,0,1,1.63-6.58,11.41,11.41,0,0,1,4.77-4.58,16.11,16.11,0,0,1,7.63-1.67,16,16,0,0,1,7.6,1.65,11.39,11.39,0,0,1,4.72,4.55,13.3,13.3,0,0,1,1.63,6.63v3.26a13.5,13.5,0,0,1-1.61,6.63,11.29,11.29,0,0,1-4.68,4.55A15.87,15.87,0,0,1,46.89,64Zm0-8c1.68,0,2.81-.42,3.4-1.26a6.33,6.33,0,0,0,.88-3.61V47.91a5.31,5.31,0,0,0-1.12-3.42,3.88,3.88,0,0,0-3.25-1.41,4,4,0,0,0-3.33,1.41,5.31,5.31,0,0,0-1.12,3.42v3.26a4.93,4.93,0,0,0,1.33,3.42A4.17,4.17,0,0,0,46.89,56Z" />
-                                </svg>
                             </div>
                             <h4 class="feature__title">Get 100% of gains</h4>
                             <p class="feature__brief">Investors are entitled to 100% of Bitcoin price gains</p>
                         </div>
                         <div class="feature">
                             <div class="feature__icon">
-                                <svg class="icon" id="b25d5f7d-dd5a-4cc1-a2c9-37dbecdeaff1" data-name="Layer 1"
+                                <svg class="icon" id="b25d5f7d-dd5a-4cc1-a2c9-37dbecdeaff1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M32.11,64q-10.12,0-16-6.41t-5.9-19V25.46q0-12.56,5.9-19T32,0Q42,0,47.89,6.45t5.92,19V38.58q0,12.6-5.87,19T32.11,64Zm0-11.41a5.53,5.53,0,0,0,5-3q1.76-3,1.75-10.15V24.52c0-4.67-.6-8-1.79-10a5.87,5.87,0,0,0-10.26,0q-1.76,3-1.75,10.06V39.43q0,7.18,1.75,10.17A5.7,5.7,0,0,0,32.11,52.59Z"/></svg>
-                                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
-                                    <path
-                                        d="M32.11,64q-10.12,0-16-6.41t-5.9-19V25.46q0-12.56,5.9-19T32,0Q42,0,47.89,6.45t5.92,19V38.58q0,12.6-5.87,19T32.11,64Zm0-11.41a5.53,5.53,0,0,0,5-3q1.76-3,1.75-10.15V24.52c0-4.67-.6-8-1.79-10a5.87,5.87,0,0,0-10.26,0q-1.76,3-1.75,10.06V39.43q0,7.18,1.75,10.17A5.7,5.7,0,0,0,32.11,52.59Z" />
-                                </svg>
                             </div>
                             <h4 class="feature__title">No management fee</h4>
                             <p class="feature__brief">The management fees on this product is zero</p>
                         </div>
                         <div class="feature">
                             <div class="feature__icon">
-                                <svg class="icon" id="e0287cba-7cef-4217-aee4-c8ac3e32d7a5" data-name="Layer 1"
+                                <svg class="icon" id="e0287cba-7cef-4217-aee4-c8ac3e32d7a5" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M49.52,20.65a1,1,0,0,1,0-1.16L56.94,9a1,1,0,0,0-.83-1.58H18.32V2.52a2.52,2.52,0,1,0-5,0V59H9.4a2.52,2.52,0,1,0,0,5H22.21a2.52,2.52,0,0,0,0-5H18.32V32.73H56.11a1,1,0,0,0,.83-1.59Z"/></svg>
-                                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
-                                    <path
-                                        d="M49.52,20.65a1,1,0,0,1,0-1.16L56.94,9a1,1,0,0,0-.83-1.58H18.32V2.52a2.52,2.52,0,1,0-5,0V59H9.4a2.52,2.52,0,1,0,0,5H22.21a2.52,2.52,0,0,0,0-5H18.32V32.73H56.11a1,1,0,0,0,.83-1.59Z" />
-                                </svg>
                             </div>
                             <h4 class="feature__title">Aligned goals</h4>
-                            <p class="feature__brief">RanchiMall earns by having invested an equal amount as every
+                            <p class="feature__brief">RanchiMall earns by having invested an equal amount as every investor, thus the interests of fund manager, and fund investors are totally aligned</p>
-                                investor, thus the interests of fund manager, and fund investors are totally aligned</p>
                         </div>
                     </section>
                     <p class="margin-bottom-3r">
-                        Bobs Fund allows customers to take a direct share in Bitcoin and they are automatically guided
+                        Bobs Fund allows customers to take a direct share in Bitcoin and they are automatically guided into a
-                        into a
                         long term investment plan. Bitcoin is a long term investors paradise with supply artificially
-                        constrained, and demand only growing. There are no price guarantees in this product. But the
+                        constrained, and demand only growing. There are no price guarantees in this product. But the long
-                        long
+                        duration of the investment ensures that customers will get an outsized rate of return. RanchiMall as
-                        duration of the investment ensures that customers will get an outsized rate of return.
-                        RanchiMall as
                         Fund Manager does not charge management fees.
                     </p>
                     <h4 class="h4 margin-bottom-1r">Risk Management</h4>
                     <p class="margin-bottom-3r">
                         There is no price risk for RanchiMall in Bobs Fund. But since this is a long term
-                        product, information security risks are high to maintain Bitcoins safely. Bitcoin keys must be
+                        product, information security risks are high to maintain Bitcoins safely. Bitcoin keys must be split
-                        split
                         using Shamir Secret Key Share algorithm, and should be recombined at the time of redemption. The
                         number of shares should have enough redundancy so that if some holders are not around, the keys
                         must still be recovered.
@@ -228,15 +169,12 @@
                     <h4 class="h4 margin-bottom-1r">Founder Notes</h4>
                     <p class="margin-bottom-3r">
                         Bobs Fund was first issued in my MBA classmates WhatsApp group, and restricted only to my
-                        classmates in June 2017. The product had a long term duration of 20 years, and it needed lot of
+                        classmates in June 2017. The product had a long term duration of 20 years, and it needed lot of trust
-                        trust
                         which my classamtes had in me. We kept this product concept under observation and testing for 4
-                        years, before exploring options to make it public. Another objective was to try out an idea
+                        years, before exploring options to make it public. Another objective was to try out an idea where
-                        where
                         fund management expenses are nil, as fund management fees eats up a lot of customer returns over
                         long term. Instead we made an equal investment as every contributing member did, and we hope to
-                        earn over the long life time of this product. Over time we realized, we could also use the
+                        earn over the long life time of this product. Over time we realized, we could also use the Bitcoin as
-                        Bitcoin as
                         collateral for DeFi products, and that gives us an additional earning stream.
                     </p>
                 </section>
@@ -250,7 +188,7 @@
             </footer>
         </section>
         <section>
-            <a class="ext-link-tile" href="https://ranchimall.github.io/bobsfund/" target="_blank">
+            <a class="ext-link-tile" href="https://ranchimall.github.io/bobsfund/" target="_blank" >
                 <div class="grid">
                     <h4 class="tile__title">See Bob's Fund in action</h4>
                     <p class="tile__brief">Visit the website to see investors and asset performance</p>
@@ -260,16 +198,15 @@
         </section>
     </main>
 
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/chart.js@3.3.2/dist/chart.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>
     <script src="assets/js/components.js"></script>
-    <script src="https://unpkg.com/uhtml@3.0.1/es.js"></script>
     <script src="assets/js/index.js"></script>
     <script>
         const bobFund = [
             {
                 release: 1497970979000,
-                invested: 770000,
+                invested: 11846.15,
                 BTC_base: 2676.50,
                 USD_base: 65.00,
                 investors: [
@@ -487,7 +424,7 @@
             },
             {
                 release: 1622041379000,
-                invested: 1000000,
+                invested: 13781.70,
                 BTC_base: 37488.00,
                 USD_base: 72.56,
                 href: `https://ranchimall.github.io/bobsfund/#cf16bb877f49cb70348bbddeb439f4b46fb5d51b0c09763667762bbea36e8305`
@@ -525,33 +462,43 @@
         }).catch(error => console.error(error))
 
         function calcNetValue(obj) {
-            let { isHistorical = false, BTC_base, USD_base, amount, fee, histBtc, histUsd } = obj
+            let {isHistorical = false, BTC_base, USD_base, amount, fee, histBtc, histUsd} = obj
             let gain, interest, net = 0, currentValue = 0;
-            if (isHistorical) {
+            console.info(obj)
+            if(isHistorical){
                 gain = (histBtc - BTC_base) / BTC_base;
             }
-            else {
+            else{
                 gain = (BTC_current - BTC_base) / BTC_base;
             }
             interest = gain * (1 - fee)
             net = amount / USD_base;
             net += net * interest;
-            if (isHistorical) {
+            if(isHistorical){
                 currentValue = net * histUsd
             }
-            else {
+            else{
                 currentValue = net * USD_current
             }
             percentGain = ((currentValue - amount) / amount) * 100
             return [currentValue, percentGain.toFixed(0)];
         }
-        function renderAllFundInvestors() {
+        function renderAllFundInvestors(){
+            const frag = document.createDocumentFragment()
+            const timelineItemsFrag = document.createDocumentFragment()
             const randIndex = getRandom(0, bobFund.length - 1)
-            const timelineItems = bobFund.map((fund, index) => {
+            getRef('bobs_fund_timeline').innerHTML = ''
-                const { release, invested, investors, href, USD_base, BTC_base } = fund
+            bobFund.forEach((fund, index) => {
-                let timelineContents
+                const {release, invested, investors, href, USD_base, BTC_base} = fund
-                if (fund.hasOwnProperty('investors')) {
+                const timelineItem = create('li', {className: 'timeline-item'})
-                    const fundRows = investors.map(investor => {
+
+                const tilelineItemHeader = create('header', {
+                    className: 'timeline-item__header',
+                    text: getFormatedTime(release, true)
+                })
+
+                if(fund.hasOwnProperty('investors')){
+                    investors.forEach(investor => {
                         let obj = {
                             BTC_base,
                             USD_base,
@@ -561,35 +508,51 @@
                         let [currentValue, gain] = calcNetValue(obj)
                         currentValue = parseFloat(currentValue.toFixed(2))
                         timeElapsed = (new Date().getFullYear() - 2017)
-                        return render.bobFundRow({ ...investor, currentValue, gain, timeElapsed })
+                        frag.append(render.bobFundRow({...investor, currentValue, gain, timeElapsed}))
                     })
-                    timelineContents = html`<div class="grid series-container series-container--bobsfund"> ${fundRows} </div>`;
+                    const fundContainer = create('div', {
-                } else {
+                        className: 'grid series-container series-container--bobs-fund'
-                    let obj = {
+                    })
-                        BTC_base,
+
-                        USD_base,
+                    const heading = create('h4', {
-                        amount: invested,
+                        className: 'margin-bottom-1r margin-top-1-5',
-                        fee: 0
+                        text: 'Fund investors'
-                    }
+                    })
-                    let [currentValue, gain] = calcNetValue(obj)
+
-                    currentValue = parseFloat(currentValue.toFixed(2))
+                    fundContainer.append(frag)
-                    timelineContents = html`
+                    timelineItem.append(heading, fundContainer)
-                        <div class="grid card">
-                            <div class="flex space-between">
-                                <div class="grid">
-                                    <h5 class="label color-0-8 weight-500">Total fund investment</h5>
-                                    <h3 class="value original-value">${formatAmount(invested, 'INR')}</h3>
-                                </div>
-                                <div class="grid justify-right text-align-right">
-                                    <h4 class="label color-0-8 weight-500">Current value</h4>
-                                    <h3 class="value current-value" style="color: var(--green)">${formatAmount(currentValue, 'INR')}</h3>
-                                </div>
-                            </div>
-                            <a class="button button--filled justify-right" href='${href}' target="_blank">See investors</a>
-                        </div>
-                    `
                 }
-                if (index === 0) {
+                else{
+                    const fundCard = create('div', {
+                        className: 'grid card'
+                    })
+                    let obj = {
+                            BTC_base,
+                            USD_base,
+                            amount: invested,
+                            fee: 0
+                        }
+                    let [currentValue, gain] = calcNetValue(obj)
+                        currentValue = parseFloat(currentValue.toFixed(2))
+                    fundCard.innerHTML = `
+                        <div class="flex space-between">
+                            <div class="grid">
+                                <h5 class="label color-0-8 weight-500">Total fund investment</h5>
+                                <h3 class="value original-value">${invested.toLocaleString('en-US', {style: 'currency' ,currency: 'USD'})}</h3>
+                            </div>
+                            <div class="grid justify-right text-align-right">
+                                <h4 class="label color-0-8 weight-500">Current value</h4>
+                                <h3 class="value current-value" style="color: var(--green)">${currentValue.toLocaleString('en-US', {style: 'currency', currency: 'USD'})}</h3>
+                            </div>
+                        </div>
+                        <a class="button button--filled justify-right" href='${href}' target="_blank">See investors</a>
+                    `
+                    timelineItem.append(fundCard)
+                }
+                timelineItem.prepend(tilelineItemHeader)
+                timelineItemsFrag.append(timelineItem)
+                
+                if(index === 0){
                     let obj = {
                         BTC_base,
                         USD_base,
@@ -598,37 +561,31 @@
                         release
                     }
                     renderGraph(obj)
+                    const fundCard = create('div', {
+                        className: 'grid card'
+                    })
                     let [currentValue, gain] = calcNetValue(obj)
-                    currentValue = parseFloat(currentValue.toFixed(2))
+                        currentValue = parseFloat(currentValue.toFixed(2))
-                    const fundCard = html`
+                    fundCard.innerHTML = `
-                        <div class="grid card">
+                        <div class="grid">
+                            <h5 class="label color-0-8 weight-500">Fund start date</h5>
+                            <h3 class="value">${getFormatedTime(release, true)}</h3>
+                        </div>
+                        <div class="flex space-between">
                             <div class="grid">
-                                <h5 class="label color-0-8 weight-500">Fund start date</h5>
+                                <h5 class="label color-0-8 weight-500">Total fund investment</h5>
-                                <h3 class="value">${getFormatedTime(release, true)}</h3>
+                                <h3 class="value original-value">${invested.toLocaleString('en-US', {style: 'currency' ,currency: 'USD'})}</h3>
                             </div>
-                            <div class="flex space-between">
+                            <div class="grid justify-right text-align-right">
-                                <div class="grid">
+                                <h4 class="label color-0-8 weight-500">Current value</h4>
-                                    <h5 class="label color-0-8 weight-500">Total fund investment</h5>
+                                <h3 class="value current-value" style="color: var(--green)">${currentValue.toLocaleString('en-US', {style: 'currency', currency: 'USD'})}</h3>
-                                    <h3 class="value original-value">${formatAmount(invested, 'INR')}</h3>
-                                </div>
-                                <div class="grid justify-right text-align-right">
-                                    <h4 class="label color-0-8 weight-500">Current value</h4>
-                                    <h3 class="value current-value" style="color: var(--green)">${formatAmount(currentValue, 'INR')}</h3>
-                                </div>
                             </div>
                         </div>
                     `
-                    renderElem(getRef('performance_preview'), fundCard)
+                    getRef('performance_preview').append(fundCard)
                 }
-                return html`
-                    <li class="timeline-item">
-                        <h4 class="timeline-item__header">${getFormatedTime(release, true)}</h4>
-                        <h4 class="margin-bottom-1r margin-top-1-5">Fund investors</h4>
-                        ${timelineContents}
-                    </li>
-                `;
             })
-            renderElem(getRef('bobs_fund_timeline'), html`${timelineItems}`)
+            getRef('bobs_fund_timeline').append(timelineItemsFrag)
         }
 
         async function getPrices() {
@@ -641,7 +598,7 @@
         let dates = []
         let historicalData = []
         let tableOfData = []
-
+            
         async function getData(obj) {
             let [btcPrices, inrPrices] = await getPrices()
             btcPrices = btcPrices['Time Series (Digital Currency Monthly)']
@@ -665,7 +622,7 @@
                     let histBtc = parseFloat(allBtcPrices[index])
                     let histUsd = parseFloat(inrPrices[dataPoint]['1. open'])
                     obj.isHistorical = true
-                    let [currentValue, gain] = calcNetValue({ ...obj, histBtc, histUsd })
+                    let [currentValue, gain] = calcNetValue({...obj, histBtc, histUsd})
                     // console.log(currentValue)
                     historicalData.push(currentValue)
                     index++
@@ -681,35 +638,30 @@
         let gradientFill
         let lineColor
         let textColor
-        let myChart
 
-        function selectGraphColors() {
+        function selectGraphColors(){
             gradientFill = ctx.createLinearGradient(200, 0, 200, 400);
             let cssTextColor = getComputedStyle(document.body).getPropertyValue('--text-color')
             gradientFill.addColorStop(0, `rgba(${cssTextColor}, 0.2)`);
             gradientFill.addColorStop(1, "transparent");
-            if (myChart) {
+            lineColor = ctx.createLinearGradient(500, 0, 100, 0)
-                lineColor = ctx.createLinearGradient(0, 0, myChart.chartArea.width, 0)
+            lineColor.addColorStop(0, "#80b6f4");
-            } else {
+            lineColor.addColorStop(1, "#f49080");
-                lineColor = ctx.createLinearGradient(0, 0, 500, 0)
-            }
-            lineColor.addColorStop(0, "#f49080");
-            lineColor.addColorStop(1, "#80b6f4");
             // lineColor = getComputedStyle(document.body).getPropertyValue('--secondary-text-color');
             textColor = `rgba(${cssTextColor}, 0.8)`
         }
+        selectGraphColors()
 
+        let myChart
         async function renderGraph(obj) {
             await getData(obj)
-            selectGraphColors()
+            
-            getRef('line_sample').classList.remove('hide-completely')
-            getRef('graph_legend').textContent = `${getFormatedTime(obj.release, true)} fund performace`
-
             myChart = new Chart(ctx, {
                 type: 'line',
                 data: {
                     labels: dates.reverse(),
                     datasets: [{
+                        label: `${getFormatedTime(obj.release, true)} fund performace($)`,
                         data: historicalData.reverse(),
                         borderColor: lineColor,
                         fill: true,
@@ -724,14 +676,7 @@
                     }]
                 },
                 options: {
-                    locale: 'en-IN',
                     responsive: true,
-                    maintainAspectRatio: false,
-                    plugins: {
-                        legend: {
-                            display: false,
-                        }
-                    },
                     scales: {
                         y: {
                             ticks: {
@@ -754,16 +699,14 @@
             });
         }
 
-        document.addEventListener("themechange", function (e) {
+        getRef("theme_switcher").addEventListener("change", function (e) {
             selectGraphColors()
             myChart.data.datasets[0].borderColor = lineColor
             myChart.data.datasets[0].backgroundColor = gradientFill
             myChart.options.scales.x.ticks.color = textColor;
             myChart.options.scales.y.ticks.color = textColor;
-            myChart.options.plugins.legend.labels.color = textColor;
             myChart.update()
         });
     </script>
 </body>
-
 </html>

floblockchaincontract.html

@@ -24,8 +24,7 @@
             <div class="grid">
                 <h4 class="h4 phase__title"></h4>
                 <h5 class="h5 phase__date weight-500 color-0-8"></h5>
-                <p class="phase__description color-0-8">Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime
+                <p class="phase__description color-0-8">Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime nihil doloremque, mollitia dolor minima et.</p>
-                    nihil doloremque, mollitia dolor minima et.</p>
             </div>
         </li>
     </template>
@@ -57,24 +56,22 @@
         </header>
         <ul id="floor_list" class="grid"></ul>
     </section>
-    <header id="main_header" class="full-bleed">
+    <header id="main_header" class="grid align-center full-bleed">
         <button id="elevator_button" class="button" onclick="showSiteMap()">
-            <svg class="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <svg class="icon button__icon--left" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 3L16.3301 10.5H7.66987L12 3Z"/><path d="M12 21L7.66987 13.5L16.3301 13.5L12 21Z"/></svg>
-                <path d="M12 3L16.3301 10.5H7.66987L12 3Z" />
-                <path d="M12 21L7.66987 13.5L16.3301 13.5L12 21Z" />
-            </svg>
             <span class="button__label">
                 Elevator
             </span>
         </button>
         <a href="index.html" class="main-logo flex align-center page-link justify-self-center" data-target="home_page">
-            <svg id="main_header__logo" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+            <svg id="main_header__logo" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.46,21.32C20,19.78,18.6,18.59,15.3,17a12.67,12.67,0,0,1-2.64-1.56,4.27,4.27,0,0,1-.79-1,2.6,2.6,0,0,1,0-1.41c.24-.68.49-1,2.43-2.85a7.18,7.18,0,0,0,2.09-2.92,4.25,4.25,0,0,0,0-1.77,6.52,6.52,0,0,0-2.85-3.11c-.56-.36-.81-.4-.81-.15a2.33,2.33,0,0,1-.18.45L12.4,3l-.53-.36c-.28-.21-.64-.41-.77-.49s-.46-.11-.46,0a6.21,6.21,0,0,1-.37.83s-.08,0-.17-.08c-1.15-.83-1.64-1-1.64-.73A7.33,7.33,0,0,1,7.7,3.65C6.48,5.68,5.24,6.7,4,6.7c-.56,0-.54,0-.37.64s.2.58.68.43a3.37,3.37,0,0,0,1.09-.54.86.86,0,0,1,.3-.17,1.34,1.34,0,0,1,.13.39.79.79,0,0,0,.17.4A3.5,3.5,0,0,0,7.37,7.3L7.8,7l.09.34c.12.45.19.51.62.39a4.25,4.25,0,0,0,2.17-1.54l.38-.45,0,.39A5.92,5.92,0,0,1,8.89,9.54L7.67,10.71c-2,1.93-1.89,3.51.37,5a27.41,27.41,0,0,0,2.89,1.51c.17.07.62.32,1,.54C14,19,15,20.23,15,21.48a2,2,0,0,0,0,.49h0c0,.05,0,.05.56-.1a1.89,1.89,0,0,0,.53-.21,2.41,2.41,0,0,0-.34-1.15,7.05,7.05,0,0,0-1.68-1.77,21.91,21.91,0,0,0-3.2-1.83A9.53,9.53,0,0,1,8.16,15.2a2.18,2.18,0,0,1-.74-1.55C7.42,12.79,7.86,12,9,11c1.77-1.64,2.45-2.45,2.92-3.55a2.28,2.28,0,0,0,.26-1.26A2,2,0,0,0,12,5.06l-.2-.45L12,4.3l.28-.49.09-.18L12.6,4a3.69,3.69,0,0,1,.61,1.76A3.47,3.47,0,0,1,12.94,7l-.09.25s-.21.37-.41.69A17.78,17.78,0,0,1,9.91,10.6c-1.07,1-1.43,1.62-1.47,2.47a2.05,2.05,0,0,0,.7,1.73,10.47,10.47,0,0,0,3.28,2.08c2.28,1.13,3.26,1.81,4,2.73a2.94,2.94,0,0,1,.74,1.75,1.26,1.26,0,0,0,.09.57.48.48,0,0,0,.26,0l.51-.13.29-.08,0-.28c-.13-1-1-2-2.47-3a25.52,25.52,0,0,0-3.26-1.77,8.59,8.59,0,0,1-2.23-1.43,2.09,2.09,0,0,1-.5-2.62c.26-.53.5-.83,2.35-2.6,1.51-1.45,2.15-2.58,2.15-3.79A3.67,3.67,0,0,0,13,3.48a3,3,0,0,1-.4-.42A1.85,1.85,0,0,1,13,2.33a6.74,6.74,0,0,1,1.83,1.73,2.62,2.62,0,0,1,.47,1.68,3,3,0,0,1-.55,1.84c-.45.78-.79,1.14-2.67,2.93a5.56,5.56,0,0,0-1.3,1.64,1.77,1.77,0,0,0-.21,1,1.76,1.76,0,0,0,.19.92,6.28,6.28,0,0,0,2.9,2.34,21.6,21.6,0,0,1,3.66,2c1.35,1,2,2,2,3a1.06,1.06,0,0,0,.05.47,2.83,2.83,0,0,0,1-.24C20.56,21.68,20.56,21.66,20.46,21.32ZM7.29,6.4h0a2.23,2.23,0,0,1-.9.28L6,6.72l.43-.53a15.22,15.22,0,0,0,1.89-3,3.52,3.52,0,0,1,.38-.67c.07-.08.49.2,1,.64l.39.35L9.66,4A6.7,6.7,0,0,1,7.29,6.4Zm3.58-1.11A5.8,5.8,0,0,1,9.25,6.51h0a3.3,3.3,0,0,1-.74.17l-.35,0,.39-.49a15.64,15.64,0,0,0,1.32-2,4.63,4.63,0,0,1,.28-.49c.06-.08.33.26.57.77l.28.57Zm1-1.4a1.63,1.63,0,0,1-.28.4A6.63,6.63,0,0,1,11,3.72l-.53-.56.12-.29c.2-.49.24-.51.64-.19a5.57,5.57,0,0,1,.85.78A2.78,2.78,0,0,1,11.87,3.89Z"/></svg>
-                <path
-                    d="M20.46,21.32C20,19.78,18.6,18.59,15.3,17a12.67,12.67,0,0,1-2.64-1.56,4.27,4.27,0,0,1-.79-1,2.6,2.6,0,0,1,0-1.41c.24-.68.49-1,2.43-2.85a7.18,7.18,0,0,0,2.09-2.92,4.25,4.25,0,0,0,0-1.77,6.52,6.52,0,0,0-2.85-3.11c-.56-.36-.81-.4-.81-.15a2.33,2.33,0,0,1-.18.45L12.4,3l-.53-.36c-.28-.21-.64-.41-.77-.49s-.46-.11-.46,0a6.21,6.21,0,0,1-.37.83s-.08,0-.17-.08c-1.15-.83-1.64-1-1.64-.73A7.33,7.33,0,0,1,7.7,3.65C6.48,5.68,5.24,6.7,4,6.7c-.56,0-.54,0-.37.64s.2.58.68.43a3.37,3.37,0,0,0,1.09-.54.86.86,0,0,1,.3-.17,1.34,1.34,0,0,1,.13.39.79.79,0,0,0,.17.4A3.5,3.5,0,0,0,7.37,7.3L7.8,7l.09.34c.12.45.19.51.62.39a4.25,4.25,0,0,0,2.17-1.54l.38-.45,0,.39A5.92,5.92,0,0,1,8.89,9.54L7.67,10.71c-2,1.93-1.89,3.51.37,5a27.41,27.41,0,0,0,2.89,1.51c.17.07.62.32,1,.54C14,19,15,20.23,15,21.48a2,2,0,0,0,0,.49h0c0,.05,0,.05.56-.1a1.89,1.89,0,0,0,.53-.21,2.41,2.41,0,0,0-.34-1.15,7.05,7.05,0,0,0-1.68-1.77,21.91,21.91,0,0,0-3.2-1.83A9.53,9.53,0,0,1,8.16,15.2a2.18,2.18,0,0,1-.74-1.55C7.42,12.79,7.86,12,9,11c1.77-1.64,2.45-2.45,2.92-3.55a2.28,2.28,0,0,0,.26-1.26A2,2,0,0,0,12,5.06l-.2-.45L12,4.3l.28-.49.09-.18L12.6,4a3.69,3.69,0,0,1,.61,1.76A3.47,3.47,0,0,1,12.94,7l-.09.25s-.21.37-.41.69A17.78,17.78,0,0,1,9.91,10.6c-1.07,1-1.43,1.62-1.47,2.47a2.05,2.05,0,0,0,.7,1.73,10.47,10.47,0,0,0,3.28,2.08c2.28,1.13,3.26,1.81,4,2.73a2.94,2.94,0,0,1,.74,1.75,1.26,1.26,0,0,0,.09.57.48.48,0,0,0,.26,0l.51-.13.29-.08,0-.28c-.13-1-1-2-2.47-3a25.52,25.52,0,0,0-3.26-1.77,8.59,8.59,0,0,1-2.23-1.43,2.09,2.09,0,0,1-.5-2.62c.26-.53.5-.83,2.35-2.6,1.51-1.45,2.15-2.58,2.15-3.79A3.67,3.67,0,0,0,13,3.48a3,3,0,0,1-.4-.42A1.85,1.85,0,0,1,13,2.33a6.74,6.74,0,0,1,1.83,1.73,2.62,2.62,0,0,1,.47,1.68,3,3,0,0,1-.55,1.84c-.45.78-.79,1.14-2.67,2.93a5.56,5.56,0,0,0-1.3,1.64,1.77,1.77,0,0,0-.21,1,1.76,1.76,0,0,0,.19.92,6.28,6.28,0,0,0,2.9,2.34,21.6,21.6,0,0,1,3.66,2c1.35,1,2,2,2,3a1.06,1.06,0,0,0,.05.47,2.83,2.83,0,0,0,1-.24C20.56,21.68,20.56,21.66,20.46,21.32ZM7.29,6.4h0a2.23,2.23,0,0,1-.9.28L6,6.72l.43-.53a15.22,15.22,0,0,0,1.89-3,3.52,3.52,0,0,1,.38-.67c.07-.08.49.2,1,.64l.39.35L9.66,4A6.7,6.7,0,0,1,7.29,6.4Zm3.58-1.11A5.8,5.8,0,0,1,9.25,6.51h0a3.3,3.3,0,0,1-.74.17l-.35,0,.39-.49a15.64,15.64,0,0,0,1.32-2,4.63,4.63,0,0,1,.28-.49c.06-.08.33.26.57.77l.28.57Zm1-1.4a1.63,1.63,0,0,1-.28.4A6.63,6.63,0,0,1,11,3.72l-.53-.56.12-.29c.2-.49.24-.51.64-.19a5.57,5.57,0,0,1,.85.78A2.78,2.78,0,0,1,11.87,3.89Z" />
-            </svg>
             <h4 class="h4 header__company-name">RanchiMall</h4>
         </a>
-        <theme-toggle></theme-toggle>
+        <label class="theme-switcher" title="Change theme">
+            <input id="theme_switcher" class="theme-switcher__checkbox" type="checkbox">
+            <svg class="icon moon-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M10 6a8 8 0 0 0 11.955 6.956C21.474 18.03 17.2 22 12 22 6.477 22 2 17.523 2 12c0-5.2 3.97-9.474 9.044-9.955A7.963 7.963 0 0 0 10 6zm-6 6a8 8 0 0 0 8 8 8.006 8.006 0 0 0 6.957-4.045c-.316.03-.636.045-.957.045-5.523 0-10-4.477-10-10 0-.321.015-.64.045-.957A8.006 8.006 0 0 0 4 12zm14.164-9.709L19 2.5v1l-.836.209a2 2 0 0 0-1.455 1.455L16.5 6h-1l-.209-.836a2 2 0 0 0-1.455-1.455L13 3.5v-1l.836-.209A2 2 0 0 0 15.29.836L15.5 0h1l.209.836a2 2 0 0 0 1.455 1.455zm5 5L24 7.5v1l-.836.209a2 2 0 0 0-1.455 1.455L21.5 11h-1l-.209-.836a2 2 0 0 0-1.455-1.455L18 8.5v-1l.836-.209a2 2 0 0 0 1.455-1.455L20.5 5h1l.209.836a2 2 0 0 0 1.455 1.455z"/></svg>
+            <svg class="icon sun-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636 5.636 7.05 3.515 4.93zM16.95 18.364l1.414-1.414 2.121 2.121-1.414 1.414-2.121-2.121zm2.121-14.85l1.414 1.415-2.121 2.121-1.414-1.414 2.121-2.121zM5.636 16.95l1.414 1.414-2.121 2.121-1.414-1.414 2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z"/></svg>
+        </label>
     </header>
     <div id="outlet_switcher" class="grid gap-1-5 hide">
         <div class="flex align-center">
@@ -98,16 +95,9 @@
     <main class="page">
         <section class="outlet-hero-section grid margin-bottom-3r">
             <button class="outlet-label">
-                <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+                <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M21 13.242V20h1v2H2v-2h1v-6.758A4.496 4.496 0 0 1 1 9.5c0-.827.224-1.624.633-2.303L4.345 2.5a1 1 0 0 1 .866-.5H18.79a1 1 0 0 1 .866.5l2.702 4.682A4.496 4.496 0 0 1 21 13.242zm-2 .73a4.496 4.496 0 0 1-3.75-1.36A4.496 4.496 0 0 1 12 14.001a4.496 4.496 0 0 1-3.25-1.387A4.496 4.496 0 0 1 5 13.973V20h14v-6.027zM5.789 4L3.356 8.213a2.5 2.5 0 0 0 4.466 2.216c.335-.837 1.52-.837 1.856 0a2.5 2.5 0 0 0 4.644 0c.335-.837 1.52-.837 1.856 0a2.5 2.5 0 1 0 4.457-2.232L18.21 4H5.79z"/></svg>
-                    <path fill="none" d="M0 0h24v24H0z" />
-                    <path
-                        d="M21 13.242V20h1v2H2v-2h1v-6.758A4.496 4.496 0 0 1 1 9.5c0-.827.224-1.624.633-2.303L4.345 2.5a1 1 0 0 1 .866-.5H18.79a1 1 0 0 1 .866.5l2.702 4.682A4.496 4.496 0 0 1 21 13.242zm-2 .73a4.496 4.496 0 0 1-3.75-1.36A4.496 4.496 0 0 1 12 14.001a4.496 4.496 0 0 1-3.25-1.387A4.496 4.496 0 0 1 5 13.973V20h14v-6.027zM5.789 4L3.356 8.213a2.5 2.5 0 0 0 4.466 2.216c.335-.837 1.52-.837 1.856 0a2.5 2.5 0 0 0 4.644 0c.335-.837 1.52-.837 1.856 0a2.5 2.5 0 1 0 4.457-2.232L18.21 4H5.79z" />
-                </svg>
                 <span class="outlet-label__name">Outlet</span>
-                <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+                <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z"/></svg>
-                    <path fill="none" d="M0 0h24v24H0z" />
-                    <path d="M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z" />
-                </svg>
             </button>
             <h2 class="h2 weight-700 margin-bottom-1r">FLO Blockchain Contract</h2>
             <p>
@@ -119,36 +109,13 @@
             <h4 class="room__label">Rooms</h4>
             <scroll-tab-header data-target="ico_page_group">
                 <button class="room-button" title="Investors">
-                    <svg class="icon button__icon--left" xmlns='http://www.w3.org/2000/svg' class='ionicon'
+                    <svg class="icon button__icon--left" xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'><title>People</title><path d='M402 168c-2.93 40.67-33.1 72-66 72s-63.12-31.32-66-72c-3-42.31 26.37-72 66-72s69 30.46 66 72z' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/><path d='M336 304c-65.17 0-127.84 32.37-143.54 95.41-2.08 8.34 3.15 16.59 11.72 16.59h263.65c8.57 0 13.77-8.25 11.72-16.59C463.85 335.36 401.18 304 336 304z' fill='none' stroke='currentColor' stroke-miterlimit='10' stroke-width='32'/><path d='M200 185.94c-2.34 32.48-26.72 58.06-53 58.06s-50.7-25.57-53-58.06C91.61 152.15 115.34 128 147 128s55.39 24.77 53 57.94z' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/><path d='M206 306c-18.05-8.27-37.93-11.45-59-11.45-52 0-102.1 25.85-114.65 76.2-1.65 6.66 2.53 13.25 9.37 13.25H154' fill='none' stroke='currentColor' stroke-linecap='round' stroke-miterlimit='10' stroke-width='32'/></svg>
-                        viewBox='0 0 512 512'>
-                        <title>People</title>
-                        <path
-                            d='M402 168c-2.93 40.67-33.1 72-66 72s-63.12-31.32-66-72c-3-42.31 26.37-72 66-72s69 30.46 66 72z'
-                            fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'
-                            stroke-width='32' />
-                        <path
-                            d='M336 304c-65.17 0-127.84 32.37-143.54 95.41-2.08 8.34 3.15 16.59 11.72 16.59h263.65c8.57 0 13.77-8.25 11.72-16.59C463.85 335.36 401.18 304 336 304z'
-                            fill='none' stroke='currentColor' stroke-miterlimit='10' stroke-width='32' />
-                        <path
-                            d='M200 185.94c-2.34 32.48-26.72 58.06-53 58.06s-50.7-25.57-53-58.06C91.61 152.15 115.34 128 147 128s55.39 24.77 53 57.94z'
-                            fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'
-                            stroke-width='32' />
-                        <path
-                            d='M206 306c-18.05-8.27-37.93-11.45-59-11.45-52 0-102.1 25.85-114.65 76.2-1.65 6.66 2.53 13.25 9.37 13.25H154'
-                            fill='none' stroke='currentColor' stroke-linecap='round' stroke-miterlimit='10'
-                            stroke-width='32' />
-                    </svg>
                     <span class="button__label">
                         Product
                     </span>
                 </button>
                 <button class="room-button" title="Phases">
-                    <svg class="icon button__icon--left" xmlns="http://www.w3.org/2000/svg" height="24px"
+                    <svg class="icon button__icon--left" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.68-1.5 1.5s.68 1.5 1.5 1.5 1.5-.68 1.5-1.5-.67-1.5-1.5-1.5zM7 19h14v-2H7v2zm0-6h14v-2H7v2zm0-8v2h14V5H7z"/></svg>
-                        viewBox="0 0 24 24" width="24px" fill="#000000">
-                        <path d="M0 0h24v24H0V0z" fill="none" />
-                        <path
-                            d="M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.68-1.5 1.5s.68 1.5 1.5 1.5 1.5-.68 1.5-1.5-.67-1.5-1.5-1.5zM7 19h14v-2H7v2zm0-6h14v-2H7v2zm0-8v2h14V5H7z" />
-                    </svg>
                     <span class="button__label">
                         Projects
                     </span>
@@ -163,10 +130,8 @@
                 <h3 class="h3 margin-bottom-1-5r">Projects</h3>
         </scroll-tab-panels>
     </main>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
-    <script src="assets/js/components.js"></script>
+    <script src="js/components.js"></script>
-    <script src="https://unpkg.com/uhtml@3.0.1/es.js"></script>
+    <script src="js/index.js"></script>
-    <script src="assets/js/index.js"></script>
 </body>
-
 </html>

ico.html

@@ -24,12 +24,27 @@
             <div class="grid">
                 <h4 class="h4 phase__title"></h4>
                 <h5 class="h5 phase__date weight-500 color-0-8"></h5>
-                <p class="phase__description color-0-8">Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime
+                <p class="phase__description color-0-8">Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime nihil doloremque, mollitia dolor minima et.</p>
-                    nihil doloremque, mollitia dolor minima et.</p>
             </div>
         </li>
     </template>
 
+    <template id="ico_investor_row">
+        <div class="person-card grid">
+            <img class="person__image" src="" alt="" loading="lazy">
+            <div class="investor-card__overlay grid gap-1-5">
+                <div class="grid investor__bio-container">
+                    <h4 class="person__name capitalize"></h4>
+                    <p class="investor__bio color-0-8"></p>
+                </div>
+                <div class="grid investor__contribution-container">
+                    <!-- <h4 class="label color-0-8 weight-500">Contribution</h4> -->
+                    <p class="investor__contribution"></p>
+                </div>
+            </div>
+        </div>
+    </template>
+
     <section id="elevator_popup" class="grid hide-completely">
         <header class="elevator__header">
             <button class="close-button justify-self-start" onclick="hideSiteMap()">
@@ -43,24 +58,22 @@
         </header>
         <ul id="floor_list" class="grid"></ul>
     </section>
-    <header id="main_header" class="full-bleed">
+    <header id="main_header" class="grid align-center full-bleed">
         <button id="elevator_button" class="button" onclick="showSiteMap()">
-            <svg class="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <svg class="icon button__icon--left" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 3L16.3301 10.5H7.66987L12 3Z"/><path d="M12 21L7.66987 13.5L16.3301 13.5L12 21Z"/></svg>
-                <path d="M12 3L16.3301 10.5H7.66987L12 3Z" />
-                <path d="M12 21L7.66987 13.5L16.3301 13.5L12 21Z" />
-            </svg>
             <span class="button__label">
                 Elevator
             </span>
         </button>
         <a href="index.html" class="main-logo flex align-center page-link justify-self-center" data-target="home_page">
-            <svg id="main_header__logo" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+            <svg id="main_header__logo" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.46,21.32C20,19.78,18.6,18.59,15.3,17a12.67,12.67,0,0,1-2.64-1.56,4.27,4.27,0,0,1-.79-1,2.6,2.6,0,0,1,0-1.41c.24-.68.49-1,2.43-2.85a7.18,7.18,0,0,0,2.09-2.92,4.25,4.25,0,0,0,0-1.77,6.52,6.52,0,0,0-2.85-3.11c-.56-.36-.81-.4-.81-.15a2.33,2.33,0,0,1-.18.45L12.4,3l-.53-.36c-.28-.21-.64-.41-.77-.49s-.46-.11-.46,0a6.21,6.21,0,0,1-.37.83s-.08,0-.17-.08c-1.15-.83-1.64-1-1.64-.73A7.33,7.33,0,0,1,7.7,3.65C6.48,5.68,5.24,6.7,4,6.7c-.56,0-.54,0-.37.64s.2.58.68.43a3.37,3.37,0,0,0,1.09-.54.86.86,0,0,1,.3-.17,1.34,1.34,0,0,1,.13.39.79.79,0,0,0,.17.4A3.5,3.5,0,0,0,7.37,7.3L7.8,7l.09.34c.12.45.19.51.62.39a4.25,4.25,0,0,0,2.17-1.54l.38-.45,0,.39A5.92,5.92,0,0,1,8.89,9.54L7.67,10.71c-2,1.93-1.89,3.51.37,5a27.41,27.41,0,0,0,2.89,1.51c.17.07.62.32,1,.54C14,19,15,20.23,15,21.48a2,2,0,0,0,0,.49h0c0,.05,0,.05.56-.1a1.89,1.89,0,0,0,.53-.21,2.41,2.41,0,0,0-.34-1.15,7.05,7.05,0,0,0-1.68-1.77,21.91,21.91,0,0,0-3.2-1.83A9.53,9.53,0,0,1,8.16,15.2a2.18,2.18,0,0,1-.74-1.55C7.42,12.79,7.86,12,9,11c1.77-1.64,2.45-2.45,2.92-3.55a2.28,2.28,0,0,0,.26-1.26A2,2,0,0,0,12,5.06l-.2-.45L12,4.3l.28-.49.09-.18L12.6,4a3.69,3.69,0,0,1,.61,1.76A3.47,3.47,0,0,1,12.94,7l-.09.25s-.21.37-.41.69A17.78,17.78,0,0,1,9.91,10.6c-1.07,1-1.43,1.62-1.47,2.47a2.05,2.05,0,0,0,.7,1.73,10.47,10.47,0,0,0,3.28,2.08c2.28,1.13,3.26,1.81,4,2.73a2.94,2.94,0,0,1,.74,1.75,1.26,1.26,0,0,0,.09.57.48.48,0,0,0,.26,0l.51-.13.29-.08,0-.28c-.13-1-1-2-2.47-3a25.52,25.52,0,0,0-3.26-1.77,8.59,8.59,0,0,1-2.23-1.43,2.09,2.09,0,0,1-.5-2.62c.26-.53.5-.83,2.35-2.6,1.51-1.45,2.15-2.58,2.15-3.79A3.67,3.67,0,0,0,13,3.48a3,3,0,0,1-.4-.42A1.85,1.85,0,0,1,13,2.33a6.74,6.74,0,0,1,1.83,1.73,2.62,2.62,0,0,1,.47,1.68,3,3,0,0,1-.55,1.84c-.45.78-.79,1.14-2.67,2.93a5.56,5.56,0,0,0-1.3,1.64,1.77,1.77,0,0,0-.21,1,1.76,1.76,0,0,0,.19.92,6.28,6.28,0,0,0,2.9,2.34,21.6,21.6,0,0,1,3.66,2c1.35,1,2,2,2,3a1.06,1.06,0,0,0,.05.47,2.83,2.83,0,0,0,1-.24C20.56,21.68,20.56,21.66,20.46,21.32ZM7.29,6.4h0a2.23,2.23,0,0,1-.9.28L6,6.72l.43-.53a15.22,15.22,0,0,0,1.89-3,3.52,3.52,0,0,1,.38-.67c.07-.08.49.2,1,.64l.39.35L9.66,4A6.7,6.7,0,0,1,7.29,6.4Zm3.58-1.11A5.8,5.8,0,0,1,9.25,6.51h0a3.3,3.3,0,0,1-.74.17l-.35,0,.39-.49a15.64,15.64,0,0,0,1.32-2,4.63,4.63,0,0,1,.28-.49c.06-.08.33.26.57.77l.28.57Zm1-1.4a1.63,1.63,0,0,1-.28.4A6.63,6.63,0,0,1,11,3.72l-.53-.56.12-.29c.2-.49.24-.51.64-.19a5.57,5.57,0,0,1,.85.78A2.78,2.78,0,0,1,11.87,3.89Z"/></svg>
-                <path
-                    d="M20.46,21.32C20,19.78,18.6,18.59,15.3,17a12.67,12.67,0,0,1-2.64-1.56,4.27,4.27,0,0,1-.79-1,2.6,2.6,0,0,1,0-1.41c.24-.68.49-1,2.43-2.85a7.18,7.18,0,0,0,2.09-2.92,4.25,4.25,0,0,0,0-1.77,6.52,6.52,0,0,0-2.85-3.11c-.56-.36-.81-.4-.81-.15a2.33,2.33,0,0,1-.18.45L12.4,3l-.53-.36c-.28-.21-.64-.41-.77-.49s-.46-.11-.46,0a6.21,6.21,0,0,1-.37.83s-.08,0-.17-.08c-1.15-.83-1.64-1-1.64-.73A7.33,7.33,0,0,1,7.7,3.65C6.48,5.68,5.24,6.7,4,6.7c-.56,0-.54,0-.37.64s.2.58.68.43a3.37,3.37,0,0,0,1.09-.54.86.86,0,0,1,.3-.17,1.34,1.34,0,0,1,.13.39.79.79,0,0,0,.17.4A3.5,3.5,0,0,0,7.37,7.3L7.8,7l.09.34c.12.45.19.51.62.39a4.25,4.25,0,0,0,2.17-1.54l.38-.45,0,.39A5.92,5.92,0,0,1,8.89,9.54L7.67,10.71c-2,1.93-1.89,3.51.37,5a27.41,27.41,0,0,0,2.89,1.51c.17.07.62.32,1,.54C14,19,15,20.23,15,21.48a2,2,0,0,0,0,.49h0c0,.05,0,.05.56-.1a1.89,1.89,0,0,0,.53-.21,2.41,2.41,0,0,0-.34-1.15,7.05,7.05,0,0,0-1.68-1.77,21.91,21.91,0,0,0-3.2-1.83A9.53,9.53,0,0,1,8.16,15.2a2.18,2.18,0,0,1-.74-1.55C7.42,12.79,7.86,12,9,11c1.77-1.64,2.45-2.45,2.92-3.55a2.28,2.28,0,0,0,.26-1.26A2,2,0,0,0,12,5.06l-.2-.45L12,4.3l.28-.49.09-.18L12.6,4a3.69,3.69,0,0,1,.61,1.76A3.47,3.47,0,0,1,12.94,7l-.09.25s-.21.37-.41.69A17.78,17.78,0,0,1,9.91,10.6c-1.07,1-1.43,1.62-1.47,2.47a2.05,2.05,0,0,0,.7,1.73,10.47,10.47,0,0,0,3.28,2.08c2.28,1.13,3.26,1.81,4,2.73a2.94,2.94,0,0,1,.74,1.75,1.26,1.26,0,0,0,.09.57.48.48,0,0,0,.26,0l.51-.13.29-.08,0-.28c-.13-1-1-2-2.47-3a25.52,25.52,0,0,0-3.26-1.77,8.59,8.59,0,0,1-2.23-1.43,2.09,2.09,0,0,1-.5-2.62c.26-.53.5-.83,2.35-2.6,1.51-1.45,2.15-2.58,2.15-3.79A3.67,3.67,0,0,0,13,3.48a3,3,0,0,1-.4-.42A1.85,1.85,0,0,1,13,2.33a6.74,6.74,0,0,1,1.83,1.73,2.62,2.62,0,0,1,.47,1.68,3,3,0,0,1-.55,1.84c-.45.78-.79,1.14-2.67,2.93a5.56,5.56,0,0,0-1.3,1.64,1.77,1.77,0,0,0-.21,1,1.76,1.76,0,0,0,.19.92,6.28,6.28,0,0,0,2.9,2.34,21.6,21.6,0,0,1,3.66,2c1.35,1,2,2,2,3a1.06,1.06,0,0,0,.05.47,2.83,2.83,0,0,0,1-.24C20.56,21.68,20.56,21.66,20.46,21.32ZM7.29,6.4h0a2.23,2.23,0,0,1-.9.28L6,6.72l.43-.53a15.22,15.22,0,0,0,1.89-3,3.52,3.52,0,0,1,.38-.67c.07-.08.49.2,1,.64l.39.35L9.66,4A6.7,6.7,0,0,1,7.29,6.4Zm3.58-1.11A5.8,5.8,0,0,1,9.25,6.51h0a3.3,3.3,0,0,1-.74.17l-.35,0,.39-.49a15.64,15.64,0,0,0,1.32-2,4.63,4.63,0,0,1,.28-.49c.06-.08.33.26.57.77l.28.57Zm1-1.4a1.63,1.63,0,0,1-.28.4A6.63,6.63,0,0,1,11,3.72l-.53-.56.12-.29c.2-.49.24-.51.64-.19a5.57,5.57,0,0,1,.85.78A2.78,2.78,0,0,1,11.87,3.89Z" />
-            </svg>
             <h4 class="h4 header__company-name">RanchiMall</h4>
         </a>
-        <theme-toggle></theme-toggle>
+        <label class="theme-switcher" title="Change theme">
+            <input id="theme_switcher" class="theme-switcher__checkbox" type="checkbox">
+            <svg class="icon moon-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M10 6a8 8 0 0 0 11.955 6.956C21.474 18.03 17.2 22 12 22 6.477 22 2 17.523 2 12c0-5.2 3.97-9.474 9.044-9.955A7.963 7.963 0 0 0 10 6zm-6 6a8 8 0 0 0 8 8 8.006 8.006 0 0 0 6.957-4.045c-.316.03-.636.045-.957.045-5.523 0-10-4.477-10-10 0-.321.015-.64.045-.957A8.006 8.006 0 0 0 4 12zm14.164-9.709L19 2.5v1l-.836.209a2 2 0 0 0-1.455 1.455L16.5 6h-1l-.209-.836a2 2 0 0 0-1.455-1.455L13 3.5v-1l.836-.209A2 2 0 0 0 15.29.836L15.5 0h1l.209.836a2 2 0 0 0 1.455 1.455zm5 5L24 7.5v1l-.836.209a2 2 0 0 0-1.455 1.455L21.5 11h-1l-.209-.836a2 2 0 0 0-1.455-1.455L18 8.5v-1l.836-.209a2 2 0 0 0 1.455-1.455L20.5 5h1l.209.836a2 2 0 0 0 1.455 1.455z"/></svg>
+            <svg class="icon sun-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636 5.636 7.05 3.515 4.93zM16.95 18.364l1.414-1.414 2.121 2.121-1.414 1.414-2.121-2.121zm2.121-14.85l1.414 1.415-2.121 2.121-1.414-1.414 2.121-2.121zM5.636 16.95l1.414 1.414-2.121 2.121-1.414-1.414 2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z"/></svg>
+        </label>
     </header>
     <div id="outlet_switcher" class="grid gap-1-5 hide-completely">
         <span id="outlet_switcher__floor_num" class="weight-500 color-0-8"></span>
@@ -71,19 +84,16 @@
             <div class="grid">
                 <h2 class="h2 weight-700 margin-bottom-1r">Initial Coin Offering</h2>
                 <p>
-                    The Initial Coin Offering (ICO) of RanchiMall was launched in 2017. We envisioned to sell 21 million
+                    The Initial Coin Offering (ICO) of RanchiMall was launched in 2017. It was envisioned to sell 21 million
-                    tokens in 14 phases over three years. However we paused the ICO after two phases were executed
+                    tokens over 14 phases over 3 years. However we paused the ICO after 2 phases were executed
                     selling 100000 tokens. Unanticipated Risks emerged due to rapid price increase of our tokens in
-                    trading in our own custom exchange. <br> The ICO will resume after de-risking process is complete.
+                    trading in our own custom exchange. The ICO will resume after de-risking process is complete.
                 </p>
             </div>
             <button class="outlet-label">
                 <span class="outlet-label__name">Outlet</span>
                 <span class="outlet-label__no"></span>
-                <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+                <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z"/></svg>
-                    <path fill="none" d="M0 0h24v24H0z" />
-                    <path d="M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z" />
-                </svg>
             </button>
         </section>
         <section class="rooms-layout">
@@ -91,21 +101,7 @@
             <a class="room-tile room-tile--main" href="#investor_room">
                 <div class="tile-content">
                     <div class="grid flow-column gap-1 justify-start align-center">
-                        <svg class="room-tile__icon investors-icon" id="f4f25b2f-c031-4b25-9376-2f5094dcb7eb"
+                        <svg class="room-tile__icon investors-icon" id="f4f25b2f-c031-4b25-9376-2f5094dcb7eb" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M14,14.23h0a4.36,4.36,0,0,1,4.36,4.12,19.55,19.55,0,0,1-1.12,6.43,8.16,8.16,0,0,1-3.55,2.42,8.16,8.16,0,0,1-3.52-2.42A19.5,19.5,0,0,1,9,18.24,4.31,4.31,0,0,1,10,15.42a4.86,4.86,0,0,1,3.61-1.19H14m0-2h-.32C6.69,12.23,7,18.3,7,18.3A21.51,21.51,0,0,0,8.3,25.62c.61,1.23,3.7,3.58,5.33,3.58h0c1.63,0,4.71-2.35,5.33-3.58a21.51,21.51,0,0,0,1.3-7.32h0A6.38,6.38,0,0,0,14,12.23Z"/><path d="M50.71,14.23h0a4.36,4.36,0,0,1,4.36,4.11,19.62,19.62,0,0,1-1.18,6.44A8.19,8.19,0,0,1,50.4,27.2a8.25,8.25,0,0,1-3.53-2.42,20,20,0,0,1-1.17-6.5v-.06a4.35,4.35,0,0,1,1-2.78,4.87,4.87,0,0,1,3.64-1.21h.32m0-2h-.32c-7,0-6.69,6.07-6.69,6.07a22.05,22.05,0,0,0,1.35,7.32c.62,1.23,3.7,3.58,5.34,3.58s4.72-2.35,5.33-3.58a21.76,21.76,0,0,0,1.35-7.32v0a6.36,6.36,0,0,0-6.35-6.05Z"/><path d="M32,11.9a6.51,6.51,0,0,1,7,6.25,27.22,27.22,0,0,1-1.66,9c-.67,1.19-4.1,3.65-5.36,3.65h-.19a11.61,11.61,0,0,1-5.15-3.62A27.19,27.19,0,0,1,25,18.1V18a6.62,6.62,0,0,1,1.64-4.32A7.18,7.18,0,0,1,32,11.9m0-2c-9.35,0-9,8.2-9,8.2A29.19,29.19,0,0,0,24.81,28c.83,1.66,5,4.82,7.2,4.82l0,0c2.2,0,6.37-3.16,7.19-4.82A29.05,29.05,0,0,0,41,18.11s-.32-8.2-9-8.2Z"/><path d="M37.72,36.28c2,2,4.82,3.18,7.58,4.31l2,.82a14.53,14.53,0,0,1,1.1,6.47A31.12,31.12,0,0,1,32.78,52.1H31.24a31.13,31.13,0,0,1-15.62-4.23,14.49,14.49,0,0,1,1.1-6.46l1.94-.82c2.77-1.13,5.6-2.3,7.58-4.3a14,14,0,0,0,5.2,2.65A1.81,1.81,0,0,0,32,39a2.22,2.22,0,0,0,.51-.06,14,14,0,0,0,5.25-2.67m.23-3A11.93,11.93,0,0,1,32,37,12,12,0,0,1,26,33.28c-1.77,3.32-6.18,4.57-10.34,6.4-1.69.71-3.1,9.88-1.12,9.88a33.06,33.06,0,0,0,16.69,4.53h1.54a33,33,0,0,0,16.64-4.52c2,0,.58-9.18-1.13-9.89-4.16-1.83-8.57-3.08-10.34-6.4Z"/><path d="M17.82,32.42a10,10,0,0,0,1.53,1.12c-1,.49-2.06.92-3,1.28l-.05,0,0,0c-.5.23-1,.44-1.5.65l-.74.32c-2.5,1-3.65,4.22-4.17,6.86A22.54,22.54,0,0,1,2,40a11,11,0,0,1,.7-4.06L4,35.4a18.53,18.53,0,0,0,5.43-3,10.89,10.89,0,0,0,3.67,1.78l.51.13.52-.13a10.87,10.87,0,0,0,3.7-1.79m.19-2.9a8.77,8.77,0,0,1-4.4,2.75,8.73,8.73,0,0,1-4.4-2.75C7.9,32,4.63,32.89,1.55,34.25c-1.26.52-2.3,7.31-.84,7.31a24.5,24.5,0,0,0,10.86,3.31c.34-3,1.31-6.38,3.27-7.2.75-.33,1.53-.65,2.29-1,2.49-1,4.85-2,6.22-3.44-2.27-.9-4.34-1.87-5.34-3.71Z"/><path d="M54.58,32.43a18.28,18.28,0,0,0,5.43,3l1.29.53a11.32,11.32,0,0,1,.7,4.12,22.58,22.58,0,0,1-7.85,2.68C53.67,40.28,52.56,37,50,35.9c-.8-.4-1.62-.74-2.35-1-1-.43-2-.85-3-1.31a9.45,9.45,0,0,0,1.53-1.13,10.93,10.93,0,0,0,3.66,1.78l.52.13.52-.13a11,11,0,0,0,3.67-1.78m.21-2.91a8.77,8.77,0,0,1-4.4,2.75A8.77,8.77,0,0,1,46,29.52c-1,1.84-3,2.81-5.32,3.75,1.37,1.43,3.73,2.41,6.22,3.44.76.31,1.54.63,2.26,1,2,.83,3,4.25,3.29,7.21A24.5,24.5,0,0,0,63.3,41.61c1.44,0,.4-6.84-.86-7.36-3.08-1.36-6.34-2.27-7.65-4.73Z"/></svg>
-                            data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
-                            <path
-                                d="M14,14.23h0a4.36,4.36,0,0,1,4.36,4.12,19.55,19.55,0,0,1-1.12,6.43,8.16,8.16,0,0,1-3.55,2.42,8.16,8.16,0,0,1-3.52-2.42A19.5,19.5,0,0,1,9,18.24,4.31,4.31,0,0,1,10,15.42a4.86,4.86,0,0,1,3.61-1.19H14m0-2h-.32C6.69,12.23,7,18.3,7,18.3A21.51,21.51,0,0,0,8.3,25.62c.61,1.23,3.7,3.58,5.33,3.58h0c1.63,0,4.71-2.35,5.33-3.58a21.51,21.51,0,0,0,1.3-7.32h0A6.38,6.38,0,0,0,14,12.23Z" />
-                            <path
-                                d="M50.71,14.23h0a4.36,4.36,0,0,1,4.36,4.11,19.62,19.62,0,0,1-1.18,6.44A8.19,8.19,0,0,1,50.4,27.2a8.25,8.25,0,0,1-3.53-2.42,20,20,0,0,1-1.17-6.5v-.06a4.35,4.35,0,0,1,1-2.78,4.87,4.87,0,0,1,3.64-1.21h.32m0-2h-.32c-7,0-6.69,6.07-6.69,6.07a22.05,22.05,0,0,0,1.35,7.32c.62,1.23,3.7,3.58,5.34,3.58s4.72-2.35,5.33-3.58a21.76,21.76,0,0,0,1.35-7.32v0a6.36,6.36,0,0,0-6.35-6.05Z" />
-                            <path
-                                d="M32,11.9a6.51,6.51,0,0,1,7,6.25,27.22,27.22,0,0,1-1.66,9c-.67,1.19-4.1,3.65-5.36,3.65h-.19a11.61,11.61,0,0,1-5.15-3.62A27.19,27.19,0,0,1,25,18.1V18a6.62,6.62,0,0,1,1.64-4.32A7.18,7.18,0,0,1,32,11.9m0-2c-9.35,0-9,8.2-9,8.2A29.19,29.19,0,0,0,24.81,28c.83,1.66,5,4.82,7.2,4.82l0,0c2.2,0,6.37-3.16,7.19-4.82A29.05,29.05,0,0,0,41,18.11s-.32-8.2-9-8.2Z" />
-                            <path
-                                d="M37.72,36.28c2,2,4.82,3.18,7.58,4.31l2,.82a14.53,14.53,0,0,1,1.1,6.47A31.12,31.12,0,0,1,32.78,52.1H31.24a31.13,31.13,0,0,1-15.62-4.23,14.49,14.49,0,0,1,1.1-6.46l1.94-.82c2.77-1.13,5.6-2.3,7.58-4.3a14,14,0,0,0,5.2,2.65A1.81,1.81,0,0,0,32,39a2.22,2.22,0,0,0,.51-.06,14,14,0,0,0,5.25-2.67m.23-3A11.93,11.93,0,0,1,32,37,12,12,0,0,1,26,33.28c-1.77,3.32-6.18,4.57-10.34,6.4-1.69.71-3.1,9.88-1.12,9.88a33.06,33.06,0,0,0,16.69,4.53h1.54a33,33,0,0,0,16.64-4.52c2,0,.58-9.18-1.13-9.89-4.16-1.83-8.57-3.08-10.34-6.4Z" />
-                            <path
-                                d="M17.82,32.42a10,10,0,0,0,1.53,1.12c-1,.49-2.06.92-3,1.28l-.05,0,0,0c-.5.23-1,.44-1.5.65l-.74.32c-2.5,1-3.65,4.22-4.17,6.86A22.54,22.54,0,0,1,2,40a11,11,0,0,1,.7-4.06L4,35.4a18.53,18.53,0,0,0,5.43-3,10.89,10.89,0,0,0,3.67,1.78l.51.13.52-.13a10.87,10.87,0,0,0,3.7-1.79m.19-2.9a8.77,8.77,0,0,1-4.4,2.75,8.73,8.73,0,0,1-4.4-2.75C7.9,32,4.63,32.89,1.55,34.25c-1.26.52-2.3,7.31-.84,7.31a24.5,24.5,0,0,0,10.86,3.31c.34-3,1.31-6.38,3.27-7.2.75-.33,1.53-.65,2.29-1,2.49-1,4.85-2,6.22-3.44-2.27-.9-4.34-1.87-5.34-3.71Z" />
-                            <path
-                                d="M54.58,32.43a18.28,18.28,0,0,0,5.43,3l1.29.53a11.32,11.32,0,0,1,.7,4.12,22.58,22.58,0,0,1-7.85,2.68C53.67,40.28,52.56,37,50,35.9c-.8-.4-1.62-.74-2.35-1-1-.43-2-.85-3-1.31a9.45,9.45,0,0,0,1.53-1.13,10.93,10.93,0,0,0,3.66,1.78l.52.13.52-.13a11,11,0,0,0,3.67-1.78m.21-2.91a8.77,8.77,0,0,1-4.4,2.75A8.77,8.77,0,0,1,46,29.52c-1,1.84-3,2.81-5.32,3.75,1.37,1.43,3.73,2.41,6.22,3.44.76.31,1.54.63,2.26,1,2,.83,3,4.25,3.29,7.21A24.5,24.5,0,0,0,63.3,41.61c1.44,0,.4-6.84-.86-7.36-3.08-1.36-6.34-2.27-7.65-4.73Z" />
-                        </svg>
                         <h4 class="room-tile__title">Investors</h4>
                     </div>
                 </div>
@@ -113,11 +109,7 @@
             <a class="room-tile" href="#product_room">
                 <div class="tile-content">
                     <div class="grid flow-column gap-1 justify-start align-center">
-                        <svg class="room-tile__icon" id="b76bf456-6b89-4220-8b44-f4f7d833bad6" data-name="Layer 1"
+                        <svg class="room-tile__icon" id="b76bf456-6b89-4220-8b44-f4f7d833bad6" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M61.28,22.11c0-.05,0-.09,0-.14L58.62,6A1.68,1.68,0,0,0,57,4.6H7A1.68,1.68,0,0,0,5.38,6L2.72,22c0,.05,0,.09,0,.14s0,.09,0,.14V57.72A1.68,1.68,0,0,0,4.38,59.4H59.62a1.68,1.68,0,0,0,1.68-1.68V22.25C61.3,22.2,61.28,22.16,61.28,22.11Zm-3.64-1.54H39.34L38.51,8h17ZM27.92,23.93h8.16v6.64L33,28.41a1.7,1.7,0,0,0-1.9,0l-3.13,2.16ZM35.15,8,36,20.57H28L28.91,8ZM8.46,8H25.55l-.88,12.61H6.36ZM57.94,56H6.06V23.93h18.5v9.84a1.67,1.67,0,0,0,2.63,1.38L32,31.84l4.81,3.31a1.65,1.65,0,0,0,.95.3,1.76,1.76,0,0,0,.78-.19,1.68,1.68,0,0,0,.9-1.49V23.93h18.5Z"/></svg>
-                            xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
-                            <path
-                                d="M61.28,22.11c0-.05,0-.09,0-.14L58.62,6A1.68,1.68,0,0,0,57,4.6H7A1.68,1.68,0,0,0,5.38,6L2.72,22c0,.05,0,.09,0,.14s0,.09,0,.14V57.72A1.68,1.68,0,0,0,4.38,59.4H59.62a1.68,1.68,0,0,0,1.68-1.68V22.25C61.3,22.2,61.28,22.16,61.28,22.11Zm-3.64-1.54H39.34L38.51,8h17ZM27.92,23.93h8.16v6.64L33,28.41a1.7,1.7,0,0,0-1.9,0l-3.13,2.16ZM35.15,8,36,20.57H28L28.91,8ZM8.46,8H25.55l-.88,12.61H6.36ZM57.94,56H6.06V23.93h18.5v9.84a1.67,1.67,0,0,0,2.63,1.38L32,31.84l4.81,3.31a1.65,1.65,0,0,0,.95.3,1.76,1.76,0,0,0,.78-.19,1.68,1.68,0,0,0,.9-1.49V23.93h18.5Z" />
-                        </svg>
                         <h4 class="room-tile__title">Product</h4>
                     </div>
 
@@ -126,15 +118,7 @@
             <a class="room-tile" href="#purchase_room">
                 <div class="tile-content">
                     <div class="grid flow-column gap-1 justify-start align-center">
-                        <svg class="room-tile__icon" id="bb329e59-3d30-49a7-ac0d-b164d3b3b631" data-name="Layer 1"
+                        <svg class="room-tile__icon" id="bb329e59-3d30-49a7-ac0d-b164d3b3b631" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M42.74,64a14,14,0,1,1,14-14A14,14,0,0,1,42.74,64Zm0-24.73A10.7,10.7,0,1,0,53.44,50,10.71,10.71,0,0,0,42.74,39.27Z"/><path d="M28.7,50H14.08a3.43,3.43,0,0,1-3.42-3.58l1.4-31.51h4.85V17.8a1.71,1.71,0,1,0,3.42,0V14.88H33V17.8a1.71,1.71,0,1,0,3.42,0V14.88h4.84L42.2,36c.18,0,.35,0,.54,0a13.92,13.92,0,0,1,2.9.31l-1.1-24.8H36.42V9.76a9.76,9.76,0,1,0-19.51,0v1.69H8.79L7.24,46.24a6.85,6.85,0,0,0,6.84,7.15H29.14A14.24,14.24,0,0,1,28.7,50ZM20.33,9.76A6.34,6.34,0,1,1,33,9.76v1.69H20.33Z"/><path d="M41.23,54.65a1.69,1.69,0,0,1-1.18-.49l-3-3a1.67,1.67,0,0,1,2.35-2.36l1.84,1.84,4.85-4.85a1.66,1.66,0,0,1,2.35,2.35l-6,6A1.67,1.67,0,0,1,41.23,54.65Z"/></svg>
-                            xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
-                            <path
-                                d="M42.74,64a14,14,0,1,1,14-14A14,14,0,0,1,42.74,64Zm0-24.73A10.7,10.7,0,1,0,53.44,50,10.71,10.71,0,0,0,42.74,39.27Z" />
-                            <path
-                                d="M28.7,50H14.08a3.43,3.43,0,0,1-3.42-3.58l1.4-31.51h4.85V17.8a1.71,1.71,0,1,0,3.42,0V14.88H33V17.8a1.71,1.71,0,1,0,3.42,0V14.88h4.84L42.2,36c.18,0,.35,0,.54,0a13.92,13.92,0,0,1,2.9.31l-1.1-24.8H36.42V9.76a9.76,9.76,0,1,0-19.51,0v1.69H8.79L7.24,46.24a6.85,6.85,0,0,0,6.84,7.15H29.14A14.24,14.24,0,0,1,28.7,50ZM20.33,9.76A6.34,6.34,0,1,1,33,9.76v1.69H20.33Z" />
-                            <path
-                                d="M41.23,54.65a1.69,1.69,0,0,1-1.18-.49l-3-3a1.67,1.67,0,0,1,2.35-2.36l1.84,1.84,4.85-4.85a1.66,1.66,0,0,1,2.35,2.35l-6,6A1.67,1.67,0,0,1,41.23,54.65Z" />
-                        </svg>
                         <h4 class="room-tile__title">Buy</h4>
                     </div>
 
@@ -144,10 +128,7 @@
         <section class="room-container hide-completely page-layout">
             <header class="room-container__header">
                 <button class="grid flow-column gap-1 align-center" onclick="hideRoom()">
-                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M7.828 11H20v2H7.828l5.364 5.364-1.414 1.414L4 12l7.778-7.778 1.414 1.414z"/></svg>
-                        <path fill="none" d="M0 0h24v24H0z" />
-                        <path d="M7.828 11H20v2H7.828l5.364 5.364-1.414 1.414L4 12l7.778-7.778 1.414 1.414z" />
-                    </svg>
                     <h3 id="room_title" class="hide-completely"></h3>
                 </button>
             </header>
@@ -158,10 +139,8 @@
                 </section>
                 <section id="product_room" class="grid room">
                     <p class="margin-bottom-3r">
-                        Please refer to the whitepaper <a href="https://www.ranchimall.net/ICO/"
+                        Please refer to the whitepaper <a href="https://www.ranchimall.net/ICO/">here</a> for detailed terms.
-                            target="_blank">here</a> for detailed terms.
+                        RanchiMall Initial Coin Offering (ICO) abides by the terms we offered in our ICO whitepaper available
-                        RanchiMall Initial Coin Offering (ICO) abides by the terms we offered in our ICO whitepaper
-                        available
                         at link above. We have made certain changes in our terms as our learning has improved. All
                         these changes are to support the interests of our long term investors.
                     </p>
@@ -169,8 +148,7 @@
                     <ol type="1">
                         <li>
                             <p>
-                                RanchiMall Tokens (RMT) now own the financial gains emerging from all our blockchain
+                                RanchiMall Tokens (RMT) now own the financial gains emerging from all our blockchain contracts
-                                contracts
                             </p>
                         </li>
                         <li>
@@ -186,29 +164,26 @@
                         <li>
                             <p>
                                 Number of RMTs tokens in circulation has been paused to
-                                10000 instead of a release schedule of 21 million in 3 years. The un-issued tokens will
+                                10000 instead of a release schedule of 21 million in 3 years. The un-issued tokens will stay vested
-                                stay vested
                                 with the Founder of RanchiMall.
                             </p>
                         </li>
                         <li>
                             <p>
                                 The price discovery during active phase has been USD 1500 per
-                                token giving RMTs in circulation a valuation of 150 million USD. Unless this price is
+                                token giving RMTs in circulation a valuation of 150 million USD. Unless this price is realised in open
-                                realized in open
+                                makets on sustainable basis, new tokens will not be put in circulation.
-                                markets on sustainable basis, new tokens will not be put in circulation.
                             </p>
                         </li>
                     </ol>
                 </section>
                 <section id="purchase_room" class="grid room">
                     <p>
-                        Currently we are not selling any RanchiMall Tokens (RMT). <br> You can buy tokens at
+                        Currently we are not selling any RanchiMall Tokens (RMT). You can buy nominal tokens at
-                        our last valuation in <a href="https://www.ranchimall.net/exchange/" target="_blank">our
+                        our last valuation in <a href="https://www.ranchimall.net/exchange/" target="_blank">our exchange</a> for $10 or ₹500 if you want to become a
-                            exchange</a> to become a
+                        tokenholder, and be part of the learning process through our community. Our rules are designed to
-                        token holder and be part of our community,s learning process. Our products are aimed at long
+                        favour long term investors.
-                        term investors.
+                        <br> Once you initiate a tokenholder relationship, please be patient to stay the
-                        <br> Once you become a token holder, please be patient and be prepared to stay the
                         whole course of journey. You will not regret it.
                     </p>
                 </section>
@@ -219,9 +194,8 @@
             </footer>
         </section>
     </main>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
     <script src="assets/js/components.js"></script>
-    <script src="https://unpkg.com/uhtml@3.0.1/es.js"></script>
     <script src="assets/js/index.js"></script>
     <script>
         const icoPhases = [
@@ -241,13 +215,16 @@
                 extension: 'jpg',
                 investorName: 'Abhijeet Das Gupta',
                 bio: 'Product and Technology Solutions Architect at 366Pi Technologies',
-                contribution: `FLO blockchain application design, Twitter support.`,
+                contribution: `Helps us with designs in FLO blockchain application 
+                    creation, and Twitter support.`,
             },
             {
                 extension: 'jpg',
                 investorName: 'Amit Jagetia',
                 bio: 'IT Professional in FinTech Industry',
-                contribution: `Contributor and believer since inception. Local help in Ohio, International taxation, Social media.`,
+                contribution: `Contributor and believer since inception, helpful 
+                    in Ohio area, resourceful in international taxation, 
+                    and help with social media.`,
             },
             {
                 extension: 'jpg',
@@ -260,73 +237,64 @@
                 extension: 'jpg',
                 investorName: 'Atul Agarwal',
                 bio: 'Entrepreneur, Real Estate Developer, Blockchain Entrepreneur, Iconoclast',
-                contribution: `A core and passionate supporter, One of our largest token holders, Helps with Facebook and Twitter,  Always ready to assist in our various endeavors.`,
+                contribution: `A core and passionate supporter, one of largest 
+                    tokenholders, helpful with social media in Facebook 
+                    and Twiiter, and a lot of varied assistance to 
+                    RanchiMall.`,
             },
             {
                 extension: 'jpg',
                 investorName: 'Barun Kumar',
                 bio: 'Cybersecurity Professional, Founder of Mantran Consulting, Singapore',
-                contribution: `Helpful in Singapore,
+                contribution: `Helpful in Singapore area, early Phase 1 ICO investor,
-Early Phase 1 ICO investor, One of our largest token holders,
+                    one of largest tokenholders, helping us in social 
-Helps with our social media.`,
+                    media.`,
             },
             {
                 extension: 'jpg',
                 investorName: 'Janardan Tiwary',
                 bio: 'Retd. General Manager Coal India, Ranchi, Mining Engineer from IIT Dhanbad',
-                contribution: `Inspiration to the Founder (founder’s father), Support in the management of bank accounts and Twitter.`,
+                contribution: `Inspiration to the Founder (he is father of the founder),
+                    support in management of bank accounts, and 
+                    support in Twitter.`,
             },
             {
                 extension: 'jpg',
                 investorName: 'Kanwal Koul',
                 bio: 'Working Professional in the power sector',
-                contribution: `Passionate investor,
+                contribution: `Passionate investor, and helps with increasing the 
-Twitter follower-base expansion.`,
+                    reach of Twitter.`,
             },
             {
                 extension: 'jpg',
                 investorName: 'Mansoor Ahmed',
-                bio: 'Cybersecurity Expert, Founder and Director Winged World',
+                bio: 'Cybersecurity Expert, Founder, and Director Winged World',
-                contribution: `Helpful with Cybersecurity,
+                contribution: `Helpful with Cybersecurity aspects, logistical support 
-Logistical support, Twitter follower-base expansion.`,
+                    and helpful in increasing reach of Twitter`,
-            },
-            {
-                extension: 'jpg',
-                investorName: 'Margot Borden',
-                bio: 'Psychotherapist, Author, and Chief Storytelling Catalyst at RanchiMall',
-                contribution: `Language and grammar quality assurance, help in the management, psychology of team members, and social media assistance. Nothing escapes her eyes when it's about editing and proofreading.`,
-            },
-            {
-                extension: 'jpg',
-                investorName: 'Manish Saxena',
-                bio: 'Embedded and Control System Expert at HCL Technologies',
-                contribution: `Power-packed social media supporter, Help in West Midlands UK, Contributes to all activities and campaigns.`,
             },
             {
                 extension: 'jpg',
                 investorName: 'Meghna Patel',
-                bio: 'Marketing Professional turned blockchain enthusiast',
+                bio: 'Marketing Professional turned Blockchain Enthusiast',
-                contribution: `Very passionate supporter and contributor, Attends all our online events,
+                contribution: `Very passionate supporter, contributor in lot of 
-Supports us with our Twitter campaigns. `,
+                    activities, attends all our online events, and support 
+                    in Twitter.`,
             },
             {
                 extension: 'jpg',
                 investorName: 'Nikhil Kulkarni',
                 bio: 'CTO and Co-Founder of tripDarwin.com',
-                contribution: `Management and technical skills, Strategy and risk management,
+                contribution: `Comes with lot of management and technical skills, 
-Social media`,
+                    helps us with strategy and risk management, and 
+                    helps us with social media.`,
             },
             {
                 extension: 'jpg',
                 investorName: 'Pankaj Miglani',
                 bio: 'Professional Services Consultant at AWS Cybersecurity',
-                contribution: `Long-term believer and supporter, Help in Australia, Assistance in our social media initiatives.`,
+                contribution: `Long term believer and supporter, help 
-            },
+                    in Australia, and assistance in our social media 
-            {
+                    initiatives.`,
-                extension: 'jpg',
-                investorName: 'Puneet Sondh',
-                bio: 'Financial Services Professional, Double post-graduation in Finance from India and Netherlands, Believer in the power of Transformative Technology',
-                contribution: `Advice on strategic matters, Amplifying the voice on social media, Helps in the UAE region.`,
             },
             {
                 extension: 'jpg',
@@ -336,18 +304,6 @@ Social media`,
                     motivator, active participant in all our activities, 
                     and help in social media.`,
             },
-            {
-                extension: 'jpg',
-                investorName: 'Ruchir Gupta',
-                bio: 'Global manufacturing and supply chain leader, Crypto enthusiast',
-                contribution: `Creative feedbacks in crafting business strategies, Help in the Singapore region.`,
-            },
-            {
-                extension: 'jpg',
-                investorName: 'Santosh Nair',
-                bio: 'Strategic Marketing Advisor, FedEx Europe',
-                contribution: `Long term believer and supporter, Help in Belgium, Europe, Support in the management of social media.`,
-            },
             {
                 extension: 'jpg',
                 investorName: 'Sudhir Taneja',
@@ -357,25 +313,22 @@ Social media`,
             },
             {
                 extension: 'jpg',
-                investorName: 'Varuchhi Dubey',
+                investorName: 'Varucchi Dubey',
                 bio: 'Founder and Managing Director, DNV Security Solutions Pvt Ltd.',
-                contribution: `Contributes toward RanchiMall’s vision, Incredible team member, Consistent support in social media. `,
+                contribution: `Contributions in vision of RanchiMall, incredible team 
+                    member, undiluted support in social media.`,
             },
             {
                 extension: 'jpg',
                 investorName: 'Venkat Narayanan',
                 bio: 'Business Excellence Professional, Sr. Manager at Tata Consultancy Services',
-                contribution: `One of our superstars, and one of the most energetic supporters in every activity,One of our dream investors, Very active help in our projects.`,
+                contribution: `One of our superstars, and one of most energetic 
-            },
+                    supporter in every activity, one of the dream 
-            {
+                    investors, and lot of active help in our projects.`,
-                extension: 'jpg',
-                investorName: 'Vikash Saw',
-                bio: 'Taxation Head (India & Mauritius) with Times Innovative Media Limited (Times of India Group)',
-                contribution: `A Long-term believer, helps with ideas, supports in social media growth.`,
             },
         ]
 
-        function renderAllIcoPhases() {
+        function renderAllIcoPhases(){
             getRef('ico_phase_list').innerHTML = ''
             const frag = document.createDocumentFragment()
             icoPhases.forEach(phase => {
@@ -385,14 +338,15 @@ Social media`,
         }
         // renderAllIcoPhases()
 
-        function renderAllIcoInvestors() {
+        function renderAllIcoInvestors(){
-            const investors = icoInvestors.map(investor => {
+            const frag = document.createDocumentFragment()
-                return render.icoInvestorRow(investor, { thumbnail: false })
+            getRef('ico_investors').innerHTML = ''
+            icoInvestors.forEach(investor => {
+                frag.append(render.icoInvestorRow(investor, {thumbnail: false}))
             })
-            renderElem(getRef('ico_investors'), html`${investors}`)
+            getRef('ico_investors').append(frag)
         }
         renderAllIcoInvestors()
     </script>
 </body>
-
 </html>

incorporationblockchaincontract.html

@@ -28,24 +28,22 @@
         </header>
         <ul id="floor_list" class="grid"></ul>
     </section>
-    <header id="main_header" class="full-bleed">
+    <header id="main_header" class="grid align-center full-bleed">
         <button id="elevator_button" class="button" onclick="showSiteMap()">
-            <svg class="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <svg class="icon button__icon--left" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 3L16.3301 10.5H7.66987L12 3Z"/><path d="M12 21L7.66987 13.5L16.3301 13.5L12 21Z"/></svg>
-                <path d="M12 3L16.3301 10.5H7.66987L12 3Z" />
-                <path d="M12 21L7.66987 13.5L16.3301 13.5L12 21Z" />
-            </svg>
             <span class="button__label">
                 Elevator
             </span>
         </button>
         <a href="index.html" class="main-logo flex align-center page-link justify-self-center" data-target="home_page">
-            <svg id="main_header__logo" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+            <svg id="main_header__logo" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.46,21.32C20,19.78,18.6,18.59,15.3,17a12.67,12.67,0,0,1-2.64-1.56,4.27,4.27,0,0,1-.79-1,2.6,2.6,0,0,1,0-1.41c.24-.68.49-1,2.43-2.85a7.18,7.18,0,0,0,2.09-2.92,4.25,4.25,0,0,0,0-1.77,6.52,6.52,0,0,0-2.85-3.11c-.56-.36-.81-.4-.81-.15a2.33,2.33,0,0,1-.18.45L12.4,3l-.53-.36c-.28-.21-.64-.41-.77-.49s-.46-.11-.46,0a6.21,6.21,0,0,1-.37.83s-.08,0-.17-.08c-1.15-.83-1.64-1-1.64-.73A7.33,7.33,0,0,1,7.7,3.65C6.48,5.68,5.24,6.7,4,6.7c-.56,0-.54,0-.37.64s.2.58.68.43a3.37,3.37,0,0,0,1.09-.54.86.86,0,0,1,.3-.17,1.34,1.34,0,0,1,.13.39.79.79,0,0,0,.17.4A3.5,3.5,0,0,0,7.37,7.3L7.8,7l.09.34c.12.45.19.51.62.39a4.25,4.25,0,0,0,2.17-1.54l.38-.45,0,.39A5.92,5.92,0,0,1,8.89,9.54L7.67,10.71c-2,1.93-1.89,3.51.37,5a27.41,27.41,0,0,0,2.89,1.51c.17.07.62.32,1,.54C14,19,15,20.23,15,21.48a2,2,0,0,0,0,.49h0c0,.05,0,.05.56-.1a1.89,1.89,0,0,0,.53-.21,2.41,2.41,0,0,0-.34-1.15,7.05,7.05,0,0,0-1.68-1.77,21.91,21.91,0,0,0-3.2-1.83A9.53,9.53,0,0,1,8.16,15.2a2.18,2.18,0,0,1-.74-1.55C7.42,12.79,7.86,12,9,11c1.77-1.64,2.45-2.45,2.92-3.55a2.28,2.28,0,0,0,.26-1.26A2,2,0,0,0,12,5.06l-.2-.45L12,4.3l.28-.49.09-.18L12.6,4a3.69,3.69,0,0,1,.61,1.76A3.47,3.47,0,0,1,12.94,7l-.09.25s-.21.37-.41.69A17.78,17.78,0,0,1,9.91,10.6c-1.07,1-1.43,1.62-1.47,2.47a2.05,2.05,0,0,0,.7,1.73,10.47,10.47,0,0,0,3.28,2.08c2.28,1.13,3.26,1.81,4,2.73a2.94,2.94,0,0,1,.74,1.75,1.26,1.26,0,0,0,.09.57.48.48,0,0,0,.26,0l.51-.13.29-.08,0-.28c-.13-1-1-2-2.47-3a25.52,25.52,0,0,0-3.26-1.77,8.59,8.59,0,0,1-2.23-1.43,2.09,2.09,0,0,1-.5-2.62c.26-.53.5-.83,2.35-2.6,1.51-1.45,2.15-2.58,2.15-3.79A3.67,3.67,0,0,0,13,3.48a3,3,0,0,1-.4-.42A1.85,1.85,0,0,1,13,2.33a6.74,6.74,0,0,1,1.83,1.73,2.62,2.62,0,0,1,.47,1.68,3,3,0,0,1-.55,1.84c-.45.78-.79,1.14-2.67,2.93a5.56,5.56,0,0,0-1.3,1.64,1.77,1.77,0,0,0-.21,1,1.76,1.76,0,0,0,.19.92,6.28,6.28,0,0,0,2.9,2.34,21.6,21.6,0,0,1,3.66,2c1.35,1,2,2,2,3a1.06,1.06,0,0,0,.05.47,2.83,2.83,0,0,0,1-.24C20.56,21.68,20.56,21.66,20.46,21.32ZM7.29,6.4h0a2.23,2.23,0,0,1-.9.28L6,6.72l.43-.53a15.22,15.22,0,0,0,1.89-3,3.52,3.52,0,0,1,.38-.67c.07-.08.49.2,1,.64l.39.35L9.66,4A6.7,6.7,0,0,1,7.29,6.4Zm3.58-1.11A5.8,5.8,0,0,1,9.25,6.51h0a3.3,3.3,0,0,1-.74.17l-.35,0,.39-.49a15.64,15.64,0,0,0,1.32-2,4.63,4.63,0,0,1,.28-.49c.06-.08.33.26.57.77l.28.57Zm1-1.4a1.63,1.63,0,0,1-.28.4A6.63,6.63,0,0,1,11,3.72l-.53-.56.12-.29c.2-.49.24-.51.64-.19a5.57,5.57,0,0,1,.85.78A2.78,2.78,0,0,1,11.87,3.89Z"/></svg>
-                <path
-                    d="M20.46,21.32C20,19.78,18.6,18.59,15.3,17a12.67,12.67,0,0,1-2.64-1.56,4.27,4.27,0,0,1-.79-1,2.6,2.6,0,0,1,0-1.41c.24-.68.49-1,2.43-2.85a7.18,7.18,0,0,0,2.09-2.92,4.25,4.25,0,0,0,0-1.77,6.52,6.52,0,0,0-2.85-3.11c-.56-.36-.81-.4-.81-.15a2.33,2.33,0,0,1-.18.45L12.4,3l-.53-.36c-.28-.21-.64-.41-.77-.49s-.46-.11-.46,0a6.21,6.21,0,0,1-.37.83s-.08,0-.17-.08c-1.15-.83-1.64-1-1.64-.73A7.33,7.33,0,0,1,7.7,3.65C6.48,5.68,5.24,6.7,4,6.7c-.56,0-.54,0-.37.64s.2.58.68.43a3.37,3.37,0,0,0,1.09-.54.86.86,0,0,1,.3-.17,1.34,1.34,0,0,1,.13.39.79.79,0,0,0,.17.4A3.5,3.5,0,0,0,7.37,7.3L7.8,7l.09.34c.12.45.19.51.62.39a4.25,4.25,0,0,0,2.17-1.54l.38-.45,0,.39A5.92,5.92,0,0,1,8.89,9.54L7.67,10.71c-2,1.93-1.89,3.51.37,5a27.41,27.41,0,0,0,2.89,1.51c.17.07.62.32,1,.54C14,19,15,20.23,15,21.48a2,2,0,0,0,0,.49h0c0,.05,0,.05.56-.1a1.89,1.89,0,0,0,.53-.21,2.41,2.41,0,0,0-.34-1.15,7.05,7.05,0,0,0-1.68-1.77,21.91,21.91,0,0,0-3.2-1.83A9.53,9.53,0,0,1,8.16,15.2a2.18,2.18,0,0,1-.74-1.55C7.42,12.79,7.86,12,9,11c1.77-1.64,2.45-2.45,2.92-3.55a2.28,2.28,0,0,0,.26-1.26A2,2,0,0,0,12,5.06l-.2-.45L12,4.3l.28-.49.09-.18L12.6,4a3.69,3.69,0,0,1,.61,1.76A3.47,3.47,0,0,1,12.94,7l-.09.25s-.21.37-.41.69A17.78,17.78,0,0,1,9.91,10.6c-1.07,1-1.43,1.62-1.47,2.47a2.05,2.05,0,0,0,.7,1.73,10.47,10.47,0,0,0,3.28,2.08c2.28,1.13,3.26,1.81,4,2.73a2.94,2.94,0,0,1,.74,1.75,1.26,1.26,0,0,0,.09.57.48.48,0,0,0,.26,0l.51-.13.29-.08,0-.28c-.13-1-1-2-2.47-3a25.52,25.52,0,0,0-3.26-1.77,8.59,8.59,0,0,1-2.23-1.43,2.09,2.09,0,0,1-.5-2.62c.26-.53.5-.83,2.35-2.6,1.51-1.45,2.15-2.58,2.15-3.79A3.67,3.67,0,0,0,13,3.48a3,3,0,0,1-.4-.42A1.85,1.85,0,0,1,13,2.33a6.74,6.74,0,0,1,1.83,1.73,2.62,2.62,0,0,1,.47,1.68,3,3,0,0,1-.55,1.84c-.45.78-.79,1.14-2.67,2.93a5.56,5.56,0,0,0-1.3,1.64,1.77,1.77,0,0,0-.21,1,1.76,1.76,0,0,0,.19.92,6.28,6.28,0,0,0,2.9,2.34,21.6,21.6,0,0,1,3.66,2c1.35,1,2,2,2,3a1.06,1.06,0,0,0,.05.47,2.83,2.83,0,0,0,1-.24C20.56,21.68,20.56,21.66,20.46,21.32ZM7.29,6.4h0a2.23,2.23,0,0,1-.9.28L6,6.72l.43-.53a15.22,15.22,0,0,0,1.89-3,3.52,3.52,0,0,1,.38-.67c.07-.08.49.2,1,.64l.39.35L9.66,4A6.7,6.7,0,0,1,7.29,6.4Zm3.58-1.11A5.8,5.8,0,0,1,9.25,6.51h0a3.3,3.3,0,0,1-.74.17l-.35,0,.39-.49a15.64,15.64,0,0,0,1.32-2,4.63,4.63,0,0,1,.28-.49c.06-.08.33.26.57.77l.28.57Zm1-1.4a1.63,1.63,0,0,1-.28.4A6.63,6.63,0,0,1,11,3.72l-.53-.56.12-.29c.2-.49.24-.51.64-.19a5.57,5.57,0,0,1,.85.78A2.78,2.78,0,0,1,11.87,3.89Z" />
-            </svg>
             <h4 class="h4 header__company-name">RanchiMall</h4>
         </a>
-        <theme-toggle></theme-toggle>
+        <label class="theme-switcher" title="Change theme">
+            <input id="theme_switcher" class="theme-switcher__checkbox" type="checkbox">
+            <svg class="icon moon-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M10 6a8 8 0 0 0 11.955 6.956C21.474 18.03 17.2 22 12 22 6.477 22 2 17.523 2 12c0-5.2 3.97-9.474 9.044-9.955A7.963 7.963 0 0 0 10 6zm-6 6a8 8 0 0 0 8 8 8.006 8.006 0 0 0 6.957-4.045c-.316.03-.636.045-.957.045-5.523 0-10-4.477-10-10 0-.321.015-.64.045-.957A8.006 8.006 0 0 0 4 12zm14.164-9.709L19 2.5v1l-.836.209a2 2 0 0 0-1.455 1.455L16.5 6h-1l-.209-.836a2 2 0 0 0-1.455-1.455L13 3.5v-1l.836-.209A2 2 0 0 0 15.29.836L15.5 0h1l.209.836a2 2 0 0 0 1.455 1.455zm5 5L24 7.5v1l-.836.209a2 2 0 0 0-1.455 1.455L21.5 11h-1l-.209-.836a2 2 0 0 0-1.455-1.455L18 8.5v-1l.836-.209a2 2 0 0 0 1.455-1.455L20.5 5h1l.209.836a2 2 0 0 0 1.455 1.455z"/></svg>
+            <svg class="icon sun-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636 5.636 7.05 3.515 4.93zM16.95 18.364l1.414-1.414 2.121 2.121-1.414 1.414-2.121-2.121zm2.121-14.85l1.414 1.415-2.121 2.121-1.414-1.414 2.121-2.121zM5.636 16.95l1.414 1.414-2.121 2.121-1.414-1.414 2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z"/></svg>
+        </label>
     </header>
     <div id="outlet_switcher" class="grid gap-1-5 hide">
         <div class="flex align-center">
@@ -69,16 +67,9 @@
     <main class="page">
         <section class="outlet-hero-section grid margin-bottom-3r">
             <button class="outlet-label">
-                <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+                <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M21 13.242V20h1v2H2v-2h1v-6.758A4.496 4.496 0 0 1 1 9.5c0-.827.224-1.624.633-2.303L4.345 2.5a1 1 0 0 1 .866-.5H18.79a1 1 0 0 1 .866.5l2.702 4.682A4.496 4.496 0 0 1 21 13.242zm-2 .73a4.496 4.496 0 0 1-3.75-1.36A4.496 4.496 0 0 1 12 14.001a4.496 4.496 0 0 1-3.25-1.387A4.496 4.496 0 0 1 5 13.973V20h14v-6.027zM5.789 4L3.356 8.213a2.5 2.5 0 0 0 4.466 2.216c.335-.837 1.52-.837 1.856 0a2.5 2.5 0 0 0 4.644 0c.335-.837 1.52-.837 1.856 0a2.5 2.5 0 1 0 4.457-2.232L18.21 4H5.79z"/></svg>
-                    <path fill="none" d="M0 0h24v24H0z" />
-                    <path
-                        d="M21 13.242V20h1v2H2v-2h1v-6.758A4.496 4.496 0 0 1 1 9.5c0-.827.224-1.624.633-2.303L4.345 2.5a1 1 0 0 1 .866-.5H18.79a1 1 0 0 1 .866.5l2.702 4.682A4.496 4.496 0 0 1 21 13.242zm-2 .73a4.496 4.496 0 0 1-3.75-1.36A4.496 4.496 0 0 1 12 14.001a4.496 4.496 0 0 1-3.25-1.387A4.496 4.496 0 0 1 5 13.973V20h14v-6.027zM5.789 4L3.356 8.213a2.5 2.5 0 0 0 4.466 2.216c.335-.837 1.52-.837 1.856 0a2.5 2.5 0 0 0 4.644 0c.335-.837 1.52-.837 1.856 0a2.5 2.5 0 1 0 4.457-2.232L18.21 4H5.79z" />
-                </svg>
                 <span class="outlet-label__name">Outlet</span>
-                <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+                <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z"/></svg>
-                    <path fill="none" d="M0 0h24v24H0z" />
-                    <path d="M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z" />
-                </svg>
             </button>
             <h2 class="h2 weight-700 margin-bottom-1r">Incorporation Blockchain Contract</h2>
             <p>
@@ -91,23 +82,13 @@
             <h4 class="room__label">Rooms</h4>
             <scroll-tab-header data-target="ico_page_group">
                 <button class="room-button" title="Phases">
-                    <svg class="icon button__icon--left" xmlns="http://www.w3.org/2000/svg" height="24px"
+                    <svg class="icon button__icon--left" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.68-1.5 1.5s.68 1.5 1.5 1.5 1.5-.68 1.5-1.5-.67-1.5-1.5-1.5zM7 19h14v-2H7v2zm0-6h14v-2H7v2zm0-8v2h14V5H7z"/></svg>
-                        viewBox="0 0 24 24" width="24px" fill="#000000">
-                        <path d="M0 0h24v24H0V0z" fill="none" />
-                        <path
-                            d="M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.68-1.5 1.5s.68 1.5 1.5 1.5 1.5-.68 1.5-1.5-.67-1.5-1.5-1.5zM7 19h14v-2H7v2zm0-6h14v-2H7v2zm0-8v2h14V5H7z" />
-                    </svg>
                     <span class="button__label">
                         Product
                     </span>
                 </button>
                 <button class="room-button" title="Phases">
-                    <svg class="icon button__icon--left" xmlns="http://www.w3.org/2000/svg" height="24px"
+                    <svg class="icon button__icon--left" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.68-1.5 1.5s.68 1.5 1.5 1.5 1.5-.68 1.5-1.5-.67-1.5-1.5-1.5zM7 19h14v-2H7v2zm0-6h14v-2H7v2zm0-8v2h14V5H7z"/></svg>
-                        viewBox="0 0 24 24" width="24px" fill="#000000">
-                        <path d="M0 0h24v24H0V0z" fill="none" />
-                        <path
-                            d="M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.68-1.5 1.5s.68 1.5 1.5 1.5 1.5-.68 1.5-1.5-.67-1.5-1.5-1.5zM7 19h14v-2H7v2zm0-6h14v-2H7v2zm0-8v2h14V5H7z" />
-                    </svg>
                     <span class="button__label">
                         Purchase
                     </span>
@@ -126,16 +107,13 @@
                 <p class="margin-bottom-3r">
                     Incorporation Blockchain Contract has been tokenised as RanchiMall Tokens
                     (RMT)We have sold 100000 such tokens till now. The product being sold here is RanchiMall Tokens
-                    (RMT)These tokens can also be purchased from <a href="ico.html">ICO Outlet on Floor 1</a>. However
+                    (RMT)These tokens can also be purchased from <a href="ico.html">ICO Outlet on Floor 1</a>. However the tokens purchased
-                    the tokens purchased
                     here are on the blockchain unlike ICO Outlet where tokens are held in our own database.
                 </p>
                 <h4 class="h4 margin-bottom-1r">Useful links</h4>
                 <p class="grid gap-1">
-                    <a href="https://ranchimall.github.io/media/introduction/2_Blockchain_Contract.pdf">Blockchain
+                    <a href="https://ranchimall.github.io/media/introduction/2_Blockchain_Contract.pdf">Blockchain Contract concept presentation</a>
-                        Contract concept presentation</a>
+                    <a href="https://medium.com/@tripathyr/ranchi-mall-incorporation-blockchain-contract-24f256ee31f1">Medium article explaining Incorporation Blockchain Contract</a>
-                    <a href="https://medium.com/@tripathyr/ranchi-mall-incorporation-blockchain-contract-24f256ee31f1">Medium
-                        article explaining Incorporation Blockchain Contract</a>
                 </p>
 
             </section>
@@ -148,10 +126,8 @@
             </section>
         </scroll-tab-panels>
     </main>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
-    <script src="assets/js/components.js"></script>
+    <script src="js/components.js"></script>
-    <script src="https://unpkg.com/uhtml@3.0.1/es.js"></script>
+    <script src="js/index.js"></script>
-    <script src="assets/js/index.js"></script>
 </body>
-
 </html>

index.html

@@ -1,6 +1,5 @@
 <!DOCTYPE html>
 <html lang="en">
-
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -12,20 +11,40 @@
     <link rel="preconnect" href="https://fonts.gstatic.com">
     <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300..900&display=swap" rel="stylesheet">
 </head>
-
 <body data-theme="light">
     <sm-notifications id="notification_drawer"></sm-notifications>
+    <!-- Component templates -->
+
+    <template id="ico_investor_row">
+        <div class="investor-card grid gap-1-5">
+            <img class="investor__image" src="" alt="" loading="lazy">
+            <div class="grid">
+                <h3 class="investor__name value capitalize"></h3>
+                <p class="investor__bio color-0-8"></p>
+            </div>
+            <div class="grid investor__contribution-container">
+                <h4 class="label color-0-8 weight-500">Contribution</h4>
+                <p class="investor__contribution weight-700"></p>
+            </div>
+        </div>
+    </template>
+
+
+    <template id="floor_indicator_template">
+        <div class="floor-label interact">
+            <span class="floor-circle"></span>
+        </div>
+    </template>
+
+    <!--  -->
+
+
     <!-- Popup -->
 
     <section id="elevator_popup" class="grid hide-completely">
         <header class="elevator__header">
             <button class="close-button justify-self-start" onclick="hideSiteMap()">
-                <svg class="icon icon-only close-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24"
+                <svg class="icon icon-only close-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></svg>
-                    height="24">
-                    <path fill="none" d="M0 0h24v24H0z" />
-                    <path
-                        d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z" />
-                </svg>
             </button>
         </header>
         <ul id="floor_list" class="grid"></ul>
@@ -35,37 +54,36 @@
 
     <header id="main_header" class="grid align-center full-bleed">
         <button id="elevator_button" class="button" onclick="showSiteMap()">
-            <svg class="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <svg class="icon button__icon--left" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 3L16.3301 10.5H7.66987L12 3Z"/><path d="M12 21L7.66987 13.5L16.3301 13.5L12 21Z"/></svg>
-                <path d="M12 3L16.3301 10.5H7.66987L12 3Z" />
-                <path d="M12 21L7.66987 13.5L16.3301 13.5L12 21Z" />
-            </svg>
             <span class="button__label">
                 Elevator
             </span>
         </button>
         <a href="index.html" class="main-logo flex align-center page-link justify-self-center" data-target="home_page">
-            <svg id="main_header__logo" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+            <svg id="main_header__logo" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.46,21.32C20,19.78,18.6,18.59,15.3,17a12.67,12.67,0,0,1-2.64-1.56,4.27,4.27,0,0,1-.79-1,2.6,2.6,0,0,1,0-1.41c.24-.68.49-1,2.43-2.85a7.18,7.18,0,0,0,2.09-2.92,4.25,4.25,0,0,0,0-1.77,6.52,6.52,0,0,0-2.85-3.11c-.56-.36-.81-.4-.81-.15a2.33,2.33,0,0,1-.18.45L12.4,3l-.53-.36c-.28-.21-.64-.41-.77-.49s-.46-.11-.46,0a6.21,6.21,0,0,1-.37.83s-.08,0-.17-.08c-1.15-.83-1.64-1-1.64-.73A7.33,7.33,0,0,1,7.7,3.65C6.48,5.68,5.24,6.7,4,6.7c-.56,0-.54,0-.37.64s.2.58.68.43a3.37,3.37,0,0,0,1.09-.54.86.86,0,0,1,.3-.17,1.34,1.34,0,0,1,.13.39.79.79,0,0,0,.17.4A3.5,3.5,0,0,0,7.37,7.3L7.8,7l.09.34c.12.45.19.51.62.39a4.25,4.25,0,0,0,2.17-1.54l.38-.45,0,.39A5.92,5.92,0,0,1,8.89,9.54L7.67,10.71c-2,1.93-1.89,3.51.37,5a27.41,27.41,0,0,0,2.89,1.51c.17.07.62.32,1,.54C14,19,15,20.23,15,21.48a2,2,0,0,0,0,.49h0c0,.05,0,.05.56-.1a1.89,1.89,0,0,0,.53-.21,2.41,2.41,0,0,0-.34-1.15,7.05,7.05,0,0,0-1.68-1.77,21.91,21.91,0,0,0-3.2-1.83A9.53,9.53,0,0,1,8.16,15.2a2.18,2.18,0,0,1-.74-1.55C7.42,12.79,7.86,12,9,11c1.77-1.64,2.45-2.45,2.92-3.55a2.28,2.28,0,0,0,.26-1.26A2,2,0,0,0,12,5.06l-.2-.45L12,4.3l.28-.49.09-.18L12.6,4a3.69,3.69,0,0,1,.61,1.76A3.47,3.47,0,0,1,12.94,7l-.09.25s-.21.37-.41.69A17.78,17.78,0,0,1,9.91,10.6c-1.07,1-1.43,1.62-1.47,2.47a2.05,2.05,0,0,0,.7,1.73,10.47,10.47,0,0,0,3.28,2.08c2.28,1.13,3.26,1.81,4,2.73a2.94,2.94,0,0,1,.74,1.75,1.26,1.26,0,0,0,.09.57.48.48,0,0,0,.26,0l.51-.13.29-.08,0-.28c-.13-1-1-2-2.47-3a25.52,25.52,0,0,0-3.26-1.77,8.59,8.59,0,0,1-2.23-1.43,2.09,2.09,0,0,1-.5-2.62c.26-.53.5-.83,2.35-2.6,1.51-1.45,2.15-2.58,2.15-3.79A3.67,3.67,0,0,0,13,3.48a3,3,0,0,1-.4-.42A1.85,1.85,0,0,1,13,2.33a6.74,6.74,0,0,1,1.83,1.73,2.62,2.62,0,0,1,.47,1.68,3,3,0,0,1-.55,1.84c-.45.78-.79,1.14-2.67,2.93a5.56,5.56,0,0,0-1.3,1.64,1.77,1.77,0,0,0-.21,1,1.76,1.76,0,0,0,.19.92,6.28,6.28,0,0,0,2.9,2.34,21.6,21.6,0,0,1,3.66,2c1.35,1,2,2,2,3a1.06,1.06,0,0,0,.05.47,2.83,2.83,0,0,0,1-.24C20.56,21.68,20.56,21.66,20.46,21.32ZM7.29,6.4h0a2.23,2.23,0,0,1-.9.28L6,6.72l.43-.53a15.22,15.22,0,0,0,1.89-3,3.52,3.52,0,0,1,.38-.67c.07-.08.49.2,1,.64l.39.35L9.66,4A6.7,6.7,0,0,1,7.29,6.4Zm3.58-1.11A5.8,5.8,0,0,1,9.25,6.51h0a3.3,3.3,0,0,1-.74.17l-.35,0,.39-.49a15.64,15.64,0,0,0,1.32-2,4.63,4.63,0,0,1,.28-.49c.06-.08.33.26.57.77l.28.57Zm1-1.4a1.63,1.63,0,0,1-.28.4A6.63,6.63,0,0,1,11,3.72l-.53-.56.12-.29c.2-.49.24-.51.64-.19a5.57,5.57,0,0,1,.85.78A2.78,2.78,0,0,1,11.87,3.89Z"/></svg>
-                <path
-                    d="M20.46,21.32C20,19.78,18.6,18.59,15.3,17a12.67,12.67,0,0,1-2.64-1.56,4.27,4.27,0,0,1-.79-1,2.6,2.6,0,0,1,0-1.41c.24-.68.49-1,2.43-2.85a7.18,7.18,0,0,0,2.09-2.92,4.25,4.25,0,0,0,0-1.77,6.52,6.52,0,0,0-2.85-3.11c-.56-.36-.81-.4-.81-.15a2.33,2.33,0,0,1-.18.45L12.4,3l-.53-.36c-.28-.21-.64-.41-.77-.49s-.46-.11-.46,0a6.21,6.21,0,0,1-.37.83s-.08,0-.17-.08c-1.15-.83-1.64-1-1.64-.73A7.33,7.33,0,0,1,7.7,3.65C6.48,5.68,5.24,6.7,4,6.7c-.56,0-.54,0-.37.64s.2.58.68.43a3.37,3.37,0,0,0,1.09-.54.86.86,0,0,1,.3-.17,1.34,1.34,0,0,1,.13.39.79.79,0,0,0,.17.4A3.5,3.5,0,0,0,7.37,7.3L7.8,7l.09.34c.12.45.19.51.62.39a4.25,4.25,0,0,0,2.17-1.54l.38-.45,0,.39A5.92,5.92,0,0,1,8.89,9.54L7.67,10.71c-2,1.93-1.89,3.51.37,5a27.41,27.41,0,0,0,2.89,1.51c.17.07.62.32,1,.54C14,19,15,20.23,15,21.48a2,2,0,0,0,0,.49h0c0,.05,0,.05.56-.1a1.89,1.89,0,0,0,.53-.21,2.41,2.41,0,0,0-.34-1.15,7.05,7.05,0,0,0-1.68-1.77,21.91,21.91,0,0,0-3.2-1.83A9.53,9.53,0,0,1,8.16,15.2a2.18,2.18,0,0,1-.74-1.55C7.42,12.79,7.86,12,9,11c1.77-1.64,2.45-2.45,2.92-3.55a2.28,2.28,0,0,0,.26-1.26A2,2,0,0,0,12,5.06l-.2-.45L12,4.3l.28-.49.09-.18L12.6,4a3.69,3.69,0,0,1,.61,1.76A3.47,3.47,0,0,1,12.94,7l-.09.25s-.21.37-.41.69A17.78,17.78,0,0,1,9.91,10.6c-1.07,1-1.43,1.62-1.47,2.47a2.05,2.05,0,0,0,.7,1.73,10.47,10.47,0,0,0,3.28,2.08c2.28,1.13,3.26,1.81,4,2.73a2.94,2.94,0,0,1,.74,1.75,1.26,1.26,0,0,0,.09.57.48.48,0,0,0,.26,0l.51-.13.29-.08,0-.28c-.13-1-1-2-2.47-3a25.52,25.52,0,0,0-3.26-1.77,8.59,8.59,0,0,1-2.23-1.43,2.09,2.09,0,0,1-.5-2.62c.26-.53.5-.83,2.35-2.6,1.51-1.45,2.15-2.58,2.15-3.79A3.67,3.67,0,0,0,13,3.48a3,3,0,0,1-.4-.42A1.85,1.85,0,0,1,13,2.33a6.74,6.74,0,0,1,1.83,1.73,2.62,2.62,0,0,1,.47,1.68,3,3,0,0,1-.55,1.84c-.45.78-.79,1.14-2.67,2.93a5.56,5.56,0,0,0-1.3,1.64,1.77,1.77,0,0,0-.21,1,1.76,1.76,0,0,0,.19.92,6.28,6.28,0,0,0,2.9,2.34,21.6,21.6,0,0,1,3.66,2c1.35,1,2,2,2,3a1.06,1.06,0,0,0,.05.47,2.83,2.83,0,0,0,1-.24C20.56,21.68,20.56,21.66,20.46,21.32ZM7.29,6.4h0a2.23,2.23,0,0,1-.9.28L6,6.72l.43-.53a15.22,15.22,0,0,0,1.89-3,3.52,3.52,0,0,1,.38-.67c.07-.08.49.2,1,.64l.39.35L9.66,4A6.7,6.7,0,0,1,7.29,6.4Zm3.58-1.11A5.8,5.8,0,0,1,9.25,6.51h0a3.3,3.3,0,0,1-.74.17l-.35,0,.39-.49a15.64,15.64,0,0,0,1.32-2,4.63,4.63,0,0,1,.28-.49c.06-.08.33.26.57.77l.28.57Zm1-1.4a1.63,1.63,0,0,1-.28.4A6.63,6.63,0,0,1,11,3.72l-.53-.56.12-.29c.2-.49.24-.51.64-.19a5.57,5.57,0,0,1,.85.78A2.78,2.78,0,0,1,11.87,3.89Z" />
-            </svg>
             <h4 class="h4 header__company-name">RanchiMall</h4>
         </a>
-        <theme-toggle></theme-toggle>
+        <label class="theme-switcher" title="Change theme">
+            <input id="theme_switcher" class="theme-switcher__checkbox" type="checkbox">
+            <svg class="icon moon-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M10 6a8 8 0 0 0 11.955 6.956C21.474 18.03 17.2 22 12 22 6.477 22 2 17.523 2 12c0-5.2 3.97-9.474 9.044-9.955A7.963 7.963 0 0 0 10 6zm-6 6a8 8 0 0 0 8 8 8.006 8.006 0 0 0 6.957-4.045c-.316.03-.636.045-.957.045-5.523 0-10-4.477-10-10 0-.321.015-.64.045-.957A8.006 8.006 0 0 0 4 12zm14.164-9.709L19 2.5v1l-.836.209a2 2 0 0 0-1.455 1.455L16.5 6h-1l-.209-.836a2 2 0 0 0-1.455-1.455L13 3.5v-1l.836-.209A2 2 0 0 0 15.29.836L15.5 0h1l.209.836a2 2 0 0 0 1.455 1.455zm5 5L24 7.5v1l-.836.209a2 2 0 0 0-1.455 1.455L21.5 11h-1l-.209-.836a2 2 0 0 0-1.455-1.455L18 8.5v-1l.836-.209a2 2 0 0 0 1.455-1.455L20.5 5h1l.209.836a2 2 0 0 0 1.455 1.455z"/></svg>
+            <svg class="icon sun-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636 5.636 7.05 3.515 4.93zM16.95 18.364l1.414-1.414 2.121 2.121-1.414 1.414-2.121-2.121zm2.121-14.85l1.414 1.415-2.121 2.121-1.414-1.414 2.121-2.121zM5.636 16.95l1.414 1.414-2.121 2.121-1.414-1.414 2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z"/></svg>
+        </label>
     </header>
     <article id="home_page" class="page">
-        <!-- <aside id="floor_line_map" class="grid">
+        <aside id="floor_line_map" class="grid">
             <div class="flex line-map justify-center">
                 <div id="floor_line_map__circle" class="line-map__circle"></div>
                 <div class="line-map__bar"></div>
             </div>
             <div id="floor_label_container"></div>
-        </aside> -->
+        </aside>
         <main id="floor_container" class="grid"></main>
     </article>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
     <script src="assets/js/components.js"></script>
-    <script src="https://unpkg.com/uhtml@3.0.1/es.js"></script>
     <script src="assets/js/index.js"></script>
+
     <script>
 
         const icoInvestors = [
@@ -161,31 +179,37 @@
             },
         ]
 
-        function renderAllSeries() {
+        function renderAllSeries(){
-            const bonds = bitBondSeries.map((series, index) => {
+            const frag = document.createDocumentFragment()
-                return render.bitBondRow(series)
+            getRef('bit_bond_series__container').innerHTML = ''
+            bitBondSerieses.forEach((series, index) => {
+                frag.append(render.bitBondRow(series))
             })
-            renderElem(getRef('bit_bond_series__container'), html`${bonds}`)
+            getRef('bit_bond_series__container').append(frag)
         }
-        function renderAllFundInvestors() {
+        function renderAllFundInvestors(){
-            const funds = bobFund.map(investor => render.bobFundRow(investor))
+            const frag = document.createDocumentFragment()
-            renderElem(getRef('bob_fund_investors__container'), html`${funds}`)
+            getRef('bob_fund_investors__container').innerHTML = ''
+            bobFund.forEach(investor => {
+                frag.append(render.bobFundRow(investor))
+            })
+            getRef('bob_fund_investors__container').append(frag)
         }
-        function renderAllIcoInvestors() {
+        function renderAllIcoInvestors(){
             const frag = document.createDocumentFragment()
             getRef('ico_investors__container').innerHTML = ''
             icoInvestors.forEach(investor => {
-                frag.append(render.icoInvestorRow(investor, { thumbnail: true }))
+                frag.append(render.icoInvestorRow(investor, {thumbnail: true}))
             })
             getRef('ico_investors__container').append(frag)
         }
-        /*         renderAllIcoInvestors()
+/*         renderAllIcoInvestors()
-                renderAllSeries()
+        renderAllSeries()
-                renderAllFundInvestors() */
+        renderAllFundInvestors() */
+        
 
-
+        function showOutletSwitcher(button){
-        function showOutletSwitcher(button) {
+            if(isOutletSwitcherOpen) return
-            if (isOutletSwitcherOpen) return
             isOutletSwitcherOpen = true
             const buttonDimensions = button.getBoundingClientRect()
             getRef('outlet_switcher').setAttribute('style', `top: ${buttonDimensions.top + document.documentElement.scrollTop}px; left: ${buttonDimensions.left}px;`)
@@ -200,116 +224,129 @@
         const allOutletCarousels = document.querySelectorAll('.outlet-preview sm-carousel')
 
         let homepagePercent = floorLineMapPercent = 0
-        // const RO = new ResizeObserver(entries => {
+        const RO = new ResizeObserver(entries => {
-        //     entries.forEach(entry => {
+            entries.forEach(entry => {
-        //         homepagePercent = getRef('floor_container').scrollHeight / 100
+                homepagePercent = getRef('floor_container').scrollHeight / 100
-        //         floorLineMapPercent = getRef('floor_line_map').getBoundingClientRect().height / 100
+                floorLineMapPercent = getRef('floor_line_map').getBoundingClientRect().height / 100
-        //         renderAllFloorLabels()
+                renderAllFloorLabels()
-        //         updatePos()
+                updatePos()
-        //     });
+            });
-        // })
+        })
-        // RO.observe(document.body)
+        RO.observe(document.body)
         function getScrollPercent() {
             const root = getRef('home_page')
             return (root.scrollTop) / ((root.scrollHeight) - root.clientHeight) * 100;
         }
 
-        // getRef('home_page').addEventListener('scroll', e => {
+        getRef('home_page').addEventListener('scroll', e => {
-        //     throttle(updatePos, 1000 / 30)
+            throttle(updatePos, 1000 / 30)
-        // }, { passive: true })
+        }, {passive: true})
-
+        
-        function updatePos() {
+        function updatePos(){
             window.requestAnimationFrame(() => {
                 getRef('floor_line_map__circle').setAttribute('style', `transform: translateY(${(getScrollPercent()) * (floorLineMapPercent)}px)`)
             })
         }
 
 
-        function renderAllFloorLabels() {
+        function renderAllFloorLabels(){
             const frag = document.createDocumentFragment()
             document.querySelectorAll('.floor').forEach((floor, index) => {
                 getRef('floor_label_container').innerHTML = ''
                 const top = ((floor.getBoundingClientRect().top - getRef('floor_container').getBoundingClientRect().top + getRef('floor_container').offsetTop) / homepagePercent) * floorLineMapPercent
                 const label = render.floorLabel(index + 1, top)
                 frag.append(label)
-            })
+                })
             getRef('floor_label_container').append(frag)
         }
 
-        const floorObserver = new IntersectionObserver(entries => {
+        const floorObserver = new IntersectionObserver( entries => {
             entries.forEach(entry => {
-                if (entry.isIntersecting) {
+                if(entry.isIntersecting){
                     document.querySelector(`.floor-label[data-target="${entry.target.id}"]`).classList.add('floor-label--active')
                 }
-                else {
+                else{
                     document.querySelector(`.floor-label[data-target="${entry.target.id}"]`).classList.remove('floor-label--active')
                 }
             })
         },
-            {
+        {
-                threshold: 0.2
+            threshold: 0.2
-            })
+        })
         document.querySelectorAll('.floor').forEach(floor => floorObserver.observe(floor))
 
 
-        function renderFloor(obj) {
+        function renderFloor(obj){
-            const { floorNo, floor, brief, outlets } = obj
+            const {floorNo, floor, brief, outlets} = obj
-            return html`
+            const floorSection = create('section', {className: 'floor'})
-                <section id=${`floor_${floorNo + 1}`} class="floor">
+            floorSection.id = `floor_${floorNo + 1}`
-                    <header class="floor__header grid align-center">
+            floorSection.innerHTML = `
-                        <h4 class="floor__num">Floor ${floorNo + 1}</h5>
+                <header class="floor__header grid align-center">
-                        <h4 class="floor__title">${floor}</h3>
+                    <h4 class="floor__num">Floor ${floorNo + 1}</h5>
-                    </header>
+                    <h4 class="floor__title">${floor}</h3>
-                    <main id=${`floor_${floorNo + 1}__outlets`} class="grid outlets-container">
+                </header>
-                        <p>${brief}</p>
+                <main id="floor_${floorNo + 1}__outlets" class="grid outlets-container">
-                        ${outlets}
+                    <p>${brief}</p>
-                    </main>
+                </main>
-                </section>
+            `
-            `;
+            floorSection.querySelector(`#floor_${floorNo + 1}__outlets`).append(outlets)
+            return floorSection;
         }
 
-        function renderAllFloors() {
+        function renderAllFloors(){
-            const floorOutlets = siteMap.map((floor, floorNo) => {
+            const frag = document.createDocumentFragment()
-                return renderFloor({ ...floor, floorNo, outlets: renderFloorOutlets(floor.outlets) })
+            siteMap.forEach((floor, floorNo) => {
+                frag.append(renderFloor({...floor, floorNo, outlets: renderFloorOutlets(floor.outlets)}))
             })
-            renderElem(getRef('floor_container'), html`${floorOutlets}`)
+            getRef('floor_container').append(frag)
         }
         renderAllFloors()
 
-        function renderOutletPreview(obj) {
+        function renderOutletPreview(obj){
-            const { outletNo, name, brief, outletLinks } = obj
+            const {outletNo, name, brief, url, buyUrl, isSold} = obj
-            return html`
+            const preview = create('section', {
-                <section class="outlet-preview">
+                className: 'outlet-preview carousel-container'
-                    <div class="grid outlet-preview__info">
+            })
-                        <h3 class="outlet__title">${name}</h3>
+            let composed = `
-                        <p class="outlet__description margin-bottom-1-5r">${brief}</p>
+                <div class="grid outlet-preview__info">
-                        <div class="flex flex-wrap gap-1-5 justify-start">
+                    <h3 class="outlet__title">${name}</h3>
-                        ${outletLinks.map(link => renderOutletLink(link))}
+                    <p class="outlet__description margin-bottom-1-5r">${brief}</p>
+                    <div class="grid flow-column gap-1-5 justify-start">
+            `
+            if(isSold){
+                composed += `
+                    <a href="${url}#${buyUrl}" class="button outlet-preview__button">
+                        <span class="button__label">Buy</span>
+                    </a>
+                `
+            }
+            composed += `
+                        <a href="${url}" class="button outlet-preview__button">
+                            <span class="button__label">Explore</span>
+                        </a>
                     </div>
                 </div>
+            <!--                         <div class="grid carousel-holder carousel-holder--right">
+                            <sm-carousel id="bit_bond_series__container" class="outlet-preview__carousel" indicator></sm-carousel>
+                        </div> -->
                 <div class="grid outlet-preview__number-container">
                     <h1 class="outlet-preview__number-title h2 color-0-3 weight-900">Outlet</h1>
                     <h1 class="outlet-preview__number" data-number="${outletNo + 1}">${outletNo + 1}</h1>
                 </div>
-            `;
-        }
-        function renderOutletLink(linkDetails) {
-            const { label, url, outbound } = linkDetails
-            return html`
-                <a href=${url}  class="button outlet-preview__button" target=${outbound ? '_blank' : ''}>
-                    <span class="button__label">${label}</span>
-                </a>
             `
+            preview.innerHTML = composed
+            return preview;
         }
 
-        function renderFloorOutlets(outlets) {
+        function renderFloorOutlets(outlets){
-            return outlets.map((outlet, outletNo) => {
+            const frag = document.createDocumentFragment()
-                return renderOutletPreview({ ...outlet, outletNo })
+            outlets.forEach((outlet, outletNo) => {
+                frag.append(renderOutletPreview({...outlet, outletNo}))
             })
+            return frag
         }
 
 
     </script>
 </body>
-
 </html>

internshipblockchaincontract.html

@@ -30,62 +30,44 @@
     <sm-popup id="intern_level_popup">
         <header class="popup__header" slot="header">
             <button class="close-button" onclick="getRef('intern_level_popup').hide()">
-                <svg class="icon icon-only close-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24"
+                <svg class="icon icon-only close-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></svg>
-                    height="24">
-                    <path fill="none" d="M0 0h24v24H0z" />
-                    <path
-                        d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z" />
-                </svg>
             </button>
             <h4>Intern level information</h4>
         </header>
         <section class="grid">
             <header class="table margin-bottom-1-5r">
                 <h4>Level</h4>
-                <h4>Details</h4>
+                <h4 >Details</h4>
             </header>
             <section class="table">
                 <div>
                     Starter
                 </div>
                 <p>
-                    Starter Level is the qualification level. This is learning stage and will lead to award of
+                    Starter Level is the qualification level. This is learning stage and will lead to award of certificates to those who clear this level. In general we do not want to pay at this at level because money changes motivations. And we want to identify most passionate interns at their level, who would love their work even if no monetary consideration is involved
-                    certificates to those who clear this level. In general we do not want to pay at this at level
-                    because money changes motivations. And we want to identify most passionate interns at their level,
-                    who would love their work even if no monetary consideration is involved
                 </p>
                 <div>
                     Motivated
                 </div>
                 <p>
-                    Motivated is one time rewards stage. The complexity of projects will increase in this stage. If
+                    Motivated is one time rewards stage. The complexity of projects will increase in this stage. If projects are successfully completed, then one time rewards will be given. All this will be known before hand. Project details, acceptance criteria, and amounts will be notified in advance to interns. 
-                    projects are successfully completed, then one time rewards will be given. All this will be known
-                    before hand. Project details, acceptance criteria, and amounts will be notified in advance to
-                    interns.
                 </p>
                 <div>
                     Passionate
                 </div>
                 <p>
-                    Passionate is the first regular fixed stipend stage. The projects complexity will increase still
+                    Passionate is the first regular fixed stipend stage. The projects complexity will increase still further. This will be full scale commercial grade project. if 3 such projects are completed then one of the criteria to move into self driven stage will be met. Now we are looking for interns who in addition to being passionate are self driven, and can independently take on and complete full projects without day to day supervision.
-                    further. This will be full scale commercial grade project. if 3 such projects are completed then one
-                    of the criteria to move into self driven stage will be met. Now we are looking for interns who in
-                    addition to being passionate are self driven, and can independently take on and complete full
-                    projects without day to day supervision.
                 </p>
                 <div>
                     Self Driven
                 </div>
                 <p>
-                    Self Driven interns is the stage where are we are considering interns for permanent employment with
+                    Self Driven interns is the stage where are we are considering interns for permanent employment with Ranchi Mall. The internship stipends will be higher. Some of self driven interns will be guide interns in other levels. The key criteria is ability of complete jobs with high quality, and them taking self initiative. 
-                    Ranchi Mall. The internship stipends will be higher. Some of self driven interns will be guide
-                    interns in other levels. The key criteria is ability of complete jobs with high quality, and them
-                    taking self initiative.
                 </p>
             </section>
         </section>
     </sm-popup>
-
+    
     <section id="elevator_popup" class="grid hide-completely">
         <header class="elevator__header">
             <button class="close-button justify-self-start" onclick="hideSiteMap()">
@@ -99,24 +81,22 @@
         </header>
         <ul id="floor_list" class="grid"></ul>
     </section>
-    <header id="main_header" class="full-bleed">
+    <header id="main_header" class="grid align-center full-bleed">
         <button id="elevator_button" class="button" onclick="showSiteMap()">
-            <svg class="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <svg class="icon button__icon--left" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 3L16.3301 10.5H7.66987L12 3Z"/><path d="M12 21L7.66987 13.5L16.3301 13.5L12 21Z"/></svg>
-                <path d="M12 3L16.3301 10.5H7.66987L12 3Z" />
-                <path d="M12 21L7.66987 13.5L16.3301 13.5L12 21Z" />
-            </svg>
             <span class="button__label">
                 Elevator
             </span>
         </button>
         <a href="index.html" class="main-logo flex align-center page-link justify-self-center" data-target="home_page">
-            <svg id="main_header__logo" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+            <svg id="main_header__logo" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.46,21.32C20,19.78,18.6,18.59,15.3,17a12.67,12.67,0,0,1-2.64-1.56,4.27,4.27,0,0,1-.79-1,2.6,2.6,0,0,1,0-1.41c.24-.68.49-1,2.43-2.85a7.18,7.18,0,0,0,2.09-2.92,4.25,4.25,0,0,0,0-1.77,6.52,6.52,0,0,0-2.85-3.11c-.56-.36-.81-.4-.81-.15a2.33,2.33,0,0,1-.18.45L12.4,3l-.53-.36c-.28-.21-.64-.41-.77-.49s-.46-.11-.46,0a6.21,6.21,0,0,1-.37.83s-.08,0-.17-.08c-1.15-.83-1.64-1-1.64-.73A7.33,7.33,0,0,1,7.7,3.65C6.48,5.68,5.24,6.7,4,6.7c-.56,0-.54,0-.37.64s.2.58.68.43a3.37,3.37,0,0,0,1.09-.54.86.86,0,0,1,.3-.17,1.34,1.34,0,0,1,.13.39.79.79,0,0,0,.17.4A3.5,3.5,0,0,0,7.37,7.3L7.8,7l.09.34c.12.45.19.51.62.39a4.25,4.25,0,0,0,2.17-1.54l.38-.45,0,.39A5.92,5.92,0,0,1,8.89,9.54L7.67,10.71c-2,1.93-1.89,3.51.37,5a27.41,27.41,0,0,0,2.89,1.51c.17.07.62.32,1,.54C14,19,15,20.23,15,21.48a2,2,0,0,0,0,.49h0c0,.05,0,.05.56-.1a1.89,1.89,0,0,0,.53-.21,2.41,2.41,0,0,0-.34-1.15,7.05,7.05,0,0,0-1.68-1.77,21.91,21.91,0,0,0-3.2-1.83A9.53,9.53,0,0,1,8.16,15.2a2.18,2.18,0,0,1-.74-1.55C7.42,12.79,7.86,12,9,11c1.77-1.64,2.45-2.45,2.92-3.55a2.28,2.28,0,0,0,.26-1.26A2,2,0,0,0,12,5.06l-.2-.45L12,4.3l.28-.49.09-.18L12.6,4a3.69,3.69,0,0,1,.61,1.76A3.47,3.47,0,0,1,12.94,7l-.09.25s-.21.37-.41.69A17.78,17.78,0,0,1,9.91,10.6c-1.07,1-1.43,1.62-1.47,2.47a2.05,2.05,0,0,0,.7,1.73,10.47,10.47,0,0,0,3.28,2.08c2.28,1.13,3.26,1.81,4,2.73a2.94,2.94,0,0,1,.74,1.75,1.26,1.26,0,0,0,.09.57.48.48,0,0,0,.26,0l.51-.13.29-.08,0-.28c-.13-1-1-2-2.47-3a25.52,25.52,0,0,0-3.26-1.77,8.59,8.59,0,0,1-2.23-1.43,2.09,2.09,0,0,1-.5-2.62c.26-.53.5-.83,2.35-2.6,1.51-1.45,2.15-2.58,2.15-3.79A3.67,3.67,0,0,0,13,3.48a3,3,0,0,1-.4-.42A1.85,1.85,0,0,1,13,2.33a6.74,6.74,0,0,1,1.83,1.73,2.62,2.62,0,0,1,.47,1.68,3,3,0,0,1-.55,1.84c-.45.78-.79,1.14-2.67,2.93a5.56,5.56,0,0,0-1.3,1.64,1.77,1.77,0,0,0-.21,1,1.76,1.76,0,0,0,.19.92,6.28,6.28,0,0,0,2.9,2.34,21.6,21.6,0,0,1,3.66,2c1.35,1,2,2,2,3a1.06,1.06,0,0,0,.05.47,2.83,2.83,0,0,0,1-.24C20.56,21.68,20.56,21.66,20.46,21.32ZM7.29,6.4h0a2.23,2.23,0,0,1-.9.28L6,6.72l.43-.53a15.22,15.22,0,0,0,1.89-3,3.52,3.52,0,0,1,.38-.67c.07-.08.49.2,1,.64l.39.35L9.66,4A6.7,6.7,0,0,1,7.29,6.4Zm3.58-1.11A5.8,5.8,0,0,1,9.25,6.51h0a3.3,3.3,0,0,1-.74.17l-.35,0,.39-.49a15.64,15.64,0,0,0,1.32-2,4.63,4.63,0,0,1,.28-.49c.06-.08.33.26.57.77l.28.57Zm1-1.4a1.63,1.63,0,0,1-.28.4A6.63,6.63,0,0,1,11,3.72l-.53-.56.12-.29c.2-.49.24-.51.64-.19a5.57,5.57,0,0,1,.85.78A2.78,2.78,0,0,1,11.87,3.89Z"/></svg>
-                <path
-                    d="M20.46,21.32C20,19.78,18.6,18.59,15.3,17a12.67,12.67,0,0,1-2.64-1.56,4.27,4.27,0,0,1-.79-1,2.6,2.6,0,0,1,0-1.41c.24-.68.49-1,2.43-2.85a7.18,7.18,0,0,0,2.09-2.92,4.25,4.25,0,0,0,0-1.77,6.52,6.52,0,0,0-2.85-3.11c-.56-.36-.81-.4-.81-.15a2.33,2.33,0,0,1-.18.45L12.4,3l-.53-.36c-.28-.21-.64-.41-.77-.49s-.46-.11-.46,0a6.21,6.21,0,0,1-.37.83s-.08,0-.17-.08c-1.15-.83-1.64-1-1.64-.73A7.33,7.33,0,0,1,7.7,3.65C6.48,5.68,5.24,6.7,4,6.7c-.56,0-.54,0-.37.64s.2.58.68.43a3.37,3.37,0,0,0,1.09-.54.86.86,0,0,1,.3-.17,1.34,1.34,0,0,1,.13.39.79.79,0,0,0,.17.4A3.5,3.5,0,0,0,7.37,7.3L7.8,7l.09.34c.12.45.19.51.62.39a4.25,4.25,0,0,0,2.17-1.54l.38-.45,0,.39A5.92,5.92,0,0,1,8.89,9.54L7.67,10.71c-2,1.93-1.89,3.51.37,5a27.41,27.41,0,0,0,2.89,1.51c.17.07.62.32,1,.54C14,19,15,20.23,15,21.48a2,2,0,0,0,0,.49h0c0,.05,0,.05.56-.1a1.89,1.89,0,0,0,.53-.21,2.41,2.41,0,0,0-.34-1.15,7.05,7.05,0,0,0-1.68-1.77,21.91,21.91,0,0,0-3.2-1.83A9.53,9.53,0,0,1,8.16,15.2a2.18,2.18,0,0,1-.74-1.55C7.42,12.79,7.86,12,9,11c1.77-1.64,2.45-2.45,2.92-3.55a2.28,2.28,0,0,0,.26-1.26A2,2,0,0,0,12,5.06l-.2-.45L12,4.3l.28-.49.09-.18L12.6,4a3.69,3.69,0,0,1,.61,1.76A3.47,3.47,0,0,1,12.94,7l-.09.25s-.21.37-.41.69A17.78,17.78,0,0,1,9.91,10.6c-1.07,1-1.43,1.62-1.47,2.47a2.05,2.05,0,0,0,.7,1.73,10.47,10.47,0,0,0,3.28,2.08c2.28,1.13,3.26,1.81,4,2.73a2.94,2.94,0,0,1,.74,1.75,1.26,1.26,0,0,0,.09.57.48.48,0,0,0,.26,0l.51-.13.29-.08,0-.28c-.13-1-1-2-2.47-3a25.52,25.52,0,0,0-3.26-1.77,8.59,8.59,0,0,1-2.23-1.43,2.09,2.09,0,0,1-.5-2.62c.26-.53.5-.83,2.35-2.6,1.51-1.45,2.15-2.58,2.15-3.79A3.67,3.67,0,0,0,13,3.48a3,3,0,0,1-.4-.42A1.85,1.85,0,0,1,13,2.33a6.74,6.74,0,0,1,1.83,1.73,2.62,2.62,0,0,1,.47,1.68,3,3,0,0,1-.55,1.84c-.45.78-.79,1.14-2.67,2.93a5.56,5.56,0,0,0-1.3,1.64,1.77,1.77,0,0,0-.21,1,1.76,1.76,0,0,0,.19.92,6.28,6.28,0,0,0,2.9,2.34,21.6,21.6,0,0,1,3.66,2c1.35,1,2,2,2,3a1.06,1.06,0,0,0,.05.47,2.83,2.83,0,0,0,1-.24C20.56,21.68,20.56,21.66,20.46,21.32ZM7.29,6.4h0a2.23,2.23,0,0,1-.9.28L6,6.72l.43-.53a15.22,15.22,0,0,0,1.89-3,3.52,3.52,0,0,1,.38-.67c.07-.08.49.2,1,.64l.39.35L9.66,4A6.7,6.7,0,0,1,7.29,6.4Zm3.58-1.11A5.8,5.8,0,0,1,9.25,6.51h0a3.3,3.3,0,0,1-.74.17l-.35,0,.39-.49a15.64,15.64,0,0,0,1.32-2,4.63,4.63,0,0,1,.28-.49c.06-.08.33.26.57.77l.28.57Zm1-1.4a1.63,1.63,0,0,1-.28.4A6.63,6.63,0,0,1,11,3.72l-.53-.56.12-.29c.2-.49.24-.51.64-.19a5.57,5.57,0,0,1,.85.78A2.78,2.78,0,0,1,11.87,3.89Z" />
-            </svg>
             <h4 class="h4 header__company-name">RanchiMall</h4>
         </a>
-        <theme-toggle></theme-toggle>
+        <label class="theme-switcher" title="Change theme">
+            <input id="theme_switcher" class="theme-switcher__checkbox" type="checkbox">
+            <svg class="icon moon-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M10 6a8 8 0 0 0 11.955 6.956C21.474 18.03 17.2 22 12 22 6.477 22 2 17.523 2 12c0-5.2 3.97-9.474 9.044-9.955A7.963 7.963 0 0 0 10 6zm-6 6a8 8 0 0 0 8 8 8.006 8.006 0 0 0 6.957-4.045c-.316.03-.636.045-.957.045-5.523 0-10-4.477-10-10 0-.321.015-.64.045-.957A8.006 8.006 0 0 0 4 12zm14.164-9.709L19 2.5v1l-.836.209a2 2 0 0 0-1.455 1.455L16.5 6h-1l-.209-.836a2 2 0 0 0-1.455-1.455L13 3.5v-1l.836-.209A2 2 0 0 0 15.29.836L15.5 0h1l.209.836a2 2 0 0 0 1.455 1.455zm5 5L24 7.5v1l-.836.209a2 2 0 0 0-1.455 1.455L21.5 11h-1l-.209-.836a2 2 0 0 0-1.455-1.455L18 8.5v-1l.836-.209a2 2 0 0 0 1.455-1.455L20.5 5h1l.209.836a2 2 0 0 0 1.455 1.455z"/></svg>
+            <svg class="icon sun-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636 5.636 7.05 3.515 4.93zM16.95 18.364l1.414-1.414 2.121 2.121-1.414 1.414-2.121-2.121zm2.121-14.85l1.414 1.415-2.121 2.121-1.414-1.414 2.121-2.121zM5.636 16.95l1.414 1.414-2.121 2.121-1.414-1.414 2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z"/></svg>
+        </label>
     </header>
     <div id="outlet_switcher" class="grid gap-1-5 hide">
         <div class="flex align-center">
@@ -140,57 +120,26 @@
     <main class="page">
         <section class="outlet-hero-section grid margin-bottom-3r">
             <button class="outlet-label">
-                <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+                <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M21 13.242V20h1v2H2v-2h1v-6.758A4.496 4.496 0 0 1 1 9.5c0-.827.224-1.624.633-2.303L4.345 2.5a1 1 0 0 1 .866-.5H18.79a1 1 0 0 1 .866.5l2.702 4.682A4.496 4.496 0 0 1 21 13.242zm-2 .73a4.496 4.496 0 0 1-3.75-1.36A4.496 4.496 0 0 1 12 14.001a4.496 4.496 0 0 1-3.25-1.387A4.496 4.496 0 0 1 5 13.973V20h14v-6.027zM5.789 4L3.356 8.213a2.5 2.5 0 0 0 4.466 2.216c.335-.837 1.52-.837 1.856 0a2.5 2.5 0 0 0 4.644 0c.335-.837 1.52-.837 1.856 0a2.5 2.5 0 1 0 4.457-2.232L18.21 4H5.79z"/></svg>
-                    <path fill="none" d="M0 0h24v24H0z" />
-                    <path
-                        d="M21 13.242V20h1v2H2v-2h1v-6.758A4.496 4.496 0 0 1 1 9.5c0-.827.224-1.624.633-2.303L4.345 2.5a1 1 0 0 1 .866-.5H18.79a1 1 0 0 1 .866.5l2.702 4.682A4.496 4.496 0 0 1 21 13.242zm-2 .73a4.496 4.496 0 0 1-3.75-1.36A4.496 4.496 0 0 1 12 14.001a4.496 4.496 0 0 1-3.25-1.387A4.496 4.496 0 0 1 5 13.973V20h14v-6.027zM5.789 4L3.356 8.213a2.5 2.5 0 0 0 4.466 2.216c.335-.837 1.52-.837 1.856 0a2.5 2.5 0 0 0 4.644 0c.335-.837 1.52-.837 1.856 0a2.5 2.5 0 1 0 4.457-2.232L18.21 4H5.79z" />
-                </svg>
                 <span class="outlet-label__name">Outlet</span>
-                <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+                <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z"/></svg>
-                    <path fill="none" d="M0 0h24v24H0z" />
-                    <path d="M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z" />
-                </svg>
             </button>
             <h2 class="h2 weight-700 margin-bottom-1r">Internship Blockchain Contract</h2>
             <p>
-                Internship Blockchain Contract tokenizes all our internship initiatives. This is ownedby Incorporation
+                Internship Blockchain Contract tokenizes all our internship initiatives. This is ownedby Incorporation Blockchain Contract.
-                Blockchain Contract.
             </p>
         </section>
         <div class="rooms__header">
             <h4 class="room__label">Rooms</h4>
             <scroll-tab-header data-target="ico_page_group">
                 <button class="room-button" title="Investors">
-                    <svg class="icon button__icon--left" xmlns='http://www.w3.org/2000/svg' class='ionicon'
+                    <svg class="icon button__icon--left" xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'><title>People</title><path d='M402 168c-2.93 40.67-33.1 72-66 72s-63.12-31.32-66-72c-3-42.31 26.37-72 66-72s69 30.46 66 72z' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/><path d='M336 304c-65.17 0-127.84 32.37-143.54 95.41-2.08 8.34 3.15 16.59 11.72 16.59h263.65c8.57 0 13.77-8.25 11.72-16.59C463.85 335.36 401.18 304 336 304z' fill='none' stroke='currentColor' stroke-miterlimit='10' stroke-width='32'/><path d='M200 185.94c-2.34 32.48-26.72 58.06-53 58.06s-50.7-25.57-53-58.06C91.61 152.15 115.34 128 147 128s55.39 24.77 53 57.94z' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/><path d='M206 306c-18.05-8.27-37.93-11.45-59-11.45-52 0-102.1 25.85-114.65 76.2-1.65 6.66 2.53 13.25 9.37 13.25H154' fill='none' stroke='currentColor' stroke-linecap='round' stroke-miterlimit='10' stroke-width='32'/></svg>
-                        viewBox='0 0 512 512'>
-                        <title>People</title>
-                        <path
-                            d='M402 168c-2.93 40.67-33.1 72-66 72s-63.12-31.32-66-72c-3-42.31 26.37-72 66-72s69 30.46 66 72z'
-                            fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'
-                            stroke-width='32' />
-                        <path
-                            d='M336 304c-65.17 0-127.84 32.37-143.54 95.41-2.08 8.34 3.15 16.59 11.72 16.59h263.65c8.57 0 13.77-8.25 11.72-16.59C463.85 335.36 401.18 304 336 304z'
-                            fill='none' stroke='currentColor' stroke-miterlimit='10' stroke-width='32' />
-                        <path
-                            d='M200 185.94c-2.34 32.48-26.72 58.06-53 58.06s-50.7-25.57-53-58.06C91.61 152.15 115.34 128 147 128s55.39 24.77 53 57.94z'
-                            fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'
-                            stroke-width='32' />
-                        <path
-                            d='M206 306c-18.05-8.27-37.93-11.45-59-11.45-52 0-102.1 25.85-114.65 76.2-1.65 6.66 2.53 13.25 9.37 13.25H154'
-                            fill='none' stroke='currentColor' stroke-linecap='round' stroke-miterlimit='10'
-                            stroke-width='32' />
-                    </svg>
                     <span class="button__label">
                         Interns
                     </span>
                 </button>
                 <button class="room-button" title="Phases">
-                    <svg class="icon button__icon--left" xmlns="http://www.w3.org/2000/svg" height="24px"
+                    <svg class="icon button__icon--left" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.68-1.5 1.5s.68 1.5 1.5 1.5 1.5-.68 1.5-1.5-.67-1.5-1.5-1.5zM7 19h14v-2H7v2zm0-6h14v-2H7v2zm0-8v2h14V5H7z"/></svg>
-                        viewBox="0 0 24 24" width="24px" fill="#000000">
-                        <path d="M0 0h24v24H0V0z" fill="none" />
-                        <path
-                            d="M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.68-1.5 1.5s.68 1.5 1.5 1.5 1.5-.68 1.5-1.5-.67-1.5-1.5-1.5zM7 19h14v-2H7v2zm0-6h14v-2H7v2zm0-8v2h14V5H7z" />
-                    </svg>
                     <span class="button__label">
                         Projects
                     </span>
@@ -205,10 +154,8 @@
             <section>
                 <h3 class="h3 margin-bottom-1-5r">Projects</h3>
                 <p class="margin-bottom-3r">
-                    Please refer to the whitepaper <a href="https://www.ranchimall.net/ICO/">here</a> for detailed
+                    Please refer to the whitepaper <a href="https://www.ranchimall.net/ICO/">here</a> for detailed terms.
-                    terms.
+                    RanchiMall Initial Coin Offering (ICO) abides by the terms we offered in our ICO whitepaper available
-                    RanchiMall Initial Coin Offering (ICO) abides by the terms we offered in our ICO whitepaper
-                    available
                     at link above. We have made certain changes in our terms as our learning has improved. All
                     these changes are to support the interests of our long term investors.
                 </p>
@@ -216,8 +163,7 @@
                 <ol type="1">
                     <li>
                         <p>
-                            RanchiMall Tokens (RMT) now own the financial gains emerging from all our blockchain
+                            RanchiMall Tokens (RMT) now own the financial gains emerging from all our blockchain contracts
-                            contracts
                         </p>
                     </li>
                     <li>
@@ -233,16 +179,14 @@
                     <li>
                         <p>
                             Number of RMTs tokens in circulation has been paused to
-                            10000 instead of a release schedule of 21 million in 3 years. The un-issued tokens will stay
+                            10000 instead of a release schedule of 21 million in 3 years. The un-issued tokens will stay vested
-                            vested
                             with the Founder of RanchiMall.
                         </p>
                     </li>
                     <li>
                         <p>
                             The price discovery during active phase has been USD 1500 per
-                            token giving RMTs in circulation a valuation of 150 million USD. Unless this price is
+                            token giving RMTs in circulation a valuation of 150 million USD. Unless this price is realised in open
-                            realised in open
                             makets on sustainable basis, new tokens will not be put in circulation.
                         </p>
                     </li>
@@ -250,10 +194,9 @@
             </section>
         </scroll-tab-panels>
     </main>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
-    <script src="assets/js/components.js"></script>
+    <script src="js/components.js"></script>
-    <script src="https://unpkg.com/uhtml@3.0.1/es.js"></script>
+    <script src="js/index.js"></script>
-    <script src="assets/js/index.js"></script>
     <script>
         const interns = [
             {
@@ -328,7 +271,7 @@
             },
         ]
 
-        function renderAllInterns() {
+        function renderAllInterns(){
             const frag = document.createDocumentFragment()
             getRef('interns_container').innerHTML = ''
             interns.forEach(investor => {
@@ -338,12 +281,11 @@
         }
         renderAllInterns()
 
-        document.addEventListener('click', e => {
+        document.addEventListener('click', e=> {
-            if (e.target.closest('.intern__level')) {
+            if(e.target.closest('.intern__level')){
                 getRef('intern_level_popup').show()
             }
         })
     </script>
 </body>
-
 </html>

new-layout.html

@@ -28,35 +28,41 @@
         </header>
         <ul id="floor_list" class="grid"></ul>
     </section>
-    <header id="main_header" class="full-bleed">
+    <header id="main_header" class="grid align-center full-bleed">
         <button id="elevator_button" class="button" onclick="showSiteMap()">
-            <svg class="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <svg class="icon button__icon--left" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 3L16.3301 10.5H7.66987L12 3Z"/><path d="M12 21L7.66987 13.5L16.3301 13.5L12 21Z"/></svg>
-                <path d="M12 3L16.3301 10.5H7.66987L12 3Z" />
-                <path d="M12 21L7.66987 13.5L16.3301 13.5L12 21Z" />
-            </svg>
             <span class="button__label">
                 Elevator
             </span>
         </button>
         <a href="index.html" class="main-logo flex align-center page-link justify-self-center" data-target="home_page">
-            <svg id="main_header__logo" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+            <svg id="main_header__logo" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.46,21.32C20,19.78,18.6,18.59,15.3,17a12.67,12.67,0,0,1-2.64-1.56,4.27,4.27,0,0,1-.79-1,2.6,2.6,0,0,1,0-1.41c.24-.68.49-1,2.43-2.85a7.18,7.18,0,0,0,2.09-2.92,4.25,4.25,0,0,0,0-1.77,6.52,6.52,0,0,0-2.85-3.11c-.56-.36-.81-.4-.81-.15a2.33,2.33,0,0,1-.18.45L12.4,3l-.53-.36c-.28-.21-.64-.41-.77-.49s-.46-.11-.46,0a6.21,6.21,0,0,1-.37.83s-.08,0-.17-.08c-1.15-.83-1.64-1-1.64-.73A7.33,7.33,0,0,1,7.7,3.65C6.48,5.68,5.24,6.7,4,6.7c-.56,0-.54,0-.37.64s.2.58.68.43a3.37,3.37,0,0,0,1.09-.54.86.86,0,0,1,.3-.17,1.34,1.34,0,0,1,.13.39.79.79,0,0,0,.17.4A3.5,3.5,0,0,0,7.37,7.3L7.8,7l.09.34c.12.45.19.51.62.39a4.25,4.25,0,0,0,2.17-1.54l.38-.45,0,.39A5.92,5.92,0,0,1,8.89,9.54L7.67,10.71c-2,1.93-1.89,3.51.37,5a27.41,27.41,0,0,0,2.89,1.51c.17.07.62.32,1,.54C14,19,15,20.23,15,21.48a2,2,0,0,0,0,.49h0c0,.05,0,.05.56-.1a1.89,1.89,0,0,0,.53-.21,2.41,2.41,0,0,0-.34-1.15,7.05,7.05,0,0,0-1.68-1.77,21.91,21.91,0,0,0-3.2-1.83A9.53,9.53,0,0,1,8.16,15.2a2.18,2.18,0,0,1-.74-1.55C7.42,12.79,7.86,12,9,11c1.77-1.64,2.45-2.45,2.92-3.55a2.28,2.28,0,0,0,.26-1.26A2,2,0,0,0,12,5.06l-.2-.45L12,4.3l.28-.49.09-.18L12.6,4a3.69,3.69,0,0,1,.61,1.76A3.47,3.47,0,0,1,12.94,7l-.09.25s-.21.37-.41.69A17.78,17.78,0,0,1,9.91,10.6c-1.07,1-1.43,1.62-1.47,2.47a2.05,2.05,0,0,0,.7,1.73,10.47,10.47,0,0,0,3.28,2.08c2.28,1.13,3.26,1.81,4,2.73a2.94,2.94,0,0,1,.74,1.75,1.26,1.26,0,0,0,.09.57.48.48,0,0,0,.26,0l.51-.13.29-.08,0-.28c-.13-1-1-2-2.47-3a25.52,25.52,0,0,0-3.26-1.77,8.59,8.59,0,0,1-2.23-1.43,2.09,2.09,0,0,1-.5-2.62c.26-.53.5-.83,2.35-2.6,1.51-1.45,2.15-2.58,2.15-3.79A3.67,3.67,0,0,0,13,3.48a3,3,0,0,1-.4-.42A1.85,1.85,0,0,1,13,2.33a6.74,6.74,0,0,1,1.83,1.73,2.62,2.62,0,0,1,.47,1.68,3,3,0,0,1-.55,1.84c-.45.78-.79,1.14-2.67,2.93a5.56,5.56,0,0,0-1.3,1.64,1.77,1.77,0,0,0-.21,1,1.76,1.76,0,0,0,.19.92,6.28,6.28,0,0,0,2.9,2.34,21.6,21.6,0,0,1,3.66,2c1.35,1,2,2,2,3a1.06,1.06,0,0,0,.05.47,2.83,2.83,0,0,0,1-.24C20.56,21.68,20.56,21.66,20.46,21.32ZM7.29,6.4h0a2.23,2.23,0,0,1-.9.28L6,6.72l.43-.53a15.22,15.22,0,0,0,1.89-3,3.52,3.52,0,0,1,.38-.67c.07-.08.49.2,1,.64l.39.35L9.66,4A6.7,6.7,0,0,1,7.29,6.4Zm3.58-1.11A5.8,5.8,0,0,1,9.25,6.51h0a3.3,3.3,0,0,1-.74.17l-.35,0,.39-.49a15.64,15.64,0,0,0,1.32-2,4.63,4.63,0,0,1,.28-.49c.06-.08.33.26.57.77l.28.57Zm1-1.4a1.63,1.63,0,0,1-.28.4A6.63,6.63,0,0,1,11,3.72l-.53-.56.12-.29c.2-.49.24-.51.64-.19a5.57,5.57,0,0,1,.85.78A2.78,2.78,0,0,1,11.87,3.89Z"/></svg>
-                <path
-                    d="M20.46,21.32C20,19.78,18.6,18.59,15.3,17a12.67,12.67,0,0,1-2.64-1.56,4.27,4.27,0,0,1-.79-1,2.6,2.6,0,0,1,0-1.41c.24-.68.49-1,2.43-2.85a7.18,7.18,0,0,0,2.09-2.92,4.25,4.25,0,0,0,0-1.77,6.52,6.52,0,0,0-2.85-3.11c-.56-.36-.81-.4-.81-.15a2.33,2.33,0,0,1-.18.45L12.4,3l-.53-.36c-.28-.21-.64-.41-.77-.49s-.46-.11-.46,0a6.21,6.21,0,0,1-.37.83s-.08,0-.17-.08c-1.15-.83-1.64-1-1.64-.73A7.33,7.33,0,0,1,7.7,3.65C6.48,5.68,5.24,6.7,4,6.7c-.56,0-.54,0-.37.64s.2.58.68.43a3.37,3.37,0,0,0,1.09-.54.86.86,0,0,1,.3-.17,1.34,1.34,0,0,1,.13.39.79.79,0,0,0,.17.4A3.5,3.5,0,0,0,7.37,7.3L7.8,7l.09.34c.12.45.19.51.62.39a4.25,4.25,0,0,0,2.17-1.54l.38-.45,0,.39A5.92,5.92,0,0,1,8.89,9.54L7.67,10.71c-2,1.93-1.89,3.51.37,5a27.41,27.41,0,0,0,2.89,1.51c.17.07.62.32,1,.54C14,19,15,20.23,15,21.48a2,2,0,0,0,0,.49h0c0,.05,0,.05.56-.1a1.89,1.89,0,0,0,.53-.21,2.41,2.41,0,0,0-.34-1.15,7.05,7.05,0,0,0-1.68-1.77,21.91,21.91,0,0,0-3.2-1.83A9.53,9.53,0,0,1,8.16,15.2a2.18,2.18,0,0,1-.74-1.55C7.42,12.79,7.86,12,9,11c1.77-1.64,2.45-2.45,2.92-3.55a2.28,2.28,0,0,0,.26-1.26A2,2,0,0,0,12,5.06l-.2-.45L12,4.3l.28-.49.09-.18L12.6,4a3.69,3.69,0,0,1,.61,1.76A3.47,3.47,0,0,1,12.94,7l-.09.25s-.21.37-.41.69A17.78,17.78,0,0,1,9.91,10.6c-1.07,1-1.43,1.62-1.47,2.47a2.05,2.05,0,0,0,.7,1.73,10.47,10.47,0,0,0,3.28,2.08c2.28,1.13,3.26,1.81,4,2.73a2.94,2.94,0,0,1,.74,1.75,1.26,1.26,0,0,0,.09.57.48.48,0,0,0,.26,0l.51-.13.29-.08,0-.28c-.13-1-1-2-2.47-3a25.52,25.52,0,0,0-3.26-1.77,8.59,8.59,0,0,1-2.23-1.43,2.09,2.09,0,0,1-.5-2.62c.26-.53.5-.83,2.35-2.6,1.51-1.45,2.15-2.58,2.15-3.79A3.67,3.67,0,0,0,13,3.48a3,3,0,0,1-.4-.42A1.85,1.85,0,0,1,13,2.33a6.74,6.74,0,0,1,1.83,1.73,2.62,2.62,0,0,1,.47,1.68,3,3,0,0,1-.55,1.84c-.45.78-.79,1.14-2.67,2.93a5.56,5.56,0,0,0-1.3,1.64,1.77,1.77,0,0,0-.21,1,1.76,1.76,0,0,0,.19.92,6.28,6.28,0,0,0,2.9,2.34,21.6,21.6,0,0,1,3.66,2c1.35,1,2,2,2,3a1.06,1.06,0,0,0,.05.47,2.83,2.83,0,0,0,1-.24C20.56,21.68,20.56,21.66,20.46,21.32ZM7.29,6.4h0a2.23,2.23,0,0,1-.9.28L6,6.72l.43-.53a15.22,15.22,0,0,0,1.89-3,3.52,3.52,0,0,1,.38-.67c.07-.08.49.2,1,.64l.39.35L9.66,4A6.7,6.7,0,0,1,7.29,6.4Zm3.58-1.11A5.8,5.8,0,0,1,9.25,6.51h0a3.3,3.3,0,0,1-.74.17l-.35,0,.39-.49a15.64,15.64,0,0,0,1.32-2,4.63,4.63,0,0,1,.28-.49c.06-.08.33.26.57.77l.28.57Zm1-1.4a1.63,1.63,0,0,1-.28.4A6.63,6.63,0,0,1,11,3.72l-.53-.56.12-.29c.2-.49.24-.51.64-.19a5.57,5.57,0,0,1,.85.78A2.78,2.78,0,0,1,11.87,3.89Z" />
-            </svg>
             <h4 class="h4 header__company-name">RanchiMall</h4>
         </a>
-        <theme-toggle></theme-toggle>
+        <label class="theme-switcher" title="Change theme">
+            <input id="theme_switcher" class="theme-switcher__checkbox" type="checkbox">
+            <svg class="icon moon-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M10 6a8 8 0 0 0 11.955 6.956C21.474 18.03 17.2 22 12 22 6.477 22 2 17.523 2 12c0-5.2 3.97-9.474 9.044-9.955A7.963 7.963 0 0 0 10 6zm-6 6a8 8 0 0 0 8 8 8.006 8.006 0 0 0 6.957-4.045c-.316.03-.636.045-.957.045-5.523 0-10-4.477-10-10 0-.321.015-.64.045-.957A8.006 8.006 0 0 0 4 12zm14.164-9.709L19 2.5v1l-.836.209a2 2 0 0 0-1.455 1.455L16.5 6h-1l-.209-.836a2 2 0 0 0-1.455-1.455L13 3.5v-1l.836-.209A2 2 0 0 0 15.29.836L15.5 0h1l.209.836a2 2 0 0 0 1.455 1.455zm5 5L24 7.5v1l-.836.209a2 2 0 0 0-1.455 1.455L21.5 11h-1l-.209-.836a2 2 0 0 0-1.455-1.455L18 8.5v-1l.836-.209a2 2 0 0 0 1.455-1.455L20.5 5h1l.209.836a2 2 0 0 0 1.455 1.455z"/></svg>
+            <svg class="icon sun-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636 5.636 7.05 3.515 4.93zM16.95 18.364l1.414-1.414 2.121 2.121-1.414 1.414-2.121-2.121zm2.121-14.85l1.414 1.415-2.121 2.121-1.414-1.414 2.121-2.121zM5.636 16.95l1.414 1.414-2.121 2.121-1.414-1.414 2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z"/></svg>
+        </label>
     </header>
+    <section class="banner">
+        <p class="banner__text">
+            We are servicing current customers only. A new Blockchain-based version of Bob's Fund will be available soon.
+        </p>
+        <button class="close-button" onclick="this.parentNode.remove()">
+            <svg class="icon icon-only close-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></svg>
+        </button>
+    </section>
     <div id="outlet_switcher" class="grid gap-1-5 hide-completely">
         <div class="flex align-center">
-            <!--             <svg class="icon button__icon--left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24"
+<!--             <svg class="icon button__icon--left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24"
                 height="24">
                 <path fill="none" d="M0 0h24v24H0z" />
                 <path
                     d="M21 13.242V20h1v2H2v-2h1v-6.758A4.496 4.496 0 0 1 1 9.5c0-.827.224-1.624.633-2.303L4.345 2.5a1 1 0 0 1 .866-.5H18.79a1 1 0 0 1 .866.5l2.702 4.682A4.496 4.496 0 0 1 21 13.242zm-2 .73a4.496 4.496 0 0 1-3.75-1.36A4.496 4.496 0 0 1 12 14.001a4.496 4.496 0 0 1-3.25-1.387A4.496 4.496 0 0 1 5 13.973V20h14v-6.027zM5.789 4L3.356 8.213a2.5 2.5 0 0 0 4.466 2.216c.335-.837 1.52-.837 1.856 0a2.5 2.5 0 0 0 4.644 0c.335-.837 1.52-.837 1.856 0a2.5 2.5 0 1 0 4.457-2.232L18.21 4H5.79z" />
             </svg> -->
             <span id="outlet_switcher__floor_num" class="weight-500 color-0-8"></span>
-            <!--             <button class="justify-right" onclick="hideOutletSwitcher()">
+<!--             <button class="justify-right" onclick="hideOutletSwitcher()">
                 <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                     <path fill="none" d="M0 0h24v24H0z" />
                     <path
@@ -69,28 +75,457 @@
     <main class="page">
         <section class="outlet-hero-section margin-bottom-3r">
             <h2 class="h2 weight-900 margin-bottom-1r text-center">Bob's Fund</h2>
-            <button class="outlet-label">
+        </section>
-                <!--                 <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+        <section class="features-grid">
-                    <path fill="none" d="M0 0h24v24H0z" />
+            <div class="feature">
-                    <path
+                <div class="feature__icon">
-                        d="M21 13.242V20h1v2H2v-2h1v-6.758A4.496 4.496 0 0 1 1 9.5c0-.827.224-1.624.633-2.303L4.345 2.5a1 1 0 0 1 .866-.5H18.79a1 1 0 0 1 .866.5l2.702 4.682A4.496 4.496 0 0 1 21 13.242zm-2 .73a4.496 4.496 0 0 1-3.75-1.36A4.496 4.496 0 0 1 12 14.001a4.496 4.496 0 0 1-3.25-1.387A4.496 4.496 0 0 1 5 13.973V20h14v-6.027zM5.789 4L3.356 8.213a2.5 2.5 0 0 0 4.466 2.216c.335-.837 1.52-.837 1.856 0a2.5 2.5 0 0 0 4.644 0c.335-.837 1.52-.837 1.856 0a2.5 2.5 0 1 0 4.457-2.232L18.21 4H5.79z" />
+                    <svg class="icon" id="f47905c4-be19-4535-912c-ac0a41d5362d" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M55.59,38a10.43,10.43,0,0,0-3.09-4.19,12.61,12.61,0,0,0-5.4-2.46,11.57,11.57,0,0,0,5.75-4.7,13.39,13.39,0,0,0,1.86-7q0-7.62-5.86-11.46c-3.64-2.39-8.62-3.65-14.91-3.82V0H25.38V4.28H21.7V0H13.14V4.28H7.42v7.84l5.75,1.22V50.7L7.42,51.91v7.81h6.69V64h8.56V59.72h3.68V64h8.56V59.72h.42q10.37,0,15.8-4.15t5.45-12.3A14.09,14.09,0,0,0,55.59,38ZM41.35,21.11A5.14,5.14,0,0,1,39,25.77q-2.34,1.52-7.07,1.51h-5.4V14.48h6q4.45,0,6.65,1.58A5.81,5.81,0,0,1,41.35,21.11ZM41.29,48q-2,1.56-6,1.56H26.54V36.11H36a9.61,9.61,0,0,1,4.19.78,5,5,0,0,1,2.36,2.36,9.14,9.14,0,0,1,.76,4A5.66,5.66,0,0,1,41.29,48Z"/></svg>
-                </svg> -->
+                </div>
-                <span class="outlet-label__name">Outlet</span>
+                <h4 class="feature__title">Bitcoin linked</h4>
-                <span class="outlet-label__no"></span>
+                <p class="feature__brief">Bob's Fund is a 20 year long term Bitcoin price linked product</p>
-                <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+            </div>
-                    <path fill="none" d="M0 0h24v24H0z" />
+            <div class="feature feature--wide">
-                    <path d="M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z" />
+                <div class="feature__icon">
-                </svg>
+                    <svg class="icon" id="a0972e55-309b-4721-ab64-f0e363b1245c" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M32,11.86a18.06,18.06,0,1,0,18,18.06A18.08,18.08,0,0,0,32,11.86Zm8.45,14.45-9.57,9.57a1.65,1.65,0,0,1-1.17.48,1.67,1.67,0,0,1-1.18-.48l-5-5a1.66,1.66,0,0,1,2.35-2.35l3.81,3.8L38.1,24a1.66,1.66,0,1,1,2.35,2.35Z"/><path d="M59.42,26.2a5.89,5.89,0,0,0-3.05-9.4h0a5.89,5.89,0,0,1-4.37-6A5.89,5.89,0,0,0,44,5a5.89,5.89,0,0,1-7.07-2.29h0a5.88,5.88,0,0,0-9.88,0A5.89,5.89,0,0,1,20,5a5.89,5.89,0,0,0-8,5.81h0a5.89,5.89,0,0,1-4.37,6,5.89,5.89,0,0,0-3,9.4h0a5.91,5.91,0,0,1,0,7.43A5.89,5.89,0,0,0,7.63,43,5.88,5.88,0,0,1,12,48.94L6.37,58.68a.34.34,0,0,0,.29.51l5.14.05a.34.34,0,0,1,.29.17l2.61,4.42a.33.33,0,0,0,.58,0l5.28-9.14a5.87,5.87,0,0,1,6.5,2.45h0a5.88,5.88,0,0,0,9.88,0h0a5.87,5.87,0,0,1,6.5-2.45l5.28,9.14a.33.33,0,0,0,.58,0l2.61-4.42a.34.34,0,0,1,.29-.17l5.14-.05a.34.34,0,0,0,.29-.51L52,48.94A5.88,5.88,0,0,1,56.37,43a5.89,5.89,0,0,0,3.05-9.4A5.91,5.91,0,0,1,59.42,26.2ZM32,50A20.06,20.06,0,1,1,52.06,29.92,20.08,20.08,0,0,1,32,50Z"/></svg>
-            </button>
+                </div>
+                <h4 class="feature__title">Better returns than conventional assets</h4>
+                <p class="feature__brief">Over a very long time period, Bitcoin returns should outstrip returns on conventional assets like real estate and stocks</p>
+            </div>
+            <div class="feature feature--wide">
+                <div class="feature__icon">
+                    <svg class="icon" id="a9cf0968-17a3-4e2e-8dcf-10d366d12d28" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M17.28,29a16.35,16.35,0,0,1-7.63-1.64,11.32,11.32,0,0,1-4.77-4.54,13.17,13.17,0,0,1-1.63-6.61V12.88A13.3,13.3,0,0,1,4.88,6.25,11.52,11.52,0,0,1,9.6,1.67,15.9,15.9,0,0,1,17.2,0a15.94,15.94,0,0,1,7.63,1.67,11.43,11.43,0,0,1,4.71,4.55,13.5,13.5,0,0,1,1.6,6.66v3.29a13.36,13.36,0,0,1-1.6,6.61,11.33,11.33,0,0,1-4.68,4.54A16,16,0,0,1,17.28,29Zm0-8a3.94,3.94,0,0,0,3.21-1.39,5.13,5.13,0,0,0,1.16-3.4V12.88a5.31,5.31,0,0,0-1.16-3.47A4,4,0,0,0,17.2,8a3.94,3.94,0,0,0-3.27,1.41,5.35,5.35,0,0,0-1.14,3.47v3.29A5.11,5.11,0,0,0,14,19.59,4.09,4.09,0,0,0,17.28,21Zm3,37.61-6.93-3.43L43.76,6.46,50.7,9.88ZM46.89,64a16.15,16.15,0,0,1-7.64-1.67,11.75,11.75,0,0,1-4.81-4.58,13,13,0,0,1-1.67-6.58V47.91a13.19,13.19,0,0,1,1.63-6.58,11.41,11.41,0,0,1,4.77-4.58,16.11,16.11,0,0,1,7.63-1.67,16,16,0,0,1,7.6,1.65,11.39,11.39,0,0,1,4.72,4.55,13.3,13.3,0,0,1,1.63,6.63v3.26a13.5,13.5,0,0,1-1.61,6.63,11.29,11.29,0,0,1-4.68,4.55A15.87,15.87,0,0,1,46.89,64Zm0-8c1.68,0,2.81-.42,3.4-1.26a6.33,6.33,0,0,0,.88-3.61V47.91a5.31,5.31,0,0,0-1.12-3.42,3.88,3.88,0,0,0-3.25-1.41,4,4,0,0,0-3.33,1.41,5.31,5.31,0,0,0-1.12,3.42v3.26a4.93,4.93,0,0,0,1.33,3.42A4.17,4.17,0,0,0,46.89,56Z"/></svg>
+                </div>
+                <h4 class="feature__title">Get 100% of gains</h4>
+                <p class="feature__brief">Investors are entitled to 100% of Bitcoin price gains</p>
+            </div>
+            <div class="feature">
+                <div class="feature__icon">
+                    <svg class="icon" id="b25d5f7d-dd5a-4cc1-a2c9-37dbecdeaff1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M32.11,64q-10.12,0-16-6.41t-5.9-19V25.46q0-12.56,5.9-19T32,0Q42,0,47.89,6.45t5.92,19V38.58q0,12.6-5.87,19T32.11,64Zm0-11.41a5.53,5.53,0,0,0,5-3q1.76-3,1.75-10.15V24.52c0-4.67-.6-8-1.79-10a5.87,5.87,0,0,0-10.26,0q-1.76,3-1.75,10.06V39.43q0,7.18,1.75,10.17A5.7,5.7,0,0,0,32.11,52.59Z"/></svg>
+                </div>
+                <h4 class="feature__title">No management fee</h4>
+                <p class="feature__brief">The management fees on this product is zero</p>
+            </div>
+            <div class="feature">
+                <div class="feature__icon">
+                    <svg class="icon" id="e0287cba-7cef-4217-aee4-c8ac3e32d7a5" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M49.52,20.65a1,1,0,0,1,0-1.16L56.94,9a1,1,0,0,0-.83-1.58H18.32V2.52a2.52,2.52,0,1,0-5,0V59H9.4a2.52,2.52,0,1,0,0,5H22.21a2.52,2.52,0,0,0,0-5H18.32V32.73H56.11a1,1,0,0,0,.83-1.59Z"/></svg>
+                </div>
+                <h4 class="feature__title">Aligned goals</h4>
+                <p class="feature__brief">RanchiMall earns by having invested an equal amount as every investor, thus the interests of fund manager, and fund investors are totally aligned</p>
+            </div>
+        </section>
+        <div class="rooms__header">
+            <h4 class="room__label">Rooms</h4>
+        </div>
+        <section class="rooms-layout">
+            <div id="expanding_tile" class="hide-completely"></div>
+            <a class="room-tile room-tile--main" href="#performance_room">
+                <div class="tile-content">
+                    <svg class="room-tile__icon" id="b23be00b-0d64-4bed-9d99-6f7aaf421af4" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M44.53,26.6a7.17,7.17,0,1,1,5.07-2.1h0A7.16,7.16,0,0,1,44.53,26.6Zm0-11.47a4.31,4.31,0,1,0,3,1.26A4.31,4.31,0,0,0,44.53,15.13Z"/><path d="M62.58,1.38A4.7,4.7,0,0,0,58.35.09L45.09,2.66a14.61,14.61,0,0,0-7.56,4L19.92,24.29l-9,2.23a8.75,8.75,0,0,0-4.1,2.31L.46,35.2a1.43,1.43,0,0,0,1,2.44h.08L10,37.2l1.67,1.68L6.85,41.23a1.43,1.43,0,0,0-.38,2.3l14,14a1.44,1.44,0,0,0,1,.42l.24,0a1.47,1.47,0,0,0,1.05-.78l2.35-4.79,1.61,1.6-.45,8.58a1.43,1.43,0,0,0,.85,1.38,1.51,1.51,0,0,0,.58.12,1.44,1.44,0,0,0,1-.42l6.37-6.36a8.75,8.75,0,0,0,2.31-4.1l2.23-9,17.7-17.7a14.5,14.5,0,0,0,4-7.56L63.87,5.61A4.7,4.7,0,0,0,62.58,1.38ZM21,54.05,9.91,42.92,13.78,41,23,50.18ZM8.85,30.86a5.82,5.82,0,0,1,2.76-1.56L16,28.21,10.23,34l-.37.37-4.74.25ZM34.58,52.43A5.89,5.89,0,0,1,33,55.19l-3.74,3.73.25-4.74,6.13-6.13Zm20.68-28-18,18h0l-9,9-7.85-7.86-5.31-5.3h0l-2.55-2.54,27-27a11.72,11.72,0,0,1,5.38-3L58.3,19A11.64,11.64,0,0,1,55.26,24.41Zm5.8-19.34L59,15.68,48.28,5,58.89,2.9a1.85,1.85,0,0,1,2.17,2.17Z"/><path d="M2.63,62.76a1.41,1.41,0,0,1-1-.41,1.44,1.44,0,0,1,0-2l8.12-8.13a1.44,1.44,0,0,1,2,2L3.64,62.35A1.42,1.42,0,0,1,2.63,62.76Z"/><path d="M10.75,62.76a1.43,1.43,0,0,1-1-2.44l4.06-4.07a1.43,1.43,0,0,1,2,2l-4.06,4.06A1.43,1.43,0,0,1,10.75,62.76Z"/><path d="M2.63,54.64a1.43,1.43,0,0,1-1-2.44l4.07-4.06a1.43,1.43,0,0,1,2,2L3.65,54.22A1.44,1.44,0,0,1,2.63,54.64Z"/></svg>
+                    <!-- <img class="room-tile__icon" src="./assets/illustrations/performance.svg" alt=""> -->
+                    <h4 class="room-tile__title">Performance</h4>
+                </div>
+            </a>
+            <a class="room-tile" href="#product_room">
+                <div class="tile-content">
+                    <svg class="room-tile__icon" id="b76bf456-6b89-4220-8b44-f4f7d833bad6" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M61.28,22.11c0-.05,0-.09,0-.14L58.62,6A1.68,1.68,0,0,0,57,4.6H7A1.68,1.68,0,0,0,5.38,6L2.72,22c0,.05,0,.09,0,.14s0,.09,0,.14V57.72A1.68,1.68,0,0,0,4.38,59.4H59.62a1.68,1.68,0,0,0,1.68-1.68V22.25C61.3,22.2,61.28,22.16,61.28,22.11Zm-3.64-1.54H39.34L38.51,8h17ZM27.92,23.93h8.16v6.64L33,28.41a1.7,1.7,0,0,0-1.9,0l-3.13,2.16ZM35.15,8,36,20.57H28L28.91,8ZM8.46,8H25.55l-.88,12.61H6.36ZM57.94,56H6.06V23.93h18.5v9.84a1.67,1.67,0,0,0,2.63,1.38L32,31.84l4.81,3.31a1.65,1.65,0,0,0,.95.3,1.76,1.76,0,0,0,.78-.19,1.68,1.68,0,0,0,.9-1.49V23.93h18.5Z"/></svg>
+                    <h4 class="room-tile__title">Product</h4>
+                </div>
+            </a>
+            <a class="room-tile" href="#purchase_room">
+                <div class="tile-content">
+                    <svg class="room-tile__icon" id="bb329e59-3d30-49a7-ac0d-b164d3b3b631" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M42.74,64a14,14,0,1,1,14-14A14,14,0,0,1,42.74,64Zm0-24.73A10.7,10.7,0,1,0,53.44,50,10.71,10.71,0,0,0,42.74,39.27Z"/><path d="M28.7,50H14.08a3.43,3.43,0,0,1-3.42-3.58l1.4-31.51h4.85V17.8a1.71,1.71,0,1,0,3.42,0V14.88H33V17.8a1.71,1.71,0,1,0,3.42,0V14.88h4.84L42.2,36c.18,0,.35,0,.54,0a13.92,13.92,0,0,1,2.9.31l-1.1-24.8H36.42V9.76a9.76,9.76,0,1,0-19.51,0v1.69H8.79L7.24,46.24a6.85,6.85,0,0,0,6.84,7.15H29.14A14.24,14.24,0,0,1,28.7,50ZM20.33,9.76A6.34,6.34,0,1,1,33,9.76v1.69H20.33Z"/><path d="M41.23,54.65a1.69,1.69,0,0,1-1.18-.49l-3-3a1.67,1.67,0,0,1,2.35-2.36l1.84,1.84,4.85-4.85a1.66,1.66,0,0,1,2.35,2.35l-6,6A1.67,1.67,0,0,1,41.23,54.65Z"/></svg>
+                    <!-- <img class="room-tile__icon" src="./assets/illustrations/purchase.svg" alt=""> -->
+                    <h4 class="room-tile__title">Buy</h4>
+                </div>
+            </a>
+        </section>
+        <section class="room-container hide-completely page-layout">
+            <header class="room-container__header">
+                <button class="grid flow-column gap-1 align-center" onclick="hideRoom()">
+                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M7.828 11H20v2H7.828l5.364 5.364-1.414 1.414L4 12l7.778-7.778 1.414 1.414z"/></svg>
+                    <h3 id="room_title" class="hide-completely"></h3>
+                </button>
+            </header>
+            <h1 id="hero_title"></h1>
+            <section class="room-carousel">
+                <section id="performance_room" class="grid room">
+                    <p>Bobs fund different fund release timeline</p>
+                    <ul id="bobs_fund_timeline" class="timeline-container"></ul>
+                </section>
+                <section id="product_room" class="grid room">
+                    <p class="margin-bottom-3r">
+                        Bobs Fund allows customers to take a direct share in Bitcoin and they are automatically guided into a
+                        long term investment plan. Bitcoin is a long term investors paradise with supply artificially
+                        constrained, and demand only growing. There are no price guarantees in this product. But the long
+                        duration of the investment ensures that customers will get an outsized rate of return. RanchiMall as
+                        Fund Manager does not charge management fees.
+                    </p>
+                    <h4 class="h4 margin-bottom-1r">Risk Management</h4>
+                    <p class="margin-bottom-3r">
+                        There is no price risk for RanchiMall in Bobs Fund. But since this is a long term
+                        product, information security risks are high to maintain Bitcoins safely. Bitcoin keys must be split
+                        using Shamir Secret Key Share algorithm, and should be recombined at the time of redemption. The
+                        number of shares should have enough redundancy so that if some holders are not around, the keys
+                        must still be recovered.
+                    </p>
+                    <h4 class="h4 margin-bottom-1r">Founder Notes</h4>
+                    <p class="margin-bottom-3r">
+                        Bobs Fund was first issued in my MBA classmates WhatsApp group, and restricted only to my
+                        classmates in June 2017. The product had a long term duration of 20 years, and it needed lot of trust
+                        which my classamtes had in me. We kept this product concept under observation and testing for 4
+                        years, before exploring options to make it public. Another objective was to try out an idea where
+                        fund management expenses are nil, as fund management fees eats up a lot of customer returns over
+                        long term. Instead we made an equal investment as every contributing member did, and we hope to
+                        earn over the long life time of this product. Over time we realized, we could also use the Bitcoin as
+                        collateral for DeFi products, and that gives us an additional earning stream.
+                    </p>
+                </section>
+                <section id="purchase_room" class="grid room">
+                    <sm-button variant="primary">Buy here</sm-button>
+                </section>
+            </section>
+            <footer class="room-container__footer">
+                <h4>Related rooms</h4>
+                <div id="room_switcher"></div>
+            </footer>
+        </section>
+        <section>
+            <a class="ext-link-tile" href="https://ranchimall.github.io/bobs-fund/" target="_blank" >
+                <div class="grid">
+                    <h4 class="tile__title">See Bob's Fund in action</h4>
+                    <p class="tile__brief">Visit the website to see investors and asset performance</p>
+                </div>
+                <button class="round">Visit</button>
+            </a>
         </section>
     </main>
 
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
     <script src="assets/js/components.js"></script>
-    <script src="https://unpkg.com/uhtml@3.0.1/es.js"></script>
     <script src="assets/js/index.js"></script>
     <script>
+        const bobFund = [
+            {
+                release: 1497970979000,
+                investors: [
+                    {
+                        investorName: 'Amit gupta',
+                        floId: 'FRvaLurkpLNZiADR6aypDuBXjHAXymvoW3',
+                        invested: 20000,
+                    },
+                    {
+                        investorName: 'Vijay sarda',
+                        floId: 'FEt4wGCf5aXQvNRju1QyzcXBc21nETSX1H',
+                        invested: 20000,
+                    },
+                    {
+                        investorName: 'Vijesh Raikar',
+                        floId: 'FPDdVVeuZv6b8rk8PexTXPMzvKiZ5yRmy2',
+                        invested: 20000,
+                    },
+                    {
+                        investorName: 'Ajit Varshney',
+                        floId: 'FCPVSrEB38GeLC75ELXhF853kCMWwVRHQB',
+                        invested: 20000,
+                    },
+                    {
+                        investorName: 'barun Kumar',
+                        floId: 'FTS3FXu8kWHeFbd1V22w2D6P5BYYzEW8i',
+                        invested: 10000,
+                    },
+                    {
+                        investorName: 'Kunal Dikshit',
+                        floId: 'FLg6BZejmHdmaKrk9tcwY3i3vHbmMnjBT5',
+                        invested: 20000,
+                    },
+                    {
+                        investorName: 'Sundeep Pandey',
+                        floId: 'FPB1mtZmMX9dt7XAzBFx27sSyTSi7JNMrj',
+                        invested: 20000,
+                    },
+                    {
+                        investorName: 'Kusumakar Dwivedi',
+                        floId: 'F87CMLVrGABco1zLyUiQCPq51QroHkABG9',
+                        invested: 20000,
+                    },
+                    {
+                        investorName: 'Surojeet Sengupta',
+                        floId: 'FR6Qh9Szecx3FPNeoo9zWcmAEtuAMbkrFi',
+                        invested: 20000,
+                    },
+                    {
+                        investorName: 'Akash Srivastava',
+                        floId: 'FDDtLLE61MKxheSyEHfAvwoD52nwGB98ep',
+                        invested: 20000,
+                    },
+                    {
+                        investorName: 'V Jayaram',
+                        floId: 'FQf65GctPRu1zRHgFk5ynWTjwQeENymPKB',
+                        invested: 20000,
+                    },
+                    {
+                        investorName: 'Mayank Agrawal',
+                        floId: 'FQf65GctPRu1zRHgFk5ynWTjwQeENymPKB',
+                        invested: 20000,
+                    },
+                    {
+                        investorName: 'Bhaskar Bhowmik',
+                        floId: 'FUN9oiUUB2ueV59DytRyrKv8sBdVH7Jrck',
+                        invested: 10000,
+                    },
+                    {
+                        investorName: 'Rajesh Agrawal',
+                        floId: 'FNrovxYR3ZPXcu3LjYiPgj7waDzYiJ9YsA',
+                        invested: 20000,
+                    },
+                    {
+                        investorName: 'Chetan Kulkarni',
+                        floId: 'FTDmpz96L3iqc4CrhLW1csjmTVJXV3TT9L',
+                        invested: 20000,
+                    },
+                    {
+                        investorName: 'Amar More',
+                        floId: 'FNojhvoi4aaGYK2LZ4ReCGSh5vk7tzZsqt',
+                        invested: 20000,
+                    },
+                    {
+                        investorName: 'Navin Chandiramani',
+                        floId: 'F95teUSvUDsyjVju9r9RC4MEJaz9pYNnVH',
+                        invested: 20000,
+                    },
+                    {
+                        investorName: 'Gopal Krishnamurthy',
+                        floId: 'F8uYrqM6RuXg7BvypYtZgkADG6YjkrYMZt',
+                        invested: 20000,
+                    },
+                    {
+                        investorName: 'Shivi',
+                        floId: 'FBroPjNntF654rQD1niPmzxPEgPEu5L6nZ',
+                        invested: 20000,
+                    },
+                    {
+                        investorName: 'Shankar RS',
+                        floId: 'FKENY1WnX4F3CD5NHcidP43sXknxDcfhTA',
+                        invested: 20000,
+                    },
+                    {
+                        investorName: 'Vikram Gupta',
+                        floId: 'FKGePGRroHkfcy8yJ4MzNG844uaA2na8Qs',
+                        invested: 20000,
+                    },
+                    {
+                        investorName: 'Rohit Tripathy',
+                        floId: 'FGoveDyLJ9MqCvEZXPCHqnkYQzDwLpD8Ue',
+                        invested: 20000,
+                    },
+                    {
+                        investorName: 'P. Unnikrishnan',
+                        floId: 'FN7ih46Qtcv4darXvbBAXAdV1GLkir8uQt',
+                        invested: 20000,
+                    },
+                    {
+                        investorName: 'Arup Vithal',
+                        floId: 'FEx6ZLhL5ehpK3jw62DtvG9Mn4L2dzD6mx',
+                        invested: 20000,
+                    },
+                    {
+                        investorName: 'Rahul Pundir',
+                        floId: 'FN61MLKRmGiv46TPbXM71Gs91oAF2YDsyn',
+                        invested: 20000,
+                    },
+                    {
+                        investorName: 'Ankur Jain',
+                        floId: 'F9fnJrRGHMXsPMHN2eg3oEammcsX7H4J9m',
+                        invested: 20000,
+                    },
+                    {
+                        investorName: 'Pankaj Shete',
+                        floId: 'FDzWseokR2jNP8wC9o4qz8pZ22qwrfXWPQ',
+                        invested: 20000,
+                    },
+                    {
+                        investorName: 'Sameer Nagpal',
+                        floId: 'FS4DLEj6V4FAdsju4CFGhPMqmVoPMAVRgF',
+                        invested: 20000,
+                    },
+                    {
+                        investorName: 'George Abraham',
+                        floId: 'FBfujtTZfu2GPqPwmbxwevSKkLx7hcFj5R',
+                        invested: 20000,
+                    },
+                    {
+                        investorName: 'Samujjwal Ghosh',
+                        floId: 'FBtDjYZXM6vNgfbGSGvg7xL8U1bfN5iNAF',
+                        invested: 20000,
+                    },
+                    {
+                        investorName: 'Aniruddha Karnataki',
+                        floId: 'FK8nvFGfUYaGNpTbhG6MKBDBa888Bnn4on',
+                        invested: 20000,
+                    },
+                    {
+                        investorName: 'Mohammed Raffe Samathu',
+                        floId: 'FMHVLffKLVvGRwedkTeSu9a2DBGupdiEtC',
+                        invested: 20000,
+                    },
+                    {
+                        investorName: 'Ruchir Gupta',
+                        floId: 'FALfZbEtu16ATSEmmY7wwtRbMXUBakPMDy',
+                        invested: 10000,
+                    },
+                    {
+                        investorName: 'Santosh Nair',
+                        floId: 'FFCHQExESgbzfKeDpm7oghEarHd8XETcwg',
+                        invested: 20000,
+                    },
+                    {
+                        investorName: 'Samit Arora',
+                        floId: 'FFJzBT7Xio7XZHoBCvCKZBtimZJtgPcWih',
+                        invested: 20000,
+                    },
+                    {
+                        investorName: 'Sumeet Doshi',
+                        floId: 'F7kJpgo3fhVahu387JT9hUKQZRUsxYhqcc',
+                        invested: 20000,
+                    },
+                    {
+                        investorName: 'Pradeep Rao',
+                        floId: 'FCqr6r6dvKwK1NCqdQomB9kMhvSjWj4BUL',
+                        invested: 10000,
+                    },
+                    {
+                        investorName: 'Gaurav Sadhir',
+                        floId: 'FKm7PvnG377tWCsWAJjHqqDoUKiMBdAfg9',
+                        invested: 14000,
+                    },
+                    {
+                        investorName: 'Sudhanshu Fadnis',
+                        floId: 'FDvNAjNQ1uR1 JsADYNMwFjkiY2vKECnJRV',
+                        invested: 20000,
+                    },
+                    {
+                        investorName: 'Natesh Rao',
+                        floId: 'FTB3Vi6Nj6hoFUwiQMadmkjq2M3FpMoe5T',
+                        invested: 20000,
+                    },
+                    {
+                        investorName: 'Kapil Chaturvedi',
+                        floId: 'FMG2tashYXZeApqMtikYm4Uck8UxMdxpUZ',
+                        invested: 6000,
+                    },
+                    {
+                        investorName: 'Puneet Sondh',
+                        floId: 'FTWGujfMdvGNqgMRveXvg93MCn4dUKEHzV',
+                        invested: 20000,
+                    },
+                ]
+            },
+            {
+                release: 1622041379000,
+                invested: 13781.70,
+                href: `https://ranchimall.github.io/bobs-fund/#71f37a3b25d513a2b8d5fe155881ffd099c8e961791734e792bb882dd4dd3119`
+            },
+        ]
+
+        function getCurrentRates() {
+            let fetchData = api => new Promise((resolve, reject) => {
+                fetch(api).then(response => {
+                    if (response.ok)
+                        response.json().then(data => resolve(data))
+                    else
+                        reject(response)
+                }).catch(error => reject(error))
+            })
+            return new Promise((resolve, reject) => {
+                fetchData(`https://bitpay.com/api/rates`).then(result => {
+                    let BTC_USD, BTC_INR, USD_INR
+                    for (let i of result)
+                        i.code == "USD" ? BTC_USD = i.rate : i.code == "INR" ? BTC_INR = i.rate : null;
+                    USD_INR = BTC_INR / BTC_USD;
+                    resolve({
+                        BTC_USD,
+                        BTC_INR,
+                        USD_INR
+                    })
+                }).catch(error => reject(error))
+            })
+        }
+        let USD_current, BTC_current
+        getCurrentRates().then(async (rates) => {
+            USD_current = rates.USD_INR;
+            BTC_current = rates.BTC_USD;
+            renderAllFundInvestors()
+        }).catch(error => console.error(error))
+
+        function calcNetValue(BTC_base, USD_base, amount, fee) {
+            let gain, interest, net;
+            gain = (BTC_current - BTC_base) / BTC_base;
+            interest = gain * (1 - fee)
+            net = amount / USD_base;
+            net += net * interest;
+            percentGain = (((net * USD_current) - amount) / amount) * 100
+            //console.info(gain, interest, net)
+            return [net * USD_current, percentGain.toFixed(0)];
+        }
+        function renderAllFundInvestors(){
+            const frag = document.createDocumentFragment()
+            const timelineItemsFrag = document.createDocumentFragment()
+            getRef('bobs_fund_timeline').innerHTML = ''
+            bobFund.forEach(fund => {
+                const {release, invested, investors, href} = fund
+                console.log(release, invested, investors, href)
+                const timelineItem = create('li', {className: 'timeline-item'})
+
+                const tilelineItemHeader = create('header', {
+                    className: 'timeline-item__header',
+                    text: getFormatedTime(release, true)
+                })
+
+                if(fund.hasOwnProperty('investors')){
+                    investors.forEach(investor => {
+                        let [currentValue, gain] = calcNetValue(2676.5, 64.46, investor.invested, 0)
+                        currentValue = parseFloat(currentValue.toFixed(2))
+                        timeElapsed = (new Date().getFullYear() - 2017)
+                        frag.append(render.bobFundRow({...investor, currentValue, gain, timeElapsed}))
+                    })
+                    const fundContainer = create('div', {
+                        className: 'grid series-container series-container--bobs-fund'
+                    })
+
+                    const heading = create('h4', {
+                        className: 'margin-bottom-1r margin-top-1-5',
+                        text: 'Fund investors'
+                    })
+
+                    fundContainer.append(frag)
+                    timelineItem.append(heading, fundContainer)
+                }
+                else{
+                    const fundCard = create('div', {
+                        className: 'grid card'
+                    })
+                    let [currentValue, gain] = calcNetValue(37488, 72.56, invested, 0)
+                        currentValue = parseFloat(currentValue.toFixed(2))
+                    fundCard.innerHTML = `
+                        <div class="flex space-between">
+                            <div class="grid">
+                                <h5 class="label color-0-8 weight-500">Total fund investment</h5>
+                                <h3 class="value original-value">${invested.toLocaleString('en-US', {style: 'currency' ,currency: 'USD'})}</h3>
+                            </div>
+                            <div class="grid justify-right text-align-right">
+                                <h4 class="label color-0-8 weight-500">Current value</h4>
+                                <h3 class="value current-value" style="color: var(--green)">${currentValue.toLocaleString('en-US', {style: 'currency', currency: 'USD'})}</h3>
+                            </div>
+                        </div>
+                        <a class="button button--filled justify-right" href='${href}' target="_blank">See investors</a>
+                    `
+                    timelineItem.append(fundCard)
+                }
+                timelineItem.prepend(tilelineItemHeader)
+                timelineItemsFrag.prepend(timelineItem)
+            })
+            getRef('bobs_fund_timeline').append(timelineItemsFrag)
+        }
     </script>
 </body>
-
 </html>

verify.html

@@ -1,143 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Verify certificate</title>
-    <link rel="shortcut icon" href="assets/RM logo.png" type="image/png">
-    <link rel="stylesheet" href="assets/css/main.min.css">
-    <link rel="preconnect" href="https://fonts.gstatic.com">
-    <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400..900&display=swap" rel="stylesheet">
-    <style>
-        sm-input {
-            --border-radius: 0.5rem 0 0 0.5rem;
-            flex: 1;
-        }
-
-        button[type="submit"] {
-            font-size: 1rem;
-            padding: 0.8rem 1.2rem;
-            border-radius: 0 .5rem 0.5rem 0;
-        }
-
-        sm-form {
-            --gap: 0;
-            width: min(26rem, 100%);
-        }
-
-        dt {
-            margin-bottom: 0.3rem;
-            font-weight: 500;
-            font-size: 0.95rem;
-        }
-
-        dd {
-            margin-bottom: 1.5rem;
-        }
-    </style>
-</head>
-
-<body>
-    <sm-notifications id="notification_drawer"></sm-notifications>
-    <section id="elevator_popup" class="grid hide-completely">
-        <header class="elevator__header">
-            <button class="close-button justify-self-start" onclick="hideSiteMap()">
-                <svg class="icon icon-only close-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24"
-                    height="24">
-                    <path fill="none" d="M0 0h24v24H0z" />
-                    <path
-                        d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z" />
-                </svg>
-            </button>
-        </header>
-        <ul id="floor_list" class="grid"></ul>
-    </section>
-    <header id="main_header" class="full-bleed">
-        <button id="elevator_button" class="button" onclick="showSiteMap()">
-            <svg class="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M12 3L16.3301 10.5H7.66987L12 3Z" />
-                <path d="M12 21L7.66987 13.5L16.3301 13.5L12 21Z" />
-            </svg>
-            <span class="button__label">
-                Elevator
-            </span>
-        </button>
-        <a href="index.html" class="main-logo flex align-center page-link justify-self-center" data-target="home_page">
-            <svg id="main_header__logo" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-                <path
-                    d="M20.46,21.32C20,19.78,18.6,18.59,15.3,17a12.67,12.67,0,0,1-2.64-1.56,4.27,4.27,0,0,1-.79-1,2.6,2.6,0,0,1,0-1.41c.24-.68.49-1,2.43-2.85a7.18,7.18,0,0,0,2.09-2.92,4.25,4.25,0,0,0,0-1.77,6.52,6.52,0,0,0-2.85-3.11c-.56-.36-.81-.4-.81-.15a2.33,2.33,0,0,1-.18.45L12.4,3l-.53-.36c-.28-.21-.64-.41-.77-.49s-.46-.11-.46,0a6.21,6.21,0,0,1-.37.83s-.08,0-.17-.08c-1.15-.83-1.64-1-1.64-.73A7.33,7.33,0,0,1,7.7,3.65C6.48,5.68,5.24,6.7,4,6.7c-.56,0-.54,0-.37.64s.2.58.68.43a3.37,3.37,0,0,0,1.09-.54.86.86,0,0,1,.3-.17,1.34,1.34,0,0,1,.13.39.79.79,0,0,0,.17.4A3.5,3.5,0,0,0,7.37,7.3L7.8,7l.09.34c.12.45.19.51.62.39a4.25,4.25,0,0,0,2.17-1.54l.38-.45,0,.39A5.92,5.92,0,0,1,8.89,9.54L7.67,10.71c-2,1.93-1.89,3.51.37,5a27.41,27.41,0,0,0,2.89,1.51c.17.07.62.32,1,.54C14,19,15,20.23,15,21.48a2,2,0,0,0,0,.49h0c0,.05,0,.05.56-.1a1.89,1.89,0,0,0,.53-.21,2.41,2.41,0,0,0-.34-1.15,7.05,7.05,0,0,0-1.68-1.77,21.91,21.91,0,0,0-3.2-1.83A9.53,9.53,0,0,1,8.16,15.2a2.18,2.18,0,0,1-.74-1.55C7.42,12.79,7.86,12,9,11c1.77-1.64,2.45-2.45,2.92-3.55a2.28,2.28,0,0,0,.26-1.26A2,2,0,0,0,12,5.06l-.2-.45L12,4.3l.28-.49.09-.18L12.6,4a3.69,3.69,0,0,1,.61,1.76A3.47,3.47,0,0,1,12.94,7l-.09.25s-.21.37-.41.69A17.78,17.78,0,0,1,9.91,10.6c-1.07,1-1.43,1.62-1.47,2.47a2.05,2.05,0,0,0,.7,1.73,10.47,10.47,0,0,0,3.28,2.08c2.28,1.13,3.26,1.81,4,2.73a2.94,2.94,0,0,1,.74,1.75,1.26,1.26,0,0,0,.09.57.48.48,0,0,0,.26,0l.51-.13.29-.08,0-.28c-.13-1-1-2-2.47-3a25.52,25.52,0,0,0-3.26-1.77,8.59,8.59,0,0,1-2.23-1.43,2.09,2.09,0,0,1-.5-2.62c.26-.53.5-.83,2.35-2.6,1.51-1.45,2.15-2.58,2.15-3.79A3.67,3.67,0,0,0,13,3.48a3,3,0,0,1-.4-.42A1.85,1.85,0,0,1,13,2.33a6.74,6.74,0,0,1,1.83,1.73,2.62,2.62,0,0,1,.47,1.68,3,3,0,0,1-.55,1.84c-.45.78-.79,1.14-2.67,2.93a5.56,5.56,0,0,0-1.3,1.64,1.77,1.77,0,0,0-.21,1,1.76,1.76,0,0,0,.19.92,6.28,6.28,0,0,0,2.9,2.34,21.6,21.6,0,0,1,3.66,2c1.35,1,2,2,2,3a1.06,1.06,0,0,0,.05.47,2.83,2.83,0,0,0,1-.24C20.56,21.68,20.56,21.66,20.46,21.32ZM7.29,6.4h0a2.23,2.23,0,0,1-.9.28L6,6.72l.43-.53a15.22,15.22,0,0,0,1.89-3,3.52,3.52,0,0,1,.38-.67c.07-.08.49.2,1,.64l.39.35L9.66,4A6.7,6.7,0,0,1,7.29,6.4Zm3.58-1.11A5.8,5.8,0,0,1,9.25,6.51h0a3.3,3.3,0,0,1-.74.17l-.35,0,.39-.49a15.64,15.64,0,0,0,1.32-2,4.63,4.63,0,0,1,.28-.49c.06-.08.33.26.57.77l.28.57Zm1-1.4a1.63,1.63,0,0,1-.28.4A6.63,6.63,0,0,1,11,3.72l-.53-.56.12-.29c.2-.49.24-.51.64-.19a5.57,5.57,0,0,1,.85.78A2.78,2.78,0,0,1,11.87,3.89Z" />
-            </svg>
-            <h4 class="h4 header__company-name">RanchiMall</h4>
-        </a>
-        <theme-toggle></theme-toggle>
-    </header>
-    <div id="outlet_switcher" class="grid gap-1-5 hide-completely">
-        <span id="outlet_switcher__floor_num" class="weight-500 color-0-8"></span>
-        <section id="outlet_switcher__outlet_container" class="outlet_switcher__floor"></section>
-    </div>
-    <main class="page">
-        <section class="outlet-hero-section margin-bottom-3r">
-            <div class="grid">
-                <h2 class="h2 weight-900 margin-bottom-1r">Verify certificate</h2>
-                <p>Enter transaction ID of issued certificate to check genuinity.</p>
-                <sm-form class="flex margin-top-1-5">
-                    <sm-input id="tx_id_input" type="search" placeholder="Transaction ID"></sm-input>
-                    <button class="button button--primary" type="submit" onclick="checkId(event)">Check</button>
-                </sm-form>
-                <div class="grid gap-1 margin-top-1-5">
-                    <h4>Sample transaction IDs</h4>
-                    <dl>
-                        <dt>Internship certificate</dt>
-                        <dd class="breakable">Transaction ID:
-                            8a56f42b495a7df3757ce7a8ca271e29eed39f78f09392d1ec6e0de7ebcedef2</dd>
-                        <dt>Employment certificate</dt>
-                        <dd class="breakable">Transaction ID:
-                            f938cc7af934154a47a12bf10068587e8617a7753c61ee8347b2d550dfe68186</dd>
-                    </dl>
-                </div>
-            </div>
-        </section>
-    </main>
-
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>
-    <script src="assets/js/components.js"></script>
-    <script src="https://unpkg.com/uhtml@3.0.1/es.js"></script>
-    <script src="assets/js/index.js"></script>
-    <script>
-        function checkId(e) {
-            e.preventDefault()
-            const toVerify = getRef('tx_id_input').value.trim()
-            if (toVerify === '')
-                return notify('Please enter a transaction ID', 'error')
-            fetch(`https://flosight.duckdns.org/api/tx/${toVerify}`).then(async res => {
-                if (res.status === 404) return notify('Invalid transaction ID', 'error')
-                const { floData } = await res.json()
-                const certType = floData.split(' ').slice(0, 3).join(' ');
-                let certificateVerification
-                switch (certType) {
-                    case "CERTIFICATE OF INTERNSHIP":
-                        certificateVerification = 'internCertificate';
-                        break;
-                    case "CERTIFICATE OF EMPLOYMENT":
-                        certificateVerification = 'employeeCertificate';
-                        break;
-                    case "CERTIFICATE OF VOLUNTEERSHIP":
-                        certificateVerification = 'volunteerCertificate';
-                        break;
-                    case "CERTIFICATE OF PARTICIPATION":
-                        certificateVerification = 'participationCertificate';
-                        break;
-                    default:
-                        return notify('Certificate transaction ID is not valid', 'error')
-                }
-                window.open(`https://www.ranchimall.net/verify/?${certificateVerification}=${toVerify}`, '_blank').focus();
-            }).catch(err => {
-                console.error(err)
-            })
-        }
-    </script>
-</body>
-
-</html>

webwallet.html

@@ -26,25 +26,22 @@
         </header>
         <ul id="floor_list" class="grid"></ul>
     </section>
-    <header id="main_header" class="full-bleed">
+    <header id="main_header" class="grid align-center full-bleed">
         <button id="elevator_button" class="button" onclick="showSiteMap()">
-            <svg class="icon button__icon--left" width="24" height="24" viewBox="0 0 24 24" fill="none"
+            <svg class="icon button__icon--left" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 3L16.3301 10.5H7.66987L12 3Z"/><path d="M12 21L7.66987 13.5L16.3301 13.5L12 21Z"/></svg>
-                xmlns="http://www.w3.org/2000/svg">
-                <path d="M12 3L16.3301 10.5H7.66987L12 3Z" />
-                <path d="M12 21L7.66987 13.5L16.3301 13.5L12 21Z" />
-            </svg>
             <span class="button__label">
                 Elevator
             </span>
         </button>
         <a href="index.html" class="main-logo flex align-center page-link justify-self-center" data-target="home_page">
-            <svg id="main_header__logo" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+            <svg id="main_header__logo" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.46,21.32C20,19.78,18.6,18.59,15.3,17a12.67,12.67,0,0,1-2.64-1.56,4.27,4.27,0,0,1-.79-1,2.6,2.6,0,0,1,0-1.41c.24-.68.49-1,2.43-2.85a7.18,7.18,0,0,0,2.09-2.92,4.25,4.25,0,0,0,0-1.77,6.52,6.52,0,0,0-2.85-3.11c-.56-.36-.81-.4-.81-.15a2.33,2.33,0,0,1-.18.45L12.4,3l-.53-.36c-.28-.21-.64-.41-.77-.49s-.46-.11-.46,0a6.21,6.21,0,0,1-.37.83s-.08,0-.17-.08c-1.15-.83-1.64-1-1.64-.73A7.33,7.33,0,0,1,7.7,3.65C6.48,5.68,5.24,6.7,4,6.7c-.56,0-.54,0-.37.64s.2.58.68.43a3.37,3.37,0,0,0,1.09-.54.86.86,0,0,1,.3-.17,1.34,1.34,0,0,1,.13.39.79.79,0,0,0,.17.4A3.5,3.5,0,0,0,7.37,7.3L7.8,7l.09.34c.12.45.19.51.62.39a4.25,4.25,0,0,0,2.17-1.54l.38-.45,0,.39A5.92,5.92,0,0,1,8.89,9.54L7.67,10.71c-2,1.93-1.89,3.51.37,5a27.41,27.41,0,0,0,2.89,1.51c.17.07.62.32,1,.54C14,19,15,20.23,15,21.48a2,2,0,0,0,0,.49h0c0,.05,0,.05.56-.1a1.89,1.89,0,0,0,.53-.21,2.41,2.41,0,0,0-.34-1.15,7.05,7.05,0,0,0-1.68-1.77,21.91,21.91,0,0,0-3.2-1.83A9.53,9.53,0,0,1,8.16,15.2a2.18,2.18,0,0,1-.74-1.55C7.42,12.79,7.86,12,9,11c1.77-1.64,2.45-2.45,2.92-3.55a2.28,2.28,0,0,0,.26-1.26A2,2,0,0,0,12,5.06l-.2-.45L12,4.3l.28-.49.09-.18L12.6,4a3.69,3.69,0,0,1,.61,1.76A3.47,3.47,0,0,1,12.94,7l-.09.25s-.21.37-.41.69A17.78,17.78,0,0,1,9.91,10.6c-1.07,1-1.43,1.62-1.47,2.47a2.05,2.05,0,0,0,.7,1.73,10.47,10.47,0,0,0,3.28,2.08c2.28,1.13,3.26,1.81,4,2.73a2.94,2.94,0,0,1,.74,1.75,1.26,1.26,0,0,0,.09.57.48.48,0,0,0,.26,0l.51-.13.29-.08,0-.28c-.13-1-1-2-2.47-3a25.52,25.52,0,0,0-3.26-1.77,8.59,8.59,0,0,1-2.23-1.43,2.09,2.09,0,0,1-.5-2.62c.26-.53.5-.83,2.35-2.6,1.51-1.45,2.15-2.58,2.15-3.79A3.67,3.67,0,0,0,13,3.48a3,3,0,0,1-.4-.42A1.85,1.85,0,0,1,13,2.33a6.74,6.74,0,0,1,1.83,1.73,2.62,2.62,0,0,1,.47,1.68,3,3,0,0,1-.55,1.84c-.45.78-.79,1.14-2.67,2.93a5.56,5.56,0,0,0-1.3,1.64,1.77,1.77,0,0,0-.21,1,1.76,1.76,0,0,0,.19.92,6.28,6.28,0,0,0,2.9,2.34,21.6,21.6,0,0,1,3.66,2c1.35,1,2,2,2,3a1.06,1.06,0,0,0,.05.47,2.83,2.83,0,0,0,1-.24C20.56,21.68,20.56,21.66,20.46,21.32ZM7.29,6.4h0a2.23,2.23,0,0,1-.9.28L6,6.72l.43-.53a15.22,15.22,0,0,0,1.89-3,3.52,3.52,0,0,1,.38-.67c.07-.08.49.2,1,.64l.39.35L9.66,4A6.7,6.7,0,0,1,7.29,6.4Zm3.58-1.11A5.8,5.8,0,0,1,9.25,6.51h0a3.3,3.3,0,0,1-.74.17l-.35,0,.39-.49a15.64,15.64,0,0,0,1.32-2,4.63,4.63,0,0,1,.28-.49c.06-.08.33.26.57.77l.28.57Zm1-1.4a1.63,1.63,0,0,1-.28.4A6.63,6.63,0,0,1,11,3.72l-.53-.56.12-.29c.2-.49.24-.51.64-.19a5.57,5.57,0,0,1,.85.78A2.78,2.78,0,0,1,11.87,3.89Z"/></svg>
-                <path
-                    d="M20.46,21.32C20,19.78,18.6,18.59,15.3,17a12.67,12.67,0,0,1-2.64-1.56,4.27,4.27,0,0,1-.79-1,2.6,2.6,0,0,1,0-1.41c.24-.68.49-1,2.43-2.85a7.18,7.18,0,0,0,2.09-2.92,4.25,4.25,0,0,0,0-1.77,6.52,6.52,0,0,0-2.85-3.11c-.56-.36-.81-.4-.81-.15a2.33,2.33,0,0,1-.18.45L12.4,3l-.53-.36c-.28-.21-.64-.41-.77-.49s-.46-.11-.46,0a6.21,6.21,0,0,1-.37.83s-.08,0-.17-.08c-1.15-.83-1.64-1-1.64-.73A7.33,7.33,0,0,1,7.7,3.65C6.48,5.68,5.24,6.7,4,6.7c-.56,0-.54,0-.37.64s.2.58.68.43a3.37,3.37,0,0,0,1.09-.54.86.86,0,0,1,.3-.17,1.34,1.34,0,0,1,.13.39.79.79,0,0,0,.17.4A3.5,3.5,0,0,0,7.37,7.3L7.8,7l.09.34c.12.45.19.51.62.39a4.25,4.25,0,0,0,2.17-1.54l.38-.45,0,.39A5.92,5.92,0,0,1,8.89,9.54L7.67,10.71c-2,1.93-1.89,3.51.37,5a27.41,27.41,0,0,0,2.89,1.51c.17.07.62.32,1,.54C14,19,15,20.23,15,21.48a2,2,0,0,0,0,.49h0c0,.05,0,.05.56-.1a1.89,1.89,0,0,0,.53-.21,2.41,2.41,0,0,0-.34-1.15,7.05,7.05,0,0,0-1.68-1.77,21.91,21.91,0,0,0-3.2-1.83A9.53,9.53,0,0,1,8.16,15.2a2.18,2.18,0,0,1-.74-1.55C7.42,12.79,7.86,12,9,11c1.77-1.64,2.45-2.45,2.92-3.55a2.28,2.28,0,0,0,.26-1.26A2,2,0,0,0,12,5.06l-.2-.45L12,4.3l.28-.49.09-.18L12.6,4a3.69,3.69,0,0,1,.61,1.76A3.47,3.47,0,0,1,12.94,7l-.09.25s-.21.37-.41.69A17.78,17.78,0,0,1,9.91,10.6c-1.07,1-1.43,1.62-1.47,2.47a2.05,2.05,0,0,0,.7,1.73,10.47,10.47,0,0,0,3.28,2.08c2.28,1.13,3.26,1.81,4,2.73a2.94,2.94,0,0,1,.74,1.75,1.26,1.26,0,0,0,.09.57.48.48,0,0,0,.26,0l.51-.13.29-.08,0-.28c-.13-1-1-2-2.47-3a25.52,25.52,0,0,0-3.26-1.77,8.59,8.59,0,0,1-2.23-1.43,2.09,2.09,0,0,1-.5-2.62c.26-.53.5-.83,2.35-2.6,1.51-1.45,2.15-2.58,2.15-3.79A3.67,3.67,0,0,0,13,3.48a3,3,0,0,1-.4-.42A1.85,1.85,0,0,1,13,2.33a6.74,6.74,0,0,1,1.83,1.73,2.62,2.62,0,0,1,.47,1.68,3,3,0,0,1-.55,1.84c-.45.78-.79,1.14-2.67,2.93a5.56,5.56,0,0,0-1.3,1.64,1.77,1.77,0,0,0-.21,1,1.76,1.76,0,0,0,.19.92,6.28,6.28,0,0,0,2.9,2.34,21.6,21.6,0,0,1,3.66,2c1.35,1,2,2,2,3a1.06,1.06,0,0,0,.05.47,2.83,2.83,0,0,0,1-.24C20.56,21.68,20.56,21.66,20.46,21.32ZM7.29,6.4h0a2.23,2.23,0,0,1-.9.28L6,6.72l.43-.53a15.22,15.22,0,0,0,1.89-3,3.52,3.52,0,0,1,.38-.67c.07-.08.49.2,1,.64l.39.35L9.66,4A6.7,6.7,0,0,1,7.29,6.4Zm3.58-1.11A5.8,5.8,0,0,1,9.25,6.51h0a3.3,3.3,0,0,1-.74.17l-.35,0,.39-.49a15.64,15.64,0,0,0,1.32-2,4.63,4.63,0,0,1,.28-.49c.06-.08.33.26.57.77l.28.57Zm1-1.4a1.63,1.63,0,0,1-.28.4A6.63,6.63,0,0,1,11,3.72l-.53-.56.12-.29c.2-.49.24-.51.64-.19a5.57,5.57,0,0,1,.85.78A2.78,2.78,0,0,1,11.87,3.89Z" />
-            </svg>
             <h4 class="h4 header__company-name">RanchiMall</h4>
         </a>
-        <theme-toggle></theme-toggle>
+        <label class="theme-switcher" title="Change theme">
+            <input id="theme_switcher" class="theme-switcher__checkbox" type="checkbox">
+            <svg class="icon moon-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M10 6a8 8 0 0 0 11.955 6.956C21.474 18.03 17.2 22 12 22 6.477 22 2 17.523 2 12c0-5.2 3.97-9.474 9.044-9.955A7.963 7.963 0 0 0 10 6zm-6 6a8 8 0 0 0 8 8 8.006 8.006 0 0 0 6.957-4.045c-.316.03-.636.045-.957.045-5.523 0-10-4.477-10-10 0-.321.015-.64.045-.957A8.006 8.006 0 0 0 4 12zm14.164-9.709L19 2.5v1l-.836.209a2 2 0 0 0-1.455 1.455L16.5 6h-1l-.209-.836a2 2 0 0 0-1.455-1.455L13 3.5v-1l.836-.209A2 2 0 0 0 15.29.836L15.5 0h1l.209.836a2 2 0 0 0 1.455 1.455zm5 5L24 7.5v1l-.836.209a2 2 0 0 0-1.455 1.455L21.5 11h-1l-.209-.836a2 2 0 0 0-1.455-1.455L18 8.5v-1l.836-.209a2 2 0 0 0 1.455-1.455L20.5 5h1l.209.836a2 2 0 0 0 1.455 1.455z"/></svg>
+            <svg class="icon sun-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636 5.636 7.05 3.515 4.93zM16.95 18.364l1.414-1.414 2.121 2.121-1.414 1.414-2.121-2.121zm2.121-14.85l1.414 1.415-2.121 2.121-1.414-1.414 2.121-2.121zM5.636 16.95l1.414 1.414-2.121 2.121-1.414-1.414 2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z"/></svg>
+        </label>
     </header>
     <div id="outlet_switcher" class="grid gap-1-5 hide">
         <div class="flex align-center">
@@ -86,8 +83,8 @@
         <h3 class="h3 margin-bottom-1r">Rooms</h3>
         <scroll-tab-header data-target="bit_bond_page_group" class="margin-bottom-1r">
             <button class="room-button">
-                <svg class="icon button__icon--left" xmlns="http://www.w3.org/2000/svg"
+                <svg class="icon button__icon--left" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
-                    enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
+                    height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
                     <g>
                         <rect fill="none" height="24" width="24" />
                     </g>
@@ -105,8 +102,8 @@
                 </span>
             </button>
             <button class="room-button">
-                <svg class="icon button__icon--left" xmlns="http://www.w3.org/2000/svg" height="24px"
+                <svg class="icon button__icon--left" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
-                    viewBox="0 0 24 24" width="24px" fill="#000000">
+                    width="24px" fill="#000000">
                     <path d="M0 0h24v24H0V0z" fill="none" />
                     <path
                         d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" />
@@ -157,11 +154,9 @@
             </p>
         </scroll-tab-panels>
     </main>
-
+    
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
-    <script src="assets/js/components.js"></script>
+    <script src="js/components.js"></script>
-    <script src="https://unpkg.com/uhtml@3.0.1/es.js"></script>
+    <script src="js/index.js"></script>
-    <script src="assets/js/index.js"></script>
 </body>
-
 </html>