UI update

-- added collapsing header to rooms

UX improvement
-- added ESC key binding to exit rooms

bitcoinbonds.html

@@ -78,13 +78,8 @@
                     <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">Bitcoin Bonds</h2>
+            <h2 class="h2 weight-700 margin-bottom-2r">Bitcoin Bonds</h2>
-            <p class="margin-bottom-1-5r">
+            <h4 class="margin-bottom-1r">How does it work?</h4>
-                <!-- What is a Bitcoin Bond? -->
-                A Bitcoin Bond is an investment package whereby the investor <Rohit sir has to complete this sentence> 
-
-                </p>
-            <h4>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 all Bitcoin price gains whichever is higher.
                 It offers full capital protection if Bitcoin prices fall below acquisition price.
@@ -115,9 +110,10 @@
             <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 class="room-title"></h3>
+                    <h3 id="room_title" class="hide-completely"></h3>
                 </button>
             </header>
+            <h1 id="hero_title"></h1>
             <section id="performance_room" class="grid room">
                 <div id="bit_bond_series__container" class="grid series-container"></div>
             </section>

bob'sfund.html

@@ -113,9 +113,10 @@
             <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 class="room-title"></h3>
+                    <h3 id="room_title" class="hide-completely"></h3>
                 </button>
             </header>
+            <h1 id="hero_title"></h1>
             <section id="performance_room" class="grid room">
                 <div id="bob_fund_investors__container" class="grid series-container series-container--bobs-fund"></div>
             </section>
@@ -150,6 +151,10 @@
             <section id="purchase_room" class="grid room">
                 <sm-button variant="primary">Buy here</sm-button>
             </section>
+            <footer class="room-container__footer">
+                <h4>Related rooms</h4>
+                <div id="room_switcher"></div>
+            </footer>
         </section>
     </main>
 

css/main.css

@@ -826,22 +826,6 @@ ol[type="1"] {
   padding: 1.5rem;
 }
 
