UI update
-- added performance graph
This commit is contained in:
sairaj mote
parent
55c1fc257f
commit
1926084bdb
@ -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 {
|
||||
@ -1140,18 +1141,23 @@ ol[type="1"] {
|
||||
}
|
||||
|
||||
.room-tile__icon {
|
||||
height: 2.5rem;
|
||||
width: 2.5rem;
|
||||
margin-bottom: 1rem;
|
||||
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);
|
||||
fill: rgba(var(--text-color), 0.1);
|
||||
}
|
||||
|
||||
.room-tile__title {
|
||||
font-size: 1.2rem;
|
||||
border-bottom: 1px solid;
|
||||
align-self: flex-start;
|
||||
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 {
|
||||
@ -1259,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;
|
||||
@ -1288,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 {
|
||||
@ -1304,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;
|
||||
|
||||
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{
|
||||
@ -1030,17 +1031,26 @@ ol[type="1"]{
|
||||
}
|
||||
}
|
||||
.room-tile__icon{
|
||||
height: 2.5rem;
|
||||
width: 2.5rem;
|
||||
margin-bottom: 1rem;
|
||||
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);
|
||||
fill: rgba(var(--text-color), 0.1);
|
||||
}
|
||||
}
|
||||
.room-tile__title{
|
||||
font-size: 1.2rem;
|
||||
border-bottom: 1px solid;
|
||||
align-self: flex-start;
|
||||
// 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-top: auto;
|
||||
@ -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;
|
||||
|
||||
@ -80,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">
|
||||
<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 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>
|
||||
</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">
|
||||
@ -108,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>
|
||||
@ -264,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>
|
||||
@ -335,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(){
|
||||
@ -352,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(),
|
||||
@ -367,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))
|
||||
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>
|
||||
156
bob'sfund.html
156
bob'sfund.html
@ -74,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">
|
||||
<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 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>
|
||||
</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">
|
||||
@ -102,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>
|
||||
@ -191,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>
|
||||
@ -452,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()
|
||||
@ -478,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}))
|
||||
@ -499,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">
|
||||
@ -520,10 +551,17 @@
|
||||
timelineItemsFrag.append(timelineItem)
|
||||
|
||||
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">
|
||||
@ -546,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>
|
||||
22
ico.html
22
ico.html
@ -100,20 +100,28 @@
|
||||
<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>
|
||||
@ -172,7 +180,7 @@
|
||||
<section id="purchase_room" class="grid room">
|
||||
<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 $10 or ₹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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user