v0.6.1

Added
- ICO investors in homepage carousel
- Elevator interaction

assets/bg/bg2.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1000 1600"><defs><linearGradient id="a" x1="-11.31" y1="904.24" x2="1015.26" y2="-122.32" gradientTransform="translate(-79.97 109.85)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff" stop-opacity="0"/><stop offset="0.33" stop-color="#fff" stop-opacity="0.01"/><stop offset="0.51" stop-color="#fff" stop-opacity="0.04"/><stop offset="0.65" stop-color="#fff" stop-opacity="0.09"/><stop offset="0.78" stop-color="#fff" stop-opacity="0.17"/><stop offset="0.89" stop-color="#fff" stop-opacity="0.27"/><stop offset="0.99" stop-color="#fff" stop-opacity="0.39"/><stop offset="1" stop-color="#fff" stop-opacity="0.4"/></linearGradient><linearGradient id="b" x1="-164.43" y1="1060.21" x2="862.13" y2="33.64" gradientTransform="translate(-82.81 -199.23)" xlink:href="#a"/><linearGradient id="c" x1="-377.03" y1="1225.29" x2="649.54" y2="198.73" gradientTransform="translate(-35.31 -576.91)" xlink:href="#a"/><linearGradient id="d" x1="-591.44" y1="1423.47" x2="435.13" y2="396.91" gradientTransform="translate(-19.08 -989.51)" xlink:href="#a"/><linearGradient id="e" x1="-783.64" y1="1608.56" x2="242.93" y2="581.99" gradientTransform="translate(-11.96 -1366.79)" xlink:href="#a"/></defs><rect x="-118.83" y="29.01" width="1093.21" height="932.04" transform="translate(922.81 67.25) rotate(90)" style="fill:url(#a)"/><rect x="-274.79" y="-124.11" width="1093.21" height="932.04" transform="translate(613.73 70.09) rotate(90)" style="fill:url(#b)"/><rect x="-439.88" y="-336.7" width="1093.21" height="932.04" transform="translate(236.05 22.59) rotate(90)" style="fill:url(#c)"/><rect x="-638.06" y="-551.12" width="1093.21" height="932.04" transform="translate(-176.55 6.36) rotate(90)" style="fill:url(#d)"/><rect x="-823.14" y="-743.32" width="1093.21" height="932.04" transform="translate(-553.83 -0.76) rotate(90)" style="fill:url(#e)"/></svg>

assets/bg/floor-1-bg.svg

@@ -0,0 +1,17 @@
+<svg width="1280" height="720" viewBox="0 0 1280 720" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<line x1="148" y1="151" x2="7" y2="151" stroke="#1050CB" stroke-width="14" stroke-linecap="round"/>
+<line x1="207" y1="178" x2="7" y2="178" stroke="#1050CB" stroke-width="14" stroke-linecap="round"/>
+<line x1="196" y1="205" x2="7" y2="205" stroke="#1050CB" stroke-width="14" stroke-linecap="round"/>
+<line x1="128" y1="232" x2="7" y2="232" stroke="#1050CB" stroke-width="14" stroke-linecap="round"/>
+<line x1="1217.53" y1="701.125" x2="1317.23" y2="800.827" stroke="#1050CB" stroke-width="14" stroke-linecap="round"/>
+<line x1="1194.9" y1="640.313" x2="1336.32" y2="781.734" stroke="#1050CB" stroke-width="14" stroke-linecap="round"/>
+<line x1="1221.77" y1="629" x2="1355.41" y2="762.643" stroke="#1050CB" stroke-width="14" stroke-linecap="round"/>
+<line x1="1288.95" y1="657.99" x2="1374.51" y2="743.55" stroke="#1050CB" stroke-width="14" stroke-linecap="round"/>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="1280" height="720" fill="white"/>
+</clipPath>
+</defs>
+</svg>

components.js

@@ -2080,6 +2080,11 @@ customElements.define('sm-popup', class extends HTMLElement {
         }).append(smPopup.content.cloneNode(true))
 
         this.allowClosing = false
+        this.isOpen = false
+    }
+
+    get open() {
+        return this.isOpen
     }
 
     resumeScrolling = () => {
@@ -2113,6 +2118,7 @@ customElements.define('sm-popup', class extends HTMLElement {
             )
             this.setAttribute('open', '')
             this.pinned = pinned
+            this.isOpen = true
         }
         this.popupContainer.classList.remove('hide')
         this.popup.style.transform = 'none';
@@ -2158,6 +2164,7 @@ customElements.define('sm-popup', class extends HTMLElement {
                     }
                 })
             )
+            this.isOpen = false
         }, 300);
     }
 