-sm-carousel {
-  position: relative;
-  height: 100%;
-  border-radius: 0.5rem;
-  padding: 1.5rem 1.5rem 4rem 1.5rem;
-  background: rgba(var(--foreground-color), 1);
-  --arrow-left: 1.5rem;
-  --arrow-right: 1.5rem;
-  --arrow-fill: rgba(var(--text-color), 1);
-  --arrow-background: transparent;
-  --arrow-box-shadow: none;
-  --arrow-bottom: -3.5rem;
-  --indicator-bottom: -2.5rem;
-  --active-indicator-color: var(--accent-color);
-}
-
 .bit-bond-series__row,
 .bob-fund__row,
 .person-card {
@@ -1092,11 +1076,6 @@ scroll-tab-panels > [active] {
   fill: var(--accent-color);
 }
 
-#ico_page__carousel {
-  width: min(36rem, 100%);
-  height: max-content;
-}
-
 .progress-bar__circle,
 .progress-bar__line {
   position: absolute;
@@ -1156,9 +1135,6 @@ scroll-tab-panels > [active] {
 .room-tile:active {
   transform: scale(0.95);
 }
-.room-tile:focus-visible {
-  outline: auto;
-}
 
 #expanding_tile {
   position: fixed;
@@ -1185,8 +1161,6 @@ scroll-tab-panels > [active] {
 
 .room-container__header {
   display: flex;
-  align-items: center;
-  justify-content: space-between;
   position: sticky;
   top: 0;
   z-index: 2;
@@ -1194,6 +1168,11 @@ scroll-tab-panels > [active] {
   padding: 1rem 0;
 }
 
+#hero_title {
+  font-size: 2.5rem;
+  margin-bottom: 2rem;
+}
+
 .room-container__footer {
   position: sticky;
   display: grid;
@@ -1384,10 +1363,6 @@ scroll-tab-panels > [active] {
     grid-auto-flow: column;
   }
 
-  .outlet-preview__carousel {
-    padding: 2rem 2rem 5rem 2rem;
-  }
-
   #outlet_switcher {
     padding: 1rem 1.5rem;
   }

css/main.scss

@@ -735,22 +735,6 @@ ol[type="1"]{
     }
 }
 
-sm-carousel{
-    position: relative;
-    height: 100%;
-    border-radius: 0.5rem;
-    padding: 1.5rem 1.5rem 4rem 1.5rem;
-    background: rgba(var(--foreground-color), 1);
-    --arrow-left: 1.5rem;
-    --arrow-right: 1.5rem;
-    --arrow-fill: rgba(var(--text-color), 1);
-    --arrow-background: transparent;
-    --arrow-box-shadow: none;
-    --arrow-bottom: -3.5rem;
-    --indicator-bottom: -2.5rem;
-    --active-indicator-color: var(--accent-color);
-}
-
 .bit-bond-series__row,
 .bob-fund__row,
 .person-card{
@@ -981,10 +965,6 @@ scroll-tab-panels{
 
 }
 
-#ico_page__carousel{
-    width: min(36rem ,100%);
-    height: max-content;
-}
 .progress-bar__circle,
 .progress-bar__line{
     position: absolute;
@@ -1040,9 +1020,6 @@ scroll-tab-panels{
     &:active{
         transform: scale(0.95);
     }
-    &:focus-visible{
-        outline: auto;
-    }
 }
 #expanding_tile{
     position: fixed;
@@ -1068,14 +1045,16 @@ scroll-tab-panels{
 
 .room-container__header{
     display: flex;
-    align-items: center;
-    justify-content: space-between;
     position: sticky;
     top: 0;
     z-index: 2;
     background-color: inherit;
     padding: 1rem 0;
 }
+#hero_title{
+    font-size: 2.5rem;
+    margin-bottom: 2rem;
+}
 
 .room-container__footer{
     position: sticky;
@@ -1253,9 +1232,6 @@ scroll-tab-panels{
     .bit-bond-series__row{
         grid-auto-flow: column;
     }
-    .outlet-preview__carousel{
-        padding: 2rem 2rem 5rem 2rem;
-    }
     #outlet_switcher{
         padding: 1rem 1.5rem;
     }

js/index.js

@@ -158,7 +158,12 @@ function getFormatedTime(time, relative) {
 window.addEventListener("load", () => {
   document.addEventListener("keyup", (e) => {
     if (e.code === "Escape") {
-      hideSiteMap();
+      if (isSiteMapOpen) {
+        hideSiteMap();
+      }
+      else if (isRoomOpen) {
+        hideRoom()
+      }
     }
   });
   document.addEventListener("pointerdown", (e) => {
@@ -356,7 +361,7 @@ bitBondRowTemplate.innerHTML = `
     </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"></h3>
+        <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>
@@ -831,8 +836,8 @@ const animeOutOption = {
 }
 
 window.addEventListener('hashchange', e => {
-  showRoom(window.location.hash, true)
   if (allRooms.length) {
+    showRoom(window.location.hash, true)
     renderRoomShorcuts()
   }
 })
@@ -872,15 +877,19 @@ function showRoom(roomId, animate = false) {
     const roomContainer = document.querySelector('.room-container')
     roomContainer.querySelectorAll('.room').forEach(child => child.classList.add('hide-completely'))
     document.querySelector(roomId).classList.remove('hide-completely')
-    document.querySelector('.room-title').textContent = tile.querySelector('.room-tile__title').textContent
+    getRef('room_title').textContent = tile.querySelector('.room-tile__title').textContent
+    getRef('hero_title').textContent = tile.querySelector('.room-tile__title').textContent
     roomContainer.classList.remove('hide-completely')
     if (animate && !isRoomOpen) {
       roomContainer.animate(slideInDown, animeInOptions)
       .onfinish = () => {
         getRef('expanding_tile').classList.add('hide-completely')
+        isRoomOpen = true
       }
     }
-    isRoomOpen = true
+    else {
+      isRoomOpen = true
+    }
   }
 }
 
@@ -929,4 +938,30 @@ function renderRoomShorcuts() {
 
 if (allRooms.length) {
   renderRoomShorcuts()
+}
+
+const heroTitleObserver = new IntersectionObserver(entries => {
+  entries.forEach(entry => {
+    if (entry.isIntersecting) {
+      getRef('room_title').animate(slideOutDown, animeInOptions)
+      .onfinish = () => {
+        getRef('room_title').classList.add('hide-completely')
+      }
+      // getRef('hero_title').animate(slideInDown, animeOutOption)
+    }
+    else {
+        if (isRoomOpen)
+      getRef('room_title').classList.remove('hide-completely')
+      getRef('room_title').animate(slideInUp, animeInOptions)
+      // getRef('hero_title').animate(slideOutDown, animeOutOption)
+    }
+  })
+},
+  {
+  threshold: 1
+  }
+)
+
+if (getRef('hero_title')) {
+  heroTitleObserver.observe(getRef('hero_title'))
 }