sairaj mote
GitHub
commit
5a0775adc8
@ -435,19 +435,20 @@ ol[type="1"] {
|
||||
gap: 1rem;
|
||||
padding: 0.5rem 0 0.5rem 1rem;
|
||||
align-items: center;
|
||||
background-color: var(--banner-color);
|
||||
border: 0.1rem solid var(--banner-color);
|
||||
grid-template-columns: 1fr auto;
|
||||
border-radius: 0.5rem;
|
||||
margin: 0 1rem;
|
||||
}
|
||||
.banner .close-icon {
|
||||
fill: white;
|
||||
width: 2.2rem;
|
||||
height: 2.2rem;
|
||||
color: rgba(var(--text-color), 0.7);
|
||||
}
|
||||
|
||||
.banner__text {
|
||||
max-width: unset;
|
||||
font-size: 0.9rem;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#elevator_popup {
|
||||
@ -828,7 +829,7 @@ ol[type="1"] {
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 1.1rem;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.series-container {
|
||||
@ -837,12 +838,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 +852,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,24 +1141,27 @@ ol[type="1"] {
|
||||
}
|
||||
|
||||
.room-tile__icon {
|
||||
margin-top: auto;
|
||||
margin-bottom: 1rem;
|
||||
height: 3rem;
|
||||
width: 3rem;
|
||||
position: absolute;
|
||||
height: 8rem;
|
||||
width: 8rem;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.room-tile__icon:not(.room-tile__icon--colored) {
|
||||
fill: rgba(var(--text-color), 1);
|
||||
}
|
||||
.room-tile__icon--colored {
|
||||
filter: drop-shadow(0 1rem 0.5rem rgba(0, 0, 0, 0.2));
|
||||
fill: rgba(var(--text-color), 0.1);
|
||||
}
|
||||
|
||||
.room-tile__title {
|
||||
font-size: 1.2rem;
|
||||
font-size: 0.9rem;
|
||||
padding: 0.4rem 0.8rem;
|
||||
border: solid 0.1rem var(--secondary-text-color);
|
||||
color: var(--secondary-text-color);
|
||||
border-radius: 0.3rem;
|
||||
}
|
||||
|
||||
#performance_preview {
|
||||
margin-bottom: auto;
|
||||
margin-top: auto;
|
||||
}
|
||||
#performance_preview > * {
|
||||
padding: 0;
|
||||
@ -1262,7 +1265,7 @@ ol[type="1"] {
|
||||
background-size: contain;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background-color: var(--banner-color);
|
||||
border: solid 0.1rem var(--banner-color);
|
||||
box-shadow: 0 1rem 3rem -1rem rgba(0, 0, 0, 0.2);
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
overflow: hidden;
|
||||
@ -1291,15 +1294,14 @@ ol[type="1"] {
|
||||
.tile__title {
|
||||
font-size: 1.25rem;
|
||||
line-height: 1;
|
||||
color: white;
|
||||
font-weight: calc(500 * var(--font-weight-factor));
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.tile__brief {
|
||||
margin-top: 0.5rem;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
z-index: 1;
|
||||
color: rgba(var(--text-color), 0.7);
|
||||
}
|
||||
|
||||
.round {
|
||||
@ -1307,8 +1309,8 @@ ol[type="1"] {
|
||||
flex-shrink: 0;
|
||||
padding: 0.4rem 1rem;
|
||||
border-radius: 0.3rem;
|
||||
background-color: white;
|
||||
color: var(--banner-color);
|
||||
color: white;
|
||||
background-color: var(--banner-color);
|
||||
font-weight: 700 !important;
|
||||
font-size: 1rem;
|
||||
z-index: 1;
|
||||
@ -1328,7 +1330,7 @@ ol[type="1"] {
|
||||
.timeline-item:not(:last-of-type):before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
width: 0.1rem;
|
||||
height: calc(100% + 4rem);
|
||||
top: 0;
|
||||
left: 0;
|
||||
@ -1337,10 +1339,11 @@ ol[type="1"] {
|
||||
.timeline-item:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
padding: 0.3rem;
|
||||
height: 0.6rem;
|
||||
width: 0.6rem;
|
||||
border-radius: 50%;
|
||||
top: 0;
|
||||
left: -0.3rem;
|
||||
left: -0.25rem;
|
||||
background-color: rgba(var(--text-color), 1);
|
||||
}
|
||||
|
||||
|
||||
2
assets/css/main.min.css
vendored
2
assets/css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -367,18 +367,19 @@ ol[type="1"]{
|
||||
gap: 1rem;
|
||||
padding: 0.5rem 0 0.5rem 1rem;
|
||||
align-items: center;
|
||||
background-color: var(--banner-color);
|
||||
border: 0.1rem solid var(--banner-color);
|
||||
grid-template-columns: 1fr auto;
|
||||
border-radius: 0.5rem;
|
||||
margin: 0 1rem;
|
||||
.close-icon{
|
||||
fill: white;
|
||||
width: 2.2rem;
|
||||
height: 2.2rem;
|
||||
color: rgba(var(--text-color), 0.7);
|
||||
}
|
||||
}
|
||||
.banner__text{
|
||||
max-width: unset;
|
||||
font-size: 0.9rem;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#elevator_popup{
|
||||
@ -738,7 +739,7 @@ ol[type="1"]{
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
.value{
|
||||
font-size: 1.1rem;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.series-container{
|
||||
@ -746,11 +747,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 +764,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,22 +1031,29 @@ ol[type="1"]{
|
||||
}
|
||||
}
|
||||
.room-tile__icon{
|
||||
margin-top: auto;
|
||||
margin-bottom: 1rem;
|
||||
height: 3rem;
|
||||
width: 3rem;
|
||||
position: absolute;
|
||||
height: 8rem;
|
||||
width: 8rem;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
// margin-bottom: 1rem;
|
||||
&:not(.room-tile__icon--colored){
|
||||
fill: rgba(var(--text-color), 1);
|
||||
}
|
||||
&--colored{
|
||||
filter: drop-shadow(0 1rem 0.5rem rgba(0,0,0,0.2));
|
||||
fill: rgba(var(--text-color), 0.1);
|
||||
}
|
||||
}
|
||||
.room-tile__title{
|
||||
font-size: 1.2rem;
|
||||
// font-size: 1.2rem;
|
||||
// border-bottom: 1px solid;
|
||||
font-size: 0.9rem;
|
||||
padding: 0.4rem 0.8rem;
|
||||
border: solid 0.1rem var(--secondary-text-color);
|
||||
color: var(--secondary-text-color);
|
||||
border-radius: 0.3rem;
|
||||
// align-self: flex-start;
|
||||
}
|
||||
#performance_preview{
|
||||
margin-bottom: auto;
|
||||
margin-top: auto;
|
||||
& > *{
|
||||
padding: 0;
|
||||
}
|
||||
@ -1144,7 +1154,7 @@ ol[type="1"]{
|
||||
background-size: contain;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background-color: var(--banner-color);
|
||||
border : solid 0.1rem var(--banner-color);
|
||||
box-shadow: 0 1rem 3rem -1rem rgba(0, 0, 0, 0.2);
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
overflow: hidden;
|
||||
@ -1174,22 +1184,21 @@ ol[type="1"]{
|
||||
.tile__title{
|
||||
font-size: 1.25rem;
|
||||
line-height: 1;
|
||||
color: white;
|
||||
font-weight: calc(500 * var(--font-weight-factor));
|
||||
z-index: 1;
|
||||
}
|
||||
.tile__brief{
|
||||
margin-top: 0.5rem;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
z-index: 1;
|
||||
color: rgba(var(--text-color), 0.7);
|
||||
}
|
||||
.round{
|
||||
display: inline-flex;
|
||||
flex-shrink: 0;
|
||||
padding: 0.4rem 1rem;
|
||||
border-radius: 0.3rem;
|
||||
background-color: white;
|
||||
color: var(--banner-color);
|
||||
color: white;
|
||||
background-color: var(--banner-color);
|
||||
font-weight: 700 !important;
|
||||
font-size: 1rem;
|
||||
z-index: 1;
|
||||
@ -1207,7 +1216,7 @@ ol[type="1"]{
|
||||
&:not(:last-of-type):before{
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
width: 0.1rem;
|
||||
height: calc(100% + 4rem);
|
||||
top: 0;
|
||||
left: 0;
|
||||
@ -1216,10 +1225,11 @@ ol[type="1"]{
|
||||
&:after{
|
||||
content: '';
|
||||
position: absolute;
|
||||
padding: 0.3rem;
|
||||
height: 0.6rem;
|
||||
width: 0.6rem;
|
||||
border-radius: 50%;
|
||||
top: 0;
|
||||
left: -0.3rem;
|
||||
left: -0.25rem;
|
||||
background-color: rgba(var(--text-color), 1);
|
||||
}
|
||||
}
|
||||
|
||||
@ -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)
|
||||
}
|
||||
})
|
||||
@ -254,22 +254,23 @@ 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.`
|
||||
},
|
||||
{
|
||||
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,
|
||||
buyUrl: `purchase_room`
|
||||
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",
|
||||
url: "ico",
|
||||
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,
|
||||
// isSold: true,
|
||||
buyUrl: `purchase_room`
|
||||
}, */
|
||||
],
|
||||
@ -489,14 +490,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 +501,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
|
||||
|
||||
@ -46,22 +46,7 @@
|
||||
</label>
|
||||
</header>
|
||||
<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"
|
||||
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()">
|
||||
<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 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-11.414L9.172 7.757 7.757 9.172 10.586 12l-2.829 2.828 1.415 1.415L12 13.414l2.828 2.829 1.415-1.415L13.414 12l2.829-2.828-1.415-1.415L12 10.586z" />
|
||||
</svg>
|
||||
</button> -->
|
||||
</div>
|
||||
<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">
|
||||
@ -81,7 +66,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,15 +80,21 @@
|
||||
<div id="expanding_tile" class="hide-completely"></div>
|
||||
<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" 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>
|
||||
<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>
|
||||
</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 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" 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">
|
||||
@ -123,6 +114,7 @@
|
||||
<h1 id="hero_title"></h1>
|
||||
<section class="room-carousel">
|
||||
<section id="performance_room" class="grid room">
|
||||
<canvas id="performance_graph"></canvas>
|
||||
<p>Bitcoin bonds different series release timeline</p>
|
||||
<ul id="bit_bond_series__container" class="timeline-container"></ul>
|
||||
</section>
|
||||
@ -279,6 +271,7 @@
|
||||
</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="assets/js/components.js"></script>
|
||||
<script src="assets/js/index.js"></script>
|
||||
<script>
|
||||
@ -306,7 +299,7 @@
|
||||
{
|
||||
series: 2513,
|
||||
startDate: 1496880000000
|
||||
}
|
||||
},
|
||||
]
|
||||
|
||||
function getCurrentRates() {
|
||||
@ -350,16 +343,27 @@
|
||||
return tmp
|
||||
}
|
||||
|
||||
function calcNetValue(BTC_base, startDate, minIpa, maxPeriod, cut, amount, USD_base) {
|
||||
console.log(BTC_base, startDate, minIpa, maxPeriod, cut, amount, USD_base)
|
||||
function calcNetValue(obj) {
|
||||
let {isHistorical = false, BTC_base, startDate, minIpa, maxPeriod, cut, amount, USD_base, histBtc, histUsd} = obj
|
||||
let gain, interest, net;
|
||||
gain = (BTC_current - BTC_base) / BTC_base;
|
||||
if(isHistorical){
|
||||
gain = (histBtc - BTC_base) / BTC_base;
|
||||
}
|
||||
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;
|
||||
const percentGain = (((net * USD_current) - amount) / amount) * 100
|
||||
if(isHistorical){
|
||||
currentValue = net * histUsd
|
||||
}
|
||||
else{
|
||||
currentValue = net * USD_current
|
||||
}
|
||||
const percentGain = ((currentValue - amount) / amount) * 100
|
||||
//console.info(gain, interest, net)
|
||||
return [net * USD_current, percentGain];
|
||||
return [currentValue, percentGain];
|
||||
}
|
||||
|
||||
function renderAllSeries(){
|
||||
@ -367,8 +371,17 @@
|
||||
getRef('bit_bond_series__container').innerHTML = ''
|
||||
const randIndex = getRandom(0, bitBondSerieses.length - 1)
|
||||
bitBondSerieses.forEach((series, index) => {
|
||||
const [currentValue, percentGain] = calcNetValue(series.series, series.startDate, 0.13, 5, 0.5, 100, 64)
|
||||
const obj = {
|
||||
let obj = {
|
||||
BTC_base: series.series,
|
||||
startDate: series.startDate,
|
||||
minIpa: 0.13,
|
||||
maxPeriod: 5,
|
||||
cut: 0.5,
|
||||
amount: 100,
|
||||
USD_base: 64
|
||||
}
|
||||
const [currentValue, percentGain] = calcNetValue(obj)
|
||||
const bondObj = {
|
||||
series: series.series,
|
||||
percentGain,
|
||||
timeElapsed: new Date().getFullYear() - new Date(series.startDate).getFullYear(),
|
||||
@ -382,15 +395,103 @@
|
||||
text: getFormatedTime(series.startDate, true)
|
||||
})
|
||||
if(randIndex === index){
|
||||
getRef('performance_preview').append(render.bitBondRow(obj))
|
||||
renderGraph(obj)
|
||||
getRef('performance_preview').append(render.bitBondRow(bondObj))
|
||||
}
|
||||
|
||||
timelineItem.append(tilelineItemHeader, render.bitBondRow(obj))
|
||||
frag.prepend(timelineItem)
|
||||
timelineItem.append(tilelineItemHeader, render.bitBondRow(bondObj))
|
||||
frag.append(timelineItem)
|
||||
})
|
||||
getRef('bit_bond_series__container').append(frag)
|
||||
|
||||
}
|
||||
async function getPrices() {
|
||||
return [btcPrices, inrPrices] = await Promise.all([
|
||||
fetch('https://www.alphavantage.co/query?function=DIGITAL_CURRENCY_MONTHLY&symbol=BTC&market=USD&apikey=DDN5S53DXQ4QH4V4').then(res => res.json()),
|
||||
fetch('https://www.alphavantage.co/query?function=FX_MONTHLY&from_symbol=USD&to_symbol=INR&apikey=DDN5S53DXQ4QH4V4').then(res => res.json()),
|
||||
])
|
||||
}
|
||||
|
||||
let dates = []
|
||||
let historicalData = []
|
||||
let tableOfData = []
|
||||
|
||||
async function getData(obj) {
|
||||
let [btcPrices, inrPrices] = await getPrices()
|
||||
btcPrices = btcPrices['Time Series (Digital Currency Monthly)']
|
||||
inrPrices = inrPrices['Time Series FX (Monthly)']
|
||||
let allBtcPrices = []
|
||||
let counter = 0
|
||||
for (let dataPoint in btcPrices) {
|
||||
if (counter < 12) {
|
||||
let BTC_base = btcPrices[dataPoint]['1a. open (USD)']
|
||||
allBtcPrices.push(BTC_base)
|
||||
dates.push(dataPoint.split('-').join('/'))
|
||||
counter++
|
||||
}
|
||||
else {
|
||||
break
|
||||
}
|
||||
}
|
||||
let index = 0
|
||||
for (let dataPoint in inrPrices) {
|
||||
if (allBtcPrices[index]) {
|
||||
let histBtc = parseFloat(allBtcPrices[index])
|
||||
let histUsd = parseFloat(inrPrices[dataPoint]['1. open'])
|
||||
obj.isHistorical = true
|
||||
let [currentValue, gain] = calcNetValue({...obj, histBtc, histUsd})
|
||||
// console.log(currentValue)
|
||||
historicalData.push(currentValue)
|
||||
index++
|
||||
}
|
||||
else {
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
let ctx = getRef('performance_graph').getContext('2d');
|
||||
|
||||
let gradientFill = ctx.createLinearGradient(200, 0, 200, 400);
|
||||
gradientFill.addColorStop(0, "rgba(128, 182, 244, 0.6)");
|
||||
gradientFill.addColorStop(1, "transparent");
|
||||
|
||||
async function renderGraph(obj) {
|
||||
await getData(obj)
|
||||
|
||||
let myChart = new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: dates.reverse(),
|
||||
datasets: [{
|
||||
label: `$${obj.BTC_base} series performace($)`,
|
||||
data: historicalData.reverse(),
|
||||
borderColor: '#034baa',
|
||||
fill: true,
|
||||
backgroundColor: gradientFill,
|
||||
borderWidth: 4,
|
||||
tension: 0.3
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true
|
||||
},
|
||||
x: {
|
||||
grid: {
|
||||
display: false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
190
bob'sfund.html
190
bob'sfund.html
@ -45,31 +45,8 @@
|
||||
<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"
|
||||
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()">
|
||||
<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 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-11.414L9.172 7.757 7.757 9.172 10.586 12l-2.829 2.828 1.415 1.415L12 13.414l2.828 2.829 1.415-1.415L13.414 12l2.829-2.828-1.415-1.415L12 10.586z" />
|
||||
</svg>
|
||||
</button> -->
|
||||
</div>
|
||||
<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">
|
||||
@ -78,16 +55,15 @@
|
||||
<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 most hold for 20 years. Over a very long time period, investor returns
|
||||
of Bitcoin price gains, but they must hold for 20 years. Over a very long time period, investor returns
|
||||
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>
|
||||
</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">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,15 +74,20 @@
|
||||
<div id="expanding_tile" class="hide-completely"></div>
|
||||
<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" 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>
|
||||
<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>
|
||||
</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 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" 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">
|
||||
@ -126,6 +107,7 @@
|
||||
<h1 id="hero_title"></h1>
|
||||
<section class="room-carousel">
|
||||
<section id="performance_room" class="grid room">
|
||||
<canvas id="performance_graph"></canvas>
|
||||
<p>Bobs fund different fund release timeline</p>
|
||||
<ul id="bobs_fund_timeline" class="timeline-container"></ul>
|
||||
</section>
|
||||
@ -215,6 +197,7 @@
|
||||
</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="assets/js/components.js"></script>
|
||||
<script src="assets/js/index.js"></script>
|
||||
<script>
|
||||
@ -476,15 +459,27 @@
|
||||
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;
|
||||
function calcNetValue(obj) {
|
||||
let {isHistorical = false, BTC_base, USD_base, amount, fee, histBtc, histUsd} = obj
|
||||
let gain, interest, net = 0, currentValue = 0;
|
||||
console.info(obj)
|
||||
if(isHistorical){
|
||||
gain = (histBtc - BTC_base) / BTC_base;
|
||||
}
|
||||
else{
|
||||
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)];
|
||||
if(isHistorical){
|
||||
currentValue = net * histUsd
|
||||
}
|
||||
else{
|
||||
currentValue = net * USD_current
|
||||
}
|
||||
percentGain = ((currentValue - amount) / amount) * 100
|
||||
return [currentValue, percentGain.toFixed(0)];
|
||||
}
|
||||
function renderAllFundInvestors(){
|
||||
const frag = document.createDocumentFragment()
|
||||
@ -502,7 +497,13 @@
|
||||
|
||||
if(fund.hasOwnProperty('investors')){
|
||||
investors.forEach(investor => {
|
||||
let [currentValue, gain] = calcNetValue(BTC_base, USD_base, investor.invested, 0)
|
||||
let obj = {
|
||||
BTC_base,
|
||||
USD_base,
|
||||
amount: investor.invested,
|
||||
fee: 0
|
||||
}
|
||||
let [currentValue, gain] = calcNetValue(obj)
|
||||
currentValue = parseFloat(currentValue.toFixed(2))
|
||||
timeElapsed = (new Date().getFullYear() - 2017)
|
||||
frag.append(render.bobFundRow({...investor, currentValue, gain, timeElapsed}))
|
||||
@ -523,7 +524,13 @@
|
||||
const fundCard = create('div', {
|
||||
className: 'grid card'
|
||||
})
|
||||
let [currentValue, gain] = calcNetValue(BTC_base, USD_base, invested, 0)
|
||||
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">
|
||||
@ -541,13 +548,20 @@
|
||||
timelineItem.append(fundCard)
|
||||
}
|
||||
timelineItem.prepend(tilelineItemHeader)
|
||||
timelineItemsFrag.prepend(timelineItem)
|
||||
timelineItemsFrag.append(timelineItem)
|
||||
|
||||
if(randIndex === index){
|
||||
if(index === 0){
|
||||
let obj = {
|
||||
BTC_base,
|
||||
USD_base,
|
||||
amount: invested,
|
||||
fee: 0,
|
||||
}
|
||||
renderGraph(obj)
|
||||
const fundCard = create('div', {
|
||||
className: 'grid card'
|
||||
})
|
||||
let [currentValue, gain] = calcNetValue(BTC_base, USD_base, invested, 0)
|
||||
let [currentValue, gain] = calcNetValue(obj)
|
||||
currentValue = parseFloat(currentValue.toFixed(2))
|
||||
fundCard.innerHTML = `
|
||||
<div class="grid">
|
||||
@ -570,6 +584,98 @@
|
||||
})
|
||||
getRef('bobs_fund_timeline').append(timelineItemsFrag)
|
||||
}
|
||||
|
||||
async function getPrices() {
|
||||
return [btcPrices, inrPrices] = await Promise.all([
|
||||
fetch('https://www.alphavantage.co/query?function=DIGITAL_CURRENCY_MONTHLY&symbol=BTC&market=USD&apikey=DDN5S53DXQ4QH4V4').then(res => res.json()),
|
||||
fetch('https://www.alphavantage.co/query?function=FX_MONTHLY&from_symbol=USD&to_symbol=INR&apikey=DDN5S53DXQ4QH4V4').then(res => res.json()),
|
||||
])
|
||||
}
|
||||
|
||||
let dates = []
|
||||
let historicalData = []
|
||||
let tableOfData = []
|
||||
|
||||
async function getData(obj) {
|
||||
let [btcPrices, inrPrices] = await getPrices()
|
||||
btcPrices = btcPrices['Time Series (Digital Currency Monthly)']
|
||||
inrPrices = inrPrices['Time Series FX (Monthly)']
|
||||
let allBtcPrices = []
|
||||
let counter = 0
|
||||
for (let dataPoint in btcPrices) {
|
||||
if (counter < 12) {
|
||||
let BTC_base = btcPrices[dataPoint]['1a. open (USD)']
|
||||
allBtcPrices.push(BTC_base)
|
||||
dates.push(dataPoint.split('-').join('/'))
|
||||
counter++
|
||||
}
|
||||
else {
|
||||
break
|
||||
}
|
||||
}
|
||||
let index = 0
|
||||
for (let dataPoint in inrPrices) {
|
||||
if (allBtcPrices[index]) {
|
||||
let histBtc = parseFloat(allBtcPrices[index])
|
||||
let histUsd = parseFloat(inrPrices[dataPoint]['1. open'])
|
||||
obj.isHistorical = true
|
||||
let [currentValue, gain] = calcNetValue({...obj, histBtc, histUsd})
|
||||
// console.log(currentValue)
|
||||
historicalData.push(currentValue)
|
||||
index++
|
||||
}
|
||||
else {
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
let ctx = getRef('performance_graph').getContext('2d');
|
||||
|
||||
let gradientFill = ctx.createLinearGradient(200, 0, 200, 400);
|
||||
gradientFill.addColorStop(0, "rgba(128, 182, 244, 0.6)");
|
||||
gradientFill.addColorStop(1, "transparent");
|
||||
|
||||
async function renderGraph(obj) {
|
||||
await getData(obj)
|
||||
|
||||
let myChart = new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: dates.reverse(),
|
||||
datasets: [{
|
||||
label: `Bob's fund performace($)`,
|
||||
data: historicalData.reverse(),
|
||||
borderColor: '#034baa',
|
||||
fill: true,
|
||||
backgroundColor: gradientFill,
|
||||
pointBackgroundColor: 'white',
|
||||
pointRadius: 4,
|
||||
pointHoverRadius: 6,
|
||||
pointHoverBorderWidth: 4,
|
||||
borderWidth: 2,
|
||||
tension: 0.3
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true
|
||||
},
|
||||
x: {
|
||||
grid: {
|
||||
display: false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
69
ico.html
69
ico.html
@ -7,7 +7,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>ICO</title>
|
||||
<link rel="shortcut icon" href="assets/RM logo.png" type="image/png">
|
||||
<link rel="stylesheet" href="css/main.min.css">
|
||||
<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">
|
||||
</head>
|
||||
@ -75,58 +75,53 @@
|
||||
<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">
|
||||
<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()">
|
||||
<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 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-11.414L9.172 7.757 7.757 9.172 10.586 12l-2.829 2.828 1.415 1.415L12 13.414l2.828 2.829 1.415-1.415L13.414 12l2.829-2.828-1.415-1.415L12 10.586z" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<section id="outlet_switcher__outlet_container" class="outlet_switcher__floor flex align-center"></section>
|
||||
<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 grid margin-bottom-3r">
|
||||
<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. It was envisioned to sell 21 million
|
||||
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. The ICO will resume after de-risking process is complete.
|
||||
</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"><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">Initial Coin Offering</h2>
|
||||
<p>
|
||||
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. 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. The ICO will resume after de-risking process is complete.
|
||||
</p>
|
||||
</section>
|
||||
<section class="rooms-layout">
|
||||
<div id="expanding_tile" class="hide-completely"></div>
|
||||
<a class="room-tile room-tile--main" href="#investor_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>
|
||||
<h4 class="room-tile__title">Investors</h4>
|
||||
<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" 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">Investors</h4>
|
||||
</div>
|
||||
</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 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" 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">
|
||||
<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>
|
||||
<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" 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>
|
||||
|
||||
</div>
|
||||
</a>
|
||||
</section>
|
||||
@ -143,7 +138,6 @@
|
||||
<section id="ico_investors" class="people-grid"></section>
|
||||
</section>
|
||||
<section id="product_room" class="grid room">
|
||||
<h3 class="h3 margin-bottom-1-5r">Product</h3>
|
||||
<p class="margin-bottom-3r">
|
||||
Please refer to the whitepaper <a href="https://www.ranchimall.net/ICO/">here</a> for detailed terms.
|
||||
RanchiMall Initial Coin Offering (ICO) abides by the terms we offered in our ICO whitepaper available
|
||||
@ -184,10 +178,9 @@
|
||||
</ol>
|
||||
</section>
|
||||
<section id="purchase_room" class="grid room">
|
||||
<h3 class="h3 margin-bottom-1-5r">Purchase</h3>
|
||||
<p>
|
||||
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/">our exchange</a> for USD 10 or Rs 500 if you want to become a
|
||||
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
|
||||
tokenholder, and be part of the learning process through our community. Our rules are designed to
|
||||
favour long term investors.
|
||||
<br> Once you initiate a tokenholder relationship, please be patient to stay the
|
||||
@ -202,8 +195,8 @@
|
||||
</section>
|
||||
</main>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
|
||||
<script src="js/components.js"></script>
|
||||
<script src="js/index.js"></script>
|
||||
<script src="assets/js/components.js"></script>
|
||||
<script src="assets/js/index.js"></script>
|
||||
<script>
|
||||
const icoPhases = [
|
||||
{
|
||||
|
||||
Loading…
Reference in New Issue
Block a user