@@ -2278,6 +2285,7 @@ smCarousel.innerHTML = `
     --arrow-box-shadow: 0 0.2rem 0.2rem #00000020, 0 0.5rem 1rem #00000040;
     --indicator-top: auto;
     --indicator-bottom: -1rem;
+    --active-indicator-color: var(--accent-color);
 }
 .carousel__button{
     position: absolute;
@@ -2300,6 +2308,9 @@ smCarousel.innerHTML = `
     border-radius: 3rem;
     padding: 0.5rem;
 }
+.carousel__button:active{
+    background: rgba(var(--text-color), 0.1);
+}
 button:focus{
     outline: none;
 }
@@ -2373,7 +2384,7 @@ button:focus-visible{
     -webkit-transform: scale(1.5);
         -ms-transform: scale(1.5);
             transform: scale(1.5);
-    background: var(--accent-color);
+    background: var(--active-indicator-color);
 }
 slot::slotted(*){
     scroll-snap-align: center;
@@ -2394,6 +2405,9 @@ slot::slotted(*){
     .left,.right{
         display: none;
     }
+    .carousel__button:hover{
+        background: rgba(var(--text-color), 0.06);
+    }
 }
 @media (hover: none){
     ::-webkit-scrollbar-track {
@@ -2435,15 +2449,27 @@ customElements.define('sm-carousel', class extends HTMLElement {
         this.attachShadow({
             mode: 'open'
         }).append(smCarousel.content.cloneNode(true))
+
+        this.isAutoPlaying = false
+        this.autoPlayInterval = 3000
+        this.activeSlideNum = 0
+        this.carouselItems
+        this.indicators
+        this.showIndicator = false
+        this.carousel = this.shadowRoot.querySelector('.carousel')
+        this.carouselContainer = this.shadowRoot.querySelector('.carousel-container')
+        this.carouselSlot = this.shadowRoot.querySelector('slot')
+        this.nextArrow = this.shadowRoot.querySelector('.carousel__button--right')
+        this.previousArrow = this.shadowRoot.querySelector('.carousel__button--left')
+        this.indicatorsContainer = this.shadowRoot.querySelector('.indicators')
     }
 
     static get observedAttributes() {
-        return ['indicator']
+        return ['indicator', 'autoplay', 'interval']
     }
 
     scrollLeft = () => {
         this.carousel.scrollBy({
-            top: 0,
             left: -this.scrollDistance,
             behavior: 'smooth'
         })
@@ -2451,7 +2477,6 @@ customElements.define('sm-carousel', class extends HTMLElement {
 
     scrollRight = () => {
         this.carousel.scrollBy({
-            top: 0,
             left: this.scrollDistance,
             behavior: 'smooth'
         })
@@ -2459,29 +2484,37 @@ customElements.define('sm-carousel', class extends HTMLElement {
 
     handleIndicatorClick = (e) => {
         if (e.target.closest('.dot')) {
-            const slideNum = e.target.closest('.dot').getAttribute('rank')
+            const slideNum = parseInt(e.target.closest('.dot').getAttribute('rank'))
             if (this.activeSlideNum !== slideNum) {
                 this.showSlide(slideNum)
-                this.activeSlideNum = slideNum
             }
         }
     }
 
     showSlide = (slideNum) => {
-        this.carouselItems[slideNum].scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' })
+        this.carousel.scrollTo({
+            left: (this.carouselItems[slideNum].getBoundingClientRect().left - this.carousel.getBoundingClientRect().left + this.carousel.scrollLeft),
+            behavior: 'smooth'
+        })
+    }
+    
+    startAutoPlay = () => {
+        if((this.activeSlideNum + 1) < this.carouselItems.length)
+            this.showSlide(this.activeSlideNum + 1)
+        else
+            this.showSlide(0)
+        if (this.isAutoPlaying) {
+            setTimeout(() => {
+                this.startAutoPlay()
+            }, this.autoPlayInterval);
+        }
+    }
+
+    stopAutoPlay = () => {
+        this.isAutoPlaying = false
     }
 
     connectedCallback() {
-        this.activeSlideNum
-        this.carousel = this.shadowRoot.querySelector('.carousel')
-        this.carouselContainer = this.shadowRoot.querySelector('.carousel-container')
-        this.carouselSlot = this.shadowRoot.querySelector('slot')
-        this.nextArrow = this.shadowRoot.querySelector('.carousel__button--right')
-        this.previousArrow = this.shadowRoot.querySelector('.carousel__button--left')
-        this.indicatorsContainer = this.shadowRoot.querySelector('.indicators')
-        this.carouselItems
-        this.indicators
-        this.showIndicator = false
         this.scrollDistance = this.carouselContainer.getBoundingClientRect().width / 3
         let frag = document.createDocumentFragment();
         if (this.hasAttribute('indicator'))
@@ -2492,12 +2525,15 @@ customElements.define('sm-carousel', class extends HTMLElement {
             lastVisible = false
         const allElementsObserver = new IntersectionObserver(entries => {
             entries.forEach(entry => {
-                if (this.showIndicator)
+                if (this.showIndicator) {                    
+                    const activeRank = parseInt(entry.target.attributes.rank.textContent)
                     if (entry.isIntersecting) {
-                        this.indicators[parseInt(entry.target.attributes.rank.textContent)].classList.add('active')
+                        this.indicators[activeRank].classList.add('active')
+                        this.activeSlideNum = activeRank
                     }
-                else
-                    this.indicators[parseInt(entry.target.attributes.rank.textContent)].classList.remove('active')
+                    else
+                        this.indicators[activeRank].classList.remove('active')
+                }
                 if (!entry.target.previousElementSibling)
                     if (entry.isIntersecting) {
                         this.previousArrow.classList.remove('expand')
@@ -2514,7 +2550,6 @@ customElements.define('sm-carousel', class extends HTMLElement {
                     }
                 else {
                     this.nextArrow.classList.add('expand')
-
                     lastVisible = false
                 }
                 if (firstVisible && lastVisible)
@@ -2550,6 +2585,9 @@ customElements.define('sm-carousel', class extends HTMLElement {
                 this.indicatorsContainer.append(frag)
                 this.indicators = this.indicatorsContainer.children
             }
+            if (this.hasAttribute('autoplay')) {
+                this.startAutoPlay()
+            }
         })
 
         this.addEventListener('keyup', e => {
@@ -2564,12 +2602,33 @@ customElements.define('sm-carousel', class extends HTMLElement {
         this.indicatorsContainer.addEventListener('click', this.handleIndicatorClick)
     }
 
-    attributeChangedCallback(name, oldValue, newValue) {
-        if (name === 'indicator') {
-            if (this.hasAttribute('indicator'))
-                this.showIndicator = true
-            else
-                this.showIndicator = false
+    async attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue !== newValue) {            
+            if (name === 'indicator') {
+                if (this.hasAttribute('indicator'))
+                    this.showIndicator = true
+                else
+                    this.showIndicator = false
+                }
+            if (name === 'autoplay') {
+                if (this.hasAttribute('autoplay')) {
+                    this.isAutoPlaying = true
+                    if(this.carouselSlot.assignedElements().length > 1)
+                        this.startAutoPlay()
+                }
+                else {
+                    this.stopAutoPlay()
+                }
+                
+            }
+            if (name === 'interval') {
+                if (this.hasAttribute('interval') && this.getAttribute('interval').trim() !== '') {
+                    this.autoPlayInterval = Math.abs(parseInt(this.getAttribute('interval').trim()))
+                }
+                else {
+                    this.autoPlayInterval = 3000
+                }
+            }
         }
     }
 

css/main.css

@@ -11,7 +11,7 @@ html {
 }
 
 body {
-  --accent-color: #4d00a5;
+  --accent-color: #1042e9;
   --light-shade: rgba(var(--text-color), 0.06);
   --text-color: 17, 17, 17;
   --text-color-light: 100, 100, 100;
@@ -25,22 +25,28 @@ body {
 }
 
 body[data-theme=dark] {
-  --accent-color:#9600fa;
+  --accent-color:#2fb3ff;
   --text-color: 240, 240, 240;
   --text-color-light: 170, 170, 170;
   --foreground-color: 20, 20, 20;
   --error-color: rgb(255, 106, 106);
   background: rgba(var(--foreground-color), 1);
 }
-
-.font-mono {
-  font-family: "Roboto Mono", sans-serif;
+body[data-theme=dark] .outlet-preview {
+  background: rgba(var(--text-color), 0.02);
+  -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0px 2px 5px -1px, rgba(0, 0, 0, 0.4) 0px 1px 3px -1px;
+          box-shadow: rgba(0, 0, 0, 0.3) 0px 2px 5px -1px, rgba(0, 0, 0, 0.4) 0px 1px 3px -1px;
+}
+body[data-theme=dark] sm-carousel {
+  border-top: dashed 0.5rem rgba(var(--foreground-color), 0.7);
 }
 
-.font-slab {
-  font-family: "Roboto slab", sans-serif;
+/* .font-mono{
+    font-family: 'Roboto Mono', sans-serif;
 }
-
+.font-slab{
+    font-family: 'Roboto slab', sans-serif;
+} */
 .h1 {
   font-size: 2.5rem;
 }
@@ -154,6 +160,14 @@ ul {
   gap: 1.5rem;
 }
 
+.gap-2 {
+  gap: 2rem;
+}
+
+.gap-3 {
+  gap: 3rem;
+}
+
 .align-center {
   -webkit-box-align: center;
       -ms-flex-align: center;
@@ -335,12 +349,55 @@ ul {
   font-weight: 900;
 }
 
+.popup__header {
+  padding: 0.5rem 1.5rem 0 1rem;
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 0.5rem;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  width: 100%;
+}
+
+.popup__header__close {
+  padding: 0.5rem;
+  cursor: pointer;
+}
+
+#elevator_button_panel {
+  gap: 1rem;
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.floor__button {
+  padding: 1rem;
+  height: 4rem;
+  width: 4rem;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  border-radius: 0.5rem;
+  font-size: 1.5rem;
+  font-weight: 900;
+  background: rgba(var(--text-color), 0.06);
+}
+.floor__button--active {
+  background: rgba(var(--text-color), 0.2);
+  -webkit-box-shadow: 0 0 0 0.4rem rgba(var(--text-color), 1) inset;
+          box-shadow: 0 0 0 0.4rem rgba(var(--text-color), 1) inset;
+}
+
 #main_header {
   position: relative;
   padding: 1rem;
   grid-template-columns: repeat(3, 1fr);
 }
 
+#elevator_button {
+  justify-self: flex-start;
+}
+
 #main_logo {
   justify-self: center;
 }
@@ -350,7 +407,12 @@ ul {
   width: 1.8rem;
 }
 
+#theme_switcher {
+  justify-self: flex-end;
+}
+
 .page {
+  position: relative;
   padding: 0 1rem;
 }
 
@@ -369,14 +431,18 @@ ul {
 }
 
 .outlet-preview {
-  padding-top: 1rem;
+  padding-top: 2rem;
   background: rgba(var(--foreground-color), 1);
   -webkit-transition: -webkit-box-shadow 0.3s;
   transition: -webkit-box-shadow 0.3s;
   transition: box-shadow 0.3s;
   transition: box-shadow 0.3s, -webkit-box-shadow 0.3s;
-  -webkit-box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
-          box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
+  -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
+          box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
+  /*  &:nth-of-type(1){
+       background: url(../assets/bg/floor-1-bg.svg) no-repeat top center, linear-gradient(rgba(var(--foreground-color), 1), rgba(var(--foreground-color), 1));
+       background-size: contain;
+   } */
 }
 
 .outlet__title {
@@ -389,13 +455,16 @@ ul {
 }
 
 .label {
-  margin-bottom: 0.4rem;
+  position: relative;
   font-size: 0.8rem;
+  color: var(--accent-color);
+  margin-bottom: 0.3rem;
 }
 
 sm-carousel {
+  border-top: dashed 0.5rem rgba(var(--foreground-color), 1);
   height: 100%;
-  background: rgba(var(--text-color), 0.04);
+  background: rgba(var(--text-color), 0.06);
   padding-bottom: 4rem;
   padding-top: 1.5rem;
   --arrow-left: 2rem;
@@ -440,6 +509,9 @@ sm-tab-header {
 
 table {
   border-collapse: collapse;
+  width: -webkit-max-content;
+  width: -moz-max-content;
+  width: max-content;
 }
 
 .tr {
@@ -451,8 +523,14 @@ table {
 
 .td {
   padding: 0.6rem 0.8rem;
+  white-space: nowrap;
 }
 
+@media only screen and (max-width: 640px) {
+  .hide-on-mobile {
+    display: none;
+  }
+}
 @media only screen and (min-width: 640px) {
   .h1 {
     font-size: 4rem;
@@ -482,14 +560,35 @@ table {
     padding: 0 2rem;
   }
 
+  .floor__aside {
+    position: absolute;
+    left: 1rem;
+    top: 50%;
+    -webkit-transform: translateY(-50%) rotate(-90deg);
+            transform: translateY(-50%) rotate(-90deg);
+  }
+
   .outlet-preview {
     padding-top: 3rem;
   }
+
+  table {
+    justify-self: center;
+  }
+
+  #elevator_sections {
+    gap: 3rem;
+    grid-template-columns: auto 1fr;
+  }
 }
 @media only screen and (min-width: 1280px) {
   .page {
     padding: 0 10vw;
   }
+
+  #elevator_popup {
+    --width: min(100%, 54rem) ;
+  }
 }
 @media (any-hover: hover) {
   ::-webkit-scrollbar {
@@ -505,9 +604,31 @@ table {
     background: rgba(var(--text-color), 0.5);
   }
 
+  body[data-theme=dark] .outlet-preview:hover {
+    z-index: 1;
+    -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0px 48px 100px 0px;
+            box-shadow: rgba(0, 0, 0, 0.3) 0px 48px 100px 0px;
+  }
+
   .outlet-preview:hover {
     z-index: 1;
-    -webkit-box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
-            box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
+    -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 48px 100px 0px;
+            box-shadow: rgba(0, 0, 0, 0.15) 0px 48px 100px 0px;
+  }
+
+  .page-link {
+    cursor: pointer;
+    -webkit-transition: color 0.3s;
+    transition: color 0.3s;
+  }
+  .page-link:hover {
+    color: var(--accent-color);
+  }
+  .page-link:hover .icon {
+    fill: var(--accent-color);
+  }
+
+  .floor__button:hover {
+    background: rgba(var(--text-color), 0.2);
   }
 }

css/main.scss

@@ -10,7 +10,7 @@ html {
 }
 
 body {
-    --accent-color: #4d00a5;
+    --accent-color: #1042e9;
     --light-shade: rgba(var(--text-color), 0.06);
     --text-color: 17, 17, 17;
     --text-color-light: 100, 100, 100;
@@ -23,19 +23,26 @@ body {
     background: rgba(var(--text-color), 0.06);
 }
 body[data-theme='dark']{
-    --accent-color:#9600fa;
+    --accent-color:#2fb3ff;
     --text-color: 240, 240, 240;
     --text-color-light: 170, 170, 170;
     --foreground-color: 20, 20, 20;
     --error-color: rgb(255, 106, 106);
     background: rgba(var(--foreground-color), 1);
+    .outlet-preview{
+        background: rgba(var(--text-color), 0.02);
+        box-shadow: rgba(0, 0, 0, 0.3) 0px 2px 5px -1px, rgba(0, 0, 0, 0.4) 0px 1px 3px -1px;
+    }
+    sm-carousel{
+        border-top: dashed 0.5rem rgba(var(--foreground-color), 0.7);
+    }
 }
-.font-mono{
+/* .font-mono{
     font-family: 'Roboto Mono', sans-serif;
 }
 .font-slab{
     font-family: 'Roboto slab', sans-serif;
-}
+} */
 
 .h1{
     font-size: 2.5rem;
@@ -125,6 +132,12 @@ ul{
 .gap-1-5{
     gap: 1.5rem;
 }
+.gap-2{
+    gap: 2rem;
+}
+.gap-3{
+    gap: 3rem;
+}
 .align-center{
     align-items: center;
 }
@@ -262,12 +275,49 @@ ul{
     font-weight: 900;
 }
 
+.popup__header{
+    padding: 0.5rem 1.5rem 0 1rem;
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: 0.5rem;
+    align-items: center;
+    width: 100%;
+}
+.popup__header__close{
+    padding: 0.5rem;
+    cursor: pointer;
+}
+
+
+#elevator_button_panel{
+    gap: 1rem;
+    grid-template-columns: repeat(3, 1fr);
+}
+
+.floor__button{
+    padding: 1rem;
+    height: 4rem;
+    width: 4rem;
+    justify-content: center;
+    border-radius: 0.5rem;
+    font-size: 1.5rem;
+    font-weight: 900;
+    background: rgba(var(--text-color), 0.06);
+    &--active{
+        background: rgba(var(--text-color), 0.2);
+        box-shadow: 0 0 0 0.4rem rgba(var(--text-color), 1) inset;
+    }
+}
+
 
 #main_header{
     position: relative;
     padding: 1rem;
     grid-template-columns: repeat(3, 1fr);
 }
+#elevator_button{
+    justify-self: flex-start;
+}
 #main_logo{
     justify-self: center;
 }
@@ -275,8 +325,12 @@ ul{
     height: 1.8rem;
     width: 1.8rem;
 }
+#theme_switcher{
+    justify-self: flex-end;
+}
 
 .page{
+    position: relative;
     padding: 0 1rem;
 }
 
@@ -295,11 +349,15 @@ ul{
 }
 
 .outlet-preview{
-    padding-top: 1rem;
+    padding-top: 2rem;
     background: rgba(var(--foreground-color), 1);
     // border: solid 0.8rem rgba(var(--text-color), 1);
     transition: box-shadow 0.3s;
-    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
+    box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
+   /*  &:nth-of-type(1){
+        background: url(../assets/bg/floor-1-bg.svg) no-repeat top center, linear-gradient(rgba(var(--foreground-color), 1), rgba(var(--foreground-color), 1));
+        background-size: contain;
+    } */
 }
 .outlet__title{
     font-weight: 900;
@@ -311,13 +369,16 @@ ul{
 .outlet-preview__button{}
 
 .label{
-    margin-bottom: 0.4rem;
+    position: relative;
     font-size: 0.8rem;
+    color: var(--accent-color);
+    margin-bottom: 0.3rem;
 }
 
 sm-carousel{
+    border-top: dashed 0.5rem rgba(var(--foreground-color), 1);
     height: 100%;
-    background: rgba(var(--text-color), 0.04);
+    background: rgba(var(--text-color), 0.06);
     padding-bottom: 4rem;
     padding-top: 1.5rem;
     --arrow-left: 2rem;
@@ -360,6 +421,7 @@ sm-tab-header{
 
 table{
     border-collapse: collapse;
+    width: max-content;
 }
 .tr{
     margin: 0.5rem;
@@ -369,9 +431,15 @@ table{
 }
 .td{
     padding: 0.6rem 0.8rem;
+    white-space: nowrap;
 }
 
 
+@media only screen and (max-width: 640px) {
+    .hide-on-mobile{
+        display: none;
+    }
+}
 @media only screen and (min-width: 640px) {
     .h1{
         font-size: 4rem;
@@ -393,15 +461,31 @@ table{
     }
     .common-padding{
         padding: 0 2rem;
+    }
+    .floor__aside{
+        position: absolute;
+        left: 1rem;
+        top: 50%;
+        transform: translateY(-50%) rotate(-90deg);
     }    
     .outlet-preview{
         padding-top: 3rem;
     }
+    table{
+        justify-self: center;
+    }
+    #elevator_sections{
+        gap: 3rem;
+        grid-template-columns: auto 1fr;
+    }
 }
 @media only screen and (min-width: 1280px) {
     .page{
         padding: 0 10vw;
     }
+    #elevator_popup{
+        --width: min(100%, 54rem)
+    }
 }
 
 @media (any-hover: hover){
@@ -417,8 +501,27 @@ table{
             background: rgba(var(--text-color), 0.5);
         }
     }
+    body[data-theme='dark']{
+        .outlet-preview:hover{
+            z-index: 1;
+            box-shadow: rgba(0, 0, 0, 0.3) 0px 48px 100px 0px;
+        }
+    }
     .outlet-preview:hover{
         z-index: 1;
-        box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
+        box-shadow: rgba(0, 0, 0, 0.15) 0px 48px 100px 0px;
+    }
+    .page-link{
+        cursor: pointer;
+        transition: color 0.3s;
+        &:hover{
+            color: var(--accent-color);
+            .icon{
+                fill: var(--accent-color);
+            }
+        }
+    }
+    .floor__button:hover{
+        background: rgba(var(--text-color), 0.2);
     }
 }

index.html

@@ -4,7 +4,9 @@
     <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>Document</title>
+    <title>RanchiMall</title>
+    <meta name="description" content="Official website of RanchiMall, a Blockchain incorporated entity.">
+    <link rel="shortcut icon" href="assets/RM logo.png" type="image/png">
     <link rel="stylesheet" href="css/main.min.css">
     <link rel="preconnect" href="https://fonts.gstatic.com">
     <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500;700&family=Roboto+Slab:wght@400;500;700;900&family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
@@ -76,10 +78,10 @@
 
     <template id="ico_investor_row">
         <div class="investor-card grid gap-1-5 common-padding">
-            <img class="investor__image" src="dp.jpg" alt="">
+            <img class="investor__image" src="" alt="" loading="lazy">
             <div class="flex direction-column">
                 <h4 class="label font-slab color-0-8 weight-500">Investor</h4>
-                <h3 class="investor-name value">John Doe</h3>
+                <h3 class="investor-name value capitalize"></h3>
             </div>
             <div class="flex direction-column investor__contribution-container">
                 <h4 class="label font-slab color-0-8 weight-500">Contribution</h4>
@@ -89,10 +91,59 @@
     </template>
     
 
+    <!--  -->
+
+
+    <!-- Popup -->
+
+    <sm-popup id="elevator_popup">
+        <header class="popup__header" slot="header">
+            <button class="close-button" onclick="hidePopup()">
+                <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>
+            <h4>Elevator</h4>
+        </header>
+        <div id="elevator_sections" class="grid">
+            <section id="elevator__panel">
+                <h5 class="h5 margin-bottom-2r">Floors</h5>
+                <ul id="elevator_button_panel" class="grid">
+                    <li>
+                        <button class="button floor__button floor__button--active" data-target="first_floor">1</button>
+                    </li>
+                    <li>
+                        <button class="button floor__button" data-target="second_floor">2</button>
+                    </li>
+                    <li>
+                        <button class="button floor__button" data-target="third_floor">3</button>
+                    </li>
+                </ul>
+            </section>
+            <section id="elevator__floor_plan" class="hide-on-mobile">
+                <h5 class="h5 margin-bottom-2r">Outlets</h5>
+                <section class="grid gap-3" id="first_floor">
+                    <div class="outlet-section">
+                        <h4 class="h4 margin-bottom-0-5r page-link" data-target="bitbonds">BitCoin Bonds</h4>
+                        <p class="color-0-8">Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, quae!</p>
+                    </div>
+                    <div class="outlet-section">
+                        <h4 class="h4 margin-bottom-0-5r page-link" data-target="bob'sfund">Bob's Fund</h4>
+                        <p class="color-0-8">Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, quae!</p>
+                    </div>
+                    <div class="outlet-section">
+                        <h4 class="h4 margin-bottom-0-5r page-link" data-target="ico">ICO</h4>
+                        <p class="color-0-8">Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, quae!</p>
+                    </div>
+                </section>
+                <section id="second_floor"></section>
+                <section id="third_floor"></section>
+            </section>
+        </div>
+    </sm-popup>
+
     <!--  -->
 
     <header id="main_header" class="grid align-center margin-bottom-1r">
-        <button class="button">Elevator</button>
+        <button id="elevator_button" class="button" onclick="showPopup('elevator_popup')">Elevator</button>
         <div id="main_logo" class="flex align-center">
             <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>
@@ -101,9 +152,9 @@
     </header>
     <article id="home_page" class="page hide-completely">
         <section id="floor_1" class="floor">
-            <header class="floor__header margin-bottom-2r">
-                <h4 class="font-slab h4">Floor 1</h4>
-            </header>
+            <aside class="floor__aside margin-bottom-2r">
+                <h4 class="font-slab h4 weight-900">Floor 1</h4>
+            </aside>
             <main id="floor_1__outlets" class="grid">
                 <div class="flex direction-column card outlet-preview">
                     <div class="flex direction-column common-padding margin-bottom-1-5r text-center">
@@ -111,12 +162,12 @@
                         <p class="outlet__description margin-bottom-1-5r">
                             Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam reprehenderit cumque sequi earum.
                         </p>
-                        <button class="button outlet-preview__button justify-right" data-target="bitbonds">
+                        <button class="button page-link outlet-preview__button justify-right" data-target="bitbonds">
                             <span class="button__label">VISIT</span>
                             <svg class="icon button__icon--right" 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 12l-6 6V6z"/></svg>
                         </button>
                     </div>
-                    <sm-carousel id="bit_bond_series__container" indicator></sm-carousel>
+                    <sm-carousel id="bit_bond_series__container" indicator autoplay></sm-carousel>
                 </div>
                 <div class="flex direction-column card outlet-preview">
                     <div class="flex direction-column margin-bottom-1-5r text-center common-padding">
@@ -124,12 +175,12 @@
                         <p class="outlet__description margin-bottom-1-5r">
                             Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam reprehenderit cumque sequi earum.
                         </p>
-                        <button class="button outlet-preview__button justify-right" data-target="bob'sfund">
+                        <button class="button page-link outlet-preview__button justify-right" data-target="bob'sfund">
                             <span class="button__label">VISIT</span>
                             <svg class="icon button__icon--right" 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 12l-6 6V6z"/></svg>
                         </button>
                     </div>
-                    <sm-carousel id="bob_fund_investors__container" indicator></sm-carousel>
+                    <sm-carousel id="bob_fund_investors__container" indicator autoplay></sm-carousel>
                 </div>
                 <div class="flex direction-column card outlet-preview">
                     <div class="flex direction-column margin-bottom-1-5r text-center common-padding">
@@ -137,12 +188,12 @@
                         <p class="outlet__description margin-bottom-1-5r">
                             Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam reprehenderit cumque sequi earum.
                         </p>
-                        <button class="button outlet-preview__button justify-right" data-target="ico">
+                        <button class="button page-link outlet-preview__button justify-right" data-target="ico">
                             <span class="button__label">VISIT</span>
                             <svg class="icon button__icon--right" 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 12l-6 6V6z"/></svg>
                         </button>
                     </div>
-                    <sm-carousel id="ico_investors__container" indicator></sm-carousel>
+                    <sm-carousel id="ico_investors__container" indicator autoplay></sm-carousel>
                 </div>
             </main>
         </section>
@@ -163,8 +214,8 @@
             <sm-tab>More</sm-tab>
         </sm-tab-header>
         <sm-tab-panels id="bit_bonds__rooms">
-            <sm-panel class="flex direction-column align-center w-100" style="overflow-x: auto;">
-                <table style="min-width: max-content;">
+            <sm-panel class="grid w-100" style="overflow-x: auto;">
+                <table>
                     <thead>
                         <tr class="tr">
                             <td class="td weight-700 uppercase">Series</td>
@@ -676,8 +727,10 @@
                 return row
             },
             icoInvestorRow(obj){
-                const {investorName, contribution} = obj
+                const {extension, investorName, contribution} = obj
                 const row = document.getElementById('ico_investor_row').content.cloneNode(true)
+                row.querySelector('.investor__image').src = `assets/investors-thumbnail/${investorName}.${extension}`
+                row.querySelector('.investor__image').setAttribute('alt', `${investorName} profile picture`)
                 row.querySelector('.investor-name').textContent = investorName
                 row.querySelector('.investor-contribution').textContent = contribution
                 return row
@@ -877,15 +930,78 @@
 
         const icoInvestors = [
             {
-                investorName: 'John Doe',
+                extension: 'jpg',
+                investorName: 'Abhijeet Das Gupta',
                 contribution: 'Helping us in social media with increasing reach of Twitter',
             },
             {
-                investorName: 'Jane Doe',
+                extension: 'jpg',
+                investorName: 'Amit Jagetia',
                 contribution: 'Helping us in social media with increasing reach of Twitter',
             },
             {
-                investorName: 'james Doe',
+                extension: 'jpg',
+                investorName: 'Amitesh Anand',
+                contribution: 'Helping us in social media with increasing reach of Twitter',
+            },
+            {
+                extension: 'jpg',
+                investorName: 'Atul Agarwal',
+                contribution: 'Helping us in social media with increasing reach of Twitter',
+            },
+            {
+                extension: 'jpg',
+                investorName: 'Barun Kumar',
+                contribution: 'Helping us in social media with increasing reach of Twitter',
+            },
+            {
+                extension: 'jpg',
+                investorName: 'Janardan Tiwary',
+                contribution: 'Helping us in social media with increasing reach of Twitter',
+            },
+            {
+                extension: 'jpg',
+                investorName: 'Kanwal Koul',
+                contribution: 'Helping us in social media with increasing reach of Twitter',
+            },
+            {
+                extension: 'jpg',
+                investorName: 'Mansoor Ahmed',
+                contribution: 'Helping us in social media with increasing reach of Twitter',
+            },
+            {
+                extension: 'jpg',
+                investorName: 'Meghna Patel',
+                contribution: 'Helping us in social media with increasing reach of Twitter',
+            },
+            {
+                extension: 'jpg',
+                investorName: 'Nikhil Kulkarni',
+                contribution: 'Helping us in social media with increasing reach of Twitter',
+            },
+            {
+                extension: 'jpg',
+                investorName: 'Pankaj Miglani',
+                contribution: 'Helping us in social media with increasing reach of Twitter',
+            },
+            {
+                extension: 'jpg',
+                investorName: 'Rajeev Kumar Gupta',
+                contribution: 'Helping us in social media with increasing reach of Twitter',
+            },
+            {
+                extension: 'jpg',
+                investorName: 'Sudhir Taneja',
+                contribution: 'Helping us in social media with increasing reach of Twitter',
+            },
+            {
+                extension: 'jpg',
+                investorName: 'Varucchi Dubey',
+                contribution: 'Helping us in social media with increasing reach of Twitter',
+            },
+            {
+                extension: 'jpg',
+                investorName: 'Venkat Narayanan',
                 contribution: 'Helping us in social media with increasing reach of Twitter',
             },
         ]
@@ -919,11 +1035,17 @@
         renderAllIcoInvestors()
     
         document.addEventListener('click', e => {
-            if(e.target.closest('.outlet-preview__button')){
-                const button = e.target.closest('.outlet-preview__button')
+            if(e.target.closest('.page-link')){
+                const button = e.target.closest('.page-link')
                 const targetPage = button.dataset.target
                 showPage(targetPage)
                 history.pushState({type: 'page', id: targetPage}, null, `#${targetPage}`)
+                if(getRef('elevator_popup').open){
+                    hidePopup()
+                }
+            }
+            else if(e.target.closest('.floor__button')){
+
             }
         })
 
@@ -942,10 +1064,10 @@
                         pageEnterAnimation = flyInShrink
                         pageExitAnimation = flyOutShrink
                     }
-                    document.body.style.pointerEvents = 'none'
+                    document.body.setAttribute('style', 'pointer-events: none; overflow-x: hidden')
                     getRef(currentPage).animate(pageExitAnimation, {...options, easing: easeInOvershoot})
                     .onfinish = () => {
-                        document.body.style.pointerEvents = 'all'
+                        document.body.setAttribute('style', 'pointer-events: all; overflow-x: auto')
                         getRef(currentPage).classList.add('hide-completely')
                         getRef(pageId).classList.remove('hide-completely')
                         getRef(pageId).animate(pageEnterAnimation, {...options, easing: easeOutOvershoot})
@@ -958,6 +1080,15 @@
                 }
             }
         }
+
+        window.addEventListener('hashchange', e => {
+            if(location.hash === ''){
+                showPage('home_page', true)
+            }
+            else{
+                showPage(location.hash.split('#')[1])
+            }
+        })
     
     </script>
 </body>