UI update

assets/css/main.css

@@ -828,7 +828,7 @@ ol[type="1"] {
 }
 
 .value {
-  font-size: 1.1rem;
+  font-size: 1.2rem;
 }
 
 .series-container {
@@ -837,12 +837,6 @@ ol[type="1"] {
   grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
 }
 
-.bit-bond-series__row,
-.bob-fund__row,
-.card {
-  padding: 1.5rem;
-}
-
 .bit-bond-series__row,
 .bob-fund__row,
 .person-card {
@@ -857,12 +851,17 @@ ol[type="1"] {
 .bit-bond-series__row,
 .card {
   gap: 1rem;
+  padding: 1.5rem;
   border-radius: 0.5rem;
   align-items: flex-start;
   background-color: rgba(var(--foreground-color), 1);
   box-shadow: 0 0.5rem 1rem -0.5rem rgba(0, 0, 0, 0.1);
 }
 
+.bit-bond-series__row .original-value {
+  font-size: 0.85rem;
+}
+
 .up-arrow {
   height: 1em;
   width: 1em;
@@ -1141,7 +1140,6 @@ ol[type="1"] {
 }
 
 .room-tile__icon {
-  margin-top: auto;
   margin-bottom: 1rem;
   height: 3rem;
   width: 3rem;
@@ -1158,7 +1156,7 @@ ol[type="1"] {
 }
 
 #performance_preview {
-  margin-bottom: auto;
+  margin-top: auto;
 }
 #performance_preview > * {
   padding: 0;

assets/css/main.scss

@@ -738,7 +738,7 @@ ol[type="1"]{
     margin-bottom: 0.3rem;
 }
 .value{
-    font-size: 1.1rem;
+    font-size: 1.2rem;
 }
 
 .series-container{
@@ -746,11 +746,6 @@ ol[type="1"]{
     padding-bottom: 1.5rem;
     grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
 }
-.bit-bond-series__row,
-.bob-fund__row,
-.card{
-    padding: 1.5rem;
-}
 
 .bit-bond-series__row,
 .bob-fund__row,
@@ -768,12 +763,19 @@ ol[type="1"]{
 .bit-bond-series__row,
 .card{
     gap: 1rem;
+    padding: 1.5rem;
     border-radius: 0.5rem;
     align-items: flex-start;
     background-color: rgba(var(--foreground-color), 1);
     box-shadow: 0 0.5rem 1rem -0.5rem rgba(0, 0, 0, 0.1);
 }
 
+.bit-bond-series__row{
+    .original-value{
+        font-size: 0.85rem;
+    }
+}
+
 .up-arrow{
     height: 1em;
     width: 1em;
@@ -1028,7 +1030,6 @@ ol[type="1"]{
     }
 }
 .room-tile__icon{
-    margin-top: auto;
     margin-bottom: 1rem;
     height: 3rem;
     width: 3rem;
@@ -1043,7 +1044,7 @@ ol[type="1"]{
     font-size: 1.2rem;
 }
 #performance_preview{
-    margin-bottom: auto;
+    margin-top: auto;
     & > *{
         padding: 0;
     }

assets/js/components.js

@@ -3289,595 +3289,4 @@ customElements.define('sm-menu-option', class extends HTMLElement {
             }
         })
     }
-})
-
-// tab-header
-
-const smTabHeader = document.createElement('template')
-smTabHeader.innerHTML = `
-<style>
-    *{
-        padding: 0;
-        margin: 0;
-        -webkit-box-sizing: border-box;
-                box-sizing: border-box;
-    } 
-    :host{
-        display: -webkit-box;
-        display: -ms-flexbox;
-        display: flex;
-    }
-    .tabs{
-        position: relative;
-        display: -ms-grid;
-        display: grid;
-        width: 100%;
-    }
-    .tab-header{
-        display: -ms-grid;
-        display: grid;
-        grid-auto-flow: column;
-        -webkit-box-pack: start;
-            -ms-flex-pack: start;
-                justify-content: flex-start;
-        gap: 1rem;
-        position: relative;
-        overflow: auto hidden;
-        max-width: 100%;
-        scrollbar-width: 0;
-    }
-    .indicator{
-        position: absolute;
-        left: 0;
-        bottom: 0;
-        height: 0.15rem;
-        border-radius: 1rem 1rem 0 0;  
-        background: var(--accent-color);
-        -webkit-transition: width 0.3s, -webkit-transform 0.3s;
-        transition: width 0.3s, -webkit-transform 0.3s;
-        -o-transition: transform 0.3s, width 0.3s;
-        transition: transform 0.3s, width 0.3s;
-        transition: transform 0.3s, width 0.3s, -webkit-transform 0.3s;
-        pointer-events: none;
-    }
-    :host([variant="tab"]) .indicator{
-        height: 100%;
-        border-radius: 0.3rem;
-    }
-    :host(.round) .indicator{
-        border-radius: 3rem;
-    }
-    :host([variant="tab"]) .tab-header{
-        border-bottom: none; 
-    }
-    .hide-completely{
-        display: none;
-    }
-    :host([variant="tab"]) .tab-header{
-        gap: 0.2rem;
-        display: -ms-inline-grid;
-        display: inline-grid;
-        justify-self: flex-start;
-        border-radius: 0.3rem;
-    }
-    :host([variant="tab"]) slot::slotted(.active){
-        color: rgba(var(--foreground-color), 1);
-    }
-    slot::slotted(.active){
-        color: var(--accent-color);
-        opacity: 1;
-    }
-    @media (hover: none){
-        .tab-header::-webkit-scrollbar-track {
-            -webkit-box-shadow: none !important;
-            background-color: transparent !important;
-        }
-        .tab-header::-webkit-scrollbar {
-            height: 0;
-            background-color: transparent;
-        }
-    }         
-</style>
-<div part="tab-container" class="tabs">
-    <div part="tab-header" class="tab-header">
-        <slot></slot>
-        <div part="indicator" class="indicator"></div>
-    </div>
-</div>
-`;
-
-customElements.define('sm-tab-header', class extends HTMLElement {
-    constructor() {
-        super()
-        this.attachShadow({
-            mode: 'open'
-        }).append(smTabHeader.content.cloneNode(true))
-
-        this.indicator = this.shadowRoot.querySelector('.indicator');
-        this.tabSlot = this.shadowRoot.querySelector('slot');
-        this.tabHeader = this.shadowRoot.querySelector('.tab-header');
-    }
-
-    sendDetails(element) {
-        this.dispatchEvent(
-            new CustomEvent("switchtab", {
-                bubbles: true,
-                detail: {
-                    target: this.target,
-                    rank: parseInt(element.dataset.rank)
-                }
-            })
-        )
-    }
-
-    moveIndiactor(tabDimensions) {
-        //if(this.isTab)
-        this.indicator.setAttribute('style', `width: ${tabDimensions.width}px; transform: translateX(${tabDimensions.left - this.tabHeader.getBoundingClientRect().left + this.tabHeader.scrollLeft}px)`)
-        //else
-        //this.indicator.setAttribute('style', `width: calc(${tabDimensions.width}px - 1.6rem); transform: translateX(calc(${ tabDimensions.left - this.tabHeader.getBoundingClientRect().left + this.tabHeader.scrollLeft}px + 0.8rem)`)
-    }
-
-    connectedCallback() {
-        if (!this.hasAttribute('target') || this.getAttribute('target').value === '') return;
-        this.prevTab
-        this.allTabs
-        this.activeTab
-        this.isTab = false
-        this.target = this.getAttribute('target')
-
-        if (this.hasAttribute('variant') && this.getAttribute('variant') === 'tab') {
-            this.isTab = true
-        }
-
-        this.tabSlot.addEventListener('slotchange', () => {
-            this.tabSlot.assignedElements().forEach((tab, index) => {
-                tab.dataset.rank = index
-            })
-        })
-        this.allTabs = this.tabSlot.assignedElements();
-
-        this.tabSlot.addEventListener('click', e => {
-            if (e.target === this.prevTab || !e.target.closest('sm-tab'))
-                return
-            if (this.prevTab)
-                this.prevTab.classList.remove('active')
-            e.target.classList.add('active')
-
-            e.target.scrollIntoView({
-                behavior: 'smooth',
-                block: 'nearest',
-                inline: 'center'
-            })
-            this.moveIndiactor(e.target.getBoundingClientRect())
-            this.sendDetails(e.target)
-            this.prevTab = e.target;
-            this.activeTab = e.target;
-        })
-        let resizeObserver = new ResizeObserver(entries => {
-            entries.forEach((entry) => {
-                if (this.prevTab) {
-                    let tabDimensions = this.activeTab.getBoundingClientRect();
-                    this.moveIndiactor(tabDimensions)
-                }
-            })
-        })
-        resizeObserver.observe(this)
-        let observer = new IntersectionObserver((entries) => {
-            entries.forEach((entry) => {
-                if (entry.isIntersecting) {
-                    this.indicator.style.transition = 'none'
-                    if (this.activeTab) {
-                        let tabDimensions = this.activeTab.getBoundingClientRect();
-                        this.moveIndiactor(tabDimensions)
-                    } else {
-                        this.allTabs[0].classList.add('active')
-                        let tabDimensions = this.allTabs[0].getBoundingClientRect();
-                        this.moveIndiactor(tabDimensions)
-                        this.sendDetails(this.allTabs[0])
-                        this.prevTab = this.tabSlot.assignedElements()[0];
-                        this.activeTab = this.prevTab;
-                    }
-                }
-            })
-        }, {
-            threshold: 1.0
-        })
-        observer.observe(this)
-    }
-})
-
-// tab-panels
-
-const smTabPanels = document.createElement('template')
-smTabPanels.innerHTML = `
-<style>
-*{
-    padding: 0;
-    margin: 0;
-    -webkit-box-sizing: border-box;
-            box-sizing: border-box;
-} 
-.panel-container{
-    position: relative;
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    width: 100%;
-    height: 100%;
-    overflow: hidden auto;
-}
-slot::slotted(.hide-completely){
-    display: none;
-}      
-</style>
-<div part="panel-container" class="panel-container">
-    <slot>Nothing to see here.</slot>
-</div>
-`;
-
-customElements.define('sm-tab-panels', class extends HTMLElement {
-    constructor() {
-        super()
-        this.attachShadow({
-            mode: 'open'
-        }).append(smTabPanels.content.cloneNode(true))
-        this.panelSlot = this.shadowRoot.querySelector('slot');
-    }
-    connectedCallback() {
-
-        //animations
-        let flyInLeft = [{
-                    opacity: 0,
-                    transform: 'translateX(-1rem)'
-                },
-                {
-                    opacity: 1,
-                    transform: 'none'
-                }
-            ],
-            flyInRight = [{
-                    opacity: 0,
-                    transform: 'translateX(1rem)'
-                },
-                {
-                    opacity: 1,
-                    transform: 'none'
-                }
-            ],
-            flyOutLeft = [{
-                    opacity: 1,
-                    transform: 'none'
-                },
-                {
-                    opacity: 0,
-                    transform: 'translateX(-1rem)'
-                }
-            ],
-            flyOutRight = [{
-                    opacity: 1,
-                    transform: 'none'
-                },
-                {
-                    opacity: 0,
-                    transform: 'translateX(1rem)'
-                }
-            ],
-            animationOptions = {
-                duration: 300,
-                fill: 'forwards',
-                easing: 'ease'
-            }
-        this.prevPanel
-        this.allPanels
-        this.previousRank
-
-        this.panelSlot.addEventListener('slotchange', () => {
-            this.panelSlot.assignedElements().forEach((panel) => {
-                panel.classList.add('hide-completely')
-            })
-        })
-        this.allPanels = this.panelSlot.assignedElements()
-        this._targetBodyFlyRight = (targetBody) => {
-            targetBody.classList.remove('hide-completely')
-            targetBody.animate(flyInRight, animationOptions)
-        }
-        this._targetBodyFlyLeft = (targetBody) => {
-            targetBody.classList.remove('hide-completely')
-            targetBody.animate(flyInLeft, animationOptions)
-        }
-        document.addEventListener('switchtab', e => {
-            if (e.detail.target !== this.id)
-                return
-
-            if (this.prevPanel) {
-                let targetBody = this.allPanels[e.detail.rank],
-                    currentBody = this.prevPanel;
-                if (this.previousRank < e.detail.rank) {
-                    if (currentBody && !targetBody)
-                        currentBody.animate(flyOutLeft, animationOptions).onfinish = () => {
-                            currentBody.classList.add('hide-completely')
-                        }
-                    else if (targetBody && !currentBody) {
-                        this._targetBodyFlyRight(targetBody)
-                    } else if (currentBody && targetBody) {
-                        currentBody.animate(flyOutLeft, animationOptions).onfinish = () => {
-                            currentBody.classList.add('hide-completely')
-                            this._targetBodyFlyRight(targetBody)
-                        }
-                    }
-                } else {
-                    if (currentBody && !targetBody)
-                        currentBody.animate(flyOutRight, animationOptions).onfinish = () => {
-                            currentBody.classList.add('hide-completely')
-                        }
-                    else if (targetBody && !currentBody) {
-                        this._targetBodyFlyLeft(targetBody)
-                    } else if (currentBody && targetBody) {
-                        currentBody.animate(flyOutRight, animationOptions).onfinish = () => {
-                            currentBody.classList.add('hide-completely')
-                            this._targetBodyFlyLeft(targetBody)
-                        }
-                    }
-                }
-            } else {
-                this.allPanels[e.detail.rank].classList.remove('hide-completely')
-            }
-            this.previousRank = e.detail.rank
-            this.prevPanel = this.allPanels[e.detail.rank];
-        })
-    }
-})
-
-
-const scrollTabHeader = document.createElement('template')
-scrollTabHeader.innerHTML = `
-    <style>
-        *{
-            padding: 0;
-            margin: 0;
-            -webkit-box-sizing: border-box;
-                    box-sizing: border-box;
-        }   
-        :host{
-            --gap: 0;
-            --padding: 0;
-            --border-radius: 0.3rem;
-            --background: rgba(var(--foreground-color), 1);
-            display: flex;
-        }
-        .tab-header{
-            display: flex;
-            gap: var(--gap);
-            justify-content: flex-start;
-            padding: var(--padding);
-            border-radius: var(--border-radius);
-            background: var(--background);
-            overflow-x: auto;
-        }
-    </style>
-    <div part="tab-header" class="tab-header">
-        <slot></slot>
-    </div>
-`
-customElements.define('scroll-tab-header', class extends HTMLElement{
-    constructor(){
-        super()
-        this.shadow = this.attachShadow({
-            mode: 'open'
-        })
-        this.shadow.append(scrollTabHeader.content.cloneNode(true))
-        this.tabHeader = this.shadow.querySelector('.tab-header')
-        this.tabHeaderSlot = this.shadow.querySelector('slot')
-        this.targetPanelGroup
-        this._assignedElements
-        this.activeTab
-    }
-    
-    fireEvent = (panelIndex) => {
-        this.dispatchEvent(new CustomEvent('changePanel', {
-            bubbles: true,
-            composed: true,
-            detail: {
-                panelIndex,
-                targetPanelGroup: this.targetPanelGroup
-            }
-        }))
-    }
-
-    changeActiveTab = (tabIndex, fire = false) => {
-        if (this.activeTab)
-            this.activeTab.removeAttribute('active')
-        this._assignedElements[tabIndex].setAttribute('active', '')
-        this.tabHeader.scrollTo({
-            left: (this._assignedElements[tabIndex].getBoundingClientRect().left - this.tabHeader.getBoundingClientRect().left + this.tabHeader.scrollLeft),
-            behavior: 'smooth'
-        })
-        if(fire)
-            this.fireEvent(tabIndex)
-        this.activeTab = this._assignedElements[tabIndex]
-    }
-
-    handleClick = (e) => {
-        if (e.target.closest('[data-index]') && this.activeTab !== e.target.closest('[data-index]')) {
-            this.changeActiveTab(e.target.closest('[data-index]').dataset.index, true)
-        }
-    }
-
-    handleTabChange = (e) => {
-        if(this._assignedElements[e.detail.tabIndex] !== this.activeTab)
-            this.changeActiveTab(e.detail.tabIndex)            
-    }
-
-    connectedCallback() {
-        if (!this.dataset.target) return;
-
-        this.targetPanelGroup = this.dataset.target
-
-        this.tabHeaderSlot.addEventListener('slotchange', e => {
-            this._assignedElements = this.tabHeaderSlot.assignedElements()
-            this._assignedElements.forEach((elem, index) => {
-                elem.setAttribute('data-index', index)
-                if (elem.hasAttribute('active')) {
-                    this.changeActiveTab(elem.dataset.index, true)
-                }
-            })
-        })
-        this.tabHeader.addEventListener('click', this.handleClick)
-        document.addEventListener('changeTab', this.handleTabChange)
-    }
-    disconnectedCallbakc() {
-        this.tabHeader.removeEventListener('click', this.handleClick)
-    }
-})
-
-const scrollTabPanels = document.createElement('template')
-scrollTabPanels.innerHTML = `
-    <style>
-        *{
-            padding: 0;
-            margin: 0;
-            -webkit-box-sizing: border-box;
-                    box-sizing: border-box;
-        }   
-        :host{
-            --gap: 0;
-            --height: auto;
-            --border-radius: 0.3rem;
-            --background: rgba(var(--foreground-color), 1);
-        }
-        .tab-panels{
-            display: grid;
-            grid-auto-flow: column;
-            grid-auto-columns: 100%;
-            gap: var(--gap);
-            border-radius: var(--border-radius);
-            background: var(--background);
-            scroll-snap-type: x mandatory;
-            scroll-behavior: smooth;
-            content-visibility: auto;
-        }
-        slot::slotted(*){
-            scroll-snap-align: start;
-        }
-        @media (any-hover: none){
-            ::-webkit-scrollbar-track {
-                -webkit-box-shadow: none !important;
-                background-color: transparent !important;
-            }
-            ::-webkit-scrollbar {
-                height: 0;
-                background-color: transparent;
-            }
-            .tab-panels{
-                scrollbar-height: none;
-                overflow-x: 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;
-                &:hover{
-                    background: rgba(var(--text-color), 0.5);
-                }
-            }
-            .tab-panels{
-                overflow-x: hidden;
-            }
-        }
-    </style>
-    <div part="tab-panels" class="tab-panels">
-        <slot></slot>
-    </div>
-`
-customElements.define('scroll-tab-panels', class extends HTMLElement {
-    constructor() {
-        super()
-        this.shadow = this.attachShadow({
-            mode: 'open'
-        })
-        this.shadow.append(scrollTabPanels.content.cloneNode(true))
-        this.tabPanels = this.shadow.querySelector('.tab-panels')
-        this.tabPanelsSlot = this.shadow.querySelector('slot')
-        this._assignedElements
-        this.activePanel
-        this.debounceTimeout
-        this.timerId;
-    }
-
-    fireEvent = (tabIndex) => {
-        this.dispatchEvent(new CustomEvent('changeTab', {
-            bubbles: true,
-            composed: true,
-            detail: {
-                tabIndex
-            }
-        }))
-    }
-
-    handlePanelChange = (e) => {
-        if (e.detail.targetPanelGroup === this.id) {
-            this.tabPanels.scrollTo({
-                left: (this._assignedElements[e.detail.panelIndex].getBoundingClientRect().left - this.tabPanels.getBoundingClientRect().left + this.tabPanels.scrollLeft),
-                behavior: 'smooth'
-            })
-            // this._assignedElements[e.detail.panelIndex].scrollIntoView({block: "nearest", inline: 'start', behavior: 'smooth'})
-        }
-    }
-
-    scrollHorizontally = e => {
-        e.preventDefault()
-        const width = this.tabPanels.getBoundingClientRect().width
-        const scrollBy = e.deltaY > 0 ? width : -width
-        this.tabPanels.scrollBy({
-            left: scrollBy,
-            behavior: 'smooth'
-        })   
-    }
-
-    
-    connectedCallback() {
-        const panelObserver = new IntersectionObserver(entries => {
-            entries.forEach(entry => {
-                if (entry.isIntersecting) {
-                    if (this.debounceTimeout) {
-                        clearTimeout(this.debounceTimeout)
-                    }
-                    this.debounceTimeout = setTimeout(() => {
-                        this.fireEvent(entry.target.dataset.index)
-                        if (this.activePanel)
-                            this.activePanel.removeAttribute('active')
-                        this._assignedElements[entry.target.dataset.index].setAttribute('active', '')
-                        this.activePanel = this._assignedElements[entry.target.dataset.index]
-                    }, 100);
-                }
-            })
-        },
-            {
-                threshold: 0.8,
-                root: this.tabPanels
-        })
-        this.tabPanels.addEventListener('slotchange', e => {
-            this._assignedElements = this.tabPanelsSlot.assignedElements()
-            this._assignedElements.forEach((elem, index) => {
-                elem.setAttribute('data-index', index)
-                if (elem.hasAttribute('active')) {
-                    this.activePanel = elem
-                    this.fireEvent(elem.dataset.index)
-                }
-                panelObserver.observe(elem)
-            })
-        })
-        // this.tabPanels.addEventListener('wheel', this.scrollHorizontally)
-        document.addEventListener('changePanel', this.handlePanelChange)
-    }
-    
-    disconnectedCallback() {
-        document.removeEventListener('changePanel', this.handlePanelChange)
-    }
 })

assets/js/index.js

@@ -254,7 +254,7 @@ const siteMap = [
         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,
+        // isSold: true,
         buyUrl: `purchase_room`,
         status: `We are servicing current customers only. A new Blockchain-based version of Bitcoin Bonds will be available soon.`
       },
@@ -262,7 +262,7 @@ const siteMap = [
         name: `Bob's Fund`,
         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 most hold for 20 years.`,
-        isSold: true,
+        // isSold: true,
         buyUrl: `purchase_room`
       },
 /*       {
@@ -489,14 +489,6 @@ const render = {
     card.querySelector(".intern__project").textContent = project;
     return card;
   },
-  icoPhase(obj) {
-    const { phase, date, info } = obj;
-    const template = getRef("ico_phase_template").content.cloneNode(true);
-    template.querySelector(".phase__title").textContent = `Phase ${phase}`;
-    template.querySelector(".phase__date").textContent = date;
-    template.querySelector(".phase__description").textContent = info;
-    return template;
-  },
   floorLabel(floorNumber, offsetTop) {
     const floorLabel = getRef("floor_indicator_template").content.cloneNode(
       true
@@ -508,7 +500,7 @@ const render = {
   outletListItem(outletObj) {
     const { name, brief, url } = outletObj
     const li = outletListitemTemplate.content.cloneNode(true).firstElementChild
-    li.querySelector('a').href = `${url}.html`
+    li.querySelector('a').href = `${url}`
     li.querySelector('.outlet-title').textContent = name
     // li.querySelector('.outlet-brief').textContent = brief ? brief : ''
     return li

bitcoinbonds.html

@@ -81,7 +81,7 @@
                         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">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">
                     <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" />
@@ -95,9 +95,9 @@
             <div id="expanding_tile" class="hide-completely"></div>
             <a class="room-tile room-tile--main" href="#performance_room">
                 <div class="tile-content">
-                    <div id="performance_preview"></div>
                     <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>
                     <h4 class="room-tile__title">Performance</h4>
+                    <div id="performance_preview"></div>
                 </div>
             </a>
             <a class="room-tile" href="#product_room">
@@ -306,7 +306,7 @@
             {
                 series: 2513,
                 startDate: 1496880000000
-            }
+            },
         ]
                 
         function getCurrentRates() {
@@ -386,7 +386,7 @@
                 }
 
                 timelineItem.append(tilelineItemHeader, render.bitBondRow(obj))
-                frag.prepend(timelineItem)
+                frag.append(timelineItem)
             })
             getRef('bit_bond_series__container').append(frag)
 

bob'sfund.html

@@ -87,7 +87,7 @@
             <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">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"><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>
@@ -98,9 +98,9 @@
             <div id="expanding_tile" class="hide-completely"></div>
             <a class="room-tile room-tile--main" href="#performance_room">
                 <div class="tile-content">
-                    <div id="performance_preview"></div>
                     <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>
                     <h4 class="room-tile__title">Performance</h4>
+                    <div id="performance_preview"></div>
                 </div>
             </a>
             <a class="room-tile" href="#product_room">
@@ -541,9 +541,9 @@
                     timelineItem.append(fundCard)
                 }
                 timelineItem.prepend(tilelineItemHeader)
-                timelineItemsFrag.prepend(timelineItem)
+                timelineItemsFrag.append(timelineItem)
                 
-                if(randIndex === index){
+                if(index === 0){
                     const fundCard = create('div', {
                         className: 'grid card'
                     })